@sentropic/design-system-svelte 0.11.0 → 0.12.0

package/dist/Collapsible.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+  import { ChevronDown } from "@lucide/svelte";
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type CollapsibleProps = Omit<HTMLAttributes<HTMLDivElement>, "class" | "title"> & {
+    /** État ouvert (bindable). */
+    open?: boolean;
+    title: string;
+    disabled?: boolean;
+    onToggle?: (open: boolean) => void;
+    class?: string;
+    children?: Snippet;
+  };
+
+  let {
+    open = $bindable(false),
+    title,
+    disabled = false,
+    onToggle,
+    class: className,
+    children,
+    ...rest
+  }: CollapsibleProps = $props();
+
+  const uid = `st-collapsible-${Math.random().toString(36).slice(2, 9)}`;
+
+  const classes = $derived(
+    ["st-collapsible", open ? "st-collapsible--open" : null, className].filter(Boolean).join(" ")
+  );
+
+  function toggle() {
+    if (disabled) return;
+    open = !open;
+    onToggle?.(open);
+  }
+</script>
+
+<div {...rest} class={classes}>
+  <button
+    type="button"
+    class="st-collapsible__trigger"
+    aria-expanded={open ? "true" : "false"}
+    aria-controls={`${uid}-region`}
+    id={`${uid}-trigger`}
+    {disabled}
+    onclick={toggle}
+  >
+    <span class="st-collapsible__title">{title}</span>
+    <span class="st-collapsible__icon" aria-hidden="true">
+      <ChevronDown size={18} strokeWidth={2.25} />
+    </span>
+  </button>
+  {#if open}
+    <div
+      class="st-collapsible__region"
+      role="region"
+      id={`${uid}-region`}
+      aria-labelledby={`${uid}-trigger`}
+    >
+      {@render children?.()}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .st-collapsible {
+    color: var(--st-semantic-text-primary);
+    width: 100%;
+  }
+
+  .st-collapsible__trigger {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    color: var(--st-component-accordion-text, inherit);
+    cursor: pointer;
+    display: flex;
+    font: inherit;
+    font-size: var(--st-component-accordion-fontSize, 0.9375rem);
+    font-weight: var(--st-component-accordion-fontWeight, 650);
+    gap: 0.75rem;
+    justify-content: space-between;
+    line-height: var(--st-component-accordion-lineHeight, 1.3);
+    padding: var(--st-component-accordion-paddingBlock, 0.625rem)
+      var(--st-component-accordion-paddingInline, 0.25rem);
+    text-align: start;
+    transition: background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+    width: 100%;
+  }
+
+  .st-collapsible__trigger:hover:not(:disabled) {
+    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
+  }
+
+  .st-collapsible__trigger:focus-visible {
+    outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+    outline-offset: -2px;
+  }
+
+  .st-collapsible__trigger:disabled {
+    color: var(--st-semantic-text-muted);
+    cursor: not-allowed;
+  }
+
+  .st-collapsible__title {
+    flex: 1 1 auto;
+  }
+
+  .st-collapsible__icon {
+    align-items: center;
+    color: var(--st-semantic-text-secondary);
+    display: inline-flex;
+    flex: 0 0 auto;
+    height: 1.25rem;
+    justify-content: center;
+    transition: transform var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+    width: 1.25rem;
+  }
+
+  .st-collapsible--open .st-collapsible__icon {
+    transform: rotate(180deg);
+  }
+
+  .st-collapsible__region {
+    color: var(--st-semantic-text-secondary);
+    line-height: 1.5;
+    padding: 0 0.25rem 0.625rem;
+  }
+</style>

package/dist/Collapsible.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type CollapsibleProps = Omit<HTMLAttributes<HTMLDivElement>, "class" | "title"> & {
+    /** État ouvert (bindable). */
+    open?: boolean;
+    title: string;
+    disabled?: boolean;
+    onToggle?: (open: boolean) => void;
+    class?: string;
+    children?: Snippet;
+};
+declare const Collapsible: import("svelte").Component<CollapsibleProps, {}, "open">;
+type Collapsible = ReturnType<typeof Collapsible>;
+export default Collapsible;
+//# sourceMappingURL=Collapsible.svelte.d.ts.map

package/dist/Collapsible.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Collapsible.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC,GAAG;IAChF,8BAA8B;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAgDJ,QAAA,MAAM,WAAW,0DAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/RadioGroup.svelte

@@ -0,0 +1,111 @@
+<script lang="ts" module>
+  export interface RadioGroupOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    helperText?: string;
+  }
+</script>
+
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import Radio from "./Radio.svelte";
+
+  type RadioGroupProps = Omit<HTMLAttributes<HTMLFieldSetElement>, "class" | "onchange"> & {
+    legend: string;
+    /** Valeur sélectionnée (contrôlée). */
+    value?: string;
+    onchange?: (value: string) => void;
+    orientation?: "vertical" | "horizontal";
+    /** Nom partagé garantissant l'exclusivité radio. Requis. */
+    name: string;
+    options?: RadioGroupOption[];
+    helperText?: string;
+    disabled?: boolean;
+    class?: string;
+    children?: Snippet;
+  };
+
+  let {
+    legend,
+    value,
+    onchange,
+    orientation = "vertical",
+    name,
+    options = [],
+    helperText,
+    disabled = false,
+    class: className,
+    children,
+    ...rest
+  }: RadioGroupProps = $props();
+
+  const classes = $derived(
+    ["st-radioGroup", `st-radioGroup--${orientation}`, className].filter(Boolean).join(" ")
+  );
+
+  function select(optionValue: string) {
+    if (optionValue === value) return;
+    onchange?.(optionValue);
+  }
+</script>
+
+<fieldset {...rest} class={classes} {disabled}>
+  <legend class="st-radioGroup__legend">{legend}</legend>
+  {#if helperText}
+    <p class="st-radioGroup__help">{helperText}</p>
+  {/if}
+  <div class="st-radioGroup__options">
+    {#each options as option (option.value)}
+      <Radio
+        label={option.label}
+        helperText={option.helperText}
+        {name}
+        value={option.value}
+        checked={value === option.value}
+        disabled={option.disabled}
+        onchange={() => select(option.value)}
+      />
+    {/each}
+    {@render children?.()}
+  </div>
+</fieldset>
+
+<style>
+  .st-radioGroup {
+    border: 0;
+    margin: 0;
+    min-width: 0;
+    padding: 0;
+  }
+
+  .st-radioGroup__legend {
+    color: var(--st-component-field-labelText, var(--st-semantic-text-primary));
+    font-size: 0.9375rem;
+    font-weight: 650;
+    line-height: 1.3;
+    padding: 0;
+  }
+
+  .st-radioGroup__help {
+    color: var(--st-component-field-helpText, var(--st-semantic-text-secondary));
+    font-size: 0.8125rem;
+    margin: 0.25rem 0 0;
+  }
+
+  .st-radioGroup__options {
+    display: flex;
+    gap: var(--st-spacing-3, 0.75rem);
+    margin-top: var(--st-spacing-2, 0.5rem);
+  }
+
+  .st-radioGroup--vertical .st-radioGroup__options {
+    flex-direction: column;
+  }
+
+  .st-radioGroup--horizontal .st-radioGroup__options {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+</style>

package/dist/RadioGroup.svelte.d.ts

@@ -0,0 +1,26 @@
+export interface RadioGroupOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    helperText?: string;
+}
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type RadioGroupProps = Omit<HTMLAttributes<HTMLFieldSetElement>, "class" | "onchange"> & {
+    legend: string;
+    /** Valeur sélectionnée (contrôlée). */
+    value?: string;
+    onchange?: (value: string) => void;
+    orientation?: "vertical" | "horizontal";
+    /** Nom partagé garantissant l'exclusivité radio. Requis. */
+    name: string;
+    options?: RadioGroupOption[];
+    helperText?: string;
+    disabled?: boolean;
+    class?: string;
+    children?: Snippet;
+};
+declare const RadioGroup: import("svelte").Component<RadioGroupProps, {}, "">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;
+//# sourceMappingURL=RadioGroup.svelte.d.ts.map

package/dist/RadioGroup.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.svelte.d.ts","sourceRoot":"","sources":["../src/lib/RadioGroup.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAGH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAIpD,KAAK,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,mBAAmB,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACvF,MAAM,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,4DAA4D;IAC5D,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAkDJ,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/Stepper.svelte

@@ -0,0 +1,257 @@
+<script lang="ts" module>
+  export interface StepperStep {
+    label: string;
+    description?: string;
+  }
+
+  export type StepperOrientation = "horizontal" | "vertical";
+</script>
+
+<script lang="ts">
+  import { Check } from "@lucide/svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type StepperProps = Omit<HTMLAttributes<HTMLOListElement>, "class"> & {
+    steps: StepperStep[];
+    /** Index de l'étape courante (0-based). */
+    current?: number;
+    orientation?: StepperOrientation;
+    /** Autorise la navigation au clic sur les étapes. */
+    clickable?: boolean;
+    onStepClick?: (index: number) => void;
+    /** Étiquette a11y de la liste d'étapes. */
+    label?: string;
+    class?: string;
+  };
+
+  let {
+    steps,
+    current = 0,
+    orientation = "horizontal",
+    clickable = false,
+    onStepClick,
+    label = "Progression",
+    class: className,
+    ...rest
+  }: StepperProps = $props();
+
+  const classes = $derived(
+    ["st-stepper", `st-stepper--${orientation}`, className].filter(Boolean).join(" ")
+  );
+
+  function stateOf(index: number): "complete" | "current" | "upcoming" {
+    if (index < current) return "complete";
+    if (index === current) return "current";
+    return "upcoming";
+  }
+
+  function handleClick(index: number) {
+    if (!clickable) return;
+    onStepClick?.(index);
+  }
+</script>
+
+<ol {...rest} class={classes} aria-label={label}>
+  {#each steps as step, index (index)}
+    {@const state = stateOf(index)}
+    {@const isLast = index === steps.length - 1}
+    <li
+      class={["st-stepper__step", `st-stepper__step--${state}`].join(" ")}
+      aria-current={state === "current" ? "step" : undefined}
+    >
+      <span class="st-stepper__indicator">
+        {#if clickable}
+          <button
+            type="button"
+            class="st-stepper__circle st-stepper__circle--button"
+            onclick={() => handleClick(index)}
+            aria-label={step.label}
+          >
+            {#if state === "complete"}
+              <Check size={14} strokeWidth={2.5} aria-hidden="true" />
+            {:else}
+              <span class="st-stepper__index">{index + 1}</span>
+            {/if}
+          </button>
+        {:else}
+          <span class="st-stepper__circle">
+            {#if state === "complete"}
+              <Check size={14} strokeWidth={2.5} aria-hidden="true" />
+            {:else}
+              <span class="st-stepper__index">{index + 1}</span>
+            {/if}
+          </span>
+        {/if}
+        {#if !isLast}
+          <span class="st-stepper__connector"></span>
+        {/if}
+      </span>
+      <span class="st-stepper__text">
+        <span class="st-stepper__label">{step.label}</span>
+        {#if step.description}
+          <span class="st-stepper__description">{step.description}</span>
+        {/if}
+      </span>
+    </li>
+  {/each}
+</ol>
+
+<style>
+  .st-stepper {
+    color: var(--st-semantic-text-primary);
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .st-stepper--horizontal {
+    align-items: flex-start;
+    flex-direction: row;
+  }
+
+  .st-stepper--vertical {
+    flex-direction: column;
+  }
+
+  .st-stepper__step {
+    display: flex;
+    flex: 1 1 0;
+    gap: var(--st-spacing-2, 0.5rem);
+    min-width: 0;
+    position: relative;
+  }
+
+  .st-stepper--horizontal .st-stepper__step {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .st-stepper--vertical .st-stepper__step {
+    align-items: flex-start;
+    flex: 0 0 auto;
+    flex-direction: row;
+  }
+
+  .st-stepper__indicator {
+    align-items: center;
+    display: flex;
+    flex: 0 0 auto;
+    justify-content: center;
+    position: relative;
+  }
+
+  .st-stepper--horizontal .st-stepper__indicator {
+    flex-direction: row;
+    width: 100%;
+  }
+
+  .st-stepper--vertical .st-stepper__indicator {
+    flex-direction: column;
+    min-height: 3rem;
+  }
+
+  .st-stepper__circle {
+    align-items: center;
+    background: var(--st-semantic-surface-default);
+    border: 1.5px solid var(--st-semantic-border-strong);
+    border-radius: 50%;
+    color: var(--st-semantic-text-secondary);
+    display: inline-flex;
+    flex: 0 0 auto;
+    font-size: 0.75rem;
+    font-weight: 600;
+    height: 1.5rem;
+    justify-content: center;
+    line-height: 1;
+    width: 1.5rem;
+    z-index: 1;
+  }
+
+  .st-stepper__circle--button {
+    cursor: pointer;
+    font: inherit;
+    font-size: 0.75rem;
+    font-weight: 600;
+    padding: 0;
+    transition:
+      background var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
+      border-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+  }
+
+  .st-stepper__circle--button:hover {
+    border-color: var(--st-semantic-action-primary);
+  }
+
+  .st-stepper__circle--button:focus-visible {
+    outline: 2px solid var(--st-semantic-border-interactive, var(--st-semantic-action-primary));
+    outline-offset: 2px;
+  }
+
+  .st-stepper__index {
+    line-height: 1;
+  }
+
+  .st-stepper__connector {
+    background: var(--st-semantic-border-subtle);
+    flex: 1 1 auto;
+  }
+
+  .st-stepper--horizontal .st-stepper__connector {
+    height: 2px;
+    margin-top: calc(0.75rem - 1px);
+  }
+
+  .st-stepper--vertical .st-stepper__connector {
+    margin-left: calc(0.75rem - 1px);
+    min-height: 1.5rem;
+    width: 2px;
+  }
+
+  .st-stepper__text {
+    display: grid;
+    gap: 0.125rem;
+    min-width: 0;
+  }
+
+  .st-stepper--horizontal .st-stepper__text {
+    padding-right: var(--st-spacing-3, 0.75rem);
+    padding-top: var(--st-spacing-2, 0.5rem);
+  }
+
+  .st-stepper--vertical .st-stepper__text {
+    padding-bottom: var(--st-spacing-3, 0.75rem);
+  }
+
+  .st-stepper__label {
+    color: var(--st-semantic-text-primary);
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+
+  .st-stepper__description {
+    color: var(--st-semantic-text-secondary);
+    font-size: 0.8125rem;
+  }
+
+  /* State: complete */
+  .st-stepper__step--complete .st-stepper__circle {
+    background: var(--st-semantic-action-primary);
+    border-color: var(--st-semantic-action-primary);
+    color: var(--st-semantic-action-primaryText);
+  }
+
+  .st-stepper__step--complete .st-stepper__connector {
+    background: var(--st-semantic-action-primary);
+  }
+
+  /* State: current */
+  .st-stepper__step--current .st-stepper__circle {
+    border-color: var(--st-semantic-action-primary);
+    color: var(--st-semantic-action-primary);
+  }
+
+  .st-stepper__step--current .st-stepper__label {
+    color: var(--st-semantic-action-primary);
+  }
+</style>

package/dist/Stepper.svelte.d.ts

@@ -0,0 +1,22 @@
+export interface StepperStep {
+    label: string;
+    description?: string;
+}
+export type StepperOrientation = "horizontal" | "vertical";
+import type { HTMLAttributes } from "svelte/elements";
+type StepperProps = Omit<HTMLAttributes<HTMLOListElement>, "class"> & {
+    steps: StepperStep[];
+    /** Index de l'étape courante (0-based). */
+    current?: number;
+    orientation?: StepperOrientation;
+    /** Autorise la navigation au clic sur les étapes. */
+    clickable?: boolean;
+    onStepClick?: (index: number) => void;
+    /** Étiquette a11y de la liste d'étapes. */
+    label?: string;
+    class?: string;
+};
+declare const Stepper: import("svelte").Component<StepperProps, {}, "">;
+type Stepper = ReturnType<typeof Stepper>;
+export default Stepper;
+//# sourceMappingURL=Stepper.svelte.d.ts.map

package/dist/Stepper.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Stepper.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAC;AAI7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,GAAG;IACpE,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,qDAAqD;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA4EJ,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}