diff --git a/.agents/skills/codeatlas-ui/ANTIPATTERNS.md b/.agents/skills/codeatlas-ui/ANTIPATTERNS.md index 73f1d96b..6e6449ba 100644 --- a/.agents/skills/codeatlas-ui/ANTIPATTERNS.md +++ b/.agents/skills/codeatlas-ui/ANTIPATTERNS.md @@ -46,15 +46,15 @@ Explicit don'ts. Each one has a correct alternative.
-
+
``` ```css /* ✗ Tint in OKLCH: gray tokens have hue 0°, so blue drifts to purple/pink */ -background: color-mix(in oklch, var(--ca-brand-main) 15%, var(--ca-glass-tint)); +background: color-mix(in oklch, var(--ca-brand-main) 15%, var(--ca-surface-raised)); /* ✓ Mix a color with a neutral (gray token, black, white, transparent) in OKLab */ -background: color-mix(in oklab, var(--ca-brand-main) 15%, var(--ca-glass-tint)); +background: color-mix(in oklab, var(--ca-brand-main) 15%, var(--ca-surface-raised)); ``` --- @@ -68,7 +68,7 @@ background: color-mix(in oklab, var(--ca-brand-main) 15%, var(--ca-glass-tint)); - +
diff --git a/.agents/skills/codeatlas-ui/API.md b/.agents/skills/codeatlas-ui/API.md index 067264be..ebe4fa50 100644 --- a/.agents/skills/codeatlas-ui/API.md +++ b/.agents/skills/codeatlas-ui/API.md @@ -395,7 +395,7 @@ Parts: `ca-breadcrumb__current` `ca-breadcrumb__item` `ca-breadcrumb__link` `ca- | Prop | Type | Default | Notes | |---|---|---|---| -| `variant?` | `'filled' \| 'glass' \| 'outlined' \| 'ghost' \| 'destructive'` | `'filled'` | | +| `variant?` | `'filled' \| 'glass' \| 'outlined' \| 'ghost' \| 'destructive'` | `'filled'` | `filled` (default) is the primary action; `glass` is a tinted surface button (blur only under the glass and frosted styles). | | `tone?` | `'brand' \| 'neutral'` | `'brand'` | `'neutral'` draws `outlined` and `ghost` without brand colour (neutral label and border), for a secondary action beside a brand `filled` one. Other variants ignore it. | | `size?` | `'sm' \| 'md' \| 'lg'` | `'md'` | | | `disabled?` | `boolean` | `false` | | @@ -484,7 +484,7 @@ Parts: `ca-alert__content` `ca-callout` `import { Card } from "@codeatlasdev/ui"` -Card — a Surface with a header (`title`, `headerActions`), padding and an optional link. Every Surface prop (`elevation`, `material`, `tone`, `variant`, `radius`, `glow`) passes through. +Card — a Surface with a header (`title`, `headerActions`), padding and an optional link. Every Surface prop (`elevation`, `material`, `tone`, `variant`, `radius`, `glow`) passes through; `material` defaults to `auto`, which follows the theme. | Prop | Type | Default | Notes | |---|---|---|---| @@ -3178,7 +3178,7 @@ Surface — the one painted container every card, panel and sheet is built on. I | `py?` | `Responsive` | | Vertical padding. | | `as?` | `string` | `'div'` | Element to render. Cards with an `href` render `a` through `Card`. | | `elevation?` | `0 \| 1 \| 2 \| 3 \| 4 \| 5` | `1` | Depth 0–5: drop shadow, and the blur/fill tier of the material (0 flat, 3 regular, 5 chrome). | -| `material?` | `'auto' \| 'solid' \| 'frosted' \| 'glass' \| 'liquid'` | `'auto'` | `auto` follows ``; the others are absolute. `liquid` adds the SVG refraction layer. | +| `material?` | `'auto' \| 'solid' \| 'frosted' \| 'glass' \| 'liquid'` | `'auto'` | `auto` follows ``; `solid`, `frosted`, `glass` and `liquid` are absolute. `liquid` adds the SVG refraction layer. | | `tone?` | `'neutral' \| 'brand' \| 'success' \| 'warning' \| 'error' \| 'info'` | `'neutral'` | Semantic tint over the fill (and the outline color of `variant="outlined"`). | | `variant?` | `'filled' \| 'outlined' \| 'ghost'` | `'filled'` | `filled` (default), `outlined` (edge, no fill) or `ghost` (no fill, no edge). | | `radius?` | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'pill'` | | Corner radius; omit for the large radius. | @@ -4698,7 +4698,7 @@ Types: | `Space` | `type Space = (typeof SPACE)[number] \| `${(typeof SPACE)[number]}`;` | | | `StageInsets` | `interface StageInsets { top: number; right: number; bottom: number; left: number; }` | | | `SurfaceColors` | `interface SurfaceColors { sunken: string; base: string; raised: string; overlay: string; }` | | -| `SurfaceStyle` | `type SurfaceStyle = \| "glass" \| "frosted" \| "solid" \| "flat" \| "outlined" \| "neumorphic" \| "clay" \| "tonal" \| "chrome";` | Surface material. glass/frosted blur the backdrop; the rest are opaque. | +| `SurfaceStyle` | `type SurfaceStyle = \| "glass" \| "frosted" \| "solid" \| "flat" \| "outlined" \| "neumorphic" \| "clay" \| "tonal" \| "chrome";` | Surface material, the `defaultStyle` knob of the theme (default `solid`). glass/frosted blur the backdrop and are opt-in; the rest are opaque. | | `TextAreaTokens` | `interface TextAreaTokens extends FieldTokens { minHeight?: CssValue; }` | | | `TextColors` | `interface TextColors { primary: string; secondary: string; disabled: string; }` | | | `ThemeDefinition` | `interface ThemeDefinition { presets: PresetDefinition[]; defaultPreset: string; defaultScheme: ColorScheme; defaultStyle: SurfaceStyle; fonts: { display?: FontSpec; body?: FontSpec; mono?: FontSpec }; radius: number; controlRadius: "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "pill"; density: Density; border: { width?: number; strong?: number }; typography: TypographyOptions; type: TypeScale; elevation: ElevationModel; motion: MotionOptions; iconStroke: number; noise: number; paper: Paper; components: ComponentTokens; overrides: { light?: TokenMap; dark?: TokenMap }; }` | | diff --git a/.agents/skills/codeatlas-ui/COMPONENTS.md b/.agents/skills/codeatlas-ui/COMPONENTS.md index 6199c770..ecae9853 100644 --- a/.agents/skills/codeatlas-ui/COMPONENTS.md +++ b/.agents/skills/codeatlas-ui/COMPONENTS.md @@ -113,7 +113,7 @@ A real `radiogroup` (roving tab stop, arrows/Home/End/Space/Enter), check icon o ## Card / Surface -`Card` is the container for titled content. `Surface` is the painted container underneath it (elevation, material, tone, variant, radius) for panels and custom blocks that are not a titled card. `GlassCard`, `GlassSurface` and `Row` are deprecated: use `Card`, `Surface` and `Flex` (`bunx @codeatlasdev/ui migrate --write`). +`Card` is the container for titled content. `Surface` is the painted container underneath it (elevation, material, tone, variant, radius) for panels and custom blocks that are not a titled card. Leave `material` unset (`auto`): it follows the theme. `GlassCard`, `GlassSurface` and `Row` are deprecated and not for new code: use `Card`, `Surface` and `Flex` (`bunx @codeatlasdev/ui migrate --write`). ```svelte @@ -137,7 +137,7 @@ A real `radiogroup` (roving tab stop, arrows/Home/End/Space/Enter), check icon o `Card` props: `title?: string`, `headingLevel?: 2-6` (renders `title` as a real heading; omit for a `

`), `padding?: 'none' | 'sm' | 'md' | 'lg' | | `, `flush?: boolean` (no padding, wins over `padding`), `gap?: 'sm' | 'md' | 'lg' | | ` (stacks children in a column), `full?: boolean`, `skeleton?: boolean`, `href?: string` (renders a link card). Snippets: `children`, `headerActions`. -`Surface` props: `elevation` (0-5), `material` (`auto | solid | frosted | glass | liquid`), `tone` (`neutral | brand | success | warning | error | info`), `variant` (`filled | outlined | ghost`), `radius`, `interactive`, `glow`, `grain`, `as`, plus the `p`, `px`, `py` spacing steps. +`Surface` props: `elevation` (0-5), `material` (`auto` follows the theme, the default; `solid | frosted | glass | liquid` force one material), `tone` (`neutral | brand | success | warning | error | info`), `variant` (`filled | outlined | ghost`), `radius`, `interactive`, `glow`, `grain`, `as`, plus the `p`, `px`, `py` spacing steps. Under a page `

`, give card titles and `EmptyState` titles a valid level (`EmptyState` inside `PageShell` defaults to `

`) so axe `heading-order` passes. diff --git a/.agents/skills/codeatlas-ui/DEMOS.md b/.agents/skills/codeatlas-ui/DEMOS.md index 726f49a5..b8ead90e 100644 --- a/.agents/skills/codeatlas-ui/DEMOS.md +++ b/.agents/skills/codeatlas-ui/DEMOS.md @@ -230,7 +230,7 @@ Every demo has a stable number. Fetch one with `get_demo` (MCP) or https://ui.co | 223 | Surfaces | foundation/colors | | | 224 | Text | foundation/colors | | | 225 | Button glass variants | foundation/materials | | -| 226 | Glass tiers | foundation/materials | Surface | +| 226 | Material tiers | foundation/materials | Surface | | 227 | Tinted and glowing | foundation/materials | Surface | | 228 | Shadow scale | foundation/shadows | | | 229 | Body and UI scale | foundation/typography | | diff --git a/.agents/skills/codeatlas-ui/LAYOUT.md b/.agents/skills/codeatlas-ui/LAYOUT.md index c5c388ce..a455ba21 100644 --- a/.agents/skills/codeatlas-ui/LAYOUT.md +++ b/.agents/skills/codeatlas-ui/LAYOUT.md @@ -295,5 +295,5 @@ Pass token steps to layout primitives, not raw CSS: `` is correct.
…
-
…
+
…
``` diff --git a/.agents/skills/codeatlas-ui/SKILL.md b/.agents/skills/codeatlas-ui/SKILL.md index 97828b80..795d7655 100644 --- a/.agents/skills/codeatlas-ui/SKILL.md +++ b/.agents/skills/codeatlas-ui/SKILL.md @@ -32,7 +32,7 @@ Svelte 5 UI framework. Components are self-contained and prop-driven. Compose th 4b. **A live map/canvas behind every screen goes in `AppShellLayout`'s `stage` snippet**, never in a hand-built `position: absolute` layer: it mounts once, is click-through (panels use `class="ca-stage-panel"`), and reads `--ca-shell-inset-*`. Hide and pause it with `stageVisible` or `data-ca-stage="hidden"` on ``. 5. **CSS imports go once, in the root layout only.** 6. **Import from `@codeatlasdev/ui`**, never from internal paths like `../../../components/Button`. -7. **Never combine `will-change: transform` with `backdrop-filter`.** Kills glass blur. +7. **Write for the default style.** The theme decides how things look (`ThemeOptions`, `defaultStyle` defaults to `solid`: opaque, no blur). Do not add `material="glass"`, `variant="glass"` or blur CSS to look finished; glass is one opt-in style, see "Glass and frosted styles" below. ## Setup (root layout, once) @@ -117,11 +117,19 @@ Never guess a prop name. This skill and `API.md` track the `main` branch, which - **Mobile.** Heights use `var(--ca-vh)`, never `100vh`/`100dvh`. Fixed UI pads with `var(--ca-safe-*)`. Keyboard-aware forms use `use:keyboardAware`. Full-screen mobile screens are `MobilePane`, sticky form bars are `StickyActions`. Never write a 44px touch override: it is global under `(pointer: coarse)`. - **Opening a view with a text field (dialog, sheet, search).** iOS only opens the keyboard for `focus()` called synchronously inside the tap. In the tap handler call `primeKeyboard()` first, then open the view, and mark the real field `use:autofocus`: `` - Body is one paragraph explaining `title` and `headerActions` -Tags: card, header-actions, title, snippet, button, glass +Tags: card, header-actions, title, snippet, button Needs: @codeatlasdev/ui@4.5.0 Components: Card, Button Live demo: https://ui.codeatlas.com.br/docs/surfaces/card#header-and-actions @@ -15,7 +15,7 @@ Live demo: https://ui.codeatlas.com.br/docs/surfaces/card#header-and-actions import { Card, Button } from '@codeatlasdev/ui'; - + {#snippet headerActions()}{/snippet}

Use title and headerActions for a built-in card header.

 diff --git a/site/public/api/v1/en/e/072.txt b/site/public/api/v1/en/e/072.txt index 0388f7ef..76f71797 100644 --- a/site/public/api/v1/en/e/072.txt +++ b/site/public/api/v1/en/e/072.txt @@ -1,13 +1,13 @@ Element: #072 Stat cards (surfaces/card) -What it shows: Three glass stat Cards in a flex row, each with a label, a large value and a delta line. +What it shows: Three stat Cards in a flex row, each with a label, a large value and a delta line. When to use: Dashboard KPI strips showing a metric, its value and a short qualifier. Spec: -- `{#each stats as s}` renders `` once per stat +- `{#each stats as s}` renders `` once per stat - 3 stats with `label`, `value`, `delta`: Components 70+, Presets 8, Tokens 80+ - Each card has three paragraphs: `{s.label}`, `{s.value}` and `{s.delta}` - `.stat` uses `min-width: 140px` inside a wrapping flex `.grid` -Tags: card, stats, kpi, dashboard, glass, metrics +Tags: card, stats, kpi, dashboard, metrics Needs: @codeatlasdev/ui@4.5.0 Components: Card Live demo: https://ui.codeatlas.com.br/docs/surfaces/card#stat-cards @@ -24,7 +24,7 @@ Live demo: https://ui.codeatlas.com.br/docs/surfaces/card#stat-cards
{#each stats as s} - +

{s.label}

{s.value}

{s.delta}

diff --git a/site/public/api/v1/en/e/073.txt b/site/public/api/v1/en/e/073.txt index fadaf91e..efb0e958 100644 --- a/site/public/api/v1/en/e/073.txt +++ b/site/public/api/v1/en/e/073.txt @@ -4,7 +4,7 @@ What it shows: Three independent Collapsible FAQ panels stacked with a small gap When to use: Short FAQ or help blocks where each answer expands on its own. Spec: - `` with `max-width: 560px` -- 3 `` child, two of them include a `` token - Nothing is bound to the open state, each panel manages its own Tags: collapsible, faq, stack, disclosure, expand, title @@ -17,8 +17,8 @@ Live demo: https://ui.codeatlas.com.br/docs/surfaces/collapsible#default-closed - -

A glass surface uses backdrop-filter blur and a translucent tint to create a layered depth effect that reacts to the content behind it.

+ +

A surface style is one knob of the theme. It decides whether cards are solid paper, outlined, tonal or blurred, and every component follows it.

Presets remap the brand hue token. Switching preset updates every component that reads from --ca-brand-* without any JS.

diff --git a/site/public/api/v1/en/e/097.txt b/site/public/api/v1/en/e/097.txt index 6f26603a..8eb2a0a7 100644 --- a/site/public/api/v1/en/e/097.txt +++ b/site/public/api/v1/en/e/097.txt @@ -1,9 +1,9 @@ Element: #097 Card layout (feedback/skeleton) -What it shows: A glass card skeleton with a circular avatar placeholder beside three text lines of different widths. +What it shows: A card skeleton with a circular avatar placeholder beside three text lines of different widths. When to use: Loading placeholder for a profile or list card so layout does not jump when data arrives. Spec: -- `` +- `` - `` inside `` - Three lines in ``: `height="16px" width="40%"`, `height="13px" width="70%"`, `height="13px" width="55%"` Tags: skeleton, card, loading, avatar, placeholder @@ -15,7 +15,7 @@ Live demo: https://ui.codeatlas.com.br/docs/feedback/skeleton#card-layout import { Skeleton, Card, Stack, Flex } from '@codeatlasdev/ui'; - + diff --git a/site/public/api/v1/en/e/098.txt b/site/public/api/v1/en/e/098.txt index 0ec664c2..cf5a99f4 100644 --- a/site/public/api/v1/en/e/098.txt +++ b/site/public/api/v1/en/e/098.txt @@ -1,9 +1,9 @@ Element: #098 Image placeholder (feedback/skeleton) -What it shows: A flush glass card skeleton with a 180px rectangular image placeholder above two caption lines. +What it shows: A flush card skeleton with a 180px rectangular image placeholder above two caption lines. When to use: Loading placeholder for media cards such as products, posts or galleries. Spec: -- `` +- `` - `` fills the top of the card - Caption in ``: `height="16px" width="50%"` and `height="13px" width="80%"` - Caption wrapper `
` has `padding: 16px` @@ -16,7 +16,7 @@ Live demo: https://ui.codeatlas.com.br/docs/feedback/skeleton#image-placeholder import { Skeleton, Card, Stack } from '@codeatlasdev/ui'; - +
diff --git a/site/public/api/v1/en/e/099.txt b/site/public/api/v1/en/e/099.txt index 4dfc2f2f..07753961 100644 --- a/site/public/api/v1/en/e/099.txt +++ b/site/public/api/v1/en/e/099.txt @@ -1,9 +1,9 @@ Element: #099 Text lines (feedback/skeleton) -What it shows: A glass card skeleton with a 60% wide heading line above a block of three text lines. +What it shows: A card skeleton with a 60% wide heading line above a block of three text lines. When to use: Loading placeholder for an article or description block. Spec: -- `` with `` +- `` with `` - Heading line `` - Body lines `` render three rows from one element Tags: skeleton, text, rows, card, loading @@ -15,7 +15,7 @@ Live demo: https://ui.codeatlas.com.br/docs/feedback/skeleton#text-lines import { Skeleton, Card, Stack } from '@codeatlasdev/ui'; - + diff --git a/site/public/api/v1/en/e/101.txt b/site/public/api/v1/en/e/101.txt index 95209b4b..e8e19bbe 100644 --- a/site/public/api/v1/en/e/101.txt +++ b/site/public/api/v1/en/e/101.txt @@ -1,9 +1,9 @@ Element: #101 Section loader (feedback/spinner) -What it shows: A glass card with a centered 40px spinner and a Loading data text. +What it shows: A card with a centered 40px spinner and a Loading data text. When to use: Loader for a whole section or panel while its data is fetched. Spec: -- `` +- `` - `` centers the spinner and text - `` above `Loading data…` Tags: spinner, loader, card, section, loading @@ -15,7 +15,7 @@ Live demo: https://ui.codeatlas.com.br/docs/feedback/spinner#section-loader import { Spinner, Card, Stack } from '@codeatlasdev/ui'; - + Loading data… diff --git a/site/public/api/v1/en/e/124.txt b/site/public/api/v1/en/e/124.txt index b93428d7..d76ba2f8 100644 --- a/site/public/api/v1/en/e/124.txt +++ b/site/public/api/v1/en/e/124.txt @@ -1,9 +1,9 @@ Element: #124 Horizontal (display/divider) -What it shows: Three stacked text sections inside a glass card separated by horizontal dividers. +What it shows: Three stacked text sections inside a card separated by horizontal dividers. When to use: Separating sections of content inside a card or panel. Spec: -- `` wraps the content +- `` wraps the content - `` stacks Section A, B and C paragraphs - `` is placed between them with no props Tags: divider, horizontal, separator, card, stack @@ -15,7 +15,7 @@ Live demo: https://ui.codeatlas.com.br/docs/display/divider#horizontal import { Divider, Card, Stack } from '@codeatlasdev/ui'; - +

Section A content

diff --git a/site/public/api/v1/en/e/125.txt b/site/public/api/v1/en/e/125.txt index ef0c3a87..77e0012e 100644 --- a/site/public/api/v1/en/e/125.txt +++ b/site/public/api/v1/en/e/125.txt @@ -1,9 +1,9 @@ Element: #125 Vertical (display/divider) -What it shows: Three text items in a row inside a glass card separated by vertical dividers. +What it shows: Three text items in a row inside a card separated by vertical dividers. When to use: Separating inline items in a toolbar or meta row. Spec: -- `` wraps the content +- `` wraps the content - `` lays out Left, Center and Right - `` is placed between them Tags: divider, vertical, orientation, separator, flex @@ -15,7 +15,7 @@ Live demo: https://ui.codeatlas.com.br/docs/display/divider#vertical import { Divider, Card, Flex } from '@codeatlasdev/ui'; - +

Left

diff --git a/site/public/api/v1/en/e/126.txt b/site/public/api/v1/en/e/126.txt index da42d851..4421fb12 100644 --- a/site/public/api/v1/en/e/126.txt +++ b/site/public/api/v1/en/e/126.txt @@ -3,7 +3,7 @@ Element: #126 In a results table (display/external-link) What it shows: A table of three domains where each row ends with an ExternalLink to a registrar URL. When to use: Table cells that link out to a third-party site, with the external-link affordance. Spec: -- `` wraps `` +- `` wraps `` - `const rows` has 3 entries with `domain`, `price` and `url` - Header cells are Domain, Price and Registrar - `Buy at registrar` is rendered in each last cell @@ -23,7 +23,7 @@ Live demo: https://ui.codeatlas.com.br/docs/display/external-link#in-a-results-t ]; - + DomainPriceRegistrar diff --git a/site/public/api/v1/en/e/136.txt b/site/public/api/v1/en/e/136.txt index 8dd4027a..c904c7ec 100644 --- a/site/public/api/v1/en/e/136.txt +++ b/site/public/api/v1/en/e/136.txt @@ -1,9 +1,9 @@ Element: #136 Horizontal scroll (display/scroll-area) -What it shows: A horizontal ScrollArea with an always visible scrollbar holding a row of 24 Tag chips inside a glass card. +What it shows: A horizontal ScrollArea with an always visible scrollbar holding a row of 24 Tag chips inside a card. When to use: Overflowing chip, tag or filter rows that should scroll sideways instead of wrapping. Spec: -- `` wraps the area +- `` wraps the area - `` - `{ length: 24 }` builds 24 tags labelled Tag 1 to Tag 24, each rendered as `` - Chips sit in a `
` styled with `width: max-content` so the content overflows @@ -18,7 +18,7 @@ Live demo: https://ui.codeatlas.com.br/docs/display/scroll-area#horizontal-scrol const tags = Array.from({ length: 24 }, (_, i) => `Tag ${i + 1}`); - +
{#each tags as tag}{/each} diff --git a/site/public/api/v1/en/e/137.txt b/site/public/api/v1/en/e/137.txt index b2748919..5cd51a4d 100644 --- a/site/public/api/v1/en/e/137.txt +++ b/site/public/api/v1/en/e/137.txt @@ -1,9 +1,9 @@ Element: #137 Vertical scroll (display/scroll-area) -What it shows: A vertical ScrollArea capped at 220px tall containing 20 Lorem ipsum rows inside a glass card. +What it shows: A vertical ScrollArea capped at 220px tall containing 20 Lorem ipsum rows inside a card. When to use: Bounded panels such as activity logs or long option lists that scroll inside a fixed height. Spec: -- `` wraps the area +- `` wraps the area - `` - `Array.from({ length: 20 }, (_, i) =>` builds items labelled Item 1 to Item 20: Lorem ipsum dolor sit amet - Each row is a `
` rendered with `{#each items as item}` @@ -18,7 +18,7 @@ Live demo: https://ui.codeatlas.com.br/docs/display/scroll-area#vertical-scroll const items = Array.from({ length: 20 }, (_, i) => `Item ${i + 1}: Lorem ipsum dolor sit amet`); - + {#each items as item}
{item}
diff --git a/site/public/api/v1/en/e/138.txt b/site/public/api/v1/en/e/138.txt index 44f887a9..034f2ede 100644 --- a/site/public/api/v1/en/e/138.txt +++ b/site/public/api/v1/en/e/138.txt @@ -1,9 +1,9 @@ Element: #138 Cards on narrow containers (display/table) -What it shows: A SimpleTable that turns each row into a stacked card on narrow screens, listing three users in a flush glass card. +What it shows: A SimpleTable that turns each row into a stacked card on narrow screens, listing three users in a flush card. When to use: Data tables that must stay readable on phones without horizontal scrolling. Spec: -- `` wraps the table +- `` wraps the table - `` with plain `thead` and `tbody` - Header columns: Name, Email, Role, Status - 3 rows from `rows` with `name`, `email`, `role`, `status` @@ -24,7 +24,7 @@ Live demo: https://ui.codeatlas.com.br/docs/display/table#cards-on-narrow-contai ]; - + NameEmailRoleStatus diff --git a/site/public/api/v1/en/e/139.txt b/site/public/api/v1/en/e/139.txt index 81903f53..6e3a4785 100644 --- a/site/public/api/v1/en/e/139.txt +++ b/site/public/api/v1/en/e/139.txt @@ -1,9 +1,9 @@ Element: #139 Default (scroll) (display/table) -What it shows: A default SimpleTable listing three users with name, email, role and status in a flush glass card. +What it shows: A default SimpleTable listing three users with name, email, role and status in a flush card. When to use: Compact read-only tables that keep their columns and scroll horizontally when space runs out. Spec: -- `` wraps the table +- `` wraps the table - `` with no props, plain `thead` and `tbody` - Header columns: Name, Email, Role, Status - 3 rows from `rows` with `name`, `email`, `role`, `status` @@ -23,7 +23,7 @@ Live demo: https://ui.codeatlas.com.br/docs/display/table#default-scroll ]; - + NameEmailRoleStatus diff --git a/site/public/api/v1/en/e/143.txt b/site/public/api/v1/en/e/143.txt index 3caa3118..e6339fbc 100644 --- a/site/public/api/v1/en/e/143.txt +++ b/site/public/api/v1/en/e/143.txt @@ -1,6 +1,6 @@ Element: #143 Custom delay (display/tooltip) -What it shows: Three tooltips with different open delays on glass buttons: instant, default and slow. +What it shows: Three tooltips with different open delays on buttons: instant, default and slow. When to use: Tuning how quickly a tooltip appears, instant for dense toolbars and slower for hints that should not flash. Spec: - `delay={0}` on the Instant button with `content="No delay (delay=0)"` diff --git a/site/public/api/v1/en/e/151.txt b/site/public/api/v1/en/e/151.txt index a7ac5f40..d5ad4fd6 100644 --- a/site/public/api/v1/en/e/151.txt +++ b/site/public/api/v1/en/e/151.txt @@ -1,9 +1,9 @@ Element: #151 Default (navigation/app-bar) -What it shows: A glass app bar with a title on the left and search, notifications and avatar on the right, inside a flush glass card. +What it shows: An app bar with a title on the left and search, notifications and avatar on the right, inside a flush card. When to use: Top bar of a page or panel with a product title and a few global quick actions. Spec: -- `` wraps the bar +- `` wraps the bar - `GlassAppBar` content is `My Application` - `{#snippet trailing()}` holds two `IconButton` items with `aria-label="Search"` and `aria-label="Notifications"` - Trailing also has `` @@ -18,7 +18,7 @@ Live demo: https://ui.codeatlas.com.br/docs/navigation/app-bar#default import { Search, Bell } from '@lucide/svelte'; - + My Application {#snippet trailing()} diff --git a/site/public/api/v1/en/e/152.txt b/site/public/api/v1/en/e/152.txt index 59d296f0..f68286b8 100644 --- a/site/public/api/v1/en/e/152.txt +++ b/site/public/api/v1/en/e/152.txt @@ -1,9 +1,9 @@ Element: #152 With leading icon (navigation/app-bar) -What it shows: A glass app bar with a menu button in the leading slot and an Upgrade button plus avatar in the trailing slot. +What it shows: An app bar with a menu button in the leading slot and an Upgrade button plus avatar in the trailing slot. When to use: Mobile or dashboard headers that need a menu toggle on the left and a primary call to action on the right. Spec: -- `` wraps the bar +- `` wraps the bar - `GlassAppBar` content is `Dashboard` - `{#snippet leading()}` holds `` with `` - `{#snippet trailing()}` holds `` @@ -18,7 +18,7 @@ Live demo: https://ui.codeatlas.com.br/docs/navigation/app-bar#with-leading-icon import { Menu } from '@lucide/svelte'; - + Dashboard {#snippet leading()}{/snippet} diff --git a/site/public/api/v1/en/e/162.txt b/site/public/api/v1/en/e/162.txt index 9acd2ecb..83b03401 100644 --- a/site/public/api/v1/en/e/162.txt +++ b/site/public/api/v1/en/e/162.txt @@ -1,11 +1,11 @@ Element: #162 Horizontal stepper (navigation/stepper) -What it shows: A four-step horizontal stepper inside a glass card with Back and Next buttons that advance the step. +What it shows: A four-step horizontal stepper inside a card with Back and Next buttons that advance the step. When to use: Multi-step flows such as onboarding or checkout where the user moves through ordered stages. Spec: - `` with `let step = $state(0)` - `const steps` has 4 entries with a `label` field: Account, Profile, Billing, Review -- Wrapper is `` with `` +- Wrapper is `` with `` - Body shows `Step {step + 1}: {steps[step].label}` - Back is `{/snippet}` -- `` holds a `KpiGrid` and a `` +- `` holds a `KpiGrid` and a `` - `KpiGrid` has 4 `KpiCard` items: Revenue `$118k`, Users `24.8k`, Growth `34%`, Uptime `99.9%` - Placeholder card text is Chart or data table goes here -Tags: page-shell, dashboard, kpi-grid, card, glass, actions, header +Tags: page-shell, dashboard, kpi-grid, card, actions, header Needs: @codeatlasdev/ui@4.5.0 Components: PageShell, KpiCard, KpiGrid, Card, Stack, Button Live demo: https://ui.codeatlas.com.br/docs/layout/page-shell#dashboard-page @@ -18,7 +18,7 @@ Live demo: https://ui.codeatlas.com.br/docs/layout/page-shell#dashboard-page import { TrendingUp, Users, DollarSign, Activity } from '@lucide/svelte'; - + {#snippet actions()}{/snippet} @@ -30,7 +30,7 @@ Live demo: https://ui.codeatlas.com.br/docs/layout/page-shell#dashboard-page - +

Chart or data table goes here

 diff --git a/site/public/api/v1/en/e/190.txt b/site/public/api/v1/en/e/190.txt index 5c9c16cd..315567b5 100644 --- a/site/public/api/v1/en/e/190.txt +++ b/site/public/api/v1/en/e/190.txt @@ -3,7 +3,7 @@ Element: #190 Horizontal bars (charts/bar) What it shows: A horizontal bar chart ranking eight products by a single Sales series, with values formatted as thousands. When to use: Ranking items by one metric, such as top products or top accounts, when category labels are long. Spec: -- `` +- `` - One series `{ name: 'Sales', data: [9840, 8720, 7650, 6430, 5980, 4810, 3920, 3140] }` - `categories={products}` with 8 product names - `horizontal` prop @@ -21,7 +21,7 @@ Live demo: https://ui.codeatlas.com.br/docs/charts/bar#horizontal-bars const products = ['Atlas Pro', 'Nova Suite', 'Relay SDK', 'Mesh API', 'Drift UI', 'Pulse DB', 'Forge CI', 'Orbit ML']; - + ` +- `` - 4 series in `series`: Organic, Paid, Referral, Direct, each with 6 values - `categories={months}` with `'Jan'` to `'Jun'` - `stacked` prop @@ -22,7 +22,7 @@ Live demo: https://ui.codeatlas.com.br/docs/charts/bar#stacked-bars const fmt = (v: number) => `$${(v / 1000).toFixed(0)}k`; - + (mode = 'grouped')}>Grouped - + ` +- `` - One series `{ name: 'Revenue', data: [38400, 54200, 71600, 89800] }` - `categories={['Q1', 'Q2', 'Q3', 'Q4']}` - `valueFormatter={fmt}` renders `$${(v / 1000).toFixed(0)}k` @@ -20,6 +20,6 @@ Live demo: https://ui.codeatlas.com.br/docs/charts/bar#vertical-bars const fmt = (v: number) => `$${(v / 1000).toFixed(0)}k`; - + diff --git a/site/public/api/v1/en/e/194.txt b/site/public/api/v1/en/e/194.txt index dba27e14..ec02a5e7 100644 --- a/site/public/api/v1/en/e/194.txt +++ b/site/public/api/v1/en/e/194.txt @@ -31,7 +31,7 @@ Live demo: https://ui.codeatlas.com.br/docs/charts/gauge#animated-counter }); - + String(Math.round(v))} height="260px" />

{label}

diff --git a/site/public/api/v1/en/e/195.txt b/site/public/api/v1/en/e/195.txt index b1a1fabf..5596fdb3 100644 --- a/site/public/api/v1/en/e/195.txt +++ b/site/public/api/v1/en/e/195.txt @@ -6,7 +6,7 @@ Spec: - `let value = $state(65)` shared by gauge and slider - `` - `` -- `` stacks gauge and slider inside `` +- `` stacks gauge and slider inside `` Tags: gauge-chart, ring, slider, bind-value, state, interactive Needs: @codeatlasdev/ui@4.5.0 + echarts Components: Card, Stack, Slider, GaugeChart @@ -19,7 +19,7 @@ Live demo: https://ui.codeatlas.com.br/docs/charts/gauge#progress-ring let value = $state(65); - +
diff --git a/site/public/api/v1/en/e/196.txt b/site/public/api/v1/en/e/196.txt index fbaf6013..368b6112 100644 --- a/site/public/api/v1/en/e/196.txt +++ b/site/public/api/v1/en/e/196.txt @@ -4,7 +4,7 @@ What it shows: A single gauge showing a score of 78 with a Score label. When to use: Showing one headline score or health percentage in a compact card. Spec: - `` -- Wrapped in `` +- Wrapped in `` Tags: gauge-chart, score, value, label, card Needs: @codeatlasdev/ui@4.5.0 + echarts Components: Card, GaugeChart @@ -15,4 +15,4 @@ Live demo: https://ui.codeatlas.com.br/docs/charts/gauge#simple-gauge import { GaugeChart } from '@codeatlasdev/ui/charts'; - + diff --git a/site/public/api/v1/en/e/197.txt b/site/public/api/v1/en/e/197.txt index 2a1b6c10..9aa988fd 100644 --- a/site/public/api/v1/en/e/197.txt +++ b/site/public/api/v1/en/e/197.txt @@ -6,7 +6,7 @@ Spec: - `const zones: GaugeZone[]` with 3 entries: `{ until: 0.5, color: 'success' }`, `{ until: 0.8, color: 'warning' }`, `{ until: 1, color: 'error' }` - `const metrics` with 3 items: CPU `67`, Memory `82`, Disk `45`, fields `label` and `value` - `{#each metrics as m}` renders `` -- Each gauge sits in its own `` inside `` +- Each gauge sits in its own `` inside `` Tags: gauge-chart, zones, thresholds, grid, metrics, card Needs: @codeatlasdev/ui@4.5.0 + echarts Components: Card, Grid, GaugeChart @@ -31,7 +31,7 @@ Live demo: https://ui.codeatlas.com.br/docs/charts/gauge#custom-zones {#each metrics as m} - +

{m.label}

 diff --git a/site/public/api/v1/en/e/198.txt b/site/public/api/v1/en/e/198.txt index 20a969c0..72a9c51a 100644 --- a/site/public/api/v1/en/e/198.txt +++ b/site/public/api/v1/en/e/198.txt @@ -7,7 +7,7 @@ Spec: - `data` is `CalendarHeatmapPoint[]` built with `Array.from({ length: 258 }` as `[ 'YYYY-MM-DD', value ]` pairs - `range={['2026-01-01', '2026-09-15']}` - `tooltipFormatter={(v) => `${v} commits`}` -- `height="160px"` inside `` +- `height="160px"` inside `` Tags: heatmap-chart, calendar, activity, range, tooltip-formatter, card Needs: @codeatlasdev/ui@4.5.0 + echarts Components: Card, HeatmapChart @@ -28,6 +28,6 @@ Live demo: https://ui.codeatlas.com.br/docs/charts/heatmap#calendar-heatmap }); - + `${v} commits`} height="160px" /> diff --git a/site/public/api/v1/en/e/199.txt b/site/public/api/v1/en/e/199.txt index 5a395f8e..73bcafa8 100644 --- a/site/public/api/v1/en/e/199.txt +++ b/site/public/api/v1/en/e/199.txt @@ -8,7 +8,7 @@ Spec: - `xCategories={hours}` built from `String(i).padStart(2, '0') + ':00'` (24 labels) - `yCategories={days}` with `'Mon'` to `'Sun'` - `tooltipFormatter={(v) => `${v} tasks`}` -- `height="320px"` inside `` +- `height="320px"` inside `` Tags: heatmap-chart, matrix, hours, weekdays, tooltip-formatter, card Needs: @codeatlasdev/ui@4.5.0 + echarts Components: Card, HeatmapChart @@ -33,6 +33,6 @@ Live demo: https://ui.codeatlas.com.br/docs/charts/heatmap#hour-by-day-matrix } - + `${v} tasks`} height="320px" /> diff --git a/site/public/api/v1/en/e/200.txt b/site/public/api/v1/en/e/200.txt index 5ca39795..bf61dc58 100644 --- a/site/public/api/v1/en/e/200.txt +++ b/site/public/api/v1/en/e/200.txt @@ -43,7 +43,7 @@ Live demo: https://ui.codeatlas.com.br/docs/charts/heatmap#year-toggle - + `${v} commits`} height="160px" />
diff --git a/site/public/api/v1/en/e/201.txt b/site/public/api/v1/en/e/201.txt index 9cedbe8f..dd6d5a14 100644 --- a/site/public/api/v1/en/e/201.txt +++ b/site/public/api/v1/en/e/201.txt @@ -8,7 +8,7 @@ Spec: - `categories={months}` with `'Jan'` to `'Sep'` - `area` prop - `valueFormatter={fmt}` renders `$${(v / 1000).toFixed(0)}k` -- `height="360px"` inside `` +- `height="360px"` inside `` Tags: line-chart, area, revenue, time-series, value-formatter, card Needs: @codeatlasdev/ui@4.5.0 + echarts Components: Card, LineChart @@ -23,6 +23,6 @@ Live demo: https://ui.codeatlas.com.br/docs/charts/line#area-with-gradient-fill const fmt = (v: number) => `$${(v / 1000).toFixed(0)}k`; - + diff --git a/site/public/api/v1/en/e/202.txt b/site/public/api/v1/en/e/202.txt index 600f457d..db7e2697 100644 --- a/site/public/api/v1/en/e/202.txt +++ b/site/public/api/v1/en/e/202.txt @@ -7,7 +7,7 @@ Spec: - `const profit = revenue.map((r, i) => r - expenses[i])` derives the third series - `categories={months}` with `'Jan'` to `'Sep'` - `valueFormatter={fmt}` renders `$${(v / 1000).toFixed(0)}k` -- `height="300px"` inside `` +- `height="300px"` inside `` Tags: line-chart, multi-series, revenue, expenses, time-series, card Needs: @codeatlasdev/ui@4.5.0 + echarts Components: Card, LineChart @@ -24,7 +24,7 @@ Live demo: https://ui.codeatlas.com.br/docs/charts/line#multi-line-comparison const fmt = (v: number) => `$${(v / 1000).toFixed(0)}k`; - + ` +- `height="300px"` inside `` Tags: line-chart, simple, revenue, time-series, value-formatter, card Needs: @codeatlasdev/ui@4.5.0 + echarts Components: Card, LineChart @@ -22,6 +22,6 @@ Live demo: https://ui.codeatlas.com.br/docs/charts/line#simple-line const fmt = (v: number) => `$${(v / 1000).toFixed(0)}k`; - + diff --git a/site/public/api/v1/en/e/204.txt b/site/public/api/v1/en/e/204.txt index ca7a32e7..dfa7e9f7 100644 --- a/site/public/api/v1/en/e/204.txt +++ b/site/public/api/v1/en/e/204.txt @@ -36,7 +36,7 @@ Live demo: https://ui.codeatlas.com.br/docs/charts/line#real-time-stream }); - + String(i))} diff --git a/site/public/api/v1/en/e/205.txt b/site/public/api/v1/en/e/205.txt index 332d38df..b2a619b8 100644 --- a/site/public/api/v1/en/e/205.txt +++ b/site/public/api/v1/en/e/205.txt @@ -43,12 +43,12 @@ Live demo: https://ui.codeatlas.com.br/docs/charts/overview#dashboard - + - + - + - + `${v.toFixed(1)}%`} height="260px" /> - + - + - + ({ name, max: 100 }))} series={[ diff --git a/site/public/api/v1/en/e/206.txt b/site/public/api/v1/en/e/206.txt index 75132990..2b332b8b 100644 --- a/site/public/api/v1/en/e/206.txt +++ b/site/public/api/v1/en/e/206.txt @@ -7,7 +7,7 @@ Spec: - `{#each quarters as q}` renders ` (selected = q)}` changes the quarter - `qData` has 4 items per quarter: Cloud, Enterprise, SaaS, Other -- `` inside `` +- `` inside `` Tags: pie-chart, donut, chip, quarters, state, derived Needs: @codeatlasdev/ui@4.5.0 + echarts Components: Card, Flex, Chip, PieChart @@ -35,7 +35,7 @@ Live demo: https://ui.codeatlas.com.br/docs/charts/pie#animated-proportions (selected = q)} variant="brand" size="sm" /> {/each} - +