@apliteni/apliteni-ui 0.100.0 → 0.104.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.100.0",
+  "version": "0.104.0",
   "workspaces": [
     "react"
   ],

package/react/README.md

@@ -32,7 +32,17 @@ import { DataTable, Modal, Button } from '@apliteni/apliteni-ui/react';
 Both stylesheets. The React one adds what React's own components need — it carries no tokens, no
 reset and none of the kit's control CSS, so it cannot stand in for the first import.
 
-Components: `Success`, `SuccessPanel`, `SuccessCheck`, `Checkbox`, `Switch`, `SearchField`, `EmptyState`, `DataTable`, `Pagination`, `StatBand`, `Modal`, `Confirm`, `Drawer`, `CommandPalette`, `Dropdown`, `BackLink`, `Tooltip`, `Snippet`, `Tabs`, `Button`, `Badge`, `Pill`, `StatusDot`, `Card`, `Callout`, `Icon`.
+Components: `Success`, `SuccessPanel`, `SuccessCheck`, `Checkbox`, `Switch`, `SearchField`, `EmptyState`, `DataTable`, `Pagination`, `StatBand`, `Modal`, `Confirm`, `Drawer`, `CommandPalette`, `Dropdown`, `BackLink`, `Tooltip`, `Snippet`, `Segmented`, `Tabs`, `Button`, `Badge`, `Pill`, `StatusDot`, `Card`, `Callout`, `Icon`.
+
+`Segmented` is a controlled choice toolbar: pass `options`, `value`, `onChange`,
+and a `label` for its accessible name. `size="sm"` compacts it, `block` makes it
+fill its container, and `appearance="underline"` draws the underline strip instead
+of the pill track; omit all three for the standard pill. Options support
+`ariaLabel` and `disabled`; `disabled` on the toolbar disables every choice. What
+each presentation guarantees is in
+docs/components.md#the-rest-of-the-react-surface.
+Reach for it when a choice filters or switches a view in place; use `Tabs` when the
+choice owns a panel, and links when it changes the page.
 
 `Pill` renders metadata with the existing pill spacing. Omit `variant` for neutral
 metadata or use `live` or `soon`. Its children accept React content.

package/react/dist/index.css

