@domicile-desktop/component-library 0.0.0-alpha-75b2a946029c → 0.0.0-alpha-d8c1903a165f

package/package.json

@@ -26,12 +26,14 @@
     "vite": "^8.2.2"
   },
   "exports": {
+    "./Accordion": "./src/Accordion/Accordion.tsx",
     "./Autocomplete": "./src/Autocomplete/Autocomplete.tsx",
     "./Avatar": "./src/Avatar/Avatar.tsx",
     "./Button": "./src/Button/Button.tsx",
     "./Card": "./src/Card/Card.tsx",
     "./control-sizes": "./src/control-sizes.ts",
     "./DisplayProvider": "./src/Screen/DisplayProvider.tsx",
+    "./Drilldown": "./src/Drilldown/Drilldown.tsx",
     "./display-source": "./src/Screen/display-source.ts",
     "./Field": "./src/Field/Field.tsx",
     "./Input": "./src/Input/Input.tsx",
@@ -86,5 +88,5 @@
     "test:unit": "bun test"
   },
   "type": "module",
-  "version": "0.0.0-alpha-75b2a946029c"
+  "version": "0.0.0-alpha-d8c1903a165f"
 }

package/src/Accordion/Accordion.tsx

@@ -0,0 +1,135 @@
+import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
+import { CaretDownIcon } from "@phosphor-icons/react/dist/ssr/CaretDown";
+import type { ReactNode } from "react";
+
+import { css } from "../../styled-system/css";
+import { flex, hstack } from "../../styled-system/patterns";
+import type { ExtendProps } from "../extend-props";
+
+/**
+ * One section: the `value` that names it, the `label` on its button, and the
+ * `content` it opens to.
+ */
+export type AccordionItem = {
+  value: string;
+  label: ReactNode;
+  content: ReactNode;
+  disabled?: boolean | undefined;
+};
+
+type Props = ExtendProps<
+  typeof BaseAccordion.Root<string>,
+  {
+    items: readonly AccordionItem[];
+  }
+>;
+
+/**
+ * Sections stacked under their labels, each opening in place with the rest
+ * pushed down: more of a panel without leaving it.
+ *
+ * Wraps the @base-ui/react Accordion primitive, which owns the behavior — the
+ * buttons' `aria-expanded`, arrow keys between them, the panels' heights — so
+ * this layer is the look: a label and a caret that turns, a panel that grows
+ * to its content. One section open at a time unless `multiple`; closed panels
+ * unmount, so what is inside holds no state while it is shut.
+ *
+ * **Drawn in `currentcolor`**, as `Slider` is, so it reads in a card and over
+ * a photograph alike.
+ */
+export const Accordion = ({ items, ...rootProps }: Props) => (
+  <BaseAccordion.Root className={rootStyles} {...rootProps}>
+    {items.map((item) => (
+      <BaseAccordion.Item
+        className={itemStyles}
+        disabled={item.disabled ?? false}
+        key={item.value}
+        value={item.value}
+      >
+        <BaseAccordion.Header className={headerStyles}>
+          <BaseAccordion.Trigger className={triggerStyles}>
+            <span className={labelStyles}>{item.label}</span>
+            <CaretDownIcon className={caretStyles} size={12} />
+          </BaseAccordion.Trigger>
+        </BaseAccordion.Header>
+        <BaseAccordion.Panel className={panelStyles}>
+          <div className={contentStyles}>{item.content}</div>
+        </BaseAccordion.Panel>
+      </BaseAccordion.Item>
+    ))}
+  </BaseAccordion.Root>
+);
+
+const rootStyles = flex({
+  direction: "column",
+  inlineSize: "100%",
+});
+
+// A hairline between sections, in the color of whatever holds them.
+const itemStyles = css({
+  "& + &": {
+    borderBlockStart:
+      "1px solid color-mix(in oklab, currentcolor 15%, transparent)",
+  },
+});
+
+const headerStyles = css({
+  margin: 0,
+});
+
+const triggerStyles = hstack({
+  _disabled: {
+    cursor: "not-allowed",
+    opacity: "disabled",
+  },
+  _focusVisible: {
+    backgroundColor: "color-mix(in oklab, currentcolor 12%, transparent)",
+    outlineColor: "transparent",
+  },
+  _hoverEnabled: {
+    backgroundColor: "color-mix(in oklab, currentcolor 8%, transparent)",
+  },
+  backgroundColor: "transparent",
+  borderRadius: "sm",
+  borderStyle: "none",
+  color: "inherit",
+  cursor: "pointer",
+  font: "inherit",
+  gap: 2,
+  inlineSize: "100%",
+  justify: "space-between",
+  paddingBlock: 1.5,
+  paddingInline: 1,
+  textAlign: "start",
+  transition: "background-color {durations.fast} {easings.out}",
+});
+
+const labelStyles = css({
+  flexGrow: 1,
+  fontWeight: "medium",
+  minInlineSize: 0,
+});
+
+// Turned over while its section is open: base-ui marks the trigger.
+const caretStyles = css({
+  "[data-panel-open] > &": {
+    transform: "rotate(180deg)",
+  },
+  flexShrink: 0,
+  transition: "transform {durations.normal} {easings.out}",
+});
+
+// Grows to its content and back, off the height base-ui measures.
+const panelStyles = css({
+  "&[data-ending-style], &[data-starting-style]": {
+    blockSize: 0,
+  },
+  blockSize: "var(--accordion-panel-height)",
+  overflow: "hidden",
+  transition: "block-size {durations.normal} {easings.out}",
+});
+
+const contentStyles = css({
+  paddingBlockEnd: 2,
+  paddingInline: 1,
+});

