npm - @db-vincent/components - Versions diffs - 0.0.0-stage → 0.1.1 - Mend

@db-vincent/components 0.0.0-stage → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (86) hide show

package/package.json +28 -4
package/src/astro/Accordion.astro +37 -0
package/src/astro/Alert.astro +73 -0
package/src/astro/Avatar.astro +88 -0
package/src/astro/AvatarGroup.astro +63 -0
package/src/astro/Badge.astro +23 -0
package/src/astro/Breadcrumbs.astro +45 -0
package/src/astro/Button.astro +125 -0
package/src/astro/Card.astro +63 -0
package/src/astro/Checkbox.astro +61 -0
package/src/astro/Chip.astro +135 -0
package/src/astro/CodeBlock.astro +17 -0
package/src/astro/Drawer.astro +30 -0
package/src/astro/EmptyState.astro +45 -0
package/src/astro/Example.astro +37 -0
package/src/astro/Grid.astro +56 -0
package/src/astro/GridItem.astro +25 -0
package/src/astro/Icon.astro +52 -0
package/src/astro/Menu.astro +151 -0
package/src/astro/MenuItem.astro +57 -0
package/src/astro/Modal.astro +124 -0
package/src/astro/Navbar.astro +756 -0
package/src/astro/PageHeader.astro +34 -0
package/src/astro/Pagination.astro +212 -0
package/src/astro/Popover.astro +51 -0
package/src/astro/Progress.astro +71 -0
package/src/astro/Radio.astro +58 -0
package/src/astro/RadioGroup.astro +25 -0
package/src/astro/Section.astro +25 -0
package/src/astro/Select.astro +420 -0
package/src/astro/Sidebar.astro +215 -0
package/src/astro/Skeleton.astro +41 -0
package/src/astro/Spinner.astro +20 -0
package/src/astro/Stepper.astro +82 -0
package/src/astro/Switch.astro +78 -0
package/src/astro/Table.astro +268 -0
package/src/astro/Tabs.astro +83 -0
package/src/astro/TextField.astro +305 -0
package/src/astro/ThemeToggle.astro +66 -0
package/src/astro/Toast.astro +181 -0
package/src/astro/Tooltip.astro +54 -0
package/src/astro/TopBar.astro +29 -0
package/src/data/icons.ts +120 -0
package/src/scripts/avatar.ts +33 -0
package/src/scripts/menu.ts +218 -0
package/src/scripts/tabs.ts +127 -0
package/src/scripts/toast.ts +565 -0
package/src/scripts/tooltip.ts +127 -0
package/src/styles/accordion.css +79 -0
package/src/styles/alert.css +108 -0
package/src/styles/avatar.css +131 -0
package/src/styles/badge.css +48 -0
package/src/styles/base.css +205 -0
package/src/styles/breadcrumbs.css +54 -0
package/src/styles/button.css +174 -0
package/src/styles/card.css +112 -0
package/src/styles/chip.css +106 -0
package/src/styles/choice.css +143 -0
package/src/styles/code.css +44 -0
package/src/styles/empty.css +59 -0
package/src/styles/example.css +57 -0
package/src/styles/grid.css +64 -0
package/src/styles/input.css +208 -0
package/src/styles/menu.css +151 -0
package/src/styles/modal.css +285 -0
package/src/styles/motion.css +114 -0
package/src/styles/nav.css +232 -0
package/src/styles/navbar.css +658 -0
package/src/styles/page-header.css +62 -0
package/src/styles/pagination.css +81 -0
package/src/styles/popover.css +134 -0
package/src/styles/progress.css +95 -0
package/src/styles/section.css +38 -0
package/src/styles/select.css +246 -0
package/src/styles/skeleton.css +66 -0
package/src/styles/spinner.css +44 -0
package/src/styles/sr-only.css +14 -0
package/src/styles/stepper.css +169 -0
package/src/styles/switch.css +143 -0
package/src/styles/table.css +177 -0
package/src/styles/tabs.css +120 -0
package/src/styles/theme-toggle.css +31 -0
package/src/styles/toast.css +225 -0
package/src/styles/tooltip.css +63 -0
package/src/styles/topbar.css +32 -0
package/README.md +0 -3

package/package.json CHANGED Viewed

