@attrus-ds/core 1.0.19 → 1.0.20

package/dist/css/components/buttons.css

@@ -361,7 +361,8 @@
    in a segmented control, and styling from it keeps markup and look in step. */
 .btn-group .btn[aria-pressed="true"] {
   box-shadow: inset 0 0 0 999px color-mix(in srgb, currentColor 14%, transparent);
-  font-weight: var(--w-bold);
+  /* No weight change: the fill already marks the selection, and a bolder label
+     widens the segment on toggle, nudging every neighbour sideways. */
   /* The overlay stops at the border, and the next segment overlaps this one by a
      hairline — so without this the selected segment ended in a 1px light strip
      (its own untinted border, covered by the neighbour's fill). Lifting it above

package/dist/css/components/inputs.css

@@ -1302,3 +1302,121 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
   background: color-mix(in srgb, var(--color-pure-white) 6%, transparent);
   border-color: var(--color-border-inverse);
 }
+
+/* ----------------------------------------------------------------
+   INSET ACTION BUTTON — .fix-btn reads as a button, not a label
+   ----------------------------------------------------------------
+   A flush segment (divider + field fill) is the right language for a
+   SELECTOR: it qualifies the value, so it belongs to the field's surface, and
+   the chevron already says "dropdown". But the same treatment on an ACTION
+   made it read as a static label glued to the field. An action is its own
+   control, so it sits INSIDE the field as a button: inset from the edge,
+   its own border and radius, its own fill. .fix-select is untouched.
+   The inset is 6px on every side; the button's radius is the field's minus
+   that inset, so the two curves stay concentric.
+   ---------------------------------------------------------------- */
+:is(.group, .pill-search) > .fix-btn {
+  --fix-inset: 6px;
+  align-self: stretch;
+  height: auto;
+  margin: var(--fix-inset);
+  padding: 0 var(--space-3);
+  border: var(--border-hairline) solid var(--color-border-default);
+  /* Concentric (field radius − inset) comes out ~2px on a 6px field, which
+     reads as a square chip. Floor it at --radius-xs so it still reads as a
+     button; the curves stay visually parallel at this size. */
+  border-radius: max(var(--radius-xs), calc(var(--shape-control) - var(--fix-inset)));
+  background: var(--color-background-surface);
+  color: var(--color-foreground-default);
+  box-shadow: none;
+}
+/* the flush-segment dividers do not apply to a button that has its own border */
+:is(.group, .pill-search) > .fix-btn.l,
+:is(.group, .pill-search) > .fix-btn.r { border: var(--border-hairline) solid var(--color-border-default); }
+:is(.group, .pill-search) > .fix-btn.l { margin-right: 0; }
+:is(.group, .pill-search) > .fix-btn.r { margin-left: 0; }
+:is(.group, .pill-search) > .fix-btn:hover { background: var(--color-background-hover); border-color: var(--color-border-strong); color: var(--color-foreground-default); }
+:is(.group, .pill-search) > .fix-btn:active { background: var(--color-background-press); }
+:is(.group, .pill-search) > .fix-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-border-focus); }
+:is(.group, .pill-search) > .fix-btn.is-primary {
+  background: var(--color-brand-solid);
+  border-color: transparent;
+  color: var(--color-foreground-on-solid);
+}
+:is(.group, .pill-search) > .fix-btn.is-primary:hover { background: var(--color-brand-solid-hover); border-color: transparent; color: var(--color-foreground-on-solid); }
+:is(.group, .pill-search) > .fix-btn.is-primary:focus-visible { box-shadow: 0 0 0 2px var(--color-border-focus); }
+
+/* Pill field → pill button (concentric), and the end-padding the flush
+   segment needed to clear the round cap is no longer needed */
+:is(.group.is-pill, .pill-search) > .fix-btn,
+:is(.group.is-pill, .pill-search) > .fix-btn:first-child,
+:is(.group.is-pill, .pill-search) > .fix-btn:last-child { border-radius: var(--radius-pill); padding: 0 var(--space-4); }
+/* the pill clips its children for the flush selector; a clipped focus ring
+   on the inset button would be cut, so the ring is drawn inside instead */
+.pill-search > .fix-btn:focus-visible,
+.pill-search > .fix-btn.is-primary:focus-visible { box-shadow: inset 0 0 0 2px var(--color-border-focus); }
+.pill-search > .fix-btn.is-primary:focus-visible { box-shadow: inset 0 0 0 2px var(--color-foreground-on-solid), 0 0 0 0 transparent; }
+
+/* Underline field → a compact bordered button on the rule, not floating text */
+.group.underline > .fix-btn {
+  align-self: center;
+  height: calc(100% - 12px);
+  margin: 0 0 0 var(--space-2);
+  padding: 0 var(--space-3);
+  border: var(--border-hairline) solid var(--color-border-default);
+  border-radius: var(--shape-control);
+  background: var(--color-background-surface);
+  color: var(--color-foreground-default);
+  font-weight: var(--w-regular);
+  text-decoration: none;
+}
+.group.underline > .fix-btn:first-child { margin: 0 var(--space-2) 0 0; }
+.group.underline > .fix-btn:last-child { margin-right: 0; }
+.group.underline > .fix-btn.is-primary { background: var(--color-brand-solid); border-color: transparent; color: var(--color-foreground-on-solid); font-weight: var(--w-regular); }
+.group.underline > .fix-btn.is-primary:hover { background: var(--color-brand-solid-hover); color: var(--color-foreground-on-solid); }
+.group.underline > .fix-btn:focus-visible,
+.group.underline > .fix-btn.is-primary:focus-visible { box-shadow: 0 0 0 2px var(--color-border-focus); text-decoration: none; }
+
+/* on-inverse keeps the same shape, tinted for dark surfaces */
+.group.on-inverse > .fix-btn:not(.is-primary),
+.pill-search.on-inverse > .fix-btn:not(.is-primary) {
+  background: color-mix(in srgb, var(--color-pure-white) 8%, transparent);
+  border-color: var(--color-border-inverse);
+  color: var(--color-foreground-inverse-default);
+}
+
+/* ----------------------------------------------------------------
+   ADDON VARIANTS — the inset button speaks the Button vocabulary
+   ----------------------------------------------------------------
+   .fix-btn takes the same emphasis ladder as .btn, with the same tokens, so
+   "Apply" inside a field and "Apply" beside it read identically:
+     (none) / .is-secondary   neutral surface + hairline border (default)
+     .is-primary              brand fill — THE action of this field
+     .is-tertiary             soft neutral fill, borderless — quiet affirmative
+     .is-ghost                nothing until hover — secondary tools (copy, clear)
+     .is-danger               destructive solid
+     .is-danger-outline       destructive, contextual
+     .is-success              strong positive (rare)
+   Not offered: .link (it would read as a label again — the problem this button
+   exists to solve) and .inverse (the field's own on-inverse handles dark).
+   ---------------------------------------------------------------- */
+:is(.group, .pill-search) > .fix-btn.is-tertiary {
+  background: color-mix(in srgb, var(--color-foreground-default) 7%, transparent);
+  border-color: transparent;
+  color: var(--color-foreground-default);
+}
+:is(.group, .pill-search) > .fix-btn.is-tertiary:hover { background: color-mix(in srgb, var(--color-foreground-default) 12%, transparent); border-color: transparent; }
+:is(.group, .pill-search) > .fix-btn.is-ghost { background: transparent; border-color: transparent; color: var(--color-foreground-secondary); }
+:is(.group, .pill-search) > .fix-btn.is-ghost:hover { background: var(--color-background-hover); border-color: transparent; color: var(--color-foreground-default); }
+:is(.group, .pill-search) > .fix-btn.is-danger { background: var(--color-danger-500); border-color: transparent; color: var(--color-foreground-on-solid); }
+:is(.group, .pill-search) > .fix-btn.is-danger:hover { background: var(--color-danger-700); border-color: transparent; color: var(--color-foreground-on-solid); }
+:is(.group, .pill-search) > .fix-btn.is-danger-outline { background: var(--color-background-surface); border-color: var(--color-feedback-danger-border); color: var(--color-danger-500); }
+:is(.group, .pill-search) > .fix-btn.is-danger-outline:hover { background: var(--color-feedback-danger-background); border-color: var(--color-danger-500); color: var(--color-danger-500); }
+:is(.group, .pill-search) > .fix-btn.is-success { background: var(--color-success-500); border-color: transparent; color: var(--color-foreground-on-solid); }
+:is(.group, .pill-search) > .fix-btn.is-success:hover { background: var(--color-success-700); border-color: transparent; color: var(--color-foreground-on-solid); }
+/* the underline rules above set a surface fill; restate the variants there */
+.group.underline > .fix-btn.is-tertiary { background: color-mix(in srgb, var(--color-foreground-default) 7%, transparent); border-color: transparent; }
+.group.underline > .fix-btn.is-ghost { background: transparent; border-color: transparent; color: var(--color-foreground-secondary); }
+.group.underline > .fix-btn.is-danger { background: var(--color-danger-500); border-color: transparent; color: var(--color-foreground-on-solid); }
+.group.underline > .fix-btn.is-danger-outline { background: var(--color-background-surface); border-color: var(--color-feedback-danger-border); color: var(--color-danger-500); }
+.group.underline > .fix-btn.is-success { background: var(--color-success-500); border-color: transparent; color: var(--color-foreground-on-solid); }

