@d4gger/design-system 2.7.0 → 3.0.1

package/dist/docs/data-table.md

@@ -1,275 +0,0 @@
----
-title: DataTable
-status: canonical
-category: Components
-archetype: composite
-package_path: packages/d4gger-design-system/src/components/dataTable/DataTable.tsx
-css_path: packages/d4gger-design-system/src/components/dataTable/dataTable.css
-props_path: packages/d4gger-design-system/src/components/dataTable/dataTable.props.ts
-test_path: packages/d4gger-design-system/src/test/components/DataTable.test.tsx
-demo_path: apps/playground/app/(themeable)/docs/[component]/page.tsx
-playground_registry_path: apps/playground/lib/registry/data.tsx
-playground_manifest_path: apps/playground/lib/component-manifest.ts
-depends_on:
-  - Table
-  - Pagination
-  - Toolbar
-  - SearchBar
-  - EmptyState
-  - Pills
----
-
-# DataTable
-
-> Source of truth: the package source at `package_path`. The spec file mirrors the source. Edits to the spec must land in the source in the same change, or the QA flags will fire.
-
-## Purpose
-
-Advanced table shell with toolbar, search, sort, filter chips, density toggle, pagination, and row actions. The design system owns the visual shell and controlled sort/filter/density UI. The app owns data fetching and the `PaginatedResponse` contract.
-
-## 2.6 contract
-
-This section supersedes narrower 2.5 notes below. Columns additionally accept fixed or `{ min, max }` fluid `width`, `align`, `numeric`, `sortable`, `truncate`, and canonical `hideBelow` breakpoints. At most one column may truncate. `sortBy`, `sortOrder`, and `onSortChange` provide controlled sorting while omission retains stable client sorting. `stickyHeader`, controlled/uncontrolled selected row IDs, `onSelectedRowIdsChange`, and `selectionMode="multiple" | "none"` are supported; multiple selection remains the compatibility default.
-
-`listState="loading" | "empty" | "no-results" | "error"` renders the canonical Result path, or `result` supplies custom content. Fixed columns retain width while the lone truncating fluid column absorbs overflow. Apps continue to own fetching and server query execution; the component emits state changes only.
-
-## Anatomy & slots
-
-**Parent:** `DataTable` (alias of `DataTable.Root` when the component is a compound).
-
-**Slots:**
-
-| Slot | Element | Renders | Notes |
-|---|---|---|---|
-| `DataTable.Root` | `<div>` | Host element with class | Root container. Writes `data-size` and `data-empty` attributes. |
-| `DataTable.Toolbar` | `<div>` | `DataTableToolbar` with class | Toolbar container for search, column visibility, export, and row count controls. |
-| `DataTable.Toolbar.Search` | `<Input>` | Search input | Text search input with `type="search"`. Filters rows client-side. |
-| `DataTable.Toolbar.ColumnVisibility` | `<DropdownMenu>` | Column toggle dropdown | Dropdown with checkbox items for toggling column visibility. |
-| `DataTable.Toolbar.Export` | `<DropdownMenu>` | Export dropdown | Dropdown with CSV and JSON export options. |
-| `DataTable.Toolbar.RowCount` | `<div>` | Row count display | Displays total, filtered, and selected row counts. |
-| `DataTable.Pagination` | `<div>` | `DataTablePagination` with class | Pagination controls with page size selector and page navigation. |
-| `DataTable.FacetedFilter` | `<div>` | `DataTableFacetedFilter` with class | Faceted filter dropdown with checkbox list and search. |
-
-The root `DataTable` component is a flat export, not a compound. Subcomponents are attached as static properties: `DataTable.Toolbar`, `DataTable.Pagination`, `DataTable.FacetedFilter`.
-
-## Props contract
-
-| Prop | Type | Default | Required | Description | Responsive |
-|---|---|---|---|---|---|
-| `columns` | `Array<DataTableColumn<Row>>` | `undefined` | yes | Column definitions with `id`, `header`, `accessorKey`, and optional `cell` renderer. | no |
-| `data` | `Row[]` | `undefined` | yes | Row data array. | no |
-| `emptyState` | `ReactNode` | `'No results.'` | no | Content rendered when no rows match filters. | no |
-| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | no | Table density. Maps to `data-size` attribute. | no |
-| `getRowId` | `(row: Row, rowIndex: number) => React.Key` | `undefined` | no | Custom row ID extractor. Defaults to `rowIndex`. | no |
-| `visibleColumnIds` | `Set<string>` | `undefined` | no | Controlled visible column IDs. Defaults to all columns. | no |
-| `onVisibleColumnIdsChange` | `(visibleColumnIds: Set<string>) => void` | `undefined` | no | Callback when visible columns change. | no |
-| `pagination` | `DataTablePaginationState` | `undefined` | no | Controlled pagination state `{ page, pageSize }`. | no |
-| `onPaginationChange` | `(pagination: DataTablePaginationState) => void` | `undefined` | no | Callback when pagination changes. | no |
-| `facetedFilters` | `Array<DataTableFacetedFilterState>` | `undefined` | no | Controlled faceted filter state array. | no |
-| `onFacetedFiltersChange` | `(facetedFilters: Array<DataTableFacetedFilterState>) => void` | `undefined` | no | Callback when faceted filters change. | no |
-| `toolbar` | `ReactNode` | `undefined` | no | Custom toolbar content. Replaces default search toolbar. | no |
-| `showToolbar` | `boolean` | `true` | no | Whether to show the default toolbar. | no |
-| `showPagination` | `boolean` | `false` | no | Whether to show pagination controls. | no |
-
-Rules:
-
-- Every prop in this table must exist in `<name>.props.ts` or be typed inline in the TSX file. The runtime prop def is the source.
-- Every prop in `<name>.props.ts` must be in this table. Mismatches fail `qa:contracts`.
-- The `Responsive` column is `no` for all props. DataTable does not support responsive props.
-- `columns` and `data` are required. All other props are optional.
-- The `Type` column uses TypeScript syntax. Generic types are parameterized by `Row`.
-
-## CSS class contract
-
-**Root class:** `dsx-data-table`
-
-**Modifier classes** (driven by `data-*` attributes written by the component):
-
-| Attribute | Allowed values | Class | CSS file |
-|---|---|---|---|
-| `data-size` | `sm`, `md`, `lg` | `.dsx-data-table[data-size="sm"]`, `.dsx-data-table[data-size="md"]`, `.dsx-data-table[data-size="lg"]` | inline styles |
-| `data-empty` | `true` | `.dsx-data-table[data-empty="true"]` | inline styles |
-
-**Slot classes** (for compounds and composites):
-
-| Slot | Class | CSS file |
-|---|---|---|
-| `DataTable.Toolbar` | `dsx-data-table-toolbar` | inline styles |
-| `DataTable.Pagination` | `dsx-data-table-pagination` | inline styles |
-| `DataTable.FacetedFilter` | `dsx-data-table-faceted-filter` | inline styles |
-| Empty cell | `dsx-data-table__empty` | inline styles |
-
-**Responsive behavior:**
-
-- The component does not write `@media` rules. Responsive sizing is driven by the layout primitives' responsive classes when composed by the app.
-- The component's CSS is breakpoint-agnostic. DataTable uses inline styles for all visual properties.
-
-**Reduced motion:**
-
-- DataTable does not animate. No motion contract.
-
-## Token mapping
-
-DataTable uses inline styles with token references. Every CSS value the component paints is a `var(--dsx-*)` token.
-
-| Property | Token | Role |
-|---|---|---|
-| Gap | `var(--dsx-space-sm)`, `var(--dsx-space-xs)` | Spacing between controls |
-| Padding | `var(--dsx-space-md)`, `var(--dsx-space-sm)` | Internal gutter |
-| Font size | `var(--dsx-font-size-xs)` | Small text |
-| Color | `var(--dsx-color-on-surface)`, `var(--dsx-color-on-surface-variant)` | Text colors |
-| Border | `var(--dsx-color-outline)` | Edge |
-| Radius | `var(--dsx-radius-sm)` | Standard roundness |
-| Background | `var(--dsx-color-surface)`, `var(--dsx-color-surface-raised)` | Surface colors |
-| Accent | `var(--dsx-color-accent-primary)`, `var(--dsx-color-on-accent-primary)` | Active page button |
-
-Rules:
-
-- No raw color, spacing, radius, or motion values in the component. All values reference tokens.
-- Tokens come from `DESIGN.md` and the generated `tokens.css`. The token list is closed; new tokens are a `DESIGN.md` change first.
-- Accent color comes through `var(--dsx-color-accent-primary)` and the `data-accent-color` attribute on the `Theme` wrapper. DataTable does not name brand colors directly.
-
-## Motion contract
-
-| Region | Token | Default | Reduced |
-|---|---|---|---|
-| All regions | `none` | `none` | `none` |
-
-Rules:
-
-- DataTable does not animate. No motion presets are used.
-- All motion respects `prefers-reduced-motion`. The `Reduced` column is `none` for all regions.
-
-## Accessibility
-
-**Roles:**
-
-- `table`. The root `Table` component renders a semantic `<table>` element.
-- `columnheader`. Each `TableHead` renders a `<th>` with `aria-sort` when sortable.
-- `cell`. Each `TableCell` renders a `<td>`.
-- `row`. Each `TableRow` renders a `<tr>`.
-- `searchbox`. The search input renders with `type="search"`.
-- `button`. Sort buttons, pagination buttons, and toolbar buttons render with `type="button"`.
-- `checkbox`. Row selection checkboxes render with `role="checkbox"`.
-
-**Keyboard:**
-
-| Key | Action |
-|---|---|
-| `Tab` | Moves focus to / from the next / previous focusable element. |
-| `Enter`, `Space` | Activates sort buttons, pagination buttons, and checkboxes. |
-| Arrow keys | Navigates the faceted filter option list when open. |
-
-**Focus:**
-
-- Visible focus ring via `var(--dsx-ring-focus)`. The ring must remain visible on dark and light surfaces.
-- Sort buttons, pagination buttons, and checkboxes receive focus in tab order.
-
-**Reduced motion:**
-
-- DataTable does not animate. No motion to reduce.
-
-**Color and meaning:**
-
-- Sort direction is communicated by icon (↑, ↓, ↕) and `aria-sort` attribute, not by color alone.
-- Selection state is communicated by checkbox checked state and `data-selected` attribute on the row.
-
-**Naming:**
-
-- Every interactive element has an accessible name. Sort buttons use the column header text. Pagination buttons use `aria-label="Previous page"`, `aria-label="Next page"`, and `aria-label="Page {n}"`.
-- Search input uses `aria-label="Search table rows"`.
-- Select-all checkbox uses `aria-label="Select all visible rows"` or `aria-label="Deselect all visible rows"`.
-- Row checkboxes use `aria-label="Select row {n}"`.
-
-## Playground demo spec
-
-The Playground docs surface has two parts: the registry entry in `playground_registry_path` that imports the component and its prop defs and defines the render fixture, and the generic doc route at `demo_path` that renders every registered component. The demo spec describes what the registry render function must expose:
-
-**Default story:**
-
-- Renders the component with `columns` and `data` props. No other props passed.
-- Asserts the root class is `dsx-data-table`.
-
-**Variant story** (one per variant):
-
-- Renders the component with `size="sm"`, `size="md"`, and `size="lg"`.
-- Asserts the matching `data-size` attribute is set.
-
-**Composition story** (for composites):
-
-- Renders the component with `showPagination={true}` and a custom `toolbar` prop.
-- Asserts pagination controls and toolbar render.
-
-**State story:**
-
-- Renders the component with empty `data` array.
-- Asserts the `emptyState` content renders and `data-empty="true"` is set.
-
-**Token story:**
-
-- DataTable does not honor `data-accent-color` directly. The pagination active page button uses `var(--dsx-color-accent-primary)`, which responds to the `Theme` wrapper's `accentColor` prop.
-- Renders the component inside a `Theme` wrapper with `accentColor="silver"` and one with `accentColor="bronze"`.
-
-**A11y story:**
-
-- Uses `vitest-axe` to assert the rendered component has no axe violations.
-
-**Props exposed in the playground controls:**
-
-| Prop | Control | Default |
-|---|---|---|
-| `size` | `select` | `md` |
-| `showPagination` | `boolean` | `false` |
-| `showToolbar` | `boolean` | `true` |
-
-## Wiring notes
-
-**Composes from:**
-
-- `Table`: Renders the semantic table structure (`<table>`, `<thead>`, `<tbody>`, `<tr>`, `<th>`, `<td>`).
-- `Pagination`: Renders pagination controls when `showPagination={true}`. DataTable uses its own `DataTablePagination` subcomponent, not the standalone `Pagination` component.
-- `Toolbar`: Renders toolbar controls. DataTable uses its own `DataTableToolbar` subcomponent, not the standalone `Toolbar` component.
-- `SearchBar`: DataTable does not compose `SearchBar`. It uses a plain `Input` with `type="search"` for client-side filtering.
-- `EmptyState`: DataTable does not compose `EmptyState`. It renders the `emptyState` prop content in a table cell when no rows match.
-- `Pills`: DataTable does not compose `Pills`. Faceted filters use `DataTableFacetedFilter` subcomponents.
-- `Input`: Renders the search input in the default toolbar.
-- `Checkbox`: Renders row selection checkboxes and the select-all checkbox.
-- `Button`: Renders pagination buttons and toolbar buttons.
-- `Badge`: Renders active filter count badges in toolbar and faceted filter.
-- `DropdownMenu`: Renders column visibility, export, and faceted filter dropdowns.
-
-**Used by:**
-
-- `Shell (Cabinet)`: DataTable is a common content surface in cabinet shell layouts.
-
-**State boundaries:**
-
-- Owned by this component: sort state (internal `useState`), search query (internal `useState`), row selection (internal `useState`), pagination state (internal or controlled), faceted filter state (internal or controlled), visible column IDs (internal or controlled).
-- Owned by the consumer: row data, column definitions, custom toolbar content, custom empty state content. The consumer passes these in as props.
-
-**Boundary rules:**
-
-- App-owned data: row data, column definitions, data fetching, sorting logic (if server-side), filtering logic (if server-side), pagination logic (if server-side). The consumer owns the `PaginatedResponse` contract (`offset`, `limit`, `sortBy`, `sortOrder`, `totalCount`).
-- DS-owned visuals: token bindings, slot classes, table structure, pagination controls, toolbar layout, faceted filter UI, sort icons, selection checkboxes.
-
-**Backend pagination contract:**
-
-The app owns data fetching and the `PaginatedResponse` contract. The contract is:
-
-- `PaginationQuery`: `{ offset: number, limit: number, sortOrder: 'asc' | 'desc' }`. Sent by the app to the backend.
-- `PaginationParams`: `{ offset: number, limit: number, sortBy: string, sortOrder: 'asc' | 'desc' }`. Extended query with sort field.
-- `PaginatedResponse`: `{ totalCount: number, offset: number, limit: number, items: Row[] }`. Returned by the backend.
-
-DataTable does not implement this contract. The app maps the contract to DataTable's controlled props:
-
-- `pagination.page` maps to `Math.floor(offset / limit) + 1`.
-- `pagination.pageSize` maps to `limit`.
-- `onPaginationChange` maps to updating `offset` and `limit` in the query.
-- `data` maps to `items` from the response.
-- `totalCount` is not a DataTable prop. The app passes `items.length` as `data.length`.
-
-## Penpot build recipe
-
-> Optional. Penpot is a visual reference, not a code authority. Keep this section when the component has a published Penpot asset, or when the spec needs to call out a visual decision the package does not encode. Skip the section when the component is utility or layout-primitive; the package code is the only authority.
-
-DataTable does not have a Penpot build recipe. The package code is the only authority.

