@sentropic/design-system-svelte 0.5.0 → 0.7.0

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

package/dist/PaginationNav.svelte

@@ -0,0 +1,219 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type PaginationNavProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    page: number;
+    pageCount: number;
+    siblings?: number;
+    label?: string;
+    previousLabel?: string;
+    nextLabel?: string;
+    class?: string;
+    onPageChange?: (page: number) => void;
+  };
+
+  let {
+    page = $bindable(1),
+    pageCount,
+    siblings = 1,
+    label = "Pagination",
+    previousLabel = "Previous page",
+    nextLabel = "Next page",
+    class: className,
+    onPageChange,
+    ...rest
+  }: PaginationNavProps = $props();
+
+  type Slot = number | "ellipsis-start" | "ellipsis-end";
+
+  const classes = () => ["st-paginationNav", className].filter(Boolean).join(" ");
+
+  const slots = $derived.by<Slot[]>(() => {
+    const total = Math.max(0, Math.floor(pageCount));
+    if (total <= 0) return [];
+
+    const current = Math.min(Math.max(1, Math.floor(page)), total);
+    const sib = Math.max(0, Math.floor(siblings));
+
+    // Minimum: first, last, current, sib left, sib right, two ellipses
+    const minSlots = sib * 2 + 5;
+    if (total <= minSlots) {
+      return Array.from({ length: total }, (_, i) => i + 1) as Slot[];
+    }
+
+    const leftSibling = Math.max(current - sib, 1);
+    const rightSibling = Math.min(current + sib, total);
+    const showLeftEllipsis = leftSibling > 2;
+    const showRightEllipsis = rightSibling < total - 1;
+
+    const result: Slot[] = [];
+
+    if (!showLeftEllipsis && showRightEllipsis) {
+      const leftItemCount = 3 + sib * 2;
+      for (let i = 1; i <= leftItemCount; i += 1) result.push(i);
+      result.push("ellipsis-end");
+      result.push(total);
+    } else if (showLeftEllipsis && !showRightEllipsis) {
+      result.push(1);
+      result.push("ellipsis-start");
+      const rightItemCount = 3 + sib * 2;
+      for (let i = total - rightItemCount + 1; i <= total; i += 1) result.push(i);
+    } else if (showLeftEllipsis && showRightEllipsis) {
+      result.push(1);
+      result.push("ellipsis-start");
+      for (let i = leftSibling; i <= rightSibling; i += 1) result.push(i);
+      result.push("ellipsis-end");
+      result.push(total);
+    } else {
+      for (let i = 1; i <= total; i += 1) result.push(i);
+    }
+
+    return result;
+  });
+
+  function go(target: number) {
+    const total = Math.max(0, Math.floor(pageCount));
+    if (target < 1 || target > total || target === page) return;
+    page = target;
+    onPageChange?.(target);
+  }
+</script>
+
+<nav {...rest} class={classes()} aria-label={label}>
+  <ul class="st-paginationNav__list">
+    <li>
+      <button
+        type="button"
+        class="st-paginationNav__nav"
+        aria-label={previousLabel}
+        disabled={page <= 1 || pageCount <= 0}
+        onclick={() => go(page - 1)}
+      >
+        <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" focusable="false">
+          <path
+            d="M10 3 5 8l5 5"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.6"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </button>
+    </li>
+    {#each slots as slot, index (typeof slot === "number" ? `p-${slot}` : `${slot}-${index}`)}
+      <li>
+        {#if slot === "ellipsis-start" || slot === "ellipsis-end"}
+          <span class="st-paginationNav__ellipsis" aria-hidden="true">…</span>
+        {:else}
+          <button
+            type="button"
+            class="st-paginationNav__page"
+            class:st-paginationNav__page--active={slot === page}
+            aria-label={`Page ${slot}`}
+            aria-current={slot === page ? "page" : undefined}
+            onclick={() => go(slot)}
+          >
+            {slot}
+          </button>
+        {/if}
+      </li>
+    {/each}
+    <li>
+      <button
+        type="button"
+        class="st-paginationNav__nav"
+        aria-label={nextLabel}
+        disabled={page >= pageCount || pageCount <= 0}
+        onclick={() => go(page + 1)}
+      >
+        <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" focusable="false">
+          <path
+            d="M6 3l5 5-5 5"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.6"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </button>
+    </li>
+  </ul>
+</nav>
+
+<style>
+  .st-paginationNav {
+    color: var(--st-component-paginationNav-text, var(--st-semantic-text-primary));
+    display: inline-block;
+  }
+
+  .st-paginationNav__list {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--st-spacing-1, 0.25rem);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .st-paginationNav__page,
+  .st-paginationNav__nav {
+    align-items: center;
+    background: var(--st-component-paginationNav-background, var(--st-semantic-surface-default));
+    border: 1px solid var(--st-component-paginationNav-border, var(--st-semantic-border-subtle));
+    border-radius: var(--st-component-paginationNav-radius, 0.375rem);
+    color: var(--st-component-paginationNav-text, var(--st-semantic-text-primary));
+    cursor: pointer;
+    display: inline-flex;
+    font: inherit;
+    font-size: 0.875rem;
+    height: 2.25rem;
+    justify-content: center;
+    min-width: 2.25rem;
+    padding: 0 0.5rem;
+  }
+
+  .st-paginationNav__page:hover:not(:disabled),
+  .st-paginationNav__nav:hover:not(:disabled) {
+    background: var(
+      --st-component-paginationNav-hoverBackground,
+      var(--st-semantic-surface-subtle)
+    );
+  }
+
+  .st-paginationNav__page:focus-visible,
+  .st-paginationNav__nav: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-paginationNav__page--active {
+    background: var(--st-component-paginationNav-activeBackground, var(--st-semantic-action-primary));
+    border-color: var(--st-component-paginationNav-activeBackground, var(--st-semantic-action-primary));
+    color: var(--st-component-paginationNav-activeText, var(--st-semantic-action-primaryText));
+  }
+
+  .st-paginationNav__page--active:hover {
+    background: var(--st-component-paginationNav-activeBackground, var(--st-semantic-action-primary));
+  }
+
+  .st-paginationNav__page:disabled,
+  .st-paginationNav__nav:disabled {
+    color: var(--st-component-paginationNav-disabledText, var(--st-semantic-text-muted));
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .st-paginationNav__ellipsis {
+    align-items: center;
+    color: var(--st-component-paginationNav-ellipsisText, var(--st-semantic-text-muted));
+    display: inline-flex;
+    height: 2.25rem;
+    justify-content: center;
+    min-width: 2.25rem;
+    padding: 0 0.25rem;
+  }
+</style>

package/dist/PaginationNav.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from "svelte/elements";
+type PaginationNavProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    page: number;
+    pageCount: number;
+    siblings?: number;
+    label?: string;
+    previousLabel?: string;
+    nextLabel?: string;
+    class?: string;
+    onPageChange?: (page: number) => void;
+};
+declare const PaginationNav: import("svelte").Component<PaginationNavProps, {}, "page">;
+type PaginationNav = ReturnType<typeof PaginationNav>;
+export default PaginationNav;
+//# sourceMappingURL=PaginationNav.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationNav.svelte.d.ts","sourceRoot":"","sources":["../src/lib/PaginationNav.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IACrE,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AA2GJ,QAAA,MAAM,aAAa,4DAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}