@qeetrix/react 0.0.1 → 0.0.4

package/dist/accordion/index.d.ts

@@ -0,0 +1,2 @@
+import { Accordion, AccordionItem, AccordionItemProps, AccordionProps, Collapsible, CollapsiblePanel, CollapsiblePanelProps, CollapsibleProps, CollapsibleTrigger, CollapsibleTriggerProps } from "./accordion.js";
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, Collapsible, CollapsiblePanel, type CollapsiblePanelProps, type CollapsibleProps, CollapsibleTrigger, type CollapsibleTriggerProps };

package/dist/accordion/index.js

@@ -0,0 +1 @@
+export { Accordion, AccordionItem, Collapsible, CollapsiblePanel, CollapsibleTrigger } from "./accordion.js";

package/dist/avatar/avatar.d.ts

@@ -0,0 +1,21 @@
+import { Avatar } from "@base-ui/react/avatar";
+import { CSSProperties, ReactElement } from "react";
+export type AvatarSize = "sm" | "md" | "lg" | "xl";
+export interface AvatarProps extends Omit<Avatar.Root.Props, "className" | "style" | "children"> {
+  /** The person's name: the image's text alternative, and the source of the initials. */
+  name: string;
+  /** The photo. The initials show while it loads, and if it fails. */
+  src?: string;
+  /** `sm` 24, `md` 32 (default), `lg` 40 or `xl` 48px. */
+  size?: AvatarSize;
+  /** The name is shown beside it: hide the avatar from assistive technology. */
+  decorative?: boolean;
+  className?: string;
+  style?: CSSProperties;
+}
+/**
+ * A person: their photo, or their initials (06-component-specs.md, increment 6). A circle, since
+ * people are one of the two soft shapes. It's named by `name`, unless `decorative`.
+ */
+declare function Avatar$1({ name, src, size, decorative, className, ...props }: AvatarProps): ReactElement;
+export { Avatar$1 as Avatar };

package/dist/avatar/avatar.js

@@ -0,0 +1,43 @@
+"use client";
+import { cx } from "../internal/cx.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Avatar } from "@base-ui/react/avatar";
+// src/avatar/avatar.tsx
+const graphemes = typeof Intl !== "undefined" && "Segmenter" in Intl ? new Intl.Segmenter(void 0, { granularity: "grapheme" }) : void 0;
+function firstGrapheme(word) {
+	if (!graphemes) return Array.from(word)[0] ?? "";
+	for (const { segment } of graphemes.segment(word)) return segment;
+	return "";
+}
+/** The first grapheme of the first and last words: "Priya Sharma" is "PS". */
+function initials(name) {
+	const words = name.trim().split(/\s+/).filter(Boolean);
+	const first = words[0] ?? "";
+	const last = words.length > 1 ? words.at(-1) ?? "" : "";
+	return (firstGrapheme(first) + firstGrapheme(last)).toLocaleUpperCase();
+}
+/**
+* A person: their photo, or their initials (06-component-specs.md, increment 6). A circle, since
+* people are one of the two soft shapes. It's named by `name`, unless `decorative`.
+*/
+function Avatar$1({ name, src, size = "md", decorative, className, ...props }) {
+	return /* @__PURE__ */ jsxs(Avatar.Root, {
+		...props,
+		role: decorative ? void 0 : "img",
+		"aria-label": decorative ? void 0 : name,
+		"aria-hidden": decorative || void 0,
+		className: cx("qx-avatar", className),
+		"data-slot": "avatar",
+		"data-size": size,
+		children: [src && /* @__PURE__ */ jsx(Avatar.Image, {
+			src,
+			alt: "",
+			className: "qx-avatar-image"
+		}), /* @__PURE__ */ jsx(Avatar.Fallback, {
+			className: "qx-avatar-fallback",
+			"aria-hidden": true,
+			children: initials(name)
+		})]
+	});
+}
+export { Avatar$1 as Avatar };

package/dist/avatar/index.d.ts

@@ -0,0 +1,2 @@
+import { Avatar, AvatarProps, AvatarSize } from "./avatar.js";
+export { Avatar, type AvatarProps, type AvatarSize };

package/dist/avatar/index.js

@@ -0,0 +1 @@
+export { Avatar } from "./avatar.js";

package/dist/badge/badge.d.ts