package/dist/react/Input/Input.d.ts

@@ -3,9 +3,15 @@ import * as React from 'react';
 export type InputSize = 'sm' | 'md' | 'lg';
 export type InputStatus = 'default' | 'error' | 'success' | 'warning';
 
+export type InputAddonVariant =
+  | 'primary' | 'secondary' | 'tertiary' | 'ghost'
+  | 'danger' | 'danger-outline' | 'success';
+
 export type InputAddon =
   | { type: 'select'; options: Array<string | { value: string; label: React.ReactNode }>; value?: string; onChange?: (value: string) => void; 'aria-label': string }
-  | { type: 'button'; label: React.ReactNode; icon?: React.ReactNode; onClick?: () => void; primary?: boolean; disabled?: boolean; 'aria-label'?: string };
+  | { type: 'button'; label: React.ReactNode; icon?: React.ReactNode; onClick?: () => void; variant?: InputAddonVariant;
+      /** @deprecated use variant: 'primary' */
+      primary?: boolean; disabled?: boolean; 'aria-label'?: string };
 
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
   /** Field label (renders the .field wrapper). */

package/dist/react/Input/Input.tsx

@@ -22,6 +22,13 @@ export type InputStatus = 'default' | 'error' | 'success' | 'warning';
     `.fix-btn`). Static text belongs in `prefix`/`suffix`; use an addon only
     when the cell is a CONTROL — a qualifier the user picks, or an action that
     consumes this field. */
