@crewlethq/ui 0.13.0 → 0.15.0

package/dist/Layer/index.js

@@ -1,3 +1,3 @@
-export { LAYER_GAP, LAYER_REPOSITION_EVENT, LayerHost, outsideBounds, placePopup, useLayerContainer, viewportBounds } from '../chunk-7RPGY3JE.js';
+export { LAYER_GAP, LAYER_REPOSITION_EVENT, LayerHost, outsideBounds, placePopup, useLayerContainer, viewportBounds } from '../chunk-HMPFGIWM.js';
 export { focusables, isComposing, isModalLayerOpen, layerCount, useBodyScrollLock, useModalLayer, usePopupLayer } from '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Layer-J222IFNX.css

@@ -0,0 +1,33 @@
+/*
+ * The portal target a LayerHost provides.
+ *
+ * It covers its container so a surface placed against its rectangle is placed
+ * against the container, and it is inert until something is drawn in it: an
+ * empty host over a canvas must not swallow the drag that pans the canvas.
+ * Each overlay inside takes pointer events back for its own panel.
+ *
+ * Its container establishes the positioning context. A host whose parent is
+ * static covers the nearest positioned ancestor instead, which is the
+ * viewport in the common case and is still a usable bound.
+ *
+ * IT TAKES NO PLACE IN THE STACKING ORDER OF ITS OWN. Every surface drawn in
+ * it carries its own step in the layer band, its depth in the stack, and that
+ * is what decides what paints on top. A z-index here made the host a stacking
+ * context at the bottom of the band, which held everything inside it under
+ * whatever the page stacked above that step: the shell's open drawer takes
+ * the band's own steps beside the host rather than inside it, so a panel
+ * opened from the drawer was drawn under the drawer it came from. A surface
+ * at the same step as the drawer's rail, which is the next one opened above
+ * it, paints over the rail because the host follows the shell in the
+ * document.
+ */
+
+.crewlet-layer-host {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.crewlet-layer-host > * {
+  pointer-events: auto;
+}

package/dist/Layout/index.js

@@ -1,2 +1,2 @@
-export { AutoGrid, Inline, Spacer, Stack } from '../chunk-W4ENKCXJ.js';
+export { AutoGrid, Inline, Spacer, Stack } from '../chunk-ZAC7SKUN.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Layout-2ZCV3IGF.css → Layout-ZBEGLXAE.css}

@@ -25,6 +25,24 @@
   flex-direction: row;
 }
 
