colibri-ui 0.8.76 → 0.8.78

package/esm/Button/tokens.d.ts

@@ -0,0 +1,78 @@
+export declare const BUTTON_TOKENS: {
+    readonly "component-button-primary-bg": "var(--color-action-primary)";
+    readonly "component-button-primary-border": "var(--color-action-primary)";
+    readonly "component-button-primary-text": "var(--color-action-secondary)";
+    readonly "component-button-primary-bg-hover": "var(--color-action-primary-hover)";
+    readonly "component-button-primary-border-hover": "var(--color-action-primary-hover)";
+    readonly "component-button-primary-text-hover": "var(--color-action-secondary)";
+    readonly "component-button-primary-bg-pressed": "var(--color-action-secondary)";
+    readonly "component-button-primary-border-pressed": "var(--color-action-secondary)";
+    readonly "component-button-primary-text-pressed": "var(--color-text-on-brand)";
+    readonly "component-button-secondary-bg": "var(--color-bg-surface-strong)";
+    readonly "component-button-secondary-border": "var(--color-border-default)";
+    readonly "component-button-secondary-text": "var(--color-text-primary)";
+    readonly "component-button-secondary-bg-hover": "var(--color-neutral-300)";
+    readonly "component-button-secondary-border-hover": "var(--color-border-strong)";
+    readonly "component-button-secondary-text-hover": "var(--color-text-primary)";
+    readonly "component-button-secondary-bg-pressed": "var(--color-action-primary)";
+    readonly "component-button-secondary-border-pressed": "var(--color-action-primary)";
+    readonly "component-button-secondary-text-pressed": "var(--color-action-secondary)";
+    readonly "component-button-outline-bg": "var(--color-bg-surface)";
+    readonly "component-button-outline-border": "var(--color-border-default)";
+    readonly "component-button-outline-text": "var(--color-text-primary)";
+    readonly "component-button-outline-bg-hover": "var(--color-bg-surface-subtle)";
+    readonly "component-button-outline-border-hover": "var(--color-border-strong)";
+    readonly "component-button-outline-text-hover": "var(--color-text-primary)";
+    readonly "component-button-outline-bg-pressed": "var(--color-bg-surface-strong)";
+    readonly "component-button-outline-border-pressed": "var(--color-action-primary)";
+    readonly "component-button-outline-text-pressed": "var(--color-action-primary-pressed)";
+    readonly "component-button-pseudo-bg": "var(--color-bg-canvas)";
+    readonly "component-button-pseudo-border": "var(--color-bg-canvas)";
+    readonly "component-button-pseudo-text": "var(--color-text-primary)";
+    readonly "component-button-pseudo-bg-hover": "var(--color-bg-surface-subtle)";
+    readonly "component-button-pseudo-border-hover": "var(--color-bg-surface-subtle)";
+    readonly "component-button-pseudo-text-hover": "var(--color-text-primary)";
+    readonly "component-button-pseudo-bg-pressed": "var(--color-bg-surface-strong)";
+    readonly "component-button-pseudo-border-pressed": "var(--color-bg-surface-strong)";
+    readonly "component-button-pseudo-text-pressed": "var(--color-text-primary)";
+    readonly "component-button-clear-bg": "transparent";
+    readonly "component-button-clear-border": "transparent";
+    readonly "component-button-clear-text": "var(--color-text-primary)";
+    readonly "component-button-clear-bg-hover": "transparent";
+    readonly "component-button-clear-border-hover": "transparent";
+    readonly "component-button-clear-text-hover": "var(--color-action-clear-text-hover)";
+    readonly "component-button-clear-bg-pressed": "transparent";
+    readonly "component-button-clear-border-pressed": "transparent";
+    readonly "component-button-clear-text-pressed": "var(--color-action-primary-pressed)";
+    readonly "component-button-alert-bg": "var(--color-status-error)";
+    readonly "component-button-alert-border": "var(--color-status-error)";
+    readonly "component-button-alert-text": "var(--color-brand-white)";
+    readonly "component-button-alert-bg-hover": "var(--color-status-error-hover)";
+    readonly "component-button-alert-border-hover": "var(--color-status-error-hover)";
+    readonly "component-button-alert-text-hover": "var(--color-brand-white)";
+    readonly "component-button-alert-bg-pressed": "var(--color-status-error-accent)";
+    readonly "component-button-alert-border-pressed": "var(--color-status-error-accent)";
+    readonly "component-button-alert-text-pressed": "var(--color-brand-white)";
+    readonly "component-button-success-bg": "var(--color-status-success-bg)";
+    readonly "component-button-success-border": "var(--color-status-success-bg)";
+    readonly "component-button-success-text": "var(--color-text-primary)";
+    readonly "component-button-success-bg-hover": "var(--color-status-success-bg-hover)";
+    readonly "component-button-success-border-hover": "var(--color-status-success-bg-hover)";
+    readonly "component-button-success-text-hover": "var(--color-text-primary)";
+    readonly "component-button-success-bg-pressed": "var(--color-status-success)";
+    readonly "component-button-success-border-pressed": "var(--color-status-success)";
+    readonly "component-button-success-text-pressed": "var(--color-brand-white)";
+    readonly "component-button-bg-disabled": "var(--color-action-disabled)";
+    readonly "component-button-border-disabled": "var(--color-action-disabled)";
+    readonly "component-button-text-disabled": "var(--color-action-disabled-text)";
+    readonly "component-button-font-size-xs": string;
+    readonly "component-button-font-size-s": string;
+    readonly "component-button-font-size-m": string;
+    readonly "component-button-font-size-l": string;
+    readonly "component-button-height-xs": string;
+    readonly "component-button-height-s": string;
+    readonly "component-button-height-m": string;
+    readonly "component-button-height-l": string;
+    readonly "component-button-radius": string;
+    readonly "component-button-radius-lg": string;
+};