@@ -36,10 +36,10 @@
   --tap-clear-y: 0px;
 }
 @media (max-width: 560px) and (pointer: coarse) {
-  :where(.ui-seg button, .ui-tabs__tab, .ui-dropdown__trigger, .ui-toast__action, .ui-drawer__close, .ui-snippet__copy, .ui-footer__social, .ui-datepicker__opt) {
+  :where(.ui-seg button, .ui-tabs__tab, .ui-dropdown__trigger, .ui-toast__action, .ui-drawer__close, .ui-snippet__copy, .ui-footer__social, .ui-app__search, .toggle, .ui-datepicker__opt) {
     position: relative;
   }
-  :where(.ui-btn, .ui-seg button, .ui-tabs__tab, .ui-dropdown__trigger, .ui-toast__action, .ui-drawer__close, .ui-snippet__copy, .ui-footer__social, .ui-switch, .ui-datepicker__opt)::after {
+  :where(.ui-btn, .ui-seg button, .ui-tabs__tab, .ui-dropdown__trigger, .ui-toast__action, .ui-drawer__close, .ui-snippet__copy, .ui-footer__social, .ui-switch, .ui-datepicker__opt, .ui-app__search, .toggle)::after {
     content: "";
     position: absolute;
     left: 50%;
@@ -133,6 +133,11 @@
     --tap-clear-x: var(--tap-gap);
     --tap-clear-y: var(--tap-gap);
   }
+  .ui-app__bar,
+  .topbar__in {
+    --tap-clear-x: var(--space-3, 12px);
+    --tap-clear-y: var(--space-3, 12px);
+  }
 }
 
 /* ../src/styles/tooltip.css */
@@ -872,12 +877,6 @@
   .ui-react-app .ui-app__bar {
     padding-inline: var(--space-4);
   }
-  .ui-react-app .ui-app__search {
-    min-width: 0;
-  }
-  .ui-react-app .ui-app__search kbd {
-    display: none;
-  }
   .ui-react-app .ui-app__bar > .ui-app__brand {
     display: none;
   }

package/react/dist/index.d.ts

@@ -545,9 +545,11 @@ type SegmentedProps = {
     onChange: (value: string) => void;
     label: string;
     appearance?: 'pill' | 'underline';
+    size?: 'sm';
+    block?: boolean;
     disabled?: boolean;
 };
-declare function Segmented({ options, value, onChange, label, appearance, disabled }: SegmentedProps): react.JSX.Element;
+declare function Segmented({ options, value, onChange, label, appearance, size, block, disabled }: SegmentedProps): react.JSX.Element;
 
 type Filter = {
     id: string;
@@ -776,6 +778,10 @@ type AppShellProps = {
     lede?: string;
     actions?: ReactNode;
     bandControl?: ReactNode;
+    /** The band trigger's words. Below 560px the shell draws `searchShortLabel` instead;
+     *  both stay the button's name, which does not change with the viewport. */
+    searchLabel?: string;
+    searchShortLabel?: string;
     account: {
         name: string;
         email: string;
@@ -787,7 +793,7 @@ type AppShellProps = {
     /** Spread linkProps onto the router link, including children and onClick. */
     renderLink?: (section: AppShellSection, linkProps: ComponentPropsWithoutRef<'a'>) => ReactNode;
 };
-declare function AppShell({ sections, pathname, title, children, word, brand, brandHref, width, back, lede, actions, bandControl, account, onSignOut, defaultCollapsed, palette, renderLink }: AppShellProps): react.JSX.Element;
+declare function AppShell({ sections, pathname, title, children, word, brand, brandHref, width, back, lede, actions, bandControl, account, onSignOut, searchLabel, searchShortLabel, defaultCollapsed, palette, renderLink }: AppShellProps): react.JSX.Element;
 
 type EmptyStateVariant = 'first-run' | 'no-matches' | 'not-found' | 'not-yet-built';
 type EmptyStateProps = {

package/react/dist/index.js

@@ -2519,10 +2519,10 @@ function RowIdentity({ symbol, name, logo, href }) {
 // src/Segmented.tsx
 import { segmentedNextIndex } from "@apliteni/apliteni-ui";
 import { jsx as jsx23 } from "react/jsx-runtime";
-function Segmented({ options, value, onChange, label, appearance = "pill", disabled = false }) {
+function Segmented({ options, value, onChange, label, appearance = "pill", size, block = false, disabled = false }) {
   const enabled = options.filter((o) => !o.disabled);
   const tabValue = enabled.some((o) => o.value === value) ? value : enabled[0]?.value;
-  return /* @__PURE__ */ jsx23("div", { className: `ui-seg${appearance === "underline" ? " ui-seg--underline" : ""}`, role: "toolbar", "aria-label": label, children: options.map((option) => /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx23("div", { className: `ui-seg${size === "sm" ? " ui-seg--sm" : ""}${block ? " ui-seg--block" : ""}${appearance === "underline" ? " ui-seg--underline" : ""}`, role: "toolbar", "aria-label": label, children: options.map((option) => /* @__PURE__ */ jsx23(
     "button",
     {
       type: "button",
@@ -3407,6 +3407,8 @@ function AppShell({
   bandControl,
   account,
   onSignOut,
+  searchLabel = "Search or run a command\u2026",
+  searchShortLabel = "Search",
   defaultCollapsed = false,
   palette,
   renderLink
@@ -3514,7 +3516,8 @@ function AppShell({
         !navigable && lockup,
         /* @__PURE__ */ jsxs29("button", { type: "button", className: "ui-app__search", "aria-haspopup": "dialog", onClick: () => setSearch(true), children: [
           /* @__PURE__ */ jsx34("span", { className: "ui-app__search-ic", children: /* @__PURE__ */ jsx34(Icon, { name: "search" }) }),
-          /* @__PURE__ */ jsx34("span", { className: "ui-app__search-txt", children: "Search or run a command\u2026" }),
+          /* @__PURE__ */ jsx34("span", { className: "ui-app__search-txt", children: searchLabel }),
+          /* @__PURE__ */ jsx34("span", { className: "ui-app__search-short", "aria-hidden": "true", children: searchShortLabel }),
           /* @__PURE__ */ jsx34("kbd", { className: "ui-cmdk__key", children: paletteHotkey() })
         ] }),
         /* @__PURE__ */ jsx34("span", { className: "ui-app__bar-gap" }),

package/src/components/shell.js

@@ -91,12 +91,17 @@ const toWidth = (v) => (v === 'wide' ? 'wide' : 'centered');
 
 // `search: 'palette-id'`, or the same id in `{ palette }` with a placeholder beside
 // it. No palette to open, no field — the argument `signOutHref` takes.
-// why: docs/components.md#the-page-shell
+// `shortLabel` is the word the band draws below 560px, where the sentence used to
+// truncate mid-word. why: docs/components.md#the-page-shell
 const toSearch = (v) => {
   const given = typeof v === 'string' ? { palette: v } : (isRecord(v) && !Array.isArray(v) ? v : null);
   const palette = given && typeof given.palette === 'string' ? given.palette.trim() : '';
   if (!palette) return null;
-  return { palette, placeholder: str(given.placeholder) || 'Search or run a command…' };
+  return {
+    palette,
+    placeholder: str(given.placeholder) || 'Search or run a command…',
+    shortLabel: str(given.shortLabel) || 'Search',
+  };
 };
 
 // `maxWidth` lands inside a style attribute, so a length is all this accepts — a number
@@ -236,10 +241,13 @@ function readerBlock({ name, email }, signOutHref, { band = false } = {}) {
 // A field to look at, a button to press. `data-cmdk-open` and the cap's class are the
 // palette's own, and the cap is NOT aria-hidden: it is half the button's name.
 // why: docs/components.md#the-page-shell
-const searchField = ({ palette, placeholder }) =>
+// The short word repeats the sentence, so it is `aria-hidden`: the sentence and the
+// cap are the name at every width, and layout.css clips rather than drops them.
+const searchField = ({ palette, placeholder, shortLabel }) =>
   `<button type="button" class="ui-app__search" data-cmdk-open="${esc(palette)}" aria-haspopup="dialog">`
   + `<span class="ui-app__search-ic" aria-hidden="true">${icon('search')}</span>`
   + `<span class="ui-app__search-txt">${esc(placeholder)}</span>`
+  + `<span class="ui-app__search-short" aria-hidden="true">${esc(shortLabel)}</span>`
   + `<kbd class="ui-cmdk__key" data-palette-hotkey>${esc(paletteHotkey())}</kbd>`
   + `</button>`;
 

package/src/styles/layout.css

@@ -119,7 +119,7 @@
    resting step. */
 /* Re-tuned at #295, which took the light rail down a step with the page. Below 720px
    the glyph is the whole row, so it is held at text grade rather than at 1.4.11's bar —
-   stories/apps/shell-states.test.js:1597 `a resting glyph is dimmer but still legible`. */
+   stories/apps/shell-states.test.js:1704 `a resting glyph is dimmer but still legible`. */
 .ui-app__rail .ui-nav__ic svg { opacity: 0.66; }
 
 /* A destructive row of the rail is a navigation row and rests like one; the danger
@@ -404,11 +404,26 @@
 .ui-app__search-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 /* The other half of the name, so it never gives way. */
 .ui-app__search kbd { flex: none; }
+/* The one word the phone band draws instead of the sentence. Above 560px the
+   sentence fits and this is a second copy of it, so it is not drawn.
+   why: docs/components.md#the-page-shell */
+.ui-app__search-short { display: none; }
 
 /* The mark alone — no room for two lines on a 52px row. No rule over it, since the
    band's hairline is under the whole of it, and no column, since this is not the rail.
    why: docs/components.md#the-page-shell */
 .ui-app__user--bar { flex: none; padding-top: 0; border-top: 0; }
+/* The switch is a 34px square and stays one: the trigger above is the thing on this
+   band that gives way, and a flex item with the default shrink does not wait its
+   turn. Measured at 390 with a control beside the trigger, the React band's switch
+   drew 19x34 and the strategy topbar's drew 28.47x34 — a square glyph plate squashed,
+   and a tap zone the sheet could only clamp to 29 or 39.
+   Pinning the strategy topbar's half of this rule does not make its row narrower: it
+   moves a 5.53px shortfall onto the account block's trailing gutter instead, because
+   nothing before it in that row has width to spare. topbar.css's --space-2 comment
+   names that choice and the gutter it leaves.
+   why: docs/components.md#the-page-shell */
+.ui-app__bar .toggle, .topbar__in .toggle { flex: none; }
 .ui-app__user--bar .ui-app__av { margin-inline-start: 0; }
 /* Crumb, then the title block. At --space-2 the crumb sat 8px off the h1 and
    the h1 8px off its subtitle, so all three ranks read as one. */
@@ -518,6 +533,31 @@
   .ui-app__main .ui-card__row { flex-wrap: wrap; gap: var(--space-3); }
 }
 
+/* -- The band's search at one column --------------------------------------- */
+/* The band holds the trigger, the reader's mark and whatever the page puts between
+   them, so the sentence broke mid-word — "Search or run a co…". The short word takes
+   its place. Neither the sentence nor the cap is `display: none`: both are inside
+   the button's accessible name — the cap by Artur's call on #308 — so they are
+   clipped the way `.ui-sr` in loading.css clips, and the name holds at every width.
+   why: docs/components.md#the-page-shell */
+@media (max-width: 560px) {
+  .ui-app__search-txt,
+  .ui-app__search kbd {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+  /* It gives way before the band does: at a large font scale the word ellipsises
+     rather than pushing the reader's mark off the row. */
+  .ui-app__search-short { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+}
+
 /* -- Auth card (sign-in / consent) — centered, glowing --------------------- */
 .ui-auth {
   min-height: 100vh;

package/src/styles/segmented.css

@@ -114,6 +114,7 @@
    box. #527
    why: guidelines/layout-and-density.md, the spacing scale */
 .ui-seg--underline button { position: relative; border-radius: var(--radius-sm); padding: var(--space-3); min-height: var(--tap-min, 44px); white-space: normal; overflow-wrap: anywhere; font-weight: var(--weight-medium); }
+.ui-seg--underline.ui-seg--sm button { padding: var(--space-3); min-height: var(--tap-min, 44px); }
 /* The chosen tab is its label and one bar under it: no plate, no hairline, no
    upright rail — those read as a list-row grip. #527 r31. The `outline: 0` that
    stood here cancelled the accent outline the pill rule gave every chosen button;

package/src/styles/tap-zone.css

@@ -56,6 +56,8 @@
     .ui-drawer__close,
     .ui-snippet__copy,
     .ui-footer__social,
+    .ui-app__search,
+    .toggle,
     /* Already relative in react/src/DatePicker.css — restated because this
        gate reads the kit's own sheets and cannot see that one, and a carrier
        whose containing block it cannot find is a layer that measures against
@@ -75,7 +77,9 @@
     .ui-snippet__copy,
     .ui-footer__social,
     .ui-switch,
-    .ui-datepicker__opt
+    .ui-datepicker__opt,
+    .ui-app__search,
+    .toggle
   )::after {
     content: "";
     position: absolute;
@@ -215,4 +219,24 @@
     --tap-clear-x: var(--tap-gap);
     --tap-clear-y: var(--tap-gap);
   }
+
+  /* Two 52px rows, each holding a control the kit draws under the floor: the
+     shell band's palette trigger, 37.05 tall once the phone band swaps its
+     sentence for the short word, and the theme switch at 34 square on both.
+     Neither row opens anything — the room is already in it, which is why these
+     two declare a clearance and no gap. Across, 6px a side against the band's
+     own 12px gap and the topbar's 8 below 560px, where this layer exists — not
+     the topbar's 14 above that step, where it does not. 6px a side crosses the
+     topbar's 4px midline by 1px, which does not mis-tap: neither neighbour on
+     that row carries a layer of its own. Down, the row's leftover height is 7.4px
+     above and below the trigger and 9 around the switch, where a 44px layer
+     needs 3.5 and 5. The rows keep their height, their gaps and their paint.
+     #486
+
+     --space-3 rather than --tap-gap, which is what every row above declares:
+     20 claims 10px a side and the trigger has 7.4. The clamp would still stop
+     at 44 today and be a number that is not true, which is what the browser
+     half fails a container for. */
+  .ui-app__bar,
+  .topbar__in { --tap-clear-x: var(--space-3, 12px); --tap-clear-y: var(--space-3, 12px); }
 }

package/src/styles/topbar.css

@@ -246,12 +246,31 @@
 /* One column, and the band is at its tightest. The row is already full at 390,
    and at the gap above this one the account avatar stood from 365 to 397 and was
    cut at the screen edge — the one control on this screen that opens the account
-   area. Packed to --space-2 the band needs 352 of the 362 it has there, so the
-   avatar is whole with the band's own gutter beside it. 320 is still short of the
-   room these controls want, which stays #558.
+   area. Packed to --space-2 and a flat 14px trailing gutter the band needs 367.53
+   of the 362px it has there, a 5.53px shortfall, because layout.css now pins the
+   theme switch to a full 34px square so it keeps the tap floor it was given.
+   The wordmark, the Deck/Text switch and the version label are each already at
+   the width their own text needs, and the switch must not shrink again, so the
+   account block's trailing gutter is what gives — but a FLAT 14px gutter has no
+   fallback below the width it was sized for: at 375 it has already given every
+   one of its 14px and the row is still 6.53px short, so the avatar was cut and
+   the page gained 7px of horizontal scroll (#486 review round 2), worse again
+   at 320.
+   Both carry a share now, continuously, rather than the gutter alone holding a
+   fixed budget: the gutter still narrows first, from 14px at 390 down to 0 by
+   381.53px of available row width, and once it is spent the inter-control gap
+   takes the rest, from --space-2 down to its own floor of --space-1. 381.53px is
+   this row's own fixed width minus its gutter's full 14px — not a general
+   formula, a number that belongs to this composition's own wordmark, switch and
+   version label. The avatar is whole and the page carries no horizontal scroll
+   down to 375px. 320 still falls 41.53px short with both all the way down,
+   which stays #558; it is 5px better than main's own 46.53px there, not solved.
    why: docs/foundations.md#breakpoints */
 @media (max-width: 560px) {
-  .topbar__in { gap: var(--space-2); }
+  .topbar__in {
+    gap: clamp(var(--space-1), calc(var(--space-2) - (381.53px - 100vw) / 5), var(--space-2));
+    padding-right: clamp(0px, calc(100vw - 381.53px), 14px);
+  }
 }
 
 /* Account — avatar + dropdown. Gated: hidden until the app confirms a session