@mattermost/compass-ui 0.1.0-alpha.3 → 0.1.0-alpha.31

package/dist/components/switch/Switch.js

@@ -1,58 +1,60 @@
-import { jsxs as e, jsx as t } from "react/jsx-runtime";
-import { useId as g } from "react";
-import { useControllable as j } from "../../hooks/use-controllable.js";
-import { toKebab as k } from "../../utils/string.js";
+import { jsxs as e, jsx as l } from "react/jsx-runtime";
+import { forwardRef as j, useId as k } from "react";
+import { useControllable as y } from "../../hooks/use-controllable.js";
+import { toKebab as S } from "../../utils/string.js";
 import s from "./Switch.module.scss.js";
-function F({
-  className: c = "",
+const z = j(function({
+  className: n = "",
   size: r = "medium",
   children: a,
-  secondaryLabel: l,
-  semiBold: m = !1,
-  id: h,
+  secondaryLabel: t,
+  semiBold: h = !1,
+  id: m,
   checked: i,
   defaultChecked: o,
   disabled: d,
-  onChange: p,
-  ...u
-}) {
-  const w = g(), n = h ?? w, [_, f] = j(
+  onChange: w,
+  ...p
+}, u) {
+  const _ = k(), c = m ?? _, [f, N] = y(
     i,
     o,
-    p
-  ), b = s[`switch--size-${k(r)}`], C = m ? s["switch--semi-bold"] : "", N = l != null ? s["switch--with-secondary"] : "", x = [
+    w
+  ), b = s[`switch--size-${S(r)}`], C = h ? s["switch--semi-bold"] : "", x = t != null ? s["switch--with-secondary"] : "", g = [
     s.switch,
     b,
     C,
-    N,
-    c
+    x,
+    n
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e("label", { className: x, htmlFor: n, children: [
-    (a != null || l != null) && /* @__PURE__ */ e("span", { className: s.switch__labels, children: [
-      a != null && /* @__PURE__ */ t("span", { className: s.switch__label, children: a }),
-      l != null && /* @__PURE__ */ t("span", { className: s["switch__secondary-label"], children: l })
+  return /* @__PURE__ */ e("label", { className: g, htmlFor: c, children: [
+    (a != null || t != null) && /* @__PURE__ */ e("span", { className: s.switch__labels, children: [
+      a != null && /* @__PURE__ */ l("span", { className: s.switch__label, children: a }),
+      t != null && /* @__PURE__ */ l("span", { className: s["switch__secondary-label"], children: t })
     ] }),
-    /* @__PURE__ */ e("span", { className: s.switch__track, "aria-hidden": !0, children: [
-      /* @__PURE__ */ t(
+    /* @__PURE__ */ e("span", { className: s.switch__track, children: [
+      /* @__PURE__ */ l(
         "input",
         {
-          id: n,
+          ref: u,
+          id: c,
           type: "checkbox",
           role: "switch",
           className: s.switch__input,
           checked: i,
           defaultChecked: o,
           disabled: d,
-          "aria-checked": _,
-          onChange: f,
-          ...u
+          "aria-checked": f,
+          onChange: N,
+          ...p
         }
       ),
-      /* @__PURE__ */ t("span", { className: s.switch__knob })
+      /* @__PURE__ */ l("span", { className: s.switch__knob, "aria-hidden": !0 })
     ] })
   ] });
-}
+});
+z.displayName = "Switch";
 export {
-  F as default
+  z as default
 };
 //# sourceMappingURL=Switch.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../../../src/components/switch/Switch.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport { useId } from 'react';\nimport { useControllable } from '@/hooks/use-controllable';\nimport { toKebab } from '@/utils/string';\nimport styles from './Switch.module.scss';\n\nexport type SwitchSize = 'small' | 'medium' | 'large';\n\nexport interface SwitchProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Size variant. Figma: Small (16px), Medium (20px), Large (24px). Default: Medium. */\n  size?: SwitchSize;\n  /** Primary label content. Rendered to the left of the switch. */\n  children?: React.ReactNode;\n  /** Optional secondary label (e.g. description) below the primary label. */\n  secondaryLabel?: React.ReactNode;\n  /** When true, primary label uses semi-bold (600) weight. Default: false. */\n  semiBold?: boolean;\n}\n\n/**\n * A Switch is a real-world toggle: flip it, and the change happens. Use it for binary\n * settings that take effect immediately and don't need a separate \"Save\" step.\n */\nexport default function Switch({\n  className = '',\n  size = 'medium',\n  children,\n  secondaryLabel,\n  semiBold = false,\n  id: idProp,\n  checked,\n  defaultChecked,\n  disabled,\n  onChange,\n  ...rest\n}: SwitchProps) {\n  const generatedId = useId();\n  const id = idProp ?? generatedId;\n  const [resolvedChecked, handleChange] = useControllable(\n    checked,\n    defaultChecked,\n    onChange,\n  );\n\n  const sizeClass = styles[`switch--size-${toKebab(size)}`];\n  const semiBoldClass = semiBold ? styles['switch--semi-bold'] : '';\n  const secondaryClass =\n    secondaryLabel != null ? styles['switch--with-secondary'] : '';\n\n  const rootClass = [\n    styles.switch,\n    sizeClass,\n    semiBoldClass,\n    secondaryClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <label className={rootClass} htmlFor={id}>\n      {(children != null || secondaryLabel != null) && (\n        <span className={styles['switch__labels']}>\n          {children != null && (\n            <span className={styles['switch__label']}>{children}</span>\n          )}\n          {secondaryLabel != null && (\n            <span className={styles['switch__secondary-label']}>\n              {secondaryLabel}\n            </span>\n          )}\n        </span>\n      )}\n      <span className={styles['switch__track']} aria-hidden>\n        {/* Native checkbox (visually hidden via CSS); provides semantics, keyboard, and form support */}\n        <input\n          id={id}\n          type=\"checkbox\"\n          role=\"switch\"\n          className={styles['switch__input']}\n          checked={checked}\n          defaultChecked={defaultChecked}\n          disabled={disabled}\n          aria-checked={resolvedChecked}\n          onChange={handleChange}\n          {...rest}\n        />\n        <span className={styles['switch__knob']} />\n      </span>\n    </label>\n  );\n}\n"],"names":["Switch","className","size","children","secondaryLabel","semiBold","idProp","checked","defaultChecked","disabled","onChange","rest","generatedId","useId","id","resolvedChecked","handleChange","useControllable","sizeClass","styles","toKebab","semiBoldClass","secondaryClass","rootClass","jsxs","jsx"],"mappings":";;;;;AA4BA,SAAwBA,EAAO;AAAA,EAC7B,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,IAAIC;AAAA,EACJ,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GAAgB;AACd,QAAMC,IAAcC,EAAA,GACdC,IAAKR,KAAUM,GACf,CAACG,GAAiBC,CAAY,IAAIC;AAAA,IACtCV;AAAA,IACAC;AAAA,IACAE;AAAA,EAAA,GAGIQ,IAAYC,EAAO,gBAAgBC,EAAQlB,CAAI,CAAC,EAAE,GAClDmB,IAAgBhB,IAAWc,EAAO,mBAAmB,IAAI,IACzDG,IACJlB,KAAkB,OAAOe,EAAO,wBAAwB,IAAI,IAExDI,IAAY;AAAA,IAChBJ,EAAO;AAAA,IACPD;AAAA,IACAG;AAAA,IACAC;AAAA,IACArB;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAuB,EAAC,SAAA,EAAM,WAAWD,GAAW,SAAST,GAClC,UAAA;AAAA,KAAAX,KAAY,QAAQC,KAAkB,SACtC,gBAAAoB,EAAC,UAAK,WAAWL,EAAO,gBACrB,UAAA;AAAA,MAAAhB,KAAY,QACX,gBAAAsB,EAAC,QAAA,EAAK,WAAWN,EAAO,eAAmB,UAAAhB,GAAS;AAAA,MAErDC,KAAkB,QACjB,gBAAAqB,EAAC,QAAA,EAAK,WAAWN,EAAO,yBAAyB,GAC9C,UAAAf,EAAA,CACH;AAAA,IAAA,GAEJ;AAAA,sBAED,QAAA,EAAK,WAAWe,EAAO,eAAkB,eAAW,IAEnD,UAAA;AAAA,MAAA,gBAAAM;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAAX;AAAA,UACA,MAAK;AAAA,UACL,MAAK;AAAA,UACL,WAAWK,EAAO;AAAA,UAClB,SAAAZ;AAAA,UACA,gBAAAC;AAAA,UACA,UAAAC;AAAA,UACA,gBAAcM;AAAA,UACd,UAAUC;AAAA,UACT,GAAGL;AAAA,QAAA;AAAA,MAAA;AAAA,MAEN,gBAAAc,EAAC,QAAA,EAAK,WAAWN,EAAO,aAAc,CAAG;AAAA,IAAA,EAAA,CAC3C;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"Switch.js","sources":["../../../src/components/switch/Switch.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport { forwardRef, useId } from 'react';\nimport { useControllable } from '@/hooks/use-controllable';\nimport { toKebab } from '@/utils/string';\nimport styles from './Switch.module.scss';\n\nexport type SwitchSize = 'small' | 'medium' | 'large';\n\nexport interface SwitchProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Size variant. Figma: Small (16px), Medium (20px), Large (24px). Default: Medium. */\n  size?: SwitchSize;\n  /** Primary label content. Rendered to the left of the switch. */\n  children?: React.ReactNode;\n  /** Optional secondary label (e.g. description) below the primary label. */\n  secondaryLabel?: React.ReactNode;\n  /** When true, primary label uses semi-bold (600) weight. Default: false. */\n  semiBold?: boolean;\n}\n\n/**\n * A Switch is a real-world toggle: flip it, and the change happens. Use it for binary\n * settings that take effect immediately and don't need a separate \"Save\" step.\n */\nconst Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(\n  {\n    className = '',\n    size = 'medium',\n    children,\n    secondaryLabel,\n    semiBold = false,\n    id: idProp,\n    checked,\n    defaultChecked,\n    disabled,\n    onChange,\n    ...rest\n  },\n  ref,\n) {\n  const generatedId = useId();\n  const id = idProp ?? generatedId;\n  const [resolvedChecked, handleChange] = useControllable(\n    checked,\n    defaultChecked,\n    onChange,\n  );\n\n  const sizeClass = styles[`switch--size-${toKebab(size)}`];\n  const semiBoldClass = semiBold ? styles['switch--semi-bold'] : '';\n  const secondaryClass =\n    secondaryLabel != null ? styles['switch--with-secondary'] : '';\n\n  const rootClass = [\n    styles.switch,\n    sizeClass,\n    semiBoldClass,\n    secondaryClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <label className={rootClass} htmlFor={id}>\n      {(children != null || secondaryLabel != null) && (\n        <span className={styles['switch__labels']}>\n          {children != null && (\n            <span className={styles['switch__label']}>{children}</span>\n          )}\n          {secondaryLabel != null && (\n            <span className={styles['switch__secondary-label']}>\n              {secondaryLabel}\n            </span>\n          )}\n        </span>\n      )}\n      <span className={styles['switch__track']}>\n        <input\n          ref={ref}\n          id={id}\n          type=\"checkbox\"\n          role=\"switch\"\n          className={styles['switch__input']}\n          checked={checked}\n          defaultChecked={defaultChecked}\n          disabled={disabled}\n          aria-checked={resolvedChecked}\n          onChange={handleChange}\n          {...rest}\n        />\n        <span className={styles['switch__knob']} aria-hidden />\n      </span>\n    </label>\n  );\n});\n\nSwitch.displayName = 'Switch';\n\nexport default Switch;\n"],"names":["Switch","forwardRef","className","size","children","secondaryLabel","semiBold","idProp","checked","defaultChecked","disabled","onChange","rest","ref","generatedId","useId","id","resolvedChecked","handleChange","useControllable","sizeClass","styles","toKebab","semiBoldClass","secondaryClass","rootClass","jsxs","jsx"],"mappings":";;;;;AA4BA,MAAMA,IAASC,EAA0C,SACvD;AAAA,EACE,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,IAAIC;AAAA,EACJ,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAcC,EAAA,GACdC,IAAKT,KAAUO,GACf,CAACG,GAAiBC,CAAY,IAAIC;AAAA,IACtCX;AAAA,IACAC;AAAA,IACAE;AAAA,EAAA,GAGIS,IAAYC,EAAO,gBAAgBC,EAAQnB,CAAI,CAAC,EAAE,GAClDoB,IAAgBjB,IAAWe,EAAO,mBAAmB,IAAI,IACzDG,IACJnB,KAAkB,OAAOgB,EAAO,wBAAwB,IAAI,IAExDI,IAAY;AAAA,IAChBJ,EAAO;AAAA,IACPD;AAAA,IACAG;AAAA,IACAC;AAAA,IACAtB;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAwB,EAAC,SAAA,EAAM,WAAWD,GAAW,SAAST,GAClC,UAAA;AAAA,KAAAZ,KAAY,QAAQC,KAAkB,SACtC,gBAAAqB,EAAC,UAAK,WAAWL,EAAO,gBACrB,UAAA;AAAA,MAAAjB,KAAY,QACX,gBAAAuB,EAAC,QAAA,EAAK,WAAWN,EAAO,eAAmB,UAAAjB,GAAS;AAAA,MAErDC,KAAkB,QACjB,gBAAAsB,EAAC,QAAA,EAAK,WAAWN,EAAO,yBAAyB,GAC9C,UAAAhB,EAAA,CACH;AAAA,IAAA,GAEJ;AAAA,IAEF,gBAAAqB,EAAC,QAAA,EAAK,WAAWL,EAAO,eACtB,UAAA;AAAA,MAAA,gBAAAM;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAAd;AAAA,UACA,IAAAG;AAAA,UACA,MAAK;AAAA,UACL,MAAK;AAAA,UACL,WAAWK,EAAO;AAAA,UAClB,SAAAb;AAAA,UACA,gBAAAC;AAAA,UACA,UAAAC;AAAA,UACA,gBAAcO;AAAA,UACd,UAAUC;AAAA,UACT,GAAGN;AAAA,QAAA;AAAA,MAAA;AAAA,wBAEL,QAAA,EAAK,WAAWS,EAAO,cAAiB,eAAW,GAAA,CAAC;AAAA,IAAA,EAAA,CACvD;AAAA,EAAA,GACF;AAEJ,CAAC;AAEDrB,EAAO,cAAc;"}

package/dist/components/switch/Switch.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Switch.module.css');const _="_switch__input_11cfw_12",s="_switch__labels_11cfw_33",c="_switch__label_11cfw_33",t="_switch__track_11cfw_47",i="_switch__knob_11cfw_77",w={switch:"_switch_11cfw_2",switch__input:_,"switch__secondary-label":"_switch__secondary-label_11cfw_16",switch__labels:s,switch__label:c,switch__track:t,switch__knob:i,"switch--size-small":"_switch--size-small_11cfw_88","switch--size-medium":"_switch--size-medium_11cfw_107","switch--size-large":"_switch--size-large_11cfw_126","switch--semi-bold":"_switch--semi-bold_11cfw_145","switch--with-secondary":"_switch--with-secondary_11cfw_148"};exports.default=w;exports.switch__input=_;exports.switch__knob=i;exports.switch__label=c;exports.switch__labels=s;exports.switch__track=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Switch.css');const _="_switch__input_fs0k8_27",s="_switch__labels_fs0k8_48",t="_switch__label_fs0k8_48",i="_switch__track_fs0k8_62",c="_switch__knob_fs0k8_92",e={switch:"_switch_fs0k8_13",switch__input:_,"switch__secondary-label":"_switch__secondary-label_fs0k8_31",switch__labels:s,switch__label:t,switch__track:i,switch__knob:c,"switch--size-small":"_switch--size-small_fs0k8_103","switch--size-medium":"_switch--size-medium_fs0k8_122","switch--size-large":"_switch--size-large_fs0k8_141","switch--semi-bold":"_switch--semi-bold_fs0k8_160","switch--with-secondary":"_switch--with-secondary_fs0k8_163"};exports.default=e;exports.switch__input=_;exports.switch__knob=c;exports.switch__label=t;exports.switch__labels=s;exports.switch__track=i;
 //# sourceMappingURL=Switch.module.scss.cjs.map

package/dist/components/switch/Switch.module.scss.js

@@ -1,23 +1,23 @@
-import './Switch.module.css';const _ = "_switch__input_11cfw_12", s = "_switch__labels_11cfw_33", c = "_switch__label_11cfw_33", t = "_switch__track_11cfw_47", i = "_switch__knob_11cfw_77", w = {
-  switch: "_switch_11cfw_2",
+import './Switch.css';const _ = "_switch__input_fs0k8_27", s = "_switch__labels_fs0k8_48", t = "_switch__label_fs0k8_48", i = "_switch__track_fs0k8_62", c = "_switch__knob_fs0k8_92", h = {
+  switch: "_switch_fs0k8_13",
   switch__input: _,
-  "switch__secondary-label": "_switch__secondary-label_11cfw_16",
+  "switch__secondary-label": "_switch__secondary-label_fs0k8_31",
   switch__labels: s,
-  switch__label: c,
-  switch__track: t,
-  switch__knob: i,
-  "switch--size-small": "_switch--size-small_11cfw_88",
-  "switch--size-medium": "_switch--size-medium_11cfw_107",
-  "switch--size-large": "_switch--size-large_11cfw_126",
-  "switch--semi-bold": "_switch--semi-bold_11cfw_145",
-  "switch--with-secondary": "_switch--with-secondary_11cfw_148"
+  switch__label: t,
+  switch__track: i,
+  switch__knob: c,
+  "switch--size-small": "_switch--size-small_fs0k8_103",
+  "switch--size-medium": "_switch--size-medium_fs0k8_122",
+  "switch--size-large": "_switch--size-large_fs0k8_141",
+  "switch--semi-bold": "_switch--semi-bold_fs0k8_160",
+  "switch--with-secondary": "_switch--with-secondary_fs0k8_163"
 };
 export {
-  w as default,
+  h as default,
   _ as switch__input,
-  i as switch__knob,
-  c as switch__label,
+  c as switch__knob,
+  t as switch__label,
   s as switch__labels,
-  t as switch__track
+  i as switch__track
 };
 //# sourceMappingURL=Switch.module.scss.js.map

package/dist/components/tabs/Tabs.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),e=require("./Tabs.module.scss.cjs");function r({tabs:n,activeKey:d,onChange:u,className:i="",controls:l}){const o=[e.default.tabs,i].filter(Boolean).join(" ");return s.jsxs("div",{className:o,children:[s.jsx("div",{className:e.default["tabs__tab-list"],role:"tablist",children:n.map(a=>{const t=a.key===d,c=[e.default.tabs__tab,t?e.default["tabs__tab--active"]:""].filter(Boolean).join(" ");return s.jsxs("button",{role:"tab",type:"button","aria-selected":t,className:c,onClick:()=>u(a.key),children:[s.jsx("span",{className:e.default["tabs__tab-label"],children:a.label}),a.countBadge!=null&&s.jsx("span",{className:[e.default["tabs__count-badge"],t?e.default["tabs__count-badge--active"]:""].filter(Boolean).join(" "),children:a.countBadge}),a.unreadBadge&&!t&&s.jsx("span",{className:e.default["tabs__unread-badge"],"aria-label":"Unread"})]},a.key)})}),l!=null&&s.jsx("div",{className:e.default.tabs__controls,children:l})]})}exports.default=r;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),i=require("react"),q=require("../../utils/string.cjs"),t=require("./Tabs.module.scss.cjs");function E({tabs:c,activeKey:o,onChange:b,className:g="",controls:_,unreadLabel:D="Unread",appearance:p="default",...h}){const N=[t.default.tabs,p!=="default"?t.default[`tabs--appearance-${q.toKebab(p)}`]:"",g].filter(Boolean).join(" "),m=i.useRef([]),[y,f]=i.useState(o);i.useEffect(()=>{f(o)},[o]);const B=c.map(e=>e.key),l=c.filter(e=>!e.disabled).map(e=>e.key),w=l.includes(y)?y:l.includes(o)?o:l[0],r=e=>{var s;f(e);const u=B.indexOf(e);(s=m.current[u])==null||s.focus()},P=(e,u)=>{const s=l.length;if(s===0)return;const a=l.indexOf(u);e.key==="ArrowRight"?(e.preventDefault(),r(l[(a+1)%s])):e.key==="ArrowLeft"?(e.preventDefault(),r(l[a<0?s-1:(a-1+s)%s])):e.key==="Home"?(e.preventDefault(),r(l[0])):e.key==="End"?(e.preventDefault(),r(l[s-1])):(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),a>=0&&b(u))};return n.jsxs("div",{...h,className:N,children:[n.jsx("div",{className:t.default["tabs__tab-list"],role:"tablist",children:c.map((e,u)=>{var k,x,j;const s=e.key===o,a=e.disabled===!0,R=[t.default.tabs__tab,s?t.default["tabs__tab--active"]:"",a?t.default["tabs__tab--disabled"]:"",(k=e.buttonProps)==null?void 0:k.className].filter(Boolean).join(" ");return i.createElement("button",{...e.buttonProps,key:e.key,ref:d=>{m.current[u]=d},id:e.id??((x=e.buttonProps)==null?void 0:x.id),role:"tab",type:"button",tabIndex:w===e.key?0:-1,"aria-selected":s,"aria-controls":e.panelId,"aria-disabled":a||void 0,title:e.title??((j=e.buttonProps)==null?void 0:j.title),className:R,onMouseDown:a?d=>d.preventDefault():void 0,onClick:()=>{a||(f(e.key),b(e.key))},onKeyDown:d=>P(d,e.key)},n.jsx("span",{className:t.default["tabs__tab-label"],children:e.label}),e.countBadge!=null&&n.jsx("span",{className:[t.default["tabs__count-badge"],s?t.default["tabs__count-badge--active"]:""].filter(Boolean).join(" "),children:e.countBadge}),e.unreadBadge&&!s&&n.jsx("span",{className:t.default["tabs__unread-badge"],children:n.jsx("span",{className:t.default["tabs__unread-label"],children:D})}))})}),_!=null&&n.jsx("div",{className:t.default.tabs__controls,children:_})]})}exports.default=E;
 //# sourceMappingURL=Tabs.cjs.map

package/dist/components/tabs/Tabs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.cjs","sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styles from './Tabs.module.scss';\n\nexport interface TabItem {\n  /** Unique key for this tab. */\n  key: string;\n  /** Tab label text. */\n  label: string;\n  /** Optional count badge number. */\n  countBadge?: number;\n  /** When true, shows an unread dot badge. */\n  unreadBadge?: boolean;\n}\n\nexport interface TabsProps {\n  /** Array of tab items to display. */\n  tabs: TabItem[];\n  /** Key of the currently active tab. */\n  activeKey: string;\n  /** Called when a tab is selected. */\n  onChange: (key: string) => void;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Optional trailing controls rendered to the right of the tabs. */\n  controls?: ReactNode;\n}\n\n/**\n * Tabs let people switch between sibling views inside the same surface — Mentions in the\n * right sidebar, sections of a settings panel, or filters on a list. The content area\n * changes; the surrounding chrome doesn't.\n */\nexport default function Tabs({\n  tabs,\n  activeKey,\n  onChange,\n  className = '',\n  controls,\n}: TabsProps) {\n  const rootClass = [styles.tabs, className].filter(Boolean).join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['tabs__tab-list']} role=\"tablist\">\n        {tabs.map((tab) => {\n          const isActive = tab.key === activeKey;\n          const tabClass = [\n            styles['tabs__tab'],\n            isActive ? styles['tabs__tab--active'] : '',\n          ]\n            .filter(Boolean)\n            .join(' ');\n\n          return (\n            <button\n              key={tab.key}\n              role=\"tab\"\n              type=\"button\"\n              aria-selected={isActive}\n              className={tabClass}\n              onClick={() => onChange(tab.key)}\n            >\n              <span className={styles['tabs__tab-label']}>{tab.label}</span>\n\n              {tab.countBadge != null && (\n                <span\n                  className={[\n                    styles['tabs__count-badge'],\n                    isActive ? styles['tabs__count-badge--active'] : '',\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                >\n                  {tab.countBadge}\n                </span>\n              )}\n\n              {tab.unreadBadge && !isActive && (\n                <span\n                  className={styles['tabs__unread-badge']}\n                  aria-label=\"Unread\"\n                />\n              )}\n            </button>\n          );\n        })}\n      </div>\n\n      {controls != null && (\n        <div className={styles['tabs__controls']}>{controls}</div>\n      )}\n    </div>\n  );\n}\n"],"names":["Tabs","tabs","activeKey","onChange","className","controls","rootClass","styles","jsxs","jsx","tab","isActive","tabClass"],"mappings":"qLAgCA,SAAwBA,EAAK,CAC3B,KAAAC,EACA,UAAAC,EACA,SAAAC,EACA,UAAAC,EAAY,GACZ,SAAAC,CACF,EAAc,CACZ,MAAMC,EAAY,CAACC,EAAAA,QAAO,KAAMH,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAEnE,OACEI,EAAAA,KAAC,MAAA,CAAI,UAAWF,EACd,SAAA,CAAAG,EAAAA,IAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,gBAAgB,EAAG,KAAK,UAC5C,SAAAN,EAAK,IAAKS,GAAQ,CACjB,MAAMC,EAAWD,EAAI,MAAQR,EACvBU,EAAW,CACfL,EAAAA,QAAO,UACPI,EAAWJ,EAAAA,QAAO,mBAAmB,EAAI,EAAA,EAExC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEC,EAAAA,KAAC,SAAA,CAEC,KAAK,MACL,KAAK,SACL,gBAAeG,EACf,UAAWC,EACX,QAAS,IAAMT,EAASO,EAAI,GAAG,EAE/B,SAAA,CAAAD,MAAC,QAAK,UAAWF,EAAAA,QAAO,iBAAiB,EAAI,WAAI,MAAM,EAEtDG,EAAI,YAAc,MACjBD,EAAAA,IAAC,OAAA,CACC,UAAW,CACTF,EAAAA,QAAO,mBAAmB,EAC1BI,EAAWJ,EAAAA,QAAO,2BAA2B,EAAI,EAAA,EAEhD,OAAO,OAAO,EACd,KAAK,GAAG,EAEV,SAAAG,EAAI,UAAA,CAAA,EAIRA,EAAI,aAAe,CAACC,GACnBF,EAAAA,IAAC,OAAA,CACC,UAAWF,EAAAA,QAAO,oBAAoB,EACtC,aAAW,QAAA,CAAA,CACb,CAAA,EA1BGG,EAAI,GAAA,CA8Bf,CAAC,CAAA,CACH,EAECL,GAAY,MACXI,EAAAA,IAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,eAAoB,SAAAF,CAAA,CAAS,CAAA,EAExD,CAEJ"}
+{"version":3,"file":"Tabs.cjs","sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import {\n  useEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { toKebab } from '@/utils/string';\nimport styles from './Tabs.module.scss';\n\nexport type TabsAppearance = 'default' | 'underlined';\n\nexport interface TabItem {\n  /** Unique key for this tab. */\n  key: string;\n  /** Tab label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  /** Optional count badge number. */\n  countBadge?: number;\n  /** When true, shows an unread dot badge. */\n  unreadBadge?: boolean;\n  /** Optional id for this tab (pair with `panelId` for `aria-controls`). */\n  id?: string;\n  /** Optional id of the host tabpanel this tab controls. */\n  panelId?: string;\n  /** When true, the tab can't be selected and arrow-key navigation skips it. */\n  disabled?: boolean;\n  /** Native tooltip text, e.g. to explain why the tab is disabled. */\n  title?: string;\n  /**\n   * Extra attributes for this tab's `<button>` (e.g. `data-testid`). Tab\n   * semantics (`role`, `aria-selected`, `tabIndex`, handlers) take precedence.\n   */\n  buttonProps?: BuiltInButtonProps;\n}\n\nexport interface TabsProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange'\n> {\n  /** Array of tab items to display. */\n  tabs: TabItem[];\n  /** Key of the currently active tab. */\n  activeKey: string;\n  /** Called when a tab is selected. */\n  onChange: (key: string) => void;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Optional trailing controls rendered to the right of the tabs. */\n  controls?: ReactNode;\n  /** Visual style. `underlined` shows a bottom rule with an indicator under the active tab. Default: `default`. */\n  appearance?: TabsAppearance;\n  /** Visually hidden text announced with a tab's unread dot. Default: \"Unread\". */\n  unreadLabel?: ReactNode;\n}\n\n/**\n * Tabs let people switch between sibling views inside the same surface — Mentions in the\n * right sidebar, sections of a settings panel, or filters on a list. The content area\n * changes; the surrounding chrome doesn't.\n */\nexport default function Tabs({\n  tabs,\n  activeKey,\n  onChange,\n  className = '',\n  controls,\n  unreadLabel = 'Unread',\n  appearance = 'default',\n  ...rest\n}: TabsProps) {\n  const rootClass = [\n    styles.tabs,\n    appearance !== 'default'\n      ? styles[`tabs--appearance-${toKebab(appearance)}`]\n      : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n  const tabRefs = useRef<Array<HTMLButtonElement | null>>([]);\n  const [focusedKey, setFocusedKey] = useState(activeKey);\n\n  useEffect(() => {\n    setFocusedKey(activeKey);\n  }, [activeKey]);\n\n  const keys = tabs.map((tab) => tab.key);\n  const enabledKeys = tabs.filter((tab) => !tab.disabled).map((tab) => tab.key);\n  const focusKey = enabledKeys.includes(focusedKey)\n    ? focusedKey\n    : enabledKeys.includes(activeKey)\n      ? activeKey\n      : enabledKeys[0];\n\n  const moveFocus = (key: string) => {\n    setFocusedKey(key);\n    const index = keys.indexOf(key);\n    tabRefs.current[index]?.focus();\n  };\n\n  const handleKeyDown = (\n    event: KeyboardEvent<HTMLButtonElement>,\n    key: string,\n  ) => {\n    const count = enabledKeys.length;\n    if (count === 0) return;\n    const index = enabledKeys.indexOf(key);\n\n    if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      moveFocus(enabledKeys[(index + 1) % count]);\n    } else if (event.key === 'ArrowLeft') {\n      event.preventDefault();\n      moveFocus(\n        enabledKeys[index < 0 ? count - 1 : (index - 1 + count) % count],\n      );\n    } else if (event.key === 'Home') {\n      event.preventDefault();\n      moveFocus(enabledKeys[0]);\n    } else if (event.key === 'End') {\n      event.preventDefault();\n      moveFocus(enabledKeys[count - 1]);\n    } else if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      if (index >= 0) onChange(key);\n    }\n  };\n\n  return (\n    <div {...rest} className={rootClass}>\n      <div className={styles['tabs__tab-list']} role=\"tablist\">\n        {tabs.map((tab, index) => {\n          const isActive = tab.key === activeKey;\n          const isDisabled = tab.disabled === true;\n          const tabClass = [\n            styles['tabs__tab'],\n            isActive ? styles['tabs__tab--active'] : '',\n            isDisabled ? styles['tabs__tab--disabled'] : '',\n            tab.buttonProps?.className,\n          ]\n            .filter(Boolean)\n            .join(' ');\n\n          return (\n            <button\n              {...tab.buttonProps}\n              key={tab.key}\n              ref={(node) => {\n                tabRefs.current[index] = node;\n              }}\n              id={tab.id ?? tab.buttonProps?.id}\n              role=\"tab\"\n              type=\"button\"\n              tabIndex={focusKey === tab.key ? 0 : -1}\n              aria-selected={isActive}\n              aria-controls={tab.panelId}\n              aria-disabled={isDisabled || undefined}\n              title={tab.title ?? tab.buttonProps?.title}\n              className={tabClass}\n              onMouseDown={\n                isDisabled ? (event) => event.preventDefault() : undefined\n              }\n              onClick={() => {\n                if (isDisabled) return;\n                setFocusedKey(tab.key);\n                onChange(tab.key);\n              }}\n              onKeyDown={(event) => handleKeyDown(event, tab.key)}\n            >\n              <span className={styles['tabs__tab-label']}>{tab.label}</span>\n\n              {tab.countBadge != null && (\n                <span\n                  className={[\n                    styles['tabs__count-badge'],\n                    isActive ? styles['tabs__count-badge--active'] : '',\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                >\n                  {tab.countBadge}\n                </span>\n              )}\n\n              {tab.unreadBadge && !isActive && (\n                <span className={styles['tabs__unread-badge']}>\n                  <span className={styles['tabs__unread-label']}>\n                    {unreadLabel}\n                  </span>\n                </span>\n              )}\n            </button>\n          );\n        })}\n      </div>\n\n      {controls != null && (\n        <div className={styles['tabs__controls']}>{controls}</div>\n      )}\n    </div>\n  );\n}\n"],"names":["Tabs","tabs","activeKey","onChange","className","controls","unreadLabel","appearance","rest","rootClass","styles","toKebab","tabRefs","useRef","focusedKey","setFocusedKey","useState","useEffect","keys","tab","enabledKeys","focusKey","moveFocus","key","index","_a","handleKeyDown","event","count","jsxs","jsx","isActive","isDisabled","tabClass","createElement","node","_b","_c"],"mappings":"4OA+DA,SAAwBA,EAAK,CAC3B,KAAAC,EACA,UAAAC,EACA,SAAAC,EACA,UAAAC,EAAY,GACZ,SAAAC,EACA,YAAAC,EAAc,SACd,WAAAC,EAAa,UACb,GAAGC,CACL,EAAc,CACZ,MAAMC,EAAY,CAChBC,EAAAA,QAAO,KACPH,IAAe,UACXG,EAAAA,QAAO,oBAAoBC,EAAAA,QAAQJ,CAAU,CAAC,EAAE,EAChD,GACJH,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EACLQ,EAAUC,EAAAA,OAAwC,EAAE,EACpD,CAACC,EAAYC,CAAa,EAAIC,EAAAA,SAASd,CAAS,EAEtDe,EAAAA,UAAU,IAAM,CACdF,EAAcb,CAAS,CACzB,EAAG,CAACA,CAAS,CAAC,EAEd,MAAMgB,EAAOjB,EAAK,IAAKkB,GAAQA,EAAI,GAAG,EAChCC,EAAcnB,EAAK,OAAQkB,GAAQ,CAACA,EAAI,QAAQ,EAAE,IAAKA,GAAQA,EAAI,GAAG,EACtEE,EAAWD,EAAY,SAASN,CAAU,EAC5CA,EACAM,EAAY,SAASlB,CAAS,EAC5BA,EACAkB,EAAY,CAAC,EAEbE,EAAaC,GAAgB,OACjCR,EAAcQ,CAAG,EACjB,MAAMC,EAAQN,EAAK,QAAQK,CAAG,GAC9BE,EAAAb,EAAQ,QAAQY,CAAK,IAArB,MAAAC,EAAwB,OAC1B,EAEMC,EAAgB,CACpBC,EACAJ,IACG,CACH,MAAMK,EAAQR,EAAY,OAC1B,GAAIQ,IAAU,EAAG,OACjB,MAAMJ,EAAQJ,EAAY,QAAQG,CAAG,EAEjCI,EAAM,MAAQ,cAChBA,EAAM,eAAA,EACNL,EAAUF,GAAaI,EAAQ,GAAKI,CAAK,CAAC,GACjCD,EAAM,MAAQ,aACvBA,EAAM,eAAA,EACNL,EACEF,EAAYI,EAAQ,EAAII,EAAQ,GAAKJ,EAAQ,EAAII,GAASA,CAAK,CAAA,GAExDD,EAAM,MAAQ,QACvBA,EAAM,eAAA,EACNL,EAAUF,EAAY,CAAC,CAAC,GACfO,EAAM,MAAQ,OACvBA,EAAM,eAAA,EACNL,EAAUF,EAAYQ,EAAQ,CAAC,CAAC,IACvBD,EAAM,MAAQ,SAAWA,EAAM,MAAQ,OAChDA,EAAM,eAAA,EACFH,GAAS,GAAGrB,EAASoB,CAAG,EAEhC,EAEA,OACEM,EAAAA,KAAC,MAAA,CAAK,GAAGrB,EAAM,UAAWC,EACxB,SAAA,CAAAqB,EAAAA,IAAC,MAAA,CAAI,UAAWpB,EAAAA,QAAO,gBAAgB,EAAG,KAAK,UAC5C,SAAAT,EAAK,IAAI,CAACkB,EAAKK,IAAU,WACxB,MAAMO,EAAWZ,EAAI,MAAQjB,EACvB8B,EAAab,EAAI,WAAa,GAC9Bc,EAAW,CACfvB,EAAAA,QAAO,UACPqB,EAAWrB,EAAAA,QAAO,mBAAmB,EAAI,GACzCsB,EAAatB,EAAAA,QAAO,qBAAqB,EAAI,IAC7Ce,EAAAN,EAAI,cAAJ,YAAAM,EAAiB,SAAA,EAEhB,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACES,EAAAA,cAAC,SAAA,CACE,GAAGf,EAAI,YACR,IAAKA,EAAI,IACT,IAAMgB,GAAS,CACbvB,EAAQ,QAAQY,CAAK,EAAIW,CAC3B,EACA,GAAIhB,EAAI,MAAMiB,EAAAjB,EAAI,cAAJ,YAAAiB,EAAiB,IAC/B,KAAK,MACL,KAAK,SACL,SAAUf,IAAaF,EAAI,IAAM,EAAI,GACrC,gBAAeY,EACf,gBAAeZ,EAAI,QACnB,gBAAea,GAAc,OAC7B,MAAOb,EAAI,SAASkB,EAAAlB,EAAI,cAAJ,YAAAkB,EAAiB,OACrC,UAAWJ,EACX,YACED,EAAcL,GAAUA,EAAM,iBAAmB,OAEnD,QAAS,IAAM,CACTK,IACJjB,EAAcI,EAAI,GAAG,EACrBhB,EAASgB,EAAI,GAAG,EAClB,EACA,UAAYQ,GAAUD,EAAcC,EAAOR,EAAI,GAAG,CAAA,QAEjD,OAAA,CAAK,UAAWT,EAAAA,QAAO,iBAAiB,EAAI,WAAI,MAAM,EAEtDS,EAAI,YAAc,MACjBW,EAAAA,IAAC,OAAA,CACC,UAAW,CACTpB,EAAAA,QAAO,mBAAmB,EAC1BqB,EAAWrB,EAAAA,QAAO,2BAA2B,EAAI,EAAA,EAEhD,OAAO,OAAO,EACd,KAAK,GAAG,EAEV,SAAAS,EAAI,UAAA,CAAA,EAIRA,EAAI,aAAe,CAACY,GACnBD,EAAAA,IAAC,QAAK,UAAWpB,EAAAA,QAAO,oBAAoB,EAC1C,eAAC,OAAA,CAAK,UAAWA,EAAAA,QAAO,oBAAoB,EACzC,WACH,CAAA,CACF,CAAA,CAIR,CAAC,CAAA,CACH,EAECL,GAAY,MACXyB,EAAAA,IAAC,MAAA,CAAI,UAAWpB,EAAAA,QAAO,eAAoB,SAAAL,CAAA,CAAS,CAAA,EAExD,CAEJ"}

package/dist/components/tabs/Tabs.css

@@ -0,0 +1 @@
+._tabs_13rrk_13{display:flex;align-items:center;justify-content:space-between}._tabs__tab-list_13rrk_18{display:flex;align-items:flex-start;gap:var(--spacing-xxs)}._tabs__tab_13rrk_18{position:relative;display:flex;flex-direction:row;align-items:center;gap:var(--spacing-xs);border-radius:var(--radius-s);background:transparent;border:none;cursor:pointer;padding:var(--spacing-xxs) var(--spacing-s);outline:none}._tabs__tab_13rrk_18:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:3px;animation:_focus-ring-in_13rrk_1 var(--duration-quick) var(--ease-transition)}@media(prefers-reduced-motion:reduce){._tabs__tab_13rrk_18:focus-visible{animation:none}}._tabs__tab_13rrk_18:not(._-host-shadow-a_13rrk_46):not(._-host-shadow-b_13rrk_46){box-shadow:none;border-radius:var(--radius-s)}@keyframes _focus-ring-in_13rrk_1{0%{outline-color:transparent;outline-offset:0}}._tabs__tab_13rrk_18:is(:hover,:focus-visible):not(._tabs__tab--active_13rrk_56):not(._tabs__tab--disabled_13rrk_56){background-color:rgba(var(--center-channel-color-rgb),.08)}._tabs__tab--active_13rrk_56{background-color:rgba(var(--link-color-rgb),.08)}._tabs__tab--active_13rrk_56 ._tabs__tab-label_13rrk_62{color:var(--link-color)}._tabs__tab--active_13rrk_56 ._tabs__count-badge_13rrk_65{background-color:rgba(var(--link-color-rgb),.12);color:var(--link-color)}._tabs__tab--disabled_13rrk_56{cursor:not-allowed}._tabs__tab--disabled_13rrk_56 ._tabs__tab-label_13rrk_62,._tabs__tab--disabled_13rrk_56 ._tabs__count-badge_13rrk_65{color:rgba(var(--center-channel-color-rgb),.4)}._tabs__tab-label_13rrk_62{display:flex;align-items:center;font-size:var(--font-size-100);font-weight:var(--font-weight-semibold);line-height:var(--line-height-100);color:rgba(var(--center-channel-color-rgb),.64);white-space:nowrap}._tabs__count-badge_13rrk_65{display:inline-flex;align-items:center;justify-content:center;padding:2.5px var(--spacing-xxs);border-radius:var(--radius-m);background-color:rgba(var(--center-channel-color-rgb),.08);font-size:var(--font-size-25);font-weight:var(--font-weight-semibold);line-height:11px;color:rgba(var(--center-channel-color-rgb),.64);flex-shrink:0}._tabs__count-badge--active_13rrk_98{background-color:rgba(var(--link-color-rgb),.12);color:var(--link-color)}._tabs__unread-badge_13rrk_102{flex-shrink:0;width:4px;height:4px;border-radius:var(--radius-pill);background-color:var(--button-bg)}._tabs__unread-label_13rrk_109{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._tabs__controls_13rrk_120{display:flex;align-items:center;gap:var(--spacing-xxs);flex-shrink:0}._tabs--appearance-underlined_13rrk_126{align-items:stretch;box-shadow:inset 0 -1px rgba(var(--center-channel-color-rgb),.12)}._tabs--appearance-underlined_13rrk_126 ._tabs__tab-list_13rrk_18{gap:var(--spacing-xs)}._tabs--appearance-underlined_13rrk_126 ._tabs__tab_13rrk_18:not(._-host-shadow-a_13rrk_46):not(._-host-shadow-b_13rrk_46){border-radius:0;padding:var(--spacing-s) var(--spacing-xs)}._tabs--appearance-underlined_13rrk_126 ._tabs__tab_13rrk_18:not(._-host-shadow-a_13rrk_46):not(._-host-shadow-b_13rrk_46):after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background-color:transparent}._tabs--appearance-underlined_13rrk_126 ._tabs__tab_13rrk_18:not(._-host-shadow-a_13rrk_46):not(._-host-shadow-b_13rrk_46):is(:hover,:focus-visible):not(._tabs__tab--active_13rrk_56):not(._tabs__tab--disabled_13rrk_56){background-color:transparent}._tabs--appearance-underlined_13rrk_126 ._tabs__tab_13rrk_18:not(._-host-shadow-a_13rrk_46):not(._-host-shadow-b_13rrk_46):is(:hover,:focus-visible):not(._tabs__tab--active_13rrk_56):not(._tabs__tab--disabled_13rrk_56) ._tabs__tab-label_13rrk_62{color:var(--center-channel-color)}._tabs--appearance-underlined_13rrk_126 ._tabs__tab--active_13rrk_56:not(._-host-shadow-a_13rrk_46):not(._-host-shadow-b_13rrk_46){background-color:transparent}._tabs--appearance-underlined_13rrk_126 ._tabs__tab--active_13rrk_56:not(._-host-shadow-a_13rrk_46):not(._-host-shadow-b_13rrk_46):after{background-color:var(--link-color)}

package/dist/components/tabs/Tabs.d.ts

@@ -1,15 +1,30 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { BuiltInButtonProps } from '../../utils/props';
+export type TabsAppearance = 'default' | 'underlined';
 export interface TabItem {
     /** Unique key for this tab. */
     key: string;
-    /** Tab label text. */
-    label: string;
+    /** Tab label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
+    label: ReactNode;
     /** Optional count badge number. */
     countBadge?: number;
     /** When true, shows an unread dot badge. */
     unreadBadge?: boolean;
+    /** Optional id for this tab (pair with `panelId` for `aria-controls`). */
+    id?: string;
+    /** Optional id of the host tabpanel this tab controls. */
+    panelId?: string;
+    /** When true, the tab can't be selected and arrow-key navigation skips it. */
+    disabled?: boolean;
+    /** Native tooltip text, e.g. to explain why the tab is disabled. */
+    title?: string;
+    /**
+     * Extra attributes for this tab's `<button>` (e.g. `data-testid`). Tab
+     * semantics (`role`, `aria-selected`, `tabIndex`, handlers) take precedence.
+     */
+    buttonProps?: BuiltInButtonProps;
 }
-export interface TabsProps {
+export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /** Array of tab items to display. */
     tabs: TabItem[];
     /** Key of the currently active tab. */
@@ -20,11 +35,15 @@ export interface TabsProps {
     className?: string;
     /** Optional trailing controls rendered to the right of the tabs. */
     controls?: ReactNode;
+    /** Visual style. `underlined` shows a bottom rule with an indicator under the active tab. Default: `default`. */
+    appearance?: TabsAppearance;
+    /** Visually hidden text announced with a tab's unread dot. Default: "Unread". */
+    unreadLabel?: ReactNode;
 }
 /**
  * Tabs let people switch between sibling views inside the same surface — Mentions in the
  * right sidebar, sections of a settings panel, or filters on a list. The content area
  * changes; the surrounding chrome doesn't.
  */
-export default function Tabs({ tabs, activeKey, onChange, className, controls, }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export default function Tabs({ tabs, activeKey, onChange, className, controls, unreadLabel, appearance, ...rest }: TabsProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Tabs.d.ts.map

package/dist/components/tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,OAAO;IACtB,+BAA+B;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,SAAS;IACxB,qCAAqC;IACrC,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,uCAAuC;IACvC,SAAS,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,SAAc,EACd,QAAQ,GACT,EAAE,SAAS,2CAuDX"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,EAEnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAIxD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,YAAY,CAAC;AAEtD,MAAM,WAAW,OAAO;IACtB,+BAA+B;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,wEAAwE;IACxE,KAAK,EAAE,SAAS,CAAC;IACjB,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0EAA0E;IAC1E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0DAA0D;IAC1D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC;CAClC;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,qCAAqC;IACrC,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,uCAAuC;IACvC,SAAS,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iHAAiH;IACjH,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,iFAAiF;IACjF,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,SAAc,EACd,QAAQ,EACR,WAAsB,EACtB,UAAsB,EACtB,GAAG,IAAI,EACR,EAAE,SAAS,2CAoIX"}

package/dist/components/tabs/Tabs.js

@@ -1,55 +1,88 @@
-import { jsxs as n, jsx as s } from "react/jsx-runtime";
-import a from "./Tabs.module.scss.js";
-function m({
-  tabs: o,
-  activeKey: i,
-  onChange: c,
-  className: r = "",
-  controls: l
+import { jsxs as P, jsx as r } from "react/jsx-runtime";
+import { useRef as A, useState as R, useEffect as C, createElement as F } from "react";
+import { toKebab as I } from "../../utils/string.js";
+import t from "./Tabs.module.scss.js";
+function M({
+  tabs: c,
+  activeKey: n,
+  onChange: f,
+  className: h = "",
+  controls: b,
+  unreadLabel: N = "Unread",
+  appearance: p = "default",
+  ...x
 }) {
-  const d = [a.tabs, r].filter(Boolean).join(" ");
-  return /* @__PURE__ */ n("div", { className: d, children: [
-    /* @__PURE__ */ s("div", { className: a["tabs__tab-list"], role: "tablist", children: o.map((e) => {
-      const t = e.key === i, b = [
-        a.tabs__tab,
-        t ? a["tabs__tab--active"] : ""
+  const g = [
+    t.tabs,
+    p !== "default" ? t[`tabs--appearance-${I(p)}`] : "",
+    h
+  ].filter(Boolean).join(" "), m = A([]), [_, u] = R(n);
+  C(() => {
+    u(n);
+  }, [n]);
+  const B = c.map((e) => e.key), o = c.filter((e) => !e.disabled).map((e) => e.key), j = o.includes(_) ? _ : o.includes(n) ? n : o[0], d = (e) => {
+    var s;
+    u(e);
+    const a = B.indexOf(e);
+    (s = m.current[a]) == null || s.focus();
+  }, w = (e, a) => {
+    const s = o.length;
+    if (s === 0) return;
+    const l = o.indexOf(a);
+    e.key === "ArrowRight" ? (e.preventDefault(), d(o[(l + 1) % s])) : e.key === "ArrowLeft" ? (e.preventDefault(), d(
+      o[l < 0 ? s - 1 : (l - 1 + s) % s]
+    )) : e.key === "Home" ? (e.preventDefault(), d(o[0])) : e.key === "End" ? (e.preventDefault(), d(o[s - 1])) : (e.key === "Enter" || e.key === " ") && (e.preventDefault(), l >= 0 && f(a));
+  };
+  return /* @__PURE__ */ P("div", { ...x, className: g, children: [
+    /* @__PURE__ */ r("div", { className: t["tabs__tab-list"], role: "tablist", children: c.map((e, a) => {
+      var y, k, D;
+      const s = e.key === n, l = e.disabled === !0, E = [
+        t.tabs__tab,
+        s ? t["tabs__tab--active"] : "",
+        l ? t["tabs__tab--disabled"] : "",
+        (y = e.buttonProps) == null ? void 0 : y.className
       ].filter(Boolean).join(" ");
-      return /* @__PURE__ */ n(
+      return /* @__PURE__ */ F(
         "button",
         {
+          ...e.buttonProps,
+          key: e.key,
+          ref: (i) => {
+            m.current[a] = i;
+          },
+          id: e.id ?? ((k = e.buttonProps) == null ? void 0 : k.id),
           role: "tab",
           type: "button",
-          "aria-selected": t,
-          className: b,
-          onClick: () => c(e.key),
-          children: [
-            /* @__PURE__ */ s("span", { className: a["tabs__tab-label"], children: e.label }),
-            e.countBadge != null && /* @__PURE__ */ s(
-              "span",
-              {
-                className: [
-                  a["tabs__count-badge"],
-                  t ? a["tabs__count-badge--active"] : ""
-                ].filter(Boolean).join(" "),
-                children: e.countBadge
-              }
-            ),
-            e.unreadBadge && !t && /* @__PURE__ */ s(
-              "span",
-              {
-                className: a["tabs__unread-badge"],
-                "aria-label": "Unread"
-              }
-            )
-          ]
+          tabIndex: j === e.key ? 0 : -1,
+          "aria-selected": s,
+          "aria-controls": e.panelId,
+          "aria-disabled": l || void 0,
+          title: e.title ?? ((D = e.buttonProps) == null ? void 0 : D.title),
+          className: E,
+          onMouseDown: l ? (i) => i.preventDefault() : void 0,
+          onClick: () => {
+            l || (u(e.key), f(e.key));
+          },
+          onKeyDown: (i) => w(i, e.key)
         },
-        e.key
+        /* @__PURE__ */ r("span", { className: t["tabs__tab-label"], children: e.label }),
+        e.countBadge != null && /* @__PURE__ */ r(
+          "span",
+          {
+            className: [
+              t["tabs__count-badge"],
+              s ? t["tabs__count-badge--active"] : ""
+            ].filter(Boolean).join(" "),
+            children: e.countBadge
+          }
+        ),
+        e.unreadBadge && !s && /* @__PURE__ */ r("span", { className: t["tabs__unread-badge"], children: /* @__PURE__ */ r("span", { className: t["tabs__unread-label"], children: N }) })
       );
     }) }),
-    l != null && /* @__PURE__ */ s("div", { className: a.tabs__controls, children: l })
+    b != null && /* @__PURE__ */ r("div", { className: t.tabs__controls, children: b })
   ] });
 }
 export {
-  m as default
+  M as default
 };
 //# sourceMappingURL=Tabs.js.map

package/dist/components/tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styles from './Tabs.module.scss';\n\nexport interface TabItem {\n  /** Unique key for this tab. */\n  key: string;\n  /** Tab label text. */\n  label: string;\n  /** Optional count badge number. */\n  countBadge?: number;\n  /** When true, shows an unread dot badge. */\n  unreadBadge?: boolean;\n}\n\nexport interface TabsProps {\n  /** Array of tab items to display. */\n  tabs: TabItem[];\n  /** Key of the currently active tab. */\n  activeKey: string;\n  /** Called when a tab is selected. */\n  onChange: (key: string) => void;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Optional trailing controls rendered to the right of the tabs. */\n  controls?: ReactNode;\n}\n\n/**\n * Tabs let people switch between sibling views inside the same surface — Mentions in the\n * right sidebar, sections of a settings panel, or filters on a list. The content area\n * changes; the surrounding chrome doesn't.\n */\nexport default function Tabs({\n  tabs,\n  activeKey,\n  onChange,\n  className = '',\n  controls,\n}: TabsProps) {\n  const rootClass = [styles.tabs, className].filter(Boolean).join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['tabs__tab-list']} role=\"tablist\">\n        {tabs.map((tab) => {\n          const isActive = tab.key === activeKey;\n          const tabClass = [\n            styles['tabs__tab'],\n            isActive ? styles['tabs__tab--active'] : '',\n          ]\n            .filter(Boolean)\n            .join(' ');\n\n          return (\n            <button\n              key={tab.key}\n              role=\"tab\"\n              type=\"button\"\n              aria-selected={isActive}\n              className={tabClass}\n              onClick={() => onChange(tab.key)}\n            >\n              <span className={styles['tabs__tab-label']}>{tab.label}</span>\n\n              {tab.countBadge != null && (\n                <span\n                  className={[\n                    styles['tabs__count-badge'],\n                    isActive ? styles['tabs__count-badge--active'] : '',\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                >\n                  {tab.countBadge}\n                </span>\n              )}\n\n              {tab.unreadBadge && !isActive && (\n                <span\n                  className={styles['tabs__unread-badge']}\n                  aria-label=\"Unread\"\n                />\n              )}\n            </button>\n          );\n        })}\n      </div>\n\n      {controls != null && (\n        <div className={styles['tabs__controls']}>{controls}</div>\n      )}\n    </div>\n  );\n}\n"],"names":["Tabs","tabs","activeKey","onChange","className","controls","rootClass","styles","jsxs","jsx","tab","isActive","tabClass"],"mappings":";;AAgCA,SAAwBA,EAAK;AAAA,EAC3B,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC;AACF,GAAc;AACZ,QAAMC,IAAY,CAACC,EAAO,MAAMH,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEnE,SACE,gBAAAI,EAAC,OAAA,EAAI,WAAWF,GACd,UAAA;AAAA,IAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWF,EAAO,gBAAgB,GAAG,MAAK,WAC5C,UAAAN,EAAK,IAAI,CAACS,MAAQ;AACjB,YAAMC,IAAWD,EAAI,QAAQR,GACvBU,IAAW;AAAA,QACfL,EAAO;AAAA,QACPI,IAAWJ,EAAO,mBAAmB,IAAI;AAAA,MAAA,EAExC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,aACE,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,MAAK;AAAA,UACL,MAAK;AAAA,UACL,iBAAeG;AAAA,UACf,WAAWC;AAAA,UACX,SAAS,MAAMT,EAASO,EAAI,GAAG;AAAA,UAE/B,UAAA;AAAA,YAAA,gBAAAD,EAAC,UAAK,WAAWF,EAAO,iBAAiB,GAAI,YAAI,OAAM;AAAA,YAEtDG,EAAI,cAAc,QACjB,gBAAAD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW;AAAA,kBACTF,EAAO,mBAAmB;AAAA,kBAC1BI,IAAWJ,EAAO,2BAA2B,IAAI;AAAA,gBAAA,EAEhD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,gBAEV,UAAAG,EAAI;AAAA,cAAA;AAAA,YAAA;AAAA,YAIRA,EAAI,eAAe,CAACC,KACnB,gBAAAF;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWF,EAAO,oBAAoB;AAAA,gBACtC,cAAW;AAAA,cAAA;AAAA,YAAA;AAAA,UACb;AAAA,QAAA;AAAA,QA1BGG,EAAI;AAAA,MAAA;AAAA,IA8Bf,CAAC,EAAA,CACH;AAAA,IAECL,KAAY,QACX,gBAAAI,EAAC,OAAA,EAAI,WAAWF,EAAO,gBAAoB,UAAAF,EAAA,CAAS;AAAA,EAAA,GAExD;AAEJ;"}
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import {\n  useEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { toKebab } from '@/utils/string';\nimport styles from './Tabs.module.scss';\n\nexport type TabsAppearance = 'default' | 'underlined';\n\nexport interface TabItem {\n  /** Unique key for this tab. */\n  key: string;\n  /** Tab label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  /** Optional count badge number. */\n  countBadge?: number;\n  /** When true, shows an unread dot badge. */\n  unreadBadge?: boolean;\n  /** Optional id for this tab (pair with `panelId` for `aria-controls`). */\n  id?: string;\n  /** Optional id of the host tabpanel this tab controls. */\n  panelId?: string;\n  /** When true, the tab can't be selected and arrow-key navigation skips it. */\n  disabled?: boolean;\n  /** Native tooltip text, e.g. to explain why the tab is disabled. */\n  title?: string;\n  /**\n   * Extra attributes for this tab's `<button>` (e.g. `data-testid`). Tab\n   * semantics (`role`, `aria-selected`, `tabIndex`, handlers) take precedence.\n   */\n  buttonProps?: BuiltInButtonProps;\n}\n\nexport interface TabsProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange'\n> {\n  /** Array of tab items to display. */\n  tabs: TabItem[];\n  /** Key of the currently active tab. */\n  activeKey: string;\n  /** Called when a tab is selected. */\n  onChange: (key: string) => void;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Optional trailing controls rendered to the right of the tabs. */\n  controls?: ReactNode;\n  /** Visual style. `underlined` shows a bottom rule with an indicator under the active tab. Default: `default`. */\n  appearance?: TabsAppearance;\n  /** Visually hidden text announced with a tab's unread dot. Default: \"Unread\". */\n  unreadLabel?: ReactNode;\n}\n\n/**\n * Tabs let people switch between sibling views inside the same surface — Mentions in the\n * right sidebar, sections of a settings panel, or filters on a list. The content area\n * changes; the surrounding chrome doesn't.\n */\nexport default function Tabs({\n  tabs,\n  activeKey,\n  onChange,\n  className = '',\n  controls,\n  unreadLabel = 'Unread',\n  appearance = 'default',\n  ...rest\n}: TabsProps) {\n  const rootClass = [\n    styles.tabs,\n    appearance !== 'default'\n      ? styles[`tabs--appearance-${toKebab(appearance)}`]\n      : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n  const tabRefs = useRef<Array<HTMLButtonElement | null>>([]);\n  const [focusedKey, setFocusedKey] = useState(activeKey);\n\n  useEffect(() => {\n    setFocusedKey(activeKey);\n  }, [activeKey]);\n\n  const keys = tabs.map((tab) => tab.key);\n  const enabledKeys = tabs.filter((tab) => !tab.disabled).map((tab) => tab.key);\n  const focusKey = enabledKeys.includes(focusedKey)\n    ? focusedKey\n    : enabledKeys.includes(activeKey)\n      ? activeKey\n      : enabledKeys[0];\n\n  const moveFocus = (key: string) => {\n    setFocusedKey(key);\n    const index = keys.indexOf(key);\n    tabRefs.current[index]?.focus();\n  };\n\n  const handleKeyDown = (\n    event: KeyboardEvent<HTMLButtonElement>,\n    key: string,\n  ) => {\n    const count = enabledKeys.length;\n    if (count === 0) return;\n    const index = enabledKeys.indexOf(key);\n\n    if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      moveFocus(enabledKeys[(index + 1) % count]);\n    } else if (event.key === 'ArrowLeft') {\n      event.preventDefault();\n      moveFocus(\n        enabledKeys[index < 0 ? count - 1 : (index - 1 + count) % count],\n      );\n    } else if (event.key === 'Home') {\n      event.preventDefault();\n      moveFocus(enabledKeys[0]);\n    } else if (event.key === 'End') {\n      event.preventDefault();\n      moveFocus(enabledKeys[count - 1]);\n    } else if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      if (index >= 0) onChange(key);\n    }\n  };\n\n  return (\n    <div {...rest} className={rootClass}>\n      <div className={styles['tabs__tab-list']} role=\"tablist\">\n        {tabs.map((tab, index) => {\n          const isActive = tab.key === activeKey;\n          const isDisabled = tab.disabled === true;\n          const tabClass = [\n            styles['tabs__tab'],\n            isActive ? styles['tabs__tab--active'] : '',\n            isDisabled ? styles['tabs__tab--disabled'] : '',\n            tab.buttonProps?.className,\n          ]\n            .filter(Boolean)\n            .join(' ');\n\n          return (\n            <button\n              {...tab.buttonProps}\n              key={tab.key}\n              ref={(node) => {\n                tabRefs.current[index] = node;\n              }}\n              id={tab.id ?? tab.buttonProps?.id}\n              role=\"tab\"\n              type=\"button\"\n              tabIndex={focusKey === tab.key ? 0 : -1}\n              aria-selected={isActive}\n              aria-controls={tab.panelId}\n              aria-disabled={isDisabled || undefined}\n              title={tab.title ?? tab.buttonProps?.title}\n              className={tabClass}\n              onMouseDown={\n                isDisabled ? (event) => event.preventDefault() : undefined\n              }\n              onClick={() => {\n                if (isDisabled) return;\n                setFocusedKey(tab.key);\n                onChange(tab.key);\n              }}\n              onKeyDown={(event) => handleKeyDown(event, tab.key)}\n            >\n              <span className={styles['tabs__tab-label']}>{tab.label}</span>\n\n              {tab.countBadge != null && (\n                <span\n                  className={[\n                    styles['tabs__count-badge'],\n                    isActive ? styles['tabs__count-badge--active'] : '',\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                >\n                  {tab.countBadge}\n                </span>\n              )}\n\n              {tab.unreadBadge && !isActive && (\n                <span className={styles['tabs__unread-badge']}>\n                  <span className={styles['tabs__unread-label']}>\n                    {unreadLabel}\n                  </span>\n                </span>\n              )}\n            </button>\n          );\n        })}\n      </div>\n\n      {controls != null && (\n        <div className={styles['tabs__controls']}>{controls}</div>\n      )}\n    </div>\n  );\n}\n"],"names":["Tabs","tabs","activeKey","onChange","className","controls","unreadLabel","appearance","rest","rootClass","styles","toKebab","tabRefs","useRef","focusedKey","setFocusedKey","useState","useEffect","keys","tab","enabledKeys","focusKey","moveFocus","key","index","_a","handleKeyDown","event","count","jsxs","jsx","isActive","isDisabled","tabClass","createElement","node","_b","_c"],"mappings":";;;;AA+DA,SAAwBA,EAAK;AAAA,EAC3B,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,YAAAC,IAAa;AAAA,EACb,GAAGC;AACL,GAAc;AACZ,QAAMC,IAAY;AAAA,IAChBC,EAAO;AAAA,IACPH,MAAe,YACXG,EAAO,oBAAoBC,EAAQJ,CAAU,CAAC,EAAE,IAChD;AAAA,IACJH;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GACLQ,IAAUC,EAAwC,EAAE,GACpD,CAACC,GAAYC,CAAa,IAAIC,EAASd,CAAS;AAEtD,EAAAe,EAAU,MAAM;AACd,IAAAF,EAAcb,CAAS;AAAA,EACzB,GAAG,CAACA,CAAS,CAAC;AAEd,QAAMgB,IAAOjB,EAAK,IAAI,CAACkB,MAAQA,EAAI,GAAG,GAChCC,IAAcnB,EAAK,OAAO,CAACkB,MAAQ,CAACA,EAAI,QAAQ,EAAE,IAAI,CAACA,MAAQA,EAAI,GAAG,GACtEE,IAAWD,EAAY,SAASN,CAAU,IAC5CA,IACAM,EAAY,SAASlB,CAAS,IAC5BA,IACAkB,EAAY,CAAC,GAEbE,IAAY,CAACC,MAAgB;;AACjC,IAAAR,EAAcQ,CAAG;AACjB,UAAMC,IAAQN,EAAK,QAAQK,CAAG;AAC9B,KAAAE,IAAAb,EAAQ,QAAQY,CAAK,MAArB,QAAAC,EAAwB;AAAA,EAC1B,GAEMC,IAAgB,CACpBC,GACAJ,MACG;AACH,UAAMK,IAAQR,EAAY;AAC1B,QAAIQ,MAAU,EAAG;AACjB,UAAMJ,IAAQJ,EAAY,QAAQG,CAAG;AAErC,IAAII,EAAM,QAAQ,gBAChBA,EAAM,eAAA,GACNL,EAAUF,GAAaI,IAAQ,KAAKI,CAAK,CAAC,KACjCD,EAAM,QAAQ,eACvBA,EAAM,eAAA,GACNL;AAAA,MACEF,EAAYI,IAAQ,IAAII,IAAQ,KAAKJ,IAAQ,IAAII,KAASA,CAAK;AAAA,IAAA,KAExDD,EAAM,QAAQ,UACvBA,EAAM,eAAA,GACNL,EAAUF,EAAY,CAAC,CAAC,KACfO,EAAM,QAAQ,SACvBA,EAAM,eAAA,GACNL,EAAUF,EAAYQ,IAAQ,CAAC,CAAC,MACvBD,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SAChDA,EAAM,eAAA,GACFH,KAAS,KAAGrB,EAASoB,CAAG;AAAA,EAEhC;AAEA,SACE,gBAAAM,EAAC,OAAA,EAAK,GAAGrB,GAAM,WAAWC,GACxB,UAAA;AAAA,IAAA,gBAAAqB,EAAC,OAAA,EAAI,WAAWpB,EAAO,gBAAgB,GAAG,MAAK,WAC5C,UAAAT,EAAK,IAAI,CAACkB,GAAKK,MAAU;;AACxB,YAAMO,IAAWZ,EAAI,QAAQjB,GACvB8B,IAAab,EAAI,aAAa,IAC9Bc,IAAW;AAAA,QACfvB,EAAO;AAAA,QACPqB,IAAWrB,EAAO,mBAAmB,IAAI;AAAA,QACzCsB,IAAatB,EAAO,qBAAqB,IAAI;AAAA,SAC7Ce,IAAAN,EAAI,gBAAJ,gBAAAM,EAAiB;AAAA,MAAA,EAEhB,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,aACE,gBAAAS;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAGf,EAAI;AAAA,UACR,KAAKA,EAAI;AAAA,UACT,KAAK,CAACgB,MAAS;AACb,YAAAvB,EAAQ,QAAQY,CAAK,IAAIW;AAAA,UAC3B;AAAA,UACA,IAAIhB,EAAI,QAAMiB,IAAAjB,EAAI,gBAAJ,gBAAAiB,EAAiB;AAAA,UAC/B,MAAK;AAAA,UACL,MAAK;AAAA,UACL,UAAUf,MAAaF,EAAI,MAAM,IAAI;AAAA,UACrC,iBAAeY;AAAA,UACf,iBAAeZ,EAAI;AAAA,UACnB,iBAAea,KAAc;AAAA,UAC7B,OAAOb,EAAI,WAASkB,IAAAlB,EAAI,gBAAJ,gBAAAkB,EAAiB;AAAA,UACrC,WAAWJ;AAAA,UACX,aACED,IAAa,CAACL,MAAUA,EAAM,mBAAmB;AAAA,UAEnD,SAAS,MAAM;AACb,YAAIK,MACJjB,EAAcI,EAAI,GAAG,GACrBhB,EAASgB,EAAI,GAAG;AAAA,UAClB;AAAA,UACA,WAAW,CAACQ,MAAUD,EAAcC,GAAOR,EAAI,GAAG;AAAA,QAAA;AAAA,0BAEjD,QAAA,EAAK,WAAWT,EAAO,iBAAiB,GAAI,YAAI,OAAM;AAAA,QAEtDS,EAAI,cAAc,QACjB,gBAAAW;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACTpB,EAAO,mBAAmB;AAAA,cAC1BqB,IAAWrB,EAAO,2BAA2B,IAAI;AAAA,YAAA,EAEhD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,YAEV,UAAAS,EAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAIRA,EAAI,eAAe,CAACY,KACnB,gBAAAD,EAAC,UAAK,WAAWpB,EAAO,oBAAoB,GAC1C,4BAAC,QAAA,EAAK,WAAWA,EAAO,oBAAoB,GACzC,aACH,EAAA,CACF;AAAA,MAAA;AAAA,IAIR,CAAC,EAAA,CACH;AAAA,IAECL,KAAY,QACX,gBAAAyB,EAAC,OAAA,EAAI,WAAWpB,EAAO,gBAAoB,UAAAL,EAAA,CAAS;AAAA,EAAA,GAExD;AAEJ;"}

package/dist/components/tabs/Tabs.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Tabs.module.css');const _="_tabs_1jw11_2",t="_tabs__tab_1jw11_7",a="_tabs__controls_1jw11_75",b={tabs:_,"tabs__tab-list":"_tabs__tab-list_1jw11_7",tabs__tab:t,"tabs__tab--active":"_tabs__tab--active_1jw11_25","tabs__tab-label":"_tabs__tab-label_1jw11_31","tabs__count-badge":"_tabs__count-badge_1jw11_34","tabs__count-badge--active":"_tabs__count-badge--active_1jw11_62","tabs__unread-badge":"_tabs__unread-badge_1jw11_66",tabs__controls:a};exports.default=b;exports.tabs=_;exports.tabs__controls=a;exports.tabs__tab=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Tabs.css');const _="_tabs_13rrk_13",a="_tabs__tab_13rrk_18",t="_tabs__controls_13rrk_120",b={tabs:_,"tabs__tab-list":"_tabs__tab-list_13rrk_18",tabs__tab:a,"focus-ring-in":"_focus-ring-in_13rrk_1","-host-shadow-a":"_-host-shadow-a_13rrk_46","-host-shadow-b":"_-host-shadow-b_13rrk_46","tabs__tab--active":"_tabs__tab--active_13rrk_56","tabs__tab--disabled":"_tabs__tab--disabled_13rrk_56","tabs__tab-label":"_tabs__tab-label_13rrk_62","tabs__count-badge":"_tabs__count-badge_13rrk_65","tabs__count-badge--active":"_tabs__count-badge--active_13rrk_98","tabs__unread-badge":"_tabs__unread-badge_13rrk_102","tabs__unread-label":"_tabs__unread-label_13rrk_109",tabs__controls:t,"tabs--appearance-underlined":"_tabs--appearance-underlined_13rrk_126"};exports.default=b;exports.tabs=_;exports.tabs__controls=t;exports.tabs__tab=a;
 //# sourceMappingURL=Tabs.module.scss.cjs.map

package/dist/components/tabs/Tabs.module.scss.js

@@ -1,18 +1,24 @@
-import './Tabs.module.css';const _ = "_tabs_1jw11_2", t = "_tabs__tab_1jw11_7", a = "_tabs__controls_1jw11_75", b = {
+import './Tabs.css';const _ = "_tabs_13rrk_13", a = "_tabs__tab_13rrk_18", t = "_tabs__controls_13rrk_120", b = {
   tabs: _,
-  "tabs__tab-list": "_tabs__tab-list_1jw11_7",
-  tabs__tab: t,
-  "tabs__tab--active": "_tabs__tab--active_1jw11_25",
-  "tabs__tab-label": "_tabs__tab-label_1jw11_31",
-  "tabs__count-badge": "_tabs__count-badge_1jw11_34",
-  "tabs__count-badge--active": "_tabs__count-badge--active_1jw11_62",
-  "tabs__unread-badge": "_tabs__unread-badge_1jw11_66",
-  tabs__controls: a
+  "tabs__tab-list": "_tabs__tab-list_13rrk_18",
+  tabs__tab: a,
+  "focus-ring-in": "_focus-ring-in_13rrk_1",
+  "-host-shadow-a": "_-host-shadow-a_13rrk_46",
+  "-host-shadow-b": "_-host-shadow-b_13rrk_46",
+  "tabs__tab--active": "_tabs__tab--active_13rrk_56",
+  "tabs__tab--disabled": "_tabs__tab--disabled_13rrk_56",
+  "tabs__tab-label": "_tabs__tab-label_13rrk_62",
+  "tabs__count-badge": "_tabs__count-badge_13rrk_65",
+  "tabs__count-badge--active": "_tabs__count-badge--active_13rrk_98",
+  "tabs__unread-badge": "_tabs__unread-badge_13rrk_102",
+  "tabs__unread-label": "_tabs__unread-label_13rrk_109",
+  tabs__controls: t,
+  "tabs--appearance-underlined": "_tabs--appearance-underlined_13rrk_126"
 };
 export {
   b as default,
   _ as tabs,
-  a as tabs__controls,
-  t as tabs__tab
+  t as tabs__controls,
+  a as tabs__tab
 };
 //# sourceMappingURL=Tabs.module.scss.js.map

package/dist/components/tabs/Tabs.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
+{"version":3,"file":"Tabs.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}

package/dist/components/tabs/index.d.ts

@@ -1,3 +1,3 @@
 export { default as Tabs } from './Tabs';
-export type { TabsProps, TabItem } from './Tabs';
+export type { TabsProps, TabItem, TabsAppearance } from './Tabs';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC"}

package/dist/components/tag/Tag.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),a=require("./Tag.module.scss.cjs"),f={default:a.default["tag--type-default"],info:a.default["tag--type-info"],"info-dim":a.default["tag--type-info-dim"],danger:a.default["tag--type-danger"],success:a.default["tag--type-success"],warning:a.default["tag--type-warning"]};function c({label:l,type:s="default",size:u="x-small",casing:n="title-case",leadingIcon:t,className:d=""}){const i=[a.default.tag,f[s],u==="small"?a.default["tag--size-small"]:a.default["tag--size-x-small"],n==="all-caps"?a.default["tag--casing-all-caps"]:"",d].filter(Boolean).join(" ");return e.jsxs("span",{className:i,children:[t&&e.jsx("span",{className:a.default.tag__icon,"aria-hidden":!0,children:t}),e.jsx("span",{className:a.default.tag__label,children:l})]})}exports.default=c;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),r=require("../icon/Icon.cjs"),e=require("./Tag.module.scss.cjs"),o={"x-small":"10",small:"12"},f={default:e.default["tag--type-default"],info:e.default["tag--type-info"],"info-dim":e.default["tag--type-info-dim"],danger:e.default["tag--type-danger"],success:e.default["tag--type-success"],warning:e.default["tag--type-warning"]};function g({label:s,type:n="default",size:t="x-small",casing:u="title-case",leadingIcon:l,className:d="",...i}){const c=[e.default.tag,f[n],t==="small"?e.default["tag--size-small"]:e.default["tag--size-x-small"],u==="all-caps"?e.default["tag--casing-all-caps"]:"",d].filter(Boolean).join(" ");return a.jsxs("span",{...i,className:c,children:[l&&a.jsx("span",{className:e.default.tag__icon,"aria-hidden":!0,children:a.jsx(r.IconSlotContext.Provider,{value:{size:o[t]},children:l})}),a.jsx("span",{className:e.default.tag__label,children:s})]})}exports.default=g;
 //# sourceMappingURL=Tag.cjs.map

package/dist/components/tag/Tag.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.cjs","sources":["../../../src/components/tag/Tag.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styles from './Tag.module.scss';\n\nexport type TagType =\n  | 'default'\n  | 'info'\n  | 'info-dim'\n  | 'danger'\n  | 'success'\n  | 'warning';\n\nexport type TagSize = 'small' | 'x-small';\nexport type TagCasing = 'title-case' | 'all-caps';\n\nexport type TagProps = {\n  /** Tag label text. */\n  label: string;\n  /** Semantic colour type. Default: Default. */\n  type?: TagType;\n  /** Size variant. Default: X-Small. */\n  size?: TagSize;\n  /** Text casing. Default: Title Case. */\n  casing?: TagCasing;\n  /** Optional leading icon node. */\n  leadingIcon?: ReactNode;\n  /** Merged onto the root after variant classes (e.g. layout overrides in a parent row). */\n  className?: string;\n};\n\nconst TYPE_CLASS: Record<TagType, string> = {\n  default: styles['tag--type-default'],\n  info: styles['tag--type-info'],\n  'info-dim': styles['tag--type-info-dim'],\n  danger: styles['tag--type-danger'],\n  success: styles['tag--type-success'],\n  warning: styles['tag--type-warning'],\n};\n\n/**\n * Tags are compact pills that mark something — a role (_BOT_, _GUEST_), a tier\n * (_PROFESSIONAL_), a status (_NEW_, _BETA_), or a category. They're scannable signal: a way\n * to surface a small piece of metadata without spending a sentence on it.\n */\nexport default function Tag({\n  label,\n  type = 'default',\n  size = 'x-small',\n  casing = 'title-case',\n  leadingIcon,\n  className = '',\n}: TagProps) {\n  const classes = [\n    styles.tag,\n    TYPE_CLASS[type],\n    size === 'small'\n      ? styles['tag--size-small']\n      : styles['tag--size-x-small'],\n    casing === 'all-caps' ? styles['tag--casing-all-caps'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span className={classes}>\n      {leadingIcon && (\n        <span className={styles['tag__icon']} aria-hidden>\n          {leadingIcon}\n        </span>\n      )}\n      <span className={styles['tag__label']}>{label}</span>\n    </span>\n  );\n}\n"],"names":["TYPE_CLASS","styles","Tag","label","type","size","casing","leadingIcon","className","classes","jsxs","jsx"],"mappings":"oLA6BMA,EAAsC,CAC1C,QAASC,EAAAA,QAAO,mBAAmB,EACnC,KAAMA,EAAAA,QAAO,gBAAgB,EAC7B,WAAYA,EAAAA,QAAO,oBAAoB,EACvC,OAAQA,EAAAA,QAAO,kBAAkB,EACjC,QAASA,EAAAA,QAAO,mBAAmB,EACnC,QAASA,EAAAA,QAAO,mBAAmB,CACrC,EAOA,SAAwBC,EAAI,CAC1B,MAAAC,EACA,KAAAC,EAAO,UACP,KAAAC,EAAO,UACP,OAAAC,EAAS,aACT,YAAAC,EACA,UAAAC,EAAY,EACd,EAAa,CACX,MAAMC,EAAU,CACdR,EAAAA,QAAO,IACPD,EAAWI,CAAI,EACfC,IAAS,QACLJ,EAAAA,QAAO,iBAAiB,EACxBA,EAAAA,QAAO,mBAAmB,EAC9BK,IAAW,WAAaL,UAAO,sBAAsB,EAAI,GACzDO,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEE,EAAAA,KAAC,OAAA,CAAK,UAAWD,EACd,SAAA,CAAAF,GACCI,EAAAA,IAAC,QAAK,UAAWV,EAAAA,QAAO,UAAc,cAAW,GAC9C,SAAAM,CAAA,CACH,QAED,OAAA,CAAK,UAAWN,EAAAA,QAAO,WAAgB,SAAAE,CAAA,CAAM,CAAA,EAChD,CAEJ"}
+{"version":3,"file":"Tag.cjs","sources":["../../../src/components/tag/Tag.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport type { IconSize } from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport styles from './Tag.module.scss';\n\nexport type TagType =\n  | 'default'\n  | 'info'\n  | 'info-dim'\n  | 'danger'\n  | 'success'\n  | 'warning';\n\nexport type TagSize = 'small' | 'x-small';\nexport type TagCasing = 'title-case' | 'all-caps';\n\nexport type TagProps = Omit<HTMLAttributes<HTMLSpanElement>, 'type'> & {\n  /** Tag label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  /** Semantic colour type. Default: Default. */\n  type?: TagType;\n  /** Size variant. Default: X-Small. */\n  size?: TagSize;\n  /** Text casing. Default: Title Case. */\n  casing?: TagCasing;\n  /** Leading icon — pass `<Icon glyph={<SomeIcon />} />`; Tag provides the correct size via context (`\"10\"` for x-small, `\"12\"` for small). */\n  leadingIcon?: ReactNode;\n  /** Merged onto the root after variant classes (e.g. layout overrides in a parent row). */\n  className?: string;\n};\n\nconst TAG_ICON_SIZE: Record<TagSize, IconSize> = {\n  'x-small': '10',\n  small: '12',\n};\n\nconst TYPE_CLASS: Record<TagType, string> = {\n  default: styles['tag--type-default'],\n  info: styles['tag--type-info'],\n  'info-dim': styles['tag--type-info-dim'],\n  danger: styles['tag--type-danger'],\n  success: styles['tag--type-success'],\n  warning: styles['tag--type-warning'],\n};\n\n/**\n * Tags are compact pills that mark something — a role (_BOT_, _GUEST_), a tier\n * (_PROFESSIONAL_), a status (_NEW_, _BETA_), or a category. They're scannable signal: a way\n * to surface a small piece of metadata without spending a sentence on it.\n */\nexport default function Tag({\n  label,\n  type = 'default',\n  size = 'x-small',\n  casing = 'title-case',\n  leadingIcon,\n  className = '',\n  ...rest\n}: TagProps) {\n  const classes = [\n    styles.tag,\n    TYPE_CLASS[type],\n    size === 'small' ? styles['tag--size-small'] : styles['tag--size-x-small'],\n    casing === 'all-caps' ? styles['tag--casing-all-caps'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <span {...rest} className={classes}>\n      {leadingIcon && (\n        <span className={styles['tag__icon']} aria-hidden>\n          <IconSlotContext.Provider value={{ size: TAG_ICON_SIZE[size] }}>\n            {leadingIcon}\n          </IconSlotContext.Provider>\n        </span>\n      )}\n      <span className={styles['tag__label']}>{label}</span>\n    </span>\n  );\n}\n"],"names":["TAG_ICON_SIZE","TYPE_CLASS","styles","Tag","label","type","size","casing","leadingIcon","className","rest","classes","jsxs","jsx","IconSlotContext"],"mappings":"kNA+BMA,EAA2C,CAC/C,UAAW,KACX,MAAO,IACT,EAEMC,EAAsC,CAC1C,QAASC,EAAAA,QAAO,mBAAmB,EACnC,KAAMA,EAAAA,QAAO,gBAAgB,EAC7B,WAAYA,EAAAA,QAAO,oBAAoB,EACvC,OAAQA,EAAAA,QAAO,kBAAkB,EACjC,QAASA,EAAAA,QAAO,mBAAmB,EACnC,QAASA,EAAAA,QAAO,mBAAmB,CACrC,EAOA,SAAwBC,EAAI,CAC1B,MAAAC,EACA,KAAAC,EAAO,UACP,KAAAC,EAAO,UACP,OAAAC,EAAS,aACT,YAAAC,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAAa,CACX,MAAMC,EAAU,CACdT,EAAAA,QAAO,IACPD,EAAWI,CAAI,EACfC,IAAS,QAAUJ,EAAAA,QAAO,iBAAiB,EAAIA,EAAAA,QAAO,mBAAmB,EACzEK,IAAW,WAAaL,UAAO,sBAAsB,EAAI,GACzDO,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEG,EAAAA,KAAC,OAAA,CAAM,GAAGF,EAAM,UAAWC,EACxB,SAAA,CAAAH,GACCK,EAAAA,IAAC,QAAK,UAAWX,EAAAA,QAAO,UAAc,cAAW,GAC/C,SAAAW,EAAAA,IAACC,kBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAMd,EAAcM,CAAI,CAAA,EACxD,WACH,EACF,QAED,OAAA,CAAK,UAAWJ,EAAAA,QAAO,WAAgB,SAAAE,CAAA,CAAM,CAAA,EAChD,CAEJ"}

package/dist/components/tag/Tag.css

@@ -0,0 +1 @@
+._tag_bsp47_13{display:inline-flex;align-items:center;box-sizing:border-box;width:fit-content;max-width:100%;border-radius:var(--radius-s);font-family:var(--font-family-body);font-weight:var(--font-weight-semibold);white-space:nowrap}._tag__icon_bsp47_25{display:inline-flex;align-items:center;flex-shrink:0}._tag__label_bsp47_30{line-height:var(--line-height-25)}._tag--size-x-small_bsp47_33{gap:var(--spacing-xxxs);padding:0 var(--spacing-xxxs);font-size:var(--font-size-25);letter-spacing:.1px}._tag--size-small_bsp47_39{gap:var(--spacing-xxs);padding:var(--spacing-xxxxs) var(--spacing-xxs);font-size:var(--font-size-75)}._tag--type-default_bsp47_44{background-color:rgba(var(--center-channel-color-rgb),.08);color:var(--center-channel-color)}._tag--type-info_bsp47_48{background-color:var(--sidebar-text-active-border);color:var(--button-color)}._tag--type-info-dim_bsp47_52{background-color:rgba(var(--link-color-rgb),.12);color:var(--link-color)}._tag--type-danger_bsp47_56{background-color:var(--color-danger);color:var(--button-color)}._tag--type-success_bsp47_60{background-color:var(--color-success);color:var(--button-color)}._tag--type-warning_bsp47_64{background-color:var(--color-warning);color:var(--neutral-0)}._tag--casing-all-caps_bsp47_68{text-transform:uppercase}