@namroodinc/liquid-editorial 0.1.6 → 0.1.7

package/dist/components/Stepper/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Icon","statusOf","index","activeStep","Stepper","forwardRef","rest","label","size","className","steps","status","interactive","onStepChange","step"],"sources":["../../../src/components/Stepper/index.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { Icon } from \"../Icon\";\nimport \"./style.css\";\n\nexport type StepperSize = \"sm\" | \"md\";\nexport type StepStatus = \"complete\" | \"current\" | \"upcoming\";\n\nexport interface Step {\n  /** Stable key, and the value reported by `onStepChange`. */\n  id: string;\n  /** The step in the user's words — sentence case. */\n  label: ReactNode;\n  /** One line on what happens here. */\n  description?: ReactNode;\n}\n\nexport interface StepperProps\n  extends Omit<HTMLAttributes<HTMLElement>, \"onChange\" | \"children\"> {\n  /** The ordered steps. Three or more spread evenly across the full width. */\n  steps: Step[];\n  /** Index of the step being worked on. Everything before it reads as complete. */\n  activeStep: number;\n  /** Marker scale. `sm` for a toolbar band, `md` for a page header. */\n  size?: StepperSize;\n  /** Accessible name for the progress bar. */\n  label?: string;\n  /**\n   * Makes completed steps (and the current one) navigable. Omit for a\n   * read-only progress indicator.\n   */\n  onStepChange?: (index: number, id: string) => void;\n}\n\nfunction statusOf(index: number, activeStep: number): StepStatus {\n  if (index < activeStep) return \"complete\";\n  if (index === activeStep) return \"current\";\n  return \"upcoming\";\n}\n\n/**\n * A linear progress rail: 1 - 2 - 3. Steps share the row equally however many\n * there are, so the last marker always lands on the trailing edge.\n */\nexport const Stepper = forwardRef<HTMLElement, StepperProps>(function Stepper(\n  { steps, activeStep, size = \"md\", label = \"Progress\", onStepChange, className, ...rest },\n  ref,\n) {\n  return (\n    <nav\n      ref={ref}\n      aria-label={label}\n      data-size={size}\n      className={[\"ds-stepper\", className].filter(Boolean).join(\" \")}\n      {...rest}\n    >\n      <ol className=\"ds-stepper__list\">\n        {steps.map((step, index) => {\n          const status = statusOf(index, activeStep);\n          const interactive = Boolean(onStepChange) && status !== \"upcoming\";\n          const Marker = interactive ? \"button\" : \"span\";\n          return (\n            <li\n              key={step.id}\n              className=\"ds-stepper__step\"\n              data-status={status}\n              aria-current={status === \"current\" ? \"step\" : undefined}\n            >\n              <span className=\"ds-stepper__track\" aria-hidden=\"true\">\n                <span className=\"ds-stepper__connector\" data-side=\"start\" />\n                <span className=\"ds-stepper__connector\" data-side=\"end\" />\n              </span>\n              <Marker\n                className=\"ds-stepper__marker\"\n                {...(interactive\n                  ? {\n                      type: \"button\" as const,\n                      onClick: () => onStepChange?.(index, step.id),\n                    }\n                  : {})}\n              >\n                {status === \"complete\" ? (\n                  <Icon name=\"check\" size={16} aria-hidden=\"true\" />\n                ) : (\n                  index + 1\n                )}\n                <span className=\"ds-stepper__sr\">{status}</span>\n              </Marker>\n              <span className=\"ds-stepper__text\">\n                <span className=\"ds-stepper__label\">{step.label}</span>\n                {step.description && (\n                  <span className=\"ds-stepper__description\">{step.description}</span>\n                )}\n              </span>\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n});\n"],"mappings":";;;;AAiCA,SAASC,EAAS,GAAe,GAAgC;CAG/D,OAFIC,IAAQC,IAAmB,aAC3BD,MAAUC,IAAmB,YAC1B;AACT;AAMA,IAAaC,IAAUC,EAAsC,SAC3D,EAAE,UAAO,eAAY,UAAO,MAAM,WAAQ,YAAY,iBAAc,cAAW,GAAGC,KAClF,GACA;CACA,OACE,kBAAC,OAAD;EACO;EACL,cAAYC;EACZ,aAAWC;EACX,WAAW,CAAC,cAAcC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAC7D,GAAIH;EAEJ,UAAA,kBAAC,MAAD;GAAI,WAAU;GACX,UAAAI,EAAM,KAAK,GAAM,MAAU;IAC1B,IAAMC,IAASV,EAASC,GAAOC,CAAU,GACnCS,IAAc,EAAQC,KAAiBF,MAAW;IAExD,OACE,kBAAC,MAAD;KAEE,WAAU;KACV,eAAaA;KACb,gBAAcA,MAAW,YAAY,SAAS,KAAA;KAJhD,UAAA;MAME,kBAAC,QAAD;OAAM,WAAU;OAAoB,eAAY;OAAhD,UAAA,CACE,kBAAC,QAAD;QAAM,WAAU;QAAwB,aAAU;OAAS,CAAA,GAC3D,kBAAC,QAAD;QAAM,WAAU;QAAwB,aAAU;OAAO,CAAA,CACrD;;MACN,kBAZWC,IAAc,WAAW,QAYpC;OACE,WAAU;OACV,GAAKA,IACD;QACE,MAAM;QACN,eAAeC,IAAeX,GAAOY,EAAK,EAAE;OAC9C,IACA,CAAC;OAPP,UAAA,CASGH,MAAW,aACV,kBAACX,GAAD;QAAM,MAAK;QAAQ,MAAM;QAAI,eAAY;OAAQ,CAAA,IAEjDE,IAAQ,GAEV,kBAAC,QAAD;QAAM,WAAU;QAAkB,UAAAS;OAAa,CAAA,CACzC;;MACR,kBAAC,QAAD;OAAM,WAAU;OAAhB,UAAA,CACE,kBAAC,QAAD;QAAM,WAAU;QAAqB,UAAAG,EAAK;OAAY,CAAA,GACrDA,EAAK,eACJ,kBAAC,QAAD;QAAM,WAAU;QAA2B,UAAAA,EAAK;OAAkB,CAAA,CAEhE;;KACJ;IA/BG,GAAAA,EAAK,EA+BR;GAER,CAAC;EACC,CAAA;CACD,CAAA;AAET,CAAC"}
+{"version":3,"file":"index.js","names":["_Fragment","Icon","Fragment$1","statusOf","index","activeStep","Stepper","forwardRef","rest","id","useId","label","size","className","steps","status","interactive","onStepChange","marker","Button","step"],"sources":["../../../src/components/Stepper/index.tsx"],"sourcesContent":["import { forwardRef, useId, type HTMLAttributes, type ReactNode } from \"react\";\nimport { Icon } from \"../Icon\";\nimport { Button } from \"../Button\";\nimport \"./style.css\";\n\nexport type StepperSize = \"sm\" | \"md\";\nexport type StepStatus = \"complete\" | \"current\" | \"upcoming\";\n\nexport interface Step {\n  /** Stable key, and the value reported by `onStepChange`. */\n  id: string;\n  /** The step in the user's words — sentence case. */\n  label: ReactNode;\n  /** One line on what happens here. */\n  description?: ReactNode;\n}\n\nexport interface StepperProps\n  extends Omit<HTMLAttributes<HTMLElement>, \"onChange\" | \"children\"> {\n  /** The ordered steps. Three or more spread evenly across the full width. */\n  steps: Step[];\n  /** Index of the step being worked on. Everything before it reads as complete. */\n  activeStep: number;\n  /** Marker scale. `sm` for a toolbar band, `md` for a page header. */\n  size?: StepperSize;\n  /** Accessible name for the progress bar. */\n  label?: string;\n  /**\n   * Makes completed steps (and the current one) navigable. Omit for a\n   * read-only progress indicator.\n   */\n  onStepChange?: (index: number, id: string) => void;\n}\n\nfunction statusOf(index: number, activeStep: number): StepStatus {\n  if (index < activeStep) return \"complete\";\n  if (index === activeStep) return \"current\";\n  return \"upcoming\";\n}\n\n/**\n * A linear progress rail: 1 - 2 - 3. Steps share the row equally however many\n * there are, so the last marker always lands on the trailing edge.\n */\nexport const Stepper = forwardRef<HTMLElement, StepperProps>(function Stepper(\n  { steps, activeStep, size = \"md\", label = \"Progress\", onStepChange, className, ...rest },\n  ref,\n) {\n  const id = useId();\n  return (\n    <nav\n      ref={ref}\n      aria-label={label}\n      data-size={size}\n      className={[\"ds-stepper\", className].filter(Boolean).join(\" \")}\n      {...rest}\n    >\n      <ol className=\"ds-stepper__list\">\n        {steps.map((step, index) => {\n          const status = statusOf(index, activeStep);\n          const interactive = Boolean(onStepChange) && status !== \"upcoming\";\n          const marker = <>\n            {status === \"complete\" ? <Icon name=\"check\" size={16} aria-hidden=\"true\" /> : index + 1}\n            <span id={`${id}-${index}-status`} className=\"ds-stepper__sr\">{status}</span>\n          </>;\n          return (\n            <li\n              key={step.id}\n              className=\"ds-stepper__step\"\n              data-status={status}\n              aria-current={status === \"current\" ? \"step\" : undefined}\n            >\n              <span className=\"ds-stepper__track\" aria-hidden=\"true\">\n                <span className=\"ds-stepper__connector\" data-side=\"start\" />\n                <span className=\"ds-stepper__connector\" data-side=\"end\" />\n              </span>\n              {interactive ? <Button\n                className=\"ds-stepper__marker\"\n                variant={status === \"complete\" ? \"primary\" : \"active\"}\n                size=\"sm\"\n                isIconOnly\n                aria-labelledby={`${id}-${index}-label`}\n                aria-describedby={`${id}-${index}-status`}\n                onClick={() => onStepChange?.(index, step.id)}\n              >{marker}</Button> : <span className=\"ds-stepper__marker\">{marker}</span>}\n              <span className=\"ds-stepper__text\">\n                <span id={`${id}-${index}-label`} className=\"ds-stepper__label\">{step.label}</span>\n                {step.description && (\n                  <span className=\"ds-stepper__description\">{step.description}</span>\n                )}\n              </span>\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n});\n"],"mappings":";;;;;AAkCA,SAASG,EAAS,GAAe,GAAgC;CAG/D,OAFIC,IAAQC,IAAmB,aAC3BD,MAAUC,IAAmB,YAC1B;AACT;AAMA,IAAaC,IAAUC,EAAsC,SAC3D,EAAE,UAAO,eAAY,UAAO,MAAM,WAAQ,YAAY,iBAAc,cAAW,GAAGC,KAClF,GACA;CACA,IAAMC,IAAKC,EAAM;CACjB,OACE,kBAAC,OAAD;EACO;EACL,cAAYC;EACZ,aAAWC;EACX,WAAW,CAAC,cAAcC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAC7D,GAAIL;EAEJ,UAAA,kBAAC,MAAD;GAAI,WAAU;GACX,UAAAM,EAAM,KAAK,GAAM,MAAU;IAC1B,IAAMC,IAASZ,EAASC,GAAOC,CAAU,GACnCW,IAAc,EAAQC,KAAiBF,MAAW,YAClDG,IAAS,kBAAAlB,GAAA,EAAA,UAAA,CACZe,MAAW,aAAa,kBAACd,GAAD;KAAM,MAAK;KAAQ,MAAM;KAAI,eAAY;IAAQ,CAAA,IAAIG,IAAQ,GACtF,kBAAC,QAAD;KAAM,IAAI,GAAGK,EAAG,GAAGL,EAAM;KAAU,WAAU;KAAkB,UAAAW;IAAa,CAAA,CAC5E,EAAA,CAAA;IACF,OACE,kBAAC,MAAD;KAEE,WAAU;KACV,eAAaA;KACb,gBAAcA,MAAW,YAAY,SAAS,KAAA;KAJhD,UAAA;MAME,kBAAC,QAAD;OAAM,WAAU;OAAoB,eAAY;OAAhD,UAAA,CACE,kBAAC,QAAD;QAAM,WAAU;QAAwB,aAAU;OAAS,CAAA,GAC3D,kBAAC,QAAD;QAAM,WAAU;QAAwB,aAAU;OAAO,CAAA,CACrD;;MACLC,IAAc,kBAACG,GAAD;OACb,WAAU;OACV,SAASJ,MAAW,aAAa,YAAY;OAC7C,MAAK;OACL,YAAA;OACA,mBAAiB,GAAGN,EAAG,GAAGL,EAAM;OAChC,oBAAkB,GAAGK,EAAG,GAAGL,EAAM;OACjC,eAAea,IAAeb,GAAOgB,EAAK,EAAE;OAC5C,UAAAF;MAAe,CAAA,IAAI,kBAAC,QAAD;OAAM,WAAU;OAAsB,UAAAA;MAAa,CAAA;MACxE,kBAAC,QAAD;OAAM,WAAU;OAAhB,UAAA,CACE,kBAAC,QAAD;QAAM,IAAI,GAAGT,EAAG,GAAGL,EAAM;QAAS,WAAU;QAAqB,UAAAgB,EAAK;OAAY,CAAA,GACjFA,EAAK,eACJ,kBAAC,QAAD;QAAM,WAAU;QAA2B,UAAAA,EAAK;OAAkB,CAAA,CAEhE;;KACJ;IAxBG,GAAAA,EAAK,EAwBR;GAER,CAAC;EACC,CAAA;CACD,CAAA;AAET,CAAC"}