package/dist/docs/filter-bar.md

@@ -1,77 +0,0 @@
----
-title: FilterBar
-status: canonical
-category: Components
-archetype: composite
-package_path: packages/d4gger-design-system/src/components/filterBar/FilterBar.tsx
-css_path: packages/d4gger-design-system/src/styles/components/filter-bar.css
-props_path: packages/d4gger-design-system/src/components/filterBar/filterBar.props.ts
-test_path: packages/d4gger-design-system/src/test/components/FilterBar.test.tsx
-demo_path: apps/playground/app/(themeable)/docs/[component]/page.tsx
-playground_registry_path: apps/playground/lib/registry/forms.tsx
-playground_manifest_path: apps/playground/lib/component-manifest.ts
-depends_on:
-  - Toolbar
-  - Button
----
-
-# FilterBar
-
-## 2.6 contract
-
-Root accepts optional `activeCount`. `FilterBar.Control` applies the same wrapper contract to search, select, date, and custom filters and writes `data-active`. `FilterBar.Count` reads the root count. `FilterBar.Clear` is disabled when an explicit active count is zero; omitting `activeCount` preserves the 2.5 uncontrolled compatibility behavior.
-
-## Purpose
-
-A product-agnostic, wrapping filter toolbar that organizes consumer-controlled filter controls, result summary, actions, and a clear callback.
-
-## Anatomy & slots
-
-**Parent:** `FilterBar` (alias of `FilterBar.Root`).
-
-| Slot | Element | Renders | Notes |
-|---|---|---|---|
-| `FilterBar.Root` | `div role="toolbar"` | `dsx-filter-bar` | Default accessible name is `Filters`. |
-| `FilterBar.Group` | `div role="group"` | `dsx-filter-bar__group` | Groups related controls. |
-| `FilterBar.Summary` | `div` | `dsx-filter-bar__summary` | Result/filter summary. |
-| `FilterBar.Actions` | `div` | `dsx-filter-bar__actions` | Action cluster. |
-| `FilterBar.Clear` | `Button` | `dsx-filter-bar__clear` | Styled callback only. |
-
-## Props contract
-
-| Prop | Type | Default | Required | Description | Responsive |
-|---|---|---|---|---|---|
-| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | no | Toolbar density. | no |
-| `aria-label` | `string` | `'Filters'` | no | Accessible toolbar name. | no |
-| `className` | `string` | `undefined` | no | Appended root class. | no |
-
-`FilterBar.Clear` accepts Button props and an optional `onClear: () => void`; its default children are `Clear filters`. All wrapper slots accept standard div attributes.
-
-## CSS class contract
-
-Root `dsx-filter-bar` writes `data-size`. Slot classes are `dsx-filter-bar__group`, `__summary`, `__actions`, and `__clear`. The shell uses flex wrapping without embedded product breakpoints.
-
-## Token mapping
-
-| Property | Token | Role |
-|---|---|---|
-| Gap/padding | `var(--dsx-space-sm)` / `var(--dsx-space-md)` | Responsive wrapping rhythm |
-| Border | `var(--dsx-control-separator-color)` | Muted toolbar edge |
-| Background | `var(--dsx-color-surface-raised)` | Toolbar surface |
-| Radius | `var(--dsx-rounded-lg)` | Shell roundness |
-
-## Motion contract
-
-No motion.
-
-## Accessibility
-
-The root is a named toolbar. Tab order follows DOM order and controls retain their own semantics; FilterBar does not implement roving focus because it may contain form controls. Groups may provide their own accessible names. Clear is a native button and never mutates sibling controls automatically.
-
-## Playground demo spec
-
-Show default, all sizes, full slot composition, empty/active summary, light/dark, and alternate accents. The composition story demonstrates source, direction, and a paired DatePicker range using consumer state. Test Clear callback/keyboard behavior and `vitest-axe`.
-
-## Wiring notes
-
-Consumers own all filter values, reset logic, query execution, date-range policy, and domain fields. The DS owns only layout, slots, accessible naming, and Clear styling.

