@sentropic/design-system-svelte 0.34.43 → 0.34.44

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 (10) hide show
  1. package/dist/Drawer.svelte +16 -1
  2. package/dist/Drawer.svelte.d.ts +1 -1
  3. package/dist/Drawer.svelte.d.ts.map +1 -1
  4. package/dist/Modal.svelte +21 -1
  5. package/dist/Modal.svelte.d.ts +6 -0
  6. package/dist/Modal.svelte.d.ts.map +1 -1
  7. package/dist/Popover.svelte +15 -2
  8. package/dist/Popover.svelte.d.ts +3 -0
  9. package/dist/Popover.svelte.d.ts.map +1 -1
  10. package/package.json +1 -1
package/dist/Drawer.svelte CHANGED
@@ -6,7 +6,7 @@
6
6
  open?: boolean;
7
7
  title: string;
8
8
  description?: string;
9
- side?: "left" | "right";
9
+ side?: "left" | "right" | "bottom";
10
10
  closeLabel?: string;
11
11
  class?: string;
12
12
  children?: Snippet;
@@ -109,6 +109,21 @@
109
109
  left: 0;
110
110
  }
111
111
 
112
+ /* Tiroir ancré en bas (G2) : pleine largeur, hauteur auto plafonnée. Override
113
+ des assises horizontales du tiroir gauche/droite (largeur fixe + top:0). */
114
+ .st-drawer--bottom {
115
+ border-top-style: solid;
116
+ border-top-width: 1px;
117
+ bottom: 0;
118
+ height: auto;
119
+ left: 0;
120
+ max-height: min(90vh, var(--st-component-drawer-height, 24rem));
121
+ max-width: 100vw;
122
+ right: 0;
123
+ top: auto;
124
+ width: 100%;
125
+ }
126
+
112
127
  .st-drawer__header {
113
128
  align-items: start;
114
129
  display: flex;
package/dist/Drawer.svelte.d.ts CHANGED
@@ -4,7 +4,7 @@ type DrawerProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
4
4
  open?: boolean;
5
5
  title: string;
6
6
  description?: string;
7
- side?: "left" | "right";
7
+ side?: "left" | "right" | "bottom";
8
8
  closeLabel?: string;
9
9
  class?: string;
10
10
  children?: Snippet;
package/dist/Drawer.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Drawer.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IAC9D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAsEJ,QAAA,MAAM,MAAM,qDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Drawer.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IAC9D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAsEJ,QAAA,MAAM,MAAM,qDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
package/dist/Modal.svelte CHANGED
@@ -10,6 +10,12 @@
10
10
  description?: string;
11
11
  closeLabel?: string;
12
12
  class?: string;
13
+ /** Ferme sur clic du fond + Échap (défaut true). `false` = modale « statique »
14
+ * (étape obligatoire, wizard) que seul un bouton explicite peut fermer. */
15
+ dismissible?: boolean;
16
+ /** Override d'empilement (z-index du fond) — pour superposer une modale au-dessus
17
+ * d'un tiroir/une autre modale. Défaut = token `--st-component-overlay-zIndex`. */
18
+ zIndex?: number;
13
19
  children?: Snippet;
14
20
  footer?: Snippet;
15
21
  onclose?: () => void;
@@ -21,6 +27,8 @@
21
27
  description,
22
28
  closeLabel = "Close",
23
29
  class: className,
30
+ dismissible = true,
31
+ zIndex,
24
32
  children,
25
33
  footer,
26
34
  onclose,
@@ -52,6 +60,12 @@
52
60
  tick().then(() => previousFocus?.focus());
53
61
  }
54
62
 
