tyrell-components 1.0.0-TC55 → 1.0.0-TC57

package/lib/styles/radio.js

@@ -27,13 +27,13 @@ display: flex;
 flex-direction: column;
 gap: 0.4rem;
 font-family: inherit;
-color: var(--ty-color-text);
+color: var(--ty-text);
 }
 .radio-group-label {
 font-size: var(--ty-font-sm);
 line-height: var(--ty-leading-sm);
 font-weight: var(--ty-font-medium);
-color: var(--ty-color-text);
+color: var(--ty-text);
 display: flex;
 align-items: center;
 gap: 0.25rem;
@@ -67,12 +67,18 @@ width: 100%;
 height: 100%;
 }
 .radio-container {
-display: inline-block;
+display: inline-flex;
+align-items: center;
+min-height: 1.25em;
+min-height: 1lh;
 cursor: pointer;
 user-select: none;
 outline: none;
 vertical-align: middle;
 }
+.radio-container:not(.disabled):not([aria-checked="true"]):hover .radio-circle {
+border-color: var(--radio-ring-off-hover, color-mix(in oklab, var(--ty-text) 80%, transparent));
+}
 .radio-container.disabled {
 cursor: not-allowed;
 opacity: 0.55;
@@ -87,7 +93,7 @@ flex-shrink: 0;
 width: 18px;
 height: 18px;
 border-radius: 50%;
-border: 2px solid var(--ty-input-border);
+border: 2px solid var(--radio-ring-off, color-mix(in oklab, var(--ty-text) 45%, transparent));
 background: var(--ty-input-bg);
 box-sizing: border-box;
 transition: var(--ty-local-transition, border-color 0.15s ease-in-out);

package/lib/styles/resize-observer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize-observer.d.ts","sourceRoot":"","sources":["../../src/styles/resize-observer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,oBAAoB,iRAYhC,CAAA"}

package/lib/styles/resize-observer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize-observer.js","sourceRoot":"","sources":["../../src/styles/resize-observer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,oBAAoB,GAAG;;;;;;;;;;;;CAYnC,CAAA"}

package/lib/styles/scroll-container.d.ts

@@ -2,4 +2,4 @@
  * TyScrollContainer styles
  * Component-specific styles + shared custom scrollbar styles
  */
-export declare const scrollContainerStyles = "\n:host {\n  display: block;\n  position: relative;\n  overflow: hidden;\n}\n\n.scroll-wrapper {\n  width: 100%;\n  height: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n:host([overflow-x]) .scroll-wrapper {\n  overflow-x: auto;\n}\n\n:host([max-height]) .scroll-wrapper {\n  max-height: var(--scroll-max-height);\n}\n\n/* hide-scrollbar: hides native, no custom */\n:host([hide-scrollbar]) .scroll-wrapper {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n:host([hide-scrollbar]) .scroll-wrapper::-webkit-scrollbar {\n  display: none;\n}\n\n/* scroll-anchoring: we manage scroll position in JS, so turn off the browser's\n   native scroll anchoring to avoid double-compensation. */\n:host([scroll-anchoring]) .scroll-wrapper {\n  overflow-anchor: none;\n}\n\n/* custom-scrollbar: hides native */\n:host([custom-scrollbar]) .scroll-wrapper {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n:host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar {\n  display: none;\n}\n\n:host([custom-scrollbar]:hover) .ty-scrollbar-track-y.has-overflow,\n:host([custom-scrollbar]:hover) .ty-scrollbar-track-x.has-overflow {\n  opacity: 1;\n}\n\n/* Corner gap when both axes are present */\n:host([custom-scrollbar][overflow-x]) .ty-scrollbar-track-y {\n  bottom: var(--ty-scrollbar-width, 8px);\n}\n\n:host([custom-scrollbar]) .ty-scrollbar-track-x {\n  right: var(--ty-scrollbar-width, 8px);\n}\n\n.shadow-overlay {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 2;\n}\n\n.shadow-top,\n.shadow-bottom,\n.shadow-left,\n.shadow-right {\n  position: absolute;\n  opacity: 0;\n  transition: var(--ty-scroll-shadow-transition, opacity 0.2s ease-out);\n  pointer-events: none;\n}\n\n.shadow-top {\n  top: -40px;\n  left: 0;\n  right: 0;\n  height: 80px;\n  background: var(--ty-scroll-shadow-top, radial-gradient(\n    ellipse 100% 30% at center,\n    color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),\n    transparent,\n    transparent\n  ));\n  clip-path: inset(50% 0 0 0);\n}\n\n.shadow-bottom {\n  bottom: -30px;\n  left: 0;\n  right: 0;\n  height: 60px;\n  background: var(--ty-scroll-shadow-bottom, radial-gradient(\n    ellipse 100% 20% at center,\n    color-mix(in oklab, var(--ty-color-neutral-bold) 18%, transparent),\n    transparent,\n    transparent\n  ));\n  clip-path: inset(0 0 50% 0);\n}\n\n.shadow-left {\n  left: -30px;\n  top: 0;\n  bottom: 0;\n  width: 60px;\n  background: var(--ty-scroll-shadow-left, radial-gradient(\n    ellipse 30% 100% at center,\n    color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),\n    transparent,\n    transparent\n  ));\n  clip-path: inset(0 0 0 50%);\n}\n\n.shadow-right {\n  right: -30px;\n  top: 0;\n  bottom: 0;\n  width: 60px;\n  background: var(--ty-scroll-shadow-right, radial-gradient(\n    ellipse 30% 100% at center,\n    color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),\n    transparent,\n    transparent\n  ));\n  clip-path: inset(0 50% 0 0);\n}\n\n.shadow-left,\n.shadow-right {\n  display: none;\n}\n\n:host([overflow-x]) .shadow-left,\n:host([overflow-x]) .shadow-right {\n  display: block;\n}\n\n.shadow-top.visible,\n.shadow-bottom.visible,\n.shadow-left.visible,\n.shadow-right.visible {\n  opacity: 1;\n}\n\n:host([shadow=\"false\"]) .shadow-overlay {\n  display: none;\n}\n\n/* Touch devices - restore native scrollbar */\n@media (pointer: coarse) and (hover: none) {\n  :host([custom-scrollbar]) .scroll-wrapper {\n    scrollbar-width: thin;\n    scrollbar-color: var(--ty-border, color-mix(in oklab, var(--ty-color-neutral-bold) 25%, transparent)) transparent;\n  }\n  :host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar {\n    display: block;\n    width: 4px;\n    height: 4px;\n  }\n  :host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar-thumb {\n    background: var(--ty-border, color-mix(in oklab, var(--ty-color-neutral-bold) 25%, transparent));\n    border-radius: 2px;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .shadow-top,\n  .shadow-bottom,\n  .shadow-left,\n  .shadow-right {\n    transition-duration: 0ms !important;\n  }\n}\n\n\n/* Vertical track */\n.ty-scrollbar-track-y {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-y.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-y.has-overflow:hover,\n.ty-scrollbar-track-y.has-overflow.scrolling,\n.ty-scrollbar-track-y.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-y::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-y:hover::before,\n.ty-scrollbar-track-y.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-y {\n  position: absolute;\n  right: 0;\n  width: 100%;\n  min-height: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: var(--ty-local-transition, background 0.15s ease-out);\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-y:hover,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-y:active,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* Horizontal track */\n.ty-scrollbar-track-x {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-x.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-x.has-overflow:hover,\n.ty-scrollbar-track-x.has-overflow.scrolling,\n.ty-scrollbar-track-x.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-x::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-x:hover::before,\n.ty-scrollbar-track-x.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-x {\n  position: absolute;\n  bottom: 0;\n  height: 100%;\n  min-width: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: var(--ty-local-transition, background 0.15s ease-out);\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-x:hover,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-x:active,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* Touch devices: hide the custom scrollbar */\n@media (pointer: coarse) and (hover: none) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x {\n    display: none !important;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x,\n  .ty-scrollbar-thumb-y,\n  .ty-scrollbar-thumb-x {\n    transition-duration: 0ms !important;\n  }\n}\n\n";
+export declare const scrollContainerStyles = "\n:host {\n  display: block;\n  position: relative;\n  overflow: hidden;\n}\n\n.scroll-wrapper {\n  width: 100%;\n  height: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n:host([overflow-x]) .scroll-wrapper {\n  overflow-x: auto;\n}\n\n:host([max-height]) .scroll-wrapper {\n  max-height: var(--scroll-max-height);\n}\n\n/* hide-scrollbar: hides native, no custom */\n:host([hide-scrollbar]) .scroll-wrapper {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n:host([hide-scrollbar]) .scroll-wrapper::-webkit-scrollbar {\n  display: none;\n}\n\n/* scroll-anchoring: we manage scroll position in JS, so turn off the browser's\n   native scroll anchoring to avoid double-compensation. */\n:host([scroll-anchoring]) .scroll-wrapper {\n  overflow-anchor: none;\n}\n\n/* custom-scrollbar: hides native */\n:host([custom-scrollbar]) .scroll-wrapper {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n:host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar {\n  display: none;\n}\n\n:host([custom-scrollbar]:hover) .ty-scrollbar-track-y.has-overflow,\n:host([custom-scrollbar]:hover) .ty-scrollbar-track-x.has-overflow {\n  opacity: 1;\n}\n\n/* Corner gap when both axes are present */\n:host([custom-scrollbar][overflow-x]) .ty-scrollbar-track-y {\n  bottom: var(--ty-scrollbar-width, 8px);\n}\n\n:host([custom-scrollbar]) .ty-scrollbar-track-x {\n  right: var(--ty-scrollbar-width, 8px);\n}\n\n.shadow-overlay {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 2;\n}\n\n.shadow-top,\n.shadow-bottom,\n.shadow-left,\n.shadow-right {\n  position: absolute;\n  opacity: 0;\n  transition: var(--ty-scroll-shadow-transition, opacity 0.2s ease-out);\n  pointer-events: none;\n}\n\n.shadow-top {\n  top: -40px;\n  left: 0;\n  right: 0;\n  height: 80px;\n  background: var(--ty-scroll-shadow-top, radial-gradient(\n    ellipse 100% 30% at center,\n    color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),\n    transparent,\n    transparent\n  ));\n  clip-path: inset(50% 0 0 0);\n}\n\n.shadow-bottom {\n  bottom: -30px;\n  left: 0;\n  right: 0;\n  height: 60px;\n  background: var(--ty-scroll-shadow-bottom, radial-gradient(\n    ellipse 100% 20% at center,\n    color-mix(in oklab, var(--ty-color-neutral-bold) 18%, transparent),\n    transparent,\n    transparent\n  ));\n  clip-path: inset(0 0 50% 0);\n}\n\n.shadow-left {\n  left: -30px;\n  top: 0;\n  bottom: 0;\n  width: 60px;\n  background: var(--ty-scroll-shadow-left, radial-gradient(\n    ellipse 30% 100% at center,\n    color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),\n    transparent,\n    transparent\n  ));\n  clip-path: inset(0 0 0 50%);\n}\n\n.shadow-right {\n  right: -30px;\n  top: 0;\n  bottom: 0;\n  width: 60px;\n  background: var(--ty-scroll-shadow-right, radial-gradient(\n    ellipse 30% 100% at center,\n    color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),\n    transparent,\n    transparent\n  ));\n  clip-path: inset(0 50% 0 0);\n}\n\n.shadow-left,\n.shadow-right {\n  display: none;\n}\n\n:host([overflow-x]) .shadow-left,\n:host([overflow-x]) .shadow-right {\n  display: block;\n}\n\n.shadow-top.visible,\n.shadow-bottom.visible,\n.shadow-left.visible,\n.shadow-right.visible {\n  opacity: 1;\n}\n\n:host([no-shadow]) .shadow-overlay {\n  display: none;\n}\n\n/* Touch devices - restore native scrollbar */\n@media (pointer: coarse) and (hover: none) {\n  :host([custom-scrollbar]) .scroll-wrapper {\n    scrollbar-width: thin;\n    scrollbar-color: var(--ty-border, color-mix(in oklab, var(--ty-color-neutral-bold) 25%, transparent)) transparent;\n  }\n  :host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar {\n    display: block;\n    width: 4px;\n    height: 4px;\n  }\n  :host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar-thumb {\n    background: var(--ty-border, color-mix(in oklab, var(--ty-color-neutral-bold) 25%, transparent));\n    border-radius: 2px;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .shadow-top,\n  .shadow-bottom,\n  .shadow-left,\n  .shadow-right {\n    transition-duration: 0ms !important;\n  }\n}\n\n\n/* Vertical track */\n.ty-scrollbar-track-y {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-y.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-y.has-overflow:hover,\n.ty-scrollbar-track-y.has-overflow.scrolling,\n.ty-scrollbar-track-y.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-y::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-y:hover::before,\n.ty-scrollbar-track-y.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-y {\n  position: absolute;\n  right: 0;\n  width: 100%;\n  min-height: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: var(--ty-local-transition, background 0.15s ease-out);\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-y:hover,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-y:active,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* Horizontal track */\n.ty-scrollbar-track-x {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-x.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-x.has-overflow:hover,\n.ty-scrollbar-track-x.has-overflow.scrolling,\n.ty-scrollbar-track-x.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-x::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-x:hover::before,\n.ty-scrollbar-track-x.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-x {\n  position: absolute;\n  bottom: 0;\n  height: 100%;\n  min-width: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: var(--ty-local-transition, background 0.15s ease-out);\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-x:hover,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-x:active,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* Touch devices: hide the custom scrollbar */\n@media (pointer: coarse) and (hover: none) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x {\n    display: none !important;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x,\n  .ty-scrollbar-thumb-y,\n  .ty-scrollbar-thumb-x {\n    transition-duration: 0ms !important;\n  }\n}\n\n";

package/lib/styles/scroll-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-container.d.ts","sourceRoot":"","sources":["../../src/styles/scroll-container.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,qBAAqB,m5CA6EjC,CAAC"}

package/lib/styles/scroll-container.js

@@ -125,7 +125,7 @@ display: block;
 .shadow-right.visible {
 opacity: 1;
 }
-:host([shadow="false"]) .shadow-overlay {
+:host([no-shadow]) .shadow-overlay {
 display: none;
 }
 @media (pointer: coarse) and (hover: none) {

package/lib/styles/scroll-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-container.js","sourceRoot":"","sources":["../../src/styles/scroll-container.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,qBAAqB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6EpC,CAAC"}

package/lib/styles/select.d.ts

@@ -8,4 +8,4 @@
  * - .compact: content-hugging trigger for toolbars, count badge
  * - .custom-trigger (slot="trigger"): all chrome stripped
  */
-export declare const selectStyles = "\n/* Compact skin hugs its content (field skin = base styles) */\n.select-stub.compact {\n  display: inline-flex;\n  flex-wrap: nowrap;\n  width: auto;\n  gap: 0.5rem;\n  /* extra right padding = room for the absolutely-positioned chevron */\n  padding: 0.5rem 2.25rem 0.5rem 0.875rem;\n}\n\n/* Consumer-provided trigger (slot=\"trigger\"): no chrome at all */\n.select-stub.custom-trigger {\n  display: inline-block;\n  width: auto;\n  border: none;\n  background: none;\n  padding: 0;\n  min-height: 0;\n  border-radius: 0;\n}\n.select-stub.custom-trigger:hover {\n  border: none;\n}\n\n.select-count {\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 1.25rem;\n  height: 1.25rem;\n  padding: 0 0.375rem;\n  border-radius: 9999px;\n  /* --ty-text-primary never existed as a token \u2014 this silently fell back\n     to inherited/unset color. Now follows the select's own flavor. */\n  background: color-mix(in oklab, var(--select-accent, var(--ty-color-primary)) 15%, transparent);\n  color: var(--select-accent-bold, var(--ty-color-primary-strong));\n  font-size: var(--ty-font-xs);\n  font-weight: var(--ty-font-semibold);\n  font-style: normal;\n}\n.select-count[hidden] {\n  display: none;\n}\n\n/* Clear (x) button \u2014 normal flex child of .select-stub, not absolutely\n   positioned like .dropdown-chevron: it just takes its own space in the\n   row, no padding-right gutter math needed. Lives in the trigger slot's\n   fallback content, so it's automatically absent under slot=\"trigger\". */\n.select-clear {\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1rem;\n  height: 1rem;\n  padding: 0;\n  border: none;\n  background: none;\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  cursor: pointer;\n  border-radius: var(--ty-radius-sm);\n  transition: var(--ty-local-transition, all 0.15s ease);\n}\n.select-clear[hidden] {\n  display: none;\n}\n.select-clear:hover {\n  /* Destructive utility action \u2014 neutral at rest, warns danger-red on\n     hover regardless of the field's own flavor. */\n  color: var(--ty-color-danger);\n  background-color: var(--ty-bg-danger-soft);\n}\n.select-clear svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* Selection text (field skin): single line, ellipsis, input colors.\n   flex-basis 0, not auto \u2014 .select-stub is flex-wrap:wrap, and auto's\n   hypothetical size is the FULL untruncated text width (wrap-line\n   assignment happens before shrinking), which pushed fixed-size siblings\n   (.select-clear) onto a second line even though the text visibly had\n   room after truncating. 0 makes this item contribute ~nothing to the\n   line-fit check up front; grow/shrink + overflow:hidden still truncate\n   it identically. */\n.select-stub .dropdown-placeholder {\n  font-style: normal;\n  flex: 1 1 0%;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--input-color, var(--ty-input-color));\n}\n\n.select-stub .dropdown-placeholder.placeholder-shown {\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n}\n.select-stub .dropdown-placeholder[hidden] {\n  display: none;\n}\n\n/* Single-select display clone (slot=\"selected\"): the selected ty-option\n   projected into the stub \u2014 its own :host([cloned]) styling strips the\n   list-row chrome; here it just takes the text's flex slot. */\n.select-stub slot[name=\"selected\"] {\n  display: none;\n}\n.select-stub.has-clone slot[name=\"selected\"] {\n  display: block;\n  /* flex-basis 0, not auto \u2014 same reasoning as .dropdown-placeholder above:\n     .select-stub is flex-wrap:wrap, and auto's hypothetical size is the\n     clone's full untruncated text width, which pushes .select-clear onto\n     a second line. */\n  flex: 1 1 0%;\n  min-width: 0;\n  overflow: hidden;\n}\n.select-stub.compact.has-clone slot[name=\"selected\"] {\n  flex: 0 1 auto;\n}\n\n/* start/end slot content (icons etc.) \u2014 spacing comes from the stub's flex\n   gap; muted like ty-input adornments. end sits before the chevron. */\n.select-stub ::slotted([slot=\"start\"]),\n.select-stub ::slotted([slot=\"end\"]) {\n  flex-shrink: 0;\n  color: var(--ty-text-soft);\n}\n\n/* Compact skin: the text IS the trigger label \u2014 no grow, regular text color.\n   flex-basis: auto (not the field skin's 0%) \u2014 content-hugging needs its\n   natural content width as the starting point; 0% would collapse it since\n   grow is also 0 here (nothing left to expand it back out). */\n.select-stub.compact .dropdown-placeholder {\n  flex: 0 1 auto;\n  color: var(--ty-text);\n}\n\n/* Trigger stays visible while the popup is open (the popup hides it) */\n.dropdown-wrapper:has(.dropdown-chevron.open) .select-stub {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* One-panel popup: search header fused with the options list */\n\n/* Single unified shadow around the whole panel (header + list as one silhouette) */\n.dropdown-dialog.open {\n  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.14)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08));\n}\n\n/* Card-style header: the search input keeps its own bordered-field look\n   (base styles) and sits inset in the panel, TagPicker-style \u2014 no divider,\n   whitespace separates it from the list. The header's OWN surface/border is\n   part of the floating panel's chrome, not a form field \u2014 --ty-surface-\n   floating/--ty-floating-border, matching .dropdown-options below it (same\n   reasoning as the base-panel fix: --ty-input-* is deliberately faint for\n   resting form fields and read as a missing/mismatched edge here). */\n.dropdown-header {\n  background: var(--ty-surface-floating);\n  border: 1px solid var(--ty-floating-border);\n  border-bottom: none;\n  border-radius: var(--ty-radius-lg) var(--ty-radius-lg) 0 0;\n  padding: var(--ty-spacing-2) var(--ty-spacing-2) var(--ty-spacing-1);\n}\n.dropdown-dialog.position-below .dropdown-header {\n  margin-bottom: 0;\n}\n.dropdown-dialog.position-above .dropdown-header {\n  margin-top: 0;\n  border-top: none;\n  border-bottom: 1px solid var(--ty-floating-border);\n  border-radius: 0 0 var(--ty-radius-lg) var(--ty-radius-lg);\n  padding: var(--ty-spacing-1) var(--ty-spacing-2) var(--ty-spacing-2);\n}\n\n/* Magnifier adornment inside the search field (header padding + field inset) */\n.dropdown-search-icon {\n  position: absolute;\n  top: 50%;\n  left: calc(var(--ty-spacing-2) + var(--ty-spacing-3));\n  transform: translateY(-50%);\n  width: 1rem;\n  height: 1rem;\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  pointer-events: none;\n}\n.dropdown-search-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* Mobile header: flex row, icon flows inline before the input. Same 32x32\n   footprint as .mobile-close-button (18px glyph centered in the box, not a\n   bare 18px glyph flush at the edge) so the row has two matching bookends \u2014\n   a bare icon on one side and a 32px circle on the other read as lopsided\n   even with equal flex gap on both sides. Matching them also centers the\n   search input's flex:1 fill symmetrically between the two. Fixed white +\n   18px glyph, same reasoning as .mobile-header-label \u2014 this sits on the\n   dark ::backdrop blur in both themes, not a theme surface. */\n.dropdown-mode-mobile .mobile-header-content .dropdown-search-icon {\n  position: static;\n  transform: none;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  color: #ffffff;\n}\n.dropdown-mode-mobile .mobile-header-content .dropdown-search-icon svg {\n  width: 18px;\n  height: 18px;\n}\n\n/* Search input: bordered field from base styles; just size + icon room */\n.dropdown-search-input {\n  min-height: 2.25rem;\n  padding-right: var(--ty-spacing-2);\n  /* room for the magnifier adornment */\n  padding-left: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n}\n/* Trigger already has a chevron - no second one inside the search row */\n.dropdown-search-chevron {\n  display: none;\n}\n\n/* With the search row hidden nothing inside is focusable, so the <dialog>\n   itself receives focus on open \u2014 suppress its UA focus ring */\n.dropdown-dialog:focus,\n.dropdown-dialog:focus-visible {\n  outline: none;\n}\n\n/* Search row hidden ('auto' below threshold / searchable=\"false\"):\n   the options panel owns the whole silhouette */\n.dropdown-header[hidden] {\n  display: none;\n}\n.dropdown-header[hidden] ~ .dropdown-options-wrapper .dropdown-options {\n  border-top: 1px solid var(--ty-floating-border);\n  border-radius: var(--ty-radius-lg);\n}\n.mobile-search-input[hidden],\n.mobile-header-content .dropdown-search-icon[hidden] {\n  display: none;\n}\n\n/* Options: vertical list rows fused under the search header.\n   No own shadow/animation - the panel appears as one via dialog opacity. */\n.dropdown-options {\n  flex-direction: column;\n  flex-wrap: nowrap;\n  align-items: stretch;\n  gap: 0;\n  /* Card-style list: rounded rows sit inset from the panel edges */\n  padding: var(--ty-spacing-1);\n  border-top: none;\n  border-radius: 0 0 var(--ty-radius-lg) var(--ty-radius-lg);\n  box-shadow: none;\n  transform: none;\n  transition: none;\n  /* ~9-10 visible rows before scrolling (custom scrollbar, native hidden) */\n  max-height: 24rem;\n}\n.dropdown-dialog.position-below .dropdown-options {\n  box-shadow: none;\n}\n.dropdown-dialog.position-above .dropdown-options {\n  border-top: 1px solid var(--ty-floating-border);\n  border-bottom: none;\n  border-radius: var(--ty-radius-lg) var(--ty-radius-lg) 0 0;\n}\n\n/* Loading panel continues the fused silhouette exactly like .dropdown-options \u2014\n   the base layer styles it as a floating card (radius + shadow), which left a\n   see-through gap under the search header while loading. */\n.dropdown-loading {\n  border-top: none;\n  border-radius: 0 0 var(--ty-radius-lg) var(--ty-radius-lg);\n  box-shadow: none;\n}\n.dropdown-dialog.position-above .dropdown-loading {\n  border-top: 1px solid var(--ty-floating-border);\n  border-bottom: none;\n  border-radius: var(--ty-radius-lg) var(--ty-radius-lg) 0 0;\n}\n\n/* Selection tick lives inside ty-option (lucide check on [selected]) */\n\n/* Mobile modal: same vertical list */\n.dropdown-mode-mobile .section-content ::slotted(ty-option) {\n  display: block;\n  width: 100%;\n}\n";
+export declare const selectStyles = "\n/* Compact skin hugs its content (field skin = base styles) */\n.select-stub.compact {\n  display: inline-flex;\n  flex-wrap: nowrap;\n  width: auto;\n  gap: 0.5rem;\n  /* extra right padding = room for the absolutely-positioned chevron */\n  padding: 0.5rem 2.25rem 0.5rem 0.875rem;\n}\n\n/* Consumer-provided trigger (slot=\"trigger\"): no chrome at all */\n.select-stub.custom-trigger {\n  display: inline-block;\n  width: auto;\n  border: none;\n  background: none;\n  padding: 0;\n  min-height: 0;\n  border-radius: 0;\n}\n.select-stub.custom-trigger:hover {\n  border: none;\n}\n\n.select-count {\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 1.25rem;\n  height: 1.25rem;\n  padding: 0 0.375rem;\n  border-radius: 9999px;\n  /* --ty-text-primary never existed as a token \u2014 this silently fell back\n     to inherited/unset color. Now follows the select's own flavor. */\n  background: color-mix(in oklab, var(--select-accent, var(--ty-color-primary)) 15%, transparent);\n  color: var(--select-accent-bold, var(--ty-color-primary-strong));\n  font-size: var(--ty-font-xs);\n  font-weight: var(--ty-font-semibold);\n  font-style: normal;\n}\n.select-count[hidden] {\n  display: none;\n}\n\n/* Clear (x) button \u2014 normal flex child of .select-stub, not absolutely\n   positioned like .dropdown-chevron: it just takes its own space in the\n   row, no padding-right gutter math needed. Lives in the trigger slot's\n   fallback content, so it's automatically absent under slot=\"trigger\". */\n.select-clear {\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1rem;\n  height: 1rem;\n  padding: 0;\n  border: none;\n  background: none;\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  cursor: pointer;\n  border-radius: var(--ty-radius-sm);\n  transition: var(--ty-local-transition, all 0.15s ease);\n}\n/* Pull toward the chevron: the stub's right padding (chevron room) left 12px\n   between them on the field skin, 8px on compact. Both land at 6px. */\n.select-stub .select-clear {\n  margin-right: -0.375rem;\n}\n.select-stub.compact .select-clear {\n  margin-right: -0.125rem;\n}\n.select-clear[hidden] {\n  display: none;\n}\n.select-clear:hover {\n  /* Destructive utility action \u2014 neutral at rest, warns danger-red on\n     hover regardless of the field's own flavor. */\n  color: var(--ty-color-danger);\n  background-color: var(--ty-bg-danger-soft);\n}\n.select-clear svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* Selection text (field skin): single line, ellipsis, input colors.\n   flex-basis 0, not auto \u2014 .select-stub is flex-wrap:wrap, and auto's\n   hypothetical size is the FULL untruncated text width (wrap-line\n   assignment happens before shrinking), which pushed fixed-size siblings\n   (.select-clear) onto a second line even though the text visibly had\n   room after truncating. 0 makes this item contribute ~nothing to the\n   line-fit check up front; grow/shrink + overflow:hidden still truncate\n   it identically. */\n.select-stub .dropdown-placeholder {\n  font-style: normal;\n  flex: 1 1 0%;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--input-color, var(--ty-input-color));\n}\n\n.select-stub .dropdown-placeholder.placeholder-shown {\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n}\n.select-stub .dropdown-placeholder[hidden] {\n  display: none;\n}\n\n/* Single-select display clone (slot=\"selected\"): the selected ty-option\n   projected into the stub \u2014 its own :host([cloned]) styling strips the\n   list-row chrome; here it just takes the text's flex slot. */\n.select-stub slot[name=\"selected\"] {\n  display: none;\n}\n.select-stub.has-clone slot[name=\"selected\"] {\n  display: block;\n  /* flex-basis 0, not auto \u2014 same reasoning as .dropdown-placeholder above:\n     .select-stub is flex-wrap:wrap, and auto's hypothetical size is the\n     clone's full untruncated text width, which pushes .select-clear onto\n     a second line. */\n  flex: 1 1 0%;\n  min-width: 0;\n  overflow: hidden;\n}\n.select-stub.compact.has-clone slot[name=\"selected\"] {\n  flex: 0 1 auto;\n}\n\n/* start/end slot content (icons etc.) \u2014 spacing comes from the stub's flex\n   gap; muted like ty-input adornments. end sits before the chevron. */\n.select-stub ::slotted([slot=\"start\"]),\n.select-stub ::slotted([slot=\"end\"]) {\n  flex-shrink: 0;\n  color: var(--ty-text-soft);\n}\n\n/* Compact skin: the text IS the trigger label \u2014 no grow, regular text color.\n   flex-basis: auto (not the field skin's 0%) \u2014 content-hugging needs its\n   natural content width as the starting point; 0% would collapse it since\n   grow is also 0 here (nothing left to expand it back out). */\n.select-stub.compact .dropdown-placeholder {\n  flex: 0 1 auto;\n  color: var(--ty-text);\n}\n\n/* Trigger stays visible while the popup is open (the popup hides it) */\n.dropdown-wrapper:has(.dropdown-chevron.open) .select-stub {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* One-panel popup: search header fused with the options list */\n\n/* Single unified shadow around the whole panel (header + list as one silhouette) */\n.dropdown-dialog.open {\n  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.14)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08));\n}\n\n/* Card-style header: the search input keeps its own bordered-field look\n   (base styles) and sits inset in the panel, TagPicker-style \u2014 no divider,\n   whitespace separates it from the list. The header's OWN surface/border is\n   part of the floating panel's chrome, not a form field \u2014 --ty-surface-\n   floating/--ty-floating-border, matching .dropdown-options below it (same\n   reasoning as the base-panel fix: --ty-input-* is deliberately faint for\n   resting form fields and read as a missing/mismatched edge here). */\n.dropdown-header {\n  background: var(--ty-surface-floating);\n  border: 1px solid var(--ty-floating-border);\n  border-bottom: none;\n  border-radius: var(--ty-radius-lg) var(--ty-radius-lg) 0 0;\n  padding: var(--ty-spacing-2) var(--ty-spacing-2) var(--ty-spacing-1);\n}\n.dropdown-dialog.position-below .dropdown-header {\n  margin-bottom: 0;\n}\n.dropdown-dialog.position-above .dropdown-header {\n  margin-top: 0;\n  border-top: none;\n  border-bottom: 1px solid var(--ty-floating-border);\n  border-radius: 0 0 var(--ty-radius-lg) var(--ty-radius-lg);\n  padding: var(--ty-spacing-1) var(--ty-spacing-2) var(--ty-spacing-2);\n}\n\n/* Magnifier adornment inside the search field (header padding + field inset) */\n.dropdown-search-icon {\n  position: absolute;\n  top: 50%;\n  left: calc(var(--ty-spacing-2) + var(--ty-spacing-3));\n  transform: translateY(-50%);\n  width: 1rem;\n  height: 1rem;\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  pointer-events: none;\n}\n.dropdown-search-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* Mobile header: flex row, icon flows inline before the input. Same 32x32\n   footprint as .mobile-close-button (18px glyph centered in the box, not a\n   bare 18px glyph flush at the edge) so the row has two matching bookends \u2014\n   a bare icon on one side and a 32px circle on the other read as lopsided\n   even with equal flex gap on both sides. Matching them also centers the\n   search input's flex:1 fill symmetrically between the two. Fixed white +\n   18px glyph, same reasoning as .mobile-header-label \u2014 this sits on the\n   dark ::backdrop blur in both themes, not a theme surface. */\n.dropdown-mode-mobile .mobile-header-content .dropdown-search-icon {\n  position: static;\n  transform: none;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  color: #ffffff;\n}\n.dropdown-mode-mobile .mobile-header-content .dropdown-search-icon svg {\n  width: 18px;\n  height: 18px;\n}\n\n/* Search input: bordered field from base styles; just size + icon room */\n.dropdown-search-input {\n  min-height: 2.25rem;\n  padding-right: var(--ty-spacing-2);\n  /* room for the magnifier adornment */\n  padding-left: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n}\n/* Trigger already has a chevron - no second one inside the search row */\n.dropdown-search-chevron {\n  display: none;\n}\n\n/* With the search row hidden nothing inside is focusable, so the <dialog>\n   itself receives focus on open \u2014 suppress its UA focus ring */\n.dropdown-dialog:focus,\n.dropdown-dialog:focus-visible {\n  outline: none;\n}\n\n/* Search row hidden ('auto' below threshold / searchable=\"false\"):\n   the options panel owns the whole silhouette */\n.dropdown-header[hidden] {\n  display: none;\n}\n.dropdown-header[hidden] ~ .dropdown-options-wrapper .dropdown-options {\n  border-top: 1px solid var(--ty-floating-border);\n  border-radius: var(--ty-radius-lg);\n}\n.mobile-search-input[hidden],\n.mobile-header-content .dropdown-search-icon[hidden] {\n  display: none;\n}\n\n/* Options: vertical list rows fused under the search header.\n   No own shadow/animation - the panel appears as one via dialog opacity. */\n.dropdown-options {\n  flex-direction: column;\n  flex-wrap: nowrap;\n  align-items: stretch;\n  gap: 0;\n  /* Card-style list: rounded rows sit inset from the panel edges */\n  padding: var(--ty-spacing-1);\n  border-top: none;\n  border-radius: 0 0 var(--ty-radius-lg) var(--ty-radius-lg);\n  box-shadow: none;\n  transform: none;\n  transition: none;\n  /* ~9-10 visible rows before scrolling (custom scrollbar, native hidden) */\n  max-height: 24rem;\n}\n.dropdown-dialog.position-below .dropdown-options {\n  box-shadow: none;\n}\n.dropdown-dialog.position-above .dropdown-options {\n  border-top: 1px solid var(--ty-floating-border);\n  border-bottom: none;\n  border-radius: var(--ty-radius-lg) var(--ty-radius-lg) 0 0;\n}\n\n/* Loading panel continues the fused silhouette exactly like .dropdown-options \u2014\n   the base layer styles it as a floating card (radius + shadow), which left a\n   see-through gap under the search header while loading. */\n.dropdown-loading {\n  border-top: none;\n  border-radius: 0 0 var(--ty-radius-lg) var(--ty-radius-lg);\n  box-shadow: none;\n}\n.dropdown-dialog.position-above .dropdown-loading {\n  border-top: 1px solid var(--ty-floating-border);\n  border-bottom: none;\n  border-radius: var(--ty-radius-lg) var(--ty-radius-lg) 0 0;\n}\n\n/* Selection tick lives inside ty-option (lucide check on [selected]) */\n\n/* Mobile modal: same vertical list */\n.dropdown-mode-mobile .section-content ::slotted(ty-option) {\n  display: block;\n  width: 100%;\n}\n";

package/lib/styles/select.js

@@ -51,6 +51,12 @@ cursor: pointer;
 border-radius: var(--ty-radius-sm);
 transition: var(--ty-local-transition, all 0.15s ease);
 }
+.select-stub .select-clear {
+margin-right: -0.375rem;
+}
+.select-stub.compact .select-clear {
+margin-right: -0.125rem;
+}
 .select-clear[hidden] {
 display: none;
 }

package/lib/styles/step.d.ts

@@ -1,4 +1,4 @@
 /**
  * Step Component Styles
  */
-export declare const stepStyles = "\n:host {\n  width: var(--ty-wizard-width, 100%);\n  height: calc(var(--ty-wizard-height, 700px) - var(--ty-wizard-indicators-height, 120px));\n  display: block;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  transition: opacity var(--ty-wizard-transition-duration, 400ms) var(--ty-wizard-transition-easing, ease-in-out);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    transition-duration: 0ms !important;\n  }\n}\n\n.step-wrapper {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n}\n\n.step-panel {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  box-sizing: border-box;\n}\n\n.step-panel.ty-custom-scroll {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.step-panel.ty-custom-scroll::-webkit-scrollbar {\n  display: none;\n}\n\n.step-wrapper:hover .ty-scrollbar-track-y.has-overflow {\n  opacity: 1;\n}\n\n\n/* Vertical track */\n.ty-scrollbar-track-y {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-y.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-y.has-overflow:hover,\n.ty-scrollbar-track-y.has-overflow.scrolling,\n.ty-scrollbar-track-y.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-y::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-y:hover::before,\n.ty-scrollbar-track-y.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-y {\n  position: absolute;\n  right: 0;\n  width: 100%;\n  min-height: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: var(--ty-local-transition, background 0.15s ease-out);\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-y:hover,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-y:active,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* Horizontal track */\n.ty-scrollbar-track-x {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-x.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-x.has-overflow:hover,\n.ty-scrollbar-track-x.has-overflow.scrolling,\n.ty-scrollbar-track-x.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-x::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-x:hover::before,\n.ty-scrollbar-track-x.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-x {\n  position: absolute;\n  bottom: 0;\n  height: 100%;\n  min-width: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: var(--ty-local-transition, background 0.15s ease-out);\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-x:hover,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-x:active,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* Touch devices: hide the custom scrollbar */\n@media (pointer: coarse) and (hover: none) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x {\n    display: none !important;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x,\n  .ty-scrollbar-thumb-y,\n  .ty-scrollbar-thumb-x {\n    transition-duration: 0ms !important;\n  }\n}\n\n";
+export declare const stepStyles = "\n:host {\n  /* Panel height: the wizard's height attribute, or the content (auto). */\n  height: var(--ty-wizard-panel-height, auto);\n  display: block;\n  box-sizing: border-box;\n}\n\n.step-wrapper {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n}\n\n.step-panel {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  box-sizing: border-box;\n}\n\n.step-panel.ty-custom-scroll {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.step-panel.ty-custom-scroll::-webkit-scrollbar {\n  display: none;\n}\n\n.step-wrapper:hover .ty-scrollbar-track-y.has-overflow {\n  opacity: 1;\n}\n\n\n/* Vertical track */\n.ty-scrollbar-track-y {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-y.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-y.has-overflow:hover,\n.ty-scrollbar-track-y.has-overflow.scrolling,\n.ty-scrollbar-track-y.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-y::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-y:hover::before,\n.ty-scrollbar-track-y.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-y {\n  position: absolute;\n  right: 0;\n  width: 100%;\n  min-height: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: var(--ty-local-transition, background 0.15s ease-out);\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-y:hover,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-y:active,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* Horizontal track */\n.ty-scrollbar-track-x {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-x.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-x.has-overflow:hover,\n.ty-scrollbar-track-x.has-overflow.scrolling,\n.ty-scrollbar-track-x.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-x::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-x:hover::before,\n.ty-scrollbar-track-x.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-x {\n  position: absolute;\n  bottom: 0;\n  height: 100%;\n  min-width: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: var(--ty-local-transition, background 0.15s ease-out);\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-x:hover,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-x:active,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* Touch devices: hide the custom scrollbar */\n@media (pointer: coarse) and (hover: none) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x {\n    display: none !important;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x,\n  .ty-scrollbar-thumb-y,\n  .ty-scrollbar-thumb-x {\n    transition-duration: 0ms !important;\n  }\n}\n\n";

package/lib/styles/step.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../src/styles/step.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,eAAO,MAAM,UAAU,g9CAsDtB,CAAC"}

package/lib/styles/step.js

@@ -1,17 +1,9 @@
 import { customScrollbarStyles } from './custom-scrollbar.js';
 export const stepStyles = `
 :host {
-width: var(--ty-wizard-width, 100%);
-height: calc(var(--ty-wizard-height, 700px) - var(--ty-wizard-indicators-height, 120px));
+height: var(--ty-wizard-panel-height, auto);
 display: block;
 box-sizing: border-box;
-flex-shrink: 0;
-transition: opacity var(--ty-wizard-transition-duration, 400ms) var(--ty-wizard-transition-easing, ease-in-out);
-}
-@media (prefers-reduced-motion: reduce) {
-:host {
-transition-duration: 0ms !important;
-}
 }
 .step-wrapper {
 width: 100%;

package/lib/styles/step.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"step.js","sourceRoot":"","sources":["../../src/styles/step.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsDzB,CAAC"}

package/lib/styles/switch.js

@@ -19,7 +19,10 @@ width: auto;
 vertical-align: middle;
 }
 .switch-container {
-display: inline-block;
+display: inline-flex;
+align-items: center;
+min-height: 1.25em;
+min-height: 1lh;
 cursor: pointer;
 user-select: none;
 outline: none;
@@ -38,7 +41,7 @@ position: relative;
 flex-shrink: 0;
 width: 36px;
 height: 20px;
-border-radius: 999px;
+border-radius: var(--ty-radius-full, 999px);
 background: var(--ty-color-neutral-soft, var(--ty-input-border));
 transition: var(--ty-local-transition, background-color 0.18s ease-in-out);
 box-sizing: border-box;
@@ -49,7 +52,7 @@ top: 2px;
 left: 2px;
 width: 16px;
 height: 16px;
-border-radius: 50%;
+border-radius: min(50%, var(--ty-radius-full, 50%));
 background: white;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 transition: var(--ty-local-transition, transform 0.18s ease-in-out, background-color 0.18s ease-in-out);

package/lib/styles/tab.d.ts

@@ -1,4 +1,4 @@
 /**
  * Tab Component Styles
  */
-export declare const tabStyles = "\n:host {\n  width: var(--tabs-width, 100%);\n  height: calc(var(--tabs-height, 400px) - var(--buttons-height, 48px));\n  display: block;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  transition: opacity var(--ty-tabs-transition-duration, 400ms) var(--ty-tabs-transition-easing, ease-in-out);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    transition-duration: 0ms !important;\n  }\n}\n\n.tab-wrapper {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n}\n\n.tab-panel {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  box-sizing: border-box;\n}\n\n.tab-panel.ty-custom-scroll {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.tab-panel.ty-custom-scroll::-webkit-scrollbar {\n  display: none;\n}\n\n.tab-wrapper:hover .ty-scrollbar-track-y.has-overflow {\n  opacity: 1;\n}\n\n\n/* Vertical track */\n.ty-scrollbar-track-y {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-y.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-y.has-overflow:hover,\n.ty-scrollbar-track-y.has-overflow.scrolling,\n.ty-scrollbar-track-y.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-y::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-y:hover::before,\n.ty-scrollbar-track-y.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-y {\n  position: absolute;\n  right: 0;\n  width: 100%;\n  min-height: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: var(--ty-local-transition, background 0.15s ease-out);\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-y:hover,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-y:active,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* Horizontal track */\n.ty-scrollbar-track-x {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-x.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-x.has-overflow:hover,\n.ty-scrollbar-track-x.has-overflow.scrolling,\n.ty-scrollbar-track-x.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-x::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-x:hover::before,\n.ty-scrollbar-track-x.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-x {\n  position: absolute;\n  bottom: 0;\n  height: 100%;\n  min-width: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: var(--ty-local-transition, background 0.15s ease-out);\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-x:hover,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-x:active,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* Touch devices: hide the custom scrollbar */\n@media (pointer: coarse) and (hover: none) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x {\n    display: none !important;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x,\n  .ty-scrollbar-thumb-y,\n  .ty-scrollbar-thumb-x {\n    transition-duration: 0ms !important;\n  }\n}\n\n";
+export declare const tabStyles = "\n:host {\n  width: 100%;\n  height: 100%;\n  display: block;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  /* ty-tabs hides inactive panels with opacity + visibility. visibility\n     transitions as \"visible until the fade ends\", so a panel leaving fades out\n     and only then drops out of the tab order. */\n  transition:\n    opacity var(--ty-tabs-transition-duration, 400ms) var(--ty-tabs-transition-easing, ease-in-out),\n    visibility var(--ty-tabs-transition-duration, 400ms);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    transition-duration: 0ms !important;\n  }\n}\n\n.tab-wrapper {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n}\n\n.tab-panel {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  box-sizing: border-box;\n}\n\n/* Lazy tabs: placeholder while loading, message + Retry when it failed. */\n.tab-loading,\n.tab-error {\n  display: none;\n  box-sizing: border-box;\n  min-height: 100%;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  padding: 24px;\n  text-align: center;\n}\n\n.tab-panel[data-load=\"loading\"] .tab-loading,\n.tab-panel[data-load=\"failed\"] .tab-error {\n  display: flex;\n}\n\n/* Fades in late, so a fast load never flashes it. */\n.tab-panel[data-load=\"loading\"] .tab-loading {\n  animation: ty-tab-status-in 200ms ease-out 150ms both;\n}\n\n@keyframes ty-tab-status-in {\n  from { opacity: 0; }\n}\n\n.tab-spinner {\n  display: inline-flex;\n  width: 20px;\n  height: 20px;\n  color: var(--ty-text-soft);\n  animation: var(--ty-loader-animation, ty-tab-spin 0.7s linear infinite);\n}\n\n.tab-spinner svg {\n  width: 100%;\n  height: 100%;\n}\n\n@keyframes ty-tab-spin {\n  to { transform: rotate(360deg); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tab-spinner {\n    animation-duration: 1.6s;\n  }\n}\n\n.tab-error {\n  color: var(--ty-text-soft);\n  font-size: 14px;\n}\n\n.tab-retry {\n  font: inherit;\n  font-size: 13px;\n  padding: 4px 14px;\n  border: 1px solid var(--ty-border);\n  border-radius: 9999px;\n  background: transparent;\n  color: var(--ty-text-strong);\n  cursor: pointer;\n}\n\n.tab-retry:hover {\n  border-color: var(--ty-text-soft);\n}\n\n.tab-retry:focus-visible {\n  outline: 2px solid var(--ty-color-primary);\n  outline-offset: 2px;\n}\n\n.tab-panel.ty-custom-scroll {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.tab-panel.ty-custom-scroll::-webkit-scrollbar {\n  display: none;\n}\n\n.tab-wrapper:hover .ty-scrollbar-track-y.has-overflow {\n  opacity: 1;\n}\n\n\n/* Vertical track */\n.ty-scrollbar-track-y {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-y.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-y.has-overflow:hover,\n.ty-scrollbar-track-y.has-overflow.scrolling,\n.ty-scrollbar-track-y.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-y::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-y:hover::before,\n.ty-scrollbar-track-y.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-y {\n  position: absolute;\n  right: 0;\n  width: 100%;\n  min-height: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: var(--ty-local-transition, background 0.15s ease-out);\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-y:hover,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-y:active,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* Horizontal track */\n.ty-scrollbar-track-x {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-x.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-x.has-overflow:hover,\n.ty-scrollbar-track-x.has-overflow.scrolling,\n.ty-scrollbar-track-x.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-x::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-x:hover::before,\n.ty-scrollbar-track-x.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-x {\n  position: absolute;\n  bottom: 0;\n  height: 100%;\n  min-width: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: var(--ty-local-transition, background 0.15s ease-out);\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-x:hover,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-x:active,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* Touch devices: hide the custom scrollbar */\n@media (pointer: coarse) and (hover: none) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x {\n    display: none !important;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x,\n  .ty-scrollbar-thumb-y,\n  .ty-scrollbar-thumb-x {\n    transition-duration: 0ms !important;\n  }\n}\n\n";

package/lib/styles/tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../src/styles/tab.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,eAAO,MAAM,SAAS,g8CAsDrB,CAAC"}

package/lib/styles/tab.js

@@ -1,12 +1,14 @@
 import { customScrollbarStyles } from './custom-scrollbar.js';
 export const tabStyles = `
 :host {
-width: var(--tabs-width, 100%);
-height: calc(var(--tabs-height, 400px) - var(--buttons-height, 48px));
+width: 100%;
+height: 100%;
 display: block;
 box-sizing: border-box;
 flex-shrink: 0;
-transition: opacity var(--ty-tabs-transition-duration, 400ms) var(--ty-tabs-transition-easing, ease-in-out);
+transition:
+opacity var(--ty-tabs-transition-duration, 400ms) var(--ty-tabs-transition-easing, ease-in-out),
+visibility var(--ty-tabs-transition-duration, 400ms);
 }
 @media (prefers-reduced-motion: reduce) {
 :host {
@@ -25,6 +27,68 @@ height: 100%;
 overflow: auto;
 box-sizing: border-box;
 }
+.tab-loading,
+.tab-error {
+display: none;
+box-sizing: border-box;
+min-height: 100%;
+flex-direction: column;
+align-items: center;
+justify-content: center;
+gap: 12px;
+padding: 24px;
+text-align: center;
+}
+.tab-panel[data-load="loading"] .tab-loading,
+.tab-panel[data-load="failed"] .tab-error {
+display: flex;
+}
+.tab-panel[data-load="loading"] .tab-loading {
+animation: ty-tab-status-in 200ms ease-out 150ms both;
+}
+@keyframes ty-tab-status-in {
+from { opacity: 0; }
+}
+.tab-spinner {
+display: inline-flex;
+width: 20px;
+height: 20px;
+color: var(--ty-text-soft);
+animation: var(--ty-loader-animation, ty-tab-spin 0.7s linear infinite);
+}
+.tab-spinner svg {
+width: 100%;
+height: 100%;
+}
+@keyframes ty-tab-spin {
+to { transform: rotate(360deg); }
+}
+@media (prefers-reduced-motion: reduce) {
+.tab-spinner {
+animation-duration: 1.6s;
+}
+}
+.tab-error {
+color: var(--ty-text-soft);
+font-size: 14px;
+}
+.tab-retry {
+font: inherit;
+font-size: 13px;
+padding: 4px 14px;
+border: 1px solid var(--ty-border);
+border-radius: 9999px;
+background: transparent;
+color: var(--ty-text-strong);
+cursor: pointer;
+}
+.tab-retry:hover {
+border-color: var(--ty-text-soft);
+}
+.tab-retry:focus-visible {
+outline: 2px solid var(--ty-color-primary);
+outline-offset: 2px;
+}
 .tab-panel.ty-custom-scroll {
 scrollbar-width: none;
 -ms-overflow-style: none;

package/lib/styles/tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../src/styles/tab.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,MAAM,CAAC,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsDxB,CAAC"}

package/lib/styles/tabs.d.ts

@@ -2,4 +2,4 @@
  * Tabs Component Styles — ty-tabs container: top/bottom placement, animated
  * active marker, carousel viewport. Customizable via CSS Parts (::part).
  */
-export declare const tabsStyles = "\n:host {\n  display: block;\n  width: var(--tabs-width, 100%);\n  height: var(--tabs-height, 400px);\n  box-sizing: border-box;\n}\n\n.tabs-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  box-sizing: border-box;\n}\n\n.tabs-container[data-placement=\"bottom\"] {\n  flex-direction: column-reverse;\n}\n\n/* Tab buttons container \u2014 exposed as a CSS Part for full styling control */\n.tab-buttons {\n  display: flex;\n  gap: 0;\n  flex-shrink: 0;\n  position: relative;\n\n  /* Default minimal styling - customize via ::part(buttons-container) */\n  background: transparent;\n}\n\n/* Separator drawn as a pseudo-element, not a border: a border sits OUTSIDE the\n   strip's box, so the marker (absolutely positioned inside the strip) could only\n   ever stop just above it, reading as two stacked lines. As an overlaid line it\n   lands inside the marker's range, and .tab-strip's z-index lets the marker\n   cover it. */\n.tab-buttons::after {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  height: 1px;\n  /* --ty-tabs-separator: transparent removes the line (e.g. with a pill marker) */\n  background: var(--ty-tabs-separator, var(--ty-border));\n  pointer-events: none;\n}\n\n.tabs-container[data-placement=\"bottom\"] .tab-buttons::after {\n  bottom: auto;\n  top: 0;\n}\n\n/* Scrollable strip holding the buttons + marker. Tabs never collapse \u2014 the\n   strip scrolls (scrollbar hidden; touch/wheel still work) and activation\n   glides the active tab into view. The \"\u2026\" trigger sits OUTSIDE this strip,\n   pinned at the edge. position:relative makes it the offsetParent for the\n   marker, so the marker scrolls with the buttons and can't desync. */\n.tab-strip {\n  display: flex;\n  flex: 1 1 auto;\n  min-width: 0;\n  position: relative;\n  /* Paints the marker + buttons over .tab-buttons::after (the separator line) */\n  z-index: 1;\n  overflow-x: auto;\n  scrollbar-width: none;\n  /* Edge fades \u2014 a mask, not overlays, so it works over any background.\n     --fade-left/right are set from the scroll listener: 0px at a hard edge,\n     28px when more tabs continue past that side. */\n  --fade-left: 0px;\n  --fade-right: 0px;\n  -webkit-mask-image: linear-gradient(to right,\n    transparent, black var(--fade-left),\n    black calc(100% - var(--fade-right)), transparent);\n  mask-image: linear-gradient(to right,\n    transparent, black var(--fade-left),\n    black calc(100% - var(--fade-right)), transparent);\n}\n\n.tab-strip::-webkit-scrollbar {\n  display: none;\n}\n\n/* When every tab fits there is nothing to scroll, so drop the clipping \u2014\n   both overflow and the mask cut a custom marker's box-shadow off at the\n   strip edge. Set by updateOverflow(); clipping stays the pre-measurement\n   default so overflowing tabs can't spill for a frame on first render. */\n.tab-strip.unclipped {\n  overflow: visible;\n  -webkit-mask-image: none;\n  mask-image: none;\n}\n\n/* Marker wrapper \u2014 exposed as a CSS Part for custom marker styling */\n.marker-wrapper {\n  position: absolute;\n  z-index: 0;\n  /* Behind buttons */\n  pointer-events: none;\n  /* Don't block clicks */\n  transition: left var(--ty-tabs-transition-duration, 300ms) var(--ty-tabs-transition-easing, ease-in-out),\n    width var(--ty-tabs-transition-duration, 300ms) var(--ty-tabs-transition-easing, ease-in-out),\n    height var(--ty-tabs-transition-duration, 300ms) var(--ty-tabs-transition-easing, ease-in-out),\n    top var(--ty-tabs-transition-duration, 300ms) var(--ty-tabs-transition-easing, ease-in-out);\n}\n\n.default-marker {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  height: 3px;\n  width: 100%;\n  background: var(--ty-color-primary);\n  pointer-events: none;\n}\n\n/* Bottom placement: marker rides the top edge, next to the content it marks */\n.tabs-container[data-placement=\"bottom\"] .default-marker {\n  bottom: auto;\n  top: 0;\n}\n\n::slotted([slot=\"marker\"]) {\n  display: block;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n}\n\n.tab-button {\n  /* Material's floor for SCROLLABLE tabs. 120px is the fixed-tab number and it\n     manufactured overflow: five short labels claimed 600px whether they needed\n     it or not. Equal-width rhythm is what the \"fixed\" attribute is for. */\n  min-width: var(--ty-tab-min-width, 72px);\n  /* Scrollable tabs keep their natural width and let the strip scroll \u2014 that is\n     the whole contract. Without this they are flex items with the default\n     shrink of 1, so they squeeze toward the floor and their labels ellipsize\n     before the strip ever overflows. Squeezing is what \"fixed\" is for. */\n  flex-shrink: 0;\n  padding: 6px 12px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font: inherit;\n  color: var(--ty-text-soft);\n  transition: var(--ty-local-transition, color 200ms, background-color 200ms);\n  white-space: nowrap;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  font-weight: var(--ty-font-bold);\n  font-size: var(--ty-font-sm);\n  position: relative;\n  /* Establish stacking context */\n  z-index: 10;\n  /* Above marker */\n}\n\n/* Fixed tabs: the bar is divided between them instead of scrolling. Material\n   calls this \"fixed tabs\" \u2014 for a small, known set of short labels. No\n   min-width floor, no overflow, no \"\u2026\". */\n.tabs-container[data-fixed] .tab-button {\n  flex: 1 1 0;\n  min-width: 0;\n}\n\n/* Fixed tabs only. A scrollable tab is never narrower than its label, so\n   ellipsizing there would hide text the user could simply scroll to. */\n.tabs-container[data-fixed] .tab-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.tab-button[aria-selected=true] {\n  color: var(--ty-text-strong);\n}\n\n.tab-button[disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.tab-button:focus-visible {\n  outline: 2px solid var(--ty-color-primary);\n  outline-offset: -2px;\n}\n\n/* Overflow \"more\" trigger (pill) + menu */\n.tab-overflow-trigger {\n  flex-shrink: 0;\n  align-self: center;\n  min-width: 36px;\n  height: 24px;\n  margin: 0 8px;\n  padding: 0 10px;\n  border: 1px solid var(--ty-border);\n  border-radius: 9999px;\n  background: transparent;\n  cursor: pointer;\n  color: var(--ty-text-soft);\n  font-size: 16px;\n  line-height: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 10;\n  transition: color 200ms, border-color 200ms;\n}\n\n.tab-overflow-trigger:hover {\n  color: var(--ty-text-strong);\n  border-color: var(--ty-text-soft);\n}\n\n.tab-overflow-trigger:focus-visible {\n  outline: 2px solid var(--ty-color-primary);\n  outline-offset: -2px;\n}\n\n.tab-overflow-menu {\n  display: flex;\n  flex-direction: column;\n  min-width: 160px;\n  max-height: 300px;\n  overflow-y: auto;\n  padding: var(--ty-spacing-2, 4px);\n  background: var(--ty-surface-floating);\n  border-radius: var(--ty-radius-md);\n  box-shadow: var(--ty-shadow-md, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1));\n}\n\n.tab-overflow-item {\n  padding: var(--ty-spacing-2, 6px) var(--ty-spacing-3, 12px);\n  border: none;\n  background: transparent;\n  text-align: left;\n  cursor: pointer;\n  border-radius: var(--ty-radius-md);\n  color: var(--ty-text);\n  font: inherit;\n  font-size: var(--ty-font-sm);\n  white-space: nowrap;\n}\n\n.tab-overflow-item:hover {\n  background: var(--ty-bg-neutral-soft);\n  color: var(--ty-text-strong);\n}\n\n.tab-overflow-item[data-active=\"true\"] {\n  color: var(--ty-color-primary);\n  font-weight: var(--ty-font-bold);\n}\n\n.tab-overflow-item[disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Panels viewport \u2014 exposed as a CSS Part */\n.panels-viewport {\n  position: relative;\n  flex: 1;\n  overflow: hidden;\n  /* Critical: hides off-screen panels */\n  min-height: 0;\n  /* Allows flex child to shrink */\n}\n\n/* Panels wrapper slides horizontally */\n.panels-wrapper {\n  display: flex;\n  height: 100%;\n  transition: transform var(--ty-tabs-transition-duration, 300ms) var(--ty-tabs-transition-easing, ease-in-out);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .panels-wrapper {\n    transition-duration: 0ms !important;\n  }\n\n  .marker-wrapper {\n    transition-duration: 0ms !important;\n  }\n}\n\n::slotted(ty-tab) {\n  /* Carousel page width. --tabs-page-width is the measured pixel width, set by\n     the ResizeObserver for percentage-width tabs so every panel is exactly one\n     page wide. It is deliberately NOT --tabs-width: that one sizes :host, and\n     feeding a measured pixel value back into the host's own width is a\n     self-referential loop (see setupResizeObserver). */\n  width: var(--tabs-page-width, var(--tabs-width, 100%));\n  height: 100%;\n  flex-shrink: 0;\n}\n";
+export declare const tabsStyles = "\n:host {\n  display: block;\n  /* Defaults. The width/height attributes override these (and page CSS)\n     through the per-instance sheet. */\n  width: 100%;\n  height: 400px;\n  box-sizing: border-box;\n}\n\n.tabs-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  box-sizing: border-box;\n}\n\n.tabs-container[data-placement=\"bottom\"] {\n  flex-direction: column-reverse;\n}\n\n/* Tab buttons container \u2014 exposed as a CSS Part for full styling control */\n.tab-buttons {\n  display: flex;\n  gap: 0;\n  flex-shrink: 0;\n  position: relative;\n\n  /* Default minimal styling - customize via ::part(buttons-container) */\n  background: transparent;\n}\n\n/* Separator drawn as a pseudo-element, not a border: a border sits OUTSIDE the\n   strip's box, so the marker (absolutely positioned inside the strip) could only\n   ever stop just above it, reading as two stacked lines. As an overlaid line it\n   lands inside the marker's range, and .tab-strip's z-index lets the marker\n   cover it. */\n.tab-buttons::after {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  height: 1px;\n  /* --ty-tabs-separator: transparent removes the line (e.g. with a pill marker) */\n  background: var(--ty-tabs-separator, var(--ty-border));\n  pointer-events: none;\n}\n\n.tabs-container[data-placement=\"bottom\"] .tab-buttons::after {\n  bottom: auto;\n  top: 0;\n}\n\n/* Scrollable strip holding the buttons + marker. Tabs never collapse \u2014 the\n   strip scrolls (scrollbar hidden; touch/wheel still work) and activation\n   glides the active tab into view. The \"\u2026\" trigger sits OUTSIDE this strip,\n   pinned at the edge. position:relative makes it the offsetParent for the\n   marker, so the marker scrolls with the buttons and can't desync. */\n.tab-strip {\n  display: flex;\n  flex: 1 1 auto;\n  min-width: 0;\n  position: relative;\n  /* Paints the marker + buttons over .tab-buttons::after (the separator line) */\n  z-index: 1;\n  overflow-x: auto;\n  scrollbar-width: none;\n  /* Edge fades \u2014 a mask, not overlays, so it works over any background.\n     --fade-left/right are set from the scroll listener: 0px at a hard edge,\n     28px when more tabs continue past that side. */\n  --fade-left: 0px;\n  --fade-right: 0px;\n  -webkit-mask-image: linear-gradient(to right,\n    transparent, black var(--fade-left),\n    black calc(100% - var(--fade-right)), transparent);\n  mask-image: linear-gradient(to right,\n    transparent, black var(--fade-left),\n    black calc(100% - var(--fade-right)), transparent);\n}\n\n.tab-strip::-webkit-scrollbar {\n  display: none;\n}\n\n/* When every tab fits there is nothing to scroll, so drop the clipping \u2014\n   both overflow and the mask cut a custom marker's box-shadow off at the\n   strip edge. Set by updateOverflow(); clipping stays the pre-measurement\n   default so overflowing tabs can't spill for a frame on first render. */\n.tab-strip.unclipped {\n  overflow: visible;\n  -webkit-mask-image: none;\n  mask-image: none;\n}\n\n/* Marker wrapper \u2014 exposed as a CSS Part for custom marker styling */\n.marker-wrapper {\n  position: absolute;\n  z-index: 0;\n  /* Behind buttons */\n  pointer-events: none;\n  /* Don't block clicks */\n  transition: left var(--ty-tabs-transition-duration, 300ms) var(--ty-tabs-transition-easing, ease-in-out),\n    width var(--ty-tabs-transition-duration, 300ms) var(--ty-tabs-transition-easing, ease-in-out),\n    height var(--ty-tabs-transition-duration, 300ms) var(--ty-tabs-transition-easing, ease-in-out),\n    top var(--ty-tabs-transition-duration, 300ms) var(--ty-tabs-transition-easing, ease-in-out);\n}\n\n.default-marker {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  height: 3px;\n  width: 100%;\n  background: var(--ty-color-primary);\n  pointer-events: none;\n}\n\n/* Bottom placement: marker rides the top edge, next to the content it marks */\n.tabs-container[data-placement=\"bottom\"] .default-marker {\n  bottom: auto;\n  top: 0;\n}\n\n::slotted([slot=\"marker\"]) {\n  display: block;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n}\n\n.tab-button {\n  /* Material's floor for SCROLLABLE tabs. 120px is the fixed-tab number and it\n     manufactured overflow: five short labels claimed 600px whether they needed\n     it or not. Equal-width rhythm is what the \"fixed\" attribute is for. */\n  min-width: var(--ty-tab-min-width, 72px);\n  /* Scrollable tabs keep their natural width and let the strip scroll \u2014 that is\n     the whole contract. Without this they are flex items with the default\n     shrink of 1, so they squeeze toward the floor and their labels ellipsize\n     before the strip ever overflows. Squeezing is what \"fixed\" is for. */\n  flex-shrink: 0;\n  padding: 6px 12px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font: inherit;\n  color: var(--ty-text-soft);\n  transition: var(--ty-local-transition, color 200ms, background-color 200ms);\n  white-space: nowrap;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  font-weight: var(--ty-font-bold);\n  font-size: var(--ty-font-sm);\n  position: relative;\n  /* Establish stacking context */\n  z-index: 10;\n  /* Above marker */\n}\n\n/* Fixed tabs: the bar is divided between them instead of scrolling. Material\n   calls this \"fixed tabs\" \u2014 for a small, known set of short labels. No\n   min-width floor, no overflow, no \"\u2026\". */\n.tabs-container[data-fixed] .tab-button {\n  flex: 1 1 0;\n  min-width: 0;\n}\n\n/* Fixed tabs only. A scrollable tab is never narrower than its label, so\n   ellipsizing there would hide text the user could simply scroll to. */\n.tabs-container[data-fixed] .tab-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.tab-button[aria-selected=true] {\n  color: var(--ty-text-strong);\n}\n\n.tab-button[disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.tab-button:focus-visible {\n  outline: 2px solid var(--ty-color-primary);\n  outline-offset: -2px;\n}\n\n/* Overflow \"more\" trigger (pill) + menu */\n.tab-overflow-trigger {\n  flex-shrink: 0;\n  align-self: center;\n  min-width: 36px;\n  height: 24px;\n  margin: 0 8px;\n  padding: 0 10px;\n  border: 1px solid var(--ty-border);\n  border-radius: 9999px;\n  background: transparent;\n  cursor: pointer;\n  color: var(--ty-text-soft);\n  font-size: 16px;\n  line-height: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 10;\n  transition: color 200ms, border-color 200ms;\n}\n\n.tab-overflow-trigger:hover {\n  color: var(--ty-text-strong);\n  border-color: var(--ty-text-soft);\n}\n\n.tab-overflow-trigger:focus-visible {\n  outline: 2px solid var(--ty-color-primary);\n  outline-offset: -2px;\n}\n\n.tab-overflow-menu {\n  display: flex;\n  flex-direction: column;\n  min-width: 160px;\n  max-height: 300px;\n  overflow-y: auto;\n  padding: var(--ty-spacing-2, 4px);\n  background: var(--ty-surface-floating);\n  border-radius: var(--ty-radius-md);\n  box-shadow: var(--ty-shadow-md, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1));\n}\n\n.tab-overflow-item {\n  padding: var(--ty-spacing-2, 6px) var(--ty-spacing-3, 12px);\n  border: none;\n  background: transparent;\n  text-align: left;\n  cursor: pointer;\n  border-radius: var(--ty-radius-md);\n  color: var(--ty-text);\n  font: inherit;\n  font-size: var(--ty-font-sm);\n  white-space: nowrap;\n}\n\n.tab-overflow-item:hover {\n  background: var(--ty-bg-neutral-soft);\n  color: var(--ty-text-strong);\n}\n\n.tab-overflow-item[data-active=\"true\"] {\n  color: var(--ty-color-primary);\n  font-weight: var(--ty-font-bold);\n}\n\n.tab-overflow-item[disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Panels viewport \u2014 exposed as a CSS Part */\n.panels-viewport {\n  position: relative;\n  flex: 1;\n  overflow: hidden;\n  /* Critical: hides off-screen panels */\n  min-height: 0;\n  /* Allows flex child to shrink */\n}\n\n/* Panels wrapper slides horizontally */\n.panels-wrapper {\n  display: flex;\n  height: 100%;\n  transition: transform var(--ty-tabs-transition-duration, 300ms) var(--ty-tabs-transition-easing, ease-in-out);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .panels-wrapper {\n    transition-duration: 0ms !important;\n  }\n\n  .marker-wrapper {\n    transition-duration: 0ms !important;\n  }\n}\n\n::slotted(ty-tab) {\n  /* One carousel page: the viewport's width. */\n  width: 100%;\n  height: 100%;\n  flex-shrink: 0;\n}\n\n/* Snap: an early `active` correction lands without sliding or fading. */\n.tabs-container[data-snap] .panels-wrapper,\n.tabs-container[data-snap] ::slotted(ty-tab) {\n  transition: none;\n}\n";

package/lib/styles/tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/styles/tabs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,UAAU,2mIA2KtB,CAAC"}

package/lib/styles/tabs.js

@@ -1,8 +1,8 @@
 export const tabsStyles = `
 :host {
 display: block;
-width: var(--tabs-width, 100%);
-height: var(--tabs-height, 400px);
+width: 100%;
+height: 400px;
 box-sizing: border-box;
 }
 .tabs-container {
@@ -215,8 +215,12 @@ transition-duration: 0ms !important;
 }
 }
 ::slotted(ty-tab) {
-width: var(--tabs-page-width, var(--tabs-width, 100%));
+width: 100%;
 height: 100%;
 flex-shrink: 0;
 }
+.tabs-container[data-snap] .panels-wrapper,
+.tabs-container[data-snap] ::slotted(ty-tab) {
+transition: none;
+}
 `;

package/lib/styles/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../src/styles/tabs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2KzB,CAAC"}

package/lib/styles/tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../src/styles/tag.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,SAAS,g4RAkWrB,CAAA"}

package/lib/styles/tag.js

@@ -53,8 +53,7 @@ color: var(--tag-color, var(--ty-text));
 border: 1px solid;
 border-color: var(--tag-border-color, var(--ty-border));
 }
-:host([pill="false"]) .tag-container,
-:host([not-pill]) .tag-container {
+:host([no-pill]) .tag-container {
 border-radius: var(--ty-radius-md);
 }
 :host([value]:not([selected])) .tag-container:not([aria-disabled="true"]) {

package/lib/styles/tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../src/styles/tag.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkWxB,CAAA"}

package/lib/styles/textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../src/styles/textarea.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,cAAc,mpMA2S1B,CAAA"}

package/lib/styles/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../src/styles/textarea.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2S7B,CAAA"}

package/lib/styles/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/styles/tooltip.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD,eAAO,MAAM,aAAa,EAAE,YAgI3B,CAAC"}

package/lib/styles/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../src/styles/tooltip.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,MAAM,CAAC,MAAM,aAAa,GAAiB;IACzC,EAAE,EAAE,YAAY;IAChB,GAAG,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6HN;CACA,CAAC"}

package/lib/styles/wizard.d.ts

@@ -1,9 +1,13 @@
 /**
  * Wizard Component Styles
  *
- * CSS Parts (::part): indicators-wrapper, progress-line, step-circle,
- * panels-container. Theming knobs are declared on :host below; per-state
- * circles read the matching accent var directly (no `-bg` indirection), and
- * the brand-layer flavor seeds cascade through for per-shade control.
+ * Inline rail: indicator + label side by side, connectors between steps that
+ * fill as steps complete. One accent (active = where you are); completed is
+ * solid ink with a check, pending a faint ring, error a danger ring with "!".
+ * When the labels don't fit, the rail collapses to "Step N of M" over a
+ * segment bar (measured in JS, see updateCompact).
+ *
+ * CSS Parts (::part): indicators-wrapper, step-circle, progress (segment bar),
+ * panels-container.
  */
-export declare const wizardStyles = "\n/* Theming tokens \u2014 every default chains back to the brand layer / global\n   scale tokens. */\n\n:host {\n  display: block;\n  width: var(--ty-wizard-width, 100%);   /* set by width attribute \u2014 not a public token */\n  height: var(--ty-wizard-height, 700px); /* set by height attribute \u2014 not a public token */\n  box-sizing: border-box;\n\n  /* State accents \u2014 the primary override surface. One variable retints the\n   * matching circle background, border, and glow. */\n  --ty-wizard-active-accent:    var(--ty-color-primary);\n  --ty-wizard-completed-accent: var(--ty-color-success);\n  --ty-wizard-error-accent:     var(--ty-color-danger);\n  --ty-wizard-pending-accent:   var(--ty-color-neutral);\n\n  /* Container chrome \u2014 routes through global scales. Override --ty-radius-lg\n   * or --ty-shadow-md app-wide and the wizard follows; override these locally\n   * to give the wizard a distinct look. */\n  --ty-wizard-bg:     var(--ty-surface-floating);\n  --ty-wizard-border: var(--ty-border);\n  --ty-wizard-radius: var(--ty-radius-lg, 12px);\n  --ty-wizard-shadow: var(--ty-shadow-md, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1));\n\n  --ty-wizard-header-bg:      var(--ty-surface-content);\n  --ty-wizard-header-border:  var(--ty-border-soft, var(--ty-border));\n  --ty-wizard-header-padding: 24px 24px 16px;\n\n  --ty-wizard-progress-track:  var(--ty-border);\n  --ty-wizard-progress-fill:   var(--ty-wizard-completed-accent);\n  --ty-wizard-progress-height: 2px;\n\n  /* Motion \u2014 routes through global motion tokens if defined. */\n  --ty-wizard-transition-duration: var(--ty-transition-duration, 300ms);\n  --ty-wizard-transition-easing:   var(--ty-transition-easing, ease-in-out);\n\n  --ty-wizard-circle-size:         32px;\n  --ty-wizard-circle-border-width: 2px;\n\n  --ty-wizard-panels-bg: var(--ty-surface-elevated);\n\n  --ty-wizard-focus-outline: var(--ty-wizard-active-accent);\n}\n\n.wizard-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  box-sizing: border-box;\n  border-radius: var(--ty-wizard-radius);\n  border: 1px solid var(--ty-wizard-border);\n  background: var(--ty-wizard-bg);\n  box-shadow: var(--ty-wizard-shadow);\n  overflow: hidden;\n}\n\n.step-indicators-wrapper {\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  position: relative;\n  padding: var(--ty-wizard-header-padding);\n  border-bottom: 1px solid var(--ty-wizard-header-border);\n  background: var(--ty-wizard-header-bg);\n}\n\n/* Progress line, behind the step circles */\n.progress-line {\n  position: absolute;\n  /*\n   * With equal-width indicators (flex: 1), each takes 100%/N of the width.\n   * Circle centers sit at 50%/N from the left edge of each indicator.\n   * Inset = 50% / step-count from each side keeps the line between circle centres.\n   */\n  left: calc(50% / var(--ty-wizard-step-count, 4));\n  right: calc(50% / var(--ty-wizard-step-count, 4));\n  top: calc(var(--ty-wizard-circle-size, 32px) / 2 - 1px);\n  height: var(--ty-wizard-progress-height);\n  background: var(--ty-wizard-progress-track);\n  z-index: 0;\n  pointer-events: none;\n  transition: opacity var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing);\n}\n\n.progress-overlay {\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  background: var(--ty-wizard-progress-fill);\n  transition: width var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing);\n  will-change: width;\n}\n\n.step-indicators {\n  display: flex;\n  align-items: flex-start;\n  position: relative;\n}\n\n.step-indicator {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  background: transparent;\n  border: none;\n  padding: 0;\n  font: inherit;\n  transition: opacity 200ms;\n  flex: 1;\n  min-width: 0;\n}\n\n.step-indicator[aria-disabled=\"true\"] {\n  opacity: 0.4;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.step-indicator:focus-visible {\n  outline: 2px solid var(--ty-wizard-focus-outline);\n  outline-offset: 4px;\n  border-radius: 50%;\n}\n\n.step-circle {\n  width: var(--ty-wizard-circle-size);\n  height: var(--ty-wizard-circle-size);\n  border-radius: 50%;\n  border: var(--ty-wizard-circle-border-width) solid;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 10;\n  transition: var(--ty-local-transition, all var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing));\n  box-sizing: border-box;\n  flex-shrink: 0;\n}\n\n.step-circle[data-state=\"completed\"] {\n  background: var(--ty-wizard-completed-accent);\n  border-color: var(--ty-color-success-strong);\n  /* Derived from the accent this circle actually paints, not from\n     --ty-solid-success-fg: the two diverge in dark mode (--ty-solid-l\n     dims solid fills by 0.25 L), which stranded white text at 3.5:1. */\n  color: oklch(\n    from var(--ty-wizard-completed-accent)\n      clamp(0, (var(--ty-solid-fg-threshold, 0.57) - l) * 1000, 1) 0 0\n  );\n  box-shadow: 0 0 0 4px color-mix(in oklab, var(--ty-wizard-completed-accent) 12%, transparent);\n}\n\n.step-circle[data-state=\"active\"] {\n  background: var(--ty-wizard-active-accent);\n  border-color: var(--ty-color-primary-strong);\n  color: oklch(\n    from var(--ty-wizard-active-accent)\n      clamp(0, (var(--ty-solid-fg-threshold, 0.57) - l) * 1000, 1) 0 0\n  );\n  box-shadow: 0 0 0 4px color-mix(in oklab, var(--ty-wizard-active-accent) 12%, transparent);\n}\n\n.step-circle[data-state=\"pending\"] {\n  background: var(--ty-surface-elevated);\n  border-color: var(--ty-border);\n  color: var(--ty-color-neutral);\n}\n\n.step-circle[data-state=\"error\"] {\n  background: var(--ty-wizard-error-accent);\n  border-color: var(--ty-color-danger-strong);\n  color: oklch(\n    from var(--ty-wizard-error-accent)\n      clamp(0, (var(--ty-solid-fg-threshold, 0.57) - l) * 1000, 1) 0 0\n  );\n  box-shadow: 0 0 0 4px color-mix(in oklab, var(--ty-wizard-error-accent) 12%, transparent);\n}\n\n.step-text {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  align-items: center;\n}\n\n.step-label {\n  font-size: var(--ty-font-sm, 14px);\n  font-weight: var(--ty-font-semibold, 600);\n  color: var(--ty-color-neutral);\n  transition: var(--ty-local-transition, color 200ms);\n}\n\n.step-indicator[aria-selected=\"true\"] .step-label {\n  color: var(--ty-color-neutral-strong);\n}\n\n.step-indicator[aria-selected=\"false\"] .step-label {\n  color: var(--ty-color-neutral);\n}\n\n.step-description {\n  font-size: var(--ty-font-xs, 12px);\n  font-weight: var(--ty-font-normal, 400);\n  color: var(--ty-color-neutral);\n  transition: var(--ty-local-transition, color 200ms);\n  text-align: center;\n  max-width: 120px;\n}\n\n.step-indicator[aria-selected=\"true\"] .step-description {\n  color: var(--ty-color-neutral-bold);\n}\n\n/* Custom indicator content via slots */\n::slotted([slot^=\"indicator-\"]) {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n}\n\n.panels-viewport {\n  position: relative;\n  flex: 1;\n  overflow: hidden;\n  min-height: 0;\n  background: var(--ty-wizard-panels-bg);\n}\n\n/* Panels wrapper slides horizontally */\n.panels-wrapper {\n  display: flex;\n  height: 100%;\n  transition: transform var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing);\n  will-change: transform;\n}\n\n::slotted(ty-step) {\n  width: var(--ty-wizard-width, 100%);\n  height: 100%;\n  flex-shrink: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .panels-wrapper {\n    transition-duration: 0ms !important;\n  }\n\n  .progress-overlay {\n    transition-duration: 0ms !important;\n  }\n\n  .step-circle {\n    transition-duration: 0ms !important;\n  }\n\n  .progress-line {\n    transition-duration: 0ms !important;\n  }\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n";
+export declare const wizardStyles = "\n:host {\n  display: block;\n  width: var(--ty-wizard-width, 100%);   /* set by width attribute \u2014 not a public token */\n  box-sizing: border-box;\n\n  /* State accents. Completed is ink, not green: one accent marks where you\n   * are, color is kept for \"here\" and for problems. */\n  --ty-wizard-active-accent:    var(--ty-color-primary);\n  --ty-wizard-completed-accent: var(--ty-text-strong, var(--ty-color-neutral-strong));\n  --ty-wizard-error-accent:     var(--ty-color-danger);\n  --ty-wizard-pending-accent:   color-mix(in oklab, var(--ty-text, currentColor) 35%, transparent);\n\n  /* Container chrome. One surface, hairline divider, no shadow by default:\n   * the wizard is a layout primitive, the page decides elevation. */\n  --ty-wizard-bg:     var(--ty-surface-elevated);\n  --ty-wizard-border: var(--ty-border);\n  --ty-wizard-radius: var(--ty-radius-lg, 12px);\n  --ty-wizard-shadow: none;\n\n  --ty-wizard-header-bg:      transparent;\n  --ty-wizard-header-border:  var(--ty-wizard-border);\n  --ty-wizard-header-padding: 14px 20px;\n\n  --ty-wizard-progress-track:  var(--ty-border);\n  --ty-wizard-progress-fill:   var(--ty-wizard-completed-accent);\n  --ty-wizard-progress-height: 1.5px;\n\n  /* Panel slide \u2014 same motion as ty-tabs. */\n  --ty-wizard-transition-duration: var(--ty-transition-duration, 300ms);\n  --ty-wizard-transition-easing:   var(--ty-transition-easing, ease-in-out);\n\n  --ty-wizard-circle-size:         24px;\n  --ty-wizard-circle-border-width: 1.5px;\n\n  --ty-wizard-panels-bg: transparent;\n\n  --ty-wizard-focus-outline: var(--ty-wizard-active-accent);\n}\n\n.wizard-container {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  box-sizing: border-box;\n  border-radius: var(--ty-wizard-radius);\n  border: 1px solid var(--ty-wizard-border);\n  background: var(--ty-wizard-bg);\n  box-shadow: var(--ty-wizard-shadow);\n  overflow: hidden;\n}\n\n.step-indicators-wrapper {\n  flex-shrink: 0;\n  padding: var(--ty-wizard-header-padding);\n  border-bottom: 1px solid var(--ty-wizard-header-border);\n  background: var(--ty-wizard-header-bg);\n}\n\n/* ---------- Rail ---------- */\n\n.step-indicators {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.step-indicator {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  /* Content basis: labels keep their width, extra space goes to connectors\n     (equally). If they don't fit at all, JS switches to the compact header. */\n  flex: 1 1 auto;\n  min-width: 0;\n  cursor: pointer;\n  background: transparent;\n  border: none;\n  padding: 0;\n  font: inherit;\n  color: inherit;\n  text-align: left;\n  outline: none;\n}\n\n.step-indicator:last-child {\n  flex: 0 0 auto;\n}\n\n/* Connector to the next step \u2014 a pseudo-element, so the tablist owns only tabs. */\n.step-indicator:not(:last-child)::after {\n  content: \"\";\n  flex: 1 1 auto;\n  min-width: 16px;\n  height: var(--ty-wizard-progress-height);\n  border-radius: 1px;\n  margin-left: 4px;\n  background: var(--ty-wizard-progress-track);\n  transition: background var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing);\n}\n\n.step-indicator[data-done=\"true\"]:not(:last-child)::after {\n  background: var(--ty-wizard-progress-fill);\n}\n\n.step-indicator[aria-disabled=\"true\"] {\n  opacity: 0.45;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.step-indicator:focus-visible .step-circle {\n  outline: 2px solid var(--ty-wizard-focus-outline);\n  outline-offset: 2px;\n}\n\n.step-circle {\n  width: var(--ty-wizard-circle-size);\n  height: var(--ty-wizard-circle-size);\n  border-radius: 50%;\n  border: var(--ty-wizard-circle-border-width) solid;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  font-size: calc(var(--ty-wizard-circle-size) * 0.46);\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n  line-height: 1;\n  transition: var(--ty-local-transition, background-color var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing), border-color var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing), color var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing));\n}\n\n.step-circle svg {\n  width: 58%;\n  height: 58%;\n}\n\n.step-circle[data-state=\"completed\"] {\n  background: var(--ty-wizard-completed-accent);\n  border-color: var(--ty-wizard-completed-accent);\n  /* Derived from the accent this circle paints, so any override stays legible. */\n  color: oklch(\n    from var(--ty-wizard-completed-accent)\n      clamp(0, (var(--ty-solid-fg-threshold, 0.57) - l) * 1000, 1) 0 0\n  );\n}\n\n.step-circle[data-state=\"active\"] {\n  background: color-mix(in oklab, var(--ty-wizard-active-accent) 12%, var(--ty-wizard-bg));\n  border-color: var(--ty-wizard-active-accent);\n  /* Nudged toward the text color so the number clears 4.5:1 on its tint. */\n  color: color-mix(in oklab, var(--ty-wizard-active-accent) 75%, var(--ty-text-strong, currentColor));\n}\n\n.step-circle[data-state=\"pending\"] {\n  background: transparent;\n  border-color: var(--ty-wizard-pending-accent);\n  color: var(--ty-text-soft, var(--ty-color-neutral));\n}\n\n.step-circle[data-state=\"error\"] {\n  background: color-mix(in oklab, var(--ty-wizard-error-accent) 12%, var(--ty-wizard-bg));\n  border-color: var(--ty-wizard-error-accent);\n  color: color-mix(in oklab, var(--ty-wizard-error-accent) 75%, var(--ty-text-strong, currentColor));\n}\n\n.step-text {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n  min-width: 0;\n}\n\n.step-label {\n  font-size: var(--ty-font-sm, 14px);\n  font-weight: 500;\n  line-height: 1.3;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: var(--ty-text-soft, var(--ty-color-neutral));\n  transition: var(--ty-local-transition, color 200ms);\n}\n\n.step-indicator[data-state=\"completed\"] .step-label,\n.step-indicator[data-state=\"active\"] .step-label {\n  color: var(--ty-text-strong, var(--ty-color-neutral-strong));\n}\n\n.step-indicator[aria-selected=\"true\"] .step-label {\n  font-weight: 600;\n}\n\n.step-indicator[data-state=\"error\"] .step-label {\n  color: var(--ty-wizard-error-accent);\n}\n\n/* Only where you are (or what's wrong) gets a second line. Hidden ones keep\n * their width (height 0), so connectors don't shift as you move. */\n.step-description {\n  height: 0;\n  visibility: hidden;\n  font-size: var(--ty-font-xs, 12px);\n  line-height: 1.3;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: var(--ty-text-soft, var(--ty-color-neutral));\n}\n\n.step-indicator[aria-selected=\"true\"] .step-description,\n.step-indicator[data-state=\"error\"] .step-description {\n  height: auto;\n  /* inherit, not visible: the rail is visibility:hidden in compact mode. */\n  visibility: inherit;\n}\n\n.step-indicator:hover:not([aria-selected=\"true\"]) .step-label {\n  color: var(--ty-text-strong, var(--ty-color-neutral-strong));\n}\n\n/* Custom indicator content via slots */\n::slotted([slot^=\"indicator-\"]) {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* ---------- Compact header (narrow containers) ---------- */\n\n.step-compact {\n  display: none;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.compact-top {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 12px;\n  min-width: 0;\n}\n\n.compact-where {\n  display: flex;\n  align-items: baseline;\n  gap: 6px;\n  min-width: 0;\n  white-space: nowrap;\n}\n\n.compact-count {\n  font-size: var(--ty-font-xs, 12px);\n  color: var(--ty-text-soft, var(--ty-color-neutral));\n}\n\n.compact-count::after {\n  content: \"\u00B7\";\n  margin-left: 6px;\n  color: var(--ty-text-faint, var(--ty-color-neutral));\n}\n\n.compact-label {\n  font-size: var(--ty-font-sm, 14px);\n  font-weight: 600;\n  color: var(--ty-text-strong, var(--ty-color-neutral-strong));\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.compact-description {\n  font-size: var(--ty-font-xs, 12px);\n  color: var(--ty-text-faint, var(--ty-color-neutral));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.compact-segments {\n  display: flex;\n  gap: 4px;\n}\n\n.compact-segment {\n  flex: 1;\n  height: 3px;\n  border-radius: 2px;\n  background: var(--ty-wizard-progress-track);\n  transition: background var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing);\n}\n\n.compact-segment[data-state=\"completed\"] { background: var(--ty-wizard-progress-fill); }\n.compact-segment[data-state=\"active\"]    { background: var(--ty-wizard-active-accent); }\n.compact-segment[data-state=\"error\"]     { background: var(--ty-wizard-error-accent); }\n\n/* .compact is set from JS when the rail's natural width doesn't fit (or a\n   vertical wizard is under 360px). The rail stays laid out, hidden, so it\n   can still be measured. */\n.wizard-container.compact { flex-direction: column; }\n.wizard-container.compact .step-indicators {\n  position: absolute;\n  visibility: hidden;\n  pointer-events: none;\n  width: max-content;\n}\n.wizard-container.compact .step-compact { display: flex; }\n.wizard-container.compact .step-indicators-wrapper {\n  padding: var(--ty-wizard-header-padding);\n  border-right: none;\n  border-bottom: 1px solid var(--ty-wizard-header-border);\n  min-width: 0;\n}\n\n/* ---------- Vertical ---------- */\n\n:host([orientation=\"vertical\"]) .wizard-container:not(.compact) {\n  flex-direction: row;\n}\n\n:host([orientation=\"vertical\"]) .wizard-container:not(.compact) .step-indicators-wrapper {\n  border-bottom: none;\n  border-right: 1px solid var(--ty-wizard-header-border);\n  padding: 20px 18px;\n  min-width: 170px;\n  box-sizing: border-box;\n}\n\n:host([orientation=\"vertical\"]) .step-indicators {\n  flex-direction: column;\n  align-items: stretch;\n  gap: 0;\n}\n\n:host([orientation=\"vertical\"]) .step-indicator {\n  flex: 0 0 auto;\n  align-items: flex-start;\n  gap: 10px;\n  position: relative;\n  padding-bottom: 26px;\n}\n\n:host([orientation=\"vertical\"]) .step-indicator:last-child {\n  padding-bottom: 0;\n}\n\n:host([orientation=\"vertical\"]) .step-text {\n  /* Center the label's line box on the circle (label line-height is 1.3). */\n  padding-top: calc((var(--ty-wizard-circle-size) - var(--ty-font-sm, 14px) * 1.3) / 2);\n}\n\n:host([orientation=\"vertical\"]) .step-indicator:not(:last-child)::after {\n  position: absolute;\n  left: calc(var(--ty-wizard-circle-size) / 2 - var(--ty-wizard-progress-height) / 2);\n  top: calc(var(--ty-wizard-circle-size) + 4px);\n  bottom: 4px;\n  width: var(--ty-wizard-progress-height);\n  height: auto;\n  min-width: 0;\n  margin: 0;\n}\n\n/* ---------- Panels ---------- */\n\n.panels-viewport {\n  position: relative;\n  flex: 1;\n  min-width: 0;\n  height: var(--ty-wizard-panel-height, auto);\n  overflow: hidden;\n  background: var(--ty-wizard-panels-bg);\n}\n\n/* Carousel, like ty-tabs: steps sit side by side and the row slides. A flex\n * row is as tall as its tallest step, so the wizard doesn't jump between\n * steps (the height attribute overrides). */\n.panels-wrapper {\n  display: flex;\n  height: 100%;\n  transform: translateX(calc(var(--ty-wizard-active-index, 0) * -100%));\n  transition: transform var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing);\n  will-change: transform;\n}\n\n::slotted(ty-step) {\n  flex: 0 0 100%;\n  min-width: 0;\n  transition: visibility 0s linear 0s;\n}\n\n/* Off-screen steps leave the tab order once the slide has finished. */\n::slotted(ty-step:not([data-active=\"true\"])) {\n  visibility: hidden;\n  pointer-events: none;\n  transition: visibility 0s linear var(--ty-wizard-transition-duration);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .panels-wrapper,\n  ::slotted(ty-step),\n  ::slotted(ty-step:not([data-active=\"true\"])),\n  .step-circle,\n  .compact-segment,\n  .step-indicator::after {\n    transition-duration: 0ms !important;\n    transition-delay: 0ms !important;\n  }\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n";

package/lib/styles/wizard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizard.d.ts","sourceRoot":"","sources":["../../src/styles/wizard.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,eAAO,MAAM,YAAY,s6PA4SxB,CAAC"}