@kenlo/sds-design-system 0.9.9

package/components/Menu/Menu.css

@@ -0,0 +1,651 @@
+/* SDS Menu.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/Menu/Menu.css
+   by scripts/port-css.mjs. Divergences beyond the mechanical rename are noted inline.
+ *//* ============================================================
+   SDS Menu
+   Floating panel anchored to any trigger — compound component
+   Variants: list, sections, searchable, icons, intent, submenu, items-api
+   ============================================================ */
+
+/* ── Wrapper ── */
+.sds-menu {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  /* The row height, named rather than written twice. A caller that wants a panel "seven
+     rows tall" can only say so in terms of this — and a pixel count copied out of here
+     would go stale the moment the row changed. */
+  --sds-menu-item-height: 40px;
+}
+/* ── Built-in trigger button ── */
+.sds-menu__btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-body-md);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--lh-body-md);
+  color: var(--color-neutral-80);
+  transition: background-color 120ms ease, color 120ms ease;
+  user-select: none;
+  box-sizing: border-box;
+  white-space: nowrap;
+}
+.sds-menu__btn:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+  border-radius: var(--radius-sm);
+}
+/* navButton variant — nav-tab ghost */
+.sds-menu__btn--navButton {
+  height: 40px;
+  padding: var(--spacing-2) var(--spacing-4);
+  gap: var(--spacing-3);
+  border-radius: 11px;  /* soft, the install default */
+}
+.sds-menu__btn--navButton:hover {
+  background-color: var(--color-opacity-05);
+}
+.sds-menu__btn--navButton:active {
+  background-color: var(--color-opacity-10);
+}
+/* Divergence: opening does not change the weight; only being the active item does.
+
+   KDLS bolds this on open. Bold is wider, so opening a menu widened its own button —
+   measured, 178.6px to 179.7px, with the label itself gaining 2.5px — and every item after
+   it on the row shifted while the panel was appearing underneath. A control that moves as
+   you press it is the thing you were aiming at a moment ago.
+
+   Reserving the bold width with an invisible copy of the label was tried first and did not
+   hold: the pseudo-element reported weight 700 and the grid column stayed at the regular
+   width. Not changing the metric is the fix that cannot fail, and open is already said
+   twice over — the chevron turns and a panel appears.
+
+   `--active` keeps its weight, because which item you are on does not change while you
+   are pressing it. */
+.sds-menu__btn--navButton.sds-menu__btn--open {
+  color: var(--color-neutral-90);
+}
+.sds-menu__btn--navButton.sds-menu__btn--active {
+  color: var(--color-neutral-90);
+  font-weight: var(--font-weight-bold);
+}
+
+/* ── Nav vertical overrides ── */
+.sds-nav--vertical .sds-menu {
+  display: flex;
+  width: calc(100% - var(--spacing-2));
+  margin: 0 var(--spacing-1);
+}
+.sds-nav--vertical .sds-menu__btn--navButton {
+  width: 100%;
+  text-align: left;
+}
+.sds-menu__panel--inline .sds-menu__panel-body {
+  overflow-y: hidden;
+}
+.sds-nav--vertical .sds-menu__panel--inline .sds-menu__item {
+  padding-left: var(--spacing-8);
+}
+.sds-nav--vertical .sds-menu__panel--inline .sds-menu__submenu-accordion-body .sds-menu__item {
+  padding-left: var(--spacing-12);
+}
+/* pill trigger — chevron rotation when open */
+.sds-menu .sds-pill__icon-right:not(.sds-pill__icon-right--clickable) {
+  transition: transform 200ms ease;
+}
+.sds-menu--open .sds-pill__icon-right:not(.sds-pill__icon-right--clickable) {
+  transform: rotate(180deg);
+}
+/* chevron */
+.sds-menu__btn-chevron {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  transition: transform 120ms ease;
+}
+.sds-menu__btn--open .sds-menu__btn-chevron {
+  transform: rotate(180deg);
+}
+.sds-menu__btn--navButton .sds-menu__btn-chevron {
+  margin-left: calc(var(--spacing-1) - var(--spacing-3));
+}
+/* icon slot */
+.sds-menu__btn-icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+/* ── Profile header (avatar trigger) ── */
+.sds-menu__profile-header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  padding: var(--spacing-4);
+  border-bottom: 1px solid var(--border-static-color);
+}
+.sds-menu__profile-info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-0-5);
+  min-width: 0;
+}
+.sds-menu__profile-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.sds-menu__profile-code,
+.sds-menu__profile-agency {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+/* ── Generic header slot ── */
+/* 12px all round, set by Rafael reading the anchor menu, and set HERE rather than in each
+   caller: a search box in a menu header is the only thing this slot has ever held, and
+   three callers each padding their own wrapper is three chances to disagree. What goes in
+   gets the full width — a box narrower than the panel it heads reads as floating in it. */
+.sds-menu__header {
+  padding: var(--spacing-3);
+  border-bottom: 1px solid var(--border-static-color);
+}
+.sds-menu__header > * {
+  width: 100%;
+}
+/* ── Panel ── */
+.sds-menu__panel {
+  z-index: var(--z-floating);
+  min-width: 200px;
+  max-width: 380px;
+  max-height: 480px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background: var(--component-bg-color);
+  border: 1px solid var(--border-static-color);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-drop-md);
+}
+.sds-menu__inline-wrap {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 200ms ease;
+  overflow: hidden;
+}
+.sds-menu__inline-wrap--open {
+  grid-template-rows: 1fr;
+}
+.sds-menu__panel--inline {
+  z-index: auto;
+  position: static;
+  overflow: visible;
+  min-height: 0;
+  min-width: 0;
+  max-width: none;
+  max-height: none;
+  width: 100%;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+/* The inset follows the radius scheme, or the corners clip.
+
+   A rounded rectangle of radius R has no material within about 0.29R of its corner along
+   the diagonal. A row inset by a flat 4px therefore has its top corners cut off by the
+   panel's own curve, and the more rounded the scheme the worse it gets: at `rounded` the
+   panel's radius is 32px and 4px of inset leaves the first and last rows visibly clipped.
+
+   0.3 of --radius-md is the smallest inset that clears it, and the max() keeps the flat and
+   soft schemes at the 4px they were designed with. */
+.sds-menu__panel-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: max(var(--spacing-1), calc(var(--radius-md) * 0.3)) 0;
+}
+.sds-menu__panel-footer {
+  flex-shrink: 0;
+  padding: var(--spacing-2) var(--spacing-5);
+  border-top: 1px solid var(--border-static-color);
+}
+/* Bare panel — positioning only, no visual styling (child provides own card) */
+.sds-menu__panel-bare {
+  z-index: var(--z-floating);
+}
+.sds-menu__panel-bare .sds-menu__panel-body {
+  overflow: visible;
+  padding: 0;
+}
+/* ── SubMenu panel — one layer above main panel ── */
+.sds-menu__submenu-panel {
+  z-index: calc(var(--z-floating) + 1);
+  max-height: 480px;
+}
+/* ── Search (fixed header — does not scroll with list) ── */
+.sds-menu__search {
+  flex-shrink: 0;
+  padding: var(--spacing-2) var(--spacing-5);
+  border-bottom: 1px solid var(--border-static-color);
+}
+/* ── Group ── */
+.sds-menu__group + .sds-menu__group {
+  border-top: 1px solid var(--border-static-color);
+  margin-top: var(--spacing-1);
+  padding-top: var(--spacing-1);
+}
+.sds-menu__group-title {
+  /* 20px = the item's 4px margin plus its 16px padding. KDLS used 12px here, which put
+     the section title 8px to the left of every label underneath it. */
+  padding: var(--spacing-2) var(--spacing-5) var(--spacing-1);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-label-sm);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--lh-label-sm);
+  color: var(--color-neutral-50);
+}
+/* ── List ── */
+/* The list takes focus so the arrows work, and shows nothing for it: a ring around forty
+   rows says "these" where the reader needs "this one". Without saying so it got the
+   browser's own outline, which is the orange box around the whole group.
+
+   The highlight goes on the active row instead, and only while the list holds focus —
+   a highlight left behind on a list nobody is in is a lie about where the keyboard is. */
+.sds-menu__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.sds-menu__list:focus,
+.sds-menu__list:focus-visible {
+  outline: none;
+}
+
+/* `:focus`, not `:focus-visible`. The list carries `tabindex="-1"`, so it never takes
+   focus by tab or by click — clicking a row focuses that row's own button. The only way
+   the list holds focus is the component putting it there, which happens when the menu is
+   opened from the keyboard and when an arrow hands the caret over from the search box.
+   `:focus-visible` does not match a programmatic focus, so the highlight never drew. */
+.sds-menu__list:focus .sds-menu__item[data-active="true"] {
+  box-shadow: var(--focus-ring-inset);
+}
+/* ── Item ── */
+a.sds-menu__item {
+  text-decoration: none;
+}
+.sds-menu__item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  padding: var(--spacing-2) var(--spacing-4);
+  min-height: var(--sds-menu-item-height);
+  cursor: pointer;
+  color: var(--color-neutral-80);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-body-md);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--lh-body-md);
+  border-radius: 11px;  /* soft, the install default — schemes at the end */
+  /* Horizontal counterpart of the panel-body's vertical inset — same reason, same rule. */
+  margin: 0 max(var(--spacing-1), calc(var(--radius-md) * 0.3));
+  transition: background-color 120ms ease, color 120ms ease;
+  user-select: none;
+  box-sizing: border-box;
+}
+.sds-menu__item:hover {
+  background-color: var(--color-opacity-05);
+}
+.sds-menu__item:focus {
+  outline: none;
+}
+.sds-menu__item:focus-visible {
+  outline: none;
+  background-color: var(--color-opacity-05);
+  box-shadow: var(--focus-ring-inset);
+}
+.sds-menu__item:active {
+  background-color: var(--color-opacity-10);
+}
+.sds-menu__item--active {
+  background-color: transparent;
+  color: var(--color-neutral-90);
+  font-weight: var(--font-weight-bold);
+}
+.sds-menu__item--active:hover {
+  background-color: var(--color-opacity-05);
+}
+.sds-menu__item--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+/* ── Intent items ── */
+.sds-menu__item--primary:hover {
+  background: var(--color-primary-10);
+  color: var(--color-primary-90-solid);
+}
+.sds-menu__item--primary:focus-visible {
+  background: var(--color-primary-10);
+  color: var(--color-primary-90-solid);
+  box-shadow: var(--focus-ring-inset);
+}
+.sds-menu__item--primary:active {
+  background: var(--color-primary-30);
+  color: var(--color-primary-90-solid);
+}
+.sds-menu__item--error:hover {
+  background-color: var(--color-error-10);
+  color: var(--color-error-10-on);
+}
+.sds-menu__item--error:focus-visible {
+  background-color: var(--color-error-10);
+  color: var(--color-error-10-on);
+  box-shadow: var(--focus-ring-inset);
+}
+.sds-menu__item--error:active {
+  background-color: var(--color-error-30);
+  color: var(--color-error-30-on);
+}
+.sds-menu__item--success:hover {
+  background-color: var(--color-success-10);
+  color: var(--color-success-10-on);
+}
+.sds-menu__item--success:focus-visible {
+  background-color: var(--color-success-10);
+  color: var(--color-success-10-on);
+  box-shadow: var(--focus-ring-inset);
+}
+.sds-menu__item--success:active {
+  background-color: var(--color-success-30);
+  color: var(--color-success-30-on);
+}
+.sds-menu__item--alert:hover {
+  background-color: var(--color-alert-10);
+  color: var(--color-alert-10-on);
+}
+.sds-menu__item--alert:focus-visible {
+  background-color: var(--color-alert-10);
+  color: var(--color-alert-10-on);
+  box-shadow: var(--focus-ring-inset);
+}
+.sds-menu__item--alert:active {
+  background-color: var(--color-alert-30);
+  color: var(--color-alert-30-on);
+}
+/* ── SubMenu trigger ── */
+.sds-menu__submenu--open {
+  background-color: var(--color-opacity-05);
+}
+/* ── Item slots ── */
+.sds-menu__item-label {
+  flex: 1;
+  white-space: nowrap;
+}
+.sds-menu__item-icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: inherit;
+}
+.sds-menu__item-tooltip-icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.sds-menu__item-check {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--color-neutral-90);
+  margin-left: auto;
+}
+/* ── SubMenu accordion ── */
+.sds-menu__submenu-accordion {
+  display: block;
+}
+.sds-menu__submenu-accordion-body {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 200ms ease, padding-bottom 200ms ease;
+  padding-bottom: 0;
+}
+.sds-menu__submenu-accordion-body--open {
+  grid-template-rows: 1fr;
+  padding-bottom: var(--spacing-1);
+}
+.sds-menu__submenu-accordion-body > ul {
+  overflow: hidden;
+}
+.sds-menu__submenu-accordion-body .sds-menu__item {
+  padding-left: var(--spacing-8);
+  font-size: var(--font-size-body-sm);
+  line-height: var(--lh-body-sm);
+}
+.sds-menu__submenu-panel .sds-menu__item {
+  font-size: var(--font-size-body-sm);
+  line-height: var(--lh-body-sm);
+}
+.sds-menu__submenu-chevron,
+.sds-menu__submenu-chevron-accordion {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.sds-menu__submenu-chevron-accordion {
+  transition: transform 120ms ease;
+}
+.sds-menu__submenu--open .sds-menu__submenu-chevron-accordion {
+  transform: rotate(180deg);
+}
+/* ── Empty state ── */
+.sds-menu__empty {
+  padding: var(--spacing-2) var(--spacing-5);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-body-md);
+  line-height: var(--lh-body-md);
+  color: var(--color-neutral-50);
+  list-style: none;
+  box-sizing: border-box;
+}
+/* ── Separator ── */
+.sds-menu__separator {
+  height: 1px;
+  background: var(--border-static-color);
+  margin: var(--spacing-1) var(--spacing-3);
+}
+/* ── Dark mode ── */
+[data-theme="dark"] .sds-menu__profile-header {
+  border-bottom-color: var(--border-interactive-color);
+}
+[data-theme="dark"] .sds-menu__header {
+  border-bottom-color: var(--border-interactive-color);
+}
+[data-theme="dark"] .sds-menu__panel {
+  border-color: var(--border-interactive-color);
+}
+[data-theme="dark"] .sds-menu__search {
+  border-bottom-color: var(--border-interactive-color);
+}
+[data-theme="dark"] .sds-menu__group + .sds-menu__group {
+  border-top-color: var(--border-interactive-color);
+}
+[data-theme="dark"] .sds-menu__panel-footer {
+  border-top-color: var(--border-interactive-color);
+}
+[data-theme="dark"] .sds-menu__separator {
+  background: var(--border-interactive-color);
+}
+
+/* ── Placement ─────────────────────────────────────────────────────────────────
+   KDLS measured the trigger and positioned the panel from JavaScript. On a page that
+   renders on the server, a panel that only learns where to sit after hydration is a
+   panel that jumps — so SDS anchors it in CSS instead.
+
+   All three placements KDLS offers are below the trigger, which is what makes this
+   possible. When Popover arrives with real collision detection — flipping above when
+   there is no room below — this grows into it rather than being replaced. */
+.sds-menu {
+  position: relative;
+  display: inline-flex;
+}
+
+.sds-menu__panel {
+  position: absolute;
+  top: calc(100% + var(--spacing-1));
+  /* The floating layer, like every other anchored panel. An earlier draft put this at 20,
+     which is below the sticky header at 100 — a menu opened from a header would have
+     rendered behind it. */
+  z-index: var(--z-floating);
+}
+
+.sds-menu--bottom .sds-menu__panel,
+.sds-menu--bottomLeft .sds-menu__panel {
+  left: 0;
+}
+
+.sds-menu--bottomRight .sds-menu__panel {
+  right: 0;
+  left: auto;
+}
+
+.sds-menu__list {
+  margin: 0;
+}
+
+.sds-menu__separator {
+  border: 0;
+  height: 1px;
+  background: var(--border-static-color);
+  /* Inset to the item box, not to the panel: the items draw a rounded background in from
+     the edge, and a rule running past it reads as a seam. Follows the same inset. */
+  margin: var(--spacing-1) max(var(--spacing-1), calc(var(--radius-md) * 0.3));
+}
+
+/* Native chrome reset.
+   SDS renders these rows as real <button> and <a> elements, which KDLS did not — it used
+   bare <div>s with click handlers. A button brings keyboard activation, focus and the
+   disabled state from the browser, and these four lines are the whole price: without them
+   the browser's own button border and background show through the design. */
+.sds-menu__item {
+  appearance: none;
+  border: 0;
+  background: none;
+  text-align: left;
+  text-decoration: none;
+  /* A <button> sizes to fit-content even at display:flex, so `auto` leaves a short label
+     in a 75px row that only highlights under the text. `100%` is the other trap: it
+     resolves against the row and the 4px margins are added *outside* it, so every item
+     overflowed the panel by 8px and was clipped at the border. The margins have to come
+     out of the width. */
+  width: calc(100% - var(--spacing-2));
+}
+
+/* A caller-supplied trigger. KDLS cloned the element and injected props into it; Marko
+   renders it as tag content instead, which needs a host to carry the ARIA and the click.
+   The host must not impose a shape of its own — the trigger is whatever the caller sent. */
+.sds-menu__trigger-custom {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.sds-menu__trigger-custom:focus-visible {
+  outline: var(--focus-ring-width) solid var(--focus-stroke-color);
+  outline-offset: 2px;
+  border-radius: var(--radius-xs);
+}
+
+/* A row that holds markup rather than a choice — KDLS's `ds-scheme-custom-row`, which is
+   how a ColorPicker ends up inside a Menu.Group. It gets the panel's own horizontal
+   padding and nothing else: it is not a target, so it must not look like one. */
+.sds-menu__custom {
+  padding: var(--spacing-1) var(--spacing-2);
+}
+
+/* The avatar trigger. The button is chrome around the face: it carries the focus ring and
+   the hit area, and states only what the design is silent about. */
+.sds-menu__avatar-btn {
+  display: inline-flex;
+  padding: 0;
+  border: 0;
+  background: none;
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  line-height: 0;
+}
+
+.sds-menu__avatar-btn:focus-visible {
+  outline: var(--focus-ring-width) solid var(--focus-stroke-color);
+  outline-offset: 2px;
+}
+
+/* ── A row that opens the rows under it ───────────────────────────────────────
+   The accordion form: the children expand inside the panel, pushing what is below them
+   down. KDLS's default is a floating fly-out that opens to the right of the row, and on a
+   phone there is no right to open into — KDLS knows that and forces this form inside a
+   vertical Nav. Only this one is ported.
+
+   The chevron turns rather than being swapped for a second icon, which is one rule
+   instead of a branch. */
+.sds-menu__item--expandable {
+  justify-content: space-between;
+}
+
+.sds-menu__item-chevron {
+  display: inline-flex;
+  flex-shrink: 0;
+  margin-left: auto;
+  transition: transform 160ms var(--ease-standard);
+}
+
+.sds-menu__item--expandable[aria-expanded="true"] .sds-menu__item-chevron {
+  transform: rotate(180deg);
+}
+
+/* The children. Indented so the relationship is visible without a line, and with the
+   panel's own horizontal padding still applying to the row itself. */
+.sds-menu__child > .sds-menu__item {
+  padding-left: var(--spacing-8);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sds-menu__item-chevron { transition: none; }
+}
+
+/* 40px tall, so the Pill's ladder: 0 / 11 / 15 / capsule. See Pill.css for the arithmetic
+   — the numbers are a fraction of the control's own height, which is what keeps every
+   40px control in the system reading as one family. `--radius-sm` stopped at 16px here,
+   so `rounded` was a rounded rectangle instead of a capsule. The bare value is `soft`'s,
+   because an install that never picks a scheme has no attribute to match on. */
+[data-radius="flat"] .sds-menu__btn--navButton { border-radius: 0; }
+[data-radius="soft"] .sds-menu__btn--navButton { border-radius: 11px; }
+[data-radius="medium"] .sds-menu__btn--navButton { border-radius: 15px; }
+[data-radius="rounded"] .sds-menu__btn--navButton { border-radius: var(--radius-full); }
+
+/* ── Corner radius: the 40px family ───────────────────────────────────────────
+   A row in a menu, a select or a dropdown is 40px tall, which makes it the same control
+   as the Pill and the navButton — so it takes the same four values. Rafael, pointing at
+   the theme bar's own menu: these are reactive, but not in the right way; they should be
+   40px like the navButton and have the radius resolved here.
+
+       height 40px    flat 0    soft 11px    medium 15px    rounded 20px (a capsule)
+       as a fraction  0         0.275        0.375          0.5
+
+   `--radius-sm` was what they had, and it tops out at 16px — so `rounded` drew a rounded
+   rectangle where every other 40px control in the system drew a capsule. See Pill.css for
+   the arithmetic; the numbers are a fraction of the control's own height, which is what
+   keeps the family reading as one thing.
+
+   The bare value is `soft`'s, because an install that never picks a scheme has no
+   attribute at all and falls through to it. */
+[data-radius="flat"] .sds-menu__item { border-radius: 0; }
+[data-radius="soft"] .sds-menu__item { border-radius: 11px; }
+[data-radius="medium"] .sds-menu__item { border-radius: 15px; }
+[data-radius="rounded"] .sds-menu__item { border-radius: var(--radius-full); }