package/esm/Button/tokens.js

@@ -0,0 +1,82 @@
+var commonButtonTokens = {
+  "component-button-font-size-xs": "0.75rem",
+  "component-button-font-size-s": "0.8125rem",
+  "component-button-font-size-m": "0.9375rem",
+  "component-button-font-size-l": "1.125rem",
+  "component-button-height-xs": "1.8125rem",
+  "component-button-height-s": "2rem",
+  "component-button-height-m": "2.25rem",
+  "component-button-height-l": "2.625rem",
+  "component-button-radius": "1.125rem",
+  "component-button-radius-lg": "1.5rem"
+};
+var BUTTON_TOKENS = Object.assign(Object.assign({}, commonButtonTokens), {
+  "component-button-primary-bg": "var(--color-action-primary)",
+  "component-button-primary-border": "var(--color-action-primary)",
+  "component-button-primary-text": "var(--color-action-secondary)",
+  "component-button-primary-bg-hover": "var(--color-action-primary-hover)",
+  "component-button-primary-border-hover": "var(--color-action-primary-hover)",
+  "component-button-primary-text-hover": "var(--color-action-secondary)",
+  "component-button-primary-bg-pressed": "var(--color-action-secondary)",
+  "component-button-primary-border-pressed": "var(--color-action-secondary)",
+  "component-button-primary-text-pressed": "var(--color-text-on-brand)",
+  "component-button-secondary-bg": "var(--color-bg-surface-strong)",
+  "component-button-secondary-border": "var(--color-border-default)",
+  "component-button-secondary-text": "var(--color-text-primary)",
+  "component-button-secondary-bg-hover": "var(--color-neutral-300)",
+  "component-button-secondary-border-hover": "var(--color-border-strong)",
+  "component-button-secondary-text-hover": "var(--color-text-primary)",
+  "component-button-secondary-bg-pressed": "var(--color-action-primary)",
+  "component-button-secondary-border-pressed": "var(--color-action-primary)",
+  "component-button-secondary-text-pressed": "var(--color-action-secondary)",
+  "component-button-outline-bg": "var(--color-bg-surface)",
+  "component-button-outline-border": "var(--color-border-default)",
+  "component-button-outline-text": "var(--color-text-primary)",
+  "component-button-outline-bg-hover": "var(--color-bg-surface-subtle)",
+  "component-button-outline-border-hover": "var(--color-border-strong)",
+  "component-button-outline-text-hover": "var(--color-text-primary)",
+  "component-button-outline-bg-pressed": "var(--color-bg-surface-strong)",
+  "component-button-outline-border-pressed": "var(--color-action-primary)",
+  "component-button-outline-text-pressed": "var(--color-action-primary-pressed)",
+  "component-button-pseudo-bg": "var(--color-bg-canvas)",
+  "component-button-pseudo-border": "var(--color-bg-canvas)",
+  "component-button-pseudo-text": "var(--color-text-primary)",
+  "component-button-pseudo-bg-hover": "var(--color-bg-surface-subtle)",
+  "component-button-pseudo-border-hover": "var(--color-bg-surface-subtle)",
+  "component-button-pseudo-text-hover": "var(--color-text-primary)",
+  "component-button-pseudo-bg-pressed": "var(--color-bg-surface-strong)",
+  "component-button-pseudo-border-pressed": "var(--color-bg-surface-strong)",
+  "component-button-pseudo-text-pressed": "var(--color-text-primary)",
+  "component-button-clear-bg": "transparent",
+  "component-button-clear-border": "transparent",
+  "component-button-clear-text": "var(--color-text-primary)",
+  "component-button-clear-bg-hover": "transparent",
+  "component-button-clear-border-hover": "transparent",
+  "component-button-clear-text-hover": "var(--color-action-clear-text-hover)",
+  "component-button-clear-bg-pressed": "transparent",
+  "component-button-clear-border-pressed": "transparent",
+  "component-button-clear-text-pressed": "var(--color-action-primary-pressed)",
+  "component-button-alert-bg": "var(--color-status-error)",
+  "component-button-alert-border": "var(--color-status-error)",
+  "component-button-alert-text": "var(--color-brand-white)",
+  "component-button-alert-bg-hover": "var(--color-status-error-hover)",
+  "component-button-alert-border-hover": "var(--color-status-error-hover)",
+  "component-button-alert-text-hover": "var(--color-brand-white)",
+  "component-button-alert-bg-pressed": "var(--color-status-error-accent)",
+  "component-button-alert-border-pressed": "var(--color-status-error-accent)",
+  "component-button-alert-text-pressed": "var(--color-brand-white)",
+  "component-button-success-bg": "var(--color-status-success-bg)",
+  "component-button-success-border": "var(--color-status-success-bg)",
+  "component-button-success-text": "var(--color-text-primary)",
+  "component-button-success-bg-hover": "var(--color-status-success-bg-hover)",
+  "component-button-success-border-hover": "var(--color-status-success-bg-hover)",
+  "component-button-success-text-hover": "var(--color-text-primary)",
+  "component-button-success-bg-pressed": "var(--color-status-success)",
+  "component-button-success-border-pressed": "var(--color-status-success)",
+  "component-button-success-text-pressed": "var(--color-brand-white)",
+  "component-button-bg-disabled": "var(--color-action-disabled)",
+  "component-button-border-disabled": "var(--color-action-disabled)",
+  "component-button-text-disabled": "var(--color-action-disabled-text)"
+});
+
+export { BUTTON_TOKENS };

