@stnd/ui 0.5.0

package/Accordion.astro

@@ -0,0 +1,52 @@
+---
+/**
+ * Accordion.astro
+ *
+ * Renders an accordion container that ensures only one child details is open at a time.
+ *
+ * Usage:
+ *   <Accordion>
+ *     <AccordionItem title="Item 1">Content</AccordionItem>
+ *     <AccordionItem title="Item 2">Content</AccordionItem>
+ *   </Accordion>
+ */
+
+interface Props {
+  class?: string;
+  id?: string;
+}
+
+const { class: className, id } = Astro.props;
+---
+
+<div id={id} class:list={["stnd-accordion group grid-row", className]}>
+  <slot />
+</div>
+
+<script>
+  (() => {
+    const accordions = document.querySelectorAll(".stnd-accordion");
+    accordions.forEach((accordion) => {
+      accordion.addEventListener("click", (event) => {
+        const target = event.target as Element | null;
+        if (!target) return;
+        const summary = target.closest("summary");
+        if (!summary) return;
+        const details = summary.closest("details");
+        if (!details) return;
+        accordion.querySelectorAll("details").forEach((detailsEl) => {
+          if (detailsEl !== details) {
+            detailsEl.removeAttribute("open");
+          }
+        });
+      });
+    });
+  })();
+</script>
+
+<style>
+  .stnd-accordion {
+    display: flex;
+    flex-direction: column;
+  }
+</style>

package/AccordionItem.astro

@@ -0,0 +1,65 @@
+---
+/**
+ * AccordionItem.astro
+ *
+ * Renders an individual accordion section.
+ *
+ * Usage:
+ *   <AccordionItem title="Is it accessible?" headingLevel="h3">
+ *     <p>Yes. It adheres to the WAI-ARIA design pattern.</p>
+ *   </AccordionItem>
+ */
+import Icon from "@stnd/icon/Icon.astro";
+
+interface Props {
+  title?: string;
+  headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6" | "div";
+  open?: boolean;
+  class?: string;
+}
+
+const {
+  title,
+  headingLevel: Heading = "h3",
+  open = false,
+  class: className,
+} = Astro.props;
+---
+
+<details class:list={["group stnd-accordion-item", className]} open={open}>
+  <summary class="w-full">
+    <Heading class="stnd-accordion-heading">
+      <slot name="title">{title}</slot>
+      <Icon icon="caret-down" />
+    </Heading>
+  </summary>
+  <section class="stnd-accordion-content">
+    <slot />
+  </section>
+</details>
+
+<style>
+  .stnd-accordion-item {
+    box-shadow: var(--shadow-ambient);
+    padding-bottom: var(--space);
+    padding-inline: var(--space);
+    margin-inline: calc(var(--space) * -1);
+  }
+
+  .stnd-accordion-item + .stnd-accordion-item {
+    margin-top: var(--space);
+  }
+
+  .stnd-accordion-heading {
+    margin: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    vertical-align: middle;
+    padding: 0;
+  }
+
+  .stnd-accordion-content {
+    margin-block-start: var(--space);
+  }
+</style>

package/Alert.svelte

