@smwb/ui-styles 1.5.1 → 2.0.0

package/less/components/chip/chip.less

@@ -1,7 +1,9 @@
 .smwb-chip {
   position: relative;
   user-select: none;
-  height: 32px;
+  // Chip's default box is 32px, which is the sm step of the control scale, not md
+  // (Chip has no large size, so sm is the only step it maps to).
+  min-height: var(--smui-control-h-sm, @smui-control-h-sm);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -33,7 +35,10 @@
     }
     &:active {
       background-color: var(--smui-chipsActiveBg);
-      box-shadow: 0px 3px 5px -1px rgb(0 0 0 / 16%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 2px 3px 0px rgb(0 0 0 / 12%);
+      box-shadow:
+        0px 3px 5px -1px rgb(0 0 0 / 16%),
+        0px 1px 1px 0px rgb(0 0 0 / 14%),
+        0px 2px 3px 0px rgb(0 0 0 / 12%);
     }
     &.smwb-selected {
       background-color: var(--smui-chipsSelectedBg);
@@ -47,7 +52,10 @@
     }
     &:active {
       background-color: var(--smui-chipsActiveBg);
-      box-shadow: 0px 3px 5px -1px rgb(0 0 0 / 11%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 2px 3px 0px rgb(0 0 0 / 12%);
+      box-shadow:
+        0px 3px 5px -1px rgb(0 0 0 / 11%),
+        0px 1px 1px 0px rgb(0 0 0 / 14%),
+        0px 2px 3px 0px rgb(0 0 0 / 12%);
     }
     &.smwb-selected {
       background-color: var(--smui-chipsSelectedBg);
@@ -74,6 +82,39 @@
     justify-content: center;
   }
 
+  // The icon and the label: the chip's button when it has onClick. The delete
+  // button follows it, beside the button, not inside it.
+  &__content {
+    display: inline-flex;
+    align-items: center;
+    gap: @chipGap;
+    border-radius: inherit;
+
+    // The button's focus ring goes around the whole chip, as when the chip
+    // itself took focus: its own ring is pushed out of sight, and ::after, laid
+    // over the chip (the chip is its containing block), takes its outline.
+    // Whatever sets that outline still decides it: the browser's ring, an
+    // app's, or none under a reset that removes focus rings (normalize.css).
+    &:focus {
+      outline-offset: 9999px;
+    }
+    &:focus::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      outline: inherit;
+      pointer-events: none;
+    }
+  }
+  // An outlined chip's ring sits where the chip's own did: ::after takes the
+  // chip's box and a border as wide as its border, as the browser draws its
+  // ring over a border and an app's ring around it.
+  &.smwb-outlined > &__content:focus::after {
+    inset: -1px;
+    border: 1px solid transparent;
+  }
+
   // delete control is a <button> now — strip UA chrome (additive)
   &__delete-icon {
     background: transparent;
@@ -86,7 +127,11 @@
   }
 
   &_size-small {
+    // 24px is deliberately below the control scale (Fork C): it stays a literal,
+    // not a token. min-height is repeated because the base rule floors the box at
+    // the sm step (32px); without it the height alone would be clamped back up.
     height: 24px;
+    min-height: 24px;
     padding: 0 @smui-space-sm;
     font-size: 0.75rem;
   }

package/less/components/commandPalette/commandPalette.entry.less

@@ -0,0 +1,2 @@
+@import (reference) "../../_prelude.less";
+@import "./commandPalette.less";

package/less/components/commandPalette/commandPalette.less

@@ -0,0 +1,233 @@
+// The ⌘K palette. It is a Modal, so its box is overridden through a
+// three-class selector: `.smwb-modal.smwb-medium` is (0,2,0), and which of two
+// equal-specificity sheets wins differs between a Storybook dev server and a
+// build, so a two-class rule would only win by luck.
+.smwb-modal__overlay > .smwb-modal.smwb-command-palette {
+  width: @commandPaletteWidth;
+  height: auto;
+  min-height: 0;
+  max-height: @commandPaletteMaxHeight;
+  // The results box scrolls, not the dialog, so the footer stays put.
+  overflow: hidden;
+  padding: 0;
+  // Modal's own radius. Its small-screen rule zeroes it for a full-bleed dialog;
+  // the palette keeps side gutters there instead, so it keeps the corners too.
+  border-radius: @modalBorderRadius;
+  // A cross-axis auto margin beats the overlay's `align-items: center`, which is
+  // what puts the palette near the top instead of in the middle.
+  margin-block: @commandPaletteTopOffset auto;
+
+  @media (max-width: 600px) {
+    margin-block-start: @smui-space-lg;
+  }
+}
+
+.smwb-command-palette {
+  &__panel {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+
+  &__search {
+    display: flex;
+    align-items: center;
+    gap: @smui-space-sm;
+    padding: @smui-space-md @smui-space-lg;
+    border-bottom: 1px solid var(--smui-dividerColor);
+  }
+
+  &__search-icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    color: var(--smui-onSurfaceVariant);
+  }
+
+  // The caret is a text field's focus indicator, so the box draws no ring of its
+  // own (normalize.css removes the browser's outline anyway).
+  &__input {
+    flex: 1;
+    min-width: 0;
+    border: 0;
+    background: transparent;
+    font: inherit;
+    font-size: 1rem;
+    line-height: 1.5;
+    color: var(--smui-onSurfaceColor);
+    outline: none;
+
+    &::placeholder {
+      color: var(--smui-onSurfaceVariant);
+      opacity: 1; // the UA grey would stay light in the dark theme
+    }
+  }
+
+  &__results {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    overscroll-behavior: contain; // a palette over a page does not scroll it
+    padding: @smui-space-xs 0;
+  }
+
+  &__listbox,
+  &__group-options {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  // As SelectField's group label, so a grouped list reads the same in both.
+  &__group-label {
+    padding: @smui-space-sm @smui-space-lg @smui-space-xs;
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--smui-onSurfaceVariant);
+  }
+
+  &__item {
+    position: relative; // holds the state layer
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    align-items: center;
+    gap: @smui-space-md;
+    min-height: @commandPaletteItemMinHeight;
+    padding: @smui-space-xs @smui-space-lg;
+    margin: 0 @smui-space-xs;
+    border-radius: @commandPaletteItemRadius;
+    cursor: pointer;
+    color: var(--smui-onSurfaceColor);
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      background: currentColor;
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    &:hover:not(&_active):not(&_disabled)::before {
+      opacity: @commandPaletteHoverLayerOpacity;
+    }
+
+    // The option the keys are on. Focus stays in the field, which points here
+    // with aria-activedescendant, so this row draws the library's ring inside
+    // itself: a scrolling results box would clip an outside one. The state layer
+    // is not an indicator on its own (1.29:1 against a plain row) and forced
+    // colours flatten it to Canvas, hence the outline.
+    &_active {
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: -2px;
+
+      &::before {
+        opacity: @commandPaletteActiveLayerOpacity;
+      }
+
+      @media (forced-colors: active) {
+        outline-color: Highlight;
+      }
+    }
+
+    &_disabled {
+      color: var(--smui-disabledTextColor);
+      cursor: default;
+    }
+  }
+
+  &__item-icon {
+    grid-column: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: @commandPaletteIconSize;
+    height: @commandPaletteIconSize;
+    color: var(--smui-onSurfaceVariant);
+  }
+
+  &__item-text {
+    grid-column: 2;
+    min-width: 0; // lets the two lines ellipsis instead of widening the track
+  }
+
+  // With no icon the text takes the icon's column as well, so a row without one
+  // is not indented against an empty gutter. A browser without :has() drops the
+  // rule and keeps the text in column 2, which the empty `auto` track collapses.
+  &__item:not(:has(> .smwb-command-palette__item-icon)) > .smwb-command-palette__item-text {
+    grid-column: 1 / 3;
+  }
+
+  &__item-label {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__item-subtitle {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 0.8125rem;
+    color: var(--smui-onSurfaceVariant);
+  }
+
+  // Two classes: Kbd sets `font-size: inherit` at the same specificity, and in
+  // Storybook the per-component sheets can land in either order.
+  &__item-shortcut.smwb-kbd {
+    grid-column: 3;
+    font-size: 0.75rem;
+    color: var(--smui-onSurfaceVariant);
+  }
+
+  // The rows a pending search draws in place of results. Skeleton is already
+  // aria-hidden, and the item grid keeps the widths the real rows will have, so
+  // the list does not reflow when the answer lands. No hover layer: nothing here
+  // can be chosen.
+  &__loading-row {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    align-items: center;
+    gap: @smui-space-md;
+    min-height: @commandPaletteItemMinHeight;
+    padding: @smui-space-xs @smui-space-lg;
+    margin: 0 @smui-space-xs;
+  }
+
+  &__message {
+    padding: @smui-space-lg @smui-space-xl;
+    text-align: center;
+    color: var(--smui-onSurfaceVariant);
+
+    &_error {
+      color: var(--smui-errorColor);
+    }
+  }
+
+  &__footer {
+    display: flex;
+    align-items: center;
+    gap: @smui-space-md;
+    padding: @smui-space-sm @smui-space-lg;
+    border-top: 1px solid var(--smui-dividerColor);
+    font-size: 0.75rem;
+    color: var(--smui-onSurfaceVariant);
+  }
+
+  // The polite live region. A screen reader ignores one outside an aria-modal
+  // dialog, so it lives inside the palette and is hidden from sight only. With
+  // no inset it stays at its static position, out of flow.
+  &__status {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+}

package/less/components/composer/composer.entry.less

@@ -0,0 +1,2 @@
+@import (reference) "../../_prelude.less";
+@import "./composer.less";

package/less/components/composer/composer.less

@@ -0,0 +1,294 @@
+@import "./composer.variables.less";
+
+// The textarea and its mirror (.smwb-composer__field::after) must share these,
+// or the auto-grown height drifts from the text.
+.smwb-composer-text() {
+  box-sizing: border-box;
+  margin: 0;
+  border: 0;
+  padding: @composerFieldPaddingY @composerFieldPaddingX;
+  font: inherit;
+  letter-spacing: inherit;
+  line-height: @composerLineHeight;
+  overflow-wrap: anywhere;
+  // The height of N rows of text, with the text's own padding.
+  min-height: ~"calc(var(--smwb-composer-min-rows, 1) * @{composerLineHeight} + 2 * @{composerFieldPaddingY})";
+  max-height: ~"calc(var(--smwb-composer-max-rows, 8) * @{composerLineHeight} + 2 * @{composerFieldPaddingY})";
+}
+
+// A task input: a growing textarea with an attach button, a toolbar slot, a
+// counter and a send/stop button. The children are flat; grid areas place them
+// for each layout. An absent child leaves its area empty, and the spacing is
+// margins, not gaps, so an empty track adds none.
+.smwb-composer {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  padding: @composerPadding;
+  // Focus (below) paints the second pixel of the border inside, so the layout
+  // does not shift.
+  border: 1px solid @composerBorder;
+  border-radius: @composerRadius;
+  background-color: @composerBg;
+  color: @composerText;
+
+  &__attachments {
+    grid-area: attachments;
+    min-width: 0;
+    margin-bottom: @composerGap;
+  }
+
+  &__field {
+    grid-area: field;
+    display: grid;
+    min-width: 0;
+
+    // The mirror: the text plus a trailing space (so a final newline counts a
+    // line) in the same box as the textarea. It sizes the grid cell, and the
+    // textarea fills it, so the field grows with the text up to max-height.
+    &::after {
+      .smwb-composer-text();
+      content: attr(data-value) " ";
+      grid-area: 1 / 1;
+      visibility: hidden;
+      pointer-events: none;
+      white-space: pre-wrap;
+      overflow: hidden;
+    }
+  }
+
+  &__input {
+    .smwb-composer-text();
+    grid-area: 1 / 1;
+    display: block;
+    width: 100%;
+    resize: none;
+    overflow-y: auto;
+    outline: 0;
+    background: transparent;
+    color: @composerText;
+    caret-color: @composerText;
+
+    &::placeholder {
+      // The UA grey stays light in the dark theme.
+      color: @composerPlaceholder;
+      opacity: 1;
+    }
+  }
+
+  &__icon-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    flex: none;
+    width: @composerIconButtonSize;
+    height: @composerIconButtonSize;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: @smui-radius-circle;
+    background-color: transparent;
+    color: @composerText;
+    font: inherit;
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+    &:hover:not(:disabled):not([aria-disabled="true"]) {
+      background-color: var(--smui-onSurfaceHover);
+    }
+
+    &:active:not(:disabled):not([aria-disabled="true"]) {
+      background-color: var(--smui-onSurfaceActive);
+    }
+
+    // normalize.css removes outlines, so each focusable draws its own ring.
+    &:focus-visible {
+      outline: 2px solid @composerBorderFocus;
+      outline-offset: 2px;
+    }
+
+    &:disabled {
+      cursor: default;
+      pointer-events: none;
+    }
+  }
+
+  &__attach {
+    grid-area: attach;
+    color: @composerCounter;
+  }
+
+  &__toolbar {
+    grid-area: toolbar;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: @composerGap;
+    min-width: 0;
+  }
+
+  // The toolbar follows the attach button.
+  &__attach ~ &__toolbar {
+    margin-inline-start: @composerGap;
+  }
+
+  &__counter {
+    grid-area: counter;
+    margin-inline-start: @composerGap;
+    color: @composerCounter;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+
+    &_error {
+      color: @composerCounterError;
+      font-weight: 500;
+    }
+  }
+
+  &__action {
+    grid-area: action;
+    margin-inline-start: @composerGap;
+
+    // Send is available: filled.
+    &:not([aria-disabled="true"]):not(:disabled) {
+      background-color: @composerActionBg;
+      color: @composerActionColor;
+
+      &:hover {
+        background-color: ~"color-mix(in srgb, @{composerActionColor} 12%, @{composerActionBg})";
+      }
+
+      &:active {
+        background-color: ~"color-mix(in srgb, @{composerActionColor} 20%, @{composerActionBg})";
+      }
+    }
+
+    // Send is unavailable (empty text, over the limit, no handler): muted. The
+    // button is not natively disabled, so it keeps focus.
+    &[aria-disabled="true"],
+    &:disabled {
+      background-color: var(--smui-disabledBgColor);
+      color: var(--smui-disabledTextColor);
+      cursor: default;
+    }
+
+    // Stop: the agent is busy.
+    &_stop:not([aria-disabled="true"]):not(:disabled) {
+      background-color: @composerStopBg;
+      color: @composerStopColor;
+
+      &:hover {
+        background-color: @composerStopBg;
+        opacity: 0.88;
+      }
+
+      &:active {
+        background-color: @composerStopBg;
+        opacity: 0.76;
+      }
+    }
+  }
+
+  // The live region for the counter: read by screen readers, never drawn.
+  &__status {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  // ---- Layouts ----
+  // stacked: the field on top; a bar under it (attach, toolbar, counter, action).
+  &_stacked {
+    grid-template-areas:
+      "attachments attachments attachments attachments"
+      "field field field field"
+      "attach toolbar counter action";
+
+    .smwb-composer__field {
+      margin-bottom: @composerGap;
+    }
+
+    .smwb-composer__action {
+      justify-self: end;
+    }
+  }
+
+  // inline: one row (attach, field, counter, action); the toolbar, if any, under it.
+  &_inline {
+    grid-template-areas:
+      "attachments attachments attachments attachments"
+      "attach field counter action"
+      "toolbar toolbar toolbar toolbar";
+    // Buttons stay at the bottom edge as the field grows.
+    align-items: end;
+
+    .smwb-composer__toolbar {
+      margin-top: @composerGap;
+    }
+
+    .smwb-composer__counter {
+      // On the bottom row of text, level with the action.
+      align-self: end;
+      padding-bottom: ~"calc((@{composerIconButtonSize} - 1rem) / 2)";
+    }
+
+    .smwb-composer__attach ~ .smwb-composer__toolbar {
+      margin-inline-start: 0;
+    }
+  }
+
+  // ---- States ----
+  // Set from the textarea's focus, not :focus-within: the chips in the toolbar
+  // have rings of their own.
+  &_focused {
+    border-color: @composerBorderFocus;
+    box-shadow: inset 0 0 0 1px @composerBorderFocus;
+  }
+
+  &_drag-active {
+    border-style: dashed;
+    border-color: @composerBorderFocus;
+    background-color: @composerDragBg;
+  }
+
+  &_disabled {
+    opacity: 0.6;
+    cursor: default;
+  }
+
+  &_over-limit:not(.smwb-composer_focused) {
+    border-color: @composerCounterError;
+  }
+
+  @media (forced-colors: active) {
+    &_focused {
+      outline: 2px solid Highlight;
+      outline-offset: -2px;
+    }
+
+    &__action:not([aria-disabled="true"]):not(:disabled) {
+      border: 1px solid ButtonText;
+    }
+
+    // The UA greys a native disabled control; an unavailable Send is aria-disabled, so it needs the same grey.
+    &__action[aria-disabled="true"],
+    &__action:disabled {
+      color: GrayText;
+    }
+  }
+}

package/less/components/composer/composer.variables.less

@@ -0,0 +1,10 @@
+@composerPadding: @smui-space-sm;
+@composerGap: @smui-space-xs;
+@composerRadius: @smui-radius-lg;
+// One text line. The textarea and its mirror share it, so their heights agree.
+@composerLineHeight: 1.5rem;
+// The text's own padding inside the field; with one line, 24px + 2 * 6px = 36px,
+// the height of an icon button.
+@composerFieldPaddingY: 6px;
+@composerFieldPaddingX: @smui-space-sm;
+@composerIconButtonSize: 36px;

package/less/components/dagView/dagView.entry.less

@@ -0,0 +1,2 @@
+@import (reference) "../../_prelude.less";
+@import "./dagView.less";