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

package/dist/{chunk-5PBWAF2D.cjs → chunk-MDGDL3C7.cjs}

@@ -2,41 +2,41 @@
 
 
 
-var _chunkODZ5XGWAcjs = require('./chunk-ODZ5XGWA.cjs');
+var _chunkA4YUTS6Qcjs = require('./chunk-A4YUTS6Q.cjs');
 
 
 
 
 
 
-var _chunkUONQCE5Ncjs = require('./chunk-UONQCE5N.cjs');
+var _chunkTS6TISIFcjs = require('./chunk-TS6TISIF.cjs');
 
 
 
 
-var _chunkZV6RQNXEcjs = require('./chunk-ZV6RQNXE.cjs');
+var _chunkCBKXU77Hcjs = require('./chunk-CBKXU77H.cjs');
 
 
-var _chunkHLZUBJPLcjs = require('./chunk-HLZUBJPL.cjs');
+var _chunkN7QNWHJAcjs = require('./chunk-N7QNWHJA.cjs');
 
 
 
 
-var _chunkFWJ5YECNcjs = require('./chunk-FWJ5YECN.cjs');
+var _chunk7OJMOG34cjs = require('./chunk-7OJMOG34.cjs');
 
 
 
-var _chunkOHXB6HUXcjs = require('./chunk-OHXB6HUX.cjs');
+var _chunk5XAWVXNIcjs = require('./chunk-5XAWVXNI.cjs');
 
 
 
-var _chunkKWV23THOcjs = require('./chunk-KWV23THO.cjs');
+var _chunkEHQ2UGT4cjs = require('./chunk-EHQ2UGT4.cjs');
 
 
-var _chunkT4ZVKEDPcjs = require('./chunk-T4ZVKEDP.cjs');
+var _chunkOMTH355Icjs = require('./chunk-OMTH355I.cjs');
 
 
-var _chunkCDBFQVPAcjs = require('./chunk-CDBFQVPA.cjs');
+var _chunkFLS6DZENcjs = require('./chunk-FLS6DZEN.cjs');
 
 // src/components/contact/contact-form.tsx
 var _zod = require('@hookform/resolvers/zod');
