@flamingo-stack/openframe-frontend-core 0.0.781 → 0.0.783

package/dist/components/tickets/index.cjs

@@ -15,39 +15,39 @@
 
 
 
-var _chunkHPGCUYAZcjs = require('../../chunk-HPGCUYAZ.cjs');
-require('../../chunk-5PBWAF2D.cjs');
-require('../../chunk-XHJI7R4J.cjs');
-require('../../chunk-ZPYFPLPD.cjs');
-require('../../chunk-PID7LUDP.cjs');
-require('../../chunk-DIY4SJZI.cjs');
+var _chunkKRXHRL3Wcjs = require('../../chunk-KRXHRL3W.cjs');
+require('../../chunk-URFAMWCA.cjs');
+require('../../chunk-AFSVWR3X.cjs');
+require('../../chunk-YXZOP726.cjs');
+require('../../chunk-BAJB3JF3.cjs');
+require('../../chunk-RT6QATX4.cjs');
 require('../../chunk-HEVW75L3.cjs');
 
 
 
 
-var _chunkLDGR5VCKcjs = require('../../chunk-LDGR5VCK.cjs');
-require('../../chunk-ODZ5XGWA.cjs');
-require('../../chunk-YEJWNHD3.cjs');
-require('../../chunk-4XDYSGRL.cjs');
-require('../../chunk-UONQCE5N.cjs');
+var _chunkAPO7GMZQcjs = require('../../chunk-APO7GMZQ.cjs');
+require('../../chunk-THOGSAFH.cjs');
+require('../../chunk-MKF6XX5A.cjs');
+require('../../chunk-ZFOMRALU.cjs');
+require('../../chunk-TS6TISIF.cjs');
 require('../../chunk-HQQE74RO.cjs');
 require('../../chunk-DEY6XXGO.cjs');
-require('../../chunk-ZV6RQNXE.cjs');
+require('../../chunk-CBKXU77H.cjs');
 require('../../chunk-VXAKQRV7.cjs');
 require('../../chunk-24I6RFVU.cjs');
 require('../../chunk-A6P6DHEZ.cjs');
 require('../../chunk-MZ4KBSH7.cjs');
-require('../../chunk-SMEX3BWO.cjs');
+require('../../chunk-UPQMFK5B.cjs');
 
 
 
-var _chunkHLZUBJPLcjs = require('../../chunk-HLZUBJPL.cjs');
-require('../../chunk-FWJ5YECN.cjs');
-require('../../chunk-T7SDYBST.cjs');
-require('../../chunk-QD7SKYCQ.cjs');
-require('../../chunk-AKCBLZAO.cjs');
-require('../../chunk-VZKAAXU3.cjs');
+var _chunk62TMGBROcjs = require('../../chunk-62TMGBRO.cjs');
+require('../../chunk-7OJMOG34.cjs');
+require('../../chunk-BE4OUWTA.cjs');
+require('../../chunk-WSBWP7IW.cjs');
+require('../../chunk-E2ZZOYSM.cjs');
+require('../../chunk-FS7CBRF4.cjs');
 require('../../chunk-ZOZR3QI2.cjs');
 require('../../chunk-OMV5S5PI.cjs');
 require('../../chunk-KHPX3KU4.cjs');
@@ -1836,21 +1836,21 @@ require('../../chunk-LMBYZITR.cjs');
 require('../../chunk-TMVC7S2R.cjs');
 require('../../chunk-IYHH5EIO.cjs');
 require('../../chunk-XIBCMGBW.cjs');
-require('../../chunk-3IHGS44W.cjs');
+require('../../chunk-N2SVJJLU.cjs');
 require('../../chunk-OJZBZH56.cjs');
-require('../../chunk-2OYKOHFK.cjs');
+require('../../chunk-LUWYWYNC.cjs');
 require('../../chunk-JKX2C3I2.cjs');
 require('../../chunk-7DNL734S.cjs');
 require('../../chunk-WWUSFOJ7.cjs');
 require('../../chunk-SKI6NKOE.cjs');
 require('../../chunk-EWPR7662.cjs');
-require('../../chunk-JHDPEYZH.cjs');
-require('../../chunk-OHXB6HUX.cjs');
-require('../../chunk-JQWYXC2E.cjs');
-require('../../chunk-Q7HXTF2C.cjs');
-require('../../chunk-HTSRCFXP.cjs');
-require('../../chunk-RYIWADIB.cjs');
-require('../../chunk-AFJEUBDS.cjs');
+require('../../chunk-4DKPNN2A.cjs');
+require('../../chunk-5XAWVXNI.cjs');
+require('../../chunk-ODDUGLYF.cjs');
+require('../../chunk-DYF6XB27.cjs');
+require('../../chunk-4MQASMIU.cjs');
+require('../../chunk-XAA5LUHC.cjs');
+require('../../chunk-ZJS45HQZ.cjs');
 require('../../chunk-S5C3OZCO.cjs');
 require('../../chunk-32ASZMTV.cjs');
 require('../../chunk-OOYBIS7D.cjs');