package/esm/Calendar/Calendar.js

@@ -5,6 +5,7 @@ import React, { useState, useRef, useMemo } from 'react';
 import { Button } from '../Button/index.js';
 import { Chevron } from '../Icons/Chevron.js';
 import styles from './Calendar.module.css';
+import { Typography } from '../Typography/index.js';
 
 var cx = function cx() {
   for (var _len = arguments.length, classNames = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -431,7 +432,8 @@ var Calendar = function Calendar(props) {
       className: styles.month,
       key: dayKey(month),
       "aria-label": heading
-    }, monthsToShow === 2 && (/*#__PURE__*/React.createElement("h2", {
+    }, monthsToShow === 2 && (/*#__PURE__*/React.createElement(Typography, {
+      tag: "h2",
       className: styles.heading
     }, heading)), /*#__PURE__*/React.createElement("div", {
       className: styles.weekdays,

package/esm/Input/index.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import type { InputProps } from "./index.props";
-export declare const Input: ({ className, startIcon, endIcon, label, hint, hasError, required, onChange, onFocus, onBlur, onKeyDown, inputRef, disabled, variant, size, ref, ...props }: InputProps) => React.JSX.Element;
+export declare const Input: ({ className, startIcon, endIcon, label, hint, hasError, required, onChange, onFocus, onBlur, onKeyDown, inputRef, controlAfter, controlClassName, controlRef, disabled, variant, size, ref, ...props }: InputProps) => React.JSX.Element;

package/esm/Input/index.js

@@ -18,21 +18,18 @@ var Input = function Input(_a) {
     onBlur = _a.onBlur,
     onKeyDown = _a.onKeyDown,
     inputRef = _a.inputRef,
+    controlAfter = _a.controlAfter,
+    controlClassName = _a.controlClassName,
+    controlRef = _a.controlRef,
     disabled = _a.disabled,
     _a$variant = _a.variant,
     variant = _a$variant === void 0 ? "primary" : _a$variant,
     _a$size = _a.size,
     size = _a$size === void 0 ? "m" : _a$size,
     ref = _a.ref,
-    props = __rest(_a, ["className", "startIcon", "endIcon", "label", "hint", "hasError", "required", "onChange", "onFocus", "onBlur", "onKeyDown", "inputRef", "disabled", "variant", "size", "ref"]);
-  return /*#__PURE__*/React.createElement(FormField, {
-    className: clsx(className),
-    label: label,
-    required: required,
-    hint: hint,
-    hasError: hasError
-  }, /*#__PURE__*/React.createElement(InputRoot, {
-    ref: ref,
+    props = __rest(_a, ["className", "startIcon", "endIcon", "label", "hint", "hasError", "required", "onChange", "onFocus", "onBlur", "onKeyDown", "inputRef", "controlAfter", "controlClassName", "controlRef", "disabled", "variant", "size", "ref"]);
+  var control = /*#__PURE__*/React.createElement(InputRoot, {
+    ref: controlRef !== null && controlRef !== void 0 ? controlRef : ref,
     startIcon: startIcon,
     endIcon: endIcon,
     variant: variant,
@@ -46,7 +43,16 @@ var Input = function Input(_a) {
     onBlur: onBlur,
     onKeyDown: onKeyDown,
     type: "text"
-  }, props))));
+  }, props)));
+  return /*#__PURE__*/React.createElement(FormField, {
+    className: clsx(className),
+    label: label,
+    required: required,
+    hint: hint,
+    hasError: hasError
+  }, controlAfter || controlClassName || controlRef ? (/*#__PURE__*/React.createElement("div", {
+    className: controlClassName
+  }, control, controlAfter)) : control);
 };
 
 export { Input };

package/esm/Input/index.props.d.ts

@@ -2,6 +2,9 @@ import type { ChangeEvent, ForwardedRef, InputHTMLAttributes, ReactNode, FocusEv
 import type { FormFieldProps } from "../base/FormField/index.props";
 import type { Size, Variant } from "../base/InputRoot/index.props";
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "size">, Omit<FormFieldProps, "children"> {
+    controlAfter?: ReactNode;
+    controlClassName?: string;
+    controlRef?: Ref<HTMLDivElement>;
     endIcon?: ReactNode;
     hasError?: boolean;
     hint?: ReactNode;
@@ -12,7 +15,7 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
     onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
     onInput?: (event: FormEvent<HTMLInputElement>) => void;
-    ref?: Ref<HTMLInputElement>;
+    ref?: Ref<HTMLDivElement>;
     required?: boolean;
     size?: Size;
     startIcon?: ReactNode;

package/esm/List/List.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { ListItemProps, ListProps, ListSectionProps } from "./index.props";
+export declare const List: React.ForwardRefExoticComponent<ListProps & React.RefAttributes<HTMLUListElement>>;
+export declare const ListItem: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLLIElement>>;
+export declare const ListSection: React.ForwardRefExoticComponent<ListSectionProps & React.RefAttributes<HTMLLIElement>>;

package/esm/List/List.js

@@ -0,0 +1,150 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { __rest } from 'tslib';
+import React, { forwardRef, useMemo, useContext, createContext } from 'react';
+import clsx from 'clsx';
+import styles from './List.module.css';
+
+var ListContext = /*#__PURE__*/createContext({
+  disabled: false,
+  dividers: false,
+  surface: "none"
+});
+var ItemContent = function ItemContent(_ref) {
+  var children = _ref.children,
+    description = _ref.description,
+    contentLeft = _ref.contentLeft,
+    contentRight = _ref.contentRight;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, contentLeft != null && /*#__PURE__*/React.createElement("span", {
+    className: styles.left
+  }, contentLeft), /*#__PURE__*/React.createElement("span", {
+    className: styles.content
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles.title
+  }, children), description != null && (/*#__PURE__*/React.createElement("span", {
+    className: styles.description
+  }, description))), contentRight != null && (/*#__PURE__*/React.createElement("span", {
+    className: styles.right
+  }, contentRight)));
+};
+var List = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _a$size = _a.size,
+    size = _a$size === void 0 ? "m" : _a$size,
+    _a$density = _a.density,
+    density = _a$density === void 0 ? "normal" : _a$density,
+    _a$surface = _a.surface,
+    surface = _a$surface === void 0 ? "none" : _a$surface,
+    _a$dividers = _a.dividers,
+    dividers = _a$dividers === void 0 ? false : _a$dividers,
+    _a$disabled = _a.disabled,
+    disabled = _a$disabled === void 0 ? false : _a$disabled,
+    ariaLabel = _a.ariaLabel,
+    className = _a.className,
+    children = _a.children,
+    rest = __rest(_a, ["size", "density", "surface", "dividers", "disabled", "ariaLabel", "className", "children"]);
+  var context = useMemo(function () {
+    return {
+      disabled: disabled,
+      dividers: dividers,
+      surface: surface
+    };
+  }, [disabled, dividers, surface]);
+  return /*#__PURE__*/React.createElement(ListContext.Provider, {
+    value: context
+  }, /*#__PURE__*/React.createElement("ul", Object.assign({}, rest, {
+    ref: ref,
+    "aria-label": ariaLabel,
+    "aria-disabled": disabled || undefined,
+    className: clsx(styles.list, styles["size_".concat(size)], styles["density_".concat(density)], styles["surface_".concat(surface)], _defineProperty(_defineProperty({}, styles.dividers, dividers), styles["list_disabled"], disabled), className)
+  }), children));
+});
+List.displayName = "List";
+var ListItem = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _a;
+  var _useContext = useContext(ListContext),
+    listDisabled = _useContext.disabled,
+    dividers = _useContext.dividers,
+    surface = _useContext.surface;
+  var children = props.children,
+    description = props.description,
+    contentLeft = props.contentLeft,
+    contentRight = props.contentRight,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$selected = props.selected,
+    selected = _props$selected === void 0 ? false : _props$selected,
+    className = props.className,
+    interactiveProps = __rest(props, ["children", "description", "contentLeft", "contentRight", "disabled", "selected", "className"]);
+  var isDisabled = listDisabled || disabled;
+  var itemClassName = clsx(styles.item, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles["item_surface"], surface === "items"), styles["item_divider"], dividers), styles.selected, selected), styles["item_disabled"], isDisabled), className);
+  var content = /*#__PURE__*/React.createElement(ItemContent, {
+    contentLeft: contentLeft,
+    contentRight: contentRight,
+    description: description
+  }, children);
+  if ("href" in interactiveProps && interactiveProps.href) {
+    var _b = interactiveProps,
+      href = _b.href,
+      onAction = _b.onAction,
+      _onClick = _b.onClick,
+      anchorProps = __rest(_b, ["href", "onAction", "onClick"]);
+    return /*#__PURE__*/React.createElement("li", {
+      ref: ref,
+      className: itemClassName,
+      "aria-disabled": isDisabled || undefined
+    }, /*#__PURE__*/React.createElement("a", Object.assign({}, anchorProps, {
+      href: isDisabled ? undefined : href,
+      tabIndex: isDisabled ? -1 : anchorProps.tabIndex,
+      "aria-current": selected ? "page" : undefined,
+      className: styles.action,
+      onClick: function onClick(event) {
+        if (isDisabled) {
+          event.preventDefault();
+          return;
+        }
+        _onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
+        if (!event.defaultPrevented) onAction === null || onAction === void 0 ? void 0 : onAction();
+      }
+    }), content));
+  }
+  if ("onAction" in interactiveProps && interactiveProps.onAction) {
+    var _c = interactiveProps,
+      _onAction = _c.onAction,
+      buttonProps = __rest(_c, ["onAction"]);
+    return /*#__PURE__*/React.createElement("li", {
+      ref: ref,
+      className: itemClassName
+    }, /*#__PURE__*/React.createElement("button", Object.assign({}, buttonProps, {
+      type: (_a = buttonProps.type) !== null && _a !== void 0 ? _a : "button",
+      disabled: isDisabled,
+      "aria-pressed": selected || undefined,
+      className: styles.action,
+      onClick: _onAction
+    }), content));
+  }
+  return /*#__PURE__*/React.createElement("li", Object.assign({}, interactiveProps, {
+    ref: ref,
+    className: itemClassName,
+    "aria-disabled": isDisabled || undefined,
+    "aria-current": selected || undefined
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles["static-content"]
+  }, content));
+});
+ListItem.displayName = "ListItem";
+var ListSection = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var title = _a.title,
+    children = _a.children,
+    className = _a.className,
+    rest = __rest(_a, ["title", "children", "className"]);
+  return /*#__PURE__*/React.createElement("li", Object.assign({}, rest, {
+    ref: ref,
+    className: clsx(styles.section, className)
+  }), title != null && /*#__PURE__*/React.createElement("div", {
+    className: styles["section-title"]
+  }, title), /*#__PURE__*/React.createElement("ul", {
+    className: styles["nested-list"]
+  }, children));
+});
+ListSection.displayName = "ListSection";
+
+export { List, ListItem, ListSection };