+/** Button emphasis available to an addon. Same names and tokens as Button;
+    'link' and 'inverse' are left out — a link inside a field reads as a label,
+    and dark surfaces are the field's own on-inverse job. */
+export type InputAddonVariant =
+  | 'primary' | 'secondary' | 'tertiary' | 'ghost'
+  | 'danger' | 'danger-outline' | 'success';
+
 export type InputAddon =
   | {
       type: 'select';
@@ -36,7 +43,10 @@ export type InputAddon =
       label: React.ReactNode;
       icon?: React.ReactNode;
       onClick?: () => void;
-      /** Filled — only when this is THE action of the field. */
+      /** Emphasis — the Button ladder, minus link/inverse. Default 'secondary'.
+          'primary' only when this is THE action of the field. */
+      variant?: InputAddonVariant;
+      /** @deprecated use variant: 'primary' */
       primary?: boolean;
       disabled?: boolean;
       'aria-label'?: string;
@@ -103,7 +113,7 @@ function renderAddon(a: InputAddon, side: 'l' | 'r'): React.ReactNode {
   return (
     <button
       type="button"
-      className={['fix-btn', side, a.primary ? 'is-primary' : ''].filter(Boolean).join(' ')}
+      className={['fix-btn', side, (() => { const v = a.variant || (a.primary ? 'primary' : 'secondary'); return v === 'secondary' ? '' : 'is-' + v; })()].filter(Boolean).join(' ')}
       onClick={a.onClick}
       disabled={a.disabled}
       aria-label={a['aria-label']}

package/dist/react/SearchPill/SearchPill.tsx

@@ -63,7 +63,7 @@ function renderAddon(a: InputAddon, side: 'l' | 'r'): React.ReactNode {
     );
   }
   return (
-    <button type="button" className={['fix-btn', side, a.primary ? 'is-primary' : ''].filter(Boolean).join(' ')}
+    <button type="button" className={['fix-btn', side, (() => { const v = a.variant || (a.primary ? 'primary' : 'secondary'); return v === 'secondary' ? '' : 'is-' + v; })()].filter(Boolean).join(' ')}
       onClick={a.onClick} disabled={a.disabled} aria-label={a['aria-label']}>
       {a.icon}
       {a.label}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@attrus-ds/core",
-  "version": "1.0.19",
+  "version": "1.0.20",
   "description": "ATTRUS / Cabiros design system — design tokens, component styles, brand assets, fonts and an optional typed React component layer.",
   "keywords": [
     "design-system",