rift-ds 1.0.0

package/components/Badge/Badge.css

@@ -0,0 +1,67 @@
+/* ============================================
+   BADGE COMPONENT
+   Small inline status labels
+   ============================================ */
+
+.ds-badge {
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--font-paragraph-sm-emphasis-family);
+  font-size: var(--font-paragraph-sm-emphasis-size);
+  font-weight: var(--font-paragraph-sm-emphasis-weight);
+  line-height: var(--font-paragraph-sm-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-sm-emphasis-letter-spacing);
+  padding: var(--padding-050) var(--padding-200); /* Figma: 2px 8px */
+  /* Badges are borderless by decision (2026-08-26): the tinted fill
+     carries the status on its own, and the old per-variant borders sat
+     below 3:1 against their fills. The transparent border keeps the
+     geometry so the box does not shift against bordered neighbours. */
+  border: var(--border-025) solid transparent;
+  border-radius: var(--radius-100); /* Figma: 4px */
+  white-space: nowrap;
+}
+
+/* ============================================
+   VARIANT — INFO
+   ============================================ */
+
+.ds-badge--info {
+  background-color: var(--color-status-info-bg);
+  color: var(--color-status-info-text);
+}
+
+/* ============================================
+   VARIANT — POSITIVE
+   ============================================ */
+
+.ds-badge--positive {
+  background-color: var(--color-status-positive-bg);
+  color: var(--color-status-positive-text);
+}
+
+/* ============================================
+   VARIANT — WARNING
+   ============================================ */
+
+.ds-badge--warning {
+  background-color: var(--color-status-warning-bg);
+  color: var(--color-status-warning-text);
+}
+
+/* ============================================
+   VARIANT — ERROR
+   ============================================ */
+
+.ds-badge--error {
+  background-color: var(--color-status-error-bg);
+  color: var(--color-status-error-text);
+}
+
+/* ============================================
+   VARIANT — NEUTRAL
+   ============================================ */
+
+.ds-badge--neutral {
+  background-color: var(--color-status-neutral-bg);
+  color: var(--color-status-neutral-text);
+}

package/components/Badge/Badge.d.ts

