@crewlethq/ui 0.4.3 → 0.4.4

package/dist/Combobox/index.js

@@ -1,6 +1,6 @@
-export { Combobox } from '../chunk-UOGSZKLT.js';
-import '../chunk-GTOUGQQK.js';
-import '../chunk-O6232G37.js';
+export { Combobox } from '../chunk-MW356IVK.js';
+import '../chunk-KIC7BZYJ.js';
+import '../chunk-GKHAKGOF.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-ITHXJHBB.js';
 import '../chunk-F27EPQ7D.js';

package/dist/CommandPalette/index.js

@@ -1,7 +1,7 @@
-export { CommandPalette } from '../chunk-ESCO4XYW.js';
+export { CommandPalette } from '../chunk-AJNCATWZ.js';
+import '../chunk-KIC7BZYJ.js';
+import '../chunk-GKHAKGOF.js';
 import '../chunk-2EOKFKHX.js';
-import '../chunk-GTOUGQQK.js';
-import '../chunk-O6232G37.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-ITHXJHBB.js';

package/dist/DataTable/index.js

@@ -1,10 +1,10 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-WQX73TWF.js';
-import '../chunk-FBZAKNSX.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-PATXSJGR.js';
+import '../chunk-T43A26SD.js';
 import '../chunk-EUCC37WY.js';
-import '../chunk-2EOKFKHX.js';
-import '../chunk-AV2DXAEL.js';
 import '../chunk-2PRH365R.js';
+import '../chunk-AV2DXAEL.js';
 import '../chunk-5VNUYO76.js';
+import '../chunk-2EOKFKHX.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-ITHXJHBB.js';

package/dist/{DataTable-ITNACQ2X.css → DataTable-37UWTRN6.css}

@@ -16,11 +16,15 @@
   --crewlet-data-table-active-sort-color: var(--color-brand-accent-ink);
   width: 100%;
   position: relative;
-  overflow-x: auto;
-  /* The gesture stops at the table's own edge. Without it a trackpad swipe
-     that runs out of table carries on into the browser's back navigation, so
-     one column too far left loses the page. */
-  overscroll-behavior-x: contain;
+  /* NO SCROLLER HERE. This carried `overflow-x: auto` and its own
+     `overscroll-behavior-x`, and neither could act: `.crewlet-data-table__scroll`
+     is rendered inside it for BOTH variants at `width: 100%`, so it absorbs
+     the table's width and the root never has anything to scroll. What the
+     declaration did still do is make this a scroll container — and per CSS
+     Overflow that pulls `overflow-y` to `auto` as well — so it quietly became
+     the scrollport a `position: sticky` descendant resolves against. The inner
+     wrapper carries the real scrolling and the gesture containment, which is
+     what the layout comment further down already describes. */
 }
 
 .crewlet-data-table--default .crewlet-data-table__table {

package/dist/DataView/index.js

@@ -1,20 +1,20 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-34VGEDVV.js';
+export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-CC67MUUO.js';
 import '../chunk-5EKIWVOR.js';
-import '../chunk-HOXGBLEY.js';
 import '../chunk-3CZ7XAVY.js';
+import '../chunk-HOXGBLEY.js';
 import '../chunk-SFZOKW2G.js';
-import '../chunk-WQX73TWF.js';
-import '../chunk-FBZAKNSX.js';
+import '../chunk-PATXSJGR.js';
+import '../chunk-T43A26SD.js';
 import '../chunk-EUCC37WY.js';
-import '../chunk-2EOKFKHX.js';
-import '../chunk-UG46QBLT.js';
-import '../chunk-DD5BBGBE.js';
+import '../chunk-DB2VDLVR.js';
+import '../chunk-EFSG7HNU.js';
 import '../chunk-GXQ3B46I.js';
-import '../chunk-AV2DXAEL.js';
 import '../chunk-2PRH365R.js';
+import '../chunk-AV2DXAEL.js';
 import '../chunk-5VNUYO76.js';
-import '../chunk-GTOUGQQK.js';
-import '../chunk-O6232G37.js';
+import '../chunk-KIC7BZYJ.js';
+import '../chunk-GKHAKGOF.js';
+import '../chunk-2EOKFKHX.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-7RPGY3JE.js';

package/dist/DateTimePicker/index.js

@@ -1,5 +1,5 @@
-export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-UG46QBLT.js';
-import '../chunk-DD5BBGBE.js';
+export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-DB2VDLVR.js';
+import '../chunk-EFSG7HNU.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-ITHXJHBB.js';

package/dist/DiffList/index.js

@@ -1,3 +1,3 @@
-export { DIFF_LIST_LABELS, DiffList } from '../chunk-HQNHV7D6.js';
+export { DIFF_LIST_LABELS, DiffList } from '../chunk-AQTBF4EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Input/index.js

@@ -1,4 +1,4 @@
-export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea } from '../chunk-O6232G37.js';
+export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea } from '../chunk-GKHAKGOF.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-F27EPQ7D.js';
 import '../chunk-BZFWDIV6.js';