@@ -0,0 +1,14 @@
+import { QeetrixIcon } from "../internal/control.js";
+import { ComponentProps, ReactElement } from "react";
+export type BadgeTone = "neutral" | "brand" | "info" | "success" | "warning" | "danger";
+export interface BadgeProps extends ComponentProps<"span"> {
+  /** Default `neutral`. The word carries the meaning; the tone only reinforces it. */
+  tone?: BadgeTone;
+  /** A leading icon from `@qeetrix/icons`: sharp, 12px, decorative. */
+  icon?: QeetrixIcon;
+}
+/**
+ * A short, static status or count: one or two words (06-component-specs.md §10). It truncates with
+ * an ellipsis; pass `title` with the full text where it may be cut. Server-safe.
+ */
+export declare function Badge({ tone, icon: Icon, className, children, ...props }: BadgeProps): ReactElement;

package/dist/badge/badge.js

@@ -0,0 +1,25 @@
+import { cx } from "../internal/cx.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/badge/badge.tsx
+/**
+* A short, static status or count: one or two words (06-component-specs.md §10). It truncates with
+* an ellipsis; pass `title` with the full text where it may be cut. Server-safe.
+*/
+function Badge({ tone = "neutral", icon: Icon, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		...props,
+		className: cx("qx-badge", className),
+		"data-slot": "badge",
+		"data-tone": tone,
+		children: [Icon && /* @__PURE__ */ jsx(Icon, {
+			shape: "sharp",
+			size: 12,
+			"aria-hidden": true,
+			className: "qx-badge-icon"
+		}), /* @__PURE__ */ jsx("span", {
+			className: "qx-badge-label",
+			children
+		})]
+	});
+}
+export { Badge };

package/dist/badge/index.d.ts

@@ -0,0 +1,2 @@
+import { Badge, BadgeProps, BadgeTone } from "./badge.js";
+export { Badge, type BadgeProps, type BadgeTone };

package/dist/badge/index.js

@@ -0,0 +1 @@
+export { Badge } from "./badge.js";

package/dist/box/box.d.ts

@@ -0,0 +1,27 @@
+import { RenderProp } from "../internal/render.js";
+import { Inset } from "../internal/space.js";
+import { ComponentProps, ReactElement } from "react";
+export type BoxBackground = "canvas" | "default" | "raised" | "sunken" | "overlay" | "inverse" | "neutral" | "brand" | "selected";
+export type BoxBorder = "none" | "subtle" | "default" | "strong";
+export type BoxRadius = "none" | "sm" | "control" | "surface" | "overlay" | "modal" | "chip" | "full";
+export interface BoxProps extends ComponentProps<"div"> {
+  /** Padding on every side, from the inset tokens. */
+  padding?: Inset;
+  /** Padding at the start and end; overrides `padding` on those sides. */
+  paddingInline?: Inset;
+  /** Padding at the top and bottom; overrides `padding` on those sides. */
+  paddingBlock?: Inset;
+  /** A surface or tint from the tokens. `inverse` also sets inverse text colour. */
+  background?: BoxBackground;
+  /** A 1px border in a token colour. */
+  border?: BoxBorder;
+  /** Corners from the radius tokens. */
+  radius?: BoxRadius;
+  /** Render a different element, e.g. `<section />`. */
+  render?: RenderProp;
+}
+/**
+ * A token-only surface: the sanctioned way to give a region padding, a background, a border or
+ * corners. It has no margin: space between siblings belongs to the parent's `gap`.
+ */
+export declare function Box({ padding, paddingInline, paddingBlock, background, border, radius, render, className, ...props }: BoxProps): ReactElement;

package/dist/box/box.js

@@ -0,0 +1,21 @@
+import { cx } from "../internal/cx.js";
+import { renderElement } from "../internal/render.js";
+// src/box/box.tsx
+/**
+* A token-only surface: the sanctioned way to give a region padding, a background, a border or
+* corners. It has no margin: space between siblings belongs to the parent's `gap`.
+*/
+function Box({ padding, paddingInline, paddingBlock, background, border, radius, render, className, ...props }) {
+	return renderElement("div", render, {
+		...props,
+		className: cx("qx-box", className),
+		"data-slot": "box",
+		"data-padding": padding,
+		"data-padding-inline": paddingInline,
+		"data-padding-block": paddingBlock,
+		"data-background": background,
+		"data-border": border,
+		"data-radius": radius
+	});
+}
+export { Box };

package/dist/box/index.d.ts

@@ -0,0 +1,2 @@
+import { Box, BoxBackground, BoxBorder, BoxProps, BoxRadius } from "./box.js";
+export { Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius };

package/dist/box/index.js

@@ -0,0 +1 @@
+export { Box } from "./box.js";

package/dist/button/button.d.ts

@@ -0,0 +1,50 @@
+import { ControlSize, QeetrixIcon } from "../internal/control.js";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+import { Button } from "@base-ui/react/button";
+export type ButtonVariant = "solid" | "soft" | "ghost";
+export type ButtonTone = "brand" | "danger" | "neutral";
+interface ButtonBaseProps extends Omit<ComponentProps<"button">, "children"> {
+  /** Emphasis: `solid` (primary, Ember), `soft` (secondary, graphite), `ghost` (tertiary). */
+  variant?: ButtonVariant;
+  /**
+   * `danger` for the confirming action of a destructive flow. `neutral` for ghost utility actions
+   * in toolbars and headers, whose icons stay neutral (design rules §16); a solid or soft neutral
+   * button looks like the soft one.
+   */
+  tone?: ButtonTone;
+  /** Height from the density tokens. Default `md`. */
+  size?: ControlSize;
+  /** Busy: a spinner replaces the icon, clicks are ignored and `aria-busy` is set. */
+  loading?: boolean;
+  /** Render a different element through Base UI, e.g. a router link. */
+  render?: Button.Props["render"];
+}
+export interface ButtonProps extends ButtonBaseProps {
+  /** The label. Write it as a verb: "Create invoice". */
+  children?: ReactNode;
+  /** A trailing icon from `@qeetrix/icons`; rendered in the sharp shape. */
+  icon?: QeetrixIcon;
+  /** Fill the width of the container (forms, mobile). */
+  fullWidth?: boolean;
+}
+export interface IconButtonProps extends ButtonBaseProps {
+  /** The icon, from `@qeetrix/icons`; rendered in the sharp shape. */
+  icon: QeetrixIcon;
+  /** Required: an icon-only button has no visible label. */
+  "aria-label": string;
+  /**
+   * The tooltip, which shows the `aria-label` by default (06-component-specs.md §1). Pass other text
+   * to show that instead, or `false` where the label is visible nearby.
+   */
+  tooltip?: ReactNode | false;
+}
+/**
+ * An action. One `solid` and one `soft` per region, everything else `ghost` (design rules §7).
+ * Disabled buttons stay focusable, so the reason they're disabled can be read.
+ */
+declare function Button$1({ variant, tone, size, icon, loading, fullWidth, disabled, className, children, type, ...props }: ButtonProps): ReactElement;
+/**
+ * A square, icon-only button. Its `aria-label` is required by its type, and it shows as a tooltip.
+ */
+export declare function IconButton({ variant, tone, size, icon, loading, tooltip, disabled, className, type, ...props }: IconButtonProps): ReactElement;
+export { Button$1 as Button };

package/dist/button/button.js

@@ -0,0 +1,78 @@
+"use client";
+import { cx } from "../internal/cx.js";
+import { iconSize } from "../internal/control.js";
+import { Spinner } from "../spinner/spinner.js";
+import { Tooltip } from "../tooltip/tooltip.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
+// src/button/button.tsx
+function content(icon, size, loading) {
+	if (loading) return /* @__PURE__ */ jsx(Spinner, {
+		decorative: true,
+		size: size === "lg" ? "lg" : "md"
+	});
+	if (!icon) return null;
+	return /* @__PURE__ */ jsx(icon, {
+		shape: "sharp",
+		size: iconSize(size),
+		"aria-hidden": true,
+		className: "qx-button-icon",
+		"data-slot": "button-icon"
+	});
+}
+/**
+* An action. One `solid` and one `soft` per region, everything else `ghost` (design rules §7).
+* Disabled buttons stay focusable, so the reason they're disabled can be read.
+*/
+function Button$1({ variant = "solid", tone = "brand", size = "md", icon, loading = false, fullWidth, disabled, className, children, type = "button", ...props }) {
+	return /* @__PURE__ */ jsxs(Button, {
+		...props,
+		type,
+		disabled: disabled || loading,
+		focusableWhenDisabled: true,
+		"aria-busy": loading || void 0,
+		className: cx("qx-button", className),
+		"data-slot": "button",
+		"data-variant": variant,
+		"data-tone": tone,
+		"data-size": size,
+		"data-icon": icon ? "" : void 0,
+		"data-loading": loading ? "" : void 0,
+		"data-full-width": fullWidth ? "" : void 0,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "qx-button-label",
+			"data-slot": "button-label",
+			children
+		}), (icon || loading) && /* @__PURE__ */ jsx("span", {
+			className: "qx-button-zone",
+			"data-slot": "button-zone",
+			children: content(icon, size, loading)
+		})]
+	});
+}
+/**
+* A square, icon-only button. Its `aria-label` is required by its type, and it shows as a tooltip.
+*/
+function IconButton({ variant = "ghost", tone = "brand", size = "md", icon, loading = false, tooltip, disabled, className, type = "button", ...props }) {
+	const button = /* @__PURE__ */ jsx(Button, {
+		...props,
+		type,
+		disabled: disabled || loading,
+		focusableWhenDisabled: true,
+		"aria-busy": loading || void 0,
+		className: cx("qx-button qx-icon-button", className),
+		"data-slot": "icon-button",
+		"data-variant": variant,
+		"data-tone": tone,
+		"data-size": size,
+		"data-icon": "",
+		"data-loading": loading ? "" : void 0,
+		children: content(icon, size, loading)
+	});
+	if (tooltip === false) return button;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: tooltip ?? props["aria-label"],
+		children: button
+	});
+}
+export { Button$1 as Button, IconButton };

