@crewlethq/ui 0.6.3 → 0.8.0

package/dist/{OrgNode-BT7T2Q2X.css → OrgNode-TCHJH5FO.css}

@@ -33,6 +33,15 @@
 
 /* ---- A unit's lead ------------------------------------------------------ */
 
+/*
+ * NO LINE OF ITS OWN. The console chart rules a hairline over this strip and
+ * frames a set lead's pill inside it, 4px in from the node's own edge: inside
+ * a card that is already framed, that is a box drawn twice, with a second line
+ * running beside the card's edge on three sides and a third across the top.
+ * A set lead is a ground instead, and a ground needs no line to divide it from
+ * the name above. Only an EMPTY slot keeps an edge, dashed (below), because
+ * the dash is what says a place is waiting rather than a frame round a value.
+ */
 .crewlet-org-node-lead {
   position: relative;
   display: flex;
@@ -41,28 +50,11 @@
   padding: 0 var(--spacing-1) var(--spacing-1);
 }
 
-/*
- * THE SEPARATOR IS INSET, like every hairline inside a node of the console
- * chart (it draws this one from 4 to `nw - 4`). Edge to edge it cut the card
- * in two and the node read as two stacked cells rather than as a card with a
- * fact along its bottom edge. Drawn rather than bordered for that reason
- * alone: a border cannot be shorter than the box it is on.
- */
-.crewlet-org-node-lead::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  right: var(--spacing-1);
-  left: var(--spacing-1);
-  height: 1px;
-  background: var(--color-border-default);
-}
-
 /*
  * A PILL RATHER THAN A LINE OF TEXT, so the lead reads as one value attached
- * to this unit rather than as a second caption. The empty state is the same
- * pill with a dashed edge and the word alone: a unit with no lead has a place
- * for one, which is what invites the reader to set it.
+ * to this unit rather than as a second caption. RAISED, on the step a chip
+ * with no boundary of its own takes (the palette suite holds it off the card
+ * on both themes), so it is found by its ground rather than by a frame.
  */
 .crewlet-org-node-lead__pill {
   display: flex;
@@ -77,32 +69,30 @@
   font-weight: var(--font-weight-medium);
   line-height: var(--font-line-height-tight);
   color: var(--color-text-secondary);
-  /*
-   * THE BOUNDARY IS THE HOVER STEP, not the resting hairline, which is what
-   * the console chart draws around this one pill and nowhere else inside a
-   * node: every other line in there is the separator step and this is a
-   * boundary around a value. At the separator's own alpha the pill was a
-   * rectangle a reader had to look for, on the one fact a unit's node states.
-   */
-  border: 1px solid var(--color-border-hover);
+  background: var(--color-surface-elevated);
   border-radius: var(--radius-sm);
 }
 
 /*
- * AND AN EMPTY ONE IS THE SAME PILL, DASHED. The console chart separates the
- * two by the DASH and by the ink, and its two boundary alphas are 0.15 and
- * 0.12, which is one step of this ramp: written as two tokens the difference
- * would be invisible beside the dash that already carries it.
+ * AND AN EMPTY ONE IS AN EMPTY SLOT: no ground, a dashed edge and the word
+ * alone in the quieter ink, as the console chart draws it. A unit with no lead
+ * has a place for one, and the dash is what says the place is waiting to be
+ * filled, which is what invites the reader to set it. It is the one edge drawn
+ * inside a node, and only while the slot is empty: a set lead is a raised
+ * ground with no edge at all. The edge is the hover step rather than the
+ * resting hairline, because at the hairline's own step the slot was a
+ * rectangle a reader had to look for.
  */
 .crewlet-org-node-lead__pill--empty {
   color: var(--color-text-tertiary);
-  border-style: dashed;
+  background: none;
+  border: 1px dashed var(--color-border-hover);
 }
 
 /*
  * A LEAD THAT CAN BE CHANGED IS STILL A LEAD. Where the pill holds a control
  * rather than a word, the control IS the pill: it fills it, carries the pill's
- * own type and ink, and draws no second boundary inside the one already there.
+ * own type and ink, and draws no boundary or ground of its own on the pill's.
  * Left at its own size, a control step inside a half-rank strip is a button
  * that overflows the node it sits in.
  *
@@ -129,6 +119,35 @@
   color: var(--color-text-primary);
 }
 
+/*
+ * WHATEVER WRAPS THE CONTROL FILLS THE PILL TOO. A menu's trigger arrives
+ * inside the menu's own anchor, and the anchor was a shrink-wrapped item of
+ * the pill's row: the control was the width of the word "Lead" in a pill as
+ * wide as the node, and a press anywhere else in the pill did nothing.
+ */
+.crewlet-org-node-lead__pill > :has(> .crewlet-btn) {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+}
+
+/*
+ * REACHED, THE WHOLE PILL LIGHTS, because the whole pill is the control. The
+ * ghost control's own hover and press grounds were a patch the size of the
+ * word inside the pill, so it paints neither, and the pill takes the row hover
+ * step over its own ground while the control is pointed at or its menu is
+ * open. Its ink still goes to full, above.
+ */
+.crewlet-org-node-lead__pill
+  .crewlet-btn:is(:hover, :active):not(:disabled):not([aria-disabled='true']) {
+  background: none;
+}
+
+.crewlet-org-node-lead__pill:has(.crewlet-btn:hover:not(:disabled):not([aria-disabled='true'])),
+.crewlet-org-node-lead__pill:has(.crewlet-btn[aria-expanded='true']) {
+  background-image: linear-gradient(var(--color-surface-hover), var(--color-surface-hover));
+}
+
 /* The name of the lead, not the chevron beside it, is what truncates. */
 .crewlet-org-node-lead__pill .crewlet-btn > span {
   overflow: hidden;
@@ -147,25 +166,42 @@
  *
  * DRAWN SMALL, HIT FULL SIZE, the rule the whole node keeps: the strip is half
  * a rank, so the target is grown past the pill's own edge into the node's
- * bottom padding, exactly as the lead's own control is. It takes its room from
- * the pill rather than overlaying the name, so the lead truncates beside it
- * instead of running under it: the console chart shifts its text 5px left for
- * the same reason, which a row of flex items does on its own.
+ * bottom padding, exactly as the lead's own control is.
+ *
+ * AND IT DOES NOT MOVE THE NAME. Taking its room from the row, it pushed the
+ * name half its own width off the pill's middle, so "Lead: Ada" sat left of
+ * centre on every unit that had one. It is drawn over the pill's right end
+ * instead, out of the row, and the lead's control keeps the same room at both
+ * of its ends while it is there: the name is centred on the whole pill and
+ * truncates before it reaches the clear, and the control is still the whole
+ * pill to press.
  */
 .crewlet-org-node-lead__clear {
-  position: relative;
+  position: absolute;
+  top: 50%;
+  right: 0;
+  z-index: 1;
   display: inline-flex;
-  flex: none;
   align-items: center;
   justify-content: center;
+  transform: translateY(-50%);
+}
+
+.crewlet-org-node-lead__pill:has(> .crewlet-org-node-lead__clear) {
+  position: relative;
+}
+
+.crewlet-org-node-lead__pill:has(> .crewlet-org-node-lead__clear)
+  .crewlet-btn:not(.crewlet-org-node-lead__clear *) {
+  padding-inline: var(--spacing-4);
 }
 
 /*
- * THE GROUND IS A STEP OFF THE CARD'S, rather than that chart's own alpha. Its
- * 0.08 of white over a dark card is a disc a reader can see; on this package's
- * LIGHT theme the step at that alpha is the card's own value, so the disc
- * would disappear on half the deployments. The step past the card is the same
- * relationship in both themes, which is what the drawing was after.
+ * THE DISC IS ITS RING. Its ground is the raised step the pill itself is
+ * drawn on, rather than that chart's own alpha (0.08 of white is the card's
+ * own value on this package's light theme, so a disc drawn by its ground
+ * would disappear on half the deployments), and so what draws it on the pill
+ * is the hairline round it.
  */
 .crewlet-org-node-lead__disc {
   position: absolute;
@@ -203,6 +239,14 @@
   color: var(--color-text-primary);
 }
 
+/* AND NOTHING ELSE FILLS EITHER: a ghost control's own hover and press grounds
+   are painted on its whole 24px target, which drew a circle twice the disc's
+   size round a 12px mark the moment it was pointed at. */
+.crewlet-org-node-lead__clear
+  :is(.crewlet-btn, .crewlet-icon-btn):is(:hover, :active):not(:disabled):not([aria-disabled='true']) {
+  background: none;
+}
+
 .crewlet-org-node-lead__clear:hover .crewlet-org-node-lead__disc {
   border-color: var(--color-border-control);
 }

package/dist/OrgTable/index.js

@@ -1,12 +1,12 @@
-export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-BNCCEER3.js';
-import '../chunk-FIFNP6PL.js';
+export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-6SIG5I72.js';
+import '../chunk-SX2DFTQV.js';
 import '../chunk-S3BCVWTU.js';
-import '../chunk-WOFOMTGB.js';
+import '../chunk-B47YUQGM.js';
 import '../chunk-53DVJCVW.js';
-import '../chunk-OM5E3TTK.js';
+import '../chunk-74WGARJE.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4UQ7SMPK.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-IA232OTU.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{OrgTable-VWMFC3TB.css → OrgTable-JZSYTUIK.css}

@@ -24,8 +24,11 @@
    */
   --crewlet-org-table-indent: var(--spacing-8);
   /* The wire arriving at a row, and what it fades to at the row's own end.
-     Rebound per hue below. */
-  --crewlet-org-table-wire: var(--color-border-control);
+     It leaves the trunk in the TRUNK'S own step, as the console table's does,
+     so the two read as one line; started brighter than the trunk, every
+     branch was a dash floating beside a trunk nobody could see. Rebound per
+     hue below. */
+  --crewlet-org-table-wire: var(--color-border-strong);
   --crewlet-org-table-wire-fade: var(--color-border-default);
   /* What a row's name and its mark are drawn in. Rebound per hue below. */
   --crewlet-org-table-ink: var(--color-text-primary);
@@ -134,8 +137,15 @@
  * follows, so the trunk is one line down the whole table rather than one per
  * level. The cell's padding is taken back and the wire element carries the
  * level instead.
+ *
+ * AND THE CELL IS THE ROW'S FULL HEIGHT, because the wire in it is. The grid
+ * centres its cells in a row taller than they are, and a trunk drawn down a
+ * centred cell stopped short of both edges of every row, so the line its
+ * segments were meant to stack into read as one dash per row. The cell still
+ * centres what it holds.
  */
 .crewlet-org-table [role='gridcell']:first-child {
+  align-self: stretch;
   padding-inline-start: var(--spacing-2);
 }
 
@@ -170,12 +180,19 @@
  * segments stack into one line. Neutral, always: it belongs to the table
  * rather than to any row, and a trunk that took each row's hue in turn would
  * be a striped line saying nothing.
+ *
+ * IN THE STRONG STEP, where the console table draws its trunk a notch above
+ * the row's ground. In the plain border step it all but vanished on the
+ * table's own ground, and the branches beside it read as loose dashes.
+ *
+ * It starts one hairline above the cell, over the grid's rule between rows,
+ * so the segments meet rather than being cut by that rule.
  */
 .crewlet-org-table__wire[data-trunk]::before {
-  inset-block: 0;
+  inset-block: -1px 0;
   inset-inline-start: 0;
   width: 2px;
-  background: var(--color-border-default);
+  background: var(--color-border-strong);
 }
 
 /* A root row's trunk starts at the row's middle: nothing hangs above the
@@ -184,6 +201,13 @@
   inset-block-start: 50%;
 }
 
+/* The last row a root shows ends the trunk at its own branch: no row below it
+   hangs off the line, and a trunk run on to the next tree or the table's edge
+   is a line to nowhere. */
+.crewlet-org-table__wire[data-last][data-trunk]::before {
+  inset-block-end: 50%;
+}
+
 /*
  * THE BRANCH: from the trunk across the gutter to the row's own mark, fading
  * as it arrives. It reaches one cell gap past the wire's own width, which is

package/dist/Popover/index.js

@@ -1,4 +1,4 @@
-export { Popover } from '../chunk-AUS5FNQE.js';
+export { Popover } from '../chunk-PDUZO35I.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Popover-WJGCF3ZQ.css → Popover-QCINR7WG.css}

@@ -40,10 +40,13 @@
   transform-origin: bottom left;
 }
 
-/* A panel that takes focus shows it on the panel, not only on what is inside. */
+/* A panel that takes focus shows it on the panel, not only on what is inside,
+   and shows it ONCE: over the panel's own boundary rather than 2px off it,
+   which is two edges with a gap between them (the rule every field keeps, see
+   Input.css). */
 .crewlet-popover:focus-visible {
   outline: 2px solid var(--color-focus);
-  outline-offset: 2px;
+  outline-offset: var(--size-focus-ring-inset-offset);
 }
 
 /* Up from under its anchor, which is where it is about to be. */

package/dist/PricingCard/index.js

@@ -1,4 +1,4 @@
-export { PricingCard } from '../chunk-L6XZOCP4.js';
-import '../chunk-PAWGBSHU.js';
+export { PricingCard } from '../chunk-UCYIRDND.js';
+import '../chunk-LOECRMHA.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{PricingCard-7EFXRSD2.css → PricingCard-HTAHG4ST.css}

@@ -64,9 +64,13 @@
   border-color: var(--color-brand-accent-soft-strong);
 }
 