@@ -1,6 +1,30 @@
 {
   "name": "@db-vincent/components",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "license": "UNLICENSED",
+  "type": "module",
+  "description": "Minerva design-system components for Astro. Token-driven, dependency-free and accessibility-checked. (Placeholder scope `@ds`; see AGENTS.md.)",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "files": [
+    "src"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "**/*.astro"
+  ],
+  "exports": {
+    "./astro/*.astro": "./src/astro/*.astro",
+    "./data/*": "./src/data/*.ts",
+    "./scripts/*": "./src/scripts/*.ts",
+    "./styles/*.css": "./src/styles/*.css"
+  },
+  "peerDependencies": {
+    "astro": ">=4 <8"
+  },
+  "dependencies": {
+    "@db-vincent/tokens": "0.1.1"
+  }
+}

package/src/astro/Accordion.astro ADDED Viewed

@@ -0,0 +1,37 @@
+---
+import Icon from "./Icon.astro";
+import "../styles/accordion.css";
+interface Item {
+  title: string;
+  content: string;
+  open?: boolean;
+}
+/**
+ * Accordion built on <details>/<summary>: native keyboard behaviour, native
+ * expansion semantics, no script. Pass `name` for an exclusive accordion in
+ * browsers that support it.
+ */
+interface Props {
+  items: Item[];
+  name?: string;
+  class?: string;
+}
+const { items, name, class: className } = Astro.props;
+---
+<div class:list={["ds-accordion", className]}>
+  {items.map((item) => (
+    <details class="ds-accordion__item" open={item.open} name={name}>
+      <summary class="ds-accordion__trigger">
+        <span>{item.title}</span>
+        <Icon name="chevron-down" size={20} class="ds-accordion__icon" />
+      </summary>
+      <div class="ds-accordion__panel">
+        <p>{item.content}</p>
+      </div>
+    </details>
+  ))}
+</div>

package/src/astro/Alert.astro ADDED Viewed

@@ -0,0 +1,73 @@
+---
+import Icon from "./Icon.astro";
+import "../styles/alert.css";
+/**
+ * Inline alert. Not a live region by default: a static page-load message is
+ * read in document order. Use Toast for asynchronous feedback. `dismissible`
+ * adds a close control when the message can be cleared.
+ */
+interface Props {
+  tone?: "info" | "success" | "warning" | "danger";
+  title: string;
+  message?: string;
+  dismissible?: boolean;
+  class?: string;
+}
+const {
+  tone = "info",
+  title,
+  message,
+  dismissible = false,
+  class: className,
+} = Astro.props;
+const icon = {
+  info: "info",
+  success: "check-circle",
+  warning: "alert-triangle",
+  danger: "alert-circle",
+}[tone];
+---
+<div
+  class:list={["ds-alert", tone !== "info" && `ds-alert--${tone}`, className]}
+  data-alert
+>
+  <span class="ds-alert__icon" aria-hidden="true">
+    <Icon name={icon} size={20} />
+  </span>
+  <div class="ds-alert__content">
+    <p class="ds-alert__title">{title}</p>
+    {message && <p class="ds-alert__body">{message}</p>}
+    <slot />
+  </div>
+  {dismissible && (
+    <button
+      class="ds-alert__close"
+      type="button"
+      aria-label="Dismiss alert"
+      data-alert-close
+    >
+      <Icon name="x" size={16} />
+    </button>
+  )}
+</div>
+<script>
+  document.addEventListener("click", (event) => {
+    const target = event.target;
+    if (!(target instanceof Element)) return;
+    const close = target.closest("[data-alert-close]");
+    if (!close) return;
+    const alert = close.closest<HTMLElement>("[data-alert]");
+    if (!alert) return;
+    // Focus would fall to <body>; hand it to the content the alert sat on.
+    const host = alert.parentElement;
+    alert.remove();
+    if (host) {
+      if (!host.hasAttribute("tabindex")) host.tabIndex = -1;
+      host.focus({ preventScroll: true });
+    }
+  });
+</script>

package/src/astro/Avatar.astro ADDED Viewed

