chore(release): refresh private package staging

.publish/ui/components/ToggleCount.wrn

@@ -1,3 +1,5 @@
+import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
+
 component ToggleCount {
   outputs {
     change(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
@@ -222,7 +224,7 @@ component ToggleCount {
       data-variant="{variant}"
       data-value="{selectedValue}"
       data-disabled="{disabled ? 'true' : 'false'}"
-      class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--toggle-count wire-next--toggle-count-{variant} {fullWidth ? 'wire-next--toggle-count-full' : ''} {disabled ? 'wire-next--disabled' : ''} {class}"
+      class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--toggle-count wire-next--toggle-count-{variant} {fullWidth ? 'wire-next--toggle-count-full' : ''} {disabled ? 'wire-next--disabled' : ''} {class}"
     >
       <input type="hidden" name="{name}" value="{selectedValue}" />
 
@@ -279,5 +281,194 @@ component ToggleCount {
         </div>
       {/if}
     </section>
+    <ComponentBaseStyles hidden />
+  }
+
+  style {
+    .wire-next__toggle-count-control--start {
+      justify-content: flex-start;
+    }
+    .wire-next__toggle-count-control--center {
+      justify-content: center;
+    }
+    .wire-next__toggle-count-control--end {
+      justify-content: flex-end;
+    }
+
+    .wire-next--toggle-count {
+      --wire-toggle-count-accent: var(--wire-component-color);
+      display: grid;
+      width: fit-content;
+      gap: 0.75rem;
+      color: var(--wire-color-text);
+    }
+
+    .wire-next--toggle-count-full {
+      width: 100%;
+    }
+
+    .wire-next__toggle-count-control {
+      display: flex;
+    }
+
+    .wire-next__toggle-count-segmented {
+      display: inline-flex;
+      gap: 0.2rem;
+      padding: 0.2rem;
+      border-radius: calc(var(--wire-radius-sm) + 0.15rem);
+      background: var(--wire-color-surface-2);
+      box-shadow: inset 0 0 0 1px var(--wire-color-border);
+    }
+
+    .wire-next__toggle-count-segmented button {
+      min-height: 2.35rem;
+      padding: 0.45rem 0.8rem;
+      border: 0;
+      border-radius: var(--wire-radius-sm);
+      background: transparent;
+      color: var(--wire-color-muted);
+      font: inherit;
+      font-size: 0.78rem;
+      font-weight: 700;
+      cursor: pointer;
+    }
+
+    .wire-next__toggle-count-segmented button[aria-pressed="true"] {
+      background: var(--wire-color-surface);
+      color: var(--wire-color-text);
+      box-shadow:
+        var(--wire-shadow-1),
+        inset 0 -2px var(--wire-toggle-count-accent);
+    }
+
+    .wire-next__toggle-count-segmented button:focus-visible,
+    .wire-next__toggle-count-switch:focus-visible {
+      outline: 2px solid var(--wire-toggle-count-accent);
+      outline-offset: 2px;
+    }
+
+    .wire-next__toggle-count-segmented button:disabled,
+    .wire-next__toggle-count-switch:disabled {
+      cursor: not-allowed;
+    }
+
+    .wire-next__toggle-count-control:has(.wire-next__toggle-count-switch) {
+      align-items: center;
+      gap: 0.7rem;
+      font-size: 0.78rem;
+      font-weight: 700;
+    }
+
+    .wire-next__toggle-count-control > span {
+      color: var(--wire-color-muted);
+    }
+
+    .wire-next__toggle-count-control > span[data-selected="true"] {
+      color: var(--wire-color-text);
+    }
+
+    .wire-next__toggle-count-switch {
+      position: relative;
+      width: 2.65rem;
+      height: 1.45rem;
+      padding: 0.15rem;
+      border: 1px solid var(--wire-color-border);
+      border-radius: 999px;
+      background: var(--wire-color-surface-2);
+      cursor: pointer;
+      transition: background-color var(--wire-motion-fast) var(--wire-ease-standard);
+    }
+
+    .wire-next__toggle-count-switch > span {
+      display: block;
+      width: 1rem;
+      height: 1rem;
+      border-radius: 50%;
+      background: var(--wire-color-text);
+      box-shadow: var(--wire-shadow-1);
+      transition: transform var(--wire-motion-fast) var(--wire-ease-standard);
+    }
+
+    .wire-next__toggle-count-switch[aria-checked="true"] {
+      border-color: var(--wire-toggle-count-accent);
+      background: var(--wire-toggle-count-accent);
+    }
+
+    .wire-next__toggle-count-switch[aria-checked="true"] > span {
+      background: white;
+      transform: translateX(1.15rem);
+    }
+
+    .wire-next__toggle-count-items {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+      overflow: hidden;
+      border: 1px solid var(--wire-color-border);
+      border-radius: var(--wire-radius-md);
+      background: var(--wire-color-surface);
+    }
+
+    .wire-next__toggle-count-items article {
+      display: grid;
+      align-content: start;
+      gap: 0.35rem;
+      min-width: 0;
+      padding: 1rem;
+    }
+
+    .wire-next__toggle-count-items article + article {
+      border-left: 1px solid var(--wire-color-border);
+    }
+
+    .wire-next__toggle-count-items article > span {
+      color: var(--wire-color-muted);
+      font-size: 0.75rem;
+      font-weight: 600;
+    }
+
+    .wire-next__toggle-count-items strong {
+      display: flex;
+      align-items: baseline;
+      gap: 0.2rem;
+      font-size: 1.5rem;
+      line-height: 1;
+    }
+
+    .wire-next__toggle-count-items [data-toggle-count-value] {
+      min-width: 2ch;
+      font-variant-numeric: tabular-nums;
+      transition:
+        color var(--wire-motion-fast) var(--wire-ease-standard),
+        transform var(--wire-motion-fast) var(--wire-ease-standard);
+    }
+
+    .wire-next__toggle-count-items strong small {
+      color: inherit;
+      font-size: 0.65em;
+    }
+
+    .wire-next__toggle-count-items article > small {
+      color: var(--wire-color-muted);
+      font-size: 0.68rem;
+    }
+
+    @media (max-width: 36rem) {
+    .wire-next__toggle-count-control {
+        justify-content: center;
+      }
+    .wire-next__toggle-count-items {
+        grid-template-columns: 1fr;
+      }
+    .wire-next__toggle-count-items article + article {
+        border-top: 1px solid var(--wire-color-border);
+        border-left: 0;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+    .wire-next__toggle-count-items [data-toggle-count-value] {
+        transition: none;
+      }
+    }
   }
 }