@attrus-ds/core 1.0.18 → 1.0.19

package/dist/css/components/buttons.css

@@ -330,3 +330,72 @@
 .btn-group .btn + .btn { margin-left: calc(var(--border-hairline) * -1); }
 .btn-group .btn:focus-visible,
 .btn-group .btn:hover { z-index: 1; }
+
+/* Seam for borderless fills. Primary, tertiary, ghost, danger and inverse carry a
+   TRANSPARENT border, so with the one-hairline overlap above there is nothing to
+   divide the segments — the group reads as one long button. The divider is drawn
+   in currentColor so it contrasts with any fill without a per-variant token.
+
+   These variants also drop the overlap. It exists to merge two visible borders
+   into one; with no border to merge it only stacks the two fills on a 1px strip,
+   and on a translucent fill (tertiary, ghost hover, the on-inverse surfaces) that
+   strip paints twice — a divider visibly thicker than the bordered variants'. */
+.btn-group .btn-primary + .btn-primary,
+.btn-group .btn-tertiary + .btn-tertiary,
+.btn-group .btn-ghost + .btn-ghost,
+.btn-group .btn-danger + .btn-danger,
+.btn-group .btn-inverse + .btn-inverse {
+  margin-left: 0;
+  box-shadow: inset var(--border-hairline) 0 0 0 color-mix(in srgb, currentColor 22%, transparent);
+}
+
+/* Selected segment. One rule for every variant: an overlay of the variant's own
+   text colour. It darkens a light fill and lightens a dark one, so "selected"
+   stays legible on primary, secondary, danger and inverse alike.
+
+   Drawn as an INSET shadow, not a background layer: a background paints under
+   the border too, so on a bordered variant the selected segment's hairlines
+   picked up the tint and read thicker than the rest of the group. An inset
+   shadow stays inside the border and leaves every seam the same weight.
+   aria-pressed is the state: it is what a screen reader announces for a toggle
+   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);
+  /* 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
+     its neighbours and drawing its border in the seam colour closes the edge:
+     the selected segment reads as one tinted block with a clean outline. */
+  position: relative;
+  z-index: 1;
+  border-color: color-mix(in srgb, currentColor 22%, transparent);
+}
+/* Borderless variants paint the overlay as a background instead. Their 1px
+   border is TRANSPARENT, and an inset shadow stops at the border — so it left a
+   1px untinted ring around the selected segment, most visible on its right edge.
+   With no hairline to thicken, tinting the border box is exactly right here. */
+.btn-group .btn-primary[aria-pressed="true"],
+.btn-group .btn-tertiary[aria-pressed="true"],
+.btn-group .btn-ghost[aria-pressed="true"],
+.btn-group .btn-danger[aria-pressed="true"],
+.btn-group .btn-inverse[aria-pressed="true"] {
+  background-image: linear-gradient(color-mix(in srgb, currentColor 14%, transparent), color-mix(in srgb, currentColor 14%, transparent));
+  /* borderless: keep the border transparent — the fill already covers it */
+  border-color: transparent;
+}
+/* The tinted block is its own divider on borderless variants, so neither it nor
+   the segment after it draws a seam. A seam there sits one pixel inside the
+   neighbour's transparent border and leaves a light pixel between the tint and
+   the line — a doubled edge on both sides of the selected segment. */
+.btn-group .btn-primary[aria-pressed="true"],
+.btn-group .btn-tertiary[aria-pressed="true"],
+.btn-group .btn-ghost[aria-pressed="true"],
+.btn-group .btn-danger[aria-pressed="true"],
+.btn-group .btn-inverse[aria-pressed="true"],
+.btn-group .btn-primary[aria-pressed="true"] + .btn-primary,
+.btn-group .btn-tertiary[aria-pressed="true"] + .btn-tertiary,
+.btn-group .btn-ghost[aria-pressed="true"] + .btn-ghost,
+.btn-group .btn-danger[aria-pressed="true"] + .btn-danger,
+.btn-group .btn-inverse[aria-pressed="true"] + .btn-inverse { box-shadow: none; }
+

package/dist/css/components/callout.css

@@ -201,7 +201,13 @@
   padding: var(--space-3) var(--space-6);
   border-left: 3px solid var(--callout-tint);   /* accent rule for scannability */
 }
