@cadriciel/ui 0.1.0

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@cadriciel/ui",
+  "version": "0.1.0",
+  "peerDependencies": {
+    "@angular/common": "^21.2.0",
+    "@angular/core": "^21.2.0",
+    "@angular/cdk": "^21.2.0",
+    "@angular/forms": "^21.2.0",
+    "@angular/router": "^21.2.0",
+    "@angular/platform-browser": "^21.2.0",
+    "maplibre-gl": ">=4.0.0",
+    "chart.js": ">=4.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "peerDependenciesMeta": {
+    "maplibre-gl": {
+      "optional": true
+    },
+    "chart.js": {
+      "optional": true
+    }
+  },
+  "description": "Bibliothèque de composants Angular du Cadriciel (CEREMA) — remplacement de PrimeNG : formulaires, table niveau grille, layout responsive, overlays, carte MapLibre, icônes in-house.",
+  "license": "MIT",
+  "author": "CEREMA — Stéphane Zuccatti",
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.cerema.fr/cadriciel/cadriciel-ui.git"
+  },
+  "keywords": [
+    "angular",
+    "components",
+    "ui",
+    "cerema",
+    "cadriciel",
+    "maplibre",
+    "table"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    "./styles/tokens.scss": "./styles/tokens.scss",
+    "./styles/base.scss": "./styles/base.scss",
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/cadriciel-ui.d.ts",
+      "default": "./fesm2022/cadriciel-ui.mjs"
+    }
+  },
+  "module": "fesm2022/cadriciel-ui.mjs",
+  "typings": "types/cadriciel-ui.d.ts",
+  "type": "module"
+}

package/styles/base.scss

@@ -0,0 +1,32 @@
+/* cadriciel-ui — base : reset ciblé + focus + motion. Importé UNE fois (styles.scss du studio). */
+@import '@angular/cdk/overlay-prebuilt.css';
+@import './tokens';
+
+.cad-focus-ring, [class^='cad-'] :where(button, a, [tabindex]):not(.cad-input):focus-visible {
+  outline: 2px solid var(--cad-ring);
+  outline-offset: 1px;
+}
+/* les champs (input/textarea/select) portent leur propre focus (bordure + ring sur la BOÎTE) — jamais d'outline interne */
+[class^='cad-'] :where(input, textarea, select):focus-visible, .cad-input:focus-visible { outline: none; }
+
+@media (prefers-reduced-motion: reduce) {
+  [class^='cad-'], [class*=' cad-'] { transition: none !important; animation: none !important; }
+}
+
+/* Contrôle natif stylé (directive cadInput), utilisable hors cad-field */
+.cad-input {
+  box-sizing: border-box; width: 100%; height: var(--cad-control-h); padding: 0 var(--cad-control-px);
+  font: var(--cad-font-size)/1.3 var(--cad-font); color: var(--cad-fg);
+  background: var(--cad-input-bg); border: 1px solid var(--cad-input-border); border-radius: var(--cad-radius);
+  outline: none; transition: border-color var(--cad-dur) var(--cad-ease), box-shadow var(--cad-dur) var(--cad-ease);
+  &::placeholder { color: var(--cad-fg-muted); }
+  &:focus { border-color: var(--cad-accent); box-shadow: 0 0 0 3px var(--cad-ring); }
+  &.is-invalid { border-color: var(--cad-danger); }
+  &.is-invalid:focus { box-shadow: 0 0 0 3px var(--cad-danger-soft); }
+  &:disabled, &[readonly].is-readonly { background: var(--cad-bg-subtle); color: var(--cad-fg-muted); cursor: not-allowed; }
+  &.size-sm { height: var(--cad-control-h-sm); font-size: var(--cad-font-size-sm); border-radius: var(--cad-radius-sm); }
+  &.size-lg { height: var(--cad-control-h-lg); font-size: var(--cad-font-size-lg); }
+  &.is-mono { font-family: var(--cad-font-mono); font-size: var(--cad-font-size-sm); }
+}
+textarea.cad-input { height: auto; min-height: calc(var(--cad-control-h) * 2); padding: 8px var(--cad-control-px); resize: vertical; line-height: 1.45; }
+select.cad-input { appearance: none; padding-right: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 14px; }

package/styles/tokens.scss