+/* One ring, over the card's own boundary rather than 2px off it, which is two
+   edges with a gap between them: the rule every field keeps (see Input.css).
+   The chosen plan keeps an accent line inside the ring, since the selection
+   ring below is two pixels deep and the focus ring covers one of them. */
 .crewlet-pricing-card:focus-visible {
   outline: 2px solid var(--color-focus);
-  outline-offset: 2px;
+  outline-offset: var(--size-focus-ring-inset-offset);
 }
 
 /* The chosen plan takes the selection ring, which is the same inset rule

package/dist/SearchTrigger/index.js

@@ -1,2 +1,2 @@
-export { SearchTrigger } from '../chunk-EFYPAJT3.js';
+export { SearchTrigger } from '../chunk-6DRDCT22.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{SearchTrigger-Z5D4AAY7.css → SearchTrigger-KIZLWBEH.css}

@@ -58,9 +58,12 @@
   color: var(--color-text-primary);
 }
 
+/* One ring, over the trigger's own boundary rather than 2px off it, which is
+   two edges with a gap between them: the rule every field keeps (see
+   Input.css). */
 .crewlet-search-trigger:focus-visible {
   outline: 2px solid var(--color-focus);
-  outline-offset: 2px;
+  outline-offset: var(--size-focus-ring-inset-offset);
 }
 
 .crewlet-search-trigger__icon {

package/dist/SegmentedControl/SegmentedControl.d.ts

@@ -1,5 +1,7 @@
 import { type ReactNode } from 'react';
 export type SegmentedSize = 'sm' | 'md';
+/** How the options are drawn: see [SegmentedControlProps.layout]. */
+export type SegmentedLayout = 'pill' | 'chips';
 export interface SegmentedOption<T extends string = string> {
     value: T;
     /** What is drawn. An empty label makes the option icon-only. */
@@ -27,6 +29,22 @@ interface SegmentedShared<T extends string> {
     value: T;
     onValueChange: (value: T) => void;
     size?: SegmentedSize | undefined;
+    /**
+     * How the options are drawn. `pill`, the default, is a row of chips in one
+     * tinted well, for a lens, a setting or a compact switch. `chips` is a row of
+     * SEPARATE chips that wraps, for a setting with more choices than a well
+     * holds on one line (a unit's type): each chip a raised ground of its own,
+     * the chosen one filled with the accent. A row whose options carry a
+     * description is drawn as cards whatever this says.
+     */
+    layout?: SegmentedLayout | undefined;
+    /**
+     * Drawn at the end of the row, after the last option and outside the
+     * choices themselves: the field that completes the last choice, such as the
+     * box a "Custom" chip asks for. It takes no part in the arrow keys, so a
+     * caret moves inside it as it does in any field.
+     */
+    trailing?: ReactNode | undefined;
     className?: string | undefined;
 }
 /**
@@ -97,5 +115,5 @@ export type SegmentedControlProps<T extends string = string> = SegmentedShared<T
  * look like two different controls depending on which component a screen
  * reached for.
  */
-export declare function SegmentedControl<T extends string = string>({ label, options, value, onValueChange, size, className, semantics, panelId, activate, activateHint, }: SegmentedControlProps<T>): import("react").JSX.Element;
+export declare function SegmentedControl<T extends string = string>({ label, options, value, onValueChange, size, layout, trailing, className, semantics, panelId, activate, activateHint, }: SegmentedControlProps<T>): import("react").JSX.Element;
 export {};

package/dist/SegmentedControl/index.d.ts

@@ -1,4 +1,4 @@
 import '../Tabs/Tabs.css';
 import './SegmentedControl.css';
 export { SegmentedControl } from './SegmentedControl.js';
-export type { SegmentedActivation, SegmentedControlProps, SegmentedOption, SegmentedSize, } from './SegmentedControl.js';
+export type { SegmentedActivation, SegmentedControlProps, SegmentedLayout, SegmentedOption, SegmentedSize, } from './SegmentedControl.js';

package/dist/SegmentedControl/index.js

@@ -1,5 +1,5 @@
-export { SegmentedControl } from '../chunk-DHPUMOTX.js';
-import '../chunk-QY7UU5ZB.js';
+export { SegmentedControl } from '../chunk-N5KCGFWI.js';
+import '../chunk-DRHXRGB6.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SegmentedControl-76HODRBT.css

@@ -0,0 +1,160 @@
+/*
+ * SegmentedControl: the pill row, drawn with the Tabs classes.
+ *
+ * Only what is its own lives here. The chrome, the sizes and the active chip
+ * come from Tabs.css, so a lens row and a setting row look the same whichever
+ * component a screen reached for.
+ */
+
+.crewlet-segmented__text {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1px;
+  min-width: 0;
+}
+
+/*
+ * A choice a reader has to READ before making it is a card row, not a chip:
+ * a template with a sentence under its name does not fit in a pill, and
+ * squeezing it there is how the sentence ends up truncated to nothing.
+ */
+/*
+ * TWO CLASSES, so this wins whatever order the stylesheets are bundled in.
+ * `.crewlet-tabs` sets the row's own display and alignment, and a rule of
+ * equal weight in a file that happens to come later takes them back.
+ */
+.crewlet-tabs.crewlet-segmented--cards {
+  display: grid;
+  gap: var(--spacing-2);
+  width: 100%;
+  align-items: stretch;
+}
+
+/*
+ * The same frame a framed Checkbox draws, because it is the same row: a
+ * boundary on the body it sits in, and no surface of its own. A choice with a
+ * surface inside a panel of the same surface reads as a second panel.
+ */
+.crewlet-segmented--cards .crewlet-segmented__option {
+  justify-content: flex-start;
+  text-align: left;
+  /* A sentence under a name is a sentence: it wraps rather than being cut. */
+  white-space: normal;
+  padding: var(--spacing-3);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  font-size: var(--font-size-compact);
+}
+
+/* One ring, over the card's own boundary rather than 2px off it, which is two
+   edges with a gap between them: the rule every field keeps (see Input.css).
+   The chosen card still says so under the ring, in its tint and its ink. */
+.crewlet-segmented--cards .crewlet-segmented__option:focus-visible {
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/* The one card that is chosen takes the accent, which is what "here, this
+   one" means everywhere else in the product. */
+.crewlet-segmented--cards .crewlet-segmented__option.is-active {
+  border-color: var(--color-brand-accent);
+  background: var(--color-brand-accent-soft);
+  color: var(--color-brand-accent-ink);
+}
+
+/*
+ * A ROW OF SEPARATE CHIPS, for a setting with more choices than a well holds
+ * on one line: the console's own row of unit types. It wraps rather than
+ * running off the panel it sits in, and each chip stands on the raised ground
+ * a chip with no edge of its own takes (held off the card by the palette
+ * suite), so no chip draws a frame inside the panel's. Two classes, for the
+ * reason the card row gives above.
+ */
+.crewlet-tabs.crewlet-segmented--chips {
+  /* The chip's own drawing (below) is the --crewlet-segmented-chip-height
+     band inside a target-floor box, so it is the same height at every
+     density the console's 11px chip is drawn at. */
+  --crewlet-segmented-chip-height: calc(var(--size-target-min) - var(--spacing-1));
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  /* No gap between ROWS: each chip's target already overhangs its drawing by
+     half a step above and below, so two rows' drawings stand a whole step
+     apart while their targets meet. */
+  gap: 0 var(--spacing-1);
+}
+
+/*
+ * SMALL, AS THE CONSOLE'S ARE, AND DRAWN SMALL BUT HIT FULL SIZE, the rule the
+ * org chart's own controls keep. A chip is a word in the 11px face with a step
+ * of room either side, drawn as a band shorter than the pointer-target floor;
+ * the button around it stays at the floor, so the band can be the console's
+ * size without being a target a finger misses. At the small control step a
+ * row of ten was a second row of buttons under the field's label rather than a
+ * row of answers to it.
+ *
+ * The band is the button's own ::before, behind the label, rather than its
+ * background clipped to the content box: a clip takes the corner's curve in by
+ * the padding it removes, and a chip this small would lose its radius.
+ */
+.crewlet-segmented--chips .crewlet-segmented__option {
+  position: relative;
+  isolation: isolate;
+  min-height: var(--size-target-min);
+  padding: 0 var(--spacing-2);
+  border-radius: var(--radius-sm);
+  background: none;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-2xs);
+}
+
+.crewlet-segmented--chips .crewlet-segmented__option::before {
+  content: '';
+  position: absolute;
+  inset: calc((var(--size-target-min) - var(--crewlet-segmented-chip-height)) / 2) 0;
+  z-index: -1;
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-elevated);
+  pointer-events: none;
+}
+
+/* The chosen chip is FILLED with the accent: on a row of up to ten raised
+   chips, a fill is the one thing that says "this one" at a glance, as the
+   console's row says it. Its ring stands off it, because an edge drawn on an
+   accent fill in the focus colour is nearly the fill's own colour. */
+.crewlet-segmented--chips .crewlet-segmented__option.is-active {
+  color: var(--color-text-on-accent);
+}
+
+.crewlet-segmented--chips .crewlet-segmented__option.is-active::before {
+  background: var(--color-brand-accent);
+}
+
+/* What completes the last choice sits in the row, at the chips' own height
+   and in their face: a field at its own control step stood taller than every
+   chip beside it. */
+.crewlet-segmented__trailing {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.crewlet-segmented--chips .crewlet-segmented__trailing .crewlet-input {
+  min-height: var(--crewlet-segmented-chip-height);
+}
+
+.crewlet-segmented--chips .crewlet-segmented__trailing .crewlet-input__control {
+  font-size: var(--font-size-2xs);
+}
+
+.crewlet-segmented__description {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-text-tertiary);
+  white-space: normal;
+}
+
+.crewlet-segmented--cards .crewlet-segmented__option.is-active .crewlet-segmented__description {
+  color: var(--color-brand-accent-ink);
+}

package/dist/Select/index.js

@@ -1,4 +1,4 @@
-export { Select } from '../chunk-SJQ546ID.js';
+export { Select } from '../chunk-SEFMO2EV.js';
 import '../chunk-6MU7HNB4.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';

package/dist/{Select-E24U5LBC.css → Select-4ANVLHUY.css}

@@ -68,8 +68,8 @@
  * leave the other bare.
  */
 .crewlet-select:focus-within {
-  outline: 2px solid var(--color-focus);
-  outline-offset: var(--size-focus-ring-inset-offset);
+  outline: 1px solid var(--color-focus);
+  outline-offset: -1px;
 }
 
 /*
@@ -347,8 +347,8 @@ svg.crewlet-select__chevron {
  * outset ring on the input would be cut by the menu's own `overflow: hidden`.
  */
 .crewlet-select__search:focus-within {
-  outline: 2px solid var(--color-focus);
-  outline-offset: var(--size-focus-ring-inset-offset);
+  outline: 1px solid var(--color-focus);
+  outline-offset: -1px;
 }
 
 .crewlet-select__search {

package/dist/Switch/index.js

@@ -1,2 +1,2 @@
-export { Switch } from '../chunk-EV6IMYJ6.js';
+export { Switch } from '../chunk-A722MUNR.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Switch-U4OWK4CL.css → Switch-66RAQCRE.css}

@@ -111,14 +111,17 @@
  * control's own :focus-visible. The track is the same box: the control is
  * `inset: 0` over it.
  *
- * OUTSET, like a Checkbox's and unlike a text field's. A 20px pill has no
- * room to draw a ring inside itself, and there is no boundary to cover out
- * there either: the track's own border goes the accent colour of its fill
- * when the switch is on, so the ring is the only edge in that space.
+ * OUTSIDE THE TRACK, like a Checkbox's and unlike a text field's: a 20px pill
+ * has no room to draw a ring inside itself. But AGAINST it, not 2px off it.
+ * Off, the track draws a real boundary of its own, and a ring standing off
+ * that boundary was two edges with a gap between them, which reads as a
+ * second outline rather than as focus. Flush, the ring and the track are one
+ * edge in both states, and the ring is still drawn whole on the ground around
+ * the pill, where it is measured.
  */
 .crewlet-switch__track:has(.crewlet-switch__control:focus-visible) {
   outline: 2px solid var(--color-focus);
-  outline-offset: 2px;
+  outline-offset: 0;
 }
 
 .crewlet-switch__text {

package/dist/Tabs/index.js

@@ -1,4 +1,4 @@
-export { TabPanel, Tabs, tabId } from '../chunk-QY7UU5ZB.js';
+export { TabPanel, Tabs, tabId } from '../chunk-DRHXRGB6.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Tabs-XCNPHA7B.css → Tabs-BWFQSWY3.css}

@@ -288,6 +288,18 @@
   outline-offset: 2px;
 }
 
+/*
+ * A CHIP RINGS ON ITS OWN EDGE, flush rather than 2px off it. The chip that
+ * is on draws a hairline round itself, and a ring standing off that hairline
+ * was two edges with a gap between them, which reads as a second outline
+ * rather than as focus. Flush, the ring covers the hairline, and it stays
+ * inside the well's 2px inset: two pixels wide, it meets the well's own
+ * boundary rather than leaving a sliver of the well between the two.
+ */
+.crewlet-tabs--pill .crewlet-tabs__tab:focus-visible {
+  outline-offset: 0;
+}
+
 .crewlet-tabs__tab.is-disabled,
 .crewlet-tabs__tab:disabled {
   opacity: 0.55;

package/dist/Tag/index.js

@@ -1,3 +1,3 @@
-export { Tag } from '../chunk-PAWGBSHU.js';
+export { Tag } from '../chunk-LOECRMHA.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-ODEQTPFM.js';