63
+ function onBackdropClick(event: MouseEvent) {
64
+ if (dismissible && event.target === event.currentTarget) {
65
+ requestClose();
66
+ }
67
+ }
68
+
55
69
  function trapFocus(event: KeyboardEvent) {
56
70
  if (!dialog || event.key !== "Tab") return;
57
71
  const focusable = Array.from(dialog.querySelectorAll<HTMLElement>(focusableSelector));
@@ -84,6 +98,7 @@
84
98
  function onWindowKeydown(event: KeyboardEvent) {
85
99
  if (!open) return;
86
100
  if (event.key === "Escape") {
101
+ if (!dismissible) return;
87
102
  event.preventDefault();
88
103
  requestClose();
89
104
  return;
@@ -95,7 +110,12 @@
95
110
  <svelte:window onkeydown={onWindowKeydown} />
96
111
 
97
112
  {#if open}
98
- <div class="st-modal__backdrop">
113
+ <div
114
+ class="st-modal__backdrop"
115
+ onclick={onBackdropClick}
116
+ role="presentation"
117
+ style={zIndex != null ? `z-index:${zIndex}` : undefined}
118
+ >
99
119
  <section
100
120
  {...rest}
101
121
  bind:this={dialog}
package/dist/Modal.svelte.d.ts CHANGED
@@ -6,6 +6,12 @@ type ModalProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
6
6
  description?: string;
7
7
  closeLabel?: string;
8
8
  class?: string;
9
+ /** Ferme sur clic du fond + Échap (défaut true). `false` = modale « statique »
10
+ * (étape obligatoire, wizard) que seul un bouton explicite peut fermer. */
11
+ dismissible?: boolean;
12
+ /** Override d'empilement (z-index du fond) — pour superposer une modale au-dessus
13
+ * d'un tiroir/une autre modale. Défaut = token `--st-component-overlay-zIndex`. */
14
+ zIndex?: number;
9
15
  children?: Snippet;
10
16
  footer?: Snippet;
11
17
  onclose?: () => void;
package/dist/Modal.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Modal.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IAC7D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAmHJ,QAAA,MAAM,KAAK,gDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Modal.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IAC7D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;gFAC4E;IAC5E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;wFACoF;IACpF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AA4HJ,QAAA,MAAM,KAAK,gDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
package/dist/Popover.svelte CHANGED
@@ -6,6 +6,9 @@
6
6
  open?: boolean;
7
7
  label: string;
8
8
  placement?: "top" | "right" | "bottom" | "left";
9
+ /** Déclenchement : "manual" (l'hôte pilote `open`, défaut) ou "hover" (ouvre au
10
+ * survol ET au focus clavier du déclencheur — a11y, pas souris-seulement). */
11
+ openOn?: "manual" | "hover";
9
12
  class?: string;
10
13
  trigger?: Snippet;
11
14
  children?: Snippet;
@@ -15,19 +18,29 @@
15
18
  open = false,
16
19
  label,
17
20
  placement = "bottom",
21
+ openOn = "manual",
18
22
  class: className,
19
23
  trigger,
20
24
  children,
21
25
  ...rest
22
26
  }: PopoverProps = $props();
23
27
 
28
+ let hovered = $state(false);
29
+ const visible = $derived(open || (openOn === "hover" && hovered));
30
+
24
31
  const classes = () =>
25
32
  ["st-popover", `st-popover--${placement}`, className].filter(Boolean).join(" ");
26
33
  </script>
27
34
 
28
- <span class="st-popover-host">
35
+ <span
36
+ class="st-popover-host"
37
+ onmouseenter={() => (hovered = true)}
38
+ onmouseleave={() => (hovered = false)}
39
+ onfocusin={() => (hovered = true)}
40
+ onfocusout={() => (hovered = false)}
41
+ >
29
42
  {@render trigger?.()}
30
- {#if open}
43
+ {#if visible}
31
44
  <section {...rest} class={classes()} role="dialog" aria-label={label}>
32
45
  {@render children?.()}
33
46
  </section>
package/dist/Popover.svelte.d.ts CHANGED
@@ -4,6 +4,9 @@ type PopoverProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
4
4
  open?: boolean;
5
5
  label: string;
6
6
  placement?: "top" | "right" | "bottom" | "left";
7
+ /** Déclenchement : "manual" (l'hôte pilote `open`, défaut) ou "hover" (ouvre au
8
+ * survol ET au focus clavier du déclencheur — a11y, pas souris-seulement). */
9
+ openOn?: "manual" | "hover";
7
10
  class?: string;
8
11
  trigger?: Snippet;
9
12
  children?: Snippet;
package/dist/Popover.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Popover.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Popover.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IAC/D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAiCJ,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
1
+ {"version":3,"file":"Popover.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Popover.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IAC/D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAChD;mFAC+E;IAC/E,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAqCJ,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sentropic/design-system-svelte",
3
- "version": "0.34.43",
3
+ "version": "0.34.44",
4
4
  "type": "module",
5
5
  "publishConfig": {
6
6
  "access": "public"