@@ -0,0 +1,88 @@
+---
+import Icon from "./Icon.astro";
+import { getInitials } from "../scripts/avatar";
+import "../styles/avatar.css";
+/**
+ * Avatar: an image with initials (or an icon) underneath, so a missing or
+ * failed image still shows who it is. The root is role="img" named by `name`
+ * plus the status, so the status never relies on colour. Image errors are
+ * handled by scripts/avatar.ts.
+ */
+interface Props {
+  /** Full name. Becomes the accessible name and the source of the initials. */
+  name: string;
+  src?: string;
+  size?: "sm" | "md" | "lg";
+  shape?: "circle" | "square";
+  /** What shows without an image. Defaults to the initials of `name`. */
+  fallback?: "initials" | "icon";
+  status?: "online" | "away" | "busy" | "offline";
+  class?: string;
+}
+const {
+  name,
+  src,
+  size = "md",
+  shape = "circle",
+  fallback = "initials",
+  status,
+  class: className,
+} = Astro.props;
+const initials = getInitials(name);
+const showIcon = fallback === "icon" || initials === "";
+const label = status ? `${name}, ${status}` : name;
+const iconSize = size === "lg" ? 20 : size === "sm" ? 14 : 16;
+---
+<span
+  class:list={[
+    "ds-avatar",
+    size !== "md" && `ds-avatar--${size}`,
+    shape === "square" && "ds-avatar--square",
+    className,
+  ]}
+  role="img"
+  aria-label={label}
+  data-ds-avatar
+>
+  <span class="ds-avatar__face">
+    <span class="ds-avatar__fallback" aria-hidden="true">
+      {showIcon ? <Icon name="user" size={iconSize} /> : initials}
+    </span>
+    {src && (
+      <img
+        class="ds-avatar__img"
+        src={src}
+        alt=""
+        loading="lazy"
+        decoding="async"
+      />
+    )}
+  </span>
+  {status && (
+    <span
+      class={`ds-avatar__status ds-avatar__status--${status}`}
+      aria-hidden="true"
+    />
+  )}
+</span>
+<script>
+  import { mountAvatar } from "../scripts/avatar";
+  const bind = () => {
+    document
+      .querySelectorAll<HTMLElement>("[data-ds-avatar]")
+      .forEach((root) => {
+        if (root.dataset.dsBound) return;
+        root.dataset.dsBound = "true";
+        mountAvatar(root);
+      });
+  };
+  bind();
+  document.addEventListener("astro:page-load", bind);
+</script>

package/src/astro/AvatarGroup.astro ADDED Viewed

@@ -0,0 +1,63 @@
+---
+import Avatar from "./Avatar.astro";
+import "../styles/avatar.css";
+/**
+ * Overlapping avatars with a "+N" count for the rest. The group is named by
+ * `label` ("Project members"); the count is named "N more".
+ */
+interface Person {
+  name: string;
+  src?: string;
+}
+interface Props {
+  items: Person[];
+  /** Accessible name for the whole group. */
+  label: string;
+  /** Avatars shown before the "+N" count. */
+  max?: number;
+  size?: "sm" | "md" | "lg";
+  shape?: "circle" | "square";
+  class?: string;
+}
+const {
+  items,
+  label,
+  max = 4,
+  size = "md",
+  shape = "circle",
+  class: className,
+} = Astro.props;
+const visible = items.slice(0, max);
+const hidden = items.length - visible.length;
+---
+<div
+  class:list={["ds-avatar-group", className]}
+  role="group"
+  aria-label={label}
+>
+  {visible.map((person) => (
+    <Avatar name={person.name} src={person.src} size={size} shape={shape} />
+  ))}
+  {hidden > 0 && (
+    <span
+      class:list={[
+        "ds-avatar",
+        size !== "md" && `ds-avatar--${size}`,
+        shape === "square" && "ds-avatar--square",
+      ]}
+      role="img"
+      aria-label={`${hidden} more`}
+    >
+      <span class="ds-avatar__face">
+        <span class="ds-avatar__fallback ds-avatar__count" aria-hidden="true">
+          +{hidden}
+        </span>
+      </span>
+    </span>
+  )}
+</div>

package/src/astro/Badge.astro ADDED Viewed

@@ -0,0 +1,23 @@
+---
+import "../styles/badge.css";
+/** Compact status label. Tone never carries meaning alone; the text says it. */
+interface Props {
+  tone?: "neutral" | "accent" | "success" | "warning" | "danger";
+  dot?: boolean;
+  class?: string;
+}
+const { tone = "neutral", dot = false, class: className } = Astro.props;
+---
+<span
+  class:list={[
+    "ds-badge",
+    tone !== "neutral" && `ds-badge--${tone}`,
+    className,
+  ]}
+>
+  {dot && <span class="ds-badge__dot" aria-hidden="true"></span>}
+  <slot />
+</span>

