@cadriciel/ui 0.4.0 → 0.4.1
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.
package/package.json
CHANGED
package/styles/tokens.scss
CHANGED
|
@@ -29,6 +29,14 @@
|
|
|
29
29
|
--cad-surface: var(--surface-card, #ffffff);
|
|
30
30
|
--cad-overlay: var(--surface-overlay, #ffffff);
|
|
31
31
|
--cad-hover: var(--surface-hover, #f1f5f9);
|
|
32
|
+
/* Survol SUR UNE SURFACE FLOTTANTE (menu, liste d'options, calendrier, feuille…).
|
|
33
|
+
Il ne peut pas être `--cad-hover` : celui-ci est un écart depuis la surface de CARTE, et
|
|
34
|
+
rien n'oblige un thème à le distinguer de la surface d'overlay. Le thème sombre du studio
|
|
35
|
+
donne justement la MÊME couleur aux deux (#21262d) — donc aucun survol n'était visible
|
|
36
|
+
dans le moindre menu ou select, sauf les entrées `danger` qui ont leur propre teinte.
|
|
37
|
+
Signalé par SZU le 21/08/2026 sur cad-menu. On le DÉRIVE de la surface plutôt que de le
|
|
38
|
+
déclarer à côté : deux tokens indépendants peuvent coïncider, un écart calculé, jamais. */
|
|
39
|
+
--cad-overlay-hover: var(--surface-overlay-hover, color-mix(in srgb, var(--cad-fg) 9%, var(--cad-overlay)));
|
|
32
40
|
--cad-elevated: var(--bg-elevated, #e2e8f0);
|
|
33
41
|
--cad-border: var(--surface-border, #e2e8f0);
|
|
34
42
|
--cad-border-strong: var(--border-light, #cbd5e1);
|
package/types/cadriciel-ui.d.ts
CHANGED
|
@@ -1183,7 +1183,7 @@ declare class CadMultiselectComponent<T = unknown, V = unknown> extends CadSelec
|
|
|
1183
1183
|
}
|
|
1184
1184
|
|
|
1185
1185
|
/** CSS du déclencheur/panneau commun aux sélecteurs (treeselect, cascade, combo) — mêmes tokens que cad-select. */
|
|
1186
|
-
declare const CAD_SELECT_TRIGGER_STYLES = "\n :host { display: inline-flex; width: 100%; box-sizing: border-box; font-family: var(--cad-font); font-size: var(--cad-font-size); color: var(--cad-fg); vertical-align: middle; }\n .st { display: flex; align-items: center; gap: 6px; width: 100%; box-sizing: border-box; min-height: var(--cad-control-h); padding: 0 8px 0 var(--cad-control-px); background: var(--cad-input-bg); border: 1px solid var(--cad-input-border); border-radius: var(--cad-radius); cursor: pointer; outline: none; user-select: none; transition: border-color var(--cad-dur) var(--cad-ease), box-shadow var(--cad-dur) var(--cad-ease); }\n :host(.size-sm) .st { min-height: var(--cad-control-h-sm); font-size: var(--cad-font-size-sm); border-radius: var(--cad-radius-sm); }\n :host(.size-lg) .st { min-height: var(--cad-control-h-lg); font-size: var(--cad-font-size-lg); }\n .st:focus-visible, .st:focus-within, :host(.is-open) .st { border-color: var(--cad-accent); box-shadow: 0 0 0 3px var(--cad-ring); }\n :host(.is-invalid) .st { border-color: var(--cad-danger); } :host(.is-invalid.is-open) .st, :host(.is-invalid) .st:focus-within { box-shadow: 0 0 0 3px var(--cad-danger-soft); }\n :host(.is-disabled) .st { opacity: .6; cursor: not-allowed; background: var(--cad-bg-subtle); }\n .st__val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }\n .st__val.is-ph { color: var(--cad-fg-muted); }\n .st__chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; padding: 3px 0; }\n .st__chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 6px 0 8px; border-radius: 999px; background: var(--cad-accent-soft); color: var(--cad-accent); font-size: var(--cad-font-size-sm); font-weight: 500; }\n .st__chip button { all: unset; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; cursor: pointer; } .st__chip button:hover { background: rgba(0,0,0,.08); }\n .st__input { flex: 1; min-width: 40px; border: 0; outline: 0; background: transparent; color: var(--cad-fg); font: inherit; padding: 0; height: calc(var(--cad-control-h) - 2px); }\n .st__input::placeholder { color: var(--cad-fg-muted); }\n .st__chev { color: var(--cad-fg-muted); flex: none; transition: transform var(--cad-dur) var(--cad-ease); } :host(.is-open) .st__chev { transform: rotate(180deg); }\n .st__clear, .st__dd { all: unset; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; color: var(--cad-fg-muted); cursor: pointer; } .st__clear:hover, .st__dd:hover { color: var(--cad-fg); background: var(--cad-hover); }\n .st__spin { color: var(--cad-fg-muted); }\n .sp { display: flex; flex-direction: column; box-sizing: border-box; background: var(--cad-overlay); border: 1px solid var(--cad-border); border-radius: 9px; box-shadow: var(--cad-shadow-lg); overflow: hidden; font-family: var(--cad-font); font-size: var(--cad-font-size); color: var(--cad-fg); }\n .sp__empty { padding: 12px; text-align: center; color: var(--cad-fg-muted); font-size: var(--cad-font-size-sm); }\n";
|
|
1186
|
+
declare const CAD_SELECT_TRIGGER_STYLES = "\n :host { display: inline-flex; width: 100%; box-sizing: border-box; font-family: var(--cad-font); font-size: var(--cad-font-size); color: var(--cad-fg); vertical-align: middle; }\n .st { display: flex; align-items: center; gap: 6px; width: 100%; box-sizing: border-box; min-height: var(--cad-control-h); padding: 0 8px 0 var(--cad-control-px); background: var(--cad-input-bg); border: 1px solid var(--cad-input-border); border-radius: var(--cad-radius); cursor: pointer; outline: none; user-select: none; transition: border-color var(--cad-dur) var(--cad-ease), box-shadow var(--cad-dur) var(--cad-ease); }\n :host(.size-sm) .st { min-height: var(--cad-control-h-sm); font-size: var(--cad-font-size-sm); border-radius: var(--cad-radius-sm); }\n :host(.size-lg) .st { min-height: var(--cad-control-h-lg); font-size: var(--cad-font-size-lg); }\n .st:focus-visible, .st:focus-within, :host(.is-open) .st { border-color: var(--cad-accent); box-shadow: 0 0 0 3px var(--cad-ring); }\n :host(.is-invalid) .st { border-color: var(--cad-danger); } :host(.is-invalid.is-open) .st, :host(.is-invalid) .st:focus-within { box-shadow: 0 0 0 3px var(--cad-danger-soft); }\n :host(.is-disabled) .st { opacity: .6; cursor: not-allowed; background: var(--cad-bg-subtle); }\n .st__val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }\n .st__val.is-ph { color: var(--cad-fg-muted); }\n .st__chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; padding: 3px 0; }\n .st__chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 6px 0 8px; border-radius: 999px; background: var(--cad-accent-soft); color: var(--cad-accent); font-size: var(--cad-font-size-sm); font-weight: 500; }\n .st__chip button { all: unset; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; cursor: pointer; } .st__chip button:hover { background: rgba(0,0,0,.08); }\n .st__input { flex: 1; min-width: 40px; border: 0; outline: 0; background: transparent; color: var(--cad-fg); font: inherit; padding: 0; height: calc(var(--cad-control-h) - 2px); }\n .st__input::placeholder { color: var(--cad-fg-muted); }\n .st__chev { color: var(--cad-fg-muted); flex: none; transition: transform var(--cad-dur) var(--cad-ease); } :host(.is-open) .st__chev { transform: rotate(180deg); }\n .st__clear, .st__dd { all: unset; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; color: var(--cad-fg-muted); cursor: pointer; } .st__clear:hover, .st__dd:hover { color: var(--cad-fg); background: var(--cad-hover); }\n .st__spin { color: var(--cad-fg-muted); }\n .sp { display: flex; flex-direction: column; box-sizing: border-box; background: var(--cad-overlay); --cad-hover: var(--cad-overlay-hover); border: 1px solid var(--cad-border); border-radius: 9px; box-shadow: var(--cad-shadow-lg); overflow: hidden; font-family: var(--cad-font); font-size: var(--cad-font-size); color: var(--cad-fg); }\n .sp__empty { padding: 12px; text-align: center; color: var(--cad-fg-muted); font-size: var(--cad-font-size-sm); }\n";
|
|
1187
1187
|
|
|
1188
1188
|
type CadSortOrder = 1 | -1 | 0;
|
|
1189
1189
|
interface CadSortMeta {
|