@sentropic/design-system-svelte 0.4.1 → 0.6.0

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"}

package/dist/InlineLoading.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type InlineLoadingProps = Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
+    label?: string;
+    status?: "active" | "success" | "error" | "inactive";
+    class?: string;
+  };
+
+  let {
+    label,
+    status = "active",
+    class: className,
+    ...rest
+  }: InlineLoadingProps = $props();
+
+  const classes = () =>
+    ["st-inlineLoading", `st-inlineLoading--${status}`, className].filter(Boolean).join(" ");
+
+  const role = () => (status === "error" ? "alert" : "status");
+</script>
+
+<div {...rest} class={classes()} role={role()} aria-live="polite">
+  <span class="st-inlineLoading__icon" aria-hidden="true">
+    {#if status === "active"}
+      <svg viewBox="0 0 16 16" width="16" height="16">
+        <circle cx="8" cy="8" r="6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-opacity="0.2" />
+        <path d="M14 8a6 6 0 0 0-6-6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+          <animateTransform attributeName="transform" type="rotate" from="0 8 8" to="360 8 8" dur="0.9s" repeatCount="indefinite" />
+        </path>
+      </svg>
+    {:else if status === "success"}
+      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" width="14" height="14">
+        <path d="m3 8 3.5 3.5L13 5" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+    {:else if status === "error"}
+      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" width="14" height="14">
+        <path d="M4 4l8 8M12 4l-8 8" stroke-linecap="round" />
+      </svg>
+    {/if}
+  </span>
+  {#if label}<span class="st-inlineLoading__label">{label}</span>{/if}
+</div>
+
+<style>
+  .st-inlineLoading {
+    align-items: center;
+    color: var(--st-semantic-text-secondary);
+    display: inline-flex;
+    font-size: 0.875rem;
+    gap: 0.5rem;
+  }
+
+  .st-inlineLoading__icon {
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+  }
+
+  .st-inlineLoading--active .st-inlineLoading__icon {
+    color: var(--st-semantic-action-primary);
+  }
+
+  .st-inlineLoading--success {
+    color: var(--st-semantic-feedback-success);
+  }
+
+  .st-inlineLoading--error {
+    color: var(--st-semantic-feedback-error);
+  }
+
+  .st-inlineLoading--inactive {
+    color: var(--st-semantic-text-muted);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .st-inlineLoading__icon svg path animateTransform {
+      display: none;
+    }
+  }
+</style>

package/dist/InlineLoading.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "svelte/elements";
+type InlineLoadingProps = Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
+    label?: string;
+    status?: "active" | "success" | "error" | "inactive";
+    class?: string;
+};
+declare const InlineLoading: import("svelte").Component<InlineLoadingProps, {}, "">;
+type InlineLoading = ReturnType<typeof InlineLoading>;
+export default InlineLoading;
+//# sourceMappingURL=InlineLoading.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InlineLoading.svelte.d.ts","sourceRoot":"","sources":["../src/lib/InlineLoading.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,GAAG;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA4CJ,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/OverflowMenu.svelte

@@ -0,0 +1,222 @@
+<script lang="ts" module>
+  export interface OverflowMenuItem {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    danger?: boolean;
+    onclick?: () => void;
+  }
+</script>
+
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type OverflowMenuProps = Omit<HTMLAttributes<HTMLDivElement>, "class" | "onselect"> & {
+    items: OverflowMenuItem[];
+    label?: string;
+    open?: boolean;
+    placement?: "bottom-start" | "bottom-end" | "top-start" | "top-end";
+    class?: string;
+    triggerLabel?: string;
+    onselect?: (value: string) => void;
+  };
+
+  let {
+    items,
+    label = "Menu",
+    open = $bindable(false),
+    placement = "bottom-end",
+    class: className,
+    triggerLabel = "More actions",
+    onselect,
+    ...rest
+  }: OverflowMenuProps = $props();
+
+  let host: HTMLDivElement | undefined = $state();
+
+  const classes = () =>
+    ["st-overflowMenu", `st-overflowMenu--${placement}`, className].filter(Boolean).join(" ");
+
+  function toggle() {
+    open = !open;
+  }
+
+  function close() {
+    open = false;
+  }
+
+  function selectItem(item: OverflowMenuItem) {
+    if (item.disabled) return;
+    item.onclick?.();
+    onselect?.(item.value);
+    close();
+  }
+
+  function onWindowKeydown(event: KeyboardEvent) {
+    if (event.key === "Escape" && open) {
+      event.preventDefault();
+      close();
+    }
+  }
+
+  function onWindowPointerDown(event: MouseEvent) {
+    if (!open) return;
+    const target = event.target as Node | null;
+    if (host && target && !host.contains(target)) close();
+  }
+</script>
+
+<svelte:window onkeydown={onWindowKeydown} onpointerdown={onWindowPointerDown} />
+
+<div {...rest} bind:this={host} class={classes()}>
+  <button
+    type="button"
+    class="st-overflowMenu__trigger"
+    aria-haspopup="menu"
+    aria-expanded={open ? "true" : "false"}
+    aria-label={triggerLabel}
+    onclick={toggle}
+  >
+    <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" focusable="false">
+      <circle cx="3" cy="8" r="1.4" fill="currentColor" />
+      <circle cx="8" cy="8" r="1.4" fill="currentColor" />
+      <circle cx="13" cy="8" r="1.4" fill="currentColor" />
+    </svg>
+  </button>
+  {#if open}
+    <ul class="st-overflowMenu__list" role="menu" aria-label={label}>
+      {#each items as item (item.value)}
+        <li role="none" class="st-overflowMenu__listItem">
+          <button
+            type="button"
+            class="st-overflowMenu__item"
+            class:st-overflowMenu__item--danger={item.danger}
+            role="menuitem"
+            aria-disabled={item.disabled ? "true" : undefined}
+            disabled={item.disabled}
+            onclick={() => selectItem(item)}
+          >
+            {item.label}
+          </button>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  .st-overflowMenu {
+    display: inline-block;
+    position: relative;
+  }
+
+  .st-overflowMenu__trigger {
+    align-items: center;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: var(--st-component-overflowMenu-triggerRadius, var(--st-radius-small, 0.375rem));
+    color: var(--st-component-overflowMenu-triggerText, var(--st-semantic-text-primary));
+    cursor: pointer;
+    display: inline-flex;
+    height: 2rem;
+    justify-content: center;
+    padding: 0;
+    width: 2rem;
+  }
+
+  .st-overflowMenu__trigger:hover {
+    background: var(
+      --st-component-overflowMenu-triggerHoverBackground,
+      var(--st-semantic-surface-subtle)
+    );
+  }
+
+  .st-overflowMenu__trigger:focus-visible {
+    border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+    box-shadow: 0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+    outline: none;
+  }
+
+  .st-overflowMenu__trigger[aria-expanded="true"] {
+    background: var(
+      --st-component-overflowMenu-triggerHoverBackground,
+      var(--st-semantic-surface-subtle)
+    );
+  }
+
+  .st-overflowMenu__list {
+    background: var(--st-component-menu-background, var(--st-semantic-surface-raised));
+    border: 1px solid var(--st-component-menu-border, var(--st-semantic-border-subtle));
+    border-radius: var(--st-component-menu-radius, 0.375rem);
+    box-shadow: var(--st-component-menu-shadow, 0 8px 24px rgb(15 23 42 / 0.14));
+    display: grid;
+    list-style: none;
+    margin: 0;
+    min-width: 12rem;
+    padding: var(--st-spacing-1, 0.25rem);
+    position: absolute;
+    z-index: var(--st-component-popover-zIndex, 80);
+  }
+
+  .st-overflowMenu--bottom-end .st-overflowMenu__list {
+    right: 0;
+    top: calc(100% + var(--st-spacing-1, 0.25rem));
+  }
+
+  .st-overflowMenu--bottom-start .st-overflowMenu__list {
+    left: 0;
+    top: calc(100% + var(--st-spacing-1, 0.25rem));
+  }
+
+  .st-overflowMenu--top-end .st-overflowMenu__list {
+    bottom: calc(100% + var(--st-spacing-1, 0.25rem));
+    right: 0;
+  }
+
+  .st-overflowMenu--top-start .st-overflowMenu__list {
+    bottom: calc(100% + var(--st-spacing-1, 0.25rem));
+    left: 0;
+  }
+
+  .st-overflowMenu__listItem {
+    margin: 0;
+    padding: 0;
+  }
+
+  .st-overflowMenu__item {
+    background: transparent;
+    border: 0;
+    border-radius: var(--st-radius-small, 0.375rem);
+    color: var(--st-component-menu-text, var(--st-semantic-text-primary));
+    cursor: pointer;
+    display: block;
+    font: inherit;
+    padding: var(--st-spacing-2, 0.5rem) var(--st-spacing-3, 0.75rem);
+    text-align: left;
+    width: 100%;
+  }
+
+  .st-overflowMenu__item:hover:not(:disabled),
+  .st-overflowMenu__item:focus-visible {
+    background: var(--st-component-menu-itemHoverBackground, var(--st-semantic-surface-subtle));
+    outline: none;
+  }
+
+  .st-overflowMenu__item:disabled {
+    color: var(--st-component-menu-disabledText, var(--st-semantic-text-muted));
+    cursor: not-allowed;
+  }
+
+  .st-overflowMenu__item--danger {
+    color: var(--st-component-overflowMenu-dangerText, var(--st-semantic-feedback-error));
+  }
+
+  .st-overflowMenu__item--danger:hover:not(:disabled),
+  .st-overflowMenu__item--danger:focus-visible {
+    background: var(
+      --st-component-overflowMenu-dangerHoverBackground,
+      var(--st-semantic-feedback-error)
+    );
+    color: var(--st-component-overflowMenu-dangerHoverText, var(--st-semantic-action-primaryText));
+  }
+</style>

package/dist/OverflowMenu.svelte.d.ts

@@ -0,0 +1,21 @@
+export interface OverflowMenuItem {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    danger?: boolean;
+    onclick?: () => void;
+}
+import type { HTMLAttributes } from "svelte/elements";
+type OverflowMenuProps = Omit<HTMLAttributes<HTMLDivElement>, "class" | "onselect"> & {
+    items: OverflowMenuItem[];
+    label?: string;
+    open?: boolean;
+    placement?: "bottom-start" | "bottom-end" | "top-start" | "top-end";
+    class?: string;
+    triggerLabel?: string;
+    onselect?: (value: string) => void;
+};
+declare const OverflowMenu: import("svelte").Component<OverflowMenuProps, {}, "open">;
+type OverflowMenu = ReturnType<typeof OverflowMenu>;
+export default OverflowMenu;
+//# sourceMappingURL=OverflowMenu.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowMenu.svelte.d.ts","sourceRoot":"","sources":["../src/lib/OverflowMenu.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,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACpF,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,cAAc,GAAG,YAAY,GAAG,WAAW,GAAG,SAAS,CAAC;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AA+EJ,QAAA,MAAM,YAAY,2DAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}