al-design-system 1.3.0 → 1.5.0

package/dist/al.css

@@ -1,8 +1,8 @@
-/* AL Design System 1.3.0 - Foundation + 26 components.
+/* AL Design System 1.5.0 - Foundation + 28 components.
  * MIT. https://github.com/guilhermedworakowski/al-design-system
  */
 /* AL Design System - Foundation
- * v1.3.0 - MIT
+ * v1.5.0 - MIT
  * GENERATED by src/foundation/css.py. Do not edit by hand: run the script.
  */
 
@@ -7243,3 +7243,604 @@
     outline-offset: var(--al-border-focus-offset);
   }
 }
+
+/* AL Design System - Number field tokens
+ * GENERATED by src/components/number-field/tokens.py. Do not edit by hand.
+ *
+ * There is no theme block here: each token points to a semantic, and the
+ * theme switches on :root - the same element where these aliases are declared.
+ *
+ * Field height: 48px, derived, no token.
+ * Stepper target: 24px = icon-size, no token of its own.
+ */
+
+:root {
+
+  /* background - only disabled and readonly change it */
+  --al-number-field-bg: var(--al-bg-surface-raised);
+  --al-number-field-bg-disabled: var(--al-bg-disabled);
+  --al-number-field-bg-readonly: var(--al-bg-subtle);
+
+  /* border - the axis that carries the state */
+  --al-number-field-border: var(--al-border-default);
+  --al-number-field-border-hover: var(--al-border-strong);
+  --al-number-field-border-focus: var(--al-border-brand);
+  --al-number-field-border-error: var(--al-border-danger);
+  --al-number-field-border-disabled: var(--al-border-default);
+  --al-number-field-border-readonly: var(--al-border-subtle);
+
+  /* value - no placeholder, the field always has a value */
+  --al-number-field-text-value: var(--al-text-primary);
+  --al-number-field-text-disabled: var(--al-text-disabled);
+
+  /* steppers - out of the Tab order, no hover or ring of their own */
+  --al-number-field-stepper-icon: var(--al-text-primary);
+  --al-number-field-stepper-icon-disabled: var(--al-text-disabled);
+
+  /* label, mark and help - they live outside the field, on the canvas */
+  --al-number-field-label: var(--al-text-primary);
+  --al-number-field-label-error: var(--al-text-danger);
+  --al-number-field-label-disabled: var(--al-text-disabled);
+  --al-number-field-optional: var(--al-text-secondary);
+  --al-number-field-help: var(--al-text-secondary);
+  --al-number-field-help-error: var(--al-text-danger);
+
+  /* focus ring - points to the composite shadow, not the raw color */
+  --al-number-field-ring: var(--al-focus-ring-default);
+  --al-number-field-ring-error: var(--al-focus-ring-error);
+
+  /* geometry */
+  --al-number-field-padding-x: var(--al-space-12);
+  --al-number-field-padding-y: var(--al-space-12);
+  --al-number-field-gap: var(--al-space-8);
+  --al-number-field-stepper-gap: var(--al-space-24);
+  --al-number-field-radius: var(--al-radius-lg);
+  --al-number-field-border-width: var(--al-border-width-1);
+  --al-number-field-icon-size: var(--al-icon-size-24);
+
+  /* width of the box - declared literal, the Foundation has no width scale */
+  --al-number-field-width: 140px;
+
+  /* typography - one style becomes four vars */
+  --al-number-field-font-size: var(--al-font-size-md);
+  --al-number-field-line-height: var(--al-line-height-md);
+  --al-number-field-font-weight: 400;
+  --al-number-field-tracking: 0em;
+  --al-number-field-label-font-size: var(--al-font-size-md);
+  --al-number-field-label-line-height: var(--al-line-height-md);
+  --al-number-field-label-font-weight: 400;
+  --al-number-field-label-tracking: 0em;
+  --al-number-field-optional-font-size: var(--al-font-size-sm);
+  --al-number-field-optional-line-height: var(--al-line-height-sm);
+  --al-number-field-optional-font-weight: 400;
+  --al-number-field-optional-tracking: 0em;
+  --al-number-field-help-font-size: var(--al-font-size-xs);
+  --al-number-field-help-line-height: var(--al-line-height-xs);
+  --al-number-field-help-font-weight: 400;
+  --al-number-field-help-tracking: 0.01em;
+}
+
+/* AL Design System - Number field
+ *
+ * Depends on: foundation/al-foundation.css
+ *           + components/number-field/al-number-field-tokens.css
+ *           + components/icon/icon.css
+ *           + components/number-field/number-field.js (the steppers)
+ *
+ * A QUANTITY THE PERSON ADJUSTS A LITTLE AT A TIME
+ *   A native <input type="number"> between a - and a + button. Numbers that
+ *   are not quantities (zip code, phone, card) are the Input with
+ *   inputmode="numeric" - rule 2.
+ *
+ * ANATOMY
+ *   <div class="al-number-field">
+ *     <div class="al-number-field__labelrow">
+ *       <label class="al-number-field__label" for="qty">Quantity</label>
+ *       <span class="al-number-field__optional">(Optional)</span>
+ *     </div>
+ *     <div class="al-number-field__control">
+ *       <button class="al-number-field__step" type="button" tabindex="-1"
+ *               data-step="down" aria-controls="qty"
+ *               aria-label="Decrease quantity" hidden>
+ *         <svg class="al-icon" aria-hidden="true" focusable="false">minus</svg>
+ *       </button>
+ *       <input class="al-number-field__field" id="qty" type="number"
+ *              min="1" max="10" step="1" value="1"
+ *              aria-describedby="qty-help">
+ *       <button class="al-number-field__step" type="button" tabindex="-1"
+ *               data-step="up" aria-controls="qty"
+ *               aria-label="Increase quantity" hidden>
+ *         <svg class="al-icon" aria-hidden="true" focusable="false">plus</svg>
+ *       </button>
+ *     </div>
+ *     <p class="al-number-field__help" id="qty-help">From 1 to 10</p>
+ *   </div>
+ *
+ * THE STEPPERS ARE OUT OF THE TAB ORDER
+ *   One tab stop: the arrow keys and typing change the value (Carbon, rule
+ *   13). So the buttons carry tabindex="-1", have no ring and no hover of
+ *   their own (rule 14) - the field's border and ring say where pointer and
+ *   focus are. They are born `hidden`: without JavaScript the arrow keys
+ *   still work and a button that does nothing never shows (the same as the
+ *   Password's eye).
+ *
+ * THE STEPPER AT THE LIMIT IS A DISABLED <button>
+ *   At the minimum the - is `disabled`, at the maximum the + (rule 10). The
+ *   JS sets the attribute; the CSS only reads `:disabled`. There is no Figma
+ *   variant for it.
+ *
+ * THE BOX IS `__control`, NOT THE <input>
+ *   The same as the Input: border, background, radius and ring live on
+ *   `__control` and the state is read through `:has()`. Without `:has()` the
+ *   native outline stays (it is only removed inside @supports).
+ *
+ * THE STATE IS DRIVEN BY THE MARKUP
+ *   Error reads `aria-invalid="true"`; disabled `:disabled`; read-only
+ *   `[readonly]` - never `:read-only`, which also matches disabled. The same
+ *   precedence by variable as the Input: error, read-only, disabled in file
+ *   order, disabled wins over all.
+ *
+ * READ-ONLY HAS NO STEPPERS (rule 17)
+ *   Nothing can change, so they are hidden and the value stays centered.
+ *
+ * THE BROWSER'S OWN SPINNERS ARE HIDDEN
+ *   WebKit draws arrows inside type=number and Firefox draws its own. With
+ *   AL's buttons there would be two pairs.
+ *
+ * HEIGHT AND WIDTH
+ *   48 = padding-y x2 + line height, border subtracted from the padding.
+ *   The box is fixed at `--al-number-field-width` (140), decided on
+ *   2026-10-21. Label and help text are not limited by it - they may be
+ *   wider than the box.
+ *
+ * HANDWRITTEN. The tokens it consumes are generated by tokens.py.
+ */
+
+/* ---------------------------------------------------------------- root */
+.al-number-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--al-number-field-gap);
+}
+
+/* ------------------------------------------------------------ label */
+.al-number-field__labelrow {
+  display: flex;
+  align-items: baseline;
+  gap: var(--al-number-field-gap);
+}
+
+.al-number-field__label {
+  color: var(--al-number-field-label);
+  font-family: var(--al-font-sans);
+  font-size: var(--al-number-field-label-font-size);
+  line-height: var(--al-number-field-label-line-height);
+  font-weight: var(--al-number-field-label-font-weight);
+  letter-spacing: var(--al-number-field-label-tracking);
+}
+
+.al-number-field__optional {
+  color: var(--al-number-field-optional);
+  font-family: var(--al-font-sans);
+  font-size: var(--al-number-field-optional-font-size);
+  line-height: var(--al-number-field-optional-line-height);
+  font-weight: var(--al-number-field-optional-font-weight);
+  letter-spacing: var(--al-number-field-optional-tracking);
+}
+
+/* --------------------------------------------------------------- box */
+.al-number-field__control {
+  --_border-state: var(--al-number-field-border);
+
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--al-number-field-stepper-gap);
+  width: var(--al-number-field-width);
+
+  padding: calc(var(--al-number-field-padding-y) - var(--al-number-field-border-width))
+           calc(var(--al-number-field-padding-x) - var(--al-number-field-border-width));
+
+  border: var(--al-number-field-border-width) solid
+          var(--_border-force, var(--_border-state));
+  border-radius: var(--al-number-field-radius);
+  background-color: var(--_bg-force, var(--al-number-field-bg));
+  cursor: text;
+
+  transition:
+    border-color var(--al-motion-duration-feedback) var(--al-motion-easing-exit),
+    box-shadow var(--al-motion-duration-feedback) var(--al-motion-easing-exit);
+}
+
+/* ------------------------------------------------------------- field */
+.al-number-field__field {
+  --_text-state: var(--al-number-field-text-value);
+
+  flex: 1 1 0;
+  min-width: 0;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--_text-force, var(--_text-state));
+  text-align: center;
+
+  font-family: var(--al-font-sans);
+  font-size: var(--al-number-field-font-size);
+  line-height: var(--al-number-field-line-height);
+  font-weight: var(--al-number-field-font-weight);
+  letter-spacing: var(--al-number-field-tracking);
+  font-variant-numeric: tabular-nums;
+
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+/* the browser's own spinners - see the header */
+.al-number-field__field::-webkit-inner-spin-button,
+.al-number-field__field::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+@supports selector(:has(*)) {
+  .al-number-field__field:focus {
+    outline: none;
+  }
+}
+
+/* --------------------------------------------------------- the steppers */
+.al-number-field__step {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+
+  box-sizing: border-box;
+  width: var(--al-number-field-icon-size);
+  height: var(--al-number-field-icon-size);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  /* the svg inherits from here through currentColor - the Icon contract */
+  color: var(--al-number-field-stepper-icon);
+
+  cursor: pointer;
+  -webkit-appearance: none;
+  appearance: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* `display` above would beat the attribute - without JS the buttons don't show */
+.al-number-field__step[hidden] {
+  display: none;
+}
+
+.al-number-field__step > svg {
+  display: block;
+  flex: none;
+  width: var(--al-number-field-icon-size);
+  height: var(--al-number-field-icon-size);
+}
+
+/* at the limit, and in a disabled field - rule 10 */
+.al-number-field__step:disabled {
+  color: var(--al-number-field-stepper-icon-disabled);
+  cursor: not-allowed;
+}
+
+/* ------------------------------------------------------------ help text */
+.al-number-field__help {
+  color: var(--al-number-field-help);
+  font-family: var(--al-font-sans);
+  font-size: var(--al-number-field-help-font-size);
+  line-height: var(--al-number-field-help-line-height);
+  font-weight: var(--al-number-field-help-font-weight);
+  letter-spacing: var(--al-number-field-help-tracking);
+  margin: 0;
+}
+
+/* -------------------------------------------------------------- states */
+.al-number-field__control:hover:not(:has(.al-number-field__field:disabled, .al-number-field__field[readonly])) {
+  --_border-state: var(--al-number-field-border-hover);
+}
+
+.al-number-field__control:has(.al-number-field__field:focus-visible) {
+  --_border-state: var(--al-number-field-border-focus);
+  box-shadow: var(--_ring-force, var(--al-number-field-ring));
+}
+
+/* error - beats hover and focus by writing to another property */
+.al-number-field__control:has(.al-number-field__field[aria-invalid="true"]) {
+  --_border-force: var(--al-number-field-border-error);
+  --_ring-force: var(--al-number-field-ring-error);
+}
+
+.al-number-field:has(.al-number-field__field[aria-invalid="true"]) .al-number-field__label {
+  color: var(--al-number-field-label-error);
+}
+
+.al-number-field:has(.al-number-field__field[aria-invalid="true"]) .al-number-field__help {
+  color: var(--al-number-field-help-error);
+}
+
+/* read-only - `[readonly]`, never `:read-only`. No steppers - rule 17. */
+.al-number-field__control:has(.al-number-field__field[readonly]) {
+  --_border-force: var(--al-number-field-border-readonly);
+  --_bg-force: var(--al-number-field-bg-readonly);
+  cursor: default;
+}
+
+.al-number-field__control:has(.al-number-field__field[readonly]) .al-number-field__step {
+  display: none;
+}
+
+/* disabled - last, because it wins over all */
+.al-number-field__control:has(.al-number-field__field:disabled) {
+  --_border-force: var(--al-number-field-border-disabled);
+  --_bg-force: var(--al-number-field-bg-disabled);
+  cursor: not-allowed;
+}
+
+.al-number-field__field:disabled {
+  --_text-force: var(--al-number-field-text-disabled);
+  cursor: not-allowed;
+}
+
+.al-number-field:has(.al-number-field__field:disabled) .al-number-field__label,
+.al-number-field:has(.al-number-field__field:disabled) .al-number-field__optional {
+  color: var(--al-number-field-label-disabled);
+}
+
+/* ENTER - CSS uses the curve of the state the transition goes to. */
+.al-number-field__control:hover,
+.al-number-field__control:has(.al-number-field__field:focus-visible),
+.al-number-field__control:has(.al-number-field__field[aria-invalid="true"]) {
+  transition-timing-function: var(--al-motion-easing-enter);
+}
+
+/* --------------------------------------------------------- environment */
+@media (prefers-reduced-motion: reduce) {
+  .al-number-field__control {
+    transition: none;
+  }
+}
+
+/* AL Design System - Menu tokens
+ * GENERATED by src/components/menu/tokens.py. Do not edit by hand.
+ *
+ * Every color is a semantic the theme switches on :root.
+ */
+
+:root {
+  /* color - -raised hover and pressed (the menu lives on surface-raised) */
+  --al-menu-bg: var(--al-bg-surface-raised);
+  --al-menu-border: var(--al-border-default);
+  --al-menu-item-label: var(--al-text-primary);
+  --al-menu-item-meta: var(--al-text-secondary);
+  --al-menu-item-meta-hover: var(--al-text-primary);
+  --al-menu-item-bg-hover: var(--al-bg-hover-raised);
+  --al-menu-item-bg-active: var(--al-bg-active-raised);
+  --al-menu-item-label-disabled: var(--al-text-disabled);
+  --al-menu-danger-label: var(--al-text-danger);
+  --al-menu-danger-bg-hover: var(--al-bg-danger-subtle);
+  --al-menu-danger-bg-active: var(--al-bg-danger);
+  --al-menu-danger-label-active: var(--al-text-on-solid);
+  --al-menu-ring: var(--al-border-focus);
+
+  /* elevation - height, not state */
+  --al-menu-shadow: var(--al-elevation-3);
+
+  /* geometry */
+  --al-menu-padding: var(--al-space-4);
+  --al-menu-gap: var(--al-space-2);
+  --al-menu-offset: var(--al-space-4);
+  --al-menu-radius: var(--al-radius-xl);
+  --al-menu-border-width: var(--al-border-width-1);
+  --al-menu-item-padding-y: var(--al-space-8);
+  --al-menu-item-padding-x: var(--al-space-12);
+  --al-menu-item-gap: var(--al-space-8);
+  --al-menu-item-radius: var(--al-radius-lg);
+  --al-menu-item-icon-size: var(--al-icon-size-16);
+  --al-menu-ring-width: var(--al-border-width-2);
+
+  /* width - declared value, no scale in the Foundation */
+  --al-menu-width: 200px;
+
+  /* typography - one style becomes four vars */
+  --al-menu-font-size: var(--al-font-size-sm);
+  --al-menu-line-height: var(--al-line-height-sm);
+  --al-menu-font-weight: 400;
+  --al-menu-tracking: 0em;
+}
+
+/* AL Design System - Menu
+ *
+ * Written by hand. Depends on al-foundation.css, the Icon Button (trigger),
+ * the Icon, the Divider (separator) and al-menu-tokens.css. Behavior:
+ * menu.js.
+ *
+ * No value here is literal: color, space, radius, border, shadow, ring, width
+ * and type come from var(--al-menu-*). The check.py next to it rejects the
+ * file if any escapes.
+ *
+ * MARKUP (WAI-ARIA menu button)
+ *
+ *   <div class="al-menu">
+ *     <button class="al-icon-btn al-icon-btn--ghost al-icon-btn--sm"
+ *             aria-label="More actions" aria-haspopup="menu"
+ *             aria-expanded="false" aria-controls="m1">...</button>
+ *     <ul class="al-menu__list" role="menu" id="m1" aria-label="More actions" hidden>
+ *       <li role="none">
+ *         <button class="al-menu__item" role="menuitem" tabindex="-1"
+ *                 aria-keyshortcuts="Meta+E">
+ *           <svg class="al-icon al-icon--16" aria-hidden="true">...</svg>
+ *           <span class="al-menu__label">Edit</span>
+ *           <kbd class="al-menu__shortcut" aria-hidden="true">⌘E</kbd>
+ *         </button>
+ *       </li>
+ *       <li class="al-divider" role="separator"></li>
+ *       <li role="none">
+ *         <button class="al-menu__item al-menu__item--danger" role="menuitem"
+ *                 tabindex="-1">...Delete...</button>
+ *       </li>
+ *     </ul>
+ *   </div>
+ *
+ *   Disabled: aria-disabled="true" on the item, never `disabled` - the item
+ *   stays focusable and is announced as unavailable (rule A=a, APG).
+ *   The shortcut is aria-hidden: aria-keyshortcuts already announces it, and
+ *   the product implements the key (rule 11).
+ *
+ * STATES
+ *
+ *   hover   :hover, not while focused - the ring on bg-hover-raised would
+ *           drop to 2.88:1 (rule 25)
+ *   pressed :active
+ *   focus   :focus-visible, inset ring (an outer ring hits the neighbours)
+ *   danger  hover bg-danger-subtle, pressed bg-danger with white ink (rule 16)
+ *
+ * The item has no height: 36 = padding-y x 2 + line height.
+ *
+ * MOTION
+ *
+ *   Same fade as the Breadcrumb menu: `motion-duration-feedback`, ease-out
+ *   on opening, ease-in on closing. None with prefers-reduced-motion.
+ */
+
+.al-menu {
+  position: relative;
+  display: inline-block;
+}
+
+/* ------------------------------------------------------------------ panel */
+/* Aligned to the trigger's start edge, `offset` below it - as in Figma. */
+.al-menu__list {
+  position: absolute;
+  top: calc(100% + var(--al-menu-offset));
+  left: 0;
+  z-index: 1;
+  display: flex;
+  inline-size: var(--al-menu-width);
+  box-sizing: border-box;
+  flex-direction: column;
+  gap: var(--al-menu-gap);
+  margin: 0;
+  padding: var(--al-menu-padding);
+  list-style: none;
+  border: var(--al-menu-border-width) solid var(--al-menu-border);
+  border-radius: var(--al-menu-radius);
+  background-color: var(--al-menu-bg);
+  box-shadow: var(--al-menu-shadow);
+  transition:
+    opacity var(--al-motion-duration-feedback) var(--al-motion-easing-exit),
+    display var(--al-motion-duration-feedback) var(--al-motion-easing-exit) allow-discrete;
+}
+
+.al-menu__list[hidden] {
+  display: none;
+  opacity: 0;
+}
+
+.al-menu__list:not([hidden]) {
+  transition-timing-function: var(--al-motion-easing-enter);
+}
+
+@starting-style {
+  .al-menu__list:not([hidden]) {
+    opacity: 0;
+  }
+}
+
+/* ------------------------------------------------------------------- item */
+.al-menu__item {
+  --al-icon-box: var(--al-menu-item-icon-size);
+
+  display: flex;
+  inline-size: 100%;
+  box-sizing: border-box;
+  align-items: center;
+  gap: var(--al-menu-item-gap);
+  margin: 0;
+  padding: var(--al-menu-item-padding-y) var(--al-menu-item-padding-x);
+  border: 0;
+  border-radius: var(--al-menu-item-radius);
+  background-color: transparent;
+  color: var(--al-menu-item-meta);
+  font-family: inherit;
+  font-size: var(--al-menu-font-size);
+  line-height: var(--al-menu-line-height);
+  font-weight: var(--al-menu-font-weight);
+  letter-spacing: var(--al-menu-tracking);
+  text-align: start;
+  cursor: pointer;
+  transition: background-color var(--al-motion-duration-feedback) var(--al-motion-easing-exit);
+}
+
+.al-menu__label {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  overflow: hidden;
+  color: var(--al-menu-item-label);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.al-menu__shortcut {
+  flex: none;
+  font: inherit;
+}
+
+/* hover and pressed: icon and shortcut darken with the label */
+.al-menu__item:hover:not(:focus-visible):not([aria-disabled="true"]) {
+  background-color: var(--al-menu-item-bg-hover);
+  color: var(--al-menu-item-meta-hover);
+  transition-timing-function: var(--al-motion-easing-enter);
+}
+
+.al-menu__item:active:not([aria-disabled="true"]) {
+  background-color: var(--al-menu-item-bg-active);
+  color: var(--al-menu-item-meta-hover);
+}
+
+.al-menu__item:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 var(--al-menu-ring-width) var(--al-menu-ring);
+}
+
+/* ----------------------------------------------------------------- danger */
+.al-menu__item--danger,
+.al-menu__item--danger .al-menu__label {
+  color: var(--al-menu-danger-label);
+}
+
+.al-menu__item--danger:hover:not(:focus-visible):not([aria-disabled="true"]) {
+  background-color: var(--al-menu-danger-bg-hover);
+  color: var(--al-menu-danger-label);
+}
+
+.al-menu__item--danger:active:not([aria-disabled="true"]) {
+  background-color: var(--al-menu-danger-bg-active);
+}
+
+.al-menu__item--danger:active:not([aria-disabled="true"]),
+.al-menu__item--danger:active:not([aria-disabled="true"]) .al-menu__label {
+  color: var(--al-menu-danger-label-active);
+}
+
+/* --------------------------------------------------------------- disabled */
+/* Below AA on purpose (WCAG 1.4.3 exempts disabled controls, rule 18). */
+.al-menu__item[aria-disabled="true"],
+.al-menu__item[aria-disabled="true"] .al-menu__label {
+  color: var(--al-menu-item-label-disabled);
+  cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .al-menu__list,
+  .al-menu__item {
+    transition: none;
+  }
+}