seblify 0.2.1 → 0.3.0

package/dist/components/display/typography/accordion/Accordion.svelte

@@ -0,0 +1,347 @@
+<script lang="ts" module>
+  let nextAccordionId = 0;
+</script>
+
+<script lang="ts">
+  import type { SeblifyProps } from 'seblify';
+  import type { Snippet } from 'svelte';
+  import { onMount, tick } from 'svelte';
+  import ChevronRightIcon from '../../../../icons/generated/chevron-right.svelte';
+  import Collapse from '../../motion/collapse/Collapse.svelte';
+  import { getAccordionGroupContext } from './context';
+
+  const COLLAPSE_DURATION_MS = 220;
+
+  type Props = SeblifyProps<{
+    [key: string]: unknown;
+    children?: Snippet;
+    class?: string;
+    description?: string;
+    disabled?: boolean;
+    open?: boolean;
+    title: string;
+    value?: string;
+  }>;
+
+  let {
+    children,
+    class: className,
+    description,
+    disabled = false,
+    open = $bindable(false),
+    title,
+    value,
+    ...restProps
+  }: Props = $props();
+
+  const group = getAccordionGroupContext();
+  const generatedValue = `accordion-${++nextAccordionId}`;
+  const itemValue = $derived(value ?? generatedValue);
+  let closeTimer: ReturnType<typeof setTimeout> | undefined;
+  let hasInitialized = false;
+  let isRegisteredWithGroup = $state(false);
+  let motionVersion = 0;
+  let nativeOpen = $state(open);
+  let visualOpen = $state(open);
+
+  function clearCloseTimer() {
+    if (closeTimer) {
+      clearTimeout(closeTimer);
+      closeTimer = undefined;
+    }
+  }
+
+  function nextFrame(): Promise<void> {
+    return new Promise((resolve) => {
+      if (typeof requestAnimationFrame === 'function') {
+        requestAnimationFrame(() => resolve());
+        return;
+      }
+
+      setTimeout(resolve, 0);
+    });
+  }
+
+  function finishClose(version = motionVersion) {
+    if (version !== motionVersion || open) {
+      return;
+    }
+
+    clearCloseTimer();
+    nativeOpen = false;
+  }
+
+  $effect(() => {
+    const nextOpen = open;
+    const version = ++motionVersion;
+
+    clearCloseTimer();
+
+    if (!hasInitialized) {
+      hasInitialized = true;
+      nativeOpen = nextOpen;
+      visualOpen = nextOpen;
+      return;
+    }
+
+    if (nextOpen) {
+      nativeOpen = true;
+
+      void tick()
+        .then(nextFrame)
+        .then(() => {
+          if (version !== motionVersion || !open) {
+            return;
+          }
+
+          visualOpen = true;
+        });
+
+      return;
+    }
+
+    nativeOpen = true;
+    visualOpen = false;
+
+    closeTimer = setTimeout(() => {
+      finishClose(version);
+    }, COLLAPSE_DURATION_MS + 80);
+  });
+
+  onMount(() => {
+    if (!group) {
+      return;
+    }
+
+    group.register(itemValue, open);
+    open = group.isOpen(itemValue);
+    isRegisteredWithGroup = true;
+
+    return () => {
+      isRegisteredWithGroup = false;
+      group.unregister(itemValue);
+    };
+  });
+
+  $effect(() => {
+    if (!group || !isRegisteredWithGroup) {
+      return;
+    }
+
+    const groupOpen = group.isOpen(itemValue);
+
+    if (open !== groupOpen) {
+      open = groupOpen;
+    }
+  });
+
+  function handleSummaryClick(event: MouseEvent) {
+    event.preventDefault();
+
+    if (disabled) {
+      event.stopPropagation();
+      return;
+    }
+
+    setOpenState(!open);
+  }
+
+  function handleSummaryKeydown(event: KeyboardEvent) {
+    if (event.key !== 'Enter' && event.key !== ' ') {
+      return;
+    }
+
+    event.preventDefault();
+
+    if (disabled) {
+      event.stopPropagation();
+      return;
+    }
+
+    setOpenState(!open);
+  }
+
+  function handleToggle(event: Event) {
+    const details = event.currentTarget as HTMLDetailsElement;
+
+    if (disabled) {
+      details.open = nativeOpen;
+      return;
+    }
+
+    if (details.open !== nativeOpen) {
+      setOpenState(details.open);
+    }
+  }
+
+  function setOpenState(nextOpen: boolean) {
+    if (group) {
+      group.setOpen(itemValue, nextOpen);
+      open = group.isOpen(itemValue);
+      return;
+    }
+
+    open = nextOpen;
+  }
+
+  function handleCollapseTransitionEnd(event: TransitionEvent) {
+    if (event.propertyName !== 'height') {
+      return;
+    }
+
+    finishClose();
+  }
+</script>
+
+<details
+  {...restProps}
+  class={`accordion${className ? ` ${className}` : ''}`}
+  data-disabled={disabled}
+  data-state={open ? 'open' : 'closed'}
+  open={nativeOpen}
+  ontoggle={handleToggle}
+>
+  <summary
+    class="accordion__summary"
+    aria-disabled={disabled}
+    aria-expanded={open}
+    onclick={handleSummaryClick}
+    onkeydown={handleSummaryKeydown}
+    tabindex={disabled ? -1 : undefined}
+  >
+    <span class="accordion__summary-text">
+      <span class="accordion__title">{title}</span>
+      {#if description}
+        <span class="accordion__description">{description}</span>
+      {/if}
+    </span>
+    <span class="accordion__icon" aria-hidden="true">
+      <ChevronRightIcon size="1.125rem" />
+    </span>
+  </summary>
+
+  <Collapse
+    class="accordion__collapse"
+    expanded={visualOpen}
+    aria-hidden={!open}
+    ontransitionend={handleCollapseTransitionEnd}
+  >
+    <div class="accordion__body">
+      {@render children?.()}
+    </div>
+  </Collapse>
+</details>
+
+<style>
+  .accordion {
+    --accordion-radius: 8px;
+    --accordion-border: var(--seblify-color-border, #c8d2df);
+    --accordion-border-hover: var(--seblify-color-border-strong, #aab7c5);
+    --accordion-surface: var(--seblify-color-surface, #ffffff);
+    --accordion-surface-hover: var(--seblify-color-surface-hover, #f1f4f9);
+    --accordion-text: var(--seblify-color-text, #172033);
+    --accordion-description: var(--seblify-color-text-muted, #516176);
+    --accordion-focus-ring: color-mix(
+      in srgb,
+      var(--seblify-color-focus-ring, #9bd4d8) 72%,
+      transparent
+    );
+
+    display: block;
+    border: 1px solid var(--accordion-border);
+    border-radius: var(--accordion-radius);
+    background: var(--accordion-surface);
+    color: var(--accordion-text);
+  }
+
+  .accordion__summary {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 0.75rem;
+    align-items: center;
+    min-height: 3rem;
+    padding: 0.75rem 1rem;
+    border-radius: calc(var(--accordion-radius) - 1px);
+    cursor: pointer;
+    list-style: none;
+  }
+
+  .accordion[data-state='open'] .accordion__summary {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .accordion__summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .accordion__summary:hover {
+    background: var(--accordion-surface-hover);
+  }
+
+  .accordion__summary:focus-visible {
+    outline: 3px solid var(--accordion-focus-ring);
+    outline-offset: 2px;
+  }
+
+  .accordion__summary-text {
+    display: grid;
+    gap: 0.25rem;
+    min-width: 0;
+  }
+
+  .accordion__title {
+    overflow-wrap: anywhere;
+    font-size: 0.95rem;
+    font-weight: 650;
+    line-height: 1.35;
+  }
+
+  .accordion__description {
+    overflow-wrap: anywhere;
+    color: var(--accordion-description);
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+
+  .accordion__icon {
+    display: inline-flex;
+    color: var(--accordion-description);
+    transition: transform 160ms ease;
+  }
+
+  .accordion[data-state='open'] .accordion__icon {
+    transform: rotate(90deg);
+  }
+
+  .accordion :global(.accordion__collapse) {
+    display: block;
+  }
+
+  .accordion__body {
+    padding: 0 1rem 1rem;
+    color: var(--accordion-text);
+    font-size: 0.95rem;
+    line-height: 1.55;
+  }
+
+  .accordion__body :global(:first-child) {
+    margin-top: 0;
+  }
+
+  .accordion__body :global(:last-child) {
+    margin-bottom: 0;
+  }
+
+  .accordion[data-disabled='true'] {
+    opacity: var(--seblify-opacity-disabled, 0.56);
+  }
+
+  .accordion[data-disabled='true'] .accordion__summary {
+    cursor: not-allowed;
+  }
+
+  .accordion[data-disabled='true'] .accordion__summary:hover {
+    background: transparent;
+  }
+</style>

package/dist/components/display/typography/accordion/Accordion.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+declare const Accordion: import("svelte").Component<{
+    [x: string]: unknown;
+    children?: Snippet | undefined;
+    class?: string | undefined;
+    description?: string | undefined;
+    disabled?: boolean | undefined;
+    open?: boolean | undefined;
+    title: string;
+    value?: string | undefined;
+}, {}, "open">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/components/display/typography/accordion/AccordionGroup.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+  import type { SeblifyProps } from 'seblify';
+  import type { Snippet } from 'svelte';
+  import { setAccordionGroupContext } from './context';
+
+  type AccordionGroupElement = keyof HTMLElementTagNameMap;
+
+  type Props = SeblifyProps<{
+    [key: string]: unknown;
+    as?: AccordionGroupElement;
+    children?: Snippet;
+    class?: string;
+    multiple?: boolean;
+  }>;
+
+  let {
+    as = 'div',
+    children,
+    class: className,
+    multiple = false,
+    ...restProps
+  }: Props = $props();
+
+  let itemState = $state<Record<string, boolean>>({});
+
+  function closeOtherItems(value: string) {
+    for (const itemValue of Object.keys(itemState)) {
+      if (itemValue !== value) {
+        itemState[itemValue] = false;
+      }
+    }
+  }
+
+  function register(value: string, initialOpen: boolean) {
+    if (value in itemState) {
+      return;
+    }
+
+    if (initialOpen && !multiple) {
+      closeOtherItems(value);
+    }
+
+    itemState[value] = initialOpen;
+  }
+
+  function unregister(value: string) {
+    delete itemState[value];
+  }
+
+  function isOpen(value: string): boolean {
+    return itemState[value] === true;
+  }
+
+  function setOpen(value: string, open: boolean) {
+    if (open && !multiple) {
+      closeOtherItems(value);
+    }
+
+    itemState[value] = open;
+  }
+
+  $effect(() => {
+    if (multiple) {
+      return;
+    }
+
+    const openValues = Object.entries(itemState)
+      .filter(([, open]) => open)
+      .map(([value]) => value);
+
+    for (const value of openValues.slice(1)) {
+      itemState[value] = false;
+    }
+  });
+
+  setAccordionGroupContext({
+    isOpen,
+    register,
+    setOpen,
+    unregister,
+  });
+</script>
+
+<svelte:element
+  this={as}
+  {...restProps}
+  class={`accordion-group${className ? ` ${className}` : ''}`}
+  data-multiple={multiple}
+>
+  {@render children?.()}
+</svelte:element>
+
+<style>
+  .accordion-group {
+    --accordion-group-radius: 8px;
+
+    display: block;
+  }
+
+  .accordion-group :global(.accordion) {
+    border-radius: 0;
+  }
+
+  .accordion-group :global(.accordion + .accordion) {
+    margin-top: -1px;
+  }
+
+  .accordion-group :global(.accordion .accordion__summary) {
+    border-radius: 0;
+  }
+
+  .accordion-group :global(.accordion:first-child) {
+    border-top-left-radius: var(--accordion-group-radius);
+    border-top-right-radius: var(--accordion-group-radius);
+  }
+
+  .accordion-group :global(.accordion:first-child .accordion__summary) {
+    border-top-left-radius: calc(var(--accordion-group-radius) - 1px);
+    border-top-right-radius: calc(var(--accordion-group-radius) - 1px);
+  }
+
+  .accordion-group :global(.accordion:last-child) {
+    border-bottom-left-radius: var(--accordion-group-radius);
+    border-bottom-right-radius: var(--accordion-group-radius);
+  }
+
+  .accordion-group
+    :global(.accordion:last-child[data-state='closed'] .accordion__summary) {
+    border-bottom-left-radius: calc(var(--accordion-group-radius) - 1px);
+    border-bottom-right-radius: calc(var(--accordion-group-radius) - 1px);
+  }
+</style>

package/dist/components/display/typography/accordion/AccordionGroup.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+type AccordionGroupElement = keyof HTMLElementTagNameMap;
+declare const AccordionGroup: import("svelte").Component<{
+    [x: string]: unknown;
+    as?: AccordionGroupElement | undefined;
+    children?: Snippet | undefined;
+    class?: string | undefined;
+    multiple?: boolean | undefined;
+}, {}, "">;
+type AccordionGroup = ReturnType<typeof AccordionGroup>;
+export default AccordionGroup;

package/dist/components/display/typography/accordion/context.d.ts

@@ -0,0 +1,8 @@
+export interface AccordionGroupContext {
+    isOpen: (value: string) => boolean;
+    register: (value: string, initialOpen: boolean) => void;
+    setOpen: (value: string, open: boolean) => void;
+    unregister: (value: string) => void;
+}
+export declare function setAccordionGroupContext(value: AccordionGroupContext): void;
+export declare function getAccordionGroupContext(): AccordionGroupContext | undefined;

package/dist/components/display/typography/accordion/context.js

@@ -0,0 +1,8 @@
+import { getContext, setContext } from 'svelte';
+const accordionGroupContextKey = Symbol('seblify-accordion-group');
+export function setAccordionGroupContext(value) {
+    setContext(accordionGroupContextKey, value);
+}
+export function getAccordionGroupContext() {
+    return getContext(accordionGroupContextKey);
+}