@crewlethq/ui 0.6.3 → 0.8.0

package/dist/DataView/index.js

@@ -1,25 +1,25 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-KKLITCMF.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-CHG7VT2M.js';
 import '../chunk-PGRPNDWM.js';
 import '../chunk-HOXGBLEY.js';
 import '../chunk-3CZ7XAVY.js';
-import '../chunk-KJ34ZBBI.js';
-import '../chunk-AGQ3YLA5.js';
-import '../chunk-LSJZUA5V.js';
+import '../chunk-5I56UXBJ.js';
+import '../chunk-PDUZO35I.js';
+import '../chunk-QJZ3Y6WW.js';
+import '../chunk-LSB3EHBW.js';
 import '../chunk-EUCC37WY.js';
-import '../chunk-MV2E3QZM.js';
-import '../chunk-IBYO2IJN.js';
-import '../chunk-AUS5FNQE.js';
+import '../chunk-YCTMKKRA.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-UA7O3KKJ.js';
 import '../chunk-5VNUYO76.js';
+import '../chunk-SMBKXWML.js';
+import '../chunk-BTHX2FS3.js';
 import '../chunk-6MU7HNB4.js';
-import '../chunk-DSUY5F4E.js';
+import '../chunk-ZGX2DP7F.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4UQ7SMPK.js';
-import '../chunk-ZAO4HHXI.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DateTimePicker/index.js

@@ -1,9 +1,9 @@
-export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-IBYO2IJN.js';
-import '../chunk-AUS5FNQE.js';
+export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-5I56UXBJ.js';
+import '../chunk-PDUZO35I.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4UQ7SMPK.js';
-import '../chunk-ZAO4HHXI.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{DateTimePicker-22VNXRWC.css → DateTimePicker-4AZBTODT.css}

@@ -41,12 +41,17 @@
  * Focus and open are drawn alike, and the ring is an OUTLINE: forced-colors
  * mode drops every box-shadow and keeps outlines, so a ring drawn as a shadow
  * disappears for exactly the readers who most need one.
+ *
+ * ONE RING, OVER THE BOUNDARY. It stood 2px off the box with the border
+ * recoloured to the focus colour as well, which is an accent hairline, a gap
+ * and an accent band: two rings from one state. On the inset offset the ring
+ * covers the border, and the border keeps its own colour under it, the rule
+ * every field keeps (see Input.css).
  */
 .crewlet-datetime:focus-visible,
 .crewlet-datetime.is-open {
-  outline: 2px solid var(--color-focus);
-  outline-offset: 2px;
-  border-color: var(--color-focus);
+  outline: 1px solid var(--color-focus);
+  outline-offset: -1px;
 }
 
 .crewlet-datetime.is-disabled,
@@ -169,10 +174,10 @@ svg.crewlet-datetime__chevron {
   margin: 0;
 }
 
+/* The same one ring the trigger draws, over the box's own boundary. */
 .crewlet-datetime__time-input:focus-visible {
-  outline: 2px solid var(--color-focus);
-  outline-offset: 2px;
-  border-color: var(--color-focus);
+  outline: 1px solid var(--color-focus);
+  outline-offset: -1px;
 }
 
 .crewlet-datetime__footer {

package/dist/ErrorBoundary/index.js

@@ -1,4 +1,4 @@
-export { ErrorBoundary } from '../chunk-BWIPKSWA.js';
-import '../chunk-ZAO4HHXI.js';
+export { ErrorBoundary } from '../chunk-XX2VQE55.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/FilterChip/index.js

@@ -1,3 +1,3 @@
-export { FILTER_CHIP_ATTRIBUTE, FilterChip, FilterChipGroup } from '../chunk-ZFATEERP.js';
+export { FILTER_CHIP_ATTRIBUTE, FilterChip, FilterChipGroup } from '../chunk-5YLON2PW.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{FilterChip-GTGLLOXE.css → FilterChip-EZ4QMW4E.css}

@@ -68,9 +68,12 @@
   color: var(--color-text-primary);
 }
 
+/* One ring, over the chip'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).
+   A chip that is on still says so under the ring, in its fill and its ink. */
 .crewlet-filter-chip:focus-visible {
   outline: 2px solid var(--color-focus);
-  outline-offset: 2px;
+  outline-offset: var(--size-focus-ring-inset-offset);
 }
 
 .crewlet-filter-chip:disabled {

package/dist/IconButton/index.js

@@ -1,3 +1,3 @@
-export { IconButton } from '../chunk-4UQ7SMPK.js';
+export { IconButton } from '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{IconButton-TVEUWK6L.css → IconButton-VYWP6SGW.css}

@@ -34,6 +34,21 @@
   outline-offset: 2px;
 }
 
