diff --git a/.claude/CLAUDE.md b/.claude/CLAUDE.md new file mode 100644 index 000000000..b9f51af77 --- /dev/null +++ b/.claude/CLAUDE.md @@ -0,0 +1,116 @@ +# CLAUDE.md + +This file provides guidance to Claude Code (claude.ai/code) when working with code in this +repository. + +## Project Overview + +SIX UI Library is a Stencil-based web component library providing 60+ components with framework +wrappers for Angular, React, and Vue. The monorepo uses npm workspaces. Originally forked from +[Shoelace](https://shoelace.style/). + +## Prerequisites + +Node.js >= 24 + +## Commands + +```bash +# Install dependencies (run from root) +npm install + +# Dev server with hot reload (localhost:3333) +npm start + +# Build all packages (core + wrappers + docs) +npm run build + +# Build core library + framework wrappers only +npm run build:lib + +# Unit tests (Jest, runs with TZ='Etc/GMT-2') +npm run test + +# E2E tests (Playwright, from root) +npm run test:e2e + +# Single component E2E test (from libraries/ui-library) +cd libraries/ui-library && npx playwright test six-button + +# E2E with UI mode +cd libraries/ui-library && npx playwright test --ui + +# Update E2E screenshots after visual changes +cd libraries/ui-library && npx playwright test six-button --update-snapshots + +# Lint +npm run lint:lib + +# Format — IMPORTANT: always run before committing +npm run prettier:write +``` + +## Architecture + +**Monorepo:** + +- `libraries/ui-library` — Core Stencil components (source of truth) +- `libraries/ui-library-angular` — Angular wrappers (auto-generated via stencil.config.ts) +- `libraries/ui-library-react` — React wrappers (auto-generated) +- `libraries/ui-library-vue` — Vue wrappers (auto-generated) +- `examples/` — Demo apps (Angular, React, Vue, Nuxt, vanilla JS) +- `docs/` — VitePress documentation site + +**Component file structure** (in `libraries/ui-library/src/components/six-{name}/`): + +- `six-{name}.tsx` — Stencil component (TypeScript + JSX) +- `six-{name}.scss` — Styles (SCSS, shadow DOM) +- `six-{name}.e2e.ts` — E2E tests (Playwright) +- `index.html` — Demo/dev page for `npm start` +- `readme.md` — Auto-generated by Stencil, do NOT edit + +**Key source directories:** + +- `src/utils/` — Shared utilities (23 modules — popover, form, event-listeners, etc.) +- `src/global/` — Global styles, CSS variables, SCSS mixins +- `src/functional-components/` — Stencil functional components +- `src/test-utils/fixtures.ts` — Playwright test fixture (CSS injection + coverage) + +## Important Rules + +- **Do NOT edit auto-generated files:** `readme.md` in component dirs, `components.d.ts`, and all + files in `stencil-generated/` directories of wrapper libraries +- **Do NOT add `Co-Authored-By` lines** to commits +- **Update the changelog** at `docs/changelog.md` under the "Upcoming" section for any user-facing + change. Follow [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) format +- **Shadow DOM:** All components use shadow DOM — styles are encapsulated, use CSS custom properties + (`--six-*`) for theming +- **CI verifies clean git state** after build (`git diff --exit-code`), so all auto-generated output + from `npm run build` must be committed + +## Commit Convention + +Format: `type(scope): subject` + +- Types: `feat`, `fix`, `docs`, `refactor`, `perf`, `test`, `build`, `ci`, `chore` +- Scope: component name (e.g., `six-button`) or area (e.g., `core`, `docs`) +- Example: `fix(six-dropdown): handle events on blur` + +## PR Guidelines + +- Branch from `main`, merge back to `main` +- New features require tests and a changelog entry +- Bug fixes: include `(fix #xxxx)` in PR title +- Enable "Allow edits from maintainers" +- CI runs: prettier check, lint, unit tests, E2E tests, and build verification + +## Testing + +E2E tests (Playwright) are the primary test approach — 46+ test files covering functional behavior, +visual regression (screenshots), and accessibility (axe-core). Unit tests (Jest) exist only for a +few utility modules. + +- Import `test` from `../../test-utils/fixtures` — the fixture injects the CSS stylesheet and + collects coverage automatically +- Never use `page.waitForTimeout()` in tests +- See `.claude/skills/playwright-tests/` for detailed testing patterns and examples diff --git a/.claude/rules/component-development.md b/.claude/rules/component-development.md new file mode 100644 index 000000000..edc62cb73 --- /dev/null +++ b/.claude/rules/component-development.md @@ -0,0 +1,53 @@ +--- +paths: + - 'libraries/ui-library/src/components/**/*' +--- + +# Stencil Component Development + +## Component Pattern + +Components use Stencil decorators with shadow DOM and SCSS: + +```tsx +@Component({ + tag: 'six-{name}', + styleUrl: 'six-{name}.scss', + shadow: true, +}) +export class Six{Name} { + @Element() host!: HTMLSix{Name}Element; + + @Prop({ reflect: true }) propName: string; + @State() internalState = false; + @Event() sixComponentEvent!: EventEmitter; + @Method() async methodName() { } +} +``` + +## Conventions + +- Tag names always start with `six-` prefix +- Class names use PascalCase: `SixButton`, `SixDatepicker` +- Events are prefixed: `six-button-focus`, `six-dropdown-change` +- Use `@Prop({ reflect: true })` for props that should appear as HTML attributes +- Use `hasSlot()` from `../../utils/slot` to check slot content +- Use `submitForm()` from `../../utils/form` for form-participating components +- Expose CSS parts with `part="base"`, `part="label"`, etc. for external styling +- Use JSDoc comments with `@since`, `@status`, `@slot`, `@part` annotations + +## Styling + +- SCSS files use variables from `src/global/` (e.g., `--six-spacing-medium`, `--six-color-*`) +- Use `:host` for component-level styles +- Use `::slotted()` for slotted content styles +- Expose `--six-*` CSS custom properties for theming + +## Adding a New Component + +1. Run `npm run generate` from `libraries/ui-library` to scaffold +2. Implement component in `.tsx` with SCSS styles +3. Add `index.html` demo page +4. Write E2E tests (see `.claude/skills/playwright-tests/`) +5. Build (`npm run build:lib`) to generate wrapper code +6. Update changelog diff --git a/.claude/rules/docs.md b/.claude/rules/docs.md new file mode 100644 index 000000000..7b903ac6f --- /dev/null +++ b/.claude/rules/docs.md @@ -0,0 +1,27 @@ +--- +paths: + - 'docs/**/*' +--- + +# Documentation (VitePress) + +## Setup + +- Documentation is built with VitePress and lives in `docs/` +- Component API docs are auto-generated from Stencil JSDoc annotations +- Start docs dev server: `npm run start:doc` (from root) +- Build docs: `npm run build:doc` +- Fresh start with rebuilt library: `npm run start:doc:fresh:full` + +## Changelog + +- Located at `docs/changelog.md` +- Follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) format +- All user-facing changes MUST be added under the "Upcoming" section +- Categories: Added, Changed, Fixed, Removed +- Prefix breaking changes with **⚠️Breaking** + +## Docs base path + +The docs site is deployed to `/six-webcomponents/v5/` — this is configured in +`docs/.vitepress/config.mts` and must match the `target-folder` in the release workflow. diff --git a/.claude/rules/wrapper-libraries.md b/.claude/rules/wrapper-libraries.md new file mode 100644 index 000000000..371e533fd --- /dev/null +++ b/.claude/rules/wrapper-libraries.md @@ -0,0 +1,33 @@ +--- +paths: + - 'libraries/ui-library-angular/**/*' + - 'libraries/ui-library-react/**/*' + - 'libraries/ui-library-vue/**/*' +--- + +# Framework Wrapper Libraries + +## IMPORTANT: Auto-generated code + +The `src/lib/stencil-generated/` directories in each wrapper library are **auto-generated** by +Stencil output targets configured in `libraries/ui-library/stencil.config.ts`. Do NOT edit these +files manually — they are overwritten on every build. + +## How wrappers work + +- `@stencil/angular-output-target` generates Angular component wrappers +- `@stencil/react-output-target` generates React component wrappers +- `@stencil/vue-output-target` generates Vue component wrappers with v-model support + +## Vue v-model bindings + +Vue wrappers have component models configured in `stencil.config.ts`: + +- `six-checkbox`, `six-switch` → `checked` prop via `change` event +- `six-input`, `six-textarea`, `six-range` → `value` prop via `input` event +- `six-select`, `six-datepicker`, `six-date` → `value` prop via `change` event + +## Modifying wrapper behavior + +To change wrapper generation, edit the output target config in +`libraries/ui-library/stencil.config.ts`, then run `npm run build:lib`. diff --git a/.claude/skills/playwright-tests/SKILL.md b/.claude/skills/playwright-tests/SKILL.md new file mode 100644 index 000000000..a395f7533 --- /dev/null +++ b/.claude/skills/playwright-tests/SKILL.md @@ -0,0 +1,477 @@ +--- +name: playwright-tests +description: + Write Playwright E2E tests for Stencil web components. Use when creating tests, writing e2e tests, + or testing components with functional tests, screenshot tests, and accessibility tests. +--- + +# Component Testing with Playwright + +## Setup + +```typescript +import { test } from '../../test-utils/fixtures'; +import { expect } from '@playwright/test'; +import AxeBuilder from '@axe-core/playwright'; +``` + +The `test` fixture automatically wraps content passed to `page.setContent()` with the correct CSS +stylesheet link. + +## Test File Structure + +Every component test file has three `test.describe` blocks with **clear separation of concerns**: + +```typescript +// 1. Functional tests - what users SEE and DO (behavior, events, keyboard) +test.describe('six-{component} behavior', () => { + test('should be visible and show text when open', ...); // Visual state + test('should be hidden when closed', ...); // Visual state + test('should skip disabled in tab navigation', ...); + test('should emit events (focus, change, blur)', ...); + test('should not change state when disabled', ...); + test('should {keyboard behavior per APG}', ...); + // Component-specific tests... +}); + +// 2. Screenshot tests - visual regression +test.describe('six-{component} screenshots', () => { + const states = [ + { name: 'default', props: '' }, + { name: 'disabled', props: 'disabled' }, + // Component-specific states... + ]; + states.forEach(({ name, props }) => { + test(`should match screenshot for ${name}`, ...); + }); +}); + +// 3. Accessibility tests - ARIA attributes and axe-core validation +test.describe('six-{component} accessibility', () => { + test('should have correct ARIA attributes', ...); // role, aria-live, aria-atomic + test('should have aria-hidden="true" when closed', ...); // ARIA state + test('should have aria-hidden="false" when open', ...); // ARIA state + test('should have no a11y violations for default', ...); // axe-core + test('should have no a11y violations for disabled', ...); + // Key state variations... +}); +``` + +### Separation of Concerns + +**IMPORTANT:** Keep functional tests and accessibility tests separate. + +- **Functional tests** - What sighted users see/experience + - Assertions: `toBeVisible()`, `toBeHidden()`, `toContainText()` +- **Accessibility tests** - What screen reader users experience + - Assertions: `toHaveAttribute('aria-hidden', 'true')`, `toHaveRole()`, axe-core + +**Why separate?** + +- A failure clearly indicates whether it's a visual bug or an accessibility bug +- Ensures both aspects are actually tested (correct ARIA doesn't mean it's visually working, and + vice versa) +- Makes tests more maintainable and easier to understand + +## What to Test + +**VERY IMPORTANT:** Never use `page.waitForTimeout()` in tests. + +### Research Phase (before writing tests) + +- [ ] Read the component source code thoroughly +- [ ] Read the component's index.html demo page +- [ ] Check APG pattern if component has one (see APG section below) +- [ ] Note all props, events, slots, and methods +- [ ] Identify what method is used to show and hide any parts of the component. Popover? + +### Functional Tests + +**Every interactive component needs:** + +- [ ] **Behavior tests** - Logic, state transitions, error handling (things screenshots can't + verify) +- [ ] **Disabled state** - `click({ force: true })` doesn't change state +- [ ] **Tab navigation** - Tab skips disabled elements +- [ ] **Events (combined)** - focus, change, blur in one realistic flow +- [ ] **Standard event forwarding** - six-\* events → standard events (check the implementation if + `eventListeners.forward` is used) +- [ ] **Keyboard (per APG)** - All keys in one test with disabled items +- [ ] **Value normalization** - null/undefined → empty string (for inputs) +- [ ] **All props tested** - constraints, callbacks, formats, etc. +- [ ] **Programmatic value/state changes** - setting values via JS + +**Avoid redundant tests:** Don't write functional tests that only check visibility/appearance and +implement screenshot tests for those states instead. Screenshots already verify visual correctness. +Functional tests should focus on _behavior_ that screenshots can't capture (error handling, state +transitions, event emission, etc.). + +**Example: Testing visibility by visible/hidden state:** + +```typescript +test('should show and hide via open prop', async ({ page }) => { + await page.setContent('Alert message'); + const alert = page.locator('six-alert'); + + await expect(page.getByRole('alert')).toBeHidden(); + + // Show alert + await alert.evaluate((el: HTMLElement) => el.setAttribute('open', '')); + await expect(page.getByRole('alert')).toBeVisible(); + + // Hide alert + await alert.evaluate((el: HTMLElement) => el.removeAttribute('open')); + await expect(page.getByRole('alert')).toBeHidden(); +}); +``` + +**Example: Testing visibility by opacity (for popover-based components):** + +```typescript +await expect(page.locator('six-dropdown [part="panel"]')).toHaveCSS('opacity', '0'); +await expect(page.locator('six-dropdown [part="panel"]')).toHaveCSS('opacity', '1'); +``` + +**Example: Testing visibility by height** + +```typescript +await expect(page.locator('.details__body')).toHaveCSS('height', '0px'); +expect( + await page.locator('.details__body').evaluate((el) => parseFloat(getComputedStyle(el).height)) +).toBeGreaterThan(0); +``` + +### ARIA Authoring Practices Guide (APG) + +Consult the [ARIA APG](https://www.w3.org/WAI/ARIA/apg/patterns) for each component. **Read the full +pattern page**, including: + +1. **Description** - Required ARIA roles, states, and properties +2. **Keyboard Interaction** - All required keyboard behaviors +3. **Examples** - Linked at the bottom of each pattern page; study these for correct implementation + +- `six-alert` → [Alert](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) +- `six-breadcrumbs` → [Breadcrumb](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/) +- `six-checkbox` → [Checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/) +- `six-date` → + [Date Picker Dialog](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/) +- `six-details` → [Disclosure](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/) +- `six-dialog` → [Dialog (Modal)](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) +- `six-dropdown`, `six-select` → [Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) +- `six-menu` → [Menu](https://www.w3.org/WAI/ARIA/apg/patterns/menu/) +- `six-radio` → [Radio Group](https://www.w3.org/WAI/ARIA/apg/patterns/radio/) +- `six-range` → [Slider](https://www.w3.org/WAI/ARIA/apg/patterns/slider/) +- `six-switch` → [Switch](https://www.w3.org/WAI/ARIA/apg/patterns/switch/) +- `six-tab-group` → [Tabs](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) +- `six-tooltip` → [Tooltip](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/) + +**Rule:** Test ALL keyboard interactions in ONE test using a fixture with disabled items. This tests +real-world scenarios and ensures disabled items are skipped. + +### Screenshot Tests + +**Use for:** Visual features functional tests can't verify (slot positioning, styling, states, focus +rings) + +**Don't use for:** Behavior, events, accessibility + +**States to capture:** + +- [ ] Default/unchecked +- [ ] Active state (checked, selected, open) +- [ ] Disabled +- [ ] Disabled + active +- [ ] All type/variant props +- [ ] All size variants (if applicable) +- [ ] Custom slot content (if applicable) +- [ ] **Focus state** - For focusable components, capture the focus ring styling +- [ ] **Hover state** - For interactive components, capture the hover styling +- [ ] **Focus-visible state** - Keyboard focus indicator (distinct from mouse focus) + +**IMPORTANT: Always validate screenshots visually.** After generating or updating snapshots, open +the PNG files and verify: + +- [ ] Content is fully visible (not cropped) +- [ ] Popover panels show completely (they use `position: fixed`) +- [ ] Focus rings and hover states are captured +- [ ] No unexpected visual artifacts + +**Focusable components** (require focus/hover/focus-visible screenshots): + +- **Form controls:** six-button, six-checkbox, six-input, six-radio, six-range, six-switch, + six-textarea +- **Pickers:** six-datepicker, six-timepicker, six-select, six-language-switcher, six-item-picker, + six-rating +- **Other interactive:** six-search-field, six-tab-group + +### Accessibility Tests + +**ARIA attribute tests** (what screen readers need): + +- [ ] `role` - Verify the element has the correct ARIA role +- [ ] `aria-hidden` - Test hidden state for screen readers +- [ ] `aria-live`, `aria-atomic` - For dynamic content announcements +- [ ] `aria-checked`, `aria-selected` - For toggle states +- [ ] Other ARIA attributes (aria-label, aria-describedby, etc.) + +**axe-core tests** (WCAG compliance): + +- [ ] Default state +- [ ] Key state variations (disabled, checked, open, etc.) +- [ ] Document any disabled rules with TODOs + +## How to Test (Patterns) + +### Selectors: locator vs getByRole + +- **Click/interact** - `page.locator('six-checkbox').click()` +- **Assert state** - `expect(page.getByRole('checkbox')).toBeChecked()` +- **Assert role** - `expect(page.getByRole('alert')).toHaveRole('alert')` + +**Why:** `locator('six-component')` clicks the host element (real user behavior). `getByRole()` +queries the accessibility tree (verifies a11y). + +**Prefer `getByRole()` over `[part="..."]`** when the element has a role and is visible. Only use +part selectors when `getByRole` won't work. + +```typescript +// Good - semantic, queries accessibility tree +const input = page.getByRole('textbox'); +await expect(input).toHaveAttribute('type', 'password'); + +// Avoid - depends on internal part name +const input = page.locator('six-input [part="input"]'); +``` + +### Role Assertions: toHaveRole + +Use `toHaveRole()` instead of `toHaveAttribute('role', ...)`: + +```typescript +// Good +await expect(page.getByRole('alert')).toHaveRole('alert'); + +// Avoid +await expect(page.locator('[part="base"]')).toHaveAttribute('role', 'alert'); +``` + +### Disabling Animations + +The test fixture disables animations by default for faster, more reliable tests. However, +**after-events** (like `six-dialog-after-show`, `six-dropdown-after-hide`) only fire when animations +complete. + +Use `{ disableAnimations: false }` when testing after-events: + +```typescript +test('should emit show/hide events', async ({ page }) => { + await page.setContent( + `Content`, + // after events are not fired when animations are disabled + { disableAnimations: false } + ); + + const showSpy = await page.spyOnEvent('six-dialog-show'); + const afterShowSpy = await page.spyOnEvent('six-dialog-after-show'); + + await page.locator('six-dialog').evaluate((el: HTMLSixDialogElement) => el.show()); + expect(showSpy).toHaveReceivedEvent(); + await expect.poll(() => afterShowSpy.length).toBe(1); +}); +``` + +### Events: spyOnEvent + +Test focus, change, and blur events in one realistic flow: + +```typescript +test('should emit events (focus, change, blur)', async ({ page }) => { + await page.setContent(` + Checkbox + Other + `); + + // Set up all spies BEFORE actions + const focusSpy = await page.spyOnEvent('six-checkbox-focus'); + const changeSpy = await page.spyOnEvent('six-checkbox-change'); + const blurSpy = await page.spyOnEvent('six-checkbox-blur'); + // Also test standard event forwarding + const standardFocus = await page.spyOnEvent('focus'); + const standardChange = await page.spyOnEvent('change'); + const standardBlur = await page.spyOnEvent('blur'); + + // Click focuses and changes + await page.locator('six-checkbox').click(); + expect(focusSpy).toHaveReceivedEvent(); + expect(standardFocus).toHaveReceivedEvent(); + expect(changeSpy).toHaveReceivedEvent(); + expect(standardChange).toHaveReceivedEvent(); + + // Click elsewhere blurs + await page.locator('six-button').click(); + expect(blurSpy).toHaveReceivedEvent(); + expect(standardBlur).toHaveReceivedEvent(); +}); +``` + +**Matchers:** `toHaveReceivedEvent()`, `toHaveReceivedEventTimes(n)`, +`toHaveReceivedEventDetail(detail)` + +### Async Events: expect.poll + +For events that fire asynchronously (e.g., via `setTimeout`), use `expect.poll()` to wait: + +```typescript +test('should submit form on Enter key', async ({ page }) => { + await page.setContent(` +
+ +
+ `); + + const submitSpy = await page.spyOnEvent('submit'); + + await page.getByRole('textbox').click(); + await page.keyboard.press('Enter'); + + // Wait for async setTimeout in handleKeyDown, then verify event was received + await expect.poll(() => submitSpy.length).toBeGreaterThan(0); +}); +``` + +### Setting Web Component Properties: evaluate + +Use `evaluate()` to set custom element properties (no Playwright API exists for this): + +```typescript +test('should handle null value gracefully', async ({ page }) => { + await page.setContent(''); + + // evaluate is required for setting web component properties + await page.locator('six-input').evaluate((el: HTMLElement & { value: string | null }) => { + el.value = null; + }); + + await expect(page.getByRole('textbox')).toHaveValue(''); +}); +``` + +### Disabled State: force click + +```typescript +test('should not change state when disabled', async ({ page }) => { + await page.setContent('Disabled'); + + await expect(page.getByRole('checkbox')).toBeDisabled(); + await page.locator('six-checkbox').click({ force: true }); + await expect(page.getByRole('checkbox')).not.toBeChecked(); +}); +``` + +### Keyboard Typing: focus first + +When using `page.keyboard.type()`, you must focus the element first: + +```typescript +test('should not allow editing when disabled', async ({ page }) => { + await page.setContent(''); + + const input = page.getByRole('textbox'); + await expect(input).toBeDisabled(); + + // IMPORTANT: focus before typing with keyboard + await input.focus(); + await page.keyboard.type('new text'); + await expect(input).toHaveValue('initial'); +}); +``` + +**Why?** `page.keyboard.type()` sends keystrokes to whatever element has focus. Unlike +`locator.fill()` which auto-focuses, `keyboard.type()` requires explicit focus. + +**When to use:** + +- `fill()` - For setting input values (auto-focuses, clears, types) +- `keyboard.type()` - For testing keyboard rejection (disabled/readonly inputs) + +### Screenshots: state loop + +```typescript +test.describe('six-checkbox screenshots', () => { + const states = [ + { name: 'unchecked', props: '' }, + { name: 'checked', props: 'checked' }, + { name: 'disabled', props: 'disabled' }, + { name: 'disabled-checked', props: 'disabled checked' }, + // other states + ]; + + states.forEach(({ name, props }) => { + test(`should match screenshot for ${name}`, async ({ page }) => { + await page.setContent(`Label`); + await expect(page.locator('.playwright-test-container')).toHaveScreenshot( + `checkbox-${name}.png` + ); + }); + }); +}); +``` + +**Commands:** + +```bash +# Generate/update baselines +cd libraries/ui-library && npx playwright test six-button --update-snapshots + +# Run tests +cd libraries/ui-library && npx playwright test six-button +``` + +### Accessibility: ARIA attributes + +### Accessibility: axe-core + +```typescript +test('should have no a11y violations', async ({ page }) => { + await page.setContent('Button'); + + const results = await new AxeBuilder({ page }).include('six-button').analyze(); + expect(results.violations).toEqual([]); +}); +``` + +**Documenting exceptions:** + +```typescript +// TODO: 'link' button has contrast ratio 3.12, doesn't meet WCAG 2 AA (4.5:1) +if (type === 'link') { + builder = builder.disableRules(['color-contrast']); +} +``` + +### Documenting Component Issues + +When tests reveal component bugs or questionable behavior, document them with TODO comments: + +```typescript +// TODO: Component uses role="image" which is invalid. Should be role="img". +// See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/img_role +test('should have role attribute', async ({ page }) => { + await page.setContent(''); + await expect(page.locator('[part="base"]')).toHaveAttribute('role', 'image'); +}); + +// TODO: Avatar is presentational and should not be focusable. If it is, it needs a visible focus state. +test('should be focusable via tab', async ({ page }) => { + // ... +}); +``` + +**When to add TODOs:** + +- Invalid ARIA roles or attributes (document the correct value) +- Color contrast issues (include the actual vs required ratio) +- Questionable focusability (presentational elements shouldn't be in tab order) +- Missing focus styles (if focusable, must have visible focus indicator) +- Any axe rule you disable (explain why) +- When in doubt, add a TODO instead of trying to fix the test! diff --git a/.devcontainer.json b/.devcontainer.json index 7878330b5..5b15bb160 100644 --- a/.devcontainer.json +++ b/.devcontainer.json @@ -2,7 +2,7 @@ // README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node { "name": "Node.js & TypeScript", - "image": "mcr.microsoft.com/devcontainers/typescript-node:0-18", + "image": "mcr.microsoft.com/devcontainers/typescript-node:1-18", "portsAttributes": { "3000": { "label": "Application", diff --git a/.github/PULL_REQUEST_TEMPLATE.MD b/.github/PULL_REQUEST_TEMPLATE.MD index 4e0986015..2ebca261f 100644 --- a/.github/PULL_REQUEST_TEMPLATE.MD +++ b/.github/PULL_REQUEST_TEMPLATE.MD @@ -4,15 +4,15 @@ https://github.com/six-group/six-webcomponents/blob/dev/.github/CONTRIBUTING.md# --> - ### 🔗 Linked issue - + ### ❓ Type of change + - [ ] 📖 Documentation (updates to the documentation, readme or JSdoc annotations) - [ ] 🐞 Bug fix (a non-breaking change that fixes an issue) @@ -23,26 +23,19 @@ https://github.com/six-group/six-webcomponents/blob/dev/.github/CONTRIBUTING.md# ### 📚 Description - - - - -### 📝 Checklist - - - - + -- [ ] I have linked an issue or discussion. -- [ ] It's submitted to the `main` branch -- [ ] When resolving a specific issue, it's referenced in the PR's title (e.g. `fix #xxx[,#xxx]`, where "xxx" is the issue number) -- [ ] I have updated the documentation accordingly. -- [ ] All tests are passing -- [ ] New/updated tests are included -- [ ] I have updated the "upcoming" section inside _docs/changelog.md_ explaining the changes I contributed + -If adding a **new feature**, the PR's description includes: + diff --git a/.github/contributing.md b/.github/contributing.md index ccc275a9e..3c93f0598 100644 --- a/.github/contributing.md +++ b/.github/contributing.md @@ -22,13 +22,11 @@ guidelines: This allows us to directly make minor edits / refactors and saves a lot of time. - If adding a new feature: - - Add accompanying test case. - Provide a convincing reason to add this feature. Ideally, you should open a suggestion issue first and have it approved before working on it. - If fixing a bug: - - If you are resolving a special issue, add `(fix #xxxx[,#xxxx])` (#xxxx is the issue id) in your PR title for a better release log, e.g. `update entities encoding/decoding (fix #3899)`. - Provide a detailed description of the bug in the PR. Live demo preferred. @@ -57,10 +55,8 @@ guidelines: - Consider the performance / size impact of the changes, and whether the bug being fixes justifies the cost. If the bug being fixed is a very niche edge case, we should try to minimize the size / perf cost to make it worthwhile. - - Is the code perf-sensitive (e.g. in "hot paths" like component updates or the vdom patch function?) - - If the branch is dev-only, performance is less of a concern. ## Development Setup diff --git a/.github/release.md b/.github/release.md index e69fe41f4..895bde759 100644 --- a/.github/release.md +++ b/.github/release.md @@ -49,7 +49,8 @@ In the created branch, edit the file `docs/changelog.md` and replace the `Upcomi 1. Commit the changes with a commit message of `docs: prepare changelog for release VERSION_NUMBER`. 2. Push the branch to GitHub -3. If you branched from main, create a Pull Request with `main` as the base branch. Otherwise, no PR needs to be created. +3. If you branched from main, create a Pull Request with `main` as the base branch. Otherwise, no PR + needs to be created. A member of the Core Team should review the Pull Request. **But don't merge the Pull Request yet**. @@ -58,10 +59,11 @@ A member of the Core Team should review the Pull Request. **But don't merge the 1. Go to [https://github.com/six-group/six-webcomponents/actions/workflows/release.yml](https://github.com/six-group/six-webcomponents/actions/workflows/release.yml) 2. Select `Run workflow` on the top right of the list and set the following parameters: - - Branch: `release/` + - Branch: `release/` or `main` (which is the default) - The version to release: It must match the pattern `vVERSION_NUMBER`, so for the example above it would be `v4.2.3`. **Do not forget the leading `v`!** - Disable _Deploy Docs_ if you release a non-stable release (like RC or beta) + - Type of release `insider` or `regular` based on the release you want to create. 3. Click on `Run Workflow` Once the workflow has completed successfully, check if new version was published on diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 3c43d3945..692fd0900 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -7,26 +7,64 @@ on: pull_request: branches: - main -env: - PUPPETEER_SKIP_DOWNLOAD: true jobs: - build-libs: + lint-and-test: runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v4 - - uses: actions/setup-node@v4 + - uses: actions/checkout@v6 + - uses: actions/setup-node@v6 with: - node-version: 22 - registry-url: 'https://registry.npmjs.org' - cache: 'npm' - env: - NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} + node-version: 24 - run: npm ci - - run: npm run test - - run: npm run build - run: npm run prettier:check - run: npm run lint:lib + - run: npm run test + + e2e-tests: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v6 + - uses: actions/setup-node@v6 + with: + node-version: 24 + - run: npm ci + - name: install playwright browsers + run: npx playwright install --with-deps + - name: playwright tests + run: npm run test:e2e + + - name: upload playwright report + uses: actions/upload-artifact@v7 + if: ${{ !cancelled() }} + with: + name: playwright-report + path: libraries/ui-library/playwright-report + retention-days: 30 + + - name: upload playwright test coverage + uses: actions/upload-artifact@v7 + if: ${{ !cancelled() }} + with: + name: playwright-coverage-html + path: libraries/ui-library/coverage + retention-days: 30 + + - name: code coverage report + uses: 5monkeys/cobertura-action@master + if: github.event_name == 'pull_request' && !cancelled() + with: + path: libraries/ui-library/coverage/cobertura-coverage.xml + minimum_coverage: 0 + + build: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v6 + - uses: actions/setup-node@v6 + with: + node-version: 24 + - run: npm ci + - run: npm run build - name: verify clean build run: git diff --exit-code diff --git a/.github/workflows/dependency-review.yml b/.github/workflows/dependency-review.yml index f3f158a21..210f31597 100644 --- a/.github/workflows/dependency-review.yml +++ b/.github/workflows/dependency-review.yml @@ -19,6 +19,6 @@ jobs: runs-on: ubuntu-latest steps: - name: 'Checkout Repository' - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0 + uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2 - name: 'Dependency Review' - uses: actions/dependency-review-action@595b5aeba73380359d98a5e087f648dbb0edce1b # v4.7.3 + uses: actions/dependency-review-action@v4 diff --git a/.github/workflows/insider-release.yml b/.github/workflows/insider-release.yml deleted file mode 100644 index fd67dc8e0..000000000 --- a/.github/workflows/insider-release.yml +++ /dev/null @@ -1,48 +0,0 @@ -name: Publish insider release on each push to main branch - -on: - push: - branches: [main] - -jobs: - publish-npm: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v4 - - uses: actions/setup-node@v4 - with: - node-version: 22 - registry-url: 'https://registry.npmjs.org' - cache: 'npm' - env: - NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} - - run: npm ci - - run: npm run build - - - name: Resolve version - id: vars - run: | - SHORT_SHA=$(git rev-parse --short HEAD) - echo "sha_short=${SHORT_SHA}" >> $GITHUB_OUTPUT - - - name: 'Version based on commit: 0.0.0-insider.${{ steps.vars.outputs.sha_short }}' - run: npm version -w libraries 0.0.0-insider.${{ steps.vars.outputs.sha_short }} --force --no-git-tag-version - - - name: 'rebuild ui-library-angular to reflect version in libraries/ui-library-angular/dist/ui-library-angular/package.json' - run: npm run build -w libraries/ui-library-angular - - - name: publish - run: | - npm publish --tag=insider --access=public libraries/ui-library/ - npm publish --tag=insider --access=public libraries/ui-library-vue/ - npm publish --tag=insider --access=public libraries/ui-library-angular/dist/ui-library-angular/ - npm publish --tag=insider --access=public libraries/ui-library-react/ - env: - NODE_AUTH_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }} - - - name: 'Deploy Documentation' - uses: JamesIves/github-pages-deploy-action@v4 - with: - folder: docs/.vitepress/dist - # this folder needs to be kept in sync with the base property in /docs/.vitepress/config.mts - target-folder: docs/v5 diff --git a/.github/workflows/pkg.pr.new.yml b/.github/workflows/pkg.pr.new.yml index da227c7a4..bf40d853e 100644 --- a/.github/workflows/pkg.pr.new.yml +++ b/.github/workflows/pkg.pr.new.yml @@ -14,14 +14,10 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout code - uses: actions/checkout@v4 - - uses: actions/setup-node@v4 + uses: actions/checkout@v6 + - uses: actions/setup-node@v6 with: - node-version: 22 - registry-url: 'https://registry.npmjs.org' - cache: 'npm' - env: - NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} + node-version: 24 - run: npm ci - run: npm run build - - run: npx pkg-pr-new publish './libraries/*' + - run: npx pkg-pr-new publish 'libraries/ui-library/' 'libraries/ui-library-vue/' 'libraries/ui-library-react/' 'libraries/ui-library-angular/dist/ui-library-angular/' diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 40869f8ce..11bbcf843 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -5,25 +5,86 @@ on: inputs: version: description: 'The version to release. Format vx.x.x(-[rc|beta].x)' - required: true - type: string + required: false + default: '' deploy_docs: description: 'Deploy Docs. Set to false for non-stable releases!' default: true type: boolean + release_type: + description: 'Release Type' + required: true + default: 'insider' + type: choice + options: + - insider + - regular + push: + branches: + - main + +permissions: + id-token: write # Required for OIDC + pages: write + contents: write + pull-requests: write jobs: - publish-release: + ### publish insider release + publish-insider-release: + if: ${{ inputs.release_type == 'insider' || github.event_name == 'push' }} runs-on: ubuntu-latest steps: - - uses: actions/checkout@v4 - - uses: actions/setup-node@v4 + - uses: actions/checkout@v6 + - uses: actions/setup-node@v6 with: - node-version: 22 + node-version: 24 registry-url: 'https://registry.npmjs.org' cache: 'npm' + - run: npm ci + + - name: 'Build project with new version' + run: npm run build + + - name: Resolve version + id: vars + run: | + SHORT_SHA=$(git rev-parse --short HEAD) + echo "sha_short=${SHORT_SHA}" >> $GITHUB_OUTPUT + + - name: 'Version based on commit: 0.0.0-insider.${{ steps.vars.outputs.sha_short }}' + run: npm version -w libraries 0.0.0-insider.${{ steps.vars.outputs.sha_short }} --force --no-git-tag-version + + - name: 'rebuild ui-library-angular to reflect version in libraries/ui-library-angular/dist/ui-library-angular/package.json' + run: npm run build -w libraries/ui-library-angular + + - name: 'Publish insider release to NPM' env: - NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} + NPM_CONFIG_PROVENANCE: true + run: | + npm publish --tag=insider --access=public libraries/ui-library/ + npm publish --tag=insider --access=public libraries/ui-library-vue/ + npm publish --tag=insider --access=public libraries/ui-library-angular/dist/ui-library-angular/ + npm publish --tag=insider --access=public libraries/ui-library-react/ + + - name: 'Deploy Documentation' + uses: JamesIves/github-pages-deploy-action@v4 + with: + folder: docs/.vitepress/dist + # this folder needs to be kept in sync with the base property in /docs/.vitepress/config.mts + target-folder: docs/v5 + + ### publish regular release + publish-release: + if: ${{ inputs.release_type == 'regular' && inputs.version != '' }} + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v6 + - uses: actions/setup-node@v6 + with: + node-version: 24 + registry-url: 'https://registry.npmjs.org' + cache: 'npm' - run: npm ci - name: 'Set version in package.json files to ${{ inputs.version }}' @@ -45,7 +106,7 @@ jobs: - name: 'Publish to NPM' env: - NODE_AUTH_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }} + NPM_CONFIG_PROVENANCE: true run: | npm publish --tag=latest --access=public libraries/ui-library/ npm publish --tag=latest --access=public libraries/ui-library-vue/ @@ -72,7 +133,6 @@ jobs: body: '${{ inputs.version }}' - name: 'Deploy Documentation' - if: ${{ inputs.deploy_docs }} uses: JamesIves/github-pages-deploy-action@v4 with: folder: docs/.vitepress/dist diff --git a/.github/workflows/variables.yml b/.github/workflows/variables.yml index 02b1e3165..85bafe363 100644 --- a/.github/workflows/variables.yml +++ b/.github/workflows/variables.yml @@ -12,7 +12,7 @@ jobs: display-variables: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v4 + - uses: actions/checkout@v6 - name: 'Display variables' run: | echo "github.ref_name: ${{ github.ref_name }}" diff --git a/.gitignore b/.gitignore index 8a4148a12..d12801ee4 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,4 @@ node_modules dist docs/.vitepress/cache docs/.vitepress/dist +test-results diff --git a/.idea/runConfigurations/All_Tests_in_playwright_config_ts.xml b/.idea/runConfigurations/All_Tests_in_playwright_config_ts.xml new file mode 100644 index 000000000..af2d8db80 --- /dev/null +++ b/.idea/runConfigurations/All_Tests_in_playwright_config_ts.xml @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/.npmrc b/.npmrc index 214c29d13..c9ad8fae2 100644 --- a/.npmrc +++ b/.npmrc @@ -1 +1,2 @@ registry=https://registry.npmjs.org/ +min-release-age=5 diff --git a/.prettierignore b/.prettierignore index dee4ac7e0..3bb88fbd5 100644 --- a/.prettierignore +++ b/.prettierignore @@ -17,3 +17,7 @@ docs/examples docs/components docs/.vitepress/cache .next +playwright-report/ +test-results/ +coverage +renovate.json diff --git a/.prettierrc.json b/.prettierrc.json index 6219a80ca..ce3f61305 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -4,7 +4,7 @@ "trailingComma": "es5", "overrides": [ { - "files": ["docs/**/*"], + "files": ["docs/**/*", "**/*.md"], "options": { "printWidth": 100, "proseWrap": "always" diff --git a/README.md b/README.md index 3ecdd55ed..673b15ae2 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,10 @@ # SIX UI Library -SIX UI Library is an open source project providing Web Components for SIX web applications. The library can however also -be used for other projects (simply override the css variables). +SIX UI Library is an open source project providing Web Components for SIX web applications. The +library can however also be used for other projects (simply override the css variables). -Please find the deployed documentation listing all components [here](https://six-group.github.io/six-webcomponents/). +Please find the deployed documentation listing all components +[here](https://six-group.github.io/six-webcomponents/). Please find the changelog for the webcomponents [here](docs/changelog.md). @@ -20,11 +21,14 @@ Please find the changelog for the webcomponents [here](docs/changelog.md). ## Issues -Please make sure to respect issue requirements when opening an issue. Issues not conforming to the guidelines may be closed immediately. +Please make sure to respect issue requirements when opening an issue. Issues not conforming to the +guidelines may be closed immediately. ## Contribution -Please make sure to read the [Contributing Guide](https://github.com/six-group/six-webcomponents/blob/main/.github/contributing.md) before making a pull request. +Please make sure to read the +[Contributing Guide](https://github.com/six-group/six-webcomponents/blob/main/.github/contributing.md) +before making a pull request. Thank you to all the people who already contributed to the Six-Webcomponents! @@ -32,7 +36,8 @@ Thank you to all the people who already contributed to the Six-Webcomponents! ## Examples -There are example apps for Angular, Plain Javascript, Vue and React. You can find them in the `examples` directory. +There are example apps for Angular, Plain Javascript, Vue and React. You can find them in the +`examples` directory. ## Structure @@ -51,6 +56,7 @@ There are example apps for Angular, Plain Javascript, Vue and React. You can fin ## Credits -Credit where credit is due. The SIX webcomponents started as clone of the [shoelace project](https://shoelace.style/) and were inspired by the baloise -design-system. Some parts of six-datepicker were copied from the bal-datepicker. -The third party licenses are listed [here](libraries/ui-library/third-party-licenses). +Credit where credit is due. The SIX webcomponents started as clone of the +[shoelace project](https://shoelace.style/) and were inspired by the baloise design-system. Some +parts of six-datepicker were copied from the bal-datepicker. The third party licenses are listed +[here](libraries/ui-library/third-party-licenses). diff --git a/TRADEMARKS.md b/TRADEMARKS.md index 1c9e054cb..eeb6d1cf1 100644 --- a/TRADEMARKS.md +++ b/TRADEMARKS.md @@ -1,7 +1,8 @@ # Trademarks -This project may contain trademarks or logos for projects, products, or services. Authorized use of SIX Group AG and BME Exchange S.A -trademarks or logos is subject to and must follow +This project may contain trademarks or logos for projects, products, or services. Authorized use of +SIX Group AG and BME Exchange S.A trademarks or logos is subject to and must follow [SIX Group's Guidlines](https://www.six-group.com/dam/download/media/guidelines/SIX-guidelines-product-referencing.pdf). -Use of SIX Group BME Exchange S.A or trademarks or logos in modified versions of this project must not cause confusion or -imply SIX Group or BME Exchange S.A sponsorship. Any use of third-party trademarks or logos are subject to those third-party'as policies. +Use of SIX Group BME Exchange S.A or trademarks or logos in modified versions of this project must +not cause confusion or imply SIX Group or BME Exchange S.A sponsorship. Any use of third-party +trademarks or logos are subject to those third-party'as policies. diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts index 114a70908..c1cc08f24 100644 --- a/docs/.vitepress/config.mts +++ b/docs/.vitepress/config.mts @@ -48,7 +48,6 @@ export default withMermaid({ { text: 'Upgrade to v5', link: '/guide/upgrade-v5' }, { text: 'Upgrade to v4', link: '/guide/upgrade-v4' }, { text: 'Design', link: '/guide/design' }, - { text: 'Architecture', link: '/guide/architecture' }, { text: 'Security', link: '/guide/security' }, { text: 'Framework Integrations', @@ -74,6 +73,15 @@ export default withMermaid({ { text: 'TailwindCSS', link: '/guide/styling/tailwind' }, ], }, + { + text: 'Contributing', + collapsed: true, + items: [ + { text: 'Getting Started', link: '/guide/contributing/getting-started' }, + { text: 'Architecture', link: '/guide/contributing/architecture' }, + { text: 'Testing', link: '/guide/contributing/testing' }, + ], + }, ], }, ], diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css index fc70f86dd..4647e23f6 100644 --- a/docs/.vitepress/theme/style.css +++ b/docs/.vitepress/theme/style.css @@ -35,6 +35,7 @@ --vp-button-brand-active-border: var(--vp-c-brand-2); --vp-button-brand-active-text: var(--vp-c-white); --vp-button-brand-active-bg: var(--vp-button-brand-bg); + --vp-layout-max-width: 1920px; /* For larger screens (ultrawide) scale it down to full hd size */ } /* overwrite rounded design to follow six design (apart from the examples) */ @@ -46,3 +47,11 @@ code { background: var(--vp-code-bg); } + +/* + Connected to --vp-layout-max-width. Width of the actual content is limited so the content is not + overly stretched. + */ +.content-container { + max-width: 1000px !important; +} diff --git a/docs/changelog.md b/docs/changelog.md index c515d5108..5e0347bb3 100644 --- a/docs/changelog.md +++ b/docs/changelog.md @@ -6,21 +6,63 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). ## Upcoming +- `six-breadcrumbs` new style aligned with design guidelines. Added `size` interface property. + +## 5.4.0 - 2026-03-12 + +### Added + +- Added param library to choose the icon library also in `six-icon-button` and `six-tile` (default + is material-icons) +- New `six-paginator` component (experimental). + +## 5.3.1 - 2026-03-06 + ### Added -- Added the ability to disable the `ValidationService` on Angular. See - [docs](./guide/angular.md#customisingdisabling-validationservice) for more details. +- Added stage `LOCAL` to `six-stage-indicator` and `six-root` ### Fixed -- `six-spinner` fix container alignment, which doesn't match svg size and position -- `six-file-upload`: fixed drag and drop file handling not triggering file upload +- `six-item-picker`: Fixed a bug where the options would cycle indefinitely when the mouse is moved + outside the component while clicked. Also affects `six-timepicker` and `six-datepicker` -### Removed +## 5.3.0 - 2026-02-11 + +### Fixed + +- `six-select`: Fixed type-to-select interfering with autocomplete input by adding + `disableTypeToSelect` prop to `six-dropdown` +- `six-select`: fixed menu-item alignment with the checkboxes in multiselect mode +- Updated and fixed vulnerable dependencies within the libraries ### Changed -### Deprecated +- Replaced E2E test with comprehensive Playwright tests for most components covering functional + behavior, visual regression, and accessibility +- New [Playwright testing guide](guide/contributing/testing.md) with patterns and best practices +- Improved [Contributing](guide/contributing/getting-started.md) section in documentation +- **⚠️Breaking**: Updated minimum Node.js version requirement to 24. CI workflows and package + engines now require Node.js >= 24. + +## 5.2.0 - 2025-12-11 + +### Added + +- **⚠️Experimental**: Added the ability to disable the `ValidationService` on Angular. See + [docs](./guide/angular#customising-disabling-validationservice) for more details. +- `six-dropdown` : Added `noScroll` property to disable the default panel scroll behavior. Defaults + to false. +- Added `CheckboxMultiSelectValueAccessor` on Angular which binds checkbox values to an array analog + to a multiselect + +### Fixed + +- Updated the React dependency to mitigate CVE-2025-55182. See + [https://www.cve.org/CVERecord?id=CVE-2025-55182](https://www.cve.org/CVERecord?id=CVE-2025-55182) + for more details. +- `six-spinner` fix container alignment, which doesn't match svg size and position +- `six-file-upload`: fixed drag and drop file handling not triggering file upload ## 5.1.1 - 2025-11-04 @@ -290,7 +332,6 @@ documentation reflects the latest stable release. on the view port width. - Improved `six-select` functionality and appearance: - - Display checked items as checkboxes in multiselect mode. - Group selected options on top in multiselect mode. - Added a button to select/deselect all items. diff --git a/docs/components/component.tags.mts b/docs/components/component.tags.mts index f61f3a225..089c9281b 100644 --- a/docs/components/component.tags.mts +++ b/docs/components/component.tags.mts @@ -1 +1 @@ -export const components = ["six-alert","six-avatar","six-badge","six-breadcrumbs","six-breadcrumbs-item","six-button","six-card","six-checkbox","six-date","six-datepicker","six-details","six-dialog","six-drawer","six-dropdown","six-error","six-error-page","six-file-list","six-file-list-item","six-file-upload","six-footer","six-group-label","six-header","six-header-dropdown-item","six-header-item","six-header-menu-button","six-icon","six-icon-button","six-input","six-item-picker","six-language-switcher","six-layout-grid","six-logo","six-main-container","six-menu","six-menu-divider","six-menu-item","six-menu-label","six-picto","six-progress-bar","six-progress-ring","six-radio","six-range","six-rating","six-root","six-search-field","six-select","six-sidebar","six-sidebar-item","six-sidebar-item-group","six-spinner","six-stage-indicator","six-switch","six-tab","six-tab-group","six-tab-panel","six-tag","six-textarea","six-tile","six-timepicker","six-tooltip"]; \ No newline at end of file +export const components = ["six-alert","six-avatar","six-badge","six-breadcrumbs","six-breadcrumbs-item","six-button","six-card","six-checkbox","six-date","six-datepicker","six-details","six-dialog","six-drawer","six-dropdown","six-error","six-error-page","six-file-list","six-file-list-item","six-file-upload","six-footer","six-group-label","six-header","six-header-dropdown-item","six-header-item","six-header-menu-button","six-icon","six-icon-button","six-input","six-item-picker","six-language-switcher","six-layout-grid","six-logo","six-main-container","six-menu","six-menu-divider","six-menu-item","six-menu-label","six-paginator","six-picto","six-progress-bar","six-progress-ring","six-radio","six-range","six-rating","six-root","six-search-field","six-select","six-sidebar","six-sidebar-item","six-sidebar-item-group","six-spinner","six-stage-indicator","six-switch","six-tab","six-tab-group","six-tab-panel","six-tag","six-textarea","six-tile","six-timepicker","six-tooltip"]; \ No newline at end of file diff --git a/docs/components/six-breadcrumbs-item.md b/docs/components/six-breadcrumbs-item.md index 697ffe2b2..8602a2e17 100644 --- a/docs/components/six-breadcrumbs-item.md +++ b/docs/components/six-breadcrumbs-item.md @@ -28,7 +28,6 @@ Breadcrumb items are used inside breadcrumbs to represent different links. | ---------- | ----------- | ------------------------------------------------------------------------------------------------------ | --------------------------------------------------------- | ----------- | | `href` | `href` | When set, the underlying button will be rendered as an `` with this `href` instead of a `