@lo-ink/ui 0.1.1 → 0.2.0

package/dist/EmptyState.d.ts

@@ -1,9 +1,10 @@
 import type { HTMLAttributes, ReactNode } from "react";
 export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
     title: ReactNode;
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
     description?: ReactNode;
     icon?: ReactNode;
     action?: ReactNode;
 }
-export declare function EmptyState({ title, description, icon, action, className, ...props }: EmptyStateProps): import("react").JSX.Element;
+export declare function EmptyState({ title, headingLevel, description, icon, action, className, ...props }: EmptyStateProps): import("react").JSX.Element;
 //# sourceMappingURL=EmptyState.d.ts.map

package/dist/EmptyState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../src/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,cAAc,CAAC,cAAc,CAAC,EAC9B,OAAO,CACR;IACC,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,MAAM,EACN,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,+BAejB"}
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../src/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,cAAc,CAAC,cAAc,CAAC,EAC9B,OAAO,CACR;IACC,KAAK,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACjC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,YAAgB,EAChB,WAAW,EACX,IAAI,EACJ,MAAM,EACN,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,+BAgBjB"}

package/dist/EmptyState.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classes } from "./utils.js";
-export function EmptyState({ title, description, icon, action, className, ...props }) {
-    return (_jsxs("div", { ...props, className: classes("lo-ui-empty-state", className), children: [icon && (_jsx("div", { className: "lo-ui-empty-state__icon", "aria-hidden": "true", children: icon })), _jsx("h2", { className: "lo-ui-empty-state__title", children: title }), description && (_jsx("p", { className: "lo-ui-empty-state__description", children: description })), action && _jsx("div", { className: "lo-ui-empty-state__action", children: action })] }));
+export function EmptyState({ title, headingLevel = 2, description, icon, action, className, ...props }) {
+    const Tag = `h${headingLevel}`;
+    return (_jsxs("div", { ...props, className: classes("lo-ui-empty-state", className), children: [icon && (_jsx("div", { className: "lo-ui-empty-state__icon", "aria-hidden": "true", children: icon })), _jsx(Tag, { className: "lo-ui-empty-state__title", children: title }), description && (_jsx("p", { className: "lo-ui-empty-state__description", children: description })), action && _jsx("div", { className: "lo-ui-empty-state__action", children: action })] }));
 }

package/dist/List.d.ts

@@ -1,8 +1,9 @@
 import { type HTMLAttributes, type ReactNode } from "react";
 export interface ListProps extends HTMLAttributes<HTMLUListElement> {
     label?: ReactNode;
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
 }
-export declare function List({ label, children, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: ListProps): import("react").JSX.Element;
+export declare function List({ label, headingLevel, children, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: ListProps): import("react").JSX.Element;
 export interface CellProps extends Omit<HTMLAttributes<HTMLLIElement>, "title"> {
     title: ReactNode;
     subtitle?: ReactNode;

package/dist/List.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../src/List.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG/E,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,gBAAgB,CAAC;IACjE,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,GAAG,KAAK,EACT,EAAE,SAAS,+BAsBX;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,cAAc,CAAC,aAAa,CAAC,EAC7B,OAAO,CACR;IACC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,wEAAwE;IACxE,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,IAAI,qGA6Df,CAAC"}
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../src/List.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG/E,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,gBAAgB,CAAC;IACjE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAClC;AAED,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,YAAgB,EAChB,QAAQ,EACR,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,GAAG,KAAK,EACT,EAAE,SAAS,+BAuBX;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,cAAc,CAAC,aAAa,CAAC,EAC7B,OAAO,CACR;IACC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,wEAAwE;IACxE,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,IAAI,qGA6Df,CAAC"}

package/dist/List.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useId } from "react";
 import { classes } from "./utils.js";
-export function List({ label, children, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
+export function List({ label, headingLevel = 2, children, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
+    const Tag = `h${headingLevel}`;
     const generatedId = useId();
     const labelId = label ? `${generatedId}-label` : undefined;
     const effectiveLabelledBy = ariaLabelledBy ?? (ariaLabel === undefined ? labelId : undefined);
-    return (_jsxs("section", { className: "lo-ui-list-section", children: [label && (_jsx("h2", { className: "lo-ui-list-label", id: labelId, children: label })), _jsx("ul", { ...props, "aria-label": ariaLabel, "aria-labelledby": effectiveLabelledBy, className: classes("lo-ui-list", className), children: children })] }));
+    return (_jsxs("section", { className: "lo-ui-list-section", children: [label && (_jsx(Tag, { className: "lo-ui-list-label", id: labelId, children: label })), _jsx("ul", { ...props, "aria-label": ariaLabel, "aria-labelledby": effectiveLabelledBy, className: classes("lo-ui-list", className), children: children })] }));
 }
 export const Cell = forwardRef(function Cell({ title, subtitle, leading, trailing, trailingAction, onPress, disabled = false, className, ...props }, ref) {
     const content = (_jsxs(_Fragment, { children: [leading && _jsx("span", { className: "lo-ui-cell__leading", children: leading }), _jsxs("span", { className: "lo-ui-cell__body", children: [_jsx("span", { className: "lo-ui-cell__title", children: title }), subtitle && _jsx("span", { className: "lo-ui-cell__subtitle", children: subtitle })] }), trailing && _jsx("span", { className: "lo-ui-cell__trailing", children: trailing }), onPress && !trailing && !trailingAction && (_jsx("svg", { className: "lo-ui-cell__chevron", viewBox: "0 0 20 20", "aria-hidden": "true", children: _jsx("path", { d: "m7.5 4 6 6-6 6" }) }))] }));

package/dist/Typography.d.ts

@@ -4,5 +4,8 @@ export interface TextProps extends HTMLAttributes<HTMLParagraphElement> {
     size?: "caption" | "label" | "body";
 }
 export declare function Text({ tone, size, className, ...props }: TextProps): import("react").JSX.Element;
-export declare function Heading({ className, ...props }: HTMLAttributes<HTMLHeadingElement>): import("react").JSX.Element;
+export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+}
+export declare function Heading({ level, className, ...props }: HeadingProps): import("react").JSX.Element;
 //# sourceMappingURL=Typography.d.ts.map

package/dist/Typography.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../src/Typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,oBAAoB,CAAC;IACrE,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;IAC1C,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;CACrC;AAED,wBAAgB,IAAI,CAAC,EACnB,IAAgB,EAChB,IAAa,EACb,SAAS,EACT,GAAG,KAAK,EACT,EAAE,SAAS,+BAYX;AAED,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,kBAAkB,CAAC,+BAEpC"}
+{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../src/Typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,oBAAoB,CAAC;IACrE,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;IAC1C,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;CACrC;AAED,wBAAgB,IAAI,CAAC,EACnB,IAAgB,EAChB,IAAa,EACb,SAAS,EACT,GAAG,KAAK,EACT,EAAE,SAAS,+BAYX;AAED,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,kBAAkB,CAAC;IACtE,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAC/B;AAED,wBAAgB,OAAO,CAAC,EAAE,KAAS,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,+BAGvE"}

package/dist/Typography.js

@@ -3,6 +3,7 @@ import { classes } from "./utils.js";
 export function Text({ tone = "primary", size = "body", className, ...props }) {
     return (_jsx("p", { ...props, className: classes("lo-ui-text", `lo-ui-text--${tone}`, `lo-ui-text--${size}`, className) }));
 }
-export function Heading({ className, ...props }) {
-    return _jsx("h1", { ...props, className: classes("lo-ui-heading", className) });
+export function Heading({ level = 1, className, ...props }) {
+    const Tag = `h${level}`;
+    return _jsx(Tag, { ...props, className: classes("lo-ui-heading", className) });
 }

package/dist/index.d.ts

@@ -5,5 +5,5 @@ export { Inline, Stack } from "./Layout.js";
 export { Cell, List, type CellProps, type ListProps } from "./List.js";
 export { Checkbox, Switch, type SelectionControlProps, } from "./SelectionControl.js";
 export { TextField, type TextFieldProps } from "./TextField.js";
-export { Heading, Text, type TextProps } from "./Typography.js";
+export { Heading, Text, type HeadingProps, type TextProps, } from "./Typography.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AACvE,OAAO,EACL,QAAQ,EACR,MAAM,EACN,KAAK,qBAAqB,GAC3B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AACvE,OAAO,EACL,QAAQ,EACR,MAAM,EACN,KAAK,qBAAqB,GAC3B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChE,OAAO,EACL,OAAO,EACP,IAAI,EACJ,KAAK,YAAY,EACjB,KAAK,SAAS,GACf,MAAM,iBAAiB,CAAC"}

package/dist/index.js

@@ -5,4 +5,4 @@ export { Inline, Stack } from "./Layout.js";
 export { Cell, List } from "./List.js";
 export { Checkbox, Switch, } from "./SelectionControl.js";
 export { TextField } from "./TextField.js";
-export { Heading, Text } from "./Typography.js";
+export { Heading, Text, } from "./Typography.js";

package/dist/styles.css

@@ -27,7 +27,12 @@
   min-height: var(--lo-size-control);
   padding: 0 var(--lo-space-5);
   border: 1px solid transparent;
-  border-radius: var(--lo-radius-md);
+  border-radius: var(--lo-radius-full);
+  min-width: 0;
+  max-width: 100%;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  text-align: center;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -62,7 +67,7 @@
 
 .lo-ui-button--primary {
   color: var(--lo-color-accent-contrast);
-  background: var(--lo-color-accent);
+  background: var(--lo-color-accent-fill);
 }
 
 .lo-ui-button--primary:hover:not(:disabled) {
@@ -70,12 +75,19 @@
 }
 
 .lo-ui-button--secondary {
-  color: var(--lo-color-text);
-  background: var(--lo-color-surface);
-  border-color: var(--lo-color-border);
+  color: var(--lo-color-accent-text);
+  background: var(--lo-color-accent-soft);
+  border-color: transparent;
+}
+
+.lo-ui-button--secondary:hover:not(:disabled) {
+  background: color-mix(
+    in srgb,
+    var(--lo-color-accent) 20%,
+    var(--lo-color-surface)
+  );
 }
 
-.lo-ui-button--secondary:hover:not(:disabled),
 .lo-ui-button--quiet:hover:not(:disabled) {
   background: var(--lo-color-accent-soft);
 }
@@ -91,7 +103,7 @@
 }
 
 .lo-ui-button--quiet {
-  color: var(--lo-color-accent);
+  color: var(--lo-color-accent-text);
   background: transparent;
 }
 
@@ -135,7 +147,7 @@
   padding: 10px var(--lo-space-3);
   color: var(--lo-color-text);
   background: var(--lo-color-surface);
-  border: 1px solid var(--lo-color-border);
+  border: 1px solid var(--lo-color-control-border);
   border-radius: var(--lo-radius-md);
   font-size: 16px;
   transition:
@@ -228,7 +240,7 @@
   padding: 2px;
   border: 0;
   border-radius: var(--lo-radius-full);
-  background: var(--lo-color-border);
+  background: var(--lo-color-control-border);
   cursor: pointer;
   transition: background-color var(--lo-motion-fast) var(--lo-ease-out);
 }
@@ -245,7 +257,7 @@
 }
 
 .lo-ui-switch:checked {
-  background: var(--lo-color-accent);
+  background: var(--lo-color-accent-fill);
 }
 
 .lo-ui-switch:checked::after {
@@ -265,7 +277,7 @@
   margin: 0;
   display: grid;
   place-items: center;
-  border: 1.5px solid var(--lo-color-border);
+  border: 1.5px solid var(--lo-color-control-border);
   border-radius: 7px;
   background: var(--lo-color-surface);
   cursor: pointer;
@@ -282,8 +294,13 @@
 }
 
 .lo-ui-checkbox:checked {
-  background: var(--lo-color-accent);
-  border-color: var(--lo-color-accent);
+  background: var(--lo-color-accent-fill);
+  border-color: var(--lo-color-accent-fill);
+}
+
+.lo-ui-checkbox:disabled {
+  cursor: default;
+  opacity: 0.5;
 }
 
 .lo-ui-checkbox:checked::after {
@@ -384,6 +401,7 @@
 
 .lo-ui-cell__title {
   font-size: var(--lo-font-size-body);
+  font-weight: var(--lo-font-weight-medium);
 }
 
 .lo-ui-cell__subtitle {
@@ -424,7 +442,7 @@
   place-items: center;
   border-radius: 11px;
   color: var(--lo-color-accent-contrast);
-  background: var(--lo-color-accent);
+  background: var(--lo-color-accent-fill);
 }
 
 .lo-ui-app-icon--small {
@@ -489,6 +507,7 @@
 }
 
 .lo-ui-empty-state__title {
+  color: var(--lo-color-text);
   font-size: var(--lo-font-size-body);
   line-height: var(--lo-line-height-tight);
 }
@@ -519,11 +538,14 @@
 }
 
 .lo-ui-heading {
+  color: var(--lo-color-text);
+  font-weight: var(--lo-font-weight-bold);
   font-size: var(--lo-font-size-title);
   line-height: var(--lo-line-height-tight);
 }
 
 .lo-ui-text {
+  color: var(--lo-color-text);
   line-height: var(--lo-line-height-body);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lo-ink/ui",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Accessible React components for LO miniapps",
   "type": "module",
   "license": "MIT",
@@ -33,7 +33,7 @@
     "build": "tsc -p tsconfig.json && node scripts/copy-assets.mjs"
   },
   "dependencies": {
-    "@lo-ink/design-tokens": "0.1.1"
+    "@lo-ink/design-tokens": "0.2.0"
   },
   "peerDependencies": {
     "react": ">=18 <20",

package/src/EmptyState.tsx

@@ -6,6 +6,7 @@ export interface EmptyStateProps extends Omit<
   "title"
 > {
   title: ReactNode;
+  headingLevel?: 2 | 3 | 4 | 5 | 6;
   description?: ReactNode;
   icon?: ReactNode;
   action?: ReactNode;
@@ -13,12 +14,14 @@ export interface EmptyStateProps extends Omit<
 
 export function EmptyState({
   title,
+  headingLevel = 2,
   description,
   icon,
   action,
   className,
   ...props
 }: EmptyStateProps) {
+  const Tag = `h${headingLevel}` as "h2" | "h3" | "h4" | "h5" | "h6";
   return (
     <div {...props} className={classes("lo-ui-empty-state", className)}>
       {icon && (
@@ -26,7 +29,7 @@ export function EmptyState({
           {icon}
         </div>
       )}
-      <h2 className="lo-ui-empty-state__title">{title}</h2>
+      <Tag className="lo-ui-empty-state__title">{title}</Tag>
       {description && (
         <p className="lo-ui-empty-state__description">{description}</p>
       )}

package/src/List.tsx

@@ -3,16 +3,19 @@ import { classes } from "./utils.js";
 
 export interface ListProps extends HTMLAttributes<HTMLUListElement> {
   label?: ReactNode;
+  headingLevel?: 2 | 3 | 4 | 5 | 6;
 }
 
 export function List({
   label,
+  headingLevel = 2,
   children,
   className,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
   ...props
 }: ListProps) {
+  const Tag = `h${headingLevel}` as "h2" | "h3" | "h4" | "h5" | "h6";
   const generatedId = useId();
   const labelId = label ? `${generatedId}-label` : undefined;
   const effectiveLabelledBy =
@@ -20,9 +23,9 @@ export function List({
   return (
     <section className="lo-ui-list-section">
       {label && (
-        <h2 className="lo-ui-list-label" id={labelId}>
+        <Tag className="lo-ui-list-label" id={labelId}>
           {label}
-        </h2>
+        </Tag>
       )}
       <ul
         {...props}

package/src/Typography.tsx

@@ -25,9 +25,11 @@ export function Text({
   );
 }
 
-export function Heading({
-  className,
-  ...props
-}: HTMLAttributes<HTMLHeadingElement>) {
-  return <h1 {...props} className={classes("lo-ui-heading", className)} />;
+export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
+}
+
+export function Heading({ level = 1, className, ...props }: HeadingProps) {
+  const Tag = `h${level}` as "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+  return <Tag {...props} className={classes("lo-ui-heading", className)} />;
 }

package/src/index.ts

@@ -9,4 +9,9 @@ export {
   type SelectionControlProps,
 } from "./SelectionControl.js";
 export { TextField, type TextFieldProps } from "./TextField.js";
-export { Heading, Text, type TextProps } from "./Typography.js";
+export {
+  Heading,
+  Text,
+  type HeadingProps,
+  type TextProps,
+} from "./Typography.js";

package/src/styles.css

@@ -27,7 +27,12 @@
   min-height: var(--lo-size-control);
   padding: 0 var(--lo-space-5);
   border: 1px solid transparent;
-  border-radius: var(--lo-radius-md);
+  border-radius: var(--lo-radius-full);
+  min-width: 0;
+  max-width: 100%;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  text-align: center;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -62,7 +67,7 @@
 
 .lo-ui-button--primary {
   color: var(--lo-color-accent-contrast);
-  background: var(--lo-color-accent);
+  background: var(--lo-color-accent-fill);
 }
 
 .lo-ui-button--primary:hover:not(:disabled) {
@@ -70,12 +75,19 @@
 }
 
 .lo-ui-button--secondary {
-  color: var(--lo-color-text);
-  background: var(--lo-color-surface);
-  border-color: var(--lo-color-border);
+  color: var(--lo-color-accent-text);
+  background: var(--lo-color-accent-soft);
+  border-color: transparent;
+}
+
+.lo-ui-button--secondary:hover:not(:disabled) {
+  background: color-mix(
+    in srgb,
+    var(--lo-color-accent) 20%,
+    var(--lo-color-surface)
+  );
 }
 
-.lo-ui-button--secondary:hover:not(:disabled),
 .lo-ui-button--quiet:hover:not(:disabled) {
   background: var(--lo-color-accent-soft);
 }
@@ -91,7 +103,7 @@
 }
 
 .lo-ui-button--quiet {
-  color: var(--lo-color-accent);
+  color: var(--lo-color-accent-text);
   background: transparent;
 }
 
@@ -135,7 +147,7 @@
   padding: 10px var(--lo-space-3);
   color: var(--lo-color-text);
   background: var(--lo-color-surface);
-  border: 1px solid var(--lo-color-border);
+  border: 1px solid var(--lo-color-control-border);
   border-radius: var(--lo-radius-md);
   font-size: 16px;
   transition:
@@ -228,7 +240,7 @@
   padding: 2px;
   border: 0;
   border-radius: var(--lo-radius-full);
-  background: var(--lo-color-border);
+  background: var(--lo-color-control-border);
   cursor: pointer;
   transition: background-color var(--lo-motion-fast) var(--lo-ease-out);
 }
@@ -245,7 +257,7 @@
 }
 
 .lo-ui-switch:checked {
-  background: var(--lo-color-accent);
+  background: var(--lo-color-accent-fill);
 }
 
 .lo-ui-switch:checked::after {
@@ -265,7 +277,7 @@
   margin: 0;
   display: grid;
   place-items: center;
-  border: 1.5px solid var(--lo-color-border);
+  border: 1.5px solid var(--lo-color-control-border);
   border-radius: 7px;
   background: var(--lo-color-surface);
   cursor: pointer;
@@ -282,8 +294,13 @@
 }
 
 .lo-ui-checkbox:checked {
-  background: var(--lo-color-accent);
-  border-color: var(--lo-color-accent);
+  background: var(--lo-color-accent-fill);
+  border-color: var(--lo-color-accent-fill);
+}
+
+.lo-ui-checkbox:disabled {
+  cursor: default;
+  opacity: 0.5;
 }
 
 .lo-ui-checkbox:checked::after {
@@ -384,6 +401,7 @@
 
 .lo-ui-cell__title {
   font-size: var(--lo-font-size-body);
+  font-weight: var(--lo-font-weight-medium);
 }
 
 .lo-ui-cell__subtitle {
@@ -424,7 +442,7 @@
   place-items: center;
   border-radius: 11px;
   color: var(--lo-color-accent-contrast);
-  background: var(--lo-color-accent);
+  background: var(--lo-color-accent-fill);
 }
 
 .lo-ui-app-icon--small {
@@ -489,6 +507,7 @@
 }
 
 .lo-ui-empty-state__title {
+  color: var(--lo-color-text);
   font-size: var(--lo-font-size-body);
   line-height: var(--lo-line-height-tight);
 }
@@ -519,11 +538,14 @@
 }
 
 .lo-ui-heading {
+  color: var(--lo-color-text);
+  font-weight: var(--lo-font-weight-bold);
   font-size: var(--lo-font-size-title);
   line-height: var(--lo-line-height-tight);
 }
 
 .lo-ui-text {
+  color: var(--lo-color-text);
   line-height: var(--lo-line-height-body);
 }