@@ -0,0 +1,13 @@
+export interface BadgeProps {
+    /** Badge label text */
+    label: string;
+    /** Badge variant determines colour */
+    variant?: 'info' | 'positive' | 'warning' | 'error' | 'neutral';
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Badge component for small inline status labels.
+ * Supports info, positive, warning, error, and neutral variants.
+ */
+export declare const Badge: ({ label, variant, className, }: BadgeProps) => import("react").JSX.Element;

package/components/Badge/Badge.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import "./Badge.css";
+const Badge = ({
+  label,
+  variant = "neutral",
+  className = ""
+}) => {
+  const baseClass = "ds-badge";
+  const variantClass = `${baseClass}--${variant}`;
+  const classes = [baseClass, variantClass, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("span", { className: classes, role: "status", children: label });
+};
+export {
+  Badge
+};

package/components/Banner/Banner.css

@@ -0,0 +1,110 @@
+/* ============================================
+   BANNER COMPONENT
+   Full-width page-level status strip
+   ============================================ */
+
+.ds-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-500);
+  width: 100%;
+  padding: var(--padding-200) var(--padding-500);
+}
+
+.ds-banner__body {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-200);
+  min-width: 0;
+}
+
+.ds-banner--center .ds-banner__body {
+  flex: 1;
+  justify-content: center;
+}
+
+.ds-banner__icon {
+  --icon-size: var(--icon-size-500);
+  flex-shrink: 0;
+}
+
+.ds-banner__content {
+  margin: 0;
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+}
+
+.ds-banner__title {
+  font-family: var(--font-paragraph-sm-emphasis-family);
+  font-weight: var(--font-paragraph-sm-emphasis-weight);
+}
+
+.ds-banner__action {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* ============================================
+   DISMISS
+   ============================================ */
+
+.ds-banner__dismiss {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--padding-100);
+  border: none;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+  border-radius: var(--radius-pill);
+  flex-shrink: 0;
+  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-banner__dismiss .material-symbols-rounded {
+  --icon-size: var(--icon-size-500);
+}
+
+.ds-banner__dismiss:hover {
+  opacity: 0.7;
+}
+
+.ds-banner__dismiss:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   VARIANTS
+   ============================================ */
+
+.ds-banner--info {
+  background-color: var(--color-status-info-bg);
+  color: var(--color-status-info-text);
+}
+
+.ds-banner--positive {
+  background-color: var(--color-status-positive-bg);
+  color: var(--color-status-positive-text);
+}
+
+.ds-banner--warning {
+  background-color: var(--color-status-warning-bg);
+  color: var(--color-status-warning-text);
+}
+
+.ds-banner--error {
+  background-color: var(--color-status-error-bg);
+  color: var(--color-status-error-text);
+}
+
+.ds-banner--neutral {
+  background-color: var(--color-status-neutral-bg);
+  color: var(--color-status-neutral-text);
+}

package/components/Banner/Banner.d.ts

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+/** Props owned by Banner itself — everything else falls through to the root node. */
+type BannerOwnProps = {
+    /** Status variant determines colour and default icon */
+    variant?: 'info' | 'positive' | 'warning' | 'error' | 'neutral';
+    /** Short leading emphasis before the body text. Deliberately shadows the native `title` attribute — a banner never needs a hover tooltip. */
+    title?: string;
+    /** Banner body content — a single line of text, rendered inside the banner's paragraph */
+    children?: React.ReactNode;
+    /** Custom icon override — Material Symbol name (string) or custom element (ReactNode) */
+    icon?: string | React.ReactNode;
+    /** Action slot on the trailing edge, for a compact Button or link */
+    action?: React.ReactNode;
+    /** Whether the banner shows a dismiss button */
+    dismissible?: boolean;
+    /** Callback when the dismiss button is clicked */
+    onDismiss?: () => void;
+    /** Horizontal alignment of the banner content */
+    align?: 'start' | 'center';
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface BannerProps extends BannerOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof BannerOwnProps> {
+}
+/**
+ * Full-width status strip for page-level announcements: a release notice, a
+ * degraded-service warning, an environment flag. The third sibling in the
+ * feedback family — Alert sits inline in the layout, Toast interrupts and
+ * leaves, Banner spans the page and stays until dismissed.
+ *
+ * Stateless like Alert: `dismissible` shows the close control and `onDismiss`
+ * reports the click; removing the banner is the consumer's render decision.
+ * Forwards a ref to the root element and spreads unrecognised props onto it.
+ */
+export declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/Banner/Banner.js

@@ -0,0 +1,59 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import "./Banner.css";
+import "../../fonts/material-symbols.css";
+const defaultIcons = {
+  info: "info",
+  positive: "check_circle",
+  warning: "warning",
+  error: "error",
+  neutral: "campaign"
+};
+const Banner = React.forwardRef(
+  ({
+    variant = "info",
+    title,
+    children,
+    icon,
+    action,
+    dismissible = false,
+    onDismiss,
+    align = "start",
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-banner";
+    const classes = [
+      baseClass,
+      `${baseClass}--${variant}`,
+      align === "center" ? `${baseClass}--center` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const iconValue = icon || defaultIcons[variant];
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, role: "status", children: [
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__body`, children: [
+        typeof iconValue === "string" ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon material-symbols-rounded`, "aria-hidden": "true", children: iconValue }) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: iconValue }),
+        /* @__PURE__ */ jsxs("p", { className: `${baseClass}__content`, children: [
+          title && /* @__PURE__ */ jsx("strong", { className: `${baseClass}__title`, children: title }),
+          title && children ? " " : null,
+          children
+        ] }),
+        action && /* @__PURE__ */ jsx("span", { className: `${baseClass}__action`, children: action })
+      ] }),
+      dismissible && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: `${baseClass}__dismiss`,
+          onClick: onDismiss,
+          "aria-label": "Dismiss banner",
+          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "close" })
+        }
+      )
+    ] });
+  }
+);
+Banner.displayName = "Banner";
+export {
+  Banner
+};

package/components/Breadcrumb/Breadcrumb.css

