@mattermost/compass-ui 0.1.0-alpha.11 → 0.1.0-alpha.13

package/dist/components/tabs/Tabs.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),f=require("react"),l=require("./Tabs.module.scss.cjs");function g({tabs:r,activeKey:d,onChange:b,className:y="",controls:_}){const k=[l.default.tabs,y].filter(Boolean).join(" "),m=f.useRef([]),[p,c]=f.useState(d);f.useEffect(()=>{c(d)},[d]);const x=r.map(e=>e.key),t=r.filter(e=>!e.disabled).map(e=>e.key),j=t.includes(p)?p:t.includes(d)?d:t[0],i=e=>{var s;c(e);const o=x.indexOf(e);(s=m.current[o])==null||s.focus()},h=(e,o)=>{const s=t.length;if(s===0)return;const a=t.indexOf(o);e.key==="ArrowRight"?(e.preventDefault(),i(t[(a+1)%s])):e.key==="ArrowLeft"?(e.preventDefault(),i(t[a<0?s-1:(a-1+s)%s])):e.key==="Home"?(e.preventDefault(),i(t[0])):e.key==="End"?(e.preventDefault(),i(t[s-1])):(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),a>=0&&b(o))};return n.jsxs("div",{className:k,children:[n.jsx("div",{className:l.default["tabs__tab-list"],role:"tablist",children:r.map((e,o)=>{const s=e.key===d,a=e.disabled===!0,D=[l.default.tabs__tab,s?l.default["tabs__tab--active"]:"",a?l.default["tabs__tab--disabled"]:""].filter(Boolean).join(" ");return n.jsxs("button",{ref:u=>{m.current[o]=u},id:e.id,role:"tab",type:"button",tabIndex:j===e.key?0:-1,"aria-selected":s,"aria-controls":e.panelId,"aria-disabled":a||void 0,title:e.title,className:D,onMouseDown:a?u=>u.preventDefault():void 0,onClick:()=>{a||(c(e.key),b(e.key))},onKeyDown:u=>h(u,e.key),children:[n.jsx("span",{className:l.default["tabs__tab-label"],children:e.label}),e.countBadge!=null&&n.jsx("span",{className:[l.default["tabs__count-badge"],s?l.default["tabs__count-badge--active"]:""].filter(Boolean).join(" "),children:e.countBadge}),e.unreadBadge&&!s&&n.jsx("span",{className:l.default["tabs__unread-badge"],children:n.jsx("span",{className:l.default["tabs__unread-label"],children:"Unread"})})]},e.key)})}),_!=null&&n.jsx("div",{className:l.default.tabs__controls,children:_})]})}exports.default=g;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),i=require("react"),t=require("./Tabs.module.scss.cjs");function R({tabs:c,activeKey:o,onChange:b,className:j="",controls:_,unreadLabel:D="Unread",...g}){const h=[t.default.tabs,j].filter(Boolean).join(" "),p=i.useRef([]),[m,f]=i.useState(o);i.useEffect(()=>{f(o)},[o]);const N=c.map(e=>e.key),l=c.filter(e=>!e.disabled).map(e=>e.key),B=l.includes(m)?m:l.includes(o)?o:l[0],r=e=>{var s;f(e);const d=N.indexOf(e);(s=p.current[d])==null||s.focus()},w=(e,d)=>{const s=l.length;if(s===0)return;const a=l.indexOf(d);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(d))};return n.jsxs("div",{...g,className:h,children:[n.jsx("div",{className:t.default["tabs__tab-list"],role:"tablist",children:c.map((e,d)=>{var y,k,x;const s=e.key===o,a=e.disabled===!0,P=[t.default.tabs__tab,s?t.default["tabs__tab--active"]:"",a?t.default["tabs__tab--disabled"]:"",(y=e.buttonProps)==null?void 0:y.className].filter(Boolean).join(" ");return i.createElement("button",{...e.buttonProps,key:e.key,ref:u=>{p.current[d]=u},id:e.id??((k=e.buttonProps)==null?void 0:k.id),role:"tab",type:"button",tabIndex:B===e.key?0:-1,"aria-selected":s,"aria-controls":e.panelId,"aria-disabled":a||void 0,title:e.title??((x=e.buttonProps)==null?void 0:x.title),className:P,onMouseDown:a?u=>u.preventDefault():void 0,onClick:()=>{a||(f(e.key),b(e.key))},onKeyDown:u=>w(u,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=R;
 //# 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 {\n  useEffect,\n  useRef,\n  useState,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport styles from './Tabs.module.scss';\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\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  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 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          ]\n            .filter(Boolean)\n            .join(' ');\n\n          return (\n            <button\n              key={tab.key}\n              ref={(node) => {\n                tabRefs.current[index] = node;\n              }}\n              id={tab.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}\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                    {'Unread'}\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","rootClass","styles","tabRefs","useRef","focusedKey","setFocusedKey","useState","useEffect","keys","tab","enabledKeys","focusKey","moveFocus","key","index","_a","handleKeyDown","event","count","jsxs","jsx","isActive","isDisabled","tabClass","node"],"mappings":"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"}
+{"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 styles from './Tabs.module.scss';\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  /** 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  ...rest\n}: TabsProps) {\n  const rootClass = [styles.tabs, className].filter(Boolean).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","rest","rootClass","styles","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":"wMA0DA,SAAwBA,EAAK,CAC3B,KAAAC,EACA,UAAAC,EACA,SAAAC,EACA,UAAAC,EAAY,GACZ,SAAAC,EACA,YAAAC,EAAc,SACd,GAAGC,CACL,EAAc,CACZ,MAAMC,EAAY,CAACC,EAAAA,QAAO,KAAML,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAC7DM,EAAUC,EAAAA,OAAwC,EAAE,EACpD,CAACC,EAAYC,CAAa,EAAIC,EAAAA,SAASZ,CAAS,EAEtDa,EAAAA,UAAU,IAAM,CACdF,EAAcX,CAAS,CACzB,EAAG,CAACA,CAAS,CAAC,EAEd,MAAMc,EAAOf,EAAK,IAAKgB,GAAQA,EAAI,GAAG,EAChCC,EAAcjB,EAAK,OAAQgB,GAAQ,CAACA,EAAI,QAAQ,EAAE,IAAKA,GAAQA,EAAI,GAAG,EACtEE,EAAWD,EAAY,SAASN,CAAU,EAC5CA,EACAM,EAAY,SAAShB,CAAS,EAC5BA,EACAgB,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,GAAGnB,EAASkB,CAAG,EAEhC,EAEA,OACEM,EAAAA,KAAC,MAAA,CAAK,GAAGpB,EAAM,UAAWC,EACxB,SAAA,CAAAoB,EAAAA,IAAC,MAAA,CAAI,UAAWnB,EAAAA,QAAO,gBAAgB,EAAG,KAAK,UAC5C,SAAAR,EAAK,IAAI,CAACgB,EAAKK,IAAU,WACxB,MAAMO,EAAWZ,EAAI,MAAQf,EACvB4B,EAAab,EAAI,WAAa,GAC9Bc,EAAW,CACftB,EAAAA,QAAO,UACPoB,EAAWpB,EAAAA,QAAO,mBAAmB,EAAI,GACzCqB,EAAarB,EAAAA,QAAO,qBAAqB,EAAI,IAC7Cc,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,EACrBd,EAASc,EAAI,GAAG,EAClB,EACA,UAAYQ,GAAUD,EAAcC,EAAOR,EAAI,GAAG,CAAA,QAEjD,OAAA,CAAK,UAAWR,EAAAA,QAAO,iBAAiB,EAAI,WAAI,MAAM,EAEtDQ,EAAI,YAAc,MACjBW,EAAAA,IAAC,OAAA,CACC,UAAW,CACTnB,EAAAA,QAAO,mBAAmB,EAC1BoB,EAAWpB,EAAAA,QAAO,2BAA2B,EAAI,EAAA,EAEhD,OAAO,OAAO,EACd,KAAK,GAAG,EAEV,SAAAQ,EAAI,UAAA,CAAA,EAIRA,EAAI,aAAe,CAACY,GACnBD,EAAAA,IAAC,QAAK,UAAWnB,EAAAA,QAAO,oBAAoB,EAC1C,eAAC,OAAA,CAAK,UAAWA,EAAAA,QAAO,oBAAoB,EACzC,WACH,CAAA,CACF,CAAA,CAIR,CAAC,CAAA,CACH,EAECJ,GAAY,MACXuB,EAAAA,IAAC,MAAA,CAAI,UAAWnB,EAAAA,QAAO,eAAoB,SAAAJ,CAAA,CAAS,CAAA,EAExD,CAEJ"}

package/dist/components/tabs/Tabs.css

@@ -1 +1 @@
-._tabs_1xaix_2{display:flex;align-items:center;justify-content:space-between}._tabs__tab-list_1xaix_7{display:flex;align-items:flex-start;gap:var(--spacing-xxs)}._tabs__tab_1xaix_7{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:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0;transition:background-color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition)}._tabs__tab_1xaix_7:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._tabs__tab_1xaix_7:hover:not(._tabs__tab--active_1xaix_31):not(._tabs__tab--disabled_1xaix_31){background-color:rgba(var(--center-channel-color-rgb),.08)}._tabs__tab--active_1xaix_31{background-color:rgba(var(--link-color-rgb),.08)}._tabs__tab--active_1xaix_31 ._tabs__tab-label_1xaix_37{color:var(--link-color)}._tabs__tab--active_1xaix_31 ._tabs__count-badge_1xaix_40{background-color:rgba(var(--link-color-rgb),.12);color:var(--link-color)}._tabs__tab--disabled_1xaix_31{cursor:not-allowed}._tabs__tab--disabled_1xaix_31 ._tabs__tab-label_1xaix_37,._tabs__tab--disabled_1xaix_31 ._tabs__count-badge_1xaix_40{color:rgba(var(--center-channel-color-rgb),.4)}._tabs__tab-label_1xaix_37{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;transition:color var(--duration-quick) var(--ease-transition)}._tabs__count-badge_1xaix_40{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;transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._tabs__count-badge--active_1xaix_75{background-color:rgba(var(--link-color-rgb),.12);color:var(--link-color)}._tabs__unread-badge_1xaix_79{position:absolute;top:var(--spacing-xxs);right:var(--spacing-xxs);width:4px;height:4px;border-radius:var(--radius-full);background-color:var(--mention-bg)}._tabs__unread-label_1xaix_88{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_1xaix_99{display:flex;align-items:center;gap:var(--spacing-xxs);flex-shrink:0}
+._tabs_j8wfj_2{display:flex;align-items:center;justify-content:space-between}._tabs__tab-list_j8wfj_7{display:flex;align-items:flex-start;gap:var(--spacing-xxs)}._tabs__tab_j8wfj_7{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:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0;transition:background-color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition)}._tabs__tab_j8wfj_7:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._tabs__tab_j8wfj_7:hover:not(._tabs__tab--active_j8wfj_31):not(._tabs__tab--disabled_j8wfj_31){background-color:rgba(var(--center-channel-color-rgb),.08)}._tabs__tab--active_j8wfj_31{background-color:rgba(var(--link-color-rgb),.08)}._tabs__tab--active_j8wfj_31 ._tabs__tab-label_j8wfj_37{color:var(--link-color)}._tabs__tab--active_j8wfj_31 ._tabs__count-badge_j8wfj_40{background-color:rgba(var(--link-color-rgb),.12);color:var(--link-color)}._tabs__tab--disabled_j8wfj_31{cursor:not-allowed}._tabs__tab--disabled_j8wfj_31 ._tabs__tab-label_j8wfj_37,._tabs__tab--disabled_j8wfj_31 ._tabs__count-badge_j8wfj_40{color:rgba(var(--center-channel-color-rgb),.4)}._tabs__tab-label_j8wfj_37{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;transition:color var(--duration-quick) var(--ease-transition)}._tabs__count-badge_j8wfj_40{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;transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._tabs__count-badge--active_j8wfj_75{background-color:rgba(var(--link-color-rgb),.12);color:var(--link-color)}._tabs__unread-badge_j8wfj_79{position:absolute;top:var(--spacing-xxs);right:var(--spacing-xxs);width:4px;height:4px;border-radius:var(--radius-pill);background-color:var(--mention-bg)}._tabs__unread-label_j8wfj_88{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_j8wfj_99{display:flex;align-items:center;gap:var(--spacing-xxs);flex-shrink:0}

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

@@ -1,4 +1,5 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { BuiltInButtonProps } from '../../utils/props';
 export interface TabItem {
     /** Unique key for this tab. */
     key: string;
@@ -16,8 +17,13 @@ export interface TabItem {
     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. */
@@ -28,11 +34,13 @@ export interface TabsProps {
     className?: string;
     /** Optional trailing controls rendered to the right of the tabs. */
     controls?: ReactNode;
+    /** 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, ...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,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,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;CAChB;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,2CA0HX"}
+{"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;AAGxD,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,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,GAAG,IAAI,EACR,EAAE,SAAS,2CA4HX"}

package/dist/components/tabs/Tabs.js

@@ -1,79 +1,82 @@
-import { jsxs as p, jsx as r } from "react/jsx-runtime";
-import { useRef as g, useState as B, useEffect as j } from "react";
-import a from "./Tabs.module.scss.js";
-function R({
+import { jsxs as E, jsx as r } from "react/jsx-runtime";
+import { useRef as P, useState as A, useEffect as R, createElement as C } from "react";
+import t from "./Tabs.module.scss.js";
+function H({
   tabs: c,
-  activeKey: t,
+  activeKey: o,
   onChange: f,
-  className: y = "",
-  controls: b
+  className: D = "",
+  controls: p,
+  unreadLabel: h = "Unread",
+  ...N
 }) {
-  const k = [a.tabs, y].filter(Boolean).join(" "), _ = g([]), [m, u] = B(t);
-  j(() => {
-    u(t);
-  }, [t]);
-  const h = c.map((e) => e.key), l = c.filter((e) => !e.disabled).map((e) => e.key), D = l.includes(m) ? m : l.includes(t) ? t : l[0], d = (e) => {
+  const x = [t.tabs, D].filter(Boolean).join(" "), b = P([]), [m, u] = A(o);
+  R(() => {
+    u(o);
+  }, [o]);
+  const g = c.map((e) => e.key), n = c.filter((e) => !e.disabled).map((e) => e.key), B = n.includes(m) ? m : n.includes(o) ? o : n[0], d = (e) => {
     var s;
     u(e);
-    const o = h.indexOf(e);
-    (s = _.current[o]) == null || s.focus();
-  }, x = (e, o) => {
-    const s = l.length;
+    const a = g.indexOf(e);
+    (s = b.current[a]) == null || s.focus();
+  }, j = (e, a) => {
+    const s = n.length;
     if (s === 0) return;
-    const n = l.indexOf(o);
-    e.key === "ArrowRight" ? (e.preventDefault(), d(l[(n + 1) % s])) : e.key === "ArrowLeft" ? (e.preventDefault(), d(
-      l[n < 0 ? s - 1 : (n - 1 + s) % s]
-    )) : e.key === "Home" ? (e.preventDefault(), d(l[0])) : e.key === "End" ? (e.preventDefault(), d(l[s - 1])) : (e.key === "Enter" || e.key === " ") && (e.preventDefault(), n >= 0 && f(o));
+    const l = n.indexOf(a);
+    e.key === "ArrowRight" ? (e.preventDefault(), d(n[(l + 1) % s])) : e.key === "ArrowLeft" ? (e.preventDefault(), d(
+      n[l < 0 ? s - 1 : (l - 1 + s) % s]
+    )) : e.key === "Home" ? (e.preventDefault(), d(n[0])) : e.key === "End" ? (e.preventDefault(), d(n[s - 1])) : (e.key === "Enter" || e.key === " ") && (e.preventDefault(), l >= 0 && f(a));
   };
-  return /* @__PURE__ */ p("div", { className: k, children: [
-    /* @__PURE__ */ r("div", { className: a["tabs__tab-list"], role: "tablist", children: c.map((e, o) => {
-      const s = e.key === t, n = e.disabled === !0, N = [
-        a.tabs__tab,
-        s ? a["tabs__tab--active"] : "",
-        n ? a["tabs__tab--disabled"] : ""
+  return /* @__PURE__ */ E("div", { ...N, className: x, children: [
+    /* @__PURE__ */ r("div", { className: t["tabs__tab-list"], role: "tablist", children: c.map((e, a) => {
+      var _, y, k;
+      const s = e.key === o, l = e.disabled === !0, w = [
+        t.tabs__tab,
+        s ? t["tabs__tab--active"] : "",
+        l ? t["tabs__tab--disabled"] : "",
+        (_ = e.buttonProps) == null ? void 0 : _.className
       ].filter(Boolean).join(" ");
-      return /* @__PURE__ */ p(
+      return /* @__PURE__ */ C(
         "button",
         {
+          ...e.buttonProps,
+          key: e.key,
           ref: (i) => {
-            _.current[o] = i;
+            b.current[a] = i;
           },
-          id: e.id,
+          id: e.id ?? ((y = e.buttonProps) == null ? void 0 : y.id),
           role: "tab",
           type: "button",
-          tabIndex: D === e.key ? 0 : -1,
+          tabIndex: B === e.key ? 0 : -1,
           "aria-selected": s,
           "aria-controls": e.panelId,
-          "aria-disabled": n || void 0,
-          title: e.title,
-          className: N,
-          onMouseDown: n ? (i) => i.preventDefault() : void 0,
+          "aria-disabled": l || void 0,
+          title: e.title ?? ((k = e.buttonProps) == null ? void 0 : k.title),
+          className: w,
+          onMouseDown: l ? (i) => i.preventDefault() : void 0,
           onClick: () => {
-            n || (u(e.key), f(e.key));
+            l || (u(e.key), f(e.key));
           },
-          onKeyDown: (i) => x(i, e.key),
-          children: [
-            /* @__PURE__ */ r("span", { className: a["tabs__tab-label"], children: e.label }),
-            e.countBadge != null && /* @__PURE__ */ r(
-              "span",
-              {
-                className: [
-                  a["tabs__count-badge"],
-                  s ? a["tabs__count-badge--active"] : ""
-                ].filter(Boolean).join(" "),
-                children: e.countBadge
-              }
-            ),
-            e.unreadBadge && !s && /* @__PURE__ */ r("span", { className: a["tabs__unread-badge"], children: /* @__PURE__ */ r("span", { className: a["tabs__unread-label"], children: "Unread" }) })
-          ]
+          onKeyDown: (i) => j(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: h }) })
       );
     }) }),
-    b != null && /* @__PURE__ */ r("div", { className: a.tabs__controls, children: b })
+    p != null && /* @__PURE__ */ r("div", { className: t.tabs__controls, children: p })
   ] });
 }
 export {
-  R as default
+  H 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 {\n  useEffect,\n  useRef,\n  useState,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport styles from './Tabs.module.scss';\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\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  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 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          ]\n            .filter(Boolean)\n            .join(' ');\n\n          return (\n            <button\n              key={tab.key}\n              ref={(node) => {\n                tabRefs.current[index] = node;\n              }}\n              id={tab.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}\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                    {'Unread'}\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","rootClass","styles","tabRefs","useRef","focusedKey","setFocusedKey","useState","useEffect","keys","tab","enabledKeys","focusKey","moveFocus","key","index","_a","handleKeyDown","event","count","jsxs","jsx","isActive","isDisabled","tabClass","node"],"mappings":"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"}
+{"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 styles from './Tabs.module.scss';\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  /** 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  ...rest\n}: TabsProps) {\n  const rootClass = [styles.tabs, className].filter(Boolean).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","rest","rootClass","styles","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":"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"}

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.css');const _="_tabs_1xaix_2",a="_tabs__tab_1xaix_7",t="_tabs__controls_1xaix_99",b={tabs:_,"tabs__tab-list":"_tabs__tab-list_1xaix_7",tabs__tab:a,"tabs__tab--active":"_tabs__tab--active_1xaix_31","tabs__tab--disabled":"_tabs__tab--disabled_1xaix_31","tabs__tab-label":"_tabs__tab-label_1xaix_37","tabs__count-badge":"_tabs__count-badge_1xaix_40","tabs__count-badge--active":"_tabs__count-badge--active_1xaix_75","tabs__unread-badge":"_tabs__unread-badge_1xaix_79","tabs__unread-label":"_tabs__unread-label_1xaix_88",tabs__controls:t};exports.default=b;exports.tabs=_;exports.tabs__controls=t;exports.tabs__tab=a;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Tabs.css');const _="_tabs_j8wfj_2",t="_tabs__tab_j8wfj_7",a="_tabs__controls_j8wfj_99",b={tabs:_,"tabs__tab-list":"_tabs__tab-list_j8wfj_7",tabs__tab:t,"tabs__tab--active":"_tabs__tab--active_j8wfj_31","tabs__tab--disabled":"_tabs__tab--disabled_j8wfj_31","tabs__tab-label":"_tabs__tab-label_j8wfj_37","tabs__count-badge":"_tabs__count-badge_j8wfj_40","tabs__count-badge--active":"_tabs__count-badge--active_j8wfj_75","tabs__unread-badge":"_tabs__unread-badge_j8wfj_79","tabs__unread-label":"_tabs__unread-label_j8wfj_88",tabs__controls:a};exports.default=b;exports.tabs=_;exports.tabs__controls=a;exports.tabs__tab=t;
 //# sourceMappingURL=Tabs.module.scss.cjs.map

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

@@ -1,14 +1,14 @@
-import './Tabs.css';const _ = "_tabs_1xaix_2", a = "_tabs__tab_1xaix_7", t = "_tabs__controls_1xaix_99", b = {
+import './Tabs.css';const _ = "_tabs_j8wfj_2", a = "_tabs__tab_j8wfj_7", t = "_tabs__controls_j8wfj_99", b = {
   tabs: _,
-  "tabs__tab-list": "_tabs__tab-list_1xaix_7",
+  "tabs__tab-list": "_tabs__tab-list_j8wfj_7",
   tabs__tab: a,
-  "tabs__tab--active": "_tabs__tab--active_1xaix_31",
-  "tabs__tab--disabled": "_tabs__tab--disabled_1xaix_31",
-  "tabs__tab-label": "_tabs__tab-label_1xaix_37",
-  "tabs__count-badge": "_tabs__count-badge_1xaix_40",
-  "tabs__count-badge--active": "_tabs__count-badge--active_1xaix_75",
-  "tabs__unread-badge": "_tabs__unread-badge_1xaix_79",
-  "tabs__unread-label": "_tabs__unread-label_1xaix_88",
+  "tabs__tab--active": "_tabs__tab--active_j8wfj_31",
+  "tabs__tab--disabled": "_tabs__tab--disabled_j8wfj_31",
+  "tabs__tab-label": "_tabs__tab-label_j8wfj_37",
+  "tabs__count-badge": "_tabs__count-badge_j8wfj_40",
+  "tabs__count-badge--active": "_tabs__count-badge--active_j8wfj_75",
+  "tabs__unread-badge": "_tabs__unread-badge_j8wfj_79",
+  "tabs__unread-label": "_tabs__unread-label_j8wfj_88",
   tabs__controls: t
 };
 export {

package/dist/components/tag/Tag.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),c=require("../icon/Icon.cjs"),e=require("./Tag.module.scss.cjs"),r={"x-small":"10",small:"12"},o={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 f({label:s,type:n="default",size:t="x-small",casing:u="title-case",leadingIcon:l,className:d=""}){const i=[e.default.tag,o[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",{className:i,children:[l&&a.jsx("span",{className:e.default.tag__icon,"aria-hidden":!0,children:a.jsx(c.IconSlotContext.Provider,{value:{size:r[t]},children:l})}),a.jsx("span",{className:e.default.tag__label,children:s})]})}exports.default=f;
+"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 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 = {\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}: 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 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","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,EACd,EAAa,CACX,MAAMC,EAAU,CACdR,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,OACEE,EAAAA,KAAC,OAAA,CAAK,UAAWD,EACd,SAAA,CAAAF,GACCI,EAAAA,IAAC,QAAK,UAAWV,EAAAA,QAAO,UAAc,cAAW,GAC/C,SAAAU,EAAAA,IAACC,kBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAMb,EAAcM,CAAI,CAAA,EACxD,WACH,EACF,QAED,OAAA,CAAK,UAAWJ,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.d.ts

@@ -1,8 +1,8 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 export type TagType = 'default' | 'info' | 'info-dim' | 'danger' | 'success' | 'warning';
 export type TagSize = 'small' | 'x-small';
 export type TagCasing = 'title-case' | 'all-caps';
-export type TagProps = {
+export type TagProps = Omit<HTMLAttributes<HTMLSpanElement>, 'type'> & {
     /** Tag label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
     label: ReactNode;
     /** Semantic colour type. Default: Default. */
@@ -21,5 +21,5 @@ export type TagProps = {
  * (_PROFESSIONAL_), a status (_NEW_, _BETA_), or a category. They're scannable signal: a way
  * to surface a small piece of metadata without spending a sentence on it.
  */
-export default function Tag({ label, type, size, casing, leadingIcon, className, }: TagProps): import("react/jsx-runtime").JSX.Element;
+export default function Tag({ label, type, size, casing, leadingIcon, className, ...rest }: TagProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Tag.d.ts.map

package/dist/components/tag/Tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/components/tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,MAAM,OAAO,GACf,SAAS,GACT,MAAM,GACN,UAAU,GACV,QAAQ,GACR,SAAS,GACT,SAAS,CAAC;AAEd,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC;AAC1C,MAAM,MAAM,SAAS,GAAG,YAAY,GAAG,UAAU,CAAC;AAElD,MAAM,MAAM,QAAQ,GAAG;IACrB,wEAAwE;IACxE,KAAK,EAAE,SAAS,CAAC;IACjB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sCAAsC;IACtC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wCAAwC;IACxC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,6IAA6I;IAC7I,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0FAA0F;IAC1F,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAgBF;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,GAAG,CAAC,EAC1B,KAAK,EACL,IAAgB,EAChB,IAAgB,EAChB,MAAqB,EACrB,WAAW,EACX,SAAc,GACf,EAAE,QAAQ,2CAuBV"}
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/components/tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvD,MAAM,MAAM,OAAO,GACf,SAAS,GACT,MAAM,GACN,UAAU,GACV,QAAQ,GACR,SAAS,GACT,SAAS,CAAC;AAEd,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC;AAC1C,MAAM,MAAM,SAAS,GAAG,YAAY,GAAG,UAAU,CAAC;AAElD,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,MAAM,CAAC,GAAG;IACrE,wEAAwE;IACxE,KAAK,EAAE,SAAS,CAAC;IACjB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sCAAsC;IACtC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wCAAwC;IACxC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,6IAA6I;IAC7I,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0FAA0F;IAC1F,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAgBF;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,GAAG,CAAC,EAC1B,KAAK,EACL,IAAgB,EAChB,IAAgB,EAChB,MAAqB,EACrB,WAAW,EACX,SAAc,EACd,GAAG,IAAI,EACR,EAAE,QAAQ,2CAuBV"}

package/dist/components/tag/Tag.js

@@ -1,10 +1,10 @@
-import { jsxs as c, jsx as s } from "react/jsx-runtime";
-import { IconSlotContext as g } from "../icon/Icon.js";
+import { jsxs as g, jsx as s } from "react/jsx-runtime";
+import { IconSlotContext as m } from "../icon/Icon.js";
 import a from "./Tag.module.scss.js";
-const m = {
+const p = {
   "x-small": "10",
   small: "12"
-}, p = {
+}, d = {
   default: a["tag--type-default"],
   info: a["tag--type-info"],
   "info-dim": a["tag--type-info-dim"],
@@ -12,27 +12,28 @@ const m = {
   success: a["tag--type-success"],
   warning: a["tag--type-warning"]
 };
-function x({
+function y({
   label: l,
   type: n = "default",
   size: t = "x-small",
   casing: i = "title-case",
   leadingIcon: e,
-  className: o = ""
+  className: o = "",
+  ...r
 }) {
-  const r = [
+  const c = [
     a.tag,
-    p[n],
+    d[n],
     t === "small" ? a["tag--size-small"] : a["tag--size-x-small"],
     i === "all-caps" ? a["tag--casing-all-caps"] : "",
     o
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ c("span", { className: r, children: [
-    e && /* @__PURE__ */ s("span", { className: a.tag__icon, "aria-hidden": !0, children: /* @__PURE__ */ s(g.Provider, { value: { size: m[t] }, children: e }) }),
+  return /* @__PURE__ */ g("span", { ...r, className: c, children: [
+    e && /* @__PURE__ */ s("span", { className: a.tag__icon, "aria-hidden": !0, children: /* @__PURE__ */ s(m.Provider, { value: { size: p[t] }, children: e }) }),
     /* @__PURE__ */ s("span", { className: a.tag__label, children: l })
   ] });
 }
 export {
-  x as default
+  y as default
 };
 //# sourceMappingURL=Tag.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../src/components/tag/Tag.tsx"],"sourcesContent":["import type { 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 = {\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}: 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 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","classes","jsxs","jsx","IconSlotContext"],"mappings":";;;AA+BA,MAAMA,IAA2C;AAAA,EAC/C,WAAW;AAAA,EACX,OAAO;AACT,GAEMC,IAAsC;AAAA,EAC1C,SAASC,EAAO,mBAAmB;AAAA,EACnC,MAAMA,EAAO,gBAAgB;AAAA,EAC7B,YAAYA,EAAO,oBAAoB;AAAA,EACvC,QAAQA,EAAO,kBAAkB;AAAA,EACjC,SAASA,EAAO,mBAAmB;AAAA,EACnC,SAASA,EAAO,mBAAmB;AACrC;AAOA,SAAwBC,EAAI;AAAA,EAC1B,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,aAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAa;AACX,QAAMC,IAAU;AAAA,IACdR,EAAO;AAAA,IACPD,EAAWI,CAAI;AAAA,IACfC,MAAS,UAAUJ,EAAO,iBAAiB,IAAIA,EAAO,mBAAmB;AAAA,IACzEK,MAAW,aAAaL,EAAO,sBAAsB,IAAI;AAAA,IACzDO;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAE,EAAC,QAAA,EAAK,WAAWD,GACd,UAAA;AAAA,IAAAF,KACC,gBAAAI,EAAC,UAAK,WAAWV,EAAO,WAAc,eAAW,IAC/C,UAAA,gBAAAU,EAACC,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAMb,EAAcM,CAAI,EAAA,GACxD,aACH,GACF;AAAA,sBAED,QAAA,EAAK,WAAWJ,EAAO,YAAgB,UAAAE,EAAA,CAAM;AAAA,EAAA,GAChD;AAEJ;"}
+{"version":3,"file":"Tag.js","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":";;;AA+BA,MAAMA,IAA2C;AAAA,EAC/C,WAAW;AAAA,EACX,OAAO;AACT,GAEMC,IAAsC;AAAA,EAC1C,SAASC,EAAO,mBAAmB;AAAA,EACnC,MAAMA,EAAO,gBAAgB;AAAA,EAC7B,YAAYA,EAAO,oBAAoB;AAAA,EACvC,QAAQA,EAAO,kBAAkB;AAAA,EACjC,SAASA,EAAO,mBAAmB;AAAA,EACnC,SAASA,EAAO,mBAAmB;AACrC;AAOA,SAAwBC,EAAI;AAAA,EAC1B,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,aAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAa;AACX,QAAMC,IAAU;AAAA,IACdT,EAAO;AAAA,IACPD,EAAWI,CAAI;AAAA,IACfC,MAAS,UAAUJ,EAAO,iBAAiB,IAAIA,EAAO,mBAAmB;AAAA,IACzEK,MAAW,aAAaL,EAAO,sBAAsB,IAAI;AAAA,IACzDO;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAG,EAAC,QAAA,EAAM,GAAGF,GAAM,WAAWC,GACxB,UAAA;AAAA,IAAAH,KACC,gBAAAK,EAAC,UAAK,WAAWX,EAAO,WAAc,eAAW,IAC/C,UAAA,gBAAAW,EAACC,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAMd,EAAcM,CAAI,EAAA,GACxD,aACH,GACF;AAAA,sBAED,QAAA,EAAK,WAAWJ,EAAO,YAAgB,UAAAE,EAAA,CAAM;AAAA,EAAA,GAChD;AAEJ;"}

package/dist/components/thread-footer/ThreadFooter.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),u=require("../button/Button.cjs"),j=require("../icon/Icon.cjs"),__x=require("@mattermost/compass-icons/components/reply-outline.js"),x=__x?.default??__x,p=require("../mention-badge/MentionBadge.cjs"),v=require("../user-avatar-group/UserAvatarGroup.cjs"),a=require("./ThreadFooter.module.scss.cjs");function N({replyCount:s=3,avatars:d=[],badge:t="none",mentionCount:l=1,following:r=!1,lastReplyTime:o,onReply:f,onFollowToggle:c,hovered:n=!1,className:h="",..._}){const m=[a.default["thread-footer"],r?a.default["thread-footer--following"]:"",n?a.default["thread-footer--hovered"]:"",h].filter(Boolean).join(" "),i=t==="mention"?`${l} mention${l===1?"":"s"}`:t==="unread"?"Unread replies":void 0;return e.jsx("div",{className:m,..._,children:e.jsxs("div",{className:a.default["thread-footer__inner"],children:[e.jsxs("div",{className:a.default["thread-footer__avatars-group"],children:[i&&e.jsx("span",{className:a.default["thread-footer__status-hint"],children:i}),(t==="unread"||t==="mention")&&e.jsxs("div",{className:a.default["thread-footer__badge-container"],"aria-hidden":!0,children:[t==="unread"&&e.jsx("span",{className:a.default["thread-footer__unread-dot"]}),t==="mention"&&e.jsx("span",{className:a.default["thread-footer__mention-badge"],children:e.jsx(p.default,{count:l,location:"channel",size:"medium"})})]}),d.length>0&&e.jsx(v.default,{avatars:d,max:3,size:"20"})]}),e.jsxs("div",{className:a.default["thread-footer__buttons"],children:[e.jsx(u.default,{emphasis:"quaternary",size:"x-small",className:[a.default["thread-footer__reply-btn"],n?a.default["thread-footer__reply-btn--hovered"]:""].filter(Boolean).join(" "),onClick:f,"aria-label":`${s} repl${s===1?"y":"ies"}`,leadingIcon:e.jsx(j.default,{size:"12",glyph:e.jsx(x,{})}),children:e.jsxs("span",{className:a.default["thread-footer__btn-label"],children:[s," ",s===1?"reply":"replies"]})}),e.jsx("div",{className:a.default["thread-footer__divider"],"aria-hidden":!0}),e.jsx(u.default,{emphasis:"quaternary",size:"x-small",className:[a.default["thread-footer__follow-btn"],r?a.default["thread-footer__follow-btn--following"]:""].filter(Boolean).join(" "),onClick:c,"aria-pressed":r,"aria-label":r?"Unfollow thread":"Follow thread",children:r?"Following":"Follow"}),r&&o&&e.jsxs("div",{className:a.default["thread-footer__last-reply-group"],children:[e.jsx("div",{className:a.default["thread-footer__divider"],"aria-hidden":!0}),e.jsx("span",{className:a.default["thread-footer__last-reply"],children:o})]})]})]})})}exports.default=N;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),u=require("../button/Button.cjs"),z=require("../icon/Icon.cjs"),__B=require("@mattermost/compass-icons/components/reply-outline.js"),B=__B?.default??__B,g=require("../mention-badge/MentionBadge.cjs"),M=require("../user-avatar-group/UserAvatarGroup.cjs"),a=require("./ThreadFooter.module.scss.cjs"),f=t=>`${t} ${t===1?"reply":"replies"}`,$=t=>`${t} mention${t===1?"":"s"}`;function w({replyCount:t=3,avatars:l=[],badge:r="none",mentionCount:o=1,following:s=!1,lastReplyTime:d,onReply:c,onFollowToggle:h,hovered:n=!1,className:_="",formatReplyCount:m=f,formatReplyLabel:j=f,formatMentionLabel:x=$,unreadLabel:p="Unread replies",followLabel:v="Follow",followingLabel:N="Following",followAriaLabel:b="Follow thread",unfollowAriaLabel:q="Unfollow thread",...y}){const F=[a.default["thread-footer"],s?a.default["thread-footer--following"]:"",n?a.default["thread-footer--hovered"]:"",_].filter(Boolean).join(" "),i=r==="mention"?x(o):r==="unread"?p:void 0;return e.jsx("div",{className:F,...y,children:e.jsxs("div",{className:a.default["thread-footer__inner"],children:[e.jsxs("div",{className:a.default["thread-footer__avatars-group"],children:[i&&e.jsx("span",{className:a.default["thread-footer__status-hint"],children:i}),(r==="unread"||r==="mention")&&e.jsxs("div",{className:a.default["thread-footer__badge-container"],"aria-hidden":!0,children:[r==="unread"&&e.jsx("span",{className:a.default["thread-footer__unread-dot"]}),r==="mention"&&e.jsx("span",{className:a.default["thread-footer__mention-badge"],children:e.jsx(g.default,{count:o,location:"channel",size:"medium"})})]}),l.length>0&&e.jsx(M.default,{avatars:l,max:3,size:"20"})]}),e.jsxs("div",{className:a.default["thread-footer__buttons"],children:[e.jsx(u.default,{emphasis:"quaternary",size:"x-small",className:[a.default["thread-footer__reply-btn"],n?a.default["thread-footer__reply-btn--hovered"]:""].filter(Boolean).join(" "),onClick:c,"aria-label":j(t),leadingIcon:e.jsx(z.default,{size:"12",glyph:e.jsx(B,{})}),children:e.jsx("span",{className:a.default["thread-footer__btn-label"],children:m(t)})}),e.jsx("div",{className:a.default["thread-footer__divider"],"aria-hidden":!0}),e.jsx(u.default,{emphasis:"quaternary",size:"x-small",className:[a.default["thread-footer__follow-btn"],s?a.default["thread-footer__follow-btn--following"]:""].filter(Boolean).join(" "),onClick:h,"aria-pressed":s,"aria-label":s?q:b,children:s?N:v}),s&&d&&e.jsxs("div",{className:a.default["thread-footer__last-reply-group"],children:[e.jsx("div",{className:a.default["thread-footer__divider"],"aria-hidden":!0}),e.jsx("span",{className:a.default["thread-footer__last-reply"],children:d})]})]})]})})}exports.default=w;
 //# sourceMappingURL=ThreadFooter.cjs.map

package/dist/components/thread-footer/ThreadFooter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadFooter.cjs","sources":["../../../src/components/thread-footer/ThreadFooter.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport Button from '@/components/button/Button';\nimport Icon from '@/components/icon/Icon';\nimport ReplyOutlineIcon from '@mattermost/compass-icons/components/reply-outline';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport UserAvatarGroup, {\n  type UserAvatarGroupItem,\n} from '@/components/user-avatar-group/UserAvatarGroup';\nimport styles from './ThreadFooter.module.scss';\n\nexport type ThreadFooterBadge = 'none' | 'unread' | 'mention';\n\nexport interface ThreadFooterProps extends HTMLAttributes<HTMLDivElement> {\n  /** Reply count. Default: 3. */\n  replyCount?: number;\n  /** Participant avatars. Rendered with User Avatar Group (first 3 shown, overflow as +N). */\n  avatars?: UserAvatarGroupItem[];\n  /** Badge variant. Default: None. */\n  badge?: ThreadFooterBadge;\n  /** Shown when `badge` is Mention. Default: 1. */\n  mentionCount?: number;\n  /** Whether the current user is following the thread. Default: false. */\n  following?: boolean;\n  /** Last reply timestamp label. Shown on row hover when following. */\n  lastReplyTime?: string;\n  /** Called when Reply is clicked. */\n  onReply?: () => void;\n  /** Called when Follow/Following is clicked. */\n  onFollowToggle?: () => void;\n  /** Hover / active state for button highlight. Default: false. */\n  hovered?: boolean;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * The Thread Footer is the reply summary bar at the bottom of a message. It shows\n * participants, reply count, follow state, and last-reply time — the information someone\n * needs to decide whether to dive in.\n */\nexport default function ThreadFooter({\n  replyCount = 3,\n  avatars = [],\n  badge = 'none',\n  mentionCount = 1,\n  following = false,\n  lastReplyTime,\n  onReply,\n  onFollowToggle,\n  hovered = false,\n  className = '',\n  ...rest\n}: ThreadFooterProps) {\n  const rootClass = [\n    styles['thread-footer'],\n    following ? styles['thread-footer--following'] : '',\n    hovered ? styles['thread-footer--hovered'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const badgeStatusHint =\n    badge === 'mention'\n      ? `${mentionCount} mention${mentionCount === 1 ? '' : 's'}`\n      : badge === 'unread'\n        ? 'Unread replies'\n        : undefined;\n\n  return (\n    <div className={rootClass} {...rest}>\n      <div className={styles['thread-footer__inner']}>\n        <div className={styles['thread-footer__avatars-group']}>\n          {badgeStatusHint && (\n            <span className={styles['thread-footer__status-hint']}>\n              {badgeStatusHint}\n            </span>\n          )}\n          {(badge === 'unread' || badge === 'mention') && (\n            <div\n              className={styles['thread-footer__badge-container']}\n              aria-hidden\n            >\n              {badge === 'unread' && (\n                <span className={styles['thread-footer__unread-dot']} />\n              )}\n              {badge === 'mention' && (\n                <span className={styles['thread-footer__mention-badge']}>\n                  <MentionBadge\n                    count={mentionCount}\n                    location=\"channel\"\n                    size=\"medium\"\n                  />\n                </span>\n              )}\n            </div>\n          )}\n\n          {avatars.length > 0 && (\n            <UserAvatarGroup avatars={avatars} max={3} size=\"20\" />\n          )}\n        </div>\n\n        {/* Buttons */}\n        <div className={styles['thread-footer__buttons']}>\n          {/* Reply button */}\n          <Button\n            emphasis=\"quaternary\"\n            size=\"x-small\"\n            className={[\n              styles['thread-footer__reply-btn'],\n              hovered ? styles['thread-footer__reply-btn--hovered'] : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onReply}\n            aria-label={`${replyCount} repl${replyCount === 1 ? 'y' : 'ies'}`}\n            leadingIcon={<Icon size=\"12\" glyph={<ReplyOutlineIcon />} />}\n          >\n            <span className={styles['thread-footer__btn-label']}>\n              {replyCount} {replyCount === 1 ? 'reply' : 'replies'}\n            </span>\n          </Button>\n\n          <div className={styles['thread-footer__divider']} aria-hidden />\n\n          {/* Follow / Following button */}\n          <Button\n            emphasis=\"quaternary\"\n            size=\"x-small\"\n            className={[\n              styles['thread-footer__follow-btn'],\n              following ? styles['thread-footer__follow-btn--following'] : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onFollowToggle}\n            aria-pressed={following}\n            aria-label={following ? 'Unfollow thread' : 'Follow thread'}\n          >\n            {following ? 'Following' : 'Follow'}\n          </Button>\n\n          {/* Last reply time — revealed on row hover when following */}\n          {following && lastReplyTime && (\n            <div className={styles['thread-footer__last-reply-group']}>\n              <div className={styles['thread-footer__divider']} aria-hidden />\n              <span className={styles['thread-footer__last-reply']}>\n                {lastReplyTime}\n              </span>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["ThreadFooter","replyCount","avatars","badge","mentionCount","following","lastReplyTime","onReply","onFollowToggle","hovered","className","rest","rootClass","styles","badgeStatusHint","jsx","jsxs","MentionBadge","UserAvatarGroup","Button","Icon","ReplyOutlineIcon"],"mappings":"+ZAwCA,SAAwBA,EAAa,CACnC,WAAAC,EAAa,EACb,QAAAC,EAAU,CAAA,EACV,MAAAC,EAAQ,OACR,aAAAC,EAAe,EACf,UAAAC,EAAY,GACZ,cAAAC,EACA,QAAAC,EACA,eAAAC,EACA,QAAAC,EAAU,GACV,UAAAC,EAAY,GACZ,GAAGC,CACL,EAAsB,CACpB,MAAMC,EAAY,CAChBC,EAAAA,QAAO,eAAe,EACtBR,EAAYQ,EAAAA,QAAO,0BAA0B,EAAI,GACjDJ,EAAUI,EAAAA,QAAO,wBAAwB,EAAI,GAC7CH,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAELI,EACJX,IAAU,UACN,GAAGC,CAAY,WAAWA,IAAiB,EAAI,GAAK,GAAG,GACvDD,IAAU,SACR,iBACA,OAER,OACEY,EAAAA,IAAC,MAAA,CAAI,UAAWH,EAAY,GAAGD,EAC7B,SAAAK,EAAAA,KAAC,MAAA,CAAI,UAAWH,EAAAA,QAAO,sBAAsB,EAC3C,SAAA,CAAAG,EAAAA,KAAC,MAAA,CAAI,UAAWH,EAAAA,QAAO,8BAA8B,EAClD,SAAA,CAAAC,SACE,OAAA,CAAK,UAAWD,EAAAA,QAAO,4BAA4B,EACjD,SAAAC,EACH,GAEAX,IAAU,UAAYA,IAAU,YAChCa,EAAAA,KAAC,MAAA,CACC,UAAWH,EAAAA,QAAO,gCAAgC,EAClD,cAAW,GAEV,SAAA,CAAAV,IAAU,UACTY,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,2BAA2B,EAAG,EAEvDV,IAAU,WACTY,EAAAA,IAAC,QAAK,UAAWF,UAAO,8BAA8B,EACpD,SAAAE,EAAAA,IAACE,EAAAA,QAAA,CACC,MAAOb,EACP,SAAS,UACT,KAAK,QAAA,CAAA,CACP,CACF,CAAA,CAAA,CAAA,EAKLF,EAAQ,OAAS,GAChBa,EAAAA,IAACG,EAAAA,SAAgB,QAAAhB,EAAkB,IAAK,EAAG,KAAK,IAAA,CAAK,CAAA,EAEzD,EAGAc,EAAAA,KAAC,MAAA,CAAI,UAAWH,EAAAA,QAAO,wBAAwB,EAE7C,SAAA,CAAAE,EAAAA,IAACI,EAAAA,QAAA,CACC,SAAS,aACT,KAAK,UACL,UAAW,CACTN,EAAAA,QAAO,0BAA0B,EACjCJ,EAAUI,EAAAA,QAAO,mCAAmC,EAAI,EAAA,EAEvD,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAASN,EACT,aAAY,GAAGN,CAAU,QAAQA,IAAe,EAAI,IAAM,KAAK,GAC/D,kBAAcmB,UAAA,CAAK,KAAK,KAAK,MAAOL,MAACM,IAAiB,EAAI,EAE1D,SAAAL,EAAAA,KAAC,OAAA,CAAK,UAAWH,UAAO,0BAA0B,EAC/C,SAAA,CAAAZ,EAAW,IAAEA,IAAe,EAAI,QAAU,SAAA,CAAA,CAC7C,CAAA,CAAA,QAGD,MAAA,CAAI,UAAWY,EAAAA,QAAO,wBAAwB,EAAG,cAAW,GAAC,EAG9DE,EAAAA,IAACI,EAAAA,QAAA,CACC,SAAS,aACT,KAAK,UACL,UAAW,CACTN,EAAAA,QAAO,2BAA2B,EAClCR,EAAYQ,EAAAA,QAAO,sCAAsC,EAAI,EAAA,EAE5D,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAASL,EACT,eAAcH,EACd,aAAYA,EAAY,kBAAoB,gBAE3C,WAAY,YAAc,QAAA,CAAA,EAI5BA,GAAaC,GACZU,EAAAA,KAAC,OAAI,UAAWH,EAAAA,QAAO,iCAAiC,EACtD,SAAA,CAAAE,MAAC,OAAI,UAAWF,EAAAA,QAAO,wBAAwB,EAAG,cAAW,GAAC,QAC7D,OAAA,CAAK,UAAWA,EAAAA,QAAO,2BAA2B,EAChD,SAAAP,CAAA,CACH,CAAA,CAAA,CACF,CAAA,CAAA,CAEJ,CAAA,CAAA,CACF,CAAA,CACF,CAEJ"}
+{"version":3,"file":"ThreadFooter.cjs","sources":["../../../src/components/thread-footer/ThreadFooter.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport Icon from '@/components/icon/Icon';\nimport ReplyOutlineIcon from '@mattermost/compass-icons/components/reply-outline';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport UserAvatarGroup, {\n  type UserAvatarGroupItem,\n} from '@/components/user-avatar-group/UserAvatarGroup';\nimport styles from './ThreadFooter.module.scss';\n\nexport type ThreadFooterBadge = 'none' | 'unread' | 'mention';\n\nexport interface ThreadFooterProps extends HTMLAttributes<HTMLDivElement> {\n  /** Reply count. Default: 3. */\n  replyCount?: number;\n  /** Participant avatars. Rendered with User Avatar Group (first 3 shown, overflow as +N). */\n  avatars?: UserAvatarGroupItem[];\n  /** Badge variant. Default: None. */\n  badge?: ThreadFooterBadge;\n  /** Shown when `badge` is Mention. Default: 1. */\n  mentionCount?: number;\n  /** Whether the current user is following the thread. Default: false. */\n  following?: boolean;\n  /** Last reply timestamp label. Shown on row hover when following. */\n  lastReplyTime?: ReactNode;\n  /** Called when Reply is clicked. */\n  onReply?: () => void;\n  /** Called when Follow/Following is clicked. */\n  onFollowToggle?: () => void;\n  /** Hover / active state for button highlight. Default: false. */\n  hovered?: boolean;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Visible reply count. Default: `{count} reply` / `{count} replies`. */\n  formatReplyCount?: (count: number) => ReactNode;\n  /** Accessible name for the reply button. Default: `{count} reply` / `{count} replies`. */\n  formatReplyLabel?: (count: number) => string;\n  /** Visually hidden mention hint. Default: `{count} mention(s)`. */\n  formatMentionLabel?: (count: number) => ReactNode;\n  /** Visually hidden unread hint. Default: \"Unread replies\". */\n  unreadLabel?: ReactNode;\n  /** Visible follow button text when not following. Default: \"Follow\". */\n  followLabel?: ReactNode;\n  /** Visible follow button text when following. Default: \"Following\". */\n  followingLabel?: ReactNode;\n  /** Accessible name for the follow button when not following. Default: \"Follow thread\". */\n  followAriaLabel?: string;\n  /** Accessible name for the follow button when following. Default: \"Unfollow thread\". */\n  unfollowAriaLabel?: string;\n}\n\nconst defaultFormatReplies = (count: number) =>\n  `${count} ${count === 1 ? 'reply' : 'replies'}`;\nconst defaultFormatMentions = (count: number) =>\n  `${count} mention${count === 1 ? '' : 's'}`;\n\n/**\n * The Thread Footer is the reply summary bar at the bottom of a message. It shows\n * participants, reply count, follow state, and last-reply time — the information someone\n * needs to decide whether to dive in.\n */\nexport default function ThreadFooter({\n  replyCount = 3,\n  avatars = [],\n  badge = 'none',\n  mentionCount = 1,\n  following = false,\n  lastReplyTime,\n  onReply,\n  onFollowToggle,\n  hovered = false,\n  className = '',\n  formatReplyCount = defaultFormatReplies,\n  formatReplyLabel = defaultFormatReplies,\n  formatMentionLabel = defaultFormatMentions,\n  unreadLabel = 'Unread replies',\n  followLabel = 'Follow',\n  followingLabel = 'Following',\n  followAriaLabel = 'Follow thread',\n  unfollowAriaLabel = 'Unfollow thread',\n  ...rest\n}: ThreadFooterProps) {\n  const rootClass = [\n    styles['thread-footer'],\n    following ? styles['thread-footer--following'] : '',\n    hovered ? styles['thread-footer--hovered'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const badgeStatusHint =\n    badge === 'mention'\n      ? formatMentionLabel(mentionCount)\n      : badge === 'unread'\n        ? unreadLabel\n        : undefined;\n\n  return (\n    <div className={rootClass} {...rest}>\n      <div className={styles['thread-footer__inner']}>\n        <div className={styles['thread-footer__avatars-group']}>\n          {badgeStatusHint && (\n            <span className={styles['thread-footer__status-hint']}>\n              {badgeStatusHint}\n            </span>\n          )}\n          {(badge === 'unread' || badge === 'mention') && (\n            <div\n              className={styles['thread-footer__badge-container']}\n              aria-hidden\n            >\n              {badge === 'unread' && (\n                <span className={styles['thread-footer__unread-dot']} />\n              )}\n              {badge === 'mention' && (\n                <span className={styles['thread-footer__mention-badge']}>\n                  <MentionBadge\n                    count={mentionCount}\n                    location=\"channel\"\n                    size=\"medium\"\n                  />\n                </span>\n              )}\n            </div>\n          )}\n\n          {avatars.length > 0 && (\n            <UserAvatarGroup avatars={avatars} max={3} size=\"20\" />\n          )}\n        </div>\n\n        {/* Buttons */}\n        <div className={styles['thread-footer__buttons']}>\n          {/* Reply button */}\n          <Button\n            emphasis=\"quaternary\"\n            size=\"x-small\"\n            className={[\n              styles['thread-footer__reply-btn'],\n              hovered ? styles['thread-footer__reply-btn--hovered'] : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onReply}\n            aria-label={formatReplyLabel(replyCount)}\n            leadingIcon={<Icon size=\"12\" glyph={<ReplyOutlineIcon />} />}\n          >\n            <span className={styles['thread-footer__btn-label']}>\n              {formatReplyCount(replyCount)}\n            </span>\n          </Button>\n\n          <div className={styles['thread-footer__divider']} aria-hidden />\n\n          {/* Follow / Following button */}\n          <Button\n            emphasis=\"quaternary\"\n            size=\"x-small\"\n            className={[\n              styles['thread-footer__follow-btn'],\n              following ? styles['thread-footer__follow-btn--following'] : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onFollowToggle}\n            aria-pressed={following}\n            aria-label={following ? unfollowAriaLabel : followAriaLabel}\n          >\n            {following ? followingLabel : followLabel}\n          </Button>\n\n          {/* Last reply time — revealed on row hover when following */}\n          {following && lastReplyTime && (\n            <div className={styles['thread-footer__last-reply-group']}>\n              <div className={styles['thread-footer__divider']} aria-hidden />\n              <span className={styles['thread-footer__last-reply']}>\n                {lastReplyTime}\n              </span>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["defaultFormatReplies","count","defaultFormatMentions","ThreadFooter","replyCount","avatars","badge","mentionCount","following","lastReplyTime","onReply","onFollowToggle","hovered","className","formatReplyCount","formatReplyLabel","formatMentionLabel","unreadLabel","followLabel","followingLabel","followAriaLabel","unfollowAriaLabel","rest","rootClass","styles","badgeStatusHint","jsx","jsxs","MentionBadge","UserAvatarGroup","Button","Icon","ReplyOutlineIcon"],"mappings":"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"}

package/dist/components/thread-footer/ThreadFooter.css

@@ -1 +1 @@
-._thread-footer_b5kji_2{--thread-footer-focus-ring-color: var(--focus-ring-color);display:flex;flex-direction:column;align-items:flex-start}._thread-footer__inner_b5kji_8{position:relative;display:inline-flex;align-items:center;border-radius:var(--radius-s)}._thread-footer__avatars-group_b5kji_14{display:inline-flex;align-items:center;padding-right:var(--spacing-xxxs)}._thread-footer__status-hint_b5kji_19{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._thread-footer__badge-container_b5kji_30{position:absolute;left:calc(var(--spacing-xxs) * -1);top:50%;transform:translate(-100%,-50%);display:flex;align-items:center;justify-content:flex-end}._thread-footer__unread-dot_b5kji_39{display:block;width:8px;height:8px;border-radius:var(--radius-full);background-color:var(--link-color)}._thread-footer__mention-badge_b5kji_46{display:inline-flex}._thread-footer__buttons_b5kji_49{display:inline-flex;align-items:center;gap:0}._thread-footer__reply-btn_b5kji_54,._thread-footer__follow-btn_b5kji_54{--focus-ring-color: var(--thread-footer-focus-ring-color)}._thread-footer_b5kji_2 ._thread-footer__reply-btn_b5kji_54[class*=button--emphasis-quaternary],._thread-footer_b5kji_2 ._thread-footer__follow-btn_b5kji_54:not(._thread-footer__follow-btn--following_b5kji_57)[class*=button--emphasis-quaternary]{color:rgba(var(--center-channel-color-rgb),.75)}._thread-footer_b5kji_2 ._thread-footer__reply-btn_b5kji_54[class*=button--emphasis-quaternary]:hover:not(:disabled),._thread-footer_b5kji_2 ._thread-footer__follow-btn_b5kji_54:not(._thread-footer__follow-btn--following_b5kji_57)[class*=button--emphasis-quaternary]:hover:not(:disabled){background-color:rgba(var(--center-channel-color-rgb),.08)}._thread-footer_b5kji_2 ._thread-footer__reply-btn--hovered_b5kji_63[class*=button--emphasis-quaternary]{background-color:rgba(var(--center-channel-color-rgb),.08)}._thread-footer_b5kji_2 ._thread-footer__follow-btn--following_b5kji_57[class*=button--emphasis-quaternary]{color:var(--link-color);background-color:rgba(var(--link-color-rgb),.08)}._thread-footer_b5kji_2 ._thread-footer__follow-btn--following_b5kji_57[class*=button--emphasis-quaternary]:hover:not(:disabled){background-color:rgba(var(--link-color-rgb),.12)}._thread-footer__btn-label_b5kji_73{font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:15px;white-space:nowrap}._thread-footer__divider_b5kji_80{box-sizing:border-box;width:1px;min-width:1px;max-width:1px;height:16px;padding:0;margin:0;border:0;background-color:rgba(var(--center-channel-color-rgb),.16);flex-shrink:0;transition:opacity var(--duration-quick) var(--ease-transition)}._thread-footer__buttons_b5kji_49:has(._thread-footer__follow-btn--following_b5kji_57)>._thread-footer__divider_b5kji_80:first-of-type,._thread-footer__buttons_b5kji_49:has(._thread-footer__follow-btn--following_b5kji_57)>._thread-footer__last-reply-group_b5kji_93>._thread-footer__divider_b5kji_80{opacity:0}._thread-footer__buttons_b5kji_49:not(:has(._thread-footer__follow-btn--following_b5kji_57)):has(._thread-footer__reply-btn_b5kji_54:hover,._thread-footer__reply-btn--hovered_b5kji_63,._thread-footer__reply-btn_b5kji_54:focus-visible,._thread-footer__follow-btn_b5kji_54:hover,._thread-footer__follow-btn_b5kji_54:focus-visible)>._thread-footer__divider_b5kji_80:first-of-type{opacity:0}._thread-footer__last-reply-group_b5kji_93{display:inline-flex;align-items:center;gap:0;overflow:hidden;max-width:0;opacity:0;transition:max-width var(--duration-quick) var(--ease-transition),opacity var(--duration-quick) var(--ease-transition)}._thread-footer--following_b5kji_112:hover ._thread-footer__last-reply-group_b5kji_93,._thread-footer--following_b5kji_112:focus-within ._thread-footer__last-reply-group_b5kji_93,._thread-footer--following_b5kji_112._thread-footer--hovered_b5kji_112 ._thread-footer__last-reply-group_b5kji_93{max-width:10rem;opacity:1}._thread-footer__last-reply_b5kji_93{padding:4.5px var(--spacing-s);color:rgba(var(--center-channel-color-rgb),.64);font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:15px;white-space:nowrap}
+._thread-footer_1sd7m_2{--thread-footer-focus-ring-color: var(--focus-ring-color);display:flex;flex-direction:column;align-items:flex-start}._thread-footer__inner_1sd7m_8{position:relative;display:inline-flex;align-items:center;border-radius:var(--radius-s)}._thread-footer__avatars-group_1sd7m_14{display:inline-flex;align-items:center;padding-right:var(--spacing-xxxs)}._thread-footer__status-hint_1sd7m_19{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._thread-footer__badge-container_1sd7m_30{position:absolute;left:calc(var(--spacing-xxs) * -1);top:50%;transform:translate(-100%,-50%);display:flex;align-items:center;justify-content:flex-end}._thread-footer__unread-dot_1sd7m_39{display:block;width:8px;height:8px;border-radius:var(--radius-pill);background-color:var(--link-color)}._thread-footer__mention-badge_1sd7m_46{display:inline-flex}._thread-footer__buttons_1sd7m_49{display:inline-flex;align-items:center;gap:0}._thread-footer__reply-btn_1sd7m_54,._thread-footer__follow-btn_1sd7m_54{--focus-ring-color: var(--thread-footer-focus-ring-color)}._thread-footer_1sd7m_2 ._thread-footer__reply-btn_1sd7m_54[class*=button--emphasis-quaternary],._thread-footer_1sd7m_2 ._thread-footer__follow-btn_1sd7m_54:not(._thread-footer__follow-btn--following_1sd7m_57)[class*=button--emphasis-quaternary]{color:rgba(var(--center-channel-color-rgb),.75)}._thread-footer_1sd7m_2 ._thread-footer__reply-btn_1sd7m_54[class*=button--emphasis-quaternary]:hover:not(:disabled),._thread-footer_1sd7m_2 ._thread-footer__follow-btn_1sd7m_54:not(._thread-footer__follow-btn--following_1sd7m_57)[class*=button--emphasis-quaternary]:hover:not(:disabled){background-color:rgba(var(--center-channel-color-rgb),.08)}._thread-footer_1sd7m_2 ._thread-footer__reply-btn--hovered_1sd7m_63[class*=button--emphasis-quaternary]{background-color:rgba(var(--center-channel-color-rgb),.08)}._thread-footer_1sd7m_2 ._thread-footer__follow-btn--following_1sd7m_57[class*=button--emphasis-quaternary]{color:var(--link-color);background-color:rgba(var(--link-color-rgb),.08)}._thread-footer_1sd7m_2 ._thread-footer__follow-btn--following_1sd7m_57[class*=button--emphasis-quaternary]:hover:not(:disabled){background-color:rgba(var(--link-color-rgb),.12)}._thread-footer__btn-label_1sd7m_73{font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:15px;white-space:nowrap}._thread-footer__divider_1sd7m_80{box-sizing:border-box;width:1px;min-width:1px;max-width:1px;height:16px;padding:0;margin:0;border:0;background-color:rgba(var(--center-channel-color-rgb),.16);flex-shrink:0;transition:opacity var(--duration-quick) var(--ease-transition)}._thread-footer__buttons_1sd7m_49:has(._thread-footer__follow-btn--following_1sd7m_57)>._thread-footer__divider_1sd7m_80:first-of-type,._thread-footer__buttons_1sd7m_49:has(._thread-footer__follow-btn--following_1sd7m_57)>._thread-footer__last-reply-group_1sd7m_93>._thread-footer__divider_1sd7m_80{opacity:0}._thread-footer__buttons_1sd7m_49:not(:has(._thread-footer__follow-btn--following_1sd7m_57)):has(._thread-footer__reply-btn_1sd7m_54:hover,._thread-footer__reply-btn--hovered_1sd7m_63,._thread-footer__reply-btn_1sd7m_54:focus-visible,._thread-footer__follow-btn_1sd7m_54:hover,._thread-footer__follow-btn_1sd7m_54:focus-visible)>._thread-footer__divider_1sd7m_80:first-of-type{opacity:0}._thread-footer__last-reply-group_1sd7m_93{display:inline-flex;align-items:center;gap:0;overflow:hidden;max-width:0;opacity:0;transition:max-width var(--duration-quick) var(--ease-transition),opacity var(--duration-quick) var(--ease-transition)}._thread-footer--following_1sd7m_112:hover ._thread-footer__last-reply-group_1sd7m_93,._thread-footer--following_1sd7m_112:focus-within ._thread-footer__last-reply-group_1sd7m_93,._thread-footer--following_1sd7m_112._thread-footer--hovered_1sd7m_112 ._thread-footer__last-reply-group_1sd7m_93{max-width:10rem;opacity:1}._thread-footer__last-reply_1sd7m_93{padding:4.5px var(--spacing-s);color:rgba(var(--center-channel-color-rgb),.64);font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:15px;white-space:nowrap}