-.callout-bar > i, .callout-bar > svg, .callout-bar .callout-icon { margin-top: 0; }
+/* The base rule pins the icon (and the dismiss) to the first line with
+   align-self: flex-start — right for a multi-line callout. A bar centres its
+   row with align-items: center, but align-self on the item beats align-items
+   on the container, so without resetting it here the icon stays at the top
+   while the text and the actions centre (18px vs 25px in a 50px bar). */
+.callout-bar > i, .callout-bar > svg, .callout-bar .callout-icon { margin-top: 0; align-self: center; }
+.callout-bar .callout-dismiss { align-self: center; }
 .callout-bar .callout-content { flex-direction: row; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
 .callout-bar .callout-actions { margin-top: 0; margin-left: auto; }
 .callout-bar .callout-dismiss { align-self: center; margin-top: 0; }

package/dist/css/components/cards.css

@@ -13,7 +13,10 @@
   background: var(--color-background-surface);
   border: 1px solid var(--color-border-default);
   border-radius: var(--shape-container);
-  box-shadow: var(--shadow-xs);
+  /* Flat at rest: the hairline border separates the card from the canvas.
+     Shadow is reserved for what floats (.raised, .floating) and for the
+     interaction feedback on .interactive:hover. */
+  box-shadow: none;
   color: var(--color-foreground-default);
   font-family: var(--font-sans);
   /* base padding kicks in only when the card holds direct content
@@ -258,7 +261,8 @@
 }
 .card.interactive:active {
   transform: translateY(0);
-  box-shadow: var(--shadow-xs);
+  /* Press returns the card to its flat resting state */
+  box-shadow: none;
 }
 .card.interactive:focus-visible {
   outline: none;

package/dist/css/components/inputs.css

@@ -281,6 +281,95 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
 .group.is-error          { border-color: var(--color-border-danger); }
 .group.is-error:focus-within { box-shadow: var(--shadow-focus-danger); }
 
+/* ----------------------------------------------------------------
+   5b. COMBO — an interactive segment attached to the field
+   ----------------------------------------------------------------
+   .fix is static text ("USD", ".com"). When the attached cell is a CONTROL —
+   a unit/currency/country selector before the value, or an action after it
+   (Copy, Apply, Search) — it needs its own hit area, hover and focus ring, and
+   it must keep the group's single outline. Two segment types:
+
+     .fix-select.l|.r   native <select> + .chev, reads as a cell of the field
+     .fix-btn.l|.r      <button>; add .is-primary when it is THE action
+
+   The same segments attach to .pill-search (see §6). Both sit inside .group, so they inherit its height, radius clip and the one
+   focus ring on :focus-within; their own focus is an inset ring so it cannot
+   be clipped by the group's overflow.
+   ---------------------------------------------------------------- */
+:is(.group, .pill-search) > .fix-select,
+:is(.group, .pill-search) > .fix-btn {
+  flex-shrink: 0;
+  background: var(--color-background-subtle);
+  transition: background var(--transition-fast), color var(--transition-fast);
+}
+:is(.group, .pill-search) > .fix-select.l,
+:is(.group, .pill-search) > .fix-btn.l { border-right: var(--border-hairline) solid var(--color-border-default); }
+:is(.group, .pill-search) > .fix-select.r,
+:is(.group, .pill-search) > .fix-btn.r { border-left: var(--border-hairline) solid var(--color-border-default); }
+
+:is(.group, .pill-search) > .fix-select { position: relative; display: flex; align-items: stretch; }
+:is(.group, .pill-search) > .fix-select > select {
+  appearance: none;
+  -webkit-appearance: none;
+  height: 100%;
+  margin: 0;
+  border: 0;
+  outline: none;
+  background: transparent;
+  /* room on the right for the chevron */
+  padding: 0 calc(var(--space-4) + var(--icon-xs) + var(--space-1)) 0 var(--space-4);
+  color: var(--color-foreground-default);
+  font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust);
+  font-size: var(--fs-sm);
+  cursor: pointer;
+}
+:is(.group, .pill-search) > .fix-select > .chev {
+  position: absolute;
+  top: 50%;
+  right: var(--space-3);
+  width: var(--icon-xs);
+  height: var(--icon-xs);
+  transform: translateY(-50%);
+  color: var(--color-foreground-muted);
+  pointer-events: none;
+}
+:is(.group, .pill-search) > .fix-select:hover { background: var(--color-background-hover); }
+:is(.group, .pill-search) > .fix-select > select:focus-visible { box-shadow: inset 0 0 0 2px var(--color-border-focus); }
+
+:is(.group, .pill-search) > .fix-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  height: 100%;
+  margin: 0;
+  padding: 0 var(--space-4);
+  border-top: 0;
+  border-bottom: 0;
+  color: var(--color-foreground-secondary);
+  font-family: var(--font-sans);
+  font-size: var(--fs-sm);
+  font-weight: var(--w-regular);
+  white-space: nowrap;
+  cursor: pointer;
+}
+:is(.group, .pill-search) > .fix-btn.l { border-left: 0; }
+:is(.group, .pill-search) > .fix-btn.r { border-right: 0; }
+:is(.group, .pill-search) > .fix-btn svg,
+:is(.group, .pill-search) > .fix-btn i { width: var(--icon-sm); height: var(--icon-sm); stroke-width: var(--icon-stroke); }
+:is(.group, .pill-search) > .fix-btn:hover { background: var(--color-background-hover); color: var(--color-foreground-default); }
+:is(.group, .pill-search) > .fix-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-border-focus); }
+:is(.group, .pill-search) > .fix-btn:disabled { cursor: not-allowed; color: var(--color-foreground-disabled); background: var(--color-background-sunken); }
+/* The field's one decisive action — filled, so it is found without reading */
+:is(.group, .pill-search) > .fix-btn.is-primary {
+  background: var(--color-brand-solid);
+  color: var(--color-foreground-on-solid);
+  border-color: var(--color-brand-solid);
+}
+:is(.group, .pill-search) > .fix-btn.is-primary:hover { background: var(--color-brand-solid-hover); color: var(--color-foreground-on-solid); }
+:is(.group, .pill-search) > .fix-btn.is-primary:focus-visible { box-shadow: inset 0 0 0 2px var(--color-foreground-on-solid); }
+
 
 /* ----------------------------------------------------------------
    6. PILL SEARCH (⌘K-style)
@@ -335,19 +424,74 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
 }
 .pill-search > input::placeholder { color: var(--color-foreground-placeholder); }
 .kbd {
+  /* A fixed box, not text with padding. With padding alone the chip was 19px
+     tall on a 15px line box, the ⌘ glyph and the letter sat on different
+     optical baselines, and caps letter-spacing added trailing space that pushed
+     the pair off-centre. Height + min-width + centred flex fix all three. */
   display: inline-flex;
   align-items: center;