@@ -0,0 +1,59 @@
+<script>
+  /**
+   * @stnd/ui/Alert.svelte
+   * Standard UI Alert — inline notification banner.
+   *
+   * Wraps the global `.alert` CSS class. Use the `class` prop to apply
+   * semantic color variants: "success" | "warning" | "error" | "info"
+   *
+   * @example
+   *   <Alert>Basic message</Alert>
+   *   <Alert class="success" icon="✓" title="Saved">Changes saved.</Alert>
+   *   <Alert class="error" icon="✕" title="Failed">Something went wrong.</Alert>
+   */
+  let {
+    icon,
+    title,
+    class: className = "",
+    style = "",
+    children,
+  } = $props();
+</script>
+
+<div class={["alert", icon && "has-icon", className].filter(Boolean).join(" ")} {style}>
+  {#if icon}
+    <span class="alert-icon">{icon}</span>
+  {/if}
+  <div class="alert-body">
+    {#if title}<strong class="alert-title">{title}</strong>{/if}
+    {@render children?.()}
+  </div>
+</div>
+
+<style>
+  .has-icon {
+    display: flex;
+    gap: var(--space-trim, 0.5em);
+    align-items: flex-start;
+  }
+
+  .alert-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--size-sm, 0.875rem);
+    flex-shrink: 0;
+    padding-block-start: 0.15em;
+  }
+
+  .alert-body {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .alert-title {
+    font-size: var(--size-sm, 0.875rem);
+    display: block;
+  }
+</style>

package/AlertDialog.svelte

@@ -0,0 +1,146 @@
+<script>
+  /**
+   * @stnd/ui/AlertDialog.svelte
+   * Standard UI Alert Dialog
+   */
+  let {
+    open = $bindable(false),
+    title = "Are you absolutely sure?",
+    description = "This action cannot be undone.",
+    confirmLabel = "Continue",
+    cancelLabel = "Cancel",
+    intent = "danger", // 'neutral' | 'danger'
+    onconfirm,
+    oncancel,
+  } = $props();
+
+  let dialog = $state();
+
+  $effect(() => {
+    if (open && dialog && !dialog.open) {
+      dialog.showModal();
+    } else if (!open && dialog && dialog.open) {
+      dialog.close();
+    }
+  });
+
+  function handleClose() {
+    open = false;
+    oncancel?.();
+  }
+
+  function handleConfirm() {
+    open = false;
+    onconfirm?.();
+  }
+
+  function handleKeydown(e) {
+    if (e.key === "Escape") {
+      e.preventDefault(); // Prevent default browser escape (which just closes it) so we can sync state
+      handleClose();
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<dialog
+  bind:this={dialog}
+  class="std-dialog"
+  onclose={handleClose}
+  oncancel={(e) => {
+    e.preventDefault();
+    handleClose();
+  }}
+  onclick={(e) => {
+    if (e.target === dialog) handleClose();
+  }}
+>
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="std-dialog-content no-rhythm"
+    onclick={(e) => e.stopPropagation()}
+    role="document"
+  >
+    <h4 class="std-dialog-title">{title}</h4>
+
+    {#if description}
+      <p class="std-dialog-desc">{description}</p>
+    {/if}
+
+    <footer class="std-dialog-footer">
+      <button class="ghost" onclick={handleClose}>
+        {cancelLabel}
+      </button>
+      <button
+        class={intent === "danger" ? "destructive" : ""}
+        onclick={handleConfirm}
+      >
+        {confirmLabel}
+      </button>
+    </footer>
+  </div>
+</dialog>
+
+<style>
+  .std-dialog {
+    background: transparent;
+    border: none;
+    padding: var(--space);
+    margin: auto;
+    max-width: 90vw;
+    width: 400px;
+    color: var(--color-foreground);
+    user-select: none;
+    background: var(--color-surface-high);
+    backdrop-filter: var(--filter-glass);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-glow), var(--shadow-raised);
+
+    &::backdrop {
+      background: var(--color-glass);
+      backdrop-filter: var(--filter-glass);
+      animation: fade-in var(--duration-fast) var(--ease-stnd);
+    }
+
+    &[open] {
+      animation: scale-in var(--duration-fast) var(--ease-stnd);
+    }
+  }
+
+  .std-dialog-title {
+    font-weight: var(--font-weight-bold);
+  }
+  .std-dialog-desc {
+    margin-block-start: var(--space-half);
+    color: var(--color-muted);
+    font-size: var(--size-sm);
+  }
+  .std-dialog-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--space-half);
+    margin-block-start: var(--space);
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes scale-in {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+</style>

package/CHANGELOG.md

@@ -0,0 +1,25 @@
+# @stnd/ui
+
+## 0.5.0
+
+### Minor Changes
+
+- Folio Load order
+
+## 0.4.0
+
+### Minor Changes
+
+- Folio order
+
+## 0.3.0
+
+### Minor Changes
+
+- 2d0ae02: NPM Test
+
+## 0.2.0
+
+### Minor Changes
+
+- 6d8888a: First release

package/CfImage.astro

@@ -0,0 +1,70 @@
+---
+/**
+ * CfImage — Responsive image via Cloudflare Image Transformations.
+ *
+ * Generates a proper <img srcset="..." sizes="..."> using Cloudflare's
+ * /cdn-cgi/image/ pipeline. Falls back to the original src in dev.
+ *
+ * @example Basic
+ *   <CfImage src="/assets/img/hero.jpg" alt="Hero" sizes="100vw" />
+ *
+ * @example Card thumbnail (image is ~1/3 of viewport on desktop)
+ *   <CfImage
+ *     src={cover}
+ *     alt={title}
+ *     sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw"
+ *     loading="eager"
+ *   />
+ */
+import { cfImage, cfImageSrcset } from "@stnd/utils";
+
+interface Props {
+  src: string;
+  alt: string;
+  /** CSS sizes attribute — describes the rendered image width at each breakpoint. */
+  sizes?: string;
+  /** Widths (px) to include in the srcset. */
+  widths?: number[];
+  quality?: number;
+  format?: string;
+  /** Cloudflare sharpen (0–10). */
+  sharpen?: number;
+  class?: string;
+  loading?: "lazy" | "eager";
+  decoding?: "async" | "sync" | "auto";
+  [key: string]: any;
+}
+
+const {
+  src,
+  alt,
+  sizes = "100vw",
+  widths = [640, 960, 1280, 1920],
+  quality = 85,
+  format = "auto",
+  sharpen,
+  class: className,
+  loading = "lazy",
+  decoding = "async",
+  ...rest
+} = Astro.props;
+
+const isDev = import.meta.env.DEV;
+const enabled = !isDev;
+
+// Default src: largest width ≤ 1280 as the 1× fallback
+const defaultWidth = widths.find((w) => w <= 1280) ?? widths[widths.length - 1];
+const imgSrc = cfImage(src, { width: defaultWidth, quality, format, sharpen }, enabled);
+const srcset = cfImageSrcset(src, { widths, quality, format, sharpen }, enabled);
+---
+
+<img
+  src={imgSrc}
+  srcset={srcset || undefined}
+  sizes={srcset ? sizes : undefined}
+  alt={alt}
+  class={className}
+  loading={loading}
+  decoding={decoding}
+  {...rest}
+/>