package/esm/List/List.module.css

@@ -0,0 +1,185 @@
+.list {
+  box-sizing: border-box;
+  color: var(--component-list-text);
+  font-family: var(--font-family-ui);
+  list-style: none;
+  margin: var(--space-0);
+  padding: var(--space-0);
+  width: 100%;
+}
+
+.surface_container {
+  background: var(--component-list-bg);
+  border-radius: var(--component-list-container-radius);
+  padding: var(--component-list-container-padding);
+}
+
+.surface_items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--component-list-items-gap);
+}
+
+.item {
+  display: block;
+  margin: var(--space-0);
+  position: relative;
+}
+
+.item_surface {
+  background: var(--component-list-bg);
+  border-radius: var(--component-list-item-surface-radius);
+  overflow: hidden;
+}
+
+.action,
+.static-content {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--component-list-item-radius);
+  box-sizing: border-box;
+  color: inherit;
+  display: flex;
+  font: inherit;
+  gap: var(--component-list-item-gap);
+  min-height: var(--component-list-item-min-height-m);
+  padding: var(--component-list-item-padding-block) var(--component-list-item-padding-inline);
+  text-align: left;
+  text-decoration: none;
+  width: 100%;
+}
+
+.action {
+  cursor: pointer;
+}
+.action:hover {
+  background: var(--component-list-item-bg-hover);
+}
+.action:focus-visible {
+  outline: var(--focus-ring-width) solid var(--component-list-focus-ring);
+  outline-offset: calc(var(--focus-ring-width) * -1);
+}
+
+.content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+}
+
+.title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.description {
+  color: var(--component-list-description);
+  font-size: var(--component-list-description-font-size);
+  line-height: var(--component-list-description-line-height);
+  margin-top: var(--component-list-description-offset);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.left,
+.right {
+  align-items: center;
+  display: inline-flex;
+  flex: none;
+  justify-content: center;
+}
+
+.selected .action,
+.selected .static-content {
+  background: var(--component-list-item-bg-selected);
+  color: var(--component-list-item-text-selected);
+}
+.selected .description {
+  color: var(--component-list-description-selected);
+}
+
+.list_disabled {
+  color: var(--component-list-text-disabled);
+}
+
+.item_divider:not(:last-child)::after {
+  background: var(--component-list-divider);
+  bottom: 0;
+  content: "";
+  height: var(--border-width-hairline);
+  left: var(--component-list-item-padding-inline);
+  position: absolute;
+  right: var(--component-list-item-padding-inline);
+}
+
+.density_compact .action,
+.density_compact .static-content {
+  min-height: var(--component-list-item-min-height-compact);
+  padding-bottom: var(--component-list-item-padding-block-compact);
+  padding-top: var(--component-list-item-padding-block-compact);
+}
+
+.size_s {
+  font-size: var(--component-list-font-size-s);
+  line-height: var(--component-list-line-height-s);
+}
+.size_s .action,
+.size_s .static-content {
+  min-height: var(--component-list-item-min-height-s);
+}
+
+.size_m {
+  font-size: var(--component-list-font-size-m);
+  line-height: var(--component-list-line-height-m);
+}
+
+.size_l {
+  font-size: var(--component-list-font-size-l);
+  line-height: var(--component-list-line-height-l);
+}
+.size_l .action,
+.size_l .static-content {
+  min-height: var(--component-list-item-min-height-l);
+  padding-left: var(--component-list-item-padding-inline-l);
+  padding-right: var(--component-list-item-padding-inline-l);
+}
+
+.item_disabled {
+  color: var(--component-list-item-text-disabled);
+}
+.item_disabled .action {
+  cursor: not-allowed;
+}
+.item_disabled .action:hover {
+  background: transparent;
+}
+
+.section {
+  list-style: none;
+  margin: var(--space-0);
+  padding: var(--space-0);
+}
+
+.section + .section {
+  margin-top: var(--component-list-section-gap);
+}
+
+.section-title {
+  color: var(--component-list-section-title);
+  font-size: var(--component-list-section-title-font-size);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--letter-spacing-ui);
+  line-height: var(--component-list-section-title-line-height);
+  padding: var(--component-list-section-title-padding-block-start) var(--component-list-item-padding-inline) var(--component-list-section-title-padding-block-end);
+  text-transform: uppercase;
+}
+
+.nested-list {
+  list-style: none;
+  margin: var(--space-0);
+  padding: var(--space-0);
+}

