al-design-system 1.4.0 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +7 -5
  2. package/README.pt-BR.md +7 -5
  3. package/dist/al.css +504 -2
  4. package/dist/components/menu.css +236 -0
  5. package/dist/components/menu.js +111 -0
  6. package/dist/components/stepper.css +264 -0
  7. package/dist/foundation.css +1 -1
  8. package/dist/tokens.json +1 -1
  9. package/package.json +1 -1
package/README.md CHANGED
@@ -10,7 +10,7 @@ An open-source design system, from Figma to code. Plain CSS, a little vanilla Ja
10
10
 
11
11
  ## What it is
12
12
 
13
- - **Foundation + 27 components**, designed in Figma and coded from the same tokens.
13
+ - **Foundation + 29 components**, designed in Figma and coded from the same tokens.
14
14
  - **Light and dark themes** built in. It follows the operating system by default, and you can force one.
15
15
  - **Accessibility is checked by the build.** Every rendered combination (variant × state × theme) is measured for contrast against the background it actually sits on, and each component's markup contract is verified. If something fails, the build stops.
16
16
  - **Nothing is typed by hand.** Tokens, CSS variables, `tokens.json` and the documentation tables are all generated from one source.
@@ -23,6 +23,7 @@ An open-source design system, from Figma to code. Plain CSS, a little vanilla Ja
23
23
  | | Icon | | (70 icons, see [Icons](#icons)) |
24
24
  | | Icon Button | | [guidelines](src/components/icon-button/guidelines.md) |
25
25
  | | Link | | [guidelines](src/components/link/guidelines.md) |
26
+ | | Menu | ✓ | [guidelines](src/components/menu/guidelines.md) |
26
27
  | | Tag | | [guidelines](src/components/tag/guidelines.md) |
27
28
  | | Avatar | | [guidelines](src/components/avatar/guidelines.md) |
28
29
  | Forms | Select | | [guidelines](src/components/select/guidelines.md) |
@@ -42,6 +43,7 @@ An open-source design system, from Figma to code. Plain CSS, a little vanilla Ja
42
43
  | Navigation | Sidebar | ✓ | [guidelines](src/components/sidebar/guidelines.md) |
43
44
  | | Breadcrumb | ✓ | [guidelines](src/components/breadcrumb/guidelines.md) |
44
45
  | | Pagination | | [guidelines](src/components/pagination/guidelines.md) |
46
+ | | Stepper | | [guidelines](src/components/stepper/guidelines.md) |
45
47
  | Feedback | Tooltip | ✓ | [guidelines](src/components/tooltip/guidelines.md) |
46
48
  | | Toast | ✓ | [guidelines](src/components/toast/guidelines.md) |
47
49
  | | Alert | ✓ | [guidelines](src/components/alert/guidelines.md) |
@@ -58,7 +60,7 @@ npm install al-design-system
58
60
  Or straight from a CDN, pinned to a version:
59
61
 
60
62
  ```html
61
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/al-design-system@1.4.0/dist/al.css">
63
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/al-design-system@1.6.0/dist/al.css">
62
64
  ```
63
65
 
64
66
  Each [GitHub Release](https://github.com/guilhermedworakowski/al-design-system/releases) also carries the `dist/` folder as a zip.
@@ -67,10 +69,10 @@ Each [GitHub Release](https://github.com/guilhermedworakowski/al-design-system/r
67
69
 
68
70
  | File | What it is |
69
71
  |---|---|
70
- | `al.css` | Foundation + all 27 components, in one file |
72
+ | `al.css` | Foundation + all 29 components, in one file |
71
73
  | `foundation.css` | Only the Foundation: color, typography, spacing, radius, icon size, elevation, focus ring and motion |
72
74
  | `components/<name>.css` | One component (its tokens + its CSS) |
73
- | `components/<name>.js` | The behavior, for the 10 components that have a script |
75
+ | `components/<name>.js` | The behavior, for the 11 components that have a script |
74
76
  | `icons/*.svg`, `icons/icons.json` | The 70 icons |
75
77
  | `tokens.json` | The Foundation tokens, to read from code |
76
78
 
@@ -101,7 +103,7 @@ The exact markup of each component (which element, which attributes) is describe
101
103
 
102
104
  ### Scripts
103
105
 
104
- Password, Number field, Tab, Modal, Drawer, Sidebar, Breadcrumb, Tooltip, Toast and Alert need their script, loaded once per page. Each one wires up the components already on the page by itself:
106
+ Password, Number field, Menu, Tab, Modal, Drawer, Sidebar, Breadcrumb, Tooltip, Toast and Alert need their script, loaded once per page. Each one wires up the components already on the page by itself:
105
107
 
106
108
  ```html
107
109
  <script src="node_modules/al-design-system/dist/components/modal.js" defer></script>
package/README.pt-BR.md CHANGED
@@ -10,7 +10,7 @@ Design system open source, do Figma ao código. CSS puro, um pouco de JavaScript
10
10
 
11
11
  ## O que é
12
12
 
13
- - **Foundation + 27 componentes**, desenhados no Figma e codados a partir dos mesmos tokens.
13
+ - **Foundation + 29 componentes**, desenhados no Figma e codados a partir dos mesmos tokens.
14
14
  - **Temas claro e escuro** já incluídos. Por padrão segue o sistema operacional, e dá para forçar um.
15
15
  - **A acessibilidade é conferida no build.** Cada combinação renderizada (variante × estado × tema) tem o contraste medido contra o fundo onde ela realmente aparece, e o contrato de marcação de cada componente é verificado. Se algo reprova, o build para.
16
16
  - **Nada é digitado à mão.** Tokens, variáveis CSS, `tokens.json` e as tabelas da documentação saem todos de uma fonte só.
@@ -23,6 +23,7 @@ Design system open source, do Figma ao código. CSS puro, um pouco de JavaScript
23
23
  | | Icon | | (70 ícones, ver [Ícones](#ícones)) |
24
24
  | | Icon Button | | [diretrizes](src/components/icon-button/guidelines.md) |
25
25
  | | Link | | [diretrizes](src/components/link/guidelines.md) |
26
+ | | Menu | ✓ | [diretrizes](src/components/menu/guidelines.md) |
26
27
  | | Tag | | [diretrizes](src/components/tag/guidelines.md) |
27
28
  | | Avatar | | [diretrizes](src/components/avatar/guidelines.md) |
28
29
  | Formulários | Select | | [diretrizes](src/components/select/guidelines.md) |
@@ -42,6 +43,7 @@ Design system open source, do Figma ao código. CSS puro, um pouco de JavaScript
42
43
  | Navegação | Sidebar | ✓ | [diretrizes](src/components/sidebar/guidelines.md) |
43
44
  | | Breadcrumb | ✓ | [diretrizes](src/components/breadcrumb/guidelines.md) |
44
45
  | | Pagination | | [diretrizes](src/components/pagination/guidelines.md) |
46
+ | | Stepper | | [diretrizes](src/components/stepper/guidelines.md) |
45
47
  | Feedback | Tooltip | ✓ | [diretrizes](src/components/tooltip/guidelines.md) |
46
48
  | | Toast | ✓ | [diretrizes](src/components/toast/guidelines.md) |
47
49
  | | Alert | ✓ | [diretrizes](src/components/alert/guidelines.md) |
@@ -58,7 +60,7 @@ npm install al-design-system
58
60
  Ou direto de uma CDN, fixado numa versão:
59
61
 
60
62
  ```html
61
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/al-design-system@1.4.0/dist/al.css">
63
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/al-design-system@1.6.0/dist/al.css">
62
64
  ```
63
65
 
64
66
  Cada [Release no GitHub](https://github.com/guilhermedworakowski/al-design-system/releases) também traz a pasta `dist/` num zip.
@@ -67,10 +69,10 @@ Cada [Release no GitHub](https://github.com/guilhermedworakowski/al-design-syste
67
69
 
68
70
  | Arquivo | O que é |
69
71
  |---|---|
70
- | `al.css` | Foundation + os 27 componentes, num arquivo só |
72
+ | `al.css` | Foundation + os 29 componentes, num arquivo só |
71
73
  | `foundation.css` | Só a Foundation: cor, tipografia, espaçamento, radius, tamanho de ícone, elevação, anel de foco e motion |
72
74
  | `components/<nome>.css` | Um componente (os tokens + o CSS dele) |
73
- | `components/<nome>.js` | O comportamento, para os 10 componentes que têm script |
75
+ | `components/<nome>.js` | O comportamento, para os 11 componentes que têm script |
74
76
  | `icons/*.svg`, `icons/icons.json` | Os 70 ícones |
75
77
  | `tokens.json` | Os tokens da Foundation, para ler por código |
76
78
 
@@ -101,7 +103,7 @@ A marcação exata de cada componente (qual elemento, quais atributos) está des
101
103
 
102
104
  ### Scripts
103
105
 
104
- Password, Number field, Tab, Modal, Drawer, Sidebar, Breadcrumb, Tooltip, Toast e Alert precisam do script, carregado uma vez por página. Cada um liga sozinho os componentes que já estão na página:
106
+ Password, Number field, Menu, Tab, Modal, Drawer, Sidebar, Breadcrumb, Tooltip, Toast e Alert precisam do script, carregado uma vez por página. Cada um liga sozinho os componentes que já estão na página:
105
107
 
106
108
  ```html
107
109
  <script src="node_modules/al-design-system/dist/components/modal.js" defer></script>
package/dist/al.css CHANGED
@@ -1,8 +1,8 @@
1
- /* AL Design System 1.4.0 - Foundation + 27 components.
1
+ /* AL Design System 1.6.0 - Foundation + 29 components.
2
2
  * MIT. https://github.com/guilhermedworakowski/al-design-system
3
3
  */
4
4
  /* AL Design System - Foundation
5
- * v1.4.0 - MIT
5
+ * v1.6.0 - MIT
6
6
  * GENERATED by src/foundation/css.py. Do not edit by hand: run the script.
7
7
  */
8
8
 
@@ -7607,3 +7607,505 @@
7607
7607
  transition: none;
7608
7608
  }
7609
7609
  }
7610
+
7611
+ /* AL Design System - Menu tokens
7612
+ * GENERATED by src/components/menu/tokens.py. Do not edit by hand.
7613
+ *
7614
+ * Every color is a semantic the theme switches on :root.
7615
+ */
7616
+
7617
+ :root {
7618
+ /* color - -raised hover and pressed (the menu lives on surface-raised) */
7619
+ --al-menu-bg: var(--al-bg-surface-raised);
7620
+ --al-menu-border: var(--al-border-default);
7621
+ --al-menu-item-label: var(--al-text-primary);
7622
+ --al-menu-item-meta: var(--al-text-secondary);
7623
+ --al-menu-item-meta-hover: var(--al-text-primary);
7624
+ --al-menu-item-bg-hover: var(--al-bg-hover-raised);
7625
+ --al-menu-item-bg-active: var(--al-bg-active-raised);
7626
+ --al-menu-item-label-disabled: var(--al-text-disabled);
7627
+ --al-menu-danger-label: var(--al-text-danger);
7628
+ --al-menu-danger-bg-hover: var(--al-bg-danger-subtle);
7629
+ --al-menu-danger-bg-active: var(--al-bg-danger);
7630
+ --al-menu-danger-label-active: var(--al-text-on-solid);
7631
+ --al-menu-ring: var(--al-border-focus);
7632
+
7633
+ /* elevation - height, not state */
7634
+ --al-menu-shadow: var(--al-elevation-3);
7635
+
7636
+ /* geometry */
7637
+ --al-menu-padding: var(--al-space-4);
7638
+ --al-menu-gap: var(--al-space-2);
7639
+ --al-menu-offset: var(--al-space-4);
7640
+ --al-menu-radius: var(--al-radius-xl);
7641
+ --al-menu-border-width: var(--al-border-width-1);
7642
+ --al-menu-item-padding-y: var(--al-space-8);
7643
+ --al-menu-item-padding-x: var(--al-space-12);
7644
+ --al-menu-item-gap: var(--al-space-8);
7645
+ --al-menu-item-radius: var(--al-radius-lg);
7646
+ --al-menu-item-icon-size: var(--al-icon-size-16);
7647
+ --al-menu-ring-width: var(--al-border-width-2);
7648
+
7649
+ /* width - declared value, no scale in the Foundation */
7650
+ --al-menu-width: 200px;
7651
+
7652
+ /* typography - one style becomes four vars */
7653
+ --al-menu-font-size: var(--al-font-size-sm);
7654
+ --al-menu-line-height: var(--al-line-height-sm);
7655
+ --al-menu-font-weight: 400;
7656
+ --al-menu-tracking: 0em;
7657
+ }
7658
+
7659
+ /* AL Design System - Menu
7660
+ *
7661
+ * Written by hand. Depends on al-foundation.css, the Icon Button (trigger),
7662
+ * the Icon, the Divider (separator) and al-menu-tokens.css. Behavior:
7663
+ * menu.js.
7664
+ *
7665
+ * No value here is literal: color, space, radius, border, shadow, ring, width
7666
+ * and type come from var(--al-menu-*). The check.py next to it rejects the
7667
+ * file if any escapes.
7668
+ *
7669
+ * MARKUP (WAI-ARIA menu button)
7670
+ *
7671
+ * <div class="al-menu">
7672
+ * <button class="al-icon-btn al-icon-btn--ghost al-icon-btn--sm"
7673
+ * aria-label="More actions" aria-haspopup="menu"
7674
+ * aria-expanded="false" aria-controls="m1">...</button>
7675
+ * <ul class="al-menu__list" role="menu" id="m1" aria-label="More actions" hidden>
7676
+ * <li role="none">
7677
+ * <button class="al-menu__item" role="menuitem" tabindex="-1"
7678
+ * aria-keyshortcuts="Meta+E">
7679
+ * <svg class="al-icon al-icon--16" aria-hidden="true">...</svg>
7680
+ * <span class="al-menu__label">Edit</span>
7681
+ * <kbd class="al-menu__shortcut" aria-hidden="true">⌘E</kbd>
7682
+ * </button>
7683
+ * </li>
7684
+ * <li class="al-divider" role="separator"></li>
7685
+ * <li role="none">
7686
+ * <button class="al-menu__item al-menu__item--danger" role="menuitem"
7687
+ * tabindex="-1">...Delete...</button>
7688
+ * </li>
7689
+ * </ul>
7690
+ * </div>
7691
+ *
7692
+ * Disabled: aria-disabled="true" on the item, never `disabled` - the item
7693
+ * stays focusable and is announced as unavailable (rule A=a, APG).
7694
+ * The shortcut is aria-hidden: aria-keyshortcuts already announces it, and
7695
+ * the product implements the key (rule 11).
7696
+ *
7697
+ * STATES
7698
+ *
7699
+ * hover :hover, not while focused - the ring on bg-hover-raised would
7700
+ * drop to 2.88:1 (rule 25)
7701
+ * pressed :active
7702
+ * focus :focus-visible, inset ring (an outer ring hits the neighbours)
7703
+ * danger hover bg-danger-subtle, pressed bg-danger with white ink (rule 16)
7704
+ *
7705
+ * The item has no height: 36 = padding-y x 2 + line height.
7706
+ *
7707
+ * MOTION
7708
+ *
7709
+ * Same fade as the Breadcrumb menu: `motion-duration-feedback`, ease-out
7710
+ * on opening, ease-in on closing. None with prefers-reduced-motion.
7711
+ */
7712
+
7713
+ .al-menu {
7714
+ position: relative;
7715
+ display: inline-block;
7716
+ }
7717
+
7718
+ /* ------------------------------------------------------------------ panel */
7719
+ /* Aligned to the trigger's start edge, `offset` below it - as in Figma. */
7720
+ .al-menu__list {
7721
+ position: absolute;
7722
+ top: calc(100% + var(--al-menu-offset));
7723
+ left: 0;
7724
+ z-index: 1;
7725
+ display: flex;
7726
+ inline-size: var(--al-menu-width);
7727
+ box-sizing: border-box;
7728
+ flex-direction: column;
7729
+ gap: var(--al-menu-gap);
7730
+ margin: 0;
7731
+ padding: var(--al-menu-padding);
7732
+ list-style: none;
7733
+ border: var(--al-menu-border-width) solid var(--al-menu-border);
7734
+ border-radius: var(--al-menu-radius);
7735
+ background-color: var(--al-menu-bg);
7736
+ box-shadow: var(--al-menu-shadow);
7737
+ transition:
7738
+ opacity var(--al-motion-duration-feedback) var(--al-motion-easing-exit),
7739
+ display var(--al-motion-duration-feedback) var(--al-motion-easing-exit) allow-discrete;
7740
+ }
7741
+
7742
+ .al-menu__list[hidden] {
7743
+ display: none;
7744
+ opacity: 0;
7745
+ }
7746
+
7747
+ .al-menu__list:not([hidden]) {
7748
+ transition-timing-function: var(--al-motion-easing-enter);
7749
+ }
7750
+
7751
+ @starting-style {
7752
+ .al-menu__list:not([hidden]) {
7753
+ opacity: 0;
7754
+ }
7755
+ }
7756
+
7757
+ /* ------------------------------------------------------------------- item */
7758
+ .al-menu__item {
7759
+ --al-icon-box: var(--al-menu-item-icon-size);
7760
+
7761
+ display: flex;
7762
+ inline-size: 100%;
7763
+ box-sizing: border-box;
7764
+ align-items: center;
7765
+ gap: var(--al-menu-item-gap);
7766
+ margin: 0;
7767
+ padding: var(--al-menu-item-padding-y) var(--al-menu-item-padding-x);
7768
+ border: 0;
7769
+ border-radius: var(--al-menu-item-radius);
7770
+ background-color: transparent;
7771
+ color: var(--al-menu-item-meta);
7772
+ font-family: inherit;
7773
+ font-size: var(--al-menu-font-size);
7774
+ line-height: var(--al-menu-line-height);
7775
+ font-weight: var(--al-menu-font-weight);
7776
+ letter-spacing: var(--al-menu-tracking);
7777
+ text-align: start;
7778
+ cursor: pointer;
7779
+ transition: background-color var(--al-motion-duration-feedback) var(--al-motion-easing-exit);
7780
+ }
7781
+
7782
+ .al-menu__label {
7783
+ flex: 1 1 auto;
7784
+ min-inline-size: 0;
7785
+ overflow: hidden;
7786
+ color: var(--al-menu-item-label);
7787
+ white-space: nowrap;
7788
+ text-overflow: ellipsis;
7789
+ }
7790
+
7791
+ .al-menu__shortcut {
7792
+ flex: none;
7793
+ font: inherit;
7794
+ }
7795
+
7796
+ /* hover and pressed: icon and shortcut darken with the label */
7797
+ .al-menu__item:hover:not(:focus-visible):not([aria-disabled="true"]) {
7798
+ background-color: var(--al-menu-item-bg-hover);
7799
+ color: var(--al-menu-item-meta-hover);
7800
+ transition-timing-function: var(--al-motion-easing-enter);
7801
+ }
7802
+
7803
+ .al-menu__item:active:not([aria-disabled="true"]) {
7804
+ background-color: var(--al-menu-item-bg-active);
7805
+ color: var(--al-menu-item-meta-hover);
7806
+ }
7807
+
7808
+ .al-menu__item:focus-visible {
7809
+ outline: none;
7810
+ box-shadow: inset 0 0 0 var(--al-menu-ring-width) var(--al-menu-ring);
7811
+ }
7812
+
7813
+ /* ----------------------------------------------------------------- danger */
7814
+ .al-menu__item--danger,
7815
+ .al-menu__item--danger .al-menu__label {
7816
+ color: var(--al-menu-danger-label);
7817
+ }
7818
+
7819
+ .al-menu__item--danger:hover:not(:focus-visible):not([aria-disabled="true"]) {
7820
+ background-color: var(--al-menu-danger-bg-hover);
7821
+ color: var(--al-menu-danger-label);
7822
+ }
7823
+
7824
+ .al-menu__item--danger:active:not([aria-disabled="true"]) {
7825
+ background-color: var(--al-menu-danger-bg-active);
7826
+ }
7827
+
7828
+ .al-menu__item--danger:active:not([aria-disabled="true"]),
7829
+ .al-menu__item--danger:active:not([aria-disabled="true"]) .al-menu__label {
7830
+ color: var(--al-menu-danger-label-active);
7831
+ }
7832
+
7833
+ /* --------------------------------------------------------------- disabled */
7834
+ /* Below AA on purpose (WCAG 1.4.3 exempts disabled controls, rule 18). */
7835
+ .al-menu__item[aria-disabled="true"],
7836
+ .al-menu__item[aria-disabled="true"] .al-menu__label {
7837
+ color: var(--al-menu-item-label-disabled);
7838
+ cursor: not-allowed;
7839
+ }
7840
+
7841
+ @media (prefers-reduced-motion: reduce) {
7842
+ .al-menu__list,
7843
+ .al-menu__item {
7844
+ transition: none;
7845
+ }
7846
+ }
7847
+
7848
+ /* AL Design System - Stepper tokens
7849
+ * GENERATED by src/components/stepper/tokens.py. Do not edit by hand.
7850
+ *
7851
+ * Every color is a semantic the theme switches on :root.
7852
+ */
7853
+
7854
+ :root {
7855
+ /* color */
7856
+ --al-stepper-label: var(--al-text-primary);
7857
+ --al-stepper-label-upcoming: var(--al-text-secondary);
7858
+ --al-stepper-description: var(--al-text-secondary);
7859
+ --al-stepper-completed-bg: var(--al-bg-brand-subtle);
7860
+ --al-stepper-completed-border: var(--al-border-brand);
7861
+ --al-stepper-completed-icon: var(--al-text-brand);
7862
+ --al-stepper-current-bg: var(--al-bg-brand);
7863
+ --al-stepper-current-number: var(--al-text-on-brand);
7864
+ --al-stepper-upcoming-bg: var(--al-bg-surface);
7865
+ --al-stepper-upcoming-border: var(--al-border-strong);
7866
+ --al-stepper-upcoming-number: var(--al-text-secondary);
7867
+ --al-stepper-connector: var(--al-border-default);
7868
+ --al-stepper-connector-done: var(--al-border-brand);
7869
+
7870
+ /* geometry */
7871
+ --al-stepper-indicator-size: var(--al-space-32);
7872
+ --al-stepper-indicator-radius: var(--al-radius-full);
7873
+ --al-stepper-indicator-border-width: var(--al-border-width-1);
7874
+ --al-stepper-icon-size: var(--al-icon-size-16);
7875
+ --al-stepper-connector-thickness: var(--al-border-width-1);
7876
+ --al-stepper-text-gap: var(--al-space-2);
7877
+ --al-stepper-horizontal-gap: var(--al-space-8);
7878
+ --al-stepper-horizontal-text-padding: var(--al-space-8);
7879
+ --al-stepper-vertical-gap: var(--al-space-12);
7880
+ --al-stepper-vertical-rail-gap: var(--al-space-4);
7881
+ --al-stepper-vertical-step-gap: var(--al-space-24);
7882
+
7883
+ /* type - title and number like label-md, description like body-sm */
7884
+ --al-stepper-font-size: var(--al-font-size-sm);
7885
+ --al-stepper-line-height: var(--al-line-height-sm);
7886
+ --al-stepper-font-weight: var(--al-font-weight-medium);
7887
+ --al-stepper-description-font-size: var(--al-font-size-sm);
7888
+ --al-stepper-description-line-height: var(--al-line-height-sm);
7889
+ --al-stepper-description-font-weight: var(--al-font-weight-regular);
7890
+ }
7891
+
7892
+ /* AL Design System - Stepper
7893
+ *
7894
+ * Depends on: al-foundation.css, al-stepper-tokens.css, al-icon-tokens.css + icon.css
7895
+ *
7896
+ * .al-stepper Horizontal - title under the circle, one line
7897
+ * .al-stepper--vertical Vertical - rail on the left, text on the right
7898
+ *
7899
+ * Markup (usage rules 17-19): an <ol> inside <nav aria-label="Progress">.
7900
+ * Status is a class on the step; the current one also carries
7901
+ * aria-current="step", and that attribute is what styles it, so the look can
7902
+ * never disagree with what is announced. Each step spells its status out in
7903
+ * hidden text - the check and the color say nothing to a screen reader.
7904
+ *
7905
+ * <nav aria-label="Progress">
7906
+ * <ol class="al-stepper">
7907
+ * <li class="al-stepper__step al-stepper__step--completed">
7908
+ * <span class="al-stepper__indicator">
7909
+ * <svg class="al-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">…check…</svg>
7910
+ * </span>
7911
+ * <span class="al-stepper__text">
7912
+ * <span class="al-stepper__label">Account</span>
7913
+ * <span class="al-stepper__status">completed</span>
7914
+ * <span class="al-stepper__description">Optional description</span>
7915
+ * </span>
7916
+ * </li>
7917
+ * <li class="al-stepper__step" aria-current="step">
7918
+ * <span class="al-stepper__indicator" aria-hidden="true">2</span> …
7919
+ * </li>
7920
+ * <li class="al-stepper__step"> … upcoming … </li>
7921
+ * </ol>
7922
+ * </nav>
7923
+ *
7924
+ * NOT CLICKABLE (rule 24): no hover, no focus, no link. Moving between steps
7925
+ * is the form's Back / Continue.
7926
+ *
7927
+ * ONE CONTINUOUS LINE (rule 15): each horizontal step draws half a line on
7928
+ * each side of its circle (::before / ::after) and the steps touch, so the
7929
+ * halves join. The line before a step is brand when the step is completed or
7930
+ * current; the line after, only when completed. The outer halves stay
7931
+ * unpainted - they keep the circle centered over the title.
7932
+ *
7933
+ * THE BORDER IS ALWAYS THERE: the current step paints it in its own fill, so
7934
+ * the circle never changes size between states.
7935
+ *
7936
+ * NO TOKEN, ON PURPOSE: the vertical text drops by (circle - line) / 2 so the
7937
+ * title's first line centers on the circle.
7938
+ */
7939
+
7940
+ .al-stepper {
7941
+ display: flex;
7942
+ margin: 0;
7943
+ padding: 0;
7944
+ list-style: none;
7945
+ font-family: var(--al-font-sans);
7946
+ }
7947
+
7948
+ /* ---------------------------------------------------------- horizontal */
7949
+ .al-stepper__step {
7950
+ display: grid;
7951
+ flex: 1 1 0;
7952
+ grid-template-columns: 1fr var(--al-stepper-indicator-size) 1fr;
7953
+ align-items: center;
7954
+ align-content: start;
7955
+ row-gap: var(--al-stepper-horizontal-gap);
7956
+ min-inline-size: 0;
7957
+ }
7958
+
7959
+ .al-stepper__step::before,
7960
+ .al-stepper__step::after {
7961
+ content: '';
7962
+ grid-row: 1;
7963
+ block-size: var(--al-stepper-connector-thickness);
7964
+ background-color: var(--al-stepper-connector);
7965
+ }
7966
+
7967
+ .al-stepper__step::before { grid-column: 1; }
7968
+ .al-stepper__step::after { grid-column: 3; }
7969
+
7970
+ .al-stepper__step--completed::before,
7971
+ .al-stepper__step--completed::after,
7972
+ .al-stepper__step[aria-current='step']::before {
7973
+ background-color: var(--al-stepper-connector-done);
7974
+ }
7975
+
7976
+ .al-stepper__step:first-child::before,
7977
+ .al-stepper__step:last-child::after {
7978
+ background-color: transparent;
7979
+ }
7980
+
7981
+ .al-stepper__indicator {
7982
+ grid-row: 1;
7983
+ grid-column: 2;
7984
+ }
7985
+
7986
+ .al-stepper__text {
7987
+ grid-row: 2;
7988
+ grid-column: 1 / -1;
7989
+ padding-inline: var(--al-stepper-horizontal-text-padding);
7990
+ text-align: center;
7991
+ }
7992
+
7993
+ /* ------------------------------------------------------------ vertical */
7994
+ .al-stepper--vertical {
7995
+ flex-direction: column;
7996
+ }
7997
+
7998
+ .al-stepper--vertical .al-stepper__step {
7999
+ flex: none;
8000
+ grid-template-columns: var(--al-stepper-indicator-size) 1fr;
8001
+ grid-template-rows: auto 1fr;
8002
+ align-items: start;
8003
+ column-gap: var(--al-stepper-vertical-gap);
8004
+ row-gap: 0;
8005
+ }
8006
+
8007
+ .al-stepper--vertical .al-stepper__step::before {
8008
+ display: none;
8009
+ }
8010
+
8011
+ .al-stepper--vertical .al-stepper__step::after {
8012
+ grid-row: 2;
8013
+ grid-column: 1;
8014
+ justify-self: center;
8015
+ align-self: stretch;
8016
+ inline-size: var(--al-stepper-connector-thickness);
8017
+ block-size: auto;
8018
+ margin-block: var(--al-stepper-vertical-rail-gap);
8019
+ }
8020
+
8021
+ .al-stepper--vertical .al-stepper__step:last-child::after {
8022
+ display: none;
8023
+ }
8024
+
8025
+ .al-stepper--vertical .al-stepper__indicator {
8026
+ grid-column: 1;
8027
+ }
8028
+
8029
+ .al-stepper--vertical .al-stepper__text {
8030
+ grid-row: 1 / span 2;
8031
+ grid-column: 2;
8032
+ padding-block: calc((var(--al-stepper-indicator-size) - var(--al-stepper-line-height)) / 2)
8033
+ var(--al-stepper-vertical-step-gap);
8034
+ padding-inline: 0;
8035
+ text-align: start;
8036
+ }
8037
+
8038
+ .al-stepper--vertical .al-stepper__step:last-child .al-stepper__text {
8039
+ padding-block-end: 0;
8040
+ }
8041
+
8042
+ /* ----------------------------------------------------------- indicator */
8043
+ .al-stepper__indicator {
8044
+ display: inline-flex;
8045
+ align-items: center;
8046
+ justify-content: center;
8047
+ box-sizing: border-box;
8048
+ inline-size: var(--al-stepper-indicator-size);
8049
+ block-size: var(--al-stepper-indicator-size);
8050
+ border: var(--al-stepper-indicator-border-width) solid var(--al-stepper-upcoming-border);
8051
+ border-radius: var(--al-stepper-indicator-radius);
8052
+ background-color: var(--al-stepper-upcoming-bg);
8053
+ color: var(--al-stepper-upcoming-number);
8054
+ font-size: var(--al-stepper-font-size);
8055
+ line-height: var(--al-stepper-line-height);
8056
+ font-weight: var(--al-stepper-font-weight);
8057
+ font-variant-numeric: tabular-nums;
8058
+ }
8059
+
8060
+ .al-stepper__indicator .al-icon {
8061
+ --al-icon-box: var(--al-stepper-icon-size);
8062
+ }
8063
+
8064
+ .al-stepper__step--completed .al-stepper__indicator {
8065
+ border-color: var(--al-stepper-completed-border);
8066
+ background-color: var(--al-stepper-completed-bg);
8067
+ color: var(--al-stepper-completed-icon);
8068
+ }
8069
+
8070
+ .al-stepper__step[aria-current='step'] .al-stepper__indicator {
8071
+ border-color: var(--al-stepper-current-bg);
8072
+ background-color: var(--al-stepper-current-bg);
8073
+ color: var(--al-stepper-current-number);
8074
+ }
8075
+
8076
+ /* ---------------------------------------------------------------- text */
8077
+ .al-stepper__text {
8078
+ display: flex;
8079
+ flex-direction: column;
8080
+ gap: var(--al-stepper-text-gap);
8081
+ }
8082
+
8083
+ .al-stepper__label {
8084
+ font-size: var(--al-stepper-font-size);
8085
+ line-height: var(--al-stepper-line-height);
8086
+ font-weight: var(--al-stepper-font-weight);
8087
+ color: var(--al-stepper-label-upcoming);
8088
+ }
8089
+
8090
+ .al-stepper__step--completed .al-stepper__label,
8091
+ .al-stepper__step[aria-current='step'] .al-stepper__label {
8092
+ color: var(--al-stepper-label);
8093
+ }
8094
+
8095
+ .al-stepper__description {
8096
+ font-size: var(--al-stepper-description-font-size);
8097
+ line-height: var(--al-stepper-description-line-height);
8098
+ font-weight: var(--al-stepper-description-font-weight);
8099
+ color: var(--al-stepper-description);
8100
+ }
8101
+
8102
+ /* Read, never seen (rule 19). One border-width is the 1px box the pattern
8103
+ needs; clip-path hides it. */
8104
+ .al-stepper__status {
8105
+ position: absolute;
8106
+ inline-size: var(--al-border-width-1);
8107
+ block-size: var(--al-border-width-1);
8108
+ overflow: hidden;
8109
+ clip-path: inset(50%);
8110
+ white-space: nowrap;
8111
+ }
package/dist/components/menu.css ADDED
@@ -0,0 +1,236 @@
1
+ /* AL Design System - Menu tokens
2
+ * GENERATED by src/components/menu/tokens.py. Do not edit by hand.
3
+ *
4
+ * Every color is a semantic the theme switches on :root.
5
+ */
6
+
7
+ :root {
8
+ /* color - -raised hover and pressed (the menu lives on surface-raised) */
9
+ --al-menu-bg: var(--al-bg-surface-raised);
10
+ --al-menu-border: var(--al-border-default);
11
+ --al-menu-item-label: var(--al-text-primary);
12
+ --al-menu-item-meta: var(--al-text-secondary);
13
+ --al-menu-item-meta-hover: var(--al-text-primary);
14
+ --al-menu-item-bg-hover: var(--al-bg-hover-raised);
15
+ --al-menu-item-bg-active: var(--al-bg-active-raised);
16
+ --al-menu-item-label-disabled: var(--al-text-disabled);
17
+ --al-menu-danger-label: var(--al-text-danger);
18
+ --al-menu-danger-bg-hover: var(--al-bg-danger-subtle);
19
+ --al-menu-danger-bg-active: var(--al-bg-danger);
20
+ --al-menu-danger-label-active: var(--al-text-on-solid);
21
+ --al-menu-ring: var(--al-border-focus);
22
+
23
+ /* elevation - height, not state */
24
+ --al-menu-shadow: var(--al-elevation-3);
25
+
26
+ /* geometry */
27
+ --al-menu-padding: var(--al-space-4);
28
+ --al-menu-gap: var(--al-space-2);
29
+ --al-menu-offset: var(--al-space-4);
30
+ --al-menu-radius: var(--al-radius-xl);
31
+ --al-menu-border-width: var(--al-border-width-1);
32
+ --al-menu-item-padding-y: var(--al-space-8);
33
+ --al-menu-item-padding-x: var(--al-space-12);
34
+ --al-menu-item-gap: var(--al-space-8);
35
+ --al-menu-item-radius: var(--al-radius-lg);
36
+ --al-menu-item-icon-size: var(--al-icon-size-16);
37
+ --al-menu-ring-width: var(--al-border-width-2);
38
+
39
+ /* width - declared value, no scale in the Foundation */
40
+ --al-menu-width: 200px;
41
+
42
+ /* typography - one style becomes four vars */
43
+ --al-menu-font-size: var(--al-font-size-sm);
44
+ --al-menu-line-height: var(--al-line-height-sm);
45
+ --al-menu-font-weight: 400;
46
+ --al-menu-tracking: 0em;
47
+ }
48
+
49
+ /* AL Design System - Menu
50
+ *
51
+ * Written by hand. Depends on al-foundation.css, the Icon Button (trigger),
52
+ * the Icon, the Divider (separator) and al-menu-tokens.css. Behavior:
53
+ * menu.js.
54
+ *
55
+ * No value here is literal: color, space, radius, border, shadow, ring, width
56
+ * and type come from var(--al-menu-*). The check.py next to it rejects the
57
+ * file if any escapes.
58
+ *
59
+ * MARKUP (WAI-ARIA menu button)
60
+ *
61
+ * <div class="al-menu">
62
+ * <button class="al-icon-btn al-icon-btn--ghost al-icon-btn--sm"
63
+ * aria-label="More actions" aria-haspopup="menu"
64
+ * aria-expanded="false" aria-controls="m1">...</button>
65
+ * <ul class="al-menu__list" role="menu" id="m1" aria-label="More actions" hidden>
66
+ * <li role="none">
67
+ * <button class="al-menu__item" role="menuitem" tabindex="-1"
68
+ * aria-keyshortcuts="Meta+E">
69
+ * <svg class="al-icon al-icon--16" aria-hidden="true">...</svg>
70
+ * <span class="al-menu__label">Edit</span>
71
+ * <kbd class="al-menu__shortcut" aria-hidden="true">⌘E</kbd>
72
+ * </button>
73
+ * </li>
74
+ * <li class="al-divider" role="separator"></li>
75
+ * <li role="none">
76
+ * <button class="al-menu__item al-menu__item--danger" role="menuitem"
77
+ * tabindex="-1">...Delete...</button>
78
+ * </li>
79
+ * </ul>
80
+ * </div>
81
+ *
82
+ * Disabled: aria-disabled="true" on the item, never `disabled` - the item
83
+ * stays focusable and is announced as unavailable (rule A=a, APG).
84
+ * The shortcut is aria-hidden: aria-keyshortcuts already announces it, and
85
+ * the product implements the key (rule 11).
86
+ *
87
+ * STATES
88
+ *
89
+ * hover :hover, not while focused - the ring on bg-hover-raised would
90
+ * drop to 2.88:1 (rule 25)
91
+ * pressed :active
92
+ * focus :focus-visible, inset ring (an outer ring hits the neighbours)
93
+ * danger hover bg-danger-subtle, pressed bg-danger with white ink (rule 16)
94
+ *
95
+ * The item has no height: 36 = padding-y x 2 + line height.
96
+ *
97
+ * MOTION
98
+ *
99
+ * Same fade as the Breadcrumb menu: `motion-duration-feedback`, ease-out
100
+ * on opening, ease-in on closing. None with prefers-reduced-motion.
101
+ */
102
+
103
+ .al-menu {
104
+ position: relative;
105
+ display: inline-block;
106
+ }
107
+
108
+ /* ------------------------------------------------------------------ panel */
109
+ /* Aligned to the trigger's start edge, `offset` below it - as in Figma. */
110
+ .al-menu__list {
111
+ position: absolute;
112
+ top: calc(100% + var(--al-menu-offset));
113
+ left: 0;
114
+ z-index: 1;
115
+ display: flex;
116
+ inline-size: var(--al-menu-width);
117
+ box-sizing: border-box;
118
+ flex-direction: column;
119
+ gap: var(--al-menu-gap);
120
+ margin: 0;
121
+ padding: var(--al-menu-padding);
122
+ list-style: none;
123
+ border: var(--al-menu-border-width) solid var(--al-menu-border);
124
+ border-radius: var(--al-menu-radius);
125
+ background-color: var(--al-menu-bg);
126
+ box-shadow: var(--al-menu-shadow);
127
+ transition:
128
+ opacity var(--al-motion-duration-feedback) var(--al-motion-easing-exit),
129
+ display var(--al-motion-duration-feedback) var(--al-motion-easing-exit) allow-discrete;
130
+ }
131
+
132
+ .al-menu__list[hidden] {
133
+ display: none;
134
+ opacity: 0;
135
+ }
136
+
137
+ .al-menu__list:not([hidden]) {
138
+ transition-timing-function: var(--al-motion-easing-enter);
139
+ }
140
+
141
+ @starting-style {
142
+ .al-menu__list:not([hidden]) {
143
+ opacity: 0;
144
+ }
145
+ }
146
+
147
+ /* ------------------------------------------------------------------- item */
148
+ .al-menu__item {
149
+ --al-icon-box: var(--al-menu-item-icon-size);
150
+
151
+ display: flex;
152
+ inline-size: 100%;
153
+ box-sizing: border-box;
154
+ align-items: center;
155
+ gap: var(--al-menu-item-gap);
156
+ margin: 0;
157
+ padding: var(--al-menu-item-padding-y) var(--al-menu-item-padding-x);
158
+ border: 0;
159
+ border-radius: var(--al-menu-item-radius);
160
+ background-color: transparent;
161
+ color: var(--al-menu-item-meta);
162
+ font-family: inherit;
163
+ font-size: var(--al-menu-font-size);
164
+ line-height: var(--al-menu-line-height);
165
+ font-weight: var(--al-menu-font-weight);
166
+ letter-spacing: var(--al-menu-tracking);
167
+ text-align: start;
168
+ cursor: pointer;
169
+ transition: background-color var(--al-motion-duration-feedback) var(--al-motion-easing-exit);
170
+ }
171
+
172
+ .al-menu__label {
173
+ flex: 1 1 auto;
174
+ min-inline-size: 0;
175
+ overflow: hidden;
176
+ color: var(--al-menu-item-label);
177
+ white-space: nowrap;
178
+ text-overflow: ellipsis;
179
+ }
180
+
181
+ .al-menu__shortcut {
182
+ flex: none;
183
+ font: inherit;
184
+ }
185
+
186
+ /* hover and pressed: icon and shortcut darken with the label */
187
+ .al-menu__item:hover:not(:focus-visible):not([aria-disabled="true"]) {
188
+ background-color: var(--al-menu-item-bg-hover);
189
+ color: var(--al-menu-item-meta-hover);
190
+ transition-timing-function: var(--al-motion-easing-enter);
191
+ }
192
+
193
+ .al-menu__item:active:not([aria-disabled="true"]) {
194
+ background-color: var(--al-menu-item-bg-active);
195
+ color: var(--al-menu-item-meta-hover);
196
+ }
197
+
198
+ .al-menu__item:focus-visible {
199
+ outline: none;
200
+ box-shadow: inset 0 0 0 var(--al-menu-ring-width) var(--al-menu-ring);
201
+ }
202
+
203
+ /* ----------------------------------------------------------------- danger */
204
+ .al-menu__item--danger,
205
+ .al-menu__item--danger .al-menu__label {
206
+ color: var(--al-menu-danger-label);
207
+ }
208
+
209
+ .al-menu__item--danger:hover:not(:focus-visible):not([aria-disabled="true"]) {
210
+ background-color: var(--al-menu-danger-bg-hover);
211
+ color: var(--al-menu-danger-label);
212
+ }
213
+
214
+ .al-menu__item--danger:active:not([aria-disabled="true"]) {
215
+ background-color: var(--al-menu-danger-bg-active);
216
+ }
217
+
218
+ .al-menu__item--danger:active:not([aria-disabled="true"]),
219
+ .al-menu__item--danger:active:not([aria-disabled="true"]) .al-menu__label {
220
+ color: var(--al-menu-danger-label-active);
221
+ }
222
+
223
+ /* --------------------------------------------------------------- disabled */
224
+ /* Below AA on purpose (WCAG 1.4.3 exempts disabled controls, rule 18). */
225
+ .al-menu__item[aria-disabled="true"],
226
+ .al-menu__item[aria-disabled="true"] .al-menu__label {
227
+ color: var(--al-menu-item-label-disabled);
228
+ cursor: not-allowed;
229
+ }
230
+
231
+ @media (prefers-reduced-motion: reduce) {
232
+ .al-menu__list,
233
+ .al-menu__item {
234
+ transition: none;
235
+ }
236
+ }
package/dist/components/menu.js ADDED
@@ -0,0 +1,111 @@
1
+ /* AL Design System - Menu
2
+ *
3
+ * W3C "menu button" pattern with an actions menu (role="menu"), unlike the
4
+ * Breadcrumb `…`, which is a disclosure of links:
5
+ * - Enter, Space or Down on the trigger open on the first item; Up opens
6
+ * on the last (rule 22);
7
+ * - inside, Up/Down move with wrap, Home/End go to the ends; disabled
8
+ * items (aria-disabled) are stops too (rule A=a);
9
+ * - Esc closes and focus goes back to the trigger; Tab closes (rule 23);
10
+ * - choosing an enabled item closes and returns focus to the trigger,
11
+ * unless the action opened a dialog that took focus (rule 24);
12
+ * - closes on a click outside.
13
+ * Choosing an item fires the button's normal click; the product listens to it.
14
+ *
15
+ * Usage:
16
+ * <script src="menu.js"></script> -> binds by itself when the page loads
17
+ * alMenu.init(container) -> binds content inserted later
18
+ * Binding the same trigger twice duplicates nothing.
19
+ */
20
+ (function () {
21
+ 'use strict';
22
+
23
+ function bind(button) {
24
+ if (button.hasAttribute('data-al-menu')) return;
25
+ var list = document.getElementById(button.getAttribute('aria-controls'));
26
+ if (!list) return;
27
+ button.setAttribute('data-al-menu', '');
28
+ var wrap = button.parentNode;
29
+
30
+ function items() {
31
+ return [].slice.call(list.querySelectorAll('[role="menuitem"]'));
32
+ }
33
+
34
+ function isOpen() { return button.getAttribute('aria-expanded') === 'true'; }
35
+
36
+ function set(open) {
37
+ button.setAttribute('aria-expanded', open ? 'true' : 'false');
38
+ list.hidden = !open;
39
+ }
40
+
41
+ function open(at) {
42
+ set(true);
43
+ var all = items();
44
+ if (all.length) all[at === 'last' ? all.length - 1 : 0].focus();
45
+ }
46
+
47
+ function close(refocus) {
48
+ set(false);
49
+ if (refocus) button.focus();
50
+ }
51
+
52
+ set(isOpen()); // markup and state always agree
53
+
54
+ button.addEventListener('click', function () {
55
+ if (isOpen()) close(false); else open('first');
56
+ });
57
+
58
+ button.addEventListener('keydown', function (e) {
59
+ if (e.key === 'ArrowDown') { e.preventDefault(); open('first'); }
60
+ else if (e.key === 'ArrowUp') { e.preventDefault(); open('last'); }
61
+ });
62
+
63
+ list.addEventListener('keydown', function (e) {
64
+ var all = items();
65
+ var i = all.indexOf(document.activeElement);
66
+ var next = null;
67
+ if (e.key === 'ArrowDown') next = all[(i + 1) % all.length];
68
+ else if (e.key === 'ArrowUp') next = all[(i - 1 + all.length) % all.length];
69
+ else if (e.key === 'Home') next = all[0];
70
+ else if (e.key === 'End') next = all[all.length - 1];
71
+ else if (e.key === 'Escape') { e.preventDefault(); close(true); return; }
72
+ else if (e.key === 'Tab') { close(false); return; }
73
+ if (next) { e.preventDefault(); next.focus(); }
74
+ });
75
+
76
+ // capture: runs before any handler the product put on the item itself
77
+ list.addEventListener('click', function (e) {
78
+ var item = e.target.closest('[role="menuitem"]');
79
+ if (item && item.getAttribute('aria-disabled') === 'true') {
80
+ e.preventDefault();
81
+ e.stopPropagation();
82
+ }
83
+ }, true);
84
+
85
+ list.addEventListener('click', function (e) {
86
+ var item = e.target.closest('[role="menuitem"]');
87
+ if (!item) return;
88
+ // after the product's handlers: if one opened a dialog, focus stays there
89
+ setTimeout(function () {
90
+ var stay = document.activeElement && document.activeElement.closest('dialog[open]');
91
+ close(!stay);
92
+ }, 0);
93
+ });
94
+
95
+ document.addEventListener('pointerdown', function (e) {
96
+ if (isOpen() && !wrap.contains(e.target)) close(false);
97
+ });
98
+ }
99
+
100
+ function init(root) {
101
+ [].forEach.call((root || document).querySelectorAll('[aria-haspopup="menu"][aria-controls]'), bind);
102
+ }
103
+
104
+ window.alMenu = { init: init };
105
+
106
+ if (document.readyState === 'loading') {
107
+ document.addEventListener('DOMContentLoaded', function () { init(); });
108
+ } else {
109
+ init();
110
+ }
111
+ })();
package/dist/components/stepper.css ADDED
@@ -0,0 +1,264 @@
1
+ /* AL Design System - Stepper tokens
2
+ * GENERATED by src/components/stepper/tokens.py. Do not edit by hand.
3
+ *
4
+ * Every color is a semantic the theme switches on :root.
5
+ */
6
+
7
+ :root {
8
+ /* color */
9
+ --al-stepper-label: var(--al-text-primary);
10
+ --al-stepper-label-upcoming: var(--al-text-secondary);
11
+ --al-stepper-description: var(--al-text-secondary);
12
+ --al-stepper-completed-bg: var(--al-bg-brand-subtle);
13
+ --al-stepper-completed-border: var(--al-border-brand);
14
+ --al-stepper-completed-icon: var(--al-text-brand);
15
+ --al-stepper-current-bg: var(--al-bg-brand);
16
+ --al-stepper-current-number: var(--al-text-on-brand);
17
+ --al-stepper-upcoming-bg: var(--al-bg-surface);
18
+ --al-stepper-upcoming-border: var(--al-border-strong);
19
+ --al-stepper-upcoming-number: var(--al-text-secondary);
20
+ --al-stepper-connector: var(--al-border-default);
21
+ --al-stepper-connector-done: var(--al-border-brand);
22
+
23
+ /* geometry */
24
+ --al-stepper-indicator-size: var(--al-space-32);
25
+ --al-stepper-indicator-radius: var(--al-radius-full);
26
+ --al-stepper-indicator-border-width: var(--al-border-width-1);
27
+ --al-stepper-icon-size: var(--al-icon-size-16);
28
+ --al-stepper-connector-thickness: var(--al-border-width-1);
29
+ --al-stepper-text-gap: var(--al-space-2);
30
+ --al-stepper-horizontal-gap: var(--al-space-8);
31
+ --al-stepper-horizontal-text-padding: var(--al-space-8);
32
+ --al-stepper-vertical-gap: var(--al-space-12);
33
+ --al-stepper-vertical-rail-gap: var(--al-space-4);
34
+ --al-stepper-vertical-step-gap: var(--al-space-24);
35
+
36
+ /* type - title and number like label-md, description like body-sm */
37
+ --al-stepper-font-size: var(--al-font-size-sm);
38
+ --al-stepper-line-height: var(--al-line-height-sm);
39
+ --al-stepper-font-weight: var(--al-font-weight-medium);
40
+ --al-stepper-description-font-size: var(--al-font-size-sm);
41
+ --al-stepper-description-line-height: var(--al-line-height-sm);
42
+ --al-stepper-description-font-weight: var(--al-font-weight-regular);
43
+ }
44
+
45
+ /* AL Design System - Stepper
46
+ *
47
+ * Depends on: al-foundation.css, al-stepper-tokens.css, al-icon-tokens.css + icon.css
48
+ *
49
+ * .al-stepper Horizontal - title under the circle, one line
50
+ * .al-stepper--vertical Vertical - rail on the left, text on the right
51
+ *
52
+ * Markup (usage rules 17-19): an <ol> inside <nav aria-label="Progress">.
53
+ * Status is a class on the step; the current one also carries
54
+ * aria-current="step", and that attribute is what styles it, so the look can
55
+ * never disagree with what is announced. Each step spells its status out in
56
+ * hidden text - the check and the color say nothing to a screen reader.
57
+ *
58
+ * <nav aria-label="Progress">
59
+ * <ol class="al-stepper">
60
+ * <li class="al-stepper__step al-stepper__step--completed">
61
+ * <span class="al-stepper__indicator">
62
+ * <svg class="al-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">…check…</svg>
63
+ * </span>
64
+ * <span class="al-stepper__text">
65
+ * <span class="al-stepper__label">Account</span>
66
+ * <span class="al-stepper__status">completed</span>
67
+ * <span class="al-stepper__description">Optional description</span>
68
+ * </span>
69
+ * </li>
70
+ * <li class="al-stepper__step" aria-current="step">
71
+ * <span class="al-stepper__indicator" aria-hidden="true">2</span> …
72
+ * </li>
73
+ * <li class="al-stepper__step"> … upcoming … </li>
74
+ * </ol>
75
+ * </nav>
76
+ *
77
+ * NOT CLICKABLE (rule 24): no hover, no focus, no link. Moving between steps
78
+ * is the form's Back / Continue.
79
+ *
80
+ * ONE CONTINUOUS LINE (rule 15): each horizontal step draws half a line on
81
+ * each side of its circle (::before / ::after) and the steps touch, so the
82
+ * halves join. The line before a step is brand when the step is completed or
83
+ * current; the line after, only when completed. The outer halves stay
84
+ * unpainted - they keep the circle centered over the title.
85
+ *
86
+ * THE BORDER IS ALWAYS THERE: the current step paints it in its own fill, so
87
+ * the circle never changes size between states.
88
+ *
89
+ * NO TOKEN, ON PURPOSE: the vertical text drops by (circle - line) / 2 so the
90
+ * title's first line centers on the circle.
91
+ */
92
+
93
+ .al-stepper {
94
+ display: flex;
95
+ margin: 0;
96
+ padding: 0;
97
+ list-style: none;
98
+ font-family: var(--al-font-sans);
99
+ }
100
+
101
+ /* ---------------------------------------------------------- horizontal */
102
+ .al-stepper__step {
103
+ display: grid;
104
+ flex: 1 1 0;
105
+ grid-template-columns: 1fr var(--al-stepper-indicator-size) 1fr;
106
+ align-items: center;
107
+ align-content: start;
108
+ row-gap: var(--al-stepper-horizontal-gap);
109
+ min-inline-size: 0;
110
+ }
111
+
112
+ .al-stepper__step::before,
113
+ .al-stepper__step::after {
114
+ content: '';
115
+ grid-row: 1;
116
+ block-size: var(--al-stepper-connector-thickness);
117
+ background-color: var(--al-stepper-connector);
118
+ }
119
+
120
+ .al-stepper__step::before { grid-column: 1; }
121
+ .al-stepper__step::after { grid-column: 3; }
122
+
123
+ .al-stepper__step--completed::before,
124
+ .al-stepper__step--completed::after,
125
+ .al-stepper__step[aria-current='step']::before {
126
+ background-color: var(--al-stepper-connector-done);
127
+ }
128
+
129
+ .al-stepper__step:first-child::before,
130
+ .al-stepper__step:last-child::after {
131
+ background-color: transparent;
132
+ }
133
+
134
+ .al-stepper__indicator {
135
+ grid-row: 1;
136
+ grid-column: 2;
137
+ }
138
+
139
+ .al-stepper__text {
140
+ grid-row: 2;
141
+ grid-column: 1 / -1;
142
+ padding-inline: var(--al-stepper-horizontal-text-padding);
143
+ text-align: center;
144
+ }
145
+
146
+ /* ------------------------------------------------------------ vertical */
147
+ .al-stepper--vertical {
148
+ flex-direction: column;
149
+ }
150
+
151
+ .al-stepper--vertical .al-stepper__step {
152
+ flex: none;
153
+ grid-template-columns: var(--al-stepper-indicator-size) 1fr;
154
+ grid-template-rows: auto 1fr;
155
+ align-items: start;
156
+ column-gap: var(--al-stepper-vertical-gap);
157
+ row-gap: 0;
158
+ }
159
+
160
+ .al-stepper--vertical .al-stepper__step::before {
161
+ display: none;
162
+ }
163
+
164
+ .al-stepper--vertical .al-stepper__step::after {
165
+ grid-row: 2;
166
+ grid-column: 1;
167
+ justify-self: center;
168
+ align-self: stretch;
169
+ inline-size: var(--al-stepper-connector-thickness);
170
+ block-size: auto;
171
+ margin-block: var(--al-stepper-vertical-rail-gap);
172
+ }
173
+
174
+ .al-stepper--vertical .al-stepper__step:last-child::after {
175
+ display: none;
176
+ }
177
+
178
+ .al-stepper--vertical .al-stepper__indicator {
179
+ grid-column: 1;
180
+ }
181
+
182
+ .al-stepper--vertical .al-stepper__text {
183
+ grid-row: 1 / span 2;
184
+ grid-column: 2;
185
+ padding-block: calc((var(--al-stepper-indicator-size) - var(--al-stepper-line-height)) / 2)
186
+ var(--al-stepper-vertical-step-gap);
187
+ padding-inline: 0;
188
+ text-align: start;
189
+ }
190
+
191
+ .al-stepper--vertical .al-stepper__step:last-child .al-stepper__text {
192
+ padding-block-end: 0;
193
+ }
194
+
195
+ /* ----------------------------------------------------------- indicator */
196
+ .al-stepper__indicator {
197
+ display: inline-flex;
198
+ align-items: center;
199
+ justify-content: center;
200
+ box-sizing: border-box;
201
+ inline-size: var(--al-stepper-indicator-size);
202
+ block-size: var(--al-stepper-indicator-size);
203
+ border: var(--al-stepper-indicator-border-width) solid var(--al-stepper-upcoming-border);
204
+ border-radius: var(--al-stepper-indicator-radius);
205
+ background-color: var(--al-stepper-upcoming-bg);
206
+ color: var(--al-stepper-upcoming-number);
207
+ font-size: var(--al-stepper-font-size);
208
+ line-height: var(--al-stepper-line-height);
209
+ font-weight: var(--al-stepper-font-weight);
210
+ font-variant-numeric: tabular-nums;
211
+ }
212
+
213
+ .al-stepper__indicator .al-icon {
214
+ --al-icon-box: var(--al-stepper-icon-size);
215
+ }
216
+
217
+ .al-stepper__step--completed .al-stepper__indicator {
218
+ border-color: var(--al-stepper-completed-border);
219
+ background-color: var(--al-stepper-completed-bg);
220
+ color: var(--al-stepper-completed-icon);
221
+ }
222
+
223
+ .al-stepper__step[aria-current='step'] .al-stepper__indicator {
224
+ border-color: var(--al-stepper-current-bg);
225
+ background-color: var(--al-stepper-current-bg);
226
+ color: var(--al-stepper-current-number);
227
+ }
228
+
229
+ /* ---------------------------------------------------------------- text */
230
+ .al-stepper__text {
231
+ display: flex;
232
+ flex-direction: column;
233
+ gap: var(--al-stepper-text-gap);
234
+ }
235
+
236
+ .al-stepper__label {
237
+ font-size: var(--al-stepper-font-size);
238
+ line-height: var(--al-stepper-line-height);
239
+ font-weight: var(--al-stepper-font-weight);
240
+ color: var(--al-stepper-label-upcoming);
241
+ }
242
+
243
+ .al-stepper__step--completed .al-stepper__label,
244
+ .al-stepper__step[aria-current='step'] .al-stepper__label {
245
+ color: var(--al-stepper-label);
246
+ }
247
+
248
+ .al-stepper__description {
249
+ font-size: var(--al-stepper-description-font-size);
250
+ line-height: var(--al-stepper-description-line-height);
251
+ font-weight: var(--al-stepper-description-font-weight);
252
+ color: var(--al-stepper-description);
253
+ }
254
+
255
+ /* Read, never seen (rule 19). One border-width is the 1px box the pattern
256
+ needs; clip-path hides it. */
257
+ .al-stepper__status {
258
+ position: absolute;
259
+ inline-size: var(--al-border-width-1);
260
+ block-size: var(--al-border-width-1);
261
+ overflow: hidden;
262
+ clip-path: inset(50%);
263
+ white-space: nowrap;
264
+ }
package/dist/foundation.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /* AL Design System - Foundation
2
- * v1.4.0 - MIT
2
+ * v1.6.0 - MIT
3
3
  * GENERATED by src/foundation/css.py. Do not edit by hand: run the script.
4
4
  */
5
5
 
package/dist/tokens.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "meta": {
3
3
  "name": "AL Design System",
4
- "version": "1.4.0",
4
+ "version": "1.6.0",
5
5
  "license": "MIT",
6
6
  "brandAnchor": "#FC5000",
7
7
  "colorSpace": "OKLCH",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "al-design-system",
3
- "version": "1.4.0",
3
+ "version": "1.6.0",
4
4
  "description": "AL Design System: Foundation and components in plain CSS, from Figma to code.",
5
5
  "license": "MIT",
6
6
  "author": "Guilherme Domingues",