package/dist/ListInput/index.js

@@ -1,10 +1,10 @@
-export { ListInput } from '../chunk-LFJ6UJTI.js';
+export { ListInput } from '../chunk-FSOW3ARP.js';
 import '../chunk-SFZOKW2G.js';
-import '../chunk-O6232G37.js';
+import '../chunk-GKHAKGOF.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-RSAQOKH3.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-ITHXJHBB.js';
 import '../chunk-F27EPQ7D.js';
+import '../chunk-RSAQOKH3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Listbox/index.js

@@ -1,2 +1,2 @@
-export { TYPE_AHEAD_WINDOW, useListbox, useOptionKeys } from '../chunk-GTOUGQQK.js';
+export { TYPE_AHEAD_WINDOW, useListbox, useOptionKeys } from '../chunk-KIC7BZYJ.js';
 import '../chunk-ITHXJHBB.js';

package/dist/Listbox/useListbox.d.ts

@@ -82,6 +82,20 @@ export interface Listbox {
     listId: string;
     /** The list on screen: what a press outside is measured against, and what scrolls. */
     listRef: (el: HTMLElement | null) => void;
+    /**
+     * THE SURFACE, where it is bigger than the list — and a consumer uses this
+     * OR `listRef`, never both.
+     *
+     * `listRef` does two jobs because for most consumers one element does both:
+     * the list is what scrolls AND what a press outside is measured against. A
+     * popup that carries anything beside its list breaks that: a Select with
+     * `searchable` puts a search box in the panel as a SIBLING of the list, so a
+     * press on it was measured against the list, came out `outside`, and
+     * dismissed the popup the reader was trying to type into — the control could
+     * not be used with a pointer at all. Naming the surface separately is what
+     * keeps the two questions apart.
+     */
+    panelRef: (el: HTMLElement | null) => void;
     /** The element around the field: a press on it is not outside the list. */
     anchorRef: (el: HTMLElement | null) => void;
     /** The id of the option element at `index`. */

package/dist/Listbox/useOptionKeys.d.ts

@@ -44,6 +44,17 @@ export interface OptionKeysOptions {
      * letters belong to a search box: that list has no type-ahead, on purpose.
      */
     textOf?: ((index: number) => string) | undefined;
+    /**
+     * Whether Home and End move the HIGHLIGHT. True by default, and false for a
+     * list whose field is editable, where they belong to the caret.
+     *
+     * The same split `textOf` makes, for the same reason. WAI-ARIA states it
+     * outright for a combobox with a listbox popup: Home and End move visual
+     * focus in the list only when the combobox is NOT editable; when it is, they
+     * are the text's. This hook cannot tell — its whole input is a count, a
+     * disabled predicate and some strings — so the component that knows says so.
+     */
+    ends?: boolean | undefined;
 }
 export interface OptionKeys {
     /**
@@ -61,4 +72,4 @@ export interface OptionKeys {
      */
     opening: (chosen: number) => number;
 }
-export declare function useOptionKeys({ listbox, count, disabled, textOf }: OptionKeysOptions): OptionKeys;
+export declare function useOptionKeys({ listbox, count, disabled, textOf, ends }: OptionKeysOptions): OptionKeys;

package/dist/{Listbox-X2DOTSQA.css → Listbox-ZXYYNN6U.css}

@@ -32,6 +32,29 @@
   display: flex;
   align-items: center;
   gap: var(--spacing-2);
+  /*
+   * A ROW IS NEVER SHRUNK BELOW ITS OWN CONTENT, and `flex: none` is what says
+   * so. The list above is a column flex container with a `max-height` and
+   * `overflow-y: auto`, which makes every row a flex ITEM, and a flex item's
+   * automatic minimum size is normally its content — that is what stops a
+   * column from compressing its children and makes the container scroll
+   * instead. The `min-height` below REPLACES that automatic minimum with a
+   * fixed floor, so once the rows no longer fit, the free space goes negative
+   * and every row shrinks to exactly that floor BEFORE the scrollbar appears.
+   * A row is `overflow: visible`, so its content then paints over its
+   * neighbours.
+   *
+   * It is not a corner case: a row is 19.5px of text plus 16px of padding =
+   * 35.5px against a 28px floor, so EVERY row of a list long enough to scroll
+   * was over-tall. Measured in Chromium on a nine-option Select — five rows
+   * drawn over each other, two of them at 59px inside a 28px box.
+   *
+   * `flex: none` is `0 0 auto`: the basis stays content-derived and the row
+   * can no longer shrink, which leaves `min-height` doing the one job it was
+   * written for — a floor under a SHORT row, not a cap on a tall one. The
+   * scroller absorbs the excess, one row deep, which is what it is for.
+   */
+  flex: none;
   min-height: var(--size-row-sm);
   padding: var(--spacing-2) var(--spacing-3);
   border-radius: var(--radius-md);
@@ -103,7 +126,12 @@
   font-size: var(--font-size-compact);
 }
 