@@ -119,14 +119,14 @@ function ContactForm({
   successToastMessage = "Redirecting you to join our community...",
   rescue: rescueForm = null
 } = {}) {
-  const attachments = _chunkFWJ5YECNcjs.useChatAttachments.call(void 0, );
-  const builtInSubmission = _chunkZV6RQNXEcjs.useContactSubmission.call(void 0, {
+  const attachments = _chunk7OJMOG34cjs.useChatAttachments.call(void 0, );
+  const builtInSubmission = _chunkCBKXU77Hcjs.useContactSubmission.call(void 0, {
     userId,
     successRedirectUrl,
     successToastMessage
   });
   const [customSubmitting, setCustomSubmitting] = _react.useState.call(void 0, false);
-  const { honeypotInputProps, getSignals, resetSignals } = _chunkZV6RQNXEcjs.useHumanitySignals.call(void 0, );
+  const { honeypotInputProps, getSignals, resetSignals } = _chunkCBKXU77Hcjs.useHumanitySignals.call(void 0, );
   const isSubmitting = onCustomSubmit ? customSubmitting : builtInSubmission.isSubmitting;
   const isSuccess = onCustomSubmit ? false : builtInSubmission.isSuccess;
   const form = _reacthookform.useForm.call(void 0, {
@@ -152,7 +152,7 @@ function ContactForm({
     ),
     [hideFields]
   );
-  const rescue = _chunkZV6RQNXEcjs.useRescuedForm.call(void 0, form, { rescue: rescueForm, fields: rescueFieldNames, getSignals });
+  const rescue = _chunkCBKXU77Hcjs.useRescuedForm.call(void 0, form, { rescue: rescueForm, fields: rescueFieldNames, getSignals });
   const handleFormSubmit = async (data) => {
     if (isSubmitting) return;
     if (attachmentsEnabled && attachments.hasInflightUploads) return;
@@ -190,7 +190,7 @@ function ContactForm({
       className: `flex h-full flex-col ${!noBorder ? "rounded-2xl border border-ods-border content-md:rounded-3xl" : ""} ${!noPadding ? "p-6 content-md:p-8 content-lg:p-10" : ""}`,
       children: [
         (title || subtitle) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mb-6 content-md:mb-8", children: [
-          title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: `${_chunkOHXB6HUXcjs.SECTION_HEADING_CLASS} mb-3 content-md:mb-4`, children: _chunkOHXB6HUXcjs.accentSentenceMarks.call(void 0, title) }),
+          title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: `${_chunk5XAWVXNIcjs.SECTION_HEADING_CLASS} mb-3 content-md:mb-4`, children: _chunk5XAWVXNIcjs.accentSentenceMarks.call(void 0, title) }),
           subtitle && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-ods-text-primary text-h4", children: subtitle })
         ] }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
@@ -203,22 +203,22 @@ function ContactForm({
               );
             }),
             className: "flex flex-grow flex-col space-y-4 content-md:space-y-6",
-            ..._chunkHLZUBJPLcjs.HUBSPOT_DO_NOT_COLLECT_FORM_PROPS,
+            ..._chunkN7QNWHJAcjs.HUBSPOT_DO_NOT_COLLECT_FORM_PROPS,
             children: [
               !showName && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", { type: "hidden", ...register("name") }),
               !showEmail && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", { type: "hidden", ...register("email") }),
               !showHelpCategory && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", { type: "hidden", ...register("helpCategory") }),
               !showMessage && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", { type: "hidden", ...register("message") }),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkODZ5XGWAcjs.HoneypotField, { ...honeypotInputProps }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkA4YUTS6Qcjs.HoneypotField, { ...honeypotInputProps }),
               extraTopField,
               showNameEmailRow && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "grid grid-cols-1 gap-4 content-md:grid-cols-2 content-md:gap-6", children: [
                 showName && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col", children: [
-                  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkT4ZVKEDPcjs.Label, { htmlFor: "name", children: [
+                  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkOMTH355Icjs.Label, { htmlFor: "name", children: [
                     "Your Name",
-                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKWV23THOcjs.RequiredMark, {})
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEHQ2UGT4cjs.RequiredMark, {})
                   ] }),
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _chunkKWV23THOcjs.Input,
+                    _chunkEHQ2UGT4cjs.Input,
                     {
                       id: "name",
                       type: "text",
@@ -233,12 +233,12 @@ function ContactForm({
                   errors.name && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { id: "name-error", className: "mt-1 text-ods-error text-h6", children: errors.name.message })
                 ] }),
                 showEmail && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col", children: [
-                  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkT4ZVKEDPcjs.Label, { htmlFor: "email", children: [
+                  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkOMTH355Icjs.Label, { htmlFor: "email", children: [
                     "Email",
-                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKWV23THOcjs.RequiredMark, {})
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEHQ2UGT4cjs.RequiredMark, {})
                   ] }),
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _chunkKWV23THOcjs.Input,
+                    _chunkEHQ2UGT4cjs.Input,
                     {
                       id: "email",
                       type: "email",
@@ -255,46 +255,46 @@ function ContactForm({
               ] }),
               (showCompanySize || showReferralSource) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "grid grid-cols-1 gap-4 content-md:grid-cols-2 content-md:gap-6", children: [
                 showCompanySize && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col", children: [
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkT4ZVKEDPcjs.Label, { htmlFor: "companySize", children: "Company Size" }),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOMTH355Icjs.Label, { htmlFor: "companySize", children: "Company Size" }),
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                     _reacthookform.Controller,
                     {
                       control,
                       name: "companySize",
-                      render: ({ field }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkUONQCE5Ncjs.Select, { onValueChange: field.onChange, value: _nullishCoalesce(field.value, () => ( "")), children: [
+                      render: ({ field }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkTS6TISIFcjs.Select, { onValueChange: field.onChange, value: _nullishCoalesce(field.value, () => ( "")), children: [
                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                          _chunkUONQCE5Ncjs.SelectTrigger,
+                          _chunkTS6TISIFcjs.SelectTrigger,
                           {
                             id: "companySize",
                             "aria-label": "Company Size",
                             className: "h-12 border-ods-border bg-ods-card px-3 text-ods-text-primary",
-                            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUONQCE5Ncjs.SelectValue, { placeholder: "Select company size" })
+                            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTS6TISIFcjs.SelectValue, { placeholder: "Select company size" })
                           }
                         ),
-                        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUONQCE5Ncjs.SelectContent, { children: companySizeOptions.map((opt) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUONQCE5Ncjs.SelectItem, { value: opt, children: opt }, opt)) })
+                        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTS6TISIFcjs.SelectContent, { children: companySizeOptions.map((opt) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTS6TISIFcjs.SelectItem, { value: opt, children: opt }, opt)) })
                       ] })
                     }
                   ),
                   errors.companySize && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { id: "companySize-error", className: "mt-1 text-ods-error text-h6", children: errors.companySize.message })
                 ] }),
                 showReferralSource && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col", children: [
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkT4ZVKEDPcjs.Label, { htmlFor: "referralSource", children: "How did you hear about us?" }),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOMTH355Icjs.Label, { htmlFor: "referralSource", children: "How did you hear about us?" }),
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                     _reacthookform.Controller,
                     {
                       control,
                       name: "referralSource",
-                      render: ({ field }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkUONQCE5Ncjs.Select, { onValueChange: field.onChange, value: _nullishCoalesce(field.value, () => ( "")), children: [
+                      render: ({ field }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkTS6TISIFcjs.Select, { onValueChange: field.onChange, value: _nullishCoalesce(field.value, () => ( "")), children: [
                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                          _chunkUONQCE5Ncjs.SelectTrigger,
+                          _chunkTS6TISIFcjs.SelectTrigger,
                           {
                             id: "referralSource",
                             "aria-label": "Referral Source",
                             className: "h-12 border-ods-border bg-ods-card px-3 text-ods-text-primary",
-                            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUONQCE5Ncjs.SelectValue, { placeholder: "Select an option" })
+                            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTS6TISIFcjs.SelectValue, { placeholder: "Select an option" })
                           }
                         ),
-                        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUONQCE5Ncjs.SelectContent, { children: referralSourceOptions.map((opt) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUONQCE5Ncjs.SelectItem, { value: opt, children: opt }, opt)) })
+                        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTS6TISIFcjs.SelectContent, { children: referralSourceOptions.map((opt) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTS6TISIFcjs.SelectItem, { value: opt, children: opt }, opt)) })
                       ] })
                     }
                   ),
