From 5e9fe31b731b1b466d322e01287b55489c09b84b Mon Sep 17 00:00:00 2001 From: Eduardo de Cesaro <44036260+cesaroeduardo@users.noreply.github.com> Date: Sat, 7 Mar 2026 16:32:57 -0300 Subject: [PATCH 01/50] feat: initial commit for ds-docs --- .../.astro/collections/blocks.schema.json | 84 + .../.astro/collections/components.schema.json | 103 + .../collections/contributing.schema.json | 83 + .../collections/foundations.schema.json | 85 + .../collections/get-started.schema.json | 97 + .../.astro/collections/icons.schema.json | 81 + .../.astro/collections/patterns.schema.json | 84 + .../.astro/collections/templates.schema.json | 84 + .../.astro/collections/tokens.schema.json | 87 + apps/ds-docs/.astro/content-assets.mjs | 1 + apps/ds-docs/.astro/content-modules.mjs | 1 + apps/ds-docs/.astro/content.d.ts | 289 ++ apps/ds-docs/.astro/data-store.json | 1 + apps/ds-docs/.astro/types.d.ts | 2 + apps/ds-docs/README.md | 266 ++ apps/ds-docs/astro.config.mjs | 44 + apps/ds-docs/package.json | 27 + apps/ds-docs/postcss.config.mjs | 6 + apps/ds-docs/public/favicon.svg | 5 + .../src/components/docs/CodeBlock.astro | 90 + .../src/components/docs/DemoPreview.vue | 94 + .../src/components/docs/DocsHeader.vue | 80 + .../src/components/docs/DocsSidebar.vue | 66 + .../src/components/docs/DocsSidebarItem.vue | 45 + .../components/docs/DocsSidebarSection.vue | 59 + .../src/components/docs/MetadataLinks.vue | 53 + .../src/components/docs/PageHeader.vue | 58 + .../src/components/docs/StatusBadge.vue | 58 + apps/ds-docs/src/components/docs/index.ts | 33 + apps/ds-docs/src/content/components/button.md | 117 + .../src/content/components/fieldset.md | 144 + apps/ds-docs/src/content/config.ts | 156 + .../ds-docs/src/content/contributing/index.md | 66 + apps/ds-docs/src/content/foundations/color.md | 66 + apps/ds-docs/src/content/foundations/index.md | 48 + apps/ds-docs/src/content/get-started/index.md | 43 + .../src/content/get-started/installation.md | 83 + apps/ds-docs/src/content/icons/index.md | 91 + apps/ds-docs/src/env.d.ts | 8 + apps/ds-docs/src/layouts/BaseLayout.astro | 51 + apps/ds-docs/src/layouts/ComponentPage.astro | 50 + .../src/layouts/ComponentPageLayout.astro | 98 + apps/ds-docs/src/layouts/DocPageLayout.astro | 62 + apps/ds-docs/src/layouts/DocsLayout.astro | 135 + .../ds-docs/src/layouts/DocsShellLayout.astro | 65 + apps/ds-docs/src/lib/content.ts | 7 + apps/ds-docs/src/lib/content/index.ts | 46 + apps/ds-docs/src/lib/content/navigation.ts | 248 ++ apps/ds-docs/src/lib/content/routing.ts | 151 + apps/ds-docs/src/lib/content/sections.ts | 167 + apps/ds-docs/src/lib/content/types.ts | 52 + .../ds-docs/src/pages/components/[slug].astro | 42 + apps/ds-docs/src/pages/components/index.astro | 71 + .../src/pages/contributing/[slug].astro | 36 + .../src/pages/foundations/[slug].astro | 36 + .../src/pages/get-started/[slug].astro | 36 + .../ds-docs/src/pages/get-started/index.astro | 24 + apps/ds-docs/src/pages/icons/index.astro | 32 + apps/ds-docs/src/pages/index.astro | 115 + apps/ds-docs/src/styles/global.css | 110 + apps/ds-docs/tailwind.config.mjs | 97 + apps/ds-docs/tsconfig.json | 23 + package.json | 5 +- plans/ds-docs-architecture.md | 3919 +++++++++++++++++ pnpm-lock.yaml | 2708 +++++++++++- 65 files changed, 11231 insertions(+), 43 deletions(-) create mode 100644 apps/ds-docs/.astro/collections/blocks.schema.json create mode 100644 apps/ds-docs/.astro/collections/components.schema.json create mode 100644 apps/ds-docs/.astro/collections/contributing.schema.json create mode 100644 apps/ds-docs/.astro/collections/foundations.schema.json create mode 100644 apps/ds-docs/.astro/collections/get-started.schema.json create mode 100644 apps/ds-docs/.astro/collections/icons.schema.json create mode 100644 apps/ds-docs/.astro/collections/patterns.schema.json create mode 100644 apps/ds-docs/.astro/collections/templates.schema.json create mode 100644 apps/ds-docs/.astro/collections/tokens.schema.json create mode 100644 apps/ds-docs/.astro/content-assets.mjs create mode 100644 apps/ds-docs/.astro/content-modules.mjs create mode 100644 apps/ds-docs/.astro/content.d.ts create mode 100644 apps/ds-docs/.astro/data-store.json create mode 100644 apps/ds-docs/.astro/types.d.ts create mode 100644 apps/ds-docs/README.md create mode 100644 apps/ds-docs/astro.config.mjs create mode 100644 apps/ds-docs/package.json create mode 100644 apps/ds-docs/postcss.config.mjs create mode 100644 apps/ds-docs/public/favicon.svg create mode 100644 apps/ds-docs/src/components/docs/CodeBlock.astro create mode 100644 apps/ds-docs/src/components/docs/DemoPreview.vue create mode 100644 apps/ds-docs/src/components/docs/DocsHeader.vue create mode 100644 apps/ds-docs/src/components/docs/DocsSidebar.vue create mode 100644 apps/ds-docs/src/components/docs/DocsSidebarItem.vue create mode 100644 apps/ds-docs/src/components/docs/DocsSidebarSection.vue create mode 100644 apps/ds-docs/src/components/docs/MetadataLinks.vue create mode 100644 apps/ds-docs/src/components/docs/PageHeader.vue create mode 100644 apps/ds-docs/src/components/docs/StatusBadge.vue create mode 100644 apps/ds-docs/src/components/docs/index.ts create mode 100644 apps/ds-docs/src/content/components/button.md create mode 100644 apps/ds-docs/src/content/components/fieldset.md create mode 100644 apps/ds-docs/src/content/config.ts create mode 100644 apps/ds-docs/src/content/contributing/index.md create mode 100644 apps/ds-docs/src/content/foundations/color.md create mode 100644 apps/ds-docs/src/content/foundations/index.md create mode 100644 apps/ds-docs/src/content/get-started/index.md create mode 100644 apps/ds-docs/src/content/get-started/installation.md create mode 100644 apps/ds-docs/src/content/icons/index.md create mode 100644 apps/ds-docs/src/env.d.ts create mode 100644 apps/ds-docs/src/layouts/BaseLayout.astro create mode 100644 apps/ds-docs/src/layouts/ComponentPage.astro create mode 100644 apps/ds-docs/src/layouts/ComponentPageLayout.astro create mode 100644 apps/ds-docs/src/layouts/DocPageLayout.astro create mode 100644 apps/ds-docs/src/layouts/DocsLayout.astro create mode 100644 apps/ds-docs/src/layouts/DocsShellLayout.astro create mode 100644 apps/ds-docs/src/lib/content.ts create mode 100644 apps/ds-docs/src/lib/content/index.ts create mode 100644 apps/ds-docs/src/lib/content/navigation.ts create mode 100644 apps/ds-docs/src/lib/content/routing.ts create mode 100644 apps/ds-docs/src/lib/content/sections.ts create mode 100644 apps/ds-docs/src/lib/content/types.ts create mode 100644 apps/ds-docs/src/pages/components/[slug].astro create mode 100644 apps/ds-docs/src/pages/components/index.astro create mode 100644 apps/ds-docs/src/pages/contributing/[slug].astro create mode 100644 apps/ds-docs/src/pages/foundations/[slug].astro create mode 100644 apps/ds-docs/src/pages/get-started/[slug].astro create mode 100644 apps/ds-docs/src/pages/get-started/index.astro create mode 100644 apps/ds-docs/src/pages/icons/index.astro create mode 100644 apps/ds-docs/src/pages/index.astro create mode 100644 apps/ds-docs/src/styles/global.css create mode 100644 apps/ds-docs/tailwind.config.mjs create mode 100644 apps/ds-docs/tsconfig.json create mode 100644 plans/ds-docs-architecture.md diff --git a/apps/ds-docs/.astro/collections/blocks.schema.json b/apps/ds-docs/.astro/collections/blocks.schema.json new file mode 100644 index 00000000..1fcb5c8d --- /dev/null +++ b/apps/ds-docs/.astro/collections/blocks.schema.json @@ -0,0 +1,84 @@ +{ + "$ref": "#/definitions/blocks", + "definitions": { + "blocks": { + "type": "object", + "properties": { + "title": { + "type": "string" + }, + "description": { + "type": "string" + }, + "navLabel": { + "type": "string" + }, + "order": { + "type": "number" + }, + "hidden": { + "type": "boolean" + }, + "category": { + "type": "string" + }, + "status": { + "type": "string", + "enum": [ + "stable", + "beta", + "deprecated", + "planned", + "experimental" + ] + }, + "since": { + "type": "string" + }, + "contributors": { + "type": "array", + "items": { + "type": "string" + } + }, + "lastUpdated": { + "anyOf": [ + { + "type": "string", + "format": "date-time" + }, + { + "type": "string", + "format": "date" + }, + { + "type": "integer", + "format": "unix-time" + } + ] + }, + "type": { + "type": "string", + "const": "block" + }, + "components": { + "type": "array", + "items": { + "type": "string" + } + }, + "$schema": { + "type": "string" + } + }, + "required": [ + "title", + "description", + "category", + "type" + ], + "additionalProperties": false + } + }, + "$schema": "http://json-schema.org/draft-07/schema#" +} \ No newline at end of file diff --git a/apps/ds-docs/.astro/collections/components.schema.json b/apps/ds-docs/.astro/collections/components.schema.json new file mode 100644 index 00000000..b1cbaf9f --- /dev/null +++ b/apps/ds-docs/.astro/collections/components.schema.json @@ -0,0 +1,103 @@ +{ + "$ref": "#/definitions/components", + "definitions": { + "components": { + "type": "object", + "properties": { + "title": { + "type": "string" + }, + "description": { + "type": "string" + }, + "navLabel": { + "type": "string" + }, + "order": { + "type": "number" + }, + "hidden": { + "type": "boolean" + }, + "category": { + "type": "string", + "enum": [ + "form", + "navigation", + "feedback", + "data-display", + "layout", + "utility" + ] + }, + "status": { + "type": "string", + "enum": [ + "stable", + "beta", + "deprecated", + "planned", + "experimental" + ] + }, + "since": { + "type": "string" + }, + "contributors": { + "type": "array", + "items": { + "type": "string" + } + }, + "lastUpdated": { + "anyOf": [ + { + "type": "string", + "format": "date-time" + }, + { + "type": "string", + "format": "date" + }, + { + "type": "integer", + "format": "unix-time" + } + ] + }, + "type": { + "type": "string", + "const": "component" + }, + "component": { + "type": "string" + }, + "source": { + "type": "string" + }, + "storybook": { + "type": "string" + }, + "figma": { + "type": "string" + }, + "related": { + "type": "array", + "items": { + "type": "string" + } + }, + "$schema": { + "type": "string" + } + }, + "required": [ + "title", + "description", + "type" + ], + "additionalProperties": false + } + }, + "$schema": "http://json-schema.org/draft-07/schema#" +} \ No newline at end of file diff --git a/apps/ds-docs/.astro/collections/contributing.schema.json b/apps/ds-docs/.astro/collections/contributing.schema.json new file mode 100644 index 00000000..94ac52e9 --- /dev/null +++ b/apps/ds-docs/.astro/collections/contributing.schema.json @@ -0,0 +1,83 @@ +{ + "$ref": "#/definitions/contributing", + "definitions": { + "contributing": { + "type": "object", + "properties": { + "title": { + "type": "string" + }, + "description": { + "type": "string" + }, + "navLabel": { + "type": "string" + }, + "order": { + "type": "number" + }, + "hidden": { + "type": "boolean" + }, + "category": { + "type": "string", + "enum": [ + "guidelines", + "development", + "documentation", + "pull-requests" + ] + }, + "status": { + "type": "string", + "enum": [ + "stable", + "beta", + "deprecated", + "planned", + "experimental" + ] + }, + "since": { + "type": "string" + }, + "contributors": { + "type": "array", + "items": { + "type": "string" + } + }, + "lastUpdated": { + "anyOf": [ + { + "type": "string", + "format": "date-time" + }, + { + "type": "string", + "format": "date" + }, + { + "type": "integer", + "format": "unix-time" + } + ] + }, + "type": { + "type": "string", + "const": "contributing" + }, + "$schema": { + "type": "string" + } + }, + "required": [ + "title", + "description", + "type" + ], + "additionalProperties": false + } + }, + "$schema": "http://json-schema.org/draft-07/schema#" +} \ No newline at end of file diff --git a/apps/ds-docs/.astro/collections/foundations.schema.json b/apps/ds-docs/.astro/collections/foundations.schema.json new file mode 100644 index 00000000..6e784aa0 --- /dev/null +++ b/apps/ds-docs/.astro/collections/foundations.schema.json @@ -0,0 +1,85 @@ +{ + "$ref": "#/definitions/foundations", + "definitions": { + "foundations": { + "type": "object", + "properties": { + "title": { + "type": "string" + }, + "description": { + "type": "string" + }, + "navLabel": { + "type": "string" + }, + "order": { + "type": "number" + }, + "hidden": { + "type": "boolean" + }, + "category": { + "type": "string", + "enum": [ + "color", + "typography", + "spacing", + "elevation", + "motion", + "imagery" + ] + }, + "status": { + "type": "string", + "enum": [ + "stable", + "beta", + "deprecated", + "planned", + "experimental" + ] + }, + "since": { + "type": "string" + }, + "contributors": { + "type": "array", + "items": { + "type": "string" + } + }, + "lastUpdated": { + "anyOf": [ + { + "type": "string", + "format": "date-time" + }, + { + "type": "string", + "format": "date" + }, + { + "type": "integer", + "format": "unix-time" + } + ] + }, + "type": { + "type": "string", + "const": "foundation" + }, + "$schema": { + "type": "string" + } + }, + "required": [ + "title", + "description", + "type" + ], + "additionalProperties": false + } + }, + "$schema": "http://json-schema.org/draft-07/schema#" +} \ No newline at end of file diff --git a/apps/ds-docs/.astro/collections/get-started.schema.json b/apps/ds-docs/.astro/collections/get-started.schema.json new file mode 100644 index 00000000..74107cb0 --- /dev/null +++ b/apps/ds-docs/.astro/collections/get-started.schema.json @@ -0,0 +1,97 @@ +{ + "$ref": "#/definitions/get-started", + "definitions": { + "get-started": { + "type": "object", + "properties": { + "title": { + "type": "string" + }, + "description": { + "type": "string" + }, + "navLabel": { + "type": "string" + }, + "order": { + "type": "number" + }, + "hidden": { + "type": "boolean" + }, + "category": { + "type": "string", + "enum": [ + "installation", + "quick-start", + "migration", + "contribution" + ] + }, + "status": { + "type": "string", + "enum": [ + "stable", + "beta", + "deprecated", + "planned", + "experimental" + ] + }, + "since": { + "type": "string" + }, + "contributors": { + "type": "array", + "items": { + "type": "string" + } + }, + "lastUpdated": { + "anyOf": [ + { + "type": "string", + "format": "date-time" + }, + { + "type": "string", + "format": "date" + }, + { + "type": "integer", + "format": "unix-time" + } + ] + }, + "type": { + "type": "string", + "const": "guide" + }, + "prerequisites": { + "type": "array", + "items": { + "type": "string" + } + }, + "difficulty": { + "type": "string", + "enum": [ + "beginner", + "intermediate", + "advanced" + ] + }, + "$schema": { + "type": "string" + } + }, + "required": [ + "title", + "description", + "type" + ], + "additionalProperties": false + } + }, + "$schema": "http://json-schema.org/draft-07/schema#" +} \ No newline at end of file diff --git a/apps/ds-docs/.astro/collections/icons.schema.json b/apps/ds-docs/.astro/collections/icons.schema.json new file mode 100644 index 00000000..12cb59eb --- /dev/null +++ b/apps/ds-docs/.astro/collections/icons.schema.json @@ -0,0 +1,81 @@ +{ + "$ref": "#/definitions/icons", + "definitions": { + "icons": { + "type": "object", + "properties": { + "title": { + "type": "string" + }, + "description": { + "type": "string" + }, + "navLabel": { + "type": "string" + }, + "order": { + "type": "number" + }, + "hidden": { + "type": "boolean" + }, + "category": { + "type": "string", + "enum": [ + "azionicons", + "primeicons" + ] + }, + "status": { + "type": "string", + "enum": [ + "stable", + "beta", + "deprecated", + "planned", + "experimental" + ] + }, + "since": { + "type": "string" + }, + "contributors": { + "type": "array", + "items": { + "type": "string" + } + }, + "lastUpdated": { + "anyOf": [ + { + "type": "string", + "format": "date-time" + }, + { + "type": "string", + "format": "date" + }, + { + "type": "integer", + "format": "unix-time" + } + ] + }, + "type": { + "type": "string", + "const": "icon" + }, + "$schema": { + "type": "string" + } + }, + "required": [ + "title", + "description", + "type" + ], + "additionalProperties": false + } + }, + "$schema": "http://json-schema.org/draft-07/schema#" +} \ No newline at end of file diff --git a/apps/ds-docs/.astro/collections/patterns.schema.json b/apps/ds-docs/.astro/collections/patterns.schema.json new file mode 100644 index 00000000..e6b9328a --- /dev/null +++ b/apps/ds-docs/.astro/collections/patterns.schema.json @@ -0,0 +1,84 @@ +{ + "$ref": "#/definitions/patterns", + "definitions": { + "patterns": { + "type": "object", + "properties": { + "title": { + "type": "string" + }, + "description": { + "type": "string" + }, + "navLabel": { + "type": "string" + }, + "order": { + "type": "number" + }, + "hidden": { + "type": "boolean" + }, + "category": { + "type": "string" + }, + "status": { + "type": "string", + "enum": [ + "stable", + "beta", + "deprecated", + "planned", + "experimental" + ] + }, + "since": { + "type": "string" + }, + "contributors": { + "type": "array", + "items": { + "type": "string" + } + }, + "lastUpdated": { + "anyOf": [ + { + "type": "string", + "format": "date-time" + }, + { + "type": "string", + "format": "date" + }, + { + "type": "integer", + "format": "unix-time" + } + ] + }, + "type": { + "type": "string", + "const": "pattern" + }, + "useCases": { + "type": "array", + "items": { + "type": "string" + } + }, + "$schema": { + "type": "string" + } + }, + "required": [ + "title", + "description", + "category", + "type" + ], + "additionalProperties": false + } + }, + "$schema": "http://json-schema.org/draft-07/schema#" +} \ No newline at end of file diff --git a/apps/ds-docs/.astro/collections/templates.schema.json b/apps/ds-docs/.astro/collections/templates.schema.json new file mode 100644 index 00000000..1f2aaaad --- /dev/null +++ b/apps/ds-docs/.astro/collections/templates.schema.json @@ -0,0 +1,84 @@ +{ + "$ref": "#/definitions/templates", + "definitions": { + "templates": { + "type": "object", + "properties": { + "title": { + "type": "string" + }, + "description": { + "type": "string" + }, + "navLabel": { + "type": "string" + }, + "order": { + "type": "number" + }, + "hidden": { + "type": "boolean" + }, + "category": { + "type": "string" + }, + "status": { + "type": "string", + "enum": [ + "stable", + "beta", + "deprecated", + "planned", + "experimental" + ] + }, + "since": { + "type": "string" + }, + "contributors": { + "type": "array", + "items": { + "type": "string" + } + }, + "lastUpdated": { + "anyOf": [ + { + "type": "string", + "format": "date-time" + }, + { + "type": "string", + "format": "date" + }, + { + "type": "integer", + "format": "unix-time" + } + ] + }, + "type": { + "type": "string", + "const": "template" + }, + "blocks": { + "type": "array", + "items": { + "type": "string" + } + }, + "$schema": { + "type": "string" + } + }, + "required": [ + "title", + "description", + "category", + "type" + ], + "additionalProperties": false + } + }, + "$schema": "http://json-schema.org/draft-07/schema#" +} \ No newline at end of file diff --git a/apps/ds-docs/.astro/collections/tokens.schema.json b/apps/ds-docs/.astro/collections/tokens.schema.json new file mode 100644 index 00000000..0cda5fc5 --- /dev/null +++ b/apps/ds-docs/.astro/collections/tokens.schema.json @@ -0,0 +1,87 @@ +{ + "$ref": "#/definitions/tokens", + "definitions": { + "tokens": { + "type": "object", + "properties": { + "title": { + "type": "string" + }, + "description": { + "type": "string" + }, + "navLabel": { + "type": "string" + }, + "order": { + "type": "number" + }, + "hidden": { + "type": "boolean" + }, + "category": { + "type": "string", + "enum": [ + "color", + "typography", + "spacing", + "elevation", + "motion", + "border", + "shadow" + ] + }, + "status": { + "type": "string", + "enum": [ + "stable", + "beta", + "deprecated", + "planned", + "experimental" + ] + }, + "since": { + "type": "string" + }, + "contributors": { + "type": "array", + "items": { + "type": "string" + } + }, + "lastUpdated": { + "anyOf": [ + { + "type": "string", + "format": "date-time" + }, + { + "type": "string", + "format": "date" + }, + { + "type": "integer", + "format": "unix-time" + } + ] + }, + "type": { + "type": "string", + "const": "token" + }, + "$schema": { + "type": "string" + } + }, + "required": [ + "title", + "description", + "category", + "type" + ], + "additionalProperties": false + } + }, + "$schema": "http://json-schema.org/draft-07/schema#" +} \ No newline at end of file diff --git a/apps/ds-docs/.astro/content-assets.mjs b/apps/ds-docs/.astro/content-assets.mjs new file mode 100644 index 00000000..2b8b8234 --- /dev/null +++ b/apps/ds-docs/.astro/content-assets.mjs @@ -0,0 +1 @@ +export default new Map(); \ No newline at end of file diff --git a/apps/ds-docs/.astro/content-modules.mjs b/apps/ds-docs/.astro/content-modules.mjs new file mode 100644 index 00000000..2b8b8234 --- /dev/null +++ b/apps/ds-docs/.astro/content-modules.mjs @@ -0,0 +1 @@ +export default new Map(); \ No newline at end of file diff --git a/apps/ds-docs/.astro/content.d.ts b/apps/ds-docs/.astro/content.d.ts new file mode 100644 index 00000000..f6c2fd61 --- /dev/null +++ b/apps/ds-docs/.astro/content.d.ts @@ -0,0 +1,289 @@ +declare module 'astro:content' { + export interface RenderResult { + Content: import('astro/runtime/server/index.js').AstroComponentFactory; + headings: import('astro').MarkdownHeading[]; + remarkPluginFrontmatter: Record; + } + interface Render { + '.md': Promise; + } + + export interface RenderedContent { + html: string; + metadata?: { + imagePaths: Array; + [key: string]: unknown; + }; + } +} + +declare module 'astro:content' { + type Flatten = T extends { [K: string]: infer U } ? U : never; + + export type CollectionKey = keyof AnyEntryMap; + export type CollectionEntry = Flatten; + + export type ContentCollectionKey = keyof ContentEntryMap; + export type DataCollectionKey = keyof DataEntryMap; + + type AllValuesOf = T extends any ? T[keyof T] : never; + type ValidContentEntrySlug = AllValuesOf< + ContentEntryMap[C] + >['slug']; + + export type ReferenceDataEntry< + C extends CollectionKey, + E extends keyof DataEntryMap[C] = string, + > = { + collection: C; + id: E; + }; + export type ReferenceContentEntry< + C extends keyof ContentEntryMap, + E extends ValidContentEntrySlug | (string & {}) = string, + > = { + collection: C; + slug: E; + }; + export type ReferenceLiveEntry = { + collection: C; + id: string; + }; + + /** @deprecated Use `getEntry` instead. */ + export function getEntryBySlug< + C extends keyof ContentEntryMap, + E extends ValidContentEntrySlug | (string & {}), + >( + collection: C, + // Note that this has to accept a regular string too, for SSR + entrySlug: E, + ): E extends ValidContentEntrySlug + ? Promise> + : Promise | undefined>; + + /** @deprecated Use `getEntry` instead. */ + export function getDataEntryById( + collection: C, + entryId: E, + ): Promise>; + + export function getCollection>( + collection: C, + filter?: (entry: CollectionEntry) => entry is E, + ): Promise; + export function getCollection( + collection: C, + filter?: (entry: CollectionEntry) => unknown, + ): Promise[]>; + + export function getLiveCollection( + collection: C, + filter?: LiveLoaderCollectionFilterType, + ): Promise< + import('astro').LiveDataCollectionResult, LiveLoaderErrorType> + >; + + export function getEntry< + C extends keyof ContentEntryMap, + E extends ValidContentEntrySlug | (string & {}), + >( + entry: ReferenceContentEntry, + ): E extends ValidContentEntrySlug + ? Promise> + : Promise | undefined>; + export function getEntry< + C extends keyof DataEntryMap, + E extends keyof DataEntryMap[C] | (string & {}), + >( + entry: ReferenceDataEntry, + ): E extends keyof DataEntryMap[C] + ? Promise + : Promise | undefined>; + export function getEntry< + C extends keyof ContentEntryMap, + E extends ValidContentEntrySlug | (string & {}), + >( + collection: C, + slug: E, + ): E extends ValidContentEntrySlug + ? Promise> + : Promise | undefined>; + export function getEntry< + C extends keyof DataEntryMap, + E extends keyof DataEntryMap[C] | (string & {}), + >( + collection: C, + id: E, + ): E extends keyof DataEntryMap[C] + ? string extends keyof DataEntryMap[C] + ? Promise | undefined + : Promise + : Promise | undefined>; + export function getLiveEntry( + collection: C, + filter: string | LiveLoaderEntryFilterType, + ): Promise, LiveLoaderErrorType>>; + + /** Resolve an array of entry references from the same collection */ + export function getEntries( + entries: ReferenceContentEntry>[], + ): Promise[]>; + export function getEntries( + entries: ReferenceDataEntry[], + ): Promise[]>; + + export function render( + entry: AnyEntryMap[C][string], + ): Promise; + + export function reference( + collection: C, + ): import('astro/zod').ZodEffects< + import('astro/zod').ZodString, + C extends keyof ContentEntryMap + ? ReferenceContentEntry> + : ReferenceDataEntry + >; + // Allow generic `string` to avoid excessive type errors in the config + // if `dev` is not running to update as you edit. + // Invalid collection names will be caught at build time. + export function reference( + collection: C, + ): import('astro/zod').ZodEffects; + + type ReturnTypeOrOriginal = T extends (...args: any[]) => infer R ? R : T; + type InferEntrySchema = import('astro/zod').infer< + ReturnTypeOrOriginal['schema']> + >; + + type ContentEntryMap = { + + }; + + type DataEntryMap = { + "blocks": Record; + rendered?: RenderedContent; + filePath?: string; +}>; +"components": Record; + rendered?: RenderedContent; + filePath?: string; +}>; +"contributing": Record; + rendered?: RenderedContent; + filePath?: string; +}>; +"foundations": Record; + rendered?: RenderedContent; + filePath?: string; +}>; +"get-started": Record; + rendered?: RenderedContent; + filePath?: string; +}>; +"icons": Record; + rendered?: RenderedContent; + filePath?: string; +}>; +"patterns": Record; + rendered?: RenderedContent; + filePath?: string; +}>; +"templates": Record; + rendered?: RenderedContent; + filePath?: string; +}>; +"tokens": Record; + rendered?: RenderedContent; + filePath?: string; +}>; + + }; + + type AnyEntryMap = ContentEntryMap & DataEntryMap; + + type ExtractLoaderTypes = T extends import('astro/loaders').LiveLoader< + infer TData, + infer TEntryFilter, + infer TCollectionFilter, + infer TError + > + ? { data: TData; entryFilter: TEntryFilter; collectionFilter: TCollectionFilter; error: TError } + : { data: never; entryFilter: never; collectionFilter: never; error: never }; + type ExtractDataType = ExtractLoaderTypes['data']; + type ExtractEntryFilterType = ExtractLoaderTypes['entryFilter']; + type ExtractCollectionFilterType = ExtractLoaderTypes['collectionFilter']; + type ExtractErrorType = ExtractLoaderTypes['error']; + + type LiveLoaderDataType = + LiveContentConfig['collections'][C]['schema'] extends undefined + ? ExtractDataType + : import('astro/zod').infer< + Exclude + >; + type LiveLoaderEntryFilterType = + ExtractEntryFilterType; + type LiveLoaderCollectionFilterType = + ExtractCollectionFilterType; + type LiveLoaderErrorType = ExtractErrorType< + LiveContentConfig['collections'][C]['loader'] + >; + + export type ContentConfig = typeof import("../src/content/config.js"); + export type LiveContentConfig = never; +} diff --git a/apps/ds-docs/.astro/data-store.json b/apps/ds-docs/.astro/data-store.json new file mode 100644 index 00000000..bc5e172f --- /dev/null +++ b/apps/ds-docs/.astro/data-store.json @@ -0,0 +1 @@ +[["Map",1,2,9,10,138,139,242,243,297,298,354,355],"meta::meta",["Map",3,4,5,6,7,8],"astro-version","5.18.0","content-config-digest","43546a7913a17b3d","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"site\":\"https://docs.azion.com\",\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":true,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true,\"allowedDomains\":[],\"actionBodySizeLimit\":1048576},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"liveContentCollections\":false,\"csp\":false,\"staticImportMetaEnv\":false,\"chromeDevtoolsWorkspace\":false,\"failOnPrerenderConflict\":false,\"svgo\":false},\"legacy\":{\"collections\":false}}","components",["Map",11,12,87,88],"fieldset",{"id":11,"data":13,"body":27,"filePath":28,"digest":29,"rendered":30,"legacyId":86},{"title":14,"description":15,"category":16,"status":17,"since":18,"type":19,"source":20,"storybook":21,"figma":22,"related":23},"Fieldset","Group related form inputs under a shared label for better organization and accessibility.","form","stable","1.0.0","component","https://github.com/aziontech/webkit/tree/main/packages/components/src/Fieldset","https://storybook.azion.com/?path=/story/form-fieldset","https://figma.com/file/azion-design-system?node-id=fieldset",[24,25,26],"Form","Input","Select","## Overview\n\nThe Fieldset component provides a way to group related form controls together. It renders a native HTML `\u003Cfieldset>` element with proper accessibility features, including an associated `\u003Clegend>` for the group label.\n\nFieldsets are essential for creating accessible forms, as they help screen reader users understand the relationship between form controls.\n\n## When to Use\n\nUse Fieldset when you need to:\n\n- Group related form inputs (e.g., address fields, contact information)\n- Create logical sections within a larger form\n- Improve form accessibility with proper semantic structure\n- Apply a shared label or description to multiple inputs\n\n## Examples\n\n### Basic Fieldset\n\n\u003CDemoPreview title=\"Basic fieldset with legend\">\n \u003Cfieldset class=\"border border-gray-300 rounded-lg p-4\">\n \u003Clegend class=\"text-sm font-medium text-text-primary px-2\">Personal Information\u003C/legend>\n \u003Cdiv class=\"space-y-4 mt-2\">\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Full Name\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-primary-500\" placeholder=\"Enter your name\" />\n \u003C/div>\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Email\u003C/label>\n \u003Cinput type=\"email\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-primary-500\" placeholder=\"Enter your email\" />\n \u003C/div>\n \u003C/div>\n \u003C/fieldset>\n\u003C/DemoPreview>\n\n### Address Grouping\n\n\u003CDemoPreview title=\"Address fields grouped together\">\n \u003Cfieldset class=\"border border-gray-300 rounded-lg p-4\">\n \u003Clegend class=\"text-sm font-medium text-text-primary px-2\">Shipping Address\u003C/legend>\n \u003Cdiv class=\"space-y-4 mt-2\">\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Street Address\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md\" placeholder=\"123 Main St\" />\n \u003C/div>\n \u003Cdiv class=\"grid grid-cols-2 gap-4\">\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">City\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md\" placeholder=\"City\" />\n \u003C/div>\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">ZIP Code\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md\" placeholder=\"12345\" />\n \u003C/div>\n \u003C/div>\n \u003C/div>\n \u003C/fieldset>\n\u003C/DemoPreview>\n\n### Disabled State\n\n\u003CDemoPreview title=\"Disabled fieldset\">\n \u003Cfieldset class=\"border border-gray-300 rounded-lg p-4 opacity-50\" disabled>\n \u003Clegend class=\"text-sm font-medium text-text-primary px-2\">Disabled Group\u003C/legend>\n \u003Cdiv class=\"space-y-4 mt-2\">\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Input 1\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-100\" placeholder=\"Disabled\" />\n \u003C/div>\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Input 2\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-100\" placeholder=\"Disabled\" />\n \u003C/div>\n \u003C/div>\n \u003C/fieldset>\n\u003C/DemoPreview>\n\n## Accessibility\n\n### Keyboard Navigation\n\n| Keys | Action |\n|------|--------|\n| Tab | Moves focus to the first focusable element within the fieldset |\n\n### ARIA Attributes\n\nThe Fieldset component uses native HTML elements that provide built-in accessibility:\n\n- `\u003Cfieldset>` - Groups related form controls\n- `\u003Clegend>` - Provides the accessible name for the group\n\nNo additional ARIA attributes are required when using the native elements correctly.\n\n### Best Practices\n\n1. **Always include a legend**: The `\u003Clegend>` element is required for accessibility\n2. **Use for related inputs**: Only group inputs that are logically related\n3. **Avoid nested fieldsets**: Deeply nested fieldsets can be confusing for screen reader users\n4. **Consider visual grouping**: Use styling to visually reinforce the grouping\n\n## API\n\n### Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `legend` | `string` | - | The text for the fieldset legend |\n| `disabled` | `boolean` | `false` | Whether all controls in the fieldset are disabled |\n\n### Slots\n\n| Slot | Description |\n|------|-------------|\n| `default` | Form controls and content inside the fieldset |\n| `legend` | Custom legend content (overrides `legend` prop) |\n\n### Events\n\n| Event | Payload | Description |\n|-------|---------|-------------|\n| - | - | Fieldset does not emit custom events |\n\n## Related\n\n- [Form](/components/form) - Form wrapper component\n- [Input](/components/input) - Text input component\n- [Select](/components/select) - Select dropdown component","src/content/components/fieldset.md","454a2ca909c96278",{"html":31,"metadata":32},"\u003Ch2 id=\"overview\">Overview\u003C/h2>\n\u003Cp>The Fieldset component provides a way to group related form controls together. It renders a native HTML \u003Ccode><fieldset>\u003C/code> element with proper accessibility features, including an associated \u003Ccode><legend>\u003C/code> for the group label.\u003C/p>\n\u003Cp>Fieldsets are essential for creating accessible forms, as they help screen reader users understand the relationship between form controls.\u003C/p>\n\u003Ch2 id=\"when-to-use\">When to Use\u003C/h2>\n\u003Cp>Use Fieldset when you need to:\u003C/p>\n\u003Cul>\n\u003Cli>Group related form inputs (e.g., address fields, contact information)\u003C/li>\n\u003Cli>Create logical sections within a larger form\u003C/li>\n\u003Cli>Improve form accessibility with proper semantic structure\u003C/li>\n\u003Cli>Apply a shared label or description to multiple inputs\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"examples\">Examples\u003C/h2>\n\u003Ch3 id=\"basic-fieldset\">Basic Fieldset\u003C/h3>\n\u003Cdemopreview title=\"Basic fieldset with legend\">\n \u003Cfieldset class=\"border border-gray-300 rounded-lg p-4\">\n \u003Clegend class=\"text-sm font-medium text-text-primary px-2\">Personal Information\u003C/legend>\n \u003Cdiv class=\"space-y-4 mt-2\">\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Full Name\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-primary-500\" placeholder=\"Enter your name\">\n \u003C/div>\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Email\u003C/label>\n \u003Cinput type=\"email\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-primary-500\" placeholder=\"Enter your email\">\n \u003C/div>\n \u003C/div>\n \u003C/fieldset>\n\u003C/demopreview>\n\u003Ch3 id=\"address-grouping\">Address Grouping\u003C/h3>\n\u003Cdemopreview title=\"Address fields grouped together\">\n \u003Cfieldset class=\"border border-gray-300 rounded-lg p-4\">\n \u003Clegend class=\"text-sm font-medium text-text-primary px-2\">Shipping Address\u003C/legend>\n \u003Cdiv class=\"space-y-4 mt-2\">\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Street Address\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md\" placeholder=\"123 Main St\">\n \u003C/div>\n \u003Cdiv class=\"grid grid-cols-2 gap-4\">\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">City\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md\" placeholder=\"City\">\n \u003C/div>\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">ZIP Code\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md\" placeholder=\"12345\">\n \u003C/div>\n \u003C/div>\n \u003C/div>\n \u003C/fieldset>\n\u003C/demopreview>\n\u003Ch3 id=\"disabled-state\">Disabled State\u003C/h3>\n\u003Cdemopreview title=\"Disabled fieldset\">\n \u003Cfieldset class=\"border border-gray-300 rounded-lg p-4 opacity-50\" disabled>\n \u003Clegend class=\"text-sm font-medium text-text-primary px-2\">Disabled Group\u003C/legend>\n \u003Cdiv class=\"space-y-4 mt-2\">\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Input 1\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-100\" placeholder=\"Disabled\">\n \u003C/div>\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Input 2\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-100\" placeholder=\"Disabled\">\n \u003C/div>\n \u003C/div>\n \u003C/fieldset>\n\u003C/demopreview>\n\u003Ch2 id=\"accessibility\">Accessibility\u003C/h2>\n\u003Ch3 id=\"keyboard-navigation\">Keyboard Navigation\u003C/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Keys\u003C/th>\u003Cth>Action\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>Tab\u003C/td>\u003Ctd>Moves focus to the first focusable element within the fieldset\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Ch3 id=\"aria-attributes\">ARIA Attributes\u003C/h3>\n\u003Cp>The Fieldset component uses native HTML elements that provide built-in accessibility:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Ccode><fieldset>\u003C/code> - Groups related form controls\u003C/li>\n\u003Cli>\u003Ccode><legend>\u003C/code> - Provides the accessible name for the group\u003C/li>\n\u003C/ul>\n\u003Cp>No additional ARIA attributes are required when using the native elements correctly.\u003C/p>\n\u003Ch3 id=\"best-practices\">Best Practices\u003C/h3>\n\u003Col>\n\u003Cli>\u003Cstrong>Always include a legend\u003C/strong>: The \u003Ccode><legend>\u003C/code> element is required for accessibility\u003C/li>\n\u003Cli>\u003Cstrong>Use for related inputs\u003C/strong>: Only group inputs that are logically related\u003C/li>\n\u003Cli>\u003Cstrong>Avoid nested fieldsets\u003C/strong>: Deeply nested fieldsets can be confusing for screen reader users\u003C/li>\n\u003Cli>\u003Cstrong>Consider visual grouping\u003C/strong>: Use styling to visually reinforce the grouping\u003C/li>\n\u003C/ol>\n\u003Ch2 id=\"api\">API\u003C/h2>\n\u003Ch3 id=\"props\">Props\u003C/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Prop\u003C/th>\u003Cth>Type\u003C/th>\u003Cth>Default\u003C/th>\u003Cth>Description\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode>legend\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>string\u003C/code>\u003C/td>\u003Ctd>-\u003C/td>\u003Ctd>The text for the fieldset legend\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>disabled\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>boolean\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>false\u003C/code>\u003C/td>\u003Ctd>Whether all controls in the fieldset are disabled\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Ch3 id=\"slots\">Slots\u003C/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Slot\u003C/th>\u003Cth>Description\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode>default\u003C/code>\u003C/td>\u003Ctd>Form controls and content inside the fieldset\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>legend\u003C/code>\u003C/td>\u003Ctd>Custom legend content (overrides \u003Ccode>legend\u003C/code> prop)\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Ch3 id=\"events\">Events\u003C/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Event\u003C/th>\u003Cth>Payload\u003C/th>\u003Cth>Description\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>-\u003C/td>\u003Ctd>-\u003C/td>\u003Ctd>Fieldset does not emit custom events\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Ch2 id=\"related\">Related\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/components/form\">Form\u003C/a> - Form wrapper component\u003C/li>\n\u003Cli>\u003Ca href=\"/components/input\">Input\u003C/a> - Text input component\u003C/li>\n\u003Cli>\u003Ca href=\"/components/select\">Select\u003C/a> - Select dropdown component\u003C/li>\n\u003C/ul>",{"headings":33,"localImagePaths":81,"remoteImagePaths":82,"frontmatter":83,"imagePaths":85},[34,38,41,44,48,51,54,57,60,63,66,69,72,75,78],{"depth":35,"slug":36,"text":37},2,"overview","Overview",{"depth":35,"slug":39,"text":40},"when-to-use","When to Use",{"depth":35,"slug":42,"text":43},"examples","Examples",{"depth":45,"slug":46,"text":47},3,"basic-fieldset","Basic Fieldset",{"depth":45,"slug":49,"text":50},"address-grouping","Address Grouping",{"depth":45,"slug":52,"text":53},"disabled-state","Disabled State",{"depth":35,"slug":55,"text":56},"accessibility","Accessibility",{"depth":45,"slug":58,"text":59},"keyboard-navigation","Keyboard Navigation",{"depth":45,"slug":61,"text":62},"aria-attributes","ARIA Attributes",{"depth":45,"slug":64,"text":65},"best-practices","Best Practices",{"depth":35,"slug":67,"text":68},"api","API",{"depth":45,"slug":70,"text":71},"props","Props",{"depth":45,"slug":73,"text":74},"slots","Slots",{"depth":45,"slug":76,"text":77},"events","Events",{"depth":35,"slug":79,"text":80},"related","Related",[],[],{"title":14,"description":15,"type":19,"category":16,"status":17,"since":18,"figma":22,"storybook":21,"source":20,"related":84},[24,25,26],[],"fieldset.md","button",{"id":87,"data":89,"body":97,"filePath":98,"digest":99,"rendered":100,"legacyId":137},{"title":90,"description":91,"navLabel":90,"order":92,"category":16,"status":17,"type":19,"component":90,"source":93,"storybook":94,"figma":95,"related":96},"Button","Buttons trigger actions and events when users interact with them.",1,"https://github.com/aziontech/webkit/tree/main/packages/components/src/Button","https://storybook.azion.com/components/button","https://figma.com/file/azion-design-system/components/button",[25,26],"# Button\n\nButtons are interactive elements that trigger actions when clicked or tapped. They communicate actions that users can take and are typically placed throughout your UI.\n\n## When to Use\n\nUse buttons to:\n- Trigger primary actions (Submit, Save, Continue)\n- Navigate to different views or pages\n- Toggle states or settings\n- Trigger secondary actions (Cancel, Delete)\n\n## Anatomy\n\nA button consists of:\n1. **Container** - The clickable area with background styling\n2. **Label** - Text describing the action\n3. **Icon** (optional) - Visual indicator before or after the label\n\n## Examples\n\n### Primary Button\n\nUse for the main action in a context.\n\n\u003CDemoPreview>\n \u003Cbutton class=\"px-4 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 transition-colors\">\n Primary Button\n \u003C/button>\n\u003C/DemoPreview>\n\n### Secondary Button\n\nUse for secondary or alternative actions.\n\n\u003CDemoPreview>\n \u003Cbutton class=\"px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors border border-gray-300\">\n Secondary Button\n \u003C/button>\n\u003C/DemoPreview>\n\n### Destructive Button\n\nUse for destructive or irreversible actions.\n\n\u003CDemoPreview>\n \u003Cbutton class=\"px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 transition-colors\">\n Delete\n \u003C/button>\n\u003C/DemoPreview>\n\n## States\n\nButtons have the following states:\n- **Default** - The normal resting state\n- **Hover** - When the cursor is over the button\n- **Focus** - When the button has keyboard focus\n- **Active** - When the button is being pressed\n- **Disabled** - When the button is not interactive\n\n## Accessibility\n\n### Keyboard Interaction\n- **Tab**: Moves focus to the button\n- **Enter/Space**: Activates the button when focused\n\n### ARIA Attributes\n- Use `aria-disabled=\"true\"` for disabled buttons that should be announced\n- Use `aria-label` for icon-only buttons\n\n## API\n\n### Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `variant` | `'primary' \\| 'secondary' \\| 'destructive'` | `'primary'` | Visual style variant |\n| `size` | `'sm' \\| 'md' \\| 'lg'` | `'md'` | Button size |\n| `disabled` | `boolean` | `false` | Whether the button is disabled |\n| `loading` | `boolean` | `false` | Shows loading spinner |\n| `icon` | `string` | - | Icon name to display |\n\n### Slots\n\n| Slot | Description |\n|------|-------------|\n| `default` | Button label content |\n| `icon-left` | Icon before the label |\n| `icon-right` | Icon after the label |\n\n### Events\n\n| Event | Payload | Description |\n|-------|---------|-------------|\n| `click` | `MouseEvent` | Fired when button is clicked |\n\n## Related\n\n- [Input](/components/input) - Text input component\n- [Select](/components/select) - Select dropdown component","src/content/components/button.md","87fd307d3887f507",{"html":101,"metadata":102},"\u003Ch1 id=\"button\">Button\u003C/h1>\n\u003Cp>Buttons are interactive elements that trigger actions when clicked or tapped. They communicate actions that users can take and are typically placed throughout your UI.\u003C/p>\n\u003Ch2 id=\"when-to-use\">When to Use\u003C/h2>\n\u003Cp>Use buttons to:\u003C/p>\n\u003Cul>\n\u003Cli>Trigger primary actions (Submit, Save, Continue)\u003C/li>\n\u003Cli>Navigate to different views or pages\u003C/li>\n\u003Cli>Toggle states or settings\u003C/li>\n\u003Cli>Trigger secondary actions (Cancel, Delete)\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"anatomy\">Anatomy\u003C/h2>\n\u003Cp>A button consists of:\u003C/p>\n\u003Col>\n\u003Cli>\u003Cstrong>Container\u003C/strong> - The clickable area with background styling\u003C/li>\n\u003Cli>\u003Cstrong>Label\u003C/strong> - Text describing the action\u003C/li>\n\u003Cli>\u003Cstrong>Icon\u003C/strong> (optional) - Visual indicator before or after the label\u003C/li>\n\u003C/ol>\n\u003Ch2 id=\"examples\">Examples\u003C/h2>\n\u003Ch3 id=\"primary-button\">Primary Button\u003C/h3>\n\u003Cp>Use for the main action in a context.\u003C/p>\n\u003Cdemopreview>\n \u003Cbutton class=\"px-4 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 transition-colors\">\n Primary Button\n \u003C/button>\n\u003C/demopreview>\n\u003Ch3 id=\"secondary-button\">Secondary Button\u003C/h3>\n\u003Cp>Use for secondary or alternative actions.\u003C/p>\n\u003Cdemopreview>\n \u003Cbutton class=\"px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors border border-gray-300\">\n Secondary Button\n \u003C/button>\n\u003C/demopreview>\n\u003Ch3 id=\"destructive-button\">Destructive Button\u003C/h3>\n\u003Cp>Use for destructive or irreversible actions.\u003C/p>\n\u003Cdemopreview>\n \u003Cbutton class=\"px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 transition-colors\">\n Delete\n \u003C/button>\n\u003C/demopreview>\n\u003Ch2 id=\"states\">States\u003C/h2>\n\u003Cp>Buttons have the following states:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Default\u003C/strong> - The normal resting state\u003C/li>\n\u003Cli>\u003Cstrong>Hover\u003C/strong> - When the cursor is over the button\u003C/li>\n\u003Cli>\u003Cstrong>Focus\u003C/strong> - When the button has keyboard focus\u003C/li>\n\u003Cli>\u003Cstrong>Active\u003C/strong> - When the button is being pressed\u003C/li>\n\u003Cli>\u003Cstrong>Disabled\u003C/strong> - When the button is not interactive\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"accessibility\">Accessibility\u003C/h2>\n\u003Ch3 id=\"keyboard-interaction\">Keyboard Interaction\u003C/h3>\n\u003Cul>\n\u003Cli>\u003Cstrong>Tab\u003C/strong>: Moves focus to the button\u003C/li>\n\u003Cli>\u003Cstrong>Enter/Space\u003C/strong>: Activates the button when focused\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"aria-attributes\">ARIA Attributes\u003C/h3>\n\u003Cul>\n\u003Cli>Use \u003Ccode>aria-disabled=\"true\"\u003C/code> for disabled buttons that should be announced\u003C/li>\n\u003Cli>Use \u003Ccode>aria-label\u003C/code> for icon-only buttons\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"api\">API\u003C/h2>\n\u003Ch3 id=\"props\">Props\u003C/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Prop\u003C/th>\u003Cth>Type\u003C/th>\u003Cth>Default\u003C/th>\u003Cth>Description\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode>variant\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>'primary' | 'secondary' | 'destructive'\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>'primary'\u003C/code>\u003C/td>\u003Ctd>Visual style variant\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>size\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>'sm' | 'md' | 'lg'\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>'md'\u003C/code>\u003C/td>\u003Ctd>Button size\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>disabled\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>boolean\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>false\u003C/code>\u003C/td>\u003Ctd>Whether the button is disabled\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>loading\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>boolean\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>false\u003C/code>\u003C/td>\u003Ctd>Shows loading spinner\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>icon\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>string\u003C/code>\u003C/td>\u003Ctd>-\u003C/td>\u003Ctd>Icon name to display\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Ch3 id=\"slots\">Slots\u003C/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Slot\u003C/th>\u003Cth>Description\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode>default\u003C/code>\u003C/td>\u003Ctd>Button label content\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>icon-left\u003C/code>\u003C/td>\u003Ctd>Icon before the label\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>icon-right\u003C/code>\u003C/td>\u003Ctd>Icon after the label\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Ch3 id=\"events\">Events\u003C/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Event\u003C/th>\u003Cth>Payload\u003C/th>\u003Cth>Description\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode>click\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>MouseEvent\u003C/code>\u003C/td>\u003Ctd>Fired when button is clicked\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Ch2 id=\"related\">Related\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/components/input\">Input\u003C/a> - Text input component\u003C/li>\n\u003Cli>\u003Ca href=\"/components/select\">Select\u003C/a> - Select dropdown component\u003C/li>\n\u003C/ul>",{"headings":103,"localImagePaths":132,"remoteImagePaths":133,"frontmatter":134,"imagePaths":136},[104,105,106,109,110,113,116,119,122,123,126,127,128,129,130,131],{"depth":92,"slug":87,"text":90},{"depth":35,"slug":39,"text":40},{"depth":35,"slug":107,"text":108},"anatomy","Anatomy",{"depth":35,"slug":42,"text":43},{"depth":45,"slug":111,"text":112},"primary-button","Primary Button",{"depth":45,"slug":114,"text":115},"secondary-button","Secondary Button",{"depth":45,"slug":117,"text":118},"destructive-button","Destructive Button",{"depth":35,"slug":120,"text":121},"states","States",{"depth":35,"slug":55,"text":56},{"depth":45,"slug":124,"text":125},"keyboard-interaction","Keyboard Interaction",{"depth":45,"slug":61,"text":62},{"depth":35,"slug":67,"text":68},{"depth":45,"slug":70,"text":71},{"depth":45,"slug":73,"text":74},{"depth":45,"slug":76,"text":77},{"depth":35,"slug":79,"text":80},[],[],{"title":90,"description":91,"navLabel":90,"order":92,"type":19,"category":16,"status":17,"component":90,"source":93,"storybook":94,"figma":95,"related":135},[25,26],[],"button.md","foundations",["Map",140,141,158,195],"index",{"id":140,"data":142,"body":146,"filePath":147,"digest":148,"rendered":149,"legacyId":194},{"title":143,"description":144,"navLabel":143,"order":92,"type":145},"Foundations","Core design principles and guidelines that shape the Azion Design System.","foundation","# Foundations\n\nFoundations are the core design principles, guidelines, and visual elements that shape the Azion Design System. They provide consistency and coherence across all components and experiences.\n\n## What's Inside\n\n### Color\nOur color system is built on semantic tokens that adapt to different contexts and themes. Learn how to use color effectively in your interfaces.\n\n### Typography\nTypography guidelines ensure readable, accessible, and consistent text across all touchpoints.\n\n### Spacing\nA consistent spacing scale creates rhythm and harmony in layouts.\n\n### Elevation\nElevation defines the visual hierarchy and depth of elements in the interface.\n\n### Motion\nMotion principles guide animations and transitions for a polished user experience.\n\n## Design Principles\n\n### 1. Clarity First\nEvery element should serve a purpose. Remove unnecessary complexity.\n\n### 2. Consistency\nUse familiar patterns and consistent behaviors across the system.\n\n### 3. Accessibility\nDesign for everyone. Meet WCAG 2.1 AA standards at minimum.\n\n### 4. Performance\nOptimize for speed and efficiency in both design and implementation.\n\n## Next Steps\n\n- [Color](/foundations/color) - Explore the color system\n- [Typography](/foundations/typography) - Learn about typography\n- [Spacing](/foundations/spacing) - Understand spacing principles","src/content/foundations/index.md","a6cfddde3ca33942",{"html":150,"metadata":151},"\u003Ch1 id=\"foundations\">Foundations\u003C/h1>\n\u003Cp>Foundations are the core design principles, guidelines, and visual elements that shape the Azion Design System. They provide consistency and coherence across all components and experiences.\u003C/p>\n\u003Ch2 id=\"whats-inside\">What’s Inside\u003C/h2>\n\u003Ch3 id=\"color\">Color\u003C/h3>\n\u003Cp>Our color system is built on semantic tokens that adapt to different contexts and themes. Learn how to use color effectively in your interfaces.\u003C/p>\n\u003Ch3 id=\"typography\">Typography\u003C/h3>\n\u003Cp>Typography guidelines ensure readable, accessible, and consistent text across all touchpoints.\u003C/p>\n\u003Ch3 id=\"spacing\">Spacing\u003C/h3>\n\u003Cp>A consistent spacing scale creates rhythm and harmony in layouts.\u003C/p>\n\u003Ch3 id=\"elevation\">Elevation\u003C/h3>\n\u003Cp>Elevation defines the visual hierarchy and depth of elements in the interface.\u003C/p>\n\u003Ch3 id=\"motion\">Motion\u003C/h3>\n\u003Cp>Motion principles guide animations and transitions for a polished user experience.\u003C/p>\n\u003Ch2 id=\"design-principles\">Design Principles\u003C/h2>\n\u003Ch3 id=\"1-clarity-first\">1. Clarity First\u003C/h3>\n\u003Cp>Every element should serve a purpose. Remove unnecessary complexity.\u003C/p>\n\u003Ch3 id=\"2-consistency\">2. Consistency\u003C/h3>\n\u003Cp>Use familiar patterns and consistent behaviors across the system.\u003C/p>\n\u003Ch3 id=\"3-accessibility\">3. Accessibility\u003C/h3>\n\u003Cp>Design for everyone. Meet WCAG 2.1 AA standards at minimum.\u003C/p>\n\u003Ch3 id=\"4-performance\">4. Performance\u003C/h3>\n\u003Cp>Optimize for speed and efficiency in both design and implementation.\u003C/p>\n\u003Ch2 id=\"next-steps\">Next Steps\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/foundations/color\">Color\u003C/a> - Explore the color system\u003C/li>\n\u003Cli>\u003Ca href=\"/foundations/typography\">Typography\u003C/a> - Learn about typography\u003C/li>\n\u003Cli>\u003Ca href=\"/foundations/spacing\">Spacing\u003C/a> - Understand spacing principles\u003C/li>\n\u003C/ul>",{"headings":152,"localImagePaths":190,"remoteImagePaths":191,"frontmatter":192,"imagePaths":193},[153,154,157,160,163,166,169,172,175,178,181,184,187],{"depth":92,"slug":138,"text":143},{"depth":35,"slug":155,"text":156},"whats-inside","What’s Inside",{"depth":45,"slug":158,"text":159},"color","Color",{"depth":45,"slug":161,"text":162},"typography","Typography",{"depth":45,"slug":164,"text":165},"spacing","Spacing",{"depth":45,"slug":167,"text":168},"elevation","Elevation",{"depth":45,"slug":170,"text":171},"motion","Motion",{"depth":35,"slug":173,"text":174},"design-principles","Design Principles",{"depth":45,"slug":176,"text":177},"1-clarity-first","1. Clarity First",{"depth":45,"slug":179,"text":180},"2-consistency","2. Consistency",{"depth":45,"slug":182,"text":183},"3-accessibility","3. Accessibility",{"depth":45,"slug":185,"text":186},"4-performance","4. Performance",{"depth":35,"slug":188,"text":189},"next-steps","Next Steps",[],[],{"title":143,"description":144,"navLabel":143,"order":92,"type":145},[],"index.md",{"id":158,"data":196,"body":198,"filePath":199,"digest":200,"rendered":201,"legacyId":241},{"title":159,"description":197,"navLabel":159,"order":35,"category":158,"type":145},"The color system provides semantic tokens for consistent and accessible interfaces.","# Color\n\nColor is a fundamental element of visual design. The Azion Design System uses a semantic color system built on design tokens that adapt to different contexts and themes.\n\n## Color Philosophy\n\nOur color system is designed to be:\n\n- **Accessible**: All color combinations meet WCAG 2.1 AA contrast requirements\n- **Semantic**: Colors are named by purpose, not appearance\n- **Consistent**: The same tokens are used across all components\n- **Themeable**: Colors adapt automatically to light and dark modes\n\n## Primary Colors\n\nThe primary color palette represents the Azion brand:\n\n| Token | Light Mode | Dark Mode | Usage |\n|-------|------------|-----------|-------|\n| `--color-primary-50` | `#eff6ff` | `#1e3a8a` | Light backgrounds |\n| `--color-primary-100` | `#dbeafe` | `#1e40af` | Hover states |\n| `--color-primary-500` | `#3b82f6` | `#3b82f6` | Primary actions |\n| `--color-primary-700` | `#1d4ed8` | `#60a5fa` | Active states |\n| `--color-primary-900` | `#1e3a8a` | `#93c5fd` | Text on light |\n\n## Semantic Colors\n\nSemantic colors convey meaning:\n\n### Success\nUsed for positive actions and confirmations.\n\n### Warning\nUsed for cautionary messages and alerts.\n\n### Error\nUsed for error states and destructive actions.\n\n### Info\nUsed for informational messages and neutral states.\n\n## Usage Guidelines\n\n### Do\n- Use semantic tokens instead of raw color values\n- Ensure sufficient contrast for text\n- Use color consistently across similar elements\n\n### Don't\n- Don't use color alone to convey information\n- Don't create new colors outside the system\n- Don't use decorative colors that distract from content\n\n## Related\n\n- [Typography](/foundations/typography) - Typography system\n- [Tokens](/tokens) - Design token reference","src/content/foundations/color.md","47307b696fcf627b",{"html":202,"metadata":203},"\u003Ch1 id=\"color\">Color\u003C/h1>\n\u003Cp>Color is a fundamental element of visual design. The Azion Design System uses a semantic color system built on design tokens that adapt to different contexts and themes.\u003C/p>\n\u003Ch2 id=\"color-philosophy\">Color Philosophy\u003C/h2>\n\u003Cp>Our color system is designed to be:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Accessible\u003C/strong>: All color combinations meet WCAG 2.1 AA contrast requirements\u003C/li>\n\u003Cli>\u003Cstrong>Semantic\u003C/strong>: Colors are named by purpose, not appearance\u003C/li>\n\u003Cli>\u003Cstrong>Consistent\u003C/strong>: The same tokens are used across all components\u003C/li>\n\u003Cli>\u003Cstrong>Themeable\u003C/strong>: Colors adapt automatically to light and dark modes\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"primary-colors\">Primary Colors\u003C/h2>\n\u003Cp>The primary color palette represents the Azion brand:\u003C/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Token\u003C/th>\u003Cth>Light Mode\u003C/th>\u003Cth>Dark Mode\u003C/th>\u003Cth>Usage\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode>--color-primary-50\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#eff6ff\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#1e3a8a\u003C/code>\u003C/td>\u003Ctd>Light backgrounds\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>--color-primary-100\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#dbeafe\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#1e40af\u003C/code>\u003C/td>\u003Ctd>Hover states\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>--color-primary-500\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#3b82f6\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#3b82f6\u003C/code>\u003C/td>\u003Ctd>Primary actions\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>--color-primary-700\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#1d4ed8\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#60a5fa\u003C/code>\u003C/td>\u003Ctd>Active states\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>--color-primary-900\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#1e3a8a\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#93c5fd\u003C/code>\u003C/td>\u003Ctd>Text on light\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Ch2 id=\"semantic-colors\">Semantic Colors\u003C/h2>\n\u003Cp>Semantic colors convey meaning:\u003C/p>\n\u003Ch3 id=\"success\">Success\u003C/h3>\n\u003Cp>Used for positive actions and confirmations.\u003C/p>\n\u003Ch3 id=\"warning\">Warning\u003C/h3>\n\u003Cp>Used for cautionary messages and alerts.\u003C/p>\n\u003Ch3 id=\"error\">Error\u003C/h3>\n\u003Cp>Used for error states and destructive actions.\u003C/p>\n\u003Ch3 id=\"info\">Info\u003C/h3>\n\u003Cp>Used for informational messages and neutral states.\u003C/p>\n\u003Ch2 id=\"usage-guidelines\">Usage Guidelines\u003C/h2>\n\u003Ch3 id=\"do\">Do\u003C/h3>\n\u003Cul>\n\u003Cli>Use semantic tokens instead of raw color values\u003C/li>\n\u003Cli>Ensure sufficient contrast for text\u003C/li>\n\u003Cli>Use color consistently across similar elements\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"dont\">Don’t\u003C/h3>\n\u003Cul>\n\u003Cli>Don’t use color alone to convey information\u003C/li>\n\u003Cli>Don’t create new colors outside the system\u003C/li>\n\u003Cli>Don’t use decorative colors that distract from content\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"related\">Related\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/foundations/typography\">Typography\u003C/a> - Typography system\u003C/li>\n\u003Cli>\u003Ca href=\"/tokens\">Tokens\u003C/a> - Design token reference\u003C/li>\n\u003C/ul>",{"headings":204,"localImagePaths":237,"remoteImagePaths":238,"frontmatter":239,"imagePaths":240},[205,206,209,212,215,218,221,224,227,230,233,236],{"depth":92,"slug":158,"text":159},{"depth":35,"slug":207,"text":208},"color-philosophy","Color Philosophy",{"depth":35,"slug":210,"text":211},"primary-colors","Primary Colors",{"depth":35,"slug":213,"text":214},"semantic-colors","Semantic Colors",{"depth":45,"slug":216,"text":217},"success","Success",{"depth":45,"slug":219,"text":220},"warning","Warning",{"depth":45,"slug":222,"text":223},"error","Error",{"depth":45,"slug":225,"text":226},"info","Info",{"depth":35,"slug":228,"text":229},"usage-guidelines","Usage Guidelines",{"depth":45,"slug":231,"text":232},"do","Do",{"depth":45,"slug":234,"text":235},"dont","Don’t",{"depth":35,"slug":79,"text":80},[],[],{"title":159,"description":197,"navLabel":159,"order":35,"type":145,"category":158},[],"color.md","contributing",["Map",140,244],{"id":140,"data":245,"body":248,"filePath":249,"digest":250,"rendered":251,"legacyId":194},{"title":246,"description":247,"navLabel":246,"order":92,"type":242},"Contributing","Guidelines for contributing to the Azion Design System.","# Contributing\n\nThank you for your interest in contributing to the Azion Design System! This guide will help you understand how to contribute effectively.\n\n## Ways to Contribute\n\n### Report Issues\nFound a bug or have a suggestion? Open an issue on our GitHub repository.\n\n### Submit Pull Requests\nFix a bug or add a feature by submitting a pull request.\n\n### Improve Documentation\nHelp us improve our documentation by fixing typos, adding examples, or clarifying explanations.\n\n## Development Setup\n\n1. Fork and clone the repository\n2. Install dependencies: `pnpm install`\n3. Start the development server: `pnpm docs:dev`\n\n## Coding Standards\n\n### Code Style\n- Follow the existing code style\n- Use TypeScript for all new code\n- Write meaningful commit messages\n\n### Component Development\n- Follow the component API conventions\n- Include accessibility features\n- Write unit tests for new components\n\n### Documentation\n- Write clear, concise documentation\n- Include code examples\n- Update the changelog\n\n## Pull Request Process\n\n1. Create a feature branch from `main`\n2. Make your changes\n3. Run tests: `pnpm test`\n4. Submit a pull request with a clear description\n\n## Code of Conduct\n\nPlease read and follow our [Code of Conduct](https://github.com/aziontech/webkit/blob/main/CODE_OF_CONDUCT.md).\n\n## Need Help?\n\n- Open a discussion on GitHub\n- Join our community chat\n- Email us at design-system@azion.com\n\n## Related\n\n- [Installation](/get-started/installation) - Get started with the design system","src/content/contributing/index.md","2489a445c8aac7c2",{"html":252,"metadata":253},"\u003Ch1 id=\"contributing\">Contributing\u003C/h1>\n\u003Cp>Thank you for your interest in contributing to the Azion Design System! This guide will help you understand how to contribute effectively.\u003C/p>\n\u003Ch2 id=\"ways-to-contribute\">Ways to Contribute\u003C/h2>\n\u003Ch3 id=\"report-issues\">Report Issues\u003C/h3>\n\u003Cp>Found a bug or have a suggestion? Open an issue on our GitHub repository.\u003C/p>\n\u003Ch3 id=\"submit-pull-requests\">Submit Pull Requests\u003C/h3>\n\u003Cp>Fix a bug or add a feature by submitting a pull request.\u003C/p>\n\u003Ch3 id=\"improve-documentation\">Improve Documentation\u003C/h3>\n\u003Cp>Help us improve our documentation by fixing typos, adding examples, or clarifying explanations.\u003C/p>\n\u003Ch2 id=\"development-setup\">Development Setup\u003C/h2>\n\u003Col>\n\u003Cli>Fork and clone the repository\u003C/li>\n\u003Cli>Install dependencies: \u003Ccode>pnpm install\u003C/code>\u003C/li>\n\u003Cli>Start the development server: \u003Ccode>pnpm docs:dev\u003C/code>\u003C/li>\n\u003C/ol>\n\u003Ch2 id=\"coding-standards\">Coding Standards\u003C/h2>\n\u003Ch3 id=\"code-style\">Code Style\u003C/h3>\n\u003Cul>\n\u003Cli>Follow the existing code style\u003C/li>\n\u003Cli>Use TypeScript for all new code\u003C/li>\n\u003Cli>Write meaningful commit messages\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"component-development\">Component Development\u003C/h3>\n\u003Cul>\n\u003Cli>Follow the component API conventions\u003C/li>\n\u003Cli>Include accessibility features\u003C/li>\n\u003Cli>Write unit tests for new components\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"documentation\">Documentation\u003C/h3>\n\u003Cul>\n\u003Cli>Write clear, concise documentation\u003C/li>\n\u003Cli>Include code examples\u003C/li>\n\u003Cli>Update the changelog\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"pull-request-process\">Pull Request Process\u003C/h2>\n\u003Col>\n\u003Cli>Create a feature branch from \u003Ccode>main\u003C/code>\u003C/li>\n\u003Cli>Make your changes\u003C/li>\n\u003Cli>Run tests: \u003Ccode>pnpm test\u003C/code>\u003C/li>\n\u003Cli>Submit a pull request with a clear description\u003C/li>\n\u003C/ol>\n\u003Ch2 id=\"code-of-conduct\">Code of Conduct\u003C/h2>\n\u003Cp>Please read and follow our \u003Ca href=\"https://github.com/aziontech/webkit/blob/main/CODE_OF_CONDUCT.md\">Code of Conduct\u003C/a>.\u003C/p>\n\u003Ch2 id=\"need-help\">Need Help?\u003C/h2>\n\u003Cul>\n\u003Cli>Open a discussion on GitHub\u003C/li>\n\u003Cli>Join our community chat\u003C/li>\n\u003Cli>Email us at \u003Ca href=\"mailto:design-system@azion.com\">design-system@azion.com\u003C/a>\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"related\">Related\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/get-started/installation\">Installation\u003C/a> - Get started with the design system\u003C/li>\n\u003C/ul>",{"headings":254,"localImagePaths":293,"remoteImagePaths":294,"frontmatter":295,"imagePaths":296},[255,256,259,262,265,268,271,274,277,280,283,286,289,292],{"depth":92,"slug":242,"text":246},{"depth":35,"slug":257,"text":258},"ways-to-contribute","Ways to Contribute",{"depth":45,"slug":260,"text":261},"report-issues","Report Issues",{"depth":45,"slug":263,"text":264},"submit-pull-requests","Submit Pull Requests",{"depth":45,"slug":266,"text":267},"improve-documentation","Improve Documentation",{"depth":35,"slug":269,"text":270},"development-setup","Development Setup",{"depth":35,"slug":272,"text":273},"coding-standards","Coding Standards",{"depth":45,"slug":275,"text":276},"code-style","Code Style",{"depth":45,"slug":278,"text":279},"component-development","Component Development",{"depth":45,"slug":281,"text":282},"documentation","Documentation",{"depth":35,"slug":284,"text":285},"pull-request-process","Pull Request Process",{"depth":35,"slug":287,"text":288},"code-of-conduct","Code of Conduct",{"depth":35,"slug":290,"text":291},"need-help","Need Help?",{"depth":35,"slug":79,"text":80},[],[],{"title":246,"description":247,"navLabel":246,"order":92,"type":242},[],"get-started",["Map",299,300,140,331],"installation",{"id":299,"data":301,"body":305,"filePath":306,"digest":307,"rendered":308,"legacyId":330},{"title":302,"description":303,"navLabel":302,"order":35,"category":299,"type":304},"Installation","Get started with the Azion Design System by installing the required packages.","guide","# Installation\n\nThe Azion Design System is distributed as a set of npm packages. Install only what you need for your project.\n\n## Requirements\n\n- Node.js 18.x or higher\n- Vue 3.x\n- Tailwind CSS 3.x\n\n## Package Installation\n\nInstall the core packages you need:\n\n```bash\n# Install components\nnpm install @aziontech/components\n\n# Install icons\nnpm install @aziontech/icons\n\n# Install theme (optional, for design tokens)\nnpm install @aziontech/theme\n```\n\n## Tailwind Configuration\n\nExtend your Tailwind configuration to include Azion's design tokens:\n\n```js\n// tailwind.config.js\nimport azionTheme from '@aziontech/theme';\n\nexport default {\n content: [\n './src/**/*.{vue,js,ts}',\n './node_modules/@aziontech/**/*.{vue,js,ts}',\n ],\n theme: {\n extend: azionTheme.tailwindPreset,\n },\n};\n```\n\n## Vue Configuration\n\nImport the CSS and register the components:\n\n```js\n// main.js\nimport { createApp } from 'vue';\nimport App from './App.vue';\n\n// Import Azion CSS\nimport '@aziontech/theme/css';\n\n// Import Azion components (optional)\nimport { Button, Input, Select } from '@aziontech/components';\n\nconst app = createApp(App);\n\n// Register components globally\napp.component('AzButton', Button);\napp.component('AzInput', Input);\napp.component('AzSelect', Select);\n\napp.mount('#app');\n```\n\n## Next Steps\n\n- [Quick Start](/get-started) - Build your first component\n- [Components](/components) - Explore available components\n- [Foundations](/foundations) - Learn about design principles","src/content/get-started/installation.md","7ccd4afb55dff6a3",{"html":309,"metadata":310},"\u003Ch1 id=\"installation\">Installation\u003C/h1>\n\u003Cp>The Azion Design System is distributed as a set of npm packages. Install only what you need for your project.\u003C/p>\n\u003Ch2 id=\"requirements\">Requirements\u003C/h2>\n\u003Cul>\n\u003Cli>Node.js 18.x or higher\u003C/li>\n\u003Cli>Vue 3.x\u003C/li>\n\u003Cli>Tailwind CSS 3.x\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"package-installation\">Package Installation\u003C/h2>\n\u003Cp>Install the core packages you need:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"># Install components\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> install\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/components\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"># Install icons\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> install\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/icons\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"># Install theme (optional, for design tokens)\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> install\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/theme\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"tailwind-configuration\">Tailwind Configuration\u003C/h2>\n\u003Cp>Extend your Tailwind configuration to include Azion’s design tokens:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"js\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">// tailwind.config.js\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> azionTheme \u003C/span>\u003Cspan style=\"color:#F97583\">from\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> '@aziontech/theme'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">export\u003C/span>\u003Cspan style=\"color:#F97583\"> default\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> content: [\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\"> './src/**/*.{vue,js,ts}'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\"> './node_modules/@aziontech/**/*.{vue,js,ts}'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> ],\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> theme: {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> extend: azionTheme.tailwindPreset,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> },\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">};\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"vue-configuration\">Vue Configuration\u003C/h2>\n\u003Cp>Import the CSS and register the components:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"js\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">// main.js\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> { createApp } \u003C/span>\u003Cspan style=\"color:#F97583\">from\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> 'vue'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> App \u003C/span>\u003Cspan style=\"color:#F97583\">from\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> './App.vue'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">// Import Azion CSS\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> '@aziontech/theme/css'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">// Import Azion components (optional)\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> { Button, Input, Select } \u003C/span>\u003Cspan style=\"color:#F97583\">from\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> '@aziontech/components'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">const\u003C/span>\u003Cspan style=\"color:#79B8FF\"> app\u003C/span>\u003Cspan style=\"color:#F97583\"> =\u003C/span>\u003Cspan style=\"color:#B392F0\"> createApp\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(App);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">// Register components globally\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">app.\u003C/span>\u003Cspan style=\"color:#B392F0\">component\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#9ECBFF\">'AzButton'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, Button);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">app.\u003C/span>\u003Cspan style=\"color:#B392F0\">component\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#9ECBFF\">'AzInput'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, Input);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">app.\u003C/span>\u003Cspan style=\"color:#B392F0\">component\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#9ECBFF\">'AzSelect'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, Select);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">app.\u003C/span>\u003Cspan style=\"color:#B392F0\">mount\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#9ECBFF\">'#app'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">);\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"next-steps\">Next Steps\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/get-started\">Quick Start\u003C/a> - Build your first component\u003C/li>\n\u003Cli>\u003Ca href=\"/components\">Components\u003C/a> - Explore available components\u003C/li>\n\u003Cli>\u003Ca href=\"/foundations\">Foundations\u003C/a> - Learn about design principles\u003C/li>\n\u003C/ul>",{"headings":311,"localImagePaths":326,"remoteImagePaths":327,"frontmatter":328,"imagePaths":329},[312,313,316,319,322,325],{"depth":92,"slug":299,"text":302},{"depth":35,"slug":314,"text":315},"requirements","Requirements",{"depth":35,"slug":317,"text":318},"package-installation","Package Installation",{"depth":35,"slug":320,"text":321},"tailwind-configuration","Tailwind Configuration",{"depth":35,"slug":323,"text":324},"vue-configuration","Vue Configuration",{"depth":35,"slug":188,"text":189},[],[],{"title":302,"description":303,"navLabel":302,"order":35,"type":304,"category":299},[],"installation.md",{"id":140,"data":332,"body":335,"filePath":336,"digest":337,"rendered":338,"legacyId":194},{"title":333,"description":334,"type":304},"Get Started","Get started with the Azion Design System","## Welcome\n\nWelcome to the Azion Design System documentation. This guide will help you get started with using our components and design tokens in your projects.\n\n## Installation\n\nInstall the design system packages using your preferred package manager:\n\n```bash\nnpm install @aziontech/components @aziontech/icons @aziontech/theme\n```\n\n## Quick Start\n\n1. Import the CSS in your main entry file:\n\n```javascript\nimport '@aziontech/theme/styles.css';\n```\n\n2. Import and use components:\n\n```vue\n\u003Cscript setup>\nimport { Button, Input } from '@aziontech/components';\n\u003C/script>\n\n\u003Ctemplate>\n \u003CButton variant=\"primary\">Click me\u003C/Button>\n\u003C/template>\n```\n\n## Next Steps\n\n- Explore our [Components](/components) library\n- Learn about our [Foundations](/foundations) and design principles\n- Browse our [Icons](/icons) collection","src/content/get-started/index.md","62e783fea506da23",{"html":339,"metadata":340},"\u003Ch2 id=\"welcome\">Welcome\u003C/h2>\n\u003Cp>Welcome to the Azion Design System documentation. This guide will help you get started with using our components and design tokens in your projects.\u003C/p>\n\u003Ch2 id=\"installation\">Installation\u003C/h2>\n\u003Cp>Install the design system packages using your preferred package manager:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> install\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/components\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/icons\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/theme\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"quick-start\">Quick Start\u003C/h2>\n\u003Col>\n\u003Cli>Import the CSS in your main entry file:\u003C/li>\n\u003C/ol>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"javascript\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> '@aziontech/theme/styles.css'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Col start=\"2\">\n\u003Cli>Import and use components:\u003C/li>\n\u003C/ol>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"vue\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">script\u003C/span>\u003Cspan style=\"color:#B392F0\"> setup\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> { Button, Input } \u003C/span>\u003Cspan style=\"color:#F97583\">from\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> '@aziontech/components'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"></\u003C/span>\u003Cspan style=\"color:#85E89D\">script\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">template\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> <\u003C/span>\u003Cspan style=\"color:#85E89D\">Button\u003C/span>\u003Cspan style=\"color:#B392F0\"> variant\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"primary\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>Click me</\u003C/span>\u003Cspan style=\"color:#85E89D\">Button\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"></\u003C/span>\u003Cspan style=\"color:#85E89D\">template\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"next-steps\">Next Steps\u003C/h2>\n\u003Cul>\n\u003Cli>Explore our \u003Ca href=\"/components\">Components\u003C/a> library\u003C/li>\n\u003Cli>Learn about our \u003Ca href=\"/foundations\">Foundations\u003C/a> and design principles\u003C/li>\n\u003Cli>Browse our \u003Ca href=\"/icons\">Icons\u003C/a> collection\u003C/li>\n\u003C/ul>",{"headings":341,"localImagePaths":350,"remoteImagePaths":351,"frontmatter":352,"imagePaths":353},[342,345,346,349],{"depth":35,"slug":343,"text":344},"welcome","Welcome",{"depth":35,"slug":299,"text":302},{"depth":35,"slug":347,"text":348},"quick-start","Quick Start",{"depth":35,"slug":188,"text":189},[],[],{"title":333,"description":334,"type":304},[],"icons",["Map",140,356],{"id":140,"data":357,"body":361,"filePath":362,"digest":363,"rendered":364,"legacyId":194},{"title":358,"description":359,"navLabel":358,"order":92,"type":360},"Icons","Icon library with Azion Icons and PrimeIcons for use in your applications.","icon","# Icons\n\nThe Azion Design System includes two icon libraries:\n\n- **Azion Icons** - Custom icons designed for Azion products\n- **PrimeIcons** - General purpose icon library from PrimeVue\n\n## Installation\n\nIcons are included in the `@aziontech/icons` package:\n\n```bash\nnpm install @aziontech/icons\n```\n\n## Usage\n\n### Font Icons\n\nUse icons as font icons with the appropriate class:\n\n```html\n\u003C!-- Azion Icon -->\n\u003Ci class=\"ai ai-azion\">\u003C/i>\n\n\u003C!-- PrimeIcon -->\n\u003Ci class=\"pi pi-home\">\u003C/i>\n```\n\n### SVG Icons\n\nImport SVG icons directly for more control:\n\n```js\nimport { aiAzion, piHome } from '@aziontech/icons/svg';\n```\n\n## Icon Categories\n\n### Azion Icons\n\nAzion Icons are organized into categories:\n\n- **Product Icons** - Azion product and service icons\n- **Action Icons** - Common action icons\n- **Status Icons** - Status and notification icons\n\n### PrimeIcons\n\nPrimeIcons provide a comprehensive set of general-purpose icons suitable for most UI needs.\n\n## Sizing\n\nIcons inherit their size from the font size of their container:\n\n```html\n\u003C!-- Small -->\n\u003Ci class=\"ai ai-azion text-sm\">\u003C/i>\n\n\u003C!-- Medium (default) -->\n\u003Ci class=\"ai ai-azion text-base\">\u003C/i>\n\n\u003C!-- Large -->\n\u003Ci class=\"ai ai-azion text-2xl\">\u003C/i>\n```\n\n## Accessibility\n\nWhen using icons alone, provide accessible labels:\n\n```html\n\u003C!-- Icon button with label -->\n\u003Cbutton aria-label=\"Settings\">\n \u003Ci class=\"pi pi-cog\">\u003C/i>\n\u003C/button>\n\n\u003C!-- Decorative icon (hidden from screen readers) -->\n\u003Ci class=\"pi pi-star\" aria-hidden=\"true\">\u003C/i>\n```\n\n## Related\n\n- [Button](/components/button) - Button component with icon support","src/content/icons/index.md","aea3324aedf050df",{"html":365,"metadata":366},"\u003Ch1 id=\"icons\">Icons\u003C/h1>\n\u003Cp>The Azion Design System includes two icon libraries:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Azion Icons\u003C/strong> - Custom icons designed for Azion products\u003C/li>\n\u003Cli>\u003Cstrong>PrimeIcons\u003C/strong> - General purpose icon library from PrimeVue\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"installation\">Installation\u003C/h2>\n\u003Cp>Icons are included in the \u003Ccode>@aziontech/icons\u003C/code> package:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> install\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/icons\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"usage\">Usage\u003C/h2>\n\u003Ch3 id=\"font-icons\">Font Icons\u003C/h3>\n\u003Cp>Use icons as font icons with the appropriate class:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"html\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"><!-- Azion Icon -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"ai ai-azion\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">></\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"><!-- PrimeIcon -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"pi pi-home\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">></\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch3 id=\"svg-icons\">SVG Icons\u003C/h3>\n\u003Cp>Import SVG icons directly for more control:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"js\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> { aiAzion, piHome } \u003C/span>\u003Cspan style=\"color:#F97583\">from\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> '@aziontech/icons/svg'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"icon-categories\">Icon Categories\u003C/h2>\n\u003Ch3 id=\"azion-icons\">Azion Icons\u003C/h3>\n\u003Cp>Azion Icons are organized into categories:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Product Icons\u003C/strong> - Azion product and service icons\u003C/li>\n\u003Cli>\u003Cstrong>Action Icons\u003C/strong> - Common action icons\u003C/li>\n\u003Cli>\u003Cstrong>Status Icons\u003C/strong> - Status and notification icons\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"primeicons\">PrimeIcons\u003C/h3>\n\u003Cp>PrimeIcons provide a comprehensive set of general-purpose icons suitable for most UI needs.\u003C/p>\n\u003Ch2 id=\"sizing\">Sizing\u003C/h2>\n\u003Cp>Icons inherit their size from the font size of their container:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"html\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"><!-- Small -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"ai ai-azion text-sm\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">></\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"><!-- Medium (default) -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"ai ai-azion text-base\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">></\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"><!-- Large -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"ai ai-azion text-2xl\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">></\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"accessibility\">Accessibility\u003C/h2>\n\u003Cp>When using icons alone, provide accessible labels:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"html\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"><!-- Icon button with label -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">button\u003C/span>\u003Cspan style=\"color:#B392F0\"> aria-label\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"Settings\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> <\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"pi pi-cog\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">></\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"></\u003C/span>\u003Cspan style=\"color:#85E89D\">button\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"><!-- Decorative icon (hidden from screen readers) -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"pi pi-star\"\u003C/span>\u003Cspan style=\"color:#B392F0\"> aria-hidden\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"true\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">></\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"related\">Related\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/components/button\">Button\u003C/a> - Button component with icon support\u003C/li>\n\u003C/ul>",{"headings":367,"localImagePaths":393,"remoteImagePaths":394,"frontmatter":395,"imagePaths":396},[368,369,370,373,376,379,382,385,388,391,392],{"depth":92,"slug":354,"text":358},{"depth":35,"slug":299,"text":302},{"depth":35,"slug":371,"text":372},"usage","Usage",{"depth":45,"slug":374,"text":375},"font-icons","Font Icons",{"depth":45,"slug":377,"text":378},"svg-icons","SVG Icons",{"depth":35,"slug":380,"text":381},"icon-categories","Icon Categories",{"depth":45,"slug":383,"text":384},"azion-icons","Azion Icons",{"depth":45,"slug":386,"text":387},"primeicons","PrimeIcons",{"depth":35,"slug":389,"text":390},"sizing","Sizing",{"depth":35,"slug":55,"text":56},{"depth":35,"slug":79,"text":80},[],[],{"title":358,"description":359,"navLabel":358,"order":92,"type":360},[]] \ No newline at end of file diff --git a/apps/ds-docs/.astro/types.d.ts b/apps/ds-docs/.astro/types.d.ts new file mode 100644 index 00000000..03d7cc43 --- /dev/null +++ b/apps/ds-docs/.astro/types.d.ts @@ -0,0 +1,2 @@ +/// +/// \ No newline at end of file diff --git a/apps/ds-docs/README.md b/apps/ds-docs/README.md new file mode 100644 index 00000000..37777c8e --- /dev/null +++ b/apps/ds-docs/README.md @@ -0,0 +1,266 @@ +# Azion Design System Documentation Platform + +A product-grade documentation platform for the Azion Design System, built with Astro and Vue. + +## Overview + +This documentation platform serves as the central hub for the Azion Design System, providing: + +- **Component Documentation**: Comprehensive docs for all Vue components +- **Design Foundations**: Principles, tokens, and guidelines +- **Interactive Demos**: Live component previews with code examples +- **Accessibility Guidelines**: WCAG compliance information + +## Tech Stack + +- **[Astro](https://astro.build/)**: Static site generator with Islands architecture +- **[Vue 3](https://vuejs.org/)**: Interactive components via Astro integration +- **[Tailwind CSS](https://tailwindcss.com/)**: Utility-first styling + +## Architecture + +### Key Decisions + +1. **Astro without Starlight**: We built a custom documentation platform instead of using Starlight to have full control over layout, behavior, and custom components. + +2. **Islands Architecture**: Vue components are hydrated selectively using Astro's Islands pattern: + - `client:load` for immediately interactive components + - `client:visible` for below-fold content + - `client:only` for heavy interactive features + +3. **Content Collections**: All documentation content is managed through Astro's Content Collections with Zod schema validation. + +4. **Monorepo Integration**: The docs app consumes Design System packages via workspace protocol (`workspace:*`). + +### Directory Structure + +``` +apps/docs/ +├── src/ +│ ├── components/ +│ │ └── docs/ # Documentation UI components +│ │ ├── PageHeader.vue +│ │ ├── StatusBadge.vue +│ │ ├── MetadataLinks.vue +│ │ ├── DemoPreview.vue +│ │ └── CodeBlock.astro +│ │ +│ ├── content/ # Markdown content +│ │ ├── config.ts # Content collection schemas +│ │ ├── components/ # Component documentation +│ │ └── get-started/ # Getting started guides +│ │ +│ ├── layouts/ +│ │ ├── DocsLayout.astro # Base layout +│ │ └── ComponentPage.astro # Component page template +│ │ +│ ├── pages/ +│ │ ├── index.astro # Homepage +│ │ ├── components/ # Component routes +│ │ └── get-started/ # Guide routes +│ │ +│ ├── lib/ # Utility functions +│ │ └── content.ts +│ │ +│ └── styles/ +│ └── global.css # Global styles +│ +├── public/ # Static assets +├── astro.config.mjs # Astro configuration +├── tailwind.config.mjs # Tailwind configuration +└── package.json +``` + +## Getting Started + +### Prerequisites + +- Node.js 18+ +- pnpm 8+ + +### Installation + +```bash +# From the monorepo root +pnpm install +``` + +### Development + +```bash +# Start development server +pnpm docs:dev + +# Or from this directory +pnpm dev +``` + +### Build + +```bash +# Build for production +pnpm docs:build + +# Preview production build +pnpm docs:preview +``` + +## Content Authoring + +### Creating a Component Page + +1. Create a new markdown file in `src/content/components/`: + +```markdown +--- +title: ComponentName +description: Brief description of the component. +type: component +category: form +status: stable +since: 1.0.0 +figma: https://figma.com/... +storybook: https://storybook.azion.com/... +source: https://github.com/aziontech/webkit/... +--- + +## Overview + +Description of the component... + +## Examples + + + + + +## API + +### Props + +| Prop | Type | Default | Description | +|------|------|---------|-------------| +| `propName` | `string` | - | Description | +``` + +2. The page will automatically be available at `/components/[slug]`. + +### Frontmatter Schema + +All component pages require: + +```yaml +title: string # Component name +description: string # Brief description +type: component # Page type +category: string # Component category +``` + +Optional fields: + +```yaml +status: stable | beta | deprecated | planned | experimental +since: string # Version introduced +figma: string # Figma link +storybook: string # Storybook link +source: string # Source code link +related: string[] # Related components +``` + +## Documentation Components + +### PageHeader + +Displays page title, status, and metadata links. + +```astro + +``` + +### DemoPreview + +Renders component demos with optional code display. + +```markdown + + + +``` + +### StatusBadge + +Shows component status with appropriate styling. + +```astro + +``` + +### CodeBlock + +Syntax-highlighted code with copy functionality. + +```astro + +``` + +## Integration with Design System Packages + +The docs app is prepared to consume Design System packages: + +```json +{ + "dependencies": { + "@aziontech/icons": "workspace:*", + "@aziontech/components": "workspace:*", + "@aziontech/theme": "workspace:*" + } +} +``` + +Currently, only `@aziontech/icons` is available. When other packages are ready: + +1. Import components in markdown: + +```markdown +--- +title: Button +--- + +import { Button } from '@aziontech/components'; + + + + +``` + +2. Use theme tokens in Tailwind config: + +```javascript +import tokens from '@aziontech/theme/tokens'; +``` + +## Future Features + +The following features are planned but not yet implemented: + +- **Versioning**: Support for multiple documentation versions +- **i18n**: Multilingual support (English, Portuguese) +- **Search**: Custom search engine with MiniSearch +- **Playground**: Interactive component playground + +See the [Architecture Document](../../plans/ds-docs-architecture.md) for the complete roadmap. + +## Contributing + +See [CONTRIBUTING.md](../../CONTRIBUTING.md) for contribution guidelines. + +## License + +MIT License - see [LICENSE](../../LICENSE) for details. diff --git a/apps/ds-docs/astro.config.mjs b/apps/ds-docs/astro.config.mjs new file mode 100644 index 00000000..b9771403 --- /dev/null +++ b/apps/ds-docs/astro.config.mjs @@ -0,0 +1,44 @@ +import { defineConfig } from 'astro/config'; +import vue from '@astrojs/vue'; +import tailwind from '@astrojs/tailwind'; + +// https://astro.build/config +export default defineConfig({ + integrations: [ + vue(), + tailwind({ + applyBaseStyles: false, + }), + ], + + // Site configuration + site: 'https://docs.azion.com', + + // Path aliases for clean imports + vite: { + resolve: { + alias: { + '@': '/src', + '@components': '/src/components', + '@layouts': '/src/layouts', + '@lib': '/src/lib', + }, + }, + }, + + // Markdown configuration + markdown: { + shikiConfig: { + theme: 'github-dark', + wrap: true, + }, + }, + + // Output configuration + output: 'static', + + // Build configuration + build: { + inlineStylesheets: 'auto', + }, +}); diff --git a/apps/ds-docs/package.json b/apps/ds-docs/package.json new file mode 100644 index 00000000..4e1163cd --- /dev/null +++ b/apps/ds-docs/package.json @@ -0,0 +1,27 @@ +{ + "name": "ds-docs", + "type": "module", + "version": "0.0.1", + "private": true, + "description": "Azion Design System Documentation Platform", + "scripts": { + "dev": "astro dev", + "start": "astro dev", + "build": "astro build", + "preview": "astro preview", + "astro": "astro" + }, + "dependencies": { + "@aziontech/icons": "workspace:*", + "astro": "^5.4.0", + "vue": "^3.5.29" + }, + "devDependencies": { + "@astrojs/tailwind": "^6.0.2", + "@astrojs/vue": "^5.0.6", + "@tailwindcss/typography": "^0.5.19", + "autoprefixer": "^10.4.27", + "tailwindcss": "^3.4.19", + "typescript": "^5.7.2" + } +} diff --git a/apps/ds-docs/postcss.config.mjs b/apps/ds-docs/postcss.config.mjs new file mode 100644 index 00000000..2aa7205d --- /dev/null +++ b/apps/ds-docs/postcss.config.mjs @@ -0,0 +1,6 @@ +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/apps/ds-docs/public/favicon.svg b/apps/ds-docs/public/favicon.svg new file mode 100644 index 00000000..a738fade --- /dev/null +++ b/apps/ds-docs/public/favicon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/ds-docs/src/components/docs/CodeBlock.astro b/apps/ds-docs/src/components/docs/CodeBlock.astro new file mode 100644 index 00000000..f611ec0b --- /dev/null +++ b/apps/ds-docs/src/components/docs/CodeBlock.astro @@ -0,0 +1,90 @@ +--- +/** + * CodeBlock Component (Astro) + * + * Displays syntax-highlighted code with copy functionality. + * Uses Shiki for syntax highlighting via Astro's built-in support. + */ + +interface Props { + code: string; + language?: string; + filename?: string; + showCopy?: boolean; + showLineNumbers?: boolean; +} + +const { + code, + language = 'vue', + filename, + showCopy = true, + showLineNumbers = false, +} = Astro.props; + +// Count lines for line numbers +const lines = code.split('\n'); +const lineCount = lines.length; +--- + +
+ +
+ {filename && ( + {filename} + )} + {!filename && ( + {language} + )} + {showCopy && ( + + )} +
+ + +
+
+ + {showLineNumbers && ( +
+ {lines.map((_, i) => ( +
{i + 1}
+ ))} +
+ )} + + +
+
+
+
+ + diff --git a/apps/ds-docs/src/components/docs/DemoPreview.vue b/apps/ds-docs/src/components/docs/DemoPreview.vue new file mode 100644 index 00000000..7c287597 --- /dev/null +++ b/apps/ds-docs/src/components/docs/DemoPreview.vue @@ -0,0 +1,94 @@ + + + + + diff --git a/apps/ds-docs/src/components/docs/DocsHeader.vue b/apps/ds-docs/src/components/docs/DocsHeader.vue new file mode 100644 index 00000000..4a17b003 --- /dev/null +++ b/apps/ds-docs/src/components/docs/DocsHeader.vue @@ -0,0 +1,80 @@ + + + diff --git a/apps/ds-docs/src/components/docs/DocsSidebar.vue b/apps/ds-docs/src/components/docs/DocsSidebar.vue new file mode 100644 index 00000000..c916e5fd --- /dev/null +++ b/apps/ds-docs/src/components/docs/DocsSidebar.vue @@ -0,0 +1,66 @@ + + + + + diff --git a/apps/ds-docs/src/components/docs/DocsSidebarItem.vue b/apps/ds-docs/src/components/docs/DocsSidebarItem.vue new file mode 100644 index 00000000..b061207e --- /dev/null +++ b/apps/ds-docs/src/components/docs/DocsSidebarItem.vue @@ -0,0 +1,45 @@ + + + + + diff --git a/apps/ds-docs/src/components/docs/DocsSidebarSection.vue b/apps/ds-docs/src/components/docs/DocsSidebarSection.vue new file mode 100644 index 00000000..fdb7c901 --- /dev/null +++ b/apps/ds-docs/src/components/docs/DocsSidebarSection.vue @@ -0,0 +1,59 @@ + + + + + diff --git a/apps/ds-docs/src/components/docs/MetadataLinks.vue b/apps/ds-docs/src/components/docs/MetadataLinks.vue new file mode 100644 index 00000000..aa65b709 --- /dev/null +++ b/apps/ds-docs/src/components/docs/MetadataLinks.vue @@ -0,0 +1,53 @@ + + + diff --git a/apps/ds-docs/src/components/docs/PageHeader.vue b/apps/ds-docs/src/components/docs/PageHeader.vue new file mode 100644 index 00000000..4f39ac09 --- /dev/null +++ b/apps/ds-docs/src/components/docs/PageHeader.vue @@ -0,0 +1,58 @@ + + + + + diff --git a/apps/ds-docs/src/components/docs/StatusBadge.vue b/apps/ds-docs/src/components/docs/StatusBadge.vue new file mode 100644 index 00000000..cc10511b --- /dev/null +++ b/apps/ds-docs/src/components/docs/StatusBadge.vue @@ -0,0 +1,58 @@ + + + diff --git a/apps/ds-docs/src/components/docs/index.ts b/apps/ds-docs/src/components/docs/index.ts new file mode 100644 index 00000000..6cd38082 --- /dev/null +++ b/apps/ds-docs/src/components/docs/index.ts @@ -0,0 +1,33 @@ +/** + * Documentation Components + * + * Barrel export for all documentation-specific components. + */ + +// Page structure +export { default as PageHeader } from './PageHeader.vue'; +export { default as StatusBadge } from './StatusBadge.vue'; +export { default as MetadataLinks } from './MetadataLinks.vue'; + +// Navigation +export { default as DocsSidebar } from './DocsSidebar.vue'; +export { default as DocsSidebarSection } from './DocsSidebarSection.vue'; +export { default as DocsSidebarItem } from './DocsSidebarItem.vue'; +export { default as DocsHeader } from './DocsHeader.vue'; + +// Content display +export { default as DemoPreview } from './DemoPreview.vue'; +// Note: CodeBlock.astro is imported directly in Astro files + +/** + * Components map for markdown rendering + * + * Use this with Astro's Content component: + * + */ +import DemoPreview from './DemoPreview.vue'; + +export const markdownComponents = { + DemoPreview, + // Add more components as needed +}; diff --git a/apps/ds-docs/src/content/components/button.md b/apps/ds-docs/src/content/components/button.md new file mode 100644 index 00000000..2b57a5bd --- /dev/null +++ b/apps/ds-docs/src/content/components/button.md @@ -0,0 +1,117 @@ +--- +title: Button +description: Buttons trigger actions and events when users interact with them. +navLabel: Button +order: 1 +type: component +category: form +status: stable +component: Button +source: https://github.com/aziontech/webkit/tree/main/packages/components/src/Button +storybook: https://storybook.azion.com/components/button +figma: https://figma.com/file/azion-design-system/components/button +related: + - Input + - Select +--- + +# Button + +Buttons are interactive elements that trigger actions when clicked or tapped. They communicate actions that users can take and are typically placed throughout your UI. + +## When to Use + +Use buttons to: +- Trigger primary actions (Submit, Save, Continue) +- Navigate to different views or pages +- Toggle states or settings +- Trigger secondary actions (Cancel, Delete) + +## Anatomy + +A button consists of: +1. **Container** - The clickable area with background styling +2. **Label** - Text describing the action +3. **Icon** (optional) - Visual indicator before or after the label + +## Examples + +### Primary Button + +Use for the main action in a context. + + + + + +### Secondary Button + +Use for secondary or alternative actions. + + + + + +### Destructive Button + +Use for destructive or irreversible actions. + + + + + +## States + +Buttons have the following states: +- **Default** - The normal resting state +- **Hover** - When the cursor is over the button +- **Focus** - When the button has keyboard focus +- **Active** - When the button is being pressed +- **Disabled** - When the button is not interactive + +## Accessibility + +### Keyboard Interaction +- **Tab**: Moves focus to the button +- **Enter/Space**: Activates the button when focused + +### ARIA Attributes +- Use `aria-disabled="true"` for disabled buttons that should be announced +- Use `aria-label` for icon-only buttons + +## API + +### Props + +| Prop | Type | Default | Description | +|------|------|---------|-------------| +| `variant` | `'primary' \| 'secondary' \| 'destructive'` | `'primary'` | Visual style variant | +| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Button size | +| `disabled` | `boolean` | `false` | Whether the button is disabled | +| `loading` | `boolean` | `false` | Shows loading spinner | +| `icon` | `string` | - | Icon name to display | + +### Slots + +| Slot | Description | +|------|-------------| +| `default` | Button label content | +| `icon-left` | Icon before the label | +| `icon-right` | Icon after the label | + +### Events + +| Event | Payload | Description | +|-------|---------|-------------| +| `click` | `MouseEvent` | Fired when button is clicked | + +## Related + +- [Input](/components/input) - Text input component +- [Select](/components/select) - Select dropdown component diff --git a/apps/ds-docs/src/content/components/fieldset.md b/apps/ds-docs/src/content/components/fieldset.md new file mode 100644 index 00000000..784a29b0 --- /dev/null +++ b/apps/ds-docs/src/content/components/fieldset.md @@ -0,0 +1,144 @@ +--- +title: Fieldset +description: Group related form inputs under a shared label for better organization and accessibility. +type: component +category: form +status: stable +since: 1.0.0 +figma: https://figma.com/file/azion-design-system?node-id=fieldset +storybook: https://storybook.azion.com/?path=/story/form-fieldset +source: https://github.com/aziontech/webkit/tree/main/packages/components/src/Fieldset +related: + - Form + - Input + - Select +--- + +## Overview + +The Fieldset component provides a way to group related form controls together. It renders a native HTML `
` element with proper accessibility features, including an associated `` for the group label. + +Fieldsets are essential for creating accessible forms, as they help screen reader users understand the relationship between form controls. + +## When to Use + +Use Fieldset when you need to: + +- Group related form inputs (e.g., address fields, contact information) +- Create logical sections within a larger form +- Improve form accessibility with proper semantic structure +- Apply a shared label or description to multiple inputs + +## Examples + +### Basic Fieldset + + +
+ Personal Information +
+
+ + +
+
+ + +
+
+
+ + +### Address Grouping + + +
+ Shipping Address +
+
+ + +
+
+
+ + +
+
+ + +
+
+
+
+ + +### Disabled State + + +
+ Disabled Group +
+
+ + +
+
+ + +
+
+
+ + +## Accessibility + +### Keyboard Navigation + +| Keys | Action | +|------|--------| +| Tab | Moves focus to the first focusable element within the fieldset | + +### ARIA Attributes + +The Fieldset component uses native HTML elements that provide built-in accessibility: + +- `
` - Groups related form controls +- `` - Provides the accessible name for the group + +No additional ARIA attributes are required when using the native elements correctly. + +### Best Practices + +1. **Always include a legend**: The `` element is required for accessibility +2. **Use for related inputs**: Only group inputs that are logically related +3. **Avoid nested fieldsets**: Deeply nested fieldsets can be confusing for screen reader users +4. **Consider visual grouping**: Use styling to visually reinforce the grouping + +## API + +### Props + +| Prop | Type | Default | Description | +|------|------|---------|-------------| +| `legend` | `string` | - | The text for the fieldset legend | +| `disabled` | `boolean` | `false` | Whether all controls in the fieldset are disabled | + +### Slots + +| Slot | Description | +|------|-------------| +| `default` | Form controls and content inside the fieldset | +| `legend` | Custom legend content (overrides `legend` prop) | + +### Events + +| Event | Payload | Description | +|-------|---------|-------------| +| - | - | Fieldset does not emit custom events | + +## Related + +- [Form](/components/form) - Form wrapper component +- [Input](/components/input) - Text input component +- [Select](/components/select) - Select dropdown component diff --git a/apps/ds-docs/src/content/config.ts b/apps/ds-docs/src/content/config.ts new file mode 100644 index 00000000..389c8e23 --- /dev/null +++ b/apps/ds-docs/src/content/config.ts @@ -0,0 +1,156 @@ +import { defineCollection, z } from 'astro:content'; + +/** + * Base frontmatter schema shared across all page types + */ +const baseSchema = z.object({ + title: z.string(), + description: z.string(), + // Navigation metadata + navLabel: z.string().optional(), + order: z.number().optional(), + hidden: z.boolean().optional(), + category: z.string().optional(), + // Status metadata + status: z.enum(['stable', 'beta', 'deprecated', 'planned', 'experimental']).optional(), + since: z.string().optional(), + contributors: z.array(z.string()).optional(), + lastUpdated: z.coerce.date().optional(), +}); + +/** + * Component documentation schema + */ +const componentSchema = baseSchema.extend({ + type: z.literal('component'), + category: z.enum(['form', 'navigation', 'feedback', 'data-display', 'layout', 'utility']).optional(), + component: z.string().optional(), + source: z.string().optional(), + storybook: z.string().optional(), + figma: z.string().optional(), + related: z.array(z.string()).optional(), +}); + +/** + * Foundation documentation schema + */ +const foundationSchema = baseSchema.extend({ + type: z.literal('foundation'), + category: z.enum(['color', 'typography', 'spacing', 'elevation', 'motion', 'imagery']).optional(), +}); + +/** + * Token documentation schema + */ +const tokenSchema = baseSchema.extend({ + type: z.literal('token'), + category: z.enum(['color', 'typography', 'spacing', 'elevation', 'motion', 'border', 'shadow']), +}); + +/** + * Block documentation schema + */ +const blockSchema = baseSchema.extend({ + type: z.literal('block'), + category: z.string(), + components: z.array(z.string()).optional(), +}); + +/** + * Pattern documentation schema + */ +const patternSchema = baseSchema.extend({ + type: z.literal('pattern'), + category: z.string(), + useCases: z.array(z.string()).optional(), +}); + +/** + * Template documentation schema + */ +const templateSchema = baseSchema.extend({ + type: z.literal('template'), + category: z.string(), + blocks: z.array(z.string()).optional(), +}); + +/** + * Getting started guide schema + */ +const guideSchema = baseSchema.extend({ + type: z.literal('guide'), + category: z.enum(['installation', 'quick-start', 'migration', 'contribution']).optional(), + prerequisites: z.array(z.string()).optional(), + difficulty: z.enum(['beginner', 'intermediate', 'advanced']).optional(), +}); + +/** + * Icon documentation schema + */ +const iconSchema = baseSchema.extend({ + type: z.literal('icon'), + category: z.enum(['azionicons', 'primeicons']).optional(), +}); + +/** + * Contributing documentation schema + */ +const contributingSchema = baseSchema.extend({ + type: z.literal('contributing'), + category: z.enum(['guidelines', 'development', 'documentation', 'pull-requests']).optional(), +}); + +/** + * Define all content collections + */ +export const collections = { + components: defineCollection({ + type: 'content', + schema: componentSchema, + }), + foundations: defineCollection({ + type: 'content', + schema: foundationSchema, + }), + tokens: defineCollection({ + type: 'content', + schema: tokenSchema, + }), + blocks: defineCollection({ + type: 'content', + schema: blockSchema, + }), + patterns: defineCollection({ + type: 'content', + schema: patternSchema, + }), + templates: defineCollection({ + type: 'content', + schema: templateSchema, + }), + 'get-started': defineCollection({ + type: 'content', + schema: guideSchema, + }), + icons: defineCollection({ + type: 'content', + schema: iconSchema, + }), + contributing: defineCollection({ + type: 'content', + schema: contributingSchema, + }), +}; + +/** + * Export types for frontmatter + */ +export type ComponentFrontmatter = z.infer; +export type FoundationFrontmatter = z.infer; +export type TokenFrontmatter = z.infer; +export type BlockFrontmatter = z.infer; +export type PatternFrontmatter = z.infer; +export type TemplateFrontmatter = z.infer; +export type GuideFrontmatter = z.infer; +export type IconFrontmatter = z.infer; +export type ContributingFrontmatter = z.infer; diff --git a/apps/ds-docs/src/content/contributing/index.md b/apps/ds-docs/src/content/contributing/index.md new file mode 100644 index 00000000..e9f4fe63 --- /dev/null +++ b/apps/ds-docs/src/content/contributing/index.md @@ -0,0 +1,66 @@ +--- +title: Contributing +description: Guidelines for contributing to the Azion Design System. +navLabel: Contributing +order: 1 +type: contributing +--- + +# Contributing + +Thank you for your interest in contributing to the Azion Design System! This guide will help you understand how to contribute effectively. + +## Ways to Contribute + +### Report Issues +Found a bug or have a suggestion? Open an issue on our GitHub repository. + +### Submit Pull Requests +Fix a bug or add a feature by submitting a pull request. + +### Improve Documentation +Help us improve our documentation by fixing typos, adding examples, or clarifying explanations. + +## Development Setup + +1. Fork and clone the repository +2. Install dependencies: `pnpm install` +3. Start the development server: `pnpm docs:dev` + +## Coding Standards + +### Code Style +- Follow the existing code style +- Use TypeScript for all new code +- Write meaningful commit messages + +### Component Development +- Follow the component API conventions +- Include accessibility features +- Write unit tests for new components + +### Documentation +- Write clear, concise documentation +- Include code examples +- Update the changelog + +## Pull Request Process + +1. Create a feature branch from `main` +2. Make your changes +3. Run tests: `pnpm test` +4. Submit a pull request with a clear description + +## Code of Conduct + +Please read and follow our [Code of Conduct](https://github.com/aziontech/webkit/blob/main/CODE_OF_CONDUCT.md). + +## Need Help? + +- Open a discussion on GitHub +- Join our community chat +- Email us at design-system@azion.com + +## Related + +- [Installation](/get-started/installation) - Get started with the design system diff --git a/apps/ds-docs/src/content/foundations/color.md b/apps/ds-docs/src/content/foundations/color.md new file mode 100644 index 00000000..ab642b1d --- /dev/null +++ b/apps/ds-docs/src/content/foundations/color.md @@ -0,0 +1,66 @@ +--- +title: Color +description: The color system provides semantic tokens for consistent and accessible interfaces. +navLabel: Color +order: 2 +type: foundation +category: color +--- + +# Color + +Color is a fundamental element of visual design. The Azion Design System uses a semantic color system built on design tokens that adapt to different contexts and themes. + +## Color Philosophy + +Our color system is designed to be: + +- **Accessible**: All color combinations meet WCAG 2.1 AA contrast requirements +- **Semantic**: Colors are named by purpose, not appearance +- **Consistent**: The same tokens are used across all components +- **Themeable**: Colors adapt automatically to light and dark modes + +## Primary Colors + +The primary color palette represents the Azion brand: + +| Token | Light Mode | Dark Mode | Usage | +|-------|------------|-----------|-------| +| `--color-primary-50` | `#eff6ff` | `#1e3a8a` | Light backgrounds | +| `--color-primary-100` | `#dbeafe` | `#1e40af` | Hover states | +| `--color-primary-500` | `#3b82f6` | `#3b82f6` | Primary actions | +| `--color-primary-700` | `#1d4ed8` | `#60a5fa` | Active states | +| `--color-primary-900` | `#1e3a8a` | `#93c5fd` | Text on light | + +## Semantic Colors + +Semantic colors convey meaning: + +### Success +Used for positive actions and confirmations. + +### Warning +Used for cautionary messages and alerts. + +### Error +Used for error states and destructive actions. + +### Info +Used for informational messages and neutral states. + +## Usage Guidelines + +### Do +- Use semantic tokens instead of raw color values +- Ensure sufficient contrast for text +- Use color consistently across similar elements + +### Don't +- Don't use color alone to convey information +- Don't create new colors outside the system +- Don't use decorative colors that distract from content + +## Related + +- [Typography](/foundations/typography) - Typography system +- [Tokens](/tokens) - Design token reference diff --git a/apps/ds-docs/src/content/foundations/index.md b/apps/ds-docs/src/content/foundations/index.md new file mode 100644 index 00000000..6fd9fa9b --- /dev/null +++ b/apps/ds-docs/src/content/foundations/index.md @@ -0,0 +1,48 @@ +--- +title: Foundations +description: Core design principles and guidelines that shape the Azion Design System. +navLabel: Foundations +order: 1 +type: foundation +--- + +# Foundations + +Foundations are the core design principles, guidelines, and visual elements that shape the Azion Design System. They provide consistency and coherence across all components and experiences. + +## What's Inside + +### Color +Our color system is built on semantic tokens that adapt to different contexts and themes. Learn how to use color effectively in your interfaces. + +### Typography +Typography guidelines ensure readable, accessible, and consistent text across all touchpoints. + +### Spacing +A consistent spacing scale creates rhythm and harmony in layouts. + +### Elevation +Elevation defines the visual hierarchy and depth of elements in the interface. + +### Motion +Motion principles guide animations and transitions for a polished user experience. + +## Design Principles + +### 1. Clarity First +Every element should serve a purpose. Remove unnecessary complexity. + +### 2. Consistency +Use familiar patterns and consistent behaviors across the system. + +### 3. Accessibility +Design for everyone. Meet WCAG 2.1 AA standards at minimum. + +### 4. Performance +Optimize for speed and efficiency in both design and implementation. + +## Next Steps + +- [Color](/foundations/color) - Explore the color system +- [Typography](/foundations/typography) - Learn about typography +- [Spacing](/foundations/spacing) - Understand spacing principles diff --git a/apps/ds-docs/src/content/get-started/index.md b/apps/ds-docs/src/content/get-started/index.md new file mode 100644 index 00000000..2606ff0e --- /dev/null +++ b/apps/ds-docs/src/content/get-started/index.md @@ -0,0 +1,43 @@ +--- +title: Get Started +description: Get started with the Azion Design System +type: guide +--- + +## Welcome + +Welcome to the Azion Design System documentation. This guide will help you get started with using our components and design tokens in your projects. + +## Installation + +Install the design system packages using your preferred package manager: + +```bash +npm install @aziontech/components @aziontech/icons @aziontech/theme +``` + +## Quick Start + +1. Import the CSS in your main entry file: + +```javascript +import '@aziontech/theme/styles.css'; +``` + +2. Import and use components: + +```vue + + + +``` + +## Next Steps + +- Explore our [Components](/components) library +- Learn about our [Foundations](/foundations) and design principles +- Browse our [Icons](/icons) collection diff --git a/apps/ds-docs/src/content/get-started/installation.md b/apps/ds-docs/src/content/get-started/installation.md new file mode 100644 index 00000000..af6f11e9 --- /dev/null +++ b/apps/ds-docs/src/content/get-started/installation.md @@ -0,0 +1,83 @@ +--- +title: Installation +description: Get started with the Azion Design System by installing the required packages. +navLabel: Installation +order: 2 +type: guide +category: installation +--- + +# Installation + +The Azion Design System is distributed as a set of npm packages. Install only what you need for your project. + +## Requirements + +- Node.js 18.x or higher +- Vue 3.x +- Tailwind CSS 3.x + +## Package Installation + +Install the core packages you need: + +```bash +# Install components +npm install @aziontech/components + +# Install icons +npm install @aziontech/icons + +# Install theme (optional, for design tokens) +npm install @aziontech/theme +``` + +## Tailwind Configuration + +Extend your Tailwind configuration to include Azion's design tokens: + +```js +// tailwind.config.js +import azionTheme from '@aziontech/theme'; + +export default { + content: [ + './src/**/*.{vue,js,ts}', + './node_modules/@aziontech/**/*.{vue,js,ts}', + ], + theme: { + extend: azionTheme.tailwindPreset, + }, +}; +``` + +## Vue Configuration + +Import the CSS and register the components: + +```js +// main.js +import { createApp } from 'vue'; +import App from './App.vue'; + +// Import Azion CSS +import '@aziontech/theme/css'; + +// Import Azion components (optional) +import { Button, Input, Select } from '@aziontech/components'; + +const app = createApp(App); + +// Register components globally +app.component('AzButton', Button); +app.component('AzInput', Input); +app.component('AzSelect', Select); + +app.mount('#app'); +``` + +## Next Steps + +- [Quick Start](/get-started) - Build your first component +- [Components](/components) - Explore available components +- [Foundations](/foundations) - Learn about design principles diff --git a/apps/ds-docs/src/content/icons/index.md b/apps/ds-docs/src/content/icons/index.md new file mode 100644 index 00000000..5aef19d6 --- /dev/null +++ b/apps/ds-docs/src/content/icons/index.md @@ -0,0 +1,91 @@ +--- +title: Icons +description: Icon library with Azion Icons and PrimeIcons for use in your applications. +navLabel: Icons +order: 1 +type: icon +--- + +# Icons + +The Azion Design System includes two icon libraries: + +- **Azion Icons** - Custom icons designed for Azion products +- **PrimeIcons** - General purpose icon library from PrimeVue + +## Installation + +Icons are included in the `@aziontech/icons` package: + +```bash +npm install @aziontech/icons +``` + +## Usage + +### Font Icons + +Use icons as font icons with the appropriate class: + +```html + + + + + +``` + +### SVG Icons + +Import SVG icons directly for more control: + +```js +import { aiAzion, piHome } from '@aziontech/icons/svg'; +``` + +## Icon Categories + +### Azion Icons + +Azion Icons are organized into categories: + +- **Product Icons** - Azion product and service icons +- **Action Icons** - Common action icons +- **Status Icons** - Status and notification icons + +### PrimeIcons + +PrimeIcons provide a comprehensive set of general-purpose icons suitable for most UI needs. + +## Sizing + +Icons inherit their size from the font size of their container: + +```html + + + + + + + + +``` + +## Accessibility + +When using icons alone, provide accessible labels: + +```html + + + + + +``` + +## Related + +- [Button](/components/button) - Button component with icon support diff --git a/apps/ds-docs/src/env.d.ts b/apps/ds-docs/src/env.d.ts new file mode 100644 index 00000000..5ebcc226 --- /dev/null +++ b/apps/ds-docs/src/env.d.ts @@ -0,0 +1,8 @@ +/// +/// + +declare module '*.vue' { + import type { DefineComponent } from 'vue'; + const component: DefineComponent<{}, {}, any>; + export default component; +} diff --git a/apps/ds-docs/src/layouts/BaseLayout.astro b/apps/ds-docs/src/layouts/BaseLayout.astro new file mode 100644 index 00000000..9804c5a2 --- /dev/null +++ b/apps/ds-docs/src/layouts/BaseLayout.astro @@ -0,0 +1,51 @@ +--- +/** + * BaseLayout + * + * Base HTML layout providing the shell structure for all pages. + * Handles global head, body classes, and global styles. + */ + +import '../styles/global.css'; + +interface Props { + title: string; + description?: string; +} + +const { title, description = 'Azion Design System Documentation' } = Astro.props; +--- + + + + + + + + + + {title} | Azion Design System + + + + + + + diff --git a/apps/ds-docs/src/layouts/ComponentPage.astro b/apps/ds-docs/src/layouts/ComponentPage.astro new file mode 100644 index 00000000..d6e9d7d0 --- /dev/null +++ b/apps/ds-docs/src/layouts/ComponentPage.astro @@ -0,0 +1,50 @@ +--- +import DocsLayout from './DocsLayout.astro'; +import PageHeader from '../components/docs/PageHeader.vue'; +import { markdownComponents } from '../components/docs'; +import type { ComponentFrontmatter } from '../content/config'; + +/** + * ComponentPage Layout + * + * Layout specifically for component documentation pages. + * Renders the page header with status, metadata, and markdown content. + */ + +interface Props { + entry: { + data: ComponentFrontmatter; + render: () => Promise<{ Content: any }>; + }; +} + +const { entry } = Astro.props; +const { Content } = await entry.render(); + +const { + title, + description, + status, + since, + source, + storybook, + figma, +} = entry.data; +--- + + + + +
+ +
+ diff --git a/apps/ds-docs/src/layouts/ComponentPageLayout.astro b/apps/ds-docs/src/layouts/ComponentPageLayout.astro new file mode 100644 index 00000000..65b414bd --- /dev/null +++ b/apps/ds-docs/src/layouts/ComponentPageLayout.astro @@ -0,0 +1,98 @@ +--- +/** + * ComponentPageLayout + * + * Layout specifically for component documentation pages. + * Supports status badge, metadata links, and API anchor areas. + */ + +import DocsShellLayout from './DocsShellLayout.astro'; +import PageHeader from '../components/docs/PageHeader.vue'; +import MetadataLinks from '../components/docs/MetadataLinks.vue'; +import type { Section, NavItem } from '../lib/content/types'; + +interface Props { + title: string; + description: string; + section?: Section | null; + item?: NavItem | null; + status?: 'stable' | 'beta' | 'deprecated' | 'planned' | 'experimental'; + category?: string; + component?: string; + source?: string; + storybook?: string; + figma?: string; + related?: string[]; +} + +const { + title, + description, + section, + item, + status, + category, + component, + source, + storybook, + figma, + related, +} = Astro.props; + +// Build metadata links +const metadataLinks = [ + source ? { label: 'Source', href: source, icon: 'github' } : null, + storybook ? { label: 'Storybook', href: storybook, icon: 'storybook' } : null, + figma ? { label: 'Figma', href: figma, icon: 'figma' } : null, +].filter(Boolean); +--- + + +
+ + + + + {metadataLinks.length > 0 && ( +
+ +
+ )} + + +
+ +
+ + +
+ +
+
+ + + diff --git a/apps/ds-docs/src/layouts/DocPageLayout.astro b/apps/ds-docs/src/layouts/DocPageLayout.astro new file mode 100644 index 00000000..4d0e038b --- /dev/null +++ b/apps/ds-docs/src/layouts/DocPageLayout.astro @@ -0,0 +1,62 @@ +--- +/** + * DocPageLayout + * + * Generic documentation page layout. + * Provides page header rendering and markdown content rendering. + */ + +import DocsShellLayout from './DocsShellLayout.astro'; +import PageHeader from '../components/docs/PageHeader.vue'; +import type { Section, NavItem } from '../lib/content/types'; + +interface Props { + title: string; + description: string; + section?: Section | null; + item?: NavItem | null; + status?: 'stable' | 'beta' | 'deprecated' | 'planned' | 'experimental'; + navLabel?: string; + order?: number; +} + +const { + title, + description, + section, + item, + status, +} = Astro.props; +--- + + +
+ + +
+ +
+
+ + + diff --git a/apps/ds-docs/src/layouts/DocsLayout.astro b/apps/ds-docs/src/layouts/DocsLayout.astro new file mode 100644 index 00000000..e26384dc --- /dev/null +++ b/apps/ds-docs/src/layouts/DocsLayout.astro @@ -0,0 +1,135 @@ +--- +import '../styles/global.css'; + +/** + * DocsLayout + * + * Base layout for all documentation pages. + * Provides the shell structure with sidebar navigation and header. + */ + +interface Props { + title: string; + description?: string; +} + +const { title, description = 'Azion Design System Documentation' } = Astro.props; +--- + + + + + + + + + + {title} | Azion Design System + + +
+ + + + +
+ +
+
+ +
+ Documentation + / + Components +
+ + +
+ + + + + + + + + +
+
+
+ + +
+ +
+
+
+ + + + diff --git a/apps/ds-docs/src/layouts/DocsShellLayout.astro b/apps/ds-docs/src/layouts/DocsShellLayout.astro new file mode 100644 index 00000000..c59c962b --- /dev/null +++ b/apps/ds-docs/src/layouts/DocsShellLayout.astro @@ -0,0 +1,65 @@ +--- +/** + * DocsShellLayout + * + * Documentation shell layout providing header, sidebar, and content area. + * This is the main layout for all documentation pages. + */ + +import BaseLayout from './BaseLayout.astro'; +import DocsSidebar from '../components/docs/DocsSidebar.vue'; +import DocsHeader from '../components/docs/DocsHeader.vue'; +import { getNavigationTree } from '../lib/content'; +import type { Section, NavItem } from '../lib/content/types'; + +interface Props { + title: string; + description?: string; + section?: Section | null; + item?: NavItem | null; +} + +const { title, description, section, item } = Astro.props; + +// Get navigation tree +const navigation = await getNavigationTree(); + +// Get current path for active state +const currentPath = Astro.url.pathname; +--- + + +
+ + + + +
+ + + + +
+ +
+
+
+ + + diff --git a/apps/ds-docs/src/lib/content.ts b/apps/ds-docs/src/lib/content.ts new file mode 100644 index 00000000..ba2a74ca --- /dev/null +++ b/apps/ds-docs/src/lib/content.ts @@ -0,0 +1,7 @@ +/** + * Content Utilities + * + * Re-exports from the content module for backward compatibility. + */ + +export * from './content/index'; diff --git a/apps/ds-docs/src/lib/content/index.ts b/apps/ds-docs/src/lib/content/index.ts new file mode 100644 index 00000000..80c94515 --- /dev/null +++ b/apps/ds-docs/src/lib/content/index.ts @@ -0,0 +1,46 @@ +/** + * Content Engine + * + * Central export for all content utilities. + * This module provides the abstraction layer between Astro pages + * and raw collection logic. + */ + +// Section model +export { + SECTIONS, + SECTION_MAP, + getSectionById, + getSectionByCollection, + getSectionByPath, + getAllSections, + isValidSection, +} from './sections'; + +// Navigation generation +export { + getSectionNavigation, + getNavigationTree, + getAllNavItems, + getSidebarNavigation, + getCurrentNavItem, + getPrevNextItems, + getBreadcrumbContext, + isActive, + isSectionActive, +} from './navigation'; + +// Routing utilities +export { + type ResolvedPage, + resolvePage, + resolvePageFromPath, + getSectionSlugs, + getSectionStaticPaths, + getAllStaticPaths, + buildPageUrl, + parsePageUrl, +} from './routing'; + +// Types +export type { NavItem, NavSection, NavigationTree, Section } from './types'; diff --git a/apps/ds-docs/src/lib/content/navigation.ts b/apps/ds-docs/src/lib/content/navigation.ts new file mode 100644 index 00000000..528588ad --- /dev/null +++ b/apps/ds-docs/src/lib/content/navigation.ts @@ -0,0 +1,248 @@ +/** + * Navigation Generation System + * + * Automatically generates sidebar navigation from content collections. + * Supports ordering, hidden pages, index pages, and future extensibility. + */ + +import { getCollection } from 'astro:content'; +import { SECTIONS, type Section } from './sections'; + +/** + * Navigation item representing a single page + */ +export interface NavItem { + /** Page title */ + title: string; + /** Navigation label (falls back to title) */ + navLabel: string; + /** URL path */ + href: string; + /** Sort order */ + order: number; + /** Whether the item is hidden from navigation */ + hidden: boolean; + /** Category for grouping (optional) */ + category?: string; + /** Section ID this item belongs to */ + sectionId: string; + /** Whether this is an index/landing page */ + isIndex: boolean; + /** Page slug */ + slug: string; +} + +/** + * Navigation section containing multiple items + */ +export interface NavSection { + /** Section metadata */ + section: Section; + /** Navigation items in this section */ + items: NavItem[]; + /** Whether the section has an index page */ + hasIndex: boolean; +} + +/** + * Full navigation tree + */ +export type NavigationTree = NavSection[]; + +/** + * Frontmatter fields used for navigation + */ +interface NavFrontmatter { + title: string; + description?: string; + navLabel?: string; + order?: number; + hidden?: boolean; + category?: string; +} + +/** + * Extract navigation metadata from a collection entry + */ +function extractNavItem( + entry: { slug: string; data: NavFrontmatter }, + section: Section +): NavItem { + const data = entry.data; + const slug = entry.slug; + const isIndex = slug === 'index' || slug === '' || slug.endsWith('/index'); + + // Build href - index pages link to section root + const href = isIndex + ? section.basePath + : `${section.basePath}/${slug}`; + + return { + title: data.title, + navLabel: data.navLabel || data.title, + href, + order: data.order ?? 9999, + hidden: data.hidden ?? false, + category: data.category, + sectionId: section.id, + isIndex, + slug, + }; +} + +/** + * Sort navigation items + * Primary: by order + * Secondary: by title (alphabetical) + */ +function sortNavItems(a: NavItem, b: NavItem): number { + if (a.order !== b.order) { + return a.order - b.order; + } + return a.navLabel.localeCompare(b.navLabel); +} + +/** + * Get navigation for a specific section + */ +export async function getSectionNavigation(sectionId: string): Promise { + const section = SECTIONS.find((s) => s.id === sectionId); + if (!section) return null; + + try { + // Dynamic collection access + const collectionName = section.collectionName as 'components' | 'foundations' | 'tokens' | 'blocks' | 'patterns' | 'templates' | 'get-started' | 'icons' | 'contributing'; + const entries = await getCollection(collectionName); + + const items = entries + .map((entry) => extractNavItem( + { slug: entry.slug, data: entry.data as NavFrontmatter }, + section + )) + .filter((item) => !item.hidden) + .sort(sortNavItems); + + const hasIndex = items.some((item) => item.isIndex); + + return { + section, + items, + hasIndex, + }; + } catch (error) { + // Collection might not exist yet + return { + section, + items: [], + hasIndex: false, + }; + } +} + +/** + * Get full navigation tree for all sections + */ +export async function getNavigationTree(): Promise { + const sections = await Promise.all( + SECTIONS.map((section) => getSectionNavigation(section.id)) + ); + + return sections.filter((s): s is NavSection => s !== null); +} + +/** + * Get flat list of all navigation items + */ +export async function getAllNavItems(): Promise { + const tree = await getNavigationTree(); + return tree.flatMap((section) => section.items); +} + +/** + * Get navigation items for sidebar (excludes index pages from listing) + */ +export async function getSidebarNavigation(): Promise { + const tree = await getNavigationTree(); + + return tree.map((navSection) => ({ + ...navSection, + // Keep all items but mark index pages + items: navSection.items, + })); +} + +/** + * Find current page in navigation + */ +export async function getCurrentNavItem(href: string): Promise { + const items = await getAllNavItems(); + return items.find((item) => item.href === href); +} + +/** + * Get previous/next navigation items within a section + */ +export async function getPrevNextItems( + currentHref: string +): Promise<{ prev: NavItem | null; next: NavItem | null }> { + const tree = await getNavigationTree(); + + for (const section of tree) { + const visibleItems = section.items.filter((item) => !item.hidden && !item.isIndex); + const currentIndex = visibleItems.findIndex((item) => item.href === currentHref); + + if (currentIndex !== -1) { + return { + prev: currentIndex > 0 ? visibleItems[currentIndex - 1] : null, + next: currentIndex < visibleItems.length - 1 ? visibleItems[currentIndex + 1] : null, + }; + } + } + + return { prev: null, next: null }; +} + +/** + * Get breadcrumb context for a page + */ +export async function getBreadcrumbContext( + href: string +): Promise<{ section: Section; item: NavItem | null }> { + const tree = await getNavigationTree(); + + for (const navSection of tree) { + const item = navSection.items.find((i) => i.href === href); + if (item) { + return { + section: navSection.section, + item, + }; + } + } + + // Check if it's a section index + for (const navSection of tree) { + if (navSection.section.basePath === href) { + return { + section: navSection.section, + item: null, + }; + } + } + + throw new Error(`No breadcrumb context found for href: ${href}`); +} + +/** + * Check if a href is active (current page or parent section) + */ +export function isActive(href: string, currentPath: string): boolean { + return href === currentPath || currentPath.startsWith(href + '/'); +} + +/** + * Check if a section is active + */ +export function isSectionActive(section: Section, currentPath: string): boolean { + return currentPath.startsWith(section.basePath); +} diff --git a/apps/ds-docs/src/lib/content/routing.ts b/apps/ds-docs/src/lib/content/routing.ts new file mode 100644 index 00000000..ef475aba --- /dev/null +++ b/apps/ds-docs/src/lib/content/routing.ts @@ -0,0 +1,151 @@ +/** + * Routing Utilities + * + * Helper functions for resolving routes and pages. + */ + +import { getCollection } from 'astro:content'; +import { SECTIONS, getSectionById, type Section } from './sections'; + +/** + * Page resolution result + */ +export interface ResolvedPage { + /** Section the page belongs to */ + section: Section; + /** Page slug */ + slug: string; + /** Full URL path */ + href: string; + /** Whether this is an index page */ + isIndex: boolean; + /** Collection entry data */ + entry: unknown; +} + +/** + * Resolve a page from section ID and slug + */ +export async function resolvePage( + sectionId: string, + slug: string +): Promise { + const section = getSectionById(sectionId); + if (!section) return null; + + try { + const collectionName = section.collectionName as 'components' | 'foundations' | 'tokens' | 'blocks' | 'patterns' | 'templates' | 'get-started' | 'icons' | 'contributing'; + const entries = await getCollection(collectionName); + const entry = entries.find((e) => e.slug === slug); + + if (!entry) return null; + + const isIndex = slug === 'index' || slug === ''; + const href = isIndex ? section.basePath : `${section.basePath}/${slug}`; + + return { + section, + slug, + href, + isIndex, + entry, + }; + } catch (error) { + return null; + } +} + +/** + * Resolve a page from a URL path + */ +export async function resolvePageFromPath(path: string): Promise { + // Remove leading slash and split + const parts = path.replace(/^\//, '').split('/'); + + if (parts.length === 0) return null; + + // Find matching section + const section = SECTIONS.find((s) => s.basePath === `/${parts[0]}`); + if (!section) return null; + + // Get slug (default to index) + const slug = parts.length === 1 ? 'index' : parts.slice(1).join('/'); + + return resolvePage(section.id, slug); +} + +/** + * Get all slugs for a section (for static path generation) + */ +export async function getSectionSlugs(sectionId: string): Promise { + const section = getSectionById(sectionId); + if (!section) return []; + + try { + const collectionName = section.collectionName as 'components' | 'foundations' | 'tokens' | 'blocks' | 'patterns' | 'templates' | 'get-started' | 'icons' | 'contributing'; + const entries = await getCollection(collectionName); + return entries.map((e) => e.slug); + } catch (error) { + return []; + } +} + +/** + * Get static paths for a section + */ +export async function getSectionStaticPaths(sectionId: string) { + const section = getSectionById(sectionId); + if (!section) return []; + + try { + const collectionName = section.collectionName as 'components' | 'foundations' | 'tokens' | 'blocks' | 'patterns' | 'templates' | 'get-started' | 'icons' | 'contributing'; + const entries = await getCollection(collectionName); + + return entries.map((entry) => ({ + params: { slug: entry.slug }, + props: { entry, section }, + })); + } catch (error) { + return []; + } +} + +/** + * Get all static paths for all sections + */ +export async function getAllStaticPaths() { + const allPaths = await Promise.all( + SECTIONS.map((section) => getSectionStaticPaths(section.id)) + ); + + return allPaths.flat(); +} + +/** + * Build URL for a page + */ +export function buildPageUrl(section: Section, slug: string): string { + if (slug === 'index' || slug === '') { + return section.basePath; + } + return `${section.basePath}/${slug}`; +} + +/** + * Parse URL to extract section and slug + */ +export function parsePageUrl(url: string): { sectionId: string; slug: string } | null { + const parts = url.replace(/^\//, '').split('/'); + + if (parts.length === 0) return null; + + const section = SECTIONS.find((s) => s.basePath === `/${parts[0]}`); + if (!section) return null; + + const slug = parts.length === 1 ? 'index' : parts.slice(1).join('/'); + + return { + sectionId: section.id, + slug, + }; +} diff --git a/apps/ds-docs/src/lib/content/sections.ts b/apps/ds-docs/src/lib/content/sections.ts new file mode 100644 index 00000000..651895f9 --- /dev/null +++ b/apps/ds-docs/src/lib/content/sections.ts @@ -0,0 +1,167 @@ +/** + * Section Model + * + * Defines the formal section model for the documentation platform. + * This is the source of truth for navigation and routing logic. + */ + +export interface Section { + /** Unique section identifier */ + id: string; + /** Human-readable label for display */ + label: string; + /** URL path prefix */ + basePath: string; + /** Order in sidebar navigation */ + order: number; + /** Content collection name */ + collectionName: string; + /** Optional description for section landing pages */ + description?: string; + /** Icon identifier for visual display */ + icon?: string; +} + +/** + * All documentation sections + * + * Order determines sidebar navigation order. + */ +export const SECTIONS: Section[] = [ + { + id: 'get-started', + label: 'Get Started', + basePath: '/get-started', + order: 1, + collectionName: 'get-started', + description: 'Get up and running with the Azion Design System.', + icon: 'rocket', + }, + { + id: 'foundations', + label: 'Foundations', + basePath: '/foundations', + order: 2, + collectionName: 'foundations', + description: 'Core design principles and guidelines that shape the system.', + icon: 'palette', + }, + { + id: 'tokens', + label: 'Tokens', + basePath: '/tokens', + order: 3, + collectionName: 'tokens', + description: 'Design tokens that power the visual language.', + icon: 'code', + }, + { + id: 'components', + label: 'Components', + basePath: '/components', + order: 4, + collectionName: 'components', + description: 'Reusable UI components built with Vue and Tailwind CSS.', + icon: 'cube', + }, + { + id: 'blocks', + label: 'Blocks', + basePath: '/blocks', + order: 5, + collectionName: 'blocks', + description: 'Composable UI blocks combining multiple components.', + icon: 'blocks', + }, + { + id: 'patterns', + label: 'Patterns', + basePath: '/patterns', + order: 6, + collectionName: 'patterns', + description: 'Common design patterns and best practices.', + icon: 'puzzle', + }, + { + id: 'templates', + label: 'Templates', + basePath: '/templates', + order: 7, + collectionName: 'templates', + description: 'Page templates and layout examples.', + icon: 'layout', + }, + { + id: 'icons', + label: 'Icons', + basePath: '/icons', + order: 8, + collectionName: 'icons', + description: 'Icon library with Azion Icons and PrimeIcons.', + icon: 'star', + }, + { + id: 'playground', + label: 'Playground', + basePath: '/playground', + order: 9, + collectionName: 'playground', + description: 'Interactive component playground.', + icon: 'play', + }, + { + id: 'contributing', + label: 'Contributing', + basePath: '/contributing', + order: 10, + collectionName: 'contributing', + description: 'Guidelines for contributing to the design system.', + icon: 'git', + }, +]; + +/** + * Section lookup map for O(1) access + */ +export const SECTION_MAP: Record = SECTIONS.reduce( + (acc, section) => { + acc[section.id] = section; + return acc; + }, + {} as Record +); + +/** + * Get section by ID + */ +export function getSectionById(id: string): Section | undefined { + return SECTION_MAP[id]; +} + +/** + * Get section by collection name + */ +export function getSectionByCollection(collectionName: string): Section | undefined { + return SECTIONS.find((s) => s.collectionName === collectionName); +} + +/** + * Get section by base path + */ +export function getSectionByPath(path: string): Section | undefined { + return SECTIONS.find((s) => s.basePath === path); +} + +/** + * Get all sections sorted by order + */ +export function getAllSections(): Section[] { + return [...SECTIONS].sort((a, b) => a.order - b.order); +} + +/** + * Check if a section ID is valid + */ +export function isValidSection(id: string): boolean { + return id in SECTION_MAP; +} diff --git a/apps/ds-docs/src/lib/content/types.ts b/apps/ds-docs/src/lib/content/types.ts new file mode 100644 index 00000000..99d63144 --- /dev/null +++ b/apps/ds-docs/src/lib/content/types.ts @@ -0,0 +1,52 @@ +/** + * Navigation Types + * + * Type definitions for navigation system. + * Re-exported from content module for convenience. + */ + +import type { Section } from './sections'; + +// Re-export Section type +export type { Section }; + +/** + * Navigation item representing a single page + */ +export interface NavItem { + /** Page title */ + title: string; + /** Navigation label (falls back to title) */ + navLabel: string; + /** URL path */ + href: string; + /** Sort order */ + order: number; + /** Whether the item is hidden from navigation */ + hidden: boolean; + /** Category for grouping (optional) */ + category?: string; + /** Section ID this item belongs to */ + sectionId: string; + /** Whether this is an index/landing page */ + isIndex: boolean; + /** Page slug */ + slug: string; +} + +/** + * Navigation section containing multiple items + */ +export interface NavSection { + /** Section metadata */ + section: Section; + /** Navigation items in this section */ + items: NavItem[]; + /** Whether the section has an index page */ + hasIndex: boolean; +} + +/** + * Full navigation tree + */ +export type NavigationTree = NavSection[]; diff --git a/apps/ds-docs/src/pages/components/[slug].astro b/apps/ds-docs/src/pages/components/[slug].astro new file mode 100644 index 00000000..ce15330a --- /dev/null +++ b/apps/ds-docs/src/pages/components/[slug].astro @@ -0,0 +1,42 @@ +--- +/** + * Components Dynamic Routes + * + * Handles all pages under /components/[slug] + */ + +import { getCollection } from 'astro:content'; +import ComponentPageLayout from '../../layouts/ComponentPageLayout.astro'; +import { getBreadcrumbContext } from '../../lib/content'; +import { markdownComponents } from '../../components/docs'; + +export async function getStaticPaths() { + const entries = await getCollection('components'); + return entries.map((entry) => ({ + params: { slug: entry.slug }, + props: { entry }, + })); +} + +const { entry } = Astro.props; +const { Content } = await entry.render(); + +// Get breadcrumb context +const breadcrumb = await getBreadcrumbContext(`/components/${entry.slug === 'index' ? '' : entry.slug}`); +--- + + + + diff --git a/apps/ds-docs/src/pages/components/index.astro b/apps/ds-docs/src/pages/components/index.astro new file mode 100644 index 00000000..5bb64ff7 --- /dev/null +++ b/apps/ds-docs/src/pages/components/index.astro @@ -0,0 +1,71 @@ +--- +import DocsLayout from '../../layouts/DocsLayout.astro'; +import { getCollection } from 'astro:content'; + +/** + * Components Index Page + * + * Lists all available components in the design system. + */ + +const components = await getCollection('components'); + +// Group components by category +const componentsByCategory = components.reduce((acc, component) => { + const category = component.data.category || 'other'; + if (!acc[category]) { + acc[category] = []; + } + acc[category].push(component); + return acc; +}, {} as Record); + +const categoryLabels: Record = { + form: 'Form Components', + navigation: 'Navigation Components', + feedback: 'Feedback Components', + 'data-display': 'Data Display Components', + layout: 'Layout Components', + utility: 'Utility Components', +}; +--- + + +

Components

+

+ Explore our component library built with Vue and designed for the Azion platform. +

+ + {Object.entries(componentsByCategory).map(([category, items]) => ( +
+

{categoryLabels[category] || category}

+
+ {items.map((component) => ( + +
+

+ {component.data.title} +

+ {component.data.status && ( + + {component.data.status} + + )} +
+

+ {component.data.description} +

+ + ))} +
+
+ ))} + diff --git a/apps/ds-docs/src/pages/contributing/[slug].astro b/apps/ds-docs/src/pages/contributing/[slug].astro new file mode 100644 index 00000000..dbbd005b --- /dev/null +++ b/apps/ds-docs/src/pages/contributing/[slug].astro @@ -0,0 +1,36 @@ +--- +/** + * Contributing Dynamic Routes + * + * Handles all pages under /contributing/[slug] + */ + +import { getCollection } from 'astro:content'; +import DocPageLayout from '../../layouts/DocPageLayout.astro'; +import { getBreadcrumbContext } from '../../lib/content'; +import { markdownComponents } from '../../components/docs'; + +export async function getStaticPaths() { + const entries = await getCollection('contributing'); + return entries.map((entry) => ({ + params: { slug: entry.slug }, + props: { entry }, + })); +} + +const { entry } = Astro.props; +const { Content } = await entry.render(); + +// Get breadcrumb context +const breadcrumb = await getBreadcrumbContext(`/contributing/${entry.slug === 'index' ? '' : entry.slug}`); +--- + + + + diff --git a/apps/ds-docs/src/pages/foundations/[slug].astro b/apps/ds-docs/src/pages/foundations/[slug].astro new file mode 100644 index 00000000..88990413 --- /dev/null +++ b/apps/ds-docs/src/pages/foundations/[slug].astro @@ -0,0 +1,36 @@ +--- +/** + * Foundations Dynamic Routes + * + * Handles all pages under /foundations/[slug] + */ + +import { getCollection } from 'astro:content'; +import DocPageLayout from '../../layouts/DocPageLayout.astro'; +import { getBreadcrumbContext } from '../../lib/content'; +import { markdownComponents } from '../../components/docs'; + +export async function getStaticPaths() { + const entries = await getCollection('foundations'); + return entries.map((entry) => ({ + params: { slug: entry.slug }, + props: { entry }, + })); +} + +const { entry } = Astro.props; +const { Content } = await entry.render(); + +// Get breadcrumb context +const breadcrumb = await getBreadcrumbContext(`/foundations/${entry.slug === 'index' ? '' : entry.slug}`); +--- + + + + diff --git a/apps/ds-docs/src/pages/get-started/[slug].astro b/apps/ds-docs/src/pages/get-started/[slug].astro new file mode 100644 index 00000000..54ba3ee0 --- /dev/null +++ b/apps/ds-docs/src/pages/get-started/[slug].astro @@ -0,0 +1,36 @@ +--- +/** + * Get Started Dynamic Routes + * + * Handles all pages under /get-started/[slug] + */ + +import { getCollection } from 'astro:content'; +import DocPageLayout from '../../layouts/DocPageLayout.astro'; +import { getBreadcrumbContext } from '../../lib/content'; +import { markdownComponents } from '../../components/docs'; + +export async function getStaticPaths() { + const entries = await getCollection('get-started'); + return entries.map((entry) => ({ + params: { slug: entry.slug }, + props: { entry }, + })); +} + +const { entry } = Astro.props; +const { Content } = await entry.render(); + +// Get breadcrumb context +const breadcrumb = await getBreadcrumbContext(`/get-started/${entry.slug === 'index' ? '' : entry.slug}`); +--- + + + + diff --git a/apps/ds-docs/src/pages/get-started/index.astro b/apps/ds-docs/src/pages/get-started/index.astro new file mode 100644 index 00000000..c1251cb7 --- /dev/null +++ b/apps/ds-docs/src/pages/get-started/index.astro @@ -0,0 +1,24 @@ +--- +import DocsLayout from '../../layouts/DocsLayout.astro'; +import { getCollection } from 'astro:content'; +import { markdownComponents } from '../../components/docs'; + +/** + * Get Started Index Page + */ + +const entry = await getCollection('get-started'); +const indexEntry = entry.find((e) => e.slug === 'index'); + +if (!indexEntry) { + return Astro.redirect('/'); +} + +const { Content } = await indexEntry.render(); +--- + + +
+ +
+ diff --git a/apps/ds-docs/src/pages/icons/index.astro b/apps/ds-docs/src/pages/icons/index.astro new file mode 100644 index 00000000..2485aa41 --- /dev/null +++ b/apps/ds-docs/src/pages/icons/index.astro @@ -0,0 +1,32 @@ +--- +/** + * Icons Page + * + * Handles the /icons route. + */ + +import { getCollection } from 'astro:content'; +import DocPageLayout from '../../layouts/DocPageLayout.astro'; +import { getBreadcrumbContext } from '../../lib/content'; +import { markdownComponents } from '../../components/docs'; + +// Get the icons index page +const entries = await getCollection('icons'); +const indexEntry = entries.find((e) => e.slug === 'index'); + +if (!indexEntry) { + return Astro.redirect('/404'); +} + +const { Content } = await indexEntry.render(); +const breadcrumb = await getBreadcrumbContext('/icons'); +--- + + + + diff --git a/apps/ds-docs/src/pages/index.astro b/apps/ds-docs/src/pages/index.astro new file mode 100644 index 00000000..db4ba95d --- /dev/null +++ b/apps/ds-docs/src/pages/index.astro @@ -0,0 +1,115 @@ +--- +import DocsLayout from '../layouts/DocsLayout.astro'; + +/** + * Homepage + * + * Landing page for the Azion Design System documentation. + */ + +const heroLinks = [ + { href: '/get-started', label: 'Get Started', description: 'Start building with the design system' }, + { href: '/components', label: 'Components', description: 'Explore our component library' }, + { href: '/foundations', label: 'Foundations', description: 'Learn the design principles' }, +]; + +const features = [ + { + icon: '🎨', + title: 'Design Tokens', + description: 'Consistent design language with tokens for colors, typography, spacing, and more.', + }, + { + icon: '🧩', + title: 'Components', + description: 'Production-ready Vue components built with accessibility in mind.', + }, + { + icon: '📱', + title: 'Responsive', + description: 'Components that work seamlessly across all screen sizes and devices.', + }, + { + icon: '♿', + title: 'Accessible', + description: 'WCAG compliant components with keyboard navigation and screen reader support.', + }, +]; +--- + + + +
+

+ Azion Design System +

+

+ Build consistent, accessible, and beautiful user interfaces with our comprehensive design system. + Designed for Azion's edge computing platform. +

+ +
+ {heroLinks.map((link) => ( + + + {link.label} + + + {link.description} + + + ))} +
+
+ + +
+

Why use our Design System?

+
+ {features.map((feature) => ( +
+ {feature.icon} +

{feature.title}

+

{feature.description}

+
+ ))} +
+
+ + +
+

Quick Start

+
+

Install the design system packages:

+ 
npm install @aziontech/components @aziontech/icons @aziontech/theme
+
+
+ + +
+

Project Status

+
+
+ + ✓ Stable + + Icons package is production-ready +
+
+ + β Beta + + Components package in active development +
+
+ + ○ Planned + + Theme package coming soon +
+
+
+ diff --git a/apps/ds-docs/src/styles/global.css b/apps/ds-docs/src/styles/global.css new file mode 100644 index 00000000..0e6f19d0 --- /dev/null +++ b/apps/ds-docs/src/styles/global.css @@ -0,0 +1,110 @@ +/* Import fonts - must be before @tailwind directives */ +@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap'); + +@tailwind base; +@tailwind components; +@tailwind utilities; + +/* Base styles */ +@layer base { + html { + font-family: 'Sora', system-ui, sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + + body { + @apply bg-surface text-text-primary; + } + + /* Smooth scrolling */ + html { + scroll-behavior: smooth; + } + + /* Focus styles */ + :focus-visible { + @apply outline-2 outline-offset-2 outline-primary-500; + } +} + +/* Custom components */ +@layer components { + /* Documentation prose styles */ + .docs-prose { + @apply prose prose-lg max-w-docs-content; + } + + .docs-prose h1 { + @apply text-3xl font-bold tracking-tight mb-4; + } + + .docs-prose h2 { + @apply text-2xl font-semibold tracking-tight mt-10 mb-4 border-b border-gray-200 pb-2; + } + + .docs-prose h3 { + @apply text-xl font-semibold mt-8 mb-3; + } + + .docs-prose p { + @apply mb-4 leading-relaxed; + } + + .docs-prose ul, + .docs-prose ol { + @apply mb-4 pl-6; + } + + .docs-prose li { + @apply mb-2; + } + + .docs-prose a { + @apply text-primary-600 hover:text-primary-700 underline underline-offset-2; + } + + /* Demo preview container */ + .demo-preview { + @apply border border-gray-200 rounded-lg p-6 bg-surface my-6; + } + + .demo-preview__title { + @apply text-sm font-medium text-text-secondary mb-4; + } + + .demo-preview__content { + @apply flex items-center justify-center min-h-[100px]; + } + + /* Code block styles */ + .code-block { + @apply relative my-6 rounded-lg overflow-hidden; + } + + .code-block pre { + @apply p-4 overflow-x-auto text-sm; + } + + .code-block__filename { + @apply absolute top-0 right-0 px-3 py-1 text-xs text-gray-400 bg-gray-800 rounded-bl; + } +} + +/* Utility classes */ +@layer utilities { + /* Hide scrollbar but keep functionality */ + .scrollbar-hide { + -ms-overflow-style: none; + scrollbar-width: none; + } + + .scrollbar-hide::-webkit-scrollbar { + display: none; + } + + /* Text balance for headings */ + .text-balance { + text-wrap: balance; + } +} diff --git a/apps/ds-docs/tailwind.config.mjs b/apps/ds-docs/tailwind.config.mjs new file mode 100644 index 00000000..fbe3345e --- /dev/null +++ b/apps/ds-docs/tailwind.config.mjs @@ -0,0 +1,97 @@ +/** @type {import('tailwindcss').Config} */ +export default { + content: [ + './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}', + './content/**/*.md', + ], + theme: { + extend: { + colors: { + // Primary brand colors + primary: { + 50: '#eff6ff', + 100: '#dbeafe', + 200: '#bfdbfe', + 300: '#93c5fd', + 400: '#60a5fa', + 500: '#3b82f6', + 600: '#2563eb', + 700: '#1d4ed8', + 800: '#1e40af', + 900: '#1e3a8a', + 950: '#172554', + }, + // Neutral colors for documentation + surface: { + DEFAULT: '#ffffff', + muted: '#f9fafb', + subtle: '#f3f4f6', + }, + // Text colors + text: { + primary: '#111827', + secondary: '#4b5563', + muted: '#9ca3af', + }, + // Status colors for component status badges + status: { + stable: '#10b981', + beta: '#3b82f6', + deprecated: '#f59e0b', + planned: '#6b7280', + experimental: '#8b5cf6', + }, + }, + fontFamily: { + sans: ['Sora', 'system-ui', 'sans-serif'], + mono: ['Roboto Mono', 'monospace'], + }, + typography: (theme) => ({ + DEFAULT: { + css: { + maxWidth: 'none', + color: theme('colors.text.primary'), + a: { + color: theme('colors.primary.600'), + '&:hover': { + color: theme('colors.primary.700'), + }, + }, + 'code::before': { + content: '""', + }, + 'code::after': { + content: '""', + }, + code: { + color: theme('colors.primary.600'), + backgroundColor: theme('colors.surface.subtle'), + padding: '0.125rem 0.25rem', + borderRadius: '0.25rem', + fontWeight: '400', + }, + pre: { + backgroundColor: '#1f2937', + }, + 'pre code': { + backgroundColor: 'transparent', + padding: '0', + }, + }, + }, + }), + // Documentation-specific spacing + spacing: { + 'docs-sidebar': '280px', + 'docs-header': '64px', + }, + // Max widths for content + maxWidth: { + 'docs-content': '800px', + }, + }, + }, + plugins: [ + require('@tailwindcss/typography'), + ], +}; diff --git a/apps/ds-docs/tsconfig.json b/apps/ds-docs/tsconfig.json new file mode 100644 index 00000000..d94ea678 --- /dev/null +++ b/apps/ds-docs/tsconfig.json @@ -0,0 +1,23 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/*": ["src/*"], + "@components/*": ["src/components/*"], + "@layouts/*": ["src/layouts/*"], + "@lib/*": ["src/lib/*"] + }, + "jsx": "react-jsx", + "jsxImportSource": "vue" + }, + "include": [ + "src/**/*", + "content/**/*", + ".astro/types.d.ts" + ], + "exclude": [ + "node_modules", + "dist" + ] +} diff --git a/package.json b/package.json index bf3afd6a..56f0f7ef 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,10 @@ "icons:gallery:publish": "pnpm --filter icons-gallery run publish", "icons:build": "pnpm --filter icons run build", "icons:validate": "pnpm --filter icons run validate", - "icons:publish": "pnpm --filter icons run publish" + "icons:publish": "pnpm --filter icons run publish", + "docs:dev": "pnpm --filter ds-docs run dev", + "docs:build": "pnpm --filter ds-docs run build", + "docs:preview": "pnpm --filter ds-docs run preview" }, "dependencies": { "@tailwindcss/typography": "^0.5.19", diff --git a/plans/ds-docs-architecture.md b/plans/ds-docs-architecture.md new file mode 100644 index 00000000..d0ffd925 --- /dev/null +++ b/plans/ds-docs-architecture.md @@ -0,0 +1,3919 @@ +# Azion Design System Documentation Platform Architecture + +> A comprehensive blueprint for building a product-grade design system documentation platform using Astro. + +--- + +## Table of Contents + +1. [Recommended Architecture](#1-recommended-architecture) +2. [Monorepo Folder Structure](#2-monorepo-folder-structure) +3. [Content Model](#3-content-model) +4. [Page Templates and Information Architecture](#4-page-templates-and-information-architecture) +5. [Documentation-Specific Component System](#5-documentation-specific-component-system) +6. [Vue Integration Strategy](#6-vue-integration-strategy) +7. [Theming and Design Token Integration](#7-theming-and-design-token-integration) +8. [Versioning Strategy](#8-versioning-strategy) +9. [i18n Strategy](#9-i18n-strategy) +10. [Search Engine Architecture](#10-search-engine-architecture) +11. [Playground Architecture](#11-playground-architecture) +12. [Delivery Roadmap](#12-delivery-roadmap) +13. [Risks and Technical Debt Prevention](#13-risks-and-technical-debt-prevention) +14. [Recommended Engineering Conventions](#14-recommended-engineering-conventions) +15. [Suggested MVP Scope](#15-suggested-mvp-scope) + +--- + +## 1. Recommended Architecture + +### Why Astro is Appropriate + +Astro is the optimal foundation for this documentation platform for several strategic reasons: + +**Content-First Architecture** +- Astro treats markdown as a first-class citizen with built-in content collections +- File-based routing aligns naturally with documentation information architecture +- Zero JavaScript by default means fast page loads for content-heavy pages + +**Framework Agnostic Islands** +- The Islands architecture allows embedding interactive Vue components within static content +- Only components that need interactivity get hydrated +- Perfect for documentation where most content is static but demos need interactivity + +**Build Performance** +- Astro's build process is optimized for content-heavy sites +- Partial hydration means smaller bundles compared to full SPA frameworks +- Excellent for monorepo CI/CD where build time matters + +**Markdown Extensions** +- Native support for markdown components via the `components` prop +- Custom components can be mapped to markdown elements +- Supports MDX-like syntax without MDX complexity + +### Architecture Overview + +``` +┌─────────────────────────────────────────────────────────────────┐ +│ Astro Application │ +├─────────────────────────────────────────────────────────────────┤ +│ ┌─────────────┐ ┌─────────────┐ ┌─────────────────────────┐ │ +│ │ Content │ │ Layouts │ │ Documentation UI │ │ +│ │ Collections│ │ System │ │ Components │ │ +│ │ (Markdown) │ │ │ │ (Vue + Astro) │ │ +│ └──────┬──────┘ └──────┬──────┘ └────────────┬────────────┘ │ +│ │ │ │ │ +│ └────────────────┼──────────────────────┘ │ +│ │ │ +│ ▼ │ +│ ┌─────────────────────────────────────────────────────────┐ │ +│ │ Page Templates │ │ +│ │ ComponentPage / FoundationPage / TokenPage / etc. │ │ +│ └─────────────────────────────────────────────────────────┘ │ +│ │ │ +└──────────────────────────┼──────────────────────────────────────┘ + │ + ▼ +┌─────────────────────────────────────────────────────────────────┐ +│ Design System Packages │ +├─────────────────────────────────────────────────────────────────┤ +│ ┌─────────────┐ ┌─────────────┐ ┌─────────────────────────┐ │ +│ │ @azion/ │ │ @azion/ │ │ @azion/ │ │ +│ │ theme │ │ icons │ │ components │ │ +│ │ (tokens) │ │ (icons) │ │ (Vue) │ │ +│ └─────────────┘ └─────────────┘ └─────────────────────────┘ │ +└─────────────────────────────────────────────────────────────────┘ +``` + +### Integration Strategy + +**Markdown with Inline Components** + +Astro's content collections support custom components inside markdown through the `` component's `components` prop: + +```astro +--- +// src/pages/[...slug].astro +import { getCollection } from 'astro:content'; +import CustomDemo from '@/components/docs/Demo.vue'; +import PropsTable from '@/components/docs/PropsTable.astro'; + +const { entry } = Astro.props; +const { Content } = await entry.render(); + +const components = { + Demo: CustomDemo, + PropsTable: PropsTable, +}; +--- + + +``` + +**Markdown authoring example:** + +```markdown +--- +title: Button +description: Primary action trigger component +status: stable +--- + +import { Demo } from '@/components/docs'; +import { Button } from '@aziontech/components'; + +# Button + +Buttons trigger actions and events. + + + + +``` + +### Separation of Concerns + +| Layer | Responsibility | Location | +|-------|---------------|----------| +| Content | Markdown files with frontmatter | `content/` | +| Documentation UI | Docs-specific components (previews, tables) | `src/components/docs/` | +| Design System | Real Vue components | `packages/components/` | +| Theme | Tokens, design variables | `packages/theme/` | +| Layouts | Page structure, navigation | `src/layouts/` | + +### Monorepo Package Consumption + +The docs app consumes internal packages via workspace protocol: + +```json +{ + "dependencies": { + "@aziontech/icons": "workspace:*", + "@aziontech/components": "workspace:*", + "@aziontech/theme": "workspace:*" + } +} +``` + +This ensures: +- Always uses latest local changes during development +- Published versions used in production builds +- Proper dependency resolution in the monorepo + +--- + +## 2. Monorepo Folder Structure + +### Complete Directory Structure + +``` +apps/ds-docs/ +├── astro.config.mjs # Astro configuration +├── package.json # Package manifest +├── tsconfig.json # TypeScript configuration +├── tailwind.config.js # Tailwind configuration (extends root) +│ +├── public/ # Static assets +│ ├── favicon.ico +│ └── fonts/ +│ +├── src/ +│ ├── env.d.ts # Environment type declarations +│ │ +│ ├── components/ # Documentation UI components +│ │ ├── docs/ # Docs-specific components +│ │ │ ├── page-header/ +│ │ │ │ ├── PageHeader.vue +│ │ │ │ └── index.ts +│ │ │ ├── status-badge/ +│ │ │ │ ├── StatusBadge.vue +│ │ │ │ └── index.ts +│ │ │ ├── demo-preview/ +│ │ │ │ ├── DemoPreview.vue +│ │ │ │ ├── DemoPreview.astro +│ │ │ │ └── index.ts +│ │ │ ├── code-block/ +│ │ │ │ ├── CodeBlock.astro +│ │ │ │ └── index.ts +│ │ │ ├── props-table/ +│ │ │ │ ├── PropsTable.astro +│ │ │ │ └── index.ts +│ │ │ ├── slots-table/ +│ │ │ │ ├── SlotsTable.astro +│ │ │ │ └── index.ts +│ │ │ ├── events-table/ +│ │ │ │ ├── EventsTable.astro +│ │ │ │ └── index.ts +│ │ │ ├── token-table/ +│ │ │ │ ├── TokenTable.astro +│ │ │ │ └── index.ts +│ │ │ ├── anatomy-block/ +│ │ │ │ ├── AnatomyBlock.vue +│ │ │ │ └── index.ts +│ │ │ ├── do-dont/ +│ │ │ │ ├── DoDont.vue +│ │ │ │ └── index.ts +│ │ │ ├── callout/ +│ │ │ │ ├── Callout.astro +│ │ │ │ └── index.ts +│ │ │ ├── tabs/ +│ │ │ │ ├── Tabs.vue +│ │ │ │ ├── Tab.vue +│ │ │ │ └── index.ts +│ │ │ ├── related-links/ +│ │ │ │ ├── RelatedLinks.astro +│ │ │ │ └── index.ts +│ │ │ ├── metadata-links/ +│ │ │ │ ├── MetadataLinks.astro +│ │ │ │ └── index.ts +│ │ │ └── index.ts # Barrel export +│ │ │ +│ │ └── ui/ # Shared UI primitives +│ │ ├── button/ +│ │ ├── input/ +│ │ └── index.ts +│ │ +│ ├── layouts/ # Page layouts +│ │ ├── BaseLayout.astro +│ │ ├── ComponentLayout.astro +│ │ ├── FoundationLayout.astro +│ │ ├── TokenLayout.astro +│ │ └── PlaygroundLayout.astro +│ │ +│ ├── pages/ # File-based routing +│ │ ├── index.astro # Homepage +│ │ ├── [lang]/ # i18n routing +│ │ │ ├── index.astro +│ │ │ ├── get-started/ +│ │ │ │ └── [...slug].astro +│ │ │ ├── foundations/ +│ │ │ │ └── [...slug].astro +│ │ │ ├── tokens/ +│ │ │ │ └── [...slug].astro +│ │ │ ├── components/ +│ │ │ │ └── [...slug].astro +│ │ │ ├── blocks/ +│ │ │ │ └── [...slug].astro +│ │ │ ├── patterns/ +│ │ │ │ └── [...slug].astro +│ │ │ ├── templates/ +│ │ │ │ └── [...slug].astro +│ │ │ ├── icons/ +│ │ │ │ └── index.astro +│ │ │ ├── playground/ +│ │ │ │ └── index.astro +│ │ │ └── contributing/ +│ │ │ └── [...slug].astro +│ │ └── [version]/ # Version routing (wraps lang) +│ │ └── [lang]/ +│ │ └── ... +│ │ +│ ├── styles/ # Global styles +│ │ ├── global.css +│ │ ├── prose.css # Typography for markdown +│ │ └── tokens.css # CSS custom properties +│ │ +│ ├── utils/ # Utility functions +│ │ ├── content.ts # Content helpers +│ │ ├── navigation.ts # Navigation generation +│ │ ├── search.ts # Search utilities +│ │ └── i18n.ts # i18n helpers +│ │ +│ └── integrations/ # Astro integrations +│ ├── vue.ts +│ └── search-indexer.ts +│ +├── content/ # Markdown content +│ ├── config.ts # Content collection schemas +│ │ +│ ├── en/ # English content +│ │ ├── get-started/ +│ │ │ ├── index.md +│ │ │ ├── installation.md +│ │ │ └── quick-start.md +│ │ ├── foundations/ +│ │ │ ├── index.md +│ │ │ ├── color.md +│ │ │ ├── typography.md +│ │ │ ├── spacing.md +│ │ │ ├── elevation.md +│ │ │ └── motion.md +│ │ ├── tokens/ +│ │ │ ├── index.md +│ │ │ ├── color-tokens.md +│ │ │ ├── typography-tokens.md +│ │ │ └── spacing-tokens.md +│ │ ├── components/ +│ │ │ ├── index.md +│ │ │ ├── button.md +│ │ │ ├── input.md +│ │ │ ├── select.md +│ │ │ └── ... +│ │ ├── blocks/ +│ │ │ ├── index.md +│ │ │ └── ... +│ │ ├── patterns/ +│ │ │ ├── index.md +│ │ │ └── ... +│ │ ├── templates/ +│ │ │ ├── index.md +│ │ │ └── ... +│ │ ├── icons/ +│ │ │ └── index.md +│ │ ├── playground/ +│ │ │ └── index.md +│ │ └── contributing/ +│ │ ├── index.md +│ │ ├── guidelines.md +│ │ └── pull-requests.md +│ │ +│ └── pt/ # Portuguese content +│ └── (mirrors en/ structure) +│ +├── data/ # Generated/manifest data +│ ├── navigation.json # Navigation structure +│ ├── component-meta.json # Component metadata +│ ├── token-manifest.json # Token data +│ └── search-index/ +│ ├── en.json +│ └── pt.json +│ +├── playground/ # Playground infrastructure +│ ├── controls/ # Control components +│ │ ├── BooleanControl.vue +│ │ ├── SelectControl.vue +│ │ ├── TextControl.vue +│ │ └── NumberControl.vue +│ ├── registry/ # Component registry +│ │ └── index.ts +│ └── preview/ # Preview rendering +│ └── PreviewRenderer.vue +│ +├── scripts/ # Build scripts +│ ├── generate-navigation.ts +│ ├── generate-search-index.ts +│ └── extract-component-meta.ts +│ +└── i18n/ # i18n configuration + ├── config.json + ├── en.json # UI strings + └── pt.json # UI strings +``` + +### Key Directory Purposes + +| Directory | Purpose | +|-----------|---------| +| `src/components/docs/` | Documentation-specific UI components that render inside markdown pages | +| `src/components/ui/` | Primitive UI components used by docs app (not DS components) | +| `src/layouts/` | Page structure templates that wrap content | +| `src/pages/` | Astro file-based routing with dynamic routes for i18n/versioning | +| `content/` | All markdown content organized by language | +| `data/` | Generated manifests and search indices | +| `playground/` | Interactive playground infrastructure | +| `i18n/` | UI string translations (not content) | + +--- + +## 3. Content Model + +### Content Collection Schema + +```typescript +// content/config.ts +import { defineCollection, z } from 'astro:content'; + +// Base frontmatter schema (shared across all page types) +const baseSchema = z.object({ + title: z.string(), + description: z.string(), + status: z.enum(['stable', 'beta', 'deprecated', 'planned', 'experimental']).optional(), + version: z.string().optional(), // Added in version + deprecatedIn: z.string().optional(), // Deprecated in version + removedIn: z.string().optional(), // Removed in version + since: z.string().optional(), // Available since version + contributors: z.array(z.string()).optional(), + lastUpdated: z.date().optional(), +}); + +// Component page schema +const componentSchema = baseSchema.extend({ + type: z.literal('component'), + category: z.enum(['form', 'navigation', 'feedback', 'data-display', 'layout', 'utility']), + component: z.string(), // Component name for import + source: z.string().optional(), // Source code link + storybook: z.string().optional(), // Storybook link + figma: z.string().optional(), // Figma link + related: z.array(z.string()).optional(), // Related component names + anatomy: z.array(z.object({ + label: z.string(), + description: z.string().optional(), + })).optional(), + accessibility: z.object({ + keyboard: z.array(z.object({ + keys: z.string(), + action: z.string(), + })).optional(), + aria: z.array(z.object({ + attribute: z.string(), + usage: z.string(), + })).optional(), + }).optional(), +}); + +// Foundation page schema +const foundationSchema = baseSchema.extend({ + type: z.literal('foundation'), + category: z.enum(['color', 'typography', 'spacing', 'elevation', 'motion', 'imagery']), +}); + +// Token page schema +const tokenSchema = baseSchema.extend({ + type: z.literal('token'), + category: z.enum(['color', 'typography', 'spacing', 'elevation', 'motion', 'border', 'shadow']), + tokens: z.array(z.object({ + name: z.string(), + value: z.string(), + description: z.string().optional(), + })).optional(), +}); + +// Block page schema +const blockSchema = baseSchema.extend({ + type: z.literal('block'), + category: z.string(), + components: z.array(z.string()).optional(), // Components used in block +}); + +// Pattern page schema +const patternSchema = baseSchema.extend({ + type: z.literal('pattern'), + category: z.string(), + useCases: z.array(z.string()).optional(), +}); + +// Template page schema +const templateSchema = baseSchema.extend({ + type: z.literal('template'), + category: z.string(), + blocks: z.array(z.string()).optional(), +}); + +// Getting started page schema +const guideSchema = baseSchema.extend({ + type: z.literal('guide'), + category: z.enum(['installation', 'quick-start', 'migration', 'contribution']), + prerequisites: z.array(z.string()).optional(), + difficulty: z.enum(['beginner', 'intermediate', 'advanced']).optional(), +}); + +// Icon page schema +const iconSchema = baseSchema.extend({ + type: z.literal('icon'), + category: z.enum(['azionicons', 'primeicons']), +}); + +// Contributing page schema +const contributingSchema = baseSchema.extend({ + type: z.literal('contributing'), + category: z.enum(['guidelines', 'development', 'documentation', 'pull-requests']), +}); + +// Define collections +const components = defineCollection({ + type: 'content', + schema: componentSchema, +}); + +const foundations = defineCollection({ + type: 'content', + schema: foundationSchema, +}); + +const tokens = defineCollection({ + type: 'content', + schema: tokenSchema, +}); + +const blocks = defineCollection({ + type: 'content', + schema: blockSchema, +}); + +const patterns = defineCollection({ + type: 'content', + schema: patternSchema, +}); + +const templates = defineCollection({ + type: 'content', + schema: templateSchema, +}); + +const getStarted = defineCollection({ + type: 'content', + schema: guideSchema, +}); + +const icons = defineCollection({ + type: 'content', + schema: iconSchema, +}); + +const contributing = defineCollection({ + type: 'content', + schema: contributingSchema, +}); + +export const collections = { + components, + foundations, + tokens, + blocks, + patterns, + templates, + 'get-started': getStarted, + icons, + contributing, +}; +``` + +### Frontmatter Examples + +**Component Page:** + +```yaml +--- +title: Button +description: Buttons trigger actions and events when users interact with them. +type: component +category: form +status: stable +since: 1.0.0 +component: Button +source: https://github.com/aziontech/webkit/tree/main/packages/components/src/Button +storybook: https://storybook.azion.com/?path=/story/components-button +figma: https://figma.com/file/xxx/azion-design-system?node-id=123 +related: + - ButtonGroup + - IconButton + - Link +anatomy: + - label: Container + description: The button's clickable area with background and border + - label: Label + description: The text content of the button + - label: Icon (optional) + description: An optional icon for visual emphasis +accessibility: + keyboard: + - keys: Enter + action: Activates the button + - keys: Space + action: Activates the button + aria: + - attribute: aria-disabled + usage: When disabled, use instead of disabled attribute for screen readers +--- +``` + +**Foundation Page:** + +```yaml +--- +title: Color +description: Color system for Azion Design System including semantic and primitive colors. +type: foundation +category: color +status: stable +since: 1.0.0 +--- +``` + +**Token Page:** + +```yaml +--- +title: Color Tokens +description: Semantic color tokens for consistent theming across applications. +type: token +category: color +status: stable +since: 1.0.0 +tokens: + - name: --color-primary + value: "#0066CC" + description: Primary brand color for main actions + - name: --color-primary-hover + value: "#0052A3" + description: Primary color hover state +--- +``` + +### Markdown Authoring Conventions + +**1. Import Statements at Top** + +All imports must be at the top of the markdown file, immediately after frontmatter: + +```markdown +--- +title: Button +--- + +import { Demo } from '@/components/docs'; +import { Button, ButtonGroup } from '@aziontech/components'; + +# Button +``` + +**2. Heading Hierarchy** + +- H1 (`#`) is reserved for page title (auto-generated from frontmatter) +- H2 (`##`) for major sections +- H3 (`###`) for subsections +- Never skip heading levels + +**3. Component Demos** + +Demos are inline and self-contained: + +```markdown +## Examples + +### Primary Button + + + + + +### Secondary Button + + + + +``` + +**4. Code Blocks** + +Use fenced code blocks with language specification: + +````markdown +```vue + +``` +```` + +**5. Callouts** + +```markdown + + This component requires the theme package to be installed. + + + + Deprecated in v2.0. Use ButtonV2 instead. + +``` + +**6. Do/Don't Patterns** + +```markdown + + + Use buttons for primary actions. + + + + Use buttons for navigation. + + + +``` + +### Content Consistency Rules + +**Required Sections by Page Type:** + +| Page Type | Required Sections | +|-----------|------------------| +| Component | Overview, When to use, Examples, API | +| Foundation | Overview, Principles, Values | +| Token | Overview, Usage, Token Reference | +| Block | Overview, When to use, Composition, Examples | +| Pattern | Overview, Problem, Solution, Examples | +| Template | Overview, Use Cases, Composition | + +**Prohibited Patterns:** + +1. **No inline styles in markdown** - Use components with props +2. **No raw HTML** - Use markdown syntax or components +3. **No hardcoded values** - Reference tokens +4. **No duplicate content** - Use links to canonical sources +5. **No undocumented demos** - Every demo needs context + +### Scalable Content Authoring + +**Component Registry Pattern:** + +Instead of importing components in every markdown file, use a registry: + +```typescript +// src/utils/component-registry.ts +import { Button, Input, Select } from '@aziontech/components'; + +export const componentRegistry = { + Button, + Input, + Select, +}; + +export type ComponentName = keyof typeof componentRegistry; +``` + +**Demo Component with Registry:** + +```vue + + + + +``` + +--- + +## 4. Page Templates and Information Architecture + +### Navigation Structure + +``` +Get Started +├── Introduction +├── Installation +├── Quick Start +└── Migration + +Foundations +├── Color +├── Typography +├── Spacing +├── Elevation +├── Motion +└── Imagery + +Tokens +├── Color Tokens +├── Typography Tokens +├── Spacing Tokens +├── Border Tokens +└── Shadow Tokens + +Components +├── Form +│ ├── Button +│ ├── Input +│ ├── Select +│ └── ... +├── Navigation +│ ├── Tabs +│ ├── Breadcrumb +│ └── ... +├── Feedback +│ ├── Alert +│ ├── Toast +│ └── ... +└── Data Display + ├── Table + ├── Card + └── ... + +Blocks +├── Headers +├── Forms +├── Cards +└── ... + +Patterns +├── Form Patterns +├── Navigation Patterns +└── ... + +Templates +├── Dashboard +├── Settings Page +└── ... + +Icons +└── Icon Gallery + +Playground +└── Component Playground + +Contributing +├── Guidelines +├── Development +├── Documentation +└── Pull Requests +``` + +### Page Template Definitions + +#### Component Page + +**Purpose:** Document a single Design System component with comprehensive API reference. + +**Layout:** + +``` +┌─────────────────────────────────────────────────────────────┐ +│ Sidebar Navigation │ Main Content Area │ +│ │ │ +│ - Get Started │ ┌──────────────────────────────┐ │ +│ - Foundations │ │ Page Header │ │ +│ - Tokens │ │ Button [stable] │ │ +│ - Components │ │ Description... │ │ +│ - Form │ │ [Source] [Storybook] [Figma] │ │ +│ - Button │ └──────────────────────────────┘ │ +│ - Input │ │ +│ - Select │ ┌──────────────────────────────┐ │ +│ - Navigation │ │ Tabs: Overview | API │ │ +│ ... │ └──────────────────────────────┘ │ +│ │ │ +│ │ Overview Tab Content: │ +│ │ - When to use │ +│ │ - Anatomy │ +│ │ - Examples │ +│ │ - States │ +│ │ - Accessibility │ +│ │ - Related │ +│ │ │ +└─────────────────────────────────────────────────────────────┘ +``` + +**Sections:** + +| Section | Required | Description | +|---------|----------|-------------| +| Page Header | Yes | Title, status, description, metadata links | +| Tabs | Yes | Overview / API tabs | +| When to Use | Yes | Use cases and scenarios | +| Anatomy | Yes | Visual breakdown of component parts | +| Examples | Yes | Interactive demos with code | +| States | Recommended | Visual states (hover, focus, disabled, etc.) | +| Accessibility | Yes | Keyboard navigation, ARIA attributes | +| API | Yes | Props, slots, events tables | +| Related | Recommended | Links to related components | + +**Required Metadata:** + +```yaml +title: string +description: string +type: component +category: string +status: stable | beta | deprecated | planned +component: string +``` + +**Optional Metadata:** + +```yaml +source: string +storybook: string +figma: string +related: string[] +since: string +deprecatedIn: string +``` + +--- + +#### Foundation Page + +**Purpose:** Document design principles and guidelines for foundational concepts. + +**Layout:** + +``` +┌─────────────────────────────────────────────────────────────┐ +│ Sidebar Navigation │ Main Content Area │ +│ │ │ +│ │ ┌──────────────────────────────┐ │ +│ │ │ Page Header │ │ +│ │ │ Color │ │ +│ │ │ Description... │ │ +│ │ └──────────────────────────────┘ │ +│ │ │ +│ │ ## Principles │ +│ │ Content about principles... │ +│ │ │ +│ │ ## System │ +│ │ Color system explanation... │ +│ │ │ +│ │ ## Usage │ +│ │ Guidelines for usage... │ +│ │ │ +│ │ ## Token Reference │ +│ │ Link to token page... │ +│ │ │ +└─────────────────────────────────────────────────────────────┘ +``` + +**Sections:** + +| Section | Required | Description | +|---------|----------|-------------| +| Page Header | Yes | Title, description | +| Principles | Yes | Core design principles | +| System | Yes | How the system works | +| Usage | Yes | Practical guidelines | +| Token Reference | Recommended | Link to related tokens | + +**Required Metadata:** + +```yaml +title: string +description: string +type: foundation +category: string +``` + +--- + +#### Token Page + +**Purpose:** Document design tokens with values and usage guidelines. + +**Layout:** + +``` +┌─────────────────────────────────────────────────────────────┐ +│ Sidebar Navigation │ Main Content Area │ +│ │ │ +│ │ ┌──────────────────────────────┐ │ +│ │ │ Page Header │ │ +│ │ │ Color Tokens │ │ +│ │ └──────────────────────────────┘ │ +│ │ │ +│ │ ## Overview │ +│ │ Token overview... │ +│ │ │ +│ │ ## Usage │ +│ │ How to use tokens... │ +│ │ │ +│ │ ## Token Reference │ +│ │ ┌────────────────────────────┐ │ +│ │ │ Token Table │ │ +│ │ │ Name | Value | Description │ │ +│ │ └────────────────────────────┘ │ +│ │ │ +└─────────────────────────────────────────────────────────────┘ +``` + +**Sections:** + +| Section | Required | Description | +|---------|----------|-------------| +| Page Header | Yes | Title, description | +| Overview | Yes | Token category overview | +| Usage | Yes | How to use tokens in code | +| Token Reference | Yes | Table of all tokens | + +**Required Metadata:** + +```yaml +title: string +description: string +type: token +category: string +``` + +--- + +#### Block Page + +**Purpose:** Document composite UI blocks built from multiple components. + +**Sections:** + +| Section | Required | Description | +|---------|----------|-------------| +| Page Header | Yes | Title, description, status | +| Overview | Yes | What the block does | +| When to Use | Yes | Appropriate use cases | +| Composition | Yes | Components that make up the block | +| Examples | Yes | Interactive demos | +| API | Recommended | Customization options | + +--- + +#### Pattern Page + +**Purpose:** Document recurring design patterns and solutions. + +**Sections:** + +| Section | Required | Description | +|---------|----------|-------------| +| Page Header | Yes | Title, description | +| Overview | Yes | Pattern overview | +| Problem | Yes | What problem it solves | +| Solution | Yes | How the pattern works | +| Examples | Yes | Real implementations | +| Related | Recommended | Related patterns | + +--- + +#### Template Page + +**Purpose:** Document full page templates. + +**Sections:** + +| Section | Required | Description | +|---------|----------|-------------| +| Page Header | Yes | Title, description | +| Overview | Yes | Template overview | +| Use Cases | Yes | When to use this template | +| Composition | Yes | Blocks and components used | +| Examples | Yes | Preview and code | + +--- + +#### Icon Page + +**Purpose:** Display and document the icon library. + +**Layout:** + +``` +┌─────────────────────────────────────────────────────────────┐ +│ Sidebar Navigation │ Main Content Area │ +│ │ │ +│ │ ┌──────────────────────────────┐ │ +│ │ │ Page Header │ │ +│ │ │ Icons │ │ +│ │ └──────────────────────────────┘ │ +│ │ │ +│ │ ┌──────────────────────────────┐ │ +│ │ │ Search Bar │ │ +│ │ └──────────────────────────────┘ │ +│ │ │ +│ │ ┌──────────────────────────────┐ │ +│ │ │ Icon Grid │ │ +│ │ │ [icon] [icon] [icon] [icon] │ │ +│ │ │ [icon] [icon] [icon] [icon] │ │ +│ │ └──────────────────────────────┘ │ +│ │ │ +└─────────────────────────────────────────────────────────────┘ +``` + +**Sections:** + +| Section | Required | Description | +|---------|----------|-------------| +| Page Header | Yes | Title, description | +| Search | Yes | Filter icons by name | +| Icon Grid | Yes | Visual display of all icons | +| Usage Guide | Yes | How to use icons | + +--- + +#### Playground Page + +**Purpose:** Interactive component playground for experimentation. + +**Layout:** + +``` +┌─────────────────────────────────────────────────────────────┐ +│ Component Select │ Preview Area │ +│ [Button ▼] │ │ +│ │ ┌──────────────────────────────┐ │ +│ Controls │ │ │ │ +│ ┌───────────────────┐ │ │ [Button Preview] │ │ +│ │ Variant: [select] │ │ │ │ │ +│ │ Size: [select] │ │ └──────────────────────────────┘ │ +│ │ Disabled: [bool] │ │ │ +│ │ Label: [text] │ │ Code Output │ +│ └───────────────────┘ │ ┌──────────────────────────────┐ │ +│ │ │ │ │ +│ │ └──────────────────────────────┘ │ +│ │ │ +└─────────────────────────────────────────────────────────────┘ +``` + +--- + +#### Getting Started Page + +**Purpose:** Onboarding and quick start guides. + +**Sections:** + +| Section | Required | Description | +|---------|----------|-------------| +| Page Header | Yes | Title, description | +| Prerequisites | Recommended | Required setup | +| Steps | Yes | Numbered instructions | +| Next Steps | Recommended | Where to go next | + +--- + +#### Contributing Page + +**Purpose:** Contribution guidelines and processes. + +**Sections:** + +| Section | Required | Description | +|---------|----------|-------------| +| Page Header | Yes | Title, description | +| Guidelines | Yes | Contribution rules | +| Process | Yes | Step-by-step process | +| Code Standards | Yes | Coding conventions | + +--- + +## 5. Documentation-Specific Component System + +### Component Categories + +``` +Documentation Components +├── Page Structure +│ ├── PageHeader +│ ├── MetadataLinks +│ └── RelatedLinks +├── Status & Versioning +│ ├── StatusBadge +│ └── VersionBadge +├── Navigation +│ ├── Tabs +│ └── TableOfContents +├── Demo & Code +│ ├── DemoPreview +│ ├── CodeBlock +│ └── LiveEditor +├── API Reference +│ ├── PropsTable +│ ├── SlotsTable +│ ├── EventsTable +│ └── TokenTable +├── Visual Documentation +│ ├── AnatomyBlock +│ ├── DoDont +│ └── Swatch +├── Callouts +│ ├── Callout +│ └── AccessibilityChecklist +└── Playground + ├── PlaygroundControls + └── PreviewRenderer +``` + +### Component Specifications + +#### PageHeader + +**Responsibility:** Display page title, status, description, and metadata links. + +**Props:** + +```typescript +interface PageHeaderProps { + title: string; + description: string; + status?: 'stable' | 'beta' | 'deprecated' | 'planned' | 'experimental'; + version?: string; + metadataLinks?: { + source?: string; + storybook?: string; + figma?: string; + design?: string; + }; +} +``` + +**Usage in Markdown:** + +```markdown +--- +title: Button +description: Buttons trigger actions... +status: stable +--- + + +``` + +**Reusability:** Used by all page templates via layout components. + +--- + +#### StatusBadge + +**Responsibility:** Display component status with appropriate styling. + +**Props:** + +```typescript +interface StatusBadgeProps { + status: 'stable' | 'beta' | 'deprecated' | 'planned' | 'experimental'; + version?: string; +} +``` + +**Visual States:** + +| Status | Color | Icon | +|--------|-------|------| +| stable | green | checkmark | +| beta | blue | beaker | +| deprecated | orange | warning | +| planned | gray | clock | +| experimental | purple | flask | + +--- + +#### MetadataLinks + +**Responsibility:** Display links to external resources (source, Storybook, Figma). + +**Props:** + +```typescript +interface MetadataLinksProps { + source?: string; + storybook?: string; + figma?: string; + design?: string; +} +``` + +--- + +#### Tabs + +**Responsibility:** Tabbed navigation for content sections. + +**Props:** + +```typescript +interface TabsProps { + defaultTab?: string; + persistKey?: string; // For URL persistence +} +``` + +**Usage:** + +```markdown + + + Overview content... + + + API content... + + +``` + +--- + +#### DemoPreview + +**Responsibility:** Render component demos with optional code display. + +**Props:** + +```typescript +interface DemoPreviewProps { + title?: string; + showCode?: boolean; + codeLanguage?: string; + responsive?: boolean; + backgroundColor?: string; +} +``` + +**Usage:** + +```markdown + + + +``` + +**Hydration Strategy:** Client-side hydration for interactive demos. + +--- + +#### CodeBlock + +**Responsibility:** Syntax-highlighted code display with copy functionality. + +**Props:** + +```typescript +interface CodeBlockProps { + code: string; + language: string; + filename?: string; + showCopy?: boolean; + showLineNumbers?: boolean; +} +``` + +--- + +#### PropsTable + +**Responsibility:** Display component props in a structured table. + +**Props:** + +```typescript +interface PropsTableProps { + component: string; // Component name to look up + props?: PropDefinition[]; // Or explicit props +} + +interface PropDefinition { + name: string; + type: string; + default?: string; + required: boolean; + description: string; +} +``` + +**Usage:** + +```markdown + +``` + +**Data Source:** Extracted from component TypeScript definitions or JSDoc comments. + +--- + +#### SlotsTable + +**Responsibility:** Display component slots documentation. + +**Props:** + +```typescript +interface SlotsTableProps { + component: string; + slots?: SlotDefinition[]; +} + +interface SlotDefinition { + name: string; + description: string; + props?: string; // Props available in slot scope +} +``` + +--- + +#### EventsTable + +**Responsibility:** Display component events documentation. + +**Props:** + +```typescript +interface EventsTableProps { + component: string; + events?: EventDefinition[]; +} + +interface EventDefinition { + name: string; + payload: string; // Type definition + description: string; +} +``` + +--- + +#### TokenTable + +**Responsibility:** Display design tokens with values and descriptions. + +**Props:** + +```typescript +interface TokenTableProps { + category: string; // Token category to display + tokens?: TokenDefinition[]; +} + +interface TokenDefinition { + name: string; + value: string; + cssVariable: string; + description?: string; +} +``` + +--- + +#### AnatomyBlock + +**Responsibility:** Visual breakdown of component anatomy with labeled parts. + +**Props:** + +```typescript +interface AnatomyBlockProps { + image: string; // Anatomy diagram + parts: AnatomyPart[]; +} + +interface AnatomyPart { + label: string; + description?: string; + position: { x: number; y: number }; // For annotation placement +} +``` + +--- + +#### DoDont + +**Responsibility:** Display do's and don'ts side by side. + +**Props:** + +```typescript +interface DoDontProps { + // No props, uses slots +} +``` + +**Usage:** + +```markdown + + + Use for primary actions. + + + + Use for navigation. + + + +``` + +--- + +#### Callout + +**Responsibility:** Highlight important information. + +**Props:** + +```typescript +interface CalloutProps { + type: 'info' | 'warning' | 'error' | 'success' | 'tip'; + title?: string; +} +``` + +**Usage:** + +```markdown + + This component is deprecated. Use ButtonV2 instead. + +``` + +--- + +#### RelatedLinks + +**Responsibility:** Display links to related content. + +**Props:** + +```typescript +interface RelatedLinksProps { + links: RelatedLink[]; +} + +interface RelatedLink { + title: string; + description?: string; + href: string; + type?: 'component' | 'pattern' | 'foundation' | 'external'; +} +``` + +--- + +#### AccessibilityChecklist + +**Responsibility:** Display accessibility requirements checklist. + +**Props:** + +```typescript +interface AccessibilityChecklistProps { + items: AccessibilityItem[]; +} + +interface AccessibilityItem { + requirement: string; + wcagLevel: 'A' | 'AA' | 'AAA'; + status?: 'pass' | 'fail' | 'na'; +} +``` + +--- + +### Component Interaction with Markdown + +All documentation components are registered with Astro's markdown renderer: + +```typescript +// src/utils/markdown-components.ts +import PageHeader from '@/components/docs/page-header/PageHeader.vue'; +import StatusBadge from '@/components/docs/status-badge/StatusBadge.vue'; +import DemoPreview from '@/components/docs/demo-preview/DemoPreview.vue'; +import CodeBlock from '@/components/docs/code-block/CodeBlock.astro'; +import PropsTable from '@/components/docs/props-table/PropsTable.astro'; +import Callout from '@/components/docs/callout/Callout.astro'; +import DoDont from '@/components/docs/do-dont/DoDont.vue'; +import Tabs from '@/components/docs/tabs/Tabs.vue'; +import Tab from '@/components/docs/tabs/Tab.vue'; + +export const markdownComponents = { + PageHeader, + StatusBadge, + Demo: DemoPreview, + CodeBlock, + PropsTable, + Callout, + DoDont, + Tabs, + Tab, +}; +``` + +--- + +## 6. Vue Integration Strategy + +### Rendering Strategy + +Astro supports Vue components through the `@astrojs/vue` integration. The key is understanding when to use server-side rendering vs. client-side hydration. + +**Decision Matrix:** + +| Component Type | Rendering | Hydration | Reason | +|---------------|-----------|-----------|--------| +| PageHeader | Server | None | Static content | +| StatusBadge | Server | None | Static display | +| DemoPreview | Server | `client:load` | Interactive | +| CodeBlock | Server | `client:visible` | Copy button | +| PropsTable | Server | None | Static data | +| Tabs | Server | `client:load` | Interactive | +| Callout | Server | None | Static content | +| Playground | Server | `client:only` | Highly interactive | + +### Hydration Directives + +```astro +--- +import DemoPreview from '@/components/docs/demo-preview/DemoPreview.vue'; +import PropsTable from '@/components/docs/props-table/PropsTable.astro'; +--- + + + + + + + + + + + + + + +``` + +### Vue Component Wrapper Pattern + +For Design System Vue components used in markdown: + +```typescript +// src/components/docs/demo-preview/DemoPreview.vue + + + +``` + +### Performance Considerations + +**1. Minimize Hydration** + +Only hydrate components that need interactivity: + +```astro + + + + + + + + + +``` + +**2. Use `client:visible` for Below-fold Content** + +```astro + + +``` + +**3. Use `client:only` for Heavy Interactive Components** + +```astro + + +``` + +### Compatibility Strategy for Unready Components + +**Problem:** Not all DS components exist yet. + +**Solution: Placeholder/Stub System** + +```typescript +// src/utils/component-registry.ts +import { defineAsyncComponent } from 'vue'; + +// Real components (when available) +import { Button } from '@aziontech/components'; + +// Stub components for planned/in-progress +const Input = defineAsyncComponent(() => + import('@/components/stubs/InputStub.vue') +); + +const Select = defineAsyncComponent(() => + import('@/components/stubs/SelectStub.vue') +); + +export const componentRegistry = { + // Available + Button, + + // Planned/In-progress (stubs) + Input, + Select, + + // Planned (not started) + DatePicker: null, // Shows "Coming Soon" placeholder +}; + +export function getComponent(name: string) { + const component = componentRegistry[name]; + + if (component === null) { + return () => import('@/components/stubs/PlannedStub.vue'); + } + + if (component === undefined) { + return () => import('@/components/stubs/UnknownStub.vue'); + } + + return component; +} +``` + +**Stub Component Example:** + +```vue + + + + + + +``` + +--- + +## 7. Theming and Design Token Integration + +### Dependency Strategy + +**Phase 1: No Theme Package (Current)** + +Use local tokens and Tailwind configuration: + +```javascript +// apps/ds-docs/tailwind.config.js +import { primitiveColors } from 'azion-theme/src/tokens/colors-primitive'; + +export default { + theme: { + extend: { + colors: { + ...primitiveColors, + // Docs-specific colors + 'docs-primary': '#0066CC', + 'docs-surface': '#FFFFFF', + }, + }, + }, +}; +``` + +**Phase 2: Theme Package Available** + +```javascript +// apps/ds-docs/tailwind.config.js +import tokens from '@aziontech/theme/tokens'; + +export default { + presets: [ + require('@aziontech/theme/tailwind-preset'), + ], + theme: { + extend: { + // Docs-specific overrides only + }, + }, +}; +``` + +### Token Usage Strategy + +**CSS Custom Properties:** + +```css +/* src/styles/tokens.css */ +:root { + /* From theme package */ + --color-primary: var(--azion-color-primary, #0066CC); + --color-secondary: var(--azion-color-secondary, #6B7280); + + /* Docs-specific tokens */ + --docs-sidebar-width: 280px; + --docs-content-max-width: 800px; + --docs-header-height: 64px; +} +``` + +**Tailwind Integration:** + +```javascript +// tailwind.config.js +export default { + theme: { + extend: { + colors: { + primary: 'var(--color-primary)', + secondary: 'var(--color-secondary)', + }, + spacing: { + 'docs-sidebar': 'var(--docs-sidebar-width)', + 'docs-header': 'var(--docs-header-height)', + }, + }, + }, +}; +``` + +### Consistency Enforcement + +**1. Use Semantic Tokens, Not Primitives** + +```css +/* Bad: Using primitive colors directly */ +.button { + background-color: #0066CC; +} + +/* Good: Using semantic tokens */ +.button { + background-color: var(--color-primary); +} +``` + +**2. Token Documentation Sync** + +```typescript +// scripts/sync-tokens.ts +import { readFileSync, writeFileSync } from 'fs'; +import tokens from '@aziontech/theme/tokens'; + +// Generate token documentation +const tokenDocs = Object.entries(tokens).map(([name, value]) => ({ + name, + value, + cssVariable: `--${name.replace(/\./g, '-')}`, +})); + +writeFileSync( + 'data/token-manifest.json', + JSON.stringify(tokenDocs, null, 2) +); +``` + +**3. Visual Regression Testing** + +Use visual regression tests to ensure docs styling matches DS: + +```typescript +// tests/visual/docs-styling.test.ts +import { test, expect } from '@playwright/test'; + +test('docs button matches DS button', async ({ page }) => { + await page.goto('/components/button'); + + // Compare docs button with reference + const button = page.locator('.demo-preview button').first(); + expect(await button.screenshot()).toMatchSnapshot('button.png'); +}); +``` + +### Fallback Strategy + +When theme package is unavailable: + +```typescript +// src/utils/tokens.ts +let tokens: TokenSet; + +try { + tokens = await import('@aziontech/theme/tokens'); +} catch { + // Fallback to local tokens + tokens = await import('@/styles/fallback-tokens'); +} + +export { tokens }; +``` + +--- + +## 8. Versioning Strategy + +### Route Model + +**URL Structure:** + +``` +/ → Redirects to /latest/en/ +/latest/en/ → Latest version, English +/latest/pt/ → Latest version, Portuguese +/v1/en/components/button → Version 1, English +/v2/en/components/button → Version 2, English +``` + +**Route Parameters:** + +```typescript +// src/pages/[version]/[lang]/[...slug].astro +--- +const { version, lang, slug } = Astro.params; + +const versionParam = version === 'latest' + ? await getLatestVersion() + : version; + +const entry = await getCollection('components', ({ id }) => + id.startsWith(`${lang}/${slug.join('/')}`) && + getVersion(entry) === versionParam +); +--- +``` + +### Content Organization Model + +``` +content/ +├── en/ → Current version content +│ ├── components/ +│ └── ... +├── pt/ → Current version content +│ └── ... +└── versions/ → Archived versions + ├── v1/ + │ ├── en/ + │ └── pt/ + └── v2/ + ├── en/ + └── pt/ +``` + +**Alternative: Branch-based Versioning** + +``` +main branch → Latest documentation +v1 branch → Version 1 documentation +v2 branch → Version 2 documentation +``` + +### Version Configuration + +```typescript +// src/utils/versioning.ts +export interface VersionConfig { + name: string; + label: string; + path: string; + status: 'current' | 'legacy' | 'archived'; + releaseDate: string; + endOfLife?: string; +} + +export const versions: VersionConfig[] = [ + { + name: 'v2', + label: 'Version 2', + path: '/v2', + status: 'current', + releaseDate: '2024-01-15', + }, + { + name: 'v1', + label: 'Version 1', + path: '/v1', + status: 'legacy', + releaseDate: '2023-06-01', + endOfLife: '2024-06-01', + }, +]; + +export function getLatestVersion(): VersionConfig { + return versions.find(v => v.status === 'current')!; +} +``` + +### Navigation Across Versions + +**Version Selector Component:** + +```vue + + + + +``` + +### Search Across Versions + +**Index Structure:** + +```json +{ + "en": { + "v2": { /* index */ }, + "v1": { /* index */ } + }, + "pt": { + "v2": { /* index */ }, + "v1": { /* index */ } + } +} +``` + +**Search Behavior:** + +1. Default search: Current version only +2. Option to include all versions +3. Results clearly labeled with version + +### Maintenance Overhead Reduction + +**1. Shared Content** + +Content that doesn't change between versions is symlinked: + +```bash +# In content/versions/v1/en +ln -s ../../../en/foundations foundations +``` + +**2. Automated Versioning** + +```yaml +# .github/workflows/version-docs.yml +name: Version Documentation +on: + release: + types: [published] + +jobs: + version: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + + - name: Create version snapshot + run: | + cp -r content/en content/versions/${{ github.event.release.tag_name }}/en + cp -r content/pt content/versions/${{ github.event.release.tag_name }}/pt + + - name: Update version config + run: | + # Update src/utils/versioning.ts + + - name: Create PR + # ... +``` + +--- + +## 9. i18n Strategy + +### Route Structure + +**URL Pattern:** + +``` +/ → Redirects based on browser language +/en/ → English homepage +/pt/ → Portuguese homepage +/en/components/ → English components +/pt/components/ → Portuguese components +``` + +**Astro i18n Configuration:** + +```typescript +// astro.config.mjs +import { defineConfig } from 'astro/config'; +import vue from '@astrojs/vue'; + +export default defineConfig({ + integrations: [vue()], + i18n: { + defaultLocale: 'en', + locales: ['en', 'pt'], + routing: { + prefixDefaultLocale: true, + }, + }, +}); +``` + +### Content Organization + +``` +content/ +├── en/ +│ ├── get-started/ +│ ├── foundations/ +│ ├── components/ +│ └── ... +└── pt/ + ├── get-started/ + ├── foundations/ + ├── components/ + └── ... +``` + +### UI Strings vs Content + +**UI Strings (i18n/):** + +```json +// i18n/en.json +{ + "nav": { + "getStarted": "Get Started", + "foundations": "Foundations", + "components": "Components" + }, + "status": { + "stable": "Stable", + "beta": "Beta", + "deprecated": "Deprecated" + }, + "search": { + "placeholder": "Search documentation...", + "noResults": "No results found" + } +} +``` + +```json +// i18n/pt.json +{ + "nav": { + "getStarted": "Começar", + "foundations": "Fundamentos", + "components": "Componentes" + }, + "status": { + "stable": "Estável", + "beta": "Beta", + "deprecated": "Descontinuado" + }, + "search": { + "placeholder": "Buscar na documentação...", + "noResults": "Nenhum resultado encontrado" + } +} +``` + +**Usage in Components:** + +```vue + + + +``` + +### Translation Management + +**1. Required Translations** + +All content must exist in both languages: + +```typescript +// content/config.ts +import { z } from 'astro:content'; + +const i18nSchema = z.object({ + i18nReady: z.boolean().default(false), +}); + +const componentSchema = baseSchema.extend({ + // ... other fields + i18n: i18nSchema.optional(), +}); +``` + +**2. Fallback Behavior** + +```typescript +// src/utils/i18n.ts +export async function getContent( + collection: string, + slug: string, + lang: string +) { + try { + // Try requested language + return await getEntry(collection, `${lang}/${slug}`); + } catch { + // Fallback to English + console.warn(`Content not found in ${lang}, falling back to en`); + return await getEntry(collection, `en/${slug}`); + } +} +``` + +**3. Translation Status** + +```typescript +// src/utils/translation-status.ts +export function getTranslationStatus( + collection: string, + slug: string +): 'complete' | 'partial' | 'missing' { + const en = getEntry(collection, `en/${slug}`); + const pt = getEntry(collection, `pt/${slug}`); + + if (en && pt) return 'complete'; + if (en) return 'partial'; + return 'missing'; +} +``` + +### Localized Search + +**Index per Language:** + +```typescript +// scripts/generate-search-index.ts +import { getCollection } from 'astro:content'; + +const languages = ['en', 'pt']; + +for (const lang of languages) { + const entries = await getCollection('components', ({ id }) => + id.startsWith(lang) + ); + + const index = buildIndex(entries); + + writeFileSync( + `data/search-index/${lang}.json`, + JSON.stringify(index) + ); +} +``` + +**Search with Language Filter:** + +```typescript +// src/utils/search.ts +export async function search( + query: string, + lang: string, + options?: { version?: string } +) { + const index = await loadIndex(lang, options?.version); + return index.search(query); +} +``` + +### Maintainability Over Time + +**1. Translation Workflow** + +```yaml +# .github/workflows/translation-check.yml +name: Translation Check +on: [pull_request] + +jobs: + check: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + + - name: Check for missing translations + run: | + node scripts/check-translations.js + + - name: Comment on PR + if: failure() + uses: actions/github-script@v7 + with: + script: | + github.rest.issues.createComment({ + issue_number: context.issue.number, + owner: context.repo.owner, + repo: context.repo.repo, + body: '⚠️ Some content is missing Portuguese translations.' + }) +``` + +**2. Translation Status Dashboard** + +```typescript +// src/pages/admin/translations.astro +--- +const collections = ['components', 'foundations', 'tokens']; +const status = {}; + +for (const collection of collections) { + const en = await getCollection(collection, ({ id }) => id.startsWith('en')); + const pt = await getCollection(collection, ({ id }) => id.startsWith('pt')); + + status[collection] = { + en: en.length, + pt: pt.length, + coverage: (pt.length / en.length) * 100, + }; +} +--- + + + + + + + + + {Object.entries(status).map(([name, data]) => ( + + + + + + + ))} +
CollectionEnglishPortugueseCoverage
{name}{data.en}{data.pt}{data.coverage}%
+``` + +--- + +## 10. Search Engine Architecture + +### Phase 1: Simple Client-Side Search + +**Architecture:** + +``` +Build Time Runtime +┌─────────────────┐ ┌─────────────────┐ +│ Content Files │ │ Browser │ +│ (Markdown) │ │ │ +└────────┬────────┘ │ ┌───────────┐ │ + │ │ │ Search │ │ + ▼ │ │ Index │ │ +┌─────────────────┐ │ │ (JSON) │ │ +│ Build Script │ │ └─────┬─────┘ │ +│ - Parse MD │ │ │ │ +│ - Extract text │ │ ▼ │ +│ - Index fields │ │ ┌───────────┐ │ +└────────┬────────┘ │ │ MiniSearch│ │ + │ │ │ (Library) │ │ + ▼ │ └───────────┘ │ +┌─────────────────┐ └─────────────────┘ +│ search-index.json│ +└─────────────────┘ +``` + +**Implementation:** + +```typescript +// scripts/generate-search-index.ts +import { getCollection } from 'astro:content'; +import MiniSearch from 'minisearch'; + +interface SearchDocument { + id: string; + title: string; + description: string; + content: string; + category: string; + status: string; + url: string; +} + +async function buildSearchIndex() { + const collections = [ + 'components', + 'foundations', + 'tokens', + 'blocks', + 'patterns', + ]; + + const documents: SearchDocument[] = []; + + for (const collectionName of collections) { + const entries = await getCollection(collectionName); + + for (const entry of entries) { + const { remarkPluginFrontmatter } = await entry.render(); + + documents.push({ + id: entry.id, + title: entry.data.title, + description: entry.data.description, + content: remarkPluginFrontmatter.content, + category: entry.data.category, + status: entry.data.status || 'stable', + url: `/${entry.collection}/${entry.slug}`, + }); + } + } + + const miniSearch = new MiniSearch({ + fields: ['title', 'description', 'content'], + storeFields: ['title', 'description', 'category', 'status', 'url'], + }); + + miniSearch.addAll(documents); + + // Write index + const indexJson = JSON.stringify(miniSearch.toJSON()); + writeFileSync('public/search-index.json', indexJson); +} + +buildSearchIndex(); +``` + +**Client-Side Search:** + +```vue + + + + +``` + +### Phase 2: Improved Search with Metadata + +**Enhanced Indexing:** + +```typescript +interface EnhancedSearchDocument { + id: string; + title: string; + description: string; + content: string; + headings: string[]; + keywords: string[]; + category: string; + type: string; + status: string; + version: string; + lang: string; + url: string; + popularity: number; // From analytics +} + +async function buildEnhancedIndex() { + // ... similar to Phase 1 but with more fields + + const miniSearch = new MiniSearch({ + fields: [ + 'title', + 'description', + 'content', + 'headings', + 'keywords', + ], + storeFields: [ + 'title', + 'description', + 'category', + 'type', + 'status', + 'url', + ], + searchOptions: { + boost: { + title: 3, + headings: 2, + keywords: 2, + description: 1.5, + }, + }, + }); +} +``` + +**Filter Support:** + +```typescript +// Search with filters +function searchWithFilters( + query: string, + filters: { + category?: string[]; + type?: string[]; + status?: string[]; + version?: string; + } +) { + return miniSearch.search(query, { + filter: (result) => { + if (filters.category && !filters.category.includes(result.category)) { + return false; + } + if (filters.type && !filters.type.includes(result.type)) { + return false; + } + if (filters.status && !filters.status.includes(result.status)) { + return false; + } + return true; + }, + }); +} +``` + +### Phase 3: Advanced Search + +**Architecture:** + +``` +┌─────────────────────────────────────────────────────────────┐ +│ Search Architecture │ +├─────────────────────────────────────────────────────────────┤ +│ │ +│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ +│ │ Content │ │ Indexer │ │ Search API │ │ +│ │ Sources │───▶│ Pipeline │───▶│ (Edge) │ │ +│ └──────────────┘ └──────────────┘ └──────────────┘ │ +│ │ │ │ │ +│ │ ▼ ▼ │ +│ │ ┌──────────────┐ ┌──────────────┐ │ +│ │ │ Search Index │ │ Analytics │ │ +│ │ │ (KV Storage) │ │ & Ranking │ │ +│ │ └──────────────┘ └──────────────┘ │ +│ │ │ │ +│ ▼ ▼ │ +│ ┌──────────────┐ ┌──────────────┐ │ +│ │ Component │ │ Search │ │ +│ │ Metadata │ │ Suggestions │ │ +│ └──────────────┘ └──────────────┘ │ +│ │ +└─────────────────────────────────────────────────────────────┘ +``` + +**Features:** + +1. **Typo Tolerance:** Fuzzy matching with configurable distance +2. **Synonym Support:** Map related terms +3. **Faceted Search:** Filter by multiple dimensions +4. **Relevance Ranking:** Based on popularity, recency, and match quality +5. **Search Analytics:** Track queries and clicks + +**Edge Deployment (Azion):** + +```typescript +// functions/api/search.ts +import { getKV } from '@azion/edge-kv'; + +export default async function handler(request: Request) { + const { query, filters, lang, version } = await request.json(); + + const kv = await getKV('search-index'); + const index = await kv.get(`${lang}/${version}/index`); + + const results = search(index, query, filters); + + // Log search for analytics + await logSearch(query, results); + + return new Response(JSON.stringify(results)); +} +``` + +--- + +## 11. Playground Architecture + +### Component Metadata Strategy + +**Metadata Schema:** + +```typescript +// playground/registry/types.ts +interface ComponentMeta { + name: string; + importPath: string; + description: string; + props: PropMeta[]; + slots: SlotMeta[]; + events: EventMeta[]; + examples: ExampleMeta[]; +} + +interface PropMeta { + name: string; + type: string; + default?: string; + required: boolean; + description: string; + control: ControlType; + controlProps?: Record; + options?: string[]; // For select controls +} + +type ControlType = + | 'boolean' + | 'text' + | 'number' + | 'select' + | 'color' + | 'object' + | 'array'; +``` + +**Metadata Extraction:** + +```typescript +// scripts/extract-component-meta.ts +import { parse } from 'vue-docgen-api'; + +async function extractMeta(componentPath: string): Promise { + const doc = await parse(componentPath); + + return { + name: doc.displayName, + importPath: componentPath, + description: doc.description, + props: doc.props?.map(prop => ({ + name: prop.name, + type: prop.type?.name || 'any', + default: prop.defaultValue?.value, + required: prop.required || false, + description: prop.description || '', + control: inferControlType(prop.type?.name), + options: prop.type?.name === 'union' + ? extractUnionValues(prop.type.elements) + : undefined, + })) || [], + slots: doc.slots?.map(slot => ({ + name: slot.name, + description: slot.description || '', + })) || [], + events: doc.events?.map(event => ({ + name: event.name, + description: event.description || '', + })) || [], + examples: [], + }; +} + +function inferControlType(type: string): ControlType { + switch (type) { + case 'boolean': return 'boolean'; + case 'string': return 'text'; + case 'number': return 'number'; + default: + if (type?.includes('|')) return 'select'; + return 'text'; + } +} +``` + +**Registry:** + +```typescript +// playground/registry/index.ts +import { Button } from '@aziontech/components'; +import buttonMeta from './meta/Button.json'; + +export const componentRegistry: Record = { + Button: { + component: Button, + meta: buttonMeta, + }, + // ... more components +}; + +export function getComponent(name: string) { + return componentRegistry[name]; +} + +export function getAllComponents() { + return Object.entries(componentRegistry).map(([name, { meta }]) => ({ + name, + description: meta.description, + })); +} +``` + +### Control Components + +**Base Control Interface:** + +```typescript +// playground/controls/types.ts +interface ControlProps { + value: T; + onChange: (value: T) => void; + propMeta: PropMeta; +} +``` + +**Boolean Control:** + +```vue + + + + +``` + +**Select Control:** + +```vue + + + + +``` + +**Text Control:** + +```vue + + + + +``` + +### Preview Rendering + +**Preview Renderer:** + +```vue + + + + +``` + +### Code Snippet Generation + +```typescript +// playground/utils/code-generator.ts +export function generateCode( + componentName: string, + propValues: Record, + slotContent?: string +): string { + const props = Object.entries(propValues) + .filter(([key, value]) => value !== undefined) + .map(([key, value]) => { + if (typeof value === 'string') { + return `${key}="${value}"`; + } + if (typeof value === 'boolean') { + return value ? key : ''; + } + return `:${key}="${JSON.stringify(value)}"`; + }) + .filter(Boolean) + .join(' '); + + if (slotContent) { + return `<${componentName} ${props}> + ${slotContent} +`; + } + + return `<${componentName} ${props} />`; +} +``` + +### Playground Page + +```vue + +--- +import PlaygroundLayout from '@/layouts/PlaygroundLayout.astro'; +import Playground from '@/playground/Playground.vue'; +--- + + + + +``` + +```vue + + + + +``` + +--- + +## 12. Delivery Roadmap + +### Phase 0: Architecture Setup + +**Goals:** +- Establish project foundation +- Configure build tooling +- Set up monorepo integration + +**Deliverables:** +- [ ] Initialize Astro project in `apps/ds-docs/` +- [ ] Configure `package.json` with workspace dependencies +- [ ] Set up TypeScript configuration +- [ ] Configure Tailwind CSS extending root config +- [ ] Set up ESLint and Prettier +- [ ] Create basic folder structure +- [ ] Configure Astro with Vue integration +- [ ] Set up content collections schema + +**Risks:** +- Astro/Vue integration issues +- Tailwind configuration conflicts + +**Dependencies:** +- None + +**Definition of Done:** +- `pnpm dev` starts development server +- Basic page renders with Tailwind styles +- Content collections are configured + +--- + +### Phase 1: Docs Shell and Content Engine + +**Goals:** +- Build the documentation shell +- Implement content rendering +- Create basic navigation + +**Deliverables:** +- [ ] Base layout with header and sidebar +- [ ] Navigation component +- [ ] Content collection rendering +- [ ] Markdown component integration +- [ ] Basic routing structure +- [ ] Homepage + +**Risks:** +- Navigation complexity +- Markdown rendering issues + +**Dependencies:** +- Phase 0 complete + +**Definition of Done:** +- Navigation renders correctly +- Markdown pages render with components +- Routing works for all content types + +--- + +### Phase 2: Documentation Component System + +**Goals:** +- Build all documentation UI components +- Establish component patterns + +**Deliverables:** +- [ ] PageHeader component +- [ ] StatusBadge component +- [ ] MetadataLinks component +- [ ] Tabs component +- [ ] DemoPreview component +- [ ] CodeBlock component +- [ ] PropsTable component +- [ ] SlotsTable component +- [ ] EventsTable component +- [ ] TokenTable component +- [ ] AnatomyBlock component +- [ ] DoDont component +- [ ] Callout component +- [ ] RelatedLinks component + +**Risks:** +- Component API inconsistency +- Performance issues with many components + +**Dependencies:** +- Phase 1 complete + +**Definition of Done:** +- All components render correctly +- Components work in markdown +- Components are documented + +--- + +### Phase 3: DS Package Integration + +**Goals:** +- Integrate Design System packages +- Enable real component demos + +**Deliverables:** +- [ ] Integrate `@aziontech/icons` package +- [ ] Integrate `@aziontech/components` package (when available) +- [ ] Integrate `@aziontech/theme` package (when available) +- [ ] Component registry system +- [ ] Stub component system for unavailable components +- [ ] Token integration + +**Risks:** +- Package not ready +- Version conflicts + +**Dependencies:** +- Phase 2 complete +- Icons package available + +**Definition of Done:** +- Icons render in docs +- Components render in demos +- Theme tokens apply to docs + +--- + +### Phase 4: Versioning + i18n + +**Goals:** +- Implement versioning system +- Implement multilingual support + +**Deliverables:** +- [ ] Version routing +- [ ] Version selector +- [ ] Versioned content structure +- [ ] i18n routing +- [ ] Language selector +- [ ] UI string translations +- [ ] Content translations (initial) + +**Risks:** +- Content duplication +- Translation maintenance + +**Dependencies:** +- Phase 3 complete + +**Definition of Done:** +- Multiple versions accessible +- Language switching works +- Translations render correctly + +--- + +### Phase 5: Custom Search + +**Goals:** +- Implement search functionality +- Build search index + +**Deliverables:** +- [ ] Search index generation +- [ ] Search UI component +- [ ] Search results display +- [ ] Keyboard shortcuts +- [ ] Search analytics (basic) + +**Risks:** +- Performance with large index +- Search relevance + +**Dependencies:** +- Phase 4 complete + +**Definition of Done:** +- Search returns relevant results +- Search works across languages +- Search works across versions + +--- + +### Phase 6: Interactive Playground + +**Goals:** +- Build component playground +- Enable live editing + +**Deliverables:** +- [ ] Component selector +- [ ] Props controls +- [ ] Live preview +- [ ] Code snippet generation +- [ ] Preset examples + +**Risks:** +- Complex component support +- Performance + +**Dependencies:** +- Phase 5 complete +- Components package available + +**Definition of Done:** +- Playground renders components +- Controls update preview +- Code snippets are accurate + +--- + +### Phase 7: Quality, Governance, and Automation + +**Goals:** +- Ensure quality +- Automate processes +- Enable governance + +**Deliverables:** +- [ ] Visual regression tests +- [ ] Content validation scripts +- [ ] Translation status dashboard +- [ ] Automated versioning workflow +- [ ] Performance monitoring +- [ ] Accessibility audits +- [ ] Documentation guidelines + +**Risks:** +- Test flakiness +- Process overhead + +**Dependencies:** +- Phase 6 complete + +**Definition of Done:** +- Tests pass consistently +- Automation runs on CI +- Guidelines are documented + +--- + +## 13. Risks and Technical Debt Prevention + +### Risk 1: Content Inconsistency + +**Description:** Different authors write documentation differently, leading to inconsistent structure, tone, and quality. + +**Prevention:** +- Strict frontmatter schema validation +- Required sections per page type +- Content templates +- Linting for markdown structure +- PR review checklist + +**Implementation:** + +```typescript +// scripts/validate-content.ts +import { getCollection } from 'astro:content'; + +const requiredSections: Record = { + component: ['Overview', 'When to use', 'Examples', 'API'], + foundation: ['Overview', 'Principles', 'Usage'], + token: ['Overview', 'Usage', 'Token Reference'], +}; + +async function validateContent() { + const issues: string[] = []; + + for (const [collection, sections] of Object.entries(requiredSections)) { + const entries = await getCollection(collection); + + for (const entry of entries) { + const { headings } = await entry.render(); + const headingTexts = headings.map(h => h.text); + + for (const section of sections) { + if (!headingTexts.includes(section)) { + issues.push( + `${entry.id}: Missing required section "${section}"` + ); + } + } + } + } + + if (issues.length) { + console.error('Content validation failed:'); + issues.forEach(issue => console.error(` - ${issue}`)); + process.exit(1); + } +} +``` + +--- + +### Risk 2: Overuse of Inline Custom Logic in Markdown + +**Description:** Authors embed complex logic directly in markdown, making content hard to maintain and debug. + +**Prevention:** +- Limited component set for markdown +- No raw HTML in markdown +- No inline scripts +- Complex logic moved to components +- Code review guidelines + +**Implementation:** + +```typescript +// astro.config.mjs +export default defineConfig({ + markdown: { + // Disable raw HTML + rehypePlugins: [ + ['rehype-raw', { passThrough: [] }], + ], + }, +}); +``` + +--- + +### Risk 3: Tight Coupling Between Docs and DS Internals + +**Description:** Documentation depends on internal implementation details, breaking when DS changes. + +**Prevention:** +- Use public APIs only +- Component registry abstraction +- Versioned documentation +- Integration tests +- Semantic versioning + +**Implementation:** + +```typescript +// src/utils/component-registry.ts +// Only import from published packages, never from src/ +import { Button } from '@aziontech/components'; +// NOT: import { Button } from '../../../packages/components/src/Button'; +``` + +--- + +### Risk 4: Broken Scalability for i18n/Versioning + +**Description:** Adding languages or versions becomes exponentially harder as content grows. + +**Prevention:** +- Content structure designed for scale +- Automated translation workflows +- Translation status tracking +- Shared content where possible +- Version automation + +**Implementation:** + +```yaml +# .github/workflows/sync-translations.yml +name: Sync Translations +on: + push: + paths: + - 'content/en/**' + +jobs: + sync: + runs-on: ubuntu-latest + steps: + - name: Create translation tasks + # Create issues for missing translations +``` + +--- + +### Risk 5: Performance Issues from Excessive Hydration + +**Description:** Too many interactive components cause slow page loads and poor UX. + +**Prevention:** +- Hydration budget per page +- Use `client:visible` for below-fold +- Use `client:only` for isolated features +- Performance monitoring +- Lighthouse CI + +**Implementation:** + +```typescript +// astro.config.mjs +export default defineConfig({ + vite: { + build: { + rollupOptions: { + output: { + manualChunks: { + 'vue-vendor': ['vue'], + 'docs-components': [ + './src/components/docs/demo-preview', + './src/components/docs/tabs', + ], + }, + }, + }, + }, + }, +}); +``` + +--- + +### Risk 6: Documentation Components Becoming Ungoverned + +**Description:** Documentation components proliferate without clear ownership or standards. + +**Prevention:** +- Component inventory +- Clear ownership model +- Component documentation +- Deprecation process +- Regular audits + +**Implementation:** + +```typescript +// src/components/docs/index.ts +// Central registry of all documentation components +export const docsComponents = { + // Page Structure + PageHeader: () => import('./page-header'), + MetadataLinks: () => import('./metadata-links'), + + // Status + StatusBadge: () => import('./status-badge'), + + // ... all components listed +}; + +// Type-safe component access +export type DocsComponentName = keyof typeof docsComponents; +``` + +--- + +## 14. Recommended Engineering Conventions + +### Naming Conventions + +| Type | Convention | Example | +|------|------------|---------| +| Files (components) | PascalCase | `PageHeader.vue` | +| Files (utilities) | kebab-case | `content-helpers.ts` | +| Directories | kebab-case | `page-header/` | +| Vue components | PascalCase | `` | +| Astro components | PascalCase | `` | +| Props | camelCase | `showCode` | +| Events | kebab-case | `@update:value` | +| CSS classes | BEM | `.page-header__title` | +| CSS variables | kebab-case | `--docs-sidebar-width` | +| Frontmatter fields | camelCase | `componentName` | +| Content files | kebab-case | `button.md` | + +### Folder Conventions + +``` +src/components/docs/[component-name]/ +├── [ComponentName].vue # Main component +├── [ComponentName].astro # Astro version (if needed) +├── index.ts # Barrel export +├── types.ts # TypeScript types +└── [ComponentName].test.ts # Tests +``` + +### Content File Conventions + +``` +content/[lang]/[collection]/ +├── index.md # Collection landing page +├── [item-slug].md # Individual item +└── [category]/ + ├── index.md + └── [item-slug].md +``` + +### Frontmatter Field Conventions + +**Required Fields (All Pages):** + +```yaml +title: string # Page title +description: string # SEO description +type: string # Page type (component, foundation, etc.) +``` + +**Optional Fields (Standard):** + +```yaml +status: string # Component status +since: string # Version introduced +contributors: string[] # Contributors +lastUpdated: date # Last update date +``` + +### Markdown Authoring Constraints + +**Allowed:** +- Standard markdown syntax +- Imported components +- Fenced code blocks with language +- Frontmatter metadata + +**Prohibited:** +- Raw HTML blocks +- Inline ` + + +``` + +**Icon integration (available now):** + +```typescript +// Use existing @aziontech/icons package +import '@aziontech/icons'; +``` + +### MVP Content Strategy + +**Initial content:** + +1. **Homepage:** Brief introduction, quick links, getting started CTA +2. **Installation:** npm/yarn/pnpm install commands, basic setup +3. **Color Foundation:** Color system overview, primitive colors, usage guidelines +4. **Button Component:** Full documentation as template for other components +5. **Icons:** Browse and search icons (leverage existing gallery) + +**Content templates:** + +Create templates for each page type to ensure consistency: + +``` +templates/ +├── component.md +├── foundation.md +└── guide.md +``` + +### MVP Success Criteria + +**Architecture Validation:** + +- [ ] Astro renders pages correctly +- [ ] Vue components hydrate properly +- [ ] Markdown with components works +- [ ] Tailwind styles apply correctly +- [ ] Icons render from package +- [ ] Build completes successfully +- [ ] Development server works + +**User Value:** + +- [ ] Users can learn about the design system +- [ ] Users can see component examples +- [ ] Users can browse icons +- [ ] Users can copy code snippets +- [ ] Documentation is navigable + +**Technical Quality:** + +- [ ] No console errors +- [ ] Accessible navigation +- [ ] Mobile-responsive layout +- [ ] Fast page loads (< 3s) +- [ ] Clean URL structure + +### MVP Timeline Suggestion + +**Week 1-2: Foundation** +- Initialize Astro project +- Configure Tailwind +- Set up content collections +- Create base layout +- Implement navigation + +**Week 3-4: Core Components** +- Build PageHeader +- Build DemoPreview +- Build CodeBlock +- Build PropsTable +- Build Callout + +**Week 5-6: Content & Integration** +- Write initial content +- Integrate icons package +- Create Button documentation +- Create Color documentation +- Build Icons page + +**Week 7-8: Polish & Deploy** +- Responsive design +- Accessibility review +- Performance optimization +- Deploy to staging +- Gather feedback + +### Post-MVP Priorities + +**Immediate (1-2 sprints):** +1. Add Portuguese translations +2. Add search functionality +3. Add more component documentation +4. Add token pages + +**Short-term (2-4 sprints):** +1. Add versioning +2. Add playground +3. Add blocks/patterns +4. Integrate theme package + +**Long-term (ongoing):** +1. Expand component coverage +2. Improve search +3. Add analytics +4. Automate content generation + +--- + +## Summary + +This architecture provides a comprehensive blueprint for building a product-grade design system documentation platform. Key decisions: + +1. **Astro as foundation** - Optimal for content-heavy sites with interactive islands +2. **Vue for interactivity** - Aligns with DS stack, selective hydration +3. **Markdown-first content** - Scalable authoring with inline components +4. **Monorepo integration** - Workspace dependencies for packages +5. **Built-in scalability** - Versioning and i18n from day one +6. **Custom search** - Full control over indexing and UX +7. **Interactive playground** - Lightweight Storybook alternative + +The phased delivery approach allows incremental value delivery while validating architecture decisions early. The MVP scope proves the core architecture while delivering immediate documentation value. + +--- + +*Document Version: 1.0* +*Last Updated: 2026-03-07* +*Author: Architecture Team* diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a01fcd74..61125c6c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -14,7 +14,7 @@ importers: dependencies: '@tailwindcss/typography': specifier: ^0.5.19 - version: 0.5.19(tailwindcss@3.4.19) + version: 0.5.19(tailwindcss@3.4.19(yaml@2.8.2)) autoprefixer: specifier: ^10.4.27 version: 10.4.27(postcss@8.5.8) @@ -32,7 +32,7 @@ importers: version: 3.47.2(vue@3.5.29(typescript@5.9.3)) tailwindcss: specifier: ^3.4.19 - version: 3.4.19 + version: 3.4.19(yaml@2.8.2) vue: specifier: ^3.5.29 version: 3.5.29(typescript@5.9.3) @@ -75,7 +75,38 @@ importers: version: 23.1.1(typescript@5.9.3) vite: specifier: ^6.4.1 - version: 6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0) + version: 6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2) + + apps/ds-docs: + dependencies: + '@aziontech/icons': + specifier: workspace:* + version: link:../../packages/icons + astro: + specifier: ^5.4.0 + version: 5.18.0(@types/node@25.3.3)(jiti@1.21.7)(rollup@4.59.0)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2) + vue: + specifier: ^3.5.29 + version: 3.5.29(typescript@5.9.3) + devDependencies: + '@astrojs/tailwind': + specifier: ^6.0.2 + version: 6.0.2(astro@5.18.0(@types/node@25.3.3)(jiti@1.21.7)(rollup@4.59.0)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2))(tailwindcss@3.4.19(yaml@2.8.2)) + '@astrojs/vue': + specifier: ^5.0.6 + version: 5.1.4(@types/node@25.3.3)(astro@5.18.0(@types/node@25.3.3)(jiti@1.21.7)(rollup@4.59.0)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2))(jiti@1.21.7)(rollup@4.59.0)(sass@1.97.3)(terser@5.46.0)(vue@3.5.29(typescript@5.9.3))(yaml@2.8.2) + '@tailwindcss/typography': + specifier: ^0.5.19 + version: 0.5.19(tailwindcss@3.4.19(yaml@2.8.2)) + autoprefixer: + specifier: ^10.4.27 + version: 10.4.27(postcss@8.5.8) + tailwindcss: + specifier: ^3.4.19 + version: 3.4.19(yaml@2.8.2) + typescript: + specifier: ^5.7.2 + version: 5.9.3 apps/icons-gallery: dependencies: @@ -97,7 +128,7 @@ importers: devDependencies: '@vitejs/plugin-vue': specifier: ^5.2.4 - version: 5.2.4(vite@6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0))(vue@3.5.29(typescript@5.9.3)) + version: 5.2.4(vite@6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.29(typescript@5.9.3)) autoprefixer: specifier: ^10.4.19 version: 10.4.27(postcss@8.5.6) @@ -121,13 +152,13 @@ importers: version: 3.8.1 tailwindcss: specifier: ^3.4.4 - version: 3.4.19 + version: 3.4.19(yaml@2.8.2) vite: specifier: ^6.4.1 - version: 6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0) + version: 6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2) vitest: specifier: ^3.0.5 - version: 3.2.4(@types/node@25.3.3)(happy-dom@20.8.3)(jiti@1.21.7)(jsdom@26.1.0)(sass@1.97.3)(terser@5.46.0) + version: 3.2.4(@types/debug@4.1.12)(@types/node@25.3.3)(happy-dom@20.8.3)(jiti@1.21.7)(jsdom@26.1.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2) packages/icons: dependencies: @@ -163,6 +194,66 @@ importers: specifier: ^23.0.0 version: 23.1.1(typescript@5.9.3) + packages/theme: + devDependencies: + '@semantic-release/changelog': + specifier: ^6.0.3 + version: 6.0.3(semantic-release@23.1.1(typescript@5.9.3)) + '@semantic-release/commit-analyzer': + specifier: ^10.0.1 + version: 10.0.4(semantic-release@23.1.1(typescript@5.9.3)) + '@semantic-release/exec': + specifier: ^6.0.3 + version: 6.0.3(semantic-release@23.1.1(typescript@5.9.3)) + '@semantic-release/git': + specifier: ^10.0.1 + version: 10.0.1(semantic-release@23.1.1(typescript@5.9.3)) + '@semantic-release/github': + specifier: ^9.2.6 + version: 9.2.6(semantic-release@23.1.1(typescript@5.9.3)) + '@semantic-release/npm': + specifier: ^11.0.0 + version: 11.0.3(semantic-release@23.1.1(typescript@5.9.3)) + '@semantic-release/release-notes-generator': + specifier: ^12.1.0 + version: 12.1.0(semantic-release@23.1.1(typescript@5.9.3)) + conventional-changelog-conventionalcommits: + specifier: ^7.0.0 + version: 7.0.2 + semantic-release: + specifier: ^23.0.0 + version: 23.1.1(typescript@5.9.3) + + packages/webkit: + devDependencies: + '@semantic-release/changelog': + specifier: ^6.0.3 + version: 6.0.3(semantic-release@23.1.1(typescript@5.9.3)) + '@semantic-release/commit-analyzer': + specifier: ^10.0.1 + version: 10.0.4(semantic-release@23.1.1(typescript@5.9.3)) + '@semantic-release/exec': + specifier: ^6.0.3 + version: 6.0.3(semantic-release@23.1.1(typescript@5.9.3)) + '@semantic-release/git': + specifier: ^10.0.1 + version: 10.0.1(semantic-release@23.1.1(typescript@5.9.3)) + '@semantic-release/github': + specifier: ^9.2.6 + version: 9.2.6(semantic-release@23.1.1(typescript@5.9.3)) + '@semantic-release/npm': + specifier: ^11.0.0 + version: 11.0.3(semantic-release@23.1.1(typescript@5.9.3)) + '@semantic-release/release-notes-generator': + specifier: ^12.1.0 + version: 12.1.0(semantic-release@23.1.1(typescript@5.9.3)) + conventional-changelog-conventionalcommits: + specifier: ^7.0.0 + version: 7.0.2 + semantic-release: + specifier: ^23.0.0 + version: 23.1.1(typescript@5.9.3) + packages: '@adobe/css-tools@4.4.4': @@ -175,9 +266,42 @@ packages: resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==} engines: {node: '>=10'} + '@antfu/utils@0.7.10': + resolution: {integrity: sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==} + '@asamuzakjp/css-color@3.2.0': resolution: {integrity: sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==} + '@astrojs/compiler@2.13.1': + resolution: {integrity: sha512-f3FN83d2G/v32ipNClRKgYv30onQlMZX1vCeZMjPsMMPl1mDpmbl0+N5BYo4S/ofzqJyS5hvwacEo0CCVDn/Qg==} + + '@astrojs/internal-helpers@0.7.5': + resolution: {integrity: sha512-vreGnYSSKhAjFJCWAwe/CNhONvoc5lokxtRoZims+0wa3KbHBdPHSSthJsKxPd8d/aic6lWKpRTYGY/hsgK6EA==} + + '@astrojs/markdown-remark@6.3.10': + resolution: {integrity: sha512-kk4HeYR6AcnzC4QV8iSlOfh+N8TZ3MEStxPyenyCtemqn8IpEATBFMTJcfrNW32dgpt6MY3oCkMM/Tv3/I4G3A==} + + '@astrojs/prism@3.3.0': + resolution: {integrity: sha512-q8VwfU/fDZNoDOf+r7jUnMC2//H2l0TuQ6FkGJL8vD8nw/q5KiL3DS1KKBI3QhI9UQhpJ5dc7AtqfbXWuOgLCQ==} + engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0} + + '@astrojs/tailwind@6.0.2': + resolution: {integrity: sha512-j3mhLNeugZq6A8dMNXVarUa8K6X9AW+QHU9u3lKNrPLMHhOQ0S7VeWhHwEeJFpEK1BTKEUY1U78VQv2gN6hNGg==} + peerDependencies: + astro: ^3.0.0 || ^4.0.0 || ^5.0.0 + tailwindcss: ^3.0.24 + + '@astrojs/telemetry@3.3.0': + resolution: {integrity: sha512-UFBgfeldP06qu6khs/yY+q1cDAaArM2/7AEIqQ9Cuvf7B1hNLq0xDrZkct+QoIGyjq56y8IaE2I3CTvG99mlhQ==} + engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0} + + '@astrojs/vue@5.1.4': + resolution: {integrity: sha512-srE+3tgSnGG4FVr7Bs9JAgLcUAg1mtGrbBFdwlj++Y05Awwlc967WCcmOK6rnxQ6q5PcK5+WL2x2tKoWh5SN7A==} + engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0} + peerDependencies: + astro: ^5.0.0 + vue: ^3.2.30 + '@babel/code-frame@7.29.0': resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==} engines: {node: '>=6.9.0'} @@ -316,6 +440,12 @@ packages: peerDependencies: '@babel/core': ^7.0.0 + '@babel/plugin-proposal-decorators@7.29.0': + resolution: {integrity: sha512-CVBVv3VY/XRMxRYq5dwr2DS7/MvqPm23cOCjbwNnVrfOqcWlnefua1uUs0sjdKOGjvPUG633o07uWzJq4oI6dA==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + '@babel/plugin-proposal-optional-chaining-assign@7.27.1': resolution: {integrity: sha512-D1GfVa/R5vTY85efTPsp2D60A1YqIw08qwxQjI5ZWQsiKOIsNTfw7oOBzzY3+pmMaMQaSilY7evJ+LR5jzoDKg==} engines: {node: '>=6.9.0'} @@ -328,6 +458,12 @@ packages: peerDependencies: '@babel/core': ^7.0.0-0 + '@babel/plugin-syntax-decorators@7.28.6': + resolution: {integrity: sha512-71EYI0ONURHJBL4rSFXnITXqXrrY8q4P0q006DPfN+Rk+ASM+++IBXem/ruokgBZR8YNEWZ8R6B+rCb8VcUTqA==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + '@babel/plugin-syntax-import-assertions@7.28.6': resolution: {integrity: sha512-pSJUpFHdx9z5nqTSirOCMtYVP2wFgoWhP0p3g8ONK/4IHhLIBd0B9NYqAvIUAhq+OkhO4VM1tENCt0cjlsNShw==} engines: {node: '>=6.9.0'} @@ -340,6 +476,11 @@ packages: peerDependencies: '@babel/core': ^7.0.0-0 + '@babel/plugin-syntax-import-meta@7.10.4': + resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==} + peerDependencies: + '@babel/core': ^7.0.0-0 + '@babel/plugin-syntax-jsx@7.28.6': resolution: {integrity: sha512-wgEmr06G6sIpqr8YDwA2dSRTE3bJ+V0IfpzfSY3Lfgd7YWOaAdlykvJi13ZKBt8cZHfgH1IXN+CL656W3uUa4w==} engines: {node: '>=6.9.0'} @@ -806,6 +947,10 @@ packages: engines: {node: '>=16'} hasBin: true + '@capsizecss/unpack@4.0.0': + resolution: {integrity: sha512-VERIM64vtTP1C4mxQ5thVT9fK0apjPFobqybMtA1UdUujWka24ERHbRHFGmpbbhp73MhV+KSsHQH9C6uOTdEQA==} + engines: {node: '>=18'} + '@chromatic-com/storybook@5.0.1': resolution: {integrity: sha512-v80QBwVd8W6acH5NtDgFlUevIBaMZAh1pYpBiB40tuNzS242NTHeQHBDGYwIAbWKDnt1qfjJpcpL6pj5kAr4LA==} engines: {node: '>=20.0.0', yarn: '>=1.22.18'} @@ -1237,6 +1382,159 @@ packages: resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==} engines: {node: '>=18.18'} + '@img/colour@1.1.0': + resolution: {integrity: sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==} + engines: {node: '>=18'} + + '@img/sharp-darwin-arm64@0.34.5': + resolution: {integrity: sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [arm64] + os: [darwin] + + '@img/sharp-darwin-x64@0.34.5': + resolution: {integrity: sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [x64] + os: [darwin] + + '@img/sharp-libvips-darwin-arm64@1.2.4': + resolution: {integrity: sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==} + cpu: [arm64] + os: [darwin] + + '@img/sharp-libvips-darwin-x64@1.2.4': + resolution: {integrity: sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==} + cpu: [x64] + os: [darwin] + + '@img/sharp-libvips-linux-arm64@1.2.4': + resolution: {integrity: sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==} + cpu: [arm64] + os: [linux] + libc: [glibc] + + '@img/sharp-libvips-linux-arm@1.2.4': + resolution: {integrity: sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==} + cpu: [arm] + os: [linux] + libc: [glibc] + + '@img/sharp-libvips-linux-ppc64@1.2.4': + resolution: {integrity: sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==} + cpu: [ppc64] + os: [linux] + libc: [glibc] + + '@img/sharp-libvips-linux-riscv64@1.2.4': + resolution: {integrity: sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==} + cpu: [riscv64] + os: [linux] + libc: [glibc] + + '@img/sharp-libvips-linux-s390x@1.2.4': + resolution: {integrity: sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==} + cpu: [s390x] + os: [linux] + libc: [glibc] + + '@img/sharp-libvips-linux-x64@1.2.4': + resolution: {integrity: sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==} + cpu: [x64] + os: [linux] + libc: [glibc] + + '@img/sharp-libvips-linuxmusl-arm64@1.2.4': + resolution: {integrity: sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==} + cpu: [arm64] + os: [linux] + libc: [musl] + + '@img/sharp-libvips-linuxmusl-x64@1.2.4': + resolution: {integrity: sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==} + cpu: [x64] + os: [linux] + libc: [musl] + + '@img/sharp-linux-arm64@0.34.5': + resolution: {integrity: sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [arm64] + os: [linux] + libc: [glibc] + + '@img/sharp-linux-arm@0.34.5': + resolution: {integrity: sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [arm] + os: [linux] + libc: [glibc] + + '@img/sharp-linux-ppc64@0.34.5': + resolution: {integrity: sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [ppc64] + os: [linux] + libc: [glibc] + + '@img/sharp-linux-riscv64@0.34.5': + resolution: {integrity: sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [riscv64] + os: [linux] + libc: [glibc] + + '@img/sharp-linux-s390x@0.34.5': + resolution: {integrity: sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [s390x] + os: [linux] + libc: [glibc] + + '@img/sharp-linux-x64@0.34.5': + resolution: {integrity: sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [x64] + os: [linux] + libc: [glibc] + + '@img/sharp-linuxmusl-arm64@0.34.5': + resolution: {integrity: sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [arm64] + os: [linux] + libc: [musl] + + '@img/sharp-linuxmusl-x64@0.34.5': + resolution: {integrity: sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [x64] + os: [linux] + libc: [musl] + + '@img/sharp-wasm32@0.34.5': + resolution: {integrity: sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [wasm32] + + '@img/sharp-win32-arm64@0.34.5': + resolution: {integrity: sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [arm64] + os: [win32] + + '@img/sharp-win32-ia32@0.34.5': + resolution: {integrity: sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [ia32] + os: [win32] + + '@img/sharp-win32-x64@0.34.5': + resolution: {integrity: sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [x64] + os: [win32] + '@isaacs/cliui@8.0.2': resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==} engines: {node: '>=12'} @@ -1511,6 +1809,9 @@ packages: '@octokit/types@14.1.0': resolution: {integrity: sha512-1y6DgTy8Jomcpu33N+p5w58l6xyt55Ar2I91RPiIA0xCJBXyUAhXCcmZaDWSANiha7R9a6qJJ2CRomGPZ6f46g==} + '@oslojs/encoding@1.1.0': + resolution: {integrity: sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ==} + '@oxc-parser/binding-android-arm64@0.76.0': resolution: {integrity: sha512-1XJW/16CDmF5bHE7LAyPPmEEVnxSadDgdJz+xiLqBrmC4lfAeuAfRw3HlOygcPGr+AJsbD4Z5sFJMkwjbSZlQg==} engines: {node: '>=20.0.0'} @@ -1713,9 +2014,24 @@ packages: resolution: {integrity: sha512-h104Kh26rR8tm+a3Qkc5S4VLYint3FE48as7+/5oCEcKR2idC/pF1G6AhIXKI+eHPJa/3J9i5z0Al47IeGHPkA==} engines: {node: '>=12'} + '@polka/url@1.0.0-next.29': + resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==} + '@popperjs/core@2.11.8': resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==} + '@rolldown/pluginutils@1.0.0-rc.7': + resolution: {integrity: sha512-qujRfC8sFVInYSPPMLQByRh7zhwkGFS4+tyMQ83srV1qrxL4g8E2tyxVVyxd0+8QeBM1mIk9KbWxkegRr76XzA==} + + '@rollup/pluginutils@5.3.0': + resolution: {integrity: sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==} + engines: {node: '>=14.0.0'} + peerDependencies: + rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0 + peerDependenciesMeta: + rollup: + optional: true + '@rollup/rollup-android-arm-eabi@4.59.0': resolution: {integrity: sha512-upnNBkA6ZH2VKGcBj9Fyl9IGNPULcjXRlg0LLeaioQWueH30p6IXtJEbKAgvyv+mJaMxSm1l6xwDXYjpEMiLMg==} cpu: [arm] @@ -1934,6 +2250,27 @@ packages: peerDependencies: semantic-release: '>=20.1.0' + '@shikijs/core@3.23.0': + resolution: {integrity: sha512-NSWQz0riNb67xthdm5br6lAkvpDJRTgB36fxlo37ZzM2yq0PQFFzbd8psqC2XMPgCzo1fW6cVi18+ArJ44wqgA==} + + '@shikijs/engine-javascript@3.23.0': + resolution: {integrity: sha512-aHt9eiGFobmWR5uqJUViySI1bHMqrAgamWE1TYSUoftkAeCCAiGawPMwM+VCadylQtF4V3VNOZ5LmfItH5f3yA==} + + '@shikijs/engine-oniguruma@3.23.0': + resolution: {integrity: sha512-1nWINwKXxKKLqPibT5f4pAFLej9oZzQTsby8942OTlsJzOBZ0MWKiwzMsd+jhzu8YPCHAswGnnN1YtQfirL35g==} + + '@shikijs/langs@3.23.0': + resolution: {integrity: sha512-2Ep4W3Re5aB1/62RSYQInK9mM3HsLeB91cHqznAJMuylqjzNVAVCMnNWRHFtcNHXsoNRayP9z1qj4Sq3nMqYXg==} + + '@shikijs/themes@3.23.0': + resolution: {integrity: sha512-5qySYa1ZgAT18HR/ypENL9cUSGOeI2x+4IvYJu4JgVJdizn6kG4ia5Q1jDEOi7gTbN4RbuYtmHh0W3eccOrjMA==} + + '@shikijs/types@3.23.0': + resolution: {integrity: sha512-3JZ5HXOZfYjsYSk0yPwBrkupyYSLpAE26Qc0HLghhZNGTZg/SKxXIIgoxOpmmeQP0RRSDJTk1/vPfw9tbw+jSQ==} + + '@shikijs/vscode-textmate@10.0.2': + resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==} + '@sindresorhus/is@4.6.0': resolution: {integrity: sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw==} engines: {node: '>=10'} @@ -1983,6 +2320,9 @@ packages: '@types/chai@5.2.3': resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==} + '@types/debug@4.1.12': + resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==} + '@types/deep-eql@4.0.2': resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==} @@ -1995,9 +2335,21 @@ packages: '@types/estree@1.0.8': resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==} + '@types/hast@3.0.4': + resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==} + '@types/json-schema@7.0.15': resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==} + '@types/mdast@4.0.4': + resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==} + + '@types/ms@2.1.0': + resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==} + + '@types/nlcst@2.0.3': + resolution: {integrity: sha512-vSYNSDe6Ix3q+6Z7ri9lyWqgGhJTmzRjZRqyq15N0Z/1/UnVsno9G/N40NBijoYx2seFDIl0+B2mgAb9mezUCA==} + '@types/node@25.3.3': resolution: {integrity: sha512-DpzbrH7wIcBaJibpKo9nnSQL0MTRdnWttGyE5haGwK86xgMOkFLp7vEyfQPGLOJh5wNYiJ3V9PmUMDhV9u8kkQ==} @@ -2007,6 +2359,9 @@ packages: '@types/sax@1.2.7': resolution: {integrity: sha512-rO73L89PJxeYM3s3pPPjiPgVVcymqU490g0YO5n5By0k2Erzj6tay/4lr1CHAAU4JyOWd1rpQ8bCf6cZfHU96A==} + '@types/unist@3.0.3': + resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==} + '@types/web-bluetooth@0.0.20': resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==} @@ -2016,6 +2371,16 @@ packages: '@types/ws@8.18.1': resolution: {integrity: sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==} + '@ungap/structured-clone@1.3.0': + resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==} + + '@vitejs/plugin-vue-jsx@4.2.0': + resolution: {integrity: sha512-DSTrmrdLp+0LDNF77fqrKfx7X0ErRbOcUAgJL/HbSesqQwoUvUQ4uYQqaex+rovqgGcoPqVk+AwUh3v9CuiYIw==} + engines: {node: ^18.0.0 || >=20.0.0} + peerDependencies: + vite: ^5.0.0 || ^6.0.0 + vue: ^3.0.0 + '@vitejs/plugin-vue@5.2.4': resolution: {integrity: sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA==} engines: {node: ^18.0.0 || >=20.0.0} @@ -2052,6 +2417,22 @@ packages: '@vitest/utils@3.2.4': resolution: {integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==} + '@vue/babel-helper-vue-transform-on@1.5.0': + resolution: {integrity: sha512-0dAYkerNhhHutHZ34JtTl2czVQHUNWv6xEbkdF5W+Yrv5pCWsqjeORdOgbtW2I9gWlt+wBmVn+ttqN9ZxR5tzA==} + + '@vue/babel-plugin-jsx@1.5.0': + resolution: {integrity: sha512-mneBhw1oOqCd2247O0Yw/mRwC9jIGACAJUlawkmMBiNmL4dGA2eMzuNZVNqOUfYTa6vqmND4CtOPzmEEEqLKFw==} + peerDependencies: + '@babel/core': ^7.0.0-0 + peerDependenciesMeta: + '@babel/core': + optional: true + + '@vue/babel-plugin-resolve-type@1.5.0': + resolution: {integrity: sha512-Wm/60o+53JwJODm4Knz47dxJnLDJ9FnKnGZJbUUf8nQRAtt6P+undLUAVU3Ha33LxOJe6IPoifRQ6F/0RrU31w==} + peerDependencies: + '@babel/core': ^7.0.0-0 + '@vue/compiler-core@3.5.29': resolution: {integrity: sha512-cuzPhD8fwRHk8IGfmYaR4eEe4cAyJEL66Ove/WZL7yWNL134nqLddSLwNRIsFlnnW1kK+p8Ck3viFnC0chXCXw==} @@ -2064,6 +2445,17 @@ packages: '@vue/compiler-ssr@3.5.29': resolution: {integrity: sha512-Y/ARJZE6fpjzL5GH/phJmsFwx3g6t2KmHKHx5q+MLl2kencADKIrhH5MLF6HHpRMmlRAYBRSvv347Mepf1zVNw==} + '@vue/devtools-core@7.7.9': + resolution: {integrity: sha512-48jrBSwG4GVQRvVeeXn9p9+dlx+ISgasM7SxZZKczseohB0cBz+ITKr4YbLWjmJdy45UHL7UMPlR4Y0CWTRcSQ==} + peerDependencies: + vue: ^3.0.0 + + '@vue/devtools-kit@7.7.9': + resolution: {integrity: sha512-PyQ6odHSgiDVd4hnTP+aDk2X4gl2HmLDfiyEnn3/oV+ckFDuswRs4IbBT7vacMuGdwY/XemxBoh302ctbsptuA==} + + '@vue/devtools-shared@7.7.9': + resolution: {integrity: sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA==} + '@vue/eslint-config-prettier@7.1.0': resolution: {integrity: sha512-Pv/lVr0bAzSIHLd9iz0KnvAr4GKyCEl+h52bc4e5yWuDVtLgFwycF7nrbWTAQAS+FU6q1geVd07lc6EWfJiWKQ==} peerDependencies: @@ -2220,6 +2612,9 @@ packages: ajv@8.18.0: resolution: {integrity: sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==} + ansi-align@3.0.1: + resolution: {integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==} + ansi-escapes@7.3.0: resolution: {integrity: sha512-BvU8nYgGQBxcmMuEeUEmNTvrMVjJNSH7RgW24vXexN4Ven6qCvy4TntnvlnwnMLTVlcRQQdbRY8NKnaIoeWDNg==} engines: {node: '>=18'} @@ -2274,6 +2669,9 @@ packages: array-ify@1.0.0: resolution: {integrity: sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==} + array-iterate@2.0.1: + resolution: {integrity: sha512-I1jXZMjAgCMmxT4qxXfPXa6SthSoE8h6gkSI9BGGNv8mP8G/v0blc+qFnZu6K42vTOiuME596QaLO0TP3Lk0xg==} + asn1.js@4.10.1: resolution: {integrity: sha512-p32cOF5q0Zqs9uBiONKYLm6BClCoBCM5O9JfeUSlnQLBTxYdTK+pW+nXflm8UkKd2UYlEbYz5qEi0JuZR9ckSw==} @@ -2288,6 +2686,11 @@ packages: resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==} engines: {node: '>=4'} + astro@5.18.0: + resolution: {integrity: sha512-CHiohwJIS4L0G6/IzE1Fx3dgWqXBCXus/od0eGUfxrZJD2um2pE7ehclMmgL/fXqbU7NfE1Ze2pq34h2QaA6iQ==} + engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0'} + hasBin: true + asynckit@0.4.0: resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==} @@ -2305,6 +2708,10 @@ packages: axios@1.13.6: resolution: {integrity: sha512-ChTCHMouEe2kn713WHbQGcuYrr6fXTBiu460OTwWrWob16g1bXn4vtz07Ope7ewMozJAnEquLk5lWQWtBig9DQ==} + axobject-query@4.1.0: + resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==} + engines: {node: '>= 0.4'} + azion-theme@1.18.3: resolution: {integrity: sha512-jTSHwjuM1HSmIN/uErunbTJyi2JGnXL/xXhZ81aF310iT83xKOhXHsLAuANroQvxnv0Bdt55QzBoYVHl0PDvkg==} @@ -2334,6 +2741,9 @@ packages: peerDependencies: '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0 + bail@2.0.2: + resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==} + balanced-match@1.0.2: resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} @@ -2341,6 +2751,9 @@ packages: resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==} engines: {node: 18 || 20 || >=22} + base-64@1.0.0: + resolution: {integrity: sha512-kwDPIFCGx0NZHog36dj+tHiwP4QMzsZ3AgMViUBKI0+V5n4U0ufTCUMhnQ04diaRI8EX/QcPfql7zlhZ7j4zgg==} + base64-js@1.5.1: resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==} @@ -2366,6 +2779,9 @@ packages: bindings@1.5.0: resolution: {integrity: sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==} + birpc@2.9.0: + resolution: {integrity: sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==} + bl@1.2.3: resolution: {integrity: sha512-pvcNpa0UU69UT341rO6AYy4FVAIkUHuZXRIWbq+zHnsVcRzDDjIAhGuuYoi0d//cwIwtt4pkpKycWEfjdV+vww==} @@ -2381,6 +2797,10 @@ packages: bottleneck@2.19.5: resolution: {integrity: sha512-VHiNCbI1lKdl44tGrhNfU3lup0Tj/ZBMJB5/2ZbNXRCPuRCO7ed2mgcK4r17y+KB2EfuYuRaVlwNbAeaWGSpbw==} + boxen@8.0.1: + resolution: {integrity: sha512-F3PH5k5juxom4xktynS7MoFY+NUWH5LC4CnH11YB8NPew+HLpmBLCybSAEyb2F+4pRXhuhWqFesoQd6DAyc2hw==} + engines: {node: '>=18'} + brace-expansion@1.1.12: resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==} @@ -2486,6 +2906,10 @@ packages: resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==} engines: {node: '>= 6'} + camelcase@8.0.0: + resolution: {integrity: sha512-8WB3Jcas3swSvjIeA2yvCJ+Miyz5l1ZmB6HFb9R1317dt9LCQoswg/BGrmAmkWVEszSrrg4RwmO46qIm2OEnSA==} + engines: {node: '>=16'} + caniuse-lite@1.0.30001775: resolution: {integrity: sha512-s3Qv7Lht9zbVKE9XoTyRG6wVDCKdtOFIjBGg3+Yhn6JaytuNKPIjBMTMIY1AnOH3seL5mvF+x33oGAyK3hVt3A==} @@ -2493,6 +2917,9 @@ packages: resolution: {integrity: sha512-mzDSXIPaFwVDvZAHqZ9VlbyF4yyXRuX6IvB06WvPYkqJVO24kX1PPhv9bfpKNFZyxYFmmgo03HUiD8iklmJYRQ==} engines: {node: '>= 0.8.0'} + ccount@2.0.1: + resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==} + chai@5.3.3: resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==} engines: {node: '>=18'} @@ -2513,6 +2940,15 @@ packages: resolution: {integrity: sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==} engines: {node: '>=10'} + character-entities-html4@2.1.0: + resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==} + + character-entities-legacy@3.0.0: + resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==} + + character-entities@2.0.2: + resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==} + check-error@2.1.3: resolution: {integrity: sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA==} engines: {node: '>= 16'} @@ -2525,6 +2961,10 @@ packages: resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==} engines: {node: '>= 14.16.0'} + chokidar@5.0.0: + resolution: {integrity: sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==} + engines: {node: '>= 20.19.0'} + chownr@3.0.0: resolution: {integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==} engines: {node: '>=18'} @@ -2545,6 +2985,10 @@ packages: resolution: {integrity: sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==} engines: {node: '>=6.0'} + ci-info@4.4.0: + resolution: {integrity: sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg==} + engines: {node: '>=8'} + cipher-base@1.0.7: resolution: {integrity: sha512-Mz9QMT5fJe7bKI7MH31UilT5cEK5EHHRCccw/YRFsRY47AuNgaV6HY3rscp0/I4Q+tTW/5zoqpSeRRI54TkDWA==} engines: {node: '>= 0.10'} @@ -2557,6 +3001,10 @@ packages: resolution: {integrity: sha512-9ngPTOhYGQqNVSfeJkYXHmF7AGWp4/nN5D/QqNQs3Dvxd1Kk/WpjHfNujKHYUQ/5CoGyOyFNoWSPk5afzP0QVg==} engines: {node: '>=14.16'} + cli-boxes@3.0.0: + resolution: {integrity: sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g==} + engines: {node: '>=10'} + cli-color@2.0.4: resolution: {integrity: sha512-zlnpg0jNcibNrO7GG9IeHH7maWFeCz+Ja1wx/7tZNU5ASSSSZ+/qZciM0/LHCYxSdqv5h2sdbQ/PXYdOuetXvA==} engines: {node: '>=0.10'} @@ -2585,6 +3033,10 @@ packages: resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==} engines: {node: '>=12'} + clsx@2.1.1: + resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==} + engines: {node: '>=6'} + color-convert@1.9.3: resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==} @@ -2602,6 +3054,13 @@ packages: resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==} engines: {node: '>= 0.8'} + comma-separated-tokens@2.0.3: + resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==} + + commander@11.1.0: + resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==} + engines: {node: '>=16'} + commander@12.1.0: resolution: {integrity: sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==} engines: {node: '>=18'} @@ -2617,6 +3076,9 @@ packages: resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==} engines: {node: '>= 6'} + common-ancestor-path@1.0.1: + resolution: {integrity: sha512-L3sHRo1pXXEqX8VU28kfgUY+YGsk09hPqZiZmLacNib6XNTCM8ubYeT7ryXQw8asB1sKgcU5lkB7ONug08aB8w==} + compare-func@2.0.0: resolution: {integrity: sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==} @@ -2666,10 +3128,17 @@ packages: convert-source-map@2.0.0: resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==} + cookie-es@1.2.2: + resolution: {integrity: sha512-+W7VmiVINB+ywl1HGXJXmrqkOhpKrIiVZV6tQuV54ZyQC7MMuBt81Vc336GMLoHBq5hV/F9eXgt5Mnx0Rha5Fg==} + cookie@1.1.1: resolution: {integrity: sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==} engines: {node: '>=18'} + copy-anything@4.0.5: + resolution: {integrity: sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==} + engines: {node: '>=18'} + core-js-compat@3.48.0: resolution: {integrity: sha512-OM4cAF3D6VtH/WkLtWvyNC56EZVXsZdU3iqaMG2B4WvYrlqU831pc4UtG5yp0sE9z8Y02wVN7PjW5Zf9Gt0f1Q==} @@ -2698,6 +3167,9 @@ packages: resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==} engines: {node: '>= 8'} + crossws@0.3.5: + resolution: {integrity: sha512-ojKiDvcmByhwa8YYqbQI/hg7MEU0NC03+pSdEq4ZUnZR9xXpwk7E43SMNGkn+JxJGPFtNvQ48+vV2p+P1ml5PA==} + crypto-browserify@3.12.1: resolution: {integrity: sha512-r4ESw/IlusD17lgQi1O20Fa3qNnsckR126TdUuBgAu7GBYSIPvdNyONd3Zrxh0xCwA4+6w/TDArBPsMvhur+KQ==} engines: {node: '>= 0.10'} @@ -2706,6 +3178,21 @@ packages: resolution: {integrity: sha512-x8dy3RnvYdlUcPOjkEHqozhiwzKNSq7GcPuXFbnyMOCHxX8V3OgIg/pYuabl2sbUPfIJaeAQB7PMOK8DFIdoRA==} engines: {node: '>=12'} + css-select@5.2.2: + resolution: {integrity: sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==} + + css-tree@2.2.1: + resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==} + engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'} + + css-tree@3.2.1: + resolution: {integrity: sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==} + engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0} + + css-what@6.2.2: + resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==} + engines: {node: '>= 6'} + css.escape@1.5.1: resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==} @@ -2714,6 +3201,10 @@ packages: engines: {node: '>=4'} hasBin: true + csso@5.0.5: + resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==} + engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'} + cssstyle@4.6.0: resolution: {integrity: sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==} engines: {node: '>=18'} @@ -2744,6 +3235,9 @@ packages: decimal.js@10.6.0: resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==} + decode-named-character-reference@1.3.0: + resolution: {integrity: sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q==} + decompress-tar@4.1.1: resolution: {integrity: sha512-JdJMaCrGpB5fESVyxwpCx4Jdj2AagLmv3y58Qy4GE6HMVjWz1FeVQk1Ct4Kye7PftcdOo/7U7UKzYBJgqnGeUQ==} engines: {node: '>=4'} @@ -2795,6 +3289,9 @@ packages: resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==} engines: {node: '>= 0.4'} + defu@6.1.4: + resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==} + delayed-stream@1.0.0: resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==} engines: {node: '>=0.4.0'} @@ -2809,13 +3306,30 @@ packages: des.js@1.1.0: resolution: {integrity: sha512-r17GxjhUCjSRy8aiJpr8/UadFIzMzJGexI3Nmz4ADi9LYSFx4gTBp80+NaX/YsXWWLhpZ7v/v/ubEc/bCNfKwg==} + destr@2.0.5: + resolution: {integrity: sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==} + detect-libc@2.1.2: resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==} engines: {node: '>=8'} + deterministic-object-hash@2.0.2: + resolution: {integrity: sha512-KxektNH63SrbfUyDiwXqRb1rLwKt33AmMv+5Nhsw1kqZ13SJBRTgZHtGbE+hH3a1mVW1cz+4pqSWVPAtLVXTzQ==} + engines: {node: '>=18'} + + devalue@5.6.3: + resolution: {integrity: sha512-nc7XjUU/2Lb+SvEFVGcWLiKkzfw8+qHI7zn8WYXKkLMgfGSHbgCEaR6bJpev8Cm6Rmrb19Gfd/tZvGqx9is3wg==} + + devlop@1.1.0: + resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==} + didyoumean@1.2.2: resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==} + diff@8.0.3: + resolution: {integrity: sha512-qejHi7bcSD4hQAZE0tNAawRK1ZtafHDmMTMkrrIGgSLl7hTnQHmKCeB45xAcbfTqK2zowkM3j3bHt/4b/ARbYQ==} + engines: {node: '>=0.3.1'} + diffie-hellman@5.0.3: resolution: {integrity: sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==} @@ -2832,6 +3346,19 @@ packages: dom-accessibility-api@0.6.3: resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==} + dom-serializer@2.0.0: + resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==} + + domelementtype@2.3.0: + resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==} + + domhandler@5.0.3: + resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==} + engines: {node: '>= 4'} + + domutils@3.2.2: + resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==} + dot-prop@5.3.0: resolution: {integrity: sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==} engines: {node: '>=8'} @@ -2840,6 +3367,10 @@ packages: resolution: {integrity: sha512-IO8C/dzEb6O3F9/twg6ZLXz164a2fhTnEWb95H23Dm4OuN+92NmEAlTrupP9VW6Jm3sO26tQlqyvyi4CsnY9GA==} engines: {node: '>=12'} + dset@3.1.4: + resolution: {integrity: sha512-2QF/g9/zTaPDc3BjNcVTGoBbXBgYfMTTceLaYcFJ/W9kggFUkhxD/hMEeuLKbugyef9SqAx8cpgwlIP/jinUTA==} + engines: {node: '>=4'} + dunder-proto@1.0.1: resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==} engines: {node: '>= 0.4'} @@ -2878,6 +3409,10 @@ packages: resolution: {integrity: sha512-/ce7+jQ1PQ6rVXwe+jKEg5hW5ciicHwIQUagZkp6IufBoY3YDgdTTY1azVs0qoRgVmvsNB+rbjLJxDAeHHtwsQ==} engines: {node: '>=10.13.0'} + entities@4.5.0: + resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==} + engines: {node: '>=0.12'} + entities@6.0.1: resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==} engines: {node: '>=0.12'} @@ -2904,6 +3439,9 @@ packages: error-ex@1.3.4: resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==} + error-stack-parser-es@0.1.5: + resolution: {integrity: sha512-xHku1X40RO+fO8yJ8Wh2f2rZWVjqyhb1zgq1yZ8aZRQkv6OOKhKWRUaht3eSCUbAOBaKIgM+ykwFLE+QUxgGeg==} + es-define-property@1.0.1: resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==} engines: {node: '>= 0.4'} @@ -3087,6 +3625,9 @@ packages: event-emitter@0.3.5: resolution: {integrity: sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==} + eventemitter3@5.0.4: + resolution: {integrity: sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==} + events@3.3.0: resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==} engines: {node: '>=0.8.x'} @@ -3116,6 +3657,9 @@ packages: ext@1.7.0: resolution: {integrity: sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==} + extend@3.0.2: + resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==} + fantasticon@4.1.0: resolution: {integrity: sha512-Clnp+ic3eH33fEKfJOf7eDOUAjv/+cD7lqPQVMwDk+5jYVzNoBrQi1JVSSsSL+j1+S04bQDHH35RkpnsvBQILA==} engines: {node: '>= 22.0'} @@ -3216,6 +3760,10 @@ packages: flatted@3.3.4: resolution: {integrity: sha512-3+mMldrTAPdta5kjX2G2J7iX4zxtnwpdA8Tr2ZSjkyPSanvbZAcy6flmtnXbEybHrDcU9641lxrMfFuUxVz9vA==} + flattie@1.1.1: + resolution: {integrity: sha512-9UbaD6XdAL97+k/n+N7JwX46K/M6Zc6KcFYskrYL8wbBV/Uyk0CTAMY0VT+qiK5PM7AIc9aTWYtq65U7T+aCNQ==} + engines: {node: '>=8'} + follow-redirects@1.15.11: resolution: {integrity: sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==} engines: {node: '>=4.0'} @@ -3225,6 +3773,13 @@ packages: debug: optional: true + fontace@0.4.1: + resolution: {integrity: sha512-lDMvbAzSnHmbYMTEld5qdtvNH2/pWpICOqpean9IgC7vUbUJc3k+k5Dokp85CegamqQpFbXf0rAVkbzpyTA8aw==} + + fontkitten@1.0.3: + resolution: {integrity: sha512-Wp1zXWPVUPBmfoa3Cqc9ctaKuzKAV6uLstRqlR56kSjplf5uAce+qeyYym7F+PHbGTk+tCEdkCW6RD7DX/gBZw==} + engines: {node: '>=20'} + for-each@0.3.5: resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==} engines: {node: '>= 0.4'} @@ -3316,6 +3871,9 @@ packages: git-log-parser@1.2.1: resolution: {integrity: sha512-PI+sPDvHXNPl5WNOErAK05s3j0lgwUzMN6o8cyQrDaKfT3qd7TmNJKeXX+SknI5I0QhG5fVPAEwSY4tRGDtYoQ==} + github-slugger@2.0.0: + resolution: {integrity: sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==} + glob-parent@5.1.2: resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==} engines: {node: '>= 6'} @@ -3368,6 +3926,9 @@ packages: resolution: {integrity: sha512-6ABGa9CR7WR/0pAJicBy5SJkiikbFM6kf/JjykwX7x+t+s8ORWVnlbi6FkHeFFb36yWsjUpHqSYrygd7ofEUqA==} engines: {node: '>=0.10.0'} + h3@1.15.5: + resolution: {integrity: sha512-xEyq3rSl+dhGX2Lm0+eFQIAzlDN6Fs0EcC4f7BNUmzaRX/PTzeuM+Tr2lHB8FoXggsQIeXLj8EDVgs5ywxyxmg==} + handlebars@4.7.8: resolution: {integrity: sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==} engines: {node: '>=0.4.7'} @@ -3411,6 +3972,36 @@ packages: resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==} engines: {node: '>= 0.4'} + hast-util-from-html@2.0.3: + resolution: {integrity: sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw==} + + hast-util-from-parse5@8.0.3: + resolution: {integrity: sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==} + + hast-util-is-element@3.0.0: + resolution: {integrity: sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==} + + hast-util-parse-selector@4.0.0: + resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==} + + hast-util-raw@9.1.0: + resolution: {integrity: sha512-Y8/SBAHkZGoNkpzqqfCldijcuUKh7/su31kEBp67cFY09Wy0mTRgtsLYsiIxMJxlu0f6AA5SUTbDR8K0rxnbUw==} + + hast-util-to-html@9.0.5: + resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==} + + hast-util-to-parse5@8.0.1: + resolution: {integrity: sha512-MlWT6Pjt4CG9lFCjiz4BH7l9wmrMkfkJYCxFwKQic8+RTZgWPuWxwAfjJElsXkex7DJjfSJsQIt931ilUgmwdA==} + + hast-util-to-text@4.0.2: + resolution: {integrity: sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A==} + + hast-util-whitespace@3.0.0: + resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==} + + hastscript@9.0.1: + resolution: {integrity: sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==} + highlight.js@10.7.3: resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==} @@ -3421,6 +4012,9 @@ packages: resolution: {integrity: sha512-jHRQzjSDzMtFy34AGj1DN+vq54WVuhSvKgrHf0OMiFQTwDD4L/qqofVEWjLOBMTn5+lCD3fPg32W9yOfnEJTTw==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} + hookable@5.5.3: + resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==} + hosted-git-info@7.0.2: resolution: {integrity: sha512-puUZAUKT5m8Zzvs72XWy3HtvVbTWljRE66cP60bxJzAqf2DgICo7lYTY2IHUmLnNpjYvw5bvmoHvPc0QO2a62w==} engines: {node: ^16.14.0 || >=18.0.0} @@ -3429,6 +4023,12 @@ packages: resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==} engines: {node: '>=18'} + html-escaper@3.0.3: + resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==} + + html-void-elements@3.0.0: + resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==} + http-cache-semantics@4.2.0: resolution: {integrity: sha512-dTxcvPXqPvXBQpq5dUr6mEMJX4oIEFv6bwom3FDwKRDsuIjjJGANqhBuoAn9c1RQJIdAKav33ED65E2ys+87QQ==} @@ -3523,6 +4123,9 @@ packages: resolution: {integrity: sha512-KifhLKBjdS/hB3TD4UUOalVp1BpzPFvRpgJvXcP0Ya98tuSQTUQ71iI7EW7CKddkBJTYB3GfTWl5eJwpLOXj2A==} engines: {node: '>=16.14.0'} + iron-webcrypto@1.2.1: + resolution: {integrity: sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg==} + is-arguments@1.2.0: resolution: {integrity: sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==} engines: {node: '>= 0.4'} @@ -3637,6 +4240,10 @@ packages: resolution: {integrity: sha512-mE00Gnza5EEB3Ds0HfMyllZzbBrmLOX3vfWoj9A9PEnTfratQ/BcaJOuMhnkhjXvb2+FkY3VuHqtAGpTPmglFQ==} engines: {node: '>=18'} + is-what@5.5.0: + resolution: {integrity: sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==} + engines: {node: '>=18'} + is-wsl@3.1.1: resolution: {integrity: sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw==} engines: {node: '>=16'} @@ -3747,6 +4354,13 @@ packages: keyv@4.5.4: resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==} + kleur@3.0.3: + resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==} + engines: {node: '>=6'} + + kolorist@1.8.0: + resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==} + levn@0.4.1: resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==} engines: {node: '>= 0.8.0'} @@ -3808,6 +4422,9 @@ packages: resolution: {integrity: sha512-i24m8rpwhmPIS4zscNzK6MSEhk0DUWa/8iYQWxhffV8jkI4Phvs3F+quL5xvS0gdQR0FyTCMMH33Y78dDTzzIw==} engines: {node: '>=18'} + longest-streak@3.1.0: + resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==} + loupe@3.2.1: resolution: {integrity: sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==} @@ -3831,6 +4448,9 @@ packages: magic-string@0.30.21: resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==} + magicast@0.5.2: + resolution: {integrity: sha512-E3ZJh4J3S9KfwdjZhe2afj6R9lGIN5Pher1pF39UGrXRqq/VDaGVIGN13BjHd2u8B61hArAGOnso7nBOouW3TQ==} + make-asynchronous@1.1.0: resolution: {integrity: sha512-ayF7iT+44LXdxJLTrTd3TLQpFDDvPCBxXxbv+pMUSuHA5Q8zyAfwkRP6aHHwNVFBUFWtxAHqwNJxF8vMZLAbVg==} engines: {node: '>=18'} @@ -3843,6 +4463,9 @@ packages: resolution: {integrity: sha512-QMjGbFTP0blj97EeidG5hk/QhKQ3T4ICckQGLgz38QF7Vgbk6e6FTARN8KhKxyBbWn8R0HU+bnw8aSoFPD4qtQ==} engines: {node: ^18.17.0 || >=20.5.0} + markdown-table@3.0.4: + resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==} + marked-terminal@7.3.0: resolution: {integrity: sha512-t4rBvPsHc57uE/2nJOLmMbZCQ4tgAccAED3ngXQqW6g+TxA488JzJ+FK3lQkzBQOI1mRV/r/Kq+1ZlJ4D0owQw==} engines: {node: '>=16.0.0'} @@ -3866,6 +4489,51 @@ packages: md5.js@1.3.5: resolution: {integrity: sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==} + mdast-util-definitions@6.0.0: + resolution: {integrity: sha512-scTllyX6pnYNZH/AIp/0ePz6s4cZtARxImwoPJ7kS42n+MnVsI4XbnG6d4ibehRIldYMWM2LD7ImQblVhUejVQ==} + + mdast-util-find-and-replace@3.0.2: + resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==} + + mdast-util-from-markdown@2.0.3: + resolution: {integrity: sha512-W4mAWTvSlKvf8L6J+VN9yLSqQ9AOAAvHuoDAmPkz4dHf553m5gVj2ejadHJhoJmcmxEnOv6Pa8XJhpxE93kb8Q==} + + mdast-util-gfm-autolink-literal@2.0.1: + resolution: {integrity: sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==} + + mdast-util-gfm-footnote@2.1.0: + resolution: {integrity: sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==} + + mdast-util-gfm-strikethrough@2.0.0: + resolution: {integrity: sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==} + + mdast-util-gfm-table@2.0.0: + resolution: {integrity: sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==} + + mdast-util-gfm-task-list-item@2.0.0: + resolution: {integrity: sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==} + + mdast-util-gfm@3.1.0: + resolution: {integrity: sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==} + + mdast-util-phrasing@4.1.0: + resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==} + + mdast-util-to-hast@13.2.1: + resolution: {integrity: sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==} + + mdast-util-to-markdown@2.1.2: + resolution: {integrity: sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==} + + mdast-util-to-string@4.0.0: + resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==} + + mdn-data@2.0.28: + resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==} + + mdn-data@2.27.1: + resolution: {integrity: sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==} + memoizee@0.4.17: resolution: {integrity: sha512-DGqD7Hjpi/1or4F/aYAspXKNm5Yili0QDAFAY4QYvpqpgiY6+1jOfqpmByzjxbWd/T9mChbCArXAbDAsTm5oXA==} engines: {node: '>=0.12'} @@ -3884,6 +4552,90 @@ packages: microbuffer@1.0.0: resolution: {integrity: sha512-O/SUXauVN4x6RaEJFqSPcXNtLFL+QzJHKZlyDVYFwcDDRVca3Fa/37QXXC+4zAGGa4YhHrHxKXuuHvLDIQECtA==} + micromark-core-commonmark@2.0.3: + resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==} + + micromark-extension-gfm-autolink-literal@2.1.0: + resolution: {integrity: sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==} + + micromark-extension-gfm-footnote@2.1.0: + resolution: {integrity: sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==} + + micromark-extension-gfm-strikethrough@2.1.0: + resolution: {integrity: sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==} + + micromark-extension-gfm-table@2.1.1: + resolution: {integrity: sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==} + + micromark-extension-gfm-tagfilter@2.0.0: + resolution: {integrity: sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==} + + micromark-extension-gfm-task-list-item@2.1.0: + resolution: {integrity: sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==} + + micromark-extension-gfm@3.0.0: + resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==} + + micromark-factory-destination@2.0.1: + resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==} + + micromark-factory-label@2.0.1: + resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==} + + micromark-factory-space@2.0.1: + resolution: {integrity: sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==} + + micromark-factory-title@2.0.1: + resolution: {integrity: sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==} + + micromark-factory-whitespace@2.0.1: + resolution: {integrity: sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==} + + micromark-util-character@2.1.1: + resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==} + + micromark-util-chunked@2.0.1: + resolution: {integrity: sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==} + + micromark-util-classify-character@2.0.1: + resolution: {integrity: sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==} + + micromark-util-combine-extensions@2.0.1: + resolution: {integrity: sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==} + + micromark-util-decode-numeric-character-reference@2.0.2: + resolution: {integrity: sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==} + + micromark-util-decode-string@2.0.1: + resolution: {integrity: sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==} + + micromark-util-encode@2.0.1: + resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==} + + micromark-util-html-tag-name@2.0.1: + resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==} + + micromark-util-normalize-identifier@2.0.1: + resolution: {integrity: sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==} + + micromark-util-resolve-all@2.0.1: + resolution: {integrity: sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==} + + micromark-util-sanitize-uri@2.0.1: + resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==} + + micromark-util-subtokenize@2.1.0: + resolution: {integrity: sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==} + + micromark-util-symbol@2.0.1: + resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==} + + micromark-util-types@2.0.2: + resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==} + + micromark@4.0.2: + resolution: {integrity: sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==} + micromatch@4.0.8: resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==} engines: {node: '>=8.6'} @@ -3981,6 +4733,9 @@ packages: resolution: {integrity: sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==} engines: {node: '>= 18'} + mitt@3.0.1: + resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==} + mkdirp@3.0.1: resolution: {integrity: sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==} engines: {node: '>=10'} @@ -3990,6 +4745,10 @@ packages: resolution: {integrity: sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==} engines: {node: '>=0.10.0'} + mrmime@2.0.1: + resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==} + engines: {node: '>=10'} + ms@2.1.3: resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==} @@ -4004,6 +4763,11 @@ packages: engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} hasBin: true + nanoid@5.1.6: + resolution: {integrity: sha512-c7+7RQ+dMB5dPwwCp4ee1/iV/q2P6aK1mTZcfr1BTuVlyW9hJYiMPybJCcnBlQtuSmTIWNeazm/zqNoZSSElBg==} + engines: {node: ^18 || >=20} + hasBin: true + natural-compare@1.4.0: resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} @@ -4018,12 +4782,19 @@ packages: neo-async@2.6.2: resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==} + neotraverse@0.6.18: + resolution: {integrity: sha512-Z4SmBUweYa09+o6pG+eASabEpP6QkQ70yHj351pQoEXIs8uHbaU2DWVmzBANKgflPa47A50PtB2+NgRpQvr7vA==} + engines: {node: '>= 10'} + nerf-dart@1.0.0: resolution: {integrity: sha512-EZSPZB70jiVsivaBLYDCyntd5eH8NTSMOn3rB+HxwdmKThGELLdYv8qVIMWvZEFy9w8ZZpW9h9OB32l1rGtj7g==} next-tick@1.1.0: resolution: {integrity: sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==} + nlcst-to-string@4.0.0: + resolution: {integrity: sha512-YKLBCcUYKAg0FNlOBT6aI91qFmSiFKiluk655WzPF+DDMA02qIyy8uiRqI8QXtcFpEvll12LpL5MXqEmAZ+dcA==} + node-addon-api@7.1.1: resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==} @@ -4031,6 +4802,9 @@ packages: resolution: {integrity: sha512-Z3lTE9pLaJF47NyMhd4ww1yFTAP8YhYI8SleJiHzM46Fgpm5cnNzSl9XfzFNqbaz+VlJrIj3fXQ4DeN1Rjm6cw==} engines: {node: '>=18'} + node-fetch-native@1.6.7: + resolution: {integrity: sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==} + node-gyp@11.5.0: resolution: {integrity: sha512-ra7Kvlhxn5V9Slyus0ygMa2h+UqExPqUIkfk7Pc8QTLT956JLSy51uWFwHtIYy0vI8cB4BDhc/S03+880My/LQ==} engines: {node: ^18.17.0 || >=20.5.0} @@ -4040,6 +4814,9 @@ packages: resolution: {integrity: sha512-GtmPYJiHqmkt4sd7oYqUIzFepBDY6aotmD7nuF9QV9lolH+Sru5FZCholI5QuuyM+NvgAq/BaQB6OgXv+ZT8lA==} engines: {node: '>=10.18.0'} + node-mock-http@1.0.4: + resolution: {integrity: sha512-8DY+kFsDkNXy1sJglUfuODx1/opAGJGyrTuFqEoN90oRc2Vk0ZbD4K2qmKXBBEhZQzdKHIVfEJpDU8Ak2NJEvQ==} + node-releases@2.0.27: resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==} @@ -4172,6 +4949,12 @@ packages: resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==} engines: {node: '>= 0.4'} + ofetch@1.5.1: + resolution: {integrity: sha512-2W4oUZlVaqAPAil6FUg/difl6YhqhUR7x2eZY4bQCko22UXg3hptq9KLQdqFClV+Wu85UX7hNtdGTngi/1BxcA==} + + ohash@2.0.11: + resolution: {integrity: sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==} + once@1.4.0: resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==} @@ -4187,6 +4970,12 @@ packages: resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==} engines: {node: '>=18'} + oniguruma-parser@0.12.1: + resolution: {integrity: sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w==} + + oniguruma-to-es@4.3.4: + resolution: {integrity: sha512-3VhUGN3w2eYxnTzHn+ikMI+fp/96KoRSVK9/kMTcFqj1NRDh2IhQCKvYxDnWePKRXY/AqH+Fuiyb7VHSzBjHfA==} + open@10.2.0: resolution: {integrity: sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==} engines: {node: '>=18'} @@ -4227,6 +5016,10 @@ packages: resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==} engines: {node: '>=10'} + p-limit@6.2.0: + resolution: {integrity: sha512-kuUqqHNUqoIWp/c467RI4X6mmyuojY5jGutNU0wVTmEOOfcuwLqyMVoAi9MKi2Ak+5i9+nhmrK4ufZE8069kHA==} + engines: {node: '>=18'} + p-locate@2.0.0: resolution: {integrity: sha512-nQja7m7gSKuewoVRen45CtVfODR3crN3goVQ0DDZ9N3yHxgpkuBhZqsaiotSQRrADUrne346peY7kT3TSACykg==} engines: {node: '>=4'} @@ -4239,6 +5032,10 @@ packages: resolution: {integrity: sha512-tkAQEw8ysMzmkhgw8k+1U/iPhWNhykKnSk4Rd5zLoPJCuJaGRPo6YposrZgaxHKzDHdDWWZvE/Sk7hsL2X/CpQ==} engines: {node: '>=18'} + p-queue@8.1.1: + resolution: {integrity: sha512-aNZ+VfjobsWryoiPnEApGGmf5WmNsCo9xu8dfaYamG5qaLP7ClhLN6NgsFe6SwJ2UbLEBK5dv9x8Mn5+RVhMWQ==} + engines: {node: '>=18'} + p-reduce@2.1.0: resolution: {integrity: sha512-2USApvnsutq8uoxZBGbbWM0JIYLiEMJ9RlaN7fAzVNb9OZN0SHjjTTfIcb667XynS5Y1VhwDJVDa72TnPzAYWw==} engines: {node: '>=8'} @@ -4258,6 +5055,9 @@ packages: package-json-from-dist@1.0.1: resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==} + package-manager-detector@1.6.0: + resolution: {integrity: sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA==} + pako@1.0.11: resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==} @@ -4281,6 +5081,9 @@ packages: resolution: {integrity: sha512-ybiGyvspI+fAoRQbIPRddCcSTV9/LsJbf0e/S85VLowVGzRmokfneg2kwVW/KU5rOXrPSbF1qAKPMgNTqqROQQ==} engines: {node: '>=18'} + parse-latin@7.0.0: + resolution: {integrity: sha512-mhHgobPPua5kZ98EF4HWiH167JWBfl4pvAIXXdbaVohtK7a6YBOy56kvhCqduqyo/f3yrHFWmqmiMg/BkBkYYQ==} + parse-ms@4.0.0: resolution: {integrity: sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==} engines: {node: '>=18'} @@ -4349,6 +5152,12 @@ packages: pend@1.2.0: resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==} + perfect-debounce@1.0.0: + resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==} + + piccolore@0.1.3: + resolution: {integrity: sha512-o8bTeDWjE086iwKrROaDf31K0qC/BENdm15/uH9usSC/uZjJOKb2YGiVHfLY4GhwsERiPI1jmwI2XrA7ACOxVw==} + picocolors@1.1.1: resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==} @@ -4405,6 +5214,18 @@ packages: peerDependencies: postcss: ^8.4.21 + postcss-load-config@4.0.2: + resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==} + engines: {node: '>= 14'} + peerDependencies: + postcss: '>=8.0.9' + ts-node: '>=9.0.0' + peerDependenciesMeta: + postcss: + optional: true + ts-node: + optional: true + postcss-load-config@6.0.1: resolution: {integrity: sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==} engines: {node: '>= 18'} @@ -4477,6 +5298,10 @@ packages: peerDependencies: vue: ^3.0.0 + prismjs@1.30.0: + resolution: {integrity: sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==} + engines: {node: '>=6'} + proc-log@5.0.0: resolution: {integrity: sha512-Azwzvl90HaF0aCz1JrDdXQykFakSSNPaPoiZ9fm5qJIMHioDZEi7OAdRwSm6rSoPtY3Qutnm3L7ogmg3dc+wbQ==} engines: {node: ^18.17.0 || >=20.5.0} @@ -4496,6 +5321,13 @@ packages: resolution: {integrity: sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==} engines: {node: '>=10'} + prompts@2.4.2: + resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==} + engines: {node: '>= 6'} + + property-information@7.1.0: + resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==} + proto-list@1.2.4: resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==} @@ -4519,6 +5351,9 @@ packages: queue-microtask@1.2.3: resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} + radix3@1.1.2: + resolution: {integrity: sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==} + randombytes@2.1.0: resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==} @@ -4572,6 +5407,10 @@ packages: resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==} engines: {node: '>= 14.18.0'} + readdirp@5.0.0: + resolution: {integrity: sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==} + engines: {node: '>= 20.19.0'} + recast@0.23.11: resolution: {integrity: sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==} engines: {node: '>= 4'} @@ -4587,6 +5426,15 @@ packages: regenerate@1.4.2: resolution: {integrity: sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==} + regex-recursion@6.0.2: + resolution: {integrity: sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==} + + regex-utilities@2.3.0: + resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==} + + regex@6.1.0: + resolution: {integrity: sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg==} + regexpu-core@6.4.0: resolution: {integrity: sha512-0ghuzq67LI9bLXpOX/ISfve/Mq33a4aFRzoQYhnnok1JOFpmE/A2TBGkNVenOGEeSBCjIiWcc6MVOG5HEQv0sA==} engines: {node: '>=4'} @@ -4602,6 +5450,34 @@ packages: resolution: {integrity: sha512-NZQZdC5wOE/H3UT28fVGL+ikOZcEzfMGk/c3iN9UGxzWHMa1op7274oyiUVrAG4B2EuFhus8SvkaYnhvW92p9Q==} hasBin: true + rehype-parse@9.0.1: + resolution: {integrity: sha512-ksCzCD0Fgfh7trPDxr2rSylbwq9iYDkSn8TCDmEJ49ljEUBxDVCzCHv7QNzZOfODanX4+bWQ4WZqLCRWYLfhag==} + + rehype-raw@7.0.0: + resolution: {integrity: sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==} + + rehype-stringify@10.0.1: + resolution: {integrity: sha512-k9ecfXHmIPuFVI61B9DeLPN0qFHfawM6RsuX48hoqlaKSF61RskNjSm1lI8PhBEM0MRdLxVVm4WmTqJQccH9mA==} + + rehype@13.0.2: + resolution: {integrity: sha512-j31mdaRFrwFRUIlxGeuPXXKWQxet52RBQRvCmzl5eCefn/KGbomK5GMHNMsOJf55fgo3qw5tST5neDuarDYR2A==} + + remark-gfm@4.0.1: + resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==} + + remark-parse@11.0.0: + resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==} + + remark-rehype@11.1.2: + resolution: {integrity: sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==} + + remark-smartypants@3.0.2: + resolution: {integrity: sha512-ILTWeOriIluwEvPjv67v7Blgrcx+LZOkAUVtKI3putuhlZm84FnqDORNXPPm+HY3NdZOMhyDwZ1E+eZB/Df5dA==} + engines: {node: '>=16.0.0'} + + remark-stringify@11.0.0: + resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==} + require-directory@2.1.1: resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==} engines: {node: '>=0.10.0'} @@ -4627,6 +5503,18 @@ packages: resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==} engines: {node: '>=18'} + retext-latin@4.0.0: + resolution: {integrity: sha512-hv9woG7Fy0M9IlRQloq/N6atV82NxLGveq+3H2WOi79dtIYWN8OaxogDm77f8YnVXJL2VD3bbqowu5E3EMhBYA==} + + retext-smartypants@6.2.0: + resolution: {integrity: sha512-kk0jOU7+zGv//kfjXEBjdIryL1Acl4i9XNkHxtM7Tm5lFiCog576fjNC9hjoR7LTKQ0DsPWy09JummSsH1uqfQ==} + + retext-stringify@4.0.0: + resolution: {integrity: sha512-rtfN/0o8kL1e+78+uxPTqu1Klt0yPzKuQ2BfWwwfgIUSayyzxpM1PJzkKt4V8803uB9qSy32MvI7Xep9khTpiA==} + + retext@9.0.0: + resolution: {integrity: sha512-sbMDcpHCNjvlheSgMfEcVrZko3cDzdbe1x/e7G66dFp0Ff7Mldvi2uv6JkJQzdRcvLYE8CA8Oe8siQx8ZOgTcA==} + retry@0.12.0: resolution: {integrity: sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==} engines: {node: '>= 4'} @@ -4635,6 +5523,9 @@ packages: resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==} engines: {iojs: '>=1.0.0', node: '>=0.10.0'} + rfdc@1.4.1: + resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==} + ripemd160@2.0.3: resolution: {integrity: sha512-5Di9UC0+8h1L6ZD2d7awM7E/T4uA1fJRlx6zk/NvdCCVEoAnFqvHmCuNeIKoCeIixBX/q8uM+6ycDvF8woqosA==} engines: {node: '>= 0.8'} @@ -4732,6 +5623,10 @@ packages: engines: {node: '>= 0.10'} hasBin: true + sharp@0.34.5: + resolution: {integrity: sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + shebang-command@2.0.0: resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==} engines: {node: '>=8'} @@ -4740,6 +5635,9 @@ packages: resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==} engines: {node: '>=8'} + shiki@3.23.0: + resolution: {integrity: sha512-55Dj73uq9ZXL5zyeRPzHQsK7Nbyt6Y10k5s7OjuFZGMhpp4r/rsLBH0o/0fstIzX1Lep9VxefWljK/SKCzygIA==} + side-channel-list@1.0.0: resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==} engines: {node: '>= 0.4'} @@ -4770,6 +5668,13 @@ packages: resolution: {integrity: sha512-iuh+gPf28RkltuJC7W5MRi6XAjTDCAPC/prJUpQoG4vIP3MJZ+GTydVnodXA7pwvTKb2cA0m9OFZW/cdWy/I/w==} engines: {node: '>=6'} + sirv@3.0.2: + resolution: {integrity: sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==} + engines: {node: '>=18'} + + sisteransi@1.0.5: + resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==} + skin-tone@2.0.0: resolution: {integrity: sha512-kUMbT1oBJCpgrnKoSr0o6wPtvRWT9W9UKvGLwfJYO2WuahZRHOpEyL1ckyMGgMWh0UdpmaoFqKKD29WTomNEGA==} engines: {node: '>=8'} @@ -4786,6 +5691,10 @@ packages: resolution: {integrity: sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==} engines: {node: '>= 6.0.0', npm: '>= 3.0.0'} + smol-toml@1.6.0: + resolution: {integrity: sha512-4zemZi0HvTnYwLfrpk/CF9LOd9Lt87kAt50GnqhMpyF9U3poDAP2+iukq2bZsO/ufegbYehBkqINbsWxj4l4cw==} + engines: {node: '>= 18'} + socks-proxy-agent@8.0.5: resolution: {integrity: sha512-HehCEsotFqbPW9sJ8WVYB6UbmIMv7kUUORIF2Nncq4VQvBfNBLibW9YZR5dlYCSUhwcD628pRllm7n+E+YTzJw==} engines: {node: '>= 14'} @@ -4805,6 +5714,9 @@ packages: resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==} engines: {node: '>=0.10.0'} + space-separated-tokens@2.0.2: + resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==} + spawn-error-forwarder@1.0.0: resolution: {integrity: sha512-gRjMgK5uFjbCvdibeGJuy3I5OYz6VLoVdsOJdA6wV0WlfQVLFueoqMxwwYD9RODdgb6oUIvlRlsyFSiQkMKu0g==} @@ -4820,6 +5732,10 @@ packages: spdx-license-ids@3.0.23: resolution: {integrity: sha512-CWLcCCH7VLu13TgOH+r8p1O/Znwhqv/dbb6lqWy67G+pT1kHmeD/+V36AVb/vq8QMIQwVShJ6Ssl5FPh0fuSdw==} + speakingurl@14.0.1: + resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==} + engines: {node: '>=0.10.0'} + split2@1.0.0: resolution: {integrity: sha512-NKywug4u4pX/AZBB1FCPzZ6/7O+Xhz1qMVbzTvvKvikjO99oPN87SkK08mEY9P63/5lWjK+wgOOgApnTg5r6qg==} @@ -4880,6 +5796,9 @@ packages: string_decoder@1.3.0: resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==} + stringify-entities@4.0.4: + resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==} + strip-ansi@6.0.1: resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==} engines: {node: '>=8'} @@ -4931,6 +5850,10 @@ packages: resolution: {integrity: sha512-WHkws2ZflZe41zj6AolvvmaTrWds/VuyeYr9iPVv/oQeaIoVxMKaushfFWpOGDT+GuBrM/sVqF8KUCYQlSSTdQ==} engines: {node: '>=18'} + superjson@2.2.6: + resolution: {integrity: sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==} + engines: {node: '>=16'} + supports-color@5.5.0: resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==} engines: {node: '>=4'} @@ -4964,6 +5887,11 @@ packages: engines: {node: '>=20.11.1'} hasBin: true + svgo@4.0.1: + resolution: {integrity: sha512-XDpWUOPC6FEibaLzjfe0ucaV0YrOjYotGJO1WpF0Zd+n6ZGEQUsSugaoLq9QkEZtAfQIxT42UChcssDVPP3+/w==} + engines: {node: '>=16'} + hasBin: true + svgpath@2.6.0: resolution: {integrity: sha512-OIWR6bKzXvdXYyO4DK/UWa1VA1JeKq8E+0ug2DG98Y/vOmMpfZNj+TIG988HjfYSqtcy/hFOtZq/n/j5GSESNg==} @@ -5051,6 +5979,9 @@ packages: tiny-emitter@2.1.0: resolution: {integrity: sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==} + tiny-inflate@1.0.3: + resolution: {integrity: sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==} + tiny-invariant@1.3.3: resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==} @@ -5063,6 +5994,10 @@ packages: tinyexec@0.3.2: resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==} + tinyexec@1.0.2: + resolution: {integrity: sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg==} + engines: {node: '>=18'} + tinyglobby@0.2.15: resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==} engines: {node: '>=12.0.0'} @@ -5094,6 +6029,10 @@ packages: resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==} engines: {node: '>=8.0'} + totalist@3.0.1: + resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==} + engines: {node: '>=6'} + tough-cookie@5.1.2: resolution: {integrity: sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==} engines: {node: '>=16'} @@ -5109,9 +6048,25 @@ packages: resolution: {integrity: sha512-aXJDbk6SnumuaZSANd21XAo15ucCDE38H4fkqiGsc3MhCK+wOlZvLP9cB/TvpHT0mOyWgC4Z8EwRlzqYSUzdsA==} engines: {node: '>= 0.4'} + trim-lines@3.0.1: + resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==} + + trough@2.2.0: + resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==} + ts-interface-checker@0.1.13: resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==} + tsconfck@3.1.6: + resolution: {integrity: sha512-ks6Vjr/jEw0P1gmOVwutM3B7fWxoWBL2KRDb1JfqGVawBmO5UsvmWOQFGHBPl5yxYz4eERr19E6L7NMv+Fej4w==} + engines: {node: ^18 || >=20} + hasBin: true + peerDependencies: + typescript: ^5.0.0 + peerDependenciesMeta: + typescript: + optional: true + tslib@2.8.1: resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==} @@ -5164,14 +6119,23 @@ packages: engines: {node: '>=14.17'} hasBin: true + ufo@1.6.3: + resolution: {integrity: sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q==} + uglify-js@3.19.3: resolution: {integrity: sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==} engines: {node: '>=0.8.0'} hasBin: true + ultrahtml@1.6.0: + resolution: {integrity: sha512-R9fBn90VTJrqqLDwyMph+HGne8eqY1iPfYhPzZrvKpIfwkWZbcYlfpsb8B9dTvBfpy1/hqAD7Wi8EKfP9e8zdw==} + unbzip2-stream@1.4.3: resolution: {integrity: sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==} + uncrypto@0.1.3: + resolution: {integrity: sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q==} + undici-types@7.18.2: resolution: {integrity: sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==} @@ -5206,6 +6170,12 @@ packages: resolution: {integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==} engines: {node: '>=18'} + unified@11.0.5: + resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==} + + unifont@0.7.4: + resolution: {integrity: sha512-oHeis4/xl42HUIeHuNZRGEvxj5AaIKR+bHPNegRq5LV1gdc3jundpONbjglKpihmJf+dswygdMJn3eftGIMemg==} + unique-filename@4.0.0: resolution: {integrity: sha512-XSnEewXmQ+veP7xX2dS5Q4yZAvO40cBN2MWkJ7D/6sW4Dg6wYBNwM1Vrnz1FhH5AdeLIlUXRI9e28z1YZi71NQ==} engines: {node: ^18.17.0 || >=20.5.0} @@ -5218,6 +6188,33 @@ packages: resolution: {integrity: sha512-VGXBUVwxKMBUznyffQweQABPRRW1vHZAbadFZud4pLFAqRGvv/96vafgjWFqzourzr8YonlQiPgH0YCJfawoGQ==} engines: {node: '>=12'} + unist-util-find-after@5.0.0: + resolution: {integrity: sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ==} + + unist-util-is@6.0.1: + resolution: {integrity: sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==} + + unist-util-modify-children@4.0.0: + resolution: {integrity: sha512-+tdN5fGNddvsQdIzUF3Xx82CU9sMM+fA0dLgR9vOmT0oPT2jH+P1nd5lSqfCfXAw+93NhcXNY2qqvTUtE4cQkw==} + + unist-util-position@5.0.0: + resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==} + + unist-util-remove-position@5.0.0: + resolution: {integrity: sha512-Hp5Kh3wLxv0PHj9m2yZhhLt58KzPtEYKQQ4yxfYFEO7EvHwzyDYnduhHnY1mDxoqr7VUwVuHXk9RXKIiYS1N8Q==} + + unist-util-stringify-position@4.0.0: + resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==} + + unist-util-visit-children@3.0.0: + resolution: {integrity: sha512-RgmdTfSBOg04sdPcpTSD1jzoNBjt9a80/ZCzp5cI9n1qPzLZWF9YdvWGN2zmTumP1HWhXKdUWexjy/Wy/lJ7tA==} + + unist-util-visit-parents@6.0.2: + resolution: {integrity: sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==} + + unist-util-visit@5.1.0: + resolution: {integrity: sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==} + universal-user-agent@6.0.1: resolution: {integrity: sha512-yCzhz6FN2wU1NiiQRogkTQszlQSlpWaw8SvVegAc+bDxbzHgh1vX8uIe8OYyMH6DwH+sdTJsgMl36+mSMdRJIQ==} @@ -5228,6 +6225,68 @@ packages: resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==} engines: {node: '>= 10.0.0'} + unstorage@1.17.4: + resolution: {integrity: sha512-fHK0yNg38tBiJKp/Vgsq4j0JEsCmgqH58HAn707S7zGkArbZsVr/CwINoi+nh3h98BRCwKvx1K3Xg9u3VV83sw==} + peerDependencies: + '@azure/app-configuration': ^1.8.0 + '@azure/cosmos': ^4.2.0 + '@azure/data-tables': ^13.3.0 + '@azure/identity': ^4.6.0 + '@azure/keyvault-secrets': ^4.9.0 + '@azure/storage-blob': ^12.26.0 + '@capacitor/preferences': ^6 || ^7 || ^8 + '@deno/kv': '>=0.9.0' + '@netlify/blobs': ^6.5.0 || ^7.0.0 || ^8.1.0 || ^9.0.0 || ^10.0.0 + '@planetscale/database': ^1.19.0 + '@upstash/redis': ^1.34.3 + '@vercel/blob': '>=0.27.1' + '@vercel/functions': ^2.2.12 || ^3.0.0 + '@vercel/kv': ^1 || ^2 || ^3 + aws4fetch: ^1.0.20 + db0: '>=0.2.1' + idb-keyval: ^6.2.1 + ioredis: ^5.4.2 + uploadthing: ^7.4.4 + peerDependenciesMeta: + '@azure/app-configuration': + optional: true + '@azure/cosmos': + optional: true + '@azure/data-tables': + optional: true + '@azure/identity': + optional: true + '@azure/keyvault-secrets': + optional: true + '@azure/storage-blob': + optional: true + '@capacitor/preferences': + optional: true + '@deno/kv': + optional: true + '@netlify/blobs': + optional: true + '@planetscale/database': + optional: true + '@upstash/redis': + optional: true + '@vercel/blob': + optional: true + '@vercel/functions': + optional: true + '@vercel/kv': + optional: true + aws4fetch: + optional: true + db0: + optional: true + idb-keyval: + optional: true + ioredis: + optional: true + uploadthing: + optional: true + update-browserslist-db@1.2.3: resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==} hasBin: true @@ -5259,11 +6318,46 @@ packages: validate-npm-package-license@3.0.4: resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==} + vfile-location@5.0.3: + resolution: {integrity: sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==} + + vfile-message@4.0.3: + resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==} + + vfile@6.0.3: + resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==} + + vite-hot-client@2.1.0: + resolution: {integrity: sha512-7SpgZmU7R+dDnSmvXE1mfDtnHLHQSisdySVR7lO8ceAXvM0otZeuQQ6C8LrS5d/aYyP/QZ0hI0L+dIPrm4YlFQ==} + peerDependencies: + vite: ^2.6.0 || ^3.0.0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0 + vite-node@3.2.4: resolution: {integrity: sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==} engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0} hasBin: true + vite-plugin-inspect@0.8.9: + resolution: {integrity: sha512-22/8qn+LYonzibb1VeFZmISdVao5kC22jmEKm24vfFE8siEn47EpVcCLYMv6iKOYMJfjSvSJfueOwcFCkUnV3A==} + engines: {node: '>=14'} + peerDependencies: + '@nuxt/kit': '*' + vite: ^3.1.0 || ^4.0.0 || ^5.0.0-0 || ^6.0.1 + peerDependenciesMeta: + '@nuxt/kit': + optional: true + + vite-plugin-vue-devtools@7.7.9: + resolution: {integrity: sha512-08DvePf663SxqLFJeMVNW537zzVyakp9KIrI2K7lwgaTqA5R/ydN/N2K8dgZO34tg/Qmw0ch84fOKoBtCEdcGg==} + engines: {node: '>=v14.21.3'} + peerDependencies: + vite: ^3.1.0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0 + + vite-plugin-vue-inspector@5.3.2: + resolution: {integrity: sha512-YvEKooQcSiBTAs0DoYLfefNja9bLgkFM7NI2b07bE2SruuvX0MEa9cMaxjKVMkeCp5Nz9FRIdcN1rOdFVBeL6Q==} + peerDependencies: + vite: ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0 + vite@6.4.1: resolution: {integrity: sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==} engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0} @@ -5304,6 +6398,14 @@ packages: yaml: optional: true + vitefu@1.1.2: + resolution: {integrity: sha512-zpKATdUbzbsycPFBN71nS2uzBUQiVnFoOrr2rvqv34S1lcAgMKKkjWleLGeiJlZ8lwCXvtWaRn7R3ZC16SYRuw==} + peerDependencies: + vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-beta.0 + peerDependenciesMeta: + vite: + optional: true + vitest@3.2.4: resolution: {integrity: sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==} engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0} @@ -5392,6 +6494,9 @@ packages: resolution: {integrity: sha512-Zn5uXdcFNIA1+1Ei5McRd+iRzfhENPCe7LeABkJtNulSxjma+l7ltNx55BWZkRlwRnpOgHqxnjyaDgJnNXnqzg==} engines: {node: '>=10.13.0'} + web-namespaces@2.0.1: + resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==} + web-worker@1.5.0: resolution: {integrity: sha512-RiMReJrTAiA+mBjGONMnjVDP2u3p9R1vkcGz6gDIrOMT3oGuYwX2WRMYI9ipkphSuE5XKEhydbhNEJh4NY9mlw==} @@ -5430,6 +6535,10 @@ packages: resolution: {integrity: sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==} engines: {node: '>=18'} + which-pm-runs@1.1.0: + resolution: {integrity: sha512-n1brCuqClxfFfq/Rb0ICg9giSZqCS+pLtccdag6C2HyufBrh3fBOiy9nb6ggRMvWOVH5GrdJskj5iGTZNxd7SA==} + engines: {node: '>=4'} + which-typed-array@1.1.20: resolution: {integrity: sha512-LYfpUkmqwl0h9A2HL09Mms427Q1RZWuOHsukfVcKRq9q95iQxdw0ix1JQrqbcDR9PH1QDwf5Qo8OZb5lksZ8Xg==} engines: {node: '>= 0.4'} @@ -5449,6 +6558,10 @@ packages: engines: {node: '>=8'} hasBin: true + widest-line@5.0.0: + resolution: {integrity: sha512-c9bZp7b5YtRj2wOe6dlj32MK+Bx/M/d+9VB2SHM1OtsUHR0aV0tdP6DWh/iMt0kWi1t5g1Iudu6hQRNd1A4PVA==} + engines: {node: '>=18'} + word-wrap@1.2.5: resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==} engines: {node: '>=0.10.0'} @@ -5464,6 +6577,10 @@ packages: resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==} engines: {node: '>=12'} + wrap-ansi@9.0.2: + resolution: {integrity: sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==} + engines: {node: '>=18'} + wrappy@1.0.2: resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==} @@ -5498,6 +6615,9 @@ packages: resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==} engines: {node: '>=0.4'} + xxhash-wasm@1.1.0: + resolution: {integrity: sha512-147y/6YNh+tlp6nd/2pWq38i9h6mz/EuQ6njIrmW8D1BS5nCqs0P6DG+m6zTGnNz5I+uhZ0SHxBs9BsPrwcKDA==} + y18n@5.0.8: resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==} engines: {node: '>=10'} @@ -5512,6 +6632,11 @@ packages: resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==} engines: {node: '>=18'} + yaml@2.8.2: + resolution: {integrity: sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==} + engines: {node: '>= 14.6'} + hasBin: true + yargs-parser@20.2.9: resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==} engines: {node: '>=10'} @@ -5539,18 +6664,45 @@ packages: resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==} engines: {node: '>=10'} + yocto-queue@1.2.2: + resolution: {integrity: sha512-4LCcse/U2MHZ63HAJVE+v71o7yOdIe4cZ70Wpf8D/IyjDKYQLV5GD46B+hSTjJsvV5PztjvHoU580EftxjDZFQ==} + engines: {node: '>=12.20'} + + yocto-spinner@0.2.3: + resolution: {integrity: sha512-sqBChb33loEnkoXte1bLg45bEBsOP9N1kzQh5JZNKj/0rik4zAPTNSAVPj3uQAdc6slYJ0Ksc403G2XgxsJQFQ==} + engines: {node: '>=18.19'} + yoctocolors@2.1.2: resolution: {integrity: sha512-CzhO+pFNo8ajLM2d2IW/R93ipy99LWjtwblvC1RsoSUMZgyLbYFr221TnSNT7GjGdYui6P459mw9JH/g/zW2ug==} engines: {node: '>=18'} -snapshots: + zod-to-json-schema@3.25.1: + resolution: {integrity: sha512-pM/SU9d3YAggzi6MtR4h7ruuQlqKtad8e9S0fmxcMi+ueAK5Korys/aWcV9LIIHTVbj01NdzxcnXSN+O74ZIVA==} + peerDependencies: + zod: ^3.25 || ^4 - '@adobe/css-tools@4.4.4': {} + zod-to-ts@1.2.0: + resolution: {integrity: sha512-x30XE43V+InwGpvTySRNz9kB7qFU8DlyEy7BsSTCHPH1R0QasMmHWZDCzYm6bVXtj/9NNJAZF3jW8rzFvH5OFA==} + peerDependencies: + typescript: ^4.9.4 || ^5.0.2 + zod: ^3 + + zod@3.25.76: + resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==} + + zwitch@2.0.4: + resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==} + +snapshots: + + '@adobe/css-tools@4.4.4': {} '@aesoper/normal-utils@0.1.5': {} '@alloc/quick-lru@5.2.0': {} + '@antfu/utils@0.7.10': {} + '@asamuzakjp/css-color@3.2.0': dependencies: '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) @@ -5560,6 +6712,87 @@ snapshots: lru-cache: 10.4.3 optional: true + '@astrojs/compiler@2.13.1': {} + + '@astrojs/internal-helpers@0.7.5': {} + + '@astrojs/markdown-remark@6.3.10': + dependencies: + '@astrojs/internal-helpers': 0.7.5 + '@astrojs/prism': 3.3.0 + github-slugger: 2.0.0 + hast-util-from-html: 2.0.3 + hast-util-to-text: 4.0.2 + import-meta-resolve: 4.2.0 + js-yaml: 4.1.1 + mdast-util-definitions: 6.0.0 + rehype-raw: 7.0.0 + rehype-stringify: 10.0.1 + remark-gfm: 4.0.1 + remark-parse: 11.0.0 + remark-rehype: 11.1.2 + remark-smartypants: 3.0.2 + shiki: 3.23.0 + smol-toml: 1.6.0 + unified: 11.0.5 + unist-util-remove-position: 5.0.0 + unist-util-visit: 5.1.0 + unist-util-visit-parents: 6.0.2 + vfile: 6.0.3 + transitivePeerDependencies: + - supports-color + + '@astrojs/prism@3.3.0': + dependencies: + prismjs: 1.30.0 + + '@astrojs/tailwind@6.0.2(astro@5.18.0(@types/node@25.3.3)(jiti@1.21.7)(rollup@4.59.0)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2))(tailwindcss@3.4.19(yaml@2.8.2))': + dependencies: + astro: 5.18.0(@types/node@25.3.3)(jiti@1.21.7)(rollup@4.59.0)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2) + autoprefixer: 10.4.27(postcss@8.5.8) + postcss: 8.5.8 + postcss-load-config: 4.0.2(postcss@8.5.8) + tailwindcss: 3.4.19(yaml@2.8.2) + transitivePeerDependencies: + - ts-node + + '@astrojs/telemetry@3.3.0': + dependencies: + ci-info: 4.4.0 + debug: 4.4.3 + dlv: 1.1.3 + dset: 3.1.4 + is-docker: 3.0.0 + is-wsl: 3.1.1 + which-pm-runs: 1.1.0 + transitivePeerDependencies: + - supports-color + + '@astrojs/vue@5.1.4(@types/node@25.3.3)(astro@5.18.0(@types/node@25.3.3)(jiti@1.21.7)(rollup@4.59.0)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2))(jiti@1.21.7)(rollup@4.59.0)(sass@1.97.3)(terser@5.46.0)(vue@3.5.29(typescript@5.9.3))(yaml@2.8.2)': + dependencies: + '@vitejs/plugin-vue': 5.2.4(vite@6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.29(typescript@5.9.3)) + '@vitejs/plugin-vue-jsx': 4.2.0(vite@6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.29(typescript@5.9.3)) + '@vue/compiler-sfc': 3.5.29 + astro: 5.18.0(@types/node@25.3.3)(jiti@1.21.7)(rollup@4.59.0)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2) + vite: 6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2) + vite-plugin-vue-devtools: 7.7.9(rollup@4.59.0)(vite@6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.29(typescript@5.9.3)) + vue: 3.5.29(typescript@5.9.3) + transitivePeerDependencies: + - '@nuxt/kit' + - '@types/node' + - jiti + - less + - lightningcss + - rollup + - sass + - sass-embedded + - stylus + - sugarss + - supports-color + - terser + - tsx + - yaml + '@babel/code-frame@7.29.0': dependencies: '@babel/helper-validator-identifier': 7.28.5 @@ -5753,6 +6986,15 @@ snapshots: transitivePeerDependencies: - supports-color + '@babel/plugin-proposal-decorators@7.29.0(@babel/core@7.29.0)': + dependencies: + '@babel/core': 7.29.0 + '@babel/helper-create-class-features-plugin': 7.28.6(@babel/core@7.29.0) + '@babel/helper-plugin-utils': 7.28.6 + '@babel/plugin-syntax-decorators': 7.28.6(@babel/core@7.29.0) + transitivePeerDependencies: + - supports-color + '@babel/plugin-proposal-optional-chaining-assign@7.27.1(@babel/core@7.29.0)': dependencies: '@babel/core': 7.29.0 @@ -5767,6 +7009,11 @@ snapshots: dependencies: '@babel/core': 7.29.0 + '@babel/plugin-syntax-decorators@7.28.6(@babel/core@7.29.0)': + dependencies: + '@babel/core': 7.29.0 + '@babel/helper-plugin-utils': 7.28.6 + '@babel/plugin-syntax-import-assertions@7.28.6(@babel/core@7.29.0)': dependencies: '@babel/core': 7.29.0 @@ -5777,6 +7024,11 @@ snapshots: '@babel/core': 7.29.0 '@babel/helper-plugin-utils': 7.28.6 + '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.29.0)': + dependencies: + '@babel/core': 7.29.0 + '@babel/helper-plugin-utils': 7.28.6 + '@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.0)': dependencies: '@babel/core': 7.29.0 @@ -6342,6 +7594,10 @@ snapshots: '@bytecodealliance/wizer-linux-x64': 7.0.5 '@bytecodealliance/wizer-win32-x64': 7.0.5 + '@capsizecss/unpack@4.0.0': + dependencies: + fontkitten: 1.0.3 + '@chromatic-com/storybook@5.0.1(storybook@10.2.15(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))': dependencies: '@neoconfetti/react': 1.0.0 @@ -6637,6 +7893,103 @@ snapshots: '@humanwhocodes/retry@0.4.3': {} + '@img/colour@1.1.0': + optional: true + + '@img/sharp-darwin-arm64@0.34.5': + optionalDependencies: + '@img/sharp-libvips-darwin-arm64': 1.2.4 + optional: true + + '@img/sharp-darwin-x64@0.34.5': + optionalDependencies: + '@img/sharp-libvips-darwin-x64': 1.2.4 + optional: true + + '@img/sharp-libvips-darwin-arm64@1.2.4': + optional: true + + '@img/sharp-libvips-darwin-x64@1.2.4': + optional: true + + '@img/sharp-libvips-linux-arm64@1.2.4': + optional: true + + '@img/sharp-libvips-linux-arm@1.2.4': + optional: true + + '@img/sharp-libvips-linux-ppc64@1.2.4': + optional: true + + '@img/sharp-libvips-linux-riscv64@1.2.4': + optional: true + + '@img/sharp-libvips-linux-s390x@1.2.4': + optional: true + + '@img/sharp-libvips-linux-x64@1.2.4': + optional: true + + '@img/sharp-libvips-linuxmusl-arm64@1.2.4': + optional: true + + '@img/sharp-libvips-linuxmusl-x64@1.2.4': + optional: true + + '@img/sharp-linux-arm64@0.34.5': + optionalDependencies: + '@img/sharp-libvips-linux-arm64': 1.2.4 + optional: true + + '@img/sharp-linux-arm@0.34.5': + optionalDependencies: + '@img/sharp-libvips-linux-arm': 1.2.4 + optional: true + + '@img/sharp-linux-ppc64@0.34.5': + optionalDependencies: + '@img/sharp-libvips-linux-ppc64': 1.2.4 + optional: true + + '@img/sharp-linux-riscv64@0.34.5': + optionalDependencies: + '@img/sharp-libvips-linux-riscv64': 1.2.4 + optional: true + + '@img/sharp-linux-s390x@0.34.5': + optionalDependencies: + '@img/sharp-libvips-linux-s390x': 1.2.4 + optional: true + + '@img/sharp-linux-x64@0.34.5': + optionalDependencies: + '@img/sharp-libvips-linux-x64': 1.2.4 + optional: true + + '@img/sharp-linuxmusl-arm64@0.34.5': + optionalDependencies: + '@img/sharp-libvips-linuxmusl-arm64': 1.2.4 + optional: true + + '@img/sharp-linuxmusl-x64@0.34.5': + optionalDependencies: + '@img/sharp-libvips-linuxmusl-x64': 1.2.4 + optional: true + + '@img/sharp-wasm32@0.34.5': + dependencies: + '@emnapi/runtime': 1.8.1 + optional: true + + '@img/sharp-win32-arm64@0.34.5': + optional: true + + '@img/sharp-win32-ia32@0.34.5': + optional: true + + '@img/sharp-win32-x64@0.34.5': + optional: true + '@isaacs/cliui@8.0.2': dependencies: string-width: 5.1.2 @@ -6916,6 +8269,8 @@ snapshots: dependencies: '@octokit/openapi-types': 25.1.0 + '@oslojs/encoding@1.1.0': {} + '@oxc-parser/binding-android-arm64@0.76.0': optional: true @@ -7041,8 +8396,20 @@ snapshots: '@pnpm/network.ca-file': 1.0.2 config-chain: 1.1.13 + '@polka/url@1.0.0-next.29': {} + '@popperjs/core@2.11.8': {} + '@rolldown/pluginutils@1.0.0-rc.7': {} + + '@rollup/pluginutils@5.3.0(rollup@4.59.0)': + dependencies: + '@types/estree': 1.0.8 + estree-walker: 2.0.2 + picomatch: 4.0.3 + optionalDependencies: + rollup: 4.59.0 + '@rollup/rollup-android-arm-eabi@4.59.0': optional: true @@ -7296,6 +8663,39 @@ snapshots: transitivePeerDependencies: - supports-color + '@shikijs/core@3.23.0': + dependencies: + '@shikijs/types': 3.23.0 + '@shikijs/vscode-textmate': 10.0.2 + '@types/hast': 3.0.4 + hast-util-to-html: 9.0.5 + + '@shikijs/engine-javascript@3.23.0': + dependencies: + '@shikijs/types': 3.23.0 + '@shikijs/vscode-textmate': 10.0.2 + oniguruma-to-es: 4.3.4 + + '@shikijs/engine-oniguruma@3.23.0': + dependencies: + '@shikijs/types': 3.23.0 + '@shikijs/vscode-textmate': 10.0.2 + + '@shikijs/langs@3.23.0': + dependencies: + '@shikijs/types': 3.23.0 + + '@shikijs/themes@3.23.0': + dependencies: + '@shikijs/types': 3.23.0 + + '@shikijs/types@3.23.0': + dependencies: + '@shikijs/vscode-textmate': 10.0.2 + '@types/hast': 3.0.4 + + '@shikijs/vscode-textmate@10.0.2': {} + '@sindresorhus/is@4.6.0': {} '@sindresorhus/merge-streams@2.3.0': {} @@ -7309,10 +8709,10 @@ snapshots: react: 19.2.4 react-dom: 19.2.4(react@19.2.4) - '@tailwindcss/typography@0.5.19(tailwindcss@3.4.19)': + '@tailwindcss/typography@0.5.19(tailwindcss@3.4.19(yaml@2.8.2))': dependencies: postcss-selector-parser: 6.0.10 - tailwindcss: 3.4.19 + tailwindcss: 3.4.19(yaml@2.8.2) '@testing-library/dom@10.4.1': dependencies: @@ -7350,6 +8750,10 @@ snapshots: '@types/deep-eql': 4.0.2 assertion-error: 2.0.1 + '@types/debug@4.1.12': + dependencies: + '@types/ms': 2.1.0 + '@types/deep-eql@4.0.2': {} '@types/eslint-scope@3.7.7': @@ -7364,8 +8768,22 @@ snapshots: '@types/estree@1.0.8': {} + '@types/hast@3.0.4': + dependencies: + '@types/unist': 3.0.3 + '@types/json-schema@7.0.15': {} + '@types/mdast@4.0.4': + dependencies: + '@types/unist': 3.0.3 + + '@types/ms@2.1.0': {} + + '@types/nlcst@2.0.3': + dependencies: + '@types/unist': 3.0.3 + '@types/node@25.3.3': dependencies: undici-types: 7.18.2 @@ -7376,6 +8794,8 @@ snapshots: dependencies: '@types/node': 25.3.3 + '@types/unist@3.0.3': {} + '@types/web-bluetooth@0.0.20': {} '@types/whatwg-mimetype@3.0.2': {} @@ -7384,9 +8804,22 @@ snapshots: dependencies: '@types/node': 25.3.3 - '@vitejs/plugin-vue@5.2.4(vite@6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0))(vue@3.5.29(typescript@5.9.3))': + '@ungap/structured-clone@1.3.0': {} + + '@vitejs/plugin-vue-jsx@4.2.0(vite@6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.29(typescript@5.9.3))': dependencies: - vite: 6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0) + '@babel/core': 7.29.0 + '@babel/plugin-transform-typescript': 7.28.6(@babel/core@7.29.0) + '@rolldown/pluginutils': 1.0.0-rc.7 + '@vue/babel-plugin-jsx': 1.5.0(@babel/core@7.29.0) + vite: 6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2) + vue: 3.5.29(typescript@5.9.3) + transitivePeerDependencies: + - supports-color + + '@vitejs/plugin-vue@5.2.4(vite@6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.29(typescript@5.9.3))': + dependencies: + vite: 6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2) vue: 3.5.29(typescript@5.9.3) '@vitest/expect@3.2.4': @@ -7397,13 +8830,13 @@ snapshots: chai: 5.3.3 tinyrainbow: 2.0.0 - '@vitest/mocker@3.2.4(vite@6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0))': + '@vitest/mocker@3.2.4(vite@6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))': dependencies: '@vitest/spy': 3.2.4 estree-walker: 3.0.3 magic-string: 0.30.21 optionalDependencies: - vite: 6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0) + vite: 6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2) '@vitest/pretty-format@3.2.4': dependencies: @@ -7431,6 +8864,35 @@ snapshots: loupe: 3.2.1 tinyrainbow: 2.0.0 + '@vue/babel-helper-vue-transform-on@1.5.0': {} + + '@vue/babel-plugin-jsx@1.5.0(@babel/core@7.29.0)': + dependencies: + '@babel/helper-module-imports': 7.28.6 + '@babel/helper-plugin-utils': 7.28.6 + '@babel/plugin-syntax-jsx': 7.28.6(@babel/core@7.29.0) + '@babel/template': 7.28.6 + '@babel/traverse': 7.29.0 + '@babel/types': 7.29.0 + '@vue/babel-helper-vue-transform-on': 1.5.0 + '@vue/babel-plugin-resolve-type': 1.5.0(@babel/core@7.29.0) + '@vue/shared': 3.5.29 + optionalDependencies: + '@babel/core': 7.29.0 + transitivePeerDependencies: + - supports-color + + '@vue/babel-plugin-resolve-type@1.5.0(@babel/core@7.29.0)': + dependencies: + '@babel/code-frame': 7.29.0 + '@babel/core': 7.29.0 + '@babel/helper-module-imports': 7.28.6 + '@babel/helper-plugin-utils': 7.28.6 + '@babel/parser': 7.29.0 + '@vue/compiler-sfc': 3.5.29 + transitivePeerDependencies: + - supports-color + '@vue/compiler-core@3.5.29': dependencies: '@babel/parser': 7.29.0 @@ -7453,7 +8915,7 @@ snapshots: '@vue/shared': 3.5.29 estree-walker: 2.0.2 magic-string: 0.30.21 - postcss: 8.5.6 + postcss: 8.5.8 source-map-js: 1.2.1 '@vue/compiler-ssr@3.5.29': @@ -7461,6 +8923,32 @@ snapshots: '@vue/compiler-dom': 3.5.29 '@vue/shared': 3.5.29 + '@vue/devtools-core@7.7.9(vite@6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.29(typescript@5.9.3))': + dependencies: + '@vue/devtools-kit': 7.7.9 + '@vue/devtools-shared': 7.7.9 + mitt: 3.0.1 + nanoid: 5.1.6 + pathe: 2.0.3 + vite-hot-client: 2.1.0(vite@6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)) + vue: 3.5.29(typescript@5.9.3) + transitivePeerDependencies: + - vite + + '@vue/devtools-kit@7.7.9': + dependencies: + '@vue/devtools-shared': 7.7.9 + birpc: 2.9.0 + hookable: 5.5.3 + mitt: 3.0.1 + perfect-debounce: 1.0.0 + speakingurl: 14.0.1 + superjson: 2.2.6 + + '@vue/devtools-shared@7.7.9': + dependencies: + rfdc: 1.4.1 + '@vue/eslint-config-prettier@7.1.0(eslint@9.39.3(jiti@1.21.7))(prettier@3.8.1)': dependencies: eslint: 9.39.3(jiti@1.21.7) @@ -7658,6 +9146,10 @@ snapshots: json-schema-traverse: 1.0.0 require-from-string: 2.0.2 + ansi-align@3.0.1: + dependencies: + string-width: 4.2.3 + ansi-escapes@7.3.0: dependencies: environment: 1.1.0 @@ -7699,6 +9191,8 @@ snapshots: array-ify@1.0.0: {} + array-iterate@2.0.1: {} + asn1.js@4.10.1: dependencies: bn.js: 4.12.3 @@ -7718,6 +9212,108 @@ snapshots: dependencies: tslib: 2.8.1 + astro@5.18.0(@types/node@25.3.3)(jiti@1.21.7)(rollup@4.59.0)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2): + dependencies: + '@astrojs/compiler': 2.13.1 + '@astrojs/internal-helpers': 0.7.5 + '@astrojs/markdown-remark': 6.3.10 + '@astrojs/telemetry': 3.3.0 + '@capsizecss/unpack': 4.0.0 + '@oslojs/encoding': 1.1.0 + '@rollup/pluginutils': 5.3.0(rollup@4.59.0) + acorn: 8.16.0 + aria-query: 5.3.2 + axobject-query: 4.1.0 + boxen: 8.0.1 + ci-info: 4.4.0 + clsx: 2.1.1 + common-ancestor-path: 1.0.1 + cookie: 1.1.1 + cssesc: 3.0.0 + debug: 4.4.3 + deterministic-object-hash: 2.0.2 + devalue: 5.6.3 + diff: 8.0.3 + dlv: 1.1.3 + dset: 3.1.4 + es-module-lexer: 1.7.0 + esbuild: 0.27.3 + estree-walker: 3.0.3 + flattie: 1.1.1 + fontace: 0.4.1 + github-slugger: 2.0.0 + html-escaper: 3.0.3 + http-cache-semantics: 4.2.0 + import-meta-resolve: 4.2.0 + js-yaml: 4.1.1 + magic-string: 0.30.21 + magicast: 0.5.2 + mrmime: 2.0.1 + neotraverse: 0.6.18 + p-limit: 6.2.0 + p-queue: 8.1.1 + package-manager-detector: 1.6.0 + piccolore: 0.1.3 + picomatch: 4.0.3 + prompts: 2.4.2 + rehype: 13.0.2 + semver: 7.7.4 + shiki: 3.23.0 + smol-toml: 1.6.0 + svgo: 4.0.1 + tinyexec: 1.0.2 + tinyglobby: 0.2.15 + tsconfck: 3.1.6(typescript@5.9.3) + ultrahtml: 1.6.0 + unifont: 0.7.4 + unist-util-visit: 5.1.0 + unstorage: 1.17.4 + vfile: 6.0.3 + vite: 6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2) + vitefu: 1.1.2(vite@6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)) + xxhash-wasm: 1.1.0 + yargs-parser: 21.1.1 + yocto-spinner: 0.2.3 + zod: 3.25.76 + zod-to-json-schema: 3.25.1(zod@3.25.76) + zod-to-ts: 1.2.0(typescript@5.9.3)(zod@3.25.76) + optionalDependencies: + sharp: 0.34.5 + transitivePeerDependencies: + - '@azure/app-configuration' + - '@azure/cosmos' + - '@azure/data-tables' + - '@azure/identity' + - '@azure/keyvault-secrets' + - '@azure/storage-blob' + - '@capacitor/preferences' + - '@deno/kv' + - '@netlify/blobs' + - '@planetscale/database' + - '@types/node' + - '@upstash/redis' + - '@vercel/blob' + - '@vercel/functions' + - '@vercel/kv' + - aws4fetch + - db0 + - idb-keyval + - ioredis + - jiti + - less + - lightningcss + - rollup + - sass + - sass-embedded + - stylus + - sugarss + - supports-color + - terser + - tsx + - typescript + - uploadthing + - yaml + asynckit@0.4.0: {} autoprefixer@10.4.27(postcss@8.5.6): @@ -7750,6 +9346,8 @@ snapshots: transitivePeerDependencies: - debug + axobject-query@4.1.0: {} + azion-theme@1.18.3: {} azion@1.20.21(@babel/core@7.29.0)(@fastly/js-compute@3.40.1(typescript@5.9.3)): @@ -7828,10 +9426,14 @@ snapshots: transitivePeerDependencies: - supports-color + bail@2.0.2: {} + balanced-match@1.0.2: {} balanced-match@4.0.4: {} + base-64@1.0.0: {} + base64-js@1.5.1: {} baseline-browser-mapping@2.10.0: {} @@ -7848,6 +9450,8 @@ snapshots: dependencies: file-uri-to-path: 1.0.0 + birpc@2.9.0: {} + bl@1.2.3: dependencies: readable-stream: 2.3.8 @@ -7861,6 +9465,17 @@ snapshots: bottleneck@2.19.5: {} + boxen@8.0.1: + dependencies: + ansi-align: 3.0.1 + camelcase: 8.0.0 + chalk: 5.6.2 + cli-boxes: 3.0.0 + string-width: 7.2.0 + type-fest: 4.41.0 + widest-line: 5.0.0 + wrap-ansi: 9.0.2 + brace-expansion@1.1.12: dependencies: balanced-match: 1.0.2 @@ -8006,10 +9621,14 @@ snapshots: camelcase-css@2.0.1: {} + camelcase@8.0.0: {} + caniuse-lite@1.0.30001775: {} case@1.6.3: {} + ccount@2.0.1: {} + chai@5.3.3: dependencies: assertion-error: 2.0.1 @@ -8033,6 +9652,12 @@ snapshots: char-regex@1.0.2: {} + character-entities-html4@2.1.0: {} + + character-entities-legacy@3.0.0: {} + + character-entities@2.0.2: {} + check-error@2.1.3: {} chokidar@3.6.0: @@ -8052,12 +9677,18 @@ snapshots: readdirp: 4.1.2 optional: true + chokidar@5.0.0: + dependencies: + readdirp: 5.0.0 + chownr@3.0.0: {} chromatic@13.3.5: {} chrome-trace-event@1.0.4: {} + ci-info@4.4.0: {} + cipher-base@1.0.7: dependencies: inherits: 2.0.4 @@ -8070,6 +9701,8 @@ snapshots: dependencies: escape-string-regexp: 5.0.0 + cli-boxes@3.0.0: {} + cli-color@2.0.4: dependencies: d: 1.0.2 @@ -8111,6 +9744,8 @@ snapshots: strip-ansi: 6.0.1 wrap-ansi: 7.0.0 + clsx@2.1.1: {} + color-convert@1.9.3: dependencies: color-name: 1.1.3 @@ -8127,6 +9762,10 @@ snapshots: dependencies: delayed-stream: 1.0.0 + comma-separated-tokens@2.0.3: {} + + commander@11.1.0: {} + commander@12.1.0: {} commander@14.0.3: {} @@ -8135,6 +9774,8 @@ snapshots: commander@4.1.1: {} + common-ancestor-path@1.0.1: {} + compare-func@2.0.0: dependencies: array-ify: 1.0.0 @@ -8188,8 +9829,14 @@ snapshots: convert-source-map@2.0.0: {} + cookie-es@1.2.2: {} + cookie@1.1.1: {} + copy-anything@4.0.5: + dependencies: + is-what: 5.5.0 + core-js-compat@3.48.0: dependencies: browserslist: 4.28.1 @@ -8233,6 +9880,10 @@ snapshots: shebang-command: 2.0.0 which: 2.0.2 + crossws@0.3.5: + dependencies: + uncrypto: 0.1.3 + crypto-browserify@3.12.1: dependencies: browserify-cipher: 1.0.1 @@ -8252,10 +9903,34 @@ snapshots: dependencies: type-fest: 1.4.0 + css-select@5.2.2: + dependencies: + boolbase: 1.0.0 + css-what: 6.2.2 + domhandler: 5.0.3 + domutils: 3.2.2 + nth-check: 2.1.1 + + css-tree@2.2.1: + dependencies: + mdn-data: 2.0.28 + source-map-js: 1.2.1 + + css-tree@3.2.1: + dependencies: + mdn-data: 2.27.1 + source-map-js: 1.2.1 + + css-what@6.2.2: {} + css.escape@1.5.1: {} cssesc@3.0.0: {} + csso@5.0.5: + dependencies: + css-tree: 2.2.1 + cssstyle@4.6.0: dependencies: '@asamuzakjp/css-color': 3.2.0 @@ -8283,6 +9958,10 @@ snapshots: decimal.js@10.6.0: {} + decode-named-character-reference@1.3.0: + dependencies: + character-entities: 2.0.2 + decompress-tar@4.1.1: dependencies: file-type: 5.2.0 @@ -8348,6 +10027,8 @@ snapshots: has-property-descriptors: 1.0.2 object-keys: 1.1.1 + defu@6.1.4: {} + delayed-stream@1.0.0: {} deprecation@2.3.1: {} @@ -8359,11 +10040,25 @@ snapshots: inherits: 2.0.4 minimalistic-assert: 1.0.1 + destr@2.0.5: {} + detect-libc@2.1.2: optional: true + deterministic-object-hash@2.0.2: + dependencies: + base-64: 1.0.0 + + devalue@5.6.3: {} + + devlop@1.1.0: + dependencies: + dequal: 2.0.3 + didyoumean@1.2.2: {} + diff@8.0.3: {} + diffie-hellman@5.0.3: dependencies: bn.js: 4.12.3 @@ -8380,12 +10075,32 @@ snapshots: dom-accessibility-api@0.6.3: {} + dom-serializer@2.0.0: + dependencies: + domelementtype: 2.3.0 + domhandler: 5.0.3 + entities: 4.5.0 + + domelementtype@2.3.0: {} + + domhandler@5.0.3: + dependencies: + domelementtype: 2.3.0 + + domutils@3.2.2: + dependencies: + dom-serializer: 2.0.0 + domelementtype: 2.3.0 + domhandler: 5.0.3 + dot-prop@5.3.0: dependencies: is-obj: 2.0.0 dotenv@17.3.1: {} + dset@3.1.4: {} + dunder-proto@1.0.1: dependencies: call-bind-apply-helpers: 1.0.2 @@ -8432,8 +10147,9 @@ snapshots: graceful-fs: 4.2.11 tapable: 2.3.0 - entities@6.0.1: - optional: true + entities@4.5.0: {} + + entities@6.0.1: {} entities@7.0.1: {} @@ -8452,6 +10168,8 @@ snapshots: dependencies: is-arrayish: 0.2.1 + error-stack-parser-es@0.1.5: {} + es-define-property@1.0.1: {} es-errors@1.3.0: {} @@ -8717,6 +10435,8 @@ snapshots: d: 1.0.2 es5-ext: 0.10.64 + eventemitter3@5.0.4: {} + events@3.3.0: {} evp_bytestokey@1.0.3: @@ -8771,6 +10491,8 @@ snapshots: dependencies: type: 2.7.3 + extend@3.0.2: {} + fantasticon@4.1.0: dependencies: case: 1.6.3 @@ -8868,8 +10590,18 @@ snapshots: flatted@3.3.4: {} + flattie@1.1.1: {} + follow-redirects@1.15.11: {} + fontace@0.4.1: + dependencies: + fontkitten: 1.0.3 + + fontkitten@1.0.3: + dependencies: + tiny-inflate: 1.0.3 + for-each@0.3.5: dependencies: is-callable: 1.2.7 @@ -8966,6 +10698,8 @@ snapshots: through2: 2.0.5 traverse: 0.6.8 + github-slugger@2.0.0: {} + glob-parent@5.1.2: dependencies: is-glob: 4.0.3 @@ -9023,6 +10757,18 @@ snapshots: gradient-parser@1.2.0: {} + h3@1.15.5: + dependencies: + cookie-es: 1.2.2 + crossws: 0.3.5 + defu: 6.1.4 + destr: 2.0.5 + iron-webcrypto: 1.2.1 + node-mock-http: 1.0.4 + radix3: 1.1.2 + ufo: 1.6.3 + uncrypto: 0.1.3 + handlebars@4.7.8: dependencies: minimist: 1.2.8 @@ -9079,6 +10825,93 @@ snapshots: dependencies: function-bind: 1.1.2 + hast-util-from-html@2.0.3: + dependencies: + '@types/hast': 3.0.4 + devlop: 1.1.0 + hast-util-from-parse5: 8.0.3 + parse5: 7.3.0 + vfile: 6.0.3 + vfile-message: 4.0.3 + + hast-util-from-parse5@8.0.3: + dependencies: + '@types/hast': 3.0.4 + '@types/unist': 3.0.3 + devlop: 1.1.0 + hastscript: 9.0.1 + property-information: 7.1.0 + vfile: 6.0.3 + vfile-location: 5.0.3 + web-namespaces: 2.0.1 + + hast-util-is-element@3.0.0: + dependencies: + '@types/hast': 3.0.4 + + hast-util-parse-selector@4.0.0: + dependencies: + '@types/hast': 3.0.4 + + hast-util-raw@9.1.0: + dependencies: + '@types/hast': 3.0.4 + '@types/unist': 3.0.3 + '@ungap/structured-clone': 1.3.0 + hast-util-from-parse5: 8.0.3 + hast-util-to-parse5: 8.0.1 + html-void-elements: 3.0.0 + mdast-util-to-hast: 13.2.1 + parse5: 7.3.0 + unist-util-position: 5.0.0 + unist-util-visit: 5.1.0 + vfile: 6.0.3 + web-namespaces: 2.0.1 + zwitch: 2.0.4 + + hast-util-to-html@9.0.5: + dependencies: + '@types/hast': 3.0.4 + '@types/unist': 3.0.3 + ccount: 2.0.1 + comma-separated-tokens: 2.0.3 + hast-util-whitespace: 3.0.0 + html-void-elements: 3.0.0 + mdast-util-to-hast: 13.2.1 + property-information: 7.1.0 + space-separated-tokens: 2.0.2 + stringify-entities: 4.0.4 + zwitch: 2.0.4 + + hast-util-to-parse5@8.0.1: + dependencies: + '@types/hast': 3.0.4 + comma-separated-tokens: 2.0.3 + devlop: 1.1.0 + property-information: 7.1.0 + space-separated-tokens: 2.0.2 + web-namespaces: 2.0.1 + zwitch: 2.0.4 + + hast-util-to-text@4.0.2: + dependencies: + '@types/hast': 3.0.4 + '@types/unist': 3.0.3 + hast-util-is-element: 3.0.0 + unist-util-find-after: 5.0.0 + + hast-util-whitespace@3.0.0: + dependencies: + '@types/hast': 3.0.4 + + hastscript@9.0.1: + dependencies: + '@types/hast': 3.0.4 + comma-separated-tokens: 2.0.3 + hast-util-parse-selector: 4.0.0 + property-information: 7.1.0 + space-separated-tokens: 2.0.2 + highlight.js@10.7.3: {} hmac-drbg@1.0.1: @@ -9089,6 +10922,8 @@ snapshots: hook-std@3.0.0: {} + hookable@5.5.3: {} + hosted-git-info@7.0.2: dependencies: lru-cache: 10.4.3 @@ -9098,6 +10933,10 @@ snapshots: whatwg-encoding: 3.1.1 optional: true + html-escaper@3.0.3: {} + + html-void-elements@3.0.0: {} + http-cache-semantics@4.2.0: {} http-proxy-agent@7.0.2: @@ -9178,6 +11017,8 @@ snapshots: dependencies: ip-address: 9.0.5 + iron-webcrypto@1.2.1: {} + is-arguments@1.2.0: dependencies: call-bound: 1.0.4 @@ -9266,6 +11107,8 @@ snapshots: is-unicode-supported@2.1.0: {} + is-what@5.5.0: {} + is-wsl@3.1.1: dependencies: is-inside-container: 1.0.0 @@ -9384,6 +11227,10 @@ snapshots: dependencies: json-buffer: 3.0.1 + kleur@3.0.3: {} + + kolorist@1.8.0: {} + levn@0.4.1: dependencies: prelude-ls: 1.2.1 @@ -9436,6 +11283,8 @@ snapshots: chalk: 5.6.2 is-unicode-supported: 1.3.0 + longest-streak@3.1.0: {} + loupe@3.2.1: {} lru-cache@10.4.3: {} @@ -9456,6 +11305,12 @@ snapshots: dependencies: '@jridgewell/sourcemap-codec': 1.5.5 + magicast@0.5.2: + dependencies: + '@babel/parser': 7.29.0 + '@babel/types': 7.29.0 + source-map-js: 1.2.1 + make-asynchronous@1.1.0: dependencies: p-event: 6.0.1 @@ -9482,6 +11337,8 @@ snapshots: transitivePeerDependencies: - supports-color + markdown-table@3.0.4: {} + marked-terminal@7.3.0(marked@12.0.2): dependencies: ansi-escapes: 7.3.0 @@ -9515,6 +11372,130 @@ snapshots: inherits: 2.0.4 safe-buffer: 5.2.1 + mdast-util-definitions@6.0.0: + dependencies: + '@types/mdast': 4.0.4 + '@types/unist': 3.0.3 + unist-util-visit: 5.1.0 + + mdast-util-find-and-replace@3.0.2: + dependencies: + '@types/mdast': 4.0.4 + escape-string-regexp: 5.0.0 + unist-util-is: 6.0.1 + unist-util-visit-parents: 6.0.2 + + mdast-util-from-markdown@2.0.3: + dependencies: + '@types/mdast': 4.0.4 + '@types/unist': 3.0.3 + decode-named-character-reference: 1.3.0 + devlop: 1.1.0 + mdast-util-to-string: 4.0.0 + micromark: 4.0.2 + micromark-util-decode-numeric-character-reference: 2.0.2 + micromark-util-decode-string: 2.0.1 + micromark-util-normalize-identifier: 2.0.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + unist-util-stringify-position: 4.0.0 + transitivePeerDependencies: + - supports-color + + mdast-util-gfm-autolink-literal@2.0.1: + dependencies: + '@types/mdast': 4.0.4 + ccount: 2.0.1 + devlop: 1.1.0 + mdast-util-find-and-replace: 3.0.2 + micromark-util-character: 2.1.1 + + mdast-util-gfm-footnote@2.1.0: + dependencies: + '@types/mdast': 4.0.4 + devlop: 1.1.0 + mdast-util-from-markdown: 2.0.3 + mdast-util-to-markdown: 2.1.2 + micromark-util-normalize-identifier: 2.0.1 + transitivePeerDependencies: + - supports-color + + mdast-util-gfm-strikethrough@2.0.0: + dependencies: + '@types/mdast': 4.0.4 + mdast-util-from-markdown: 2.0.3 + mdast-util-to-markdown: 2.1.2 + transitivePeerDependencies: + - supports-color + + mdast-util-gfm-table@2.0.0: + dependencies: + '@types/mdast': 4.0.4 + devlop: 1.1.0 + markdown-table: 3.0.4 + mdast-util-from-markdown: 2.0.3 + mdast-util-to-markdown: 2.1.2 + transitivePeerDependencies: + - supports-color + + mdast-util-gfm-task-list-item@2.0.0: + dependencies: + '@types/mdast': 4.0.4 + devlop: 1.1.0 + mdast-util-from-markdown: 2.0.3 + mdast-util-to-markdown: 2.1.2 + transitivePeerDependencies: + - supports-color + + mdast-util-gfm@3.1.0: + dependencies: + mdast-util-from-markdown: 2.0.3 + mdast-util-gfm-autolink-literal: 2.0.1 + mdast-util-gfm-footnote: 2.1.0 + mdast-util-gfm-strikethrough: 2.0.0 + mdast-util-gfm-table: 2.0.0 + mdast-util-gfm-task-list-item: 2.0.0 + mdast-util-to-markdown: 2.1.2 + transitivePeerDependencies: + - supports-color + + mdast-util-phrasing@4.1.0: + dependencies: + '@types/mdast': 4.0.4 + unist-util-is: 6.0.1 + + mdast-util-to-hast@13.2.1: + dependencies: + '@types/hast': 3.0.4 + '@types/mdast': 4.0.4 + '@ungap/structured-clone': 1.3.0 + devlop: 1.1.0 + micromark-util-sanitize-uri: 2.0.1 + trim-lines: 3.0.1 + unist-util-position: 5.0.0 + unist-util-visit: 5.1.0 + vfile: 6.0.3 + + mdast-util-to-markdown@2.1.2: + dependencies: + '@types/mdast': 4.0.4 + '@types/unist': 3.0.3 + longest-streak: 3.1.0 + mdast-util-phrasing: 4.1.0 + mdast-util-to-string: 4.0.0 + micromark-util-classify-character: 2.0.1 + micromark-util-decode-string: 2.0.1 + unist-util-visit: 5.1.0 + zwitch: 2.0.4 + + mdast-util-to-string@4.0.0: + dependencies: + '@types/mdast': 4.0.4 + + mdn-data@2.0.28: {} + + mdn-data@2.27.1: {} + memoizee@0.4.17: dependencies: d: 1.0.2 @@ -9534,6 +11515,197 @@ snapshots: microbuffer@1.0.0: {} + micromark-core-commonmark@2.0.3: + dependencies: + decode-named-character-reference: 1.3.0 + devlop: 1.1.0 + micromark-factory-destination: 2.0.1 + micromark-factory-label: 2.0.1 + micromark-factory-space: 2.0.1 + micromark-factory-title: 2.0.1 + micromark-factory-whitespace: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-chunked: 2.0.1 + micromark-util-classify-character: 2.0.1 + micromark-util-html-tag-name: 2.0.1 + micromark-util-normalize-identifier: 2.0.1 + micromark-util-resolve-all: 2.0.1 + micromark-util-subtokenize: 2.1.0 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-gfm-autolink-literal@2.1.0: + dependencies: + micromark-util-character: 2.1.1 + micromark-util-sanitize-uri: 2.0.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-gfm-footnote@2.1.0: + dependencies: + devlop: 1.1.0 + micromark-core-commonmark: 2.0.3 + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-normalize-identifier: 2.0.1 + micromark-util-sanitize-uri: 2.0.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-gfm-strikethrough@2.1.0: + dependencies: + devlop: 1.1.0 + micromark-util-chunked: 2.0.1 + micromark-util-classify-character: 2.0.1 + micromark-util-resolve-all: 2.0.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-gfm-table@2.1.1: + dependencies: + devlop: 1.1.0 + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-gfm-tagfilter@2.0.0: + dependencies: + micromark-util-types: 2.0.2 + + micromark-extension-gfm-task-list-item@2.1.0: + dependencies: + devlop: 1.1.0 + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-gfm@3.0.0: + dependencies: + micromark-extension-gfm-autolink-literal: 2.1.0 + micromark-extension-gfm-footnote: 2.1.0 + micromark-extension-gfm-strikethrough: 2.1.0 + micromark-extension-gfm-table: 2.1.1 + micromark-extension-gfm-tagfilter: 2.0.0 + micromark-extension-gfm-task-list-item: 2.1.0 + micromark-util-combine-extensions: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-factory-destination@2.0.1: + dependencies: + micromark-util-character: 2.1.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-factory-label@2.0.1: + dependencies: + devlop: 1.1.0 + micromark-util-character: 2.1.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-factory-space@2.0.1: + dependencies: + micromark-util-character: 2.1.1 + micromark-util-types: 2.0.2 + + micromark-factory-title@2.0.1: + dependencies: + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-factory-whitespace@2.0.1: + dependencies: + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-util-character@2.1.1: + dependencies: + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-util-chunked@2.0.1: + dependencies: + micromark-util-symbol: 2.0.1 + + micromark-util-classify-character@2.0.1: + dependencies: + micromark-util-character: 2.1.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-util-combine-extensions@2.0.1: + dependencies: + micromark-util-chunked: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-util-decode-numeric-character-reference@2.0.2: + dependencies: + micromark-util-symbol: 2.0.1 + + micromark-util-decode-string@2.0.1: + dependencies: + decode-named-character-reference: 1.3.0 + micromark-util-character: 2.1.1 + micromark-util-decode-numeric-character-reference: 2.0.2 + micromark-util-symbol: 2.0.1 + + micromark-util-encode@2.0.1: {} + + micromark-util-html-tag-name@2.0.1: {} + + micromark-util-normalize-identifier@2.0.1: + dependencies: + micromark-util-symbol: 2.0.1 + + micromark-util-resolve-all@2.0.1: + dependencies: + micromark-util-types: 2.0.2 + + micromark-util-sanitize-uri@2.0.1: + dependencies: + micromark-util-character: 2.1.1 + micromark-util-encode: 2.0.1 + micromark-util-symbol: 2.0.1 + + micromark-util-subtokenize@2.1.0: + dependencies: + devlop: 1.1.0 + micromark-util-chunked: 2.0.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-util-symbol@2.0.1: {} + + micromark-util-types@2.0.2: {} + + micromark@4.0.2: + dependencies: + '@types/debug': 4.1.12 + debug: 4.4.3 + decode-named-character-reference: 1.3.0 + devlop: 1.1.0 + micromark-core-commonmark: 2.0.3 + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-chunked: 2.0.1 + micromark-util-combine-extensions: 2.0.1 + micromark-util-decode-numeric-character-reference: 2.0.2 + micromark-util-encode: 2.0.1 + micromark-util-normalize-identifier: 2.0.1 + micromark-util-resolve-all: 2.0.1 + micromark-util-sanitize-uri: 2.0.1 + micromark-util-subtokenize: 2.1.0 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + transitivePeerDependencies: + - supports-color + micromatch@4.0.8: dependencies: braces: 3.0.3 @@ -9618,10 +11790,14 @@ snapshots: dependencies: minipass: 7.1.3 + mitt@3.0.1: {} + mkdirp@3.0.1: {} modify-values@1.0.1: {} + mrmime@2.0.1: {} + ms@2.1.3: {} mz@2.7.0: @@ -9634,6 +11810,8 @@ snapshots: nanoid@3.3.11: {} + nanoid@5.1.6: {} + natural-compare@1.4.0: {} negotiator@0.6.3: {} @@ -9642,10 +11820,16 @@ snapshots: neo-async@2.6.2: {} + neotraverse@0.6.18: {} + nerf-dart@1.0.0: {} next-tick@1.1.0: {} + nlcst-to-string@4.0.0: + dependencies: + '@types/nlcst': 2.0.3 + node-addon-api@7.1.1: optional: true @@ -9656,6 +11840,8 @@ snapshots: emojilib: 2.4.0 skin-tone: 2.0.0 + node-fetch-native@1.6.7: {} + node-gyp@11.5.0: dependencies: env-paths: 2.2.1 @@ -9673,6 +11859,8 @@ snapshots: node-inspect-extracted@1.1.0: {} + node-mock-http@1.0.4: {} + node-releases@2.0.27: {} nopt@8.1.0: @@ -9724,6 +11912,14 @@ snapshots: object-keys@1.1.1: {} + ofetch@1.5.1: + dependencies: + destr: 2.0.5 + node-fetch-native: 1.6.7 + ufo: 1.6.3 + + ohash@2.0.11: {} + once@1.4.0: dependencies: wrappy: 1.0.2 @@ -9740,6 +11936,14 @@ snapshots: dependencies: mimic-function: 5.0.1 + oniguruma-parser@0.12.1: {} + + oniguruma-to-es@4.3.4: + dependencies: + oniguruma-parser: 0.12.1 + regex: 6.1.0 + regex-recursion: 6.0.2 + open@10.2.0: dependencies: default-browser: 5.5.0 @@ -9808,6 +12012,10 @@ snapshots: dependencies: yocto-queue: 0.1.0 + p-limit@6.2.0: + dependencies: + yocto-queue: 1.2.2 + p-locate@2.0.0: dependencies: p-limit: 1.3.0 @@ -9818,6 +12026,11 @@ snapshots: p-map@7.0.4: {} + p-queue@8.1.1: + dependencies: + eventemitter3: 5.0.4 + p-timeout: 6.1.4 + p-reduce@2.1.0: {} p-reduce@3.0.0: {} @@ -9828,6 +12041,8 @@ snapshots: package-json-from-dist@1.0.1: {} + package-manager-detector@1.6.0: {} + pako@1.0.11: {} parent-module@1.0.1: @@ -9860,6 +12075,15 @@ snapshots: index-to-position: 1.2.0 type-fest: 4.41.0 + parse-latin@7.0.0: + dependencies: + '@types/nlcst': 2.0.3 + '@types/unist': 3.0.3 + nlcst-to-string: 4.0.0 + unist-util-modify-children: 4.0.0 + unist-util-visit-children: 3.0.0 + vfile: 6.0.3 + parse-ms@4.0.0: {} parse5-htmlparser2-tree-adapter@6.0.1: @@ -9873,7 +12097,6 @@ snapshots: parse5@7.3.0: dependencies: entities: 6.0.1 - optional: true path-exists@3.0.0: {} @@ -9916,6 +12139,10 @@ snapshots: pend@1.2.0: {} + perfect-debounce@1.0.0: {} + + piccolore@0.1.3: {} + picocolors@1.1.1: {} picomatch@2.3.1: {} @@ -9943,28 +12170,36 @@ snapshots: possible-typed-array-names@1.1.0: {} - postcss-import@15.1.0(postcss@8.5.6): + postcss-import@15.1.0(postcss@8.5.8): dependencies: - postcss: 8.5.6 + postcss: 8.5.8 postcss-value-parser: 4.2.0 read-cache: 1.0.0 resolve: 1.22.11 - postcss-js@4.1.0(postcss@8.5.6): + postcss-js@4.1.0(postcss@8.5.8): dependencies: camelcase-css: 2.0.1 - postcss: 8.5.6 + postcss: 8.5.8 + + postcss-load-config@4.0.2(postcss@8.5.8): + dependencies: + lilconfig: 3.1.3 + yaml: 2.8.2 + optionalDependencies: + postcss: 8.5.8 - postcss-load-config@6.0.1(jiti@1.21.7)(postcss@8.5.6): + postcss-load-config@6.0.1(jiti@1.21.7)(postcss@8.5.8)(yaml@2.8.2): dependencies: lilconfig: 3.1.3 optionalDependencies: jiti: 1.21.7 - postcss: 8.5.6 + postcss: 8.5.8 + yaml: 2.8.2 - postcss-nested@6.2.0(postcss@8.5.6): + postcss-nested@6.2.0(postcss@8.5.8): dependencies: - postcss: 8.5.6 + postcss: 8.5.8 postcss-selector-parser: 6.1.2 postcss-selector-parser@6.0.10: @@ -10015,6 +12250,8 @@ snapshots: dependencies: vue: 3.5.29(typescript@5.9.3) + prismjs@1.30.0: {} + proc-log@5.0.0: {} process-nextick-args@2.0.1: {} @@ -10028,6 +12265,13 @@ snapshots: err-code: 2.0.3 retry: 0.12.0 + prompts@2.4.2: + dependencies: + kleur: 3.0.3 + sisteransi: 1.0.5 + + property-information@7.1.0: {} + proto-list@1.2.4: {} proxy-from-env@1.1.0: {} @@ -10051,6 +12295,8 @@ snapshots: queue-microtask@1.2.3: {} + radix3@1.1.2: {} + randombytes@2.1.0: dependencies: safe-buffer: 5.2.1 @@ -10123,6 +12369,8 @@ snapshots: readdirp@4.1.2: optional: true + readdirp@5.0.0: {} + recast@0.23.11: dependencies: ast-types: 0.16.1 @@ -10142,6 +12390,16 @@ snapshots: regenerate@1.4.2: {} + regex-recursion@6.0.2: + dependencies: + regex-utilities: 2.3.0 + + regex-utilities@2.3.0: {} + + regex@6.1.0: + dependencies: + regex-utilities: 2.3.0 + regexpu-core@6.4.0: dependencies: regenerate: 1.4.2 @@ -10161,6 +12419,72 @@ snapshots: dependencies: jsesc: 3.1.0 + rehype-parse@9.0.1: + dependencies: + '@types/hast': 3.0.4 + hast-util-from-html: 2.0.3 + unified: 11.0.5 + + rehype-raw@7.0.0: + dependencies: + '@types/hast': 3.0.4 + hast-util-raw: 9.1.0 + vfile: 6.0.3 + + rehype-stringify@10.0.1: + dependencies: + '@types/hast': 3.0.4 + hast-util-to-html: 9.0.5 + unified: 11.0.5 + + rehype@13.0.2: + dependencies: + '@types/hast': 3.0.4 + rehype-parse: 9.0.1 + rehype-stringify: 10.0.1 + unified: 11.0.5 + + remark-gfm@4.0.1: + dependencies: + '@types/mdast': 4.0.4 + mdast-util-gfm: 3.1.0 + micromark-extension-gfm: 3.0.0 + remark-parse: 11.0.0 + remark-stringify: 11.0.0 + unified: 11.0.5 + transitivePeerDependencies: + - supports-color + + remark-parse@11.0.0: + dependencies: + '@types/mdast': 4.0.4 + mdast-util-from-markdown: 2.0.3 + micromark-util-types: 2.0.2 + unified: 11.0.5 + transitivePeerDependencies: + - supports-color + + remark-rehype@11.1.2: + dependencies: + '@types/hast': 3.0.4 + '@types/mdast': 4.0.4 + mdast-util-to-hast: 13.2.1 + unified: 11.0.5 + vfile: 6.0.3 + + remark-smartypants@3.0.2: + dependencies: + retext: 9.0.0 + retext-smartypants: 6.2.0 + unified: 11.0.5 + unist-util-visit: 5.1.0 + + remark-stringify@11.0.0: + dependencies: + '@types/mdast': 4.0.4 + mdast-util-to-markdown: 2.1.2 + unified: 11.0.5 + require-directory@2.1.1: {} require-from-string@2.0.2: {} @@ -10180,10 +12504,37 @@ snapshots: onetime: 7.0.0 signal-exit: 4.1.0 + retext-latin@4.0.0: + dependencies: + '@types/nlcst': 2.0.3 + parse-latin: 7.0.0 + unified: 11.0.5 + + retext-smartypants@6.2.0: + dependencies: + '@types/nlcst': 2.0.3 + nlcst-to-string: 4.0.0 + unist-util-visit: 5.1.0 + + retext-stringify@4.0.0: + dependencies: + '@types/nlcst': 2.0.3 + nlcst-to-string: 4.0.0 + unified: 11.0.5 + + retext@9.0.0: + dependencies: + '@types/nlcst': 2.0.3 + retext-latin: 4.0.0 + retext-stringify: 4.0.0 + unified: 11.0.5 + retry@0.12.0: {} reusify@1.1.0: {} + rfdc@1.4.1: {} + ripemd160@2.0.3: dependencies: hash-base: 3.1.2 @@ -10337,12 +12688,55 @@ snapshots: safe-buffer: 5.2.1 to-buffer: 1.2.2 + sharp@0.34.5: + dependencies: + '@img/colour': 1.1.0 + detect-libc: 2.1.2 + semver: 7.7.4 + optionalDependencies: + '@img/sharp-darwin-arm64': 0.34.5 + '@img/sharp-darwin-x64': 0.34.5 + '@img/sharp-libvips-darwin-arm64': 1.2.4 + '@img/sharp-libvips-darwin-x64': 1.2.4 + '@img/sharp-libvips-linux-arm': 1.2.4 + '@img/sharp-libvips-linux-arm64': 1.2.4 + '@img/sharp-libvips-linux-ppc64': 1.2.4 + '@img/sharp-libvips-linux-riscv64': 1.2.4 + '@img/sharp-libvips-linux-s390x': 1.2.4 + '@img/sharp-libvips-linux-x64': 1.2.4 + '@img/sharp-libvips-linuxmusl-arm64': 1.2.4 + '@img/sharp-libvips-linuxmusl-x64': 1.2.4 + '@img/sharp-linux-arm': 0.34.5 + '@img/sharp-linux-arm64': 0.34.5 + '@img/sharp-linux-ppc64': 0.34.5 + '@img/sharp-linux-riscv64': 0.34.5 + '@img/sharp-linux-s390x': 0.34.5 + '@img/sharp-linux-x64': 0.34.5 + '@img/sharp-linuxmusl-arm64': 0.34.5 + '@img/sharp-linuxmusl-x64': 0.34.5 + '@img/sharp-wasm32': 0.34.5 + '@img/sharp-win32-arm64': 0.34.5 + '@img/sharp-win32-ia32': 0.34.5 + '@img/sharp-win32-x64': 0.34.5 + optional: true + shebang-command@2.0.0: dependencies: shebang-regex: 3.0.0 shebang-regex@3.0.0: {} + shiki@3.23.0: + dependencies: + '@shikijs/core': 3.23.0 + '@shikijs/engine-javascript': 3.23.0 + '@shikijs/engine-oniguruma': 3.23.0 + '@shikijs/langs': 3.23.0 + '@shikijs/themes': 3.23.0 + '@shikijs/types': 3.23.0 + '@shikijs/vscode-textmate': 10.0.2 + '@types/hast': 3.0.4 + side-channel-list@1.0.0: dependencies: es-errors: 1.3.0 @@ -10383,6 +12777,14 @@ snapshots: figures: 2.0.0 pkg-conf: 2.1.0 + sirv@3.0.2: + dependencies: + '@polka/url': 1.0.0-next.29 + mrmime: 2.0.1 + totalist: 3.0.1 + + sisteransi@1.0.5: {} + skin-tone@2.0.0: dependencies: unicode-emoji-modifier-base: 1.0.0 @@ -10393,6 +12795,8 @@ snapshots: smart-buffer@4.2.0: {} + smol-toml@1.6.0: {} + socks-proxy-agent@8.0.5: dependencies: agent-base: 7.1.4 @@ -10415,6 +12819,8 @@ snapshots: source-map@0.6.1: {} + space-separated-tokens@2.0.2: {} + spawn-error-forwarder@1.0.0: {} spdx-correct@3.2.0: @@ -10431,6 +12837,8 @@ snapshots: spdx-license-ids@3.0.23: {} + speakingurl@14.0.1: {} + split2@1.0.0: dependencies: through2: 2.0.5 @@ -10515,6 +12923,11 @@ snapshots: dependencies: safe-buffer: 5.2.1 + stringify-entities@4.0.4: + dependencies: + character-entities-html4: 2.1.0 + character-entities-legacy: 3.0.0 + strip-ansi@6.0.1: dependencies: ansi-regex: 5.0.1 @@ -10563,6 +12976,10 @@ snapshots: make-asynchronous: 1.1.0 time-span: 5.1.0 + superjson@2.2.6: + dependencies: + copy-anything: 4.0.5 + supports-color@5.5.0: dependencies: has-flag: 3.0.0 @@ -10606,6 +13023,16 @@ snapshots: transitivePeerDependencies: - supports-color + svgo@4.0.1: + dependencies: + commander: 11.1.0 + css-select: 5.2.2 + css-tree: 3.2.1 + css-what: 6.2.2 + csso: 5.0.5 + picocolors: 1.1.1 + sax: 1.5.0 + svgpath@2.6.0: {} symbol-tree@3.2.4: @@ -10613,7 +13040,7 @@ snapshots: tailwind-gradient-mask-image@1.2.0: {} - tailwindcss@3.4.19: + tailwindcss@3.4.19(yaml@2.8.2): dependencies: '@alloc/quick-lru': 5.2.0 arg: 5.0.2 @@ -10629,11 +13056,11 @@ snapshots: normalize-path: 3.0.0 object-hash: 3.0.0 picocolors: 1.1.1 - postcss: 8.5.6 - postcss-import: 15.1.0(postcss@8.5.6) - postcss-js: 4.1.0(postcss@8.5.6) - postcss-load-config: 6.0.1(jiti@1.21.7)(postcss@8.5.6) - postcss-nested: 6.2.0(postcss@8.5.6) + postcss: 8.5.8 + postcss-import: 15.1.0(postcss@8.5.8) + postcss-js: 4.1.0(postcss@8.5.8) + postcss-load-config: 6.0.1(jiti@1.21.7)(postcss@8.5.8)(yaml@2.8.2) + postcss-nested: 6.2.0(postcss@8.5.8) postcss-selector-parser: 6.1.2 resolve: 1.22.11 sucrase: 3.35.1 @@ -10720,6 +13147,8 @@ snapshots: tiny-emitter@2.1.0: {} + tiny-inflate@1.0.3: {} + tiny-invariant@1.3.3: {} tinybench@2.9.0: {} @@ -10728,6 +13157,8 @@ snapshots: tinyexec@0.3.2: {} + tinyexec@1.0.2: {} + tinyglobby@0.2.15: dependencies: fdir: 6.5.0(picomatch@4.0.3) @@ -10757,6 +13188,8 @@ snapshots: dependencies: is-number: 7.0.0 + totalist@3.0.1: {} + tough-cookie@5.1.2: dependencies: tldts: 6.1.86 @@ -10771,8 +13204,16 @@ snapshots: traverse@0.6.8: {} + trim-lines@3.0.1: {} + + trough@2.2.0: {} + ts-interface-checker@0.1.13: {} + tsconfck@3.1.6(typescript@5.9.3): + optionalDependencies: + typescript: 5.9.3 + tslib@2.8.1: {} ttf2eot@3.1.0: @@ -10817,17 +13258,22 @@ snapshots: typed-function@4.2.2: {} - typescript@5.9.3: - optional: true + typescript@5.9.3: {} + + ufo@1.6.3: {} uglify-js@3.19.3: optional: true + ultrahtml@1.6.0: {} + unbzip2-stream@1.4.3: dependencies: buffer: 5.7.1 through: 2.3.8 + uncrypto@0.1.3: {} + undici-types@7.18.2: {} unenv@2.0.0-rc.24: @@ -10851,6 +13297,22 @@ snapshots: unicorn-magic@0.3.0: {} + unified@11.0.5: + dependencies: + '@types/unist': 3.0.3 + bail: 2.0.2 + devlop: 1.1.0 + extend: 3.0.2 + is-plain-obj: 4.1.0 + trough: 2.2.0 + vfile: 6.0.3 + + unifont@0.7.4: + dependencies: + css-tree: 3.2.1 + ofetch: 1.5.1 + ohash: 2.0.11 + unique-filename@4.0.0: dependencies: unique-slug: 5.0.0 @@ -10863,12 +13325,65 @@ snapshots: dependencies: crypto-random-string: 4.0.0 + unist-util-find-after@5.0.0: + dependencies: + '@types/unist': 3.0.3 + unist-util-is: 6.0.1 + + unist-util-is@6.0.1: + dependencies: + '@types/unist': 3.0.3 + + unist-util-modify-children@4.0.0: + dependencies: + '@types/unist': 3.0.3 + array-iterate: 2.0.1 + + unist-util-position@5.0.0: + dependencies: + '@types/unist': 3.0.3 + + unist-util-remove-position@5.0.0: + dependencies: + '@types/unist': 3.0.3 + unist-util-visit: 5.1.0 + + unist-util-stringify-position@4.0.0: + dependencies: + '@types/unist': 3.0.3 + + unist-util-visit-children@3.0.0: + dependencies: + '@types/unist': 3.0.3 + + unist-util-visit-parents@6.0.2: + dependencies: + '@types/unist': 3.0.3 + unist-util-is: 6.0.1 + + unist-util-visit@5.1.0: + dependencies: + '@types/unist': 3.0.3 + unist-util-is: 6.0.1 + unist-util-visit-parents: 6.0.2 + universal-user-agent@6.0.1: {} universal-user-agent@7.0.3: {} universalify@2.0.1: {} + unstorage@1.17.4: + dependencies: + anymatch: 3.1.3 + chokidar: 5.0.0 + destr: 2.0.5 + h3: 1.15.5 + lru-cache: 11.2.6 + node-fetch-native: 1.6.7 + ofetch: 1.5.1 + ufo: 1.6.3 + update-browserslist-db@1.2.3(browserslist@4.28.1): dependencies: browserslist: 4.28.1 @@ -10905,13 +13420,32 @@ snapshots: spdx-correct: 3.2.0 spdx-expression-parse: 3.0.1 - vite-node@3.2.4(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0): + vfile-location@5.0.3: + dependencies: + '@types/unist': 3.0.3 + vfile: 6.0.3 + + vfile-message@4.0.3: + dependencies: + '@types/unist': 3.0.3 + unist-util-stringify-position: 4.0.0 + + vfile@6.0.3: + dependencies: + '@types/unist': 3.0.3 + vfile-message: 4.0.3 + + vite-hot-client@2.1.0(vite@6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)): + dependencies: + vite: 6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2) + + vite-node@3.2.4(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2): dependencies: cac: 6.7.14 debug: 4.4.3 es-module-lexer: 1.7.0 pathe: 2.0.3 - vite: 6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0) + vite: 6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2) transitivePeerDependencies: - '@types/node' - jiti @@ -10926,7 +13460,54 @@ snapshots: - tsx - yaml - vite@6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0): + vite-plugin-inspect@0.8.9(rollup@4.59.0)(vite@6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)): + dependencies: + '@antfu/utils': 0.7.10 + '@rollup/pluginutils': 5.3.0(rollup@4.59.0) + debug: 4.4.3 + error-stack-parser-es: 0.1.5 + fs-extra: 11.3.3 + open: 10.2.0 + perfect-debounce: 1.0.0 + picocolors: 1.1.1 + sirv: 3.0.2 + vite: 6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2) + transitivePeerDependencies: + - rollup + - supports-color + + vite-plugin-vue-devtools@7.7.9(rollup@4.59.0)(vite@6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.29(typescript@5.9.3)): + dependencies: + '@vue/devtools-core': 7.7.9(vite@6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.29(typescript@5.9.3)) + '@vue/devtools-kit': 7.7.9 + '@vue/devtools-shared': 7.7.9 + execa: 9.6.1 + sirv: 3.0.2 + vite: 6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2) + vite-plugin-inspect: 0.8.9(rollup@4.59.0)(vite@6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)) + vite-plugin-vue-inspector: 5.3.2(vite@6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)) + transitivePeerDependencies: + - '@nuxt/kit' + - rollup + - supports-color + - vue + + vite-plugin-vue-inspector@5.3.2(vite@6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)): + dependencies: + '@babel/core': 7.29.0 + '@babel/plugin-proposal-decorators': 7.29.0(@babel/core@7.29.0) + '@babel/plugin-syntax-import-attributes': 7.28.6(@babel/core@7.29.0) + '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.29.0) + '@babel/plugin-transform-typescript': 7.28.6(@babel/core@7.29.0) + '@vue/babel-plugin-jsx': 1.5.0(@babel/core@7.29.0) + '@vue/compiler-dom': 3.5.29 + kolorist: 1.8.0 + magic-string: 0.30.21 + vite: 6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2) + transitivePeerDependencies: + - supports-color + + vite@6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2): dependencies: esbuild: 0.25.12 fdir: 6.5.0(picomatch@4.0.3) @@ -10940,12 +13521,17 @@ snapshots: jiti: 1.21.7 sass: 1.97.3 terser: 5.46.0 + yaml: 2.8.2 + + vitefu@1.1.2(vite@6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)): + optionalDependencies: + vite: 6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2) - vitest@3.2.4(@types/node@25.3.3)(happy-dom@20.8.3)(jiti@1.21.7)(jsdom@26.1.0)(sass@1.97.3)(terser@5.46.0): + vitest@3.2.4(@types/debug@4.1.12)(@types/node@25.3.3)(happy-dom@20.8.3)(jiti@1.21.7)(jsdom@26.1.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2): dependencies: '@types/chai': 5.2.3 '@vitest/expect': 3.2.4 - '@vitest/mocker': 3.2.4(vite@6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)) + '@vitest/mocker': 3.2.4(vite@6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)) '@vitest/pretty-format': 3.2.4 '@vitest/runner': 3.2.4 '@vitest/snapshot': 3.2.4 @@ -10963,10 +13549,11 @@ snapshots: tinyglobby: 0.2.15 tinypool: 1.1.1 tinyrainbow: 2.0.0 - vite: 6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0) - vite-node: 3.2.4(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0) + vite: 6.4.1(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2) + vite-node: 3.2.4(@types/node@25.3.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2) why-is-node-running: 2.3.0 optionalDependencies: + '@types/debug': 4.1.12 '@types/node': 25.3.3 happy-dom: 20.8.3 jsdom: 26.1.0 @@ -11052,6 +13639,8 @@ snapshots: glob-to-regexp: 0.4.1 graceful-fs: 4.2.11 + web-namespaces@2.0.1: {} + web-worker@1.5.0: {} webidl-conversions@7.0.0: @@ -11107,6 +13696,8 @@ snapshots: webidl-conversions: 7.0.0 optional: true + which-pm-runs@1.1.0: {} + which-typed-array@1.1.20: dependencies: available-typed-arrays: 1.0.7 @@ -11130,6 +13721,10 @@ snapshots: siginfo: 2.0.0 stackback: 0.0.2 + widest-line@5.0.0: + dependencies: + string-width: 7.2.0 + word-wrap@1.2.5: {} wordwrap@1.0.0: {} @@ -11146,6 +13741,12 @@ snapshots: string-width: 5.1.2 strip-ansi: 7.2.0 + wrap-ansi@9.0.2: + dependencies: + ansi-styles: 6.2.3 + string-width: 7.2.0 + strip-ansi: 7.2.0 + wrappy@1.0.2: {} ws@8.19.0: {} @@ -11164,6 +13765,8 @@ snapshots: xtend@4.0.2: {} + xxhash-wasm@1.1.0: {} + y18n@5.0.8: {} yallist@3.1.1: {} @@ -11172,6 +13775,8 @@ snapshots: yallist@5.0.0: {} + yaml@2.8.2: {} + yargs-parser@20.2.9: {} yargs-parser@21.1.1: {} @@ -11205,4 +13810,23 @@ snapshots: yocto-queue@0.1.0: {} + yocto-queue@1.2.2: {} + + yocto-spinner@0.2.3: + dependencies: + yoctocolors: 2.1.2 + yoctocolors@2.1.2: {} + + zod-to-json-schema@3.25.1(zod@3.25.76): + dependencies: + zod: 3.25.76 + + zod-to-ts@1.2.0(typescript@5.9.3)(zod@3.25.76): + dependencies: + typescript: 5.9.3 + zod: 3.25.76 + + zod@3.25.76: {} + + zwitch@2.0.4: {} From ed163b88bd9da540e6a801aab762fb3324285dd2 Mon Sep 17 00:00:00 2001 From: Eduardo de Cesaro <44036260+cesaroeduardo@users.noreply.github.com> Date: Sun, 8 Mar 2026 17:47:16 -0300 Subject: [PATCH 02/50] feat: search engine and playground --- .../.astro/collections/blocks.schema.json | 28 + .../.astro/collections/components.schema.json | 181 ++++++ .../collections/contributing.schema.json | 28 + .../collections/foundations.schema.json | 28 + .../collections/get-started.schema.json | 28 + .../.astro/collections/icons.schema.json | 28 + .../.astro/collections/patterns.schema.json | 28 + .../.astro/collections/playground.schema.json | 105 ++++ .../.astro/collections/templates.schema.json | 28 + .../.astro/collections/tokens.schema.json | 28 + apps/ds-docs/.astro/content-modules.mjs | 6 +- apps/ds-docs/.astro/content.d.ts | 21 + apps/ds-docs/.astro/data-store.json | 2 +- apps/ds-docs/astro.config.mjs | 4 + .../docs/i18n-versioning-architecture.md | 463 +++++++++++++++ apps/ds-docs/docs/search-architecture.md | 329 +++++++++++ apps/ds-docs/package.json | 4 +- apps/ds-docs/public/search-index.json | 172 ++++++ apps/ds-docs/scripts/build-search-index.ts | 369 ++++++++++++ apps/ds-docs/src/components/demo/AzButton.vue | 120 ++++ .../src/components/demo/AzFieldset.vue | 102 ++++ apps/ds-docs/src/components/demo/index.ts | 9 + .../src/components/demo/props-metadata.ts | 144 +++++ .../docs/AccessibilityChecklist.astro | 135 +++++ .../src/components/docs/AnatomyBlock.astro | 53 ++ .../src/components/docs/ApiSection.astro | 75 +++ .../ds-docs/src/components/docs/Callout.astro | 82 +++ apps/ds-docs/src/components/docs/DoDont.astro | 47 ++ .../src/components/docs/DocsHeader.vue | 10 +- .../src/components/docs/DocsVersionBanner.vue | 193 +++++++ .../src/components/docs/EventsTable.astro | 57 ++ .../src/components/docs/ExampleBlock.astro | 92 +++ .../src/components/docs/LanguageSwitcher.vue | 337 +++++++++++ .../src/components/docs/PropsTable.astro | 77 +++ .../src/components/docs/RelatedLinks.astro | 58 ++ .../src/components/docs/SectionBlock.astro | 66 +++ .../src/components/docs/SlotsTable.astro | 57 ++ .../src/components/docs/StateGrid.astro | 115 ++++ .../src/components/docs/VersionSwitcher.vue | 310 ++++++++++ apps/ds-docs/src/components/docs/index.ts | 70 ++- .../src/components/playground/Playground.vue | 232 ++++++++ .../playground/PlaygroundBooleanControl.vue | 97 ++++ .../components/playground/PlaygroundCode.vue | 177 ++++++ .../playground/PlaygroundControls.vue | 173 ++++++ .../playground/PlaygroundNumberControl.vue | 93 +++ .../playground/PlaygroundPreview.vue | 136 +++++ .../playground/PlaygroundPropControl.vue | 88 +++ .../playground/PlaygroundSelectControl.vue | 95 +++ .../playground/PlaygroundTextControl.vue | 81 +++ .../components/playground/code-generator.ts | 180 ++++++ .../src/components/playground/index.ts | 44 ++ .../src/components/playground/types.ts | 171 ++++++ .../src/components/search/SearchModal.vue | 338 +++++++++++ apps/ds-docs/src/components/search/index.ts | 7 + apps/ds-docs/src/config/docs-languages.ts | 273 +++++++++ apps/ds-docs/src/config/docs-versions.ts | 241 ++++++++ apps/ds-docs/src/config/index.ts | 42 ++ apps/ds-docs/src/content/blocks/index.md | 20 + apps/ds-docs/src/content/components/button.md | 117 ---- .../ds-docs/src/content/components/button.mdx | 235 ++++++++ .../src/content/components/fieldset.md | 144 ----- .../src/content/components/fieldset.mdx | 237 ++++++++ apps/ds-docs/src/content/config.ts | 104 ++++ apps/ds-docs/src/content/patterns/index.md | 20 + apps/ds-docs/src/content/playground/index.md | 23 + apps/ds-docs/src/content/templates/index.md | 20 + apps/ds-docs/src/content/tokens/index.md | 25 + apps/ds-docs/src/env.d.ts | 6 + apps/ds-docs/src/integrations/search-index.ts | 341 +++++++++++ .../src/layouts/ComponentPageLayout.astro | 136 ++++- apps/ds-docs/src/layouts/DocsLayout.astro | 28 +- .../ds-docs/src/layouts/DocsShellLayout.astro | 16 + apps/ds-docs/src/lib/docs/canonical.ts | 213 +++++++ apps/ds-docs/src/lib/docs/index.ts | 29 + apps/ds-docs/src/lib/docs/resolveDoc.ts | 540 ++++++++++++++++++ .../src/lib/search/content-extractor.ts | 226 ++++++++ apps/ds-docs/src/lib/search/highlight.ts | 237 ++++++++ apps/ds-docs/src/lib/search/index.ts | 69 +++ apps/ds-docs/src/lib/search/ranking.ts | 265 +++++++++ apps/ds-docs/src/lib/search/searchEngine.ts | 272 +++++++++ apps/ds-docs/src/lib/search/tokenizer.ts | 226 ++++++++ apps/ds-docs/src/lib/search/types.ts | 283 +++++++++ apps/ds-docs/src/lib/search/use-search.ts | 49 ++ apps/ds-docs/src/lib/validation.ts | 197 +++++++ apps/ds-docs/src/pages/blocks/[slug].astro | 28 + .../ds-docs/src/pages/components/[slug].astro | 24 +- apps/ds-docs/src/pages/docs/[...path].astro | 158 +++++ apps/ds-docs/src/pages/patterns/[slug].astro | 28 + apps/ds-docs/src/pages/playground/index.astro | 144 +++++ apps/ds-docs/src/pages/templates/[slug].astro | 28 + apps/ds-docs/src/pages/tokens/[slug].astro | 28 + pnpm-lock.yaml | 501 ++++++++++++++++ 92 files changed, 11285 insertions(+), 289 deletions(-) create mode 100644 apps/ds-docs/.astro/collections/playground.schema.json create mode 100644 apps/ds-docs/docs/i18n-versioning-architecture.md create mode 100644 apps/ds-docs/docs/search-architecture.md create mode 100644 apps/ds-docs/public/search-index.json create mode 100644 apps/ds-docs/scripts/build-search-index.ts create mode 100644 apps/ds-docs/src/components/demo/AzButton.vue create mode 100644 apps/ds-docs/src/components/demo/AzFieldset.vue create mode 100644 apps/ds-docs/src/components/demo/index.ts create mode 100644 apps/ds-docs/src/components/demo/props-metadata.ts create mode 100644 apps/ds-docs/src/components/docs/AccessibilityChecklist.astro create mode 100644 apps/ds-docs/src/components/docs/AnatomyBlock.astro create mode 100644 apps/ds-docs/src/components/docs/ApiSection.astro create mode 100644 apps/ds-docs/src/components/docs/Callout.astro create mode 100644 apps/ds-docs/src/components/docs/DoDont.astro create mode 100644 apps/ds-docs/src/components/docs/DocsVersionBanner.vue create mode 100644 apps/ds-docs/src/components/docs/EventsTable.astro create mode 100644 apps/ds-docs/src/components/docs/ExampleBlock.astro create mode 100644 apps/ds-docs/src/components/docs/LanguageSwitcher.vue create mode 100644 apps/ds-docs/src/components/docs/PropsTable.astro create mode 100644 apps/ds-docs/src/components/docs/RelatedLinks.astro create mode 100644 apps/ds-docs/src/components/docs/SectionBlock.astro create mode 100644 apps/ds-docs/src/components/docs/SlotsTable.astro create mode 100644 apps/ds-docs/src/components/docs/StateGrid.astro create mode 100644 apps/ds-docs/src/components/docs/VersionSwitcher.vue create mode 100644 apps/ds-docs/src/components/playground/Playground.vue create mode 100644 apps/ds-docs/src/components/playground/PlaygroundBooleanControl.vue create mode 100644 apps/ds-docs/src/components/playground/PlaygroundCode.vue create mode 100644 apps/ds-docs/src/components/playground/PlaygroundControls.vue create mode 100644 apps/ds-docs/src/components/playground/PlaygroundNumberControl.vue create mode 100644 apps/ds-docs/src/components/playground/PlaygroundPreview.vue create mode 100644 apps/ds-docs/src/components/playground/PlaygroundPropControl.vue create mode 100644 apps/ds-docs/src/components/playground/PlaygroundSelectControl.vue create mode 100644 apps/ds-docs/src/components/playground/PlaygroundTextControl.vue create mode 100644 apps/ds-docs/src/components/playground/code-generator.ts create mode 100644 apps/ds-docs/src/components/playground/index.ts create mode 100644 apps/ds-docs/src/components/playground/types.ts create mode 100644 apps/ds-docs/src/components/search/SearchModal.vue create mode 100644 apps/ds-docs/src/components/search/index.ts create mode 100644 apps/ds-docs/src/config/docs-languages.ts create mode 100644 apps/ds-docs/src/config/docs-versions.ts create mode 100644 apps/ds-docs/src/config/index.ts create mode 100644 apps/ds-docs/src/content/blocks/index.md delete mode 100644 apps/ds-docs/src/content/components/button.md create mode 100644 apps/ds-docs/src/content/components/button.mdx delete mode 100644 apps/ds-docs/src/content/components/fieldset.md create mode 100644 apps/ds-docs/src/content/components/fieldset.mdx create mode 100644 apps/ds-docs/src/content/patterns/index.md create mode 100644 apps/ds-docs/src/content/playground/index.md create mode 100644 apps/ds-docs/src/content/templates/index.md create mode 100644 apps/ds-docs/src/content/tokens/index.md create mode 100644 apps/ds-docs/src/integrations/search-index.ts create mode 100644 apps/ds-docs/src/lib/docs/canonical.ts create mode 100644 apps/ds-docs/src/lib/docs/index.ts create mode 100644 apps/ds-docs/src/lib/docs/resolveDoc.ts create mode 100644 apps/ds-docs/src/lib/search/content-extractor.ts create mode 100644 apps/ds-docs/src/lib/search/highlight.ts create mode 100644 apps/ds-docs/src/lib/search/index.ts create mode 100644 apps/ds-docs/src/lib/search/ranking.ts create mode 100644 apps/ds-docs/src/lib/search/searchEngine.ts create mode 100644 apps/ds-docs/src/lib/search/tokenizer.ts create mode 100644 apps/ds-docs/src/lib/search/types.ts create mode 100644 apps/ds-docs/src/lib/search/use-search.ts create mode 100644 apps/ds-docs/src/lib/validation.ts create mode 100644 apps/ds-docs/src/pages/blocks/[slug].astro create mode 100644 apps/ds-docs/src/pages/docs/[...path].astro create mode 100644 apps/ds-docs/src/pages/patterns/[slug].astro create mode 100644 apps/ds-docs/src/pages/playground/index.astro create mode 100644 apps/ds-docs/src/pages/templates/[slug].astro create mode 100644 apps/ds-docs/src/pages/tokens/[slug].astro diff --git a/apps/ds-docs/.astro/collections/blocks.schema.json b/apps/ds-docs/.astro/collections/blocks.schema.json index 1fcb5c8d..f5a01052 100644 --- a/apps/ds-docs/.astro/collections/blocks.schema.json +++ b/apps/ds-docs/.astro/collections/blocks.schema.json @@ -35,6 +35,9 @@ "since": { "type": "string" }, + "deprecatedIn": { + "type": "string" + }, "contributors": { "type": "array", "items": { @@ -57,6 +60,31 @@ } ] }, + "tags": { + "type": "array", + "items": { + "type": "string" + } + }, + "version": { + "type": "string", + "default": "v1" + }, + "language": { + "type": "string", + "default": "en" + }, + "translatedFrom": { + "type": "string" + }, + "translationStatus": { + "type": "string", + "enum": [ + "complete", + "partial", + "missing" + ] + }, "type": { "type": "string", "const": "block" diff --git a/apps/ds-docs/.astro/collections/components.schema.json b/apps/ds-docs/.astro/collections/components.schema.json index b1cbaf9f..df69210f 100644 --- a/apps/ds-docs/.astro/collections/components.schema.json +++ b/apps/ds-docs/.astro/collections/components.schema.json @@ -43,6 +43,9 @@ "since": { "type": "string" }, + "deprecatedIn": { + "type": "string" + }, "contributors": { "type": "array", "items": { @@ -65,6 +68,31 @@ } ] }, + "tags": { + "type": "array", + "items": { + "type": "string" + } + }, + "version": { + "type": "string", + "default": "v1" + }, + "language": { + "type": "string", + "default": "en" + }, + "translatedFrom": { + "type": "string" + }, + "translationStatus": { + "type": "string", + "enum": [ + "complete", + "partial", + "missing" + ] + }, "type": { "type": "string", "const": "component" @@ -87,6 +115,159 @@ "type": "string" } }, + "anatomy": { + "type": "array", + "items": { + "type": "object", + "properties": { + "label": { + "type": "string" + }, + "description": { + "type": "string" + } + }, + "required": [ + "label" + ], + "additionalProperties": false + } + }, + "accessibility": { + "type": "object", + "properties": { + "keyboard": { + "type": "array", + "items": { + "type": "object", + "properties": { + "keys": { + "type": "string" + }, + "action": { + "type": "string" + } + }, + "required": [ + "keys", + "action" + ], + "additionalProperties": false + } + }, + "aria": { + "type": "array", + "items": { + "type": "object", + "properties": { + "attribute": { + "type": "string" + }, + "usage": { + "type": "string" + } + }, + "required": [ + "attribute", + "usage" + ], + "additionalProperties": false + } + }, + "wcag": { + "type": "array", + "items": { + "type": "string" + } + }, + "notes": { + "type": "array", + "items": { + "type": "string" + } + } + }, + "additionalProperties": false + }, + "api": { + "type": "object", + "properties": { + "props": { + "type": "array", + "items": { + "type": "object", + "properties": { + "name": { + "type": "string" + }, + "type": { + "type": "string" + }, + "default": { + "type": "string" + }, + "required": { + "type": "boolean" + }, + "description": { + "type": "string" + } + }, + "required": [ + "name", + "type", + "description" + ], + "additionalProperties": false + } + }, + "slots": { + "type": "array", + "items": { + "type": "object", + "properties": { + "name": { + "type": "string" + }, + "description": { + "type": "string" + }, + "props": { + "type": "string" + } + }, + "required": [ + "name", + "description" + ], + "additionalProperties": false + } + }, + "events": { + "type": "array", + "items": { + "type": "object", + "properties": { + "name": { + "type": "string" + }, + "payload": { + "type": "string" + }, + "description": { + "type": "string" + } + }, + "required": [ + "name", + "description" + ], + "additionalProperties": false + } + } + }, + "additionalProperties": false + }, "$schema": { "type": "string" } diff --git a/apps/ds-docs/.astro/collections/contributing.schema.json b/apps/ds-docs/.astro/collections/contributing.schema.json index 94ac52e9..8f91fbdf 100644 --- a/apps/ds-docs/.astro/collections/contributing.schema.json +++ b/apps/ds-docs/.astro/collections/contributing.schema.json @@ -41,6 +41,9 @@ "since": { "type": "string" }, + "deprecatedIn": { + "type": "string" + }, "contributors": { "type": "array", "items": { @@ -63,6 +66,31 @@ } ] }, + "tags": { + "type": "array", + "items": { + "type": "string" + } + }, + "version": { + "type": "string", + "default": "v1" + }, + "language": { + "type": "string", + "default": "en" + }, + "translatedFrom": { + "type": "string" + }, + "translationStatus": { + "type": "string", + "enum": [ + "complete", + "partial", + "missing" + ] + }, "type": { "type": "string", "const": "contributing" diff --git a/apps/ds-docs/.astro/collections/foundations.schema.json b/apps/ds-docs/.astro/collections/foundations.schema.json index 6e784aa0..540f17e1 100644 --- a/apps/ds-docs/.astro/collections/foundations.schema.json +++ b/apps/ds-docs/.astro/collections/foundations.schema.json @@ -43,6 +43,9 @@ "since": { "type": "string" }, + "deprecatedIn": { + "type": "string" + }, "contributors": { "type": "array", "items": { @@ -65,6 +68,31 @@ } ] }, + "tags": { + "type": "array", + "items": { + "type": "string" + } + }, + "version": { + "type": "string", + "default": "v1" + }, + "language": { + "type": "string", + "default": "en" + }, + "translatedFrom": { + "type": "string" + }, + "translationStatus": { + "type": "string", + "enum": [ + "complete", + "partial", + "missing" + ] + }, "type": { "type": "string", "const": "foundation" diff --git a/apps/ds-docs/.astro/collections/get-started.schema.json b/apps/ds-docs/.astro/collections/get-started.schema.json index 74107cb0..7540ffd3 100644 --- a/apps/ds-docs/.astro/collections/get-started.schema.json +++ b/apps/ds-docs/.astro/collections/get-started.schema.json @@ -41,6 +41,9 @@ "since": { "type": "string" }, + "deprecatedIn": { + "type": "string" + }, "contributors": { "type": "array", "items": { @@ -63,6 +66,31 @@ } ] }, + "tags": { + "type": "array", + "items": { + "type": "string" + } + }, + "version": { + "type": "string", + "default": "v1" + }, + "language": { + "type": "string", + "default": "en" + }, + "translatedFrom": { + "type": "string" + }, + "translationStatus": { + "type": "string", + "enum": [ + "complete", + "partial", + "missing" + ] + }, "type": { "type": "string", "const": "guide" diff --git a/apps/ds-docs/.astro/collections/icons.schema.json b/apps/ds-docs/.astro/collections/icons.schema.json index 12cb59eb..0cb2842d 100644 --- a/apps/ds-docs/.astro/collections/icons.schema.json +++ b/apps/ds-docs/.astro/collections/icons.schema.json @@ -39,6 +39,9 @@ "since": { "type": "string" }, + "deprecatedIn": { + "type": "string" + }, "contributors": { "type": "array", "items": { @@ -61,6 +64,31 @@ } ] }, + "tags": { + "type": "array", + "items": { + "type": "string" + } + }, + "version": { + "type": "string", + "default": "v1" + }, + "language": { + "type": "string", + "default": "en" + }, + "translatedFrom": { + "type": "string" + }, + "translationStatus": { + "type": "string", + "enum": [ + "complete", + "partial", + "missing" + ] + }, "type": { "type": "string", "const": "icon" diff --git a/apps/ds-docs/.astro/collections/patterns.schema.json b/apps/ds-docs/.astro/collections/patterns.schema.json index e6b9328a..c1b8fcea 100644 --- a/apps/ds-docs/.astro/collections/patterns.schema.json +++ b/apps/ds-docs/.astro/collections/patterns.schema.json @@ -35,6 +35,9 @@ "since": { "type": "string" }, + "deprecatedIn": { + "type": "string" + }, "contributors": { "type": "array", "items": { @@ -57,6 +60,31 @@ } ] }, + "tags": { + "type": "array", + "items": { + "type": "string" + } + }, + "version": { + "type": "string", + "default": "v1" + }, + "language": { + "type": "string", + "default": "en" + }, + "translatedFrom": { + "type": "string" + }, + "translationStatus": { + "type": "string", + "enum": [ + "complete", + "partial", + "missing" + ] + }, "type": { "type": "string", "const": "pattern" diff --git a/apps/ds-docs/.astro/collections/playground.schema.json b/apps/ds-docs/.astro/collections/playground.schema.json new file mode 100644 index 00000000..0623f769 --- /dev/null +++ b/apps/ds-docs/.astro/collections/playground.schema.json @@ -0,0 +1,105 @@ +{ + "$ref": "#/definitions/playground", + "definitions": { + "playground": { + "type": "object", + "properties": { + "title": { + "type": "string" + }, + "description": { + "type": "string" + }, + "navLabel": { + "type": "string" + }, + "order": { + "type": "number" + }, + "hidden": { + "type": "boolean" + }, + "category": { + "type": "string" + }, + "status": { + "type": "string", + "enum": [ + "stable", + "beta", + "deprecated", + "planned", + "experimental" + ] + }, + "since": { + "type": "string" + }, + "deprecatedIn": { + "type": "string" + }, + "contributors": { + "type": "array", + "items": { + "type": "string" + } + }, + "lastUpdated": { + "anyOf": [ + { + "type": "string", + "format": "date-time" + }, + { + "type": "string", + "format": "date" + }, + { + "type": "integer", + "format": "unix-time" + } + ] + }, + "tags": { + "type": "array", + "items": { + "type": "string" + } + }, + "version": { + "type": "string", + "default": "v1" + }, + "language": { + "type": "string", + "default": "en" + }, + "translatedFrom": { + "type": "string" + }, + "translationStatus": { + "type": "string", + "enum": [ + "complete", + "partial", + "missing" + ] + }, + "type": { + "type": "string", + "const": "playground" + }, + "$schema": { + "type": "string" + } + }, + "required": [ + "title", + "description", + "type" + ], + "additionalProperties": false + } + }, + "$schema": "http://json-schema.org/draft-07/schema#" +} \ No newline at end of file diff --git a/apps/ds-docs/.astro/collections/templates.schema.json b/apps/ds-docs/.astro/collections/templates.schema.json index 1f2aaaad..816d30ab 100644 --- a/apps/ds-docs/.astro/collections/templates.schema.json +++ b/apps/ds-docs/.astro/collections/templates.schema.json @@ -35,6 +35,9 @@ "since": { "type": "string" }, + "deprecatedIn": { + "type": "string" + }, "contributors": { "type": "array", "items": { @@ -57,6 +60,31 @@ } ] }, + "tags": { + "type": "array", + "items": { + "type": "string" + } + }, + "version": { + "type": "string", + "default": "v1" + }, + "language": { + "type": "string", + "default": "en" + }, + "translatedFrom": { + "type": "string" + }, + "translationStatus": { + "type": "string", + "enum": [ + "complete", + "partial", + "missing" + ] + }, "type": { "type": "string", "const": "template" diff --git a/apps/ds-docs/.astro/collections/tokens.schema.json b/apps/ds-docs/.astro/collections/tokens.schema.json index 0cda5fc5..86fcfde5 100644 --- a/apps/ds-docs/.astro/collections/tokens.schema.json +++ b/apps/ds-docs/.astro/collections/tokens.schema.json @@ -44,6 +44,9 @@ "since": { "type": "string" }, + "deprecatedIn": { + "type": "string" + }, "contributors": { "type": "array", "items": { @@ -66,6 +69,31 @@ } ] }, + "tags": { + "type": "array", + "items": { + "type": "string" + } + }, + "version": { + "type": "string", + "default": "v1" + }, + "language": { + "type": "string", + "default": "en" + }, + "translatedFrom": { + "type": "string" + }, + "translationStatus": { + "type": "string", + "enum": [ + "complete", + "partial", + "missing" + ] + }, "type": { "type": "string", "const": "token" diff --git a/apps/ds-docs/.astro/content-modules.mjs b/apps/ds-docs/.astro/content-modules.mjs index 2b8b8234..2cff7b24 100644 --- a/apps/ds-docs/.astro/content-modules.mjs +++ b/apps/ds-docs/.astro/content-modules.mjs @@ -1 +1,5 @@ -export default new Map(); \ No newline at end of file + +export default new Map([ +["src/content/components/button.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fcomponents%2Fbutton.mdx&astroContentModuleFlag=true")], +["src/content/components/fieldset.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fcomponents%2Ffieldset.mdx&astroContentModuleFlag=true")]]); + \ No newline at end of file diff --git a/apps/ds-docs/.astro/content.d.ts b/apps/ds-docs/.astro/content.d.ts index f6c2fd61..512ba943 100644 --- a/apps/ds-docs/.astro/content.d.ts +++ b/apps/ds-docs/.astro/content.d.ts @@ -1,3 +1,14 @@ +declare module 'astro:content' { + interface Render { + '.mdx': Promise<{ + Content: import('astro').MDXContent; + headings: import('astro').MarkdownHeading[]; + remarkPluginFrontmatter: Record; + components: import('astro').MDXInstance<{}>['components']; + }>; + } +} + declare module 'astro:content' { export interface RenderResult { Content: import('astro/runtime/server/index.js').AstroComponentFactory; @@ -232,6 +243,16 @@ declare module 'astro:content' { rendered?: RenderedContent; filePath?: string; }>; +"playground": Record; + rendered?: RenderedContent; + filePath?: string; +}>; "templates": Record` element with proper accessibility features, including an associated `\u003Clegend>` for the group label.\n\nFieldsets are essential for creating accessible forms, as they help screen reader users understand the relationship between form controls.\n\n## When to Use\n\nUse Fieldset when you need to:\n\n- Group related form inputs (e.g., address fields, contact information)\n- Create logical sections within a larger form\n- Improve form accessibility with proper semantic structure\n- Apply a shared label or description to multiple inputs\n\n## Examples\n\n### Basic Fieldset\n\n\u003CDemoPreview title=\"Basic fieldset with legend\">\n \u003Cfieldset class=\"border border-gray-300 rounded-lg p-4\">\n \u003Clegend class=\"text-sm font-medium text-text-primary px-2\">Personal Information\u003C/legend>\n \u003Cdiv class=\"space-y-4 mt-2\">\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Full Name\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-primary-500\" placeholder=\"Enter your name\" />\n \u003C/div>\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Email\u003C/label>\n \u003Cinput type=\"email\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-primary-500\" placeholder=\"Enter your email\" />\n \u003C/div>\n \u003C/div>\n \u003C/fieldset>\n\u003C/DemoPreview>\n\n### Address Grouping\n\n\u003CDemoPreview title=\"Address fields grouped together\">\n \u003Cfieldset class=\"border border-gray-300 rounded-lg p-4\">\n \u003Clegend class=\"text-sm font-medium text-text-primary px-2\">Shipping Address\u003C/legend>\n \u003Cdiv class=\"space-y-4 mt-2\">\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Street Address\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md\" placeholder=\"123 Main St\" />\n \u003C/div>\n \u003Cdiv class=\"grid grid-cols-2 gap-4\">\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">City\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md\" placeholder=\"City\" />\n \u003C/div>\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">ZIP Code\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md\" placeholder=\"12345\" />\n \u003C/div>\n \u003C/div>\n \u003C/div>\n \u003C/fieldset>\n\u003C/DemoPreview>\n\n### Disabled State\n\n\u003CDemoPreview title=\"Disabled fieldset\">\n \u003Cfieldset class=\"border border-gray-300 rounded-lg p-4 opacity-50\" disabled>\n \u003Clegend class=\"text-sm font-medium text-text-primary px-2\">Disabled Group\u003C/legend>\n \u003Cdiv class=\"space-y-4 mt-2\">\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Input 1\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-100\" placeholder=\"Disabled\" />\n \u003C/div>\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Input 2\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-100\" placeholder=\"Disabled\" />\n \u003C/div>\n \u003C/div>\n \u003C/fieldset>\n\u003C/DemoPreview>\n\n## Accessibility\n\n### Keyboard Navigation\n\n| Keys | Action |\n|------|--------|\n| Tab | Moves focus to the first focusable element within the fieldset |\n\n### ARIA Attributes\n\nThe Fieldset component uses native HTML elements that provide built-in accessibility:\n\n- `\u003Cfieldset>` - Groups related form controls\n- `\u003Clegend>` - Provides the accessible name for the group\n\nNo additional ARIA attributes are required when using the native elements correctly.\n\n### Best Practices\n\n1. **Always include a legend**: The `\u003Clegend>` element is required for accessibility\n2. **Use for related inputs**: Only group inputs that are logically related\n3. **Avoid nested fieldsets**: Deeply nested fieldsets can be confusing for screen reader users\n4. **Consider visual grouping**: Use styling to visually reinforce the grouping\n\n## API\n\n### Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `legend` | `string` | - | The text for the fieldset legend |\n| `disabled` | `boolean` | `false` | Whether all controls in the fieldset are disabled |\n\n### Slots\n\n| Slot | Description |\n|------|-------------|\n| `default` | Form controls and content inside the fieldset |\n| `legend` | Custom legend content (overrides `legend` prop) |\n\n### Events\n\n| Event | Payload | Description |\n|-------|---------|-------------|\n| - | - | Fieldset does not emit custom events |\n\n## Related\n\n- [Form](/components/form) - Form wrapper component\n- [Input](/components/input) - Text input component\n- [Select](/components/select) - Select dropdown component","src/content/components/fieldset.md","454a2ca909c96278",{"html":31,"metadata":32},"\u003Ch2 id=\"overview\">Overview\u003C/h2>\n\u003Cp>The Fieldset component provides a way to group related form controls together. It renders a native HTML \u003Ccode><fieldset>\u003C/code> element with proper accessibility features, including an associated \u003Ccode><legend>\u003C/code> for the group label.\u003C/p>\n\u003Cp>Fieldsets are essential for creating accessible forms, as they help screen reader users understand the relationship between form controls.\u003C/p>\n\u003Ch2 id=\"when-to-use\">When to Use\u003C/h2>\n\u003Cp>Use Fieldset when you need to:\u003C/p>\n\u003Cul>\n\u003Cli>Group related form inputs (e.g., address fields, contact information)\u003C/li>\n\u003Cli>Create logical sections within a larger form\u003C/li>\n\u003Cli>Improve form accessibility with proper semantic structure\u003C/li>\n\u003Cli>Apply a shared label or description to multiple inputs\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"examples\">Examples\u003C/h2>\n\u003Ch3 id=\"basic-fieldset\">Basic Fieldset\u003C/h3>\n\u003Cdemopreview title=\"Basic fieldset with legend\">\n \u003Cfieldset class=\"border border-gray-300 rounded-lg p-4\">\n \u003Clegend class=\"text-sm font-medium text-text-primary px-2\">Personal Information\u003C/legend>\n \u003Cdiv class=\"space-y-4 mt-2\">\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Full Name\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-primary-500\" placeholder=\"Enter your name\">\n \u003C/div>\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Email\u003C/label>\n \u003Cinput type=\"email\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-primary-500\" placeholder=\"Enter your email\">\n \u003C/div>\n \u003C/div>\n \u003C/fieldset>\n\u003C/demopreview>\n\u003Ch3 id=\"address-grouping\">Address Grouping\u003C/h3>\n\u003Cdemopreview title=\"Address fields grouped together\">\n \u003Cfieldset class=\"border border-gray-300 rounded-lg p-4\">\n \u003Clegend class=\"text-sm font-medium text-text-primary px-2\">Shipping Address\u003C/legend>\n \u003Cdiv class=\"space-y-4 mt-2\">\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Street Address\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md\" placeholder=\"123 Main St\">\n \u003C/div>\n \u003Cdiv class=\"grid grid-cols-2 gap-4\">\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">City\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md\" placeholder=\"City\">\n \u003C/div>\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">ZIP Code\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md\" placeholder=\"12345\">\n \u003C/div>\n \u003C/div>\n \u003C/div>\n \u003C/fieldset>\n\u003C/demopreview>\n\u003Ch3 id=\"disabled-state\">Disabled State\u003C/h3>\n\u003Cdemopreview title=\"Disabled fieldset\">\n \u003Cfieldset class=\"border border-gray-300 rounded-lg p-4 opacity-50\" disabled>\n \u003Clegend class=\"text-sm font-medium text-text-primary px-2\">Disabled Group\u003C/legend>\n \u003Cdiv class=\"space-y-4 mt-2\">\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Input 1\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-100\" placeholder=\"Disabled\">\n \u003C/div>\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Input 2\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-100\" placeholder=\"Disabled\">\n \u003C/div>\n \u003C/div>\n \u003C/fieldset>\n\u003C/demopreview>\n\u003Ch2 id=\"accessibility\">Accessibility\u003C/h2>\n\u003Ch3 id=\"keyboard-navigation\">Keyboard Navigation\u003C/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Keys\u003C/th>\u003Cth>Action\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>Tab\u003C/td>\u003Ctd>Moves focus to the first focusable element within the fieldset\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Ch3 id=\"aria-attributes\">ARIA Attributes\u003C/h3>\n\u003Cp>The Fieldset component uses native HTML elements that provide built-in accessibility:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Ccode><fieldset>\u003C/code> - Groups related form controls\u003C/li>\n\u003Cli>\u003Ccode><legend>\u003C/code> - Provides the accessible name for the group\u003C/li>\n\u003C/ul>\n\u003Cp>No additional ARIA attributes are required when using the native elements correctly.\u003C/p>\n\u003Ch3 id=\"best-practices\">Best Practices\u003C/h3>\n\u003Col>\n\u003Cli>\u003Cstrong>Always include a legend\u003C/strong>: The \u003Ccode><legend>\u003C/code> element is required for accessibility\u003C/li>\n\u003Cli>\u003Cstrong>Use for related inputs\u003C/strong>: Only group inputs that are logically related\u003C/li>\n\u003Cli>\u003Cstrong>Avoid nested fieldsets\u003C/strong>: Deeply nested fieldsets can be confusing for screen reader users\u003C/li>\n\u003Cli>\u003Cstrong>Consider visual grouping\u003C/strong>: Use styling to visually reinforce the grouping\u003C/li>\n\u003C/ol>\n\u003Ch2 id=\"api\">API\u003C/h2>\n\u003Ch3 id=\"props\">Props\u003C/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Prop\u003C/th>\u003Cth>Type\u003C/th>\u003Cth>Default\u003C/th>\u003Cth>Description\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode>legend\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>string\u003C/code>\u003C/td>\u003Ctd>-\u003C/td>\u003Ctd>The text for the fieldset legend\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>disabled\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>boolean\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>false\u003C/code>\u003C/td>\u003Ctd>Whether all controls in the fieldset are disabled\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Ch3 id=\"slots\">Slots\u003C/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Slot\u003C/th>\u003Cth>Description\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode>default\u003C/code>\u003C/td>\u003Ctd>Form controls and content inside the fieldset\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>legend\u003C/code>\u003C/td>\u003Ctd>Custom legend content (overrides \u003Ccode>legend\u003C/code> prop)\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Ch3 id=\"events\">Events\u003C/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Event\u003C/th>\u003Cth>Payload\u003C/th>\u003Cth>Description\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>-\u003C/td>\u003Ctd>-\u003C/td>\u003Ctd>Fieldset does not emit custom events\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Ch2 id=\"related\">Related\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/components/form\">Form\u003C/a> - Form wrapper component\u003C/li>\n\u003Cli>\u003Ca href=\"/components/input\">Input\u003C/a> - Text input component\u003C/li>\n\u003Cli>\u003Ca href=\"/components/select\">Select\u003C/a> - Select dropdown component\u003C/li>\n\u003C/ul>",{"headings":33,"localImagePaths":81,"remoteImagePaths":82,"frontmatter":83,"imagePaths":85},[34,38,41,44,48,51,54,57,60,63,66,69,72,75,78],{"depth":35,"slug":36,"text":37},2,"overview","Overview",{"depth":35,"slug":39,"text":40},"when-to-use","When to Use",{"depth":35,"slug":42,"text":43},"examples","Examples",{"depth":45,"slug":46,"text":47},3,"basic-fieldset","Basic Fieldset",{"depth":45,"slug":49,"text":50},"address-grouping","Address Grouping",{"depth":45,"slug":52,"text":53},"disabled-state","Disabled State",{"depth":35,"slug":55,"text":56},"accessibility","Accessibility",{"depth":45,"slug":58,"text":59},"keyboard-navigation","Keyboard Navigation",{"depth":45,"slug":61,"text":62},"aria-attributes","ARIA Attributes",{"depth":45,"slug":64,"text":65},"best-practices","Best Practices",{"depth":35,"slug":67,"text":68},"api","API",{"depth":45,"slug":70,"text":71},"props","Props",{"depth":45,"slug":73,"text":74},"slots","Slots",{"depth":45,"slug":76,"text":77},"events","Events",{"depth":35,"slug":79,"text":80},"related","Related",[],[],{"title":14,"description":15,"type":19,"category":16,"status":17,"since":18,"figma":22,"storybook":21,"source":20,"related":84},[24,25,26],[],"fieldset.md","button",{"id":87,"data":89,"body":97,"filePath":98,"digest":99,"rendered":100,"legacyId":137},{"title":90,"description":91,"navLabel":90,"order":92,"category":16,"status":17,"type":19,"component":90,"source":93,"storybook":94,"figma":95,"related":96},"Button","Buttons trigger actions and events when users interact with them.",1,"https://github.com/aziontech/webkit/tree/main/packages/components/src/Button","https://storybook.azion.com/components/button","https://figma.com/file/azion-design-system/components/button",[25,26],"# Button\n\nButtons are interactive elements that trigger actions when clicked or tapped. They communicate actions that users can take and are typically placed throughout your UI.\n\n## When to Use\n\nUse buttons to:\n- Trigger primary actions (Submit, Save, Continue)\n- Navigate to different views or pages\n- Toggle states or settings\n- Trigger secondary actions (Cancel, Delete)\n\n## Anatomy\n\nA button consists of:\n1. **Container** - The clickable area with background styling\n2. **Label** - Text describing the action\n3. **Icon** (optional) - Visual indicator before or after the label\n\n## Examples\n\n### Primary Button\n\nUse for the main action in a context.\n\n\u003CDemoPreview>\n \u003Cbutton class=\"px-4 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 transition-colors\">\n Primary Button\n \u003C/button>\n\u003C/DemoPreview>\n\n### Secondary Button\n\nUse for secondary or alternative actions.\n\n\u003CDemoPreview>\n \u003Cbutton class=\"px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors border border-gray-300\">\n Secondary Button\n \u003C/button>\n\u003C/DemoPreview>\n\n### Destructive Button\n\nUse for destructive or irreversible actions.\n\n\u003CDemoPreview>\n \u003Cbutton class=\"px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 transition-colors\">\n Delete\n \u003C/button>\n\u003C/DemoPreview>\n\n## States\n\nButtons have the following states:\n- **Default** - The normal resting state\n- **Hover** - When the cursor is over the button\n- **Focus** - When the button has keyboard focus\n- **Active** - When the button is being pressed\n- **Disabled** - When the button is not interactive\n\n## Accessibility\n\n### Keyboard Interaction\n- **Tab**: Moves focus to the button\n- **Enter/Space**: Activates the button when focused\n\n### ARIA Attributes\n- Use `aria-disabled=\"true\"` for disabled buttons that should be announced\n- Use `aria-label` for icon-only buttons\n\n## API\n\n### Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `variant` | `'primary' \\| 'secondary' \\| 'destructive'` | `'primary'` | Visual style variant |\n| `size` | `'sm' \\| 'md' \\| 'lg'` | `'md'` | Button size |\n| `disabled` | `boolean` | `false` | Whether the button is disabled |\n| `loading` | `boolean` | `false` | Shows loading spinner |\n| `icon` | `string` | - | Icon name to display |\n\n### Slots\n\n| Slot | Description |\n|------|-------------|\n| `default` | Button label content |\n| `icon-left` | Icon before the label |\n| `icon-right` | Icon after the label |\n\n### Events\n\n| Event | Payload | Description |\n|-------|---------|-------------|\n| `click` | `MouseEvent` | Fired when button is clicked |\n\n## Related\n\n- [Input](/components/input) - Text input component\n- [Select](/components/select) - Select dropdown component","src/content/components/button.md","87fd307d3887f507",{"html":101,"metadata":102},"\u003Ch1 id=\"button\">Button\u003C/h1>\n\u003Cp>Buttons are interactive elements that trigger actions when clicked or tapped. They communicate actions that users can take and are typically placed throughout your UI.\u003C/p>\n\u003Ch2 id=\"when-to-use\">When to Use\u003C/h2>\n\u003Cp>Use buttons to:\u003C/p>\n\u003Cul>\n\u003Cli>Trigger primary actions (Submit, Save, Continue)\u003C/li>\n\u003Cli>Navigate to different views or pages\u003C/li>\n\u003Cli>Toggle states or settings\u003C/li>\n\u003Cli>Trigger secondary actions (Cancel, Delete)\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"anatomy\">Anatomy\u003C/h2>\n\u003Cp>A button consists of:\u003C/p>\n\u003Col>\n\u003Cli>\u003Cstrong>Container\u003C/strong> - The clickable area with background styling\u003C/li>\n\u003Cli>\u003Cstrong>Label\u003C/strong> - Text describing the action\u003C/li>\n\u003Cli>\u003Cstrong>Icon\u003C/strong> (optional) - Visual indicator before or after the label\u003C/li>\n\u003C/ol>\n\u003Ch2 id=\"examples\">Examples\u003C/h2>\n\u003Ch3 id=\"primary-button\">Primary Button\u003C/h3>\n\u003Cp>Use for the main action in a context.\u003C/p>\n\u003Cdemopreview>\n \u003Cbutton class=\"px-4 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 transition-colors\">\n Primary Button\n \u003C/button>\n\u003C/demopreview>\n\u003Ch3 id=\"secondary-button\">Secondary Button\u003C/h3>\n\u003Cp>Use for secondary or alternative actions.\u003C/p>\n\u003Cdemopreview>\n \u003Cbutton class=\"px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors border border-gray-300\">\n Secondary Button\n \u003C/button>\n\u003C/demopreview>\n\u003Ch3 id=\"destructive-button\">Destructive Button\u003C/h3>\n\u003Cp>Use for destructive or irreversible actions.\u003C/p>\n\u003Cdemopreview>\n \u003Cbutton class=\"px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 transition-colors\">\n Delete\n \u003C/button>\n\u003C/demopreview>\n\u003Ch2 id=\"states\">States\u003C/h2>\n\u003Cp>Buttons have the following states:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Default\u003C/strong> - The normal resting state\u003C/li>\n\u003Cli>\u003Cstrong>Hover\u003C/strong> - When the cursor is over the button\u003C/li>\n\u003Cli>\u003Cstrong>Focus\u003C/strong> - When the button has keyboard focus\u003C/li>\n\u003Cli>\u003Cstrong>Active\u003C/strong> - When the button is being pressed\u003C/li>\n\u003Cli>\u003Cstrong>Disabled\u003C/strong> - When the button is not interactive\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"accessibility\">Accessibility\u003C/h2>\n\u003Ch3 id=\"keyboard-interaction\">Keyboard Interaction\u003C/h3>\n\u003Cul>\n\u003Cli>\u003Cstrong>Tab\u003C/strong>: Moves focus to the button\u003C/li>\n\u003Cli>\u003Cstrong>Enter/Space\u003C/strong>: Activates the button when focused\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"aria-attributes\">ARIA Attributes\u003C/h3>\n\u003Cul>\n\u003Cli>Use \u003Ccode>aria-disabled=\"true\"\u003C/code> for disabled buttons that should be announced\u003C/li>\n\u003Cli>Use \u003Ccode>aria-label\u003C/code> for icon-only buttons\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"api\">API\u003C/h2>\n\u003Ch3 id=\"props\">Props\u003C/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Prop\u003C/th>\u003Cth>Type\u003C/th>\u003Cth>Default\u003C/th>\u003Cth>Description\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode>variant\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>'primary' | 'secondary' | 'destructive'\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>'primary'\u003C/code>\u003C/td>\u003Ctd>Visual style variant\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>size\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>'sm' | 'md' | 'lg'\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>'md'\u003C/code>\u003C/td>\u003Ctd>Button size\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>disabled\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>boolean\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>false\u003C/code>\u003C/td>\u003Ctd>Whether the button is disabled\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>loading\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>boolean\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>false\u003C/code>\u003C/td>\u003Ctd>Shows loading spinner\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>icon\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>string\u003C/code>\u003C/td>\u003Ctd>-\u003C/td>\u003Ctd>Icon name to display\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Ch3 id=\"slots\">Slots\u003C/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Slot\u003C/th>\u003Cth>Description\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode>default\u003C/code>\u003C/td>\u003Ctd>Button label content\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>icon-left\u003C/code>\u003C/td>\u003Ctd>Icon before the label\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>icon-right\u003C/code>\u003C/td>\u003Ctd>Icon after the label\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Ch3 id=\"events\">Events\u003C/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Event\u003C/th>\u003Cth>Payload\u003C/th>\u003Cth>Description\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode>click\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>MouseEvent\u003C/code>\u003C/td>\u003Ctd>Fired when button is clicked\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Ch2 id=\"related\">Related\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/components/input\">Input\u003C/a> - Text input component\u003C/li>\n\u003Cli>\u003Ca href=\"/components/select\">Select\u003C/a> - Select dropdown component\u003C/li>\n\u003C/ul>",{"headings":103,"localImagePaths":132,"remoteImagePaths":133,"frontmatter":134,"imagePaths":136},[104,105,106,109,110,113,116,119,122,123,126,127,128,129,130,131],{"depth":92,"slug":87,"text":90},{"depth":35,"slug":39,"text":40},{"depth":35,"slug":107,"text":108},"anatomy","Anatomy",{"depth":35,"slug":42,"text":43},{"depth":45,"slug":111,"text":112},"primary-button","Primary Button",{"depth":45,"slug":114,"text":115},"secondary-button","Secondary Button",{"depth":45,"slug":117,"text":118},"destructive-button","Destructive Button",{"depth":35,"slug":120,"text":121},"states","States",{"depth":35,"slug":55,"text":56},{"depth":45,"slug":124,"text":125},"keyboard-interaction","Keyboard Interaction",{"depth":45,"slug":61,"text":62},{"depth":35,"slug":67,"text":68},{"depth":45,"slug":70,"text":71},{"depth":45,"slug":73,"text":74},{"depth":45,"slug":76,"text":77},{"depth":35,"slug":79,"text":80},[],[],{"title":90,"description":91,"navLabel":90,"order":92,"type":19,"category":16,"status":17,"component":90,"source":93,"storybook":94,"figma":95,"related":135},[25,26],[],"button.md","foundations",["Map",140,141,158,195],"index",{"id":140,"data":142,"body":146,"filePath":147,"digest":148,"rendered":149,"legacyId":194},{"title":143,"description":144,"navLabel":143,"order":92,"type":145},"Foundations","Core design principles and guidelines that shape the Azion Design System.","foundation","# Foundations\n\nFoundations are the core design principles, guidelines, and visual elements that shape the Azion Design System. They provide consistency and coherence across all components and experiences.\n\n## What's Inside\n\n### Color\nOur color system is built on semantic tokens that adapt to different contexts and themes. Learn how to use color effectively in your interfaces.\n\n### Typography\nTypography guidelines ensure readable, accessible, and consistent text across all touchpoints.\n\n### Spacing\nA consistent spacing scale creates rhythm and harmony in layouts.\n\n### Elevation\nElevation defines the visual hierarchy and depth of elements in the interface.\n\n### Motion\nMotion principles guide animations and transitions for a polished user experience.\n\n## Design Principles\n\n### 1. Clarity First\nEvery element should serve a purpose. Remove unnecessary complexity.\n\n### 2. Consistency\nUse familiar patterns and consistent behaviors across the system.\n\n### 3. Accessibility\nDesign for everyone. Meet WCAG 2.1 AA standards at minimum.\n\n### 4. Performance\nOptimize for speed and efficiency in both design and implementation.\n\n## Next Steps\n\n- [Color](/foundations/color) - Explore the color system\n- [Typography](/foundations/typography) - Learn about typography\n- [Spacing](/foundations/spacing) - Understand spacing principles","src/content/foundations/index.md","a6cfddde3ca33942",{"html":150,"metadata":151},"\u003Ch1 id=\"foundations\">Foundations\u003C/h1>\n\u003Cp>Foundations are the core design principles, guidelines, and visual elements that shape the Azion Design System. They provide consistency and coherence across all components and experiences.\u003C/p>\n\u003Ch2 id=\"whats-inside\">What’s Inside\u003C/h2>\n\u003Ch3 id=\"color\">Color\u003C/h3>\n\u003Cp>Our color system is built on semantic tokens that adapt to different contexts and themes. Learn how to use color effectively in your interfaces.\u003C/p>\n\u003Ch3 id=\"typography\">Typography\u003C/h3>\n\u003Cp>Typography guidelines ensure readable, accessible, and consistent text across all touchpoints.\u003C/p>\n\u003Ch3 id=\"spacing\">Spacing\u003C/h3>\n\u003Cp>A consistent spacing scale creates rhythm and harmony in layouts.\u003C/p>\n\u003Ch3 id=\"elevation\">Elevation\u003C/h3>\n\u003Cp>Elevation defines the visual hierarchy and depth of elements in the interface.\u003C/p>\n\u003Ch3 id=\"motion\">Motion\u003C/h3>\n\u003Cp>Motion principles guide animations and transitions for a polished user experience.\u003C/p>\n\u003Ch2 id=\"design-principles\">Design Principles\u003C/h2>\n\u003Ch3 id=\"1-clarity-first\">1. Clarity First\u003C/h3>\n\u003Cp>Every element should serve a purpose. Remove unnecessary complexity.\u003C/p>\n\u003Ch3 id=\"2-consistency\">2. Consistency\u003C/h3>\n\u003Cp>Use familiar patterns and consistent behaviors across the system.\u003C/p>\n\u003Ch3 id=\"3-accessibility\">3. Accessibility\u003C/h3>\n\u003Cp>Design for everyone. Meet WCAG 2.1 AA standards at minimum.\u003C/p>\n\u003Ch3 id=\"4-performance\">4. Performance\u003C/h3>\n\u003Cp>Optimize for speed and efficiency in both design and implementation.\u003C/p>\n\u003Ch2 id=\"next-steps\">Next Steps\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/foundations/color\">Color\u003C/a> - Explore the color system\u003C/li>\n\u003Cli>\u003Ca href=\"/foundations/typography\">Typography\u003C/a> - Learn about typography\u003C/li>\n\u003Cli>\u003Ca href=\"/foundations/spacing\">Spacing\u003C/a> - Understand spacing principles\u003C/li>\n\u003C/ul>",{"headings":152,"localImagePaths":190,"remoteImagePaths":191,"frontmatter":192,"imagePaths":193},[153,154,157,160,163,166,169,172,175,178,181,184,187],{"depth":92,"slug":138,"text":143},{"depth":35,"slug":155,"text":156},"whats-inside","What’s Inside",{"depth":45,"slug":158,"text":159},"color","Color",{"depth":45,"slug":161,"text":162},"typography","Typography",{"depth":45,"slug":164,"text":165},"spacing","Spacing",{"depth":45,"slug":167,"text":168},"elevation","Elevation",{"depth":45,"slug":170,"text":171},"motion","Motion",{"depth":35,"slug":173,"text":174},"design-principles","Design Principles",{"depth":45,"slug":176,"text":177},"1-clarity-first","1. Clarity First",{"depth":45,"slug":179,"text":180},"2-consistency","2. Consistency",{"depth":45,"slug":182,"text":183},"3-accessibility","3. Accessibility",{"depth":45,"slug":185,"text":186},"4-performance","4. Performance",{"depth":35,"slug":188,"text":189},"next-steps","Next Steps",[],[],{"title":143,"description":144,"navLabel":143,"order":92,"type":145},[],"index.md",{"id":158,"data":196,"body":198,"filePath":199,"digest":200,"rendered":201,"legacyId":241},{"title":159,"description":197,"navLabel":159,"order":35,"category":158,"type":145},"The color system provides semantic tokens for consistent and accessible interfaces.","# Color\n\nColor is a fundamental element of visual design. The Azion Design System uses a semantic color system built on design tokens that adapt to different contexts and themes.\n\n## Color Philosophy\n\nOur color system is designed to be:\n\n- **Accessible**: All color combinations meet WCAG 2.1 AA contrast requirements\n- **Semantic**: Colors are named by purpose, not appearance\n- **Consistent**: The same tokens are used across all components\n- **Themeable**: Colors adapt automatically to light and dark modes\n\n## Primary Colors\n\nThe primary color palette represents the Azion brand:\n\n| Token | Light Mode | Dark Mode | Usage |\n|-------|------------|-----------|-------|\n| `--color-primary-50` | `#eff6ff` | `#1e3a8a` | Light backgrounds |\n| `--color-primary-100` | `#dbeafe` | `#1e40af` | Hover states |\n| `--color-primary-500` | `#3b82f6` | `#3b82f6` | Primary actions |\n| `--color-primary-700` | `#1d4ed8` | `#60a5fa` | Active states |\n| `--color-primary-900` | `#1e3a8a` | `#93c5fd` | Text on light |\n\n## Semantic Colors\n\nSemantic colors convey meaning:\n\n### Success\nUsed for positive actions and confirmations.\n\n### Warning\nUsed for cautionary messages and alerts.\n\n### Error\nUsed for error states and destructive actions.\n\n### Info\nUsed for informational messages and neutral states.\n\n## Usage Guidelines\n\n### Do\n- Use semantic tokens instead of raw color values\n- Ensure sufficient contrast for text\n- Use color consistently across similar elements\n\n### Don't\n- Don't use color alone to convey information\n- Don't create new colors outside the system\n- Don't use decorative colors that distract from content\n\n## Related\n\n- [Typography](/foundations/typography) - Typography system\n- [Tokens](/tokens) - Design token reference","src/content/foundations/color.md","47307b696fcf627b",{"html":202,"metadata":203},"\u003Ch1 id=\"color\">Color\u003C/h1>\n\u003Cp>Color is a fundamental element of visual design. The Azion Design System uses a semantic color system built on design tokens that adapt to different contexts and themes.\u003C/p>\n\u003Ch2 id=\"color-philosophy\">Color Philosophy\u003C/h2>\n\u003Cp>Our color system is designed to be:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Accessible\u003C/strong>: All color combinations meet WCAG 2.1 AA contrast requirements\u003C/li>\n\u003Cli>\u003Cstrong>Semantic\u003C/strong>: Colors are named by purpose, not appearance\u003C/li>\n\u003Cli>\u003Cstrong>Consistent\u003C/strong>: The same tokens are used across all components\u003C/li>\n\u003Cli>\u003Cstrong>Themeable\u003C/strong>: Colors adapt automatically to light and dark modes\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"primary-colors\">Primary Colors\u003C/h2>\n\u003Cp>The primary color palette represents the Azion brand:\u003C/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Token\u003C/th>\u003Cth>Light Mode\u003C/th>\u003Cth>Dark Mode\u003C/th>\u003Cth>Usage\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode>--color-primary-50\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#eff6ff\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#1e3a8a\u003C/code>\u003C/td>\u003Ctd>Light backgrounds\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>--color-primary-100\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#dbeafe\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#1e40af\u003C/code>\u003C/td>\u003Ctd>Hover states\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>--color-primary-500\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#3b82f6\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#3b82f6\u003C/code>\u003C/td>\u003Ctd>Primary actions\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>--color-primary-700\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#1d4ed8\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#60a5fa\u003C/code>\u003C/td>\u003Ctd>Active states\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>--color-primary-900\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#1e3a8a\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#93c5fd\u003C/code>\u003C/td>\u003Ctd>Text on light\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Ch2 id=\"semantic-colors\">Semantic Colors\u003C/h2>\n\u003Cp>Semantic colors convey meaning:\u003C/p>\n\u003Ch3 id=\"success\">Success\u003C/h3>\n\u003Cp>Used for positive actions and confirmations.\u003C/p>\n\u003Ch3 id=\"warning\">Warning\u003C/h3>\n\u003Cp>Used for cautionary messages and alerts.\u003C/p>\n\u003Ch3 id=\"error\">Error\u003C/h3>\n\u003Cp>Used for error states and destructive actions.\u003C/p>\n\u003Ch3 id=\"info\">Info\u003C/h3>\n\u003Cp>Used for informational messages and neutral states.\u003C/p>\n\u003Ch2 id=\"usage-guidelines\">Usage Guidelines\u003C/h2>\n\u003Ch3 id=\"do\">Do\u003C/h3>\n\u003Cul>\n\u003Cli>Use semantic tokens instead of raw color values\u003C/li>\n\u003Cli>Ensure sufficient contrast for text\u003C/li>\n\u003Cli>Use color consistently across similar elements\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"dont\">Don’t\u003C/h3>\n\u003Cul>\n\u003Cli>Don’t use color alone to convey information\u003C/li>\n\u003Cli>Don’t create new colors outside the system\u003C/li>\n\u003Cli>Don’t use decorative colors that distract from content\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"related\">Related\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/foundations/typography\">Typography\u003C/a> - Typography system\u003C/li>\n\u003Cli>\u003Ca href=\"/tokens\">Tokens\u003C/a> - Design token reference\u003C/li>\n\u003C/ul>",{"headings":204,"localImagePaths":237,"remoteImagePaths":238,"frontmatter":239,"imagePaths":240},[205,206,209,212,215,218,221,224,227,230,233,236],{"depth":92,"slug":158,"text":159},{"depth":35,"slug":207,"text":208},"color-philosophy","Color Philosophy",{"depth":35,"slug":210,"text":211},"primary-colors","Primary Colors",{"depth":35,"slug":213,"text":214},"semantic-colors","Semantic Colors",{"depth":45,"slug":216,"text":217},"success","Success",{"depth":45,"slug":219,"text":220},"warning","Warning",{"depth":45,"slug":222,"text":223},"error","Error",{"depth":45,"slug":225,"text":226},"info","Info",{"depth":35,"slug":228,"text":229},"usage-guidelines","Usage Guidelines",{"depth":45,"slug":231,"text":232},"do","Do",{"depth":45,"slug":234,"text":235},"dont","Don’t",{"depth":35,"slug":79,"text":80},[],[],{"title":159,"description":197,"navLabel":159,"order":35,"type":145,"category":158},[],"color.md","contributing",["Map",140,244],{"id":140,"data":245,"body":248,"filePath":249,"digest":250,"rendered":251,"legacyId":194},{"title":246,"description":247,"navLabel":246,"order":92,"type":242},"Contributing","Guidelines for contributing to the Azion Design System.","# Contributing\n\nThank you for your interest in contributing to the Azion Design System! This guide will help you understand how to contribute effectively.\n\n## Ways to Contribute\n\n### Report Issues\nFound a bug or have a suggestion? Open an issue on our GitHub repository.\n\n### Submit Pull Requests\nFix a bug or add a feature by submitting a pull request.\n\n### Improve Documentation\nHelp us improve our documentation by fixing typos, adding examples, or clarifying explanations.\n\n## Development Setup\n\n1. Fork and clone the repository\n2. Install dependencies: `pnpm install`\n3. Start the development server: `pnpm docs:dev`\n\n## Coding Standards\n\n### Code Style\n- Follow the existing code style\n- Use TypeScript for all new code\n- Write meaningful commit messages\n\n### Component Development\n- Follow the component API conventions\n- Include accessibility features\n- Write unit tests for new components\n\n### Documentation\n- Write clear, concise documentation\n- Include code examples\n- Update the changelog\n\n## Pull Request Process\n\n1. Create a feature branch from `main`\n2. Make your changes\n3. Run tests: `pnpm test`\n4. Submit a pull request with a clear description\n\n## Code of Conduct\n\nPlease read and follow our [Code of Conduct](https://github.com/aziontech/webkit/blob/main/CODE_OF_CONDUCT.md).\n\n## Need Help?\n\n- Open a discussion on GitHub\n- Join our community chat\n- Email us at design-system@azion.com\n\n## Related\n\n- [Installation](/get-started/installation) - Get started with the design system","src/content/contributing/index.md","2489a445c8aac7c2",{"html":252,"metadata":253},"\u003Ch1 id=\"contributing\">Contributing\u003C/h1>\n\u003Cp>Thank you for your interest in contributing to the Azion Design System! This guide will help you understand how to contribute effectively.\u003C/p>\n\u003Ch2 id=\"ways-to-contribute\">Ways to Contribute\u003C/h2>\n\u003Ch3 id=\"report-issues\">Report Issues\u003C/h3>\n\u003Cp>Found a bug or have a suggestion? Open an issue on our GitHub repository.\u003C/p>\n\u003Ch3 id=\"submit-pull-requests\">Submit Pull Requests\u003C/h3>\n\u003Cp>Fix a bug or add a feature by submitting a pull request.\u003C/p>\n\u003Ch3 id=\"improve-documentation\">Improve Documentation\u003C/h3>\n\u003Cp>Help us improve our documentation by fixing typos, adding examples, or clarifying explanations.\u003C/p>\n\u003Ch2 id=\"development-setup\">Development Setup\u003C/h2>\n\u003Col>\n\u003Cli>Fork and clone the repository\u003C/li>\n\u003Cli>Install dependencies: \u003Ccode>pnpm install\u003C/code>\u003C/li>\n\u003Cli>Start the development server: \u003Ccode>pnpm docs:dev\u003C/code>\u003C/li>\n\u003C/ol>\n\u003Ch2 id=\"coding-standards\">Coding Standards\u003C/h2>\n\u003Ch3 id=\"code-style\">Code Style\u003C/h3>\n\u003Cul>\n\u003Cli>Follow the existing code style\u003C/li>\n\u003Cli>Use TypeScript for all new code\u003C/li>\n\u003Cli>Write meaningful commit messages\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"component-development\">Component Development\u003C/h3>\n\u003Cul>\n\u003Cli>Follow the component API conventions\u003C/li>\n\u003Cli>Include accessibility features\u003C/li>\n\u003Cli>Write unit tests for new components\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"documentation\">Documentation\u003C/h3>\n\u003Cul>\n\u003Cli>Write clear, concise documentation\u003C/li>\n\u003Cli>Include code examples\u003C/li>\n\u003Cli>Update the changelog\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"pull-request-process\">Pull Request Process\u003C/h2>\n\u003Col>\n\u003Cli>Create a feature branch from \u003Ccode>main\u003C/code>\u003C/li>\n\u003Cli>Make your changes\u003C/li>\n\u003Cli>Run tests: \u003Ccode>pnpm test\u003C/code>\u003C/li>\n\u003Cli>Submit a pull request with a clear description\u003C/li>\n\u003C/ol>\n\u003Ch2 id=\"code-of-conduct\">Code of Conduct\u003C/h2>\n\u003Cp>Please read and follow our \u003Ca href=\"https://github.com/aziontech/webkit/blob/main/CODE_OF_CONDUCT.md\">Code of Conduct\u003C/a>.\u003C/p>\n\u003Ch2 id=\"need-help\">Need Help?\u003C/h2>\n\u003Cul>\n\u003Cli>Open a discussion on GitHub\u003C/li>\n\u003Cli>Join our community chat\u003C/li>\n\u003Cli>Email us at \u003Ca href=\"mailto:design-system@azion.com\">design-system@azion.com\u003C/a>\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"related\">Related\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/get-started/installation\">Installation\u003C/a> - Get started with the design system\u003C/li>\n\u003C/ul>",{"headings":254,"localImagePaths":293,"remoteImagePaths":294,"frontmatter":295,"imagePaths":296},[255,256,259,262,265,268,271,274,277,280,283,286,289,292],{"depth":92,"slug":242,"text":246},{"depth":35,"slug":257,"text":258},"ways-to-contribute","Ways to Contribute",{"depth":45,"slug":260,"text":261},"report-issues","Report Issues",{"depth":45,"slug":263,"text":264},"submit-pull-requests","Submit Pull Requests",{"depth":45,"slug":266,"text":267},"improve-documentation","Improve Documentation",{"depth":35,"slug":269,"text":270},"development-setup","Development Setup",{"depth":35,"slug":272,"text":273},"coding-standards","Coding Standards",{"depth":45,"slug":275,"text":276},"code-style","Code Style",{"depth":45,"slug":278,"text":279},"component-development","Component Development",{"depth":45,"slug":281,"text":282},"documentation","Documentation",{"depth":35,"slug":284,"text":285},"pull-request-process","Pull Request Process",{"depth":35,"slug":287,"text":288},"code-of-conduct","Code of Conduct",{"depth":35,"slug":290,"text":291},"need-help","Need Help?",{"depth":35,"slug":79,"text":80},[],[],{"title":246,"description":247,"navLabel":246,"order":92,"type":242},[],"get-started",["Map",299,300,140,331],"installation",{"id":299,"data":301,"body":305,"filePath":306,"digest":307,"rendered":308,"legacyId":330},{"title":302,"description":303,"navLabel":302,"order":35,"category":299,"type":304},"Installation","Get started with the Azion Design System by installing the required packages.","guide","# Installation\n\nThe Azion Design System is distributed as a set of npm packages. Install only what you need for your project.\n\n## Requirements\n\n- Node.js 18.x or higher\n- Vue 3.x\n- Tailwind CSS 3.x\n\n## Package Installation\n\nInstall the core packages you need:\n\n```bash\n# Install components\nnpm install @aziontech/components\n\n# Install icons\nnpm install @aziontech/icons\n\n# Install theme (optional, for design tokens)\nnpm install @aziontech/theme\n```\n\n## Tailwind Configuration\n\nExtend your Tailwind configuration to include Azion's design tokens:\n\n```js\n// tailwind.config.js\nimport azionTheme from '@aziontech/theme';\n\nexport default {\n content: [\n './src/**/*.{vue,js,ts}',\n './node_modules/@aziontech/**/*.{vue,js,ts}',\n ],\n theme: {\n extend: azionTheme.tailwindPreset,\n },\n};\n```\n\n## Vue Configuration\n\nImport the CSS and register the components:\n\n```js\n// main.js\nimport { createApp } from 'vue';\nimport App from './App.vue';\n\n// Import Azion CSS\nimport '@aziontech/theme/css';\n\n// Import Azion components (optional)\nimport { Button, Input, Select } from '@aziontech/components';\n\nconst app = createApp(App);\n\n// Register components globally\napp.component('AzButton', Button);\napp.component('AzInput', Input);\napp.component('AzSelect', Select);\n\napp.mount('#app');\n```\n\n## Next Steps\n\n- [Quick Start](/get-started) - Build your first component\n- [Components](/components) - Explore available components\n- [Foundations](/foundations) - Learn about design principles","src/content/get-started/installation.md","7ccd4afb55dff6a3",{"html":309,"metadata":310},"\u003Ch1 id=\"installation\">Installation\u003C/h1>\n\u003Cp>The Azion Design System is distributed as a set of npm packages. Install only what you need for your project.\u003C/p>\n\u003Ch2 id=\"requirements\">Requirements\u003C/h2>\n\u003Cul>\n\u003Cli>Node.js 18.x or higher\u003C/li>\n\u003Cli>Vue 3.x\u003C/li>\n\u003Cli>Tailwind CSS 3.x\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"package-installation\">Package Installation\u003C/h2>\n\u003Cp>Install the core packages you need:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"># Install components\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> install\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/components\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"># Install icons\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> install\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/icons\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"># Install theme (optional, for design tokens)\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> install\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/theme\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"tailwind-configuration\">Tailwind Configuration\u003C/h2>\n\u003Cp>Extend your Tailwind configuration to include Azion’s design tokens:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"js\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">// tailwind.config.js\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> azionTheme \u003C/span>\u003Cspan style=\"color:#F97583\">from\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> '@aziontech/theme'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">export\u003C/span>\u003Cspan style=\"color:#F97583\"> default\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> content: [\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\"> './src/**/*.{vue,js,ts}'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\"> './node_modules/@aziontech/**/*.{vue,js,ts}'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> ],\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> theme: {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> extend: azionTheme.tailwindPreset,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> },\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">};\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"vue-configuration\">Vue Configuration\u003C/h2>\n\u003Cp>Import the CSS and register the components:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"js\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">// main.js\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> { createApp } \u003C/span>\u003Cspan style=\"color:#F97583\">from\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> 'vue'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> App \u003C/span>\u003Cspan style=\"color:#F97583\">from\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> './App.vue'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">// Import Azion CSS\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> '@aziontech/theme/css'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">// Import Azion components (optional)\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> { Button, Input, Select } \u003C/span>\u003Cspan style=\"color:#F97583\">from\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> '@aziontech/components'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">const\u003C/span>\u003Cspan style=\"color:#79B8FF\"> app\u003C/span>\u003Cspan style=\"color:#F97583\"> =\u003C/span>\u003Cspan style=\"color:#B392F0\"> createApp\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(App);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">// Register components globally\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">app.\u003C/span>\u003Cspan style=\"color:#B392F0\">component\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#9ECBFF\">'AzButton'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, Button);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">app.\u003C/span>\u003Cspan style=\"color:#B392F0\">component\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#9ECBFF\">'AzInput'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, Input);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">app.\u003C/span>\u003Cspan style=\"color:#B392F0\">component\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#9ECBFF\">'AzSelect'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, Select);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">app.\u003C/span>\u003Cspan style=\"color:#B392F0\">mount\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#9ECBFF\">'#app'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">);\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"next-steps\">Next Steps\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/get-started\">Quick Start\u003C/a> - Build your first component\u003C/li>\n\u003Cli>\u003Ca href=\"/components\">Components\u003C/a> - Explore available components\u003C/li>\n\u003Cli>\u003Ca href=\"/foundations\">Foundations\u003C/a> - Learn about design principles\u003C/li>\n\u003C/ul>",{"headings":311,"localImagePaths":326,"remoteImagePaths":327,"frontmatter":328,"imagePaths":329},[312,313,316,319,322,325],{"depth":92,"slug":299,"text":302},{"depth":35,"slug":314,"text":315},"requirements","Requirements",{"depth":35,"slug":317,"text":318},"package-installation","Package Installation",{"depth":35,"slug":320,"text":321},"tailwind-configuration","Tailwind Configuration",{"depth":35,"slug":323,"text":324},"vue-configuration","Vue Configuration",{"depth":35,"slug":188,"text":189},[],[],{"title":302,"description":303,"navLabel":302,"order":35,"type":304,"category":299},[],"installation.md",{"id":140,"data":332,"body":335,"filePath":336,"digest":337,"rendered":338,"legacyId":194},{"title":333,"description":334,"type":304},"Get Started","Get started with the Azion Design System","## Welcome\n\nWelcome to the Azion Design System documentation. This guide will help you get started with using our components and design tokens in your projects.\n\n## Installation\n\nInstall the design system packages using your preferred package manager:\n\n```bash\nnpm install @aziontech/components @aziontech/icons @aziontech/theme\n```\n\n## Quick Start\n\n1. Import the CSS in your main entry file:\n\n```javascript\nimport '@aziontech/theme/styles.css';\n```\n\n2. Import and use components:\n\n```vue\n\u003Cscript setup>\nimport { Button, Input } from '@aziontech/components';\n\u003C/script>\n\n\u003Ctemplate>\n \u003CButton variant=\"primary\">Click me\u003C/Button>\n\u003C/template>\n```\n\n## Next Steps\n\n- Explore our [Components](/components) library\n- Learn about our [Foundations](/foundations) and design principles\n- Browse our [Icons](/icons) collection","src/content/get-started/index.md","62e783fea506da23",{"html":339,"metadata":340},"\u003Ch2 id=\"welcome\">Welcome\u003C/h2>\n\u003Cp>Welcome to the Azion Design System documentation. This guide will help you get started with using our components and design tokens in your projects.\u003C/p>\n\u003Ch2 id=\"installation\">Installation\u003C/h2>\n\u003Cp>Install the design system packages using your preferred package manager:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> install\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/components\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/icons\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/theme\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"quick-start\">Quick Start\u003C/h2>\n\u003Col>\n\u003Cli>Import the CSS in your main entry file:\u003C/li>\n\u003C/ol>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"javascript\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> '@aziontech/theme/styles.css'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Col start=\"2\">\n\u003Cli>Import and use components:\u003C/li>\n\u003C/ol>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"vue\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">script\u003C/span>\u003Cspan style=\"color:#B392F0\"> setup\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> { Button, Input } \u003C/span>\u003Cspan style=\"color:#F97583\">from\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> '@aziontech/components'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"></\u003C/span>\u003Cspan style=\"color:#85E89D\">script\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">template\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> <\u003C/span>\u003Cspan style=\"color:#85E89D\">Button\u003C/span>\u003Cspan style=\"color:#B392F0\"> variant\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"primary\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>Click me</\u003C/span>\u003Cspan style=\"color:#85E89D\">Button\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"></\u003C/span>\u003Cspan style=\"color:#85E89D\">template\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"next-steps\">Next Steps\u003C/h2>\n\u003Cul>\n\u003Cli>Explore our \u003Ca href=\"/components\">Components\u003C/a> library\u003C/li>\n\u003Cli>Learn about our \u003Ca href=\"/foundations\">Foundations\u003C/a> and design principles\u003C/li>\n\u003Cli>Browse our \u003Ca href=\"/icons\">Icons\u003C/a> collection\u003C/li>\n\u003C/ul>",{"headings":341,"localImagePaths":350,"remoteImagePaths":351,"frontmatter":352,"imagePaths":353},[342,345,346,349],{"depth":35,"slug":343,"text":344},"welcome","Welcome",{"depth":35,"slug":299,"text":302},{"depth":35,"slug":347,"text":348},"quick-start","Quick Start",{"depth":35,"slug":188,"text":189},[],[],{"title":333,"description":334,"type":304},[],"icons",["Map",140,356],{"id":140,"data":357,"body":361,"filePath":362,"digest":363,"rendered":364,"legacyId":194},{"title":358,"description":359,"navLabel":358,"order":92,"type":360},"Icons","Icon library with Azion Icons and PrimeIcons for use in your applications.","icon","# Icons\n\nThe Azion Design System includes two icon libraries:\n\n- **Azion Icons** - Custom icons designed for Azion products\n- **PrimeIcons** - General purpose icon library from PrimeVue\n\n## Installation\n\nIcons are included in the `@aziontech/icons` package:\n\n```bash\nnpm install @aziontech/icons\n```\n\n## Usage\n\n### Font Icons\n\nUse icons as font icons with the appropriate class:\n\n```html\n\u003C!-- Azion Icon -->\n\u003Ci class=\"ai ai-azion\">\u003C/i>\n\n\u003C!-- PrimeIcon -->\n\u003Ci class=\"pi pi-home\">\u003C/i>\n```\n\n### SVG Icons\n\nImport SVG icons directly for more control:\n\n```js\nimport { aiAzion, piHome } from '@aziontech/icons/svg';\n```\n\n## Icon Categories\n\n### Azion Icons\n\nAzion Icons are organized into categories:\n\n- **Product Icons** - Azion product and service icons\n- **Action Icons** - Common action icons\n- **Status Icons** - Status and notification icons\n\n### PrimeIcons\n\nPrimeIcons provide a comprehensive set of general-purpose icons suitable for most UI needs.\n\n## Sizing\n\nIcons inherit their size from the font size of their container:\n\n```html\n\u003C!-- Small -->\n\u003Ci class=\"ai ai-azion text-sm\">\u003C/i>\n\n\u003C!-- Medium (default) -->\n\u003Ci class=\"ai ai-azion text-base\">\u003C/i>\n\n\u003C!-- Large -->\n\u003Ci class=\"ai ai-azion text-2xl\">\u003C/i>\n```\n\n## Accessibility\n\nWhen using icons alone, provide accessible labels:\n\n```html\n\u003C!-- Icon button with label -->\n\u003Cbutton aria-label=\"Settings\">\n \u003Ci class=\"pi pi-cog\">\u003C/i>\n\u003C/button>\n\n\u003C!-- Decorative icon (hidden from screen readers) -->\n\u003Ci class=\"pi pi-star\" aria-hidden=\"true\">\u003C/i>\n```\n\n## Related\n\n- [Button](/components/button) - Button component with icon support","src/content/icons/index.md","aea3324aedf050df",{"html":365,"metadata":366},"\u003Ch1 id=\"icons\">Icons\u003C/h1>\n\u003Cp>The Azion Design System includes two icon libraries:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Azion Icons\u003C/strong> - Custom icons designed for Azion products\u003C/li>\n\u003Cli>\u003Cstrong>PrimeIcons\u003C/strong> - General purpose icon library from PrimeVue\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"installation\">Installation\u003C/h2>\n\u003Cp>Icons are included in the \u003Ccode>@aziontech/icons\u003C/code> package:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> install\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/icons\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"usage\">Usage\u003C/h2>\n\u003Ch3 id=\"font-icons\">Font Icons\u003C/h3>\n\u003Cp>Use icons as font icons with the appropriate class:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"html\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"><!-- Azion Icon -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"ai ai-azion\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">></\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"><!-- PrimeIcon -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"pi pi-home\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">></\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch3 id=\"svg-icons\">SVG Icons\u003C/h3>\n\u003Cp>Import SVG icons directly for more control:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"js\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> { aiAzion, piHome } \u003C/span>\u003Cspan style=\"color:#F97583\">from\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> '@aziontech/icons/svg'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"icon-categories\">Icon Categories\u003C/h2>\n\u003Ch3 id=\"azion-icons\">Azion Icons\u003C/h3>\n\u003Cp>Azion Icons are organized into categories:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Product Icons\u003C/strong> - Azion product and service icons\u003C/li>\n\u003Cli>\u003Cstrong>Action Icons\u003C/strong> - Common action icons\u003C/li>\n\u003Cli>\u003Cstrong>Status Icons\u003C/strong> - Status and notification icons\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"primeicons\">PrimeIcons\u003C/h3>\n\u003Cp>PrimeIcons provide a comprehensive set of general-purpose icons suitable for most UI needs.\u003C/p>\n\u003Ch2 id=\"sizing\">Sizing\u003C/h2>\n\u003Cp>Icons inherit their size from the font size of their container:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"html\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"><!-- Small -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"ai ai-azion text-sm\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">></\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"><!-- Medium (default) -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"ai ai-azion text-base\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">></\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"><!-- Large -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"ai ai-azion text-2xl\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">></\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"accessibility\">Accessibility\u003C/h2>\n\u003Cp>When using icons alone, provide accessible labels:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"html\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"><!-- Icon button with label -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">button\u003C/span>\u003Cspan style=\"color:#B392F0\"> aria-label\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"Settings\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> <\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"pi pi-cog\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">></\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"></\u003C/span>\u003Cspan style=\"color:#85E89D\">button\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"><!-- Decorative icon (hidden from screen readers) -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"pi pi-star\"\u003C/span>\u003Cspan style=\"color:#B392F0\"> aria-hidden\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"true\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">></\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"related\">Related\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/components/button\">Button\u003C/a> - Button component with icon support\u003C/li>\n\u003C/ul>",{"headings":367,"localImagePaths":393,"remoteImagePaths":394,"frontmatter":395,"imagePaths":396},[368,369,370,373,376,379,382,385,388,391,392],{"depth":92,"slug":354,"text":358},{"depth":35,"slug":299,"text":302},{"depth":35,"slug":371,"text":372},"usage","Usage",{"depth":45,"slug":374,"text":375},"font-icons","Font Icons",{"depth":45,"slug":377,"text":378},"svg-icons","SVG Icons",{"depth":35,"slug":380,"text":381},"icon-categories","Icon Categories",{"depth":45,"slug":383,"text":384},"azion-icons","Azion Icons",{"depth":45,"slug":386,"text":387},"primeicons","PrimeIcons",{"depth":35,"slug":389,"text":390},"sizing","Sizing",{"depth":35,"slug":55,"text":56},{"depth":35,"slug":79,"text":80},[],[],{"title":358,"description":359,"navLabel":358,"order":92,"type":360},[]] \ No newline at end of file +[["Map",1,2,9,10,188,189,217,218,241,242,300,301,324,325,426,427,469,470,524,525,547,548],"meta::meta",["Map",3,4,5,6,7,8],"astro-version","5.18.0","content-config-digest","9f18c7eb7d7f9883","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"site\":\"https://docs.azion.com\",\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":true,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true,\"allowedDomains\":[],\"actionBodySizeLimit\":1048576},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"liveContentCollections\":false,\"csp\":false,\"staticImportMetaEnv\":false,\"chromeDevtoolsWorkspace\":false,\"failOnPrerenderConflict\":false,\"svgo\":false},\"legacy\":{\"collections\":false}}","components",["Map",11,12,95,96],"fieldset",{"id":11,"data":13,"body":90,"filePath":91,"digest":92,"legacyId":93,"deferredRender":94},{"title":14,"description":15,"category":16,"status":17,"since":18,"tags":19,"version":22,"language":23,"type":24,"component":25,"source":26,"storybook":27,"figma":28,"related":29,"anatomy":34,"accessibility":44,"api":62},"Fieldset","Group related form inputs under a shared label for better organization and accessibility.","form","stable","1.0.0",[16,20,21],"grouping","accessibility","v1","en","component","AzFieldset","https://github.com/aziontech/webkit/tree/main/packages/components/src/Fieldset","https://storybook.azion.com/?path=/story/form-fieldset","https://figma.com/file/azion-design-system?node-id=fieldset",[30,31,32,33],"Form","Input","Select","Checkbox",[35,38,41],{"label":36,"description":37},"Fieldset Container","The grouping container with border styling",{"label":39,"description":40},"Legend","The title/label for the group of inputs",{"label":42,"description":43},"Content Area","The area containing grouped form controls",{"keyboard":45,"aria":49,"wcag":56,"notes":59},[46],{"keys":47,"action":48},"Tab","Moves focus to the first focusable element within the fieldset",[50,53],{"attribute":51,"usage":52},"aria-describedby","Can reference a description for the fieldset group",{"attribute":54,"usage":55},"aria-required=\"true\"","When all fields in the group are required",[57,58],"1.3.1 Info and Relationships","3.3.2 Labels or Instructions",[60,61],"Native \u003Cfieldset> and \u003Clegend> elements provide built-in accessibility","Screen readers announce the legend when entering the fieldset",{"props":63,"slots":83,"events":89},[64,70,75,78],{"name":65,"type":66,"default":67,"required":68,"description":69},"legend","string","undefined",false,"The text for the fieldset legend",{"name":71,"type":72,"default":73,"required":68,"description":74},"disabled","boolean","false","Whether all controls in the fieldset are disabled",{"name":76,"type":72,"default":73,"required":68,"description":77},"required","Whether all fields in the group are required",{"name":79,"type":80,"default":81,"required":68,"description":82},"variant","'default' | 'card' | 'transparent'","'default'","Visual style variant",[84,87],{"name":85,"description":86},"default","Form controls and content inside the fieldset",{"name":65,"description":88},"Custom legend content (overrides legend prop)",[],"import { ExampleBlock, Callout } from '@components/docs';\n\n## Overview\n\nThe Fieldset component provides a way to group related form controls together. It renders a native HTML `\u003Cfieldset>` element with proper accessibility features, including an associated `\u003Clegend>` for the group label.\n\nFieldsets are essential for creating accessible forms, as they help screen reader users understand the relationship between form controls.\n\n\u003CCallout type=\"info\" title=\"Semantic HTML\">\n This component uses native `\u003Cfieldset>` and `\u003Clegend>` elements, which provide built-in accessibility benefits without requiring additional ARIA attributes.\n\u003C/Callout>\n\n## When to Use\n\nUse Fieldset when you need to:\n\n- Group related form inputs (e.g., address fields, contact information)\n- Create logical sections within a larger form\n- Improve form accessibility with proper semantic structure\n- Apply a shared label or description to multiple inputs\n- Disable multiple inputs at once\n\n## Examples\n\n### Basic Fieldset\n\n\u003CExampleBlock \n title=\"Basic fieldset with legend\"\n description=\"A simple fieldset grouping personal information fields\"\n code={`\u003CAzFieldset legend=\"Personal Information\">\n \u003CAzInput label=\"Full Name\" />\n \u003CAzInput label=\"Email\" type=\"email\" />\n\u003C/AzFieldset>`}\n>\n \u003Cfieldset class=\"border border-gray-300 rounded-lg p-4\">\n \u003Clegend class=\"text-sm font-medium text-text-primary px-2\">Personal Information\u003C/legend>\n \u003Cdiv class=\"space-y-4 mt-2\">\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Full Name\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-primary-500\" placeholder=\"Enter your name\" />\n \u003C/div>\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Email\u003C/label>\n \u003Cinput type=\"email\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-primary-500\" placeholder=\"Enter your email\" />\n \u003C/div>\n \u003C/div>\n \u003C/fieldset>\n\u003C/ExampleBlock>\n\n### Address Grouping\n\n\u003CExampleBlock \n title=\"Address fields grouped\"\n description=\"Grouping address-related fields together\"\n code={`\u003CAzFieldset legend=\"Shipping Address\">\n \u003CAzInput label=\"Street Address\" />\n \u003Cdiv class=\"grid grid-cols-2 gap-4\">\n \u003CAzInput label=\"City\" />\n \u003CAzInput label=\"ZIP Code\" />\n \u003C/div>\n\u003C/AzFieldset>`}\n>\n \u003Cfieldset class=\"border border-gray-300 rounded-lg p-4\">\n \u003Clegend class=\"text-sm font-medium text-text-primary px-2\">Shipping Address\u003C/legend>\n \u003Cdiv class=\"space-y-4 mt-2\">\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Street Address\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md\" placeholder=\"123 Main St\" />\n \u003C/div>\n \u003Cdiv class=\"grid grid-cols-2 gap-4\">\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">City\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md\" placeholder=\"City\" />\n \u003C/div>\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">ZIP Code\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md\" placeholder=\"12345\" />\n \u003C/div>\n \u003C/div>\n \u003C/div>\n \u003C/fieldset>\n\u003C/ExampleBlock>\n\n### Disabled State\n\n\u003CExampleBlock \n title=\"Disabled fieldset\"\n description=\"All inputs disabled via the fieldset\"\n code={`\u003CAzFieldset legend=\"Disabled Group\" disabled>\n \u003CAzInput label=\"Input 1\" />\n \u003CAzInput label=\"Input 2\" />\n\u003C/AzFieldset>`}\n>\n \u003Cfieldset class=\"border border-gray-300 rounded-lg p-4 opacity-50\" disabled>\n \u003Clegend class=\"text-sm font-medium text-text-primary px-2\">Disabled Group\u003C/legend>\n \u003Cdiv class=\"space-y-4 mt-2\">\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Input 1\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-100\" placeholder=\"Disabled\" />\n \u003C/div>\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Input 2\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-100\" placeholder=\"Disabled\" />\n \u003C/div>\n \u003C/div>\n \u003C/fieldset>\n\u003C/ExampleBlock>\n\n## States\n\n\u003CStateGrid columns={3}>\n \u003Cfieldset slot=\"default\" class=\"border border-gray-300 rounded-lg p-3\">\n \u003Clegend class=\"text-xs font-medium text-text-primary px-2\">Default\u003C/legend>\n \u003Cinput type=\"text\" class=\"w-full px-2 py-1 text-sm border border-gray-300 rounded\" placeholder=\"Input\" />\n \u003C/fieldset>\n \u003Cfieldset slot=\"focus\" class=\"border border-primary-300 rounded-lg p-3 ring-2 ring-primary-100\">\n \u003Clegend class=\"text-xs font-medium text-text-primary px-2\">Focused\u003C/legend>\n \u003Cinput type=\"text\" class=\"w-full px-2 py-1 text-sm border border-primary-500 rounded ring-1 ring-primary-500\" placeholder=\"Input\" />\n \u003C/fieldset>\n \u003Cfieldset slot=\"disabled\" class=\"border border-gray-200 rounded-lg p-3 opacity-50\" disabled>\n \u003Clegend class=\"text-xs font-medium text-text-primary px-2\">Disabled\u003C/legend>\n \u003Cinput type=\"text\" class=\"w-full px-2 py-1 text-sm border border-gray-200 rounded bg-gray-100\" placeholder=\"Disabled\" disabled />\n \u003C/fieldset>\n\u003C/StateGrid>\n\n## Do's and Don'ts\n\n\u003CDoDont title=\"Fieldset usage\">\n \u003Ctemplate #do>\n \u003Cp class=\"text-sm mb-2\">Group related form fields:\u003C/p>\n \u003Cfieldset class=\"border border-gray-300 rounded p-3\">\n \u003Clegend class=\"text-xs font-medium px-2\">Contact Info\u003C/legend>\n \u003Cdiv class=\"space-y-2\">\n \u003Cinput type=\"text\" class=\"w-full px-2 py-1 text-sm border border-gray-300 rounded\" placeholder=\"Email\" />\n \u003Cinput type=\"text\" class=\"w-full px-2 py-1 text-sm border border-gray-300 rounded\" placeholder=\"Phone\" />\n \u003C/div>\n \u003C/fieldset>\n \u003C/template>\n \u003Ctemplate #dont>\n \u003Cp class=\"text-sm mb-2\">Don't use for unrelated fields:\u003C/p>\n \u003Cfieldset class=\"border border-gray-300 rounded p-3\">\n \u003Clegend class=\"text-xs font-medium px-2\">Mixed Fields\u003C/legend>\n \u003Cinput type=\"text\" class=\"w-full px-2 py-1 text-sm border border-gray-300 rounded mb-2\" placeholder=\"Name\" />\n \u003Cinput type=\"text\" class=\"w-full px-2 py-1 text-sm border border-gray-300 rounded\" placeholder=\"Favorite Color\" />\n \u003C/fieldset>\n \u003Cp class=\"text-xs text-red-600 mt-1\">These aren't logically related\u003C/p>\n \u003C/template>\n\u003C/DoDont>\n\n\u003CDoDont>\n \u003Ctemplate #do>\n \u003Cp class=\"text-sm mb-2\">Use descriptive legends:\u003C/p>\n \u003Cfieldset class=\"border border-gray-300 rounded p-3\">\n \u003Clegend class=\"text-xs font-medium px-2\">Billing Address\u003C/legend>\n \u003Cinput type=\"text\" class=\"w-full px-2 py-1 text-sm border border-gray-300 rounded\" placeholder=\"Street\" />\n \u003C/fieldset>\n \u003C/template>\n \u003Ctemplate #dont>\n \u003Cp class=\"text-sm mb-2\">Don't use vague legends:\u003C/p>\n \u003Cfieldset class=\"border border-gray-300 rounded p-3\">\n \u003Clegend class=\"text-xs font-medium px-2\">Info\u003C/legend>\n \u003Cinput type=\"text\" class=\"w-full px-2 py-1 text-sm border border-gray-300 rounded\" placeholder=\"Street\" />\n \u003C/fieldset>\n \u003C/template>\n\u003C/DoDont>","src/content/components/fieldset.mdx","c0ab5e8f45f29ac1","fieldset.mdx",true,"button",{"id":95,"data":97,"body":184,"filePath":185,"digest":186,"legacyId":187,"deferredRender":94},{"title":98,"description":99,"navLabel":98,"order":100,"category":16,"status":17,"since":18,"tags":101,"version":22,"language":23,"type":24,"component":104,"source":105,"storybook":106,"figma":107,"related":108,"anatomy":110,"accessibility":120,"api":142},"Button","Buttons trigger actions and events when users interact with them.",1,[102,16,103],"action","interactive","AzButton","https://github.com/aziontech/webkit/tree/main/packages/components/src/Button","https://storybook.azion.com/components/button","https://figma.com/file/azion-design-system/components/button",[31,32,109],"IconButton",[111,114,117],{"label":112,"description":113},"Container","The clickable area with background styling and border",{"label":115,"description":116},"Label","The text content describing the action",{"label":118,"description":119},"Icon (optional)","An optional icon for visual emphasis before or after the label",{"keyboard":121,"aria":129,"wcag":139},[122,124,127],{"keys":47,"action":123},"Moves focus to the button",{"keys":125,"action":126},"Enter","Activates the button when focused",{"keys":128,"action":126},"Space",[130,133,136],{"attribute":131,"usage":132},"aria-disabled=\"true\"","Use instead of disabled attribute for screen readers to announce the disabled state",{"attribute":134,"usage":135},"aria-label","Required for icon-only buttons to provide accessible name",{"attribute":137,"usage":138},"aria-busy=\"true\"","When button is in loading state",[140,141],"2.1.1 Keyboard","4.1.2 Name, Role, Value",{"props":143,"slots":169,"events":179},[144,148,153,155,158,161,166],{"name":79,"type":145,"default":146,"required":68,"description":147},"'primary' | 'secondary' | 'destructive' | 'ghost'","'primary'","Visual style variant of the button",{"name":149,"type":150,"default":151,"required":68,"description":152},"size","'sm' | 'md' | 'lg'","'md'","Size of the button",{"name":71,"type":72,"default":73,"required":68,"description":154},"Whether the button is disabled",{"name":156,"type":72,"default":73,"required":68,"description":157},"loading","Shows loading spinner and disables interaction",{"name":159,"type":66,"default":67,"required":68,"description":160},"icon","Icon name to display before the label",{"name":162,"type":163,"default":164,"required":68,"description":165},"iconPosition","'left' | 'right'","'left'","Position of the icon relative to label",{"name":167,"type":72,"default":73,"required":68,"description":168},"fullWidth","Whether button takes full width of container",[170,172,176],{"name":85,"description":171},"Button label content",{"name":173,"description":174,"props":175},"icon-left","Custom icon before the label","iconClass: string",{"name":177,"description":178,"props":175},"icon-right","Custom icon after the label",[180],{"name":181,"payload":182,"description":183},"click","MouseEvent","Fired when button is clicked and not disabled","import { ExampleBlock, Callout, StateGrid } from '@components/docs';\n\n## Overview\n\nButtons are interactive elements that trigger actions when clicked or tapped. They communicate actions that users can take and are typically placed throughout your UI, from forms to dialogs to navigation.\n\nThe Button component provides a consistent, accessible way to trigger actions throughout your application.\n\n## When to Use\n\nUse buttons to:\n\n- Trigger primary actions (Submit, Save, Continue)\n- Navigate to different views or pages\n- Toggle states or settings\n- Trigger secondary actions (Cancel, Delete)\n- Submit forms\n\n\u003CCallout type=\"tip\" title=\"Choosing the right variant\">\n Use **primary** for the main action, **secondary** for alternative actions, **destructive** for dangerous actions, and **ghost** for less prominent actions.\n\u003C/Callout>\n\n## Examples\n\n### Primary Button\n\nUse for the main action in a context.\n\n\u003CExampleBlock \n title=\"Primary variant\"\n description=\"The default button style for primary actions\"\n code={`\u003CAzButton variant=\"primary\">Primary Button\u003C/AzButton>`}\n>\n \u003Cbutton class=\"px-4 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 transition-colors font-medium\">\n Primary Button\n \u003C/button>\n\u003C/ExampleBlock>\n\n### Secondary Button\n\nUse for secondary or alternative actions.\n\n\u003CExampleBlock \n title=\"Secondary variant\"\n description=\"For alternative or less prominent actions\"\n code={`\u003CAzButton variant=\"secondary\">Secondary Button\u003C/AzButton>`}\n>\n \u003Cbutton class=\"px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors border border-gray-300 font-medium\">\n Secondary Button\n \u003C/button>\n\u003C/ExampleBlock>\n\n### Destructive Button\n\nUse for destructive or irreversible actions.\n\n\u003CExampleBlock \n title=\"Destructive variant\"\n description=\"For dangerous actions like delete or remove\"\n code={`\u003CAzButton variant=\"destructive\">Delete\u003C/AzButton>`}\n>\n \u003Cbutton class=\"px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 transition-colors font-medium\">\n Delete\n \u003C/button>\n\u003C/ExampleBlock>\n\n### Button Sizes\n\n\u003CExampleBlock \n title=\"Size variants\"\n description=\"Available in small, medium, and large sizes\"\n code={`\u003CAzButton size=\"sm\">Small\u003C/AzButton>\n\u003CAzButton size=\"md\">Medium\u003C/AzButton>\n\u003CAzButton size=\"lg\">Large\u003C/AzButton>`}\n>\n \u003Cdiv class=\"flex items-center gap-3\">\n \u003Cbutton class=\"px-3 py-1.5 text-sm bg-primary-500 text-white rounded-md hover:bg-primary-600 transition-colors font-medium\">\n Small\n \u003C/button>\n \u003Cbutton class=\"px-4 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 transition-colors font-medium\">\n Medium\n \u003C/button>\n \u003Cbutton class=\"px-6 py-3 text-lg bg-primary-500 text-white rounded-md hover:bg-primary-600 transition-colors font-medium\">\n Large\n \u003C/button>\n \u003C/div>\n\u003C/ExampleBlock>\n\n## States\n\n\u003CStateGrid columns={4}>\n \u003Cbutton slot=\"default\" class=\"px-4 py-2 bg-primary-500 text-white rounded-md font-medium\">Button\u003C/button>\n \u003Cbutton slot=\"hover\" class=\"px-4 py-2 bg-primary-600 text-white rounded-md font-medium\">Button\u003C/button>\n \u003Cbutton slot=\"focus\" class=\"px-4 py-2 bg-primary-500 text-white rounded-md font-medium ring-2 ring-primary-300 ring-offset-2\">Button\u003C/button>\n \u003Cbutton slot=\"disabled\" class=\"px-4 py-2 bg-gray-300 text-gray-500 rounded-md font-medium cursor-not-allowed\" disabled>Button\u003C/button>\n\u003C/StateGrid>\n\n## Do's and Don'ts\n\n\u003CDoDont title=\"Usage guidelines\">\n \u003Ctemplate v-slot:do>\n \u003Cp class=\"text-sm mb-2\">Use buttons for actionable items:\u003C/p>\n \u003Cbutton class=\"px-4 py-2 bg-primary-500 text-white rounded-md text-sm\">Submit Form\u003C/button>\n \u003C/template>\n \u003Ctemplate v-slot:dont>\n \u003Cp class=\"text-sm mb-2\">Don't use buttons for navigation:\u003C/p>\n \u003Cbutton class=\"px-4 py-2 bg-primary-500 text-white rounded-md text-sm\">Go to Dashboard\u003C/button>\n \u003Cp class=\"text-xs text-red-600 mt-1\">Use a link instead\u003C/p>\n \u003C/template>\n\u003C/DoDont>\n\n\u003CDoDont>\n \u003Ctemplate v-slot:do>\n \u003Cp class=\"text-sm mb-2\">Use clear, action-oriented labels:\u003C/p>\n \u003Cbutton class=\"px-4 py-2 bg-primary-500 text-white rounded-md text-sm\">Save Changes\u003C/button>\n \u003C/template>\n \u003Ctemplate v-slot:dont>\n \u003Cp class=\"text-sm mb-2\">Don't use vague labels:\u003C/p>\n \u003Cbutton class=\"px-4 py-2 bg-primary-500 text-white rounded-md text-sm\">Click Here\u003C/button>\n \u003C/template>\n\u003C/DoDont>\n\n## Playground\n\nExplore the Button component interactively. Adjust props and see live changes.\n\nimport { Playground } from '../../components/playground';\nimport { AzButton } from '../../components/demo';\nimport { buttonProps } from '../../components/demo/props-metadata';\n\n\u003CPlayground\n client:load\n component={AzButton}\n component-name=\"AzButton\"\n props={buttonProps}\n slot-content=\"Button\"\n/>","src/content/components/button.mdx","f85f2e2f9af9688c","button.mdx","tokens",["Map",190,191],"index",{"id":190,"data":192,"body":198,"filePath":199,"digest":200,"rendered":201,"legacyId":216},{"title":193,"description":194,"navLabel":195,"order":100,"category":196,"version":22,"language":23,"type":197},"Design Tokens","Design tokens that power the visual language of the Azion Design System.","Tokens","color","token","## Overview\n\nDesign tokens are the visual design atoms of the design system. They are named entities that store visual design attributes, enabling consistency across products and platforms.\n\n## Token Categories\n\n- **Color Tokens** - Semantic and primitive color values\n- **Typography Tokens** - Font families, sizes, weights, and line heights\n- **Spacing Tokens** - Consistent spacing scale\n- **Border Tokens** - Border radius, width, and style values\n- **Shadow Tokens** - Elevation and shadow values\n- **Motion Tokens** - Animation timing and easing values\n\n\u003CCallout type=\"info\">\nToken documentation is being prepared. Check back soon for detailed token references.\n\u003C/Callout>","src/content/tokens/index.md","353109d85593a275",{"html":202,"metadata":203},"\u003Ch2 id=\"overview\">Overview\u003C/h2>\n\u003Cp>Design tokens are the visual design atoms of the design system. They are named entities that store visual design attributes, enabling consistency across products and platforms.\u003C/p>\n\u003Ch2 id=\"token-categories\">Token Categories\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Cstrong>Color Tokens\u003C/strong> - Semantic and primitive color values\u003C/li>\n\u003Cli>\u003Cstrong>Typography Tokens\u003C/strong> - Font families, sizes, weights, and line heights\u003C/li>\n\u003Cli>\u003Cstrong>Spacing Tokens\u003C/strong> - Consistent spacing scale\u003C/li>\n\u003Cli>\u003Cstrong>Border Tokens\u003C/strong> - Border radius, width, and style values\u003C/li>\n\u003Cli>\u003Cstrong>Shadow Tokens\u003C/strong> - Elevation and shadow values\u003C/li>\n\u003Cli>\u003Cstrong>Motion Tokens\u003C/strong> - Animation timing and easing values\u003C/li>\n\u003C/ul>\n\u003Ccallout type=\"info\">\nToken documentation is being prepared. Check back soon for detailed token references.\n\u003C/callout>",{"headings":204,"localImagePaths":212,"remoteImagePaths":213,"frontmatter":214,"imagePaths":215},[205,209],{"depth":206,"slug":207,"text":208},2,"overview","Overview",{"depth":206,"slug":210,"text":211},"token-categories","Token Categories",[],[],{"title":193,"description":194,"navLabel":195,"order":100,"type":197,"category":196},[],"index.md","blocks",["Map",190,219],{"id":190,"data":220,"body":226,"filePath":227,"digest":228,"rendered":229,"legacyId":216},{"title":221,"description":222,"navLabel":223,"order":100,"category":224,"version":22,"language":23,"type":225},"UI Blocks","Composable UI blocks combining multiple components for common use cases.","Blocks","layout","block","## Overview\n\nUI Blocks are pre-built combinations of components that solve common interface patterns. They provide a starting point for building pages and features.\n\n## Available Blocks\n\nBlock documentation is being prepared. Check back soon for detailed block references.\n\n\u003CCallout type=\"info\">\nThis section will include blocks like headers, forms, cards, and navigation patterns.\n\u003C/Callout>","src/content/blocks/index.md","d4a0693523f6fc4c",{"html":230,"metadata":231},"\u003Ch2 id=\"overview\">Overview\u003C/h2>\n\u003Cp>UI Blocks are pre-built combinations of components that solve common interface patterns. They provide a starting point for building pages and features.\u003C/p>\n\u003Ch2 id=\"available-blocks\">Available Blocks\u003C/h2>\n\u003Cp>Block documentation is being prepared. Check back soon for detailed block references.\u003C/p>\n\u003Ccallout type=\"info\">\nThis section will include blocks like headers, forms, cards, and navigation patterns.\n\u003C/callout>",{"headings":232,"localImagePaths":237,"remoteImagePaths":238,"frontmatter":239,"imagePaths":240},[233,234],{"depth":206,"slug":207,"text":208},{"depth":206,"slug":235,"text":236},"available-blocks","Available Blocks",[],[],{"title":221,"description":222,"navLabel":223,"order":100,"type":225,"category":224},[],"get-started",["Map",190,243,259,271],{"id":190,"data":244,"body":248,"filePath":249,"digest":250,"rendered":251,"legacyId":216},{"title":245,"description":246,"version":22,"language":23,"type":247},"Get Started","Get started with the Azion Design System","guide","## Welcome\n\nWelcome to the Azion Design System documentation. This guide will help you get started with using our components and design tokens in your projects.\n\n## Installation\n\nInstall the design system packages using your preferred package manager:\n\n```bash\nnpm install @aziontech/components @aziontech/icons @aziontech/theme\n```\n\n## Quick Start\n\n1. Import the CSS in your main entry file:\n\n```javascript\nimport '@aziontech/theme/styles.css';\n```\n\n2. Import and use components:\n\n```vue\n\u003Cscript setup>\nimport { Button, Input } from '@aziontech/components';\n\u003C/script>\n\n\u003Ctemplate>\n \u003CButton variant=\"primary\">Click me\u003C/Button>\n\u003C/template>\n```\n\n## Next Steps\n\n- Explore our [Components](/components) library\n- Learn about our [Foundations](/foundations) and design principles\n- Browse our [Icons](/icons) collection","src/content/get-started/index.md","62e783fea506da23",{"html":252,"metadata":253},"\u003Ch2 id=\"welcome\">Welcome\u003C/h2>\n\u003Cp>Welcome to the Azion Design System documentation. This guide will help you get started with using our components and design tokens in your projects.\u003C/p>\n\u003Ch2 id=\"installation\">Installation\u003C/h2>\n\u003Cp>Install the design system packages using your preferred package manager:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> install\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/components\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/icons\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/theme\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"quick-start\">Quick Start\u003C/h2>\n\u003Col>\n\u003Cli>Import the CSS in your main entry file:\u003C/li>\n\u003C/ol>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"javascript\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> '@aziontech/theme/styles.css'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Col start=\"2\">\n\u003Cli>Import and use components:\u003C/li>\n\u003C/ol>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"vue\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">script\u003C/span>\u003Cspan style=\"color:#B392F0\"> setup\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> { Button, Input } \u003C/span>\u003Cspan style=\"color:#F97583\">from\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> '@aziontech/components'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"></\u003C/span>\u003Cspan style=\"color:#85E89D\">script\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">template\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> <\u003C/span>\u003Cspan style=\"color:#85E89D\">Button\u003C/span>\u003Cspan style=\"color:#B392F0\"> variant\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"primary\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>Click me</\u003C/span>\u003Cspan style=\"color:#85E89D\">Button\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"></\u003C/span>\u003Cspan style=\"color:#85E89D\">template\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"next-steps\">Next Steps\u003C/h2>\n\u003Cul>\n\u003Cli>Explore our \u003Ca href=\"/components\">Components\u003C/a> library\u003C/li>\n\u003Cli>Learn about our \u003Ca href=\"/foundations\">Foundations\u003C/a> and design principles\u003C/li>\n\u003Cli>Browse our \u003Ca href=\"/icons\">Icons\u003C/a> collection\u003C/li>\n\u003C/ul>",{"headings":254,"localImagePaths":267,"remoteImagePaths":268,"frontmatter":269,"imagePaths":270},[255,258,261,264],{"depth":206,"slug":256,"text":257},"welcome","Welcome",{"depth":206,"slug":259,"text":260},"installation","Installation",{"depth":206,"slug":262,"text":263},"quick-start","Quick Start",{"depth":206,"slug":265,"text":266},"next-steps","Next Steps",[],[],{"title":245,"description":246,"type":247},[],{"id":259,"data":272,"body":274,"filePath":275,"digest":276,"rendered":277,"legacyId":299},{"title":260,"description":273,"navLabel":260,"order":206,"category":259,"version":22,"language":23,"type":247},"Get started with the Azion Design System by installing the required packages.","# Installation\n\nThe Azion Design System is distributed as a set of npm packages. Install only what you need for your project.\n\n## Requirements\n\n- Node.js 18.x or higher\n- Vue 3.x\n- Tailwind CSS 3.x\n\n## Package Installation\n\nInstall the core packages you need:\n\n```bash\n# Install components\nnpm install @aziontech/components\n\n# Install icons\nnpm install @aziontech/icons\n\n# Install theme (optional, for design tokens)\nnpm install @aziontech/theme\n```\n\n## Tailwind Configuration\n\nExtend your Tailwind configuration to include Azion's design tokens:\n\n```js\n// tailwind.config.js\nimport azionTheme from '@aziontech/theme';\n\nexport default {\n content: [\n './src/**/*.{vue,js,ts}',\n './node_modules/@aziontech/**/*.{vue,js,ts}',\n ],\n theme: {\n extend: azionTheme.tailwindPreset,\n },\n};\n```\n\n## Vue Configuration\n\nImport the CSS and register the components:\n\n```js\n// main.js\nimport { createApp } from 'vue';\nimport App from './App.vue';\n\n// Import Azion CSS\nimport '@aziontech/theme/css';\n\n// Import Azion components (optional)\nimport { Button, Input, Select } from '@aziontech/components';\n\nconst app = createApp(App);\n\n// Register components globally\napp.component('AzButton', Button);\napp.component('AzInput', Input);\napp.component('AzSelect', Select);\n\napp.mount('#app');\n```\n\n## Next Steps\n\n- [Quick Start](/get-started) - Build your first component\n- [Components](/components) - Explore available components\n- [Foundations](/foundations) - Learn about design principles","src/content/get-started/installation.md","7ccd4afb55dff6a3",{"html":278,"metadata":279},"\u003Ch1 id=\"installation\">Installation\u003C/h1>\n\u003Cp>The Azion Design System is distributed as a set of npm packages. Install only what you need for your project.\u003C/p>\n\u003Ch2 id=\"requirements\">Requirements\u003C/h2>\n\u003Cul>\n\u003Cli>Node.js 18.x or higher\u003C/li>\n\u003Cli>Vue 3.x\u003C/li>\n\u003Cli>Tailwind CSS 3.x\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"package-installation\">Package Installation\u003C/h2>\n\u003Cp>Install the core packages you need:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"># Install components\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> install\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/components\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"># Install icons\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> install\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/icons\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"># Install theme (optional, for design tokens)\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> install\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/theme\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"tailwind-configuration\">Tailwind Configuration\u003C/h2>\n\u003Cp>Extend your Tailwind configuration to include Azion’s design tokens:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"js\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">// tailwind.config.js\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> azionTheme \u003C/span>\u003Cspan style=\"color:#F97583\">from\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> '@aziontech/theme'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">export\u003C/span>\u003Cspan style=\"color:#F97583\"> default\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> content: [\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\"> './src/**/*.{vue,js,ts}'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\"> './node_modules/@aziontech/**/*.{vue,js,ts}'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> ],\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> theme: {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> extend: azionTheme.tailwindPreset,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> },\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">};\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"vue-configuration\">Vue Configuration\u003C/h2>\n\u003Cp>Import the CSS and register the components:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"js\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">// main.js\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> { createApp } \u003C/span>\u003Cspan style=\"color:#F97583\">from\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> 'vue'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> App \u003C/span>\u003Cspan style=\"color:#F97583\">from\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> './App.vue'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">// Import Azion CSS\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> '@aziontech/theme/css'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">// Import Azion components (optional)\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> { Button, Input, Select } \u003C/span>\u003Cspan style=\"color:#F97583\">from\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> '@aziontech/components'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">const\u003C/span>\u003Cspan style=\"color:#79B8FF\"> app\u003C/span>\u003Cspan style=\"color:#F97583\"> =\u003C/span>\u003Cspan style=\"color:#B392F0\"> createApp\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(App);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">// Register components globally\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">app.\u003C/span>\u003Cspan style=\"color:#B392F0\">component\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#9ECBFF\">'AzButton'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, Button);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">app.\u003C/span>\u003Cspan style=\"color:#B392F0\">component\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#9ECBFF\">'AzInput'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, Input);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">app.\u003C/span>\u003Cspan style=\"color:#B392F0\">component\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#9ECBFF\">'AzSelect'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, Select);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">app.\u003C/span>\u003Cspan style=\"color:#B392F0\">mount\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#9ECBFF\">'#app'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">);\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"next-steps\">Next Steps\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/get-started\">Quick Start\u003C/a> - Build your first component\u003C/li>\n\u003Cli>\u003Ca href=\"/components\">Components\u003C/a> - Explore available components\u003C/li>\n\u003Cli>\u003Ca href=\"/foundations\">Foundations\u003C/a> - Learn about design principles\u003C/li>\n\u003C/ul>",{"headings":280,"localImagePaths":295,"remoteImagePaths":296,"frontmatter":297,"imagePaths":298},[281,282,285,288,291,294],{"depth":100,"slug":259,"text":260},{"depth":206,"slug":283,"text":284},"requirements","Requirements",{"depth":206,"slug":286,"text":287},"package-installation","Package Installation",{"depth":206,"slug":289,"text":290},"tailwind-configuration","Tailwind Configuration",{"depth":206,"slug":292,"text":293},"vue-configuration","Vue Configuration",{"depth":206,"slug":265,"text":266},[],[],{"title":260,"description":273,"navLabel":260,"order":206,"type":247,"category":259},[],"installation.md","templates",["Map",190,302],{"id":190,"data":303,"body":309,"filePath":310,"digest":311,"rendered":312,"legacyId":216},{"title":304,"description":305,"navLabel":306,"order":100,"category":307,"version":22,"language":23,"type":308},"Page Templates","Page templates and layout examples for building applications with the Azion Design System.","Templates","general","template","## Overview\n\nPage templates are complete page layouts that combine blocks and components into ready-to-use starting points for common application pages.\n\n## Available Templates\n\nTemplate documentation is being prepared. Check back soon for detailed template references.\n\n\u003CCallout type=\"info\">\nThis section will include templates like dashboards, settings pages, and form layouts.\n\u003C/Callout>","src/content/templates/index.md","b2fcc45362aa9e2a",{"html":313,"metadata":314},"\u003Ch2 id=\"overview\">Overview\u003C/h2>\n\u003Cp>Page templates are complete page layouts that combine blocks and components into ready-to-use starting points for common application pages.\u003C/p>\n\u003Ch2 id=\"available-templates\">Available Templates\u003C/h2>\n\u003Cp>Template documentation is being prepared. Check back soon for detailed template references.\u003C/p>\n\u003Ccallout type=\"info\">\nThis section will include templates like dashboards, settings pages, and form layouts.\n\u003C/callout>",{"headings":315,"localImagePaths":320,"remoteImagePaths":321,"frontmatter":322,"imagePaths":323},[316,317],{"depth":206,"slug":207,"text":208},{"depth":206,"slug":318,"text":319},"available-templates","Available Templates",[],[],{"title":304,"description":305,"navLabel":306,"order":100,"type":308,"category":307},[],"foundations",["Map",190,326,196,377],{"id":190,"data":327,"body":331,"filePath":332,"digest":333,"rendered":334,"legacyId":216},{"title":328,"description":329,"navLabel":328,"order":100,"version":22,"language":23,"type":330},"Foundations","Core design principles and guidelines that shape the Azion Design System.","foundation","# Foundations\n\nFoundations are the core design principles, guidelines, and visual elements that shape the Azion Design System. They provide consistency and coherence across all components and experiences.\n\n## What's Inside\n\n### Color\nOur color system is built on semantic tokens that adapt to different contexts and themes. Learn how to use color effectively in your interfaces.\n\n### Typography\nTypography guidelines ensure readable, accessible, and consistent text across all touchpoints.\n\n### Spacing\nA consistent spacing scale creates rhythm and harmony in layouts.\n\n### Elevation\nElevation defines the visual hierarchy and depth of elements in the interface.\n\n### Motion\nMotion principles guide animations and transitions for a polished user experience.\n\n## Design Principles\n\n### 1. Clarity First\nEvery element should serve a purpose. Remove unnecessary complexity.\n\n### 2. Consistency\nUse familiar patterns and consistent behaviors across the system.\n\n### 3. Accessibility\nDesign for everyone. Meet WCAG 2.1 AA standards at minimum.\n\n### 4. Performance\nOptimize for speed and efficiency in both design and implementation.\n\n## Next Steps\n\n- [Color](/foundations/color) - Explore the color system\n- [Typography](/foundations/typography) - Learn about typography\n- [Spacing](/foundations/spacing) - Understand spacing principles","src/content/foundations/index.md","a6cfddde3ca33942",{"html":335,"metadata":336},"\u003Ch1 id=\"foundations\">Foundations\u003C/h1>\n\u003Cp>Foundations are the core design principles, guidelines, and visual elements that shape the Azion Design System. They provide consistency and coherence across all components and experiences.\u003C/p>\n\u003Ch2 id=\"whats-inside\">What’s Inside\u003C/h2>\n\u003Ch3 id=\"color\">Color\u003C/h3>\n\u003Cp>Our color system is built on semantic tokens that adapt to different contexts and themes. Learn how to use color effectively in your interfaces.\u003C/p>\n\u003Ch3 id=\"typography\">Typography\u003C/h3>\n\u003Cp>Typography guidelines ensure readable, accessible, and consistent text across all touchpoints.\u003C/p>\n\u003Ch3 id=\"spacing\">Spacing\u003C/h3>\n\u003Cp>A consistent spacing scale creates rhythm and harmony in layouts.\u003C/p>\n\u003Ch3 id=\"elevation\">Elevation\u003C/h3>\n\u003Cp>Elevation defines the visual hierarchy and depth of elements in the interface.\u003C/p>\n\u003Ch3 id=\"motion\">Motion\u003C/h3>\n\u003Cp>Motion principles guide animations and transitions for a polished user experience.\u003C/p>\n\u003Ch2 id=\"design-principles\">Design Principles\u003C/h2>\n\u003Ch3 id=\"1-clarity-first\">1. Clarity First\u003C/h3>\n\u003Cp>Every element should serve a purpose. Remove unnecessary complexity.\u003C/p>\n\u003Ch3 id=\"2-consistency\">2. Consistency\u003C/h3>\n\u003Cp>Use familiar patterns and consistent behaviors across the system.\u003C/p>\n\u003Ch3 id=\"3-accessibility\">3. Accessibility\u003C/h3>\n\u003Cp>Design for everyone. Meet WCAG 2.1 AA standards at minimum.\u003C/p>\n\u003Ch3 id=\"4-performance\">4. Performance\u003C/h3>\n\u003Cp>Optimize for speed and efficiency in both design and implementation.\u003C/p>\n\u003Ch2 id=\"next-steps\">Next Steps\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/foundations/color\">Color\u003C/a> - Explore the color system\u003C/li>\n\u003Cli>\u003Ca href=\"/foundations/typography\">Typography\u003C/a> - Learn about typography\u003C/li>\n\u003Cli>\u003Ca href=\"/foundations/spacing\">Spacing\u003C/a> - Understand spacing principles\u003C/li>\n\u003C/ul>",{"headings":337,"localImagePaths":373,"remoteImagePaths":374,"frontmatter":375,"imagePaths":376},[338,339,342,345,348,351,354,357,360,363,366,369,372],{"depth":100,"slug":324,"text":328},{"depth":206,"slug":340,"text":341},"whats-inside","What’s Inside",{"depth":343,"slug":196,"text":344},3,"Color",{"depth":343,"slug":346,"text":347},"typography","Typography",{"depth":343,"slug":349,"text":350},"spacing","Spacing",{"depth":343,"slug":352,"text":353},"elevation","Elevation",{"depth":343,"slug":355,"text":356},"motion","Motion",{"depth":206,"slug":358,"text":359},"design-principles","Design Principles",{"depth":343,"slug":361,"text":362},"1-clarity-first","1. Clarity First",{"depth":343,"slug":364,"text":365},"2-consistency","2. Consistency",{"depth":343,"slug":367,"text":368},"3-accessibility","3. Accessibility",{"depth":343,"slug":370,"text":371},"4-performance","4. Performance",{"depth":206,"slug":265,"text":266},[],[],{"title":328,"description":329,"navLabel":328,"order":100,"type":330},[],{"id":196,"data":378,"body":380,"filePath":381,"digest":382,"rendered":383,"legacyId":425},{"title":344,"description":379,"navLabel":344,"order":206,"category":196,"version":22,"language":23,"type":330},"The color system provides semantic tokens for consistent and accessible interfaces.","# Color\n\nColor is a fundamental element of visual design. The Azion Design System uses a semantic color system built on design tokens that adapt to different contexts and themes.\n\n## Color Philosophy\n\nOur color system is designed to be:\n\n- **Accessible**: All color combinations meet WCAG 2.1 AA contrast requirements\n- **Semantic**: Colors are named by purpose, not appearance\n- **Consistent**: The same tokens are used across all components\n- **Themeable**: Colors adapt automatically to light and dark modes\n\n## Primary Colors\n\nThe primary color palette represents the Azion brand:\n\n| Token | Light Mode | Dark Mode | Usage |\n|-------|------------|-----------|-------|\n| `--color-primary-50` | `#eff6ff` | `#1e3a8a` | Light backgrounds |\n| `--color-primary-100` | `#dbeafe` | `#1e40af` | Hover states |\n| `--color-primary-500` | `#3b82f6` | `#3b82f6` | Primary actions |\n| `--color-primary-700` | `#1d4ed8` | `#60a5fa` | Active states |\n| `--color-primary-900` | `#1e3a8a` | `#93c5fd` | Text on light |\n\n## Semantic Colors\n\nSemantic colors convey meaning:\n\n### Success\nUsed for positive actions and confirmations.\n\n### Warning\nUsed for cautionary messages and alerts.\n\n### Error\nUsed for error states and destructive actions.\n\n### Info\nUsed for informational messages and neutral states.\n\n## Usage Guidelines\n\n### Do\n- Use semantic tokens instead of raw color values\n- Ensure sufficient contrast for text\n- Use color consistently across similar elements\n\n### Don't\n- Don't use color alone to convey information\n- Don't create new colors outside the system\n- Don't use decorative colors that distract from content\n\n## Related\n\n- [Typography](/foundations/typography) - Typography system\n- [Tokens](/tokens) - Design token reference","src/content/foundations/color.md","47307b696fcf627b",{"html":384,"metadata":385},"\u003Ch1 id=\"color\">Color\u003C/h1>\n\u003Cp>Color is a fundamental element of visual design. The Azion Design System uses a semantic color system built on design tokens that adapt to different contexts and themes.\u003C/p>\n\u003Ch2 id=\"color-philosophy\">Color Philosophy\u003C/h2>\n\u003Cp>Our color system is designed to be:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Accessible\u003C/strong>: All color combinations meet WCAG 2.1 AA contrast requirements\u003C/li>\n\u003Cli>\u003Cstrong>Semantic\u003C/strong>: Colors are named by purpose, not appearance\u003C/li>\n\u003Cli>\u003Cstrong>Consistent\u003C/strong>: The same tokens are used across all components\u003C/li>\n\u003Cli>\u003Cstrong>Themeable\u003C/strong>: Colors adapt automatically to light and dark modes\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"primary-colors\">Primary Colors\u003C/h2>\n\u003Cp>The primary color palette represents the Azion brand:\u003C/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Token\u003C/th>\u003Cth>Light Mode\u003C/th>\u003Cth>Dark Mode\u003C/th>\u003Cth>Usage\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode>--color-primary-50\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#eff6ff\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#1e3a8a\u003C/code>\u003C/td>\u003Ctd>Light backgrounds\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>--color-primary-100\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#dbeafe\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#1e40af\u003C/code>\u003C/td>\u003Ctd>Hover states\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>--color-primary-500\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#3b82f6\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#3b82f6\u003C/code>\u003C/td>\u003Ctd>Primary actions\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>--color-primary-700\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#1d4ed8\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#60a5fa\u003C/code>\u003C/td>\u003Ctd>Active states\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>--color-primary-900\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#1e3a8a\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#93c5fd\u003C/code>\u003C/td>\u003Ctd>Text on light\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Ch2 id=\"semantic-colors\">Semantic Colors\u003C/h2>\n\u003Cp>Semantic colors convey meaning:\u003C/p>\n\u003Ch3 id=\"success\">Success\u003C/h3>\n\u003Cp>Used for positive actions and confirmations.\u003C/p>\n\u003Ch3 id=\"warning\">Warning\u003C/h3>\n\u003Cp>Used for cautionary messages and alerts.\u003C/p>\n\u003Ch3 id=\"error\">Error\u003C/h3>\n\u003Cp>Used for error states and destructive actions.\u003C/p>\n\u003Ch3 id=\"info\">Info\u003C/h3>\n\u003Cp>Used for informational messages and neutral states.\u003C/p>\n\u003Ch2 id=\"usage-guidelines\">Usage Guidelines\u003C/h2>\n\u003Ch3 id=\"do\">Do\u003C/h3>\n\u003Cul>\n\u003Cli>Use semantic tokens instead of raw color values\u003C/li>\n\u003Cli>Ensure sufficient contrast for text\u003C/li>\n\u003Cli>Use color consistently across similar elements\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"dont\">Don’t\u003C/h3>\n\u003Cul>\n\u003Cli>Don’t use color alone to convey information\u003C/li>\n\u003Cli>Don’t create new colors outside the system\u003C/li>\n\u003Cli>Don’t use decorative colors that distract from content\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"related\">Related\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/foundations/typography\">Typography\u003C/a> - Typography system\u003C/li>\n\u003Cli>\u003Ca href=\"/tokens\">Tokens\u003C/a> - Design token reference\u003C/li>\n\u003C/ul>",{"headings":386,"localImagePaths":421,"remoteImagePaths":422,"frontmatter":423,"imagePaths":424},[387,388,391,394,397,400,403,406,409,412,415,418],{"depth":100,"slug":196,"text":344},{"depth":206,"slug":389,"text":390},"color-philosophy","Color Philosophy",{"depth":206,"slug":392,"text":393},"primary-colors","Primary Colors",{"depth":206,"slug":395,"text":396},"semantic-colors","Semantic Colors",{"depth":343,"slug":398,"text":399},"success","Success",{"depth":343,"slug":401,"text":402},"warning","Warning",{"depth":343,"slug":404,"text":405},"error","Error",{"depth":343,"slug":407,"text":408},"info","Info",{"depth":206,"slug":410,"text":411},"usage-guidelines","Usage Guidelines",{"depth":343,"slug":413,"text":414},"do","Do",{"depth":343,"slug":416,"text":417},"dont","Don’t",{"depth":206,"slug":419,"text":420},"related","Related",[],[],{"title":344,"description":379,"navLabel":344,"order":206,"type":330,"category":196},[],"color.md","icons",["Map",190,428],{"id":190,"data":429,"body":432,"filePath":433,"digest":434,"rendered":435,"legacyId":216},{"title":430,"description":431,"navLabel":430,"order":100,"version":22,"language":23,"type":159},"Icons","Icon library with Azion Icons and PrimeIcons for use in your applications.","# Icons\n\nThe Azion Design System includes two icon libraries:\n\n- **Azion Icons** - Custom icons designed for Azion products\n- **PrimeIcons** - General purpose icon library from PrimeVue\n\n## Installation\n\nIcons are included in the `@aziontech/icons` package:\n\n```bash\nnpm install @aziontech/icons\n```\n\n## Usage\n\n### Font Icons\n\nUse icons as font icons with the appropriate class:\n\n```html\n\u003C!-- Azion Icon -->\n\u003Ci class=\"ai ai-azion\">\u003C/i>\n\n\u003C!-- PrimeIcon -->\n\u003Ci class=\"pi pi-home\">\u003C/i>\n```\n\n### SVG Icons\n\nImport SVG icons directly for more control:\n\n```js\nimport { aiAzion, piHome } from '@aziontech/icons/svg';\n```\n\n## Icon Categories\n\n### Azion Icons\n\nAzion Icons are organized into categories:\n\n- **Product Icons** - Azion product and service icons\n- **Action Icons** - Common action icons\n- **Status Icons** - Status and notification icons\n\n### PrimeIcons\n\nPrimeIcons provide a comprehensive set of general-purpose icons suitable for most UI needs.\n\n## Sizing\n\nIcons inherit their size from the font size of their container:\n\n```html\n\u003C!-- Small -->\n\u003Ci class=\"ai ai-azion text-sm\">\u003C/i>\n\n\u003C!-- Medium (default) -->\n\u003Ci class=\"ai ai-azion text-base\">\u003C/i>\n\n\u003C!-- Large -->\n\u003Ci class=\"ai ai-azion text-2xl\">\u003C/i>\n```\n\n## Accessibility\n\nWhen using icons alone, provide accessible labels:\n\n```html\n\u003C!-- Icon button with label -->\n\u003Cbutton aria-label=\"Settings\">\n \u003Ci class=\"pi pi-cog\">\u003C/i>\n\u003C/button>\n\n\u003C!-- Decorative icon (hidden from screen readers) -->\n\u003Ci class=\"pi pi-star\" aria-hidden=\"true\">\u003C/i>\n```\n\n## Related\n\n- [Button](/components/button) - Button component with icon support","src/content/icons/index.md","aea3324aedf050df",{"html":436,"metadata":437},"\u003Ch1 id=\"icons\">Icons\u003C/h1>\n\u003Cp>The Azion Design System includes two icon libraries:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Azion Icons\u003C/strong> - Custom icons designed for Azion products\u003C/li>\n\u003Cli>\u003Cstrong>PrimeIcons\u003C/strong> - General purpose icon library from PrimeVue\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"installation\">Installation\u003C/h2>\n\u003Cp>Icons are included in the \u003Ccode>@aziontech/icons\u003C/code> package:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> install\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/icons\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"usage\">Usage\u003C/h2>\n\u003Ch3 id=\"font-icons\">Font Icons\u003C/h3>\n\u003Cp>Use icons as font icons with the appropriate class:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"html\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"><!-- Azion Icon -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"ai ai-azion\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">></\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"><!-- PrimeIcon -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"pi pi-home\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">></\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch3 id=\"svg-icons\">SVG Icons\u003C/h3>\n\u003Cp>Import SVG icons directly for more control:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"js\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> { aiAzion, piHome } \u003C/span>\u003Cspan style=\"color:#F97583\">from\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> '@aziontech/icons/svg'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"icon-categories\">Icon Categories\u003C/h2>\n\u003Ch3 id=\"azion-icons\">Azion Icons\u003C/h3>\n\u003Cp>Azion Icons are organized into categories:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Product Icons\u003C/strong> - Azion product and service icons\u003C/li>\n\u003Cli>\u003Cstrong>Action Icons\u003C/strong> - Common action icons\u003C/li>\n\u003Cli>\u003Cstrong>Status Icons\u003C/strong> - Status and notification icons\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"primeicons\">PrimeIcons\u003C/h3>\n\u003Cp>PrimeIcons provide a comprehensive set of general-purpose icons suitable for most UI needs.\u003C/p>\n\u003Ch2 id=\"sizing\">Sizing\u003C/h2>\n\u003Cp>Icons inherit their size from the font size of their container:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"html\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"><!-- Small -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"ai ai-azion text-sm\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">></\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"><!-- Medium (default) -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"ai ai-azion text-base\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">></\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"><!-- Large -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"ai ai-azion text-2xl\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">></\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"accessibility\">Accessibility\u003C/h2>\n\u003Cp>When using icons alone, provide accessible labels:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"html\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"><!-- Icon button with label -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">button\u003C/span>\u003Cspan style=\"color:#B392F0\"> aria-label\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"Settings\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> <\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"pi pi-cog\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">></\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"></\u003C/span>\u003Cspan style=\"color:#85E89D\">button\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"><!-- Decorative icon (hidden from screen readers) -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"pi pi-star\"\u003C/span>\u003Cspan style=\"color:#B392F0\"> aria-hidden\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"true\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">></\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"related\">Related\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/components/button\">Button\u003C/a> - Button component with icon support\u003C/li>\n\u003C/ul>",{"headings":438,"localImagePaths":465,"remoteImagePaths":466,"frontmatter":467,"imagePaths":468},[439,440,441,444,447,450,453,456,459,462,464],{"depth":100,"slug":426,"text":430},{"depth":206,"slug":259,"text":260},{"depth":206,"slug":442,"text":443},"usage","Usage",{"depth":343,"slug":445,"text":446},"font-icons","Font Icons",{"depth":343,"slug":448,"text":449},"svg-icons","SVG Icons",{"depth":206,"slug":451,"text":452},"icon-categories","Icon Categories",{"depth":343,"slug":454,"text":455},"azion-icons","Azion Icons",{"depth":343,"slug":457,"text":458},"primeicons","PrimeIcons",{"depth":206,"slug":460,"text":461},"sizing","Sizing",{"depth":206,"slug":21,"text":463},"Accessibility",{"depth":206,"slug":419,"text":420},[],[],{"title":430,"description":431,"navLabel":430,"order":100,"type":159},[],"contributing",["Map",190,471],{"id":190,"data":472,"body":475,"filePath":476,"digest":477,"rendered":478,"legacyId":216},{"title":473,"description":474,"navLabel":473,"order":100,"version":22,"language":23,"type":469},"Contributing","Guidelines for contributing to the Azion Design System.","# Contributing\n\nThank you for your interest in contributing to the Azion Design System! This guide will help you understand how to contribute effectively.\n\n## Ways to Contribute\n\n### Report Issues\nFound a bug or have a suggestion? Open an issue on our GitHub repository.\n\n### Submit Pull Requests\nFix a bug or add a feature by submitting a pull request.\n\n### Improve Documentation\nHelp us improve our documentation by fixing typos, adding examples, or clarifying explanations.\n\n## Development Setup\n\n1. Fork and clone the repository\n2. Install dependencies: `pnpm install`\n3. Start the development server: `pnpm docs:dev`\n\n## Coding Standards\n\n### Code Style\n- Follow the existing code style\n- Use TypeScript for all new code\n- Write meaningful commit messages\n\n### Component Development\n- Follow the component API conventions\n- Include accessibility features\n- Write unit tests for new components\n\n### Documentation\n- Write clear, concise documentation\n- Include code examples\n- Update the changelog\n\n## Pull Request Process\n\n1. Create a feature branch from `main`\n2. Make your changes\n3. Run tests: `pnpm test`\n4. Submit a pull request with a clear description\n\n## Code of Conduct\n\nPlease read and follow our [Code of Conduct](https://github.com/aziontech/webkit/blob/main/CODE_OF_CONDUCT.md).\n\n## Need Help?\n\n- Open a discussion on GitHub\n- Join our community chat\n- Email us at design-system@azion.com\n\n## Related\n\n- [Installation](/get-started/installation) - Get started with the design system","src/content/contributing/index.md","2489a445c8aac7c2",{"html":479,"metadata":480},"\u003Ch1 id=\"contributing\">Contributing\u003C/h1>\n\u003Cp>Thank you for your interest in contributing to the Azion Design System! This guide will help you understand how to contribute effectively.\u003C/p>\n\u003Ch2 id=\"ways-to-contribute\">Ways to Contribute\u003C/h2>\n\u003Ch3 id=\"report-issues\">Report Issues\u003C/h3>\n\u003Cp>Found a bug or have a suggestion? Open an issue on our GitHub repository.\u003C/p>\n\u003Ch3 id=\"submit-pull-requests\">Submit Pull Requests\u003C/h3>\n\u003Cp>Fix a bug or add a feature by submitting a pull request.\u003C/p>\n\u003Ch3 id=\"improve-documentation\">Improve Documentation\u003C/h3>\n\u003Cp>Help us improve our documentation by fixing typos, adding examples, or clarifying explanations.\u003C/p>\n\u003Ch2 id=\"development-setup\">Development Setup\u003C/h2>\n\u003Col>\n\u003Cli>Fork and clone the repository\u003C/li>\n\u003Cli>Install dependencies: \u003Ccode>pnpm install\u003C/code>\u003C/li>\n\u003Cli>Start the development server: \u003Ccode>pnpm docs:dev\u003C/code>\u003C/li>\n\u003C/ol>\n\u003Ch2 id=\"coding-standards\">Coding Standards\u003C/h2>\n\u003Ch3 id=\"code-style\">Code Style\u003C/h3>\n\u003Cul>\n\u003Cli>Follow the existing code style\u003C/li>\n\u003Cli>Use TypeScript for all new code\u003C/li>\n\u003Cli>Write meaningful commit messages\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"component-development\">Component Development\u003C/h3>\n\u003Cul>\n\u003Cli>Follow the component API conventions\u003C/li>\n\u003Cli>Include accessibility features\u003C/li>\n\u003Cli>Write unit tests for new components\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"documentation\">Documentation\u003C/h3>\n\u003Cul>\n\u003Cli>Write clear, concise documentation\u003C/li>\n\u003Cli>Include code examples\u003C/li>\n\u003Cli>Update the changelog\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"pull-request-process\">Pull Request Process\u003C/h2>\n\u003Col>\n\u003Cli>Create a feature branch from \u003Ccode>main\u003C/code>\u003C/li>\n\u003Cli>Make your changes\u003C/li>\n\u003Cli>Run tests: \u003Ccode>pnpm test\u003C/code>\u003C/li>\n\u003Cli>Submit a pull request with a clear description\u003C/li>\n\u003C/ol>\n\u003Ch2 id=\"code-of-conduct\">Code of Conduct\u003C/h2>\n\u003Cp>Please read and follow our \u003Ca href=\"https://github.com/aziontech/webkit/blob/main/CODE_OF_CONDUCT.md\">Code of Conduct\u003C/a>.\u003C/p>\n\u003Ch2 id=\"need-help\">Need Help?\u003C/h2>\n\u003Cul>\n\u003Cli>Open a discussion on GitHub\u003C/li>\n\u003Cli>Join our community chat\u003C/li>\n\u003Cli>Email us at \u003Ca href=\"mailto:design-system@azion.com\">design-system@azion.com\u003C/a>\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"related\">Related\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/get-started/installation\">Installation\u003C/a> - Get started with the design system\u003C/li>\n\u003C/ul>",{"headings":481,"localImagePaths":520,"remoteImagePaths":521,"frontmatter":522,"imagePaths":523},[482,483,486,489,492,495,498,501,504,507,510,513,516,519],{"depth":100,"slug":469,"text":473},{"depth":206,"slug":484,"text":485},"ways-to-contribute","Ways to Contribute",{"depth":343,"slug":487,"text":488},"report-issues","Report Issues",{"depth":343,"slug":490,"text":491},"submit-pull-requests","Submit Pull Requests",{"depth":343,"slug":493,"text":494},"improve-documentation","Improve Documentation",{"depth":206,"slug":496,"text":497},"development-setup","Development Setup",{"depth":206,"slug":499,"text":500},"coding-standards","Coding Standards",{"depth":343,"slug":502,"text":503},"code-style","Code Style",{"depth":343,"slug":505,"text":506},"component-development","Component Development",{"depth":343,"slug":508,"text":509},"documentation","Documentation",{"depth":206,"slug":511,"text":512},"pull-request-process","Pull Request Process",{"depth":206,"slug":514,"text":515},"code-of-conduct","Code of Conduct",{"depth":206,"slug":517,"text":518},"need-help","Need Help?",{"depth":206,"slug":419,"text":420},[],[],{"title":473,"description":474,"navLabel":473,"order":100,"type":469},[],"patterns",["Map",190,526],{"id":190,"data":527,"body":532,"filePath":533,"digest":534,"rendered":535,"legacyId":216},{"title":528,"description":529,"navLabel":530,"order":100,"category":307,"version":22,"language":23,"type":531},"Design Patterns","Common design patterns and best practices for building with the Azion Design System.","Patterns","pattern","## Overview\n\nDesign patterns are reusable solutions to common problems in interface design. They provide proven approaches to typical UX challenges.\n\n## Available Patterns\n\nPattern documentation is being prepared. Check back soon for detailed pattern references.\n\n\u003CCallout type=\"info\">\nThis section will include patterns like form validation, search experiences, and navigation structures.\n\u003C/Callout>","src/content/patterns/index.md","17703faaf9525277",{"html":536,"metadata":537},"\u003Ch2 id=\"overview\">Overview\u003C/h2>\n\u003Cp>Design patterns are reusable solutions to common problems in interface design. They provide proven approaches to typical UX challenges.\u003C/p>\n\u003Ch2 id=\"available-patterns\">Available Patterns\u003C/h2>\n\u003Cp>Pattern documentation is being prepared. Check back soon for detailed pattern references.\u003C/p>\n\u003Ccallout type=\"info\">\nThis section will include patterns like form validation, search experiences, and navigation structures.\n\u003C/callout>",{"headings":538,"localImagePaths":543,"remoteImagePaths":544,"frontmatter":545,"imagePaths":546},[539,540],{"depth":206,"slug":207,"text":208},{"depth":206,"slug":541,"text":542},"available-patterns","Available Patterns",[],[],{"title":528,"description":529,"navLabel":530,"order":100,"type":531,"category":307},[],"playground",["Map",190,549],{"id":190,"data":550,"body":554,"filePath":555,"digest":556,"rendered":557,"legacyId":216},{"title":551,"description":552,"navLabel":553,"order":100,"version":22,"language":23,"type":547},"Component Playground","Interactive component playground for experimenting with Azion Design System components.","Playground","## Overview\n\nThe Component Playground provides an interactive environment for experimenting with Azion Design System components. You can modify props in real-time and see how components behave.\n\n## Coming Soon\n\nThe playground is currently under development. Check back soon for an interactive component testing experience.\n\n\u003CCallout type=\"info\">\nThe playground will allow you to:\n- Select any component from the library\n- Modify props and see live updates\n- Copy generated code snippets\n- Test different states and variants\n\u003C/Callout>","src/content/playground/index.md","2f669a1cc93c4d61",{"html":558,"metadata":559},"\u003Ch2 id=\"overview\">Overview\u003C/h2>\n\u003Cp>The Component Playground provides an interactive environment for experimenting with Azion Design System components. You can modify props in real-time and see how components behave.\u003C/p>\n\u003Ch2 id=\"coming-soon\">Coming Soon\u003C/h2>\n\u003Cp>The playground is currently under development. Check back soon for an interactive component testing experience.\u003C/p>\n\u003Ccallout type=\"info\">\nThe playground will allow you to:\n- Select any component from the library\n- Modify props and see live updates\n- Copy generated code snippets\n- Test different states and variants\n\u003C/callout>",{"headings":560,"localImagePaths":565,"remoteImagePaths":566,"frontmatter":567,"imagePaths":568},[561,562],{"depth":206,"slug":207,"text":208},{"depth":206,"slug":563,"text":564},"coming-soon","Coming Soon",[],[],{"title":551,"description":552,"navLabel":553,"order":100,"type":547},[]] \ No newline at end of file diff --git a/apps/ds-docs/astro.config.mjs b/apps/ds-docs/astro.config.mjs index b9771403..e8b648dd 100644 --- a/apps/ds-docs/astro.config.mjs +++ b/apps/ds-docs/astro.config.mjs @@ -1,6 +1,8 @@ import { defineConfig } from 'astro/config'; import vue from '@astrojs/vue'; import tailwind from '@astrojs/tailwind'; +import mdx from '@astrojs/mdx'; +import { searchIndexIntegration } from './src/integrations/search-index'; // https://astro.build/config export default defineConfig({ @@ -9,6 +11,8 @@ export default defineConfig({ tailwind({ applyBaseStyles: false, }), + mdx(), + searchIndexIntegration(), ], // Site configuration diff --git a/apps/ds-docs/docs/i18n-versioning-architecture.md b/apps/ds-docs/docs/i18n-versioning-architecture.md new file mode 100644 index 00000000..124868a8 --- /dev/null +++ b/apps/ds-docs/docs/i18n-versioning-architecture.md @@ -0,0 +1,463 @@ +# Internationalization (i18n) and Documentation Versioning Architecture + +> This document describes the architecture for supporting multiple languages and versions in the Azion Design System Documentation Platform. + +--- + +## Overview + +The documentation platform supports: + +- **Multiple languages**: English (default), Portuguese (future) +- **Multiple versions**: v1 (current), future versions like v2 +- **Stable URLs**: URLs remain consistent across versions and languages +- **Graceful fallbacks**: Missing translations fall back to English + +--- + +## 1. URL Structure + +### URL Patterns + +The documentation uses a stable URL structure: + +``` +/docs/{version}/{language}/{section}/{page} +``` + +#### Examples + +| URL | Version | Language | Section | Page | +|-----|---------|----------|---------|------| +| `/components/button` | v1 (current) | en (default) | components | button | +| `/foundations/color` | v1 (current) | en (default) | foundations | color | +| `/pt/components/button` | v1 (current) | pt | components | button | +| `/v1/en/components/button` | v1 | en | components | button | +| `/v1/pt/components/button` | v1 | pt | components | button | +| `/v2/components/button` | v2 | en (default) | components | button | + +### Short URLs + +For the **default language (English)** and **current version**, URLs are shortened: + +``` +/components/button → v1, en, components, button +/foundations/color → v1, en, foundations, color +``` + +### Full URLs + +For **non-default languages** or **older versions**, full URLs are used: + +``` +/pt/components/button → v1, pt, components, button +/v1/pt/components/button → v1, pt, components, button +``` + +--- + +## 2. Configuration Files + +### Version Configuration + +**File**: [`src/config/docs-versions.ts`](../src/config/docs-versions.ts) + +```typescript +export const DOCS_VERSIONS: DocsVersionConfig = { + current: 'v1', + versions: ['v1'], + labels: { + v1: 'Latest', + }, +}; +``` + +#### Helper Functions + +| Function | Description | +|----------|-------------| +| `getCurrentVersion()` | Returns the current version identifier | +| `isValidVersion(version)` | Checks if a version is valid | +| `isCurrentVersion(version)` | Checks if a version is the current one | +| `getAllVersions()` | Returns all available versions | +| `getVersionLabel(version)` | Returns the display label for a version | + +### Language Configuration + +**File**: [`src/config/docs-languages.ts`](../src/config/docs-languages.ts) + +```typescript +export const DOCS_LANGUAGES: DocsLanguageConfig = { + default: 'en', + supported: ['en', 'pt'], + labels: { + en: 'English', + pt: 'Português', + }, +}; +``` + +#### Helper Functions + +| Function | Description | +|----------|-------------| +| `getDefaultLanguage()` | Returns the default language code | +| `isSupportedLanguage(lang)` | Checks if a language is supported | +| `isDefaultLanguage(lang)` | Checks if a language is the default | +| `getAllLanguages()` | Returns all supported languages | +| `getLanguageLabel(lang)` | Returns the native name for a language | + +--- + +## 3. Content Directory Structure + +### Current Structure (Flat) + +``` +src/content/ +├── components/ +│ ├── button.mdx +│ └── fieldset.mdx +├── foundations/ +│ └── color.md +└── ... +``` + +### Future Structure (Versioned & Localized) + +``` +src/content/docs/ +├── v1/ +│ ├── en/ +│ │ ├── get-started/ +│ │ ├── foundations/ +│ │ ├── tokens/ +│ │ ├── components/ +│ │ ├── patterns/ +│ │ ├── templates/ +│ │ └── icons/ +│ └── pt/ +│ ├── get-started/ +│ ├── foundations/ +│ ├── components/ +│ └── ... +└── v2/ + ├── en/ + └── pt/ +``` + +### Migration Strategy + +1. **Phase 1**: Keep flat structure, add version/language to frontmatter +2. **Phase 2**: Restructure content into version/language folders +3. **Phase 3**: Update content collections to use new structure + +--- + +## 4. Content Collection Schema + +### Updated Frontmatter + +```yaml +--- +title: Button +description: Trigger actions across the interface +version: v1 +language: en +section: components +status: stable +tags: + - action + - form +translatedFrom: en # For translations +translationStatus: complete # complete | partial | missing +--- +``` + +### Schema Definition + +**File**: [`src/content/config.ts`](../src/content/config.ts) + +```typescript +const baseSchema = z.object({ + // ... existing fields + version: z.string().default('v1'), + language: z.string().default('en'), + translatedFrom: z.string().optional(), + translationStatus: z.enum(['complete', 'partial', 'missing']).optional(), +}); +``` + +--- + +## 5. Content Resolution + +### Resolution Logic + +**File**: [`src/lib/docs/resolveDoc.ts`](../src/lib/docs/resolveDoc.ts) + +```typescript +const result = await resolveDoc({ + version: 'v1', + language: 'pt', + section: 'components', + slug: 'button' +}); +``` + +### Fallback Behavior + +When a translation doesn't exist, the system falls back to English: + +``` +User visits: /pt/components/button +If Portuguese page exists → Serve Portuguese content +If not → Serve English content with isFallback: true +``` + +### Resolution Result + +```typescript +interface ResolvedDoc { + version: string; + language: string; + section: Section; + slug: string; + url: string; + canonicalUrl: string; + isIndex: boolean; + isFallback: boolean; // True if fell back to English + requestedLanguage?: string; // Original requested language + entry: unknown; + frontmatter: Record; +} +``` + +--- + +## 6. Switcher Components + +### Version Switcher + +**File**: [`src/components/docs/VersionSwitcher.vue`](../src/components/docs/VersionSwitcher.vue) + +- Shows available versions +- Highlights current version +- Maintains same page when switching (if exists) +- Falls back to section index if page doesn't exist in target version + +### Language Switcher + +**File**: [`src/components/docs/LanguageSwitcher.vue`](../src/components/docs/LanguageSwitcher.vue) + +- Shows available languages +- Maintains same page when switching +- Falls back to English if translation missing + +### Version Banner + +**File**: [`src/components/docs/DocsVersionBanner.vue`](../src/components/docs/DocsVersionBanner.vue) + +- Shows when viewing an older version +- Provides link to latest version +- Dismissible by user + +--- + +## 7. Search Engine Integration + +### Updated Search Index + +```typescript +interface SearchIndexEntry { + id: string; // Format: "{version}-{language}-{section}-{slug}" + version: string; + language: string; + // ... other fields +} +``` + +### Search Filtering + +Search results are filtered by: + +- Current language +- Current version + +```typescript +const results = searchEngine.search('button', { + language: 'en', + version: 'v1' +}); +``` + +--- + +## 8. Canonical URLs & SEO + +### Canonical URL Logic + +**File**: [`src/lib/docs/canonical.ts`](../src/lib/docs/canonical.ts) + +Canonical URLs always point to: + +- Current version +- Same language (or default if English) + +```typescript +// English page +getCanonicalUrl({ + version: 'v1', + language: 'en', + section: 'components', + slug: 'button' +}); +// → https://docs.azion.com/components/button + +// Portuguese page +getCanonicalUrl({ + version: 'v1', + language: 'pt', + section: 'components', + slug: 'button' +}); +// → https://docs.azion.com/pt/components/button +``` + +### hreflang Tags + +```html + + + +``` + +--- + +## 9. Routing Architecture + +### Current Routes + +``` +/pages/ +├── components/[slug].astro +├── foundations/[slug].astro +├── tokens/[slug].astro +└── ... +``` + +### Future Unified Route + +``` +/pages/ +└── docs/[...path].astro +``` + +This catch-all route handles: + +1. Parse URL to extract version, language, section, slug +2. Resolve content using `resolveDoc()` +3. Handle fallbacks +4. Render with SEO metadata + +--- + +## 10. Adding a New Version + +### Step 1: Update Configuration + +```typescript +// src/config/docs-versions.ts +export const DOCS_VERSIONS = { + current: 'v2', + versions: ['v2', 'v1'], + labels: { + v2: 'Latest', + v1: 'Legacy', + }, +}; +``` + +### Step 2: Create Content Directory + +```bash +mkdir -p src/content/docs/v2/en +mkdir -p src/content/docs/v2/pt +``` + +### Step 3: Copy and Evolve Content + +```bash +cp -r src/content/docs/v1/en/* src/content/docs/v2/en/ +``` + +### Step 4: Update Frontmatter + +Update version field in all v2 content files. + +--- + +## 11. Adding a New Language + +### Step 1: Update Configuration + +```typescript +// src/config/docs-languages.ts +export const DOCS_LANGUAGES = { + default: 'en', + supported: ['en', 'pt', 'es'], + labels: { + en: 'English', + pt: 'Português', + es: 'Español', + }, +}; +``` + +### Step 2: Create Content Directory + +```bash +mkdir -p src/content/docs/v1/es +``` + +### Step 3: Translate Content + +Copy English content and translate. + +--- + +## 12. Engineering Principles + +1. **URLs must remain stable**: Once published, URLs should not change +2. **Default language has shortest URLs**: English uses `/section/page` format +3. **Translations gracefully fallback**: Missing translations show English content +4. **Versioning doesn't break navigation**: Switching versions maintains context +5. **Content is easy to maintain**: Clear structure for writers +6. **No unnecessary runtime complexity**: Most logic is build-time + +--- + +## 13. File Reference + +| File | Purpose | +|------|---------| +| [`src/config/docs-versions.ts`](../src/config/docs-versions.ts) | Version configuration | +| [`src/config/docs-languages.ts`](../src/config/docs-languages.ts) | Language configuration | +| [`src/lib/docs/resolveDoc.ts`](../src/lib/docs/resolveDoc.ts) | Content resolution | +| [`src/lib/docs/canonical.ts`](../src/lib/docs/canonical.ts) | SEO utilities | +| [`src/components/docs/VersionSwitcher.vue`](../src/components/docs/VersionSwitcher.vue) | Version switcher UI | +| [`src/components/docs/LanguageSwitcher.vue`](../src/components/docs/LanguageSwitcher.vue) | Language switcher UI | +| [`src/components/docs/DocsVersionBanner.vue`](../src/components/docs/DocsVersionBanner.vue) | Version banner | +| [`src/content/config.ts`](../src/content/config.ts) | Content schema | +| [`src/lib/search/types.ts`](../src/lib/search/types.ts) | Search types | +| [`src/lib/search/searchEngine.ts`](../src/lib/search/searchEngine.ts) | Search engine | + +--- + +## 14. Future Considerations + +- **Content Translation Workflow**: Integration with translation management systems +- **Automated Translation Status**: Track translation completeness +- **Version Diff**: Show differences between versions +- **Migration Guides**: Auto-generate migration guides between versions +- **Language-specific Search**: Separate search indices per language diff --git a/apps/ds-docs/docs/search-architecture.md b/apps/ds-docs/docs/search-architecture.md new file mode 100644 index 00000000..447f8e35 --- /dev/null +++ b/apps/ds-docs/docs/search-architecture.md @@ -0,0 +1,329 @@ +# Documentation Search Engine Architecture + +This document describes the architecture of the custom documentation search engine implemented for the Azion Design System documentation platform. + +## Overview + +The search engine is a **fully client-side** solution that provides fast, relevant search results without relying on external services. It's designed to scale with the design system and support future multilingual and versioned documentation. + +## Architecture Principles + +1. **No External Dependencies**: No Algolia, Meilisearch, or other third-party search services +2. **Build-Time Indexing**: Search index is generated during the Astro build process +3. **Client-Side Execution**: All search operations happen in the browser +4. **Metadata-Aware Ranking**: Uses component metadata for intelligent result ranking +5. **Extensible Design**: Prepared for future multilingual and versioned content + +## System Components + +``` +┌─────────────────────────────────────────────────────────────────┐ +│ Build-Time Pipeline │ +├─────────────────────────────────────────────────────────────────┤ +│ │ +│ Content Collections ──► Content Extractor ──► Search Index │ +│ (Markdown files) (Headings, text) (JSON) │ +│ │ +└─────────────────────────────────────────────────────────────────┘ + │ + ▼ +┌─────────────────────────────────────────────────────────────────┐ +│ Client-Side Runtime │ +├─────────────────────────────────────────────────────────────────┤ +│ │ +│ Search Engine ──► Ranking Engine ──► Highlighter │ +│ │ │ │ │ +│ ▼ ▼ ▼ │ +│ SearchModal ◄── SearchResults ◄── Formatted Results │ +│ │ +└─────────────────────────────────────────────────────────────────┘ +``` + +## Directory Structure + +``` +apps/ds-docs/ +├── src/ +│ ├── lib/ +│ │ └── search/ +│ │ ├── index.ts # Public API +│ │ ├── types.ts # TypeScript types +│ │ ├── searchEngine.ts # Main search engine +│ │ ├── tokenizer.ts # Text processing +│ │ ├── ranking.ts # Scoring algorithm +│ │ ├── highlight.ts # Result highlighting +│ │ └── content-extractor.ts # Markdown extraction +│ │ +│ ├── components/ +│ │ └── search/ +│ │ ├── index.ts # Component exports +│ │ └── SearchModal.vue # Search UI +│ │ +│ └── integrations/ +│ └── search-index.ts # Astro integration +│ +├── public/ +│ └── search-index.json # Generated search index +│ +└── scripts/ + └── build-search-index.ts # Standalone build script +``` + +## Data Model + +### Search Index Entry + +```typescript +interface SearchIndexEntry { + id: string; // Unique identifier: "collection/slug" + title: string; // Document title + section: string; // Collection name + type: SearchContentType; // component | token | foundation | pattern | etc. + category?: string; // Category within type + description: string; // Brief description + headings: string[]; // Extracted headings + tags: string[]; // Tags for filtering + content: string; // Normalized searchable text + url: string; // URL path + status?: string; // Component status + related?: string[]; // Related entry IDs + version?: string; // For future versioned docs + lang?: string; // For future i18n +} +``` + +### Search Index + +```typescript +interface SearchIndex { + meta: { + generated: string; // Build timestamp + count: number; // Total entries + lang: string; // Language code + version?: string; // Documentation version + schemaVersion: number; // For future migrations + }; + entries: SearchIndexEntry[]; +} +``` + +## Build-Time Indexing + +### Content Extraction + +The indexing pipeline extracts searchable content from markdown files: + +1. **Frontmatter Parsing**: Extracts metadata (title, description, tags, status) +2. **Heading Extraction**: Captures all heading text for navigation +3. **Text Extraction**: Removes code blocks, HTML, and markdown syntax +4. **Normalization**: Lowercases, removes stop words, normalizes whitespace + +### Astro Integration + +The search index is generated during the Astro build via a custom integration: + +```typescript +// src/integrations/search-index.ts +export function searchIndexIntegration(): AstroIntegration { + return { + name: 'search-index', + hooks: { + 'astro:build:done': ({ dir }) => { + // Process content collections + // Generate search-index.json + }, + }, + }; +} +``` + +## Search Engine Core + +### Tokenization + +The tokenizer processes search queries and content: + +- **Normalization**: Converts to lowercase, removes punctuation +- **Stop Word Removal**: Filters common words (the, a, is, etc.) +- **Fuzzy Matching**: Supports typo tolerance via Levenshtein distance + +### Ranking Algorithm + +Results are scored using a weighted system optimized for design system documentation: + +| Match Type | Weight | Description | +|------------|--------|-------------| +| Exact Title | 150 | Query exactly matches title | +| Title Start | 150 | Title starts with query | +| Title Contains | 100 | Title contains query | +| Tag Match | 80 | Query matches a tag | +| Heading Match | 50 | Query appears in heading | +| Description Match | 30 | Query in description | +| Content Match | 10 | Query in content (capped) | + +### Boosts + +Additional multipliers applied to scores: + +- **Component Boost (1.2x)**: Results from components section +- **Stable Boost (1.1x)**: Components with stable status +- **Deprecated Penalty (0.5x)**: Deprecated components ranked lower + +### Result Highlighting + +Matched terms are highlighted in results: + +```html +button +``` + +## Search UI + +### SearchModal Component + +The search interface provides: + +- **Keyboard Navigation**: Arrow keys, Enter, Escape +- **Real-time Results**: Debounced search as you type +- **Category Grouping**: Results grouped by content type +- **Status Badges**: Visual indicators for component status +- **Keyboard Shortcut**: CMD/CTRL+K to open + +### User Interactions + +| Action | Behavior | +|--------|----------| +| Click search button | Opens modal | +| Press CMD+K | Toggles modal | +| Type query | Searches with 150ms debounce | +| Press Arrow keys | Navigates results | +| Press Enter | Navigates to selected result | +| Press Escape | Closes modal | +| Click backdrop | Closes modal | + +## Multilingual Support (Future) + +The architecture is prepared for multilingual support: + +### Index Structure + +``` +public/ +├── search-index.en.json +├── search-index.pt.json +└── search-index.es.json +``` + +### Engine API + +```typescript +// Future API +const engine = await initSearchEngine({ lang: 'pt' }); +``` + +## Versioned Documentation (Future) + +The index schema includes version support: + +```typescript +interface SearchIndexEntry { + // ... + version?: string; // e.g., "v1", "v2" +} + +// Future API +const engine = await initSearchEngine({ version: 'v2' }); +``` + +## Performance Considerations + +### Index Size + +- Target: < 100KB for 500 documents +- Achieved through text truncation and normalization +- No code blocks in index (only titles) + +### Search Speed + +- Target: < 50ms for typical queries +- Achieved through: + - In-memory index + - Simple string matching + - No external network requests + +### Optimization Techniques + +1. **Content Truncation**: Limit indexed text to 2000 characters +2. **Debounced Input**: 150ms delay before searching +3. **Result Limiting**: Maximum 30 results per query +4. **Lazy Loading**: Index loaded only when search is opened + +## Extensibility + +### Adding New Content Types + +1. Add type to `SearchContentType` in [`types.ts`](src/lib/search/types.ts) +2. Add label to `TYPE_LABELS` +3. Content will be automatically indexed + +### Custom Ranking + +Override default weights: + +```typescript +const results = engine.search(query, { + weights: { + title: 200, + tag: 100, + // ... + } +}); +``` + +### Custom Filters + +Filter by type, section, or tags: + +```typescript +const results = engine.search(query, { + type: 'component', + section: 'components', + tags: ['form'], +}); +``` + +## Testing + +### Example Queries + +| Query | Expected Top Result | +|-------|---------------------| +| `button` | Button component | +| `fieldset` | Fieldset component | +| `color` | Color foundation | +| `spacing` | Tokens page | +| `icon` | Icons page | +| `accessibility` | Components with accessibility sections | +| `install` | Installation guide | + +## Maintenance + +### Updating the Index + +The index is automatically regenerated on each build: + +```bash +pnpm build +``` + +### Manual Index Generation + +For development, a pre-built index is provided: + +``` +public/search-index.json +``` + +## Conclusion + +This search engine provides a fast, relevant, and maintainable search experience for the Azion Design System documentation. It's designed to grow with the design system while remaining simple and dependency-free. diff --git a/apps/ds-docs/package.json b/apps/ds-docs/package.json index 4e1163cd..8342d5ab 100644 --- a/apps/ds-docs/package.json +++ b/apps/ds-docs/package.json @@ -7,11 +7,13 @@ "scripts": { "dev": "astro dev", "start": "astro dev", - "build": "astro build", + "build": "pnpm build:search && astro build", + "build:search": "node --loader ts-node/esm scripts/build-search-index.ts", "preview": "astro preview", "astro": "astro" }, "dependencies": { + "@astrojs/mdx": "^4.3.13", "@aziontech/icons": "workspace:*", "astro": "^5.4.0", "vue": "^3.5.29" diff --git a/apps/ds-docs/public/search-index.json b/apps/ds-docs/public/search-index.json new file mode 100644 index 00000000..f43d4f6c --- /dev/null +++ b/apps/ds-docs/public/search-index.json @@ -0,0 +1,172 @@ +{ + "meta": { + "generated": "2026-03-08T18:00:00.000Z", + "count": 15, + "lang": "en", + "schemaVersion": 1 + }, + "entries": [ + { + "id": "components/button", + "title": "Button", + "section": "components", + "type": "component", + "category": "form", + "description": "Buttons trigger actions. They communicate what will happen when the user interacts with them.", + "headings": ["Overview", "Examples", "Variants", "Sizes", "States", "Accessibility", "API"], + "tags": ["action", "interactive", "form", "click"], + "content": "Buttons trigger actions They communicate what will happen when the user interacts with them Button types include primary secondary tertiary and ghost variants Sizes include small medium and large States include default hover active focus and disabled Accessibility follows WCAG guidelines with proper ARIA attributes", + "url": "/components/button", + "status": "stable", + "related": ["components/fieldset"] + }, + { + "id": "components/fieldset", + "title": "Fieldset", + "section": "components", + "type": "component", + "category": "form", + "description": "Fieldset groups related form elements together with an optional legend.", + "headings": ["Overview", "Examples", "Composition", "Accessibility", "API"], + "tags": ["form", "group", "container", "legend"], + "content": "Fieldset groups related form elements together with an optional legend It provides semantic grouping for accessibility and visual organization Use fieldset to group related inputs like address fields or contact information", + "url": "/components/fieldset", + "status": "stable", + "related": ["components/button"] + }, + { + "id": "foundations/color", + "title": "Color", + "section": "foundations", + "type": "foundation", + "category": "color", + "description": "Color is a fundamental design token that conveys meaning, creates hierarchy, and establishes brand identity.", + "headings": ["Overview", "Color System", "Semantic Colors", "Usage Guidelines"], + "tags": ["color", "design token", "brand", "semantic"], + "content": "Color is a fundamental design token that conveys meaning creates hierarchy and establishes brand identity The color system includes primary secondary and neutral palettes Semantic colors provide meaning through success warning error and info states", + "url": "/foundations/color" + }, + { + "id": "foundations/index", + "title": "Foundations", + "section": "foundations", + "type": "foundation", + "description": "Design foundations are the core principles and building blocks that ensure consistency across the design system.", + "headings": ["Overview", "Principles"], + "tags": ["foundation", "principles", "design"], + "content": "Design foundations are the core principles and building blocks that ensure consistency across the design system Foundations include color typography spacing elevation and motion", + "url": "/foundations" + }, + { + "id": "tokens/index", + "title": "Tokens", + "section": "tokens", + "type": "token", + "description": "Design tokens are the visual design atoms of the design system—specifically, they are named entities that store visual design attributes.", + "headings": ["Overview", "Token Types", "Usage"], + "tags": ["token", "design token", "variable"], + "content": "Design tokens are the visual design atoms of the design system specifically they are named entities that store visual design attributes Tokens include colors spacing typography borders shadows and motion", + "url": "/tokens" + }, + { + "id": "get-started/index", + "title": "Get Started", + "section": "get-started", + "type": "guide", + "description": "Welcome to the Azion Design System. This guide will help you get started with using the design system in your projects.", + "headings": ["Overview", "Quick Start"], + "tags": ["getting started", "introduction", "quick start"], + "content": "Welcome to the Azion Design System This guide will help you get started with using the design system in your projects The design system provides components tokens and guidelines for building consistent user interfaces", + "url": "/get-started" + }, + { + "id": "get-started/installation", + "title": "Installation", + "section": "get-started", + "type": "guide", + "category": "installation", + "description": "Learn how to install and configure the Azion Design System in your project.", + "headings": ["Installation", "Configuration", "Usage"], + "tags": ["installation", "setup", "npm", "yarn", "pnpm"], + "content": "Learn how to install and configure the Azion Design System in your project Install the packages using npm yarn or pnpm Configure your project to use the design system tokens and components", + "url": "/get-started/installation" + }, + { + "id": "icons/index", + "title": "Icons", + "section": "icons", + "type": "icon", + "description": "Icons are visual symbols used to represent actions, objects, and concepts. They help users understand and interact with the interface.", + "headings": ["Overview", "Icon Library", "Usage Guidelines"], + "tags": ["icon", "symbol", "visual", "svg"], + "content": "Icons are visual symbols used to represent actions objects and concepts They help users understand and interact with the interface The icon library includes navigation action status and object icons", + "url": "/icons" + }, + { + "id": "patterns/index", + "title": "Patterns", + "section": "patterns", + "type": "pattern", + "description": "Design patterns are reusable solutions to common design problems. They provide consistent approaches to user interactions.", + "headings": ["Overview", "Available Patterns"], + "tags": ["pattern", "workflow", "interaction"], + "content": "Design patterns are reusable solutions to common design problems They provide consistent approaches to user interactions Patterns include form layouts navigation patterns and feedback patterns", + "url": "/patterns" + }, + { + "id": "blocks/index", + "title": "Blocks", + "section": "blocks", + "type": "block", + "description": "Blocks are pre-built UI sections composed of multiple components. They provide ready-to-use solutions for common page sections.", + "headings": ["Overview", "Available Blocks"], + "tags": ["block", "section", "composition"], + "content": "Blocks are pre-built UI sections composed of multiple components They provide ready-to-use solutions for common page sections Blocks include headers footers sidebars and content sections", + "url": "/blocks" + }, + { + "id": "templates/index", + "title": "Templates", + "section": "templates", + "type": "template", + "description": "Templates are complete page layouts composed of blocks and components. They provide starting points for common page types.", + "headings": ["Overview", "Available Templates"], + "tags": ["template", "page", "layout"], + "content": "Templates are complete page layouts composed of blocks and components They provide starting points for common page types Templates include dashboard settings and form pages", + "url": "/templates" + }, + { + "id": "contributing/index", + "title": "Contributing", + "section": "contributing", + "type": "contributing", + "description": "Learn how to contribute to the Azion Design System. We welcome contributions from the community.", + "headings": ["Overview", "Contribution Guidelines"], + "tags": ["contributing", "contribution", "open source"], + "content": "Learn how to contribute to the Azion Design System We welcome contributions from the community Follow the contribution guidelines to submit bug fixes features and documentation improvements", + "url": "/contributing" + }, + { + "id": "playground/index", + "title": "Playground", + "section": "playground", + "type": "playground", + "description": "Interactive playground for experimenting with design system components and seeing them in action.", + "headings": ["Overview", "Usage"], + "tags": ["playground", "interactive", "demo"], + "content": "Interactive playground for experimenting with design system components and seeing them in action Use the playground to test component configurations and preview changes in real time", + "url": "/playground" + }, + { + "id": "components/index", + "title": "Components", + "section": "components", + "type": "doc", + "description": "Browse all available components in the Azion Design System. Components are reusable UI building blocks.", + "headings": ["Overview", "Component List"], + "tags": ["component", "ui", "building block"], + "content": "Browse all available components in the Azion Design System Components are reusable UI building blocks Components include buttons inputs fieldsets and more", + "url": "/components" + } + ] +} diff --git a/apps/ds-docs/scripts/build-search-index.ts b/apps/ds-docs/scripts/build-search-index.ts new file mode 100644 index 00000000..c6e254bb --- /dev/null +++ b/apps/ds-docs/scripts/build-search-index.ts @@ -0,0 +1,369 @@ +/** + * Build Search Index + * + * Build-time script to generate the search index from content collections. + * Run during the Astro build process. + */ + +import fs from 'fs'; +import path from 'path'; +import { fileURLToPath } from 'url'; + +// Types +interface SearchIndexEntry { + id: string; + title: string; + section: string; + type: string; + category?: string; + description: string; + headings: string[]; + tags: string[]; + content: string; + url: string; + status?: string; + related?: string[]; + version: string; + language: string; + lastUpdated?: string; +} + +interface SearchIndex { + meta: { + generated: string; + count: number; + language: string; + version: string; + languages: string[]; + versions: string[]; + schemaVersion: number; + }; + entries: SearchIndexEntry[]; +} + +// Content extraction functions (duplicated for build-time use) +function extractHeadings(content: string): string[] { + const headings: string[] = []; + const headingRegex = /^(#{1,6})\s+(.+)$/gm; + + let match; + while ((match = headingRegex.exec(content)) !== null) { + const headingText = match[2] + .replace(/\s*\{#[^}]+\}\s*$/, '') + .replace(/\s*\[#[^}]+\]\s*$/, '') + .trim(); + + if (headingText) { + headings.push(headingText); + } + } + + return headings; +} + +function extractTextContent(content: string): string { + let text = content; + + // Remove frontmatter + text = text.replace(/^---[\s\S]*?---/, ''); + + // Remove code blocks (fenced) + text = text.replace(/```[\s\S]*?```/g, ' '); + + // Remove inline code + text = text.replace(/`[^`]+`/g, ' '); + + // Remove import statements + text = text.replace(/^import\s+.*$/gm, ''); + + // Remove component usage + text = text.replace(/<[A-Z][a-zA-Z]*[^>]*>[\s\S]*?<\/[A-Z][a-zA-Z]*>/g, ' '); + text = text.replace(/<[A-Z][a-zA-Z]*[^>]*\/>/g, ' '); + + // Remove HTML tags + text = text.replace(/<[^>]+>/g, ' '); + + // Remove markdown links but keep text + text = text.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1'); + + // Remove markdown images + text = text.replace(/!\[([^\]]*)\]\([^)]+\)/g, ' '); + + // Remove markdown heading markers + text = text.replace(/^#{1,6}\s+/gm, ''); + + // Remove markdown bold/italic + text = text.replace(/[*_]{1,3}([^*_]+)[*_]{1,3}/g, '$1'); + + // Remove blockquotes + text = text.replace(/^>\s+/gm, ''); + + // Remove horizontal rules + text = text.replace(/^[-*_]{3,}$/gm, ''); + + // Remove list markers + text = text.replace(/^[\s]*[-*+]\s+/gm, ''); + text = text.replace(/^[\s]*\d+\.\s+/gm, ''); + + // Remove special characters except basic punctuation + text = text.replace(/[^\w\s.,!?;:'"()-]/g, ' '); + + // Normalize whitespace + text = text.replace(/\s+/g, ' ').trim(); + + return text; +} + +function truncateContent(content: string, maxLength: number = 2000): string { + if (content.length <= maxLength) { + return content; + } + + const truncated = content.slice(0, maxLength); + const lastPeriod = truncated.lastIndexOf('.'); + const lastQuestion = truncated.lastIndexOf('?'); + const lastExclaim = truncated.lastIndexOf('!'); + + const lastSentenceEnd = Math.max(lastPeriod, lastQuestion, lastExclaim); + + if (lastSentenceEnd > maxLength * 0.7) { + return truncated.slice(0, lastSentenceEnd + 1); + } + + const lastSpace = truncated.lastIndexOf(' '); + if (lastSpace > maxLength * 0.8) { + return truncated.slice(0, lastSpace); + } + + return truncated; +} + +/** + * Parse frontmatter from markdown content + */ +function parseFrontmatter(content: string): Record { + const frontmatterMatch = content.match(/^---\n([\s\S]*?)\n---/); + if (!frontmatterMatch) { + return {}; + } + + const frontmatterStr = frontmatterMatch[1]; + const result: Record = {}; + + // Simple YAML parsing for frontmatter + const lines = frontmatterStr.split('\n'); + let currentKey = ''; + let currentValue: unknown = ''; + let inArray = false; + let arrayValues: unknown[] = []; + + for (const line of lines) { + const keyValueMatch = line.match(/^(\w+):\s*(.*)$/); + + if (keyValueMatch) { + // Save previous key/value + if (currentKey) { + result[currentKey] = inArray ? arrayValues : currentValue; + } + + currentKey = keyValueMatch[1]; + const value = keyValueMatch[2].trim(); + + if (value === '') { + inArray = true; + arrayValues = []; + currentValue = ''; + } else if (value.startsWith('[') && value.endsWith(']')) { + // Inline array + const arrayContent = value.slice(1, -1); + result[currentKey] = arrayContent.split(',').map(s => s.trim().replace(/^['"]|['"]$/g, '')); + currentKey = ''; + inArray = false; + } else if (value.startsWith('"') && value.endsWith('"')) { + result[currentKey] = value.slice(1, -1); + currentKey = ''; + } else if (value.startsWith("'") && value.endsWith("'")) { + result[currentKey] = value.slice(1, -1); + currentKey = ''; + } else { + result[currentKey] = value; + currentKey = ''; + } + } else if (line.startsWith(' - ') && inArray) { + const arrayValue = line.slice(4).trim().replace(/^['"]|['"]$/g, ''); + arrayValues.push(arrayValue); + } + } + + // Save last key/value + if (currentKey) { + result[currentKey] = inArray ? arrayValues : currentValue; + } + + return result; +} + +/** + * Map content type from frontmatter to search type + */ +function mapContentType(frontmatter: Record): string { + if (frontmatter.type) { + return frontmatter.type as string; + } + return 'doc'; +} + +/** + * Process a single markdown file + */ +function processMarkdownFile( + filePath: string, + collection: string, + slug: string +): SearchIndexEntry | null { + try { + const content = fs.readFileSync(filePath, 'utf-8'); + const frontmatter = parseFrontmatter(content); + + // Skip hidden files + if (frontmatter.hidden === true) { + return null; + } + + // Extract content + const headings = extractHeadings(content); + const textContent = truncateContent(extractTextContent(content)); + + // Build URL + const url = `/${collection}/${slug}`; + + // Build entry + const entry: SearchIndexEntry = { + id: `${collection}/${slug}`, + title: (frontmatter.title as string) || slug, + section: collection, + type: mapContentType(frontmatter), + description: (frontmatter.description as string) || '', + headings, + tags: (frontmatter.tags as string[]) || [], + content: textContent, + url, + // i18n fields with defaults + version: (frontmatter.version as string) || 'v1', + language: (frontmatter.language as string) || 'en', + }; + + // Add optional fields + if (frontmatter.category) { + entry.category = frontmatter.category as string; + } + + if (frontmatter.status) { + entry.status = frontmatter.status as string; + } + + if (frontmatter.related) { + entry.related = frontmatter.related as string[]; + } + + return entry; + } catch (error) { + console.error(`Error processing ${filePath}:`, error); + return null; + } +} + +/** + * Process all content collections + */ +function processCollections(contentDir: string): SearchIndexEntry[] { + const entries: SearchIndexEntry[] = []; + + // Define collections to process + const collections = [ + 'components', + 'foundations', + 'tokens', + 'blocks', + 'patterns', + 'templates', + 'get-started', + 'icons', + 'contributing', + 'playground', + ]; + + for (const collection of collections) { + const collectionPath = path.join(contentDir, collection); + + if (!fs.existsSync(collectionPath)) { + console.log(`Collection not found: ${collection}`); + continue; + } + + const files = fs.readdirSync(collectionPath); + + for (const file of files) { + if (!file.endsWith('.md')) { + continue; + } + + const slug = file.replace(/\.md$/, ''); + const filePath = path.join(collectionPath, file); + + const entry = processMarkdownFile(filePath, collection, slug); + if (entry) { + entries.push(entry); + } + } + } + + return entries; +} + +/** + * Build the search index + */ +function buildSearchIndex(contentDir: string, outputPath: string): void { + console.log('Building search index...'); + + const entries = processCollections(contentDir); + + // Extract unique versions and languages from entries + const versions = Array.from(new Set(entries.map(e => e.version))); + const languages = Array.from(new Set(entries.map(e => e.language))); + + const index: SearchIndex = { + meta: { + generated: new Date().toISOString(), + count: entries.length, + language: 'en', + version: 'v1', + languages, + versions, + schemaVersion: 2, + }, + entries, + }; + + // Ensure output directory exists + const outputDir = path.dirname(outputPath); + if (!fs.existsSync(outputDir)) { + fs.mkdirSync(outputDir, { recursive: true }); + } + + // Write index + fs.writeFileSync(outputPath, JSON.stringify(index, null, 2)); + + console.log(`Search index built with ${entries.length} entries`); + console.log(`Output: ${outputPath}`); +} + +// Run the build +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); + +const contentDir = path.join(__dirname, '../src/content'); +const outputPath = path.join(__dirname, '../public/search-index.json'); + +buildSearchIndex(contentDir, outputPath); diff --git a/apps/ds-docs/src/components/demo/AzButton.vue b/apps/ds-docs/src/components/demo/AzButton.vue new file mode 100644 index 00000000..24c81b2e --- /dev/null +++ b/apps/ds-docs/src/components/demo/AzButton.vue @@ -0,0 +1,120 @@ + + + diff --git a/apps/ds-docs/src/components/demo/AzFieldset.vue b/apps/ds-docs/src/components/demo/AzFieldset.vue new file mode 100644 index 00000000..33d864c7 --- /dev/null +++ b/apps/ds-docs/src/components/demo/AzFieldset.vue @@ -0,0 +1,102 @@ + + + diff --git a/apps/ds-docs/src/components/demo/index.ts b/apps/ds-docs/src/components/demo/index.ts new file mode 100644 index 00000000..b8831e24 --- /dev/null +++ b/apps/ds-docs/src/components/demo/index.ts @@ -0,0 +1,9 @@ +/** + * Demo Components + * + * These are demonstration components for the playground. + * In production, these would be imported from @aziontech/components. + */ + +export { default as AzButton } from './AzButton.vue'; +export { default as AzFieldset } from './AzFieldset.vue'; diff --git a/apps/ds-docs/src/components/demo/props-metadata.ts b/apps/ds-docs/src/components/demo/props-metadata.ts new file mode 100644 index 00000000..79382aab --- /dev/null +++ b/apps/ds-docs/src/components/demo/props-metadata.ts @@ -0,0 +1,144 @@ +/** + * Props Metadata Definitions + * + * These metadata objects define how props are displayed and edited + * in the playground. This format is designed to be easily generated + * automatically from Vue component definitions or TypeScript types + * in the future. + */ + +import type { PropsDefinition } from '../playground/types'; + +/** + * Button component props metadata + */ +export const buttonProps: PropsDefinition = { + variant: { + type: 'enum', + control: 'select', + default: 'primary', + options: ['primary', 'secondary', 'destructive', 'ghost'], + optionLabels: { + primary: 'Primary', + secondary: 'Secondary', + destructive: 'Destructive', + ghost: 'Ghost', + }, + label: 'Variant', + description: 'Visual style variant of the button', + category: 'Appearance', + }, + size: { + type: 'enum', + control: 'select', + default: 'md', + options: ['sm', 'md', 'lg'], + optionLabels: { + sm: 'Small', + md: 'Medium', + lg: 'Large', + }, + label: 'Size', + description: 'Size of the button', + category: 'Appearance', + }, + disabled: { + type: 'boolean', + control: 'boolean', + default: false, + label: 'Disabled', + description: 'Whether the button is disabled', + category: 'State', + }, + loading: { + type: 'boolean', + control: 'boolean', + default: false, + label: 'Loading', + description: 'Shows loading spinner and disables interaction', + category: 'State', + }, + fullWidth: { + type: 'boolean', + control: 'boolean', + default: false, + label: 'Full Width', + description: 'Whether button takes full width of container', + category: 'Layout', + }, +}; + +/** + * Fieldset component props metadata + */ +export const fieldsetProps: PropsDefinition = { + title: { + type: 'string', + control: 'text', + default: 'Fieldset Title', + label: 'Title', + description: 'The legend/title of the fieldset', + category: 'Content', + placeholder: 'Enter fieldset title...', + }, + variant: { + type: 'enum', + control: 'select', + default: 'default', + options: ['default', 'bordered', 'elevated'], + optionLabels: { + default: 'Default', + bordered: 'Bordered', + elevated: 'Elevated', + }, + label: 'Variant', + description: 'Visual style variant of the fieldset', + category: 'Appearance', + }, + disabled: { + type: 'boolean', + control: 'boolean', + default: false, + label: 'Disabled', + description: 'Whether the fieldset is disabled', + category: 'State', + }, + collapsible: { + type: 'boolean', + control: 'boolean', + default: false, + label: 'Collapsible', + description: 'Whether the fieldset can be collapsed', + category: 'Behavior', + }, + defaultExpanded: { + type: 'boolean', + control: 'boolean', + default: true, + label: 'Default Expanded', + description: 'Whether the fieldset is expanded by default (when collapsible)', + category: 'Behavior', + }, +}; + +/** + * Example of how this could be auto-generated in the future: + * + * From Vue component: + * ```typescript + * // Future: Auto-generate from component + * const buttonProps = extractPropsMetadata(AzButton); + * ``` + * + * From TypeScript types: + * ```typescript + * // Future: Auto-generate from types + * const buttonProps = generatePropsMetadata(); + * ``` + * + * From JSON metadata file: + * ```typescript + * // Future: Load from JSON file + * import buttonProps from './metadata/button.json'; + * ``` + */ diff --git a/apps/ds-docs/src/components/docs/AccessibilityChecklist.astro b/apps/ds-docs/src/components/docs/AccessibilityChecklist.astro new file mode 100644 index 00000000..b4ef7e87 --- /dev/null +++ b/apps/ds-docs/src/components/docs/AccessibilityChecklist.astro @@ -0,0 +1,135 @@ +--- +/** + * AccessibilityChecklist + * + * Displays accessibility requirements and guidelines in a checklist format. + */ + +import type { AccessibilityMetadata, KeyboardInteraction, AriaAttribute } from '../../content/config'; + +interface Props { + items?: string[]; + keyboard?: KeyboardInteraction[]; + aria?: AriaAttribute[]; + wcag?: string[]; + notes?: string[]; +} + +const { + items = [], + keyboard = [], + aria = [], + wcag = [], + notes = [] +} = Astro.props; +--- + +
+ {/* Keyboard Interactions */} + {keyboard.length > 0 && ( +
+

+ + + + Keyboard Navigation +

+
+ + + + + + + + + {keyboard.map((item) => ( + + + + + ))} + +
KeysAction
+ + {item.keys} + + + {item.action} +
+
+
+ )} + + {/* ARIA Attributes */} + {aria.length > 0 && ( +
+

+ + + + ARIA Attributes +

+
+ {aria.map((item) => ( +
+ + {item.attribute} + +

+ {item.usage} +

+
+ ))} +
+
+ )} + + {/* WCAG Compliance */} + {wcag.length > 0 && ( +
+

+ + + + WCAG Compliance +

+
+ {wcag.map((criterion) => ( + + {criterion} + + ))} +
+
+ )} + + {/* Checklist Items */} + {items.length > 0 && ( +
+

Checklist

+
    + {items.map((item) => ( +
  • + + + + {item} +
    • + ))} +
+
+ )} + + {/* Additional Notes */} + {notes.length > 0 && ( +
+

Additional Notes

+
    + {notes.map((note) => ( +
  • {note}
    • + ))} +
+
+ )} +
diff --git a/apps/ds-docs/src/components/docs/AnatomyBlock.astro b/apps/ds-docs/src/components/docs/AnatomyBlock.astro new file mode 100644 index 00000000..16b6ec92 --- /dev/null +++ b/apps/ds-docs/src/components/docs/AnatomyBlock.astro @@ -0,0 +1,53 @@ +--- +/** + * AnatomyBlock + * + * Displays component anatomy with labeled parts. + * Supports both list format and future visual annotation. + */ + +import type { AnatomyPart } from '../../content/config'; + +interface Props { + parts: AnatomyPart[]; + image?: string; + alt?: string; +} + +const { parts, image, alt } = Astro.props; +--- + +
+ {/* Visual diagram (optional) */} + {image && ( +
+ {alt +
+ )} + + {/* Parts list */} +
+

Component Parts

+
    + {parts.map((part, index) => ( +
  1. + + {index + 1} + +
    + {part.label} + {part.description && ( +

    + {part.description} +

    + )} +
    +
    2. + ))} +
+
+
diff --git a/apps/ds-docs/src/components/docs/ApiSection.astro b/apps/ds-docs/src/components/docs/ApiSection.astro new file mode 100644 index 00000000..38991f48 --- /dev/null +++ b/apps/ds-docs/src/components/docs/ApiSection.astro @@ -0,0 +1,75 @@ +--- +/** + * ApiSection + * + * A unified API documentation section that combines props, slots, and events tables. + * Provides a consistent structure for component API documentation. + */ + +import PropsTable from './PropsTable.astro'; +import SlotsTable from './SlotsTable.astro'; +import EventsTable from './EventsTable.astro'; +import type { PropDefinition, SlotDefinition, EventDefinition } from '../../content/config'; + +interface Props { + title?: string; + props?: PropDefinition[]; + slots?: SlotDefinition[]; + events?: EventDefinition[]; + component?: string; +} + +const { + title = 'API', + props = [], + slots = [], + events = [], + component +} = Astro.props; + +const hasApiData = props.length > 0 || slots.length > 0 || events.length > 0; +--- + +
+

+ {title} +

+ + {hasApiData ? ( +
+ {/* Props */} + {props.length > 0 && ( +
+

Props

+ +
+ )} + + {/* Slots */} + {slots.length > 0 && ( +
+

Slots

+ +
+ )} + + {/* Events */} + {events.length > 0 && ( +
+

Events

+ +
+ )} +
+ ) : ( +
+ + + +

API documentation coming soon

+

+ Component API is being documented and will be available shortly. +

+
+ )} +
diff --git a/apps/ds-docs/src/components/docs/Callout.astro b/apps/ds-docs/src/components/docs/Callout.astro new file mode 100644 index 00000000..5dd89c78 --- /dev/null +++ b/apps/ds-docs/src/components/docs/Callout.astro @@ -0,0 +1,82 @@ +--- +/** + * Callout + * + * Highlighted information blocks for tips, warnings, and important notes. + */ + +interface Props { + type?: 'info' | 'warning' | 'error' | 'success' | 'tip'; + title?: string; +} + +const { type = 'info', title } = Astro.props; + +const styles = { + info: { + bg: 'bg-blue-50', + border: 'border-blue-200', + icon: 'text-blue-500', + title: 'text-blue-800', + text: 'text-blue-700', + iconPath: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z', + }, + warning: { + bg: 'bg-amber-50', + border: 'border-amber-200', + icon: 'text-amber-500', + title: 'text-amber-800', + text: 'text-amber-700', + iconPath: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z', + }, + error: { + bg: 'bg-red-50', + border: 'border-red-200', + icon: 'text-red-500', + title: 'text-red-800', + text: 'text-red-700', + iconPath: 'M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z', + }, + success: { + bg: 'bg-green-50', + border: 'border-green-200', + icon: 'text-green-500', + title: 'text-green-800', + text: 'text-green-700', + iconPath: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z', + }, + tip: { + bg: 'bg-purple-50', + border: 'border-purple-200', + icon: 'text-purple-500', + title: 'text-purple-800', + text: 'text-purple-700', + iconPath: 'M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z', + }, +}; + +const style = styles[type]; +--- + +
+
+ {/* Icon */} +
+ + + +
+ + {/* Content */} +
+ {title && ( +

+ {title} +

+ )} +
+ +
+
+
+
diff --git a/apps/ds-docs/src/components/docs/DoDont.astro b/apps/ds-docs/src/components/docs/DoDont.astro new file mode 100644 index 00000000..c7c4957c --- /dev/null +++ b/apps/ds-docs/src/components/docs/DoDont.astro @@ -0,0 +1,47 @@ +--- +/** + * DoDont + * + * Side-by-side comparison of correct and incorrect usage patterns. + */ + +interface Props { + title?: string; +} + +const { title } = Astro.props; +--- + +
+ {title && ( +

{title}

+ )} + +
+ {/* Do side */} +
+
+ + + + Do +
+
+ +
+
+ + {/* Don't side */} +
+
+ + + + Don't +
+
+ +
+
+
+
diff --git a/apps/ds-docs/src/components/docs/DocsHeader.vue b/apps/ds-docs/src/components/docs/DocsHeader.vue index 4a17b003..f27ec253 100644 --- a/apps/ds-docs/src/components/docs/DocsHeader.vue +++ b/apps/ds-docs/src/components/docs/DocsHeader.vue @@ -2,11 +2,12 @@ /** * DocsHeader * - * Documentation header component with breadcrumb context, - * search placeholder, and version/language switcher placeholders. + * Documentation header component with breadcrumb context + * and search trigger button. */ import type { Section, NavItem } from '@/lib/content/types'; +import { useSearch } from '@/lib/search/use-search'; defineProps<{ /** Current section */ @@ -14,6 +15,8 @@ defineProps<{ /** Current page item */ item?: NavItem | null; }>(); + +const { openSearch } = useSearch(); + + diff --git a/apps/ds-docs/src/components/docs/EventsTable.astro b/apps/ds-docs/src/components/docs/EventsTable.astro new file mode 100644 index 00000000..78bdade9 --- /dev/null +++ b/apps/ds-docs/src/components/docs/EventsTable.astro @@ -0,0 +1,57 @@ +--- +/** + * EventsTable + * + * Displays component events in a structured table format. + */ + +import type { EventDefinition } from '../../content/config'; + +interface Props { + rows?: EventDefinition[]; + component?: string; +} + +const { rows = [], component } = Astro.props; +--- + +
+ {rows.length === 0 ? ( +
+

No events documented yet.

+
+ ) : ( + + + + + + + + + + {rows.map((event) => ( + + + + + + ))} + +
EventPayloadDescription
+ + @{event.name} + + + {event.payload ? ( + + {event.payload} + + ) : ( + — + )} + + {event.description} +
+ )} +
diff --git a/apps/ds-docs/src/components/docs/ExampleBlock.astro b/apps/ds-docs/src/components/docs/ExampleBlock.astro new file mode 100644 index 00000000..81a13c5d --- /dev/null +++ b/apps/ds-docs/src/components/docs/ExampleBlock.astro @@ -0,0 +1,92 @@ +--- +/** + * ExampleBlock + * + * A combined preview + code block for component examples. + * Supports stacked or tabbed layout, with optional title and description. + */ + +import DemoPreview from './DemoPreview.vue'; +import CodeBlock from './CodeBlock.astro'; + +interface Props { + title?: string; + description?: string; + code?: string; + language?: string; + showCode?: boolean; + layout?: 'stacked' | 'tabbed'; + background?: 'light' | 'dark' | 'transparent'; +} + +const { + title, + description, + code, + language = 'vue', + showCode = true, + layout = 'stacked', + background = 'light' +} = Astro.props; +--- + +
+ {/* Header */} + {(title || description) && ( +
+ {title && ( +

+ {title} +

+ )} + {description && ( +

+ {description} +

+ )} +
+ )} + + {/* Preview Container */} +
+ {/* Preview */} +
+ +
+ + {/* Code */} + {showCode && code && ( +
+ +
+ )} +
+
+ + diff --git a/apps/ds-docs/src/components/docs/LanguageSwitcher.vue b/apps/ds-docs/src/components/docs/LanguageSwitcher.vue new file mode 100644 index 00000000..fa99b4d1 --- /dev/null +++ b/apps/ds-docs/src/components/docs/LanguageSwitcher.vue @@ -0,0 +1,337 @@ + + + + + diff --git a/apps/ds-docs/src/components/docs/PropsTable.astro b/apps/ds-docs/src/components/docs/PropsTable.astro new file mode 100644 index 00000000..b3bbfbd0 --- /dev/null +++ b/apps/ds-docs/src/components/docs/PropsTable.astro @@ -0,0 +1,77 @@ +--- +/** + * PropsTable + * + * Displays component props in a structured table format. + * Supports manual data or can be extended for generated data. + */ + +import type { PropDefinition } from '../../content/config'; + +interface Props { + rows?: PropDefinition[]; + component?: string; // For future auto-extraction +} + +const { rows = [], component } = Astro.props; + +// Sort props: required first, then alphabetically +const sortedRows = [...rows].sort((a, b) => { + if (a.required && !b.required) return -1; + if (!a.required && b.required) return 1; + return a.name.localeCompare(b.name); +}); +--- + +
+ {rows.length === 0 ? ( +
+

No props documented yet.

+

+ Props will be automatically extracted or manually added. +

+
+ ) : ( + + + + + + + + + + + {sortedRows.map((prop, index) => ( + + + + + + + ))} + +
PropTypeDefaultDescription
+ + {prop.required && ( + * + )} + {prop.name} + + + + {prop.type} + + + {prop.default ? ( + + {prop.default} + + ) : ( + — + )} + + {prop.description} +
+ )} +
diff --git a/apps/ds-docs/src/components/docs/RelatedLinks.astro b/apps/ds-docs/src/components/docs/RelatedLinks.astro new file mode 100644 index 00000000..057554ad --- /dev/null +++ b/apps/ds-docs/src/components/docs/RelatedLinks.astro @@ -0,0 +1,58 @@ +--- +/** + * RelatedLinks + * + * Displays links to related components, patterns, or resources. + */ + +interface RelatedItem { + title: string; + href: string; + description?: string; + type?: 'component' | 'pattern' | 'foundation' | 'external'; +} + +interface Props { + items?: RelatedItem[]; + title?: string; +} + +const { + items = [], + title = 'Related' +} = Astro.props; + +const typeIcons: Record = { + component: ``, + pattern: ``, + foundation: ``, + external: ``, +}; +--- + +{items.length > 0 && ( +
+

{title}

+ +
+ {items.map((item) => ( + + +
+ + {item.title} + + {item.description && ( +

+ {item.description} +

+ )} +
+ + ))} +
+
+)} diff --git a/apps/ds-docs/src/components/docs/SectionBlock.astro b/apps/ds-docs/src/components/docs/SectionBlock.astro new file mode 100644 index 00000000..6bec5c14 --- /dev/null +++ b/apps/ds-docs/src/components/docs/SectionBlock.astro @@ -0,0 +1,66 @@ +--- +/** + * SectionBlock + * + * A consistent section wrapper for component documentation pages. + * Provides standardized heading, ID for anchor links, and spacing. + */ + +interface Props { + id: string; + title: string; + description?: string; + tag?: 'section' | 'div'; +} + +const { + id, + title, + description, + tag: Tag = 'section' +} = Astro.props; +--- + + +
+

+ {title} +

+ {description && ( +

+ {description} +

+ )} +
+ +
+ +
+ + + diff --git a/apps/ds-docs/src/components/docs/SlotsTable.astro b/apps/ds-docs/src/components/docs/SlotsTable.astro new file mode 100644 index 00000000..97dd4870 --- /dev/null +++ b/apps/ds-docs/src/components/docs/SlotsTable.astro @@ -0,0 +1,57 @@ +--- +/** + * SlotsTable + * + * Displays component slots in a structured table format. + */ + +import type { SlotDefinition } from '../../content/config'; + +interface Props { + rows?: SlotDefinition[]; + component?: string; +} + +const { rows = [], component } = Astro.props; +--- + +
+ {rows.length === 0 ? ( +
+

No slots documented yet.

+
+ ) : ( + + + + + + + + + + {rows.map((slot) => ( + + + + + + ))} + +
SlotDescriptionSlot Props
+ + {slot.name === 'default' ? 'default' : slot.name} + + + {slot.description} + + {slot.props ? ( + + {slot.props} + + ) : ( + — + )} +
+ )} +
diff --git a/apps/ds-docs/src/components/docs/StateGrid.astro b/apps/ds-docs/src/components/docs/StateGrid.astro new file mode 100644 index 00000000..71993f83 --- /dev/null +++ b/apps/ds-docs/src/components/docs/StateGrid.astro @@ -0,0 +1,115 @@ +--- +/** + * StateGrid + * + * Displays component states in a grid format with visual examples. + * Note: Astro requires static slot names, so we use predefined slots. + */ + +interface Props { + columns?: 2 | 3 | 4; +} + +const { columns = 3 } = Astro.props; + +const gridCols = { + 2: 'grid-cols-2', + 3: 'grid-cols-3', + 4: 'grid-cols-4', +}; + +// Standard state names +const states = ['default', 'hover', 'focus', 'active', 'disabled', 'loading', 'error', 'readonly']; +--- + +
+
+ {/* Default State */} +
+
+ +
+
+ Default +

Normal resting state

+
+
+ + {/* Hover State */} +
+
+ +
+
+ Hover +

Cursor is over the element

+
+
+ + {/* Focus State */} +
+
+ +
+
+ Focus +

Element has keyboard focus

+
+
+ + {/* Active State */} +
+
+ +
+
+ Active +

Element is being pressed

+
+
+ + {/* Disabled State */} +
+
+ +
+
+ Disabled +

Element is not interactive

+
+
+ + {/* Loading State */} +
+
+ +
+
+ Loading +

Element is loading

+
+
+ + {/* Error State */} +
+
+ +
+
+ Error +

Element has an error

+
+
+ + {/* Readonly State */} +
+
+ +
+
+ Readonly +

Element is read-only

+
+
+
+
diff --git a/apps/ds-docs/src/components/docs/VersionSwitcher.vue b/apps/ds-docs/src/components/docs/VersionSwitcher.vue new file mode 100644 index 00000000..f41f670d --- /dev/null +++ b/apps/ds-docs/src/components/docs/VersionSwitcher.vue @@ -0,0 +1,310 @@ + + + + + diff --git a/apps/ds-docs/src/components/docs/index.ts b/apps/ds-docs/src/components/docs/index.ts index 6cd38082..b654224a 100644 --- a/apps/ds-docs/src/components/docs/index.ts +++ b/apps/ds-docs/src/components/docs/index.ts @@ -2,12 +2,15 @@ * Documentation Components * * Barrel export for all documentation-specific components. + * These components are used within markdown content and layouts. */ // Page structure export { default as PageHeader } from './PageHeader.vue'; export { default as StatusBadge } from './StatusBadge.vue'; export { default as MetadataLinks } from './MetadataLinks.vue'; +export { default as SectionBlock } from './SectionBlock.astro'; +export { default as RelatedLinks } from './RelatedLinks.astro'; // Navigation export { default as DocsSidebar } from './DocsSidebar.vue'; @@ -15,9 +18,32 @@ export { default as DocsSidebarSection } from './DocsSidebarSection.vue'; export { default as DocsSidebarItem } from './DocsSidebarItem.vue'; export { default as DocsHeader } from './DocsHeader.vue'; -// Content display +// Version & Language +export { default as VersionSwitcher } from './VersionSwitcher.vue'; +export { default as LanguageSwitcher } from './LanguageSwitcher.vue'; +export { default as DocsVersionBanner } from './DocsVersionBanner.vue'; + +// Demo & Code export { default as DemoPreview } from './DemoPreview.vue'; -// Note: CodeBlock.astro is imported directly in Astro files +export { default as CodeBlock } from './CodeBlock.astro'; +export { default as ExampleBlock } from './ExampleBlock.astro'; + +// API Documentation +export { default as PropsTable } from './PropsTable.astro'; +export { default as SlotsTable } from './SlotsTable.astro'; +export { default as EventsTable } from './EventsTable.astro'; +export { default as ApiSection } from './ApiSection.astro'; + +// Accessibility +export { default as AccessibilityChecklist } from './AccessibilityChecklist.astro'; + +// Visual Documentation +export { default as AnatomyBlock } from './AnatomyBlock.astro'; +export { default as StateGrid } from './StateGrid.astro'; +export { default as DoDont } from './DoDont.astro'; + +// Callouts +export { default as Callout } from './Callout.astro'; /** * Components map for markdown rendering @@ -26,8 +52,46 @@ export { default as DemoPreview } from './DemoPreview.vue'; * */ import DemoPreview from './DemoPreview.vue'; +import SectionBlock from './SectionBlock.astro'; +import ExampleBlock from './ExampleBlock.astro'; +import PropsTable from './PropsTable.astro'; +import SlotsTable from './SlotsTable.astro'; +import EventsTable from './EventsTable.astro'; +import ApiSection from './ApiSection.astro'; +import AccessibilityChecklist from './AccessibilityChecklist.astro'; +import AnatomyBlock from './AnatomyBlock.astro'; +import StateGrid from './StateGrid.astro'; +import DoDont from './DoDont.astro'; +import RelatedLinks from './RelatedLinks.astro'; +import Callout from './Callout.astro'; export const markdownComponents = { DemoPreview, - // Add more components as needed + SectionBlock, + ExampleBlock, + PropsTable, + SlotsTable, + EventsTable, + ApiSection, + AccessibilityChecklist, + AnatomyBlock, + StateGrid, + DoDont, + RelatedLinks, + Callout, + // Aliases for convenience + Demo: DemoPreview, + Section: SectionBlock, + Example: ExampleBlock, + Props: PropsTable, + Slots: SlotsTable, + Events: EventsTable, + API: ApiSection, + A11y: AccessibilityChecklist, + Anatomy: AnatomyBlock, + States: StateGrid, }; + +// Re-export playground components for markdown usage +export { Playground, PlaygroundPreview, PlaygroundControls, PlaygroundCode } from '../playground'; +export type { PropsDefinition, PropsValues, PlaygroundConfig } from '../playground'; diff --git a/apps/ds-docs/src/components/playground/Playground.vue b/apps/ds-docs/src/components/playground/Playground.vue new file mode 100644 index 00000000..d0b2194c --- /dev/null +++ b/apps/ds-docs/src/components/playground/Playground.vue @@ -0,0 +1,232 @@ + + + + + diff --git a/apps/ds-docs/src/components/playground/PlaygroundBooleanControl.vue b/apps/ds-docs/src/components/playground/PlaygroundBooleanControl.vue new file mode 100644 index 00000000..fa515584 --- /dev/null +++ b/apps/ds-docs/src/components/playground/PlaygroundBooleanControl.vue @@ -0,0 +1,97 @@ + + + + + diff --git a/apps/ds-docs/src/components/playground/PlaygroundCode.vue b/apps/ds-docs/src/components/playground/PlaygroundCode.vue new file mode 100644 index 00000000..2ef8241f --- /dev/null +++ b/apps/ds-docs/src/components/playground/PlaygroundCode.vue @@ -0,0 +1,177 @@ + + + + + diff --git a/apps/ds-docs/src/components/playground/PlaygroundControls.vue b/apps/ds-docs/src/components/playground/PlaygroundControls.vue new file mode 100644 index 00000000..00c75e4f --- /dev/null +++ b/apps/ds-docs/src/components/playground/PlaygroundControls.vue @@ -0,0 +1,173 @@ + + + + + diff --git a/apps/ds-docs/src/components/playground/PlaygroundNumberControl.vue b/apps/ds-docs/src/components/playground/PlaygroundNumberControl.vue new file mode 100644 index 00000000..99953437 --- /dev/null +++ b/apps/ds-docs/src/components/playground/PlaygroundNumberControl.vue @@ -0,0 +1,93 @@ + + + + + diff --git a/apps/ds-docs/src/components/playground/PlaygroundPreview.vue b/apps/ds-docs/src/components/playground/PlaygroundPreview.vue new file mode 100644 index 00000000..4780d667 --- /dev/null +++ b/apps/ds-docs/src/components/playground/PlaygroundPreview.vue @@ -0,0 +1,136 @@ + + + + + diff --git a/apps/ds-docs/src/components/playground/PlaygroundPropControl.vue b/apps/ds-docs/src/components/playground/PlaygroundPropControl.vue new file mode 100644 index 00000000..b4a3fc80 --- /dev/null +++ b/apps/ds-docs/src/components/playground/PlaygroundPropControl.vue @@ -0,0 +1,88 @@ + + + + + diff --git a/apps/ds-docs/src/components/playground/PlaygroundSelectControl.vue b/apps/ds-docs/src/components/playground/PlaygroundSelectControl.vue new file mode 100644 index 00000000..0b80e6a7 --- /dev/null +++ b/apps/ds-docs/src/components/playground/PlaygroundSelectControl.vue @@ -0,0 +1,95 @@ + + + + + diff --git a/apps/ds-docs/src/components/playground/PlaygroundTextControl.vue b/apps/ds-docs/src/components/playground/PlaygroundTextControl.vue new file mode 100644 index 00000000..a363582a --- /dev/null +++ b/apps/ds-docs/src/components/playground/PlaygroundTextControl.vue @@ -0,0 +1,81 @@ + + + + + diff --git a/apps/ds-docs/src/components/playground/code-generator.ts b/apps/ds-docs/src/components/playground/code-generator.ts new file mode 100644 index 00000000..098b2eed --- /dev/null +++ b/apps/ds-docs/src/components/playground/code-generator.ts @@ -0,0 +1,180 @@ +/** + * Code Snippet Generator + * + * Generates Vue template code from props values. + * This is a simple generator that creates usage examples + * based on the current playground state. + */ + +import type { PropsDefinition, PropsValues, GeneratedCode, PropMetadata } from './types'; + +/** + * Format a prop value for code output + */ +function formatPropValue( + value: unknown, + metadata: PropMetadata, + propName: string +): string | null { + // Skip if value is the default + if (value === metadata.default) { + return null; + } + + // Skip if value is undefined or null + if (value === undefined || value === null) { + return null; + } + + // Handle different types + switch (metadata.type) { + case 'string': + // Simple string - use as attribute if short, or bind if contains special chars + if (typeof value === 'string') { + // Check if it's a simple string that can be unquoted + if (/^[a-zA-Z0-9\s-]+$/.test(value) && value.length < 20) { + return `${propName}="${value}"`; + } + // Otherwise use v-bind with template literal + return `:${propName}="\`${value}\`"`; + } + return null; + + case 'boolean': + // Boolean: only include if true + if (value === true) { + return propName; + } + // Explicit false uses binding + if (value === false) { + return `:${propName}="false"`; + } + return null; + + case 'number': + // Numbers always use binding + return `:${propName}="${value}"`; + + case 'enum': + // Enum values use binding for strings + if (typeof value === 'string') { + return `${propName}="${value}"`; + } + return null; + + default: + return null; + } +} + +/** + * Generate Vue template code from props + */ +export function generateCode( + componentName: string, + propsDefinition: PropsDefinition, + propsValues: PropsValues, + slotContent?: string +): GeneratedCode { + const lines: string[] = []; + const propsLines: string[] = []; + + // Sort props by name for consistent output + const sortedPropNames = Object.keys(propsDefinition).sort(); + + // Generate prop attributes + for (const propName of sortedPropNames) { + const metadata = propsDefinition[propName]; + const value = propsValues[propName]; + const formatted = formatPropValue(value, metadata, propName); + + if (formatted) { + propsLines.push(formatted); + } + } + + // Build the opening tag + if (propsLines.length === 0) { + // Self-closing or simple tag + if (slotContent) { + lines.push(`<${componentName}>`); + lines.push(` ${slotContent}`); + lines.push(``); + } else { + lines.push(`<${componentName} />`); + } + } else if (propsLines.length === 1) { + // Single prop on same line + if (slotContent) { + lines.push(`<${componentName} ${propsLines[0]}>`); + lines.push(` ${slotContent}`); + lines.push(``); + } else { + lines.push(`<${componentName} ${propsLines[0]} />`); + } + } else { + // Multiple props, each on new line + lines.push(`<${componentName}`); + for (const propLine of propsLines) { + lines.push(` ${propLine}`); + } + + if (slotContent) { + lines.push(`>`); + lines.push(` ${slotContent}`); + lines.push(``); + } else { + lines.push(`/>`); + } + } + + return { + code: lines.join('\n'), + language: 'vue', + componentName, + }; +} + +/** + * Generate a minimal example with only essential props + */ +export function generateMinimalExample( + componentName: string, + propsDefinition: PropsDefinition +): GeneratedCode { + // Use defaults for all props + const defaultValues: PropsValues = {}; + + for (const [propName, metadata] of Object.entries(propsDefinition)) { + if (metadata.default !== undefined) { + defaultValues[propName] = metadata.default; + } + } + + return generateCode(componentName, propsDefinition, defaultValues, 'Content'); +} + +/** + * Generate code for multiple variants + */ +export function generateVariantExamples( + componentName: string, + propsDefinition: PropsDefinition, + variantProp: string, + variants: string[] +): GeneratedCode[] { + return variants.map((variant) => { + const values: PropsValues = { + [variantProp]: variant, + }; + + // Add other required props with defaults + for (const [propName, metadata] of Object.entries(propsDefinition)) { + if (metadata.default !== undefined && propName !== variantProp) { + values[propName] = metadata.default; + } + } + + return generateCode(componentName, propsDefinition, values, 'Button'); + }); +} diff --git a/apps/ds-docs/src/components/playground/index.ts b/apps/ds-docs/src/components/playground/index.ts new file mode 100644 index 00000000..f67abab1 --- /dev/null +++ b/apps/ds-docs/src/components/playground/index.ts @@ -0,0 +1,44 @@ +/** + * Playground Components + * + * Barrel export for all playground-related components and utilities. + * The playground system provides interactive component exploration + * within the documentation platform. + */ + +// Main component +export { default as Playground } from './Playground.vue'; + +// Sub-components +export { default as PlaygroundPreview } from './PlaygroundPreview.vue'; +export { default as PlaygroundControls } from './PlaygroundControls.vue'; +export { default as PlaygroundCode } from './PlaygroundCode.vue'; +export { default as PlaygroundPropControl } from './PlaygroundPropControl.vue'; + +// Individual controls +export { default as PlaygroundTextControl } from './PlaygroundTextControl.vue'; +export { default as PlaygroundBooleanControl } from './PlaygroundBooleanControl.vue'; +export { default as PlaygroundNumberControl } from './PlaygroundNumberControl.vue'; +export { default as PlaygroundSelectControl } from './PlaygroundSelectControl.vue'; + +// Types +export type { + ControlType, + PropMetadataBase, + TextPropMetadata, + BooleanPropMetadata, + NumberPropMetadata, + SelectPropMetadata, + ColorPropMetadata, + PropMetadata, + PropsDefinition, + PropsValues, + PreviewSurface, + PlaygroundConfig, + PlaygroundHooks, + StatePreset, + GeneratedCode, +} from './types'; + +// Utilities +export { generateCode, generateMinimalExample, generateVariantExamples } from './code-generator'; diff --git a/apps/ds-docs/src/components/playground/types.ts b/apps/ds-docs/src/components/playground/types.ts new file mode 100644 index 00000000..b06a7f52 --- /dev/null +++ b/apps/ds-docs/src/components/playground/types.ts @@ -0,0 +1,171 @@ +/** + * Playground Types + * + * Type definitions for the interactive playground system. + * These types define the props metadata model that describes + * how controls should be rendered and managed. + */ + +/** + * Supported control types for props editing + */ +export type ControlType = 'text' | 'boolean' | 'number' | 'select' | 'color'; + +/** + * Base prop metadata definition + */ +export interface PropMetadataBase { + /** The type of the prop value */ + type: 'string' | 'number' | 'boolean' | 'enum'; + /** Default value for the prop */ + default?: unknown; + /** Control type to use for editing */ + control: ControlType; + /** Human-readable label (defaults to prop name) */ + label?: string; + /** Description of what the prop does */ + description?: string; + /** Whether this prop is required */ + required?: boolean; + /** Category for grouping related props */ + category?: string; +} + +/** + * Text control metadata + */ +export interface TextPropMetadata extends PropMetadataBase { + type: 'string'; + control: 'text'; + /** Placeholder text for the input */ + placeholder?: string; +} + +/** + * Boolean control metadata + */ +export interface BooleanPropMetadata extends PropMetadataBase { + type: 'boolean'; + control: 'boolean'; +} + +/** + * Number control metadata + */ +export interface NumberPropMetadata extends PropMetadataBase { + type: 'number'; + control: 'number'; + /** Minimum value */ + min?: number; + /** Maximum value */ + max?: number; + /** Step increment */ + step?: number; +} + +/** + * Select control metadata + */ +export interface SelectPropMetadata extends PropMetadataBase { + type: 'enum'; + control: 'select'; + /** Available options for selection */ + options: readonly string[] | string[]; + /** Option labels (optional, for display purposes) */ + optionLabels?: Record; +} + +/** + * Color control metadata (future use) + */ +export interface ColorPropMetadata extends PropMetadataBase { + type: 'string'; + control: 'color'; +} + +/** + * Union type for all prop metadata types + */ +export type PropMetadata = + | TextPropMetadata + | BooleanPropMetadata + | NumberPropMetadata + | SelectPropMetadata + | ColorPropMetadata; + +/** + * Complete props definition for a component + * Maps prop names to their metadata + */ +export type PropsDefinition = Record; + +/** + * Current values for all props + */ +export type PropsValues = Record; + +/** + * Preview surface/background options + */ +export type PreviewSurface = 'light' | 'neutral' | 'dark'; + +/** + * Playground configuration + */ +export interface PlaygroundConfig { + /** Component name for display */ + componentName: string; + /** Props definition */ + props: PropsDefinition; + /** Initial props values (optional, uses defaults if not provided) */ + initialValues?: PropsValues; + /** Preview surface style */ + surface?: PreviewSurface; + /** Whether to show the code panel */ + showCode?: boolean; + /** Whether to show the controls panel */ + showControls?: boolean; + /** Whether code is initially visible */ + codeInitiallyVisible?: boolean; + /** Custom preview container class */ + previewClass?: string; + /** Whether to show slots editor (future) */ + showSlots?: boolean; + /** Whether to show events log (future) */ + showEvents?: boolean; +} + +/** + * Extensibility hooks for future features + */ +export interface PlaygroundHooks { + /** Called when props change */ + onPropsChange?: (values: PropsValues) => void; + /** Called when code is copied */ + onCodeCopy?: (code: string) => void; + /** Called when a preset is applied */ + onPresetApply?: (presetName: string, values: PropsValues) => void; + /** Called when an event is emitted from the component (future) */ + onEvent?: (eventName: string, payload: unknown) => void; +} + +/** + * State preset for quick switching between configurations + */ +export interface StatePreset { + name: string; + label: string; + values: PropsValues; +} + +/** + * Generated code snippet information + */ +export interface GeneratedCode { + /** The generated code string */ + code: string; + /** Language for syntax highlighting */ + language: 'vue' | 'html' | 'jsx'; + /** Component name used */ + componentName: string; +} diff --git a/apps/ds-docs/src/components/search/SearchModal.vue b/apps/ds-docs/src/components/search/SearchModal.vue new file mode 100644 index 00000000..1ff3cac0 --- /dev/null +++ b/apps/ds-docs/src/components/search/SearchModal.vue @@ -0,0 +1,338 @@ + + + + + diff --git a/apps/ds-docs/src/components/search/index.ts b/apps/ds-docs/src/components/search/index.ts new file mode 100644 index 00000000..5a91eaa5 --- /dev/null +++ b/apps/ds-docs/src/components/search/index.ts @@ -0,0 +1,7 @@ +/** + * Search Components + * + * Export all search-related Vue components. + */ + +export { default as SearchModal } from './SearchModal.vue'; diff --git a/apps/ds-docs/src/config/docs-languages.ts b/apps/ds-docs/src/config/docs-languages.ts new file mode 100644 index 00000000..0e30fd38 --- /dev/null +++ b/apps/ds-docs/src/config/docs-languages.ts @@ -0,0 +1,273 @@ +/** + * Documentation Language Configuration + * + * Centralized configuration for documentation internationalization (i18n). + * Supports multiple languages with graceful fallback to the default language. + */ + +/** + * Language configuration structure + */ +export interface DocsLanguageConfig { + /** Default language code (used for short URLs) */ + default: string; + /** All supported language codes (ISO 639-1) */ + supported: string[]; + /** Language labels for display (native names) */ + labels: Record; + /** English names for languages */ + englishLabels?: Record; + /** RTL (right-to-left) language support */ + rtlLanguages?: string[]; +} + +/** + * Documentation languages configuration + * + * Current: English (default) + * Future: Portuguese and other languages + * + * @example + * // Future configuration with multiple languages: + * export const DOCS_LANGUAGES: DocsLanguageConfig = { + * default: 'en', + * supported: ['en', 'pt', 'es'], + * labels: { + * en: 'English', + * pt: 'Português', + * es: 'Español', + * }, + * englishLabels: { + * en: 'English', + * pt: 'Portuguese', + * es: 'Spanish', + * }, + * }; + */ +export const DOCS_LANGUAGES: DocsLanguageConfig = { + default: 'en', + supported: ['en', 'pt'], + labels: { + en: 'English', + pt: 'Português', + }, + englishLabels: { + en: 'English', + pt: 'Portuguese', + }, +}; + +/** + * Get the default documentation language + * + * @returns The default language code (e.g., 'en') + */ +export function getDefaultLanguage(): string { + return DOCS_LANGUAGES.default; +} + +/** + * Check if a language code is supported + * + * @param language - Language code to check (ISO 639-1) + * @returns True if the language is in the supported list + * + * @example + * isSupportedLanguage('en'); // true + * isSupportedLanguage('pt'); // true + * isSupportedLanguage('fr'); // false + */ +export function isSupportedLanguage(language: string): boolean { + return DOCS_LANGUAGES.supported.includes(language); +} + +/** + * Check if a language is the default language + * + * @param language - Language code to check + * @returns True if this is the default language + */ +export function isDefaultLanguage(language: string): boolean { + return language === DOCS_LANGUAGES.default; +} + +/** + * Get all supported languages + * + * @returns Array of language codes + */ +export function getAllLanguages(): string[] { + return [...DOCS_LANGUAGES.supported]; +} + +/** + * Get the display label for a language (native name) + * + * @param language - Language code + * @returns Native name for the language + */ +export function getLanguageLabel(language: string): string { + return DOCS_LANGUAGES.labels[language] ?? language; +} + +/** + * Get the English name for a language + * + * @param language - Language code + * @returns English name for the language + */ +export function getLanguageEnglishLabel(language: string): string { + return DOCS_LANGUAGES.englishLabels?.[language] ?? DOCS_LANGUAGES.labels[language] ?? language; +} + +/** + * Check if a language is RTL (right-to-left) + * + * @param language - Language code + * @returns True if the language is RTL + */ +export function isRTLLanguage(language: string): boolean { + return DOCS_LANGUAGES.rtlLanguages?.includes(language) ?? false; +} + +/** + * Get the text direction for a language + * + * @param language - Language code + * @returns 'rtl' or 'ltr' + */ +export function getLanguageDirection(language: string): 'rtl' | 'ltr' { + return isRTLLanguage(language) ? 'rtl' : 'ltr'; +} + +/** + * Validate and normalize a language code + * + * @param language - Language code to validate + * @returns The validated language code or the default language + */ +export function validateLanguage(language: string | undefined): string { + if (!language) return DOCS_LANGUAGES.default; + const normalized = language.toLowerCase(); + return isSupportedLanguage(normalized) ? normalized : DOCS_LANGUAGES.default; +} + +/** + * Get fallback language for a missing translation + * + * @param language - Requested language + * @returns The language to fall back to (usually the default) + */ +export function getFallbackLanguage(language: string): string { + // If the language is not supported, fall back to default + if (!isSupportedLanguage(language)) { + return DOCS_LANGUAGES.default; + } + + // If the language is supported but content might be missing, + // we still return the requested language - the content resolver + // will handle the actual fallback + return language; +} + +/** + * Language route configuration + */ +export const LANGUAGE_ROUTES = { + /** URL parameter name for language */ + param: 'lang', + /** Default language URL behavior */ + defaultInUrl: false, // Don't include default language in URLs +} as const; + +/** + * Build a language-specific URL + * + * @param language - Language code + * @param path - Base path without language prefix + * @param isDefault - Whether this is the default language + * @returns URL with language prefix if needed + */ +export function buildLanguageUrl( + language: string, + path: string, + isDefault: boolean = true +): string { + // Don't prefix default language URLs + if (isDefault) { + return path; + } + + // Ensure path starts with / + const normalizedPath = path.startsWith('/') ? path : `/${path}`; + + return `/${language}${normalizedPath}`; +} + +/** + * Get alternate language URLs for hreflang tags + * + * @param currentPath - Current page path (without language prefix) + * @param currentLanguage - Current language code + * @returns Map of language codes to URLs + */ +export function getAlternateLanguageUrls( + currentPath: string, + currentLanguage: string +): Record { + const alternates: Record = {}; + + for (const lang of DOCS_LANGUAGES.supported) { + if (lang !== currentLanguage) { + alternates[lang] = buildLanguageUrl(lang, currentPath, isDefaultLanguage(lang)); + } + } + + return alternates; +} + +/** + * UI string keys for translation + * These are UI strings that need translation (not content) + */ +export const UI_STRING_KEYS = [ + // Navigation + 'nav.getStarted', + 'nav.foundations', + 'nav.tokens', + 'nav.components', + 'nav.blocks', + 'nav.patterns', + 'nav.templates', + 'nav.icons', + 'nav.playground', + 'nav.contributing', + + // Search + 'search.placeholder', + 'search.noResults', + 'search.clear', + 'search.close', + + // Version + 'version.current', + 'version.latest', + 'version.older', + 'version.banner', + + // Status + 'status.stable', + 'status.beta', + 'status.deprecated', + 'status.planned', + 'status.experimental', + + // Common + 'common.onThisPage', + 'common.lastUpdated', + 'common.contributors', + 'common.editPage', + 'common.reportIssue', +] as const; + +export type UIStringKey = typeof UI_STRING_KEYS[number]; diff --git a/apps/ds-docs/src/config/docs-versions.ts b/apps/ds-docs/src/config/docs-versions.ts new file mode 100644 index 00000000..9869ca11 --- /dev/null +++ b/apps/ds-docs/src/config/docs-versions.ts @@ -0,0 +1,241 @@ +/** + * Documentation Version Configuration + * + * Centralized configuration for documentation versioning. + * Supports multiple versions with stable URLs and future expansion. + */ + +/** + * Version configuration structure + */ +export interface DocsVersionConfig { + /** Current active version (shown by default) */ + current: string; + /** All available versions (ordered newest to oldest) */ + versions: string[]; + /** Version labels for display (optional) */ + labels?: Record; + /** Version release dates (optional, for UI display) */ + releaseDates?: Record; +} + +/** + * Documentation versions configuration + * + * Current: v1 only + * Future: Add v2, v3, etc. as needed + * + * @example + * // Future configuration with multiple versions: + * export const DOCS_VERSIONS: DocsVersionConfig = { + * current: 'v2', + * versions: ['v2', 'v1'], + * labels: { + * v2: 'Latest', + * v1: 'Legacy', + * }, + * releaseDates: { + * v2: '2025-01-15', + * v1: '2024-06-01', + * }, + * }; + */ +export const DOCS_VERSIONS: DocsVersionConfig = { + current: 'v1', + versions: ['v1'], + labels: { + v1: 'Latest', + }, +}; + +/** + * Get the current documentation version + * + * @returns The current version identifier (e.g., 'v1') + */ +export function getCurrentVersion(): string { + return DOCS_VERSIONS.current; +} + +/** + * Check if a version identifier is valid + * + * @param version - Version identifier to check + * @returns True if the version exists in the versions list + * + * @example + * isValidVersion('v1'); // true + * isValidVersion('v2'); // false (until v2 is added) + * isValidVersion('invalid'); // false + */ +export function isValidVersion(version: string): boolean { + return DOCS_VERSIONS.versions.includes(version); +} + +/** + * Check if a version is the current (latest) version + * + * @param version - Version identifier to check + * @returns True if this is the current version + */ +export function isCurrentVersion(version: string): boolean { + return version === DOCS_VERSIONS.current; +} + +/** + * Get all available versions + * + * @returns Array of version identifiers + */ +export function getAllVersions(): string[] { + return [...DOCS_VERSIONS.versions]; +} + +/** + * Get the display label for a version + * + * @param version - Version identifier + * @returns Human-readable label for the version + */ +export function getVersionLabel(version: string): string { + return DOCS_VERSIONS.labels?.[version] ?? version; +} + +/** + * Get the previous version (for version banners) + * + * @param version - Current version identifier + * @returns The previous version or null if none exists + */ +export function getPreviousVersion(version: string): string | null { + const index = DOCS_VERSIONS.versions.indexOf(version); + if (index === -1 || index === DOCS_VERSIONS.versions.length - 1) { + return null; + } + return DOCS_VERSIONS.versions[index + 1]; +} + +/** + * Get the next version (newer) + * + * @param version - Current version identifier + * @returns The next version or null if none exists + */ +export function getNextVersion(version: string): string | null { + const index = DOCS_VERSIONS.versions.indexOf(version); + if (index <= 0) { + return null; + } + return DOCS_VERSIONS.versions[index - 1]; +} + +/** + * Version routing configuration + */ +export const VERSION_ROUTES = { + /** URL prefix for versioned routes */ + prefix: '/docs', + /** Pattern for versioned URLs */ + versionedPattern: '/docs/{version}/{language}/{section}/{page}', + /** Pattern for default language URLs (shorter) */ + defaultLanguagePattern: '/docs/{section}/{page}', +} as const; + +/** + * Build a versioned URL + * + * @param version - Version identifier + * @param language - Language code + * @param section - Section name + * @param slug - Page slug + * @param isDefaultLanguage - Whether this is the default language + * @returns Full URL path + */ +export function buildVersionedUrl( + version: string, + language: string, + section: string, + slug: string, + isDefaultLanguage: boolean = true +): string { + // For default language and current version, use short URLs + if (isDefaultLanguage && isCurrentVersion(version)) { + return slug === 'index' + ? `/${section}` + : `/${section}/${slug}`; + } + + // For non-default language or older versions, use full URLs + const langPart = isDefaultLanguage ? '' : `/${language}`; + const slugPart = slug === 'index' ? '' : `/${slug}`; + + if (isCurrentVersion(version) && isDefaultLanguage) { + return `/${section}${slugPart}`; + } + + return `/${version}${langPart}/${section}${slugPart}`; +} + +/** + * Parse a URL to extract version, language, section, and slug + * + * @param url - URL path to parse + * @param defaultLanguage - Default language code + * @returns Parsed components or null if invalid + */ +export function parseVersionedUrl( + url: string, + defaultLanguage: string = 'en' +): { version: string; language: string; section: string; slug: string } | null { + // Remove leading/trailing slashes and split + const parts = url.replace(/^\/|\/$/g, '').split('/'); + + if (parts.length === 0) return null; + + // Check if first part is a version + const firstPart = parts[0]; + const isVersioned = firstPart.startsWith('v') && isValidVersion(firstPart); + + if (isVersioned) { + const version = firstPart; + + // Check if second part is a language + if (parts.length >= 2) { + const secondPart = parts[1]; + // Languages are typically 2-letter codes + const isLanguage = secondPart.length === 2; + + if (isLanguage) { + // /{version}/{language}/{section}/{slug} + const language = secondPart; + const section = parts[2] ?? ''; + const slug = parts.length > 3 ? parts.slice(3).join('/') : 'index'; + return { version, language, section, slug }; + } else { + // /{version}/{section}/{slug} (default language) + const section = secondPart; + const slug = parts.length > 2 ? parts.slice(2).join('/') : 'index'; + return { version, language: defaultLanguage, section, slug }; + } + } + } else { + // Default version (current), check for language + const firstPart = parts[0]; + const isLanguage = firstPart.length === 2 && firstPart !== 'en'; + + if (isLanguage) { + // /{language}/{section}/{slug} + const language = firstPart; + const section = parts[1] ?? ''; + const slug = parts.length > 2 ? parts.slice(2).join('/') : 'index'; + return { version: getCurrentVersion(), language, section, slug }; + } else { + // /{section}/{slug} (default version and language) + const section = firstPart; + const slug = parts.length > 1 ? parts.slice(1).join('/') : 'index'; + return { version: getCurrentVersion(), language: defaultLanguage, section, slug }; + } + } + + return null; +} diff --git a/apps/ds-docs/src/config/index.ts b/apps/ds-docs/src/config/index.ts new file mode 100644 index 00000000..588e8b52 --- /dev/null +++ b/apps/ds-docs/src/config/index.ts @@ -0,0 +1,42 @@ +/** + * Configuration Exports + * + * Central export point for all documentation configuration. + */ + +// Version configuration +export { + DOCS_VERSIONS, + VERSION_ROUTES, + getCurrentVersion, + isValidVersion, + isCurrentVersion, + getAllVersions, + getVersionLabel, + getPreviousVersion, + getNextVersion, + buildVersionedUrl, + parseVersionedUrl, + type DocsVersionConfig, +} from './docs-versions'; + +// Language configuration +export { + DOCS_LANGUAGES, + LANGUAGE_ROUTES, + getDefaultLanguage, + isSupportedLanguage, + isDefaultLanguage, + getAllLanguages, + getLanguageLabel, + getLanguageEnglishLabel, + isRTLLanguage, + getLanguageDirection, + validateLanguage, + getFallbackLanguage, + buildLanguageUrl, + getAlternateLanguageUrls, + UI_STRING_KEYS, + type DocsLanguageConfig, + type UIStringKey, +} from './docs-languages'; diff --git a/apps/ds-docs/src/content/blocks/index.md b/apps/ds-docs/src/content/blocks/index.md new file mode 100644 index 00000000..039fd274 --- /dev/null +++ b/apps/ds-docs/src/content/blocks/index.md @@ -0,0 +1,20 @@ +--- +title: UI Blocks +description: Composable UI blocks combining multiple components for common use cases. +navLabel: Blocks +order: 1 +type: block +category: layout +--- + +## Overview + +UI Blocks are pre-built combinations of components that solve common interface patterns. They provide a starting point for building pages and features. + +## Available Blocks + +Block documentation is being prepared. Check back soon for detailed block references. + + +This section will include blocks like headers, forms, cards, and navigation patterns. + diff --git a/apps/ds-docs/src/content/components/button.md b/apps/ds-docs/src/content/components/button.md deleted file mode 100644 index 2b57a5bd..00000000 --- a/apps/ds-docs/src/content/components/button.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: Button -description: Buttons trigger actions and events when users interact with them. -navLabel: Button -order: 1 -type: component -category: form -status: stable -component: Button -source: https://github.com/aziontech/webkit/tree/main/packages/components/src/Button -storybook: https://storybook.azion.com/components/button -figma: https://figma.com/file/azion-design-system/components/button -related: - - Input - - Select ---- - -# Button - -Buttons are interactive elements that trigger actions when clicked or tapped. They communicate actions that users can take and are typically placed throughout your UI. - -## When to Use - -Use buttons to: -- Trigger primary actions (Submit, Save, Continue) -- Navigate to different views or pages -- Toggle states or settings -- Trigger secondary actions (Cancel, Delete) - -## Anatomy - -A button consists of: -1. **Container** - The clickable area with background styling -2. **Label** - Text describing the action -3. **Icon** (optional) - Visual indicator before or after the label - -## Examples - -### Primary Button - -Use for the main action in a context. - - - - - -### Secondary Button - -Use for secondary or alternative actions. - - - - - -### Destructive Button - -Use for destructive or irreversible actions. - - - - - -## States - -Buttons have the following states: -- **Default** - The normal resting state -- **Hover** - When the cursor is over the button -- **Focus** - When the button has keyboard focus -- **Active** - When the button is being pressed -- **Disabled** - When the button is not interactive - -## Accessibility - -### Keyboard Interaction -- **Tab**: Moves focus to the button -- **Enter/Space**: Activates the button when focused - -### ARIA Attributes -- Use `aria-disabled="true"` for disabled buttons that should be announced -- Use `aria-label` for icon-only buttons - -## API - -### Props - -| Prop | Type | Default | Description | -|------|------|---------|-------------| -| `variant` | `'primary' \| 'secondary' \| 'destructive'` | `'primary'` | Visual style variant | -| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Button size | -| `disabled` | `boolean` | `false` | Whether the button is disabled | -| `loading` | `boolean` | `false` | Shows loading spinner | -| `icon` | `string` | - | Icon name to display | - -### Slots - -| Slot | Description | -|------|-------------| -| `default` | Button label content | -| `icon-left` | Icon before the label | -| `icon-right` | Icon after the label | - -### Events - -| Event | Payload | Description | -|-------|---------|-------------| -| `click` | `MouseEvent` | Fired when button is clicked | - -## Related - -- [Input](/components/input) - Text input component -- [Select](/components/select) - Select dropdown component diff --git a/apps/ds-docs/src/content/components/button.mdx b/apps/ds-docs/src/content/components/button.mdx new file mode 100644 index 00000000..d61b7731 --- /dev/null +++ b/apps/ds-docs/src/content/components/button.mdx @@ -0,0 +1,235 @@ +--- +title: Button +description: Buttons trigger actions and events when users interact with them. +navLabel: Button +order: 1 +type: component +category: form +status: stable +since: 1.0.0 +component: AzButton +source: https://github.com/aziontech/webkit/tree/main/packages/components/src/Button +storybook: https://storybook.azion.com/components/button +figma: https://figma.com/file/azion-design-system/components/button +related: + - Input + - Select + - IconButton +tags: + - action + - form + - interactive +anatomy: + - label: Container + description: The clickable area with background styling and border + - label: Label + description: The text content describing the action + - label: Icon (optional) + description: An optional icon for visual emphasis before or after the label +accessibility: + keyboard: + - keys: Tab + action: Moves focus to the button + - keys: Enter + action: Activates the button when focused + - keys: Space + action: Activates the button when focused + aria: + - attribute: aria-disabled="true" + usage: Use instead of disabled attribute for screen readers to announce the disabled state + - attribute: aria-label + usage: Required for icon-only buttons to provide accessible name + - attribute: aria-busy="true" + usage: When button is in loading state + wcag: + - "2.1.1 Keyboard" + - "4.1.2 Name, Role, Value" +api: + props: + - name: variant + type: "'primary' | 'secondary' | 'destructive' | 'ghost'" + default: "'primary'" + required: false + description: Visual style variant of the button + - name: size + type: "'sm' | 'md' | 'lg'" + default: "'md'" + required: false + description: Size of the button + - name: disabled + type: "boolean" + default: "false" + required: false + description: Whether the button is disabled + - name: loading + type: "boolean" + default: "false" + required: false + description: Shows loading spinner and disables interaction + - name: icon + type: "string" + default: "undefined" + required: false + description: Icon name to display before the label + - name: iconPosition + type: "'left' | 'right'" + default: "'left'" + required: false + description: Position of the icon relative to label + - name: fullWidth + type: "boolean" + default: "false" + required: false + description: Whether button takes full width of container + slots: + - name: default + description: Button label content + - name: icon-left + description: Custom icon before the label + props: "iconClass: string" + - name: icon-right + description: Custom icon after the label + props: "iconClass: string" + events: + - name: click + payload: "MouseEvent" + description: Fired when button is clicked and not disabled +--- + +import { ExampleBlock, Callout, StateGrid } from '@components/docs'; + +## Overview + +Buttons are interactive elements that trigger actions when clicked or tapped. They communicate actions that users can take and are typically placed throughout your UI, from forms to dialogs to navigation. + +The Button component provides a consistent, accessible way to trigger actions throughout your application. + +## When to Use + +Use buttons to: + +- Trigger primary actions (Submit, Save, Continue) +- Navigate to different views or pages +- Toggle states or settings +- Trigger secondary actions (Cancel, Delete) +- Submit forms + + + Use **primary** for the main action, **secondary** for alternative actions, **destructive** for dangerous actions, and **ghost** for less prominent actions. + + +## Examples + +### Primary Button + +Use for the main action in a context. + +Primary Button`} +> + + + +### Secondary Button + +Use for secondary or alternative actions. + +Secondary Button`} +> + + + +### Destructive Button + +Use for destructive or irreversible actions. + +Delete`} +> + + + +### Button Sizes + +Small +Medium +Large`} +> +
+ + + +
+ + +## States + + + + + + + + +## Do's and Don'ts + + + + + + + + + + + +## Playground + +Explore the Button component interactively. Adjust props and see live changes. + +import { Playground } from '../../components/playground'; +import { AzButton } from '../../components/demo'; +import { buttonProps } from '../../components/demo/props-metadata'; + + diff --git a/apps/ds-docs/src/content/components/fieldset.md b/apps/ds-docs/src/content/components/fieldset.md deleted file mode 100644 index 784a29b0..00000000 --- a/apps/ds-docs/src/content/components/fieldset.md +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: Fieldset -description: Group related form inputs under a shared label for better organization and accessibility. -type: component -category: form -status: stable -since: 1.0.0 -figma: https://figma.com/file/azion-design-system?node-id=fieldset -storybook: https://storybook.azion.com/?path=/story/form-fieldset -source: https://github.com/aziontech/webkit/tree/main/packages/components/src/Fieldset -related: - - Form - - Input - - Select ---- - -## Overview - -The Fieldset component provides a way to group related form controls together. It renders a native HTML `
` element with proper accessibility features, including an associated `` for the group label. - -Fieldsets are essential for creating accessible forms, as they help screen reader users understand the relationship between form controls. - -## When to Use - -Use Fieldset when you need to: - -- Group related form inputs (e.g., address fields, contact information) -- Create logical sections within a larger form -- Improve form accessibility with proper semantic structure -- Apply a shared label or description to multiple inputs - -## Examples - -### Basic Fieldset - - -
- Personal Information -
-
- - -
-
- - -
-
-
- - -### Address Grouping - - -
- Shipping Address -
-
- - -
-
-
- - -
-
- - -
-
-
-
- - -### Disabled State - - -
- Disabled Group -
-
- - -
-
- - -
-
-
- - -## Accessibility - -### Keyboard Navigation - -| Keys | Action | -|------|--------| -| Tab | Moves focus to the first focusable element within the fieldset | - -### ARIA Attributes - -The Fieldset component uses native HTML elements that provide built-in accessibility: - -- `
` - Groups related form controls -- `` - Provides the accessible name for the group - -No additional ARIA attributes are required when using the native elements correctly. - -### Best Practices - -1. **Always include a legend**: The `` element is required for accessibility -2. **Use for related inputs**: Only group inputs that are logically related -3. **Avoid nested fieldsets**: Deeply nested fieldsets can be confusing for screen reader users -4. **Consider visual grouping**: Use styling to visually reinforce the grouping - -## API - -### Props - -| Prop | Type | Default | Description | -|------|------|---------|-------------| -| `legend` | `string` | - | The text for the fieldset legend | -| `disabled` | `boolean` | `false` | Whether all controls in the fieldset are disabled | - -### Slots - -| Slot | Description | -|------|-------------| -| `default` | Form controls and content inside the fieldset | -| `legend` | Custom legend content (overrides `legend` prop) | - -### Events - -| Event | Payload | Description | -|-------|---------|-------------| -| - | - | Fieldset does not emit custom events | - -## Related - -- [Form](/components/form) - Form wrapper component -- [Input](/components/input) - Text input component -- [Select](/components/select) - Select dropdown component diff --git a/apps/ds-docs/src/content/components/fieldset.mdx b/apps/ds-docs/src/content/components/fieldset.mdx new file mode 100644 index 00000000..612f9d87 --- /dev/null +++ b/apps/ds-docs/src/content/components/fieldset.mdx @@ -0,0 +1,237 @@ +--- +title: Fieldset +description: Group related form inputs under a shared label for better organization and accessibility. +type: component +category: form +status: stable +since: 1.0.0 +component: AzFieldset +figma: https://figma.com/file/azion-design-system?node-id=fieldset +storybook: https://storybook.azion.com/?path=/story/form-fieldset +source: https://github.com/aziontech/webkit/tree/main/packages/components/src/Fieldset +related: + - Form + - Input + - Select + - Checkbox +tags: + - form + - grouping + - accessibility +anatomy: + - label: Fieldset Container + description: The grouping container with border styling + - label: Legend + description: The title/label for the group of inputs + - label: Content Area + description: The area containing grouped form controls +accessibility: + keyboard: + - keys: Tab + action: Moves focus to the first focusable element within the fieldset + aria: + - attribute: aria-describedby + usage: Can reference a description for the fieldset group + - attribute: aria-required="true" + usage: When all fields in the group are required + wcag: + - "1.3.1 Info and Relationships" + - "3.3.2 Labels or Instructions" + notes: + - Native
and elements provide built-in accessibility + - Screen readers announce the legend when entering the fieldset +api: + props: + - name: legend + type: "string" + default: "undefined" + required: false + description: The text for the fieldset legend + - name: disabled + type: "boolean" + default: "false" + required: false + description: Whether all controls in the fieldset are disabled + - name: required + type: "boolean" + default: "false" + required: false + description: Whether all fields in the group are required + - name: variant + type: "'default' | 'card' | 'transparent'" + default: "'default'" + required: false + description: Visual style variant + slots: + - name: default + description: Form controls and content inside the fieldset + - name: legend + description: Custom legend content (overrides legend prop) + events: [] +--- + +import { ExampleBlock, Callout } from '@components/docs'; + +## Overview + +The Fieldset component provides a way to group related form controls together. It renders a native HTML `
` element with proper accessibility features, including an associated `` for the group label. + +Fieldsets are essential for creating accessible forms, as they help screen reader users understand the relationship between form controls. + + + This component uses native `
` and `` elements, which provide built-in accessibility benefits without requiring additional ARIA attributes. + + +## When to Use + +Use Fieldset when you need to: + +- Group related form inputs (e.g., address fields, contact information) +- Create logical sections within a larger form +- Improve form accessibility with proper semantic structure +- Apply a shared label or description to multiple inputs +- Disable multiple inputs at once + +## Examples + +### Basic Fieldset + + + + +`} +> +
+ Personal Information +
+
+ + +
+
+ + +
+
+
+ + +### Address Grouping + + + +
+ + +
+`} +> +
+ Shipping Address +
+
+ + +
+
+
+ + +
+
+ + +
+
+
+
+ + +### Disabled State + + + + +`} +> +
+ Disabled Group +
+
+ + +
+
+ + +
+
+
+ + +## States + + +
+ Default + +
+
+ Focused + +
+
+ Disabled + +
+ + +## Do's and Don'ts + + + + + + + + + + diff --git a/apps/ds-docs/src/content/config.ts b/apps/ds-docs/src/content/config.ts index 389c8e23..8f71de20 100644 --- a/apps/ds-docs/src/content/config.ts +++ b/apps/ds-docs/src/content/config.ts @@ -14,8 +14,80 @@ const baseSchema = z.object({ // Status metadata status: z.enum(['stable', 'beta', 'deprecated', 'planned', 'experimental']).optional(), since: z.string().optional(), + deprecatedIn: z.string().optional(), contributors: z.array(z.string()).optional(), lastUpdated: z.coerce.date().optional(), + // Tags for search/categorization + tags: z.array(z.string()).optional(), + // Version and Language (i18n support) + version: z.string().default('v1'), + language: z.string().default('en'), + // Translation metadata + translatedFrom: z.string().optional(), // Original language if translated + translationStatus: z.enum(['complete', 'partial', 'missing']).optional(), +}); + +/** + * Anatomy part definition + */ +const anatomyPartSchema = z.object({ + label: z.string(), + description: z.string().optional(), +}); + +/** + * Keyboard interaction definition + */ +const keyboardInteractionSchema = z.object({ + keys: z.string(), + action: z.string(), +}); + +/** + * ARIA attribute definition + */ +const ariaAttributeSchema = z.object({ + attribute: z.string(), + usage: z.string(), +}); + +/** + * Accessibility metadata schema + */ +const accessibilitySchema = z.object({ + keyboard: z.array(keyboardInteractionSchema).optional(), + aria: z.array(ariaAttributeSchema).optional(), + wcag: z.array(z.string()).optional(), + notes: z.array(z.string()).optional(), +}); + +/** + * Prop definition for API documentation + */ +const propDefinitionSchema = z.object({ + name: z.string(), + type: z.string(), + default: z.string().optional(), + required: z.boolean().optional(), + description: z.string(), +}); + +/** + * Slot definition for API documentation + */ +const slotDefinitionSchema = z.object({ + name: z.string(), + description: z.string(), + props: z.string().optional(), +}); + +/** + * Event definition for API documentation + */ +const eventDefinitionSchema = z.object({ + name: z.string(), + payload: z.string().optional(), + description: z.string(), }); /** @@ -29,6 +101,16 @@ const componentSchema = baseSchema.extend({ storybook: z.string().optional(), figma: z.string().optional(), related: z.array(z.string()).optional(), + // Structured anatomy + anatomy: z.array(anatomyPartSchema).optional(), + // Structured accessibility + accessibility: accessibilitySchema.optional(), + // API documentation (can be manual or generated) + api: z.object({ + props: z.array(propDefinitionSchema).optional(), + slots: z.array(slotDefinitionSchema).optional(), + events: z.array(eventDefinitionSchema).optional(), + }).optional(), }); /** @@ -100,6 +182,13 @@ const contributingSchema = baseSchema.extend({ category: z.enum(['guidelines', 'development', 'documentation', 'pull-requests']).optional(), }); +/** + * Playground documentation schema + */ +const playgroundSchema = baseSchema.extend({ + type: z.literal('playground'), +}); + /** * Define all content collections */ @@ -107,6 +196,7 @@ export const collections = { components: defineCollection({ type: 'content', schema: componentSchema, + format: 'mdx', }), foundations: defineCollection({ type: 'content', @@ -140,6 +230,10 @@ export const collections = { type: 'content', schema: contributingSchema, }), + playground: defineCollection({ + type: 'content', + schema: playgroundSchema, + }), }; /** @@ -154,3 +248,13 @@ export type TemplateFrontmatter = z.infer; export type GuideFrontmatter = z.infer; export type IconFrontmatter = z.infer; export type ContributingFrontmatter = z.infer; +export type PlaygroundFrontmatter = z.infer; + +// Export sub-types for convenience +export type AnatomyPart = z.infer; +export type KeyboardInteraction = z.infer; +export type AriaAttribute = z.infer; +export type AccessibilityMetadata = z.infer; +export type PropDefinition = z.infer; +export type SlotDefinition = z.infer; +export type EventDefinition = z.infer; diff --git a/apps/ds-docs/src/content/patterns/index.md b/apps/ds-docs/src/content/patterns/index.md new file mode 100644 index 00000000..2575b187 --- /dev/null +++ b/apps/ds-docs/src/content/patterns/index.md @@ -0,0 +1,20 @@ +--- +title: Design Patterns +description: Common design patterns and best practices for building with the Azion Design System. +navLabel: Patterns +order: 1 +type: pattern +category: general +--- + +## Overview + +Design patterns are reusable solutions to common problems in interface design. They provide proven approaches to typical UX challenges. + +## Available Patterns + +Pattern documentation is being prepared. Check back soon for detailed pattern references. + + +This section will include patterns like form validation, search experiences, and navigation structures. + diff --git a/apps/ds-docs/src/content/playground/index.md b/apps/ds-docs/src/content/playground/index.md new file mode 100644 index 00000000..dec06588 --- /dev/null +++ b/apps/ds-docs/src/content/playground/index.md @@ -0,0 +1,23 @@ +--- +title: Component Playground +description: Interactive component playground for experimenting with Azion Design System components. +navLabel: Playground +order: 1 +type: playground +--- + +## Overview + +The Component Playground provides an interactive environment for experimenting with Azion Design System components. You can modify props in real-time and see how components behave. + +## Coming Soon + +The playground is currently under development. Check back soon for an interactive component testing experience. + + +The playground will allow you to: +- Select any component from the library +- Modify props and see live updates +- Copy generated code snippets +- Test different states and variants + diff --git a/apps/ds-docs/src/content/templates/index.md b/apps/ds-docs/src/content/templates/index.md new file mode 100644 index 00000000..4690e2d3 --- /dev/null +++ b/apps/ds-docs/src/content/templates/index.md @@ -0,0 +1,20 @@ +--- +title: Page Templates +description: Page templates and layout examples for building applications with the Azion Design System. +navLabel: Templates +order: 1 +type: template +category: general +--- + +## Overview + +Page templates are complete page layouts that combine blocks and components into ready-to-use starting points for common application pages. + +## Available Templates + +Template documentation is being prepared. Check back soon for detailed template references. + + +This section will include templates like dashboards, settings pages, and form layouts. + diff --git a/apps/ds-docs/src/content/tokens/index.md b/apps/ds-docs/src/content/tokens/index.md new file mode 100644 index 00000000..3c4fb11c --- /dev/null +++ b/apps/ds-docs/src/content/tokens/index.md @@ -0,0 +1,25 @@ +--- +title: Design Tokens +description: Design tokens that power the visual language of the Azion Design System. +navLabel: Tokens +order: 1 +type: token +category: color +--- + +## Overview + +Design tokens are the visual design atoms of the design system. They are named entities that store visual design attributes, enabling consistency across products and platforms. + +## Token Categories + +- **Color Tokens** - Semantic and primitive color values +- **Typography Tokens** - Font families, sizes, weights, and line heights +- **Spacing Tokens** - Consistent spacing scale +- **Border Tokens** - Border radius, width, and style values +- **Shadow Tokens** - Elevation and shadow values +- **Motion Tokens** - Animation timing and easing values + + +Token documentation is being prepared. Check back soon for detailed token references. + diff --git a/apps/ds-docs/src/env.d.ts b/apps/ds-docs/src/env.d.ts index 5ebcc226..bfeb7321 100644 --- a/apps/ds-docs/src/env.d.ts +++ b/apps/ds-docs/src/env.d.ts @@ -6,3 +6,9 @@ declare module '*.vue' { const component: DefineComponent<{}, {}, any>; export default component; } + +declare module '*.astro' { + type Props = Record; + const Component: (props: Props) => any; + export default Component; +} diff --git a/apps/ds-docs/src/integrations/search-index.ts b/apps/ds-docs/src/integrations/search-index.ts new file mode 100644 index 00000000..8bd5b252 --- /dev/null +++ b/apps/ds-docs/src/integrations/search-index.ts @@ -0,0 +1,341 @@ +/** + * Astro Integration: Search Index Generator + * + * Generates the search index during the Astro build process. + * This integration hooks into the Astro build lifecycle. + */ + +import type { AstroIntegration } from 'astro'; +import fs from 'fs'; +import path from 'path'; + +// Types +interface SearchIndexEntry { + id: string; + title: string; + section: string; + type: string; + category?: string; + description: string; + headings: string[]; + tags: string[]; + content: string; + url: string; + status?: string; + related?: string[]; + version?: string; + lang?: string; +} + +interface SearchIndex { + meta: { + generated: string; + count: number; + lang: string; + version?: string; + schemaVersion: number; + }; + entries: SearchIndexEntry[]; +} + +/** + * Parse frontmatter from markdown content + */ +function parseFrontmatter(content: string): Record { + const frontmatterMatch = content.match(/^---\n([\s\S]*?)\n---/); + if (!frontmatterMatch) { + return {}; + } + + const frontmatterStr = frontmatterMatch[1]; + const result: Record = {}; + + const lines = frontmatterStr.split('\n'); + let currentKey = ''; + let currentValue: unknown = ''; + let inArray = false; + let arrayValues: unknown[] = []; + + for (const line of lines) { + const keyValueMatch = line.match(/^(\w+):\s*(.*)$/); + + if (keyValueMatch) { + if (currentKey) { + result[currentKey] = inArray ? arrayValues : currentValue; + } + + currentKey = keyValueMatch[1]; + const value = keyValueMatch[2].trim(); + + if (value === '') { + inArray = true; + arrayValues = []; + currentValue = ''; + } else if (value.startsWith('[') && value.endsWith(']')) { + const arrayContent = value.slice(1, -1); + result[currentKey] = arrayContent.split(',').map(s => s.trim().replace(/^['"]|['"]$/g, '')); + currentKey = ''; + inArray = false; + } else if (value.startsWith('"') && value.endsWith('"')) { + result[currentKey] = value.slice(1, -1); + currentKey = ''; + } else if (value.startsWith("'") && value.endsWith("'")) { + result[currentKey] = value.slice(1, -1); + currentKey = ''; + } else { + result[currentKey] = value; + currentKey = ''; + } + } else if (line.startsWith(' - ') && inArray) { + const arrayValue = line.slice(4).trim().replace(/^['"]|['"]$/g, ''); + arrayValues.push(arrayValue); + } + } + + if (currentKey) { + result[currentKey] = inArray ? arrayValues : currentValue; + } + + return result; +} + +/** + * Extract headings from markdown content + */ +function extractHeadings(content: string): string[] { + const headings: string[] = []; + const headingRegex = /^(#{1,6})\s+(.+)$/gm; + + let match; + while ((match = headingRegex.exec(content)) !== null) { + const headingText = match[2] + .replace(/\s*\{#[^}]+\}\s*$/, '') + .replace(/\s*\[#[^}]+\]\s*$/, '') + .trim(); + + if (headingText) { + headings.push(headingText); + } + } + + return headings; +} + +/** + * Extract text content from markdown + */ +function extractTextContent(content: string): string { + let text = content; + + text = text.replace(/^---[\s\S]*?---/, ''); + text = text.replace(/```[\s\S]*?```/g, ' '); + text = text.replace(/`[^`]+`/g, ' '); + text = text.replace(/^import\s+.*$/gm, ''); + text = text.replace(/<[A-Z][a-zA-Z]*[^>]*>[\s\S]*?<\/[A-Z][a-zA-Z]*>/g, ' '); + text = text.replace(/<[A-Z][a-zA-Z]*[^>]*\/>/g, ' '); + text = text.replace(/<[^>]+>/g, ' '); + text = text.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1'); + text = text.replace(/!\[([^\]]*)\]\([^)]+\)/g, ' '); + text = text.replace(/^#{1,6}\s+/gm, ''); + text = text.replace(/[*_]{1,3}([^*_]+)[*_]{1,3}/g, '$1'); + text = text.replace(/^>\s+/gm, ''); + text = text.replace(/^[-*_]{3,}$/gm, ''); + text = text.replace(/^[\s]*[-*+]\s+/gm, ''); + text = text.replace(/^[\s]*\d+\.\s+/gm, ''); + text = text.replace(/[^\w\s.,!?;:'"()-]/g, ' '); + text = text.replace(/\s+/g, ' ').trim(); + + return text; +} + +/** + * Truncate content + */ +function truncateContent(content: string, maxLength: number = 2000): string { + if (content.length <= maxLength) { + return content; + } + + const truncated = content.slice(0, maxLength); + const lastPeriod = truncated.lastIndexOf('.'); + const lastQuestion = truncated.lastIndexOf('?'); + const lastExclaim = truncated.lastIndexOf('!'); + const lastSentenceEnd = Math.max(lastPeriod, lastQuestion, lastExclaim); + + if (lastSentenceEnd > maxLength * 0.7) { + return truncated.slice(0, lastSentenceEnd + 1); + } + + const lastSpace = truncated.lastIndexOf(' '); + if (lastSpace > maxLength * 0.8) { + return truncated.slice(0, lastSpace); + } + + return truncated; +} + +/** + * Map content type from frontmatter + */ +function mapContentType(frontmatter: Record): string { + if (frontmatter.type) { + return frontmatter.type as string; + } + return 'doc'; +} + +/** + * Process a single markdown file + */ +function processMarkdownFile( + filePath: string, + collection: string, + slug: string +): SearchIndexEntry | null { + try { + const content = fs.readFileSync(filePath, 'utf-8'); + const frontmatter = parseFrontmatter(content); + + if (frontmatter.hidden === true) { + return null; + } + + const headings = extractHeadings(content); + const textContent = truncateContent(extractTextContent(content)); + const url = `/${collection}/${slug}`; + + const entry: SearchIndexEntry = { + id: `${collection}/${slug}`, + title: (frontmatter.title as string) || slug, + section: collection, + type: mapContentType(frontmatter), + description: (frontmatter.description as string) || '', + headings, + tags: (frontmatter.tags as string[]) || [], + content: textContent, + url, + }; + + if (frontmatter.category) { + entry.category = frontmatter.category as string; + } + + if (frontmatter.status) { + entry.status = frontmatter.status as string; + } + + if (frontmatter.related) { + entry.related = frontmatter.related as string[]; + } + + if (frontmatter.since) { + entry.version = frontmatter.since as string; + } + + return entry; + } catch (error) { + console.error(`Error processing ${filePath}:`, error); + return null; + } +} + +/** + * Process all content collections + */ +function processCollections(contentDir: string): SearchIndexEntry[] { + const entries: SearchIndexEntry[] = []; + + const collections = [ + 'components', + 'foundations', + 'tokens', + 'blocks', + 'patterns', + 'templates', + 'get-started', + 'icons', + 'contributing', + 'playground', + ]; + + for (const collection of collections) { + const collectionPath = path.join(contentDir, collection); + + if (!fs.existsSync(collectionPath)) { + console.log(`Collection not found: ${collection}`); + continue; + } + + const files = fs.readdirSync(collectionPath); + + for (const file of files) { + if (!file.endsWith('.md')) { + continue; + } + + const slug = file.replace(/\.md$/, ''); + const filePath = path.join(collectionPath, file); + + const entry = processMarkdownFile(filePath, collection, slug); + if (entry) { + entries.push(entry); + } + } + } + + return entries; +} + +/** + * Build the search index + */ +function buildSearchIndex(contentDir: string, outputPath: string): void { + console.log('\n🔍 Building search index...'); + + const entries = processCollections(contentDir); + + const index: SearchIndex = { + meta: { + generated: new Date().toISOString(), + count: entries.length, + lang: 'en', + schemaVersion: 1, + }, + entries, + }; + + const outputDir = path.dirname(outputPath); + if (!fs.existsSync(outputDir)) { + fs.mkdirSync(outputDir, { recursive: true }); + } + + fs.writeFileSync(outputPath, JSON.stringify(index, null, 2)); + + console.log(`✅ Search index built with ${entries.length} entries`); + console.log(` Output: ${outputPath}\n`); +} + +/** + * Astro integration for search index generation + */ +export function searchIndexIntegration(): AstroIntegration { + return { + name: 'search-index', + hooks: { + 'astro:build:done': ({ dir }) => { + const contentDir = path.join(process.cwd(), 'src/content'); + const outputPath = path.join(fileURLToPath(dir), 'search-index.json'); + + buildSearchIndex(contentDir, outputPath); + }, + }, + }; +} + +// Helper for ESM +function fileURLToPath(url: URL | string): string { + if (typeof url === 'string') { + return url; + } + return path.join(url.pathname); +} diff --git a/apps/ds-docs/src/layouts/ComponentPageLayout.astro b/apps/ds-docs/src/layouts/ComponentPageLayout.astro index 65b414bd..89da66eb 100644 --- a/apps/ds-docs/src/layouts/ComponentPageLayout.astro +++ b/apps/ds-docs/src/layouts/ComponentPageLayout.astro @@ -3,13 +3,34 @@ * ComponentPageLayout * * Layout specifically for component documentation pages. - * Supports status badge, metadata links, and API anchor areas. + * Supports status badge, metadata links, structured sections, and API documentation. + * + * Sections: + * - Overview (auto from content) + * - When to use + * - Anatomy + * - Examples + * - States + * - Accessibility + * - API + * - Related */ import DocsShellLayout from './DocsShellLayout.astro'; import PageHeader from '../components/docs/PageHeader.vue'; import MetadataLinks from '../components/docs/MetadataLinks.vue'; +import RelatedLinks from '../components/docs/RelatedLinks.astro'; +import AnatomyBlock from '../components/docs/AnatomyBlock.astro'; +import AccessibilityChecklist from '../components/docs/AccessibilityChecklist.astro'; +import ApiSection from '../components/docs/ApiSection.astro'; import type { Section, NavItem } from '../lib/content/types'; +import type { + PropDefinition, + SlotDefinition, + EventDefinition, + AnatomyPart, + AccessibilityMetadata +} from '../content/config'; interface Props { title: string; @@ -23,6 +44,14 @@ interface Props { storybook?: string; figma?: string; related?: string[]; + // Structured data from frontmatter + anatomy?: AnatomyPart[]; + accessibility?: AccessibilityMetadata; + api?: { + props?: PropDefinition[]; + slots?: SlotDefinition[]; + events?: EventDefinition[]; + }; } const { @@ -36,7 +65,10 @@ const { source, storybook, figma, - related, + related = [], + anatomy, + accessibility, + api, } = Astro.props; // Build metadata links @@ -45,10 +77,17 @@ const metadataLinks = [ storybook ? { label: 'Storybook', href: storybook, icon: 'storybook' } : null, figma ? { label: 'Figma', href: figma, icon: 'figma' } : null, ].filter(Boolean); + +// Build related items +const relatedItems = related.map(name => ({ + title: name, + href: `/components/${name.toLowerCase()}`, + type: 'component' as const, +})); --- -
+
)} - +
- -
- -
+ + {anatomy && anatomy.length > 0 && ( +
+

+ Anatomy +

+ +
+ )} + + + {accessibility && ( +
+

+ Accessibility +

+ +
+ )} + + + {api && (api.props?.length || api.slots?.length || api.events?.length) && ( + + )} + + + {relatedItems.length > 0 && ( + + )}
@@ -95,4 +169,50 @@ const metadataLinks = [ transform: translateY(0); } } + + /* Section styling for consistent spacing */ + .component-content :global(h2) { + @apply text-2xl font-semibold text-text-primary tracking-tight mt-10 mb-4 border-b border-gray-200 pb-2; + } + + .component-content :global(h3) { + @apply text-xl font-semibold text-text-primary mt-8 mb-3; + } + + .component-content :global(h4) { + @apply text-lg font-medium text-text-primary mt-6 mb-2; + } + + /* Paragraph spacing */ + .component-content :global(p) { + @apply mb-4 leading-relaxed text-text-secondary; + } + + /* List styling */ + .component-content :global(ul), + .component-content :global(ol) { + @apply mb-4 pl-6; + } + + .component-content :global(li) { + @apply mb-2 text-text-secondary; + } + + /* Link styling */ + .component-content :global(a) { + @apply text-primary-600 hover:text-primary-700 underline underline-offset-2; + } + + /* Code styling */ + .component-content :global(code) { + @apply bg-gray-100 px-1.5 py-0.5 rounded text-sm font-mono; + } + + .component-content :global(pre) { + @apply bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto my-4; + } + + .component-content :global(pre code) { + @apply bg-transparent p-0; + } diff --git a/apps/ds-docs/src/layouts/DocsLayout.astro b/apps/ds-docs/src/layouts/DocsLayout.astro index e26384dc..1477d95c 100644 --- a/apps/ds-docs/src/layouts/DocsLayout.astro +++ b/apps/ds-docs/src/layouts/DocsLayout.astro @@ -1,5 +1,6 @@ --- import '../styles/global.css'; +import SearchModal from '../components/search/SearchModal.vue'; /** * DocsLayout @@ -86,8 +87,11 @@ const { title, description = 'Azion Design System Documentation' } = Astro.props
- -
+ + + + + diff --git a/apps/ds-docs/src/pages/templates/[slug].astro b/apps/ds-docs/src/pages/templates/[slug].astro new file mode 100644 index 00000000..9bc1396a --- /dev/null +++ b/apps/ds-docs/src/pages/templates/[slug].astro @@ -0,0 +1,28 @@ +--- +import { getCollection } from 'astro:content'; +import DocPageLayout from '../../layouts/DocPageLayout.astro'; +import { getBreadcrumbContext } from '../../lib/content'; +import { markdownComponents } from '../../components/docs'; + +export async function getStaticPaths() { + const entries = await getCollection('templates'); + return entries.map((entry) => ({ + params: { slug: entry.slug }, + props: { entry }, + })); +} + +const { entry } = Astro.props; +const { Content } = await entry.render(); + +const breadcrumb = await getBreadcrumbContext(`/templates/${entry.slug === 'index' ? '' : entry.slug}`); +--- + + + + diff --git a/apps/ds-docs/src/pages/tokens/[slug].astro b/apps/ds-docs/src/pages/tokens/[slug].astro new file mode 100644 index 00000000..04046421 --- /dev/null +++ b/apps/ds-docs/src/pages/tokens/[slug].astro @@ -0,0 +1,28 @@ +--- +import { getCollection } from 'astro:content'; +import DocPageLayout from '../../layouts/DocPageLayout.astro'; +import { getBreadcrumbContext } from '../../lib/content'; +import { markdownComponents } from '../../components/docs'; + +export async function getStaticPaths() { + const entries = await getCollection('tokens'); + return entries.map((entry) => ({ + params: { slug: entry.slug }, + props: { entry }, + })); +} + +const { entry } = Astro.props; +const { Content } = await entry.render(); + +const breadcrumb = await getBreadcrumbContext(`/tokens/${entry.slug === 'index' ? '' : entry.slug}`); +--- + + + + diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 61125c6c..b32a3da2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -79,6 +79,9 @@ importers: apps/ds-docs: dependencies: + '@astrojs/mdx': + specifier: ^4.3.13 + version: 4.3.13(astro@5.18.0(@types/node@25.3.3)(jiti@1.21.7)(rollup@4.59.0)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2)) '@aziontech/icons': specifier: workspace:* version: link:../../packages/icons @@ -281,6 +284,12 @@ packages: '@astrojs/markdown-remark@6.3.10': resolution: {integrity: sha512-kk4HeYR6AcnzC4QV8iSlOfh+N8TZ3MEStxPyenyCtemqn8IpEATBFMTJcfrNW32dgpt6MY3oCkMM/Tv3/I4G3A==} + '@astrojs/mdx@4.3.13': + resolution: {integrity: sha512-IHDHVKz0JfKBy3//52JSiyWv089b7GVSChIXLrlUOoTLWowG3wr2/8hkaEgEyd/vysvNQvGk+QhysXpJW5ve6Q==} + engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0} + peerDependencies: + astro: ^5.0.0 + '@astrojs/prism@3.3.0': resolution: {integrity: sha512-q8VwfU/fDZNoDOf+r7jUnMC2//H2l0TuQ6FkGJL8vD8nw/q5KiL3DS1KKBI3QhI9UQhpJ5dc7AtqfbXWuOgLCQ==} engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0} @@ -1566,6 +1575,9 @@ packages: '@jridgewell/trace-mapping@0.3.31': resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==} + '@mdx-js/mdx@3.1.1': + resolution: {integrity: sha512-f6ZO2ifpwAQIpzGWaBQT2TXxPv6z3RBzQKpVftEWN78Vl/YweF1uwussDx8ECAXVtr3Rs89fKyG9YlzUs9DyGQ==} + '@napi-rs/lzma-android-arm-eabi@1.4.5': resolution: {integrity: sha512-Up4gpyw2SacmyKWWEib06GhiDdF+H+CCU0LAV8pnM4aJIDqKKd5LHSlBht83Jut6frkB0vwEPmAkv4NjQ5u//Q==} engines: {node: '>= 10'} @@ -2332,6 +2344,9 @@ packages: '@types/eslint@9.6.1': resolution: {integrity: sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==} + '@types/estree-jsx@1.0.5': + resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==} + '@types/estree@1.0.8': resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==} @@ -2344,6 +2359,9 @@ packages: '@types/mdast@4.0.4': resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==} + '@types/mdx@2.0.13': + resolution: {integrity: sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==} + '@types/ms@2.1.0': resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==} @@ -2359,6 +2377,9 @@ packages: '@types/sax@1.2.7': resolution: {integrity: sha512-rO73L89PJxeYM3s3pPPjiPgVVcymqU490g0YO5n5By0k2Erzj6tay/4lr1CHAAU4JyOWd1rpQ8bCf6cZfHU96A==} + '@types/unist@2.0.11': + resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==} + '@types/unist@3.0.3': resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==} @@ -2686,6 +2707,10 @@ packages: resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==} engines: {node: '>=4'} + astring@1.9.0: + resolution: {integrity: sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg==} + hasBin: true + astro@5.18.0: resolution: {integrity: sha512-CHiohwJIS4L0G6/IzE1Fx3dgWqXBCXus/od0eGUfxrZJD2um2pE7ehclMmgL/fXqbU7NfE1Ze2pq34h2QaA6iQ==} engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0'} @@ -2949,6 +2974,9 @@ packages: character-entities@2.0.2: resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==} + character-reference-invalid@2.0.1: + resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==} + check-error@2.1.3: resolution: {integrity: sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA==} engines: {node: '>= 16'} @@ -3037,6 +3065,9 @@ packages: resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==} engines: {node: '>=6'} + collapse-white-space@2.1.0: + resolution: {integrity: sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==} + color-convert@1.9.3: resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==} @@ -3481,6 +3512,12 @@ packages: es6-weak-map@2.0.3: resolution: {integrity: sha512-p5um32HOTO1kP+w7PRnB+5lQ43Z6muuMuIMffvDN8ZB4GcnjLBV6zGStpbASIMk4DCAvEaamhe2zhyCb/QXXsA==} + esast-util-from-estree@2.0.0: + resolution: {integrity: sha512-4CyanoAudUSBAn5K13H4JhsMH6L9ZP7XbLVe/dKybkxMO7eDyLsT8UHl9TRNrU2Gr9nz+FovfSIjuXWJ81uVwQ==} + + esast-util-from-js@2.0.1: + resolution: {integrity: sha512-8Ja+rNJ0Lt56Pcf3TAmpBZjmx8ZcK5Ts4cAzIOjsjevg9oSXJnl6SUQ2EevU8tv3h6ZLWmoKL5H4fgWvdvfETw==} + esbuild@0.25.12: resolution: {integrity: sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==} engines: {node: '>=18'} @@ -3612,6 +3649,24 @@ packages: resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==} engines: {node: '>=4.0'} + estree-util-attach-comments@3.0.0: + resolution: {integrity: sha512-cKUwm/HUcTDsYh/9FgnuFqpfquUbwIqwKM26BVCGDPVgvaCl/nDCCjUfiLlx6lsEZ3Z4RFxNbOQ60pkaEwFxGw==} + + estree-util-build-jsx@3.0.1: + resolution: {integrity: sha512-8U5eiL6BTrPxp/CHbs2yMgP8ftMhR5ww1eIKoWRMlqvltHF8fZn5LRDvTKuxD3DUn+shRbLGqXemcP51oFCsGQ==} + + estree-util-is-identifier-name@3.0.0: + resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==} + + estree-util-scope@1.0.0: + resolution: {integrity: sha512-2CAASclonf+JFWBNJPndcOpA8EMJwa0Q8LUFJEKqXLW6+qBvbFZuF5gItbQOs/umBUkjviCSDCbBwU2cXbmrhQ==} + + estree-util-to-js@2.0.0: + resolution: {integrity: sha512-WDF+xj5rRWmD5tj6bIqRi6CkLIXbbNQUcxQHzGysQzvHmdYG2G7p/Tf0J0gpxGgkeMZNTIjT/AoSvC9Xehcgdg==} + + estree-util-visit@2.0.0: + resolution: {integrity: sha512-m5KgiH85xAhhW8Wta0vShLcUvOsh3LLPI2YVwcbio1l7E09NTLL1EyMZFM1OyWowoH0skScNbhOPl4kcBgzTww==} + estree-walker@2.0.2: resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==} @@ -3987,9 +4042,15 @@ packages: hast-util-raw@9.1.0: resolution: {integrity: sha512-Y8/SBAHkZGoNkpzqqfCldijcuUKh7/su31kEBp67cFY09Wy0mTRgtsLYsiIxMJxlu0f6AA5SUTbDR8K0rxnbUw==} + hast-util-to-estree@3.1.3: + resolution: {integrity: sha512-48+B/rJWAp0jamNbAAf9M7Uf//UVqAoMmgXhBdxTDJLGKY+LRnZ99qcG+Qjl5HfMpYNzS5v4EAwVEF34LeAj7w==} + hast-util-to-html@9.0.5: resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==} + hast-util-to-jsx-runtime@2.3.6: + resolution: {integrity: sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==} + hast-util-to-parse5@8.0.1: resolution: {integrity: sha512-MlWT6Pjt4CG9lFCjiz4BH7l9wmrMkfkJYCxFwKQic8+RTZgWPuWxwAfjJElsXkex7DJjfSJsQIt931ilUgmwdA==} @@ -4107,6 +4168,9 @@ packages: ini@1.3.8: resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==} + inline-style-parser@0.2.7: + resolution: {integrity: sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==} + into-stream@7.0.0: resolution: {integrity: sha512-2dYz766i9HprMBasCMvHMuazJ7u4WzhJwo5kb3iPSiW/iRYV6uPari3zHoqZlnuaR7V1bEiNMxikhp37rdBXbw==} engines: {node: '>=12'} @@ -4126,6 +4190,12 @@ packages: iron-webcrypto@1.2.1: resolution: {integrity: sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg==} + is-alphabetical@2.0.1: + resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==} + + is-alphanumerical@2.0.1: + resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==} + is-arguments@1.2.0: resolution: {integrity: sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==} engines: {node: '>= 0.4'} @@ -4145,6 +4215,9 @@ packages: resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==} engines: {node: '>= 0.4'} + is-decimal@2.0.1: + resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==} + is-docker@3.0.0: resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} @@ -4166,6 +4239,9 @@ packages: resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==} engines: {node: '>=0.10.0'} + is-hexadecimal@2.0.1: + resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==} + is-inside-container@1.0.0: resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==} engines: {node: '>=14.16'} @@ -4463,6 +4539,10 @@ packages: resolution: {integrity: sha512-QMjGbFTP0blj97EeidG5hk/QhKQ3T4ICckQGLgz38QF7Vgbk6e6FTARN8KhKxyBbWn8R0HU+bnw8aSoFPD4qtQ==} engines: {node: ^18.17.0 || >=20.5.0} + markdown-extensions@2.0.0: + resolution: {integrity: sha512-o5vL7aDWatOTX8LzaS1WMoaoxIiLRQJuIKKe2wAw6IeULDHaqbiqiggmx+pKvZDb1Sj+pE46Sn1T7lCqfFtg1Q==} + engines: {node: '>=16'} + markdown-table@3.0.4: resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==} @@ -4516,6 +4596,18 @@ packages: mdast-util-gfm@3.1.0: resolution: {integrity: sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==} + mdast-util-mdx-expression@2.0.1: + resolution: {integrity: sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==} + + mdast-util-mdx-jsx@3.2.0: + resolution: {integrity: sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==} + + mdast-util-mdx@3.0.0: + resolution: {integrity: sha512-JfbYLAW7XnYTTbUsmpu0kdBUVe+yKVJZBItEjwyYJiDJuZ9w4eeaqks4HQO+R7objWgS2ymV60GYpI14Ug554w==} + + mdast-util-mdxjs-esm@2.0.1: + resolution: {integrity: sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==} + mdast-util-phrasing@4.1.0: resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==} @@ -4576,12 +4668,30 @@ packages: micromark-extension-gfm@3.0.0: resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==} + micromark-extension-mdx-expression@3.0.1: + resolution: {integrity: sha512-dD/ADLJ1AeMvSAKBwO22zG22N4ybhe7kFIZ3LsDI0GlsNr2A3KYxb0LdC1u5rj4Nw+CHKY0RVdnHX8vj8ejm4Q==} + + micromark-extension-mdx-jsx@3.0.2: + resolution: {integrity: sha512-e5+q1DjMh62LZAJOnDraSSbDMvGJ8x3cbjygy2qFEi7HCeUT4BDKCvMozPozcD6WmOt6sVvYDNBKhFSz3kjOVQ==} + + micromark-extension-mdx-md@2.0.0: + resolution: {integrity: sha512-EpAiszsB3blw4Rpba7xTOUptcFeBFi+6PY8VnJ2hhimH+vCQDirWgsMpz7w1XcZE7LVrSAUGb9VJpG9ghlYvYQ==} + + micromark-extension-mdxjs-esm@3.0.0: + resolution: {integrity: sha512-DJFl4ZqkErRpq/dAPyeWp15tGrcrrJho1hKK5uBS70BCtfrIFg81sqcTVu3Ta+KD1Tk5vAtBNElWxtAa+m8K9A==} + + micromark-extension-mdxjs@3.0.0: + resolution: {integrity: sha512-A873fJfhnJ2siZyUrJ31l34Uqwy4xIFmvPY1oj+Ean5PHcPBYzEsvqvWGaWcfEIr11O5Dlw3p2y0tZWpKHDejQ==} + micromark-factory-destination@2.0.1: resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==} micromark-factory-label@2.0.1: resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==} + micromark-factory-mdx-expression@2.0.3: + resolution: {integrity: sha512-kQnEtA3vzucU2BkrIa8/VaSAsP+EJ3CKOvhMuJgOEGg9KDC6OAY6nSnNDVRiVNRqj7Y4SlSzcStaH/5jge8JdQ==} + micromark-factory-space@2.0.1: resolution: {integrity: sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==} @@ -4612,6 +4722,9 @@ packages: micromark-util-encode@2.0.1: resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==} + micromark-util-events-to-acorn@2.0.3: + resolution: {integrity: sha512-jmsiEIiZ1n7X1Rr5k8wVExBQCg5jy4UXVADItHmNk1zkwEVhBuIUKRu3fqv+hs4nxLISi2DQGlqIOGiFxgbfHg==} + micromark-util-html-tag-name@2.0.1: resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==} @@ -5069,6 +5182,9 @@ packages: resolution: {integrity: sha512-fIYNuZ/HastSb80baGOuPRo1O9cf4baWw5WsAp7dBuUzeTD/BoaG8sVTdlPFksBE2lF21dN+A1AnrpIjSWqHHg==} engines: {node: '>= 0.10'} + parse-entities@4.0.2: + resolution: {integrity: sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==} + parse-json@4.0.0: resolution: {integrity: sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==} engines: {node: '>=4'} @@ -5415,6 +5531,20 @@ packages: resolution: {integrity: sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==} engines: {node: '>= 4'} + recma-build-jsx@1.0.0: + resolution: {integrity: sha512-8GtdyqaBcDfva+GUKDr3nev3VpKAhup1+RvkMvUxURHpW7QyIvk9F5wz7Vzo06CEMSilw6uArgRqhpiUcWp8ew==} + + recma-jsx@1.0.1: + resolution: {integrity: sha512-huSIy7VU2Z5OLv6oFLosQGGDqPqdO1iq6bWNAdhzMxSJP7RAso4fCZ1cKu8j9YHCZf3TPrq4dw3okhrylgcd7w==} + peerDependencies: + acorn: ^6.0.0 || ^7.0.0 || ^8.0.0 + + recma-parse@1.0.0: + resolution: {integrity: sha512-OYLsIGBB5Y5wjnSnQW6t3Xg7q3fQ7FWbw/vcXtORTnyaSFscOtABg+7Pnz6YZ6c27fG1/aN8CjfwoUEUIdwqWQ==} + + recma-stringify@1.0.0: + resolution: {integrity: sha512-cjwII1MdIIVloKvC9ErQ+OgAtwHBmcZ0Bg4ciz78FtbT8In39aAYbaA7zvxQ61xVMSPE8WxhLwLbhif4Js2C+g==} + redent@3.0.0: resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==} engines: {node: '>=8'} @@ -5456,6 +5586,9 @@ packages: rehype-raw@7.0.0: resolution: {integrity: sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==} + rehype-recma@1.0.0: + resolution: {integrity: sha512-lqA4rGUf1JmacCNWWZx0Wv1dHqMwxzsDWYMTowuplHF3xH0N/MmrZ/G3BDZnzAkRmxDadujCjaKM2hqYdCBOGw==} + rehype-stringify@10.0.1: resolution: {integrity: sha512-k9ecfXHmIPuFVI61B9DeLPN0qFHfawM6RsuX48hoqlaKSF61RskNjSm1lI8PhBEM0MRdLxVVm4WmTqJQccH9mA==} @@ -5465,6 +5598,9 @@ packages: remark-gfm@4.0.1: resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==} + remark-mdx@3.1.1: + resolution: {integrity: sha512-Pjj2IYlUY3+D8x00UJsIOg5BEvfMyeI+2uLPn9VO9Wg4MEtN/VTIq2NEJQfde9PnX15KgtHyl9S0BcTnWrIuWg==} + remark-parse@11.0.0: resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==} @@ -5714,6 +5850,10 @@ packages: resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==} engines: {node: '>=0.10.0'} + source-map@0.7.6: + resolution: {integrity: sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==} + engines: {node: '>= 12'} + space-separated-tokens@2.0.2: resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==} @@ -5841,6 +5981,12 @@ packages: strip-literal@3.1.0: resolution: {integrity: sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==} + style-to-js@1.1.21: + resolution: {integrity: sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==} + + style-to-object@1.0.14: + resolution: {integrity: sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==} + sucrase@3.35.1: resolution: {integrity: sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==} engines: {node: '>=16 || 14 >=14.17'} @@ -6197,6 +6343,9 @@ packages: unist-util-modify-children@4.0.0: resolution: {integrity: sha512-+tdN5fGNddvsQdIzUF3Xx82CU9sMM+fA0dLgR9vOmT0oPT2jH+P1nd5lSqfCfXAw+93NhcXNY2qqvTUtE4cQkw==} + unist-util-position-from-estree@2.0.0: + resolution: {integrity: sha512-KaFVRjoqLyF6YXCbVLNad/eS4+OfPQQn2yOd7zF/h5T/CSL2v8NpN6a5TPvtbXthAGw5nG+PuTtq+DdIZr+cRQ==} + unist-util-position@5.0.0: resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==} @@ -6742,6 +6891,25 @@ snapshots: transitivePeerDependencies: - supports-color + '@astrojs/mdx@4.3.13(astro@5.18.0(@types/node@25.3.3)(jiti@1.21.7)(rollup@4.59.0)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2))': + dependencies: + '@astrojs/markdown-remark': 6.3.10 + '@mdx-js/mdx': 3.1.1 + acorn: 8.16.0 + astro: 5.18.0(@types/node@25.3.3)(jiti@1.21.7)(rollup@4.59.0)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2) + es-module-lexer: 1.7.0 + estree-util-visit: 2.0.0 + hast-util-to-html: 9.0.5 + piccolore: 0.1.3 + rehype-raw: 7.0.0 + remark-gfm: 4.0.1 + remark-smartypants: 3.0.2 + source-map: 0.7.6 + unist-util-visit: 5.1.0 + vfile: 6.0.3 + transitivePeerDependencies: + - supports-color + '@astrojs/prism@3.3.0': dependencies: prismjs: 1.30.0 @@ -8029,6 +8197,36 @@ snapshots: '@jridgewell/resolve-uri': 3.1.2 '@jridgewell/sourcemap-codec': 1.5.5 + '@mdx-js/mdx@3.1.1': + dependencies: + '@types/estree': 1.0.8 + '@types/estree-jsx': 1.0.5 + '@types/hast': 3.0.4 + '@types/mdx': 2.0.13 + acorn: 8.16.0 + collapse-white-space: 2.1.0 + devlop: 1.1.0 + estree-util-is-identifier-name: 3.0.0 + estree-util-scope: 1.0.0 + estree-walker: 3.0.3 + hast-util-to-jsx-runtime: 2.3.6 + markdown-extensions: 2.0.0 + recma-build-jsx: 1.0.0 + recma-jsx: 1.0.1(acorn@8.16.0) + recma-stringify: 1.0.0 + rehype-recma: 1.0.0 + remark-mdx: 3.1.1 + remark-parse: 11.0.0 + remark-rehype: 11.1.2 + source-map: 0.7.6 + unified: 11.0.5 + unist-util-position-from-estree: 2.0.0 + unist-util-stringify-position: 4.0.0 + unist-util-visit: 5.1.0 + vfile: 6.0.3 + transitivePeerDependencies: + - supports-color + '@napi-rs/lzma-android-arm-eabi@1.4.5': optional: true @@ -8766,6 +8964,10 @@ snapshots: '@types/estree': 1.0.8 '@types/json-schema': 7.0.15 + '@types/estree-jsx@1.0.5': + dependencies: + '@types/estree': 1.0.8 + '@types/estree@1.0.8': {} '@types/hast@3.0.4': @@ -8778,6 +8980,8 @@ snapshots: dependencies: '@types/unist': 3.0.3 + '@types/mdx@2.0.13': {} + '@types/ms@2.1.0': {} '@types/nlcst@2.0.3': @@ -8794,6 +8998,8 @@ snapshots: dependencies: '@types/node': 25.3.3 + '@types/unist@2.0.11': {} + '@types/unist@3.0.3': {} '@types/web-bluetooth@0.0.20': {} @@ -9212,6 +9418,8 @@ snapshots: dependencies: tslib: 2.8.1 + astring@1.9.0: {} + astro@5.18.0(@types/node@25.3.3)(jiti@1.21.7)(rollup@4.59.0)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2): dependencies: '@astrojs/compiler': 2.13.1 @@ -9658,6 +9866,8 @@ snapshots: character-entities@2.0.2: {} + character-reference-invalid@2.0.1: {} + check-error@2.1.3: {} chokidar@3.6.0: @@ -9746,6 +9956,8 @@ snapshots: clsx@2.1.1: {} + collapse-white-space@2.1.0: {} + color-convert@1.9.3: dependencies: color-name: 1.1.3 @@ -10216,6 +10428,20 @@ snapshots: es6-iterator: 2.0.3 es6-symbol: 3.1.4 + esast-util-from-estree@2.0.0: + dependencies: + '@types/estree-jsx': 1.0.5 + devlop: 1.1.0 + estree-util-visit: 2.0.0 + unist-util-position-from-estree: 2.0.0 + + esast-util-from-js@2.0.1: + dependencies: + '@types/estree-jsx': 1.0.5 + acorn: 8.16.0 + esast-util-from-estree: 2.0.0 + vfile-message: 4.0.3 + esbuild@0.25.12: optionalDependencies: '@esbuild/aix-ppc64': 0.25.12 @@ -10422,6 +10648,35 @@ snapshots: estraverse@5.3.0: {} + estree-util-attach-comments@3.0.0: + dependencies: + '@types/estree': 1.0.8 + + estree-util-build-jsx@3.0.1: + dependencies: + '@types/estree-jsx': 1.0.5 + devlop: 1.1.0 + estree-util-is-identifier-name: 3.0.0 + estree-walker: 3.0.3 + + estree-util-is-identifier-name@3.0.0: {} + + estree-util-scope@1.0.0: + dependencies: + '@types/estree': 1.0.8 + devlop: 1.1.0 + + estree-util-to-js@2.0.0: + dependencies: + '@types/estree-jsx': 1.0.5 + astring: 1.9.0 + source-map: 0.7.6 + + estree-util-visit@2.0.0: + dependencies: + '@types/estree-jsx': 1.0.5 + '@types/unist': 3.0.3 + estree-walker@2.0.2: {} estree-walker@3.0.3: @@ -10869,6 +11124,27 @@ snapshots: web-namespaces: 2.0.1 zwitch: 2.0.4 + hast-util-to-estree@3.1.3: + dependencies: + '@types/estree': 1.0.8 + '@types/estree-jsx': 1.0.5 + '@types/hast': 3.0.4 + comma-separated-tokens: 2.0.3 + devlop: 1.1.0 + estree-util-attach-comments: 3.0.0 + estree-util-is-identifier-name: 3.0.0 + hast-util-whitespace: 3.0.0 + mdast-util-mdx-expression: 2.0.1 + mdast-util-mdx-jsx: 3.2.0 + mdast-util-mdxjs-esm: 2.0.1 + property-information: 7.1.0 + space-separated-tokens: 2.0.2 + style-to-js: 1.1.21 + unist-util-position: 5.0.0 + zwitch: 2.0.4 + transitivePeerDependencies: + - supports-color + hast-util-to-html@9.0.5: dependencies: '@types/hast': 3.0.4 @@ -10883,6 +11159,26 @@ snapshots: stringify-entities: 4.0.4 zwitch: 2.0.4 + hast-util-to-jsx-runtime@2.3.6: + dependencies: + '@types/estree': 1.0.8 + '@types/hast': 3.0.4 + '@types/unist': 3.0.3 + comma-separated-tokens: 2.0.3 + devlop: 1.1.0 + estree-util-is-identifier-name: 3.0.0 + hast-util-whitespace: 3.0.0 + mdast-util-mdx-expression: 2.0.1 + mdast-util-mdx-jsx: 3.2.0 + mdast-util-mdxjs-esm: 2.0.1 + property-information: 7.1.0 + space-separated-tokens: 2.0.2 + style-to-js: 1.1.21 + unist-util-position: 5.0.0 + vfile-message: 4.0.3 + transitivePeerDependencies: + - supports-color + hast-util-to-parse5@8.0.1: dependencies: '@types/hast': 3.0.4 @@ -11001,6 +11297,8 @@ snapshots: ini@1.3.8: {} + inline-style-parser@0.2.7: {} + into-stream@7.0.0: dependencies: from2: 2.3.0 @@ -11019,6 +11317,13 @@ snapshots: iron-webcrypto@1.2.1: {} + is-alphabetical@2.0.1: {} + + is-alphanumerical@2.0.1: + dependencies: + is-alphabetical: 2.0.1 + is-decimal: 2.0.1 + is-arguments@1.2.0: dependencies: call-bound: 1.0.4 @@ -11036,6 +11341,8 @@ snapshots: dependencies: hasown: 2.0.2 + is-decimal@2.0.1: {} + is-docker@3.0.0: {} is-extglob@2.1.1: {} @@ -11054,6 +11361,8 @@ snapshots: dependencies: is-extglob: 2.1.1 + is-hexadecimal@2.0.1: {} + is-inside-container@1.0.0: dependencies: is-docker: 3.0.0 @@ -11337,6 +11646,8 @@ snapshots: transitivePeerDependencies: - supports-color + markdown-extensions@2.0.0: {} + markdown-table@3.0.4: {} marked-terminal@7.3.0(marked@12.0.2): @@ -11459,6 +11770,55 @@ snapshots: transitivePeerDependencies: - supports-color + mdast-util-mdx-expression@2.0.1: + dependencies: + '@types/estree-jsx': 1.0.5 + '@types/hast': 3.0.4 + '@types/mdast': 4.0.4 + devlop: 1.1.0 + mdast-util-from-markdown: 2.0.3 + mdast-util-to-markdown: 2.1.2 + transitivePeerDependencies: + - supports-color + + mdast-util-mdx-jsx@3.2.0: + dependencies: + '@types/estree-jsx': 1.0.5 + '@types/hast': 3.0.4 + '@types/mdast': 4.0.4 + '@types/unist': 3.0.3 + ccount: 2.0.1 + devlop: 1.1.0 + mdast-util-from-markdown: 2.0.3 + mdast-util-to-markdown: 2.1.2 + parse-entities: 4.0.2 + stringify-entities: 4.0.4 + unist-util-stringify-position: 4.0.0 + vfile-message: 4.0.3 + transitivePeerDependencies: + - supports-color + + mdast-util-mdx@3.0.0: + dependencies: + mdast-util-from-markdown: 2.0.3 + mdast-util-mdx-expression: 2.0.1 + mdast-util-mdx-jsx: 3.2.0 + mdast-util-mdxjs-esm: 2.0.1 + mdast-util-to-markdown: 2.1.2 + transitivePeerDependencies: + - supports-color + + mdast-util-mdxjs-esm@2.0.1: + dependencies: + '@types/estree-jsx': 1.0.5 + '@types/hast': 3.0.4 + '@types/mdast': 4.0.4 + devlop: 1.1.0 + mdast-util-from-markdown: 2.0.3 + mdast-util-to-markdown: 2.1.2 + transitivePeerDependencies: + - supports-color + mdast-util-phrasing@4.1.0: dependencies: '@types/mdast': 4.0.4 @@ -11592,6 +11952,57 @@ snapshots: micromark-util-combine-extensions: 2.0.1 micromark-util-types: 2.0.2 + micromark-extension-mdx-expression@3.0.1: + dependencies: + '@types/estree': 1.0.8 + devlop: 1.1.0 + micromark-factory-mdx-expression: 2.0.3 + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-events-to-acorn: 2.0.3 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-mdx-jsx@3.0.2: + dependencies: + '@types/estree': 1.0.8 + devlop: 1.1.0 + estree-util-is-identifier-name: 3.0.0 + micromark-factory-mdx-expression: 2.0.3 + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-events-to-acorn: 2.0.3 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + vfile-message: 4.0.3 + + micromark-extension-mdx-md@2.0.0: + dependencies: + micromark-util-types: 2.0.2 + + micromark-extension-mdxjs-esm@3.0.0: + dependencies: + '@types/estree': 1.0.8 + devlop: 1.1.0 + micromark-core-commonmark: 2.0.3 + micromark-util-character: 2.1.1 + micromark-util-events-to-acorn: 2.0.3 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + unist-util-position-from-estree: 2.0.0 + vfile-message: 4.0.3 + + micromark-extension-mdxjs@3.0.0: + dependencies: + acorn: 8.16.0 + acorn-jsx: 5.3.2(acorn@8.16.0) + micromark-extension-mdx-expression: 3.0.1 + micromark-extension-mdx-jsx: 3.0.2 + micromark-extension-mdx-md: 2.0.0 + micromark-extension-mdxjs-esm: 3.0.0 + micromark-util-combine-extensions: 2.0.1 + micromark-util-types: 2.0.2 + micromark-factory-destination@2.0.1: dependencies: micromark-util-character: 2.1.1 @@ -11605,6 +12016,18 @@ snapshots: micromark-util-symbol: 2.0.1 micromark-util-types: 2.0.2 + micromark-factory-mdx-expression@2.0.3: + dependencies: + '@types/estree': 1.0.8 + devlop: 1.1.0 + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-events-to-acorn: 2.0.3 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + unist-util-position-from-estree: 2.0.0 + vfile-message: 4.0.3 + micromark-factory-space@2.0.1: dependencies: micromark-util-character: 2.1.1 @@ -11657,6 +12080,16 @@ snapshots: micromark-util-encode@2.0.1: {} + micromark-util-events-to-acorn@2.0.3: + dependencies: + '@types/estree': 1.0.8 + '@types/unist': 3.0.3 + devlop: 1.1.0 + estree-util-visit: 2.0.0 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + vfile-message: 4.0.3 + micromark-util-html-tag-name@2.0.1: {} micromark-util-normalize-identifier@2.0.1: @@ -12057,6 +12490,16 @@ snapshots: pbkdf2: 3.1.5 safe-buffer: 5.2.1 + parse-entities@4.0.2: + dependencies: + '@types/unist': 2.0.11 + character-entities-legacy: 3.0.0 + character-reference-invalid: 2.0.1 + decode-named-character-reference: 1.3.0 + is-alphanumerical: 2.0.1 + is-decimal: 2.0.1 + is-hexadecimal: 2.0.1 + parse-json@4.0.0: dependencies: error-ex: 1.3.4 @@ -12379,6 +12822,35 @@ snapshots: tiny-invariant: 1.3.3 tslib: 2.8.1 + recma-build-jsx@1.0.0: + dependencies: + '@types/estree': 1.0.8 + estree-util-build-jsx: 3.0.1 + vfile: 6.0.3 + + recma-jsx@1.0.1(acorn@8.16.0): + dependencies: + acorn: 8.16.0 + acorn-jsx: 5.3.2(acorn@8.16.0) + estree-util-to-js: 2.0.0 + recma-parse: 1.0.0 + recma-stringify: 1.0.0 + unified: 11.0.5 + + recma-parse@1.0.0: + dependencies: + '@types/estree': 1.0.8 + esast-util-from-js: 2.0.1 + unified: 11.0.5 + vfile: 6.0.3 + + recma-stringify@1.0.0: + dependencies: + '@types/estree': 1.0.8 + estree-util-to-js: 2.0.0 + unified: 11.0.5 + vfile: 6.0.3 + redent@3.0.0: dependencies: indent-string: 4.0.0 @@ -12431,6 +12903,14 @@ snapshots: hast-util-raw: 9.1.0 vfile: 6.0.3 + rehype-recma@1.0.0: + dependencies: + '@types/estree': 1.0.8 + '@types/hast': 3.0.4 + hast-util-to-estree: 3.1.3 + transitivePeerDependencies: + - supports-color + rehype-stringify@10.0.1: dependencies: '@types/hast': 3.0.4 @@ -12455,6 +12935,13 @@ snapshots: transitivePeerDependencies: - supports-color + remark-mdx@3.1.1: + dependencies: + mdast-util-mdx: 3.0.0 + micromark-extension-mdxjs: 3.0.0 + transitivePeerDependencies: + - supports-color + remark-parse@11.0.0: dependencies: '@types/mdast': 4.0.4 @@ -12819,6 +13306,8 @@ snapshots: source-map@0.6.1: {} + source-map@0.7.6: {} + space-separated-tokens@2.0.2: {} spawn-error-forwarder@1.0.0: {} @@ -12960,6 +13449,14 @@ snapshots: dependencies: js-tokens: 9.0.1 + style-to-js@1.1.21: + dependencies: + style-to-object: 1.0.14 + + style-to-object@1.0.14: + dependencies: + inline-style-parser: 0.2.7 + sucrase@3.35.1: dependencies: '@jridgewell/gen-mapping': 0.3.13 @@ -13339,6 +13836,10 @@ snapshots: '@types/unist': 3.0.3 array-iterate: 2.0.1 + unist-util-position-from-estree@2.0.0: + dependencies: + '@types/unist': 3.0.3 + unist-util-position@5.0.0: dependencies: '@types/unist': 3.0.3 From f445850c4f51bc1bbb0bd682198a6882422012ae Mon Sep 17 00:00:00 2001 From: Eduardo de Cesaro <44036260+cesaroeduardo@users.noreply.github.com> Date: Sun, 8 Mar 2026 19:20:22 -0300 Subject: [PATCH 03/50] feat: i18n and component status --- .../ds-docs/.astro/collections/pt.schema.json | 921 ++++++++++++++++++ apps/ds-docs/.astro/content-modules.mjs | 4 +- apps/ds-docs/.astro/content.d.ts | 10 + apps/ds-docs/.astro/data-store.json | 2 +- apps/ds-docs/i18n/en.json | 126 +++ apps/ds-docs/i18n/pt.json | 126 +++ .../docs/ComponentsStatusTable.astro | 307 ++++++ .../src/components/docs/DocsHeader.vue | 101 +- .../src/components/docs/DocsSidebar.vue | 35 +- .../src/components/docs/DocsSidebarItem.vue | 21 +- .../components/docs/DocsSidebarSection.vue | 52 +- .../src/components/docs/LanguageSwitcher.vue | 66 +- .../components/docs/ProgressStatusBadge.vue | 74 ++ apps/ds-docs/src/components/docs/Tabs.astro | 191 ++++ apps/ds-docs/src/components/docs/Tabs.vue | 185 ++++ .../src/components/docs/VersionSwitcher.vue | 24 +- apps/ds-docs/src/components/docs/index.ts | 7 + .../src/components/search/SearchModal.vue | 25 +- .../src/content/components/fieldset.mdx | 16 +- apps/ds-docs/src/content/config.ts | 21 + .../src/content/pt/components/button.mdx | 205 ++++ .../src/content/pt/components/fieldset.mdx | 263 +++++ .../src/content/pt/components/index.md | 51 + .../src/content/pt/foundations/color.md | 127 +++ .../src/content/pt/foundations/index.md | 51 + .../src/content/pt/get-started/index.md | 46 + .../content/pt/get-started/installation.md | 116 +++ apps/ds-docs/src/data/README.md | 162 +++ apps/ds-docs/src/data/component-status.ts | 263 +++++ apps/ds-docs/src/env.d.ts | 6 + apps/ds-docs/src/layouts/BaseLayout.astro | 8 +- .../src/layouts/ComponentPageLayout.astro | 16 +- apps/ds-docs/src/layouts/DocPageLayout.astro | 10 +- apps/ds-docs/src/layouts/DocsLayout.astro | 167 ++-- .../ds-docs/src/layouts/DocsShellLayout.astro | 55 +- apps/ds-docs/src/lib/content/navigation.ts | 20 +- .../src/lib/docs/validateFrontmatter.ts | 0 apps/ds-docs/src/lib/i18n/index.ts | 224 +++++ apps/ds-docs/src/pages/components/index.astro | 100 +- .../ds-docs/src/pages/get-started/index.astro | 6 +- apps/ds-docs/src/pages/pt/[...path].astro | 110 +++ .../src/pages/pt/components/index.astro | 114 +++ 42 files changed, 4208 insertions(+), 226 deletions(-) create mode 100644 apps/ds-docs/.astro/collections/pt.schema.json create mode 100644 apps/ds-docs/i18n/en.json create mode 100644 apps/ds-docs/i18n/pt.json create mode 100644 apps/ds-docs/src/components/docs/ComponentsStatusTable.astro create mode 100644 apps/ds-docs/src/components/docs/ProgressStatusBadge.vue create mode 100644 apps/ds-docs/src/components/docs/Tabs.astro create mode 100644 apps/ds-docs/src/components/docs/Tabs.vue create mode 100644 apps/ds-docs/src/content/pt/components/button.mdx create mode 100644 apps/ds-docs/src/content/pt/components/fieldset.mdx create mode 100644 apps/ds-docs/src/content/pt/components/index.md create mode 100644 apps/ds-docs/src/content/pt/foundations/color.md create mode 100644 apps/ds-docs/src/content/pt/foundations/index.md create mode 100644 apps/ds-docs/src/content/pt/get-started/index.md create mode 100644 apps/ds-docs/src/content/pt/get-started/installation.md create mode 100644 apps/ds-docs/src/data/README.md create mode 100644 apps/ds-docs/src/data/component-status.ts create mode 100644 apps/ds-docs/src/lib/docs/validateFrontmatter.ts create mode 100644 apps/ds-docs/src/lib/i18n/index.ts create mode 100644 apps/ds-docs/src/pages/pt/[...path].astro create mode 100644 apps/ds-docs/src/pages/pt/components/index.astro diff --git a/apps/ds-docs/.astro/collections/pt.schema.json b/apps/ds-docs/.astro/collections/pt.schema.json new file mode 100644 index 00000000..c9213136 --- /dev/null +++ b/apps/ds-docs/.astro/collections/pt.schema.json @@ -0,0 +1,921 @@ +{ + "$ref": "#/definitions/pt", + "definitions": { + "pt": { + "anyOf": [ + { + "type": "object", + "properties": { + "title": { + "type": "string" + }, + "description": { + "type": "string" + }, + "navLabel": { + "type": "string" + }, + "order": { + "type": "number" + }, + "hidden": { + "type": "boolean" + }, + "category": { + "type": "string", + "enum": [ + "form", + "navigation", + "feedback", + "data-display", + "layout", + "utility" + ] + }, + "status": { + "type": "string", + "enum": [ + "stable", + "beta", + "deprecated", + "planned", + "experimental" + ] + }, + "since": { + "type": "string" + }, + "deprecatedIn": { + "type": "string" + }, + "contributors": { + "type": "array", + "items": { + "type": "string" + } + }, + "lastUpdated": { + "anyOf": [ + { + "type": "string", + "format": "date-time" + }, + { + "type": "string", + "format": "date" + }, + { + "type": "integer", + "format": "unix-time" + } + ] + }, + "tags": { + "type": "array", + "items": { + "type": "string" + } + }, + "version": { + "type": "string", + "default": "v1" + }, + "language": { + "type": "string", + "default": "en" + }, + "translatedFrom": { + "type": "string" + }, + "translationStatus": { + "type": "string", + "enum": [ + "complete", + "partial", + "missing" + ] + }, + "type": { + "type": "string", + "const": "component" + }, + "component": { + "type": "string" + }, + "source": { + "type": "string" + }, + "storybook": { + "type": "string" + }, + "figma": { + "type": "string" + }, + "related": { + "type": "array", + "items": { + "type": "string" + } + }, + "anatomy": { + "type": "array", + "items": { + "type": "object", + "properties": { + "label": { + "type": "string" + }, + "description": { + "type": "string" + } + }, + "required": [ + "label" + ], + "additionalProperties": false + } + }, + "accessibility": { + "type": "object", + "properties": { + "keyboard": { + "type": "array", + "items": { + "type": "object", + "properties": { + "keys": { + "type": "string" + }, + "action": { + "type": "string" + } + }, + "required": [ + "keys", + "action" + ], + "additionalProperties": false + } + }, + "aria": { + "type": "array", + "items": { + "type": "object", + "properties": { + "attribute": { + "type": "string" + }, + "usage": { + "type": "string" + } + }, + "required": [ + "attribute", + "usage" + ], + "additionalProperties": false + } + }, + "wcag": { + "type": "array", + "items": { + "type": "string" + } + }, + "notes": { + "type": "array", + "items": { + "type": "string" + } + } + }, + "additionalProperties": false + }, + "api": { + "type": "object", + "properties": { + "props": { + "type": "array", + "items": { + "type": "object", + "properties": { + "name": { + "type": "string" + }, + "type": { + "type": "string" + }, + "default": { + "type": "string" + }, + "required": { + "type": "boolean" + }, + "description": { + "type": "string" + } + }, + "required": [ + "name", + "type", + "description" + ], + "additionalProperties": false + } + }, + "slots": { + "type": "array", + "items": { + "type": "object", + "properties": { + "name": { + "type": "string" + }, + "description": { + "type": "string" + }, + "props": { + "type": "string" + } + }, + "required": [ + "name", + "description" + ], + "additionalProperties": false + } + }, + "events": { + "type": "array", + "items": { + "type": "object", + "properties": { + "name": { + "type": "string" + }, + "payload": { + "type": "string" + }, + "description": { + "type": "string" + } + }, + "required": [ + "name", + "description" + ], + "additionalProperties": false + } + } + }, + "additionalProperties": false + } + }, + "required": [ + "title", + "description", + "type" + ], + "additionalProperties": false + }, + { + "type": "object", + "properties": { + "title": { + "$ref": "#/definitions/pt/anyOf/0/properties/title" + }, + "description": { + "$ref": "#/definitions/pt/anyOf/0/properties/description" + }, + "navLabel": { + "$ref": "#/definitions/pt/anyOf/0/properties/navLabel" + }, + "order": { + "$ref": "#/definitions/pt/anyOf/0/properties/order" + }, + "hidden": { + "$ref": "#/definitions/pt/anyOf/0/properties/hidden" + }, + "category": { + "type": "string", + "enum": [ + "color", + "typography", + "spacing", + "elevation", + "motion", + "imagery" + ] + }, + "status": { + "$ref": "#/definitions/pt/anyOf/0/properties/status" + }, + "since": { + "$ref": "#/definitions/pt/anyOf/0/properties/since" + }, + "deprecatedIn": { + "$ref": "#/definitions/pt/anyOf/0/properties/deprecatedIn" + }, + "contributors": { + "$ref": "#/definitions/pt/anyOf/0/properties/contributors" + }, + "lastUpdated": { + "$ref": "#/definitions/pt/anyOf/0/properties/lastUpdated" + }, + "tags": { + "$ref": "#/definitions/pt/anyOf/0/properties/tags" + }, + "version": { + "$ref": "#/definitions/pt/anyOf/0/properties/version" + }, + "language": { + "$ref": "#/definitions/pt/anyOf/0/properties/language" + }, + "translatedFrom": { + "$ref": "#/definitions/pt/anyOf/0/properties/translatedFrom" + }, + "translationStatus": { + "$ref": "#/definitions/pt/anyOf/0/properties/translationStatus" + }, + "type": { + "type": "string", + "const": "foundation" + } + }, + "required": [ + "title", + "description", + "type" + ], + "additionalProperties": false + }, + { + "type": "object", + "properties": { + "title": { + "$ref": "#/definitions/pt/anyOf/0/properties/title" + }, + "description": { + "$ref": "#/definitions/pt/anyOf/0/properties/description" + }, + "navLabel": { + "$ref": "#/definitions/pt/anyOf/0/properties/navLabel" + }, + "order": { + "$ref": "#/definitions/pt/anyOf/0/properties/order" + }, + "hidden": { + "$ref": "#/definitions/pt/anyOf/0/properties/hidden" + }, + "category": { + "type": "string", + "enum": [ + "color", + "typography", + "spacing", + "elevation", + "motion", + "border", + "shadow" + ] + }, + "status": { + "$ref": "#/definitions/pt/anyOf/0/properties/status" + }, + "since": { + "$ref": "#/definitions/pt/anyOf/0/properties/since" + }, + "deprecatedIn": { + "$ref": "#/definitions/pt/anyOf/0/properties/deprecatedIn" + }, + "contributors": { + "$ref": "#/definitions/pt/anyOf/0/properties/contributors" + }, + "lastUpdated": { + "$ref": "#/definitions/pt/anyOf/0/properties/lastUpdated" + }, + "tags": { + "$ref": "#/definitions/pt/anyOf/0/properties/tags" + }, + "version": { + "$ref": "#/definitions/pt/anyOf/0/properties/version" + }, + "language": { + "$ref": "#/definitions/pt/anyOf/0/properties/language" + }, + "translatedFrom": { + "$ref": "#/definitions/pt/anyOf/0/properties/translatedFrom" + }, + "translationStatus": { + "$ref": "#/definitions/pt/anyOf/0/properties/translationStatus" + }, + "type": { + "type": "string", + "const": "token" + } + }, + "required": [ + "title", + "description", + "category", + "type" + ], + "additionalProperties": false + }, + { + "type": "object", + "properties": { + "title": { + "$ref": "#/definitions/pt/anyOf/0/properties/title" + }, + "description": { + "$ref": "#/definitions/pt/anyOf/0/properties/description" + }, + "navLabel": { + "$ref": "#/definitions/pt/anyOf/0/properties/navLabel" + }, + "order": { + "$ref": "#/definitions/pt/anyOf/0/properties/order" + }, + "hidden": { + "$ref": "#/definitions/pt/anyOf/0/properties/hidden" + }, + "category": { + "type": "string" + }, + "status": { + "$ref": "#/definitions/pt/anyOf/0/properties/status" + }, + "since": { + "$ref": "#/definitions/pt/anyOf/0/properties/since" + }, + "deprecatedIn": { + "$ref": "#/definitions/pt/anyOf/0/properties/deprecatedIn" + }, + "contributors": { + "$ref": "#/definitions/pt/anyOf/0/properties/contributors" + }, + "lastUpdated": { + "$ref": "#/definitions/pt/anyOf/0/properties/lastUpdated" + }, + "tags": { + "$ref": "#/definitions/pt/anyOf/0/properties/tags" + }, + "version": { + "$ref": "#/definitions/pt/anyOf/0/properties/version" + }, + "language": { + "$ref": "#/definitions/pt/anyOf/0/properties/language" + }, + "translatedFrom": { + "$ref": "#/definitions/pt/anyOf/0/properties/translatedFrom" + }, + "translationStatus": { + "$ref": "#/definitions/pt/anyOf/0/properties/translationStatus" + }, + "type": { + "type": "string", + "const": "block" + }, + "components": { + "type": "array", + "items": { + "type": "string" + } + } + }, + "required": [ + "title", + "description", + "category", + "type" + ], + "additionalProperties": false + }, + { + "type": "object", + "properties": { + "title": { + "$ref": "#/definitions/pt/anyOf/0/properties/title" + }, + "description": { + "$ref": "#/definitions/pt/anyOf/0/properties/description" + }, + "navLabel": { + "$ref": "#/definitions/pt/anyOf/0/properties/navLabel" + }, + "order": { + "$ref": "#/definitions/pt/anyOf/0/properties/order" + }, + "hidden": { + "$ref": "#/definitions/pt/anyOf/0/properties/hidden" + }, + "category": { + "type": "string" + }, + "status": { + "$ref": "#/definitions/pt/anyOf/0/properties/status" + }, + "since": { + "$ref": "#/definitions/pt/anyOf/0/properties/since" + }, + "deprecatedIn": { + "$ref": "#/definitions/pt/anyOf/0/properties/deprecatedIn" + }, + "contributors": { + "$ref": "#/definitions/pt/anyOf/0/properties/contributors" + }, + "lastUpdated": { + "$ref": "#/definitions/pt/anyOf/0/properties/lastUpdated" + }, + "tags": { + "$ref": "#/definitions/pt/anyOf/0/properties/tags" + }, + "version": { + "$ref": "#/definitions/pt/anyOf/0/properties/version" + }, + "language": { + "$ref": "#/definitions/pt/anyOf/0/properties/language" + }, + "translatedFrom": { + "$ref": "#/definitions/pt/anyOf/0/properties/translatedFrom" + }, + "translationStatus": { + "$ref": "#/definitions/pt/anyOf/0/properties/translationStatus" + }, + "type": { + "type": "string", + "const": "pattern" + }, + "useCases": { + "type": "array", + "items": { + "type": "string" + } + } + }, + "required": [ + "title", + "description", + "category", + "type" + ], + "additionalProperties": false + }, + { + "type": "object", + "properties": { + "title": { + "$ref": "#/definitions/pt/anyOf/0/properties/title" + }, + "description": { + "$ref": "#/definitions/pt/anyOf/0/properties/description" + }, + "navLabel": { + "$ref": "#/definitions/pt/anyOf/0/properties/navLabel" + }, + "order": { + "$ref": "#/definitions/pt/anyOf/0/properties/order" + }, + "hidden": { + "$ref": "#/definitions/pt/anyOf/0/properties/hidden" + }, + "category": { + "type": "string" + }, + "status": { + "$ref": "#/definitions/pt/anyOf/0/properties/status" + }, + "since": { + "$ref": "#/definitions/pt/anyOf/0/properties/since" + }, + "deprecatedIn": { + "$ref": "#/definitions/pt/anyOf/0/properties/deprecatedIn" + }, + "contributors": { + "$ref": "#/definitions/pt/anyOf/0/properties/contributors" + }, + "lastUpdated": { + "$ref": "#/definitions/pt/anyOf/0/properties/lastUpdated" + }, + "tags": { + "$ref": "#/definitions/pt/anyOf/0/properties/tags" + }, + "version": { + "$ref": "#/definitions/pt/anyOf/0/properties/version" + }, + "language": { + "$ref": "#/definitions/pt/anyOf/0/properties/language" + }, + "translatedFrom": { + "$ref": "#/definitions/pt/anyOf/0/properties/translatedFrom" + }, + "translationStatus": { + "$ref": "#/definitions/pt/anyOf/0/properties/translationStatus" + }, + "type": { + "type": "string", + "const": "template" + }, + "blocks": { + "type": "array", + "items": { + "type": "string" + } + } + }, + "required": [ + "title", + "description", + "category", + "type" + ], + "additionalProperties": false + }, + { + "type": "object", + "properties": { + "title": { + "$ref": "#/definitions/pt/anyOf/0/properties/title" + }, + "description": { + "$ref": "#/definitions/pt/anyOf/0/properties/description" + }, + "navLabel": { + "$ref": "#/definitions/pt/anyOf/0/properties/navLabel" + }, + "order": { + "$ref": "#/definitions/pt/anyOf/0/properties/order" + }, + "hidden": { + "$ref": "#/definitions/pt/anyOf/0/properties/hidden" + }, + "category": { + "type": "string", + "enum": [ + "installation", + "quick-start", + "migration", + "contribution" + ] + }, + "status": { + "$ref": "#/definitions/pt/anyOf/0/properties/status" + }, + "since": { + "$ref": "#/definitions/pt/anyOf/0/properties/since" + }, + "deprecatedIn": { + "$ref": "#/definitions/pt/anyOf/0/properties/deprecatedIn" + }, + "contributors": { + "$ref": "#/definitions/pt/anyOf/0/properties/contributors" + }, + "lastUpdated": { + "$ref": "#/definitions/pt/anyOf/0/properties/lastUpdated" + }, + "tags": { + "$ref": "#/definitions/pt/anyOf/0/properties/tags" + }, + "version": { + "$ref": "#/definitions/pt/anyOf/0/properties/version" + }, + "language": { + "$ref": "#/definitions/pt/anyOf/0/properties/language" + }, + "translatedFrom": { + "$ref": "#/definitions/pt/anyOf/0/properties/translatedFrom" + }, + "translationStatus": { + "$ref": "#/definitions/pt/anyOf/0/properties/translationStatus" + }, + "type": { + "type": "string", + "const": "guide" + }, + "prerequisites": { + "type": "array", + "items": { + "type": "string" + } + }, + "difficulty": { + "type": "string", + "enum": [ + "beginner", + "intermediate", + "advanced" + ] + } + }, + "required": [ + "title", + "description", + "type" + ], + "additionalProperties": false + }, + { + "type": "object", + "properties": { + "title": { + "$ref": "#/definitions/pt/anyOf/0/properties/title" + }, + "description": { + "$ref": "#/definitions/pt/anyOf/0/properties/description" + }, + "navLabel": { + "$ref": "#/definitions/pt/anyOf/0/properties/navLabel" + }, + "order": { + "$ref": "#/definitions/pt/anyOf/0/properties/order" + }, + "hidden": { + "$ref": "#/definitions/pt/anyOf/0/properties/hidden" + }, + "category": { + "type": "string", + "enum": [ + "azionicons", + "primeicons" + ] + }, + "status": { + "$ref": "#/definitions/pt/anyOf/0/properties/status" + }, + "since": { + "$ref": "#/definitions/pt/anyOf/0/properties/since" + }, + "deprecatedIn": { + "$ref": "#/definitions/pt/anyOf/0/properties/deprecatedIn" + }, + "contributors": { + "$ref": "#/definitions/pt/anyOf/0/properties/contributors" + }, + "lastUpdated": { + "$ref": "#/definitions/pt/anyOf/0/properties/lastUpdated" + }, + "tags": { + "$ref": "#/definitions/pt/anyOf/0/properties/tags" + }, + "version": { + "$ref": "#/definitions/pt/anyOf/0/properties/version" + }, + "language": { + "$ref": "#/definitions/pt/anyOf/0/properties/language" + }, + "translatedFrom": { + "$ref": "#/definitions/pt/anyOf/0/properties/translatedFrom" + }, + "translationStatus": { + "$ref": "#/definitions/pt/anyOf/0/properties/translationStatus" + }, + "type": { + "type": "string", + "const": "icon" + } + }, + "required": [ + "title", + "description", + "type" + ], + "additionalProperties": false + }, + { + "type": "object", + "properties": { + "title": { + "$ref": "#/definitions/pt/anyOf/0/properties/title" + }, + "description": { + "$ref": "#/definitions/pt/anyOf/0/properties/description" + }, + "navLabel": { + "$ref": "#/definitions/pt/anyOf/0/properties/navLabel" + }, + "order": { + "$ref": "#/definitions/pt/anyOf/0/properties/order" + }, + "hidden": { + "$ref": "#/definitions/pt/anyOf/0/properties/hidden" + }, + "category": { + "type": "string", + "enum": [ + "guidelines", + "development", + "documentation", + "pull-requests" + ] + }, + "status": { + "$ref": "#/definitions/pt/anyOf/0/properties/status" + }, + "since": { + "$ref": "#/definitions/pt/anyOf/0/properties/since" + }, + "deprecatedIn": { + "$ref": "#/definitions/pt/anyOf/0/properties/deprecatedIn" + }, + "contributors": { + "$ref": "#/definitions/pt/anyOf/0/properties/contributors" + }, + "lastUpdated": { + "$ref": "#/definitions/pt/anyOf/0/properties/lastUpdated" + }, + "tags": { + "$ref": "#/definitions/pt/anyOf/0/properties/tags" + }, + "version": { + "$ref": "#/definitions/pt/anyOf/0/properties/version" + }, + "language": { + "$ref": "#/definitions/pt/anyOf/0/properties/language" + }, + "translatedFrom": { + "$ref": "#/definitions/pt/anyOf/0/properties/translatedFrom" + }, + "translationStatus": { + "$ref": "#/definitions/pt/anyOf/0/properties/translationStatus" + }, + "type": { + "type": "string", + "const": "contributing" + } + }, + "required": [ + "title", + "description", + "type" + ], + "additionalProperties": false + }, + { + "type": "object", + "properties": { + "title": { + "$ref": "#/definitions/pt/anyOf/0/properties/title" + }, + "description": { + "$ref": "#/definitions/pt/anyOf/0/properties/description" + }, + "navLabel": { + "$ref": "#/definitions/pt/anyOf/0/properties/navLabel" + }, + "order": { + "$ref": "#/definitions/pt/anyOf/0/properties/order" + }, + "hidden": { + "$ref": "#/definitions/pt/anyOf/0/properties/hidden" + }, + "category": { + "type": "string" + }, + "status": { + "$ref": "#/definitions/pt/anyOf/0/properties/status" + }, + "since": { + "$ref": "#/definitions/pt/anyOf/0/properties/since" + }, + "deprecatedIn": { + "$ref": "#/definitions/pt/anyOf/0/properties/deprecatedIn" + }, + "contributors": { + "$ref": "#/definitions/pt/anyOf/0/properties/contributors" + }, + "lastUpdated": { + "$ref": "#/definitions/pt/anyOf/0/properties/lastUpdated" + }, + "tags": { + "$ref": "#/definitions/pt/anyOf/0/properties/tags" + }, + "version": { + "$ref": "#/definitions/pt/anyOf/0/properties/version" + }, + "language": { + "$ref": "#/definitions/pt/anyOf/0/properties/language" + }, + "translatedFrom": { + "$ref": "#/definitions/pt/anyOf/0/properties/translatedFrom" + }, + "translationStatus": { + "$ref": "#/definitions/pt/anyOf/0/properties/translationStatus" + }, + "type": { + "type": "string", + "const": "playground" + } + }, + "required": [ + "title", + "description", + "type" + ], + "additionalProperties": false + } + ] + } + }, + "$schema": "http://json-schema.org/draft-07/schema#" +} \ No newline at end of file diff --git a/apps/ds-docs/.astro/content-modules.mjs b/apps/ds-docs/.astro/content-modules.mjs index 2cff7b24..fc2f3cf2 100644 --- a/apps/ds-docs/.astro/content-modules.mjs +++ b/apps/ds-docs/.astro/content-modules.mjs @@ -1,5 +1,7 @@ export default new Map([ +["src/content/components/fieldset.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fcomponents%2Ffieldset.mdx&astroContentModuleFlag=true")], ["src/content/components/button.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fcomponents%2Fbutton.mdx&astroContentModuleFlag=true")], -["src/content/components/fieldset.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fcomponents%2Ffieldset.mdx&astroContentModuleFlag=true")]]); +["src/content/pt/components/button.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpt%2Fcomponents%2Fbutton.mdx&astroContentModuleFlag=true")], +["src/content/pt/components/fieldset.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fpt%2Fcomponents%2Ffieldset.mdx&astroContentModuleFlag=true")]]); \ No newline at end of file diff --git a/apps/ds-docs/.astro/content.d.ts b/apps/ds-docs/.astro/content.d.ts index 512ba943..970a6ccf 100644 --- a/apps/ds-docs/.astro/content.d.ts +++ b/apps/ds-docs/.astro/content.d.ts @@ -253,6 +253,16 @@ declare module 'astro:content' { rendered?: RenderedContent; filePath?: string; }>; +"pt": Record; + rendered?: RenderedContent; + filePath?: string; +}>; "templates": Record and \u003Clegend> elements provide built-in accessibility","Screen readers announce the legend when entering the fieldset",{"props":63,"slots":83,"events":89},[64,70,75,78],{"name":65,"type":66,"default":67,"required":68,"description":69},"legend","string","undefined",false,"The text for the fieldset legend",{"name":71,"type":72,"default":73,"required":68,"description":74},"disabled","boolean","false","Whether all controls in the fieldset are disabled",{"name":76,"type":72,"default":73,"required":68,"description":77},"required","Whether all fields in the group are required",{"name":79,"type":80,"default":81,"required":68,"description":82},"variant","'default' | 'card' | 'transparent'","'default'","Visual style variant",[84,87],{"name":85,"description":86},"default","Form controls and content inside the fieldset",{"name":65,"description":88},"Custom legend content (overrides legend prop)",[],"import { ExampleBlock, Callout } from '@components/docs';\n\n## Overview\n\nThe Fieldset component provides a way to group related form controls together. It renders a native HTML `\u003Cfieldset>` element with proper accessibility features, including an associated `\u003Clegend>` for the group label.\n\nFieldsets are essential for creating accessible forms, as they help screen reader users understand the relationship between form controls.\n\n\u003CCallout type=\"info\" title=\"Semantic HTML\">\n This component uses native `\u003Cfieldset>` and `\u003Clegend>` elements, which provide built-in accessibility benefits without requiring additional ARIA attributes.\n\u003C/Callout>\n\n## When to Use\n\nUse Fieldset when you need to:\n\n- Group related form inputs (e.g., address fields, contact information)\n- Create logical sections within a larger form\n- Improve form accessibility with proper semantic structure\n- Apply a shared label or description to multiple inputs\n- Disable multiple inputs at once\n\n## Examples\n\n### Basic Fieldset\n\n\u003CExampleBlock \n title=\"Basic fieldset with legend\"\n description=\"A simple fieldset grouping personal information fields\"\n code={`\u003CAzFieldset legend=\"Personal Information\">\n \u003CAzInput label=\"Full Name\" />\n \u003CAzInput label=\"Email\" type=\"email\" />\n\u003C/AzFieldset>`}\n>\n \u003Cfieldset class=\"border border-gray-300 rounded-lg p-4\">\n \u003Clegend class=\"text-sm font-medium text-text-primary px-2\">Personal Information\u003C/legend>\n \u003Cdiv class=\"space-y-4 mt-2\">\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Full Name\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-primary-500\" placeholder=\"Enter your name\" />\n \u003C/div>\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Email\u003C/label>\n \u003Cinput type=\"email\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-primary-500\" placeholder=\"Enter your email\" />\n \u003C/div>\n \u003C/div>\n \u003C/fieldset>\n\u003C/ExampleBlock>\n\n### Address Grouping\n\n\u003CExampleBlock \n title=\"Address fields grouped\"\n description=\"Grouping address-related fields together\"\n code={`\u003CAzFieldset legend=\"Shipping Address\">\n \u003CAzInput label=\"Street Address\" />\n \u003Cdiv class=\"grid grid-cols-2 gap-4\">\n \u003CAzInput label=\"City\" />\n \u003CAzInput label=\"ZIP Code\" />\n \u003C/div>\n\u003C/AzFieldset>`}\n>\n \u003Cfieldset class=\"border border-gray-300 rounded-lg p-4\">\n \u003Clegend class=\"text-sm font-medium text-text-primary px-2\">Shipping Address\u003C/legend>\n \u003Cdiv class=\"space-y-4 mt-2\">\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Street Address\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md\" placeholder=\"123 Main St\" />\n \u003C/div>\n \u003Cdiv class=\"grid grid-cols-2 gap-4\">\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">City\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md\" placeholder=\"City\" />\n \u003C/div>\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">ZIP Code\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md\" placeholder=\"12345\" />\n \u003C/div>\n \u003C/div>\n \u003C/div>\n \u003C/fieldset>\n\u003C/ExampleBlock>\n\n### Disabled State\n\n\u003CExampleBlock \n title=\"Disabled fieldset\"\n description=\"All inputs disabled via the fieldset\"\n code={`\u003CAzFieldset legend=\"Disabled Group\" disabled>\n \u003CAzInput label=\"Input 1\" />\n \u003CAzInput label=\"Input 2\" />\n\u003C/AzFieldset>`}\n>\n \u003Cfieldset class=\"border border-gray-300 rounded-lg p-4 opacity-50\" disabled>\n \u003Clegend class=\"text-sm font-medium text-text-primary px-2\">Disabled Group\u003C/legend>\n \u003Cdiv class=\"space-y-4 mt-2\">\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Input 1\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-100\" placeholder=\"Disabled\" />\n \u003C/div>\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Input 2\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-100\" placeholder=\"Disabled\" />\n \u003C/div>\n \u003C/div>\n \u003C/fieldset>\n\u003C/ExampleBlock>\n\n## States\n\n\u003CStateGrid columns={3}>\n \u003Cfieldset slot=\"default\" class=\"border border-gray-300 rounded-lg p-3\">\n \u003Clegend class=\"text-xs font-medium text-text-primary px-2\">Default\u003C/legend>\n \u003Cinput type=\"text\" class=\"w-full px-2 py-1 text-sm border border-gray-300 rounded\" placeholder=\"Input\" />\n \u003C/fieldset>\n \u003Cfieldset slot=\"focus\" class=\"border border-primary-300 rounded-lg p-3 ring-2 ring-primary-100\">\n \u003Clegend class=\"text-xs font-medium text-text-primary px-2\">Focused\u003C/legend>\n \u003Cinput type=\"text\" class=\"w-full px-2 py-1 text-sm border border-primary-500 rounded ring-1 ring-primary-500\" placeholder=\"Input\" />\n \u003C/fieldset>\n \u003Cfieldset slot=\"disabled\" class=\"border border-gray-200 rounded-lg p-3 opacity-50\" disabled>\n \u003Clegend class=\"text-xs font-medium text-text-primary px-2\">Disabled\u003C/legend>\n \u003Cinput type=\"text\" class=\"w-full px-2 py-1 text-sm border border-gray-200 rounded bg-gray-100\" placeholder=\"Disabled\" disabled />\n \u003C/fieldset>\n\u003C/StateGrid>\n\n## Do's and Don'ts\n\n\u003CDoDont title=\"Fieldset usage\">\n \u003Ctemplate #do>\n \u003Cp class=\"text-sm mb-2\">Group related form fields:\u003C/p>\n \u003Cfieldset class=\"border border-gray-300 rounded p-3\">\n \u003Clegend class=\"text-xs font-medium px-2\">Contact Info\u003C/legend>\n \u003Cdiv class=\"space-y-2\">\n \u003Cinput type=\"text\" class=\"w-full px-2 py-1 text-sm border border-gray-300 rounded\" placeholder=\"Email\" />\n \u003Cinput type=\"text\" class=\"w-full px-2 py-1 text-sm border border-gray-300 rounded\" placeholder=\"Phone\" />\n \u003C/div>\n \u003C/fieldset>\n \u003C/template>\n \u003Ctemplate #dont>\n \u003Cp class=\"text-sm mb-2\">Don't use for unrelated fields:\u003C/p>\n \u003Cfieldset class=\"border border-gray-300 rounded p-3\">\n \u003Clegend class=\"text-xs font-medium px-2\">Mixed Fields\u003C/legend>\n \u003Cinput type=\"text\" class=\"w-full px-2 py-1 text-sm border border-gray-300 rounded mb-2\" placeholder=\"Name\" />\n \u003Cinput type=\"text\" class=\"w-full px-2 py-1 text-sm border border-gray-300 rounded\" placeholder=\"Favorite Color\" />\n \u003C/fieldset>\n \u003Cp class=\"text-xs text-red-600 mt-1\">These aren't logically related\u003C/p>\n \u003C/template>\n\u003C/DoDont>\n\n\u003CDoDont>\n \u003Ctemplate #do>\n \u003Cp class=\"text-sm mb-2\">Use descriptive legends:\u003C/p>\n \u003Cfieldset class=\"border border-gray-300 rounded p-3\">\n \u003Clegend class=\"text-xs font-medium px-2\">Billing Address\u003C/legend>\n \u003Cinput type=\"text\" class=\"w-full px-2 py-1 text-sm border border-gray-300 rounded\" placeholder=\"Street\" />\n \u003C/fieldset>\n \u003C/template>\n \u003Ctemplate #dont>\n \u003Cp class=\"text-sm mb-2\">Don't use vague legends:\u003C/p>\n \u003Cfieldset class=\"border border-gray-300 rounded p-3\">\n \u003Clegend class=\"text-xs font-medium px-2\">Info\u003C/legend>\n \u003Cinput type=\"text\" class=\"w-full px-2 py-1 text-sm border border-gray-300 rounded\" placeholder=\"Street\" />\n \u003C/fieldset>\n \u003C/template>\n\u003C/DoDont>","src/content/components/fieldset.mdx","c0ab5e8f45f29ac1","fieldset.mdx",true,"button",{"id":95,"data":97,"body":184,"filePath":185,"digest":186,"legacyId":187,"deferredRender":94},{"title":98,"description":99,"navLabel":98,"order":100,"category":16,"status":17,"since":18,"tags":101,"version":22,"language":23,"type":24,"component":104,"source":105,"storybook":106,"figma":107,"related":108,"anatomy":110,"accessibility":120,"api":142},"Button","Buttons trigger actions and events when users interact with them.",1,[102,16,103],"action","interactive","AzButton","https://github.com/aziontech/webkit/tree/main/packages/components/src/Button","https://storybook.azion.com/components/button","https://figma.com/file/azion-design-system/components/button",[31,32,109],"IconButton",[111,114,117],{"label":112,"description":113},"Container","The clickable area with background styling and border",{"label":115,"description":116},"Label","The text content describing the action",{"label":118,"description":119},"Icon (optional)","An optional icon for visual emphasis before or after the label",{"keyboard":121,"aria":129,"wcag":139},[122,124,127],{"keys":47,"action":123},"Moves focus to the button",{"keys":125,"action":126},"Enter","Activates the button when focused",{"keys":128,"action":126},"Space",[130,133,136],{"attribute":131,"usage":132},"aria-disabled=\"true\"","Use instead of disabled attribute for screen readers to announce the disabled state",{"attribute":134,"usage":135},"aria-label","Required for icon-only buttons to provide accessible name",{"attribute":137,"usage":138},"aria-busy=\"true\"","When button is in loading state",[140,141],"2.1.1 Keyboard","4.1.2 Name, Role, Value",{"props":143,"slots":169,"events":179},[144,148,153,155,158,161,166],{"name":79,"type":145,"default":146,"required":68,"description":147},"'primary' | 'secondary' | 'destructive' | 'ghost'","'primary'","Visual style variant of the button",{"name":149,"type":150,"default":151,"required":68,"description":152},"size","'sm' | 'md' | 'lg'","'md'","Size of the button",{"name":71,"type":72,"default":73,"required":68,"description":154},"Whether the button is disabled",{"name":156,"type":72,"default":73,"required":68,"description":157},"loading","Shows loading spinner and disables interaction",{"name":159,"type":66,"default":67,"required":68,"description":160},"icon","Icon name to display before the label",{"name":162,"type":163,"default":164,"required":68,"description":165},"iconPosition","'left' | 'right'","'left'","Position of the icon relative to label",{"name":167,"type":72,"default":73,"required":68,"description":168},"fullWidth","Whether button takes full width of container",[170,172,176],{"name":85,"description":171},"Button label content",{"name":173,"description":174,"props":175},"icon-left","Custom icon before the label","iconClass: string",{"name":177,"description":178,"props":175},"icon-right","Custom icon after the label",[180],{"name":181,"payload":182,"description":183},"click","MouseEvent","Fired when button is clicked and not disabled","import { ExampleBlock, Callout, StateGrid } from '@components/docs';\n\n## Overview\n\nButtons are interactive elements that trigger actions when clicked or tapped. They communicate actions that users can take and are typically placed throughout your UI, from forms to dialogs to navigation.\n\nThe Button component provides a consistent, accessible way to trigger actions throughout your application.\n\n## When to Use\n\nUse buttons to:\n\n- Trigger primary actions (Submit, Save, Continue)\n- Navigate to different views or pages\n- Toggle states or settings\n- Trigger secondary actions (Cancel, Delete)\n- Submit forms\n\n\u003CCallout type=\"tip\" title=\"Choosing the right variant\">\n Use **primary** for the main action, **secondary** for alternative actions, **destructive** for dangerous actions, and **ghost** for less prominent actions.\n\u003C/Callout>\n\n## Examples\n\n### Primary Button\n\nUse for the main action in a context.\n\n\u003CExampleBlock \n title=\"Primary variant\"\n description=\"The default button style for primary actions\"\n code={`\u003CAzButton variant=\"primary\">Primary Button\u003C/AzButton>`}\n>\n \u003Cbutton class=\"px-4 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 transition-colors font-medium\">\n Primary Button\n \u003C/button>\n\u003C/ExampleBlock>\n\n### Secondary Button\n\nUse for secondary or alternative actions.\n\n\u003CExampleBlock \n title=\"Secondary variant\"\n description=\"For alternative or less prominent actions\"\n code={`\u003CAzButton variant=\"secondary\">Secondary Button\u003C/AzButton>`}\n>\n \u003Cbutton class=\"px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors border border-gray-300 font-medium\">\n Secondary Button\n \u003C/button>\n\u003C/ExampleBlock>\n\n### Destructive Button\n\nUse for destructive or irreversible actions.\n\n\u003CExampleBlock \n title=\"Destructive variant\"\n description=\"For dangerous actions like delete or remove\"\n code={`\u003CAzButton variant=\"destructive\">Delete\u003C/AzButton>`}\n>\n \u003Cbutton class=\"px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 transition-colors font-medium\">\n Delete\n \u003C/button>\n\u003C/ExampleBlock>\n\n### Button Sizes\n\n\u003CExampleBlock \n title=\"Size variants\"\n description=\"Available in small, medium, and large sizes\"\n code={`\u003CAzButton size=\"sm\">Small\u003C/AzButton>\n\u003CAzButton size=\"md\">Medium\u003C/AzButton>\n\u003CAzButton size=\"lg\">Large\u003C/AzButton>`}\n>\n \u003Cdiv class=\"flex items-center gap-3\">\n \u003Cbutton class=\"px-3 py-1.5 text-sm bg-primary-500 text-white rounded-md hover:bg-primary-600 transition-colors font-medium\">\n Small\n \u003C/button>\n \u003Cbutton class=\"px-4 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 transition-colors font-medium\">\n Medium\n \u003C/button>\n \u003Cbutton class=\"px-6 py-3 text-lg bg-primary-500 text-white rounded-md hover:bg-primary-600 transition-colors font-medium\">\n Large\n \u003C/button>\n \u003C/div>\n\u003C/ExampleBlock>\n\n## States\n\n\u003CStateGrid columns={4}>\n \u003Cbutton slot=\"default\" class=\"px-4 py-2 bg-primary-500 text-white rounded-md font-medium\">Button\u003C/button>\n \u003Cbutton slot=\"hover\" class=\"px-4 py-2 bg-primary-600 text-white rounded-md font-medium\">Button\u003C/button>\n \u003Cbutton slot=\"focus\" class=\"px-4 py-2 bg-primary-500 text-white rounded-md font-medium ring-2 ring-primary-300 ring-offset-2\">Button\u003C/button>\n \u003Cbutton slot=\"disabled\" class=\"px-4 py-2 bg-gray-300 text-gray-500 rounded-md font-medium cursor-not-allowed\" disabled>Button\u003C/button>\n\u003C/StateGrid>\n\n## Do's and Don'ts\n\n\u003CDoDont title=\"Usage guidelines\">\n \u003Ctemplate v-slot:do>\n \u003Cp class=\"text-sm mb-2\">Use buttons for actionable items:\u003C/p>\n \u003Cbutton class=\"px-4 py-2 bg-primary-500 text-white rounded-md text-sm\">Submit Form\u003C/button>\n \u003C/template>\n \u003Ctemplate v-slot:dont>\n \u003Cp class=\"text-sm mb-2\">Don't use buttons for navigation:\u003C/p>\n \u003Cbutton class=\"px-4 py-2 bg-primary-500 text-white rounded-md text-sm\">Go to Dashboard\u003C/button>\n \u003Cp class=\"text-xs text-red-600 mt-1\">Use a link instead\u003C/p>\n \u003C/template>\n\u003C/DoDont>\n\n\u003CDoDont>\n \u003Ctemplate v-slot:do>\n \u003Cp class=\"text-sm mb-2\">Use clear, action-oriented labels:\u003C/p>\n \u003Cbutton class=\"px-4 py-2 bg-primary-500 text-white rounded-md text-sm\">Save Changes\u003C/button>\n \u003C/template>\n \u003Ctemplate v-slot:dont>\n \u003Cp class=\"text-sm mb-2\">Don't use vague labels:\u003C/p>\n \u003Cbutton class=\"px-4 py-2 bg-primary-500 text-white rounded-md text-sm\">Click Here\u003C/button>\n \u003C/template>\n\u003C/DoDont>\n\n## Playground\n\nExplore the Button component interactively. Adjust props and see live changes.\n\nimport { Playground } from '../../components/playground';\nimport { AzButton } from '../../components/demo';\nimport { buttonProps } from '../../components/demo/props-metadata';\n\n\u003CPlayground\n client:load\n component={AzButton}\n component-name=\"AzButton\"\n props={buttonProps}\n slot-content=\"Button\"\n/>","src/content/components/button.mdx","f85f2e2f9af9688c","button.mdx","tokens",["Map",190,191],"index",{"id":190,"data":192,"body":198,"filePath":199,"digest":200,"rendered":201,"legacyId":216},{"title":193,"description":194,"navLabel":195,"order":100,"category":196,"version":22,"language":23,"type":197},"Design Tokens","Design tokens that power the visual language of the Azion Design System.","Tokens","color","token","## Overview\n\nDesign tokens are the visual design atoms of the design system. They are named entities that store visual design attributes, enabling consistency across products and platforms.\n\n## Token Categories\n\n- **Color Tokens** - Semantic and primitive color values\n- **Typography Tokens** - Font families, sizes, weights, and line heights\n- **Spacing Tokens** - Consistent spacing scale\n- **Border Tokens** - Border radius, width, and style values\n- **Shadow Tokens** - Elevation and shadow values\n- **Motion Tokens** - Animation timing and easing values\n\n\u003CCallout type=\"info\">\nToken documentation is being prepared. Check back soon for detailed token references.\n\u003C/Callout>","src/content/tokens/index.md","353109d85593a275",{"html":202,"metadata":203},"\u003Ch2 id=\"overview\">Overview\u003C/h2>\n\u003Cp>Design tokens are the visual design atoms of the design system. They are named entities that store visual design attributes, enabling consistency across products and platforms.\u003C/p>\n\u003Ch2 id=\"token-categories\">Token Categories\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Cstrong>Color Tokens\u003C/strong> - Semantic and primitive color values\u003C/li>\n\u003Cli>\u003Cstrong>Typography Tokens\u003C/strong> - Font families, sizes, weights, and line heights\u003C/li>\n\u003Cli>\u003Cstrong>Spacing Tokens\u003C/strong> - Consistent spacing scale\u003C/li>\n\u003Cli>\u003Cstrong>Border Tokens\u003C/strong> - Border radius, width, and style values\u003C/li>\n\u003Cli>\u003Cstrong>Shadow Tokens\u003C/strong> - Elevation and shadow values\u003C/li>\n\u003Cli>\u003Cstrong>Motion Tokens\u003C/strong> - Animation timing and easing values\u003C/li>\n\u003C/ul>\n\u003Ccallout type=\"info\">\nToken documentation is being prepared. Check back soon for detailed token references.\n\u003C/callout>",{"headings":204,"localImagePaths":212,"remoteImagePaths":213,"frontmatter":214,"imagePaths":215},[205,209],{"depth":206,"slug":207,"text":208},2,"overview","Overview",{"depth":206,"slug":210,"text":211},"token-categories","Token Categories",[],[],{"title":193,"description":194,"navLabel":195,"order":100,"type":197,"category":196},[],"index.md","blocks",["Map",190,219],{"id":190,"data":220,"body":226,"filePath":227,"digest":228,"rendered":229,"legacyId":216},{"title":221,"description":222,"navLabel":223,"order":100,"category":224,"version":22,"language":23,"type":225},"UI Blocks","Composable UI blocks combining multiple components for common use cases.","Blocks","layout","block","## Overview\n\nUI Blocks are pre-built combinations of components that solve common interface patterns. They provide a starting point for building pages and features.\n\n## Available Blocks\n\nBlock documentation is being prepared. Check back soon for detailed block references.\n\n\u003CCallout type=\"info\">\nThis section will include blocks like headers, forms, cards, and navigation patterns.\n\u003C/Callout>","src/content/blocks/index.md","d4a0693523f6fc4c",{"html":230,"metadata":231},"\u003Ch2 id=\"overview\">Overview\u003C/h2>\n\u003Cp>UI Blocks are pre-built combinations of components that solve common interface patterns. They provide a starting point for building pages and features.\u003C/p>\n\u003Ch2 id=\"available-blocks\">Available Blocks\u003C/h2>\n\u003Cp>Block documentation is being prepared. Check back soon for detailed block references.\u003C/p>\n\u003Ccallout type=\"info\">\nThis section will include blocks like headers, forms, cards, and navigation patterns.\n\u003C/callout>",{"headings":232,"localImagePaths":237,"remoteImagePaths":238,"frontmatter":239,"imagePaths":240},[233,234],{"depth":206,"slug":207,"text":208},{"depth":206,"slug":235,"text":236},"available-blocks","Available Blocks",[],[],{"title":221,"description":222,"navLabel":223,"order":100,"type":225,"category":224},[],"get-started",["Map",190,243,259,271],{"id":190,"data":244,"body":248,"filePath":249,"digest":250,"rendered":251,"legacyId":216},{"title":245,"description":246,"version":22,"language":23,"type":247},"Get Started","Get started with the Azion Design System","guide","## Welcome\n\nWelcome to the Azion Design System documentation. This guide will help you get started with using our components and design tokens in your projects.\n\n## Installation\n\nInstall the design system packages using your preferred package manager:\n\n```bash\nnpm install @aziontech/components @aziontech/icons @aziontech/theme\n```\n\n## Quick Start\n\n1. Import the CSS in your main entry file:\n\n```javascript\nimport '@aziontech/theme/styles.css';\n```\n\n2. Import and use components:\n\n```vue\n\u003Cscript setup>\nimport { Button, Input } from '@aziontech/components';\n\u003C/script>\n\n\u003Ctemplate>\n \u003CButton variant=\"primary\">Click me\u003C/Button>\n\u003C/template>\n```\n\n## Next Steps\n\n- Explore our [Components](/components) library\n- Learn about our [Foundations](/foundations) and design principles\n- Browse our [Icons](/icons) collection","src/content/get-started/index.md","62e783fea506da23",{"html":252,"metadata":253},"\u003Ch2 id=\"welcome\">Welcome\u003C/h2>\n\u003Cp>Welcome to the Azion Design System documentation. This guide will help you get started with using our components and design tokens in your projects.\u003C/p>\n\u003Ch2 id=\"installation\">Installation\u003C/h2>\n\u003Cp>Install the design system packages using your preferred package manager:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> install\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/components\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/icons\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/theme\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"quick-start\">Quick Start\u003C/h2>\n\u003Col>\n\u003Cli>Import the CSS in your main entry file:\u003C/li>\n\u003C/ol>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"javascript\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> '@aziontech/theme/styles.css'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Col start=\"2\">\n\u003Cli>Import and use components:\u003C/li>\n\u003C/ol>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"vue\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">script\u003C/span>\u003Cspan style=\"color:#B392F0\"> setup\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> { Button, Input } \u003C/span>\u003Cspan style=\"color:#F97583\">from\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> '@aziontech/components'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"></\u003C/span>\u003Cspan style=\"color:#85E89D\">script\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">template\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> <\u003C/span>\u003Cspan style=\"color:#85E89D\">Button\u003C/span>\u003Cspan style=\"color:#B392F0\"> variant\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"primary\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>Click me</\u003C/span>\u003Cspan style=\"color:#85E89D\">Button\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"></\u003C/span>\u003Cspan style=\"color:#85E89D\">template\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"next-steps\">Next Steps\u003C/h2>\n\u003Cul>\n\u003Cli>Explore our \u003Ca href=\"/components\">Components\u003C/a> library\u003C/li>\n\u003Cli>Learn about our \u003Ca href=\"/foundations\">Foundations\u003C/a> and design principles\u003C/li>\n\u003Cli>Browse our \u003Ca href=\"/icons\">Icons\u003C/a> collection\u003C/li>\n\u003C/ul>",{"headings":254,"localImagePaths":267,"remoteImagePaths":268,"frontmatter":269,"imagePaths":270},[255,258,261,264],{"depth":206,"slug":256,"text":257},"welcome","Welcome",{"depth":206,"slug":259,"text":260},"installation","Installation",{"depth":206,"slug":262,"text":263},"quick-start","Quick Start",{"depth":206,"slug":265,"text":266},"next-steps","Next Steps",[],[],{"title":245,"description":246,"type":247},[],{"id":259,"data":272,"body":274,"filePath":275,"digest":276,"rendered":277,"legacyId":299},{"title":260,"description":273,"navLabel":260,"order":206,"category":259,"version":22,"language":23,"type":247},"Get started with the Azion Design System by installing the required packages.","# Installation\n\nThe Azion Design System is distributed as a set of npm packages. Install only what you need for your project.\n\n## Requirements\n\n- Node.js 18.x or higher\n- Vue 3.x\n- Tailwind CSS 3.x\n\n## Package Installation\n\nInstall the core packages you need:\n\n```bash\n# Install components\nnpm install @aziontech/components\n\n# Install icons\nnpm install @aziontech/icons\n\n# Install theme (optional, for design tokens)\nnpm install @aziontech/theme\n```\n\n## Tailwind Configuration\n\nExtend your Tailwind configuration to include Azion's design tokens:\n\n```js\n// tailwind.config.js\nimport azionTheme from '@aziontech/theme';\n\nexport default {\n content: [\n './src/**/*.{vue,js,ts}',\n './node_modules/@aziontech/**/*.{vue,js,ts}',\n ],\n theme: {\n extend: azionTheme.tailwindPreset,\n },\n};\n```\n\n## Vue Configuration\n\nImport the CSS and register the components:\n\n```js\n// main.js\nimport { createApp } from 'vue';\nimport App from './App.vue';\n\n// Import Azion CSS\nimport '@aziontech/theme/css';\n\n// Import Azion components (optional)\nimport { Button, Input, Select } from '@aziontech/components';\n\nconst app = createApp(App);\n\n// Register components globally\napp.component('AzButton', Button);\napp.component('AzInput', Input);\napp.component('AzSelect', Select);\n\napp.mount('#app');\n```\n\n## Next Steps\n\n- [Quick Start](/get-started) - Build your first component\n- [Components](/components) - Explore available components\n- [Foundations](/foundations) - Learn about design principles","src/content/get-started/installation.md","7ccd4afb55dff6a3",{"html":278,"metadata":279},"\u003Ch1 id=\"installation\">Installation\u003C/h1>\n\u003Cp>The Azion Design System is distributed as a set of npm packages. Install only what you need for your project.\u003C/p>\n\u003Ch2 id=\"requirements\">Requirements\u003C/h2>\n\u003Cul>\n\u003Cli>Node.js 18.x or higher\u003C/li>\n\u003Cli>Vue 3.x\u003C/li>\n\u003Cli>Tailwind CSS 3.x\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"package-installation\">Package Installation\u003C/h2>\n\u003Cp>Install the core packages you need:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"># Install components\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> install\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/components\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"># Install icons\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> install\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/icons\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"># Install theme (optional, for design tokens)\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> install\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/theme\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"tailwind-configuration\">Tailwind Configuration\u003C/h2>\n\u003Cp>Extend your Tailwind configuration to include Azion’s design tokens:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"js\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">// tailwind.config.js\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> azionTheme \u003C/span>\u003Cspan style=\"color:#F97583\">from\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> '@aziontech/theme'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">export\u003C/span>\u003Cspan style=\"color:#F97583\"> default\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> content: [\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\"> './src/**/*.{vue,js,ts}'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\"> './node_modules/@aziontech/**/*.{vue,js,ts}'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> ],\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> theme: {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> extend: azionTheme.tailwindPreset,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> },\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">};\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"vue-configuration\">Vue Configuration\u003C/h2>\n\u003Cp>Import the CSS and register the components:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"js\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">// main.js\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> { createApp } \u003C/span>\u003Cspan style=\"color:#F97583\">from\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> 'vue'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> App \u003C/span>\u003Cspan style=\"color:#F97583\">from\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> './App.vue'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">// Import Azion CSS\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> '@aziontech/theme/css'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">// Import Azion components (optional)\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> { Button, Input, Select } \u003C/span>\u003Cspan style=\"color:#F97583\">from\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> '@aziontech/components'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">const\u003C/span>\u003Cspan style=\"color:#79B8FF\"> app\u003C/span>\u003Cspan style=\"color:#F97583\"> =\u003C/span>\u003Cspan style=\"color:#B392F0\"> createApp\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(App);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">// Register components globally\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">app.\u003C/span>\u003Cspan style=\"color:#B392F0\">component\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#9ECBFF\">'AzButton'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, Button);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">app.\u003C/span>\u003Cspan style=\"color:#B392F0\">component\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#9ECBFF\">'AzInput'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, Input);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">app.\u003C/span>\u003Cspan style=\"color:#B392F0\">component\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#9ECBFF\">'AzSelect'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, Select);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">app.\u003C/span>\u003Cspan style=\"color:#B392F0\">mount\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#9ECBFF\">'#app'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">);\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"next-steps\">Next Steps\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/get-started\">Quick Start\u003C/a> - Build your first component\u003C/li>\n\u003Cli>\u003Ca href=\"/components\">Components\u003C/a> - Explore available components\u003C/li>\n\u003Cli>\u003Ca href=\"/foundations\">Foundations\u003C/a> - Learn about design principles\u003C/li>\n\u003C/ul>",{"headings":280,"localImagePaths":295,"remoteImagePaths":296,"frontmatter":297,"imagePaths":298},[281,282,285,288,291,294],{"depth":100,"slug":259,"text":260},{"depth":206,"slug":283,"text":284},"requirements","Requirements",{"depth":206,"slug":286,"text":287},"package-installation","Package Installation",{"depth":206,"slug":289,"text":290},"tailwind-configuration","Tailwind Configuration",{"depth":206,"slug":292,"text":293},"vue-configuration","Vue Configuration",{"depth":206,"slug":265,"text":266},[],[],{"title":260,"description":273,"navLabel":260,"order":206,"type":247,"category":259},[],"installation.md","templates",["Map",190,302],{"id":190,"data":303,"body":309,"filePath":310,"digest":311,"rendered":312,"legacyId":216},{"title":304,"description":305,"navLabel":306,"order":100,"category":307,"version":22,"language":23,"type":308},"Page Templates","Page templates and layout examples for building applications with the Azion Design System.","Templates","general","template","## Overview\n\nPage templates are complete page layouts that combine blocks and components into ready-to-use starting points for common application pages.\n\n## Available Templates\n\nTemplate documentation is being prepared. Check back soon for detailed template references.\n\n\u003CCallout type=\"info\">\nThis section will include templates like dashboards, settings pages, and form layouts.\n\u003C/Callout>","src/content/templates/index.md","b2fcc45362aa9e2a",{"html":313,"metadata":314},"\u003Ch2 id=\"overview\">Overview\u003C/h2>\n\u003Cp>Page templates are complete page layouts that combine blocks and components into ready-to-use starting points for common application pages.\u003C/p>\n\u003Ch2 id=\"available-templates\">Available Templates\u003C/h2>\n\u003Cp>Template documentation is being prepared. Check back soon for detailed template references.\u003C/p>\n\u003Ccallout type=\"info\">\nThis section will include templates like dashboards, settings pages, and form layouts.\n\u003C/callout>",{"headings":315,"localImagePaths":320,"remoteImagePaths":321,"frontmatter":322,"imagePaths":323},[316,317],{"depth":206,"slug":207,"text":208},{"depth":206,"slug":318,"text":319},"available-templates","Available Templates",[],[],{"title":304,"description":305,"navLabel":306,"order":100,"type":308,"category":307},[],"foundations",["Map",190,326,196,377],{"id":190,"data":327,"body":331,"filePath":332,"digest":333,"rendered":334,"legacyId":216},{"title":328,"description":329,"navLabel":328,"order":100,"version":22,"language":23,"type":330},"Foundations","Core design principles and guidelines that shape the Azion Design System.","foundation","# Foundations\n\nFoundations are the core design principles, guidelines, and visual elements that shape the Azion Design System. They provide consistency and coherence across all components and experiences.\n\n## What's Inside\n\n### Color\nOur color system is built on semantic tokens that adapt to different contexts and themes. Learn how to use color effectively in your interfaces.\n\n### Typography\nTypography guidelines ensure readable, accessible, and consistent text across all touchpoints.\n\n### Spacing\nA consistent spacing scale creates rhythm and harmony in layouts.\n\n### Elevation\nElevation defines the visual hierarchy and depth of elements in the interface.\n\n### Motion\nMotion principles guide animations and transitions for a polished user experience.\n\n## Design Principles\n\n### 1. Clarity First\nEvery element should serve a purpose. Remove unnecessary complexity.\n\n### 2. Consistency\nUse familiar patterns and consistent behaviors across the system.\n\n### 3. Accessibility\nDesign for everyone. Meet WCAG 2.1 AA standards at minimum.\n\n### 4. Performance\nOptimize for speed and efficiency in both design and implementation.\n\n## Next Steps\n\n- [Color](/foundations/color) - Explore the color system\n- [Typography](/foundations/typography) - Learn about typography\n- [Spacing](/foundations/spacing) - Understand spacing principles","src/content/foundations/index.md","a6cfddde3ca33942",{"html":335,"metadata":336},"\u003Ch1 id=\"foundations\">Foundations\u003C/h1>\n\u003Cp>Foundations are the core design principles, guidelines, and visual elements that shape the Azion Design System. They provide consistency and coherence across all components and experiences.\u003C/p>\n\u003Ch2 id=\"whats-inside\">What’s Inside\u003C/h2>\n\u003Ch3 id=\"color\">Color\u003C/h3>\n\u003Cp>Our color system is built on semantic tokens that adapt to different contexts and themes. Learn how to use color effectively in your interfaces.\u003C/p>\n\u003Ch3 id=\"typography\">Typography\u003C/h3>\n\u003Cp>Typography guidelines ensure readable, accessible, and consistent text across all touchpoints.\u003C/p>\n\u003Ch3 id=\"spacing\">Spacing\u003C/h3>\n\u003Cp>A consistent spacing scale creates rhythm and harmony in layouts.\u003C/p>\n\u003Ch3 id=\"elevation\">Elevation\u003C/h3>\n\u003Cp>Elevation defines the visual hierarchy and depth of elements in the interface.\u003C/p>\n\u003Ch3 id=\"motion\">Motion\u003C/h3>\n\u003Cp>Motion principles guide animations and transitions for a polished user experience.\u003C/p>\n\u003Ch2 id=\"design-principles\">Design Principles\u003C/h2>\n\u003Ch3 id=\"1-clarity-first\">1. Clarity First\u003C/h3>\n\u003Cp>Every element should serve a purpose. Remove unnecessary complexity.\u003C/p>\n\u003Ch3 id=\"2-consistency\">2. Consistency\u003C/h3>\n\u003Cp>Use familiar patterns and consistent behaviors across the system.\u003C/p>\n\u003Ch3 id=\"3-accessibility\">3. Accessibility\u003C/h3>\n\u003Cp>Design for everyone. Meet WCAG 2.1 AA standards at minimum.\u003C/p>\n\u003Ch3 id=\"4-performance\">4. Performance\u003C/h3>\n\u003Cp>Optimize for speed and efficiency in both design and implementation.\u003C/p>\n\u003Ch2 id=\"next-steps\">Next Steps\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/foundations/color\">Color\u003C/a> - Explore the color system\u003C/li>\n\u003Cli>\u003Ca href=\"/foundations/typography\">Typography\u003C/a> - Learn about typography\u003C/li>\n\u003Cli>\u003Ca href=\"/foundations/spacing\">Spacing\u003C/a> - Understand spacing principles\u003C/li>\n\u003C/ul>",{"headings":337,"localImagePaths":373,"remoteImagePaths":374,"frontmatter":375,"imagePaths":376},[338,339,342,345,348,351,354,357,360,363,366,369,372],{"depth":100,"slug":324,"text":328},{"depth":206,"slug":340,"text":341},"whats-inside","What’s Inside",{"depth":343,"slug":196,"text":344},3,"Color",{"depth":343,"slug":346,"text":347},"typography","Typography",{"depth":343,"slug":349,"text":350},"spacing","Spacing",{"depth":343,"slug":352,"text":353},"elevation","Elevation",{"depth":343,"slug":355,"text":356},"motion","Motion",{"depth":206,"slug":358,"text":359},"design-principles","Design Principles",{"depth":343,"slug":361,"text":362},"1-clarity-first","1. Clarity First",{"depth":343,"slug":364,"text":365},"2-consistency","2. Consistency",{"depth":343,"slug":367,"text":368},"3-accessibility","3. Accessibility",{"depth":343,"slug":370,"text":371},"4-performance","4. Performance",{"depth":206,"slug":265,"text":266},[],[],{"title":328,"description":329,"navLabel":328,"order":100,"type":330},[],{"id":196,"data":378,"body":380,"filePath":381,"digest":382,"rendered":383,"legacyId":425},{"title":344,"description":379,"navLabel":344,"order":206,"category":196,"version":22,"language":23,"type":330},"The color system provides semantic tokens for consistent and accessible interfaces.","# Color\n\nColor is a fundamental element of visual design. The Azion Design System uses a semantic color system built on design tokens that adapt to different contexts and themes.\n\n## Color Philosophy\n\nOur color system is designed to be:\n\n- **Accessible**: All color combinations meet WCAG 2.1 AA contrast requirements\n- **Semantic**: Colors are named by purpose, not appearance\n- **Consistent**: The same tokens are used across all components\n- **Themeable**: Colors adapt automatically to light and dark modes\n\n## Primary Colors\n\nThe primary color palette represents the Azion brand:\n\n| Token | Light Mode | Dark Mode | Usage |\n|-------|------------|-----------|-------|\n| `--color-primary-50` | `#eff6ff` | `#1e3a8a` | Light backgrounds |\n| `--color-primary-100` | `#dbeafe` | `#1e40af` | Hover states |\n| `--color-primary-500` | `#3b82f6` | `#3b82f6` | Primary actions |\n| `--color-primary-700` | `#1d4ed8` | `#60a5fa` | Active states |\n| `--color-primary-900` | `#1e3a8a` | `#93c5fd` | Text on light |\n\n## Semantic Colors\n\nSemantic colors convey meaning:\n\n### Success\nUsed for positive actions and confirmations.\n\n### Warning\nUsed for cautionary messages and alerts.\n\n### Error\nUsed for error states and destructive actions.\n\n### Info\nUsed for informational messages and neutral states.\n\n## Usage Guidelines\n\n### Do\n- Use semantic tokens instead of raw color values\n- Ensure sufficient contrast for text\n- Use color consistently across similar elements\n\n### Don't\n- Don't use color alone to convey information\n- Don't create new colors outside the system\n- Don't use decorative colors that distract from content\n\n## Related\n\n- [Typography](/foundations/typography) - Typography system\n- [Tokens](/tokens) - Design token reference","src/content/foundations/color.md","47307b696fcf627b",{"html":384,"metadata":385},"\u003Ch1 id=\"color\">Color\u003C/h1>\n\u003Cp>Color is a fundamental element of visual design. The Azion Design System uses a semantic color system built on design tokens that adapt to different contexts and themes.\u003C/p>\n\u003Ch2 id=\"color-philosophy\">Color Philosophy\u003C/h2>\n\u003Cp>Our color system is designed to be:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Accessible\u003C/strong>: All color combinations meet WCAG 2.1 AA contrast requirements\u003C/li>\n\u003Cli>\u003Cstrong>Semantic\u003C/strong>: Colors are named by purpose, not appearance\u003C/li>\n\u003Cli>\u003Cstrong>Consistent\u003C/strong>: The same tokens are used across all components\u003C/li>\n\u003Cli>\u003Cstrong>Themeable\u003C/strong>: Colors adapt automatically to light and dark modes\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"primary-colors\">Primary Colors\u003C/h2>\n\u003Cp>The primary color palette represents the Azion brand:\u003C/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Token\u003C/th>\u003Cth>Light Mode\u003C/th>\u003Cth>Dark Mode\u003C/th>\u003Cth>Usage\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode>--color-primary-50\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#eff6ff\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#1e3a8a\u003C/code>\u003C/td>\u003Ctd>Light backgrounds\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>--color-primary-100\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#dbeafe\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#1e40af\u003C/code>\u003C/td>\u003Ctd>Hover states\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>--color-primary-500\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#3b82f6\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#3b82f6\u003C/code>\u003C/td>\u003Ctd>Primary actions\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>--color-primary-700\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#1d4ed8\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#60a5fa\u003C/code>\u003C/td>\u003Ctd>Active states\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>--color-primary-900\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#1e3a8a\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#93c5fd\u003C/code>\u003C/td>\u003Ctd>Text on light\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Ch2 id=\"semantic-colors\">Semantic Colors\u003C/h2>\n\u003Cp>Semantic colors convey meaning:\u003C/p>\n\u003Ch3 id=\"success\">Success\u003C/h3>\n\u003Cp>Used for positive actions and confirmations.\u003C/p>\n\u003Ch3 id=\"warning\">Warning\u003C/h3>\n\u003Cp>Used for cautionary messages and alerts.\u003C/p>\n\u003Ch3 id=\"error\">Error\u003C/h3>\n\u003Cp>Used for error states and destructive actions.\u003C/p>\n\u003Ch3 id=\"info\">Info\u003C/h3>\n\u003Cp>Used for informational messages and neutral states.\u003C/p>\n\u003Ch2 id=\"usage-guidelines\">Usage Guidelines\u003C/h2>\n\u003Ch3 id=\"do\">Do\u003C/h3>\n\u003Cul>\n\u003Cli>Use semantic tokens instead of raw color values\u003C/li>\n\u003Cli>Ensure sufficient contrast for text\u003C/li>\n\u003Cli>Use color consistently across similar elements\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"dont\">Don’t\u003C/h3>\n\u003Cul>\n\u003Cli>Don’t use color alone to convey information\u003C/li>\n\u003Cli>Don’t create new colors outside the system\u003C/li>\n\u003Cli>Don’t use decorative colors that distract from content\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"related\">Related\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/foundations/typography\">Typography\u003C/a> - Typography system\u003C/li>\n\u003Cli>\u003Ca href=\"/tokens\">Tokens\u003C/a> - Design token reference\u003C/li>\n\u003C/ul>",{"headings":386,"localImagePaths":421,"remoteImagePaths":422,"frontmatter":423,"imagePaths":424},[387,388,391,394,397,400,403,406,409,412,415,418],{"depth":100,"slug":196,"text":344},{"depth":206,"slug":389,"text":390},"color-philosophy","Color Philosophy",{"depth":206,"slug":392,"text":393},"primary-colors","Primary Colors",{"depth":206,"slug":395,"text":396},"semantic-colors","Semantic Colors",{"depth":343,"slug":398,"text":399},"success","Success",{"depth":343,"slug":401,"text":402},"warning","Warning",{"depth":343,"slug":404,"text":405},"error","Error",{"depth":343,"slug":407,"text":408},"info","Info",{"depth":206,"slug":410,"text":411},"usage-guidelines","Usage Guidelines",{"depth":343,"slug":413,"text":414},"do","Do",{"depth":343,"slug":416,"text":417},"dont","Don’t",{"depth":206,"slug":419,"text":420},"related","Related",[],[],{"title":344,"description":379,"navLabel":344,"order":206,"type":330,"category":196},[],"color.md","icons",["Map",190,428],{"id":190,"data":429,"body":432,"filePath":433,"digest":434,"rendered":435,"legacyId":216},{"title":430,"description":431,"navLabel":430,"order":100,"version":22,"language":23,"type":159},"Icons","Icon library with Azion Icons and PrimeIcons for use in your applications.","# Icons\n\nThe Azion Design System includes two icon libraries:\n\n- **Azion Icons** - Custom icons designed for Azion products\n- **PrimeIcons** - General purpose icon library from PrimeVue\n\n## Installation\n\nIcons are included in the `@aziontech/icons` package:\n\n```bash\nnpm install @aziontech/icons\n```\n\n## Usage\n\n### Font Icons\n\nUse icons as font icons with the appropriate class:\n\n```html\n\u003C!-- Azion Icon -->\n\u003Ci class=\"ai ai-azion\">\u003C/i>\n\n\u003C!-- PrimeIcon -->\n\u003Ci class=\"pi pi-home\">\u003C/i>\n```\n\n### SVG Icons\n\nImport SVG icons directly for more control:\n\n```js\nimport { aiAzion, piHome } from '@aziontech/icons/svg';\n```\n\n## Icon Categories\n\n### Azion Icons\n\nAzion Icons are organized into categories:\n\n- **Product Icons** - Azion product and service icons\n- **Action Icons** - Common action icons\n- **Status Icons** - Status and notification icons\n\n### PrimeIcons\n\nPrimeIcons provide a comprehensive set of general-purpose icons suitable for most UI needs.\n\n## Sizing\n\nIcons inherit their size from the font size of their container:\n\n```html\n\u003C!-- Small -->\n\u003Ci class=\"ai ai-azion text-sm\">\u003C/i>\n\n\u003C!-- Medium (default) -->\n\u003Ci class=\"ai ai-azion text-base\">\u003C/i>\n\n\u003C!-- Large -->\n\u003Ci class=\"ai ai-azion text-2xl\">\u003C/i>\n```\n\n## Accessibility\n\nWhen using icons alone, provide accessible labels:\n\n```html\n\u003C!-- Icon button with label -->\n\u003Cbutton aria-label=\"Settings\">\n \u003Ci class=\"pi pi-cog\">\u003C/i>\n\u003C/button>\n\n\u003C!-- Decorative icon (hidden from screen readers) -->\n\u003Ci class=\"pi pi-star\" aria-hidden=\"true\">\u003C/i>\n```\n\n## Related\n\n- [Button](/components/button) - Button component with icon support","src/content/icons/index.md","aea3324aedf050df",{"html":436,"metadata":437},"\u003Ch1 id=\"icons\">Icons\u003C/h1>\n\u003Cp>The Azion Design System includes two icon libraries:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Azion Icons\u003C/strong> - Custom icons designed for Azion products\u003C/li>\n\u003Cli>\u003Cstrong>PrimeIcons\u003C/strong> - General purpose icon library from PrimeVue\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"installation\">Installation\u003C/h2>\n\u003Cp>Icons are included in the \u003Ccode>@aziontech/icons\u003C/code> package:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> install\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/icons\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"usage\">Usage\u003C/h2>\n\u003Ch3 id=\"font-icons\">Font Icons\u003C/h3>\n\u003Cp>Use icons as font icons with the appropriate class:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"html\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"><!-- Azion Icon -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"ai ai-azion\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">></\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"><!-- PrimeIcon -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"pi pi-home\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">></\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch3 id=\"svg-icons\">SVG Icons\u003C/h3>\n\u003Cp>Import SVG icons directly for more control:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"js\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> { aiAzion, piHome } \u003C/span>\u003Cspan style=\"color:#F97583\">from\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> '@aziontech/icons/svg'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"icon-categories\">Icon Categories\u003C/h2>\n\u003Ch3 id=\"azion-icons\">Azion Icons\u003C/h3>\n\u003Cp>Azion Icons are organized into categories:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Product Icons\u003C/strong> - Azion product and service icons\u003C/li>\n\u003Cli>\u003Cstrong>Action Icons\u003C/strong> - Common action icons\u003C/li>\n\u003Cli>\u003Cstrong>Status Icons\u003C/strong> - Status and notification icons\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"primeicons\">PrimeIcons\u003C/h3>\n\u003Cp>PrimeIcons provide a comprehensive set of general-purpose icons suitable for most UI needs.\u003C/p>\n\u003Ch2 id=\"sizing\">Sizing\u003C/h2>\n\u003Cp>Icons inherit their size from the font size of their container:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"html\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"><!-- Small -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"ai ai-azion text-sm\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">></\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"><!-- Medium (default) -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"ai ai-azion text-base\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">></\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"><!-- Large -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"ai ai-azion text-2xl\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">></\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"accessibility\">Accessibility\u003C/h2>\n\u003Cp>When using icons alone, provide accessible labels:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"html\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"><!-- Icon button with label -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">button\u003C/span>\u003Cspan style=\"color:#B392F0\"> aria-label\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"Settings\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> <\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"pi pi-cog\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">></\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"></\u003C/span>\u003Cspan style=\"color:#85E89D\">button\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"><!-- Decorative icon (hidden from screen readers) -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"pi pi-star\"\u003C/span>\u003Cspan style=\"color:#B392F0\"> aria-hidden\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"true\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">></\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"related\">Related\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/components/button\">Button\u003C/a> - Button component with icon support\u003C/li>\n\u003C/ul>",{"headings":438,"localImagePaths":465,"remoteImagePaths":466,"frontmatter":467,"imagePaths":468},[439,440,441,444,447,450,453,456,459,462,464],{"depth":100,"slug":426,"text":430},{"depth":206,"slug":259,"text":260},{"depth":206,"slug":442,"text":443},"usage","Usage",{"depth":343,"slug":445,"text":446},"font-icons","Font Icons",{"depth":343,"slug":448,"text":449},"svg-icons","SVG Icons",{"depth":206,"slug":451,"text":452},"icon-categories","Icon Categories",{"depth":343,"slug":454,"text":455},"azion-icons","Azion Icons",{"depth":343,"slug":457,"text":458},"primeicons","PrimeIcons",{"depth":206,"slug":460,"text":461},"sizing","Sizing",{"depth":206,"slug":21,"text":463},"Accessibility",{"depth":206,"slug":419,"text":420},[],[],{"title":430,"description":431,"navLabel":430,"order":100,"type":159},[],"contributing",["Map",190,471],{"id":190,"data":472,"body":475,"filePath":476,"digest":477,"rendered":478,"legacyId":216},{"title":473,"description":474,"navLabel":473,"order":100,"version":22,"language":23,"type":469},"Contributing","Guidelines for contributing to the Azion Design System.","# Contributing\n\nThank you for your interest in contributing to the Azion Design System! This guide will help you understand how to contribute effectively.\n\n## Ways to Contribute\n\n### Report Issues\nFound a bug or have a suggestion? Open an issue on our GitHub repository.\n\n### Submit Pull Requests\nFix a bug or add a feature by submitting a pull request.\n\n### Improve Documentation\nHelp us improve our documentation by fixing typos, adding examples, or clarifying explanations.\n\n## Development Setup\n\n1. Fork and clone the repository\n2. Install dependencies: `pnpm install`\n3. Start the development server: `pnpm docs:dev`\n\n## Coding Standards\n\n### Code Style\n- Follow the existing code style\n- Use TypeScript for all new code\n- Write meaningful commit messages\n\n### Component Development\n- Follow the component API conventions\n- Include accessibility features\n- Write unit tests for new components\n\n### Documentation\n- Write clear, concise documentation\n- Include code examples\n- Update the changelog\n\n## Pull Request Process\n\n1. Create a feature branch from `main`\n2. Make your changes\n3. Run tests: `pnpm test`\n4. Submit a pull request with a clear description\n\n## Code of Conduct\n\nPlease read and follow our [Code of Conduct](https://github.com/aziontech/webkit/blob/main/CODE_OF_CONDUCT.md).\n\n## Need Help?\n\n- Open a discussion on GitHub\n- Join our community chat\n- Email us at design-system@azion.com\n\n## Related\n\n- [Installation](/get-started/installation) - Get started with the design system","src/content/contributing/index.md","2489a445c8aac7c2",{"html":479,"metadata":480},"\u003Ch1 id=\"contributing\">Contributing\u003C/h1>\n\u003Cp>Thank you for your interest in contributing to the Azion Design System! This guide will help you understand how to contribute effectively.\u003C/p>\n\u003Ch2 id=\"ways-to-contribute\">Ways to Contribute\u003C/h2>\n\u003Ch3 id=\"report-issues\">Report Issues\u003C/h3>\n\u003Cp>Found a bug or have a suggestion? Open an issue on our GitHub repository.\u003C/p>\n\u003Ch3 id=\"submit-pull-requests\">Submit Pull Requests\u003C/h3>\n\u003Cp>Fix a bug or add a feature by submitting a pull request.\u003C/p>\n\u003Ch3 id=\"improve-documentation\">Improve Documentation\u003C/h3>\n\u003Cp>Help us improve our documentation by fixing typos, adding examples, or clarifying explanations.\u003C/p>\n\u003Ch2 id=\"development-setup\">Development Setup\u003C/h2>\n\u003Col>\n\u003Cli>Fork and clone the repository\u003C/li>\n\u003Cli>Install dependencies: \u003Ccode>pnpm install\u003C/code>\u003C/li>\n\u003Cli>Start the development server: \u003Ccode>pnpm docs:dev\u003C/code>\u003C/li>\n\u003C/ol>\n\u003Ch2 id=\"coding-standards\">Coding Standards\u003C/h2>\n\u003Ch3 id=\"code-style\">Code Style\u003C/h3>\n\u003Cul>\n\u003Cli>Follow the existing code style\u003C/li>\n\u003Cli>Use TypeScript for all new code\u003C/li>\n\u003Cli>Write meaningful commit messages\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"component-development\">Component Development\u003C/h3>\n\u003Cul>\n\u003Cli>Follow the component API conventions\u003C/li>\n\u003Cli>Include accessibility features\u003C/li>\n\u003Cli>Write unit tests for new components\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"documentation\">Documentation\u003C/h3>\n\u003Cul>\n\u003Cli>Write clear, concise documentation\u003C/li>\n\u003Cli>Include code examples\u003C/li>\n\u003Cli>Update the changelog\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"pull-request-process\">Pull Request Process\u003C/h2>\n\u003Col>\n\u003Cli>Create a feature branch from \u003Ccode>main\u003C/code>\u003C/li>\n\u003Cli>Make your changes\u003C/li>\n\u003Cli>Run tests: \u003Ccode>pnpm test\u003C/code>\u003C/li>\n\u003Cli>Submit a pull request with a clear description\u003C/li>\n\u003C/ol>\n\u003Ch2 id=\"code-of-conduct\">Code of Conduct\u003C/h2>\n\u003Cp>Please read and follow our \u003Ca href=\"https://github.com/aziontech/webkit/blob/main/CODE_OF_CONDUCT.md\">Code of Conduct\u003C/a>.\u003C/p>\n\u003Ch2 id=\"need-help\">Need Help?\u003C/h2>\n\u003Cul>\n\u003Cli>Open a discussion on GitHub\u003C/li>\n\u003Cli>Join our community chat\u003C/li>\n\u003Cli>Email us at \u003Ca href=\"mailto:design-system@azion.com\">design-system@azion.com\u003C/a>\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"related\">Related\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/get-started/installation\">Installation\u003C/a> - Get started with the design system\u003C/li>\n\u003C/ul>",{"headings":481,"localImagePaths":520,"remoteImagePaths":521,"frontmatter":522,"imagePaths":523},[482,483,486,489,492,495,498,501,504,507,510,513,516,519],{"depth":100,"slug":469,"text":473},{"depth":206,"slug":484,"text":485},"ways-to-contribute","Ways to Contribute",{"depth":343,"slug":487,"text":488},"report-issues","Report Issues",{"depth":343,"slug":490,"text":491},"submit-pull-requests","Submit Pull Requests",{"depth":343,"slug":493,"text":494},"improve-documentation","Improve Documentation",{"depth":206,"slug":496,"text":497},"development-setup","Development Setup",{"depth":206,"slug":499,"text":500},"coding-standards","Coding Standards",{"depth":343,"slug":502,"text":503},"code-style","Code Style",{"depth":343,"slug":505,"text":506},"component-development","Component Development",{"depth":343,"slug":508,"text":509},"documentation","Documentation",{"depth":206,"slug":511,"text":512},"pull-request-process","Pull Request Process",{"depth":206,"slug":514,"text":515},"code-of-conduct","Code of Conduct",{"depth":206,"slug":517,"text":518},"need-help","Need Help?",{"depth":206,"slug":419,"text":420},[],[],{"title":473,"description":474,"navLabel":473,"order":100,"type":469},[],"patterns",["Map",190,526],{"id":190,"data":527,"body":532,"filePath":533,"digest":534,"rendered":535,"legacyId":216},{"title":528,"description":529,"navLabel":530,"order":100,"category":307,"version":22,"language":23,"type":531},"Design Patterns","Common design patterns and best practices for building with the Azion Design System.","Patterns","pattern","## Overview\n\nDesign patterns are reusable solutions to common problems in interface design. They provide proven approaches to typical UX challenges.\n\n## Available Patterns\n\nPattern documentation is being prepared. Check back soon for detailed pattern references.\n\n\u003CCallout type=\"info\">\nThis section will include patterns like form validation, search experiences, and navigation structures.\n\u003C/Callout>","src/content/patterns/index.md","17703faaf9525277",{"html":536,"metadata":537},"\u003Ch2 id=\"overview\">Overview\u003C/h2>\n\u003Cp>Design patterns are reusable solutions to common problems in interface design. They provide proven approaches to typical UX challenges.\u003C/p>\n\u003Ch2 id=\"available-patterns\">Available Patterns\u003C/h2>\n\u003Cp>Pattern documentation is being prepared. Check back soon for detailed pattern references.\u003C/p>\n\u003Ccallout type=\"info\">\nThis section will include patterns like form validation, search experiences, and navigation structures.\n\u003C/callout>",{"headings":538,"localImagePaths":543,"remoteImagePaths":544,"frontmatter":545,"imagePaths":546},[539,540],{"depth":206,"slug":207,"text":208},{"depth":206,"slug":541,"text":542},"available-patterns","Available Patterns",[],[],{"title":528,"description":529,"navLabel":530,"order":100,"type":531,"category":307},[],"playground",["Map",190,549],{"id":190,"data":550,"body":554,"filePath":555,"digest":556,"rendered":557,"legacyId":216},{"title":551,"description":552,"navLabel":553,"order":100,"version":22,"language":23,"type":547},"Component Playground","Interactive component playground for experimenting with Azion Design System components.","Playground","## Overview\n\nThe Component Playground provides an interactive environment for experimenting with Azion Design System components. You can modify props in real-time and see how components behave.\n\n## Coming Soon\n\nThe playground is currently under development. Check back soon for an interactive component testing experience.\n\n\u003CCallout type=\"info\">\nThe playground will allow you to:\n- Select any component from the library\n- Modify props and see live updates\n- Copy generated code snippets\n- Test different states and variants\n\u003C/Callout>","src/content/playground/index.md","2f669a1cc93c4d61",{"html":558,"metadata":559},"\u003Ch2 id=\"overview\">Overview\u003C/h2>\n\u003Cp>The Component Playground provides an interactive environment for experimenting with Azion Design System components. You can modify props in real-time and see how components behave.\u003C/p>\n\u003Ch2 id=\"coming-soon\">Coming Soon\u003C/h2>\n\u003Cp>The playground is currently under development. Check back soon for an interactive component testing experience.\u003C/p>\n\u003Ccallout type=\"info\">\nThe playground will allow you to:\n- Select any component from the library\n- Modify props and see live updates\n- Copy generated code snippets\n- Test different states and variants\n\u003C/callout>",{"headings":560,"localImagePaths":565,"remoteImagePaths":566,"frontmatter":567,"imagePaths":568},[561,562],{"depth":206,"slug":207,"text":208},{"depth":206,"slug":563,"text":564},"coming-soon","Coming Soon",[],[],{"title":551,"description":552,"navLabel":553,"order":100,"type":547},[]] \ No newline at end of file +[["Map",1,2,9,10,188,189,217,218,241,242,299,300,323,324,382,383,481,482,524,525,546,547,569,570],"meta::meta",["Map",3,4,5,6,7,8],"astro-version","5.18.0","content-config-digest","ba2a128a8e3c2cc6","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"site\":\"https://docs.azion.com\",\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":true,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true,\"allowedDomains\":[],\"actionBodySizeLimit\":1048576},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"liveContentCollections\":false,\"csp\":false,\"staticImportMetaEnv\":false,\"chromeDevtoolsWorkspace\":false,\"failOnPrerenderConflict\":false,\"svgo\":false},\"legacy\":{\"collections\":false}}","components",["Map",11,12,95,96],"fieldset",{"id":11,"data":13,"body":90,"filePath":91,"digest":92,"legacyId":93,"deferredRender":94},{"title":14,"description":15,"category":16,"status":17,"since":18,"tags":19,"version":22,"language":23,"type":24,"component":25,"source":26,"storybook":27,"figma":28,"related":29,"anatomy":34,"accessibility":44,"api":62},"Fieldset","Group related form inputs under a shared label for better organization and accessibility.","form","stable","1.0.0",[16,20,21],"grouping","accessibility","v1","en","component","AzFieldset","https://github.com/aziontech/webkit/tree/main/packages/components/src/Fieldset","https://storybook.azion.com/?path=/story/form-fieldset","https://figma.com/file/azion-design-system?node-id=fieldset",[30,31,32,33],"Form","Input","Select","Checkbox",[35,38,41],{"label":36,"description":37},"Fieldset Container","The grouping container with border styling",{"label":39,"description":40},"Legend","The title/label for the group of inputs",{"label":42,"description":43},"Content Area","The area containing grouped form controls",{"keyboard":45,"aria":49,"wcag":56,"notes":59},[46],{"keys":47,"action":48},"Tab","Moves focus to the first focusable element within the fieldset",[50,53],{"attribute":51,"usage":52},"aria-describedby","Can reference a description for the fieldset group",{"attribute":54,"usage":55},"aria-required=\"true\"","When all fields in the group are required",[57,58],"1.3.1 Info and Relationships","3.3.2 Labels or Instructions",[60,61],"Native \u003Cfieldset> and \u003Clegend> elements provide built-in accessibility","Screen readers announce the legend when entering the fieldset",{"props":63,"slots":83,"events":89},[64,70,75,78],{"name":65,"type":66,"default":67,"required":68,"description":69},"legend","string","undefined",false,"The text for the fieldset legend",{"name":71,"type":72,"default":73,"required":68,"description":74},"disabled","boolean","false","Whether all controls in the fieldset are disabled",{"name":76,"type":72,"default":73,"required":68,"description":77},"required","Whether all fields in the group are required",{"name":79,"type":80,"default":81,"required":68,"description":82},"variant","'default' | 'card' | 'transparent'","'default'","Visual style variant",[84,87],{"name":85,"description":86},"default","Form controls and content inside the fieldset",{"name":65,"description":88},"Custom legend content (overrides legend prop)",[],"import { ExampleBlock, Callout } from '@components/docs';\n\n## Overview\n\nThe Fieldset component provides a way to group related form controls together. It renders a native HTML `\u003Cfieldset>` element with proper accessibility features, including an associated `\u003Clegend>` for the group label.\n\nFieldsets are essential for creating accessible forms, as they help screen reader users understand the relationship between form controls.\n\n\u003CCallout type=\"info\" title=\"Semantic HTML\">\n This component uses native `\u003Cfieldset>` and `\u003Clegend>` elements, which provide built-in accessibility benefits without requiring additional ARIA attributes.\n\u003C/Callout>\n\n## When to Use\n\nUse Fieldset when you need to:\n\n- Group related form inputs (e.g., address fields, contact information)\n- Create logical sections within a larger form\n- Improve form accessibility with proper semantic structure\n- Apply a shared label or description to multiple inputs\n- Disable multiple inputs at once\n\n## Examples\n\n### Basic Fieldset\n\n\u003CExampleBlock \n title=\"Basic fieldset with legend\"\n description=\"A simple fieldset grouping personal information fields\"\n code={`\u003CAzFieldset legend=\"Personal Information\">\n \u003CAzInput label=\"Full Name\" />\n \u003CAzInput label=\"Email\" type=\"email\" />\n\u003C/AzFieldset>`}\n>\n \u003Cfieldset class=\"border border-gray-300 rounded-lg p-4\">\n \u003Clegend class=\"text-sm font-medium text-text-primary px-2\">Personal Information\u003C/legend>\n \u003Cdiv class=\"space-y-4 mt-2\">\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Full Name\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-primary-500\" placeholder=\"Enter your name\" />\n \u003C/div>\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Email\u003C/label>\n \u003Cinput type=\"email\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-primary-500\" placeholder=\"Enter your email\" />\n \u003C/div>\n \u003C/div>\n \u003C/fieldset>\n\u003C/ExampleBlock>\n\n### Address Grouping\n\n\u003CExampleBlock \n title=\"Address fields grouped\"\n description=\"Grouping address-related fields together\"\n code={`\u003CAzFieldset legend=\"Shipping Address\">\n \u003CAzInput label=\"Street Address\" />\n \u003Cdiv class=\"grid grid-cols-2 gap-4\">\n \u003CAzInput label=\"City\" />\n \u003CAzInput label=\"ZIP Code\" />\n \u003C/div>\n\u003C/AzFieldset>`}\n>\n \u003Cfieldset class=\"border border-gray-300 rounded-lg p-4\">\n \u003Clegend class=\"text-sm font-medium text-text-primary px-2\">Shipping Address\u003C/legend>\n \u003Cdiv class=\"space-y-4 mt-2\">\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Street Address\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md\" placeholder=\"123 Main St\" />\n \u003C/div>\n \u003Cdiv class=\"grid grid-cols-2 gap-4\">\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">City\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md\" placeholder=\"City\" />\n \u003C/div>\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">ZIP Code\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md\" placeholder=\"12345\" />\n \u003C/div>\n \u003C/div>\n \u003C/div>\n \u003C/fieldset>\n\u003C/ExampleBlock>\n\n### Disabled State\n\n\u003CExampleBlock \n title=\"Disabled fieldset\"\n description=\"All inputs disabled via the fieldset\"\n code={`\u003CAzFieldset legend=\"Disabled Group\" disabled>\n \u003CAzInput label=\"Input 1\" />\n \u003CAzInput label=\"Input 2\" />\n\u003C/AzFieldset>`}\n>\n \u003Cfieldset class=\"border border-gray-300 rounded-lg p-4 opacity-50\" disabled>\n \u003Clegend class=\"text-sm font-medium text-text-primary px-2\">Disabled Group\u003C/legend>\n \u003Cdiv class=\"space-y-4 mt-2\">\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Input 1\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-100\" placeholder=\"Disabled\" />\n \u003C/div>\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Input 2\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-100\" placeholder=\"Disabled\" />\n \u003C/div>\n \u003C/div>\n \u003C/fieldset>\n\u003C/ExampleBlock>\n\n## States\n\n\u003CStateGrid columns={3}>\n \u003Cfieldset slot=\"default\" class=\"border border-gray-300 rounded-lg p-3\">\n \u003Clegend class=\"text-xs font-medium text-text-primary px-2\">Default\u003C/legend>\n \u003Cinput type=\"text\" class=\"w-full px-2 py-1 text-sm border border-gray-300 rounded\" placeholder=\"Input\" />\n \u003C/fieldset>\n \u003Cfieldset slot=\"focus\" class=\"border border-primary-300 rounded-lg p-3 ring-2 ring-primary-100\">\n \u003Clegend class=\"text-xs font-medium text-text-primary px-2\">Focused\u003C/legend>\n \u003Cinput type=\"text\" class=\"w-full px-2 py-1 text-sm border border-primary-500 rounded ring-1 ring-primary-500\" placeholder=\"Input\" />\n \u003C/fieldset>\n \u003Cfieldset slot=\"disabled\" class=\"border border-gray-200 rounded-lg p-3 opacity-50\" disabled>\n \u003Clegend class=\"text-xs font-medium text-text-primary px-2\">Disabled\u003C/legend>\n \u003Cinput type=\"text\" class=\"w-full px-2 py-1 text-sm border border-gray-200 rounded bg-gray-100\" placeholder=\"Disabled\" disabled />\n \u003C/fieldset>\n\u003C/StateGrid>\n\n## Do's and Don'ts\n\n\u003CDoDont title=\"Fieldset usage\">\n \u003Cdiv slot=\"do\">\n \u003Cp class=\"text-sm mb-2\">Group related form fields:\u003C/p>\n \u003Cfieldset class=\"border border-gray-300 rounded p-3\">\n \u003Clegend class=\"text-xs font-medium px-2\">Contact Info\u003C/legend>\n \u003Cdiv class=\"space-y-2\">\n \u003Cinput type=\"text\" class=\"w-full px-2 py-1 text-sm border border-gray-300 rounded\" placeholder=\"Email\" />\n \u003Cinput type=\"text\" class=\"w-full px-2 py-1 text-sm border border-gray-300 rounded\" placeholder=\"Phone\" />\n \u003C/div>\n \u003C/fieldset>\n \u003C/div>\n \u003Cdiv slot=\"dont\">\n \u003Cp class=\"text-sm mb-2\">Don't use for unrelated fields:\u003C/p>\n \u003Cfieldset class=\"border border-gray-300 rounded p-3\">\n \u003Clegend class=\"text-xs font-medium px-2\">Mixed Fields\u003C/legend>\n \u003Cinput type=\"text\" class=\"w-full px-2 py-1 text-sm border border-gray-300 rounded mb-2\" placeholder=\"Name\" />\n \u003Cinput type=\"text\" class=\"w-full px-2 py-1 text-sm border border-gray-300 rounded\" placeholder=\"Favorite Color\" />\n \u003C/fieldset>\n \u003Cp class=\"text-xs text-red-600 mt-1\">These aren't logically related\u003C/p>\n \u003C/div>\n\u003C/DoDont>\n\n\u003CDoDont>\n \u003Cdiv slot=\"do\">\n \u003Cp class=\"text-sm mb-2\">Use descriptive legends:\u003C/p>\n \u003Cfieldset class=\"border border-gray-300 rounded p-3\">\n \u003Clegend class=\"text-xs font-medium px-2\">Billing Address\u003C/legend>\n \u003Cinput type=\"text\" class=\"w-full px-2 py-1 text-sm border border-gray-300 rounded\" placeholder=\"Street\" />\n \u003C/fieldset>\n \u003C/div>\n \u003Cdiv slot=\"dont\">\n \u003Cp class=\"text-sm mb-2\">Don't use vague legends:\u003C/p>\n \u003Cfieldset class=\"border border-gray-300 rounded p-3\">\n \u003Clegend class=\"text-xs font-medium px-2\">Info\u003C/legend>\n \u003Cinput type=\"text\" class=\"w-full px-2 py-1 text-sm border border-gray-300 rounded\" placeholder=\"Street\" />\n \u003C/fieldset>\n \u003C/div>\n\u003C/DoDont>","src/content/components/fieldset.mdx","ba9405c687224c85","fieldset.mdx",true,"button",{"id":95,"data":97,"body":184,"filePath":185,"digest":186,"legacyId":187,"deferredRender":94},{"title":98,"description":99,"navLabel":98,"order":100,"category":16,"status":17,"since":18,"tags":101,"version":22,"language":23,"type":24,"component":104,"source":105,"storybook":106,"figma":107,"related":108,"anatomy":110,"accessibility":120,"api":142},"Button","Buttons trigger actions and events when users interact with them.",1,[102,16,103],"action","interactive","AzButton","https://github.com/aziontech/webkit/tree/main/packages/components/src/Button","https://storybook.azion.com/components/button","https://figma.com/file/azion-design-system/components/button",[31,32,109],"IconButton",[111,114,117],{"label":112,"description":113},"Container","The clickable area with background styling and border",{"label":115,"description":116},"Label","The text content describing the action",{"label":118,"description":119},"Icon (optional)","An optional icon for visual emphasis before or after the label",{"keyboard":121,"aria":129,"wcag":139},[122,124,127],{"keys":47,"action":123},"Moves focus to the button",{"keys":125,"action":126},"Enter","Activates the button when focused",{"keys":128,"action":126},"Space",[130,133,136],{"attribute":131,"usage":132},"aria-disabled=\"true\"","Use instead of disabled attribute for screen readers to announce the disabled state",{"attribute":134,"usage":135},"aria-label","Required for icon-only buttons to provide accessible name",{"attribute":137,"usage":138},"aria-busy=\"true\"","When button is in loading state",[140,141],"2.1.1 Keyboard","4.1.2 Name, Role, Value",{"props":143,"slots":169,"events":179},[144,148,153,155,158,161,166],{"name":79,"type":145,"default":146,"required":68,"description":147},"'primary' | 'secondary' | 'destructive' | 'ghost'","'primary'","Visual style variant of the button",{"name":149,"type":150,"default":151,"required":68,"description":152},"size","'sm' | 'md' | 'lg'","'md'","Size of the button",{"name":71,"type":72,"default":73,"required":68,"description":154},"Whether the button is disabled",{"name":156,"type":72,"default":73,"required":68,"description":157},"loading","Shows loading spinner and disables interaction",{"name":159,"type":66,"default":67,"required":68,"description":160},"icon","Icon name to display before the label",{"name":162,"type":163,"default":164,"required":68,"description":165},"iconPosition","'left' | 'right'","'left'","Position of the icon relative to label",{"name":167,"type":72,"default":73,"required":68,"description":168},"fullWidth","Whether button takes full width of container",[170,172,176],{"name":85,"description":171},"Button label content",{"name":173,"description":174,"props":175},"icon-left","Custom icon before the label","iconClass: string",{"name":177,"description":178,"props":175},"icon-right","Custom icon after the label",[180],{"name":181,"payload":182,"description":183},"click","MouseEvent","Fired when button is clicked and not disabled","import { ExampleBlock, Callout, StateGrid } from '@components/docs';\n\n## Overview\n\nButtons are interactive elements that trigger actions when clicked or tapped. They communicate actions that users can take and are typically placed throughout your UI, from forms to dialogs to navigation.\n\nThe Button component provides a consistent, accessible way to trigger actions throughout your application.\n\n## When to Use\n\nUse buttons to:\n\n- Trigger primary actions (Submit, Save, Continue)\n- Navigate to different views or pages\n- Toggle states or settings\n- Trigger secondary actions (Cancel, Delete)\n- Submit forms\n\n\u003CCallout type=\"tip\" title=\"Choosing the right variant\">\n Use **primary** for the main action, **secondary** for alternative actions, **destructive** for dangerous actions, and **ghost** for less prominent actions.\n\u003C/Callout>\n\n## Examples\n\n### Primary Button\n\nUse for the main action in a context.\n\n\u003CExampleBlock \n title=\"Primary variant\"\n description=\"The default button style for primary actions\"\n code={`\u003CAzButton variant=\"primary\">Primary Button\u003C/AzButton>`}\n>\n \u003Cbutton class=\"px-4 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 transition-colors font-medium\">\n Primary Button\n \u003C/button>\n\u003C/ExampleBlock>\n\n### Secondary Button\n\nUse for secondary or alternative actions.\n\n\u003CExampleBlock \n title=\"Secondary variant\"\n description=\"For alternative or less prominent actions\"\n code={`\u003CAzButton variant=\"secondary\">Secondary Button\u003C/AzButton>`}\n>\n \u003Cbutton class=\"px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors border border-gray-300 font-medium\">\n Secondary Button\n \u003C/button>\n\u003C/ExampleBlock>\n\n### Destructive Button\n\nUse for destructive or irreversible actions.\n\n\u003CExampleBlock \n title=\"Destructive variant\"\n description=\"For dangerous actions like delete or remove\"\n code={`\u003CAzButton variant=\"destructive\">Delete\u003C/AzButton>`}\n>\n \u003Cbutton class=\"px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 transition-colors font-medium\">\n Delete\n \u003C/button>\n\u003C/ExampleBlock>\n\n### Button Sizes\n\n\u003CExampleBlock \n title=\"Size variants\"\n description=\"Available in small, medium, and large sizes\"\n code={`\u003CAzButton size=\"sm\">Small\u003C/AzButton>\n\u003CAzButton size=\"md\">Medium\u003C/AzButton>\n\u003CAzButton size=\"lg\">Large\u003C/AzButton>`}\n>\n \u003Cdiv class=\"flex items-center gap-3\">\n \u003Cbutton class=\"px-3 py-1.5 text-sm bg-primary-500 text-white rounded-md hover:bg-primary-600 transition-colors font-medium\">\n Small\n \u003C/button>\n \u003Cbutton class=\"px-4 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 transition-colors font-medium\">\n Medium\n \u003C/button>\n \u003Cbutton class=\"px-6 py-3 text-lg bg-primary-500 text-white rounded-md hover:bg-primary-600 transition-colors font-medium\">\n Large\n \u003C/button>\n \u003C/div>\n\u003C/ExampleBlock>\n\n## States\n\n\u003CStateGrid columns={4}>\n \u003Cbutton slot=\"default\" class=\"px-4 py-2 bg-primary-500 text-white rounded-md font-medium\">Button\u003C/button>\n \u003Cbutton slot=\"hover\" class=\"px-4 py-2 bg-primary-600 text-white rounded-md font-medium\">Button\u003C/button>\n \u003Cbutton slot=\"focus\" class=\"px-4 py-2 bg-primary-500 text-white rounded-md font-medium ring-2 ring-primary-300 ring-offset-2\">Button\u003C/button>\n \u003Cbutton slot=\"disabled\" class=\"px-4 py-2 bg-gray-300 text-gray-500 rounded-md font-medium cursor-not-allowed\" disabled>Button\u003C/button>\n\u003C/StateGrid>\n\n## Do's and Don'ts\n\n\u003CDoDont title=\"Usage guidelines\">\n \u003Ctemplate v-slot:do>\n \u003Cp class=\"text-sm mb-2\">Use buttons for actionable items:\u003C/p>\n \u003Cbutton class=\"px-4 py-2 bg-primary-500 text-white rounded-md text-sm\">Submit Form\u003C/button>\n \u003C/template>\n \u003Ctemplate v-slot:dont>\n \u003Cp class=\"text-sm mb-2\">Don't use buttons for navigation:\u003C/p>\n \u003Cbutton class=\"px-4 py-2 bg-primary-500 text-white rounded-md text-sm\">Go to Dashboard\u003C/button>\n \u003Cp class=\"text-xs text-red-600 mt-1\">Use a link instead\u003C/p>\n \u003C/template>\n\u003C/DoDont>\n\n\u003CDoDont>\n \u003Ctemplate v-slot:do>\n \u003Cp class=\"text-sm mb-2\">Use clear, action-oriented labels:\u003C/p>\n \u003Cbutton class=\"px-4 py-2 bg-primary-500 text-white rounded-md text-sm\">Save Changes\u003C/button>\n \u003C/template>\n \u003Ctemplate v-slot:dont>\n \u003Cp class=\"text-sm mb-2\">Don't use vague labels:\u003C/p>\n \u003Cbutton class=\"px-4 py-2 bg-primary-500 text-white rounded-md text-sm\">Click Here\u003C/button>\n \u003C/template>\n\u003C/DoDont>\n\n## Playground\n\nExplore the Button component interactively. Adjust props and see live changes.\n\nimport { Playground } from '../../components/playground';\nimport { AzButton } from '../../components/demo';\nimport { buttonProps } from '../../components/demo/props-metadata';\n\n\u003CPlayground\n client:load\n component={AzButton}\n component-name=\"AzButton\"\n props={buttonProps}\n slot-content=\"Button\"\n/>","src/content/components/button.mdx","f85f2e2f9af9688c","button.mdx","tokens",["Map",190,191],"index",{"id":190,"data":192,"body":198,"filePath":199,"digest":200,"rendered":201,"legacyId":216},{"title":193,"description":194,"navLabel":195,"order":100,"category":196,"version":22,"language":23,"type":197},"Design Tokens","Design tokens that power the visual language of the Azion Design System.","Tokens","color","token","## Overview\n\nDesign tokens are the visual design atoms of the design system. They are named entities that store visual design attributes, enabling consistency across products and platforms.\n\n## Token Categories\n\n- **Color Tokens** - Semantic and primitive color values\n- **Typography Tokens** - Font families, sizes, weights, and line heights\n- **Spacing Tokens** - Consistent spacing scale\n- **Border Tokens** - Border radius, width, and style values\n- **Shadow Tokens** - Elevation and shadow values\n- **Motion Tokens** - Animation timing and easing values\n\n\u003CCallout type=\"info\">\nToken documentation is being prepared. Check back soon for detailed token references.\n\u003C/Callout>","src/content/tokens/index.md","353109d85593a275",{"html":202,"metadata":203},"\u003Ch2 id=\"overview\">Overview\u003C/h2>\n\u003Cp>Design tokens are the visual design atoms of the design system. They are named entities that store visual design attributes, enabling consistency across products and platforms.\u003C/p>\n\u003Ch2 id=\"token-categories\">Token Categories\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Cstrong>Color Tokens\u003C/strong> - Semantic and primitive color values\u003C/li>\n\u003Cli>\u003Cstrong>Typography Tokens\u003C/strong> - Font families, sizes, weights, and line heights\u003C/li>\n\u003Cli>\u003Cstrong>Spacing Tokens\u003C/strong> - Consistent spacing scale\u003C/li>\n\u003Cli>\u003Cstrong>Border Tokens\u003C/strong> - Border radius, width, and style values\u003C/li>\n\u003Cli>\u003Cstrong>Shadow Tokens\u003C/strong> - Elevation and shadow values\u003C/li>\n\u003Cli>\u003Cstrong>Motion Tokens\u003C/strong> - Animation timing and easing values\u003C/li>\n\u003C/ul>\n\u003Ccallout type=\"info\">\nToken documentation is being prepared. Check back soon for detailed token references.\n\u003C/callout>",{"headings":204,"localImagePaths":212,"remoteImagePaths":213,"frontmatter":214,"imagePaths":215},[205,209],{"depth":206,"slug":207,"text":208},2,"overview","Overview",{"depth":206,"slug":210,"text":211},"token-categories","Token Categories",[],[],{"title":193,"description":194,"navLabel":195,"order":100,"type":197,"category":196},[],"index.md","blocks",["Map",190,219],{"id":190,"data":220,"body":226,"filePath":227,"digest":228,"rendered":229,"legacyId":216},{"title":221,"description":222,"navLabel":223,"order":100,"category":224,"version":22,"language":23,"type":225},"UI Blocks","Composable UI blocks combining multiple components for common use cases.","Blocks","layout","block","## Overview\n\nUI Blocks are pre-built combinations of components that solve common interface patterns. They provide a starting point for building pages and features.\n\n## Available Blocks\n\nBlock documentation is being prepared. Check back soon for detailed block references.\n\n\u003CCallout type=\"info\">\nThis section will include blocks like headers, forms, cards, and navigation patterns.\n\u003C/Callout>","src/content/blocks/index.md","d4a0693523f6fc4c",{"html":230,"metadata":231},"\u003Ch2 id=\"overview\">Overview\u003C/h2>\n\u003Cp>UI Blocks are pre-built combinations of components that solve common interface patterns. They provide a starting point for building pages and features.\u003C/p>\n\u003Ch2 id=\"available-blocks\">Available Blocks\u003C/h2>\n\u003Cp>Block documentation is being prepared. Check back soon for detailed block references.\u003C/p>\n\u003Ccallout type=\"info\">\nThis section will include blocks like headers, forms, cards, and navigation patterns.\n\u003C/callout>",{"headings":232,"localImagePaths":237,"remoteImagePaths":238,"frontmatter":239,"imagePaths":240},[233,234],{"depth":206,"slug":207,"text":208},{"depth":206,"slug":235,"text":236},"available-blocks","Available Blocks",[],[],{"title":221,"description":222,"navLabel":223,"order":100,"type":225,"category":224},[],"contributing",["Map",190,243],{"id":190,"data":244,"body":247,"filePath":248,"digest":249,"rendered":250,"legacyId":216},{"title":245,"description":246,"navLabel":245,"order":100,"version":22,"language":23,"type":241},"Contributing","Guidelines for contributing to the Azion Design System.","# Contributing\n\nThank you for your interest in contributing to the Azion Design System! This guide will help you understand how to contribute effectively.\n\n## Ways to Contribute\n\n### Report Issues\nFound a bug or have a suggestion? Open an issue on our GitHub repository.\n\n### Submit Pull Requests\nFix a bug or add a feature by submitting a pull request.\n\n### Improve Documentation\nHelp us improve our documentation by fixing typos, adding examples, or clarifying explanations.\n\n## Development Setup\n\n1. Fork and clone the repository\n2. Install dependencies: `pnpm install`\n3. Start the development server: `pnpm docs:dev`\n\n## Coding Standards\n\n### Code Style\n- Follow the existing code style\n- Use TypeScript for all new code\n- Write meaningful commit messages\n\n### Component Development\n- Follow the component API conventions\n- Include accessibility features\n- Write unit tests for new components\n\n### Documentation\n- Write clear, concise documentation\n- Include code examples\n- Update the changelog\n\n## Pull Request Process\n\n1. Create a feature branch from `main`\n2. Make your changes\n3. Run tests: `pnpm test`\n4. Submit a pull request with a clear description\n\n## Code of Conduct\n\nPlease read and follow our [Code of Conduct](https://github.com/aziontech/webkit/blob/main/CODE_OF_CONDUCT.md).\n\n## Need Help?\n\n- Open a discussion on GitHub\n- Join our community chat\n- Email us at design-system@azion.com\n\n## Related\n\n- [Installation](/get-started/installation) - Get started with the design system","src/content/contributing/index.md","2489a445c8aac7c2",{"html":251,"metadata":252},"\u003Ch1 id=\"contributing\">Contributing\u003C/h1>\n\u003Cp>Thank you for your interest in contributing to the Azion Design System! This guide will help you understand how to contribute effectively.\u003C/p>\n\u003Ch2 id=\"ways-to-contribute\">Ways to Contribute\u003C/h2>\n\u003Ch3 id=\"report-issues\">Report Issues\u003C/h3>\n\u003Cp>Found a bug or have a suggestion? Open an issue on our GitHub repository.\u003C/p>\n\u003Ch3 id=\"submit-pull-requests\">Submit Pull Requests\u003C/h3>\n\u003Cp>Fix a bug or add a feature by submitting a pull request.\u003C/p>\n\u003Ch3 id=\"improve-documentation\">Improve Documentation\u003C/h3>\n\u003Cp>Help us improve our documentation by fixing typos, adding examples, or clarifying explanations.\u003C/p>\n\u003Ch2 id=\"development-setup\">Development Setup\u003C/h2>\n\u003Col>\n\u003Cli>Fork and clone the repository\u003C/li>\n\u003Cli>Install dependencies: \u003Ccode>pnpm install\u003C/code>\u003C/li>\n\u003Cli>Start the development server: \u003Ccode>pnpm docs:dev\u003C/code>\u003C/li>\n\u003C/ol>\n\u003Ch2 id=\"coding-standards\">Coding Standards\u003C/h2>\n\u003Ch3 id=\"code-style\">Code Style\u003C/h3>\n\u003Cul>\n\u003Cli>Follow the existing code style\u003C/li>\n\u003Cli>Use TypeScript for all new code\u003C/li>\n\u003Cli>Write meaningful commit messages\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"component-development\">Component Development\u003C/h3>\n\u003Cul>\n\u003Cli>Follow the component API conventions\u003C/li>\n\u003Cli>Include accessibility features\u003C/li>\n\u003Cli>Write unit tests for new components\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"documentation\">Documentation\u003C/h3>\n\u003Cul>\n\u003Cli>Write clear, concise documentation\u003C/li>\n\u003Cli>Include code examples\u003C/li>\n\u003Cli>Update the changelog\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"pull-request-process\">Pull Request Process\u003C/h2>\n\u003Col>\n\u003Cli>Create a feature branch from \u003Ccode>main\u003C/code>\u003C/li>\n\u003Cli>Make your changes\u003C/li>\n\u003Cli>Run tests: \u003Ccode>pnpm test\u003C/code>\u003C/li>\n\u003Cli>Submit a pull request with a clear description\u003C/li>\n\u003C/ol>\n\u003Ch2 id=\"code-of-conduct\">Code of Conduct\u003C/h2>\n\u003Cp>Please read and follow our \u003Ca href=\"https://github.com/aziontech/webkit/blob/main/CODE_OF_CONDUCT.md\">Code of Conduct\u003C/a>.\u003C/p>\n\u003Ch2 id=\"need-help\">Need Help?\u003C/h2>\n\u003Cul>\n\u003Cli>Open a discussion on GitHub\u003C/li>\n\u003Cli>Join our community chat\u003C/li>\n\u003Cli>Email us at \u003Ca href=\"mailto:design-system@azion.com\">design-system@azion.com\u003C/a>\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"related\">Related\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/get-started/installation\">Installation\u003C/a> - Get started with the design system\u003C/li>\n\u003C/ul>",{"headings":253,"localImagePaths":295,"remoteImagePaths":296,"frontmatter":297,"imagePaths":298},[254,255,258,262,265,268,271,274,277,280,283,286,289,292],{"depth":100,"slug":241,"text":245},{"depth":206,"slug":256,"text":257},"ways-to-contribute","Ways to Contribute",{"depth":259,"slug":260,"text":261},3,"report-issues","Report Issues",{"depth":259,"slug":263,"text":264},"submit-pull-requests","Submit Pull Requests",{"depth":259,"slug":266,"text":267},"improve-documentation","Improve Documentation",{"depth":206,"slug":269,"text":270},"development-setup","Development Setup",{"depth":206,"slug":272,"text":273},"coding-standards","Coding Standards",{"depth":259,"slug":275,"text":276},"code-style","Code Style",{"depth":259,"slug":278,"text":279},"component-development","Component Development",{"depth":259,"slug":281,"text":282},"documentation","Documentation",{"depth":206,"slug":284,"text":285},"pull-request-process","Pull Request Process",{"depth":206,"slug":287,"text":288},"code-of-conduct","Code of Conduct",{"depth":206,"slug":290,"text":291},"need-help","Need Help?",{"depth":206,"slug":293,"text":294},"related","Related",[],[],{"title":245,"description":246,"navLabel":245,"order":100,"type":241},[],"templates",["Map",190,301],{"id":190,"data":302,"body":308,"filePath":309,"digest":310,"rendered":311,"legacyId":216},{"title":303,"description":304,"navLabel":305,"order":100,"category":306,"version":22,"language":23,"type":307},"Page Templates","Page templates and layout examples for building applications with the Azion Design System.","Templates","general","template","## Overview\n\nPage templates are complete page layouts that combine blocks and components into ready-to-use starting points for common application pages.\n\n## Available Templates\n\nTemplate documentation is being prepared. Check back soon for detailed template references.\n\n\u003CCallout type=\"info\">\nThis section will include templates like dashboards, settings pages, and form layouts.\n\u003C/Callout>","src/content/templates/index.md","b2fcc45362aa9e2a",{"html":312,"metadata":313},"\u003Ch2 id=\"overview\">Overview\u003C/h2>\n\u003Cp>Page templates are complete page layouts that combine blocks and components into ready-to-use starting points for common application pages.\u003C/p>\n\u003Ch2 id=\"available-templates\">Available Templates\u003C/h2>\n\u003Cp>Template documentation is being prepared. Check back soon for detailed template references.\u003C/p>\n\u003Ccallout type=\"info\">\nThis section will include templates like dashboards, settings pages, and form layouts.\n\u003C/callout>",{"headings":314,"localImagePaths":319,"remoteImagePaths":320,"frontmatter":321,"imagePaths":322},[315,316],{"depth":206,"slug":207,"text":208},{"depth":206,"slug":317,"text":318},"available-templates","Available Templates",[],[],{"title":303,"description":304,"navLabel":305,"order":100,"type":307,"category":306},[],"get-started",["Map",325,326,190,359],"installation",{"id":325,"data":327,"body":331,"filePath":332,"digest":333,"rendered":334,"legacyId":358},{"title":328,"description":329,"navLabel":328,"order":206,"category":325,"version":22,"language":23,"type":330},"Installation","Get started with the Azion Design System by installing the required packages.","guide","# Installation\n\nThe Azion Design System is distributed as a set of npm packages. Install only what you need for your project.\n\n## Requirements\n\n- Node.js 18.x or higher\n- Vue 3.x\n- Tailwind CSS 3.x\n\n## Package Installation\n\nInstall the core packages you need:\n\n```bash\n# Install components\nnpm install @aziontech/components\n\n# Install icons\nnpm install @aziontech/icons\n\n# Install theme (optional, for design tokens)\nnpm install @aziontech/theme\n```\n\n## Tailwind Configuration\n\nExtend your Tailwind configuration to include Azion's design tokens:\n\n```js\n// tailwind.config.js\nimport azionTheme from '@aziontech/theme';\n\nexport default {\n content: [\n './src/**/*.{vue,js,ts}',\n './node_modules/@aziontech/**/*.{vue,js,ts}',\n ],\n theme: {\n extend: azionTheme.tailwindPreset,\n },\n};\n```\n\n## Vue Configuration\n\nImport the CSS and register the components:\n\n```js\n// main.js\nimport { createApp } from 'vue';\nimport App from './App.vue';\n\n// Import Azion CSS\nimport '@aziontech/theme/css';\n\n// Import Azion components (optional)\nimport { Button, Input, Select } from '@aziontech/components';\n\nconst app = createApp(App);\n\n// Register components globally\napp.component('AzButton', Button);\napp.component('AzInput', Input);\napp.component('AzSelect', Select);\n\napp.mount('#app');\n```\n\n## Next Steps\n\n- [Quick Start](/get-started) - Build your first component\n- [Components](/components) - Explore available components\n- [Foundations](/foundations) - Learn about design principles","src/content/get-started/installation.md","7ccd4afb55dff6a3",{"html":335,"metadata":336},"\u003Ch1 id=\"installation\">Installation\u003C/h1>\n\u003Cp>The Azion Design System is distributed as a set of npm packages. Install only what you need for your project.\u003C/p>\n\u003Ch2 id=\"requirements\">Requirements\u003C/h2>\n\u003Cul>\n\u003Cli>Node.js 18.x or higher\u003C/li>\n\u003Cli>Vue 3.x\u003C/li>\n\u003Cli>Tailwind CSS 3.x\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"package-installation\">Package Installation\u003C/h2>\n\u003Cp>Install the core packages you need:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"># Install components\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> install\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/components\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"># Install icons\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> install\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/icons\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"># Install theme (optional, for design tokens)\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> install\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/theme\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"tailwind-configuration\">Tailwind Configuration\u003C/h2>\n\u003Cp>Extend your Tailwind configuration to include Azion’s design tokens:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"js\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">// tailwind.config.js\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> azionTheme \u003C/span>\u003Cspan style=\"color:#F97583\">from\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> '@aziontech/theme'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">export\u003C/span>\u003Cspan style=\"color:#F97583\"> default\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> content: [\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\"> './src/**/*.{vue,js,ts}'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\"> './node_modules/@aziontech/**/*.{vue,js,ts}'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> ],\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> theme: {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> extend: azionTheme.tailwindPreset,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> },\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">};\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"vue-configuration\">Vue Configuration\u003C/h2>\n\u003Cp>Import the CSS and register the components:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"js\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">// main.js\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> { createApp } \u003C/span>\u003Cspan style=\"color:#F97583\">from\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> 'vue'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> App \u003C/span>\u003Cspan style=\"color:#F97583\">from\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> './App.vue'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">// Import Azion CSS\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> '@aziontech/theme/css'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">// Import Azion components (optional)\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> { Button, Input, Select } \u003C/span>\u003Cspan style=\"color:#F97583\">from\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> '@aziontech/components'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">const\u003C/span>\u003Cspan style=\"color:#79B8FF\"> app\u003C/span>\u003Cspan style=\"color:#F97583\"> =\u003C/span>\u003Cspan style=\"color:#B392F0\"> createApp\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(App);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">// Register components globally\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">app.\u003C/span>\u003Cspan style=\"color:#B392F0\">component\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#9ECBFF\">'AzButton'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, Button);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">app.\u003C/span>\u003Cspan style=\"color:#B392F0\">component\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#9ECBFF\">'AzInput'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, Input);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">app.\u003C/span>\u003Cspan style=\"color:#B392F0\">component\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#9ECBFF\">'AzSelect'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, Select);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">app.\u003C/span>\u003Cspan style=\"color:#B392F0\">mount\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#9ECBFF\">'#app'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">);\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"next-steps\">Next Steps\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/get-started\">Quick Start\u003C/a> - Build your first component\u003C/li>\n\u003Cli>\u003Ca href=\"/components\">Components\u003C/a> - Explore available components\u003C/li>\n\u003Cli>\u003Ca href=\"/foundations\">Foundations\u003C/a> - Learn about design principles\u003C/li>\n\u003C/ul>",{"headings":337,"localImagePaths":354,"remoteImagePaths":355,"frontmatter":356,"imagePaths":357},[338,339,342,345,348,351],{"depth":100,"slug":325,"text":328},{"depth":206,"slug":340,"text":341},"requirements","Requirements",{"depth":206,"slug":343,"text":344},"package-installation","Package Installation",{"depth":206,"slug":346,"text":347},"tailwind-configuration","Tailwind Configuration",{"depth":206,"slug":349,"text":350},"vue-configuration","Vue Configuration",{"depth":206,"slug":352,"text":353},"next-steps","Next Steps",[],[],{"title":328,"description":329,"navLabel":328,"order":206,"type":330,"category":325},[],"installation.md",{"id":190,"data":360,"body":363,"filePath":364,"digest":365,"rendered":366,"legacyId":216},{"title":361,"description":362,"version":22,"language":23,"type":330},"Get Started","Get started with the Azion Design System","## Welcome\n\nWelcome to the Azion Design System documentation. This guide will help you get started with using our components and design tokens in your projects.\n\n## Installation\n\nInstall the design system packages using your preferred package manager:\n\n```bash\nnpm install @aziontech/components @aziontech/icons @aziontech/theme\n```\n\n## Quick Start\n\n1. Import the CSS in your main entry file:\n\n```javascript\nimport '@aziontech/theme/styles.css';\n```\n\n2. Import and use components:\n\n```vue\n\u003Cscript setup>\nimport { Button, Input } from '@aziontech/components';\n\u003C/script>\n\n\u003Ctemplate>\n \u003CButton variant=\"primary\">Click me\u003C/Button>\n\u003C/template>\n```\n\n## Next Steps\n\n- Explore our [Components](/components) library\n- Learn about our [Foundations](/foundations) and design principles\n- Browse our [Icons](/icons) collection","src/content/get-started/index.md","62e783fea506da23",{"html":367,"metadata":368},"\u003Ch2 id=\"welcome\">Welcome\u003C/h2>\n\u003Cp>Welcome to the Azion Design System documentation. This guide will help you get started with using our components and design tokens in your projects.\u003C/p>\n\u003Ch2 id=\"installation\">Installation\u003C/h2>\n\u003Cp>Install the design system packages using your preferred package manager:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> install\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/components\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/icons\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/theme\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"quick-start\">Quick Start\u003C/h2>\n\u003Col>\n\u003Cli>Import the CSS in your main entry file:\u003C/li>\n\u003C/ol>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"javascript\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> '@aziontech/theme/styles.css'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Col start=\"2\">\n\u003Cli>Import and use components:\u003C/li>\n\u003C/ol>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"vue\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">script\u003C/span>\u003Cspan style=\"color:#B392F0\"> setup\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> { Button, Input } \u003C/span>\u003Cspan style=\"color:#F97583\">from\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> '@aziontech/components'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"></\u003C/span>\u003Cspan style=\"color:#85E89D\">script\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">template\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> <\u003C/span>\u003Cspan style=\"color:#85E89D\">Button\u003C/span>\u003Cspan style=\"color:#B392F0\"> variant\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"primary\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>Click me</\u003C/span>\u003Cspan style=\"color:#85E89D\">Button\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"></\u003C/span>\u003Cspan style=\"color:#85E89D\">template\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"next-steps\">Next Steps\u003C/h2>\n\u003Cul>\n\u003Cli>Explore our \u003Ca href=\"/components\">Components\u003C/a> library\u003C/li>\n\u003Cli>Learn about our \u003Ca href=\"/foundations\">Foundations\u003C/a> and design principles\u003C/li>\n\u003Cli>Browse our \u003Ca href=\"/icons\">Icons\u003C/a> collection\u003C/li>\n\u003C/ul>",{"headings":369,"localImagePaths":378,"remoteImagePaths":379,"frontmatter":380,"imagePaths":381},[370,373,374,377],{"depth":206,"slug":371,"text":372},"welcome","Welcome",{"depth":206,"slug":325,"text":328},{"depth":206,"slug":375,"text":376},"quick-start","Quick Start",{"depth":206,"slug":352,"text":353},[],[],{"title":361,"description":362,"type":330},[],"foundations",["Map",196,384,190,433],{"id":196,"data":385,"body":389,"filePath":390,"digest":391,"rendered":392,"legacyId":432},{"title":386,"description":387,"navLabel":386,"order":206,"category":196,"version":22,"language":23,"type":388},"Color","The color system provides semantic tokens for consistent and accessible interfaces.","foundation","# Color\n\nColor is a fundamental element of visual design. The Azion Design System uses a semantic color system built on design tokens that adapt to different contexts and themes.\n\n## Color Philosophy\n\nOur color system is designed to be:\n\n- **Accessible**: All color combinations meet WCAG 2.1 AA contrast requirements\n- **Semantic**: Colors are named by purpose, not appearance\n- **Consistent**: The same tokens are used across all components\n- **Themeable**: Colors adapt automatically to light and dark modes\n\n## Primary Colors\n\nThe primary color palette represents the Azion brand:\n\n| Token | Light Mode | Dark Mode | Usage |\n|-------|------------|-----------|-------|\n| `--color-primary-50` | `#eff6ff` | `#1e3a8a` | Light backgrounds |\n| `--color-primary-100` | `#dbeafe` | `#1e40af` | Hover states |\n| `--color-primary-500` | `#3b82f6` | `#3b82f6` | Primary actions |\n| `--color-primary-700` | `#1d4ed8` | `#60a5fa` | Active states |\n| `--color-primary-900` | `#1e3a8a` | `#93c5fd` | Text on light |\n\n## Semantic Colors\n\nSemantic colors convey meaning:\n\n### Success\nUsed for positive actions and confirmations.\n\n### Warning\nUsed for cautionary messages and alerts.\n\n### Error\nUsed for error states and destructive actions.\n\n### Info\nUsed for informational messages and neutral states.\n\n## Usage Guidelines\n\n### Do\n- Use semantic tokens instead of raw color values\n- Ensure sufficient contrast for text\n- Use color consistently across similar elements\n\n### Don't\n- Don't use color alone to convey information\n- Don't create new colors outside the system\n- Don't use decorative colors that distract from content\n\n## Related\n\n- [Typography](/foundations/typography) - Typography system\n- [Tokens](/tokens) - Design token reference","src/content/foundations/color.md","47307b696fcf627b",{"html":393,"metadata":394},"\u003Ch1 id=\"color\">Color\u003C/h1>\n\u003Cp>Color is a fundamental element of visual design. The Azion Design System uses a semantic color system built on design tokens that adapt to different contexts and themes.\u003C/p>\n\u003Ch2 id=\"color-philosophy\">Color Philosophy\u003C/h2>\n\u003Cp>Our color system is designed to be:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Accessible\u003C/strong>: All color combinations meet WCAG 2.1 AA contrast requirements\u003C/li>\n\u003Cli>\u003Cstrong>Semantic\u003C/strong>: Colors are named by purpose, not appearance\u003C/li>\n\u003Cli>\u003Cstrong>Consistent\u003C/strong>: The same tokens are used across all components\u003C/li>\n\u003Cli>\u003Cstrong>Themeable\u003C/strong>: Colors adapt automatically to light and dark modes\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"primary-colors\">Primary Colors\u003C/h2>\n\u003Cp>The primary color palette represents the Azion brand:\u003C/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Token\u003C/th>\u003Cth>Light Mode\u003C/th>\u003Cth>Dark Mode\u003C/th>\u003Cth>Usage\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode>--color-primary-50\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#eff6ff\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#1e3a8a\u003C/code>\u003C/td>\u003Ctd>Light backgrounds\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>--color-primary-100\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#dbeafe\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#1e40af\u003C/code>\u003C/td>\u003Ctd>Hover states\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>--color-primary-500\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#3b82f6\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#3b82f6\u003C/code>\u003C/td>\u003Ctd>Primary actions\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>--color-primary-700\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#1d4ed8\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#60a5fa\u003C/code>\u003C/td>\u003Ctd>Active states\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>--color-primary-900\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#1e3a8a\u003C/code>\u003C/td>\u003Ctd>\u003Ccode>#93c5fd\u003C/code>\u003C/td>\u003Ctd>Text on light\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Ch2 id=\"semantic-colors\">Semantic Colors\u003C/h2>\n\u003Cp>Semantic colors convey meaning:\u003C/p>\n\u003Ch3 id=\"success\">Success\u003C/h3>\n\u003Cp>Used for positive actions and confirmations.\u003C/p>\n\u003Ch3 id=\"warning\">Warning\u003C/h3>\n\u003Cp>Used for cautionary messages and alerts.\u003C/p>\n\u003Ch3 id=\"error\">Error\u003C/h3>\n\u003Cp>Used for error states and destructive actions.\u003C/p>\n\u003Ch3 id=\"info\">Info\u003C/h3>\n\u003Cp>Used for informational messages and neutral states.\u003C/p>\n\u003Ch2 id=\"usage-guidelines\">Usage Guidelines\u003C/h2>\n\u003Ch3 id=\"do\">Do\u003C/h3>\n\u003Cul>\n\u003Cli>Use semantic tokens instead of raw color values\u003C/li>\n\u003Cli>Ensure sufficient contrast for text\u003C/li>\n\u003Cli>Use color consistently across similar elements\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"dont\">Don’t\u003C/h3>\n\u003Cul>\n\u003Cli>Don’t use color alone to convey information\u003C/li>\n\u003Cli>Don’t create new colors outside the system\u003C/li>\n\u003Cli>Don’t use decorative colors that distract from content\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"related\">Related\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/foundations/typography\">Typography\u003C/a> - Typography system\u003C/li>\n\u003Cli>\u003Ca href=\"/tokens\">Tokens\u003C/a> - Design token reference\u003C/li>\n\u003C/ul>",{"headings":395,"localImagePaths":428,"remoteImagePaths":429,"frontmatter":430,"imagePaths":431},[396,397,400,403,406,409,412,415,418,421,424,427],{"depth":100,"slug":196,"text":386},{"depth":206,"slug":398,"text":399},"color-philosophy","Color Philosophy",{"depth":206,"slug":401,"text":402},"primary-colors","Primary Colors",{"depth":206,"slug":404,"text":405},"semantic-colors","Semantic Colors",{"depth":259,"slug":407,"text":408},"success","Success",{"depth":259,"slug":410,"text":411},"warning","Warning",{"depth":259,"slug":413,"text":414},"error","Error",{"depth":259,"slug":416,"text":417},"info","Info",{"depth":206,"slug":419,"text":420},"usage-guidelines","Usage Guidelines",{"depth":259,"slug":422,"text":423},"do","Do",{"depth":259,"slug":425,"text":426},"dont","Don’t",{"depth":206,"slug":293,"text":294},[],[],{"title":386,"description":387,"navLabel":386,"order":206,"type":388,"category":196},[],"color.md",{"id":190,"data":434,"body":437,"filePath":438,"digest":439,"rendered":440,"legacyId":216},{"title":435,"description":436,"navLabel":435,"order":100,"version":22,"language":23,"type":388},"Foundations","Core design principles and guidelines that shape the Azion Design System.","# Foundations\n\nFoundations are the core design principles, guidelines, and visual elements that shape the Azion Design System. They provide consistency and coherence across all components and experiences.\n\n## What's Inside\n\n### Color\nOur color system is built on semantic tokens that adapt to different contexts and themes. Learn how to use color effectively in your interfaces.\n\n### Typography\nTypography guidelines ensure readable, accessible, and consistent text across all touchpoints.\n\n### Spacing\nA consistent spacing scale creates rhythm and harmony in layouts.\n\n### Elevation\nElevation defines the visual hierarchy and depth of elements in the interface.\n\n### Motion\nMotion principles guide animations and transitions for a polished user experience.\n\n## Design Principles\n\n### 1. Clarity First\nEvery element should serve a purpose. Remove unnecessary complexity.\n\n### 2. Consistency\nUse familiar patterns and consistent behaviors across the system.\n\n### 3. Accessibility\nDesign for everyone. Meet WCAG 2.1 AA standards at minimum.\n\n### 4. Performance\nOptimize for speed and efficiency in both design and implementation.\n\n## Next Steps\n\n- [Color](/foundations/color) - Explore the color system\n- [Typography](/foundations/typography) - Learn about typography\n- [Spacing](/foundations/spacing) - Understand spacing principles","src/content/foundations/index.md","a6cfddde3ca33942",{"html":441,"metadata":442},"\u003Ch1 id=\"foundations\">Foundations\u003C/h1>\n\u003Cp>Foundations are the core design principles, guidelines, and visual elements that shape the Azion Design System. They provide consistency and coherence across all components and experiences.\u003C/p>\n\u003Ch2 id=\"whats-inside\">What’s Inside\u003C/h2>\n\u003Ch3 id=\"color\">Color\u003C/h3>\n\u003Cp>Our color system is built on semantic tokens that adapt to different contexts and themes. Learn how to use color effectively in your interfaces.\u003C/p>\n\u003Ch3 id=\"typography\">Typography\u003C/h3>\n\u003Cp>Typography guidelines ensure readable, accessible, and consistent text across all touchpoints.\u003C/p>\n\u003Ch3 id=\"spacing\">Spacing\u003C/h3>\n\u003Cp>A consistent spacing scale creates rhythm and harmony in layouts.\u003C/p>\n\u003Ch3 id=\"elevation\">Elevation\u003C/h3>\n\u003Cp>Elevation defines the visual hierarchy and depth of elements in the interface.\u003C/p>\n\u003Ch3 id=\"motion\">Motion\u003C/h3>\n\u003Cp>Motion principles guide animations and transitions for a polished user experience.\u003C/p>\n\u003Ch2 id=\"design-principles\">Design Principles\u003C/h2>\n\u003Ch3 id=\"1-clarity-first\">1. Clarity First\u003C/h3>\n\u003Cp>Every element should serve a purpose. Remove unnecessary complexity.\u003C/p>\n\u003Ch3 id=\"2-consistency\">2. Consistency\u003C/h3>\n\u003Cp>Use familiar patterns and consistent behaviors across the system.\u003C/p>\n\u003Ch3 id=\"3-accessibility\">3. Accessibility\u003C/h3>\n\u003Cp>Design for everyone. Meet WCAG 2.1 AA standards at minimum.\u003C/p>\n\u003Ch3 id=\"4-performance\">4. Performance\u003C/h3>\n\u003Cp>Optimize for speed and efficiency in both design and implementation.\u003C/p>\n\u003Ch2 id=\"next-steps\">Next Steps\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/foundations/color\">Color\u003C/a> - Explore the color system\u003C/li>\n\u003Cli>\u003Ca href=\"/foundations/typography\">Typography\u003C/a> - Learn about typography\u003C/li>\n\u003Cli>\u003Ca href=\"/foundations/spacing\">Spacing\u003C/a> - Understand spacing principles\u003C/li>\n\u003C/ul>",{"headings":443,"localImagePaths":477,"remoteImagePaths":478,"frontmatter":479,"imagePaths":480},[444,445,448,449,452,455,458,461,464,467,470,473,476],{"depth":100,"slug":382,"text":435},{"depth":206,"slug":446,"text":447},"whats-inside","What’s Inside",{"depth":259,"slug":196,"text":386},{"depth":259,"slug":450,"text":451},"typography","Typography",{"depth":259,"slug":453,"text":454},"spacing","Spacing",{"depth":259,"slug":456,"text":457},"elevation","Elevation",{"depth":259,"slug":459,"text":460},"motion","Motion",{"depth":206,"slug":462,"text":463},"design-principles","Design Principles",{"depth":259,"slug":465,"text":466},"1-clarity-first","1. Clarity First",{"depth":259,"slug":468,"text":469},"2-consistency","2. Consistency",{"depth":259,"slug":471,"text":472},"3-accessibility","3. Accessibility",{"depth":259,"slug":474,"text":475},"4-performance","4. Performance",{"depth":206,"slug":352,"text":353},[],[],{"title":435,"description":436,"navLabel":435,"order":100,"type":388},[],"icons",["Map",190,483],{"id":190,"data":484,"body":487,"filePath":488,"digest":489,"rendered":490,"legacyId":216},{"title":485,"description":486,"navLabel":485,"order":100,"version":22,"language":23,"type":159},"Icons","Icon library with Azion Icons and PrimeIcons for use in your applications.","# Icons\n\nThe Azion Design System includes two icon libraries:\n\n- **Azion Icons** - Custom icons designed for Azion products\n- **PrimeIcons** - General purpose icon library from PrimeVue\n\n## Installation\n\nIcons are included in the `@aziontech/icons` package:\n\n```bash\nnpm install @aziontech/icons\n```\n\n## Usage\n\n### Font Icons\n\nUse icons as font icons with the appropriate class:\n\n```html\n\u003C!-- Azion Icon -->\n\u003Ci class=\"ai ai-azion\">\u003C/i>\n\n\u003C!-- PrimeIcon -->\n\u003Ci class=\"pi pi-home\">\u003C/i>\n```\n\n### SVG Icons\n\nImport SVG icons directly for more control:\n\n```js\nimport { aiAzion, piHome } from '@aziontech/icons/svg';\n```\n\n## Icon Categories\n\n### Azion Icons\n\nAzion Icons are organized into categories:\n\n- **Product Icons** - Azion product and service icons\n- **Action Icons** - Common action icons\n- **Status Icons** - Status and notification icons\n\n### PrimeIcons\n\nPrimeIcons provide a comprehensive set of general-purpose icons suitable for most UI needs.\n\n## Sizing\n\nIcons inherit their size from the font size of their container:\n\n```html\n\u003C!-- Small -->\n\u003Ci class=\"ai ai-azion text-sm\">\u003C/i>\n\n\u003C!-- Medium (default) -->\n\u003Ci class=\"ai ai-azion text-base\">\u003C/i>\n\n\u003C!-- Large -->\n\u003Ci class=\"ai ai-azion text-2xl\">\u003C/i>\n```\n\n## Accessibility\n\nWhen using icons alone, provide accessible labels:\n\n```html\n\u003C!-- Icon button with label -->\n\u003Cbutton aria-label=\"Settings\">\n \u003Ci class=\"pi pi-cog\">\u003C/i>\n\u003C/button>\n\n\u003C!-- Decorative icon (hidden from screen readers) -->\n\u003Ci class=\"pi pi-star\" aria-hidden=\"true\">\u003C/i>\n```\n\n## Related\n\n- [Button](/components/button) - Button component with icon support","src/content/icons/index.md","aea3324aedf050df",{"html":491,"metadata":492},"\u003Ch1 id=\"icons\">Icons\u003C/h1>\n\u003Cp>The Azion Design System includes two icon libraries:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Azion Icons\u003C/strong> - Custom icons designed for Azion products\u003C/li>\n\u003Cli>\u003Cstrong>PrimeIcons\u003C/strong> - General purpose icon library from PrimeVue\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"installation\">Installation\u003C/h2>\n\u003Cp>Icons are included in the \u003Ccode>@aziontech/icons\u003C/code> package:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> install\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/icons\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"usage\">Usage\u003C/h2>\n\u003Ch3 id=\"font-icons\">Font Icons\u003C/h3>\n\u003Cp>Use icons as font icons with the appropriate class:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"html\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"><!-- Azion Icon -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"ai ai-azion\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">></\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"><!-- PrimeIcon -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"pi pi-home\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">></\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch3 id=\"svg-icons\">SVG Icons\u003C/h3>\n\u003Cp>Import SVG icons directly for more control:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"js\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> { aiAzion, piHome } \u003C/span>\u003Cspan style=\"color:#F97583\">from\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> '@aziontech/icons/svg'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"icon-categories\">Icon Categories\u003C/h2>\n\u003Ch3 id=\"azion-icons\">Azion Icons\u003C/h3>\n\u003Cp>Azion Icons are organized into categories:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Product Icons\u003C/strong> - Azion product and service icons\u003C/li>\n\u003Cli>\u003Cstrong>Action Icons\u003C/strong> - Common action icons\u003C/li>\n\u003Cli>\u003Cstrong>Status Icons\u003C/strong> - Status and notification icons\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"primeicons\">PrimeIcons\u003C/h3>\n\u003Cp>PrimeIcons provide a comprehensive set of general-purpose icons suitable for most UI needs.\u003C/p>\n\u003Ch2 id=\"sizing\">Sizing\u003C/h2>\n\u003Cp>Icons inherit their size from the font size of their container:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"html\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"><!-- Small -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"ai ai-azion text-sm\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">></\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"><!-- Medium (default) -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"ai ai-azion text-base\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">></\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"><!-- Large -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"ai ai-azion text-2xl\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">></\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"accessibility\">Accessibility\u003C/h2>\n\u003Cp>When using icons alone, provide accessible labels:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"html\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"><!-- Icon button with label -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">button\u003C/span>\u003Cspan style=\"color:#B392F0\"> aria-label\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"Settings\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> <\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"pi pi-cog\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">></\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"></\u003C/span>\u003Cspan style=\"color:#85E89D\">button\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"><!-- Decorative icon (hidden from screen readers) -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"pi pi-star\"\u003C/span>\u003Cspan style=\"color:#B392F0\"> aria-hidden\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"true\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">></\u003C/span>\u003Cspan style=\"color:#85E89D\">i\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"related\">Related\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/components/button\">Button\u003C/a> - Button component with icon support\u003C/li>\n\u003C/ul>",{"headings":493,"localImagePaths":520,"remoteImagePaths":521,"frontmatter":522,"imagePaths":523},[494,495,496,499,502,505,508,511,514,517,519],{"depth":100,"slug":481,"text":485},{"depth":206,"slug":325,"text":328},{"depth":206,"slug":497,"text":498},"usage","Usage",{"depth":259,"slug":500,"text":501},"font-icons","Font Icons",{"depth":259,"slug":503,"text":504},"svg-icons","SVG Icons",{"depth":206,"slug":506,"text":507},"icon-categories","Icon Categories",{"depth":259,"slug":509,"text":510},"azion-icons","Azion Icons",{"depth":259,"slug":512,"text":513},"primeicons","PrimeIcons",{"depth":206,"slug":515,"text":516},"sizing","Sizing",{"depth":206,"slug":21,"text":518},"Accessibility",{"depth":206,"slug":293,"text":294},[],[],{"title":485,"description":486,"navLabel":485,"order":100,"type":159},[],"playground",["Map",190,526],{"id":190,"data":527,"body":531,"filePath":532,"digest":533,"rendered":534,"legacyId":216},{"title":528,"description":529,"navLabel":530,"order":100,"version":22,"language":23,"type":524},"Component Playground","Interactive component playground for experimenting with Azion Design System components.","Playground","## Overview\n\nThe Component Playground provides an interactive environment for experimenting with Azion Design System components. You can modify props in real-time and see how components behave.\n\n## Coming Soon\n\nThe playground is currently under development. Check back soon for an interactive component testing experience.\n\n\u003CCallout type=\"info\">\nThe playground will allow you to:\n- Select any component from the library\n- Modify props and see live updates\n- Copy generated code snippets\n- Test different states and variants\n\u003C/Callout>","src/content/playground/index.md","2f669a1cc93c4d61",{"html":535,"metadata":536},"\u003Ch2 id=\"overview\">Overview\u003C/h2>\n\u003Cp>The Component Playground provides an interactive environment for experimenting with Azion Design System components. You can modify props in real-time and see how components behave.\u003C/p>\n\u003Ch2 id=\"coming-soon\">Coming Soon\u003C/h2>\n\u003Cp>The playground is currently under development. Check back soon for an interactive component testing experience.\u003C/p>\n\u003Ccallout type=\"info\">\nThe playground will allow you to:\n- Select any component from the library\n- Modify props and see live updates\n- Copy generated code snippets\n- Test different states and variants\n\u003C/callout>",{"headings":537,"localImagePaths":542,"remoteImagePaths":543,"frontmatter":544,"imagePaths":545},[538,539],{"depth":206,"slug":207,"text":208},{"depth":206,"slug":540,"text":541},"coming-soon","Coming Soon",[],[],{"title":528,"description":529,"navLabel":530,"order":100,"type":524},[],"patterns",["Map",190,548],{"id":190,"data":549,"body":554,"filePath":555,"digest":556,"rendered":557,"legacyId":216},{"title":550,"description":551,"navLabel":552,"order":100,"category":306,"version":22,"language":23,"type":553},"Design Patterns","Common design patterns and best practices for building with the Azion Design System.","Patterns","pattern","## Overview\n\nDesign patterns are reusable solutions to common problems in interface design. They provide proven approaches to typical UX challenges.\n\n## Available Patterns\n\nPattern documentation is being prepared. Check back soon for detailed pattern references.\n\n\u003CCallout type=\"info\">\nThis section will include patterns like form validation, search experiences, and navigation structures.\n\u003C/Callout>","src/content/patterns/index.md","17703faaf9525277",{"html":558,"metadata":559},"\u003Ch2 id=\"overview\">Overview\u003C/h2>\n\u003Cp>Design patterns are reusable solutions to common problems in interface design. They provide proven approaches to typical UX challenges.\u003C/p>\n\u003Ch2 id=\"available-patterns\">Available Patterns\u003C/h2>\n\u003Cp>Pattern documentation is being prepared. Check back soon for detailed pattern references.\u003C/p>\n\u003Ccallout type=\"info\">\nThis section will include patterns like form validation, search experiences, and navigation structures.\n\u003C/callout>",{"headings":560,"localImagePaths":565,"remoteImagePaths":566,"frontmatter":567,"imagePaths":568},[561,562],{"depth":206,"slug":207,"text":208},{"depth":206,"slug":563,"text":564},"available-patterns","Available Patterns",[],[],{"title":550,"description":551,"navLabel":552,"order":100,"type":553,"category":306},[],"pt",["Map",9,571,616,617,323,675,701,702,752,753,801,802,382,866],{"id":9,"data":572,"body":576,"filePath":577,"digest":578,"rendered":579,"legacyId":615},{"title":573,"description":574,"navLabel":573,"order":259,"version":22,"language":569,"translatedFrom":23,"translationStatus":575,"type":24},"Componentes","Biblioteca de componentes Vue.js do Azion Design System.","complete","# Componentes\n\nExplore nossa biblioteca de componentes Vue.js, projetados para serem acessíveis, consistentes e fáceis de usar.\n\n## Categorias\n\n### Formulário\nComponentes para coletar entrada do usuário.\n\n- [Button](/pt/components/button) - Botões para acionar ações\n- [Fieldset](/pt/components/fieldset) - Agrupamento de campos de formulário\n\n### Navegação\nComponentes para navegação e estrutura.\n\n### Feedback\nComponentes para fornecer feedback ao usuário.\n\n### Exibição de Dados\nComponentes para exibir informações.\n\n### Layout\nComponentes para estruturar páginas.\n\n### Utilitários\nComponentes auxiliares.\n\n## Status dos Componentes\n\n| Status | Descrição |\n|--------|-----------|\n| Estável | Pronto para produção |\n| Beta | Em desenvolvimento ativo |\n| Experimental | Sujeito a mudanças |\n| Descontinuado | Será removido em versões futuras |\n\n## Próximos Passos\n\n- [Button](/pt/components/button) - Aprenda sobre o componente Button\n- [Fieldset](/pt/components/fieldset) - Aprenda sobre o componente Fieldset","src/content/pt/components/index.md","8114f6e08f35ead9",{"html":580,"metadata":581},"\u003Ch1 id=\"componentes\">Componentes\u003C/h1>\n\u003Cp>Explore nossa biblioteca de componentes Vue.js, projetados para serem acessíveis, consistentes e fáceis de usar.\u003C/p>\n\u003Ch2 id=\"categorias\">Categorias\u003C/h2>\n\u003Ch3 id=\"formulário\">Formulário\u003C/h3>\n\u003Cp>Componentes para coletar entrada do usuário.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/pt/components/button\">Button\u003C/a> - Botões para acionar ações\u003C/li>\n\u003Cli>\u003Ca href=\"/pt/components/fieldset\">Fieldset\u003C/a> - Agrupamento de campos de formulário\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"navegação\">Navegação\u003C/h3>\n\u003Cp>Componentes para navegação e estrutura.\u003C/p>\n\u003Ch3 id=\"feedback\">Feedback\u003C/h3>\n\u003Cp>Componentes para fornecer feedback ao usuário.\u003C/p>\n\u003Ch3 id=\"exibição-de-dados\">Exibição de Dados\u003C/h3>\n\u003Cp>Componentes para exibir informações.\u003C/p>\n\u003Ch3 id=\"layout\">Layout\u003C/h3>\n\u003Cp>Componentes para estruturar páginas.\u003C/p>\n\u003Ch3 id=\"utilitários\">Utilitários\u003C/h3>\n\u003Cp>Componentes auxiliares.\u003C/p>\n\u003Ch2 id=\"status-dos-componentes\">Status dos Componentes\u003C/h2>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Status\u003C/th>\u003Cth>Descrição\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>Estável\u003C/td>\u003Ctd>Pronto para produção\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Beta\u003C/td>\u003Ctd>Em desenvolvimento ativo\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Experimental\u003C/td>\u003Ctd>Sujeito a mudanças\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Descontinuado\u003C/td>\u003Ctd>Será removido em versões futuras\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Ch2 id=\"próximos-passos\">Próximos Passos\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/pt/components/button\">Button\u003C/a> - Aprenda sobre o componente Button\u003C/li>\n\u003Cli>\u003Ca href=\"/pt/components/fieldset\">Fieldset\u003C/a> - Aprenda sobre o componente Fieldset\u003C/li>\n\u003C/ul>",{"headings":582,"localImagePaths":611,"remoteImagePaths":612,"frontmatter":613,"imagePaths":614},[583,585,588,591,594,597,600,602,605,608],{"depth":100,"slug":584,"text":573},"componentes",{"depth":206,"slug":586,"text":587},"categorias","Categorias",{"depth":259,"slug":589,"text":590},"formulário","Formulário",{"depth":259,"slug":592,"text":593},"navegação","Navegação",{"depth":259,"slug":595,"text":596},"feedback","Feedback",{"depth":259,"slug":598,"text":599},"exibição-de-dados","Exibição de Dados",{"depth":259,"slug":224,"text":601},"Layout",{"depth":259,"slug":603,"text":604},"utilitários","Utilitários",{"depth":206,"slug":606,"text":607},"status-dos-componentes","Status dos Componentes",{"depth":206,"slug":609,"text":610},"próximos-passos","Próximos Passos",[],[],{"title":573,"description":574,"navLabel":573,"order":259,"type":24,"language":569,"translatedFrom":23,"translationStatus":575},[],"components/index.md","components/button",{"id":616,"data":618,"body":671,"filePath":672,"digest":673,"legacyId":674,"deferredRender":94},{"title":98,"description":619,"navLabel":98,"order":100,"category":16,"status":17,"since":18,"tags":620,"version":22,"language":569,"translatedFrom":23,"translationStatus":575,"type":24,"component":104,"source":105,"storybook":106,"figma":107,"related":621,"anatomy":622,"accessibility":630,"api":645},"Botões acionam ações e eventos quando os usuários interagem com eles.",[102,16,103],[31,32,109],[623,625,627],{"label":112,"description":624},"A área clicável com estilo de fundo e borda",{"label":115,"description":626},"O conteúdo de texto que descreve a ação",{"label":628,"description":629},"Icon (opcional)","Um ícone opcional para ênfase visual antes ou depois do label",{"keyboard":631,"aria":637,"wcag":644},[632,634,636],{"keys":47,"action":633},"Move o foco para o botão",{"keys":125,"action":635},"Ativa o botão quando focado",{"keys":128,"action":635},[638,640,642],{"attribute":131,"usage":639},"Use em vez do atributo disabled para leitores de tela anunciarem o estado desabilitado",{"attribute":134,"usage":641},"Obrigatório para botões apenas com ícone para fornecer nome acessível",{"attribute":137,"usage":643},"Quando o botão está em estado de carregamento",[140,141],{"props":646,"slots":661,"events":668},[647,649,651,653,655,657,659],{"name":79,"type":145,"default":146,"required":68,"description":648},"Variante de estilo visual do botão",{"name":149,"type":150,"default":151,"required":68,"description":650},"Tamanho do botão",{"name":71,"type":72,"default":73,"required":68,"description":652},"Se o botão está desabilitado",{"name":156,"type":72,"default":73,"required":68,"description":654},"Mostra spinner de carregamento e desabilita interação",{"name":159,"type":66,"default":67,"required":68,"description":656},"Nome do ícone para exibir antes do label",{"name":162,"type":163,"default":164,"required":68,"description":658},"Posição do ícone relativa ao label",{"name":167,"type":72,"default":73,"required":68,"description":660},"Se o botão ocupa toda a largura do container",[662,664,666],{"name":85,"description":663},"Conteúdo do label do botão",{"name":173,"description":665,"props":175},"Ícone customizado antes do label",{"name":177,"description":667,"props":175},"Ícone customizado após o label",[669],{"name":181,"payload":182,"description":670},"Disparado quando o botão é clicado e não está desabilitado","import { ExampleBlock, Callout, StateGrid } from '@components/docs';\n\n# Button\n\nBotões são elementos interativos fundamentais que permitem aos usuários realizar ações e interagir com a interface.\n\n## Visão Geral\n\nO componente Button fornece uma maneira consistente e acessível de acionar ações em sua aplicação. Ele suporta múltiplas variantes, tamanhos e estados para cobrir diversos casos de uso.\n\n\u003CExampleBlock title=\"Exemplo Básico\">\n \u003CAzButton variant=\"primary\">Botão Primário\u003C/AzButton>\n\u003C/ExampleBlock>\n\n## Variantes\n\n### Primary\n\nUse para ações principais e CTAs (Call to Action).\n\n\u003CExampleBlock title=\"Primary Button\">\n \u003CAzButton variant=\"primary\">Primário\u003C/AzButton>\n\u003C/ExampleBlock>\n\n### Secondary\n\nUse para ações secundárias ou alternativas.\n\n\u003CExampleBlock title=\"Secondary Button\">\n \u003CAzButton variant=\"secondary\">Secundário\u003C/AzButton>\n\u003C/ExampleBlock>\n\n### Destructive\n\nUse para ações destrutivas ou perigosas, como excluir.\n\n\u003CExampleBlock title=\"Destructive Button\">\n \u003CAzButton variant=\"destructive\">Excluir\u003C/AzButton>\n\u003C/ExampleBlock>\n\n### Ghost\n\nUse para ações sutis ou terciárias.\n\n\u003CExampleBlock title=\"Ghost Button\">\n \u003CAzButton variant=\"ghost\">Fantasma\u003C/AzButton>\n\u003C/ExampleBlock>\n\n## Tamanhos\n\n\u003CStateGrid>\n \u003CAzButton size=\"sm\">Pequeno\u003C/AzButton>\n \u003CAzButton size=\"md\">Médio\u003C/AzButton>\n \u003CAzButton size=\"lg\">Grande\u003C/AzButton>\n\u003C/StateGrid>\n\n## Estados\n\n### Desabilitado\n\n\u003CExampleBlock title=\"Botão Desabilitado\">\n \u003CAzButton disabled>Desabilitado\u003C/AzButton>\n\u003C/ExampleBlock>\n\n### Carregando\n\n\u003CExampleBlock title=\"Botão Carregando\">\n \u003CAzButton loading>Carregando\u003C/AzButton>\n\u003C/ExampleBlock>\n\n## Uso\n\n```vue\n\u003Cscript setup>\nimport { AzButton } from '@aziontech/components';\n\u003C/script>\n\n\u003Ctemplate>\n \u003CAzButton variant=\"primary\" @click=\"handleClick\">\n Clique aqui\n \u003C/AzButton>\n\u003C/template>\n```\n\n## Acessibilidade\n\n### Navegação por Teclado\n\n| Tecla | Ação |\n|-------|------|\n| Tab | Move o foco para o botão |\n| Enter | Ativa o botão quando focado |\n| Space | Ativa o botão quando focado |\n\n### ARIA\n\n- Use `aria-disabled=\"true\"` em vez do atributo `disabled` para leitores de tela\n- Use `aria-label` para botões apenas com ícone\n- Use `aria-busy=\"true\"` quando o botão estiver carregando\n\n## Próximos Passos\n\n- [Fieldset](/pt/components/fieldset) - Agrupamento de campos de formulário\n- [Foundations](/pt/foundations) - Princípios de design","src/content/pt/components/button.mdx","955453ca15207876","components/button.mdx",{"id":323,"data":676,"body":679,"filePath":680,"digest":681,"rendered":682,"legacyId":700},{"title":677,"description":678,"version":22,"language":569,"translatedFrom":23,"translationStatus":575,"type":330},"Começar","Comece a usar o Azion Design System","## Bem-vindo\n\nBem-vindo à documentação do Azion Design System. Este guia irá ajudá-lo a começar a usar nossos componentes e design tokens em seus projetos.\n\n## Instalação\n\nInstale os pacotes do design system usando seu gerenciador de pacotes preferido:\n\n```bash\nnpm install @aziontech/components @aziontech/icons @aziontech/theme\n```\n\n## Início Rápido\n\n1. Importe o CSS no seu arquivo de entrada principal:\n\n```javascript\nimport '@aziontech/theme/styles.css';\n```\n\n2. Importe e use os componentes:\n\n```vue\n\u003Cscript setup>\nimport { Button, Input } from '@aziontech/components';\n\u003C/script>\n\n\u003Ctemplate>\n \u003CButton variant=\"primary\">Clique aqui\u003C/Button>\n\u003C/template>\n```\n\n## Próximos Passos\n\n- Explore nossa biblioteca de [Componentes](/pt/components)\n- Conheça nossos [Fundamentos](/pt/foundations) e princípios de design\n- Navegue pela nossa coleção de [Ícones](/pt/icons)","src/content/pt/get-started/index.md","56bc3abb9155e64c",{"html":683,"metadata":684},"\u003Ch2 id=\"bem-vindo\">Bem-vindo\u003C/h2>\n\u003Cp>Bem-vindo à documentação do Azion Design System. Este guia irá ajudá-lo a começar a usar nossos componentes e design tokens em seus projetos.\u003C/p>\n\u003Ch2 id=\"instalação\">Instalação\u003C/h2>\n\u003Cp>Instale os pacotes do design system usando seu gerenciador de pacotes preferido:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> install\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/components\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/icons\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/theme\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"início-rápido\">Início Rápido\u003C/h2>\n\u003Col>\n\u003Cli>Importe o CSS no seu arquivo de entrada principal:\u003C/li>\n\u003C/ol>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"javascript\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> '@aziontech/theme/styles.css'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Col start=\"2\">\n\u003Cli>Importe e use os componentes:\u003C/li>\n\u003C/ol>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"vue\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">script\u003C/span>\u003Cspan style=\"color:#B392F0\"> setup\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> { Button, Input } \u003C/span>\u003Cspan style=\"color:#F97583\">from\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> '@aziontech/components'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"></\u003C/span>\u003Cspan style=\"color:#85E89D\">script\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">template\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> <\u003C/span>\u003Cspan style=\"color:#85E89D\">Button\u003C/span>\u003Cspan style=\"color:#B392F0\"> variant\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"primary\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>Clique aqui</\u003C/span>\u003Cspan style=\"color:#85E89D\">Button\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"></\u003C/span>\u003Cspan style=\"color:#85E89D\">template\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"próximos-passos\">Próximos Passos\u003C/h2>\n\u003Cul>\n\u003Cli>Explore nossa biblioteca de \u003Ca href=\"/pt/components\">Componentes\u003C/a>\u003C/li>\n\u003Cli>Conheça nossos \u003Ca href=\"/pt/foundations\">Fundamentos\u003C/a> e princípios de design\u003C/li>\n\u003Cli>Navegue pela nossa coleção de \u003Ca href=\"/pt/icons\">Ícones\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":685,"localImagePaths":696,"remoteImagePaths":697,"frontmatter":698,"imagePaths":699},[686,689,692,695],{"depth":206,"slug":687,"text":688},"bem-vindo","Bem-vindo",{"depth":206,"slug":690,"text":691},"instalação","Instalação",{"depth":206,"slug":693,"text":694},"início-rápido","Início Rápido",{"depth":206,"slug":609,"text":610},[],[],{"title":677,"description":678,"type":330,"language":569,"translatedFrom":23,"translationStatus":575},[],"get-started/index.md","get-started/installation",{"id":701,"data":703,"body":705,"filePath":706,"digest":707,"rendered":708,"legacyId":751},{"title":691,"description":704,"category":325,"version":22,"language":569,"translatedFrom":23,"translationStatus":575,"type":330},"Instale o Azion Design System em seu projeto","# Instalação\n\nAprenda a instalar e configurar o Azion Design System em seu projeto.\n\n## Requisitos\n\n- Node.js 18 ou superior\n- npm, yarn ou pnpm\n\n## Instalar Pacotes\n\nO Azion Design System é composto por três pacotes principais:\n\n```bash\n# Usando npm\nnpm install @aziontech/components @aziontech/icons @aziontech/theme\n\n# Usando yarn\nyarn add @aziontech/components @aziontech/icons @aziontech/theme\n\n# Usando pnpm\npnpm add @aziontech/components @aziontech/icons @aziontech/theme\n```\n\n### Pacotes\n\n| Pacote | Descrição |\n|--------|-----------|\n| `@aziontech/components` | Componentes Vue.js |\n| `@aziontech/icons` | Biblioteca de ícones |\n| `@aziontech/theme` | Design tokens e estilos base |\n\n## Configuração\n\n### 1. Importar Estilos\n\nImporte os estilos base no seu arquivo de entrada principal:\n\n```javascript\n// main.js ou main.ts\nimport '@aziontech/theme/styles.css';\n```\n\n### 2. Registrar Componentes (Opcional)\n\nPara registrar todos os componentes globalmente:\n\n```javascript\n// main.js ou main.ts\nimport { createApp } from 'vue';\nimport AzionComponents from '@aziontech/components';\nimport App from './App.vue';\n\nconst app = createApp(App);\napp.use(AzionComponents);\napp.mount('#app');\n```\n\n### 3. Importação Sob Demanda\n\nPara melhor performance, importe componentes individualmente:\n\n```vue\n\u003Cscript setup>\nimport { Button, Input } from '@aziontech/components';\n\u003C/script>\n\n\u003Ctemplate>\n \u003CButton variant=\"primary\">Enviar\u003C/Button>\n \u003CInput v-model=\"value\" placeholder=\"Digite algo...\" />\n\u003C/template>\n```\n\n## Frameworks Suportados\n\nO Azion Design System é construído com Vue 3 e funciona com:\n\n- Vue 3.x\n- Nuxt 3.x\n- Vite\n\n## Solução de Problemas\n\n### Erro de Importação\n\nSe você encontrar erros de importação, verifique se o `@aziontech/theme` está instalado corretamente:\n\n```bash\nnpm ls @aziontech/theme\n```\n\n### Estilos Não Aplicados\n\nCertifique-se de importar os estilos antes de usar os componentes:\n\n```javascript\nimport '@aziontech/theme/styles.css';\n// Depois importe os componentes\nimport { Button } from '@aziontech/components';\n```\n\n## Próximos Passos\n\n- [Início Rápido](/pt/get-started) - Comece a usar os componentes\n- [Componentes](/pt/components) - Explore a biblioteca de componentes\n- [Fundamentos](/pt/foundations) - Conheça os princípios de design","src/content/pt/get-started/installation.md","d801bb448ba95f1d",{"html":709,"metadata":710},"\u003Ch1 id=\"instalação\">Instalação\u003C/h1>\n\u003Cp>Aprenda a instalar e configurar o Azion Design System em seu projeto.\u003C/p>\n\u003Ch2 id=\"requisitos\">Requisitos\u003C/h2>\n\u003Cul>\n\u003Cli>Node.js 18 ou superior\u003C/li>\n\u003Cli>npm, yarn ou pnpm\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"instalar-pacotes\">Instalar Pacotes\u003C/h2>\n\u003Cp>O Azion Design System é composto por três pacotes principais:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"># Usando npm\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> install\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/components\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/icons\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/theme\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"># Usando yarn\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">yarn\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> add\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/components\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/icons\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/theme\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"># Usando pnpm\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">pnpm\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> add\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/components\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/icons\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/theme\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch3 id=\"pacotes\">Pacotes\u003C/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Pacote\u003C/th>\u003Cth>Descrição\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode>@aziontech/components\u003C/code>\u003C/td>\u003Ctd>Componentes Vue.js\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>@aziontech/icons\u003C/code>\u003C/td>\u003Ctd>Biblioteca de ícones\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>@aziontech/theme\u003C/code>\u003C/td>\u003Ctd>Design tokens e estilos base\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Ch2 id=\"configuração\">Configuração\u003C/h2>\n\u003Ch3 id=\"1-importar-estilos\">1. Importar Estilos\u003C/h3>\n\u003Cp>Importe os estilos base no seu arquivo de entrada principal:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"javascript\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">// main.js ou main.ts\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> '@aziontech/theme/styles.css'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch3 id=\"2-registrar-componentes-opcional\">2. Registrar Componentes (Opcional)\u003C/h3>\n\u003Cp>Para registrar todos os componentes globalmente:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"javascript\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">// main.js ou main.ts\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> { createApp } \u003C/span>\u003Cspan style=\"color:#F97583\">from\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> 'vue'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> AzionComponents \u003C/span>\u003Cspan style=\"color:#F97583\">from\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> '@aziontech/components'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> App \u003C/span>\u003Cspan style=\"color:#F97583\">from\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> './App.vue'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">const\u003C/span>\u003Cspan style=\"color:#79B8FF\"> app\u003C/span>\u003Cspan style=\"color:#F97583\"> =\u003C/span>\u003Cspan style=\"color:#B392F0\"> createApp\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(App);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">app.\u003C/span>\u003Cspan style=\"color:#B392F0\">use\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(AzionComponents);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">app.\u003C/span>\u003Cspan style=\"color:#B392F0\">mount\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#9ECBFF\">'#app'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">);\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch3 id=\"3-importação-sob-demanda\">3. Importação Sob Demanda\u003C/h3>\n\u003Cp>Para melhor performance, importe componentes individualmente:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"vue\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">script\u003C/span>\u003Cspan style=\"color:#B392F0\"> setup\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> { Button, Input } \u003C/span>\u003Cspan style=\"color:#F97583\">from\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> '@aziontech/components'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"></\u003C/span>\u003Cspan style=\"color:#85E89D\">script\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">template\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> <\u003C/span>\u003Cspan style=\"color:#85E89D\">Button\u003C/span>\u003Cspan style=\"color:#B392F0\"> variant\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"primary\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>Enviar</\u003C/span>\u003Cspan style=\"color:#85E89D\">Button\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> <\u003C/span>\u003Cspan style=\"color:#85E89D\">Input\u003C/span>\u003Cspan style=\"color:#B392F0\"> v-model\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"value\"\u003C/span>\u003Cspan style=\"color:#B392F0\"> placeholder\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"Digite algo...\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> />\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"></\u003C/span>\u003Cspan style=\"color:#85E89D\">template\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"frameworks-suportados\">Frameworks Suportados\u003C/h2>\n\u003Cp>O Azion Design System é construído com Vue 3 e funciona com:\u003C/p>\n\u003Cul>\n\u003Cli>Vue 3.x\u003C/li>\n\u003Cli>Nuxt 3.x\u003C/li>\n\u003Cli>Vite\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"solução-de-problemas\">Solução de Problemas\u003C/h2>\n\u003Ch3 id=\"erro-de-importação\">Erro de Importação\u003C/h3>\n\u003Cp>Se você encontrar erros de importação, verifique se o \u003Ccode>@aziontech/theme\u003C/code> está instalado corretamente:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> ls\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @aziontech/theme\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch3 id=\"estilos-não-aplicados\">Estilos Não Aplicados\u003C/h3>\n\u003Cp>Certifique-se de importar os estilos antes de usar os componentes:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"javascript\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> '@aziontech/theme/styles.css'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">// Depois importe os componentes\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> { Button } \u003C/span>\u003Cspan style=\"color:#F97583\">from\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> '@aziontech/components'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"próximos-passos\">Próximos Passos\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/pt/get-started\">Início Rápido\u003C/a> - Comece a usar os componentes\u003C/li>\n\u003Cli>\u003Ca href=\"/pt/components\">Componentes\u003C/a> - Explore a biblioteca de componentes\u003C/li>\n\u003Cli>\u003Ca href=\"/pt/foundations\">Fundamentos\u003C/a> - Conheça os princípios de design\u003C/li>\n\u003C/ul>",{"headings":711,"localImagePaths":747,"remoteImagePaths":748,"frontmatter":749,"imagePaths":750},[712,713,716,719,722,725,728,731,734,737,740,743,746],{"depth":100,"slug":690,"text":691},{"depth":206,"slug":714,"text":715},"requisitos","Requisitos",{"depth":206,"slug":717,"text":718},"instalar-pacotes","Instalar Pacotes",{"depth":259,"slug":720,"text":721},"pacotes","Pacotes",{"depth":206,"slug":723,"text":724},"configuração","Configuração",{"depth":259,"slug":726,"text":727},"1-importar-estilos","1. Importar Estilos",{"depth":259,"slug":729,"text":730},"2-registrar-componentes-opcional","2. Registrar Componentes (Opcional)",{"depth":259,"slug":732,"text":733},"3-importação-sob-demanda","3. Importação Sob Demanda",{"depth":206,"slug":735,"text":736},"frameworks-suportados","Frameworks Suportados",{"depth":206,"slug":738,"text":739},"solução-de-problemas","Solução de Problemas",{"depth":259,"slug":741,"text":742},"erro-de-importação","Erro de Importação",{"depth":259,"slug":744,"text":745},"estilos-não-aplicados","Estilos Não Aplicados",{"depth":206,"slug":609,"text":610},[],[],{"title":691,"description":704,"type":330,"category":325,"language":569,"translatedFrom":23,"translationStatus":575},[],"get-started/installation.md","components/fieldset",{"id":752,"data":754,"body":797,"filePath":798,"digest":799,"legacyId":800,"deferredRender":94},{"title":14,"description":755,"category":16,"status":17,"since":18,"tags":756,"version":22,"language":569,"translatedFrom":23,"translationStatus":575,"type":24,"component":25,"source":26,"storybook":27,"figma":28,"related":757,"anatomy":758,"accessibility":768,"api":781},"Agrupe inputs de formulário relacionados sob um label compartilhado para melhor organização e acessibilidade.",[16,20,21],[30,31,32,33],[759,762,765],{"label":760,"description":761},"Container do Fieldset","O container de agrupamento com estilo de borda",{"label":763,"description":764},"Legenda","O título/label para o grupo de inputs",{"label":766,"description":767},"Área de Conteúdo","A área contendo os controles de formulário agrupados",{"keyboard":769,"aria":772,"wcag":777,"notes":778},[770],{"keys":47,"action":771},"Move o foco para o primeiro elemento focável dentro do fieldset",[773,775],{"attribute":51,"usage":774},"Pode referenciar uma descrição para o grupo do fieldset",{"attribute":54,"usage":776},"Quando todos os campos no grupo são obrigatórios",[57,58],[779,780],"Elementos nativos \u003Cfieldset> e \u003Clegend> fornecem acessibilidade integrada","Leitores de tela anunciam a legenda ao entrar no fieldset",{"props":782,"slots":791,"events":796},[783,785,787,789],{"name":65,"type":66,"default":67,"required":68,"description":784},"O texto para a legenda do fieldset",{"name":71,"type":72,"default":73,"required":68,"description":786},"Se todos os controles no fieldset estão desabilitados",{"name":76,"type":72,"default":73,"required":68,"description":788},"Se todos os campos no grupo são obrigatórios",{"name":79,"type":80,"default":81,"required":68,"description":790},"Variante de estilo visual",[792,794],{"name":85,"description":793},"Controles de formulário e conteúdo dentro do fieldset",{"name":65,"description":795},"Conteúdo customizado da legenda (sobrescreve a prop legend)",[],"import { ExampleBlock, Callout } from '@components/docs';\n\n## Visão Geral\n\nO componente Fieldset fornece uma maneira de agrupar controles de formulário relacionados. Ele renderiza um elemento HTML nativo `\u003Cfieldset>` com recursos de acessibilidade adequados, incluindo um `\u003Clegend>` associado para o label do grupo.\n\nFieldsets são essenciais para criar formulários acessíveis, pois ajudam usuários de leitores de tela a entender a relação entre os controles do formulário.\n\n\u003CCallout type=\"info\" title=\"HTML Semântico\">\n Este componente usa elementos nativos `\u003Cfieldset>` e `\u003Clegend>`, que fornecem benefícios de acessibilidade integrados sem requerer atributos ARIA adicionais.\n\u003C/Callout>\n\n## Quando Usar\n\nUse Fieldset quando você precisar:\n\n- Agrupar inputs de formulário relacionados (ex: campos de endereço, informações de contato)\n- Criar seções lógicas dentro de um formulário maior\n- Melhorar a acessibilidade do formulário com estrutura semântica adequada\n- Aplicar um label ou descrição compartilhada para múltiplos inputs\n- Desabilitar múltiplos inputs de uma vez\n\n## Exemplos\n\n### Fieldset Básico\n\n\u003CExampleBlock \n title=\"Fieldset básico com legenda\"\n description=\"Um fieldset simples agrupando campos de informações pessoais\"\n code={`\u003CAzFieldset legend=\"Informações Pessoais\">\n \u003CAzInput label=\"Nome Completo\" />\n \u003CAzInput label=\"Email\" type=\"email\" />\n\u003C/AzFieldset>`}\n>\n \u003Cfieldset class=\"border border-gray-300 rounded-lg p-4\">\n \u003Clegend class=\"text-sm font-medium text-text-primary px-2\">Informações Pessoais\u003C/legend>\n \u003Cdiv class=\"space-y-4 mt-2\">\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Nome Completo\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-primary-500\" placeholder=\"Digite seu nome\" />\n \u003C/div>\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Email\u003C/label>\n \u003Cinput type=\"email\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-primary-500\" placeholder=\"Digite seu email\" />\n \u003C/div>\n \u003C/div>\n \u003C/fieldset>\n\u003C/ExampleBlock>\n\n### Agrupamento de Endereço\n\n\u003CExampleBlock \n title=\"Campos de endereço agrupados\"\n description=\"Agrupando campos relacionados a endereço\"\n code={`\u003CAzFieldset legend=\"Endereço de Entrega\">\n \u003CAzInput label=\"Logradouro\" />\n \u003Cdiv class=\"grid grid-cols-2 gap-4\">\n \u003CAzInput label=\"Cidade\" />\n \u003CAzInput label=\"CEP\" />\n \u003C/div>\n\u003C/AzFieldset>`}\n>\n \u003Cfieldset class=\"border border-gray-300 rounded-lg p-4\">\n \u003Clegend class=\"text-sm font-medium text-text-primary px-2\">Endereço de Entrega\u003C/legend>\n \u003Cdiv class=\"space-y-4 mt-2\">\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Logradouro\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md\" placeholder=\"Rua, número\" />\n \u003C/div>\n \u003Cdiv class=\"grid grid-cols-2 gap-4\">\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Cidade\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md\" placeholder=\"Cidade\" />\n \u003C/div>\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">CEP\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md\" placeholder=\"00000-000\" />\n \u003C/div>\n \u003C/div>\n \u003C/div>\n \u003C/fieldset>\n\u003C/ExampleBlock>\n\n### Estado Desabilitado\n\n\u003CExampleBlock \n title=\"Fieldset desabilitado\"\n description=\"Todos os inputs desabilitados via fieldset\"\n code={`\u003CAzFieldset legend=\"Grupo Desabilitado\" disabled>\n \u003CAzInput label=\"Input 1\" />\n \u003CAzInput label=\"Input 2\" />\n\u003C/AzFieldset>`}\n>\n \u003Cfieldset class=\"border border-gray-300 rounded-lg p-4 opacity-50\" disabled>\n \u003Clegend class=\"text-sm font-medium text-text-primary px-2\">Grupo Desabilitado\u003C/legend>\n \u003Cdiv class=\"space-y-4 mt-2\">\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Input 1\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-100\" placeholder=\"Desabilitado\" />\n \u003C/div>\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-text-secondary mb-1\">Input 2\u003C/label>\n \u003Cinput type=\"text\" class=\"w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-100\" placeholder=\"Desabilitado\" />\n \u003C/div>\n \u003C/div>\n \u003C/fieldset>\n\u003C/ExampleBlock>\n\n## Estados\n\n\u003CStateGrid columns={3}>\n \u003Cfieldset slot=\"default\" class=\"border border-gray-300 rounded-lg p-3\">\n \u003Clegend class=\"text-xs font-medium text-text-primary px-2\">Padrão\u003C/legend>\n \u003Cinput type=\"text\" class=\"w-full px-2 py-1 text-sm border border-gray-300 rounded\" placeholder=\"Input\" />\n \u003C/fieldset>\n \u003Cfieldset slot=\"focus\" class=\"border border-primary-300 rounded-lg p-3 ring-2 ring-primary-100\">\n \u003Clegend class=\"text-xs font-medium text-text-primary px-2\">Focado\u003C/legend>\n \u003Cinput type=\"text\" class=\"w-full px-2 py-1 text-sm border border-primary-500 rounded ring-1 ring-primary-500\" placeholder=\"Input\" />\n \u003C/fieldset>\n \u003Cfieldset slot=\"disabled\" class=\"border border-gray-200 rounded-lg p-3 opacity-50\" disabled>\n \u003Clegend class=\"text-xs font-medium text-text-primary px-2\">Desabilitado\u003C/legend>\n \u003Cinput type=\"text\" class=\"w-full px-2 py-1 text-sm border border-gray-200 rounded bg-gray-100\" placeholder=\"Desabilitado\" disabled />\n \u003C/fieldset>\n\u003C/StateGrid>\n\n## O Que Fazer e O Que Não Fazer\n\n\u003CDoDont title=\"Uso do Fieldset\">\n \u003Cdiv slot=\"do\">\n \u003Cp class=\"text-sm mb-2\">Agrupe campos de formulário relacionados:\u003C/p>\n \u003Cfieldset class=\"border border-gray-300 rounded p-3\">\n \u003Clegend class=\"text-xs font-medium px-2\">Informações de Contato\u003C/legend>\n \u003Cdiv class=\"space-y-2\">\n \u003Cinput type=\"text\" class=\"w-full px-2 py-1 text-sm border border-gray-300 rounded\" placeholder=\"Email\" />\n \u003Cinput type=\"text\" class=\"w-full px-2 py-1 text-sm border border-gray-300 rounded\" placeholder=\"Telefone\" />\n \u003C/div>\n \u003C/fieldset>\n \u003C/div>\n \u003Cdiv slot=\"dont\">\n \u003Cp class=\"text-sm mb-2\">Não use para campos não relacionados:\u003C/p>\n \u003Cfieldset class=\"border border-gray-300 rounded p-3\">\n \u003Clegend class=\"text-xs font-medium px-2\">Campos Mistos\u003C/legend>\n \u003Cinput type=\"text\" class=\"w-full px-2 py-1 text-sm border border-gray-300 rounded mb-2\" placeholder=\"Nome\" />\n \u003Cinput type=\"text\" class=\"w-full px-2 py-1 text-sm border border-gray-300 rounded\" placeholder=\"Cor Favorita\" />\n \u003C/fieldset>\n \u003Cp class=\"text-xs text-red-600 mt-1\">Estes não estão logicamente relacionados\u003C/p>\n \u003C/div>\n\u003C/DoDont>\n\n\u003CDoDont>\n \u003Cdiv slot=\"do\">\n \u003Cp class=\"text-sm mb-2\">Use legendas descritivas:\u003C/p>\n \u003Cfieldset class=\"border border-gray-300 rounded p-3\">\n \u003Clegend class=\"text-xs font-medium px-2\">Endereço de Cobrança\u003C/legend>\n \u003Cinput type=\"text\" class=\"w-full px-2 py-1 text-sm border border-gray-300 rounded\" placeholder=\"Rua\" />\n \u003C/fieldset>\n \u003C/div>\n \u003Cdiv slot=\"dont\">\n \u003Cp class=\"text-sm mb-2\">Não use legendas vagas:\u003C/p>\n \u003Cfieldset class=\"border border-gray-300 rounded p-3\">\n \u003Clegend class=\"text-xs font-medium px-2\">Info\u003C/legend>\n \u003Cinput type=\"text\" class=\"w-full px-2 py-1 text-sm border border-gray-300 rounded\" placeholder=\"Rua\" />\n \u003C/fieldset>\n \u003C/div>\n\u003C/DoDont>\n\n## Acessibilidade\n\n### Navegação por Teclado\n\n| Tecla | Ação |\n|-------|------|\n| Tab | Move o foco para o primeiro elemento focável dentro do fieldset |\n\n### ARIA\n\n- Use `aria-describedby` para referenciar uma descrição para o grupo do fieldset\n- Use `aria-required=\"true\"` quando todos os campos no grupo são obrigatórios\n\n### Notas\n\n- Elementos nativos `\u003Cfieldset>` e `\u003Clegend>` fornecem acessibilidade integrada\n- Leitores de tela anunciam a legenda ao entrar no fieldset\n\n## Próximos Passos\n\n- [Button](/pt/components/button) - Botões para acionar ações\n- [Foundations](/pt/foundations) - Princípios de design","src/content/pt/components/fieldset.mdx","b8c8e6d8d171ada8","components/fieldset.mdx","foundations/color",{"id":801,"data":803,"body":806,"filePath":807,"digest":808,"rendered":809,"legacyId":865},{"title":804,"description":805,"navLabel":804,"order":100,"category":196,"version":22,"language":569,"translatedFrom":23,"translationStatus":575,"type":388},"Cor","Sistema de cores do Azion Design System com tokens semânticos e diretrizes de uso.","# Cor\n\nO sistema de cores do Azion Design System é construído sobre tokens semânticos que se adaptam a diferentes contextos e temas.\n\n## Princípios\n\n### Acessibilidade\nTodas as combinações de cores atendem aos requisitos de contraste WCAG 2.1 AA.\n\n### Consistência\nTokens semânticos garantem uso consistente em toda a interface.\n\n### Flexibilidade\nO sistema suporta múltiplos temas, incluindo modo claro e escuro.\n\n## Tokens de Cor\n\n### Cores Primárias\n\n| Token | Valor | Uso |\n|-------|-------|-----|\n| `--color-primary` | #2563eb | Ações principais, links |\n| `--color-primary-dark` | #1d4ed8 | Estados hover |\n| `--color-primary-light` | #3b82f6 | Estados ativos |\n\n### Cores Semânticas\n\n| Token | Valor | Uso |\n|-------|-------|-----|\n| `--color-success` | #16a34a | Sucesso, confirmação |\n| `--color-warning` | #ca8a04 | Avisos, atenção |\n| `--color-error` | #dc2626 | Erros, ações destrutivas |\n| `--color-info` | #2563eb | Informação |\n\n### Cores Neutras\n\n| Token | Valor | Uso |\n|-------|-------|-----|\n| `--color-text` | #1f2937 | Texto principal |\n| `--color-text-secondary` | #6b7280 | Texto secundário |\n| `--color-surface` | #ffffff | Fundo de superfície |\n| `--color-surface-hover` | #f9fafb | Estados hover |\n\n## Uso\n\n### Em CSS\n\n```css\n.button {\n background-color: var(--color-primary);\n color: var(--color-surface);\n}\n\n.button:hover {\n background-color: var(--color-primary-dark);\n}\n```\n\n### Em Componentes Vue\n\n```vue\n\u003Ctemplate>\n \u003Cbutton class=\"custom-button\">\n \u003Cslot />\n \u003C/button>\n\u003C/template>\n\n\u003Cstyle scoped>\n.custom-button {\n background: var(--color-primary);\n color: var(--color-surface);\n padding: 0.5rem 1rem;\n border-radius: 0.375rem;\n}\n\n.custom-button:hover {\n background: var(--color-primary-dark);\n}\n\u003C/style>\n```\n\n## Modo Escuro\n\nO sistema de cores suporta automaticamente o modo escuro através de variáveis CSS:\n\n```css\n:root {\n --color-surface: #ffffff;\n --color-text: #1f2937;\n}\n\n[data-theme='dark'] {\n --color-surface: #1f2937;\n --color-text: #f9fafb;\n}\n```\n\n## Diretrizes\n\n### Faça\n\n- Use tokens semânticos em vez de valores hexadecimais diretos\n- Garanta contraste suficiente entre texto e fundo\n- Considere usuários com deficiência de visão de cores\n\n### Não Faça\n\n- Não use cores sozinhas para transmitir informações\n- Não crie novos tokens sem necessidade\n- Não ignore o modo escuro\n\n## Próximos Passos\n\n- [Tipografia](/pt/foundations/typography) - Conheça o sistema de tipografia\n- [Espaçamento](/pt/foundations/spacing) - Entenda a escala de espaçamento","src/content/pt/foundations/color.md","de521fd08ae15e65",{"html":810,"metadata":811},"\u003Ch1 id=\"cor\">Cor\u003C/h1>\n\u003Cp>O sistema de cores do Azion Design System é construído sobre tokens semânticos que se adaptam a diferentes contextos e temas.\u003C/p>\n\u003Ch2 id=\"princípios\">Princípios\u003C/h2>\n\u003Ch3 id=\"acessibilidade\">Acessibilidade\u003C/h3>\n\u003Cp>Todas as combinações de cores atendem aos requisitos de contraste WCAG 2.1 AA.\u003C/p>\n\u003Ch3 id=\"consistência\">Consistência\u003C/h3>\n\u003Cp>Tokens semânticos garantem uso consistente em toda a interface.\u003C/p>\n\u003Ch3 id=\"flexibilidade\">Flexibilidade\u003C/h3>\n\u003Cp>O sistema suporta múltiplos temas, incluindo modo claro e escuro.\u003C/p>\n\u003Ch2 id=\"tokens-de-cor\">Tokens de Cor\u003C/h2>\n\u003Ch3 id=\"cores-primárias\">Cores Primárias\u003C/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Token\u003C/th>\u003Cth>Valor\u003C/th>\u003Cth>Uso\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode>--color-primary\u003C/code>\u003C/td>\u003Ctd>#2563eb\u003C/td>\u003Ctd>Ações principais, links\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>--color-primary-dark\u003C/code>\u003C/td>\u003Ctd>#1d4ed8\u003C/td>\u003Ctd>Estados hover\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>--color-primary-light\u003C/code>\u003C/td>\u003Ctd>#3b82f6\u003C/td>\u003Ctd>Estados ativos\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Ch3 id=\"cores-semânticas\">Cores Semânticas\u003C/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Token\u003C/th>\u003Cth>Valor\u003C/th>\u003Cth>Uso\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode>--color-success\u003C/code>\u003C/td>\u003Ctd>#16a34a\u003C/td>\u003Ctd>Sucesso, confirmação\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>--color-warning\u003C/code>\u003C/td>\u003Ctd>#ca8a04\u003C/td>\u003Ctd>Avisos, atenção\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>--color-error\u003C/code>\u003C/td>\u003Ctd>#dc2626\u003C/td>\u003Ctd>Erros, ações destrutivas\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>--color-info\u003C/code>\u003C/td>\u003Ctd>#2563eb\u003C/td>\u003Ctd>Informação\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Ch3 id=\"cores-neutras\">Cores Neutras\u003C/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Token\u003C/th>\u003Cth>Valor\u003C/th>\u003Cth>Uso\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode>--color-text\u003C/code>\u003C/td>\u003Ctd>#1f2937\u003C/td>\u003Ctd>Texto principal\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>--color-text-secondary\u003C/code>\u003C/td>\u003Ctd>#6b7280\u003C/td>\u003Ctd>Texto secundário\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>--color-surface\u003C/code>\u003C/td>\u003Ctd>#ffffff\u003C/td>\u003Ctd>Fundo de superfície\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>--color-surface-hover\u003C/code>\u003C/td>\u003Ctd>#f9fafb\u003C/td>\u003Ctd>Estados hover\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Ch2 id=\"uso\">Uso\u003C/h2>\n\u003Ch3 id=\"em-css\">Em CSS\u003C/h3>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"css\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">.button\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\"> background-color\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#79B8FF\">var\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#FFAB70\">--color-primary\u003C/span>\u003Cspan style=\"color:#E1E4E8\">);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\"> color\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#79B8FF\">var\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#FFAB70\">--color-surface\u003C/span>\u003Cspan style=\"color:#E1E4E8\">);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">.button:hover\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\"> background-color\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#79B8FF\">var\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#FFAB70\">--color-primary-dark\u003C/span>\u003Cspan style=\"color:#E1E4E8\">);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch3 id=\"em-componentes-vue\">Em Componentes Vue\u003C/h3>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"vue\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">template\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> <\u003C/span>\u003Cspan style=\"color:#85E89D\">button\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"custom-button\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> <\u003C/span>\u003Cspan style=\"color:#85E89D\">slot\u003C/span>\u003Cspan style=\"color:#FDAEB7;font-style:italic\"> /\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"> </\u003C/span>\u003Cspan style=\"color:#85E89D\">button\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"></\u003C/span>\u003Cspan style=\"color:#85E89D\">template\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">style\u003C/span>\u003Cspan style=\"color:#B392F0\"> scoped\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">.custom-button\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\"> background\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#79B8FF\">var\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#FFAB70\">--color-primary\u003C/span>\u003Cspan style=\"color:#E1E4E8\">);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\"> color\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#79B8FF\">var\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#FFAB70\">--color-surface\u003C/span>\u003Cspan style=\"color:#E1E4E8\">);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\"> padding\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#79B8FF\">0.5\u003C/span>\u003Cspan style=\"color:#F97583\">rem\u003C/span>\u003Cspan style=\"color:#79B8FF\"> 1\u003C/span>\u003Cspan style=\"color:#F97583\">rem\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\"> border-radius\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#79B8FF\">0.375\u003C/span>\u003Cspan style=\"color:#F97583\">rem\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">.custom-button:hover\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\"> background\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#79B8FF\">var\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#FFAB70\">--color-primary-dark\u003C/span>\u003Cspan style=\"color:#E1E4E8\">);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"></\u003C/span>\u003Cspan style=\"color:#85E89D\">style\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"modo-escuro\">Modo Escuro\u003C/h2>\n\u003Cp>O sistema de cores suporta automaticamente o modo escuro através de variáveis CSS:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"css\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">:root\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#FFAB70\"> --color-surface\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#79B8FF\">#ffffff\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#FFAB70\"> --color-text\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#79B8FF\">#1f2937\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">[\u003C/span>\u003Cspan style=\"color:#B392F0\">data-theme\u003C/span>\u003Cspan style=\"color:#F97583\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">'dark'\u003C/span>\u003Cspan style=\"color:#E1E4E8\">] {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#FFAB70\"> --color-surface\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#79B8FF\">#1f2937\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#FFAB70\"> --color-text\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#79B8FF\">#f9fafb\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"diretrizes\">Diretrizes\u003C/h2>\n\u003Ch3 id=\"faça\">Faça\u003C/h3>\n\u003Cul>\n\u003Cli>Use tokens semânticos em vez de valores hexadecimais diretos\u003C/li>\n\u003Cli>Garanta contraste suficiente entre texto e fundo\u003C/li>\n\u003Cli>Considere usuários com deficiência de visão de cores\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"não-faça\">Não Faça\u003C/h3>\n\u003Cul>\n\u003Cli>Não use cores sozinhas para transmitir informações\u003C/li>\n\u003Cli>Não crie novos tokens sem necessidade\u003C/li>\n\u003Cli>Não ignore o modo escuro\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"próximos-passos\">Próximos Passos\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/pt/foundations/typography\">Tipografia\u003C/a> - Conheça o sistema de tipografia\u003C/li>\n\u003Cli>\u003Ca href=\"/pt/foundations/spacing\">Espaçamento\u003C/a> - Entenda a escala de espaçamento\u003C/li>\n\u003C/ul>",{"headings":812,"localImagePaths":861,"remoteImagePaths":862,"frontmatter":863,"imagePaths":864},[813,815,818,821,824,827,830,833,836,839,842,845,848,851,854,857,860],{"depth":100,"slug":814,"text":804},"cor",{"depth":206,"slug":816,"text":817},"princípios","Princípios",{"depth":259,"slug":819,"text":820},"acessibilidade","Acessibilidade",{"depth":259,"slug":822,"text":823},"consistência","Consistência",{"depth":259,"slug":825,"text":826},"flexibilidade","Flexibilidade",{"depth":206,"slug":828,"text":829},"tokens-de-cor","Tokens de Cor",{"depth":259,"slug":831,"text":832},"cores-primárias","Cores Primárias",{"depth":259,"slug":834,"text":835},"cores-semânticas","Cores Semânticas",{"depth":259,"slug":837,"text":838},"cores-neutras","Cores Neutras",{"depth":206,"slug":840,"text":841},"uso","Uso",{"depth":259,"slug":843,"text":844},"em-css","Em CSS",{"depth":259,"slug":846,"text":847},"em-componentes-vue","Em Componentes Vue",{"depth":206,"slug":849,"text":850},"modo-escuro","Modo Escuro",{"depth":206,"slug":852,"text":853},"diretrizes","Diretrizes",{"depth":259,"slug":855,"text":856},"faça","Faça",{"depth":259,"slug":858,"text":859},"não-faça","Não Faça",{"depth":206,"slug":609,"text":610},[],[],{"title":804,"description":805,"navLabel":804,"order":100,"type":388,"category":196,"language":569,"translatedFrom":23,"translationStatus":575},[],"foundations/color.md",{"id":382,"data":867,"body":870,"filePath":871,"digest":872,"rendered":873,"legacyId":913},{"title":868,"description":869,"navLabel":868,"order":100,"version":22,"language":569,"translatedFrom":23,"translationStatus":575,"type":388},"Fundamentos","Princípios e diretrizes de design que formam o Azion Design System.","# Fundamentos\n\nFundamentos são os princípios de design, diretrizes e elementos visuais que formam o Azion Design System. Eles fornecem consistência e coerência em todos os componentes e experiências.\n\n## O que está incluído\n\n### Cor\nNosso sistema de cores é construído sobre tokens semânticos que se adaptam a diferentes contextos e temas. Aprenda a usar cores de forma eficaz em suas interfaces.\n\n### Tipografia\nAs diretrizes de tipografia garantem texto legível, acessível e consistente em todos os pontos de contato.\n\n### Espaçamento\nUma escala de espaçamento consistente cria ritmo e harmonia nos layouts.\n\n### Elevação\nA elevação define a hierarquia visual e profundidade dos elementos na interface.\n\n### Movimento\nOs princípios de movimento orientam animações e transições para uma experiência de usuário refinada.\n\n## Princípios de Design\n\n### 1. Clareza em Primeiro Lugar\nTodo elemento deve ter um propósito. Remova complexidade desnecessária.\n\n### 2. Consistência\nUse padrões familiares e comportamentos consistentes em todo o sistema.\n\n### 3. Acessibilidade\nProjete para todos. Atenda aos padrões WCAG 2.1 AA no mínimo.\n\n### 4. Performance\nOtimize para velocidade e eficiência tanto no design quanto na implementação.\n\n## Próximos Passos\n\n- [Cor](/pt/foundations/color) - Explore o sistema de cores\n- [Tipografia](/pt/foundations/typography) - Conheça a tipografia\n- [Espaçamento](/pt/foundations/spacing) - Entenda os princípios de espaçamento","src/content/pt/foundations/index.md","7db7a8b2a50fac5b",{"html":874,"metadata":875},"\u003Ch1 id=\"fundamentos\">Fundamentos\u003C/h1>\n\u003Cp>Fundamentos são os princípios de design, diretrizes e elementos visuais que formam o Azion Design System. Eles fornecem consistência e coerência em todos os componentes e experiências.\u003C/p>\n\u003Ch2 id=\"o-que-está-incluído\">O que está incluído\u003C/h2>\n\u003Ch3 id=\"cor\">Cor\u003C/h3>\n\u003Cp>Nosso sistema de cores é construído sobre tokens semânticos que se adaptam a diferentes contextos e temas. Aprenda a usar cores de forma eficaz em suas interfaces.\u003C/p>\n\u003Ch3 id=\"tipografia\">Tipografia\u003C/h3>\n\u003Cp>As diretrizes de tipografia garantem texto legível, acessível e consistente em todos os pontos de contato.\u003C/p>\n\u003Ch3 id=\"espaçamento\">Espaçamento\u003C/h3>\n\u003Cp>Uma escala de espaçamento consistente cria ritmo e harmonia nos layouts.\u003C/p>\n\u003Ch3 id=\"elevação\">Elevação\u003C/h3>\n\u003Cp>A elevação define a hierarquia visual e profundidade dos elementos na interface.\u003C/p>\n\u003Ch3 id=\"movimento\">Movimento\u003C/h3>\n\u003Cp>Os princípios de movimento orientam animações e transições para uma experiência de usuário refinada.\u003C/p>\n\u003Ch2 id=\"princípios-de-design\">Princípios de Design\u003C/h2>\n\u003Ch3 id=\"1-clareza-em-primeiro-lugar\">1. Clareza em Primeiro Lugar\u003C/h3>\n\u003Cp>Todo elemento deve ter um propósito. Remova complexidade desnecessária.\u003C/p>\n\u003Ch3 id=\"2-consistência\">2. Consistência\u003C/h3>\n\u003Cp>Use padrões familiares e comportamentos consistentes em todo o sistema.\u003C/p>\n\u003Ch3 id=\"3-acessibilidade\">3. Acessibilidade\u003C/h3>\n\u003Cp>Projete para todos. Atenda aos padrões WCAG 2.1 AA no mínimo.\u003C/p>\n\u003Ch3 id=\"4-performance\">4. Performance\u003C/h3>\n\u003Cp>Otimize para velocidade e eficiência tanto no design quanto na implementação.\u003C/p>\n\u003Ch2 id=\"próximos-passos\">Próximos Passos\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/pt/foundations/color\">Cor\u003C/a> - Explore o sistema de cores\u003C/li>\n\u003Cli>\u003Ca href=\"/pt/foundations/typography\">Tipografia\u003C/a> - Conheça a tipografia\u003C/li>\n\u003Cli>\u003Ca href=\"/pt/foundations/spacing\">Espaçamento\u003C/a> - Entenda os princípios de espaçamento\u003C/li>\n\u003C/ul>",{"headings":876,"localImagePaths":909,"remoteImagePaths":910,"frontmatter":911,"imagePaths":912},[877,879,882,883,886,889,892,895,898,901,904,907,908],{"depth":100,"slug":878,"text":868},"fundamentos",{"depth":206,"slug":880,"text":881},"o-que-está-incluído","O que está incluído",{"depth":259,"slug":814,"text":804},{"depth":259,"slug":884,"text":885},"tipografia","Tipografia",{"depth":259,"slug":887,"text":888},"espaçamento","Espaçamento",{"depth":259,"slug":890,"text":891},"elevação","Elevação",{"depth":259,"slug":893,"text":894},"movimento","Movimento",{"depth":206,"slug":896,"text":897},"princípios-de-design","Princípios de Design",{"depth":259,"slug":899,"text":900},"1-clareza-em-primeiro-lugar","1. Clareza em Primeiro Lugar",{"depth":259,"slug":902,"text":903},"2-consistência","2. Consistência",{"depth":259,"slug":905,"text":906},"3-acessibilidade","3. Acessibilidade",{"depth":259,"slug":474,"text":475},{"depth":206,"slug":609,"text":610},[],[],{"title":868,"description":869,"navLabel":868,"order":100,"type":388,"language":569,"translatedFrom":23,"translationStatus":575},[],"foundations/index.md"] \ No newline at end of file diff --git a/apps/ds-docs/i18n/en.json b/apps/ds-docs/i18n/en.json new file mode 100644 index 00000000..7a542d74 --- /dev/null +++ b/apps/ds-docs/i18n/en.json @@ -0,0 +1,126 @@ +{ + "brand": { + "name": "Design System" + }, + "nav": { + "documentation": "Documentation", + "getStarted": "Get Started", + "foundations": "Foundations", + "tokens": "Tokens", + "components": "Components", + "blocks": "Blocks", + "patterns": "Patterns", + "templates": "Templates", + "icons": "Icons", + "playground": "Playground", + "contributing": "Contributing" + }, + "search": { + "placeholder": "Search documentation...", + "noResults": "No results found for \"{query}\"", + "clear": "Clear search", + "close": "Close search", + "resultsCount": "{count} result{plural}", + "inSection": "in {section}", + "startTyping": "Start typing to search..." + }, + "version": { + "current": "Current", + "latest": "Latest", + "older": "Older version", + "banner": "You're viewing an older version of the documentation. There may be a newer version available.", + "viewLatest": "View latest version" + }, + "language": { + "switch": "Switch language", + "current": "Current language", + "available": "Available languages" + }, + "status": { + "stable": "Stable", + "beta": "Beta", + "deprecated": "Deprecated", + "planned": "Planned", + "experimental": "Experimental" + }, + "common": { + "onThisPage": "On this page", + "lastUpdated": "Last updated", + "contributors": "Contributors", + "editPage": "Edit this page", + "reportIssue": "Report an issue", + "backTo": "Back to {title}", + "skipToContent": "Skip to content", + "openMenu": "Open menu", + "closeMenu": "Close menu" + }, + "component": { + "overview": "Overview", + "usage": "Usage", + "api": "API", + "props": "Props", + "slots": "Slots", + "events": "Events", + "accessibility": "Accessibility", + "anatomy": "Anatomy", + "examples": "Examples", + "related": "Related components", + "sourceCode": "Source code", + "storybook": "Storybook", + "figma": "Figma", + "noProps": "No props defined.", + "noSlots": "No slots defined.", + "noEvents": "No events defined.", + "required": "Required", + "optional": "Optional", + "defaultValue": "Default", + "type": "Type", + "name": "Name", + "description": "Description", + "value": "Value" + }, + "playground": { + "title": "Playground", + "description": "Experiment with components in real-time", + "controls": "Controls", + "preview": "Preview", + "code": "Code", + "copyCode": "Copy code", + "copied": "Copied!", + "reset": "Reset to defaults", + "noComponent": "No component selected" + }, + "icons": { + "title": "Icon Library", + "search": "Search icons...", + "noResults": "No icons found for \"{query}\"", + "download": "Download", + "copyName": "Copy icon name", + "copySvg": "Copy SVG", + "copied": "Copied!", + "categories": { + "azionicons": "Azion Icons", + "primeicons": "Prime Icons" + } + }, + "callout": { + "info": "Info", + "warning": "Warning", + "danger": "Danger", + "tip": "Tip", + "note": "Note" + }, + "doDont": { + "do": "Do", + "dont": "Don't", + "bestPractice": "Best practice", + "avoid": "Avoid" + }, + "footer": { + "copyright": "© {year} Azion Technologies. All rights reserved.", + "documentation": "Documentation", + "resources": "Resources", + "community": "Community", + "more": "More" + } +} diff --git a/apps/ds-docs/i18n/pt.json b/apps/ds-docs/i18n/pt.json new file mode 100644 index 00000000..5cc23e47 --- /dev/null +++ b/apps/ds-docs/i18n/pt.json @@ -0,0 +1,126 @@ +{ + "brand": { + "name": "Design System" + }, + "nav": { + "documentation": "Documentação", + "getStarted": "Começar", + "foundations": "Fundamentos", + "tokens": "Tokens", + "components": "Componentes", + "blocks": "Blocos", + "patterns": "Padrões", + "templates": "Templates", + "icons": "Ícones", + "playground": "Playground", + "contributing": "Contribuir" + }, + "search": { + "placeholder": "Buscar na documentação...", + "noResults": "Nenhum resultado encontrado para \"{query}\"", + "clear": "Limpar busca", + "close": "Fechar busca", + "resultsCount": "{count} resultado{plural}", + "inSection": "em {section}", + "startTyping": "Comece a digitar para buscar..." + }, + "version": { + "current": "Atual", + "latest": "Mais recente", + "older": "Versão anterior", + "banner": "Você está visualizando uma versão anterior da documentação. Pode haver uma versão mais recente disponível.", + "viewLatest": "Ver versão mais recente" + }, + "language": { + "switch": "Alterar idioma", + "current": "Idioma atual", + "available": "Idiomas disponíveis" + }, + "status": { + "stable": "Estável", + "beta": "Beta", + "deprecated": "Descontinuado", + "planned": "Planejado", + "experimental": "Experimental" + }, + "common": { + "onThisPage": "Nesta página", + "lastUpdated": "Última atualização", + "contributors": "Colaboradores", + "editPage": "Editar esta página", + "reportIssue": "Reportar um problema", + "backTo": "Voltar para {title}", + "skipToContent": "Pular para o conteúdo", + "openMenu": "Abrir menu", + "closeMenu": "Fechar menu" + }, + "component": { + "overview": "Visão geral", + "usage": "Uso", + "api": "API", + "props": "Props", + "slots": "Slots", + "events": "Eventos", + "accessibility": "Acessibilidade", + "anatomy": "Anatomia", + "examples": "Exemplos", + "related": "Componentes relacionados", + "sourceCode": "Código fonte", + "storybook": "Storybook", + "figma": "Figma", + "noProps": "Nenhuma prop definida.", + "noSlots": "Nenhum slot definido.", + "noEvents": "Nenhum evento definido.", + "required": "Obrigatório", + "optional": "Opcional", + "defaultValue": "Padrão", + "type": "Tipo", + "name": "Nome", + "description": "Descrição", + "value": "Valor" + }, + "playground": { + "title": "Playground", + "description": "Experimente componentes em tempo real", + "controls": "Controles", + "preview": "Pré-visualização", + "code": "Código", + "copyCode": "Copiar código", + "copied": "Copiado!", + "reset": "Restaurar padrões", + "noComponent": "Nenhum componente selecionado" + }, + "icons": { + "title": "Biblioteca de Ícones", + "search": "Buscar ícones...", + "noResults": "Nenhum ícone encontrado para \"{query}\"", + "download": "Baixar", + "copyName": "Copiar nome do ícone", + "copySvg": "Copiar SVG", + "copied": "Copiado!", + "categories": { + "azionicons": "Ícones Azion", + "primeicons": "Prime Icons" + } + }, + "callout": { + "info": "Informação", + "warning": "Aviso", + "danger": "Perigo", + "tip": "Dica", + "note": "Nota" + }, + "doDont": { + "do": "Faça", + "dont": "Não faça", + "bestPractice": "Melhor prática", + "avoid": "Evitar" + }, + "footer": { + "copyright": "© {year} Azion Technologies. Todos os direitos reservados.", + "documentation": "Documentação", + "resources": "Recursos", + "community": "Comunidade", + "more": "Mais" + } +} diff --git a/apps/ds-docs/src/components/docs/ComponentsStatusTable.astro b/apps/ds-docs/src/components/docs/ComponentsStatusTable.astro new file mode 100644 index 00000000..4794534d --- /dev/null +++ b/apps/ds-docs/src/components/docs/ComponentsStatusTable.astro @@ -0,0 +1,307 @@ +--- +/** + * ComponentsStatusTable Component + * + * A semantic HTML table displaying component progress across design and code. + * Supports both launched and planned components with accessible status badges. + * + * Features: + * - Semantic HTML table with proper th/td structure + * - Zebra rows for readability + * - Horizontal scroll on small screens + * - Links for components with href + * - Em dash for missing launch versions + * - Empty state handling + * - Column sorting with visual indicators + */ + +import type { ComponentStatusItem, ProgressStatus } from '../../data/component-status'; +import ProgressStatusBadge from './ProgressStatusBadge.vue'; + +interface Props { + /** Array of component status items to display */ + components: ComponentStatusItem[]; + /** Optional caption explaining the table content */ + caption?: string; +} + +const { + components, + caption = 'Current component maturity and planned releases.', +} = Astro.props; + +// Check if we have any components to display +const hasComponents = components.length > 0; + +// Status priority for sorting (lower = better) +const statusPriority: Record = { + 'done': 1, + 'documenting': 2, + 'handoff': 3, + 'queued': 4, + 'planned': 5, + 'not-started': 6, +}; +--- + +
+ {caption && ( +

{caption}

+ )} + + {hasComponents ? ( +
+ + + + + + + + + + + {components.map((component, index) => { + const isEven = index % 2 === 0; + const rowClass = isEven ? 'bg-surface' : 'bg-surface-muted'; + + return ( + + + + + + + ); + })} + +
+
+ Component + + + + + +
+ 		+
+ Design + + + + + +
+ 		+
+ Code + + + + + +
+ 		+
+ Launch Version + + + + + +
+
+ {component.href ? ( + + {component.name} + + ) : ( + {component.name} + )} + + + + + + {component.launchVersion || —} +
+
+ ) : ( +
+

No components to display.

+

+ Component status information will appear here once available. +

+
+ )} +
+ + + + diff --git a/apps/ds-docs/src/components/docs/DocsHeader.vue b/apps/ds-docs/src/components/docs/DocsHeader.vue index f27ec253..ae8c3239 100644 --- a/apps/ds-docs/src/components/docs/DocsHeader.vue +++ b/apps/ds-docs/src/components/docs/DocsHeader.vue @@ -1,39 +1,103 @@