package/src/astro/Breadcrumbs.astro ADDED Viewed

@@ -0,0 +1,45 @@
+---
+import Icon from "./Icon.astro";
+import "../styles/breadcrumbs.css";
+interface Item {
+  label: string;
+  href?: string;
+}
+interface Props {
+  items: Item[];
+  label?: string;
+  class?: string;
+}
+const { items, label = "Breadcrumb", class: className } = Astro.props;
+---
+<nav class:list={["ds-breadcrumbs", className]} aria-label={label}>
+  <ol class="ds-breadcrumbs__list">
+    {items.map((item, index) => (
+      <li class="ds-breadcrumbs__item">
+        {item.href && index < items.length - 1 ? (
+          <a class="ds-breadcrumbs__link" href={item.href}>
+            {item.label}
+          </a>
+        ) : (
+          <span
+            class="ds-breadcrumbs__current"
+            aria-current={index === items.length - 1 ? "page" : undefined}
+          >
+            {item.label}
+          </span>
+        )}
+        {index < items.length - 1 && (
+          <Icon
+            name="chevron-right"
+            size={12}
+            class="ds-breadcrumbs__separator"
+          />
+        )}
+      </li>
+    ))}
+  </ol>
+</nav>

package/src/astro/Button.astro ADDED Viewed

@@ -0,0 +1,125 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import Icon from "./Icon.astro";
+import "../styles/button.css";
+/**
+ * Button. One filled primary action per view; secondary and ghost for the rest.
+ * Renders <a> when `href` is set, <button> otherwise. Loading sets aria-busy
+ * and disables activation while keeping the label in the accessible name.
+ */
+interface Props extends Omit<HTMLAttributes<"button">, "type"> {
+  variant?: "primary" | "secondary" | "ghost" | "danger";
+  size?: "sm" | "md" | "lg";
+  href?: string;
+  type?: "button" | "submit" | "reset";
+  disabled?: boolean;
+  loading?: boolean;
+  icon?: string;
+  iconPosition?: "start" | "end";
+  iconOnly?: boolean;
+  block?: boolean;
+  ariaLabel?: string;
+  class?: string;
+}
+const {
+  variant = "secondary",
+  size = "md",
+  href,
+  type = "button",
+  disabled = false,
+  loading = false,
+  icon,
+  iconPosition = "start",
+  iconOnly = false,
+  block = false,
+  ariaLabel,
+  class: className,
+  // Astro assigns named slots at the call site; forwarding the attribute
+  // would leak an inert `slot` onto the rendered element.
+  slot: _slot,
+  ...rest
+} = Astro.props;
+const Tag = href ? "a" : "button";
+const inactive = disabled || loading;
+const iconSize = size === "lg" ? 20 : 16;
+const classes = [
+  "ds-button",
+  `ds-button--${variant}`,
+  size !== "md" && `ds-button--${size}`,
+  iconOnly && "ds-button--icon",
+  block && "ds-button--block",
+  className,
+]
+  .filter(Boolean)
+  .join(" ");
+const tagProps = href
+  ? {
+      href: disabled ? undefined : href,
+      role: disabled ? "link" : undefined,
+      "aria-disabled": inactive ? "true" : undefined,
+    }
+  : {
+      type,
+      // Loading keeps the button focusable (aria-disabled only) so focus is
+      // not dropped mid-submit; the click is blocked in CSS and script.
+      disabled: disabled,
+      "aria-disabled": inactive ? "true" : undefined,
+    };
+const showLeadingIcon = icon && iconPosition === "start";
+const showTrailingIcon = icon && iconPosition === "end";
+---
+<Tag
+  class={classes}
+  aria-label={ariaLabel}
+  aria-busy={loading ? "true" : undefined}
+  data-loading={loading ? "true" : undefined}
+  {...tagProps}
+  {...rest}
+>
+  {loading && <span class="ds-button__spinner" aria-hidden="true"></span>}
+  {showLeadingIcon && !loading && (
+    <span class="ds-button__icon" aria-hidden="true">
+      <Icon name={icon} size={iconSize} />
+    </span>
+  )}
+  {!iconOnly && (
+    <span class="ds-button__label">
+      <slot />
+    </span>
+  )}
+  {iconOnly && !icon && (
+    <span class="ds-button__icon">
+      <slot />
+    </span>
+  )}
+  {showTrailingIcon && !loading && (
+    <span class="ds-button__icon" aria-hidden="true">
+      <Icon name={icon} size={iconSize} />
+    </span>
+  )}
+</Tag>
+<script>
+  // A loading button stays focusable (aria-disabled, not disabled), so its
+  // activation is blocked here; pointer events are already off in CSS.
+  document.addEventListener(
+    "click",
+    (event) => {
+      const button = (event.target as Element | null)?.closest?.(
+        '.ds-button[aria-disabled="true"]',
+      );
+      if (button) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+    },
+    true,
+  );
+</script>

