# mica This is the documentation for the `@akonwi/mica` package, a CSS-first component library built from custom elements, native HTML, and small optional ES modules. It has no shared runtime and requires no consumer build step. Import `@akonwi/mica/mica.css`, then import only the enhancement modules used by the page. Follow documented element names, attributes, classes, and markup anatomy exactly; optional modules enhance working markup and never render it. ## Overview - [Introduction](https://akonwi.io/mica/): Custom elements. Native behavior. Nearly no JavaScript. - [Tokens & theming](https://akonwi.io/mica/docs/tokens.html): Knobs → scales → roles. Theming is swapping token values, never overriding component CSS. - [Preset](https://akonwi.io/mica/docs/preset.html): Constructive defaults: raw HTML should look finished, not like nothing. - [Accessibility](https://akonwi.io/mica/docs/accessibility.html): Native semantics first; script only where access requires it. ## Layout - [vstack](https://akonwi.io/mica/docs/vstack.html): Vertical flow with consistent gaps. The workhorse. (CSS-only) - [hstack](https://akonwi.io/mica/docs/hstack.html): One horizontal row. Wrapping is opt-in, per the name's promise. (CSS-only) - [zstack](https://akonwi.io/mica/docs/zstack.html): Layering: children share one grid cell. Paint order is DOM order. (CSS-only) - [center](https://akonwi.io/mica/docs/center.html): Intrinsic horizontal centering with a readable measure. (CSS-only) - [box](https://akonwi.io/mica/docs/box.html): Padding; an inside for content. (CSS-only) - [grid](https://akonwi.io/mica/docs/grid.html): Responsive grid with zero media queries. (CSS-only) - [sidecar](https://akonwi.io/mica/docs/sidecar.html): A fixed + flexible pair that stacks when narrow. This page's shell uses it. (CSS-only) - [switcher](https://akonwi.io/mica/docs/switcher.html): A row that switches to a column below a width threshold. (CSS-only) - [reel](https://akonwi.io/mica/docs/reel.html): Horizontal scroll with snap. Scrolling is the browser's; snap is CSS. (CSS-only) - [frame](https://akonwi.io/mica/docs/frame.html): Hold an aspect ratio; crop media to fit. Uniform thumbnails from chaotic images. (CSS-only) - [cover](https://akonwi.io/mica/docs/cover.html): Fill the viewport; center the principal element; pin the rest to the edges. (CSS-only) ## Elements - [button](https://akonwi.io/mica/docs/button.html): The native element, styled directly. Variants and sizes are data attributes; behavior remains native. (native behavior) - [badge](https://akonwi.io/mica/docs/badge.html): Quiet metadata in a styled box. Informational, never a fake control. (CSS-only) - [avatar](https://akonwi.io/mica/docs/avatar.html): Initials or an image; optional deterministic color and features based on a string. (CSS-only) - [skeleton](https://akonwi.io/mica/docs/skeleton.html): A quiet, composable placeholder for consumer-owned loading states. (CSS-only) - [stat grid](https://akonwi.io/mica/docs/stat-grid.html): Responsive name/value summaries using a native description list and explicit stat items. (CSS-only) - [content](https://akonwi.io/mica/docs/content.html): Tables, lists, code, quotes — prose-adjacent elements that just work. (native behavior) - [progress & meter](https://akonwi.io/mica/docs/progress.html): Thin square bars. Meter grades through the status roles — the browser decides which. (native behavior) ## Forms - [input & textarea](https://akonwi.io/mica/docs/input.html): One control family with buttons: same radius, border, and height. (native behavior) - [select](https://akonwi.io/mica/docs/select.html): Custom picker where the platform allows (base-select); native picker elsewhere. Zero JS either way. (native behavior) - [checkbox](https://akonwi.io/mica/docs/checkbox.html): Drawn with appearance: none; semantics, keyboard, and forms stay native. (native behavior) - [radio](https://akonwi.io/mica/docs/radio.html): The square target: a solid pip in every state. (native behavior) - [segmented control](https://akonwi.io/mica/docs/segmented.html): A native radio group fused into one compact control. No script, no reconstructed ARIA. (native behavior) - [switch](https://akonwi.io/mica/docs/switch.html): A native checkbox with switch semantics, wearing a track. Square, like everything else. (native behavior) - [fieldset](https://akonwi.io/mica/docs/fieldset.html): A titled group, not a bordered box. Disabling one silences everything inside. (native behavior) - [field validation](https://akonwi.io/mica/docs/field.html): Declarative per-cause errors below the field. No browser bubbles. (JS-enhanced) - [combobox](https://akonwi.io/mica/docs/combobox.html): A native datalist, upgraded. Without the module: functional autocomplete. With it: styled listbox, filtering, active-descendant keys. (JS-enhanced) ## Patterns - [stepper](https://akonwi.io/mica/docs/stepper.html): A compact previous, current, and next frame for any consumer-owned sequence. (native behavior) - [dialog](https://akonwi.io/mica/docs/dialog.html): Modal and drawer. Focus trap, Esc, and top layer — the browser's. Open/close — invoker commands (shimmed while support spreads). (native behavior) - [accordion](https://akonwi.io/mica/docs/accordion.html): details + summary. Exclusivity, keyboard, and semantics are the browser's — the shared name attribute does the grouping. (native behavior) - [popover & tooltip](https://akonwi.io/mica/docs/popover.html): popover attribute + popovertarget invokers. Toggle, light dismiss, Esc, top layer — the browser's. Zero JS. (native behavior) - [toast](https://akonwi.io/mica/docs/toast.html): A custom element around a native manual popover. Display, dismissal, and announcement are declarative; queueing and auto-dismiss are an opt-in JS enhancement. (native behavior) - [tabs](https://akonwi.io/mica/docs/tabs.html): The one pattern the platform still can't do accessibly without script. m-tabs enhances working markup — it never renders it. (JS-enhanced) ## Additional reference - [Kitchen-sink demo](https://akonwi.io/mica/demo.html): Every component and representative state on one page. - [Package README](https://github.com/akonwi/mica#readme): Installation, distribution options, progressive-enhancement model, and browser support.