package/dist/docs/index.md

@@ -1,149 +0,0 @@
-# D4gger Design System API
-
-Offline, package-shipped copies of the canonical component specifications and consumer guides.
-The repository documents remain the source of truth.
-
-## Guides
-
-- [Consumer guide](./consumer-guide.md)
-- [Sidebar guide](./sidebar-guide.md)
-- [Theme guide](./theme-guide.md)
-
-## Component specifications
-
-- [HIERARCHY](./HIERARCHY.md)
-- [accessible-icon](./accessible-icon.md)
-- [accordion](./accordion.md)
-- [alert-dialog](./alert-dialog.md)
-- [alert](./alert.md)
-- [article-nodes](./article-nodes.md)
-- [aspect-ratio](./aspect-ratio.md)
-- [avatar](./avatar.md)
-- [badge](./badge.md)
-- [blockquote](./blockquote.md)
-- [box](./box.md)
-- [breadcrumb](./breadcrumb.md)
-- [button-group](./button-group.md)
-- [button](./button.md)
-- [calendar](./calendar.md)
-- [callout](./callout.md)
-- [card](./card.md)
-- [carousel](./carousel.md)
-- [chart](./chart.md)
-- [checkbox-cards](./checkbox-cards.md)
-- [checkbox-group](./checkbox-group.md)
-- [checkbox](./checkbox.md)
-- [code-input](./code-input.md)
-- [code](./code.md)
-- [collapsible](./collapsible.md)
-- [color-picker](./color-picker.md)
-- [color-swatch](./color-swatch.md)
-- [combobox](./combobox.md)
-- [command](./command.md)
-- [comment-thread](./comment-thread.md)
-- [component-roster](./component-roster.md)
-- [component-spec-template](./component-spec-template.md)
-- [config-drawer](./config-drawer.md)
-- [container](./container.md)
-- [context-menu](./context-menu.md)
-- [copy-button](./copy-button.md)
-- [copy-field](./copy-field.md)
-- [data-list](./data-list.md)
-- [data-table](./data-table.md)
-- [date-picker](./date-picker.md)
-- [dialog](./dialog.md)
-- [direction-provider](./direction-provider.md)
-- [drawer](./drawer.md)
-- [dropdown-menu](./dropdown-menu.md)
-- [editable](./editable.md)
-- [em](./em.md)
-- [empty-state](./empty-state.md)
-- [field](./field.md)
-- [file-upload](./file-upload.md)
-- [filter-bar](./filter-bar.md)
-- [flex](./flex.md)
-- [floating-panel](./floating-panel.md)
-- [font-provider](./font-provider.md)
-- [form](./form.md)
-- [grid](./grid.md)
-- [heading](./heading.md)
-- [hover-card](./hover-card.md)
-- [icon-button](./icon-button.md)
-- [icon](./icon.md)
-- [input-group](./input-group.md)
-- [input-otp](./input-otp.md)
-- [input](./input.md)
-- [inset](./inset.md)
-- [item](./item.md)
-- [kbd](./kbd.md)
-- [label](./label.md)
-- [layout-props](./layout-props.md)
-- [link](./link.md)
-- [marquee](./marquee.md)
-- [menu](./menu.md)
-- [menubar](./menubar.md)
-- [metric](./metric.md)
-- [native-select](./native-select.md)
-- [navigation-menu](./navigation-menu.md)
-- [notification-center](./notification-center.md)
-- [number-input](./number-input.md)
-- [page-content](./page-content.md)
-- [page-header](./page-header.md)
-- [pagination](./pagination.md)
-- [password-input](./password-input.md)
-- [pills](./pills.md)
-- [popover](./popover.md)
-- [progress](./progress.md)
-- [prose](./prose.md)
-- [qr-code](./qr-code.md)
-- [quote](./quote.md)
-- [radio-cards](./radio-cards.md)
-- [radio-group](./radio-group.md)
-- [rating](./rating.md)
-- [resizable](./resizable.md)
-- [result](./result.md)
-- [rich-text-editor](./rich-text-editor.md)
-- [scroll-area](./scroll-area.md)
-- [search-bar](./search-bar.md)
-- [section](./section.md)
-- [segmented-control](./segmented-control.md)
-- [segmented-meter](./segmented-meter.md)
-- [select](./select.md)
-- [separator](./separator.md)
-- [shared](./shared.md)
-- [sheet](./sheet.md)
-- [sidebar](./sidebar.md)
-- [skeleton](./skeleton.md)
-- [slider](./slider.md)
-- [slot](./slot.md)
-- [sonner](./sonner.md)
-- [sortable-list](./sortable-list.md)
-- [spinner](./spinner.md)
-- [stack](./stack.md)
-- [stat-card](./stat-card.md)
-- [status](./status.md)
-- [stepper](./stepper.md)
-- [strong](./strong.md)
-- [switch](./switch.md)
-- [tab-nav](./tab-nav.md)
-- [table-of-contents](./table-of-contents.md)
-- [table](./table.md)
-- [tabs](./tabs.md)
-- [tags-input](./tags-input.md)
-- [text-area](./text-area.md)
-- [text-field](./text-field.md)
-- [text](./text.md)
-- [theme-panel](./theme-panel.md)
-- [theme-provider](./theme-provider.md)
-- [theme](./theme.md)
-- [time-picker](./time-picker.md)
-- [timeline](./timeline.md)
-- [toast](./toast.md)
-- [toggle-group](./toggle-group.md)
-- [toggle-tip](./toggle-tip.md)
-- [toggle](./toggle.md)
-- [toolbar](./toolbar.md)
-- [tooltip](./tooltip.md)
-- [tree-view](./tree-view.md)
-- [typography](./typography.md)
-- [visually-hidden](./visually-hidden.md)