@@ -0,0 +1,100 @@
+/* ============================================
+   BREADCRUMB COMPONENT
+   Hierarchical navigation trail
+   ============================================ */
+
+.ds-breadcrumb {
+  width: 100%;
+}
+
+/* ============================================
+   LIST
+   ============================================ */
+
+.ds-breadcrumb__list {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--gap-050);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* ============================================
+   ITEM
+   ============================================ */
+
+.ds-breadcrumb__item {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-050);
+}
+
+/* ============================================
+   LINK
+   ============================================ */
+
+.ds-breadcrumb__link {
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  color: var(--color-text-secondary);
+  text-decoration: none;
+  transition: color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-breadcrumb__link:hover {
+  color: var(--color-text-primary);
+  text-decoration: underline;
+}
+
+.ds-breadcrumb__link:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+  border-radius: var(--radius-200);
+}
+
+/* ============================================
+   CURRENT (last item)
+   ============================================ */
+
+.ds-breadcrumb__current {
+  font-family: var(--font-paragraph-sm-emphasis-family);
+  font-size: var(--font-paragraph-sm-emphasis-size);
+  font-weight: var(--font-paragraph-sm-emphasis-weight);
+  line-height: var(--font-paragraph-sm-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-sm-emphasis-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+/* ============================================
+   SEPARATOR
+   ============================================ */
+
+/*
+   Size via --icon-size, never font-size: .material-symbols-rounded derives
+   the glyph size AND the layout box from that one variable. Setting
+   font-size alone shrank the glyph but left a 24px box around it, so the
+   chevron floated above the text baseline. --icon-size-500 (20px) also
+   matches the 20px line-height of the paragraph-sm labels either side.
+*/
+.ds-breadcrumb__separator {
+  --icon-size: var(--icon-size-500);
+  flex: none;
+  color: var(--color-text-tertiary);
+  user-select: none;
+}
+
+/* ============================================
+   ELLIPSIS
+   ============================================ */
+
+.ds-breadcrumb__ellipsis {
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  color: var(--color-text-tertiary);
+  user-select: none;
+}

package/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,25 @@
+export interface BreadcrumbItem {
+    /** Display label */
+    label: string;
+    /** Link href — omit for the current / last item */
+    href?: string;
+}
+export interface BreadcrumbProps {
+    /** Ordered list of breadcrumb items */
+    items: BreadcrumbItem[];
+    /** Maximum visible items before collapsing (min 2: first + last) */
+    maxItems?: number;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * Accessible name for the nav landmark. Override when more than one
+     * Breadcrumb can appear on a page — identically-named landmarks are
+     * indistinguishable to assistive technology.
+     */
+    ariaLabel?: string;
+}
+/**
+ * Breadcrumb shows the user's location within a page hierarchy.
+ * Supports automatic collapsing of middle items when the list exceeds maxItems.
+ */
+export declare const Breadcrumb: ({ items, maxItems, className, ariaLabel, }: BreadcrumbProps) => import("react").JSX.Element;

package/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./Breadcrumb.css";
+import "../../fonts/material-symbols.css";
+const Breadcrumb = ({
+  items,
+  maxItems,
+  className = "",
+  ariaLabel
+}) => {
+  const baseClass = "ds-breadcrumb";
+  const classes = [baseClass, className].filter(Boolean).join(" ");
+  const shouldCollapse = maxItems !== void 0 && maxItems >= 2 && items.length > maxItems;
+  let visibleItems;
+  if (shouldCollapse) {
+    const tailCount = maxItems - 1;
+    visibleItems = [
+      items[0],
+      "ellipsis",
+      ...items.slice(-tailCount)
+    ];
+  } else {
+    visibleItems = [...items];
+  }
+  return /* @__PURE__ */ jsx("nav", { className: classes, "aria-label": ariaLabel || "Breadcrumb", children: /* @__PURE__ */ jsx("ol", { className: `${baseClass}__list`, children: visibleItems.map((item, index) => {
+    const isLast = index === visibleItems.length - 1;
+    if (item === "ellipsis") {
+      return /* @__PURE__ */ jsxs("li", { className: `${baseClass}__item`, "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__separator material-symbols-rounded`, children: "chevron_right" }),
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__ellipsis`, children: "…" })
+      ] }, "ellipsis");
+    }
+    return /* @__PURE__ */ jsxs("li", { className: `${baseClass}__item`, children: [
+      index > 0 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__separator material-symbols-rounded`, "aria-hidden": "true", children: "chevron_right" }),
+      isLast || !item.href ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__current`, "aria-current": "page", children: item.label }) : /* @__PURE__ */ jsx("a", { href: item.href, className: `${baseClass}__link`, children: item.label })
+    ] }, index);
+  }) }) });
+};
+export {
+  Breadcrumb
+};