package/dist/button/index.d.ts

@@ -0,0 +1,2 @@
+import { Button, ButtonProps, ButtonTone, ButtonVariant, IconButton, IconButtonProps } from "./button.js";
+export { Button, type ButtonProps, type ButtonTone, type ButtonVariant, IconButton, type IconButtonProps };

package/dist/button/index.js

@@ -0,0 +1 @@
+export { Button, IconButton } from "./button.js";

package/dist/card/card.d.ts

@@ -0,0 +1,30 @@
+import { RenderProp } from "../internal/render.js";
+import { HeadingLevel } from "../heading/heading.js";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+/** A titled card names its heading level, so the page sets the outline, not the look. */
+type CardTitle = {
+  title: ReactNode;
+  level: HeadingLevel;
+} | {
+  title?: undefined;
+  level?: undefined;
+};
+interface CardOwnProps extends Omit<ComponentProps<"div">, "title"> {
+  /** A line under the title. */
+  description?: ReactNode;
+  /** Actions at the end of the header, e.g. a ghost "View all" button. */
+  actions?: ReactNode;
+  /** A ruled footer, e.g. the card's actions. */
+  footer?: ReactNode;
+  /** Render a different element, e.g. `render={<article />}`. */
+  render?: RenderProp;
+}
+/** Card props: a `title` needs its heading `level`. The children are the body. */
+export type CardProps = CardOwnProps & CardTitle;
+/**
+ * Related content on a page (06-component-specs.md §9): a raised, ruled surface with no shadow. A
+ * titled card is a section labelled by its title. A Table as the body's direct child runs edge to
+ * edge. Server-safe.
+ */
+export declare function Card({ title, level, description, actions, footer, render, className, children, ...props }: CardProps): ReactElement;
+export {};

package/dist/card/card.js

@@ -0,0 +1,56 @@
+import { cx } from "../internal/cx.js";
+import { renderElement } from "../internal/render.js";
+import { Heading } from "../heading/heading.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+// src/card/card.tsx
+/**
+* Related content on a page (06-component-specs.md §9): a raised, ruled surface with no shadow. A
+* titled card is a section labelled by its title. A Table as the body's direct child runs edge to
+* edge. Server-safe.
+*/
+function Card({ title, level, description, actions, footer, render, className, children, ...props }) {
+	const titleId = useId();
+	const titled = title != null && level !== void 0;
+	const header = titled || description != null || actions != null;
+	return renderElement(titled ? "section" : "div", render, {
+		...titled ? { "aria-labelledby": titleId } : {},
+		...props,
+		className: cx("qx-card", className),
+		"data-slot": "card",
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			header && /* @__PURE__ */ jsxs("div", {
+				className: "qx-card-header",
+				"data-slot": "card-header",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "qx-card-heading",
+					children: [titled && /* @__PURE__ */ jsx(Heading, {
+						level,
+						size: "title-sm",
+						id: titleId,
+						children: title
+					}), description != null && /* @__PURE__ */ jsx("p", {
+						className: "qx-card-description",
+						"data-slot": "card-description",
+						children: description
+					})]
+				}), actions != null && /* @__PURE__ */ jsx("div", {
+					className: "qx-card-actions",
+					"data-slot": "card-actions",
+					children: actions
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "qx-card-body",
+				"data-slot": "card-body",
+				children
+			}),
+			footer != null && /* @__PURE__ */ jsx("div", {
+				className: "qx-card-footer",
+				"data-slot": "card-footer",
+				children: footer
+			})
+		] })
+	});
+}
+export { Card };