+/*
+ * ONE RING, OVER THE BOUNDARY, on every square that draws one: the secondary
+ * and the soft-brand at rest, and the ghost-brand, which grows one under the
+ * pointer. A ring standing 2px off a visible border is two edges with a gap
+ * between them, which reads as a second outline rather than as focus; on the
+ * inset offset it covers the border instead, the rule every field keeps (see
+ * Input.css). The other ghosts never draw an edge, so they keep the outset
+ * ring.
+ */
+.crewlet-icon-btn--secondary:focus-visible,
+.crewlet-icon-btn--soft-brand:focus-visible,
+.crewlet-icon-btn--ghost-brand:focus-visible {
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
 .crewlet-icon-btn:disabled,
 .crewlet-icon-btn[aria-disabled='true'] {
   opacity: 0.5;

package/dist/ImageUpload/index.js

@@ -1,3 +1,3 @@
-export { ImageUpload } from '../chunk-CAIHUYXV.js';
+export { ImageUpload } from '../chunk-W4GQWFRX.js';
 import '../chunk-IA232OTU.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ImageUpload-YCHJMUGX.css → ImageUpload-L2GE4JUM.css}

@@ -181,9 +181,13 @@
   cursor: default;
 }
 
+/* One ring, drawn OVER the badge's knockout ring rather than 2px outside it:
+   over the image the knockout is an edge of its own, and a ring standing off
+   it was two rings round one small disc. On the inset offset the focus ring
+   takes the knockout's place, which still parts the disc from the image. */
 .crewlet-image-upload__remove:focus-visible {
   outline: 2px solid var(--color-focus);
-  outline-offset: 2px;
+  outline-offset: var(--size-focus-ring-inset-offset);
 }
 
 .crewlet-image-upload__input {

package/dist/Input/index.js

@@ -1,5 +1,5 @@
-export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea } from '../chunk-DSUY5F4E.js';
+export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea } from '../chunk-ZGX2DP7F.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-4UQ7SMPK.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Input-2PU5CPKK.css → Input-DRFNI26F.css}

@@ -74,11 +74,14 @@
  * forced-colors mode drops every box-shadow and keeps outlines: a ring drawn
  * as a shadow disappears for exactly the readers who most need one.
  *
- * It is drawn INSIDE the box, on the offset every focusable in a clipping
- * scroller takes, so it covers the boundary rather than standing outside it.
- * Two things follow: a scroller cannot clip it, and the field does not grow a
- * four-pixel halo the moment a caret lands in it, which is what a filter box
- * in a toolbar of them did to the row it sits in.
+ * It is ONE PIXEL, LAID EXACTLY ON THE BOUNDARY: the field's own hairline,
+ * drawn in the focus colour, which is how the console's fields say focus. At
+ * two pixels it was a heavy band round every box a caret landed in, and on a
+ * form of them the field being typed in read as the loudest thing on the page.
+ * Drawn on the boundary rather than outside it, a scroller cannot clip it and
+ * the field does not grow a halo the moment a caret lands in it, which is what
+ * a filter box in a toolbar of them did to the row it sits in. Every boxed
+ * field in the package rings this way (`Input.test.tsx` holds them to it).
  *
  * THE BORDER IS LEFT ALONE. Recolouring it under the ring says nothing the
  * ring has not already said, and it is what cost the error state its own