package/src/astro/Card.astro ADDED Viewed

@@ -0,0 +1,63 @@
+---
+import "../styles/card.css";
+/**
+ * Surface container with distinct header, body and footer. `accent` marks the
+ * one card that needs attention with a border on every edge; a linked card is
+ * one clickable target and exposes its hover/focus states on the root.
+ */
+interface Props {
+  variant?: "default" | "accent" | "raised" | "flat";
+  href?: string;
+  eyebrow?: string;
+  title?: string;
+  meta?: string;
+  class?: string;
+}
+const {
+  variant = "default",
+  href,
+  eyebrow,
+  title,
+  meta,
+  class: className,
+} = Astro.props;
+const Tag = href ? "a" : "div";
+const classes = [
+  "ds-card",
+  variant !== "default" && `ds-card--${variant}`,
+  href && "ds-card--interactive",
+  className,
+]
+  .filter(Boolean)
+  .join(" ");
+const hasHeader =
+  Boolean(eyebrow || title || meta) || Astro.slots.has("header");
+const hasFooter = Astro.slots.has("footer");
+---
+<Tag class={classes} href={href}>
+  {hasHeader && (
+    <header class="ds-card__header">
+      {Astro.slots.has("header") ? (
+        <slot name="header" />
+      ) : (
+        <>
+          {eyebrow && <div class="ds-card__eyebrow">{eyebrow}</div>}
+          {title && <div class="ds-card__title">{title}</div>}
+          {meta && <div class="ds-card__meta">{meta}</div>}
+        </>
+      )}
+    </header>
+  )}
+  <div class="ds-card__body">
+    <slot />
+  </div>
+  {hasFooter && (
+    <footer class="ds-card__footer">
+      <slot name="footer" />
+    </footer>
+  )}
+</Tag>

package/src/astro/Checkbox.astro ADDED Viewed

@@ -0,0 +1,61 @@
+---
+import Icon from "./Icon.astro";
+import "../styles/choice.css";
+/** Checkbox with an optional description. Native input, custom visual box. */
+interface Props {
+  label: string;
+  description?: string;
+  id?: string;
+  name?: string;
+  value?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  class?: string;
+}
+const {
+  label,
+  description,
+  id,
+  name,
+  value,
+  checked = false,
+  disabled = false,
+  required = false,
+  class: className,
+} = Astro.props;
+const inputId = id ?? `checkbox-${Math.random().toString(36).slice(2, 9)}`;
+const descriptionId = description ? `${inputId}-description` : undefined;
+// The name comes from the label text only; the description is announced
+// once, as a description, instead of twice (name + description).
+const labelId = `${inputId}-label`;
+---
+<label class:list={["ds-choice", className]}>
+  <input
+    class="ds-choice__input"
+    id={inputId}
+    type="checkbox"
+    name={name}
+    value={value}
+    checked={checked}
+    disabled={disabled}
+    required={required}
+    aria-labelledby={description ? labelId : undefined}
+    aria-describedby={descriptionId}
+  />
+  <span class="ds-choice__box" aria-hidden="true">
+    <Icon name="check" size={14} />
+  </span>
+  <span class="ds-choice__label">
+    <span id={labelId}>{label}</span>
+    {description && (
+      <span class="ds-choice__description" id={descriptionId}>
+        {description}
+      </span>
+    )}
+  </span>
+</label>