@sentropic/design-system-svelte 0.5.0 → 0.7.0

package/dist/AspectRatio.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type AspectRatioProps = Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
+    ratio?: string;
+    class?: string;
+    children?: Snippet;
+  };
+
+  let {
+    ratio = "16/9",
+    class: className,
+    children,
+    ...rest
+  }: AspectRatioProps = $props();
+
+  const classes = () => ["st-aspectRatio", className].filter(Boolean).join(" ");
+</script>
+
+<div {...rest} class={classes()} style:aspect-ratio={ratio}>
+  {@render children?.()}
+</div>
+
+<style>
+  .st-aspectRatio {
+    display: block;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+  }
+
+  .st-aspectRatio > :global(*) {
+    block-size: 100%;
+    inline-size: 100%;
+  }
+
+  .st-aspectRatio > :global(img),
+  .st-aspectRatio > :global(video),
+  .st-aspectRatio > :global(iframe) {
+    display: block;
+    object-fit: cover;
+  }
+</style>

package/dist/AspectRatio.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type AspectRatioProps = Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
+    ratio?: string;
+    class?: string;
+    children?: Snippet;
+};
+declare const AspectRatio: import("svelte").Component<AspectRatioProps, {}, "">;
+type AspectRatio = ReturnType<typeof AspectRatio>;
+export default AspectRatio;
+//# sourceMappingURL=AspectRatio.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AspectRatio.svelte.d.ts","sourceRoot":"","sources":["../src/lib/AspectRatio.svelte.ts"],"names":[],"mappings":"AAGA,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,CAAC,GAAG;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAwBJ,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/CodeSnippet.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import CopyButton from "./CopyButton.svelte";
+
+  type CodeSnippetProps = {
+    code: string;
+    language?: string;
+    inline?: boolean;
+    copyable?: boolean;
+    copyLabel?: string;
+    copiedLabel?: string;
+    class?: string;
+  };
+
+  let {
+    code,
+    language,
+    inline = false,
+    copyable = true,
+    copyLabel = "Copy",
+    copiedLabel = "Copied",
+    class: className
+  }: CodeSnippetProps = $props();
+
+  const inlineClasses = () =>
+    ["st-codeSnippet--inline", className].filter(Boolean).join(" ");
+  const blockClasses = () => ["st-codeSnippet", className].filter(Boolean).join(" ");
+</script>
+
+{#if inline}
+  <code class={inlineClasses()} data-language={language}>{code}</code>
+{:else}
+  <div class="st-codeSnippet__wrapper">
+    <pre class={blockClasses()} data-language={language}><code
+        class="st-codeSnippet__code">{code}</code></pre>
+    {#if copyable}
+      <span class="st-codeSnippet__copy">
+        <CopyButton value={code} size="sm" label={copyLabel} copiedLabel={copiedLabel} />
+      </span>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .st-codeSnippet__wrapper {
+    position: relative;
+  }
+
+  .st-codeSnippet {
+    background: var(
+      --st-component-codeSnippet-background,
+      var(--st-semantic-surface-subtle)
+    );
+    border: 1px solid
+      var(--st-component-codeSnippet-border, var(--st-semantic-border-subtle));
+    border-radius: var(--st-component-codeSnippet-radius, 0.375rem);
+    color: var(--st-component-codeSnippet-text, var(--st-semantic-text-primary));
+    font-family: var(--st-font-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
+    font-size: 0.8125rem;
+    line-height: 1.5;
+    margin: 0;
+    max-height: var(--st-component-codeSnippet-maxHeight, 16rem);
+    overflow: auto;
+    padding: 0.75rem 0.875rem;
+    padding-inline-end: 4rem;
+  }
+
+  .st-codeSnippet__code {
+    font: inherit;
+    white-space: pre;
+  }
+
+  .st-codeSnippet__copy {
+    position: absolute;
+    inset-block-start: 0.375rem;
+    inset-inline-end: 0.375rem;
+  }
+
+  .st-codeSnippet--inline {
+    background: var(
+      --st-component-codeSnippet-background,
+      var(--st-semantic-surface-subtle)
+    );
+    border: 1px solid
+      var(--st-component-codeSnippet-border, var(--st-semantic-border-subtle));
+    border-radius: var(--st-radius-sm, 0.25rem);
+    color: var(--st-component-codeSnippet-text, var(--st-semantic-text-primary));
+    font-family: var(--st-font-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
+    font-size: 0.8125rem;
+    padding: 0.0625rem 0.375rem;
+  }
+</style>

package/dist/CodeSnippet.svelte.d.ts

@@ -0,0 +1,13 @@
+type CodeSnippetProps = {
+    code: string;
+    language?: string;
+    inline?: boolean;
+    copyable?: boolean;
+    copyLabel?: string;
+    copiedLabel?: string;
+    class?: string;
+};
+declare const CodeSnippet: import("svelte").Component<CodeSnippetProps, {}, "">;
+type CodeSnippet = ReturnType<typeof CodeSnippet>;
+export default CodeSnippet;
+//# sourceMappingURL=CodeSnippet.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CodeSnippet.svelte.d.ts","sourceRoot":"","sources":["../src/lib/CodeSnippet.svelte.ts"],"names":[],"mappings":"AAME,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAqCJ,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/Form.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLFormAttributes } from "svelte/elements";
+
+  type FormStatus = "idle" | "submitting" | "submitted" | "error";
+
+  type FormProps = Omit<HTMLFormAttributes, "class" | "onsubmit"> & {
+    onsubmit?: (event: SubmitEvent) => void | Promise<void>;
+    helperText?: string;
+    errorText?: string;
+    successText?: string;
+    submitting?: boolean;
+    noNoscript?: boolean;
+    class?: string;
+    children: Snippet;
+  };
+
+  let {
+    onsubmit,
+    helperText,
+    errorText,
+    successText,
+    submitting = $bindable(false),
+    noNoscript = false,
+    class: className,
+    children,
+    ...rest
+  }: FormProps = $props();
+
+  let status = $state<FormStatus>("idle");
+  let internalError = $state<string | undefined>(undefined);
+
+  const classes = () => ["st-form", className].filter(Boolean).join(" ");
+
+  async function handleSubmit(event: SubmitEvent) {
+    if (!onsubmit) return;
+    event.preventDefault();
+    internalError = undefined;
+    status = "submitting";
+    submitting = true;
+    try {
+      await onsubmit(event);
+      status = "submitted";
+    } catch (err) {
+      status = "error";
+      internalError = err instanceof Error ? err.message : String(err);
+    } finally {
+      submitting = false;
+    }
+  }
+
+  const resolvedErrorText = () => errorText ?? internalError;
+  const showError = () => status === "error" && Boolean(resolvedErrorText());
+  const showSuccess = () => status === "submitted" && Boolean(successText);
+  const showHelper = () =>
+    Boolean(helperText) && !showError() && !showSuccess();
+</script>
+
+<form
+  {...rest}
+  class={classes()}
+  onsubmit={handleSubmit}
+  aria-busy={status === "submitting" ? "true" : undefined}
+>
+  <div class="st-form__body">
+    {@render children()}
+  </div>
+  {#if showError()}
+    <p class="st-form__message st-form__message--error" role="alert">
+      {resolvedErrorText()}
+    </p>
+  {:else if showSuccess()}
+    <p class="st-form__message st-form__message--success" role="status">
+      {successText}
+    </p>
+  {:else if showHelper()}
+    <p class="st-form__message st-form__message--help">{helperText}</p>
+  {/if}
+  {#if !noNoscript}
+    <noscript>
+      <p class="st-form__message st-form__message--error">
+        JavaScript is required to submit this form.
+      </p>
+    </noscript>
+  {/if}
+</form>
+
+<style>
+  .st-form {
+    display: grid;
+    gap: var(--st-component-form-gap, 1rem);
+    width: 100%;
+  }
+
+  .st-form__body {
+    display: grid;
+    gap: var(--st-component-form-fieldGap, 1rem);
+  }
+
+  .st-form__message {
+    font-size: 0.8125rem;
+    line-height: 1.4;
+    margin: 0;
+  }
+
+  .st-form__message--help {
+    color: var(--st-component-form-helpText, var(--st-semantic-text-secondary));
+  }
+
+  .st-form__message--error {
+    color: var(--st-component-form-errorText, var(--st-semantic-feedback-error));
+  }
+
+  .st-form__message--success {
+    color: var(--st-component-form-successText, var(--st-semantic-feedback-success));
+  }
+</style>

package/dist/Form.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from "svelte";
+import type { HTMLFormAttributes } from "svelte/elements";
+type FormProps = Omit<HTMLFormAttributes, "class" | "onsubmit"> & {
+    onsubmit?: (event: SubmitEvent) => void | Promise<void>;
+    helperText?: string;
+    errorText?: string;
+    successText?: string;
+    submitting?: boolean;
+    noNoscript?: boolean;
+    class?: string;
+    children: Snippet;
+};
+declare const Form: import("svelte").Component<FormProps, {}, "submitting">;
+type Form = ReturnType<typeof Form>;
+export default Form;
+//# sourceMappingURL=Form.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Form.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Form.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAKxD,KAAK,SAAS,GAAG,IAAI,CAAC,kBAAkB,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAChE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACxD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AA4EJ,QAAA,MAAM,IAAI,yDAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/FormGroup.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLFieldsetAttributes } from "svelte/elements";
+
+  type FormGroupProps = Omit<HTMLFieldsetAttributes, "class"> & {
+    legend?: string;
+    helperText?: string;
+    disabled?: boolean;
+    class?: string;
+    children: Snippet;
+  };
+
+  let {
+    legend,
+    helperText,
+    disabled = false,
+    class: className,
+    children,
+    ...rest
+  }: FormGroupProps = $props();
+
+  const classes = () => ["st-form-group", className].filter(Boolean).join(" ");
+</script>
+
+<fieldset {...rest} class={classes()} {disabled}>
+  {#if legend}<legend class="st-form-group__legend">{legend}</legend>{/if}
+  <div class="st-form-group__body">
+    {@render children()}
+  </div>
+  {#if helperText}
+    <p class="st-form-group__help">{helperText}</p>
+  {/if}
+</fieldset>
+
+<style>
+  .st-form-group {
+    border: 1px solid
+      var(--st-component-formGroup-border, var(--st-semantic-border-subtle));
+    border-radius: var(--st-component-formGroup-radius, 0.5rem);
+    color: var(--st-semantic-text-primary);
+    display: grid;
+    gap: var(--st-component-formGroup-gap, 1rem);
+    margin: 0;
+    padding: var(--st-component-formGroup-padding, 1rem);
+  }
+
+  .st-form-group__legend {
+    font-size: 0.875rem;
+    font-weight: 600;
+    padding: 0 0.25rem;
+  }
+
+  .st-form-group__body {
+    display: grid;
+    gap: var(--st-component-formGroup-fieldGap, 1rem);
+  }
+
+  .st-form-group__help {
+    color: var(
+      --st-component-formGroup-helpText,
+      var(--st-semantic-text-secondary)
+    );
+    font-size: 0.8125rem;
+    line-height: 1.4;
+    margin: 0;
+  }
+
+  .st-form-group:disabled {
+    opacity: 0.6;
+  }
+</style>

package/dist/FormGroup.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+import type { HTMLFieldsetAttributes } from "svelte/elements";
+type FormGroupProps = Omit<HTMLFieldsetAttributes, "class"> & {
+    legend?: string;
+    helperText?: string;
+    disabled?: boolean;
+    class?: string;
+    children: Snippet;
+};
+declare const FormGroup: import("svelte").Component<FormGroupProps, {}, "">;
+type FormGroup = ReturnType<typeof FormGroup>;
+export default FormGroup;
+//# sourceMappingURL=FormGroup.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormGroup.svelte.d.ts","sourceRoot":"","sources":["../src/lib/FormGroup.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAG5D,KAAK,cAAc,GAAG,IAAI,CAAC,sBAAsB,EAAE,OAAO,CAAC,GAAG;IAC5D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAgCJ,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/Header.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type HeaderProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    title?: string;
+    label?: string;
+    sticky?: boolean;
+    class?: string;
+    logo?: Snippet;
+    navigation?: Snippet;
+    actions?: Snippet;
+    children?: Snippet;
+  };
+
+  let {
+    title,
+    label = "Application header",
+    sticky = true,
+    class: className,
+    logo,
+    navigation,
+    actions,
+    children,
+    ...rest
+  }: HeaderProps = $props();
+
+  const classes = () =>
+    ["st-header", sticky ? "st-header--sticky" : null, className].filter(Boolean).join(" ");
+</script>
+
+<header {...rest} class={classes()} aria-label={label}>
+  <div class="st-header__leading">
+    {#if logo}
+      <span class="st-header__logo">{@render logo()}</span>
+    {/if}
+    {#if title}
+      <span class="st-header__title">{title}</span>
+    {/if}
+  </div>
+  {#if navigation}
+    <nav class="st-header__navigation" aria-label="Primary">
+      {@render navigation()}
+    </nav>
+  {/if}
+  {#if actions}
+    <div class="st-header__actions">
+      {@render actions()}
+    </div>
+  {/if}
+  {#if children}
+    {@render children()}
+  {/if}
+</header>
+
+<style>
+  .st-header {
+    align-items: center;
+    background: var(--st-component-header-background, var(--st-semantic-surface-default));
+    border-bottom: 1px solid var(--st-component-header-border, var(--st-semantic-border-subtle));
+    box-shadow: var(--st-component-header-shadow, 0 1px 3px rgb(15 23 42 / 0.06));
+    color: var(--st-component-header-text, var(--st-semantic-text-primary));
+    display: flex;
+    gap: var(--st-spacing-4, 1rem);
+    height: var(--st-component-header-height, 3.5rem);
+    padding: 0 var(--st-spacing-4, 1rem);
+    width: 100%;
+    z-index: var(--st-component-header-zIndex, 70);
+  }
+
+  .st-header--sticky {
+    position: sticky;
+    top: 0;
+  }
+
+  .st-header__leading {
+    align-items: center;
+    display: flex;
+    flex: 0 0 auto;
+    gap: var(--st-spacing-3, 0.75rem);
+  }
+
+  .st-header__logo {
+    align-items: center;
+    color: var(--st-component-header-logoText, var(--st-semantic-text-primary));
+    display: inline-flex;
+  }
+
+  .st-header__title {
+    color: var(--st-component-header-titleText, var(--st-semantic-text-primary));
+    font-size: 0.9375rem;
+    font-weight: 650;
+    letter-spacing: -0.005em;
+    line-height: 1.2;
+  }
+
+  .st-header__navigation {
+    align-items: center;
+    display: flex;
+    flex: 1 1 auto;
+    justify-content: center;
+    min-width: 0;
+  }
+
+  .st-header__actions {
+    align-items: center;
+    display: flex;
+    flex: 0 0 auto;
+    gap: var(--st-spacing-2, 0.5rem);
+    margin-left: auto;
+  }
+
+  /*
+   * When no navigation snippet is provided, the actions area still flushes
+   * to the right because flex:1 leading + auto margin keep the layout balanced.
+   */
+</style>

package/dist/Header.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type HeaderProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    title?: string;
+    label?: string;
+    sticky?: boolean;
+    class?: string;
+    logo?: Snippet;
+    navigation?: Snippet;
+    actions?: Snippet;
+    children?: Snippet;
+};
+declare const Header: import("svelte").Component<HeaderProps, {}, "">;
+type Header = ReturnType<typeof Header>;
+export default Header;
+//# sourceMappingURL=Header.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Header.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Header.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,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAkDJ,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}