@crewlethq/ui 0.51.0 → 0.52.0

package/dist/styles.css

@@ -9037,7 +9037,7 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
 }
 
 
-/* ChoiceButtons-FLIFXFFS.css */
+/* ChoiceButtons-HWXEF2H3.css */
 /*
  * One answer, sent with one press: a column of buttons as tall as a touch
  * target, the recommended one first and filled with the accent.
@@ -9095,6 +9095,17 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
   background: var(--color-surface-pressed);
 }
 
+/*
+ * THE OPTION APPLIED is drawn as every chosen option in the package is: the
+ * selected edge over the soft selected fill, calm beside the focus ring, and
+ * held under the pointer so a hover never makes it look unchosen.
+ */
+.crewlet-choice-buttons__option.is-chosen,
+.crewlet-choice-buttons__option.is-chosen:hover {
+  border-color: var(--color-border-selected);
+  background: var(--color-surface-selected);
+}
+
 /*
  * The plain option draws the strong hairline, so its ring is drawn over that
  * edge rather than a gap away from it, which would read as a second outline.
@@ -9170,6 +9181,55 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
   text-transform: uppercase;
 }
 
+/* The picture before the words, centred on the label's line. */
+.crewlet-choice-buttons__media {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  align-self: center;
+}
+
+/* Before the words, not at the far end with the recommended mark. */
+.crewlet-choice-buttons__option:has(.crewlet-choice-buttons__media) {
+  justify-content: flex-start;
+}
+
+.crewlet-choice-buttons__option:has(.crewlet-choice-buttons__media) .crewlet-choice-buttons__note {
+  margin-inline-start: auto;
+}
+
+/*
+ * SMALL: the same option, compact, in a row that wraps. A step and a half
+ * inside, the field's small height, the label at the compact step and its
+ * detail at the micro step, so three suggestions sit under a field without
+ * outweighing it. Every state (hover, press, focus, chosen) is the Inbox's.
+ */
+.crewlet-choice-buttons--sm {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-2);
+}
+
+.crewlet-choice-buttons--sm .crewlet-choice-buttons__option {
+  gap: var(--spacing-2);
+  min-height: var(--size-control-sm);
+  padding: var(--spacing-1) calc(var(--spacing-2) + var(--spacing-1) / 2);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-tight);
+}
+
+.crewlet-choice-buttons--sm .crewlet-choice-buttons__option:has(.crewlet-choice-buttons__detail) {
+  align-items: center;
+}
+
+.crewlet-choice-buttons--sm .crewlet-choice-buttons__text {
+  gap: 1px;
+}
+
+.crewlet-choice-buttons--sm .crewlet-choice-buttons__detail {
+  font-size: var(--font-size-2xs);
+}
+
 @media (prefers-reduced-motion: reduce) {
   .crewlet-choice-buttons__option {
     transition: none;
@@ -17719,7 +17779,7 @@ a.crewlet-icon-btn {
 }
 
 
-/* Input-VDSV7VWJ.css */
+/* Input-GMOWHZRG.css */
 /*
  * The form row: Input, Textarea, Label, FormField, FormRow, FormSection and
  * ReadOnlyField.
@@ -18302,6 +18362,15 @@ a.crewlet-icon-btn {
   min-width: 0;
 }
 
+/* A count that is not a length ("3 of 5"), in the help line's own quiet ink. */
+.crewlet-form-field__tally {
+  flex: none;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  font-variant-numeric: tabular-nums;
+  line-height: var(--font-line-height-normal);
+}
+
 /* SHOWN ONLY WHILE THE FIELD HAS FOCUS (`helperOnFocus`): a dense form reads as
    labels and values at rest, and the sentence appears under the field the
    reader is in. Still described, so a screen reader hears it on entry. */
@@ -19359,7 +19428,7 @@ a.crewlet-icon-btn {
 }
 
 
-/* ListInput-P2ECUQJ2.css */
+/* ListInput-RLQND5QK.css */
 /*
  * ListInput: an ordered list of sentences, written in the box at the top and
  * listed under it.
@@ -19423,7 +19492,9 @@ a.crewlet-icon-btn {
 .crewlet-list-input__item {
   display: flex;
   align-items: center;
-  gap: var(--spacing-2);
+  /* A step and the control's own inset: the ring an edited item draws stands
+     a step clear of its number. */
+  gap: var(--spacing-3);
   padding: var(--spacing-1) var(--spacing-3);
   border-block-end-width: 1px;
   border-block-end-style: solid;
@@ -19531,11 +19602,28 @@ a.crewlet-icon-btn {
 .crewlet-list-input__item .crewlet-input__control,
 .crewlet-list-input__item .crewlet-textarea {
   padding-block: var(--spacing-1);
-  padding-inline: 0;
+  /*
+   * EDITING NEVER MOVES THE WORDS. The control keeps an inset of its own, so
+   * the boundary that hover and focus draw stands clear of the text rather
+   * than touching its first letter, and a negative margin of the same step
+   * takes it back, so the words sit exactly where they sat at rest and the
+   * caret lands on them without a jump.
+   */
+  padding-inline: var(--spacing-2);
+  margin-inline: calc(var(--spacing-2) * -1);
 }
 
 .crewlet-list-input__index {
   flex: none;
+  /*
+   * ON THE TEXT'S FIRST LINE, never centred on a wrapped item: it starts where
+   * the words start (the control's edge and its block inset below the row's
+   * own padding) and takes their line's height, so the number and the words
+   * share a baseline however many lines the item runs to.
+   */
+  align-self: flex-start;
+  padding-block-start: calc(1px + var(--spacing-1));
+  line-height: calc(var(--font-size-compact) * var(--font-line-height-normal));
   min-width: var(--spacing-4);
   text-align: center;
   font-size: var(--font-size-xs);
@@ -19619,11 +19707,16 @@ a.crewlet-icon-btn {
   }
 }
 
-/* The Add button ends the box's row: the field and its Add read as one control. */
+/*
+ * The Add button ends the box's row: the field and its Add read as one
+ * control. It is the field's height (the medium control step a one-line box
+ * stands at) and sits on the box's first line, so the two share one line and
+ * the button stays put as a long item grows the box under it.
+ */
 .crewlet-list-input__add-control {
   display: inline-flex;
   flex: none;
-  align-self: center;
+  align-self: flex-start;
 }
 
 /*
@@ -19641,11 +19734,11 @@ a.crewlet-icon-btn {
   }
 
   .crewlet-list-input__item > .crewlet-list-input__field {
-    flex-basis: calc(100% - var(--spacing-4) - var(--spacing-2));
+    flex-basis: calc(100% - var(--spacing-4) - var(--spacing-3));
   }
 
   .crewlet-list-input__item--draggable > .crewlet-list-input__field {
-    flex-basis: calc(100% - var(--spacing-4) * 2 - var(--spacing-2) * 2);
+    flex-basis: calc(100% - var(--spacing-4) * 2 - var(--spacing-3) * 2);
   }
 
   .crewlet-list-input__item > .crewlet-list-input__actions {
@@ -20021,7 +20114,7 @@ a.crewlet-icon-btn {
 }
 
 
-/* LogoSlot-T2UFOJXU.css */
+/* LogoSlot-ETD74ELF.css */
 /*
  * One of a brand's logos on the ground it is made for. The ground and the ink
  * of its guide are the only values here that are not tokens: they arrive
@@ -20148,6 +20241,13 @@ a.crewlet-icon-btn {
   opacity: 0.5;
 }
 
+.crewlet-logo-slot__notes {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
 .crewlet-logo-slot__empty {
   margin: 0;
   color: var(--color-text-tertiary);
@@ -20182,6 +20282,97 @@ a.crewlet-icon-btn {
   font-size: var(--font-size-xs);
 }
 
+/*
+ * A GROUP OF SLOTS, aligned row by row (LogoSlotGroup.tsx). Each slot is a
+ * subgrid spanning the group's four rows: its name and description, its
+ * stage, what is said under it, and its actions. A row holds the tallest of
+ * its parts across the slots, so every stage, note and action row starts on
+ * one line. The steps between the parts are margins rather than the grid's
+ * gap, so a row no slot uses (no notes anywhere) takes no room at all.
+ */
+.crewlet-logo-slot-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+}
+
+.crewlet-logo-slot-group__slots {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
+  column-gap: var(--spacing-5);
+  row-gap: var(--spacing-6);
+}
+
+.crewlet-logo-slot-group__slots > .crewlet-logo-slot {
+  display: grid;
+  grid-row: span 4;
+  grid-template-rows: subgrid;
+  row-gap: 0;
+  align-content: start;
+}
+
+.crewlet-logo-slot-group__slots > .crewlet-logo-slot > .crewlet-logo-slot__head {
+  grid-row: 1;
+  margin-block-end: var(--spacing-2);
+}
+
+.crewlet-logo-slot-group__slots > .crewlet-logo-slot > :is(.crewlet-logo-slot__stage, .crewlet-file-drop) {
+  grid-row: 2;
+}
+
+.crewlet-logo-slot-group__slots > .crewlet-logo-slot > .crewlet-logo-slot__notes {
+  grid-row: 3;
+  margin-block-start: var(--spacing-2);
+}
+
+.crewlet-logo-slot-group__slots > .crewlet-logo-slot > .crewlet-logo-slot__foot {
+  grid-row: 4;
+  margin-block-start: var(--spacing-2);
+}
+
+.crewlet-logo-slot-group__hint {
+  margin: 0;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+}
+
+/*
+ * SMALL: a thumbnail of the slot for a summary of what is set. The stage
+ * keeps its ground, its edge and the space the logo keeps, at half the height
+ * with a tighter inset, and the words step down to the summary's sizes.
+ */
+.crewlet-logo-slot--sm {
+  --crewlet-logo-slot-height: calc(var(--size-row-lg) * 1.5);
+  --crewlet-logo-slot-padding: var(--spacing-2);
+  --crewlet-logo-slot-clear: var(--spacing-1);
+
+  gap: var(--spacing-1);
+}
+
+.crewlet-logo-slot--sm .crewlet-logo-slot__label {
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-logo-slot--sm .crewlet-logo-slot__description,
+.crewlet-logo-slot--sm .crewlet-logo-slot__empty {
+  font-size: var(--font-size-2xs);
+}
+
+.crewlet-logo-slot--sm .crewlet-logo-slot__stage {
+  border-radius: var(--radius-md);
+}
+
+.crewlet-logo-slot--sm .crewlet-logo-slot__placeholder {
+  width: calc(var(--size-row-lg) * 1.5);
+  height: var(--size-row-sm);
+}
+
+.crewlet-logo-slot--sm .crewlet-logo-slot__stage--square .crewlet-logo-slot__placeholder {
+  width: var(--size-row-sm);
+}
+
 
 /* MarkdownEditor-WOKV7CLK.css */
 /*

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.51.0",
+  "version": "0.52.0",
   "description": "Crewlet shared React components built on @crewlethq/tokens and @crewlethq/icons.",
   "license": "MIT",
   "repository": {
@@ -42,8 +42,8 @@
     "clean": "rm -rf dist src/generated"
   },
   "dependencies": {
-    "@crewlethq/icons": "0.51.0",
-    "@crewlethq/tokens": "0.51.0",
+    "@crewlethq/icons": "0.52.0",
+    "@crewlethq/tokens": "0.52.0",
     "prosemirror-commands": "1.7.2",
     "prosemirror-gapcursor": "1.4.1",
     "prosemirror-history": "1.5.1",

package/dist/chunk-BWOIUOO3.js

@@ -1,62 +0,0 @@
-import { VisuallyHidden } from './chunk-BZFWDIV6.js';
-import { cx } from './chunk-ODEQTPFM.js';
-import './ChoiceButtons-FLIFXFFS.css';
-import { useId } from 'react';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-
-function ChoiceButtons({
-  label,
-  options,
-  recommended,
-  recommendedLabel = "Recommended",
-  onChoose,
-  pending,
-  disabledReason,
-  className,
-  ...rest
-}) {
-  const reasonId = useId();
-  const first = options.find((o) => o.value === recommended);
-  const ordered = first ? [first, ...options.filter((o) => o !== first)] : options;
-  const busy = pending !== void 0 && pending !== null;
-  const inert = busy || disabledReason !== void 0;
-  return /* @__PURE__ */ jsxs("div", { ...rest, role: "group", "aria-label": label, className: cx("crewlet-choice-buttons", className), children: [
-    ordered.map((option) => {
-      const isRecommended = option === first;
-      return /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          className: cx("crewlet-choice-buttons__option", isRecommended && "crewlet-choice-buttons__option--recommended"),
-          "aria-disabled": inert || void 0,
-          "aria-busy": pending === option.value || void 0,
-          "aria-describedby": disabledReason === void 0 ? void 0 : reasonId,
-          onClick: (event) => {
-            if (inert) {
-              event.preventDefault();
-              return;
-            }
-            onChoose(option.value);
-          },
-          children: [
-            /* @__PURE__ */ jsxs("span", { className: "crewlet-choice-buttons__text", children: [
-              /* @__PURE__ */ jsx("span", { className: "crewlet-choice-buttons__label", children: option.label }),
-              option.detail === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
-                " ",
-                /* @__PURE__ */ jsx("span", { className: "crewlet-choice-buttons__detail", children: option.detail })
-              ] })
-            ] }),
-            isRecommended ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              " ",
-              /* @__PURE__ */ jsx("span", { className: "crewlet-choice-buttons__note", children: recommendedLabel })
-            ] }) : null
-          ]
-        },
-        option.value
-      );
-    }),
-    disabledReason === void 0 ? null : /* @__PURE__ */ jsx(VisuallyHidden, { id: reasonId, children: disabledReason })
-  ] });
-}
-
-export { ChoiceButtons };