+  justify-content: center;
+  gap: 2px;
+  box-sizing: border-box;
+  height: 20px;
+  min-width: 20px;
+  padding: 0 var(--space-2);
+  flex-shrink: 0;
   font-family: var(--font-mono);
   font-size-adjust: var(--font-mono-adjust);
   font-size: var(--fs-xxs);
   font-weight: var(--w-regular);
+  line-height: 1;
+  letter-spacing: 0;
   color: var(--color-foreground-muted);
   background: var(--color-background-subtle);
-  border: 1px solid var(--color-border-default);
+  border: var(--border-hairline) solid var(--color-border-default);
   border-radius: var(--radius-2xs);
-  padding: 1px var(--space-2);
-  letter-spacing: var(--ls-caps);
 }
+/* Split keys: <span class="kbd"><kbd>⌘</kbd><kbd>K</kbd></span> — each glyph
+   gets its own centred cell, so a symbol and a letter share one baseline. */
+.kbd > kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1ch;
+  font: inherit;
+  line-height: 1;
+}
+.pill-search-sm .kbd { height: 18px; min-width: 18px; padding: 0 var(--space-1); }
+/* On a pill the trailing chip sits against a ROUND end, so the inset that
+   reads as even is the vertical one, not the field's horizontal padding:
+   (40 − 20) / 2 at md, (32 − 18) / 2 at sm. The border sits outside the
+   content height on both axes, so it cancels out — measured 11/11 and 8/8. */
+.pill-search:has(> .kbd:last-child) { padding-right: calc((var(--control-h-md) - 20px) / 2); }
+.pill-search-sm:has(> .kbd:last-child) { padding-right: calc((var(--control-h-sm) - 18px) / 2); }
+
+/* Combo on the pill — a selector or button flush with a rounded end. The pill
+   clips them to its radius; the end the segment touches loses its padding, and
+   the segment adds a little extra on that side so its content clears the curve. */
+.pill-search:has(> .fix-select, > .fix-btn) { overflow: hidden; }
+.pill-search:has(> :is(.fix-select, .fix-btn):first-child) { padding-left: 0; }
+.pill-search:has(> :is(.fix-select, .fix-btn):last-child) { padding-right: 0; }
+.pill-search > .fix-select,
+.pill-search > .fix-btn { align-self: stretch; height: auto; }
+.pill-search > .fix-select:first-child > select { padding-left: var(--space-5); }
+.pill-search > .fix-select:last-child > select { padding-right: calc(var(--space-5) + var(--icon-xs) + var(--space-1)); }
+.pill-search > .fix-select:last-child > .chev { right: var(--space-4); }
+.pill-search > .fix-btn:first-child { padding-left: var(--space-5); }
+.pill-search > .fix-btn:last-child { padding-right: var(--space-5); }
+/* The segment's own corners must follow the pill's round end. Clipping by the
+   pill's overflow only trims the paint OUTSIDE the curve — the inset focus ring
+   and the pressed fill are drawn on the segment's box, which was square, so they
+   showed straight corners inside a rounded field. Rounding the outer side of the
+   segment (and of the select it wraps) makes every state trace the pill. */
+.pill-search > .fix-btn:first-child,
+.pill-search > .fix-select:first-child,
+.pill-search > .fix-select:first-child > select { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
+.pill-search > .fix-btn:last-child,
+.pill-search > .fix-select:last-child,
+.pill-search > .fix-select:last-child > select { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
+.pill-search-sm > .fix-btn,
+.pill-search-sm > .fix-select > select { font-size: var(--fs-xs); }
 
 
 /* ----------------------------------------------------------------
@@ -367,6 +511,74 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
 }
 .input.underline.is-error { border-bottom-color: var(--color-border-danger); }
 
+/* ----------------------------------------------------------------
+   7b. GROUP SHAPES — the combo input in pill and underline form
+   ----------------------------------------------------------------
+   .group is the rectangular field. Two shape modifiers carry the same combo
+   segments (.fix / .fix-select / .fix-btn) onto the other two field shapes, so
+   a page that uses pill or underline inputs does not have to drop back to a
+   rectangle the moment a field needs a selector or a button.
+
+     .group.is-pill      rounded ends; end segments trace the curve
+     .group.underline    bottom rule only; segments lose fill and seams
+   ---------------------------------------------------------------- */
+.group.is-pill { border-radius: var(--radius-pill); }
+.group.is-pill > input:first-child { padding-left: var(--space-5); }
+.group.is-pill > input:last-child { padding-right: var(--space-5); }
+.group.is-pill > .fix:first-child,
+.group.is-pill > .fix-btn:first-child { padding-left: var(--space-5); }
+.group.is-pill > .fix:last-child,
+.group.is-pill > .fix-btn:last-child { padding-right: var(--space-5); }
+.group.is-pill > .fix-select:first-child > select { padding-left: var(--space-5); }
+/* End segments round their outer side, so focus rings and fills trace the pill
+   instead of drawing square corners inside it. */
+.group.is-pill > :is(.fix, .fix-btn, .fix-select):first-child,
+.group.is-pill > .fix-select:first-child > select { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
+.group.is-pill > :is(.fix, .fix-btn, .fix-select):last-child,
+.group.is-pill > .fix-select:last-child > select { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
+
+/* Underline: the rule IS the field. Segments sit on the canvas, keep their text
+   and chevron, and are separated from the value by space instead of a seam — a
+   vertical line on a borderless field reads as a stray mark. */
+.group.underline {
+  border: 0;
+  border-bottom: var(--border-hairline) solid var(--color-border-default);
+  border-radius: 0;
+  background: transparent;
+  gap: var(--space-3);
+}
+.group.underline:focus-within { border-bottom-color: var(--color-border-focus); box-shadow: none; }
+.group.underline.is-error { border-bottom-color: var(--color-border-danger); }
+.group.underline.is-error:focus-within { box-shadow: none; }
+.group.underline > input { padding: 0; }
+.group.underline > :is(.fix, .fix-select, .fix-btn) {
+  background: transparent;
+  border-left: 0;
+  border-right: 0;
+}
+.group.underline > .fix { padding: 0; }
+.group.underline > .fix-select > select { padding-left: 0; }
+.group.underline > .fix-btn { padding: 0 var(--space-2); border-radius: var(--radius-xs); }
+.group.underline > .fix-btn:last-child { margin-right: calc(-1 * var(--space-2)); }
+.group.underline > .fix-btn:hover { background: var(--color-background-hover); }
+/* A filled block on a quiet field shouts — the primary action becomes brand text */
+.group.underline > .fix-btn.is-primary { background: transparent; color: var(--color-foreground-brand); font-weight: var(--w-bold); }
+.group.underline > .fix-btn.is-primary:hover { background: var(--color-background-hover); color: var(--color-foreground-brand); }
+/* Focus on an underline field is the rule turning focus-blue — nothing else. The
+   segments' inset rings (right on a boxed field) drew a rectangle on a field that
+   has no box, so they are dropped here. Which segment holds focus is still shown,
+   by underlining its own label in the focus colour: the one mark this shape
+   already speaks. */
+.group.underline > .fix-select > select:focus-visible,
+.group.underline > .fix-btn:focus-visible,
+.group.underline > .fix-btn.is-primary:focus-visible {
+  box-shadow: none;
+  text-decoration: underline;
+  text-decoration-color: var(--color-border-focus);
+  text-decoration-thickness: 2px;
+  text-underline-offset: 4px;
+}
+
 
 /* ----------------------------------------------------------------
    8. CHIPS — multi-select / token input

package/dist/css/components/sidebar.css

@@ -20,7 +20,8 @@
   background: var(--color-background-surface);
   border: 1px solid var(--color-border-default);
   border-radius: var(--radius-md);
-  box-shadow: var(--shadow-sm);
+  /* Flat at rest — the sidebar does not float over the page */
+  box-shadow: none;
   display: flex; flex-direction: column;
   overflow: hidden;
 }

package/dist/css/components/table.css

@@ -56,18 +56,22 @@
   border: 1px solid var(--color-border-default);
   border-radius: var(--shape-container);
   overflow: hidden;
-  box-shadow: var(--shadow-xs);
+  /* Flat at rest — the hairline border is the separation */
+  box-shadow: none;
 }
 
 .dt-toolbar {
   display: flex;
   align-items: center;
   gap: var(--space-4);
-  /* Box on the element, not on a descendant selector: the height must survive a
-     toolbar that is not a direct child of .dt-wrap, or the selecting state
-     renders 5px taller and the table jumps when the first row is ticked. */
-  height: 52px;
-  padding: 0 var(--space-5);
+  /* Height comes from a vertical inset around the controls, not a fixed box. A
+     fixed 52px left 6px above and below a 40px field — the control read as
+     jammed against the rules. The inset now guarantees breathing room for any
+     control size, and min-height keeps the bar steady when it holds only text,
+     so the selecting state (same controls) still does not make the table jump.
+     Box on the element, not a descendant selector, so it holds anywhere. */
+  min-height: calc(var(--control-h-sm) + 2 * var(--space-5) + var(--border-hairline));
+  padding: var(--space-5) var(--space-5);
   box-sizing: border-box;
   border-bottom: 1px solid var(--color-border-subtle);
   background: var(--color-background-surface);
@@ -645,7 +649,8 @@
        card would measure 100% PLUS the gutters and hang off the right edge.
        auto lets it shrink to the space the margins leave. */
     width: auto;
-    box-shadow: var(--shadow-xs);
+    /* Stacked cards are resting surfaces too: border only */
+    box-shadow: none;
   }
   .dt-responsive .dt tbody tr:last-child { margin-bottom: var(--space-3); border-bottom: 1px solid var(--color-border-default); }
 
@@ -1203,11 +1208,14 @@ a.dt-detail-card:focus-visible { outline: none; box-shadow: var(--shadow-focus);
   display: flex;
   align-items: center;
   gap: var(--space-4);
-  height: 52px;
-  padding: 0 var(--space-5);
+  min-height: calc(var(--control-h-sm) + 2 * var(--space-5) + var(--border-hairline));
+  padding: var(--space-5) var(--space-5);
   box-sizing: border-box;
 }
-.dt-toolbar.dt-toolbar-sm { height: 44px; padding: 0 var(--space-4); }
+/* Dense: tighter inset, same principle — 12px above and below the controls
+   (16px at md). --space-4 is 12px; the earlier --space-3 was only 8px, which
+   is what left the dense bar jammed. */
+.dt-toolbar.dt-toolbar-sm { min-height: calc(var(--control-h-sm) + 2 * var(--space-4) + var(--border-hairline)); padding: var(--space-4) var(--space-4); }
 .dt-toolbar-lead { display: inline-flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
 .dt-toolbar-filters { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; flex: 1 1 auto; }
 .dt-toolbar-actions { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
@@ -1263,19 +1271,22 @@ a.dt-detail-card:focus-visible { outline: none; box-shadow: var(--shadow-focus);
 .dt-wrap > .dt-scroll-y:has(+ .dt-pagination) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
 
 /* ----------------------------------------------------------------
-   FRAME OWNERSHIP — the wrap only draws a border when nothing else bounds it
+   FRAME OWNERSHIP
    ----------------------------------------------------------------
-   .dt-wrap's border says "the table starts and ends here". A toolbar closes the
-   top, a pager closes the bottom, and a card/drawer closes all four — in those
-   cases the border is a second contour around a boundary that already reads.
-   Radius stays either way: it is what clips the thead corners.
+   Product rule: a table ALWAYS has its border — with a toolbar, with a pager,
+   with both or with neither. The base .dt-wrap rule draws it, and a toolbar or
+   pager does not replace it: they sit inside the frame and divide themselves
+   from the body with their own seam (toolbar border-bottom, pager border-top).
+
+   An earlier version zeroed the wrap border whenever a toolbar or pager was
+   present, on the theory that "the pager closes the bottom and the toolbar the
+   top". But it zeroed all FOUR sides, so every paginated table lost its sides
+   and top and was left with a shadow and a bottom rule — Counterparties had a
+   frame and Payment Requests did not.
+
+   The one real exception is a table sitting inside a container that is already
+   the frame; there the wrap border would be a second contour.
    ---------------------------------------------------------------- */
-.dt-wrap:has(> .dt-toolbar),
-.dt-wrap:has(> .dt-pagination) { border: 0; }
-/* Chrome carries the edge instead */
-.dt-wrap:has(> .dt-toolbar) > .dt-toolbar { border-top: var(--border-hairline) solid var(--color-border-default); }
-.dt-wrap:has(> .dt-pagination) > .dt-pagination { border-bottom: var(--border-hairline) solid var(--color-border-default); }
-/* Inside a card, drawer or modal the container is the frame */
 .demo-card-canvas .dt-wrap,
 .drawer-body .dt-wrap,
 .modal-body .dt-wrap { border: 0; }
@@ -1327,3 +1338,45 @@ a.dt-detail-card:focus-visible { outline: none; box-shadow: var(--shadow-focus);
   text-decoration-color: var(--color-foreground-inverse-muted);
   color: var(--color-foreground-inverse-secondary);
 }
+
+/* ----------------------------------------------------------------
+   OUTLINE PILL — .dt-outline
+   ----------------------------------------------------------------
+   A hairline pill that WRAPS an inline combo (flag + label, icon + code,
+   corridor) so it reads as one token in the cell rather than loose parts.
+   It is a container, not a status: no fill, no tone — tone belongs to .pill.
+   Use it where the combo is a categorical value the eye compares down the
+   column (market, rail, jurisdiction). Do not wrap the row's own name: that is
+   the identity of the row, not a value in it.
+   ---------------------------------------------------------------- */
+.dt-outline {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  height: 24px;
+  padding: 0 var(--space-3) 0 var(--space-2);
+  border: var(--border-hairline) solid var(--color-border-default);
+  border-radius: var(--radius-pill);
+  background: transparent;
+  color: var(--color-foreground-default);
+  font-family: var(--font-sans);
+  font-size: var(--fs-xs);
+  font-weight: var(--w-regular);
+  line-height: 1;
+  white-space: nowrap;
+  box-sizing: border-box;
+  vertical-align: middle;
+}
+/* No leading media → balanced inset */
+.dt-outline:not(:has(> .flag, > svg, > i, > .ic-mini)) { padding: 0 var(--space-3); }
+.dt-outline > .flag { width: 16px; height: 16px; border-radius: var(--radius-pill); flex-shrink: 0; }
+.dt-outline > svg,
+.dt-outline > i { width: var(--icon-xs); height: var(--icon-xs); stroke-width: var(--icon-stroke); color: var(--color-foreground-muted); flex-shrink: 0; }
+/* A mono code inside the pill (ISO, rail) keeps the pill's height */
+.dt-outline .code { font-family: var(--font-mono); font-size-adjust: var(--font-mono-adjust); font-size: var(--fs-xxs); color: var(--color-foreground-muted); letter-spacing: var(--ls-caps); }
+.dt-outline-sm { height: 20px; font-size: var(--fs-xxs); }
+.dt-outline-sm > .flag { width: 14px; height: 14px; }
+/* Several pills in one cell — a set (e.g. supported rails) */
+.dt-outline-set { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }
+.dt.on-inverse .dt-outline,
+.dark .dt .dt-outline { border-color: var(--color-border-inverse); color: var(--color-foreground-inverse-default); }

package/dist/react/DataTable/DataTable.d.ts

@@ -170,3 +170,8 @@ export declare const DTParentRow: React.FC<DTParentRowProps>;
 export declare const DTPagination: React.FC<DTPaginationProps>;
 
 export default DataTable;
+
+/** Outline pill — .dt-outline. Wraps flag/icon + label (+ mono code) as one token. */
+export declare const DTOutline: React.FC<{ flag?: string; icon?: React.ReactNode; code?: React.ReactNode; size?: 'sm' | 'md'; children?: React.ReactNode } & React.HTMLAttributes<HTMLSpanElement>>;
+/** Set of outline pills in one cell — .dt-outline-set. */
+export declare const DTOutlineSet: React.FC<React.HTMLAttributes<HTMLSpanElement>>;

package/dist/react/DataTable/DataTable.tsx

@@ -285,6 +285,29 @@ export function DataTable<T>({
   );
 }
 
+
+/** Outline pill — `.dt-outline`: a hairline pill that wraps an inline combo
+    (flag + label, icon + label, corridor) so it reads as one token. A container,
+    not a status: no fill, no tone. `code` renders a trailing mono ISO/rail code. */
+export const DTOutline: React.FC<{
+  flag?: string;
+  icon?: React.ReactNode;
+  code?: React.ReactNode;
+  size?: 'sm' | 'md';
+  children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLSpanElement>> = ({ flag, icon, code, size = 'md', children, className, ...rest }) => (
+  <span className={['dt-outline', size === 'sm' ? 'dt-outline-sm' : '', className || ''].filter(Boolean).join(' ')} {...rest}>
+    {flag ? <img className="flag" src={flag} alt="" /> : icon}
+    {children}
+    {code != null ? <span className="code">{code}</span> : null}
+  </span>
+);
+
+/** Several outline pills in one cell — `.dt-outline-set`. */
+export const DTOutlineSet: React.FC<React.HTMLAttributes<HTMLSpanElement>> = ({ className, ...rest }) => (
+  <span className={['dt-outline-set', className || ''].filter(Boolean).join(' ')} {...rest} />
+);
+
 export default DataTable;
 
 /* ----------------------------------------------------------------

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

@@ -3,6 +3,10 @@ import * as React from 'react';
 export type InputSize = 'sm' | 'md' | 'lg';
 export type InputStatus = 'default' | 'error' | 'success' | 'warning';
 
+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 };
+
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
   /** Field label (renders the .field wrapper). */
   label?: React.ReactNode;
@@ -24,6 +28,12 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
   prefix?: React.ReactNode;
   /** Attached suffix cell — .group .fix.r (e.g. ".00"). */
   suffix?: React.ReactNode;
+  /** Interactive segment before the field — selector or button (combo input). */
+  before?: InputAddon;
+  /** Interactive segment after the field — selector or button (combo input). */
+  after?: InputAddon;
+  /** Shape of an attached group: rectangle, rounded ends, or bottom rule only. */
+  groupShape?: 'default' | 'pill' | 'underline';
   /** Dark-surface treatment (.on-inverse). */
   onInverse?: boolean;
   /** Quiet read-only: value only, no border (.is-readonly). */

package/dist/react/Input/Input.tsx

@@ -8,6 +8,7 @@ import * as React from 'react';
  *   .field > label + control + .help        (when label/help given)
  *   .affix.lead-pad/.trail-pad              (when leadIcon/trailIcon given)
  *   .group > .fix.l + input + .fix.r        (when prefix/suffix given)
+ *   .group > .fix-select|.fix-btn + input   (when before/after given — combo input)
  *
  * Note: prefix/suffix (.group) and leadIcon/trailIcon (.affix) are
  * mutually exclusive — group wins if both are passed. Sizes apply to
@@ -17,6 +18,30 @@ import * as React from 'react';
 export type InputSize = 'sm' | 'md' | 'lg';
 export type InputStatus = 'default' | 'error' | 'success' | 'warning';
 
+/** An interactive segment attached to the field (`.group > .fix-select` /
+    `.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. */
+export type InputAddon =
+  | {
+      type: 'select';
+      options: Array<string | { value: string; label: React.ReactNode }>;
+      value?: string;
+      onChange?: (value: string) => void;
+      /** Required: the select has no visible label of its own. */
+      'aria-label': string;
+    }
+  | {
+      type: 'button';
+      label: React.ReactNode;
+      icon?: React.ReactNode;
+      onClick?: () => void;
+      /** Filled — only when this is THE action of the field. */
+      primary?: boolean;
+      disabled?: boolean;
+      'aria-label'?: string;
+    };
+
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
   /** Field label (renders the .field wrapper). */
   label?: React.ReactNode;
@@ -38,6 +63,14 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
   prefix?: React.ReactNode;
   /** Attached suffix cell — .group .fix.r (e.g. ".00"). */
   suffix?: React.ReactNode;
+  /** Interactive segment BEFORE the field — selector or button (combo input).
+      Takes the slot prefix would use; pass one or the other, not both. */
+  before?: InputAddon;
+  /** Interactive segment AFTER the field — selector or button (combo input). */
+  after?: InputAddon;
+  /** Shape of an attached group (prefix/suffix/before/after): the rectangular
+      field, rounded ends (.group.is-pill) or bottom-rule only (.group.underline). */
+  groupShape?: 'default' | 'pill' | 'underline';
   /** Dark-surface treatment (.on-inverse). */
   onInverse?: boolean;
   /** Quiet read-only: value only, no border (.is-readonly). */
@@ -46,6 +79,41 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
   underline?: boolean;
 }
 
+function renderAddon(a: InputAddon, side: 'l' | 'r'): React.ReactNode {
+  if (a.type === 'select') {
+    return (
+      <span className={'fix-select ' + side}>
+        <select
+          aria-label={a['aria-label']}
+          value={a.value}
+          onChange={a.onChange ? (e) => a.onChange!(e.target.value) : undefined}
+        >
+          {a.options.map((o) =>
+            typeof o === 'string'
+              ? <option key={o} value={o}>{o}</option>
+              : <option key={o.value} value={o.value}>{o.label}</option>
+          )}
+        </select>
+        <svg className="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      </span>
+    );
+  }
+  return (
+    <button
+      type="button"
+      className={['fix-btn', side, a.primary ? 'is-primary' : ''].filter(Boolean).join(' ')}
+      onClick={a.onClick}
+      disabled={a.disabled}
+      aria-label={a['aria-label']}
+    >
+      {a.icon}
+      {a.label}
+    </button>
+  );
+}
+
 export const Input: React.FC<InputProps> = ({
   label,
   help,
@@ -57,6 +125,9 @@ export const Input: React.FC<InputProps> = ({
   trailLabel,
   prefix,
   suffix,
+  before,
+  after,
+  groupShape = 'default',
   onInverse = false,
   readOnlyQuiet = false,
   underline = false,
@@ -65,7 +136,15 @@ export const Input: React.FC<InputProps> = ({
   ...rest
 }) => {
   const autoId = React.useId();
-  const inputId = id || (label ? autoId : undefined);
+  const inputId = id || (label || help != null ? autoId : undefined);
+  /* The doc promises that status drives border, help tone AND aria-invalid
+     together, and that help is announced with the field. Neither was wired: a
+     screen reader heard "Amount, edit text" with no error and no hint. */
+  const helpId = help != null ? (inputId || autoId) + '-help' : undefined;
+  const a11y = {
+    'aria-invalid': status === 'error' ? true : undefined,
+    'aria-describedby': [rest['aria-describedby'], helpId].filter(Boolean).join(' ') || undefined,
+  } as const;
 
   const inputCls = [
     'input',
@@ -82,13 +161,15 @@ export const Input: React.FC<InputProps> = ({
 
   let control: React.ReactNode;
 
-  if (prefix != null || suffix != null) {
-    // Attached group — the inner input is styled by `.group > input`.
+  if (prefix != null || suffix != null || before != null || after != null) {
+    // Attached group — the inner input is styled by `.group > input`. An addon
+    // wins over static text on the same side: a cell is either a label or a
+    // control, never both.
     control = (
-      <div className={['group', status === 'error' ? 'is-error' : ''].filter(Boolean).join(' ')}>
-        {prefix != null ? <span className="fix l">{prefix}</span> : null}
-        <input id={inputId} readOnly={readOnlyQuiet || rest.readOnly} {...rest} />
-        {suffix != null ? <span className="fix r">{suffix}</span> : null}
+      <div className={['group', groupShape === 'pill' ? 'is-pill' : '', groupShape === 'underline' ? 'underline' : '', status === 'error' ? 'is-error' : ''].filter(Boolean).join(' ')}>
+        {before != null ? renderAddon(before, 'l') : prefix != null ? <span className="fix l">{prefix}</span> : null}
+        <input id={inputId} readOnly={readOnlyQuiet || rest.readOnly} {...rest} {...a11y} />
+        {after != null ? renderAddon(after, 'r') : suffix != null ? <span className="fix r">{suffix}</span> : null}
       </div>
     );
   } else if (leadIcon != null || trailIcon != null || onTrailClick) {
@@ -102,7 +183,7 @@ export const Input: React.FC<InputProps> = ({
     control = (
       <div className={affixCls}>
         {leadIcon != null ? <span className="lead">{leadIcon}</span> : null}
-        <input id={inputId} className={inputCls} readOnly={readOnlyQuiet || rest.readOnly} {...rest} />
+        <input id={inputId} className={inputCls} readOnly={readOnlyQuiet || rest.readOnly} {...rest} {...a11y} />
         {onTrailClick ? (
           <button type="button" className="trail-btn" aria-label={trailLabel || 'Action'} onClick={onTrailClick}>
             {trailIcon}
@@ -113,7 +194,7 @@ export const Input: React.FC<InputProps> = ({
       </div>
     );
   } else {
-    control = <input id={inputId} className={inputCls} readOnly={readOnlyQuiet || rest.readOnly} {...rest} />;
+    control = <input id={inputId} className={inputCls} readOnly={readOnlyQuiet || rest.readOnly} {...rest} {...a11y} />;
   }
 
   if (label == null && help == null) return <React.Fragment>{control}</React.Fragment>;
@@ -131,7 +212,7 @@ export const Input: React.FC<InputProps> = ({
     <div className="field">
       {label != null ? <label htmlFor={inputId}>{label}</label> : null}
       {control}
-      {help != null ? <div className={helpCls}>{help}</div> : null}
+      {help != null ? <div className={helpCls} id={helpId}>{help}</div> : null}
     </div>
   );
 };
@@ -148,6 +229,7 @@ const fieldWrap = (
   status: InputStatus,
   id: string | undefined,
   control: React.ReactNode,
+  helpId?: string,
 ) => {
   if (label == null && help == null) return <React.Fragment>{control}</React.Fragment>;
   const helpCls = ['help', status === 'error' ? 'is-error' : '', status === 'success' ? 'is-success' : '', status === 'warning' ? 'is-warning' : ''].filter(Boolean).join(' ');

package/dist/react/SearchPill/SearchPill.d.ts

@@ -1,11 +1,16 @@
 import * as React from 'react';
+import type { InputAddon } from '../Input/Input';
 
 export interface SearchPillProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
   /** Field height: 'md' (40px, default) or 'sm' (32px). Named fieldSize because
       the native input `size` attribute means character count, not height. */
   fieldSize?: 'sm' | 'md';
   /** Keyboard hint rendered as a .kbd chip (e.g. "⌘K"). */
-  shortcut?: string;
+  shortcut?: string | string[];
+  /** Interactive segment before the search (scope selector). Replaces the icon. */
+  before?: InputAddon;
+  /** Interactive segment after the search (Search button). Replaces the shortcut. */
+  after?: InputAddon;
   /** Leading icon — defaults to the canonical search glyph. */
   icon?: React.ReactNode;
   /** Wrapper (pill) className/style — the input itself fills it. */

package/dist/react/SearchPill/SearchPill.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { InputAddon } from '../Input/Input';
 
 /**
  * ATTRUS SearchPill — typed wrapper over the canonical `.pill-search`
@@ -11,8 +12,16 @@ export interface SearchPillProps extends Omit<React.InputHTMLAttributes<HTMLInpu
       the native input `size` attribute means character count, not height. Use
       'sm' inside a toolbar, where a 40px field towers over 32px buttons. */
   fieldSize?: 'sm' | 'md';
-  /** Keyboard hint rendered as a .kbd chip (e.g. "⌘K"). */
-  shortcut?: string;
+  /** Keyboard hint rendered as a .kbd chip. A string with a modifier glyph is
+      split into one cell per key ("⌘K" → ⌘ · K) so symbol and letter share a
+      baseline. Pass an array for multi-letter keys: ['Ctrl', 'K']. */
+  shortcut?: string | string[];
+  /** Interactive segment before the search — e.g. a scope selector ("All ▾").
+      Replaces the leading icon: a pill has room for one lead. */
+  before?: InputAddon;
+  /** Interactive segment after the search — e.g. a "Search" button. Replaces
+      the shortcut hint: a field that shows a button does not need a hint. */
+  after?: InputAddon;
   /** Leading icon — defaults to the canonical search glyph. */
   icon?: React.ReactNode;
   /** Wrapper (pill) className/style — the input itself fills it. */
@@ -27,18 +36,59 @@ const SearchGlyph: React.FC = () => (
   </svg>
 );
 
+const MODIFIERS = /^[⌘⌥⇧⌃]/;
+function keys(s: string | string[]): string[] {
+  if (Array.isArray(s)) return s;
+  // "⌘K" → ["⌘","K"]; "⇧⌘P" → ["⇧","⌘","P"]; a plain word stays one key
+  const out: string[] = [];
+  let rest = s;
+  while (MODIFIERS.test(rest)) { out.push(rest[0]); rest = rest.slice(1); }
+  if (rest) out.push(rest);
+  return out;
+}
+
+function renderAddon(a: InputAddon, side: 'l' | 'r'): React.ReactNode {
+  if (a.type === 'select') {
+    return (
+      <span className={'fix-select ' + side}>
+        <select aria-label={a['aria-label']} value={a.value} onChange={a.onChange ? (e) => a.onChange!(e.target.value) : undefined}>
+          {a.options.map((o) =>
+            typeof o === 'string' ? <option key={o} value={o}>{o}</option> : <option key={o.value} value={o.value}>{o.label}</option>
+          )}
+        </select>
+        <svg className="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      </span>
+    );
+  }
+  return (
+    <button type="button" className={['fix-btn', side, a.primary ? 'is-primary' : ''].filter(Boolean).join(' ')}
+      onClick={a.onClick} disabled={a.disabled} aria-label={a['aria-label']}>
+      {a.icon}
+      {a.label}
+    </button>
+  );
+}
+
 export const SearchPill: React.FC<SearchPillProps> = ({
   shortcut,
   icon,
   fieldSize = 'md',
+  before,
+  after,
   wrapperClassName,
   wrapperStyle,
   ...rest
 }) => (
   <div className={['pill-search', fieldSize === 'sm' ? 'pill-search-sm' : '', wrapperClassName || ''].filter(Boolean).join(' ')} style={wrapperStyle}>
-    {icon != null ? icon : <SearchGlyph />}
+    {before != null ? renderAddon(before, 'l') : icon != null ? icon : <SearchGlyph />}
     <input type="search" {...rest} />
-    {shortcut ? <span className="kbd">{shortcut}</span> : null}
+    {after != null
+      ? renderAddon(after, 'r')
+      : shortcut
+        ? <span className="kbd">{keys(shortcut).map((k) => <kbd key={k}>{k}</kbd>)}</span>
+        : null}
   </div>
 );
 

package/package.json

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