@@ -94,8 +97,8 @@
  * on a pointer press as well as on a tab.
  */
 .crewlet-input:has(.crewlet-input__control:focus-visible) {
-  outline: 2px solid var(--color-focus);
-  outline-offset: var(--size-focus-ring-inset-offset);
+  outline: 1px solid var(--color-focus);
+  outline-offset: -1px;
 }
 
 .crewlet-input.is-error {
@@ -354,8 +357,8 @@
    on the control itself: a textarea is the field, with nothing wrapped round
    it and nothing focusable inside it. */
 .crewlet-textarea:focus-visible {
-  outline: 2px solid var(--color-focus);
-  outline-offset: var(--size-focus-ring-inset-offset);
+  outline: 1px solid var(--color-focus);
+  outline-offset: -1px;
 }
 
 .crewlet-textarea.is-error {
@@ -371,10 +374,37 @@
   cursor: not-allowed;
 }
 
+/*
+ * ONE LINE THAT GROWS STARTS AT THE SINGLE-LINE FIELD'S HEIGHT. A box that
+ * grows to fit what is typed was drawn at the large control step while it held
+ * one line, so the box a list item is written in stood sixteen pixels taller
+ * than the fields above and below it. One line now stands at the medium step,
+ * the height of every single-line field, with the line centred in it as an
+ * input's is: the block padding is what that step leaves once the two border
+ * pixels and one line are paid for. Each line past the first grows it from
+ * there.
+ */
 .crewlet-textarea.is-auto-resize {
   resize: none;
   overflow: hidden;
-  min-height: var(--size-control-lg);
+  min-height: var(--size-control-md);
+  padding-block: max(
+    0px,
+    calc((var(--size-control-md) - 2px - var(--font-line-height-normal) * var(--font-size-compact)) / 2)
+  );
+}
+
+/*
+ * AND WHAT TRAILS IT SITS ON ITS FIRST LINE, centred in the band one line
+ * takes, which is exactly where an input's trailing hint sits. Pinned a spacing
+ * step from the top, it sat above the line's middle and level with nothing;
+ * on the first line it stays put as the box grows under it.
+ */
+.crewlet-textarea-shell:has(> .crewlet-textarea.is-auto-resize) > .crewlet-input__trailing {
+  top: 0;
+  display: flex;
+  align-items: center;
+  height: var(--size-control-md);
 }
 
 .crewlet-textarea::placeholder {

package/dist/Kbd/index.js

@@ -1,3 +1,3 @@
-export { Kbd, isApplePlatform, keyGlyph } from '../chunk-KJ34ZBBI.js';
+export { Kbd, isApplePlatform, keyGlyph } from '../chunk-SMBKXWML.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Kbd-JPLDVJIP.css → Kbd-MCWJTRTT.css}

@@ -42,9 +42,20 @@
  * platform prints a chord. It is a `kbd` of its own because that is what a key
  * inside a key combination is, and a user agent's `kbd` rule would otherwise
  * set its own face and size on it.
+ *
+ * AND IT TAKES NO BOX FROM ANYBODY ELSE. An application stylesheet that draws
+ * a bare `kbd` as a cap of its own (a common enough rule) reached each key in
+ * here and framed it, so one chord drew a frame round a run of framed keys.
+ * The key states every part of its box, so whatever a page says about `kbd`,
+ * a chord is one cap.
  */
 .crewlet-kbd__key {
   font: inherit;
+  color: inherit;
+  padding: 0;
+  background: none;
+  border: 0;
+  border-radius: 0;
 }
 
 /*

package/dist/ListInput/index.js

@@ -1,10 +1,10 @@
-export { ListInput } from '../chunk-PQNILU27.js';
-import '../chunk-KJ34ZBBI.js';
-import '../chunk-DSUY5F4E.js';
+export { ListInput } from '../chunk-6HXH57BL.js';
+import '../chunk-SMBKXWML.js';
+import '../chunk-ZGX2DP7F.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4UQ7SMPK.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Menu/index.js

@@ -1,7 +1,7 @@
-export { Menu } from '../chunk-LSJZUA5V.js';
+export { Menu } from '../chunk-LSB3EHBW.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4UQ7SMPK.js';
-import '../chunk-ZAO4HHXI.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Modal/index.js

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

package/dist/NewItemsNotice/index.js

@@ -1,4 +1,4 @@
-export { NewItemsNotice } from '../chunk-YLYOWZ4V.js';
+export { NewItemsNotice } from '../chunk-PXU6HOZB.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{NewItemsNotice-T4DSSPVV.css → NewItemsNotice-Q5ED73BQ.css}

@@ -48,9 +48,11 @@
   color: var(--color-brand-accent-ink);
 }
 
+/* One ring, over the pill'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-new-items:focus-visible {
   outline: 2px solid var(--color-focus);
-  outline-offset: 2px;
+  outline-offset: var(--size-focus-ring-inset-offset);
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/OrgLabel/OrgLabel.d.ts

@@ -84,13 +84,21 @@ export type OrgLabelMark = {
      * so this moves nothing: only what is drawn inside it.
      */
     iconSize?: 'md' | 'lg' | undefined;
+    /**
+     * A DASHED RING ROUND THE GLYPH, which is how the console chart draws a
+     * person's seat: a figure inside a boundary, because a person is the
+     * one seat the engine does not run. Drawn in a node only; a row draws
+     * the glyph alone, as the console table does.
+     */
+    iconRing?: boolean | undefined;
     avatar?: undefined;
 } | {
     /**
      * A SEAT'S BADGE, with its kind as its outline: a squircle for an agent,
-     * a circle for a person, which is the one cue that tells them apart.
-     * There used to be a second, a dashed ring round a glyph for a human
-     * seat, and two cues for one fact are two things to keep agreeing.
+     * a circle for a person, for a surface that names seats by their
+     * initials. A surface drawn as the console chart draws one marks a seat
+     * with a glyph instead (the Crewlet figure for an agent, a person inside
+     * a dashed ring for a human) and takes the other branch.
      *
      * The layout sizes it and nothing here does: the approved org chart's
      * 26px badge in a node and the smallest step, 20px, in a row.
@@ -101,6 +109,7 @@ export type OrgLabelMark = {
     avatar?: OrgLabelAvatar | undefined;
     icon?: undefined;
     iconSize?: undefined;
+    iconRing?: undefined;
 };
 /** What both layouts say besides the mark, in the order they say it. */
 interface OrgLabelWords {

package/dist/OrgLabel/index.js

@@ -1,3 +1,3 @@
-export { OrgLabel } from '../chunk-WOFOMTGB.js';
+export { OrgLabel } from '../chunk-B47YUQGM.js';
 import '../chunk-IA232OTU.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{OrgLabel-CR233G34.css → OrgLabel-6WSKJQOT.css}

@@ -86,6 +86,44 @@
   fill: currentColor;
 }
 
+/*
+ * A PERSON IS A FIGURE INSIDE A DASHED RING, as the console chart draws one:
+ * the boundary says this seat is held by someone outside the system. The ring
+ * is the 24px target step and the figure inside it a step smaller than a
+ * container's glyph, which leaves the air a boundary needs to read as one: at
+ * the zone's own step the figure touched the ring on every side.
+ *
+ * THE RING IS DECORATION, drawn in the step kept for it, and the figure is the
+ * mark: the ring says how the seat is held, never what it is.
+ */
+.crewlet-org-label__icon--ring {
+  position: relative;
+}
+
+.crewlet-org-label__icon--ring::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: var(--size-target-min);
+  height: var(--size-target-min);
+  border: 1px dashed var(--color-text-muted);
+  border-radius: var(--radius-circle);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+.crewlet-org-label__icon--ring > svg {
+  width: var(--font-size-md);
+  height: var(--font-size-md);
+}
+
+/* A ROW DRAWS THE FIGURE ALONE, as the console table does: a ring on a line
+   of text is a second boundary inside the row's own. */
+.crewlet-org-label--row .crewlet-org-label__icon--ring::before {
+  content: none;
+}
+
 /* ---- The name and its caption -------------------------------------------- */
 
 /*

package/dist/OrgNode/OrgNode.d.ts

@@ -73,8 +73,9 @@ export interface OrgNodeDisclosureProps extends HTMLAttributes<HTMLDivElement> {
 export declare function OrgNodeDisclosure({ children, className, ...rest }: OrgNodeDisclosureProps): import("react").JSX.Element;
 export interface OrgNodeLeadProps {
     /**
-     * Nothing is set, so the pill is drawn as the outline of one: a unit with no
-     * lead is a fact about the organization and a blank strip says nothing.
+     * Nothing is set, so the pill is drawn as an empty slot: no ground, a dashed
+     * edge and the word in the quieter ink. A unit with no lead is a fact about
+     * the organization and a blank strip says nothing.
      */
     empty?: boolean | undefined;
     /**
@@ -97,7 +98,9 @@ export interface OrgNodeLeadProps {
  * IT STAYS DRAWN, where the controls that edit the node do not: who leads a
  * unit is a FACT ABOUT THE ORGANIZATION rather than a tool for changing it,
  * and a chart that hid it until the pointer arrived would be a chart you could
- * not read the leads off. Separated from the name above by a hairline, so the
- * node reads as a thing with a lead rather than as two lines of text.
+ * not read the leads off. A pill on a ground of its own rather than a line of
+ * text, so the node reads as a thing with a lead rather than as two lines of
+ * text; never framed while a lead is set, because the node it sits in already
+ * is, and dashed while none is, because an empty place is what it then says.
  */
 export declare function OrgNodeLead({ empty, clear, children, className }: OrgNodeLeadProps): import("react").JSX.Element;

package/dist/OrgNode/index.js

@@ -1,4 +1,4 @@
-export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from '../chunk-TIWAHZZ6.js';
-import '../chunk-WOFOMTGB.js';
+export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from '../chunk-VCOELPCT.js';
+import '../chunk-B47YUQGM.js';
 import '../chunk-IA232OTU.js';
 import '../chunk-ODEQTPFM.js';