package/esm/List/index.d.ts

@@ -0,0 +1,2 @@
+export { List, ListItem, ListSection } from "./List";
+export type { ListDensity, ListItemBaseProps, ListItemButtonProps, ListItemLinkProps, ListItemProps, ListItemStaticProps, ListProps, ListSectionProps, ListSize, ListSurface, } from "./index.props";

package/esm/List/index.props.d.ts

@@ -0,0 +1,43 @@
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+export type ListSize = "s" | "m" | "l";
+export type ListDensity = "compact" | "normal";
+export type ListSurface = "none" | "container" | "items";
+export interface ListContextValue {
+    disabled: boolean;
+    dividers: boolean;
+    surface: ListSurface;
+}
+export interface ListProps extends HTMLAttributes<HTMLUListElement> {
+    ariaLabel?: string;
+    density?: ListDensity;
+    disabled?: boolean;
+    dividers?: boolean;
+    size?: ListSize;
+    surface?: ListSurface;
+}
+export interface ListItemBaseProps {
+    children: ReactNode;
+    className?: string;
+    contentLeft?: ReactNode;
+    contentRight?: ReactNode;
+    description?: ReactNode;
+    disabled?: boolean;
+    selected?: boolean;
+}
+export interface ListItemStaticProps extends ListItemBaseProps, Omit<HTMLAttributes<HTMLLIElement>, "children" | "onClick"> {
+    href?: never;
+    onAction?: never;
+}
+export interface ListItemButtonProps extends ListItemBaseProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "disabled" | "onClick"> {
+    href?: never;
+    onAction: () => void;
+}
+export interface ListItemLinkProps extends ListItemBaseProps, Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children" | "href"> {
+    href: string;
+    onAction?: () => void;
+}
+export type ListItemProps = ListItemStaticProps | ListItemButtonProps | ListItemLinkProps;
+export interface ListSectionProps extends Omit<HTMLAttributes<HTMLLIElement>, "title"> {
+    children: ReactNode;
+    title?: ReactNode;
+}