@rotomeca/design-system 1.0.0 → 1.0.1

package/README.md

@@ -35,6 +35,10 @@ import { toast, setTheme } from '@rotomeca/design-system';
 
 Bundle ESM minifié : `out/rotomeca-design-system.js`. Les icônes (SVG `lucide-static`) sont copiées dans `out/icons` au build.
 
+### Éviter le flash au chargement
+
+Chargez le CSS général **avant** le script, et placez le `<script type="module">` dans le `<head>` (avec un `<link rel="modulepreload">`). Tant que les composants ne sont pas définis, le CSS les masque en réservant leur place (rendu visible après 2 s si le JS échoue).
+
 ### Thème
 
 Le thème sombre s'active avec `data-theme="dark"` sur `<html>` (ou via `setTheme('light' | 'dark' | 'system')`).
@@ -60,9 +64,16 @@ Le thème se personnalise uniquement en redéfinissant des propriétés `--ds-*`
 Les tags sont définis dans `src/core/scripts/utils/tags.ts`. Les attributs, slots, `part`, états `:state()` et
 événements de chaque brique sont documentés en TSDoc dans son fichier source.
 
+## Documentation
+
+Le site (un exemple vivant + son code HTML pour chacune des briques, API extraite du TSDoc) est construit avec le design system lui-même et publié sur GitHub Pages par `.github/workflows/docs.yml` à chaque push sur `main`.
+Activer une fois : Settings → Pages → Source « GitHub Actions ». Pour ajouter une brique : `docs/examples/<nom>.html` + entrée dans `docs/site.config.mjs` (le build échoue si une brique n'est pas documentée).
+
 ## Développement
 
 - `pnpm dev` : playground sur http://localhost:5173 (recompilation LESS + live reload), une section par brique
+- `pnpm docs:dev` : site de documentation sur http://localhost:5174 (live reload)
+- `pnpm docs:build` : génère le site de documentation dans `site/` (variable `DOCS_BASE` = préfixe d'URL)
 - `pnpm build` : génère `dist/` et `out/` (JS + CSS + icônes)
 - `pnpm test` : typecheck + lint + build (porte de validation)
 - `pnpm format` / `pnpm format:check` : Prettier
@@ -72,6 +83,6 @@ Les tags sont définis dans `src/core/scripts/utils/tags.ts`. Les attributs, slo
 | Fichier | Minifié | Gzip |
 | --- | --- | --- |
 | `rotomeca-design-system.js` (64 briques) | ≈ 269 ko | ≈ 60 ko |
-| `rotomeca-design-system.css` | ≈ 9,9 ko | ≈ 2,1 ko |
+| `rotomeca-design-system.css` | ≈ 23,3 ko | ≈ 4,2 ko |
 
 Les styles des composants sont embarqués dans le JS (constructed stylesheets partagées).

package/dist/components/atoms/icon/icon.d.ts

@@ -28,6 +28,24 @@ declare function setIconsPath(path: string): void;
  * ```
  */
 declare function registerIcons(icons: Record<string, string>): void;
+/**
+ * Icône SVG, chargée par nom depuis le dossier `icons/` (jeu Lucide) puis mise en cache.
+ *
+ * @remarks
+ * Elle hérite de `currentColor` : sa couleur suit celle du texte. Sans `label`, elle est
+ * décorative (`aria-hidden`).
+ *
+ * | Attribut | Valeurs | Rôle |
+ * | --- | --- | --- |
+ * | `name` | nom Lucide (`leaf`, `house`…) | Icône à afficher. |
+ * | `size` | `sm` · `md` (défaut) · `lg` ou longueur CSS | Taille. |
+ * | `label` | texte | Nom accessible ; absent = décorative. |
+ *
+ * @example
+ * ```html
+ * <rds-icon name="leaf" size="lg" label="Feuille"></rds-icon>
+ * ```
+ */
 declare class RotomecaIcon extends BaseElementInternal {
     #private;
     /** Nom de l'icône enregistrée. */

package/dist/components/atoms/icon/icon.js

@@ -91,6 +91,24 @@ function registerIcons(icons) {
     for (const icon of document.querySelectorAll(TAG_ICON))
         icon.requestUpdate('icons');
 }
+/**
+ * Icône SVG, chargée par nom depuis le dossier `icons/` (jeu Lucide) puis mise en cache.
+ *
+ * @remarks
+ * Elle hérite de `currentColor` : sa couleur suit celle du texte. Sans `label`, elle est
+ * décorative (`aria-hidden`).
+ *
+ * | Attribut | Valeurs | Rôle |
+ * | --- | --- | --- |
+ * | `name` | nom Lucide (`leaf`, `house`…) | Icône à afficher. |
+ * | `size` | `sm` · `md` (défaut) · `lg` ou longueur CSS | Taille. |
+ * | `label` | texte | Nom accessible ; absent = décorative. |
+ *
+ * @example
+ * ```html
+ * <rds-icon name="leaf" size="lg" label="Feuille"></rds-icon>
+ * ```
+ */
 let RotomecaIcon = (() => {
     let _classDecorators = [Define({ tag: TAG_ICON, styles: style })];
     let _classDescriptor;

package/dist/design-system.css

@@ -308,3 +308,652 @@
   background-color: var(--ds-body-background-color, #ffffff);
   color: var(--ds-body-text-color, #2d211b);
 }
+@keyframes rds-undefined-reveal {
+  to {
+    visibility: visible;
+  }
+}
+rds-header:not(:defined) {
+  display: block;
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-footer:not(:defined) {
+  display: block;
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-sidenav:not(:defined) {
+  display: block;
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-table:not(:defined) {
+  display: block;
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-tabs:not(:defined) {
+  display: block;
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-accordion:not(:defined) {
+  display: block;
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-card:not(:defined) {
+  display: block;
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-alert:not(:defined) {
+  display: block;
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-callout:not(:defined) {
+  display: block;
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-quote:not(:defined) {
+  display: block;
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-fieldset:not(:defined) {
+  display: block;
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-breadcrumb:not(:defined) {
+  display: block;
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-pagination:not(:defined) {
+  display: block;
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-stepper:not(:defined) {
+  display: block;
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-button-group:not(:defined) {
+  display: block;
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-progress:not(:defined) {
+  display: block;
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-placeholder:not(:defined) {
+  display: block;
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-picture:not(:defined) {
+  display: block;
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-divider:not(:defined) {
+  display: block;
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-icon:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-button:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-primary-button:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-secondary-button:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-tertiary-button:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-danger-button:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-icon-button:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-link:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-tag:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-badge:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-spinner:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-avatar:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-date:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-flexbox:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-message:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-input:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-input-text:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-input-number:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-input-date:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-input-time:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-input-datetime:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-input-password:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-input-search:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-input-email:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-input-tel:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-input-url:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-input-color:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-input-range:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-textarea:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-select:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-checkbox:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-radio:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-switch:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-segmented-control:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-input-file:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-tooltip:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-helper:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-menu:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-theme-switcher:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-skip-links:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-back-to-top:not(:defined) {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+rds-dialog:not(:defined) {
+  display: none;
+}
+rds-drawer:not(:defined) {
+  display: none;
+}
+rds-toast:not(:defined) {
+  display: none;
+}
+rds-header:not(:defined) {
+  min-height: 4rem;
+}
+rds-header [slot='nav'] {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex-wrap: wrap;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+rds-header [slot='nav'] a {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  min-height: 2.5rem;
+  padding: 0 0.875rem;
+  border-radius: var(--ds-radius-full);
+  font-weight: 600;
+  color: var(--ds-text-default);
+  text-decoration: none;
+  transition: background-color var(--ds-duration-instant) var(--ds-ease-standard);
+}
+rds-header [slot='nav'] a:hover {
+  background: var(--ds-background-action-tertiary-hover);
+}
+rds-header [slot='nav'] a:focus-visible {
+  outline: 3px solid var(--ds-focus-ring-color);
+  outline-offset: 2px;
+}
+rds-header [slot='nav'] a[aria-current='page'] {
+  color: var(--ds-text-action-tertiary);
+  background: var(--ds-background-surface-variant);
+}
+rds-header [slot='brand'] {
+  color: inherit;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+@container (max-width: 48rem) {
+  rds-header [slot='nav'] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  rds-header [slot='nav'] a {
+    border-radius: var(--ds-input-radius);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  rds-header [slot='nav'] a {
+    transition-duration: 1ms;
+  }
+}
+rds-footer h2,
+rds-footer h3,
+rds-footer .rds-footer-title {
+  margin: 0 0 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: var(--ds-text-default);
+}
+rds-footer ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  gap: 0.375rem;
+}
+rds-footer a {
+  color: var(--ds-text-muted);
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  text-underline-offset: 3px;
+  border-radius: 2px;
+  transition: color var(--ds-duration-instant) var(--ds-ease-standard), text-decoration-color var(--ds-duration-short) var(--ds-ease-standard);
+}
+rds-footer a:hover {
+  color: var(--ds-text-default);
+  text-decoration-color: currentcolor;
+}
+rds-footer a:focus-visible {
+  outline: 3px solid var(--ds-focus-ring-color);
+  outline-offset: 2px;
+}
+rds-footer [slot='bottom'] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 1rem;
+}
+@media (prefers-reduced-motion: reduce) {
+  rds-footer a {
+    transition-duration: 1ms;
+  }
+}
+rds-sidenav {
+  display: block;
+  font-size: 0.9375rem;
+}
+rds-sidenav > .rds-sn-title {
+  margin: 0 0 0.5rem;
+  padding: 0 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--ds-text-muted);
+}
+rds-sidenav a,
+rds-sidenav summary {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-height: 2.5rem;
+  padding: 0.375rem 0.75rem;
+  border-radius: var(--ds-radius-full);
+  color: var(--ds-text-default);
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color var(--ds-duration-instant) var(--ds-ease-standard), color var(--ds-duration-instant) var(--ds-ease-standard);
+}
+rds-sidenav a:hover,
+rds-sidenav summary:hover {
+  background: var(--ds-background-action-tertiary-hover);
+}
+rds-sidenav a:focus-visible,
+rds-sidenav summary:focus-visible {
+  outline: 3px solid var(--ds-focus-ring-color);
+  outline-offset: 0;
+}
+rds-sidenav a[aria-current='page'] {
+  font-weight: 700;
+  color: var(--ds-text-action-tertiary);
+  background: var(--ds-background-surface-strong);
+}
+rds-sidenav details {
+  margin: 0;
+}
+rds-sidenav summary {
+  list-style: none;
+  font-weight: 600;
+}
+rds-sidenav summary::-webkit-details-marker {
+  display: none;
+}
+rds-sidenav summary::after {
+  content: '';
+  margin-left: auto;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-right: 2px solid currentcolor;
+  border-bottom: 2px solid currentcolor;
+  transform: rotate(45deg) translateY(-2px);
+  transition: transform var(--ds-duration-medium) var(--ds-ease-standard);
+}
+rds-sidenav details[open] > summary::after {
+  transform: rotate(-135deg) translateY(-2px);
+}
+rds-sidenav details > :not(summary) {
+  margin-left: 1rem;
+}
+rds-sidenav details[open] > :not(summary) {
+  animation: rds-sn-in 250ms var(--ds-ease-emphasized-decelerate);
+}
+rds-sidenav rds-icon {
+  --ds-icon-size: 1.25rem;
+}
+rds-sidenav .rds-sn-list {
+  display: grid;
+  gap: 0.125rem;
+}
+@keyframes rds-sn-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  rds-sidenav a,
+  rds-sidenav summary,
+  rds-sidenav summary::after {
+    transition-duration: 1ms;
+  }
+  rds-sidenav details[open] > :not(summary) {
+    animation: none;
+  }
+}
+rds-breadcrumb {
+  display: block;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--ds-text-muted);
+}
+rds-breadcrumb ol {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+rds-breadcrumb li {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+rds-breadcrumb li > rds-icon {
+  --ds-icon-size: 1rem;
+  color: var(--ds-text-muted);
+}
+rds-breadcrumb a {
+  color: var(--ds-text-muted);
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  text-underline-offset: 3px;
+  border-radius: 2px;
+  transition: color var(--ds-duration-instant) var(--ds-ease-standard), text-decoration-color var(--ds-duration-short) var(--ds-ease-standard);
+}
+rds-breadcrumb a:hover {
+  color: var(--ds-text-default);
+  text-decoration-color: currentcolor;
+}
+rds-breadcrumb a:focus-visible {
+  outline: 3px solid var(--ds-focus-ring-color);
+  outline-offset: 2px;
+}
+rds-breadcrumb [aria-current='page'] {
+  color: var(--ds-text-default);
+  font-weight: 600;
+  text-decoration: none;
+  pointer-events: none;
+}
+rds-breadcrumb .rds-bc-more {
+  font: inherit;
+  color: var(--ds-text-muted);
+  background: none;
+  border: 0;
+  padding: 0 0.25rem;
+  border-radius: var(--ds-radius-xs);
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+rds-breadcrumb .rds-bc-more:focus-visible {
+  outline: 3px solid var(--ds-focus-ring-color);
+}
+rds-breadcrumb li.rds-bc-hidden {
+  display: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  rds-breadcrumb a {
+    transition-duration: 1ms;
+  }
+}
+rds-table {
+  display: block;
+  max-width: 100%;
+  overflow-x: auto;
+  border-radius: var(--ds-radius-lg);
+  box-shadow: inset 0 0 0 1px var(--ds-border-subtle);
+  background: var(--ds-background-surface);
+}
+rds-table:focus-visible {
+  outline: 3px solid var(--ds-focus-ring-color);
+  outline-offset: 2px;
+}
+rds-table table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: 0.9375rem;
+  line-height: 1.375rem;
+  color: var(--ds-text-default);
+}
+rds-table caption {
+  caption-side: top;
+  text-align: left;
+  padding: 1rem 1rem 0.5rem;
+  font-family: var(--ds-font-display);
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+rds-table th,
+rds-table td {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  vertical-align: middle;
+  border-bottom: 1px solid var(--ds-border-subtle);
+}
+rds-table thead th {
+  font-size: 0.8125rem;
+  font-weight: 700;
+  color: var(--ds-text-muted);
+  background: var(--ds-background-surface-variant);
+  white-space: nowrap;
+}
+rds-table[sticky] {
+  max-height: var(--rds-table-max, 24rem);
+}
+rds-table[sticky] thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+rds-table tbody tr:last-child > * {
+  border-bottom: 0;
+}
+rds-table tfoot td,
+rds-table tfoot th {
+  font-weight: 700;
+  border-top: 1px solid var(--ds-border-strong);
+  border-bottom: 0;
+}
+rds-table[striped] tbody tr:nth-child(even) > * {
+  background: color-mix(in srgb, var(--ds-background-surface-variant) 60%, transparent);
+}
+rds-table[hover] tbody tr {
+  transition: background-color var(--ds-duration-instant) var(--ds-ease-standard);
+}
+rds-table[hover] tbody tr:hover > * {
+  background: var(--ds-background-option-hover);
+}
+rds-table[bordered] th + th,
+rds-table[bordered] td + td,
+rds-table[bordered] th + td,
+rds-table[bordered] td + th {
+  border-left: 1px solid var(--ds-border-subtle);
+}
+rds-table[compact] th,
+rds-table[compact] td {
+  padding: 0.375rem 0.75rem;
+}
+rds-table .rds-num,
+rds-table [data-type='number'] {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+rds-table tr[aria-selected='true'] > * {
+  background: var(--ds-background-option-selected);
+}
+rds-table .rds-sort {
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  cursor: pointer;
+  border-radius: 4px;
+}
+rds-table .rds-sort:hover {
+  color: var(--ds-text-default);
+}
+rds-table .rds-sort:focus-visible {
+  outline: 3px solid var(--ds-focus-ring-color);
+  outline-offset: 2px;
+}
+rds-table .rds-sort rds-icon {
+  --ds-icon-size: 1rem;
+  opacity: 0.5;
+  transition: transform var(--ds-duration-medium) var(--ds-ease-standard), opacity var(--ds-duration-instant) var(--ds-ease-standard);
+}
+rds-table th[aria-sort] .rds-sort rds-icon {
+  opacity: 1;
+  color: var(--ds-text-action-tertiary);
+}
+rds-table th[aria-sort='descending'] .rds-sort rds-icon {
+  transform: rotate(180deg);
+}
+@media (prefers-reduced-motion: reduce) {
+  rds-table[hover] tbody tr,
+  rds-table .rds-sort rds-icon {
+    transition-duration: 1ms;
+  }
+}

package/out/rotomeca-design-system.css

@@ -1 +1 @@
-:root,[data-theme=light]{color-scheme:light;--ds-body-background-color: #ffffff;--ds-body-text-color: #2d211b;--ds-background-surface: #ffffff;--ds-background-surface-variant: #f5ebdd;--ds-background-surface-strong: #e7d5be;--ds-background-overlay: #ffffff;--ds-text-default: #2d211b;--ds-text-muted: #5c4337;--ds-border-subtle: #e7d5be;--ds-border-strong: #8b5e3c;--ds-focus-ring-color: #2d211b;--ds-background-action-primary: #6b4226;--ds-background-action-primary-hover: #8b5e3c;--ds-background-action-primary-active: #3e2723;--ds-text-action-primary: #ffffff;--ds-background-action-secondary: #ffffff;--ds-background-action-secondary-hover: #f5ebdd;--ds-background-action-secondary-active: #e7d5be;--ds-text-action-secondary: #b85c38;--ds-text-action-secondary-button: #6b4226;--ds-text-action-tertiary: #6b4226;--ds-background-action-tertiary-hover: #f5ebdd;--ds-background-action-tertiary-active: #e7d5be;--ds-background-action-warning: #e8a317;--ds-background-action-warning-hover: #f0b73e;--ds-background-action-warning-active: #c98a0b;--ds-text-action-warning: #2d211b;--ds-background-action-danger: #b3261e;--ds-background-action-danger-hover: #c9372c;--ds-background-action-danger-active: #8c1d18;--ds-text-action-danger: #ffffff;--ds-background-action-success: #2e7d32;--ds-background-action-success-hover: #276b2b;--ds-background-action-success-active: #1b5e20;--ds-text-action-success: #ffffff;--ds-text-success: #2e7d32;--ds-text-warning: #8a5a00;--ds-text-danger: #b3261e;--ds-date-color-invalid: var(--ds-text-danger);--ds-input-background: #f5ebdd;--ds-input-text: #2d211b;--ds-input-hint: #5c4337;--ds-input-border: #8b5e3c;--ds-input-ring-1: #6b4226;--ds-input-ring-2: #b85c38;--ds-input-ring-3: #d6a23d;--ds-input-ring-4: #c87552;--ds-input-border-success: #2e7d32;--ds-input-border-error: #b3261e;--ds-control-border: #8b5e3c;--ds-control-checked: #6b4226;--ds-control-checked-hover: #8b5e3c;--ds-control-state-layer: #6b4226;--ds-switch-track: #f5ebdd;--ds-switch-thumb: #8b5e3c;--ds-switch-thumb-checked: #ffffff;--ds-switch-icon-checked: #6b4226;--ds-background-option-hover: #f5ebdd;--ds-background-option-selected: #e7d5be;--ds-text-link: #6b4226;--ds-text-link-hover: #3e2723;--ds-text-link-visited: #7a3545;--ds-background-inverse: #2d211b;--ds-text-inverse: #f5ebdd;--ds-text-action-inverse: #e0b563;--ds-background-scrim: rgba(27, 22, 19, .5);--ds-background-placeholder: #e7d5be;--ds-background-placeholder-shine: #f5ebdd;--ds-background-tone-neutral: #e7d5be;--ds-text-tone-neutral: #2d211b;--ds-background-tone-neutral-bold: #2d211b;--ds-text-tone-neutral-bold: #f5ebdd;--ds-background-tone-brand: #f5ebdd;--ds-text-tone-brand: #6b4226;--ds-background-tone-brand-bold: #6b4226;--ds-text-tone-brand-bold: #ffffff;--ds-background-tone-accent: #f6e7c4;--ds-text-tone-accent: #7a5410;--ds-background-tone-accent-bold: #d6a23d;--ds-text-tone-accent-bold: #2d211b;--ds-background-tone-success: #e2eedf;--ds-text-tone-success: #1b5e20;--ds-background-tone-success-bold: #2e7d32;--ds-text-tone-success-bold: #ffffff;--ds-background-tone-warning: #fbeccc;--ds-text-tone-warning: #7a4e00;--ds-background-tone-warning-bold: #e8a317;--ds-text-tone-warning-bold: #2d211b;--ds-background-tone-danger: #f7e1df;--ds-text-tone-danger: #8c1d18;--ds-background-tone-danger-bold: #b3261e;--ds-text-tone-danger-bold: #ffffff;--ds-shadow-1: 0 1px 2px rgba(45, 33, 27, .12), 0 1px 3px 1px rgba(45, 33, 27, .08);--ds-shadow-2: 0 2px 6px 2px rgba(45, 33, 27, .1), 0 1px 2px rgba(45, 33, 27, .14);--ds-shadow-3: 0 8px 24px -4px rgba(45, 33, 27, .18), 0 2px 6px rgba(45, 33, 27, .1)}[data-theme=dark]{color-scheme:dark;--ds-body-background-color: #1b1613;--ds-body-text-color: #f5ebdd;--ds-background-surface: #1b1613;--ds-background-surface-variant: #2d211b;--ds-background-surface-strong: #3e2723;--ds-background-overlay: #2d211b;--ds-text-default: #f5ebdd;--ds-text-muted: #c2ab8d;--ds-border-subtle: #3e2723;--ds-border-strong: #9c7a5c;--ds-focus-ring-color: #f5ebdd;--ds-background-action-primary: #c87552;--ds-background-action-primary-hover: #d89477;--ds-background-action-primary-active: #a06851;--ds-text-action-primary: #1b1613;--ds-background-action-secondary: #1b1613;--ds-background-action-secondary-hover: #2d211b;--ds-background-action-secondary-active: #3e2723;--ds-text-action-secondary: #d89477;--ds-text-action-secondary-button: #d89477;--ds-text-action-tertiary: #d89477;--ds-background-action-tertiary-hover: #2d211b;--ds-background-action-tertiary-active: #3e2723;--ds-background-action-warning: #e8a317;--ds-background-action-warning-hover: #f0b73e;--ds-background-action-warning-active: #c98a0b;--ds-text-action-warning: #2d211b;--ds-background-action-danger: #b3261e;--ds-background-action-danger-hover: #c9372c;--ds-background-action-danger-active: #8c1d18;--ds-text-action-danger: #ffffff;--ds-background-action-success: #2e7d32;--ds-background-action-success-hover: #276b2b;--ds-background-action-success-active: #1b5e20;--ds-text-action-success: #ffffff;--ds-text-success: #9ccc9f;--ds-text-warning: #e0b563;--ds-text-danger: #f2b8b5;--ds-date-color-invalid: var(--ds-text-danger);--ds-input-background: #2d211b;--ds-input-text: #f5ebdd;--ds-input-hint: #c2ab8d;--ds-input-border: #9c7a5c;--ds-input-ring-1: #d89477;--ds-input-ring-2: #d6a23d;--ds-input-ring-3: #b85c38;--ds-input-ring-4: #c87552;--ds-input-border-success: #9ccc9f;--ds-input-border-error: #f2b8b5;--ds-control-border: #9c7a5c;--ds-control-checked: #c87552;--ds-control-checked-hover: #d89477;--ds-control-state-layer: #d89477;--ds-switch-track: #2d211b;--ds-switch-thumb: #c2ab8d;--ds-switch-thumb-checked: #1b1613;--ds-switch-icon-checked: #c87552;--ds-background-option-hover: #3e2723;--ds-background-option-selected: #4e352b;--ds-text-link: #d89477;--ds-text-link-hover: #e0b563;--ds-text-link-visited: #e0a3b0;--ds-background-inverse: #f5ebdd;--ds-text-inverse: #2d211b;--ds-text-action-inverse: #6b4226;--ds-background-scrim: rgba(0, 0, 0, .62);--ds-background-placeholder: #3e2723;--ds-background-placeholder-shine: #4e352b;--ds-background-tone-neutral: #3e2723;--ds-text-tone-neutral: #f5ebdd;--ds-background-tone-neutral-bold: #f5ebdd;--ds-text-tone-neutral-bold: #1b1613;--ds-background-tone-brand: #4a2f1f;--ds-text-tone-brand: #d89477;--ds-background-tone-brand-bold: #c87552;--ds-text-tone-brand-bold: #1b1613;--ds-background-tone-accent: #4a3a14;--ds-text-tone-accent: #e0b563;--ds-background-tone-accent-bold: #d6a23d;--ds-text-tone-accent-bold: #1b1613;--ds-background-tone-success: #1e3a20;--ds-text-tone-success: #a5d6a7;--ds-background-tone-success-bold: #9ccc9f;--ds-text-tone-success-bold: #1b1613;--ds-background-tone-warning: #4a3608;--ds-text-tone-warning: #f0b73e;--ds-background-tone-warning-bold: #e8a317;--ds-text-tone-warning-bold: #1b1613;--ds-background-tone-danger: #4d1a17;--ds-text-tone-danger: #f2b8b5;--ds-background-tone-danger-bold: #f2b8b5;--ds-text-tone-danger-bold: #1b1613;--ds-shadow-1: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 3px 1px rgba(0, 0, 0, .3);--ds-shadow-2: 0 2px 6px 2px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .5);--ds-shadow-3: 0 8px 24px -4px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .4)}:root{--ds-space-1: .25rem;--ds-space-1-5: .375rem;--ds-space-2: .5rem;--ds-space-3: .75rem;--ds-space-4: 1rem;--ds-space-6: 1.5rem;--ds-space-8: 2rem;--ds-space-12: 3rem;--ds-radius-xs: .25rem;--ds-button-radius: 5px;--ds-input-radius: .625rem;--ds-radius-lg: 1rem;--ds-radius-xl: 1.75rem;--ds-radius-full: 999px;--ds-duration-instant: .1s;--ds-duration-short: .15s;--ds-duration-medium: .2s;--ds-duration-long: .3s;--ds-duration-loop: 1.5s;--ds-ease-standard: cubic-bezier(.2, 0, 0, 1);--ds-ease-emphasized-decelerate: cubic-bezier(.05, .7, .1, 1);--ds-ease-emphasized-accelerate: cubic-bezier(.3, 0, .8, .15);--ds-opacity-disabled: .55;--ds-opacity-state-hover: .08;--ds-opacity-state-pressed: .12;--ds-z-sticky: 100;--ds-z-overlay: 1000;--ds-z-toast: 1100;--ds-header-max: 80rem;--ds-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;--ds-font-sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--ds-font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;--ds-font-size-display: 3.5rem;--ds-line-height-display: 1.05;--ds-font-size-headline: 2rem;--ds-line-height-headline: 2.5rem;--ds-font-size-title: 1.375rem;--ds-line-height-title: 1.75rem;--ds-font-size-body-lg: 1.125rem;--ds-line-height-body-lg: 1.75rem;--ds-font-size-body: 1rem;--ds-line-height-body: 1.5rem;--ds-font-size-label: .875rem;--ds-line-height-label: 1.25rem;--ds-font-size-helper: .875rem;--ds-line-height-helper: 1.25rem;--ds-font-size-caption: .75rem;--ds-line-height-caption: 1rem;--ds-font-size-code: .875rem;--ds-line-height-code: 1.25rem}.ds-text-display{font-family:var(--ds-font-display);font-size:var(--ds-font-size-display);line-height:var(--ds-line-height-display);font-weight:600;letter-spacing:-.02em}.ds-text-headline{font-family:var(--ds-font-display);font-size:var(--ds-font-size-headline);line-height:var(--ds-line-height-headline);font-weight:600;letter-spacing:-.01em}.ds-text-title{font-family:var(--ds-font-display);font-size:var(--ds-font-size-title);line-height:var(--ds-line-height-title);font-weight:600}.ds-text-body-lg{font-family:var(--ds-font-sans);font-size:var(--ds-font-size-body-lg);line-height:var(--ds-line-height-body-lg);font-weight:400}.ds-text-body{font-family:var(--ds-font-sans);font-size:var(--ds-font-size-body);line-height:var(--ds-line-height-body);font-weight:400}.ds-text-label{font-family:var(--ds-font-sans);font-size:var(--ds-font-size-label);line-height:var(--ds-line-height-label);font-weight:600}.ds-text-helper{font-family:var(--ds-font-sans);font-size:var(--ds-font-size-helper);line-height:var(--ds-line-height-helper);font-weight:400}.ds-text-caption{font-family:var(--ds-font-sans);font-size:var(--ds-font-size-caption);line-height:var(--ds-line-height-caption);font-weight:600;letter-spacing:.01em}.ds-text-code{font-family:var(--ds-font-mono);font-size:var(--ds-font-size-code);line-height:var(--ds-line-height-code);font-weight:400}.body{background-color:var(--ds-body-background-color, #ffffff);color:var(--ds-body-text-color, #2d211b)}
+:root,[data-theme=light]{color-scheme:light;--ds-body-background-color: #ffffff;--ds-body-text-color: #2d211b;--ds-background-surface: #ffffff;--ds-background-surface-variant: #f5ebdd;--ds-background-surface-strong: #e7d5be;--ds-background-overlay: #ffffff;--ds-text-default: #2d211b;--ds-text-muted: #5c4337;--ds-border-subtle: #e7d5be;--ds-border-strong: #8b5e3c;--ds-focus-ring-color: #2d211b;--ds-background-action-primary: #6b4226;--ds-background-action-primary-hover: #8b5e3c;--ds-background-action-primary-active: #3e2723;--ds-text-action-primary: #ffffff;--ds-background-action-secondary: #ffffff;--ds-background-action-secondary-hover: #f5ebdd;--ds-background-action-secondary-active: #e7d5be;--ds-text-action-secondary: #b85c38;--ds-text-action-secondary-button: #6b4226;--ds-text-action-tertiary: #6b4226;--ds-background-action-tertiary-hover: #f5ebdd;--ds-background-action-tertiary-active: #e7d5be;--ds-background-action-warning: #e8a317;--ds-background-action-warning-hover: #f0b73e;--ds-background-action-warning-active: #c98a0b;--ds-text-action-warning: #2d211b;--ds-background-action-danger: #b3261e;--ds-background-action-danger-hover: #c9372c;--ds-background-action-danger-active: #8c1d18;--ds-text-action-danger: #ffffff;--ds-background-action-success: #2e7d32;--ds-background-action-success-hover: #276b2b;--ds-background-action-success-active: #1b5e20;--ds-text-action-success: #ffffff;--ds-text-success: #2e7d32;--ds-text-warning: #8a5a00;--ds-text-danger: #b3261e;--ds-date-color-invalid: var(--ds-text-danger);--ds-input-background: #f5ebdd;--ds-input-text: #2d211b;--ds-input-hint: #5c4337;--ds-input-border: #8b5e3c;--ds-input-ring-1: #6b4226;--ds-input-ring-2: #b85c38;--ds-input-ring-3: #d6a23d;--ds-input-ring-4: #c87552;--ds-input-border-success: #2e7d32;--ds-input-border-error: #b3261e;--ds-control-border: #8b5e3c;--ds-control-checked: #6b4226;--ds-control-checked-hover: #8b5e3c;--ds-control-state-layer: #6b4226;--ds-switch-track: #f5ebdd;--ds-switch-thumb: #8b5e3c;--ds-switch-thumb-checked: #ffffff;--ds-switch-icon-checked: #6b4226;--ds-background-option-hover: #f5ebdd;--ds-background-option-selected: #e7d5be;--ds-text-link: #6b4226;--ds-text-link-hover: #3e2723;--ds-text-link-visited: #7a3545;--ds-background-inverse: #2d211b;--ds-text-inverse: #f5ebdd;--ds-text-action-inverse: #e0b563;--ds-background-scrim: rgba(27, 22, 19, .5);--ds-background-placeholder: #e7d5be;--ds-background-placeholder-shine: #f5ebdd;--ds-background-tone-neutral: #e7d5be;--ds-text-tone-neutral: #2d211b;--ds-background-tone-neutral-bold: #2d211b;--ds-text-tone-neutral-bold: #f5ebdd;--ds-background-tone-brand: #f5ebdd;--ds-text-tone-brand: #6b4226;--ds-background-tone-brand-bold: #6b4226;--ds-text-tone-brand-bold: #ffffff;--ds-background-tone-accent: #f6e7c4;--ds-text-tone-accent: #7a5410;--ds-background-tone-accent-bold: #d6a23d;--ds-text-tone-accent-bold: #2d211b;--ds-background-tone-success: #e2eedf;--ds-text-tone-success: #1b5e20;--ds-background-tone-success-bold: #2e7d32;--ds-text-tone-success-bold: #ffffff;--ds-background-tone-warning: #fbeccc;--ds-text-tone-warning: #7a4e00;--ds-background-tone-warning-bold: #e8a317;--ds-text-tone-warning-bold: #2d211b;--ds-background-tone-danger: #f7e1df;--ds-text-tone-danger: #8c1d18;--ds-background-tone-danger-bold: #b3261e;--ds-text-tone-danger-bold: #ffffff;--ds-shadow-1: 0 1px 2px rgba(45, 33, 27, .12), 0 1px 3px 1px rgba(45, 33, 27, .08);--ds-shadow-2: 0 2px 6px 2px rgba(45, 33, 27, .1), 0 1px 2px rgba(45, 33, 27, .14);--ds-shadow-3: 0 8px 24px -4px rgba(45, 33, 27, .18), 0 2px 6px rgba(45, 33, 27, .1)}[data-theme=dark]{color-scheme:dark;--ds-body-background-color: #1b1613;--ds-body-text-color: #f5ebdd;--ds-background-surface: #1b1613;--ds-background-surface-variant: #2d211b;--ds-background-surface-strong: #3e2723;--ds-background-overlay: #2d211b;--ds-text-default: #f5ebdd;--ds-text-muted: #c2ab8d;--ds-border-subtle: #3e2723;--ds-border-strong: #9c7a5c;--ds-focus-ring-color: #f5ebdd;--ds-background-action-primary: #c87552;--ds-background-action-primary-hover: #d89477;--ds-background-action-primary-active: #a06851;--ds-text-action-primary: #1b1613;--ds-background-action-secondary: #1b1613;--ds-background-action-secondary-hover: #2d211b;--ds-background-action-secondary-active: #3e2723;--ds-text-action-secondary: #d89477;--ds-text-action-secondary-button: #d89477;--ds-text-action-tertiary: #d89477;--ds-background-action-tertiary-hover: #2d211b;--ds-background-action-tertiary-active: #3e2723;--ds-background-action-warning: #e8a317;--ds-background-action-warning-hover: #f0b73e;--ds-background-action-warning-active: #c98a0b;--ds-text-action-warning: #2d211b;--ds-background-action-danger: #b3261e;--ds-background-action-danger-hover: #c9372c;--ds-background-action-danger-active: #8c1d18;--ds-text-action-danger: #ffffff;--ds-background-action-success: #2e7d32;--ds-background-action-success-hover: #276b2b;--ds-background-action-success-active: #1b5e20;--ds-text-action-success: #ffffff;--ds-text-success: #9ccc9f;--ds-text-warning: #e0b563;--ds-text-danger: #f2b8b5;--ds-date-color-invalid: var(--ds-text-danger);--ds-input-background: #2d211b;--ds-input-text: #f5ebdd;--ds-input-hint: #c2ab8d;--ds-input-border: #9c7a5c;--ds-input-ring-1: #d89477;--ds-input-ring-2: #d6a23d;--ds-input-ring-3: #b85c38;--ds-input-ring-4: #c87552;--ds-input-border-success: #9ccc9f;--ds-input-border-error: #f2b8b5;--ds-control-border: #9c7a5c;--ds-control-checked: #c87552;--ds-control-checked-hover: #d89477;--ds-control-state-layer: #d89477;--ds-switch-track: #2d211b;--ds-switch-thumb: #c2ab8d;--ds-switch-thumb-checked: #1b1613;--ds-switch-icon-checked: #c87552;--ds-background-option-hover: #3e2723;--ds-background-option-selected: #4e352b;--ds-text-link: #d89477;--ds-text-link-hover: #e0b563;--ds-text-link-visited: #e0a3b0;--ds-background-inverse: #f5ebdd;--ds-text-inverse: #2d211b;--ds-text-action-inverse: #6b4226;--ds-background-scrim: rgba(0, 0, 0, .62);--ds-background-placeholder: #3e2723;--ds-background-placeholder-shine: #4e352b;--ds-background-tone-neutral: #3e2723;--ds-text-tone-neutral: #f5ebdd;--ds-background-tone-neutral-bold: #f5ebdd;--ds-text-tone-neutral-bold: #1b1613;--ds-background-tone-brand: #4a2f1f;--ds-text-tone-brand: #d89477;--ds-background-tone-brand-bold: #c87552;--ds-text-tone-brand-bold: #1b1613;--ds-background-tone-accent: #4a3a14;--ds-text-tone-accent: #e0b563;--ds-background-tone-accent-bold: #d6a23d;--ds-text-tone-accent-bold: #1b1613;--ds-background-tone-success: #1e3a20;--ds-text-tone-success: #a5d6a7;--ds-background-tone-success-bold: #9ccc9f;--ds-text-tone-success-bold: #1b1613;--ds-background-tone-warning: #4a3608;--ds-text-tone-warning: #f0b73e;--ds-background-tone-warning-bold: #e8a317;--ds-text-tone-warning-bold: #1b1613;--ds-background-tone-danger: #4d1a17;--ds-text-tone-danger: #f2b8b5;--ds-background-tone-danger-bold: #f2b8b5;--ds-text-tone-danger-bold: #1b1613;--ds-shadow-1: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 3px 1px rgba(0, 0, 0, .3);--ds-shadow-2: 0 2px 6px 2px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .5);--ds-shadow-3: 0 8px 24px -4px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .4)}:root{--ds-space-1: .25rem;--ds-space-1-5: .375rem;--ds-space-2: .5rem;--ds-space-3: .75rem;--ds-space-4: 1rem;--ds-space-6: 1.5rem;--ds-space-8: 2rem;--ds-space-12: 3rem;--ds-radius-xs: .25rem;--ds-button-radius: 5px;--ds-input-radius: .625rem;--ds-radius-lg: 1rem;--ds-radius-xl: 1.75rem;--ds-radius-full: 999px;--ds-duration-instant: .1s;--ds-duration-short: .15s;--ds-duration-medium: .2s;--ds-duration-long: .3s;--ds-duration-loop: 1.5s;--ds-ease-standard: cubic-bezier(.2, 0, 0, 1);--ds-ease-emphasized-decelerate: cubic-bezier(.05, .7, .1, 1);--ds-ease-emphasized-accelerate: cubic-bezier(.3, 0, .8, .15);--ds-opacity-disabled: .55;--ds-opacity-state-hover: .08;--ds-opacity-state-pressed: .12;--ds-z-sticky: 100;--ds-z-overlay: 1000;--ds-z-toast: 1100;--ds-header-max: 80rem;--ds-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;--ds-font-sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--ds-font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;--ds-font-size-display: 3.5rem;--ds-line-height-display: 1.05;--ds-font-size-headline: 2rem;--ds-line-height-headline: 2.5rem;--ds-font-size-title: 1.375rem;--ds-line-height-title: 1.75rem;--ds-font-size-body-lg: 1.125rem;--ds-line-height-body-lg: 1.75rem;--ds-font-size-body: 1rem;--ds-line-height-body: 1.5rem;--ds-font-size-label: .875rem;--ds-line-height-label: 1.25rem;--ds-font-size-helper: .875rem;--ds-line-height-helper: 1.25rem;--ds-font-size-caption: .75rem;--ds-line-height-caption: 1rem;--ds-font-size-code: .875rem;--ds-line-height-code: 1.25rem}.ds-text-display{font-family:var(--ds-font-display);font-size:var(--ds-font-size-display);line-height:var(--ds-line-height-display);font-weight:600;letter-spacing:-.02em}.ds-text-headline{font-family:var(--ds-font-display);font-size:var(--ds-font-size-headline);line-height:var(--ds-line-height-headline);font-weight:600;letter-spacing:-.01em}.ds-text-title{font-family:var(--ds-font-display);font-size:var(--ds-font-size-title);line-height:var(--ds-line-height-title);font-weight:600}.ds-text-body-lg{font-family:var(--ds-font-sans);font-size:var(--ds-font-size-body-lg);line-height:var(--ds-line-height-body-lg);font-weight:400}.ds-text-body{font-family:var(--ds-font-sans);font-size:var(--ds-font-size-body);line-height:var(--ds-line-height-body);font-weight:400}.ds-text-label{font-family:var(--ds-font-sans);font-size:var(--ds-font-size-label);line-height:var(--ds-line-height-label);font-weight:600}.ds-text-helper{font-family:var(--ds-font-sans);font-size:var(--ds-font-size-helper);line-height:var(--ds-line-height-helper);font-weight:400}.ds-text-caption{font-family:var(--ds-font-sans);font-size:var(--ds-font-size-caption);line-height:var(--ds-line-height-caption);font-weight:600;letter-spacing:.01em}.ds-text-code{font-family:var(--ds-font-mono);font-size:var(--ds-font-size-code);line-height:var(--ds-line-height-code);font-weight:400}.body{background-color:var(--ds-body-background-color, #ffffff);color:var(--ds-body-text-color, #2d211b)}@keyframes rds-undefined-reveal{to{visibility:visible}}rds-header:not(:defined){display:block;visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-footer:not(:defined){display:block;visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-sidenav:not(:defined){display:block;visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-table:not(:defined){display:block;visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-tabs:not(:defined){display:block;visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-accordion:not(:defined){display:block;visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-card:not(:defined){display:block;visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-alert:not(:defined){display:block;visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-callout:not(:defined){display:block;visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-quote:not(:defined){display:block;visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-fieldset:not(:defined){display:block;visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-breadcrumb:not(:defined){display:block;visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-pagination:not(:defined){display:block;visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-stepper:not(:defined){display:block;visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-button-group:not(:defined){display:block;visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-progress:not(:defined){display:block;visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-placeholder:not(:defined){display:block;visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-picture:not(:defined){display:block;visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-divider:not(:defined){display:block;visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-icon:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-button:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-primary-button:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-secondary-button:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-tertiary-button:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-danger-button:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-icon-button:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-link:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-tag:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-badge:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-spinner:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-avatar:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-date:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-flexbox:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-message:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-input:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-input-text:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-input-number:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-input-date:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-input-time:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-input-datetime:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-input-password:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-input-search:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-input-email:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-input-tel:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-input-url:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-input-color:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-input-range:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-textarea:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-select:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-checkbox:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-radio:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-switch:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-segmented-control:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-input-file:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-tooltip:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-helper:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-menu:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-theme-switcher:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-skip-links:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-back-to-top:not(:defined){visibility:hidden;animation:rds-undefined-reveal 0s 2s forwards}rds-dialog:not(:defined){display:none}rds-drawer:not(:defined){display:none}rds-toast:not(:defined){display:none}rds-header:not(:defined){min-height:4rem}rds-header [slot=nav]{display:flex;align-items:center;gap:.25rem;flex-wrap:wrap;margin:0;padding:0;list-style:none}rds-header [slot=nav] a{position:relative;display:inline-flex;align-items:center;min-height:2.5rem;padding:0 .875rem;border-radius:var(--ds-radius-full);font-weight:600;color:var(--ds-text-default);text-decoration:none;transition:background-color var(--ds-duration-instant) var(--ds-ease-standard)}rds-header [slot=nav] a:hover{background:var(--ds-background-action-tertiary-hover)}rds-header [slot=nav] a:focus-visible{outline:3px solid var(--ds-focus-ring-color);outline-offset:2px}rds-header [slot=nav] a[aria-current=page]{color:var(--ds-text-action-tertiary);background:var(--ds-background-surface-variant)}rds-header [slot=brand]{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem}@container (max-width: 48rem){rds-header [slot=nav]{flex-direction:column;align-items:stretch}rds-header [slot=nav] a{border-radius:var(--ds-input-radius)}}@media(prefers-reduced-motion:reduce){rds-header [slot=nav] a{transition-duration:1ms}}rds-footer h2,rds-footer h3,rds-footer .rds-footer-title{margin:0 0 .5rem;font-size:.875rem;font-weight:700;color:var(--ds-text-default)}rds-footer ul{margin:0;padding:0;list-style:none;display:grid;gap:.375rem}rds-footer a{color:var(--ds-text-muted);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;border-radius:2px;transition:color var(--ds-duration-instant) var(--ds-ease-standard),text-decoration-color var(--ds-duration-short) var(--ds-ease-standard)}rds-footer a:hover{color:var(--ds-text-default);text-decoration-color:currentcolor}rds-footer a:focus-visible{outline:3px solid var(--ds-focus-ring-color);outline-offset:2px}rds-footer [slot=bottom]{display:flex;flex-wrap:wrap;gap:.25rem 1rem}@media(prefers-reduced-motion:reduce){rds-footer a{transition-duration:1ms}}rds-sidenav{display:block;font-size:.9375rem}rds-sidenav>.rds-sn-title{margin:0 0 .5rem;padding:0 .75rem;font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ds-text-muted)}rds-sidenav a,rds-sidenav summary{display:flex;align-items:center;gap:.75rem;min-height:2.5rem;padding:.375rem .75rem;border-radius:var(--ds-radius-full);color:var(--ds-text-default);text-decoration:none;cursor:pointer;transition:background-color var(--ds-duration-instant) var(--ds-ease-standard),color var(--ds-duration-instant) var(--ds-ease-standard)}rds-sidenav a:hover,rds-sidenav summary:hover{background:var(--ds-background-action-tertiary-hover)}rds-sidenav a:focus-visible,rds-sidenav summary:focus-visible{outline:3px solid var(--ds-focus-ring-color);outline-offset:0}rds-sidenav a[aria-current=page]{font-weight:700;color:var(--ds-text-action-tertiary);background:var(--ds-background-surface-strong)}rds-sidenav details{margin:0}rds-sidenav summary{list-style:none;font-weight:600}rds-sidenav summary::-webkit-details-marker{display:none}rds-sidenav summary:after{content:"";margin-left:auto;width:.5rem;height:.5rem;border-right:2px solid currentcolor;border-bottom:2px solid currentcolor;transform:rotate(45deg) translateY(-2px);transition:transform var(--ds-duration-medium) var(--ds-ease-standard)}rds-sidenav details[open]>summary:after{transform:rotate(-135deg) translateY(-2px)}rds-sidenav details>:not(summary){margin-left:1rem}rds-sidenav details[open]>:not(summary){animation:rds-sn-in .25s var(--ds-ease-emphasized-decelerate)}rds-sidenav rds-icon{--ds-icon-size: 1.25rem}rds-sidenav .rds-sn-list{display:grid;gap:.125rem}@keyframes rds-sn-in{0%{opacity:0;transform:translateY(-4px)}}@media(prefers-reduced-motion:reduce){rds-sidenav a,rds-sidenav summary,rds-sidenav summary:after{transition-duration:1ms}rds-sidenav details[open]>:not(summary){animation:none}}rds-breadcrumb{display:block;font-size:.875rem;line-height:1.25rem;color:var(--ds-text-muted)}rds-breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;margin:0;padding:0;list-style:none}rds-breadcrumb li{display:inline-flex;align-items:center;gap:.25rem}rds-breadcrumb li>rds-icon{--ds-icon-size: 1rem;color:var(--ds-text-muted)}rds-breadcrumb a{color:var(--ds-text-muted);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;border-radius:2px;transition:color var(--ds-duration-instant) var(--ds-ease-standard),text-decoration-color var(--ds-duration-short) var(--ds-ease-standard)}rds-breadcrumb a:hover{color:var(--ds-text-default);text-decoration-color:currentcolor}rds-breadcrumb a:focus-visible{outline:3px solid var(--ds-focus-ring-color);outline-offset:2px}rds-breadcrumb [aria-current=page]{color:var(--ds-text-default);font-weight:600;text-decoration:none;pointer-events:none}rds-breadcrumb .rds-bc-more{font:inherit;color:var(--ds-text-muted);background:none;border:0;padding:0 .25rem;border-radius:var(--ds-radius-xs);cursor:pointer;text-decoration:underline;text-underline-offset:3px}rds-breadcrumb .rds-bc-more:focus-visible{outline:3px solid var(--ds-focus-ring-color)}rds-breadcrumb li.rds-bc-hidden{display:none}@media(prefers-reduced-motion:reduce){rds-breadcrumb a{transition-duration:1ms}}rds-table{display:block;max-width:100%;overflow-x:auto;border-radius:var(--ds-radius-lg);box-shadow:inset 0 0 0 1px var(--ds-border-subtle);background:var(--ds-background-surface)}rds-table:focus-visible{outline:3px solid var(--ds-focus-ring-color);outline-offset:2px}rds-table table{width:100%;border-collapse:separate;border-spacing:0;font-size:.9375rem;line-height:1.375rem;color:var(--ds-text-default)}rds-table caption{caption-side:top;text-align:left;padding:1rem 1rem .5rem;font-family:var(--ds-font-display);font-size:1.125rem;font-weight:600}rds-table th,rds-table td{padding:.75rem 1rem;text-align:left;vertical-align:middle;border-bottom:1px solid var(--ds-border-subtle)}rds-table thead th{font-size:.8125rem;font-weight:700;color:var(--ds-text-muted);background:var(--ds-background-surface-variant);white-space:nowrap}rds-table[sticky]{max-height:var(--rds-table-max, 24rem)}rds-table[sticky] thead th{position:sticky;top:0;z-index:1}rds-table tbody tr:last-child>*{border-bottom:0}rds-table tfoot td,rds-table tfoot th{font-weight:700;border-top:1px solid var(--ds-border-strong);border-bottom:0}rds-table[striped] tbody tr:nth-child(2n)>*{background:color-mix(in srgb,var(--ds-background-surface-variant) 60%,transparent)}rds-table[hover] tbody tr{transition:background-color var(--ds-duration-instant) var(--ds-ease-standard)}rds-table[hover] tbody tr:hover>*{background:var(--ds-background-option-hover)}rds-table[bordered] th+th,rds-table[bordered] td+td,rds-table[bordered] th+td,rds-table[bordered] td+th{border-left:1px solid var(--ds-border-subtle)}rds-table[compact] th,rds-table[compact] td{padding:.375rem .75rem}rds-table .rds-num,rds-table [data-type=number]{text-align:right;font-variant-numeric:tabular-nums}rds-table tr[aria-selected=true]>*{background:var(--ds-background-option-selected)}rds-table .rds-sort{all:unset;display:inline-flex;align-items:center;gap:.25rem;cursor:pointer;border-radius:4px}rds-table .rds-sort:hover{color:var(--ds-text-default)}rds-table .rds-sort:focus-visible{outline:3px solid var(--ds-focus-ring-color);outline-offset:2px}rds-table .rds-sort rds-icon{--ds-icon-size: 1rem;opacity:.5;transition:transform var(--ds-duration-medium) var(--ds-ease-standard),opacity var(--ds-duration-instant) var(--ds-ease-standard)}rds-table th[aria-sort] .rds-sort rds-icon{opacity:1;color:var(--ds-text-action-tertiary)}rds-table th[aria-sort=descending] .rds-sort rds-icon{transform:rotate(180deg)}@media(prefers-reduced-motion:reduce){rds-table[hover] tbody tr,rds-table .rds-sort rds-icon{transition-duration:1ms}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rotomeca/design-system",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Design system de Web Components (custom elements, Shadow DOM) en TypeScript + LESS, palette automnale, thèmes clair et sombre.",
   "keywords": [
     "design-system",
@@ -100,6 +100,8 @@
     "build:css:dist": "lessc src/core/styles/design-system.less dist/design-system.css",
     "build:css:out": "esbuild dist/design-system.css --minify --outfile=out/rotomeca-design-system.css",
     "dev": "pnpm run clean && pnpm run test && node scripts/dev.mjs",
-    "build:icons": "node scripts/copy-icons.mjs"
+    "build:icons": "node scripts/copy-icons.mjs",
+    "docs:build": "node scripts/docs.mjs",
+    "docs:dev": "node scripts/docs.mjs --watch"
   }
 }

package/src/core/styles/design-system.less

@@ -4,3 +4,14 @@
   background-color: var(--ds-body-background-color, @white-100);
   color: var(--ds-body-text-color, @ink-100);
 }
+
+// Éléments pas encore définis : pas de flash de contenu non stylé.
+@import './elements/undefined.less';
+
+// Feuilles « light DOM » des composants : disponibles dès le CSS, avant l'exécution du JS
+// (le JS les adopte aussi, en repli, via `adoptGlobalStyle`).
+@import '../../components/organisms/header/header-global.less';
+@import '../../components/organisms/footer/footer-global.less';
+@import '../../components/organisms/sidenav/sidenav.less';
+@import '../../components/molecules/breadcrumb/breadcrumb.less';
+@import '../../components/organisms/table/table.less';

package/src/core/styles/elements/undefined.less

@@ -0,0 +1,57 @@
+// Éléments pas encore définis (le JS n'a pas encore appelé `customElements.define`).
+//
+// Évite le « flash de contenu non stylé » : on réserve la place et on masque le contenu brut, sans
+// animation ; l'élément apparaît d'un coup dès qu'il est défini. Si le JS ne se charge jamais
+// (réseau, erreur), un délai de secours (2 s) rend le contenu visible malgré tout.
+
+// Composants de structure : la boîte garde son rôle de bloc.
+@rds-undefined-block: rds-header, rds-footer, rds-sidenav, rds-table, rds-tabs, rds-accordion, rds-card,
+  rds-alert, rds-callout, rds-quote, rds-fieldset, rds-breadcrumb, rds-pagination, rds-stepper,
+  rds-button-group, rds-progress, rds-placeholder, rds-picture, rds-divider;
+
+// Composants en ligne ou de formulaire : la place est conservée, le contenu est masqué.
+@rds-undefined-inline: rds-icon, rds-button, rds-primary-button, rds-secondary-button,
+  rds-tertiary-button, rds-danger-button, rds-icon-button, rds-link, rds-tag, rds-badge, rds-spinner,
+  rds-avatar, rds-date, rds-flexbox, rds-message, rds-input, rds-input-text, rds-input-number,
+  rds-input-date, rds-input-time, rds-input-datetime, rds-input-password, rds-input-search,
+  rds-input-email, rds-input-tel, rds-input-url, rds-input-color, rds-input-range, rds-textarea,
+  rds-select, rds-checkbox, rds-radio, rds-switch, rds-segmented-control, rds-input-file,
+  rds-tooltip, rds-helper, rds-menu, rds-theme-switcher, rds-skip-links, rds-back-to-top;
+
+// Fermés par défaut : rien à réserver.
+@rds-undefined-closed: rds-dialog, rds-drawer, rds-toast;
+
+@keyframes rds-undefined-reveal {
+  to {
+    visibility: visible;
+  }
+}
+
+.rds-undefined-hide() {
+  visibility: hidden;
+  animation: rds-undefined-reveal 0s 2s forwards;
+}
+
+each(@rds-undefined-block, {
+  @{value}:not(:defined) {
+    display: block;
+    .rds-undefined-hide();
+  }
+});
+
+each(@rds-undefined-inline, {
+  @{value}:not(:defined) {
+    .rds-undefined-hide();
+  }
+});
+
+each(@rds-undefined-closed, {
+  @{value}:not(:defined) {
+    display: none;
+  }
+});
+
+// Hauteur de l'en-tête : évite le saut de mise en page quand il est défini.
+rds-header:not(:defined) {
+  min-height: 4rem;
+}