package/dist/components/Stepper/style.css

@@ -58,6 +58,25 @@
     position: relative;
     z-index: 1;
     flex: none;
+  }
+
+  /* Navigable markers are Buttons held to the rail's marker size, so the
+   * connector and labels line up with read-only steps. */
+  .ds-stepper .ds-stepper__marker.ds-button {
+    inline-size: var(--stepper-marker-size);
+    height: var(--stepper-marker-size);
+  }
+
+  .ds-stepper[data-size="sm"] .ds-stepper__marker.ds-button {
+    inline-size: var(--stepper-marker-size-sm);
+    height: var(--stepper-marker-size-sm);
+    font-size: var(--font-size-xs);
+  }
+
+  .ds-stepper__marker:not(.ds-button) {
+    position: relative;
+    z-index: 1;
+    flex: none;
     inline-size: var(--stepper-marker-size);
     block-size: var(--stepper-marker-size);
     display: grid;
@@ -74,38 +93,25 @@
     transition: background-color var(--duration-fast) var(--ease-standard);
   }
 
-  .ds-stepper[data-size="sm"] .ds-stepper__marker {
+  .ds-stepper[data-size="sm"] .ds-stepper__marker:not(.ds-button) {
     inline-size: var(--stepper-marker-size-sm);
     block-size: var(--stepper-marker-size-sm);
     font-size: var(--font-size-xs);
   }
 
-  button.ds-stepper__marker {
-    cursor: pointer;
-  }
-
-  button.ds-stepper__marker:hover {
-    background: var(--field-hover);
-  }
-
-  button.ds-stepper__marker:focus-visible {
-    outline: var(--control-border-width) solid var(--color-focus);
-    outline-offset: 2px;
-  }
-
-  .ds-stepper__step[data-status="complete"] .ds-stepper__marker {
+  .ds-stepper__step[data-status="complete"] .ds-stepper__marker:not(.ds-button) {
     background: var(--color-primary);
     border-color: var(--color-primary);
     color: var(--color-text-on-solid);
   }
 
-  .ds-stepper__step[data-status="current"] .ds-stepper__marker {
+  .ds-stepper__step[data-status="current"] .ds-stepper__marker:not(.ds-button) {
     background: var(--color-primary-soft);
     border-color: var(--color-primary);
     color: var(--color-primary-text);
   }
 
-  .ds-stepper__step[data-status="upcoming"] .ds-stepper__marker {
+  .ds-stepper__step[data-status="upcoming"] .ds-stepper__marker:not(.ds-button) {
     color: var(--color-text-muted);
     border-color: var(--color-border-muted);
   }
@@ -147,7 +153,7 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .ds-stepper__marker {
+    .ds-stepper__marker:not(.ds-button) {
       transition: none;
     }
   }

package/dist/components/SubNav/index.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs");let t=require("react"),n=require("react/jsx-runtime");var r=(0,t.forwardRef)(function({label:e,actions:t,className:r,children:i,...a},o){return(0,n.jsxs)(`nav`,{ref:o,"aria-label":e,className:[`ds-subnav`,r].filter(Boolean).join(` `),...a,children:[(0,n.jsx)(`ul`,{className:`ds-subnav__list`,children:i}),t&&(0,n.jsx)(`div`,{className:`ds-subnav__actions`,children:t})]})}),i=(0,t.forwardRef)(function({label:t,icon:r,isActive:i,count:a,className:o,...s},c){return(0,n.jsx)(`li`,{className:`ds-subnav__row`,children:(0,n.jsxs)(`a`,{ref:c,className:[`ds-subnav__item`,o].filter(Boolean).join(` `),"data-active":i||void 0,"aria-current":i?`page`:void 0,...s,children:[r&&(0,n.jsx)(e.t,{name:r}),t,a!==void 0&&(0,n.jsx)(`span`,{className:`ds-subnav__count`,children:a})]})})}),a=(0,t.forwardRef)(function({label:t,icon:r,isActive:i,count:a,className:o,...s},c){return(0,n.jsx)(`li`,{className:`ds-subnav__row`,children:(0,n.jsxs)(`button`,{ref:c,type:`button`,className:[`ds-subnav__item`,o].filter(Boolean).join(` `),"data-active":i||void 0,"aria-pressed":i,...s,children:[r&&(0,n.jsx)(e.t,{name:r}),t,a!==void 0&&(0,n.jsx)(`span`,{className:`ds-subnav__count`,children:a})]})})});exports.SubNav=r,exports.SubNavButton=a,exports.SubNavItem=i;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs"),t=require("../Button/index.cjs");let n=require("react"),r=require("react/jsx-runtime");var i=(0,n.forwardRef)(function({label:e,actions:t,className:n,children:i,...a},o){return(0,r.jsxs)(`nav`,{ref:o,"aria-label":e,className:[`ds-subnav`,n].filter(Boolean).join(` `),...a,children:[(0,r.jsx)(`ul`,{className:`ds-subnav__list`,children:i}),t&&(0,r.jsx)(`div`,{className:`ds-subnav__actions`,children:t})]})}),a=(0,n.forwardRef)(function({label:t,icon:n,isActive:i,count:a,className:o,...s},c){return(0,r.jsx)(`li`,{className:`ds-subnav__row`,children:(0,r.jsxs)(`a`,{ref:c,className:[`ds-subnav__item`,o].filter(Boolean).join(` `),"data-active":i||void 0,"aria-current":i?`page`:void 0,...s,children:[n&&(0,r.jsx)(e.t,{name:n}),t,a!==void 0&&(0,r.jsx)(`span`,{className:`ds-subnav__count`,children:a})]})})}),o=(0,n.forwardRef)(function({label:e,icon:n,isActive:i,count:a,disabled:o,className:s,...c},l){return(0,r.jsx)(`li`,{className:`ds-subnav__row`,children:(0,r.jsxs)(t.Button,{ref:l,variant:`simple`,iconStart:n,isDisabled:o,className:[`ds-subnav__item`,s].filter(Boolean).join(` `),"data-active":i||void 0,"aria-pressed":i,...c,children:[e,a!==void 0&&(0,r.jsx)(`span`,{className:`ds-subnav__count`,children:a})]})})});exports.SubNav=i,exports.SubNavButton=o,exports.SubNavItem=a;
 //# sourceMappingURL=index.cjs.map

package/dist/components/SubNav/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["forwardRef","Icon","require_Icon","react","react_jsx_runtime","SubNav","rest","label","className","actions","SubNavItem","isActive","icon","count","SubNavButton"],"sources":["../../../src/components/SubNav/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { Icon } from \"../Icon\";\nimport type { IconName } from \"../Icon/icons\";\nimport \"./style.css\";\n\nexport interface SubNavProps extends HTMLAttributes<HTMLElement> {\n  /** Accessible name — say what the set switches, e.g. \"Article sections\". */\n  label: string;\n  /** Controls parked at the end of the row, e.g. a view switch. */\n  actions?: ReactNode;\n  children?: ReactNode;\n}\n\n/**\n * The second level: views inside one page — Content, Settings, Revisions. A\n * hairline rule runs the full width; the active item sits on the rail.\n */\nexport const SubNav = forwardRef<HTMLElement, SubNavProps>(function SubNav(\n  { label, actions, className, children, ...rest },\n  ref,\n) {\n  return (\n    <nav\n      ref={ref}\n      aria-label={label}\n      className={[\"ds-subnav\", className].filter(Boolean).join(\" \")}\n      {...rest}\n    >\n      <ul className=\"ds-subnav__list\">{children}</ul>\n      {actions && <div className=\"ds-subnav__actions\">{actions}</div>}\n    </nav>\n  );\n});\n\ninterface SubNavItemBase {\n  label: string;\n  icon?: IconName;\n  isActive?: boolean;\n  /** A count beside the label — kept quiet, never a status colour. */\n  count?: number;\n}\n\nexport interface SubNavItemProps\n  extends SubNavItemBase,\n    Omit<AnchorHTMLAttributes<HTMLAnchorElement>, \"children\"> {}\n\n/** One view, as a link. Use `SubNavButton` when the view is client state. */\nexport const SubNavItem = forwardRef<HTMLAnchorElement, SubNavItemProps>(\n  function SubNavItem({ label, icon, isActive, count, className, ...rest }, ref) {\n    return (\n      <li className=\"ds-subnav__row\">\n        <a\n          ref={ref}\n          className={[\"ds-subnav__item\", className].filter(Boolean).join(\" \")}\n          data-active={isActive || undefined}\n          aria-current={isActive ? \"page\" : undefined}\n          {...rest}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n          {count !== undefined && <span className=\"ds-subnav__count\">{count}</span>}\n        </a>\n      </li>\n    );\n  },\n);\n\nexport interface SubNavButtonProps\n  extends SubNavItemBase,\n    Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"children\" | \"type\"> {}\n\n/** One view, as a control — for panes switched in place rather than routed. */\nexport const SubNavButton = forwardRef<HTMLButtonElement, SubNavButtonProps>(\n  function SubNavButton({ label, icon, isActive, count, className, ...rest }, ref) {\n    return (\n      <li className=\"ds-subnav__row\">\n        <button\n          ref={ref}\n          type=\"button\"\n          className={[\"ds-subnav__item\", className].filter(Boolean).join(\" \")}\n          data-active={isActive || undefined}\n          aria-pressed={isActive}\n          {...rest}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n          {count !== undefined && <span className=\"ds-subnav__count\">{count}</span>}\n        </button>\n      </li>\n    );\n  },\n);\n"],"mappings":"A,2KAuBA,IAAaK,GAAA,EAASL,EAAAA,WAAAA,CAAqC,SACzD,CAAE,QAAO,UAAS,YAAW,WAAU,GAAGM,GAC1C,EACA,CACA,OACE,EAAAF,EAAA,KAAA,CAAC,MAAD,CACO,MACL,aAAYG,EACZ,UAAW,CAAC,YAAaC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,EAC5D,GAAIF,EAJN,SAAA,EAME,EAAAF,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,kBAAmB,UAAa,CAAA,EAC7CK,IAAW,EAAAL,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,qBAAsB,SAAAK,CAAa,CAAA,CAC3D,C,EAET,CAAC,EAeYC,GAAA,EAAaV,EAAAA,WAAAA,CACxB,SAAoB,CAAE,QAAO,OAAM,WAAU,QAAO,YAAW,GAAGM,GAAQ,EAAK,CAC7E,OACE,EAAAF,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,iBACZ,UAAA,EAAAA,EAAA,KAAA,CAAC,IAAD,CACO,MACL,UAAW,CAAC,kBAAmBI,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,EAClE,cAAaG,GAAY,IAAA,GACzB,eAAcA,EAAW,OAAS,IAAA,GAClC,GAAIL,EALN,SAAA,CAOGM,IAAQ,EAAAR,EAAA,IAAA,CAACH,EAAAA,EAAD,CAAM,KAAMW,CAAO,CAAA,EAC3BL,EACAM,IAAU,IAAA,KAAa,EAAAT,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,mBAAoB,SAAAS,CAAY,CAAA,CACvE,C,EACD,CAAA,CAER,CACF,EAOaC,GAAA,EAAed,EAAAA,WAAAA,CAC1B,SAAsB,CAAE,QAAO,OAAM,WAAU,QAAO,YAAW,GAAGM,GAAQ,EAAK,CAC/E,OACE,EAAAF,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,iBACZ,UAAA,EAAAA,EAAA,KAAA,CAAC,SAAD,CACO,MACL,KAAK,SACL,UAAW,CAAC,kBAAmBI,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,EAClE,cAAaG,GAAY,IAAA,GACzB,eAAcA,EACd,GAAIL,EANN,SAAA,CAQGM,IAAQ,EAAAR,EAAA,IAAA,CAACH,EAAAA,EAAD,CAAM,KAAMW,CAAO,CAAA,EAC3BL,EACAM,IAAU,IAAA,KAAa,EAAAT,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,mBAAoB,SAAAS,CAAY,CAAA,CAClE,C,EACN,CAAA,CAER,CACF,E"}
+{"version":3,"file":"index.cjs","names":["forwardRef","Icon","Button","require_Icon","require_components_Button_index","react","react_jsx_runtime","SubNav","rest","label","className","actions","SubNavItem","isActive","icon","count","SubNavButton","disabled"],"sources":["../../../src/components/SubNav/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { Icon } from \"../Icon\";\nimport { Button } from \"../Button\";\nimport type { IconName } from \"../Icon/icons\";\nimport \"./style.css\";\n\nexport interface SubNavProps extends HTMLAttributes<HTMLElement> {\n  /** Accessible name — say what the set switches, e.g. \"Article sections\". */\n  label: string;\n  /** Controls parked at the end of the row, e.g. a view switch. */\n  actions?: ReactNode;\n  children?: ReactNode;\n}\n\n/**\n * The second level: views inside one page — Content, Settings, Revisions. A\n * hairline rule runs the full width; the active item sits on the rail.\n */\nexport const SubNav = forwardRef<HTMLElement, SubNavProps>(function SubNav(\n  { label, actions, className, children, ...rest },\n  ref,\n) {\n  return (\n    <nav\n      ref={ref}\n      aria-label={label}\n      className={[\"ds-subnav\", className].filter(Boolean).join(\" \")}\n      {...rest}\n    >\n      <ul className=\"ds-subnav__list\">{children}</ul>\n      {actions && <div className=\"ds-subnav__actions\">{actions}</div>}\n    </nav>\n  );\n});\n\ninterface SubNavItemBase {\n  label: string;\n  icon?: IconName;\n  isActive?: boolean;\n  /** A count beside the label — kept quiet, never a status colour. */\n  count?: number;\n}\n\nexport interface SubNavItemProps\n  extends SubNavItemBase,\n    Omit<AnchorHTMLAttributes<HTMLAnchorElement>, \"children\"> {}\n\n/** One view, as a link. Use `SubNavButton` when the view is client state. */\nexport const SubNavItem = forwardRef<HTMLAnchorElement, SubNavItemProps>(\n  function SubNavItem({ label, icon, isActive, count, className, ...rest }, ref) {\n    return (\n      <li className=\"ds-subnav__row\">\n        <a\n          ref={ref}\n          className={[\"ds-subnav__item\", className].filter(Boolean).join(\" \")}\n          data-active={isActive || undefined}\n          aria-current={isActive ? \"page\" : undefined}\n          {...rest}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n          {count !== undefined && <span className=\"ds-subnav__count\">{count}</span>}\n        </a>\n      </li>\n    );\n  },\n);\n\nexport interface SubNavButtonProps\n  extends SubNavItemBase,\n    Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"children\" | \"type\"> {}\n\n/** One view, as a control — for panes switched in place rather than routed. */\nexport const SubNavButton = forwardRef<HTMLButtonElement, SubNavButtonProps>(\n  function SubNavButton({ label, icon, isActive, count, disabled, className, ...rest }, ref) {\n    return (\n      <li className=\"ds-subnav__row\">\n        <Button\n          ref={ref}\n          variant=\"simple\"\n          iconStart={icon}\n          isDisabled={disabled}\n          className={[\"ds-subnav__item\", className].filter(Boolean).join(\" \")}\n          data-active={isActive || undefined}\n          aria-pressed={isActive}\n          {...rest}\n        >\n          {label}\n          {count !== undefined && <span className=\"ds-subnav__count\">{count}</span>}\n        </Button>\n      </li>\n    );\n  },\n);\n"],"mappings":"A,4MAwBA,IAAaO,GAAA,EAASP,EAAAA,WAAAA,CAAqC,SACzD,CAAE,QAAO,UAAS,YAAW,WAAU,GAAGQ,GAC1C,EACA,CACA,OACE,EAAAF,EAAA,KAAA,CAAC,MAAD,CACO,MACL,aAAYG,EACZ,UAAW,CAAC,YAAaC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,EAC5D,GAAIF,EAJN,SAAA,EAME,EAAAF,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,kBAAmB,UAAa,CAAA,EAC7CK,IAAW,EAAAL,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,qBAAsB,SAAAK,CAAa,CAAA,CAC3D,C,EAET,CAAC,EAeYC,GAAA,EAAaZ,EAAAA,WAAAA,CACxB,SAAoB,CAAE,QAAO,OAAM,WAAU,QAAO,YAAW,GAAGQ,GAAQ,EAAK,CAC7E,OACE,EAAAF,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,iBACZ,UAAA,EAAAA,EAAA,KAAA,CAAC,IAAD,CACO,MACL,UAAW,CAAC,kBAAmBI,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,EAClE,cAAaG,GAAY,IAAA,GACzB,eAAcA,EAAW,OAAS,IAAA,GAClC,GAAIL,EALN,SAAA,CAOGM,IAAQ,EAAAR,EAAA,IAAA,CAACL,EAAAA,EAAD,CAAM,KAAMa,CAAO,CAAA,EAC3BL,EACAM,IAAU,IAAA,KAAa,EAAAT,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,mBAAoB,SAAAS,CAAY,CAAA,CACvE,C,EACD,CAAA,CAER,CACF,EAOaC,GAAA,EAAehB,EAAAA,WAAAA,CAC1B,SAAsB,CAAE,QAAO,OAAM,WAAU,QAAO,WAAU,YAAW,GAAGQ,GAAQ,EAAK,CACzF,OACE,EAAAF,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,iBACZ,UAAA,EAAAA,EAAA,KAAA,CAACJ,EAAAA,OAAD,CACO,MACL,QAAQ,SACR,UAAWY,EACX,WAAYG,EACZ,UAAW,CAAC,kBAAmBP,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,EAClE,cAAaG,GAAY,IAAA,GACzB,eAAcA,EACd,GAAIL,EARN,SAAA,CAUGC,EACAM,IAAU,IAAA,KAAa,EAAAT,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,mBAAoB,SAAAS,CAAY,CAAA,CAClE,C,EACN,CAAA,CAER,CACF,E"}

package/dist/components/SubNav/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/SubNav/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,oBAAoB,EACzB,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC9D,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM,qGAejB,CAAC;AAEH,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,eACf,SAAQ,cAAc,EACpB,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;CAAG;AAEhE,6EAA6E;AAC7E,eAAO,MAAM,UAAU,+GAkBtB,CAAC;AAEF,MAAM,WAAW,iBACf,SAAQ,cAAc,EACpB,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;CAAG;AAEzE,+EAA+E;AAC/E,eAAO,MAAM,YAAY,iHAmBxB,CAAC"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/SubNav/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,oBAAoB,EACzB,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC9D,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM,qGAejB,CAAC;AAEH,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,eACf,SAAQ,cAAc,EACpB,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;CAAG;AAEhE,6EAA6E;AAC7E,eAAO,MAAM,UAAU,+GAkBtB,CAAC;AAEF,MAAM,WAAW,iBACf,SAAQ,cAAc,EACpB,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;CAAG;AAEzE,+EAA+E;AAC/E,eAAO,MAAM,YAAY,iHAoBxB,CAAC"}

package/dist/components/SubNav/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SubNav/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,oBAAoB,EACzB,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC9D,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM,qGAejB,CAAC;AAEH,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,eACf,SAAQ,cAAc,EACpB,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;CAAG;AAEhE,6EAA6E;AAC7E,eAAO,MAAM,UAAU,+GAkBtB,CAAC;AAEF,MAAM,WAAW,iBACf,SAAQ,cAAc,EACpB,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;CAAG;AAEzE,+EAA+E;AAC/E,eAAO,MAAM,YAAY,iHAmBxB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SubNav/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,oBAAoB,EACzB,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC9D,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM,qGAejB,CAAC;AAEH,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,eACf,SAAQ,cAAc,EACpB,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;CAAG;AAEhE,6EAA6E;AAC7E,eAAO,MAAM,UAAU,+GAkBtB,CAAC;AAEF,MAAM,WAAW,iBACf,SAAQ,cAAc,EACpB,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;CAAG;AAEzE,+EAA+E;AAC/E,eAAO,MAAM,YAAY,iHAoBxB,CAAC"}

package/dist/components/SubNav/index.js

@@ -1,62 +1,61 @@
 import { t as e } from "../../chunks/Icon-CGY1FNXT.js";
-import { forwardRef as t } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Button as t } from "../Button/index.js";
+import { forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/SubNav/index.tsx
-var i = t(function({ label: e, actions: t, className: i, children: a, ...o }, s) {
-	return /* @__PURE__ */ r("nav", {
+var a = n(function({ label: e, actions: t, className: n, children: a, ...o }, s) {
+	return /* @__PURE__ */ i("nav", {
 		ref: s,
 		"aria-label": e,
-		className: ["ds-subnav", i].filter(Boolean).join(" "),
+		className: ["ds-subnav", n].filter(Boolean).join(" "),
 		...o,
-		children: [/* @__PURE__ */ n("ul", {
+		children: [/* @__PURE__ */ r("ul", {
 			className: "ds-subnav__list",
 			children: a
-		}), t && /* @__PURE__ */ n("div", {
+		}), t && /* @__PURE__ */ r("div", {
 			className: "ds-subnav__actions",
 			children: t
 		})]
 	});
-}), a = t(function({ label: t, icon: i, isActive: a, count: o, className: s, ...c }, l) {
-	return /* @__PURE__ */ n("li", {
+}), o = n(function({ label: t, icon: n, isActive: a, count: o, className: s, ...c }, l) {
+	return /* @__PURE__ */ r("li", {
 		className: "ds-subnav__row",
-		children: /* @__PURE__ */ r("a", {
+		children: /* @__PURE__ */ i("a", {
 			ref: l,
 			className: ["ds-subnav__item", s].filter(Boolean).join(" "),
 			"data-active": a || void 0,
 			"aria-current": a ? "page" : void 0,
 			...c,
 			children: [
-				i && /* @__PURE__ */ n(e, { name: i }),
+				n && /* @__PURE__ */ r(e, { name: n }),
 				t,
-				o !== void 0 && /* @__PURE__ */ n("span", {
+				o !== void 0 && /* @__PURE__ */ r("span", {
 					className: "ds-subnav__count",
 					children: o
 				})
 			]
 		})
 	});
-}), o = t(function({ label: t, icon: i, isActive: a, count: o, className: s, ...c }, l) {
-	return /* @__PURE__ */ n("li", {
+}), s = n(function({ label: e, icon: n, isActive: a, count: o, disabled: s, className: c, ...l }, u) {
+	return /* @__PURE__ */ r("li", {
 		className: "ds-subnav__row",
-		children: /* @__PURE__ */ r("button", {
-			ref: l,
-			type: "button",
-			className: ["ds-subnav__item", s].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ i(t, {
+			ref: u,
+			variant: "simple",
+			iconStart: n,
+			isDisabled: s,
+			className: ["ds-subnav__item", c].filter(Boolean).join(" "),
 			"data-active": a || void 0,
 			"aria-pressed": a,
-			...c,
-			children: [
-				i && /* @__PURE__ */ n(e, { name: i }),
-				t,
-				o !== void 0 && /* @__PURE__ */ n("span", {
-					className: "ds-subnav__count",
-					children: o
-				})
-			]
+			...l,
+			children: [e, o !== void 0 && /* @__PURE__ */ r("span", {
+				className: "ds-subnav__count",
+				children: o
+			})]
 		})
 	});
 });
 //#endregion
-export { i as SubNav, o as SubNavButton, a as SubNavItem };
+export { a as SubNav, s as SubNavButton, o as SubNavItem };
 
 //# sourceMappingURL=index.js.map

package/dist/components/SubNav/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Icon","SubNav","forwardRef","rest","label","className","actions","SubNavItem","isActive","icon","count","SubNavButton"],"sources":["../../../src/components/SubNav/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { Icon } from \"../Icon\";\nimport type { IconName } from \"../Icon/icons\";\nimport \"./style.css\";\n\nexport interface SubNavProps extends HTMLAttributes<HTMLElement> {\n  /** Accessible name — say what the set switches, e.g. \"Article sections\". */\n  label: string;\n  /** Controls parked at the end of the row, e.g. a view switch. */\n  actions?: ReactNode;\n  children?: ReactNode;\n}\n\n/**\n * The second level: views inside one page — Content, Settings, Revisions. A\n * hairline rule runs the full width; the active item sits on the rail.\n */\nexport const SubNav = forwardRef<HTMLElement, SubNavProps>(function SubNav(\n  { label, actions, className, children, ...rest },\n  ref,\n) {\n  return (\n    <nav\n      ref={ref}\n      aria-label={label}\n      className={[\"ds-subnav\", className].filter(Boolean).join(\" \")}\n      {...rest}\n    >\n      <ul className=\"ds-subnav__list\">{children}</ul>\n      {actions && <div className=\"ds-subnav__actions\">{actions}</div>}\n    </nav>\n  );\n});\n\ninterface SubNavItemBase {\n  label: string;\n  icon?: IconName;\n  isActive?: boolean;\n  /** A count beside the label — kept quiet, never a status colour. */\n  count?: number;\n}\n\nexport interface SubNavItemProps\n  extends SubNavItemBase,\n    Omit<AnchorHTMLAttributes<HTMLAnchorElement>, \"children\"> {}\n\n/** One view, as a link. Use `SubNavButton` when the view is client state. */\nexport const SubNavItem = forwardRef<HTMLAnchorElement, SubNavItemProps>(\n  function SubNavItem({ label, icon, isActive, count, className, ...rest }, ref) {\n    return (\n      <li className=\"ds-subnav__row\">\n        <a\n          ref={ref}\n          className={[\"ds-subnav__item\", className].filter(Boolean).join(\" \")}\n          data-active={isActive || undefined}\n          aria-current={isActive ? \"page\" : undefined}\n          {...rest}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n          {count !== undefined && <span className=\"ds-subnav__count\">{count}</span>}\n        </a>\n      </li>\n    );\n  },\n);\n\nexport interface SubNavButtonProps\n  extends SubNavItemBase,\n    Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"children\" | \"type\"> {}\n\n/** One view, as a control — for panes switched in place rather than routed. */\nexport const SubNavButton = forwardRef<HTMLButtonElement, SubNavButtonProps>(\n  function SubNavButton({ label, icon, isActive, count, className, ...rest }, ref) {\n    return (\n      <li className=\"ds-subnav__row\">\n        <button\n          ref={ref}\n          type=\"button\"\n          className={[\"ds-subnav__item\", className].filter(Boolean).join(\" \")}\n          data-active={isActive || undefined}\n          aria-pressed={isActive}\n          {...rest}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n          {count !== undefined && <span className=\"ds-subnav__count\">{count}</span>}\n        </button>\n      </li>\n    );\n  },\n);\n"],"mappings":";;;;AAuBA,IAAaC,IAASC,EAAqC,SACzD,EAAE,UAAO,YAAS,cAAW,aAAU,GAAGC,KAC1C,GACA;CACA,OACE,kBAAC,OAAD;EACO;EACL,cAAYC;EACZ,WAAW,CAAC,aAAaC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAC5D,GAAIF;EAJN,UAAA,CAME,kBAAC,MAAD;GAAI,WAAU;GAAmB;EAAa,CAAA,GAC7CG,KAAW,kBAAC,OAAD;GAAK,WAAU;GAAsB,UAAAA;EAAa,CAAA,CAC3D;;AAET,CAAC,GAeYC,IAAaL,EACxB,SAAoB,EAAE,UAAO,SAAM,aAAU,UAAO,cAAW,GAAGC,KAAQ,GAAK;CAC7E,OACE,kBAAC,MAAD;EAAI,WAAU;EACZ,UAAA,kBAAC,KAAD;GACO;GACL,WAAW,CAAC,mBAAmBE,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;GAClE,eAAaG,KAAY,KAAA;GACzB,gBAAcA,IAAW,SAAS,KAAA;GAClC,GAAIL;GALN,UAAA;IAOGM,KAAQ,kBAACT,GAAD,EAAM,MAAMS,EAAO,CAAA;IAC3BL;IACAM,MAAU,KAAA,KAAa,kBAAC,QAAD;KAAM,WAAU;KAAoB,UAAAA;IAAY,CAAA;GACvE;;CACD,CAAA;AAER,CACF,GAOaC,IAAeT,EAC1B,SAAsB,EAAE,UAAO,SAAM,aAAU,UAAO,cAAW,GAAGC,KAAQ,GAAK;CAC/E,OACE,kBAAC,MAAD;EAAI,WAAU;EACZ,UAAA,kBAAC,UAAD;GACO;GACL,MAAK;GACL,WAAW,CAAC,mBAAmBE,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;GAClE,eAAaG,KAAY,KAAA;GACzB,gBAAcA;GACd,GAAIL;GANN,UAAA;IAQGM,KAAQ,kBAACT,GAAD,EAAM,MAAMS,EAAO,CAAA;IAC3BL;IACAM,MAAU,KAAA,KAAa,kBAAC,QAAD;KAAM,WAAU;KAAoB,UAAAA;IAAY,CAAA;GAClE;;CACN,CAAA;AAER,CACF"}
+{"version":3,"file":"index.js","names":["Icon","SubNav","forwardRef","rest","label","className","actions","SubNavItem","isActive","icon","count","SubNavButton","Button","disabled"],"sources":["../../../src/components/SubNav/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { Icon } from \"../Icon\";\nimport { Button } from \"../Button\";\nimport type { IconName } from \"../Icon/icons\";\nimport \"./style.css\";\n\nexport interface SubNavProps extends HTMLAttributes<HTMLElement> {\n  /** Accessible name — say what the set switches, e.g. \"Article sections\". */\n  label: string;\n  /** Controls parked at the end of the row, e.g. a view switch. */\n  actions?: ReactNode;\n  children?: ReactNode;\n}\n\n/**\n * The second level: views inside one page — Content, Settings, Revisions. A\n * hairline rule runs the full width; the active item sits on the rail.\n */\nexport const SubNav = forwardRef<HTMLElement, SubNavProps>(function SubNav(\n  { label, actions, className, children, ...rest },\n  ref,\n) {\n  return (\n    <nav\n      ref={ref}\n      aria-label={label}\n      className={[\"ds-subnav\", className].filter(Boolean).join(\" \")}\n      {...rest}\n    >\n      <ul className=\"ds-subnav__list\">{children}</ul>\n      {actions && <div className=\"ds-subnav__actions\">{actions}</div>}\n    </nav>\n  );\n});\n\ninterface SubNavItemBase {\n  label: string;\n  icon?: IconName;\n  isActive?: boolean;\n  /** A count beside the label — kept quiet, never a status colour. */\n  count?: number;\n}\n\nexport interface SubNavItemProps\n  extends SubNavItemBase,\n    Omit<AnchorHTMLAttributes<HTMLAnchorElement>, \"children\"> {}\n\n/** One view, as a link. Use `SubNavButton` when the view is client state. */\nexport const SubNavItem = forwardRef<HTMLAnchorElement, SubNavItemProps>(\n  function SubNavItem({ label, icon, isActive, count, className, ...rest }, ref) {\n    return (\n      <li className=\"ds-subnav__row\">\n        <a\n          ref={ref}\n          className={[\"ds-subnav__item\", className].filter(Boolean).join(\" \")}\n          data-active={isActive || undefined}\n          aria-current={isActive ? \"page\" : undefined}\n          {...rest}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n          {count !== undefined && <span className=\"ds-subnav__count\">{count}</span>}\n        </a>\n      </li>\n    );\n  },\n);\n\nexport interface SubNavButtonProps\n  extends SubNavItemBase,\n    Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"children\" | \"type\"> {}\n\n/** One view, as a control — for panes switched in place rather than routed. */\nexport const SubNavButton = forwardRef<HTMLButtonElement, SubNavButtonProps>(\n  function SubNavButton({ label, icon, isActive, count, disabled, className, ...rest }, ref) {\n    return (\n      <li className=\"ds-subnav__row\">\n        <Button\n          ref={ref}\n          variant=\"simple\"\n          iconStart={icon}\n          isDisabled={disabled}\n          className={[\"ds-subnav__item\", className].filter(Boolean).join(\" \")}\n          data-active={isActive || undefined}\n          aria-pressed={isActive}\n          {...rest}\n        >\n          {label}\n          {count !== undefined && <span className=\"ds-subnav__count\">{count}</span>}\n        </Button>\n      </li>\n    );\n  },\n);\n"],"mappings":";;;;;AAwBA,IAAaC,IAASC,EAAqC,SACzD,EAAE,UAAO,YAAS,cAAW,aAAU,GAAGC,KAC1C,GACA;CACA,OACE,kBAAC,OAAD;EACO;EACL,cAAYC;EACZ,WAAW,CAAC,aAAaC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAC5D,GAAIF;EAJN,UAAA,CAME,kBAAC,MAAD;GAAI,WAAU;GAAmB;EAAa,CAAA,GAC7CG,KAAW,kBAAC,OAAD;GAAK,WAAU;GAAsB,UAAAA;EAAa,CAAA,CAC3D;;AAET,CAAC,GAeYC,IAAaL,EACxB,SAAoB,EAAE,UAAO,SAAM,aAAU,UAAO,cAAW,GAAGC,KAAQ,GAAK;CAC7E,OACE,kBAAC,MAAD;EAAI,WAAU;EACZ,UAAA,kBAAC,KAAD;GACO;GACL,WAAW,CAAC,mBAAmBE,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;GAClE,eAAaG,KAAY,KAAA;GACzB,gBAAcA,IAAW,SAAS,KAAA;GAClC,GAAIL;GALN,UAAA;IAOGM,KAAQ,kBAACT,GAAD,EAAM,MAAMS,EAAO,CAAA;IAC3BL;IACAM,MAAU,KAAA,KAAa,kBAAC,QAAD;KAAM,WAAU;KAAoB,UAAAA;IAAY,CAAA;GACvE;;CACD,CAAA;AAER,CACF,GAOaC,IAAeT,EAC1B,SAAsB,EAAE,UAAO,SAAM,aAAU,UAAO,aAAU,cAAW,GAAGC,KAAQ,GAAK;CACzF,OACE,kBAAC,MAAD;EAAI,WAAU;EACZ,UAAA,kBAACS,GAAD;GACO;GACL,SAAQ;GACR,WAAWH;GACX,YAAYI;GACZ,WAAW,CAAC,mBAAmBR,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;GAClE,eAAaG,KAAY,KAAA;GACzB,gBAAcA;GACd,GAAIL;GARN,UAAA,CAUGC,GACAM,MAAU,KAAA,KAAa,kBAAC,QAAD;IAAM,WAAU;IAAoB,UAAAA;GAAY,CAAA,CAClE;;CACN,CAAA;AAER,CACF"}

package/dist/components/SubNav/style.css

@@ -42,6 +42,19 @@
       box-shadow var(--duration-fast) var(--ease-standard);
   }
 
+  /* SubNavButton composes Button but sits on the rail exactly like a link. */
+  .ds-subnav__item.ds-button {
+    height: auto;
+    padding: 0 var(--space-3);
+    border: 0;
+    border-radius: 0;
+    font-weight: var(--font-weight-medium);
+  }
+
+  .ds-subnav__item.ds-button:is(:hover, :active):not(:disabled) {
+    background: none;
+  }
+
   .ds-subnav__item:hover {
     color: var(--color-text);
   }

package/dist/components/Switch/index.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react"),t=require("react/jsx-runtime");function n(...e){return e.filter(Boolean).join(` `)}var r=(0,e.forwardRef)(function({isSelected:r,defaultSelected:i=!1,onSelectedChange:a,isDisabled:o=!1,className:s,children:c,onClick:l,...u},d){let[f,p]=(0,e.useState)(i),m=r??f;return(0,t.jsxs)(`label`,{className:n(`ds-switch`,s),children:[(0,t.jsx)(`button`,{ref:d,type:`button`,role:`switch`,"aria-checked":m,disabled:o,className:`ds-switch__track`,onClick:e=>{if(l?.(e),e.defaultPrevented)return;let t=!m;r===void 0&&p(t),a?.(t)},...u,children:(0,t.jsx)(`span`,{className:`ds-switch__knob`,"aria-hidden":`true`})}),c&&(0,t.jsx)(`span`,{className:`ds-switch__label`,children:c})]})});exports.Switch=r;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../Button/index.cjs");let t=require("react"),n=require("react/jsx-runtime");function r(...e){return e.filter(Boolean).join(` `)}var i=(0,t.forwardRef)(function({isSelected:i,defaultSelected:a=!1,onSelectedChange:o,isDisabled:s=!1,className:c,children:l,onClick:u,...d},f){let[p,m]=(0,t.useState)(a),h=i??p;return(0,n.jsxs)(`label`,{className:r(`ds-switch`,c),children:[(0,n.jsx)(e.Button,{ref:f,variant:h?`primary`:`neutral`,size:`sm`,role:`switch`,"aria-checked":h,isDisabled:s,className:`ds-switch__track`,onClick:e=>{if(u?.(e),e.defaultPrevented)return;let t=!h;i===void 0&&m(t),o?.(t)},...d,children:(0,n.jsx)(`span`,{className:`ds-switch__knob`,"aria-hidden":`true`})}),l&&(0,n.jsx)(`span`,{className:`ds-switch__label`,children:l})]})});exports.Switch=i;
 //# sourceMappingURL=index.cjs.map

package/dist/components/Switch/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["forwardRef","useState","react","react_jsx_runtime","cx","parts","Switch","rest","internal","setInternal","defaultSelected","current","isSelected","className","isDisabled","onClick","event","next","onSelectedChange","children"],"sources":["../../../src/components/Switch/index.tsx"],"sourcesContent":["import { forwardRef, useState, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport interface SwitchProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\" | \"value\" | \"disabled\"> {\n  isSelected?: boolean;\n  defaultSelected?: boolean;\n  onSelectedChange?: (isSelected: boolean) => void;\n  isDisabled?: boolean;\n  /** Label to the right of the track. Omit it and pass `aria-label`. */\n  children?: ReactNode;\n}\n\n/** An immediate on/off — it commits as it is pressed, no Save behind it. */\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(function Switch(\n  {\n    isSelected,\n    defaultSelected = false,\n    onSelectedChange,\n    isDisabled = false,\n    className,\n    children,\n    onClick,\n    ...rest\n  },\n  ref,\n) {\n  const [internal, setInternal] = useState(defaultSelected);\n  const current = isSelected ?? internal;\n\n  return (\n    <label className={cx(\"ds-switch\", className)}>\n      <button\n        ref={ref}\n        type=\"button\"\n        role=\"switch\"\n        aria-checked={current}\n        disabled={isDisabled}\n        className=\"ds-switch__track\"\n        onClick={(event) => {\n          onClick?.(event);\n          if (event.defaultPrevented) return;\n          const next = !current;\n          if (isSelected === undefined) setInternal(next);\n          onSelectedChange?.(next);\n        }}\n        {...rest}\n      >\n        <span className=\"ds-switch__knob\" aria-hidden=\"true\" />\n      </button>\n      {children && <span className=\"ds-switch__label\">{children}</span>}\n    </label>\n  );\n});\n"],"mappings":"A,yHAGA,SAASI,EAAG,GAAGC,EAAuC,CACpD,OAAOA,EAAM,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,CACvC,CAaA,IAAaC,GAAA,EAASN,EAAAA,WAAAA,CAA2C,SAC/D,CACE,aACA,kBAAkB,GAClB,mBACA,aAAa,GACb,YACA,WACA,UACA,GAAGO,GAEL,EACA,CACA,GAAM,CAACC,EAAUC,IAAA,EAAeR,EAAAA,SAAAA,CAASS,CAAe,EAClDC,EAAUC,GAAcJ,EAE9B,OACE,EAAAL,EAAA,KAAA,CAAC,QAAD,CAAO,UAAWC,EAAG,YAAaS,CAAS,EAA3C,SAAA,EACE,EAAAV,EAAA,IAAA,CAAC,SAAD,CACO,MACL,KAAK,SACL,KAAK,SACL,eAAcQ,EACd,SAAUG,EACV,UAAU,mBACV,QAAU,GAAU,CAElB,GADAC,IAAUC,CAAK,EACXA,EAAM,iBAAkB,OAC5B,IAAMC,EAAO,CAACN,EACVC,IAAe,IAAA,IAAWH,EAAYQ,CAAI,EAC9CC,IAAmBD,CAAI,CACzB,EACA,GAAIV,EAEJ,UAAA,EAAAJ,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,kBAAkB,cAAY,MAAQ,CAAA,CAChD,CAAA,EACPgB,IAAY,EAAAhB,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,mBAAoB,UAAe,CAAA,CAC3D,C,EAEX,CAAC,E"}
+{"version":3,"file":"index.cjs","names":["forwardRef","useState","Button","require_components_Button_index","react","react_jsx_runtime","cx","parts","Switch","rest","internal","setInternal","defaultSelected","current","isSelected","className","onClick","event","next","onSelectedChange","children"],"sources":["../../../src/components/Switch/index.tsx"],"sourcesContent":["import { forwardRef, useState, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport { Button } from \"../Button\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport interface SwitchProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\" | \"value\" | \"disabled\"> {\n  isSelected?: boolean;\n  defaultSelected?: boolean;\n  onSelectedChange?: (isSelected: boolean) => void;\n  isDisabled?: boolean;\n  /** Label to the right of the track. Omit it and pass `aria-label`. */\n  children?: ReactNode;\n}\n\n/** An immediate on/off — it commits as it is pressed, no Save behind it. */\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(function Switch(\n  {\n    isSelected,\n    defaultSelected = false,\n    onSelectedChange,\n    isDisabled = false,\n    className,\n    children,\n    onClick,\n    ...rest\n  },\n  ref,\n) {\n  const [internal, setInternal] = useState(defaultSelected);\n  const current = isSelected ?? internal;\n\n  return (\n    <label className={cx(\"ds-switch\", className)}>\n      <Button\n        ref={ref}\n        variant={current ? \"primary\" : \"neutral\"}\n        size=\"sm\"\n        role=\"switch\"\n        aria-checked={current}\n        isDisabled={isDisabled}\n        className=\"ds-switch__track\"\n        onClick={(event) => {\n          onClick?.(event);\n          if (event.defaultPrevented) return;\n          const next = !current;\n          if (isSelected === undefined) setInternal(next);\n          onSelectedChange?.(next);\n        }}\n        {...rest}\n      >\n        <span className=\"ds-switch__knob\" aria-hidden=\"true\" />\n      </Button>\n      {children && <span className=\"ds-switch__label\">{children}</span>}\n    </label>\n  );\n});\n"],"mappings":"A,gKAIA,SAASM,EAAG,GAAGC,EAAuC,CACpD,OAAOA,EAAM,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,CACvC,CAaA,IAAaC,GAAA,EAASR,EAAAA,WAAAA,CAA2C,SAC/D,CACE,aACA,kBAAkB,GAClB,mBACA,aAAa,GACb,YACA,WACA,UACA,GAAGS,GAEL,EACA,CACA,GAAM,CAACC,EAAUC,IAAA,EAAeV,EAAAA,SAAAA,CAASW,CAAe,EAClDC,EAAUC,GAAcJ,EAE9B,OACE,EAAAL,EAAA,KAAA,CAAC,QAAD,CAAO,UAAWC,EAAG,YAAaS,CAAS,EAA3C,SAAA,EACE,EAAAV,EAAA,IAAA,CAACH,EAAAA,OAAD,CACO,MACL,QAASW,EAAU,UAAY,UAC/B,KAAK,KACL,KAAK,SACL,eAAcA,EACF,aACZ,UAAU,mBACV,QAAU,GAAU,CAElB,GADAG,IAAUC,CAAK,EACXA,EAAM,iBAAkB,OAC5B,IAAMC,EAAO,CAACL,EACVC,IAAe,IAAA,IAAWH,EAAYO,CAAI,EAC9CC,IAAmBD,CAAI,CACzB,EACA,GAAIT,EAEJ,UAAA,EAAAJ,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,kBAAkB,cAAY,MAAQ,CAAA,CAChD,CAAA,EACPe,IAAY,EAAAf,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,mBAAoB,UAAe,CAAA,CAC3D,C,EAEX,CAAC,E"}

package/dist/components/Switch/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Switch/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACxF,OAAO,aAAa,CAAC;AAMrB,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;IACxF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,4EAA4E;AAC5E,eAAO,MAAM,MAAM,2GAuCjB,CAAC"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Switch/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAExF,OAAO,aAAa,CAAC;AAMrB,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;IACxF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,4EAA4E;AAC5E,eAAO,MAAM,MAAM,2GAwCjB,CAAC"}

package/dist/components/Switch/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACxF,OAAO,aAAa,CAAC;AAMrB,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;IACxF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,4EAA4E;AAC5E,eAAO,MAAM,MAAM,2GAuCjB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAExF,OAAO,aAAa,CAAC;AAMrB,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;IACxF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,4EAA4E;AAC5E,eAAO,MAAM,MAAM,2GAwCjB,CAAC"}

package/dist/components/Switch/index.js

@@ -1,37 +1,39 @@
-import { forwardRef as e, useState as t } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Button as e } from "../Button/index.js";
+import { forwardRef as t, useState as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/Switch/index.tsx
-function i(...e) {
+function a(...e) {
 	return e.filter(Boolean).join(" ");
 }
-var a = e(function({ isSelected: e, defaultSelected: a = !1, onSelectedChange: o, isDisabled: s = !1, className: c, children: l, onClick: u, ...d }, f) {
-	let [p, m] = t(a), h = e ?? p;
-	return /* @__PURE__ */ r("label", {
-		className: i("ds-switch", c),
-		children: [/* @__PURE__ */ n("button", {
-			ref: f,
-			type: "button",
+var o = t(function({ isSelected: t, defaultSelected: o = !1, onSelectedChange: s, isDisabled: c = !1, className: l, children: u, onClick: d, ...f }, p) {
+	let [m, h] = n(o), g = t ?? m;
+	return /* @__PURE__ */ i("label", {
+		className: a("ds-switch", l),
+		children: [/* @__PURE__ */ r(e, {
+			ref: p,
+			variant: g ? "primary" : "neutral",
+			size: "sm",
 			role: "switch",
-			"aria-checked": h,
-			disabled: s,
+			"aria-checked": g,
+			isDisabled: c,
 			className: "ds-switch__track",
-			onClick: (t) => {
-				if (u?.(t), t.defaultPrevented) return;
-				let n = !h;
-				e === void 0 && m(n), o?.(n);
+			onClick: (e) => {
+				if (d?.(e), e.defaultPrevented) return;
+				let n = !g;
+				t === void 0 && h(n), s?.(n);
 			},
-			...d,
-			children: /* @__PURE__ */ n("span", {
+			...f,
+			children: /* @__PURE__ */ r("span", {
 				className: "ds-switch__knob",
 				"aria-hidden": "true"
 			})
-		}), l && /* @__PURE__ */ n("span", {
+		}), u && /* @__PURE__ */ r("span", {
 			className: "ds-switch__label",
-			children: l
+			children: u
 		})]
 	});
 });
 //#endregion
-export { a as Switch };
+export { o as Switch };
 
 //# sourceMappingURL=index.js.map

package/dist/components/Switch/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["cx","parts","Switch","forwardRef","rest","internal","setInternal","useState","defaultSelected","current","isSelected","className","isDisabled","onClick","event","next","onSelectedChange","children"],"sources":["../../../src/components/Switch/index.tsx"],"sourcesContent":["import { forwardRef, useState, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport interface SwitchProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\" | \"value\" | \"disabled\"> {\n  isSelected?: boolean;\n  defaultSelected?: boolean;\n  onSelectedChange?: (isSelected: boolean) => void;\n  isDisabled?: boolean;\n  /** Label to the right of the track. Omit it and pass `aria-label`. */\n  children?: ReactNode;\n}\n\n/** An immediate on/off — it commits as it is pressed, no Save behind it. */\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(function Switch(\n  {\n    isSelected,\n    defaultSelected = false,\n    onSelectedChange,\n    isDisabled = false,\n    className,\n    children,\n    onClick,\n    ...rest\n  },\n  ref,\n) {\n  const [internal, setInternal] = useState(defaultSelected);\n  const current = isSelected ?? internal;\n\n  return (\n    <label className={cx(\"ds-switch\", className)}>\n      <button\n        ref={ref}\n        type=\"button\"\n        role=\"switch\"\n        aria-checked={current}\n        disabled={isDisabled}\n        className=\"ds-switch__track\"\n        onClick={(event) => {\n          onClick?.(event);\n          if (event.defaultPrevented) return;\n          const next = !current;\n          if (isSelected === undefined) setInternal(next);\n          onSelectedChange?.(next);\n        }}\n        {...rest}\n      >\n        <span className=\"ds-switch__knob\" aria-hidden=\"true\" />\n      </button>\n      {children && <span className=\"ds-switch__label\">{children}</span>}\n    </label>\n  );\n});\n"],"mappings":";;;AAGA,SAASA,EAAG,GAAGC,GAAuC;CACpD,OAAOA,EAAM,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AACvC;AAaA,IAAaC,IAASC,EAA2C,SAC/D,EACE,eACA,qBAAkB,IAClB,qBACA,gBAAa,IACb,cACA,aACA,YACA,GAAGC,KAEL,GACA;CACA,IAAM,CAACC,GAAUC,KAAeC,EAASC,CAAe,GAClDC,IAAUC,KAAcL;CAE9B,OACE,kBAAC,SAAD;EAAO,WAAWL,EAAG,aAAaW,CAAS;EAA3C,UAAA,CACE,kBAAC,UAAD;GACO;GACL,MAAK;GACL,MAAK;GACL,gBAAcF;GACd,UAAUG;GACV,WAAU;GACV,UAAU,MAAU;IAElB,IADAC,IAAUC,CAAK,GACXA,EAAM,kBAAkB;IAC5B,IAAMC,IAAO,CAACN;IAEd,AADIC,MAAe,KAAA,KAAWJ,EAAYS,CAAI,GAC9CC,IAAmBD,CAAI;GACzB;GACA,GAAIX;GAEJ,UAAA,kBAAC,QAAD;IAAM,WAAU;IAAkB,eAAY;GAAQ,CAAA;EAChD,CAAA,GACPa,KAAY,kBAAC,QAAD;GAAM,WAAU;GAAoB;EAAe,CAAA,CAC3D;;AAEX,CAAC"}
+{"version":3,"file":"index.js","names":["cx","parts","Switch","forwardRef","rest","internal","setInternal","useState","defaultSelected","current","isSelected","className","Button","onClick","event","next","onSelectedChange","children"],"sources":["../../../src/components/Switch/index.tsx"],"sourcesContent":["import { forwardRef, useState, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport { Button } from \"../Button\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport interface SwitchProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\" | \"value\" | \"disabled\"> {\n  isSelected?: boolean;\n  defaultSelected?: boolean;\n  onSelectedChange?: (isSelected: boolean) => void;\n  isDisabled?: boolean;\n  /** Label to the right of the track. Omit it and pass `aria-label`. */\n  children?: ReactNode;\n}\n\n/** An immediate on/off — it commits as it is pressed, no Save behind it. */\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(function Switch(\n  {\n    isSelected,\n    defaultSelected = false,\n    onSelectedChange,\n    isDisabled = false,\n    className,\n    children,\n    onClick,\n    ...rest\n  },\n  ref,\n) {\n  const [internal, setInternal] = useState(defaultSelected);\n  const current = isSelected ?? internal;\n\n  return (\n    <label className={cx(\"ds-switch\", className)}>\n      <Button\n        ref={ref}\n        variant={current ? \"primary\" : \"neutral\"}\n        size=\"sm\"\n        role=\"switch\"\n        aria-checked={current}\n        isDisabled={isDisabled}\n        className=\"ds-switch__track\"\n        onClick={(event) => {\n          onClick?.(event);\n          if (event.defaultPrevented) return;\n          const next = !current;\n          if (isSelected === undefined) setInternal(next);\n          onSelectedChange?.(next);\n        }}\n        {...rest}\n      >\n        <span className=\"ds-switch__knob\" aria-hidden=\"true\" />\n      </Button>\n      {children && <span className=\"ds-switch__label\">{children}</span>}\n    </label>\n  );\n});\n"],"mappings":";;;;AAIA,SAASA,EAAG,GAAGC,GAAuC;CACpD,OAAOA,EAAM,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AACvC;AAaA,IAAaC,IAASC,EAA2C,SAC/D,EACE,eACA,qBAAkB,IAClB,qBACA,gBAAa,IACb,cACA,aACA,YACA,GAAGC,KAEL,GACA;CACA,IAAM,CAACC,GAAUC,KAAeC,EAASC,CAAe,GAClDC,IAAUC,KAAcL;CAE9B,OACE,kBAAC,SAAD;EAAO,WAAWL,EAAG,aAAaW,CAAS;EAA3C,UAAA,CACE,kBAACC,GAAD;GACO;GACL,SAASH,IAAU,YAAY;GAC/B,MAAK;GACL,MAAK;GACL,gBAAcA;GACF;GACZ,WAAU;GACV,UAAU,MAAU;IAElB,IADAI,IAAUC,CAAK,GACXA,EAAM,kBAAkB;IAC5B,IAAMC,IAAO,CAACN;IAEd,AADIC,MAAe,KAAA,KAAWJ,EAAYS,CAAI,GAC9CC,IAAmBD,CAAI;GACzB;GACA,GAAIX;GAEJ,UAAA,kBAAC,QAAD;IAAM,WAAU;IAAkB,eAAY;GAAQ,CAAA;EAChD,CAAA,GACPa,KAAY,kBAAC,QAAD;GAAM,WAAU;GAAoB;EAAe,CAAA,CAC3D;;AAEX,CAAC"}

package/dist/components/Switch/style.css

@@ -6,39 +6,13 @@
     cursor: pointer;
   }
 
-  .ds-switch__track {
+  .ds-switch__track.ds-button {
     position: relative;
     flex: none;
     inline-size: var(--switch-width);
-    block-size: var(--switch-height);
+    height: var(--switch-height);
     padding: 0;
-    border: var(--control-border-width) solid var(--control-border-color);
     border-radius: var(--radius-pill);
-    background: var(--field-rest);
-    cursor: pointer;
-    transition: background-color var(--duration-fast) var(--ease-standard);
-  }
-
-  .ds-switch__track:hover:not(:disabled) {
-    background: var(--field-hover);
-  }
-
-  .ds-switch__track[aria-checked="true"] {
-    background: var(--color-primary);
-  }
-
-  .ds-switch__track[aria-checked="true"]:hover:not(:disabled) {
-    background: var(--color-primary-hover);
-  }
-
-  .ds-switch__track:focus-visible {
-    outline: var(--control-border-width) solid var(--color-focus);
-    outline-offset: 2px;
-  }
-
-  .ds-switch__track:disabled {
-    opacity: 45%;
-    cursor: not-allowed;
   }
 
   .ds-switch__knob {

package/dist/components/TagsInput/index.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs");;/* empty css                            */let t=require("react"),n=require("react/jsx-runtime");function r(...e){return e.filter(Boolean).join(` `)}var i=(0,t.forwardRef)(function({value:i,defaultValue:a=[],onValueChange:o,placeholder:s=`Add a tag`,size:c=`md`,max:l,isDisabled:u=!1,isInvalid:d=!1,className:f,...p},m){let[h,g]=(0,t.useState)(a),_=i??h,[v,y]=(0,t.useState)(``),b=(0,t.useRef)(null),x=e=>{i===void 0&&g(e),o?.(e)},S=e=>{let t=e.trim();t&&!_.includes(t)&&(l!==void 0&&_.length>=l||x([..._,t]))};return(0,n.jsxs)(`div`,{className:r(`ds-field-skin`,`ds-tags`,f),"data-size":c,"data-disabled":u||void 0,"aria-invalid":d||void 0,onClick:()=>b.current?.focus(),children:[_.map(t=>(0,n.jsxs)(`span`,{className:`ds-tags__tag`,children:[t,(0,n.jsx)(`button`,{type:`button`,className:`ds-tags__remove`,"aria-label":`Remove ${t}`,disabled:u,onClick:e=>{e.stopPropagation(),x(_.filter(e=>e!==t))},children:(0,n.jsx)(e.t,{name:`x`,size:16})})]},t)),(0,n.jsx)(`input`,{ref:e=>{b.current=e,typeof m==`function`?m(e):m&&(m.current=e)},type:`text`,className:`ds-tags__input`,value:v,placeholder:_.length===0?s:``,disabled:u,onChange:e=>y(e.target.value),onKeyDown:e=>{e.key===`Enter`||e.key===`,`?(e.preventDefault(),S(v),y(``)):e.key===`Backspace`&&v===``&&_.length>0&&x(_.slice(0,-1))},onBlur:()=>{S(v),y(``)},...p})]})});exports.TagsInput=i;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../Button/index.cjs");;/* empty css                            */let t=require("react"),n=require("react/jsx-runtime");function r(...e){return e.filter(Boolean).join(` `)}var i=(0,t.forwardRef)(function({value:i,defaultValue:a=[],onValueChange:o,placeholder:s=`Add a tag`,size:c=`md`,max:l,isDisabled:u=!1,isInvalid:d=!1,className:f,...p},m){let[h,g]=(0,t.useState)(a),_=i??h,[v,y]=(0,t.useState)(``),b=(0,t.useRef)(null),x=e=>{i===void 0&&g(e),o?.(e)},S=e=>{let t=e.trim();t&&!_.includes(t)&&(l!==void 0&&_.length>=l||x([..._,t]))};return(0,n.jsxs)(`div`,{className:r(`ds-field-skin`,`ds-tags`,f),"data-size":c,"data-disabled":u||void 0,"aria-invalid":d||void 0,onClick:()=>b.current?.focus(),children:[_.map(t=>(0,n.jsxs)(`span`,{className:`ds-tags__tag`,children:[t,(0,n.jsx)(e.Button,{variant:`simple`,size:`xs`,isIconOnly:!0,iconStart:`x`,"aria-label":`Remove ${t}`,isDisabled:u,onClick:e=>{e.stopPropagation(),x(_.filter(e=>e!==t))}})]},t)),(0,n.jsx)(`input`,{ref:e=>{b.current=e,typeof m==`function`?m(e):m&&(m.current=e)},type:`text`,className:`ds-tags__input`,value:v,placeholder:_.length===0?s:``,disabled:u,onChange:e=>y(e.target.value),onKeyDown:e=>{e.key===`Enter`||e.key===`,`?(e.preventDefault(),S(v),y(``)):e.key===`Backspace`&&v===``&&_.length>0&&x(_.slice(0,-1))},onBlur:()=>{S(v),y(``)},...p})]})});exports.TagsInput=i;
 //# sourceMappingURL=index.cjs.map

package/dist/components/TagsInput/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["forwardRef","useState","useRef","Icon","require_Icon","react","react_jsx_runtime","cx","parts","TagsInput","rest","internal","setInternal","defaultValue","current","value","draft","setDraft","inputRef","commit","next","onValueChange","add","tag","raw","max","className","size","isDisabled","isInvalid","event","item","node","ref","placeholder"],"sources":["../../../src/components/TagsInput/index.tsx"],"sourcesContent":["import { forwardRef, useRef, useState, type KeyboardEvent } from \"react\";\nimport { Icon } from \"../Icon\";\nimport type { FieldSize } from \"../Field\";\nimport \"../Field/style.css\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport interface TagsInputProps {\n  value?: string[];\n  defaultValue?: string[];\n  onValueChange?: (value: string[]) => void;\n  placeholder?: string;\n  size?: FieldSize;\n  /** Stop accepting new tags past this count. */\n  max?: number;\n  isDisabled?: boolean;\n  isInvalid?: boolean;\n  id?: string;\n  className?: string;\n  \"aria-label\"?: string;\n  \"aria-describedby\"?: string;\n}\n\n/**\n * Free-text keywords. Enter or comma commits a tag, Backspace on an empty\n * input removes the last one. Tags are plain strings — never status tones.\n */\nexport const TagsInput = forwardRef<HTMLInputElement, TagsInputProps>(function TagsInput(\n  {\n    value,\n    defaultValue = [],\n    onValueChange,\n    placeholder = \"Add a tag\",\n    size = \"md\",\n    max,\n    isDisabled = false,\n    isInvalid = false,\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const [internal, setInternal] = useState<string[]>(defaultValue);\n  const current = value ?? internal;\n  const [draft, setDraft] = useState(\"\");\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const commit = (next: string[]) => {\n    if (value === undefined) setInternal(next);\n    onValueChange?.(next);\n  };\n\n  const add = (raw: string) => {\n    const tag = raw.trim();\n    if (!tag || current.includes(tag)) return;\n    if (max !== undefined && current.length >= max) return;\n    commit([...current, tag]);\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === \"Enter\" || event.key === \",\") {\n      event.preventDefault();\n      add(draft);\n      setDraft(\"\");\n    } else if (event.key === \"Backspace\" && draft === \"\" && current.length > 0) {\n      commit(current.slice(0, -1));\n    }\n  };\n\n  return (\n    <div\n      className={cx(\"ds-field-skin\", \"ds-tags\", className)}\n      data-size={size}\n      data-disabled={isDisabled || undefined}\n      aria-invalid={isInvalid || undefined}\n      onClick={() => inputRef.current?.focus()}\n    >\n      {current.map((tag) => (\n        <span key={tag} className=\"ds-tags__tag\">\n          {tag}\n          <button\n            type=\"button\"\n            className=\"ds-tags__remove\"\n            aria-label={`Remove ${tag}`}\n            disabled={isDisabled}\n            onClick={(event) => {\n              event.stopPropagation();\n              commit(current.filter((item) => item !== tag));\n            }}\n          >\n            <Icon name=\"x\" size={16} />\n          </button>\n        </span>\n      ))}\n      <input\n        ref={(node) => {\n          inputRef.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        type=\"text\"\n        className=\"ds-tags__input\"\n        value={draft}\n        placeholder={current.length === 0 ? placeholder : \"\"}\n        disabled={isDisabled}\n        onChange={(event) => setDraft(event.target.value)}\n        onKeyDown={onKeyDown}\n        onBlur={() => {\n          add(draft);\n          setDraft(\"\");\n        }}\n        {...rest}\n      />\n    </div>\n  );\n});\n"],"mappings":"A,sNAMA,SAASO,EAAG,GAAGC,EAAuC,CACpD,OAAOA,EAAM,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,CACvC,CAsBA,IAAaC,GAAA,EAAYT,EAAAA,WAAAA,CAA6C,SACpE,CACE,QACA,eAAe,CAAC,EAChB,gBACA,cAAc,YACd,OAAO,KACP,MACA,aAAa,GACb,YAAY,GACZ,YACA,GAAGU,GAEL,EACA,CACA,GAAM,CAACC,EAAUC,IAAA,EAAeX,EAAAA,SAAAA,CAAmBY,CAAY,EACzDC,EAAUC,GAASJ,EACnB,CAACK,EAAOC,IAAA,EAAYhB,EAAAA,SAAAA,CAAS,EAAE,EAC/BiB,GAAA,EAAWhB,EAAAA,OAAAA,CAAgC,IAAI,EAE/CiB,EAAU,GAAmB,CAC7BJ,IAAU,IAAA,IAAWH,EAAYQ,CAAI,EACzCC,IAAgBD,CAAI,CACtB,EAEME,EAAO,GAAgB,CAC3B,IAAMC,EAAMC,EAAI,KAAK,EAChBD,GAAO,GAAQ,SAASA,CAAG,IAC5BE,IAAQ,IAAA,IAAaX,EAAQ,QAAUW,GAC3CN,EAAO,CAAC,GAAGL,EAASS,CAAG,CAAC,EAC1B,EAYA,OACE,EAAAjB,EAAA,KAAA,CAAC,MAAD,CACE,UAAWC,EAAG,gBAAiB,UAAWmB,CAAS,EACnD,YAAWC,EACX,gBAAeC,GAAc,IAAA,GAC7B,eAAcC,GAAa,IAAA,GAC3B,YAAeX,EAAS,SAAS,MAAM,EALzC,SAAA,CAOGJ,EAAQ,IAAK,IACZ,EAAAR,EAAA,KAAA,CAAC,OAAD,CAAgB,UAAU,eAA1B,SAAA,CACGiB,GACD,EAAAjB,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,UAAU,kBACV,aAAY,UAAUiB,IACtB,SAAUK,EACV,QAAU,GAAU,CAClBE,EAAM,gBAAgB,EACtBX,EAAOL,EAAQ,OAAQ,GAASiB,IAASR,CAAG,CAAC,CAC/C,EAEA,UAAA,EAAAjB,EAAA,IAAA,CAACH,EAAAA,EAAD,CAAM,KAAK,IAAI,KAAM,EAAK,CAAA,CACpB,CAAA,CACJ,CAdK,EAAAoB,CAcL,CACP,GACD,EAAAjB,EAAA,IAAA,CAAC,QAAD,CACE,IAAM,GAAS,CACb,EAAS,QAAU0B,EACf,OAAOC,GAAQ,WAAYA,EAAID,CAAI,EAC9BC,IAAK,EAAI,QAAUD,EAC9B,EACA,KAAK,OACL,UAAU,iBACV,MAAOhB,EACP,YAAaF,EAAQ,SAAW,EAAIoB,EAAc,GAClD,SAAUN,EACV,SAAW,GAAUX,EAASa,EAAM,OAAO,KAAK,EACrC,UA/CE,GAA2C,CACxDA,EAAM,MAAQ,SAAWA,EAAM,MAAQ,KACzCA,EAAM,eAAe,EACrBR,EAAIN,CAAK,EACTC,EAAS,EAAE,GACFa,EAAM,MAAQ,aAAed,IAAU,IAAMF,EAAQ,OAAS,GACvEK,EAAOL,EAAQ,MAAM,EAAG,EAAE,CAAC,CAE/B,EAwCM,WAAc,CACZQ,EAAIN,CAAK,EACTC,EAAS,EAAE,CACb,EACA,GAAIP,CACL,CAAA,CACE,C,EAET,CAAC,E"}
+{"version":3,"file":"index.cjs","names":["forwardRef","useState","useRef","Button","require_components_Button_index","react","react_jsx_runtime","cx","parts","TagsInput","rest","internal","setInternal","defaultValue","current","value","draft","setDraft","inputRef","commit","next","onValueChange","add","tag","raw","max","className","size","isDisabled","isInvalid","event","item","node","ref","placeholder"],"sources":["../../../src/components/TagsInput/index.tsx"],"sourcesContent":["import { forwardRef, useRef, useState, type KeyboardEvent } from \"react\";\nimport { Button } from \"../Button\";\nimport type { FieldSize } from \"../Field\";\nimport \"../Field/style.css\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport interface TagsInputProps {\n  value?: string[];\n  defaultValue?: string[];\n  onValueChange?: (value: string[]) => void;\n  placeholder?: string;\n  size?: FieldSize;\n  /** Stop accepting new tags past this count. */\n  max?: number;\n  isDisabled?: boolean;\n  isInvalid?: boolean;\n  id?: string;\n  className?: string;\n  \"aria-label\"?: string;\n  \"aria-describedby\"?: string;\n}\n\n/**\n * Free-text keywords. Enter or comma commits a tag, Backspace on an empty\n * input removes the last one. Tags are plain strings — never status tones.\n */\nexport const TagsInput = forwardRef<HTMLInputElement, TagsInputProps>(function TagsInput(\n  {\n    value,\n    defaultValue = [],\n    onValueChange,\n    placeholder = \"Add a tag\",\n    size = \"md\",\n    max,\n    isDisabled = false,\n    isInvalid = false,\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const [internal, setInternal] = useState<string[]>(defaultValue);\n  const current = value ?? internal;\n  const [draft, setDraft] = useState(\"\");\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const commit = (next: string[]) => {\n    if (value === undefined) setInternal(next);\n    onValueChange?.(next);\n  };\n\n  const add = (raw: string) => {\n    const tag = raw.trim();\n    if (!tag || current.includes(tag)) return;\n    if (max !== undefined && current.length >= max) return;\n    commit([...current, tag]);\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === \"Enter\" || event.key === \",\") {\n      event.preventDefault();\n      add(draft);\n      setDraft(\"\");\n    } else if (event.key === \"Backspace\" && draft === \"\" && current.length > 0) {\n      commit(current.slice(0, -1));\n    }\n  };\n\n  return (\n    <div\n      className={cx(\"ds-field-skin\", \"ds-tags\", className)}\n      data-size={size}\n      data-disabled={isDisabled || undefined}\n      aria-invalid={isInvalid || undefined}\n      onClick={() => inputRef.current?.focus()}\n    >\n      {current.map((tag) => (\n        <span key={tag} className=\"ds-tags__tag\">\n          {tag}\n          <Button\n            variant=\"simple\"\n            size=\"xs\"\n            isIconOnly\n            iconStart=\"x\"\n            aria-label={`Remove ${tag}`}\n            isDisabled={isDisabled}\n            onClick={(event) => {\n              event.stopPropagation();\n              commit(current.filter((item) => item !== tag));\n            }}\n          />\n        </span>\n      ))}\n      <input\n        ref={(node) => {\n          inputRef.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        type=\"text\"\n        className=\"ds-tags__input\"\n        value={draft}\n        placeholder={current.length === 0 ? placeholder : \"\"}\n        disabled={isDisabled}\n        onChange={(event) => setDraft(event.target.value)}\n        onKeyDown={onKeyDown}\n        onBlur={() => {\n          add(draft);\n          setDraft(\"\");\n        }}\n        {...rest}\n      />\n    </div>\n  );\n});\n"],"mappings":"A,2MAMA,SAASO,EAAG,GAAGC,EAAuC,CACpD,OAAOA,EAAM,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,CACvC,CAsBA,IAAaC,GAAA,EAAYT,EAAAA,WAAAA,CAA6C,SACpE,CACE,QACA,eAAe,CAAC,EAChB,gBACA,cAAc,YACd,OAAO,KACP,MACA,aAAa,GACb,YAAY,GACZ,YACA,GAAGU,GAEL,EACA,CACA,GAAM,CAACC,EAAUC,IAAA,EAAeX,EAAAA,SAAAA,CAAmBY,CAAY,EACzDC,EAAUC,GAASJ,EACnB,CAACK,EAAOC,IAAA,EAAYhB,EAAAA,SAAAA,CAAS,EAAE,EAC/BiB,GAAA,EAAWhB,EAAAA,OAAAA,CAAgC,IAAI,EAE/CiB,EAAU,GAAmB,CAC7BJ,IAAU,IAAA,IAAWH,EAAYQ,CAAI,EACzCC,IAAgBD,CAAI,CACtB,EAEME,EAAO,GAAgB,CAC3B,IAAMC,EAAMC,EAAI,KAAK,EAChBD,GAAO,GAAQ,SAASA,CAAG,IAC5BE,IAAQ,IAAA,IAAaX,EAAQ,QAAUW,GAC3CN,EAAO,CAAC,GAAGL,EAASS,CAAG,CAAC,EAC1B,EAYA,OACE,EAAAjB,EAAA,KAAA,CAAC,MAAD,CACE,UAAWC,EAAG,gBAAiB,UAAWmB,CAAS,EACnD,YAAWC,EACX,gBAAeC,GAAc,IAAA,GAC7B,eAAcC,GAAa,IAAA,GAC3B,YAAeX,EAAS,SAAS,MAAM,EALzC,SAAA,CAOGJ,EAAQ,IAAK,IACZ,EAAAR,EAAA,KAAA,CAAC,OAAD,CAAgB,UAAU,eAA1B,SAAA,CACGiB,GACD,EAAAjB,EAAA,IAAA,CAACH,EAAAA,OAAD,CACE,QAAQ,SACR,KAAK,KACL,WAAA,GACA,UAAU,IACV,aAAY,UAAUoB,IACV,aACZ,QAAU,GAAU,CAClBO,EAAM,gBAAgB,EACtBX,EAAOL,EAAQ,OAAQ,GAASiB,IAASR,CAAG,CAAC,CAC/C,CACD,CAAA,CACG,CAdK,EAAAA,CAcL,CACP,GACD,EAAAjB,EAAA,IAAA,CAAC,QAAD,CACE,IAAM,GAAS,CACb,EAAS,QAAU0B,EACf,OAAOC,GAAQ,WAAYA,EAAID,CAAI,EAC9BC,IAAK,EAAI,QAAUD,EAC9B,EACA,KAAK,OACL,UAAU,iBACV,MAAOhB,EACP,YAAaF,EAAQ,SAAW,EAAIoB,EAAc,GAClD,SAAUN,EACV,SAAW,GAAUX,EAASa,EAAM,OAAO,KAAK,EACrC,UA/CE,GAA2C,CACxDA,EAAM,MAAQ,SAAWA,EAAM,MAAQ,KACzCA,EAAM,eAAe,EACrBR,EAAIN,CAAK,EACTC,EAAS,EAAE,GACFa,EAAM,MAAQ,aAAed,IAAU,IAAMF,EAAQ,OAAS,GACvEK,EAAOL,EAAQ,MAAM,EAAG,EAAE,CAAC,CAE/B,EAwCM,WAAc,CACZQ,EAAIN,CAAK,EACTC,EAAS,EAAE,CACb,EACA,GAAIP,CACL,CAAA,CACE,C,EAET,CAAC,E"}

package/dist/components/TagsInput/index.js

@@ -1,4 +1,4 @@
-import { t as e } from "../../chunks/Icon-CGY1FNXT.js";
+import { Button as e } from "../Button/index.js";
 /* empty css                          */
 import { forwardRef as t, useRef as n, useState as r } from "react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
@@ -21,18 +21,16 @@ var s = t(function({ value: t, defaultValue: s = [], onValueChange: c, placehold
 		onClick: () => S.current?.focus(),
 		children: [y.map((t) => /* @__PURE__ */ a("span", {
 			className: "ds-tags__tag",
-			children: [t, /* @__PURE__ */ i("button", {
-				type: "button",
-				className: "ds-tags__remove",
+			children: [t, /* @__PURE__ */ i(e, {
+				variant: "simple",
+				size: "xs",
+				isIconOnly: !0,
+				iconStart: "x",
 				"aria-label": `Remove ${t}`,
-				disabled: f,
+				isDisabled: f,
 				onClick: (e) => {
 					e.stopPropagation(), C(y.filter((e) => e !== t));
-				},
-				children: /* @__PURE__ */ i(e, {
-					name: "x",
-					size: 16
-				})
+				}
 			})]
 		}, t)), /* @__PURE__ */ i("input", {
 			ref: (e) => {

package/dist/components/TagsInput/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Icon","cx","parts","TagsInput","forwardRef","rest","internal","setInternal","useState","defaultValue","current","value","draft","setDraft","inputRef","useRef","commit","next","onValueChange","add","tag","raw","max","className","size","isDisabled","isInvalid","event","item","node","ref","placeholder"],"sources":["../../../src/components/TagsInput/index.tsx"],"sourcesContent":["import { forwardRef, useRef, useState, type KeyboardEvent } from \"react\";\nimport { Icon } from \"../Icon\";\nimport type { FieldSize } from \"../Field\";\nimport \"../Field/style.css\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport interface TagsInputProps {\n  value?: string[];\n  defaultValue?: string[];\n  onValueChange?: (value: string[]) => void;\n  placeholder?: string;\n  size?: FieldSize;\n  /** Stop accepting new tags past this count. */\n  max?: number;\n  isDisabled?: boolean;\n  isInvalid?: boolean;\n  id?: string;\n  className?: string;\n  \"aria-label\"?: string;\n  \"aria-describedby\"?: string;\n}\n\n/**\n * Free-text keywords. Enter or comma commits a tag, Backspace on an empty\n * input removes the last one. Tags are plain strings — never status tones.\n */\nexport const TagsInput = forwardRef<HTMLInputElement, TagsInputProps>(function TagsInput(\n  {\n    value,\n    defaultValue = [],\n    onValueChange,\n    placeholder = \"Add a tag\",\n    size = \"md\",\n    max,\n    isDisabled = false,\n    isInvalid = false,\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const [internal, setInternal] = useState<string[]>(defaultValue);\n  const current = value ?? internal;\n  const [draft, setDraft] = useState(\"\");\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const commit = (next: string[]) => {\n    if (value === undefined) setInternal(next);\n    onValueChange?.(next);\n  };\n\n  const add = (raw: string) => {\n    const tag = raw.trim();\n    if (!tag || current.includes(tag)) return;\n    if (max !== undefined && current.length >= max) return;\n    commit([...current, tag]);\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === \"Enter\" || event.key === \",\") {\n      event.preventDefault();\n      add(draft);\n      setDraft(\"\");\n    } else if (event.key === \"Backspace\" && draft === \"\" && current.length > 0) {\n      commit(current.slice(0, -1));\n    }\n  };\n\n  return (\n    <div\n      className={cx(\"ds-field-skin\", \"ds-tags\", className)}\n      data-size={size}\n      data-disabled={isDisabled || undefined}\n      aria-invalid={isInvalid || undefined}\n      onClick={() => inputRef.current?.focus()}\n    >\n      {current.map((tag) => (\n        <span key={tag} className=\"ds-tags__tag\">\n          {tag}\n          <button\n            type=\"button\"\n            className=\"ds-tags__remove\"\n            aria-label={`Remove ${tag}`}\n            disabled={isDisabled}\n            onClick={(event) => {\n              event.stopPropagation();\n              commit(current.filter((item) => item !== tag));\n            }}\n          >\n            <Icon name=\"x\" size={16} />\n          </button>\n        </span>\n      ))}\n      <input\n        ref={(node) => {\n          inputRef.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        type=\"text\"\n        className=\"ds-tags__input\"\n        value={draft}\n        placeholder={current.length === 0 ? placeholder : \"\"}\n        disabled={isDisabled}\n        onChange={(event) => setDraft(event.target.value)}\n        onKeyDown={onKeyDown}\n        onBlur={() => {\n          add(draft);\n          setDraft(\"\");\n        }}\n        {...rest}\n      />\n    </div>\n  );\n});\n"],"mappings":";;;;;AAMA,SAASC,EAAG,GAAGC,GAAuC;CACpD,OAAOA,EAAM,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AACvC;AAsBA,IAAaC,IAAYC,EAA6C,SACpE,EACE,UACA,kBAAe,CAAC,GAChB,kBACA,iBAAc,aACd,UAAO,MACP,QACA,gBAAa,IACb,eAAY,IACZ,cACA,GAAGC,KAEL,GACA;CACA,IAAM,CAACC,GAAUC,KAAeC,EAAmBC,CAAY,GACzDC,IAAUC,KAASL,GACnB,CAACM,GAAOC,KAAYL,EAAS,EAAE,GAC/BM,IAAWC,EAAgC,IAAI,GAE/CC,KAAU,MAAmB;EAEjC,AADIL,MAAU,KAAA,KAAWJ,EAAYU,CAAI,GACzCC,IAAgBD,CAAI;CACtB,GAEME,KAAO,MAAgB;EAC3B,IAAMC,IAAMC,EAAI,KAAK;EACrB,AAAKD,KAAO,GAAQ,SAASA,CAAG,MAC5BE,MAAQ,KAAA,KAAaZ,EAAQ,UAAUY,KAC3CN,EAAO,CAAC,GAAGN,GAASU,CAAG,CAAC;CAC1B;CAYA,OACE,kBAAC,OAAD;EACE,WAAWnB,EAAG,iBAAiB,WAAWsB,CAAS;EACnD,aAAWC;EACX,iBAAeC,KAAc,KAAA;EAC7B,gBAAcC,KAAa,KAAA;EAC3B,eAAeZ,EAAS,SAAS,MAAM;EALzC,UAAA,CAOGJ,EAAQ,KAAK,MACZ,kBAAC,QAAD;GAAgB,WAAU;GAA1B,UAAA,CACGU,GACD,kBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,cAAY,UAAUA;IACtB,UAAUK;IACV,UAAU,MAAU;KAElB,AADAE,EAAM,gBAAgB,GACtBX,EAAON,EAAQ,QAAQ,MAASkB,MAASR,CAAG,CAAC;IAC/C;IAEA,UAAA,kBAACpB,GAAD;KAAM,MAAK;KAAI,MAAM;IAAK,CAAA;GACpB,CAAA,CACJ;EAdK,GAAAoB,CAcL,CACP,GACD,kBAAC,SAAD;GACE,MAAM,MAAS;IAEb,AADA,EAAS,UAAUS,GACf,OAAOC,KAAQ,aAAYA,EAAID,CAAI,IAC9BC,MAAK,EAAI,UAAUD;GAC9B;GACA,MAAK;GACL,WAAU;GACV,OAAOjB;GACP,aAAaF,EAAQ,WAAW,IAAIqB,IAAc;GAClD,UAAUN;GACV,WAAW,MAAUZ,EAASc,EAAM,OAAO,KAAK;GACrC,YA/CE,MAA2C;IAC5D,AAAIA,EAAM,QAAQ,WAAWA,EAAM,QAAQ,OACzCA,EAAM,eAAe,GACrBR,EAAIP,CAAK,GACTC,EAAS,EAAE,KACFc,EAAM,QAAQ,eAAef,MAAU,MAAMF,EAAQ,SAAS,KACvEM,EAAON,EAAQ,MAAM,GAAG,EAAE,CAAC;GAE/B;GAwCM,cAAc;IAEZ,AADAS,EAAIP,CAAK,GACTC,EAAS,EAAE;GACb;GACA,GAAIR;EACL,CAAA,CACE;;AAET,CAAC"}
+{"version":3,"file":"index.js","names":["cx","parts","TagsInput","forwardRef","rest","internal","setInternal","useState","defaultValue","current","value","draft","setDraft","inputRef","useRef","commit","next","onValueChange","add","tag","raw","max","className","size","isDisabled","isInvalid","Button","event","item","node","ref","placeholder"],"sources":["../../../src/components/TagsInput/index.tsx"],"sourcesContent":["import { forwardRef, useRef, useState, type KeyboardEvent } from \"react\";\nimport { Button } from \"../Button\";\nimport type { FieldSize } from \"../Field\";\nimport \"../Field/style.css\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport interface TagsInputProps {\n  value?: string[];\n  defaultValue?: string[];\n  onValueChange?: (value: string[]) => void;\n  placeholder?: string;\n  size?: FieldSize;\n  /** Stop accepting new tags past this count. */\n  max?: number;\n  isDisabled?: boolean;\n  isInvalid?: boolean;\n  id?: string;\n  className?: string;\n  \"aria-label\"?: string;\n  \"aria-describedby\"?: string;\n}\n\n/**\n * Free-text keywords. Enter or comma commits a tag, Backspace on an empty\n * input removes the last one. Tags are plain strings — never status tones.\n */\nexport const TagsInput = forwardRef<HTMLInputElement, TagsInputProps>(function TagsInput(\n  {\n    value,\n    defaultValue = [],\n    onValueChange,\n    placeholder = \"Add a tag\",\n    size = \"md\",\n    max,\n    isDisabled = false,\n    isInvalid = false,\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const [internal, setInternal] = useState<string[]>(defaultValue);\n  const current = value ?? internal;\n  const [draft, setDraft] = useState(\"\");\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const commit = (next: string[]) => {\n    if (value === undefined) setInternal(next);\n    onValueChange?.(next);\n  };\n\n  const add = (raw: string) => {\n    const tag = raw.trim();\n    if (!tag || current.includes(tag)) return;\n    if (max !== undefined && current.length >= max) return;\n    commit([...current, tag]);\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === \"Enter\" || event.key === \",\") {\n      event.preventDefault();\n      add(draft);\n      setDraft(\"\");\n    } else if (event.key === \"Backspace\" && draft === \"\" && current.length > 0) {\n      commit(current.slice(0, -1));\n    }\n  };\n\n  return (\n    <div\n      className={cx(\"ds-field-skin\", \"ds-tags\", className)}\n      data-size={size}\n      data-disabled={isDisabled || undefined}\n      aria-invalid={isInvalid || undefined}\n      onClick={() => inputRef.current?.focus()}\n    >\n      {current.map((tag) => (\n        <span key={tag} className=\"ds-tags__tag\">\n          {tag}\n          <Button\n            variant=\"simple\"\n            size=\"xs\"\n            isIconOnly\n            iconStart=\"x\"\n            aria-label={`Remove ${tag}`}\n            isDisabled={isDisabled}\n            onClick={(event) => {\n              event.stopPropagation();\n              commit(current.filter((item) => item !== tag));\n            }}\n          />\n        </span>\n      ))}\n      <input\n        ref={(node) => {\n          inputRef.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        type=\"text\"\n        className=\"ds-tags__input\"\n        value={draft}\n        placeholder={current.length === 0 ? placeholder : \"\"}\n        disabled={isDisabled}\n        onChange={(event) => setDraft(event.target.value)}\n        onKeyDown={onKeyDown}\n        onBlur={() => {\n          add(draft);\n          setDraft(\"\");\n        }}\n        {...rest}\n      />\n    </div>\n  );\n});\n"],"mappings":";;;;;AAMA,SAASA,EAAG,GAAGC,GAAuC;CACpD,OAAOA,EAAM,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AACvC;AAsBA,IAAaC,IAAYC,EAA6C,SACpE,EACE,UACA,kBAAe,CAAC,GAChB,kBACA,iBAAc,aACd,UAAO,MACP,QACA,gBAAa,IACb,eAAY,IACZ,cACA,GAAGC,KAEL,GACA;CACA,IAAM,CAACC,GAAUC,KAAeC,EAAmBC,CAAY,GACzDC,IAAUC,KAASL,GACnB,CAACM,GAAOC,KAAYL,EAAS,EAAE,GAC/BM,IAAWC,EAAgC,IAAI,GAE/CC,KAAU,MAAmB;EAEjC,AADIL,MAAU,KAAA,KAAWJ,EAAYU,CAAI,GACzCC,IAAgBD,CAAI;CACtB,GAEME,KAAO,MAAgB;EAC3B,IAAMC,IAAMC,EAAI,KAAK;EACrB,AAAKD,KAAO,GAAQ,SAASA,CAAG,MAC5BE,MAAQ,KAAA,KAAaZ,EAAQ,UAAUY,KAC3CN,EAAO,CAAC,GAAGN,GAASU,CAAG,CAAC;CAC1B;CAYA,OACE,kBAAC,OAAD;EACE,WAAWnB,EAAG,iBAAiB,WAAWsB,CAAS;EACnD,aAAWC;EACX,iBAAeC,KAAc,KAAA;EAC7B,gBAAcC,KAAa,KAAA;EAC3B,eAAeZ,EAAS,SAAS,MAAM;EALzC,UAAA,CAOGJ,EAAQ,KAAK,MACZ,kBAAC,QAAD;GAAgB,WAAU;GAA1B,UAAA,CACGU,GACD,kBAACO,GAAD;IACE,SAAQ;IACR,MAAK;IACL,YAAA;IACA,WAAU;IACV,cAAY,UAAUP;IACV;IACZ,UAAU,MAAU;KAElB,AADAQ,EAAM,gBAAgB,GACtBZ,EAAON,EAAQ,QAAQ,MAASmB,MAAST,CAAG,CAAC;IAC/C;GACD,CAAA,CACG;EAdK,GAAAA,CAcL,CACP,GACD,kBAAC,SAAD;GACE,MAAM,MAAS;IAEb,AADA,EAAS,UAAUU,GACf,OAAOC,KAAQ,aAAYA,EAAID,CAAI,IAC9BC,MAAK,EAAI,UAAUD;GAC9B;GACA,MAAK;GACL,WAAU;GACV,OAAOlB;GACP,aAAaF,EAAQ,WAAW,IAAIsB,IAAc;GAClD,UAAUP;GACV,WAAW,MAAUZ,EAASe,EAAM,OAAO,KAAK;GACrC,YA/CE,MAA2C;IAC5D,AAAIA,EAAM,QAAQ,WAAWA,EAAM,QAAQ,OACzCA,EAAM,eAAe,GACrBT,EAAIP,CAAK,GACTC,EAAS,EAAE,KACFe,EAAM,QAAQ,eAAehB,MAAU,MAAMF,EAAQ,SAAS,KACvEM,EAAON,EAAQ,MAAM,GAAG,EAAE,CAAC;GAE/B;GAwCM,cAAc;IAEZ,AADAS,EAAIP,CAAK,GACTC,EAAS,EAAE;GACb;GACA,GAAIR;EACL,CAAA,CACE;;AAET,CAAC"}