@@ -1859,25 +1859,25 @@ require('../../chunk-6VOOPMP5.cjs');
 require('../../chunk-ORO54HDF.cjs');
 require('../../chunk-RUHKTWGB.cjs');
 require('../../chunk-BLH2SFOO.cjs');
-require('../../chunk-DJTPDK3W.cjs');
+require('../../chunk-F2FFJWOQ.cjs');
 require('../../chunk-7PNRXJX2.cjs');
 require('../../chunk-NTPX5GXI.cjs');
 require('../../chunk-AQXKXZWB.cjs');
 require('../../chunk-V4FXUIMH.cjs');
 require('../../chunk-SZHDXXMK.cjs');
-require('../../chunk-IYU2ZH2J.cjs');
+require('../../chunk-CS5SZJFV.cjs');
 require('../../chunk-5GJM7VRR.cjs');
-require('../../chunk-3VINTJPE.cjs');
+require('../../chunk-5WMRVMXH.cjs');
 require('../../chunk-UJ7AXHRZ.cjs');
-require('../../chunk-KWV23THO.cjs');
-require('../../chunk-T4ZVKEDP.cjs');
-require('../../chunk-L4XOCV7S.cjs');
+require('../../chunk-EHQ2UGT4.cjs');
+require('../../chunk-OMTH355I.cjs');
+require('../../chunk-4DQ4CNAG.cjs');
 require('../../chunk-Z74QE57T.cjs');
 require('../../chunk-XZJCBIYR.cjs');
-require('../../chunk-63OCO2G5.cjs');
-require('../../chunk-YNDH72VU.cjs');
-require('../../chunk-CDBFQVPA.cjs');
-require('../../chunk-N6YCOBLK.cjs');
+require('../../chunk-A3UZFFR3.cjs');
+require('../../chunk-NNNRN4OF.cjs');
+require('../../chunk-FLS6DZEN.cjs');
+require('../../chunk-MGEUZRNQ.cjs');
 require('../../chunk-V45KLJQP.cjs');
 require('../../chunk-KHKPLOU4.cjs');
 
@@ -1901,4 +1901,4 @@ require('../../chunk-KHKPLOU4.cjs');
 
 
 
-exports.HelpCenterCard = _chunkHPGCUYAZcjs.HelpCenterCard; exports.HelpCenterCreateForm = _chunkHPGCUYAZcjs.HelpCenterCreateForm; exports.HelpCenterList = _chunkHPGCUYAZcjs.HelpCenterList; exports.TICKET_OPEN_PARAM = _chunkHLZUBJPLcjs.TICKET_OPEN_PARAM; exports.TICKET_TOAST_COPY = _chunkHPGCUYAZcjs.TOAST_COPY; exports.TicketCenter = _chunkHPGCUYAZcjs.TicketCenter; exports.TicketDetailDrawer = _chunkHPGCUYAZcjs.TicketDetailDrawer; exports.TicketLinkedDeliveryCard = _chunkHPGCUYAZcjs.TicketLinkedDeliveryCard; exports.TicketLiveProvider = _chunkLDGR5VCKcjs.TicketLiveProvider; exports.TicketOpenForm = _chunkHPGCUYAZcjs.TicketOpenForm; exports.TicketReplyComposer = _chunkHPGCUYAZcjs.TicketReplyComposer; exports.TicketRow = _chunkHPGCUYAZcjs.TicketRow; exports.buildTicketOpenHref = _chunkHLZUBJPLcjs.buildTicketOpenHref; exports.isOptimistic = _chunkHPGCUYAZcjs.isOptimistic; exports.mapTicketActionError = _chunkHPGCUYAZcjs.mapTicketActionError; exports.useOptionalTicketLive = _chunkLDGR5VCKcjs.useOptionalTicketLive; exports.useTicketActions = _chunkHPGCUYAZcjs.useTicketActions; exports.useTicketEngagements = _chunkHPGCUYAZcjs.useTicketEngagements; exports.useTicketLive = _chunkLDGR5VCKcjs.useTicketLive; exports.useTicketsList = _chunkHPGCUYAZcjs.useTicketsList;
+exports.HelpCenterCard = _chunkKRXHRL3Wcjs.HelpCenterCard; exports.HelpCenterCreateForm = _chunkKRXHRL3Wcjs.HelpCenterCreateForm; exports.HelpCenterList = _chunkKRXHRL3Wcjs.HelpCenterList; exports.TICKET_OPEN_PARAM = _chunk62TMGBROcjs.TICKET_OPEN_PARAM; exports.TICKET_TOAST_COPY = _chunkKRXHRL3Wcjs.TOAST_COPY; exports.TicketCenter = _chunkKRXHRL3Wcjs.TicketCenter; exports.TicketDetailDrawer = _chunkKRXHRL3Wcjs.TicketDetailDrawer; exports.TicketLinkedDeliveryCard = _chunkKRXHRL3Wcjs.TicketLinkedDeliveryCard; exports.TicketLiveProvider = _chunkAPO7GMZQcjs.TicketLiveProvider; exports.TicketOpenForm = _chunkKRXHRL3Wcjs.TicketOpenForm; exports.TicketReplyComposer = _chunkKRXHRL3Wcjs.TicketReplyComposer; exports.TicketRow = _chunkKRXHRL3Wcjs.TicketRow; exports.buildTicketOpenHref = _chunk62TMGBROcjs.buildTicketOpenHref; exports.isOptimistic = _chunkKRXHRL3Wcjs.isOptimistic; exports.mapTicketActionError = _chunkKRXHRL3Wcjs.mapTicketActionError; exports.useOptionalTicketLive = _chunkAPO7GMZQcjs.useOptionalTicketLive; exports.useTicketActions = _chunkKRXHRL3Wcjs.useTicketActions; exports.useTicketEngagements = _chunkKRXHRL3Wcjs.useTicketEngagements; exports.useTicketLive = _chunkAPO7GMZQcjs.useTicketLive; exports.useTicketsList = _chunkKRXHRL3Wcjs.useTicketsList;

