@ankh-studio/components

Web Components built with Stencil.js for the Ankh Studio design system.

Built on @ankh-studio/themes - pre-composed CSS themes that include design tokens, reset, and base styles.

Installation

npm install @ankh-studio/components

Quick Start

With a bundler (recommended)

import '@ankh-studio/components';

With a script tag

<script type="module" src="https://unpkg.com/@ankh-studio/components"></script>

Include a theme

Components require a theme from @ankh-studio/themes:

@import '@ankh-studio/themes/default.css';

Available Components

Component	Description
<ankh-button>	Button with variants: filled, outlined, text, elevated, tonal
<ankh-icon>	Icon using Material Symbols font, with size and fill variants
<ankh-focus-ring>	Focus indicator for keyboard navigation
<ankh-ripple>	Material-style ripple effect

Usage

Button

<ankh-button>Default</ankh-button>
<ankh-button variant="filled">Filled</ankh-button>
<ankh-button variant="outlined">Outlined</ankh-button>
<ankh-button variant="text">Text</ankh-button>
<ankh-button variant="elevated">Elevated</ankh-button>
<ankh-button variant="tonal">Tonal</ankh-button>

Icon

<ankh-icon name="home"></ankh-icon>
<ankh-icon name="favorite" filled></ankh-icon>
<ankh-icon name="settings" size="lg"></ankh-icon>
<ankh-icon name="delete" label="Delete item"></ankh-icon>

Requires the Material Symbols Outlined font to be loaded by the consumer.

Icon Props

Prop	Type	Default	Description
name	string	—	Material Symbols icon name (required)
size	sm | md | lg | xl	md	Rendered size
filled	boolean	false	Use the filled variant
label	string	—	Accessible label; omit for decorative icons

Button Props

Prop	Type	Default	Description
variant	filled | outlined | text | elevated | tonal	filled	Visual style
size	small | medium | large	medium	Button size
full-width	boolean	false	Take full container width
disabled	boolean	false	Disabled state
type	button | submit | reset	button	Button type attribute

Framework Integration

Components work in any framework. For better DX, use Stencil's output targets:

• React: @stencil/react-output-target
• Angular: @stencil/angular-output-target
• Vue: @stencil/vue-output-target

Versioning

This package follows SemVer. The public API surface includes component tag names, props, events, CSS custom properties, and slots.

• Patch – bug fixes that don't change public behaviour
• Minor – new components, props, events, or slots (backwards-compatible)
• Major – renamed/removed tags, props, events, or breaking behavioural changes

Every PR must declare its SemVer impact using the PR template checklist.

Browser Support

Requires browsers supporting:

• Custom Elements v1
• Shadow DOM v1
• CSS light-dark() function (via themes)

Supported: Chrome 123+, Safari 17.5+, Firefox 120+

Documentation

• Architecture Decision Records - Design decisions and proposals
• Contributing - How to contribute

Changelog

0.1.2

• Add ankh-icon component with Material Symbols font rendering
• Add accessibility tests with vitest-axe

0.1.1

• Bug fixes and CI improvements

0.1.0

• Initial release with button, focus-ring, ripple components

License

MIT