package/dist/card/index.d.ts

@@ -0,0 +1,2 @@
+import { Card, CardProps } from "./card.js";
+export { Card, type CardProps };

package/dist/card/index.js

@@ -0,0 +1 @@
+export { Card } from "./card.js";

package/dist/checkbox/checkbox.d.ts

@@ -0,0 +1,33 @@
+import { FieldMessageProps } from "../field/field.js";
+import { ChoiceLabelProps, ChoiceOrientation } from "../field/choice.js";
+import { CSSProperties, ReactElement, ReactNode } from "react";
+import { Checkbox } from "@base-ui/react/checkbox";
+import { CheckboxGroup } from "@base-ui/react/checkbox-group";
+interface CheckboxOwnProps extends Omit<Checkbox.Root.Props, "className" | "style" | "children"> {
+  /** A line under the label. */
+  description?: ReactNode;
+  /** Placement of the row (or of the control alone, with no label) only. */
+  className?: string;
+  style?: CSSProperties;
+}
+/** Checkbox props: Base UI's, plus `label` — or, with no visible label, a required `aria-label`. */
+export type CheckboxProps = CheckboxOwnProps & ChoiceLabelProps;
+/**
+ * Turns one option on or off, or picks several inside a CheckboxGroup (06-component-specs.md §3).
+ * `ref` and Base UI props go to the control; the label makes the whole row the click target.
+ */
+declare function Checkbox$1({ label, description, className, style, indeterminate, ...props }: CheckboxProps): ReactElement;
+export interface CheckboxGroupProps extends Omit<CheckboxGroup.Props, "className" | "style" | "render">, FieldMessageProps {
+  /** The question, shown as the group's legend. */
+  label: ReactNode;
+  /** The field name the checked values submit under. */
+  name?: string;
+  /** `vertical` (default) or `horizontal` for short options. */
+  orientation?: ChoiceOrientation;
+  /** Placement only (margin, width, grid placement). */
+  className?: string;
+  style?: CSSProperties;
+}
+/** Several options under one question; `value` is the array of checked options' values. */
+declare function CheckboxGroup$1({ label, description, error, name, disabled, orientation, className, style, children, ...props }: CheckboxGroupProps): ReactElement;
+export { Checkbox$1 as Checkbox, CheckboxGroup$1 as CheckboxGroup };

package/dist/checkbox/checkbox.js

@@ -0,0 +1,61 @@
+"use client";
+import { cx } from "../internal/cx.js";
+import { ChoiceGroup, ChoiceRow } from "../field/choice.js";
+import { jsx } from "react/jsx-runtime";
+import { Checkbox } from "@base-ui/react/checkbox";
+import { CheckboxGroup } from "@base-ui/react/checkbox-group";
+import { CheckIcon } from "@qeetrix/icons/icons/check";
+import { MinusIcon } from "@qeetrix/icons/icons/minus";
+// src/checkbox/checkbox.tsx
+/**
+* Turns one option on or off, or picks several inside a CheckboxGroup (06-component-specs.md §3).
+* `ref` and Base UI props go to the control; the label makes the whole row the click target.
+*/
+function Checkbox$1({ label, description, className, style, indeterminate, ...props }) {
+	const Mark = indeterminate ? MinusIcon : CheckIcon;
+	return /* @__PURE__ */ jsx(ChoiceRow, {
+		kind: "checkbox",
+		label,
+		description,
+		disabled: props.disabled,
+		className,
+		style,
+		children: /* @__PURE__ */ jsx(Checkbox.Root, {
+			...props,
+			indeterminate,
+			className: cx("qx-checkbox", label == null ? className : void 0),
+			style: label == null ? style : void 0,
+			"data-slot": "checkbox-indicator",
+			children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
+				className: "qx-checkbox-mark",
+				"data-slot": "checkbox-mark",
+				children: /* @__PURE__ */ jsx(Mark, {
+					shape: "sharp",
+					size: 12,
+					strokeWidth: 3,
+					"aria-hidden": true
+				})
+			})
+		})
+	});
+}
+/** Several options under one question; `value` is the array of checked options' values. */
+function CheckboxGroup$1({ label, description, error, name, disabled, orientation = "vertical", className, style, children, ...props }) {
+	return /* @__PURE__ */ jsx(ChoiceGroup, {
+		kind: "checkbox",
+		label,
+		description,
+		error,
+		name,
+		disabled,
+		orientation,
+		className,
+		style,
+		group: /* @__PURE__ */ jsx(CheckboxGroup, {
+			...props,
+			disabled
+		}),
+		children
+	});
+}
+export { Checkbox$1 as Checkbox, CheckboxGroup$1 as CheckboxGroup };