package/src/Drilldown/Drilldown.tsx

@@ -0,0 +1,147 @@
+import { CaretLeftIcon } from "@phosphor-icons/react/dist/ssr/CaretLeft";
+import type { ReactNode } from "react";
+import { useState } from "react";
+
+import { css, cva } from "../../styled-system/css";
+import { hstack } from "../../styled-system/patterns";
+
+/** What slides in: a title over its content. */
+export type DrilldownDetail = {
+  title: string;
+  content: ReactNode;
+};
+
+type Props = {
+  /** The main view, shown while there is no detail. */
+  children: ReactNode;
+  /** What slides in over the main view, or `undefined` for none. */
+  detail: DrilldownDetail | undefined;
+  /** The back button was pressed: drop the detail. */
+  onBack: () => void;
+};
+
+/**
+ * A view that something slides in over from the side and back out of: a list
+ * of choices for one row of the main view, with a back button above it — the
+ * way a phone's settings go one level deeper without leaving the screen.
+ *
+ * For a panel that has no room for a second panel, or no business opening
+ * one: a popover that a `Select`'s own popup would close, say.
+ *
+ * **The view that is not shown is not there**: `inert` and `aria-hidden`, so a
+ * keyboard and a screen reader skip it, and out of the flow, so the panel is as tall as what
+ * it shows. The detail that slid out is kept until the next one replaces it,
+ * so it can slide out rather than vanish.
+ *
+ * Drawn in `currentcolor`, as `Slider` is.
+ */
+export const Drilldown = ({ children, detail, onBack }: Props) => {
+  const [shown, setShown] = useState(detail);
+  if (detail !== undefined && detail !== shown) {
+    setShown(detail);
+  }
+  const open = detail !== undefined;
+  return (
+    <div className={rootStyles}>
+      <div
+        aria-hidden={open}
+        className={paneStyles({ place: open ? "before" : "here" })}
+        inert={open}
+      >
+        {children}
+      </div>
+      <div
+        aria-hidden={!open}
+        className={paneStyles({ place: open ? "here" : "after" })}
+        inert={!open}
+      >
+        {shown !== undefined && (
+          <>
+            <div className={headerStyles}>
+              <button
+                aria-label="Back"
+                className={backStyles}
+                onClick={onBack}
+                type="button"
+              >
+                <CaretLeftIcon size={14} />
+              </button>
+              <h3 className={titleStyles}>{shown.title}</h3>
+            </div>
+            {shown.content}
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const rootStyles = css({
+  overflow: "hidden",
+  position: "relative",
+});
+
+// The pane shown is in the flow; the other is laid over it, slid off to its
+// side and hidden once it has gone — `visibility` waits out the slide.
+const paneStyles = cva({
+  base: {
+    transition:
+      "transform {durations.normal} {easings.out}, visibility {durations.normal}",
+  },
+  variants: {
+    place: {
+      after: {
+        insetBlockStart: 0,
+        insetInline: 0,
+        position: "absolute",
+        transform: "translateX(100%)",
+        visibility: "hidden",
+      },
+      before: {
+        insetBlockStart: 0,
+        insetInline: 0,
+        position: "absolute",
+        transform: "translateX(-100%)",
+        visibility: "hidden",
+      },
+      here: {
+        position: "relative",
+        transform: "translateX(0)",
+        visibility: "visible",
+      },
+    },
+  },
+});
+
+const headerStyles = hstack({
+  gap: 1,
+  paddingBlockEnd: 1.5,
+});
+
+const backStyles = css({
+  _focusVisible: {
+    backgroundColor: "color-mix(in oklab, currentcolor 16%, transparent)",
+    outlineColor: "transparent",
+  },
+  _hover: {
+    backgroundColor: "color-mix(in oklab, currentcolor 12%, transparent)",
+  },
+  alignItems: "center",
+  backgroundColor: "transparent",
+  blockSize: 6,
+  borderRadius: "full",
+  borderStyle: "none",
+  color: "inherit",
+  cursor: "pointer",
+  display: "inline-flex",
+  flexShrink: 0,
+  inlineSize: 6,
+  justifyContent: "center",
+  padding: 0,
+});
+
+const titleStyles = css({
+  fontSize: "sm",
+  fontWeight: "semibold",
+  margin: 0,
+});

package/src/Popover/Popover.tsx

@@ -147,12 +147,14 @@ const popupStyles = flex({
   },
   // A frosted pill lettered white over any photo: the bar's language rather
   // than a card's, and the same in both themes, since the wallpaper does not
-  // flip with them.
+  // flip with them. A pill while it is one row — the radius is half a row's
+  // height, as the bar's own chips are — and a rounded panel once its content
+  // is taller, rather than a stadium.
   "&[data-tone=overPhoto]": {
     backdropFilter: "blur({spacing.3})",
     backgroundColor: "panelOverPhoto",
     border: "none",
-    borderRadius: "full",
+    borderRadius: "2xl",
     color: "onPhoto",
     paddingBlock: 1.5,
     paddingInline: 3,

package/src/Slider/Slider.tsx

@@ -8,6 +8,11 @@ type Props = Omit<
 > & {
   /** What the slider sets, for a screen reader: the thumb's name. */
   label: string;
+  /**
+   * How loud, or how full, what the slider sets is right now, 0 through 1 —
+   * a meter drawn under the track, named for the slider. Absent for no meter.
+   */
+  level?: number | undefined;
 };
 
 /**
@@ -21,17 +26,38 @@ type Props = Omit<
  * asks for one. Every interaction — pointer, keyboard, the hidden range input a
  * screen reader drives — is base-ui's.
  */
-export const Slider = ({ label, ...rootProps }: Props) => (
+export const Slider = ({ label, level, ...rootProps }: Props) => (
   <BaseSlider.Root className={rootStyles} {...rootProps}>
     <BaseSlider.Control className={controlStyles}>
       <BaseSlider.Track className={trackStyles}>
         <BaseSlider.Indicator className={indicatorStyles} />
         <BaseSlider.Thumb aria-label={label} className={thumbStyles} />
       </BaseSlider.Track>
+      {level !== undefined && <Meter label={label} level={level} />}
     </BaseSlider.Control>
   </BaseSlider.Root>
 );
 
+/**
+ * The level, as a hairline under the track: thin enough not to read as a
+ * second slider, and in the slider's own color.
+ */
+const Meter = ({ label, level }: { label: string; level: number }) => {
+  const percent = Math.round(Math.min(1, Math.max(0, level)) * 100);
+  return (
+    <span
+      aria-label={`${label} level`}
+      aria-valuemax={100}
+      aria-valuemin={0}
+      aria-valuenow={percent}
+      className={meterStyles}
+      role="meter"
+    >
+      <span className={meterFillStyles} style={{ inlineSize: `${percent}%` }} />
+    </span>
+  );
+};
+
 // As wide as whatever holds it, and a flex item that takes what is left of a
 // row rather than shrinking to its own empty content.
 const rootStyles = css({
@@ -45,10 +71,32 @@ const controlStyles = css({
   blockSize: 5,
   cursor: "pointer",
   display: "flex",
+  position: "relative",
   touchAction: "none",
   userSelect: "none",
 });
 
+// Pinned to the foot of the control, under the track and out of its way.
+const meterStyles = css({
+  backgroundColor: "color-mix(in oklab, currentcolor 12%, transparent)",
+  blockSize: "2px",
+  borderRadius: "full",
+  insetBlockEnd: 0,
+  insetInline: 0,
+  overflow: "hidden",
+  pointerEvents: "none",
+  position: "absolute",
+});
+
+// Quick to rise and quick to fall: the levels arrive twenty times a second,
+// and a slower ease would draw a level that had already gone.
+const meterFillStyles = css({
+  backgroundColor: "color-mix(in oklab, currentcolor 70%, transparent)",
+  blockSize: "100%",
+  display: "block",
+  transition: "inline-size {durations.fastest} {easings.linear}",
+});
+
 const trackStyles = css({
   backgroundColor: "color-mix(in oklab, currentcolor 25%, transparent)",
   blockSize: 1,