+/* AND NEITHER IS THE SEPARATOR, for the same reason one step further: its
+   content minimum is zero, so it is the one child a squeezed column can
+   flatten completely — exactly when the list is long enough to need the
+   grouping it draws. */
 .crewlet-listbox__separator {
+  flex: none;
   height: 1px;
   margin: var(--spacing-1) 0;
   background: var(--color-border-default);

package/dist/Menu/index.js

@@ -1,4 +1,4 @@
-export { Menu } from '../chunk-FBZAKNSX.js';
+export { Menu } from '../chunk-T43A26SD.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-ITHXJHBB.js';
 import '../chunk-F27EPQ7D.js';

package/dist/{Menu-6DE7I66I.css → Menu-BT5PMFJI.css}

@@ -70,6 +70,21 @@
   align-items: center;
   gap: var(--spacing-2);
   width: 100%;
+  /*
+   * THE SAME RULE THE LISTBOX ROW STATES, and it has to be stated twice
+   * because a menu's rows are deliberately not in that family (see the head of
+   * Listbox.css). The panel above is a column flex scroller, `__group` is
+   * `display: contents` so every item is a direct flex item of it, and the
+   * `min-height` below replaces the automatic minimum that would otherwise
+   * hold a row at its content. Once the menu is long enough to scroll, the
+   * free space goes negative and the rows shrink to that floor first.
+   *
+   * A plain row survives it by accident — one nowrap line is 19.5px, under the
+   * floor, so there is nothing to shrink. A `--described` row does not: it
+   * adds `padding-block` and stacks a label over a wrapping description, which
+   * is ~52px squeezed into 28px and drawn over the rows either side.
+   */
+  flex: none;
   min-height: var(--size-row-sm);
   padding: 0 var(--spacing-2);
   border: none;

package/dist/Popover/index.js

@@ -1,4 +1,4 @@
-export { Popover } from '../chunk-DD5BBGBE.js';
+export { Popover } from '../chunk-EFSG7HNU.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-ITHXJHBB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SegmentedControl/index.js

@@ -1,5 +1,5 @@
-export { SegmentedControl } from '../chunk-6ZFVFA56.js';
-import '../chunk-QEUY3A5P.js';
+export { SegmentedControl } from '../chunk-7PEFUMQJ.js';
+import '../chunk-Q3B66TJM.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Select/index.js

@@ -1,5 +1,5 @@
-export { Select } from '../chunk-OFHBK7RI.js';
-import '../chunk-GTOUGQQK.js';
+export { Select } from '../chunk-KNYYCWMK.js';
+import '../chunk-KIC7BZYJ.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-ITHXJHBB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Select-2X77FSWR.css → Select-E24U5LBC.css}

@@ -297,9 +297,25 @@ svg.crewlet-select__chevron {
   min-width: 0;
 }
 
+/*
+ * ONE LINE, WHICH IS WHAT THE ELLIPSIS BELOW WAS ALWAYS FOR. `overflow:
+ * hidden` clips what leaves the box and `text-overflow` replaces what a LINE
+ * cannot hold — and neither does anything to text that is simply allowed to
+ * wrap, which is what this rule did without `white-space`. A long option
+ * silently grew a second line instead of ellipsing, and with the row's own
+ * flex minimum gone (see Listbox.css) that second line was drawn over the
+ * option underneath.
+ *
+ * The trigger's `.crewlet-select__label` a hundred lines above has carried all
+ * three since it was written; this is the same register on the same text, and
+ * `.crewlet-listbox__hint` states the rule outright — "never wrapped: a hint
+ * that broke across two lines turned every row in the list a different
+ * height".
+ */
 .crewlet-select__option-label {
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .crewlet-select__option-desc {
@@ -317,6 +333,24 @@ svg.crewlet-select__chevron {
 
 /* ── The search box ──────────────────────────────────────────────────── */
 
+/*
+ * THE RING IS DRAWN WHERE THE ELEMENT IS. The input below clears the user
+ * agent's outline, and the frame's `:focus-within` rule is the package's one
+ * replacement for it — but that rule's own premise is that everything
+ * focusable sits INSIDE `.crewlet-select`, and this box does not: the panel is
+ * portalled into the layer host, outside that subtree, so `:focus-within`
+ * could never match while focus was in the search field. And focus is moved
+ * here on every open, so the one control a searchable Select puts a reader in
+ * was the one with no focus indicator at all.
+ *
+ * On the band rather than the input, and INSET, because the panel clips: an
+ * 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);
+}
+
 .crewlet-select__search {
   display: flex;
   align-items: center;

package/dist/Table/index.js

@@ -1,3 +1,3 @@
-export { Table } from '../chunk-FEFTGVMF.js';
+export { Table } from '../chunk-V2N3BMOT.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Table-MDOLVUAW.css → Table-TGCS4C3F.css}

@@ -29,10 +29,20 @@
 .crewlet-table__container {
   /* The overflow is a safety net for a cell that cannot wrap (a long token, a
      hash); the fixed layout below is what keeps a table inside the width it is
-     given. A `maxHeight` turns this into the vertical scroller the sticky
-     header needs, which is the only way a long table keeps its column names. */
-  overflow-x: auto;
-  overflow-y: var(--crewlet-table-overflow-y, visible);
+     given. A `maxHeight` gives it something to scroll vertically, which is
+     what the sticky header needs and the only way a long table keeps its
+     column names.
+
+     BOTH AXES, STATED. This was `overflow-y: var(--crewlet-table-overflow-y,
+     visible)`, and the fallback was unreachable: per CSS Overflow, when one
+     axis is not `visible` the other computes to `auto`, so the unconditional
+     `overflow-x: auto` beside it made this box a scrollport in both
+     directions in every state. The variable had exactly one reachable value —
+     the `auto` Table.tsx wrote beside the max-height — so it read as a knob
+     with a default nothing could ever select. Without a max-height there is
+     simply nothing to scroll to, which is what made the difference invisible
+     rather than what made it absent. */
+  overflow: auto;
   max-height: var(--crewlet-table-max-height, none);
   overscroll-behavior-x: contain;
   flex: 1;

package/dist/Tabs/index.js

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

package/dist/{Tabs-VLICJFVB.css → Tabs-MJ2E3VPK.css}

@@ -50,7 +50,21 @@
    */
   content: '';
   position: absolute;
-  bottom: -1px;
+  /*
+   * ON THE PADDING EDGE, NOT BELOW IT. This is an absolutely positioned child
+   * of the row, and the row is a scroll container: `overflow-x: auto` makes
+   * `overflow-y` compute to `auto` as well, so there is no axis on which it
+   * does not clip. Clipping is to the PADDING edge and the row's own 1px
+   * `border-bottom` lies outside it, so at `bottom: -1px` a 2px bar was cut in
+   * half — and the half removed was the lower one, the half meant to sit on
+   * the baseline rule and replace it. `scrollbar-width: none` above then hid
+   * the 1px vertical scrollbar that would have given the game away.
+   *
+   * `overflow: visible` is not the way out: the horizontal scrolling is the
+   * row's whole contract. The bar sits at 0 instead and paints over the row's
+   * last two pixels, which is where a reader sees it anyway.
+   */
+  bottom: 0;
   /*
    * Under the LABEL, not under the tab's box: the measurement is the button,
    * which carries the small side pad an inset focus ring needs, and a bar
@@ -108,6 +122,24 @@
   align-items: center;
   justify-content: center;
   gap: var(--spacing-1);
+  /*
+   * A TAB IS NEVER SQUEEZED, which is what makes the row above it SCROLL.
+   *
+   * `.crewlet-tabs--underline` is a `width: 100%` flex row with
+   * `overflow-x: auto`, and its own comment states the contract: the row
+   * scrolls rather than overflowing the page. That behaviour came entirely
+   * from each tab's automatic minimum resolving to its `nowrap` label, which
+   * is what makes the line unable to fit — and the explicit `min-width` below
+   * REPLACES that automatic minimum with a flat 24px for every item, not just
+   * the narrow ones the floor is for. With the default `flex-shrink: 1` the
+   * tabs were squeezed toward 24px until the line fitted, the strip stopped
+   * scrolling, and the labels — `nowrap`, with `min-width: 0` and no clip —
+   * spilled out of their buttons over their neighbours.
+   *
+   * `flex: none` is what the comment above already claims: "a tab whose label
+   * is wider than the floor is untouched".
+   */
+  flex: none;
   /* Never under the 24px target floor, at any density. */
   min-height: var(--size-control-sm);
   min-width: var(--size-target-min);

package/dist/TagsInput/index.js

@@ -1,10 +1,10 @@
-export { TagsInput } from '../chunk-BJSKPEZI.js';
+export { TagsInput } from '../chunk-6KCO2D5C.js';
 import '../chunk-S2XHHEW4.js';
 import '../chunk-PZSWF74H.js';
-import '../chunk-GTOUGQQK.js';
-import '../chunk-RSAQOKH3.js';
+import '../chunk-KIC7BZYJ.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-ITHXJHBB.js';
 import '../chunk-F27EPQ7D.js';
+import '../chunk-RSAQOKH3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ThemeSwitcher/index.js

@@ -1,6 +1,6 @@
-export { DensitySwitcher, ThemeSwitcher, applyDensity, applyStoredPreferences, applyTheme, useDensityPreference, useThemePreference } from '../chunk-2HQR4U4D.js';
-import '../chunk-6ZFVFA56.js';
-import '../chunk-QEUY3A5P.js';
+export { DensitySwitcher, ThemeSwitcher, applyDensity, applyStoredPreferences, applyTheme, useDensityPreference, useThemePreference } from '../chunk-R66KLW7S.js';
+import '../chunk-7PEFUMQJ.js';
+import '../chunk-Q3B66TJM.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TimeWindowPicker/index.js

@@ -1,9 +1,9 @@
-export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-WOYYD2YR.js';
-import '../chunk-OFHBK7RI.js';
-import '../chunk-DD5BBGBE.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-XJWXPRSK.js';
+import '../chunk-KNYYCWMK.js';
+import '../chunk-EFSG7HNU.js';
 import '../chunk-GXQ3B46I.js';
-import '../chunk-GTOUGQQK.js';
-import '../chunk-O6232G37.js';
+import '../chunk-KIC7BZYJ.js';
+import '../chunk-GKHAKGOF.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-ITHXJHBB.js';

package/dist/Tooltip/index.js

@@ -1,4 +1,4 @@
-export { Tooltip } from '../chunk-XV6WRMBC.js';
+export { Tooltip } from '../chunk-5KSRXHOW.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-ITHXJHBB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{chunk-XV6WRMBC.js → chunk-5KSRXHOW.js}

@@ -123,10 +123,13 @@ function Tooltip({
     container?.addEventListener(LAYER_REPOSITION_EVENT, onLayout);
     window.addEventListener("resize", onLayout);
     window.addEventListener("scroll", onLayout, true);
+    const resize = typeof ResizeObserver === "function" ? new ResizeObserver(onLayout) : null;
+    if (panel.current) resize?.observe(panel.current);
     return () => {
       container?.removeEventListener(LAYER_REPOSITION_EVENT, onLayout);
       window.removeEventListener("resize", onLayout);
       window.removeEventListener("scroll", onLayout, true);
+      resize?.disconnect();
     };
   }, [open, container, position]);
   useEffect(() => {

package/dist/{chunk-BJSKPEZI.js → chunk-6KCO2D5C.js}

@@ -1,8 +1,8 @@
 import { Tag } from './chunk-S2XHHEW4.js';
-import { useListbox } from './chunk-GTOUGQQK.js';
-import { announce } from './chunk-RSAQOKH3.js';
+import { useListbox } from './chunk-KIC7BZYJ.js';
 import { isComposing } from './chunk-ITHXJHBB.js';
 import { IconButton } from './chunk-F27EPQ7D.js';
+import { announce } from './chunk-RSAQOKH3.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TagsInput-W4P36PRJ.css';
 import { forwardRef, useState, useRef, useId, useImperativeHandle, useEffect, useMemo, useLayoutEffect } from 'react';

package/dist/{chunk-6ZFVFA56.js → chunk-7PEFUMQJ.js}

@@ -1,8 +1,8 @@
-import { useRoving, tabStop, tabId } from './chunk-QEUY3A5P.js';
+import { useRoving, tabStop, tabId } from './chunk-Q3B66TJM.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Tabs-VLICJFVB.css';
+import './Tabs-MJ2E3VPK.css';
 import './SegmentedControl-X3BI3XU4.css';
 import { useId } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-ESCO4XYW.js → chunk-AJNCATWZ.js}

@@ -1,6 +1,6 @@
+import { useListbox } from './chunk-KIC7BZYJ.js';
+import { Input } from './chunk-GKHAKGOF.js';
 import { Modal } from './chunk-2EOKFKHX.js';
-import { useListbox } from './chunk-GTOUGQQK.js';
-import { Input } from './chunk-O6232G37.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './CommandPalette-CSJDUCQA.css';
 import { useId, useMemo } from 'react';

package/dist/{chunk-HQNHV7D6.js → chunk-AQTBF4EB.js}

@@ -37,7 +37,7 @@ function DiffList({ rows, emptyMessage, labels: overrides, className }) {
               /* @__PURE__ */ jsx(VisuallyHidden, { children: labels[row.kind] })
             ] }),
             /* @__PURE__ */ jsx("span", { className: "crewlet-diff-list__path", children: row.path }),
-            /* @__PURE__ */ jsx("span", { className: "crewlet-diff-list__value", children: row.kind === "added" ? row.to : row.kind === "removed" ? row.from : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "crewlet-diff-list__value", children: row.kind === "added" ? /* @__PURE__ */ jsx("span", { className: "crewlet-diff-list__to", children: row.to }) : row.kind === "removed" ? /* @__PURE__ */ jsx("span", { className: "crewlet-diff-list__from", children: row.from }) : /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx("span", { className: "crewlet-diff-list__from", children: row.from }),
               /* @__PURE__ */ jsx(ArrowForwardGlyph, { className: "crewlet-diff-list__arrow", size: "sm" }),
               /* @__PURE__ */ jsx(VisuallyHidden, { children: labels.to }),

package/dist/{chunk-34VGEDVV.js → chunk-CC67MUUO.js}

@@ -1,13 +1,13 @@
 import { Toolbar } from './chunk-5EKIWVOR.js';
-import { PageHeader } from './chunk-HOXGBLEY.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
+import { PageHeader } from './chunk-HOXGBLEY.js';
 import { Kbd } from './chunk-SFZOKW2G.js';
-import { DataTable } from './chunk-WQX73TWF.js';
-import { Menu } from './chunk-FBZAKNSX.js';
-import { DateTimePicker } from './chunk-UG46QBLT.js';
-import { Popover } from './chunk-DD5BBGBE.js';
-import { useListbox, useOptionKeys } from './chunk-GTOUGQQK.js';
-import { Input } from './chunk-O6232G37.js';
+import { DataTable } from './chunk-PATXSJGR.js';
+import { Menu } from './chunk-T43A26SD.js';
+import { DateTimePicker } from './chunk-DB2VDLVR.js';
+import { Popover } from './chunk-EFSG7HNU.js';
+import { useListbox, useOptionKeys } from './chunk-KIC7BZYJ.js';
+import { Input } from './chunk-GKHAKGOF.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { IconButton } from './chunk-F27EPQ7D.js';
 import { Button } from './chunk-BZYDZBAN.js';
@@ -456,7 +456,7 @@ function OptionListEditor({ def, value, labels, onCommit }) {
         role: "listbox",
         "aria-label": labels.options(def.label),
         "aria-multiselectable": multiple || void 0,
-        "aria-activedescendant": options.length > 0 ? listbox.optionId(listbox.active) : void 0,
+        "aria-activedescendant": listbox.active >= 0 ? listbox.optionId(listbox.active) : void 0,
         tabIndex: 0,
         className: "crewlet-filter-axis__options",
         onKeyDown,

package/dist/{chunk-UG46QBLT.js → chunk-DB2VDLVR.js}

@@ -1,4 +1,4 @@
-import { Popover } from './chunk-DD5BBGBE.js';
+import { Popover } from './chunk-EFSG7HNU.js';
 import { today, CalendarGrid, shiftMonth, compareDays } from './chunk-GXQ3B46I.js';
 import { IconButton } from './chunk-F27EPQ7D.js';
 import { Button } from './chunk-BZYDZBAN.js';

package/dist/{chunk-DD5BBGBE.js → chunk-EFSG7HNU.js}

@@ -50,10 +50,10 @@ function Popover({
     const inHost = container !== document.body;
     const host = inHost ? container.getBoundingClientRect() : viewportBounds();
     const rect = at.getBoundingClientRect();
+    box.style.width = width === "match" ? `${rect.width}px` : "";
     const own = box.getBoundingClientRect();
-    const panelWidth = width === "match" ? rect.width : own.width;
     const local = {
-      x: (align === "end" ? rect.right - panelWidth : rect.left) - (inHost ? host.x : 0),
+      x: (align === "end" ? rect.right - own.width : rect.left) - (inHost ? host.x : 0),
       y: rect.top - (inHost ? host.y : 0),
       width: rect.width,
       height: rect.height
@@ -69,15 +69,16 @@ function Popover({
       close("anchor-gone");
       return;
     }
+    const asked = width === "match" ? rect.width : void 0;
     const spot = placePopup(
       local,
-      { width: panelWidth, height: own.height },
+      { width: own.width, height: own.height },
       bounds,
       LAYER_GAP,
       side === "top" ? "above" : "below"
     );
     setPlace(
-      (was) => was && was.left === spot.left && was.top === spot.top && was.side === spot.side && was.width === panelWidth ? was : { left: spot.left, top: spot.top, side: spot.side, width: width === "match" ? panelWidth : void 0 }
+      (was) => was && was.left === spot.left && was.top === spot.top && was.side === spot.side && was.width === asked ? was : { left: spot.left, top: spot.top, side: spot.side, width: asked }
     );
   }, [align, close, container, side, width]);
   useLayoutEffect(() => {
@@ -87,10 +88,13 @@ function Popover({
     container?.addEventListener(LAYER_REPOSITION_EVENT, onLayout);
     window.addEventListener("resize", onLayout);
     window.addEventListener("scroll", onLayout, true);
+    const resize = typeof ResizeObserver === "function" ? new ResizeObserver(onLayout) : null;
+    if (panel.current) resize?.observe(panel.current);
     return () => {
       container?.removeEventListener(LAYER_REPOSITION_EVENT, onLayout);
       window.removeEventListener("resize", onLayout);
       window.removeEventListener("scroll", onLayout, true);
+      resize?.disconnect();
     };
   }, [open, container, position]);
   useEffect(() => {

package/dist/{chunk-LFJ6UJTI.js → chunk-FSOW3ARP.js}

@@ -1,8 +1,8 @@
 import { Kbd } from './chunk-SFZOKW2G.js';
-import { FormField, Textarea, Input } from './chunk-O6232G37.js';
-import { announce } from './chunk-RSAQOKH3.js';
+import { FormField, Textarea, Input } from './chunk-GKHAKGOF.js';
 import { isComposing } from './chunk-ITHXJHBB.js';
 import { IconButton } from './chunk-F27EPQ7D.js';
+import { announce } from './chunk-RSAQOKH3.js';
 import './ListInput-O7LJKOIG.css';
 import { useState, useRef, useLayoutEffect } from 'react';
 import { ArrowUpwardGlyph, ArrowDownwardGlyph, CloseGlyph, AddGlyph } from '@crewlethq/icons/glyphs';