package/dist/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+import { Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps } from "./checkbox.js";
+export { Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps };

package/dist/checkbox/index.js

@@ -0,0 +1 @@
+export { Checkbox, CheckboxGroup } from "./checkbox.js";

package/dist/css/accordion.css

@@ -0,0 +1,73 @@
+@import "./base.css";
+
+@layer qx.components {
+  .qx-accordion {
+    border-block-end: var(--qx-border-width-default) solid var(--qx-color-border-subtle);
+    flex-direction: column;
+    min-inline-size: 0;
+    display: flex;
+  }
+  
+  .qx-accordion-item {
+    border-block-start: var(--qx-border-width-default) solid var(--qx-color-border-subtle);
+  }
+  
+  .qx-accordion-header {
+    margin: 0;
+  }
+  
+  .qx-accordion-trigger {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--qx-space-gap-md);
+    inline-size: 100%;
+    min-block-size: var(--qx-size-control-lg);
+    color: var(--qx-color-text-default);
+    font: var(--qx-typography-title-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-heading);
+    text-align: start;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    padding: 0;
+    display: flex;
+  }
+  
+  .qx-accordion-trigger:focus-visible {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: calc(-1 * var(--qx-focus-ring-width));
+  }
+  
+  .qx-accordion-trigger[data-disabled] {
+    color: var(--qx-color-text-disabled);
+    cursor: not-allowed;
+  }
+  
+  .qx-accordion-icon {
+    color: var(--qx-color-icon-subtle);
+    transition-property: rotate;
+    transition-duration: var(--qx-motion-duration-normal);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    flex: none;
+  }
+  
+  [data-panel-open] > .qx-accordion-icon {
+    rotate: 180deg;
+  }
+  
+  .qx-accordion-panel, .qx-collapsible-panel {
+    block-size: var(--accordion-panel-height, var(--collapsible-panel-height));
+    transition-property: block-size;
+    transition-duration: var(--qx-motion-duration-normal);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    overflow: hidden;
+  }
+  
+  :is(.qx-accordion-panel, .qx-collapsible-panel)[data-starting-style], :is(.qx-accordion-panel, .qx-collapsible-panel)[data-ending-style] {
+    block-size: 0;
+  }
+  
+  .qx-accordion-content {
+    padding-block-end: var(--qx-space-inset-lg);
+  }
+}

package/dist/css/avatar.css

@@ -0,0 +1,50 @@
+@import "./base.css";
+
+@layer qx.components {
+  .qx-avatar {
+    border-radius: var(--qx-radius-full);
+    background: var(--qx-color-bg-neutral-subtle-pressed);
+    block-size: 32px;
+    inline-size: 32px;
+    color: var(--qx-color-text-default);
+    font: var(--qx-typography-label-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    vertical-align: middle;
+    -webkit-user-select: none;
+    user-select: none;
+    flex: none;
+    place-items: center;
+    display: inline-grid;
+    overflow: hidden;
+  }
+  
+  .qx-avatar[data-size="sm"] {
+    block-size: 24px;
+    inline-size: 24px;
+    font-size: var(--qx-typography-label-sm-font-size);
+  }
+  
+  .qx-avatar[data-size="lg"] {
+    block-size: 40px;
+    inline-size: 40px;
+    font: var(--qx-typography-label-md);
+  }
+  
+  .qx-avatar[data-size="xl"] {
+    block-size: 48px;
+    inline-size: 48px;
+    font: var(--qx-typography-label-md);
+  }
+  
+  .qx-avatar-image {
+    object-fit: cover;
+    block-size: 100%;
+    inline-size: 100%;
+  }
+  
+  @media (forced-colors: active) {
+    .qx-avatar {
+      border: var(--qx-border-width-default) solid CanvasText;
+    }
+  }
+}