@@ -302,39 +302,39 @@ function ContactForm({
                 ] })
               ] }),
               showHelpCategory && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col", children: [
-                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkT4ZVKEDPcjs.Label, { htmlFor: "helpCategory", children: [
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkOMTH355Icjs.Label, { htmlFor: "helpCategory", children: [
                   "Choose your main interest",
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKWV23THOcjs.RequiredMark, {})
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEHQ2UGT4cjs.RequiredMark, {})
                 ] }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                   _reacthookform.Controller,
                   {
                     control,
                     name: "helpCategory",
-                    render: ({ field }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkUONQCE5Ncjs.Select, { onValueChange: field.onChange, value: _nullishCoalesce(field.value, () => ( "")), children: [
+                    render: ({ field }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkTS6TISIFcjs.Select, { onValueChange: field.onChange, value: _nullishCoalesce(field.value, () => ( "")), children: [
                       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        _chunkUONQCE5Ncjs.SelectTrigger,
+                        _chunkTS6TISIFcjs.SelectTrigger,
                         {
                           id: "helpCategory",
                           "aria-label": "Help Category",
                           "aria-required": true,
                           className: "h-12 border-ods-border bg-ods-card px-3 text-ods-text-primary",
-                          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUONQCE5Ncjs.SelectValue, { placeholder: "Choose your main interest" })
+                          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTS6TISIFcjs.SelectValue, { placeholder: "Choose your main interest" })
                         }
                       ),
-                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUONQCE5Ncjs.SelectContent, { children: helpCategoryOptions.map((opt) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUONQCE5Ncjs.SelectItem, { value: opt, children: opt }, opt)) })
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTS6TISIFcjs.SelectContent, { children: helpCategoryOptions.map((opt) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTS6TISIFcjs.SelectItem, { value: opt, children: opt }, opt)) })
                     ] })
                   }
                 ),
                 errors.helpCategory && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { id: "helpCategory-error", className: "mt-1 text-ods-error text-h6", children: errors.helpCategory.message })
               ] }),
               showMessage && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-grow flex-col", children: [
-                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkT4ZVKEDPcjs.Label, { htmlFor: "message", children: [
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkOMTH355Icjs.Label, { htmlFor: "message", children: [
                   "Your Message",
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKWV23THOcjs.RequiredMark, {})
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEHQ2UGT4cjs.RequiredMark, {})
                 ] }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  _chunkODZ5XGWAcjs.Textarea,
+                  _chunkA4YUTS6Qcjs.Textarea,
                   {
                     id: "message",
                     ...register("message"),
@@ -349,7 +349,7 @@ function ContactForm({
               ] }),
               attachmentsEnabled && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-2", children: [
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  _chunkFWJ5YECNcjs.ChatAttachmentChipStrip,
+                  _chunk7OJMOG34cjs.ChatAttachmentChipStrip,
                   {
                     attachments: attachments.attachments,
                     onRemove: attachments.removeAttachment,
@@ -358,7 +358,7 @@ function ContactForm({
                 ),
                 /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2", children: [
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _chunkFWJ5YECNcjs.ChatAttachmentAddButton,
+                    _chunk7OJMOG34cjs.ChatAttachmentAddButton,
                     {
                       attachmentsEnabled: true,
                       attachmentsCount: attachments.attachments.length,
@@ -372,7 +372,7 @@ function ContactForm({
               /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mt-auto flex w-full flex-col items-center justify-end gap-4 pt-2 content-md:flex-row content-md:gap-6", children: [
                 footerText && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-center text-ods-text-secondary text-h6 content-md:text-left", children: footerText }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  _chunkCDBFQVPAcjs.Button,
+                  _chunkFLS6DZENcjs.Button,
                   {
                     type: "submit",
                     loading: isSubmitting,

package/dist/{chunk-N6YCOBLK.cjs → chunk-MGEUZRNQ.cjs}

@@ -64,8 +64,8 @@ function AnnouncedLoadingScope({
 }) {
   const outer = useLoadingScope();
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    status && active && !outer && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LoadingStatus, { label }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LoadingScope, { active, as, className, children })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LoadingScope, { active, as, className, children }),
+    status && active && !outer && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LoadingStatus, { label })
   ] });
 }
 function InertWhileLoading({
@@ -89,7 +89,8 @@ function LoadingItems({ count, children }) {
 // src/components/ui/button/button-styles.ts
 var 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",
@@ -108,7 +109,39 @@ var 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
@@ -179,22 +212,62 @@ var 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.
@@ -208,12 +281,29 @@ var 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"
@@ -222,11 +312,13 @@ var 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(" ")