+/*
+ * DRAWN AS A LIST, IT IS STILL A RUN OF ITEMS. A Stack or an Inline spends no
+ * pixel of its own, and a `ul` or an `ol` arrives with the browser's: a margin
+ * above and below, a 40px indent and a marker on every item, so a list of five
+ * names laid out as a Stack was pushed in and bulleted. They are taken back,
+ * and the element stays a list to a screen reader. A list that wants its
+ * markers is `List variant="bulleted"`.
+ *
+ * Inside :where(), so the rule weighs one class like every other here and a
+ * caller's own class still decides what it sets.
+ */
+:where(ul, ol).crewlet-stack,
+:where(ul, ol).crewlet-inline {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
 /*
  * A GRID OF CARDS KEEPS ITS TRACKS. `auto-fill` lays down every track the row
  * has room for and leaves the empty ones empty; `auto-fit`, which this was,

package/dist/ListInput/index.js

@@ -1,10 +1,10 @@
-export { ListInput } from '../chunk-LZP7FGT7.js';
+export { ListInput } from '../chunk-GARACZAH.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-FTEJPHBI.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-4FQT6ZAY.js';
 import '../chunk-RSAQOKH3.js';
-import '../chunk-7RPGY3JE.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/MarkdownEditor/index.js

@@ -6,7 +6,7 @@ import '../chunk-26PEPONN.js';
 import '../chunk-4LDTQWS7.js';
 import '../chunk-CBOICT64.js';
 import '../chunk-BHHIIK3M.js';
-import '../chunk-7RPGY3JE.js';
+import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Menu/index.js

@@ -1,7 +1,7 @@
-export { Menu } from '../chunk-TFH6SYWB.js';
+export { Menu } from '../chunk-NS7BVLL3.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-7RPGY3JE.js';
+import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Modal/index.js

@@ -1,8 +1,8 @@
-export { ConfirmModal, Modal } from '../chunk-CF6DTETT.js';
+export { ConfirmModal, Modal } from '../chunk-K4VORB64.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-7RPGY3JE.js';
+import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Modal-3YJ2GG2T.css → Modal-RQAYGG4L.css}

@@ -289,7 +289,7 @@
  * padding is only the least it keeps when a title wraps. It was the 16px step
  * while the bar was 64px, which a full control step filled exactly; at 52px
  * the same padding stood the head 12px past the bar behind it. At the 4px step
- * the head is the bar's height with the control step at every density, 36.48px
+ * the head is the bar's height with the control step at every density, 37.12px
  * at comfortable included, and with a subtitle under the title.
  *
  * It used to be the tighter band, 49px with a close control alone, and the

package/dist/OrgTable/index.js

@@ -1,13 +1,13 @@
-export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-75WOCYGC.js';
-import '../chunk-6LXMLQUM.js';
+export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-DYHSQHAZ.js';
+import '../chunk-B2Z2CDM5.js';
 import '../chunk-MY374UUD.js';
 import '../chunk-6OF2DBKY.js';
-import '../chunk-53DVJCVW.js';
+import '../chunk-VYOKRN2I.js';
 import '../chunk-74WGARJE.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-6NIZCQUM.js';
-import '../chunk-7RPGY3JE.js';
+import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-HI6Q2UXQ.js';
 import '../chunk-BZFWDIV6.js';
+import '../chunk-HI6Q2UXQ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Popover/index.js

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

package/dist/Select/index.js

@@ -1,5 +1,5 @@
-export { Select } from '../chunk-XFE5W2I4.js';
+export { Select } from '../chunk-FC4YTTFJ.js';
 import '../chunk-F73MC7EZ.js';
-import '../chunk-7RPGY3JE.js';
+import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Select-XMZ44RWY.css → Select-2P7AWUE4.css}

@@ -7,9 +7,12 @@
  * into the nearest layer host and drawn with the shared listbox register, so
  * a list of options looks the same wherever it is offered from.
  *
- * The boundary is --color-border-control, like every other control: the
- * hairline measured 1.27:1 in light, which is a box a reader has to know is
- * there already.
+ * THE BOUNDARY IS A BUTTON'S, --color-border-strong, the secondary button's
+ * and the date and time-window pickers'. A picker shows its value and its
+ * chevron, and those are what a reader knows it by. --color-border-control,
+ * at 3:1, is for the controls whose outline IS the control (a text box, a
+ * checkbox, a switch; see Input.css): on a picker it drew the one bright box
+ * in a row of buttons and switchers, brighter at rest than under the pointer.
  */
 
 .crewlet-select {
@@ -27,7 +30,7 @@
   width: 100%;
   min-height: var(--size-control-md);
   background-color: var(--color-surface-subtle);
-  border: 1px solid var(--color-border-control);
+  border: 1px solid var(--color-border-strong);
   border-radius: var(--radius-md);
   color: var(--color-text-primary);
   /* The boundary is the only thing that moves. The ring is an outline, which
@@ -48,7 +51,7 @@
 }
 
 .crewlet-select:hover {
-  border-color: var(--color-border-hover);
+  border-color: var(--color-border-strong-hover);
 }
 
 /*
@@ -197,7 +200,7 @@ svg.crewlet-select__chevron {
   display: flex;
   flex-direction: column;
   min-width: 0;
-  max-height: var(--crewlet-select-menu-max-height);
+  max-height: min(var(--crewlet-select-menu-max-height), 60vh);
   /*
    * THE PANEL IS THE PRODUCT'S SURFACE, on the panel hairline, at the panel
    * corner. A list offered from a field is another panel over the one the
@@ -224,11 +227,25 @@ svg.crewlet-select__chevron {
   position: absolute;
 }
 
+/*
+ * THE PANEL'S HEIGHT IS THE LIST'S. The shared listbox register caps a list
+ * at min(360px, 60vh) on its own, which inside this panel made
+ * `--crewlet-select-menu-max-height` a promise it could not keep past 360px:
+ * a taller panel drew the same short list and scrolled it. Here the list
+ * fills what the panel allows, and the panel keeps the register's cap on the
+ * window (see `.crewlet-select__menu`).
+ */
 .crewlet-select__list {
   flex: 1;
   min-height: 0;
 }
 
+/* Scoped to the panel for the weight, as the option rules below are: the
+   register's cap is one class, and the bundle orders equal weights by hash. */
+.crewlet-select__menu .crewlet-select__list {
+  max-height: none;
+}
+
 .crewlet-select__group {
   display: flex;
   flex-direction: column;
@@ -290,6 +307,15 @@ svg.crewlet-select__chevron {
   color: var(--color-brand-accent-ink);
 }
 
+/*
+ * AT THE ROW'S END in a list whose rows lead with a mark (see `tickAtEnd`),
+ * so the mark starts at the panel's edge. After a hint it follows the hint,
+ * which already takes the free space; without one it takes it itself.
+ */
+.crewlet-select__option-body + .crewlet-select__option-tick--end {
+  margin-left: auto;
+}
+
 .crewlet-select__option-body {
   display: flex;
   flex-direction: column;

package/dist/Shortcut/index.js

@@ -1,4 +1,4 @@
 export { matchesShortcut, useShortcut } from '../chunk-2FPENTCF.js';
-import '../chunk-7RPGY3JE.js';
+import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Switcher/index.js

@@ -1,16 +1,16 @@
-export { Switcher } from '../chunk-S3IENQ3E.js';
+export { Switcher } from '../chunk-LCF4WPYS.js';
 import '../chunk-W5J7R5EB.js';
-import '../chunk-CF6DTETT.js';
+import '../chunk-K4VORB64.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-FTEJPHBI.js';
 import '../chunk-FYTIJM2T.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-RSAQOKH3.js';
 import '../chunk-IG75YMUN.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-RSAQOKH3.js';
-import '../chunk-O2ZDZZS7.js';
-import '../chunk-7RPGY3JE.js';
+import '../chunk-BWRGFKJP.js';
+import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TagsInput/index.js

@@ -1,10 +1,10 @@
-export { TagsInput } from '../chunk-GG2QEZO2.js';
+export { TagsInput } from '../chunk-JCO3SIST.js';
 import '../chunk-LOECRMHA.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-F73MC7EZ.js';
-import '../chunk-4FQT6ZAY.js';
 import '../chunk-RSAQOKH3.js';
-import '../chunk-7RPGY3JE.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TimeWindowPicker/index.js

@@ -1,13 +1,13 @@
-export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-B2CITO6R.js';
-import '../chunk-XFE5W2I4.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-7BZPYA5P.js';
+import '../chunk-FC4YTTFJ.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-FTEJPHBI.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-O2ZDZZS7.js';
-import '../chunk-7RPGY3JE.js';
+import '../chunk-BWRGFKJP.js';
+import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{TimeWindowPicker-GBF4JDFI.css → TimeWindowPicker-BZ5HHATU.css}

@@ -1,8 +1,9 @@
 /*
  * TimeWindowPicker: one trigger over one panel.
  *
- * The trigger takes the same geometry as a Select and a DateTimePicker, so the
- * three line up in a filter bar. The panel is a RAIL of named windows beside
+ * The trigger takes the same geometry and button boundary as a Select and a
+ * DateTimePicker (--color-border-strong; see Select.css), so the three line
+ * up in a filter bar. The panel is a RAIL of named windows beside
  * the calendars, rather than two tabs with one of them hidden: the windows a
  * reader picks by name are the road, and the absolute range is the turning off
  * it, so both are on screen at once and each shows what the other chose.
@@ -17,7 +18,7 @@
   /* The side inset only: see DateTimePicker's own trigger. */
   padding: 0 var(--spacing-2) 0 var(--spacing-3);
   background: var(--color-surface-subtle);
-  border: 1px solid var(--color-border-control);
+  border: 1px solid var(--color-border-strong);
   border-radius: var(--radius-md);
   color: var(--color-text-primary);
   font-family: inherit;
@@ -34,7 +35,7 @@
 }
 
 .crewlet-time-window:hover:not(:disabled) {
-  border-color: var(--color-border-hover);
+  border-color: var(--color-border-strong-hover);
 }
 
 /*

package/dist/Toaster/Toaster.d.ts

@@ -93,7 +93,12 @@ export interface ToastProviderProps {
     children?: ReactNode;
     position?: ToasterProps['position'];
     renderAction?: ToasterProps['renderAction'];
-    /** How many to keep on screen. The oldest goes when the next arrives. */
+    /**
+     * How many to keep on screen. When one more arrives, the oldest toast that
+     * would have gone by itself goes. A sticky one never does, so while every
+     * toast held is sticky the stack holds more than this, until the reader
+     * dismisses some.
+     */
     max?: number | undefined;
 }
 /**

package/dist/Toaster/index.js

@@ -1,5 +1,5 @@
-export { ToastProvider, Toaster, useToast } from '../chunk-LELD5KPA.js';
-import '../chunk-7RPGY3JE.js';
+export { ToastProvider, Toaster, useToast } from '../chunk-QH3AKP2N.js';
+import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';