package/dist/components/ui/allowed-domains-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"allowed-domains-input.d.ts","sourceRoot":"","sources":["../../../src/components/ui/allowed-domains-input.tsx"],"names":[],"mappings":"AASA,UAAU,wBAAwB;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,aAAa,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,mBAAmB,qHAoHxB,CAAC;AAIF,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAC/B,YAAY,EAAE,wBAAwB,EAAE,CAAC"}
+{"version":3,"file":"allowed-domains-input.d.ts","sourceRoot":"","sources":["../../../src/components/ui/allowed-domains-input.tsx"],"names":[],"mappings":"AASA,UAAU,wBAAwB;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,aAAa,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,mBAAmB,qHAqHxB,CAAC;AAIF,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAC/B,YAAY,EAAE,wBAAwB,EAAE,CAAC"}

package/dist/components/ui/allowed-domains-input.js

@@ -92,6 +92,7 @@ const AllowedDomainsInput = forwardRef(
           size: "compact",
           noPaddingX: true,
           type: "button",
+          "data-tone": "primary",
           onClick: addDomain,
           disabled,
           leftIcon: /* @__PURE__ */ jsx(PlusCircle, {}),

package/dist/components/ui/button/button-styles.d.ts

@@ -1,12 +1,13 @@
 export declare const buttonSurfaceClasses: {
     readonly accent: "bg-ods-accent text-ods-text-on-accent hover:bg-ods-accent-hover active:bg-ods-accent-active disabled:bg-ods-disabled aria-disabled:bg-ods-disabled";
-    readonly outline: "bg-ods-card text-ods-text-primary hover:bg-ods-bg-hover active:bg-ods-bg-active disabled:bg-ods-card disabled:text-ods-text-disabled aria-disabled:bg-ods-card aria-disabled:text-ods-text-disabled";
+    readonly outline: "bg-ods-card text-ods-text-primary hover:bg-ods-bg-hover active:bg-ods-bg-active disabled:bg-ods-card disabled:text-ods-text-disabled aria-disabled:bg-ods-card aria-disabled:text-ods-text-disabled data-[tone=accent]:hover:bg-ods-accent";
     readonly transparent: "bg-transparent text-ods-text-primary hover:bg-ods-bg-hover active:bg-ods-bg-active disabled:bg-transparent disabled:text-ods-text-disabled aria-disabled:bg-transparent aria-disabled:text-ods-text-disabled";
     readonly destructive: "bg-ods-error text-ods-text-on-accent hover:bg-ods-error-hover active:bg-ods-error-active disabled:bg-ods-disabled aria-disabled:bg-ods-disabled";
     readonly warning: "bg-ods-warning text-ods-text-on-accent hover:bg-ods-warning-hover active:bg-ods-warning-active disabled:bg-ods-disabled aria-disabled:bg-ods-disabled";
     readonly inverted: "bg-ods-text-primary text-ods-bg hover:bg-ods-text-secondary active:bg-ods-text-secondary disabled:bg-ods-disabled aria-disabled:bg-ods-disabled";
     readonly glyph: "bg-transparent text-ods-text-primary hover:bg-transparent active:bg-transparent disabled:bg-transparent disabled:text-ods-text-disabled aria-disabled:bg-transparent aria-disabled:text-ods-text-disabled";
-    readonly link: "bg-transparent text-ods-text-secondary hover:bg-transparent hover:text-ods-accent active:bg-transparent active:text-ods-accent-active disabled:bg-transparent disabled:text-ods-text-disabled aria-disabled:bg-transparent aria-disabled:text-ods-text-disabled";
+    readonly link: string;
+    readonly bare: string;
     readonly overlay: "rounded-full bg-ods-overlay text-ods-text-primary backdrop-blur-sm hover:text-ods-accent active:text-ods-accent-active disabled:text-ods-text-disabled aria-disabled:text-ods-text-disabled";
 };
 export declare const outlineBorderClasses = "border border-ods-border hover:border-ods-border-hover active:border-ods-border-active disabled:border-ods-border aria-disabled:border-ods-border";
@@ -47,14 +48,21 @@ export type ButtonSizeKey = keyof typeof BUTTON_SIZE_CLASS;
  *  - `data-state="active"` (Radix's convention): the selected row, tab or chip;
  *  - `data-state="open"` / `aria-expanded="true"`: the field whose popup is open;
  *  - `data-invalid`: the field that failed validation (the marker every field exposes);
- *  - `aria-pressed="true"`: the pressed chip.
+ *  - `aria-pressed="true"`: the pressed chip;
+ *  - `aria-selected="true"`: the chosen field (a choice drawn as a field);
+ *  - `aria-busy="true"`: the rail entry whose route is committing.
  *
- * A call site's `className` on a kind is layout only (width, flex, position, margin).
+ * Where a kind has a second look for the same state (a selected row marked with the accent rather than the hover
+ * surface, the segmented control's accent segment), the control names it with `data-tone`, declared on the kind below.
+ *
+ * A call site's `className` on a kind is layout only (width, flex, position, margin): never a colour.
  */
 export declare const BUTTON_KIND_CLASS: {
     readonly field: string;
     readonly row: string;
+    readonly rail: string;
     readonly tab: string;
+    readonly segment: string;
     readonly chip: string;
     readonly card: string;
     readonly cell: string;

package/dist/components/ui/button/button-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/button-styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,oBAAoB;;;;;;;;;;CAmCvB,CAAC;AAEX,eAAO,MAAM,oBAAoB,sJACoH,CAAC;AAWtJ,eAAO,MAAM,qBAAqB,0DAA0D,CAAC;AAW7F,eAAO,MAAM,oBAAoB;;;CAGvB,CAAC;AAGX,eAAO,MAAM,wBAAwB;;;;;;CAM3B,CAAC;AAEX,MAAM,MAAM,oBAAoB,GAAG,MAAM,OAAO,oBAAoB,CAAC;AAErE;;;GAGG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;CAuCpB,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAM3D;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,iBAAiB;;;;;;;CA2DpB,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,iBAAiB,CAAC"}
+{"version":3,"file":"button-styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/button-styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,oBAAoB;;;;;;;;;;;CAoEvB,CAAC;AAEX,eAAO,MAAM,oBAAoB,sJACoH,CAAC;AAWtJ,eAAO,MAAM,qBAAqB,0DAA0D,CAAC;AAW7F,eAAO,MAAM,oBAAoB;;;CAGvB,CAAC;AAGX,eAAO,MAAM,wBAAwB;;;;;;CAM3B,CAAC;AAEX,MAAM,MAAM,oBAAoB,GAAG,MAAM,OAAO,oBAAoB,CAAC;AAErE;;;GAGG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;CAuCpB,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAM3D;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;CAsHpB,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,iBAAiB,CAAC"}

package/dist/components/ui/button/button-styles.js

@@ -1,7 +1,8 @@
 "use client";
 const buttonSurfaceClasses = {
   accent: "bg-ods-accent text-ods-text-on-accent hover:bg-ods-accent-hover active:bg-ods-accent-active disabled:bg-ods-disabled aria-disabled:bg-ods-disabled",
-  outline: "bg-ods-card text-ods-text-primary hover:bg-ods-bg-hover active:bg-ods-bg-active disabled:bg-ods-card disabled:text-ods-text-disabled aria-disabled:bg-ods-card aria-disabled:text-ods-text-disabled",
+  // `data-tone="accent"`: the accent fill on hover (a card's "view" action).
+  outline: "bg-ods-card text-ods-text-primary hover:bg-ods-bg-hover active:bg-ods-bg-active disabled:bg-ods-card disabled:text-ods-text-disabled aria-disabled:bg-ods-card aria-disabled:text-ods-text-disabled data-[tone=accent]:hover:bg-ods-accent",
   transparent: "bg-transparent text-ods-text-primary hover:bg-ods-bg-hover active:bg-ods-bg-active disabled:bg-transparent disabled:text-ods-text-disabled aria-disabled:bg-transparent aria-disabled:text-ods-text-disabled",
   destructive: "bg-ods-error text-ods-text-on-accent hover:bg-ods-error-hover active:bg-ods-error-active disabled:bg-ods-disabled aria-disabled:bg-ods-disabled",
   warning: "bg-ods-warning text-ods-text-on-accent hover:bg-ods-warning-hover active:bg-ods-warning-active disabled:bg-ods-disabled aria-disabled:bg-ods-disabled",
@@ -20,7 +21,39 @@ const buttonSurfaceClasses = {
   // hover, and no surface in any state. Promoted to a variant because the
   // disclosure toggle was a primitive <button> restating these classes. Pair
   // with size="compact" and noPaddingX so the label aligns with the text above.
-  link: "bg-transparent text-ods-text-secondary hover:bg-transparent hover:text-ods-accent active:bg-transparent active:text-ods-accent-active disabled:bg-transparent disabled:text-ods-text-disabled aria-disabled:bg-transparent aria-disabled:text-ods-text-disabled",
+  //
+  // States, from the element's attributes: `data-state="active"` holds the accent (a filter trigger with filters
+  // applied). `data-tone="neutral"` takes the primary text on hover instead of the accent (a secondary text action:
+  // "Select all", "Mark all read"); `data-tone="primary"` sits in the primary text and takes the accent on hover (a
+  // value that opens something: an info row's link, a breadcrumb).
+  link: [
+    "bg-transparent text-ods-text-secondary hover:bg-transparent hover:text-ods-accent active:bg-transparent active:text-ods-accent-active disabled:bg-transparent disabled:text-ods-text-disabled aria-disabled:bg-transparent aria-disabled:text-ods-text-disabled",
+    "data-[tone=neutral]:hover:text-ods-text-primary",
+    "data-[tone=primary]:text-ods-text-primary data-[tone=primary]:hover:text-ods-accent",
+    "data-[state=active]:text-ods-accent data-[state=active]:hover:text-ods-accent data-[tone=neutral]:data-[state=active]:hover:text-ods-accent"
+  ].join(" "),
+  // A bare glyph control with no surface (a composer's send / add-context, a copy, a close, a field's clear): the
+  // secondary text, the primary on hover and keyboard focus, faded when disabled. Distinct from `transparent`, which
+  // is primary text on a hover fill. States, from the element's attributes:
+  //  - `aria-expanded="true"`: its popup is open, the glyph stays lit (primary);
+  //  - `data-state="active"`: the glyph is armed (the composer's send while the editor has focus), the accent;
+  //  - `data-tone="accent"`: a trigger that opens and presses in the accent (the composer's add-context);
+  //  - `data-tone="danger"`: a removal that takes the error colour on hover;
+  //  - `data-tone="error"` / `data-tone="success"`: a glyph drawn in that colour (an error's copy, a done state),
+  //    dimmed on hover;
+  //  - `data-tone="field"`: a field's adornment, lit in the accent while the field (the enclosing `group`) has focus
+  //    and in the error colour while it is invalid (`data-invalid` on the group).
+  bare: [
+    "bg-transparent text-ods-text-secondary outline-none hover:bg-transparent hover:text-ods-text-primary focus-visible:text-ods-text-primary active:bg-transparent",
+    "aria-expanded:text-ods-text-primary",
+    "data-[state=active]:text-ods-accent",
+    "data-[tone=accent]:aria-expanded:text-ods-accent data-[tone=accent]:active:text-ods-accent",
+    "data-[tone=danger]:hover:text-ods-error",
+    "data-[tone=error]:text-ods-error data-[tone=error]:hover:text-ods-error data-[tone=error]:hover:opacity-80",
+    "data-[tone=success]:text-ods-success data-[tone=success]:hover:text-ods-success data-[tone=success]:hover:opacity-80",
+    "data-[tone=field]:group-has-[textarea:focus]:text-ods-accent data-[tone=field]:focus-visible:text-ods-accent data-[tone=field]:group-data-[invalid]:text-ods-error",
+    "disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-40 disabled:hover:text-ods-text-secondary aria-disabled:opacity-40"
+  ].join(" "),
   // Chrome that sits ON media (video cards, image lightboxes): a scrim disc so
   // the glyph stays legible over an arbitrary frame. Promoted to a variant
   // because the walkthrough card, its theater and the bite cards were each
@@ -91,22 +124,62 @@ const BUTTON_KIND_CLASS = {
     "h-11 rounded-[6px] md:h-12",
     "border-ods-border bg-ods-card text-ods-text-primary text-h4 transition-colors duration-200",
     "enabled:hover:border-ods-border-hover enabled:hover:bg-ods-bg-hover enabled:active:border-ods-border-active enabled:active:bg-ods-bg-active",
+    // Open: the accent border, held under the cursor (a hover must not read as closing it).
     "data-[state=open]:border-ods-accent aria-expanded:border-ods-accent",
-    "data-[invalid]:border-ods-error enabled:data-[invalid]:hover:border-ods-error",
+    "enabled:data-[state=open]:hover:border-ods-accent enabled:aria-expanded:hover:border-ods-accent",
+    // Selected (a choice drawn as a field, `aria-selected="true"`): the accent border on the accent's light fill,
+    // whose hover and press are the fill's own steps.
+    "aria-selected:border-ods-accent aria-selected:bg-ods-open-yellow-light",
+    "enabled:aria-selected:hover:border-ods-accent enabled:aria-selected:hover:bg-ods-open-yellow-light-hover",
+    "enabled:aria-selected:active:border-ods-accent enabled:aria-selected:active:bg-ods-open-yellow-light-action",
+    // Invalid wins over open.
+    "data-[invalid]:border-ods-error enabled:data-[invalid]:hover:border-ods-error enabled:data-[invalid]:active:border-ods-error",
+    "data-[invalid]:data-[state=open]:border-ods-error data-[invalid]:aria-expanded:border-ods-error",
+    "enabled:data-[invalid]:data-[state=open]:hover:border-ods-error enabled:data-[invalid]:aria-expanded:hover:border-ods-error",
     "disabled:cursor-not-allowed disabled:bg-ods-bg disabled:text-ods-text-disabled disabled:[&_svg]:text-ods-text-disabled",
     "outline-none focus-visible:border-ods-accent",
     "[&_svg]:shrink-0"
   ].join(" "),
   // A clickable row of a list, a menu or a navigation: full width, its content on the left, the hover and the
-  // selected surface of the list.
+  // selected surface of the list. The selected row (`data-state="active"`) takes the hover surface; a list that marks
+  // its selection differently names its look with `data-tone` (the attribute, on the row and on its skeleton):
+  //  - `accent`: the accent's secondary fill, no hover surface (a chat list's open conversation);
+  //  - `link`: the accent text, no surface at all (a chat rail's navigation entries);
+  //  - `surface`: the raised surface, the hover still showing over it (a filter dropdown's checked option);
+  //  - `muted`: the border-grey fill, held under the cursor (a timeline's current event, a docs tree's open page);
+  //  - `card`: a card with its border, no hover over it; idle rows keep a transparent border (a capability list);
+  //  - `framed`: every row a bordered card, the selected one with the accent border (the mobile menu's entries).
   row: [
     "flex w-full items-center gap-[var(--spacing-system-s)] rounded-md px-[var(--spacing-system-m)] py-[var(--spacing-system-s)] text-left",
     "bg-transparent text-ods-text-primary text-h4 transition-colors duration-150",
-    "hover:bg-ods-bg-hover active:bg-ods-bg-active data-[state=active]:bg-ods-bg-active",
+    "hover:bg-ods-bg-hover active:bg-ods-bg-active data-[state=active]:bg-ods-bg-hover",
+    "data-[tone=accent]:hover:bg-transparent data-[tone=accent]:active:bg-transparent",
+    "data-[tone=accent]:data-[state=active]:bg-ods-accent-secondary data-[tone=accent]:data-[state=active]:hover:bg-ods-accent-secondary data-[tone=accent]:data-[state=active]:active:bg-ods-accent-secondary",
+    "data-[tone=link]:hover:bg-transparent data-[tone=link]:active:bg-transparent data-[tone=link]:data-[state=active]:bg-transparent data-[tone=link]:data-[state=active]:text-ods-accent",
+    "data-[tone=surface]:data-[state=active]:bg-ods-bg-surface data-[tone=surface]:data-[state=active]:hover:bg-ods-bg-hover",
+    "data-[tone=muted]:data-[state=active]:bg-ods-border",
+    "data-[tone=card]:border data-[tone=card]:border-transparent data-[tone=card]:data-[state=active]:border-ods-border data-[tone=card]:data-[state=active]:bg-ods-card",
+    "data-[tone=framed]:border data-[tone=framed]:border-ods-border data-[tone=framed]:bg-ods-card data-[tone=framed]:data-[state=active]:border-ods-accent data-[tone=framed]:data-[state=active]:bg-ods-card data-[tone=framed]:data-[state=active]:hover:bg-ods-bg-hover",
     "disabled:cursor-not-allowed disabled:text-ods-text-disabled disabled:hover:bg-transparent",
     KIND_FOCUS_INSET,
     "[&_svg]:shrink-0"
   ].join(" "),
+  // A navigation rail's entry (the app sidebar): the row's box with the rail's two layers. The hover is a wash on its
+  // own layer (`::after`), so it can fade while the current page switches in a single frame: the current page's entry
+  // (`data-state="active"`) takes the accent's light fill, the accent text and glyphs and the accent bar on its leading
+  // edge (`::before`). An entry whose route is still committing (`aria-busy="true"`) holds the hover wash and nothing
+  // else.
+  rail: [
+    "relative isolate flex w-full items-center justify-start gap-[var(--spacing-system-s)] px-[var(--spacing-system-m)] py-[var(--spacing-system-s)] text-left",
+    "bg-transparent text-ods-text-primary text-h4 [&_svg]:fill-ods-text-secondary",
+    "after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:bg-ods-bg-hover after:opacity-0 after:transition-opacity after:duration-150 after:content-['']",
+    "before:absolute before:bottom-0 before:left-0 before:top-0 before:w-1 before:content-['']",
+    "hover:after:opacity-100 aria-busy:after:opacity-100",
+    "data-[state=active]:bg-ods-open-yellow-light data-[state=active]:text-ods-accent data-[state=active]:[&_svg]:fill-ods-accent data-[state=active]:before:bg-ods-accent data-[state=active]:after:opacity-0",
+    "disabled:cursor-not-allowed disabled:text-ods-text-secondary disabled:opacity-50 disabled:after:opacity-0",
+    KIND_FOCUS_INSET,
+    "[&_svg]:shrink-0"
+  ].join(" "),
   // A tab of a tab strip or a tab list: secondary until it is the open one. A strip that marks its open and hovered
   // tab with the accent fade (the admin strip) says so on each tab with `data-emphasis="fade"`. ODS colour vars hold
   // hex values, so a Tailwind alpha modifier would produce no CSS; color-mix() derives the 10% stop from the token.
@@ -120,12 +193,29 @@ const BUTTON_KIND_CLASS = {
     KIND_FOCUS_INSET,
     "[&_svg]:shrink-0"
   ].join(" "),
+  // A segment of a segmented control (`TabSelector`): the label on the strip, a hover fill, and the selected segment
+  // (`data-state="active"`) filled with the raised surface; `data-tone="accent"` fills it with the accent instead. A
+  // disabled selected segment keeps the raised surface with secondary text.
+  segment: [
+    "flex items-center justify-center gap-[var(--spacing-system-xs)] whitespace-nowrap rounded-xs p-[var(--spacing-system-xsf)]",
+    "bg-transparent text-ods-text-primary text-h4 transition-colors duration-200",
+    "hover:bg-ods-bg-hover",
+    "data-[state=active]:cursor-default data-[state=active]:bg-ods-bg-surface data-[state=active]:text-ods-text-primary data-[state=active]:hover:bg-ods-bg-surface",
+    "data-[tone=accent]:data-[state=active]:bg-ods-accent data-[tone=accent]:data-[state=active]:text-ods-text-on-accent data-[tone=accent]:data-[state=active]:hover:bg-ods-accent",
+    "disabled:cursor-not-allowed disabled:bg-transparent disabled:text-ods-text-secondary disabled:hover:bg-transparent",
+    "disabled:data-[state=active]:bg-ods-bg-surface disabled:data-[state=active]:text-ods-text-secondary disabled:data-[state=active]:hover:bg-ods-bg-surface",
+    "disabled:data-[tone=accent]:data-[state=active]:bg-ods-bg-surface disabled:data-[tone=accent]:data-[state=active]:text-ods-text-secondary disabled:data-[tone=accent]:data-[state=active]:hover:bg-ods-bg-surface",
+    KIND_FOCUS_INSET,
+    "[&_svg]:shrink-0"
+  ].join(" "),
   // A choice drawn as a pill (a filter, a quick question, an answer option): bordered, the accent when picked.
   chip: [
     "inline-flex h-8 items-center gap-[var(--spacing-system-xxs)] rounded-full border px-[var(--spacing-system-sf)]",
     "border-ods-border bg-ods-card text-ods-text-primary text-h6 transition-colors duration-200",
     "hover:border-ods-border-hover hover:bg-ods-bg-hover",
     "aria-pressed:border-ods-accent data-[state=active]:border-ods-accent",
+    // `data-tone="accent"`: a pill that links somewhere takes the accent border on hover (a vendor pill).
+    "data-[tone=accent]:hover:border-ods-accent",
     "disabled:cursor-not-allowed disabled:text-ods-text-disabled disabled:hover:bg-ods-card",
     KIND_FOCUS,
     "[&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0"
@@ -134,11 +224,13 @@ const BUTTON_KIND_CLASS = {
   // content is the look; the button gives it the click, the keyboard and the focus ring.
   card: ["relative block w-full rounded-md text-left text-ods-text-primary", KIND_FOCUS].join(" "),
   // A cell of a bar (a header's or a chat's top bar): the bar's full height, an icon or a short label, secondary
-  // until hovered or pressed.
+  // until hovered. The current cell (`data-state="active"`: the header's open section) takes the pressed surface and
+  // the primary text.
   cell: [
     "flex h-full shrink-0 items-center justify-center gap-[var(--spacing-system-xsf)] px-[var(--spacing-system-m)]",
     "bg-transparent text-ods-text-secondary text-h4 transition-colors duration-200",
-    "hover:bg-ods-bg-hover hover:text-ods-text-primary aria-pressed:text-ods-accent aria-expanded:text-ods-text-primary data-[state=active]:text-ods-accent",
+    "hover:bg-ods-bg-hover hover:text-ods-text-primary aria-expanded:text-ods-text-primary",
+    "data-[state=active]:bg-ods-bg-active data-[state=active]:text-ods-text-primary",
     KIND_FOCUS_INSET,
     "[&_svg]:h-6 [&_svg]:w-6 [&_svg]:shrink-0"
   ].join(" ")

package/dist/components/ui/button/button.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 /** The `icon-sm` button's size (its `h-8 w-8`), for a layout that must leave room for one. */
 export declare const BUTTON_ICON_SM_SIZE = "2rem";
 declare const buttonVariants: (props?: ({
-    variant?: "accent" | "link" | "cell" | "row" | "tab" | "outline" | "transparent" | "destructive" | "warning" | "inverted" | "glyph" | "overlay" | "field" | "chip" | "card" | null | undefined;
+    variant?: "accent" | "link" | "cell" | "row" | "tab" | "bare" | "outline" | "transparent" | "destructive" | "warning" | "inverted" | "glyph" | "overlay" | "field" | "rail" | "segment" | "chip" | "card" | null | undefined;
     size?: "wrap" | "small" | "default" | "icon" | "small-legacy" | "compact" | "icon-sm" | "icon-inline" | "icon-glyph" | null | undefined;
     font?: "bold" | "regular" | null | undefined;
     fullWidth?: boolean | null | undefined;

package/dist/components/ui/button/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/button.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,MAAM,OAAO,CAAC;AAe1B,8FAA8F;AAC9F,eAAO,MAAM,mBAAmB,SAAS,CAAC;AAE1C,QAAA,MAAM,cAAc;;;;;;;8EA2FnB,CAAC;AAgGF,8HAA8H;AAC9H,KAAK,oBAAoB,GAAG,cAAc,CAAC;AAE3C,KAAK,UAAU,GACb,OAAO,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,EAAE,cAAc,GAAG,IAAI,GAAG,SAAS,CAAC,GAAG,oBAAoB,CAAC;AAEjH,UAAU,WACR,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,EAAE,MAAM,CAAC;IACxG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE;QACV,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,CAAC,EAAE,QAAQ,CAAC;QAClB;;wCAEgC;QAChC,GAAG,CAAC,EAAE,UAAU,GAAG,qBAAqB,CAAC;QACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;KACtD,GAAG,IAAI,CAAC;IACT,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAaD,QAAA,MAAM,MAAM,uFAyNV,CAAC;AAGH,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/button.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,MAAM,OAAO,CAAC;AAe1B,8FAA8F;AAC9F,eAAO,MAAM,mBAAmB,SAAS,CAAC;AAE1C,QAAA,MAAM,cAAc;;;;;;;8EA8FnB,CAAC;AAgGF,8HAA8H;AAC9H,KAAK,oBAAoB,GAAG,cAAc,CAAC;AAE3C,KAAK,UAAU,GACb,OAAO,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,EAAE,cAAc,GAAG,IAAI,GAAG,SAAS,CAAC,GAAG,oBAAoB,CAAC;AAEjH,UAAU,WACR,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,EAAE,MAAM,CAAC;IACxG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE;QACV,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,CAAC,EAAE,QAAQ,CAAC;QAClB;;wCAEgC;QAChC,GAAG,CAAC,EAAE,UAAU,GAAG,qBAAqB,CAAC;QACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;KACtD,GAAG,IAAI,CAAC;IACT,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAaD,QAAA,MAAM,MAAM,uFAyNV,CAAC;AAGH,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,CAAC"}

package/dist/components/ui/button/button.js

@@ -36,11 +36,14 @@ const buttonVariants = cva(
         glyph: buttonSurfaceClasses.glyph,
         overlay: buttonSurfaceClasses.overlay,
         link: buttonSurfaceClasses.link,
+        bare: buttonSurfaceClasses.bare,
         // The kinds that are not a plain push button own their whole box (`BUTTON_KIND_CLASS`); resolved
         // before this map is read, so `size` never reaches them. The entries only type the prop.
         field: "",
         row: "",
+        rail: "",
         tab: "",
+        segment: "",
         chip: "",
         card: "",
         cell: ""

package/dist/components/ui/file-manager/file-manager-breadcrumb.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-manager-breadcrumb.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/file-manager/file-manager-breadcrumb.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAE1D,wBAAgB,qBAAqB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,0BAA0B,qBAqBlG"}
+{"version":3,"file":"file-manager-breadcrumb.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/file-manager/file-manager-breadcrumb.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAE1D,wBAAgB,qBAAqB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,0BAA0B,qBAsBlG"}

package/dist/components/ui/file-manager/file-manager-breadcrumb.js

@@ -14,6 +14,7 @@ function FileManagerBreadcrumb({ items, onItemClick, className }) {
         size: "compact",
         noPaddingX: true,
         type: "button",
+        "data-tone": "primary",
         "aria-current": index === items.length - 1 ? "page" : void 0,
         onClick: () => onItemClick?.(item.path),
         className: "shrink-0",