@sentropic/design-system-svelte 0.5.0 → 0.7.0

package/dist/ProgressIndicator.svelte

@@ -0,0 +1,283 @@
+<script lang="ts" module>
+  export type ProgressIndicatorStatus =
+    | "complete"
+    | "current"
+    | "upcoming"
+    | "invalid"
+    | "disabled";
+
+  export interface ProgressIndicatorItem {
+    value: string;
+    label: string;
+    description?: string;
+    status?: ProgressIndicatorStatus;
+  }
+</script>
+
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type ProgressIndicatorProps = Omit<HTMLAttributes<HTMLOListElement>, "class"> & {
+    items: ProgressIndicatorItem[];
+    vertical?: boolean;
+    label?: string;
+    class?: string;
+  };
+
+  let {
+    items,
+    vertical = false,
+    label = "Progress",
+    class: className,
+    ...rest
+  }: ProgressIndicatorProps = $props();
+
+  const classes = () =>
+    [
+      "st-progressIndicator",
+      vertical ? "st-progressIndicator--vertical" : "st-progressIndicator--horizontal",
+      className
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+  const resolvedStatus = (item: ProgressIndicatorItem): ProgressIndicatorStatus =>
+    item.status ?? "upcoming";
+</script>
+
+<ol {...rest} class={classes()} aria-label={label}>
+  {#each items as item, index (item.value)}
+    {@const status = resolvedStatus(item)}
+    {@const isLast = index === items.length - 1}
+    <li
+      class={["st-progressIndicator__step", `st-progressIndicator__step--${status}`].join(" ")}
+      aria-current={status === "current" ? "step" : undefined}
+    >
+      <span class="st-progressIndicator__indicator" aria-hidden="true">
+        <span class="st-progressIndicator__circle">
+          {#if status === "complete"}
+            <svg viewBox="0 0 16 16" width="14" height="14" focusable="false">
+              <path
+                d="m3 8 3.5 3.5L13 5"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.6"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          {:else if status === "invalid"}
+            <svg viewBox="0 0 16 16" width="14" height="14" focusable="false">
+              <path
+                d="M4 4l8 8M12 4l-8 8"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.6"
+                stroke-linecap="round"
+              />
+            </svg>
+          {:else if status === "current"}
+            <span class="st-progressIndicator__dot"></span>
+          {:else}
+            <span class="st-progressIndicator__index">{index + 1}</span>
+          {/if}
+        </span>
+        {#if !isLast}
+          <span class="st-progressIndicator__connector"></span>
+        {/if}
+      </span>
+      <span class="st-progressIndicator__text">
+        <span class="st-progressIndicator__label">{item.label}</span>
+        {#if item.description}
+          <span class="st-progressIndicator__description">{item.description}</span>
+        {/if}
+      </span>
+    </li>
+  {/each}
+</ol>
+
+<style>
+  .st-progressIndicator {
+    color: var(--st-component-progressIndicator-text, var(--st-semantic-text-primary));
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .st-progressIndicator--horizontal {
+    align-items: flex-start;
+    flex-direction: row;
+    gap: 0;
+  }
+
+  .st-progressIndicator--vertical {
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .st-progressIndicator__step {
+    display: flex;
+    flex: 1 1 0;
+    gap: var(--st-spacing-2, 0.5rem);
+    min-width: 0;
+    position: relative;
+  }
+
+  .st-progressIndicator--horizontal .st-progressIndicator__step {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .st-progressIndicator--vertical .st-progressIndicator__step {
+    align-items: flex-start;
+    flex: 0 0 auto;
+    flex-direction: row;
+  }
+
+  .st-progressIndicator__indicator {
+    align-items: center;
+    color: var(--st-component-progressIndicator-iconText, var(--st-semantic-text-secondary));
+    display: flex;
+    flex: 0 0 auto;
+    justify-content: center;
+    position: relative;
+  }
+
+  .st-progressIndicator--horizontal .st-progressIndicator__indicator {
+    flex-direction: row;
+    width: 100%;
+  }
+
+  .st-progressIndicator--vertical .st-progressIndicator__indicator {
+    flex-direction: column;
+    min-height: 3rem;
+  }
+
+  .st-progressIndicator__circle {
+    align-items: center;
+    background: var(--st-component-progressIndicator-circleBackground, var(--st-semantic-surface-default));
+    border: 1.5px solid
+      var(--st-component-progressIndicator-circleBorder, var(--st-semantic-border-strong));
+    border-radius: 50%;
+    color: var(--st-component-progressIndicator-iconText, 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-progressIndicator__index {
+    line-height: 1;
+  }
+
+  .st-progressIndicator__dot {
+    background: currentColor;
+    border-radius: 50%;
+    height: 0.5rem;
+    width: 0.5rem;
+  }
+
+  .st-progressIndicator__connector {
+    background: var(--st-component-progressIndicator-connector, var(--st-semantic-border-subtle));
+    flex: 1 1 auto;
+  }
+
+  .st-progressIndicator--horizontal .st-progressIndicator__connector {
+    height: 2px;
+    margin-top: calc(0.75rem - 1px);
+  }
+
+  .st-progressIndicator--vertical .st-progressIndicator__connector {
+    margin-left: calc(0.75rem - 1px);
+    min-height: 1.5rem;
+    width: 2px;
+  }
+
+  .st-progressIndicator__text {
+    display: grid;
+    gap: 0.125rem;
+    min-width: 0;
+  }
+
+  .st-progressIndicator--horizontal .st-progressIndicator__text {
+    padding-right: var(--st-spacing-3, 0.75rem);
+    padding-top: var(--st-spacing-2, 0.5rem);
+  }
+
+  .st-progressIndicator--vertical .st-progressIndicator__text {
+    padding-bottom: var(--st-spacing-3, 0.75rem);
+  }
+
+  .st-progressIndicator__label {
+    color: var(--st-component-progressIndicator-text, var(--st-semantic-text-primary));
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+
+  .st-progressIndicator__description {
+    color: var(--st-component-progressIndicator-descriptionText, var(--st-semantic-text-secondary));
+    font-size: 0.8125rem;
+  }
+
+  /* Status: complete */
+  .st-progressIndicator__step--complete .st-progressIndicator__circle {
+    background: var(
+      --st-component-progressIndicator-completeBackground,
+      var(--st-semantic-action-primary)
+    );
+    border-color: var(
+      --st-component-progressIndicator-completeBackground,
+      var(--st-semantic-action-primary)
+    );
+    color: var(--st-component-progressIndicator-completeIcon, var(--st-semantic-action-primaryText));
+  }
+
+  .st-progressIndicator__step--complete .st-progressIndicator__connector {
+    background: var(
+      --st-component-progressIndicator-completeConnector,
+      var(--st-semantic-action-primary)
+    );
+  }
+
+  /* Status: current */
+  .st-progressIndicator__step--current .st-progressIndicator__circle {
+    border-color: var(
+      --st-component-progressIndicator-currentBorder,
+      var(--st-semantic-action-primary)
+    );
+    color: var(--st-component-progressIndicator-currentText, var(--st-semantic-action-primary));
+  }
+
+  .st-progressIndicator__step--current .st-progressIndicator__label {
+    color: var(--st-component-progressIndicator-currentText, var(--st-semantic-action-primary));
+  }
+
+  /* Status: invalid */
+  .st-progressIndicator__step--invalid .st-progressIndicator__circle {
+    border-color: var(
+      --st-component-progressIndicator-invalidBorder,
+      var(--st-semantic-feedback-error)
+    );
+    color: var(--st-component-progressIndicator-invalidText, var(--st-semantic-feedback-error));
+  }
+
+  .st-progressIndicator__step--invalid .st-progressIndicator__label {
+    color: var(--st-component-progressIndicator-invalidText, var(--st-semantic-feedback-error));
+  }
+
+  /* Status: disabled */
+  .st-progressIndicator__step--disabled {
+    opacity: 0.55;
+  }
+
+  .st-progressIndicator__step--disabled .st-progressIndicator__label,
+  .st-progressIndicator__step--disabled .st-progressIndicator__description {
+    color: var(--st-component-progressIndicator-disabledText, var(--st-semantic-text-muted));
+  }
+</style>

package/dist/ProgressIndicator.svelte.d.ts

@@ -0,0 +1,18 @@
+export type ProgressIndicatorStatus = "complete" | "current" | "upcoming" | "invalid" | "disabled";
+export interface ProgressIndicatorItem {
+    value: string;
+    label: string;
+    description?: string;
+    status?: ProgressIndicatorStatus;
+}
+import type { HTMLAttributes } from "svelte/elements";
+type ProgressIndicatorProps = Omit<HTMLAttributes<HTMLOListElement>, "class"> & {
+    items: ProgressIndicatorItem[];
+    vertical?: boolean;
+    label?: string;
+    class?: string;
+};
+declare const ProgressIndicator: import("svelte").Component<ProgressIndicatorProps, {}, "">;
+type ProgressIndicator = ReturnType<typeof ProgressIndicator>;
+export default ProgressIndicator;
+//# sourceMappingURL=ProgressIndicator.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressIndicator.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ProgressIndicator.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,uBAAuB,GAC/B,UAAU,GACV,SAAS,GACT,UAAU,GACV,SAAS,GACT,UAAU,CAAC;AAEf,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,uBAAuB,CAAC;CAClC;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,sBAAsB,GAAG,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,GAAG;IAC9E,KAAK,EAAE,qBAAqB,EAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAmEJ,QAAA,MAAM,iBAAiB,4DAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/StructuredList.svelte

@@ -0,0 +1,86 @@
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export interface StructuredListItem {
+    key: string;
+    value: string | Snippet;
+  }
+</script>
+
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type StructuredListProps = Omit<HTMLAttributes<HTMLDListElement>, "class"> & {
+    items: StructuredListItem[];
+    bordered?: boolean;
+    class?: string;
+  };
+
+  let {
+    items,
+    bordered = true,
+    class: className,
+    ...rest
+  }: StructuredListProps = $props();
+
+  const classes = () =>
+    ["st-structuredList", bordered ? "st-structuredList--bordered" : null, className]
+      .filter(Boolean)
+      .join(" ");
+
+  function isSnippet(value: string | Snippet): value is Snippet {
+    return typeof value === "function";
+  }
+</script>
+
+<dl {...rest} class={classes()}>
+  {#each items as item (item.key)}
+    <div class="st-structuredList__row">
+      <dt class="st-structuredList__term">{item.key}</dt>
+      <dd class="st-structuredList__definition">
+        {#if isSnippet(item.value)}
+          {@render item.value()}
+        {:else}
+          {item.value}
+        {/if}
+      </dd>
+    </div>
+  {/each}
+</dl>
+
+<style>
+  .st-structuredList {
+    color: var(--st-semantic-text-primary);
+    display: grid;
+    margin: 0;
+    width: 100%;
+  }
+
+  .st-structuredList--bordered {
+    border-block-start: 1px solid
+      var(--st-component-structuredList-border, var(--st-semantic-border-subtle));
+  }
+
+  .st-structuredList__row {
+    align-items: baseline;
+    display: grid;
+    gap: var(--st-spacing-3, 0.75rem);
+    grid-template-columns: minmax(8rem, 1fr) 2fr;
+    padding: 0.75rem 0;
+  }
+
+  .st-structuredList--bordered .st-structuredList__row {
+    border-block-end: 1px solid
+      var(--st-component-structuredList-border, var(--st-semantic-border-subtle));
+  }
+
+  .st-structuredList__term {
+    color: var(--st-semantic-text-secondary);
+    font-weight: 600;
+    margin: 0;
+  }
+
+  .st-structuredList__definition {
+    margin: 0;
+  }
+</style>

package/dist/StructuredList.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from "svelte";
+export interface StructuredListItem {
+    key: string;
+    value: string | Snippet;
+}
+import type { HTMLAttributes } from "svelte/elements";
+type StructuredListProps = Omit<HTMLAttributes<HTMLDListElement>, "class"> & {
+    items: StructuredListItem[];
+    bordered?: boolean;
+    class?: string;
+};
+declare const StructuredList: import("svelte").Component<StructuredListProps, {}, "">;
+type StructuredList = ReturnType<typeof StructuredList>;
+export default StructuredList;
+//# sourceMappingURL=StructuredList.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StructuredList.svelte.d.ts","sourceRoot":"","sources":["../src/lib/StructuredList.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;CACzB;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,mBAAmB,GAAG,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,GAAG;IAC3E,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA2CJ,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/TileGroup.svelte

@@ -0,0 +1,179 @@
+<script lang="ts" module>
+  export interface TileGroupItem {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+  }
+</script>
+
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type TileGroupProps = Omit<
+    HTMLAttributes<HTMLFieldSetElement>,
+    "class" | "onchange"
+  > & {
+    items: TileGroupItem[];
+    value?: string;
+    name?: string;
+    legend?: string;
+    legendHidden?: boolean;
+    disabled?: boolean;
+    class?: string;
+    onchange?: (value: string) => void;
+  };
+
+  let {
+    items,
+    value = $bindable<string | undefined>(undefined),
+    name,
+    legend,
+    legendHidden = false,
+    disabled = false,
+    class: className,
+    onchange,
+    ...rest
+  }: TileGroupProps = $props();
+
+  const groupId = $props.id();
+  const groupName = $derived(name ?? `st-tileGroup-${groupId}`);
+
+  const classes = () =>
+    ["st-tileGroup", disabled ? "st-tileGroup--disabled" : null, className]
+      .filter(Boolean)
+      .join(" ");
+
+  function select(next: string, itemDisabled?: boolean) {
+    if (disabled || itemDisabled) return;
+    value = next;
+    onchange?.(next);
+  }
+</script>
+
+<fieldset {...rest} class={classes()} {disabled}>
+  {#if legend}
+    <legend class={legendHidden ? "st-tileGroup__legend st-tileGroup__legend--hidden" : "st-tileGroup__legend"}
+    >{legend}</legend>
+  {/if}
+  <div class="st-tileGroup__items">
+    {#each items as item (item.value)}
+      {@const checked = value === item.value}
+      <label
+        class="st-tileGroup__tile"
+        class:st-tileGroup__tile--checked={checked}
+        class:st-tileGroup__tile--disabled={item.disabled || disabled}
+      >
+        <input
+          type="radio"
+          class="st-tileGroup__input"
+          name={groupName}
+          value={item.value}
+          {checked}
+          disabled={item.disabled || disabled}
+          onchange={() => select(item.value, item.disabled)}
+        />
+        <span class="st-tileGroup__content">
+          <span class="st-tileGroup__label">{item.label}</span>
+          {#if item.description}
+            <span class="st-tileGroup__description">{item.description}</span>
+          {/if}
+        </span>
+      </label>
+    {/each}
+  </div>
+</fieldset>
+
+<style>
+  .st-tileGroup {
+    border: 0;
+    color: var(--st-semantic-text-primary);
+    margin: 0;
+    min-width: 0;
+    padding: 0;
+  }
+
+  .st-tileGroup__legend {
+    color: var(--st-component-field-labelText, var(--st-semantic-text-primary));
+    font-weight: 600;
+    margin-block-end: var(--st-spacing-2, 0.5rem);
+    padding: 0;
+  }
+
+  .st-tileGroup__legend--hidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+
+  .st-tileGroup__items {
+    display: grid;
+    gap: var(--st-spacing-2, 0.5rem);
+    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+  }
+
+  .st-tileGroup__tile {
+    background: var(--st-component-card-background, var(--st-semantic-surface-raised));
+    border: 1px solid
+      var(--st-component-card-border, var(--st-semantic-border-subtle));
+    border-radius: var(--st-component-card-radius, 0.5rem);
+    cursor: pointer;
+    display: grid;
+    gap: 0.5rem;
+    grid-template-columns: auto 1fr;
+    padding: 0.875rem 1rem;
+    transition:
+      border-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
+      box-shadow var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+  }
+
+  .st-tileGroup__tile:hover:not(.st-tileGroup__tile--disabled) {
+    border-color: var(
+      --st-component-control-hoverBorder,
+      var(--st-semantic-border-strong)
+    );
+  }
+
+  .st-tileGroup__tile--checked {
+    border-color: var(
+      --st-component-control-focusRing,
+      var(--st-semantic-border-interactive)
+    );
+    box-shadow: 0 0 0 1px
+      var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+  }
+
+  .st-tileGroup__tile--disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  .st-tileGroup__input {
+    accent-color: var(
+      --st-component-control-focusRing,
+      var(--st-semantic-border-interactive)
+    );
+    margin: 0.25rem 0 0;
+  }
+
+  .st-tileGroup__content {
+    display: grid;
+    gap: 0.25rem;
+  }
+
+  .st-tileGroup__label {
+    font-size: 0.9375rem;
+    font-weight: 600;
+  }
+
+  .st-tileGroup__description {
+    color: var(--st-component-field-helpText, var(--st-semantic-text-secondary));
+    font-size: 0.8125rem;
+  }
+</style>

package/dist/TileGroup.svelte.d.ts

@@ -0,0 +1,21 @@
+export interface TileGroupItem {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+import type { HTMLAttributes } from "svelte/elements";
+type TileGroupProps = Omit<HTMLAttributes<HTMLFieldSetElement>, "class" | "onchange"> & {
+    items: TileGroupItem[];
+    value?: string;
+    name?: string;
+    legend?: string;
+    legendHidden?: boolean;
+    disabled?: boolean;
+    class?: string;
+    onchange?: (value: string) => void;
+};
+declare const TileGroup: import("svelte").Component<TileGroupProps, {}, "value">;
+type TileGroup = ReturnType<typeof TileGroup>;
+export default TileGroup;
+//# sourceMappingURL=TileGroup.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TileGroup.svelte.d.ts","sourceRoot":"","sources":["../src/lib/TileGroup.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,cAAc,GAAG,IAAI,CACxB,cAAc,CAAC,mBAAmB,CAAC,EACnC,OAAO,GAAG,UAAU,CACrB,GAAG;IACF,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AA0DJ,QAAA,MAAM,SAAS,yDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}