@@ -0,0 +1,98 @@
+/*
+ * cadriciel-ui — tokens (3 couches : primitif → sémantique → composant).
+ * Les tokens sémantiques `--cad-*` sont des ALIAS des variables déjà définies par le studio
+ * (styles.scss : --surface-*, --text-*, --accent-*, --shadow-*), avec repli si absentes.
+ * Le thème est porté par `.theme-dark` sur <html> (mécanique existante) : les composants
+ * ne contiennent AUCUN sélecteur de thème, ils ne lisent que --cad-*.
+ */
+:root {
+  /* ---- primitifs (seulement ce que le studio ne définit pas déjà) ---- */
+  --cad-hue: 217;
+  --cad-radius-sm: 6px;
+  --cad-radius: 8px;
+  --cad-radius-lg: 12px;
+  --cad-radius-pill: 999px;
+  --cad-font-size: 0.8125rem;      /* taille de base du studio */
+  --cad-font-size-sm: 0.75rem;
+  --cad-font-size-lg: 0.9375rem;
+  --cad-line: 1.35;
+  --cad-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --cad-font-mono: 'Fira Code', 'Cascadia Code', 'Source Code Pro', ui-monospace, monospace;
+  --cad-dur: 140ms;
+  --cad-ease: cubic-bezier(.2, .7, .2, 1);
+  --cad-z-overlay: 100002;          /* au-dessus des backdrops PrimeNG (100000) tant qu'ils coexistent */
+  --cad-backdrop: rgba(2, 6, 23, .45);
+
+  /* ---- sémantiques : surfaces ---- */
+  --cad-bg: var(--surface-ground, #ffffff);
+  --cad-bg-subtle: var(--surface-section, #f8fafc);
+  --cad-surface: var(--surface-card, #ffffff);
+  --cad-overlay: var(--surface-overlay, #ffffff);
+  --cad-hover: var(--surface-hover, #f1f5f9);
+  --cad-elevated: var(--bg-elevated, #e2e8f0);
+  --cad-border: var(--surface-border, #e2e8f0);
+  --cad-border-strong: var(--border-light, #cbd5e1);
+
+  /* ---- sémantiques : texte ---- */
+  --cad-fg: var(--text-primary, #1e293b);
+  --cad-fg-secondary: var(--text-secondary, #475569);
+  --cad-fg-muted: var(--text-muted, #94a3b8);
+  --cad-fg-on-accent: #ffffff;
+
+  /* ---- sémantiques : accent + sévérités ---- */
+  /* accent clair recalé pour AA sur blanc (décision à valider SZU) ; le sombre garde #58a6ff */
+  --cad-accent: #2f6feb;
+  --cad-accent-hover: #245fd0;
+  --cad-accent-soft: rgba(47, 111, 235, .12);
+  --cad-ring: rgba(47, 111, 235, .35);
+  --cad-success: var(--accent-success, #3fb950);
+  --cad-warning: var(--accent-warning, #d29922);
+  --cad-danger: var(--accent-danger, #f85149);
+  --cad-info: var(--accent-secondary, #79c0ff);
+  --cad-success-soft: rgba(63, 185, 80, .14);
+  --cad-warning-soft: rgba(210, 153, 34, .16);
+  --cad-danger-soft: rgba(248, 81, 73, .14);
+  --cad-info-soft: rgba(121, 192, 255, .16);
+
+  /* ---- sémantiques : ombres ---- */
+  --cad-shadow-sm: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05));
+  --cad-shadow-md: var(--shadow-md, 0 4px 6px rgba(0,0,0,.07));
+  --cad-shadow-lg: var(--shadow-lg, 0 12px 24px rgba(15,23,42,.08));
+
+  /* ---- composants ---- */
+  --cad-control-h-sm: 26px;
+  --cad-control-h: 32px;
+  --cad-control-h-lg: 40px;
+  --cad-control-px: 10px;
+  --cad-input-bg: var(--input-bg, var(--cad-bg));
+  --cad-input-border: var(--input-border, var(--cad-border-strong));
+  --cad-table-stripe: var(--table-even-row-color, var(--cad-bg-subtle));
+  --cad-tooltip-bg: #1e293b;          /* contraste inversé (maquette .tip) */
+  --cad-tooltip-fg: #f8fafc;
+}
+
+.theme-dark {
+  --cad-backdrop: rgba(0, 0, 0, .6);
+  --cad-accent: var(--accent-primary, #58a6ff);
+  --cad-accent-hover: #79c0ff;
+  --cad-accent-soft: rgba(88, 166, 255, .16);
+  --cad-ring: rgba(88, 166, 255, .40);
+  --cad-fg-on-accent: #0d1117;
+  --cad-tooltip-bg: #f0f6fc;
+  --cad-tooltip-fg: #0d1117;
+}
+
+/* ---- breakpoints (nommage Tailwind) — utilisés par CadBreakpointService et les primitives layout ---- */
+:root {
+  --cad-bp-sm: 640px; --cad-bp-md: 768px; --cad-bp-lg: 1024px; --cad-bp-xl: 1280px; --cad-bp-2xl: 1536px;
+  --cad-container-max: 1440px;
+  --cad-gap-xs: 4px; --cad-gap-sm: 8px; --cad-gap-md: 14px; --cad-gap-lg: 22px; --cad-gap-xl: 32px;
+}
+
+/* ---- densité tactile : classe `cad-touch` posée sur <html> par CadBreakpointService (pointer: coarse, ou CAD_TOUCH_DENSITY='on') ---- */
+:root { --cad-table-row-h: 42px; }
+.cad-touch {
+  --cad-control-h: 40px; --cad-control-h-sm: 32px; --cad-control-h-lg: 48px;
+  --cad-font-size: 0.9375rem; --cad-control-px: 12px;
+  --cad-table-row-h: 48px;
+}