twntyx-css 1.0.0

package/llm/components/toast.json

@@ -0,0 +1,164 @@
+{
+  "id": "toast",
+  "name": "Toast",
+  "status": "stable",
+  "summary": "Toast notifications for displaying temporary messages and feedback.",
+  "keywords": [
+    "alert",
+    "banner",
+    "error",
+    "feedback",
+    "flash",
+    "indicator",
+    "info",
+    "message",
+    "notice",
+    "notification",
+    "popup",
+    "response",
+    "status",
+    "success",
+    "temporary",
+    "toast",
+    "update",
+    "warning"
+  ],
+  "sourcePaths": [
+    "app/design-system/toast/page.js",
+    "assets/styles/toast.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "toast-container",
+  "variants": [
+    {
+      "name": "toast-info",
+      "className": "toast-info",
+      "description": "Info variant styling"
+    },
+    {
+      "name": "toast-success",
+      "className": "toast-success",
+      "description": "Success variant styling"
+    },
+    {
+      "name": "toast-warning",
+      "className": "toast-warning",
+      "description": "Warning variant styling"
+    },
+    {
+      "name": "toast-error",
+      "className": "toast-error",
+      "description": "Error variant styling"
+    },
+    {
+      "name": "toast-loading",
+      "className": "toast-loading",
+      "description": "Loading state styling"
+    }
+  ],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "toast-container"
+    ],
+    "optionalClasses": [
+      "toast-info",
+      "toast-success",
+      "toast-warning",
+      "toast-error",
+      "toast-loading"
+    ],
+    "requiredChildren": [],
+    "optionalChildren": []
+  },
+  "attributes": {
+    "allowed": [
+      "class",
+      "role",
+      "aria-live",
+      "aria-atomic",
+      "data-state"
+    ],
+    "required": [
+      "role",
+      "aria-live",
+      "aria-atomic"
+    ],
+    "dataAttributes": [
+      "data-state"
+    ],
+    "roles": [
+      "alert",
+      "status"
+    ],
+    "aria": [
+      "aria-live",
+      "aria-atomic"
+    ]
+  },
+  "a11y": {
+    "interactive": true,
+    "requiredRoles": [
+      "alert"
+    ],
+    "requiredAria": [
+      "aria-live",
+      "aria-atomic"
+    ],
+    "keyboardSupport": [
+      "Tab",
+      "Shift+Tab",
+      "Escape"
+    ],
+    "focusBehavior": "Toasts should not steal focus by default; only actionable toasts should be keyboard reachable."
+  },
+  "dos": [
+    "Use toast for transient, non-blocking updates.",
+    "Set aria-live politeness based on severity.",
+    "Keep messages short and action-oriented."
+  ],
+  "donts": [
+    "Do not use toast for destructive confirmation steps.",
+    "Do not queue multiple high-priority toasts simultaneously.",
+    "Do not rely only on color to indicate severity."
+  ],
+  "tokenUsage": [
+    "background-error-active",
+    "background-info-active",
+    "background-success-active",
+    "background-surface",
+    "background-warning-active",
+    "line-default",
+    "text-default",
+    "text-error",
+    "text-info",
+    "text-success",
+    "text-warning"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/toast.html",
+      "description": "Minimal canonical Toast usage."
+    }
+  ],
+  "composition": {
+    "patterns": [
+      "feedback-and-status"
+    ],
+    "relatedComponents": [
+      "state",
+      "banner",
+      "button"
+    ],
+    "notes": [
+      "For persistent status, replace toast with banner/state components."
+    ]
+  },
+  "breakingChangePolicy": {
+    "classContract": "Base class, documented modifiers, and state class names are semver-protected for consumer markup.",
+    "a11yContract": "Documented role and aria requirements are semver-protected for generated markup."
+  }
+}

package/llm/components/toggle.json

@@ -0,0 +1,158 @@
+{
+  "id": "toggle",
+  "name": "Toggle",
+  "status": "stable",
+  "summary": "Toggle switch component for boolean states.",
+  "keywords": [
+    "boolean",
+    "button",
+    "checkbox",
+    "control",
+    "flip",
+    "form",
+    "input",
+    "off",
+    "on",
+    "selection",
+    "state",
+    "switch",
+    "toggle"
+  ],
+  "sourcePaths": [
+    "app/design-system/toggle/page.js",
+    "assets/styles/chat.css",
+    "assets/styles/field.css",
+    "assets/styles/form-checkbox-radio-toggle.css",
+    "assets/styles/form-shared.css",
+    "assets/styles/form-text-select.css",
+    "assets/styles/input-group.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "toggle",
+  "variants": [
+    {
+      "name": "input-card",
+      "className": "input-card",
+      "description": "Card style for toggle group items"
+    }
+  ],
+  "sizes": [
+    {
+      "name": "toggle-sm",
+      "className": "toggle-sm",
+      "description": "Small toggle size variant"
+    },
+    {
+      "name": "toggle-lg",
+      "className": "toggle-lg",
+      "description": "Large toggle size variant"
+    }
+  ],
+  "states": [],
+  "structure": {
+    "rootElement": "button",
+    "requiredClasses": [
+      "toggle"
+    ],
+    "optionalClasses": [
+      "input-card",
+      "toggle-sm",
+      "toggle-lg"
+    ],
+    "requiredChildren": [],
+    "optionalChildren": []
+  },
+  "attributes": {
+    "allowed": [
+      "class",
+      "id",
+      "tabindex"
+    ],
+    "required": [],
+    "dataAttributes": [],
+    "roles": [],
+    "aria": []
+  },
+  "a11y": {
+    "interactive": true,
+    "requiredRoles": [],
+    "requiredAria": [
+      "aria-label (when no visible label)"
+    ],
+    "keyboardSupport": [
+      "Tab",
+      "Shift+Tab",
+      "Enter",
+      "Space"
+    ],
+    "focusBehavior": "Visible focus state is required when the component is focusable or clickable."
+  },
+  "dos": [
+    "Apply the base class 'toggle' on the root element.",
+    "Use documented modifiers for visual variants instead of ad-hoc custom classes.",
+    "Keep semantic color usage aligned with token classes for light/dark support."
+  ],
+  "donts": [
+    "Do not combine conflicting state classes on the same element.",
+    "Do not rely on undocumented internal classes in production templates.",
+    "Do not remove required accessibility attributes when component is interactive."
+  ],
+  "tokenUsage": [
+    "background-brand",
+    "background-error",
+    "background-info",
+    "background-page",
+    "background-success",
+    "background-surface",
+    "background-surface-elevated",
+    "background-surface-sunken",
+    "background-warning",
+    "brand-default",
+    "brand-moderate",
+    "brand-strong",
+    "core-black",
+    "core-ui-100",
+    "core-ui-300",
+    "core-ui-400",
+    "core-ui-50",
+    "core-ui-500",
+    "core-ui-700",
+    "core-ui-800",
+    "core-ui-900",
+    "core-white",
+    "line-default",
+    "line-error",
+    "line-focus",
+    "line-highlight",
+    "line-info",
+    "line-strong",
+    "line-success",
+    "line-warning",
+    "text-default",
+    "text-disabled",
+    "text-error",
+    "text-info",
+    "text-link",
+    "text-link-hover",
+    "text-secondary",
+    "text-success",
+    "text-tertiary",
+    "text-warning"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/toggle.html",
+      "description": "Minimal canonical Toggle usage."
+    }
+  ],
+  "composition": {
+    "patterns": [],
+    "relatedComponents": [],
+    "notes": []
+  },
+  "breakingChangePolicy": {
+    "classContract": "Base class, documented modifiers, and state class names are semver-protected for consumer markup.",
+    "a11yContract": "Documented role and aria requirements are semver-protected for generated markup."
+  }
+}

package/llm/components/tool-svg-to-base64.json

@@ -0,0 +1,78 @@
+{
+  "id": "tool-svg-to-base64",
+  "name": "SVG to Base64",
+  "status": "experimental",
+  "summary": "Upload an SVG and convert it into a URL-encoded `data:image/svg+xml` string for direct usage in CSS or markup.",
+  "keywords": [
+    "asset",
+    "base64",
+    "convert",
+    "data url",
+    "encoder",
+    "svg",
+    "tool",
+    "tool svg to base64",
+    "tool-svg-to-base64",
+    "upload"
+  ],
+  "sourcePaths": [
+    "app/design-system/tool-svg-to-base64/page.js"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "tool-svg-to-base64",
+  "variants": [],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "tool-svg-to-base64"
+    ],
+    "optionalClasses": [],
+    "requiredChildren": [],
+    "optionalChildren": []
+  },
+  "attributes": {
+    "allowed": [
+      "class"
+    ],
+    "required": [],
+    "dataAttributes": [],
+    "roles": [],
+    "aria": []
+  },
+  "a11y": {
+    "interactive": false,
+    "requiredRoles": [],
+    "requiredAria": [],
+    "keyboardSupport": [],
+    "focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
+  },
+  "dos": [
+    "Apply the base class 'tool-svg-to-base64' on the root element.",
+    "Use documented modifiers for visual variants instead of ad-hoc custom classes.",
+    "Keep semantic color usage aligned with token classes for light/dark support."
+  ],
+  "donts": [
+    "Do not combine conflicting state classes on the same element.",
+    "Do not rely on undocumented internal classes in production templates.",
+    "Do not remove required accessibility attributes when component is interactive."
+  ],
+  "tokenUsage": [],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/tool-svg-to-base64.html",
+      "description": "Minimal canonical SVG to Base64 usage."
+    }
+  ],
+  "composition": {
+    "patterns": [],
+    "relatedComponents": [],
+    "notes": []
+  },
+  "breakingChangePolicy": {
+    "classContract": "Base class, documented modifiers, and state class names are semver-protected for consumer markup.",
+    "a11yContract": "Documented role and aria requirements are semver-protected for generated markup."
+  }
+}

package/llm/components/tool-svg-to-icon-data.json

@@ -0,0 +1,81 @@
+{
+  "id": "tool-svg-to-icon-data",
+  "name": "SVG to Icon Data",
+  "status": "experimental",
+  "summary": "Upload an SVG to generate a `dataIcons` entry with `name`, `keywords`, and `elements` ready to paste into the design system.",
+  "keywords": [
+    "converter",
+    "dataicons",
+    "elements",
+    "generator",
+    "icon",
+    "path",
+    "svg",
+    "tool",
+    "tool svg to icon data",
+    "tool-svg-to-icon-data",
+    "upload"
+  ],
+  "sourcePaths": [
+    "app/design-system/tool-svg-to-icon-data/page.js"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "tool-svg-to-icon-data",
+  "variants": [],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "tool-svg-to-icon-data"
+    ],
+    "optionalClasses": [],
+    "requiredChildren": [],
+    "optionalChildren": []
+  },
+  "attributes": {
+    "allowed": [
+      "class"
+    ],
+    "required": [],
+    "dataAttributes": [
+      "data-upload"
+    ],
+    "roles": [],
+    "aria": []
+  },
+  "a11y": {
+    "interactive": false,
+    "requiredRoles": [],
+    "requiredAria": [],
+    "keyboardSupport": [],
+    "focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
+  },
+  "dos": [
+    "Apply the base class 'tool-svg-to-icon-data' on the root element.",
+    "Use documented modifiers for visual variants instead of ad-hoc custom classes.",
+    "Keep semantic color usage aligned with token classes for light/dark support."
+  ],
+  "donts": [
+    "Do not combine conflicting state classes on the same element.",
+    "Do not rely on undocumented internal classes in production templates.",
+    "Do not remove required accessibility attributes when component is interactive."
+  ],
+  "tokenUsage": [],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/tool-svg-to-icon-data.html",
+      "description": "Minimal canonical SVG to Icon Data usage."
+    }
+  ],
+  "composition": {
+    "patterns": [],
+    "relatedComponents": [],
+    "notes": []
+  },
+  "breakingChangePolicy": {
+    "classContract": "Base class, documented modifiers, and state class names are semver-protected for consumer markup.",
+    "a11yContract": "Documented role and aria requirements are semver-protected for generated markup."
+  }
+}

package/llm/components/tooltip.json

@@ -0,0 +1,90 @@
+{
+  "id": "tooltip",
+  "name": "Tooltip",
+  "status": "stable",
+  "summary": "Tooltip patterns for supplemental contextual information on interactive elements.",
+  "keywords": [
+    "description",
+    "helper text",
+    "hint",
+    "hover",
+    "overlay",
+    "tooltip"
+  ],
+  "sourcePaths": [
+    "app/design-system/tooltip/page.js",
+    "assets/styles/shared.css",
+    "assets/styles/tooltip.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "tooltip",
+  "variants": [],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "tooltip"
+    ],
+    "optionalClasses": [],
+    "requiredChildren": [],
+    "optionalChildren": []
+  },
+  "attributes": {
+    "allowed": [
+      "class"
+    ],
+    "required": [],
+    "dataAttributes": [],
+    "roles": [],
+    "aria": []
+  },
+  "a11y": {
+    "interactive": false,
+    "requiredRoles": [],
+    "requiredAria": [],
+    "keyboardSupport": [],
+    "focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
+  },
+  "dos": [
+    "Apply the base class 'tooltip' on the root element.",
+    "Use documented modifiers for visual variants instead of ad-hoc custom classes.",
+    "Keep semantic color usage aligned with token classes for light/dark support."
+  ],
+  "donts": [
+    "Do not combine conflicting state classes on the same element.",
+    "Do not rely on undocumented internal classes in production templates.",
+    "Do not remove required accessibility attributes when component is interactive."
+  ],
+  "tokenUsage": [
+    "background-inverted",
+    "background-surface",
+    "background-surface-elevated",
+    "brand-default",
+    "brand-moderate",
+    "line-brand",
+    "line-default",
+    "line-error",
+    "line-focus",
+    "line-highlight",
+    "line-strong",
+    "text-default",
+    "text-inverted"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/tooltip.html",
+      "description": "Minimal canonical Tooltip usage."
+    }
+  ],
+  "composition": {
+    "patterns": [],
+    "relatedComponents": [],
+    "notes": []
+  },
+  "breakingChangePolicy": {
+    "classContract": "Base class, documented modifiers, and state class names are semver-protected for consumer markup.",
+    "a11yContract": "Documented role and aria requirements are semver-protected for generated markup."
+  }
+}

package/llm/examples/ai-background.html

@@ -0,0 +1 @@
+<div class="background-ai-silk">Background</div>

package/llm/examples/ai-orb.html

@@ -0,0 +1 @@
+<div class="ai-orb">Orb</div>

package/llm/examples/ai-perl.html

@@ -0,0 +1 @@
+<div class="ai-perl">Perl</div>

package/llm/examples/all-components.html

@@ -0,0 +1 @@
+<div class="all-components">All components</div>

package/llm/examples/animation-references.html

@@ -0,0 +1 @@
+<div class="animation-references">Animation references</div>

package/llm/examples/avatar.html

@@ -0,0 +1 @@
+<div class="avatar online">Avatar</div>

package/llm/examples/badge.html

@@ -0,0 +1 @@
+<div class="badge badge-placeholder">Badge</div>

package/llm/examples/banner-marketplace.html

@@ -0,0 +1 @@
+<div class="banner-marketplace">Funding banner</div>

package/llm/examples/banner.html

@@ -0,0 +1 @@
+<div class="banner banner-info">Banner</div>

package/llm/examples/breadcrumb.html

@@ -0,0 +1 @@
+<a class="breadcrumb" href="#">Breadcrumb</a>

package/llm/examples/button-container.html

@@ -0,0 +1 @@
+<button class="button-container surface-claim" type="button"><span>Button container</span></button>

package/llm/examples/button-feedback.html

@@ -0,0 +1 @@
+<button class="button button-primary" type="button"><span>Button feedback</span></button>

package/llm/examples/button.html

@@ -0,0 +1,3 @@
+<button class="button button-primary" type="button">
+  <span>Primary action</span>
+</button>

package/llm/examples/card-assessment.html

@@ -0,0 +1 @@
+<div class="card-assessment">Investor fit card</div>

package/llm/examples/card-test.html

@@ -0,0 +1 @@
+<div class="card-test">Readiness card</div>

package/llm/examples/card.html

@@ -0,0 +1 @@
+<div class="card card-default">Card</div>

package/llm/examples/chat.html

@@ -0,0 +1 @@
+<div class="chat chat-secondary">Chat</div>

package/llm/examples/checkbox.html

@@ -0,0 +1 @@
+<label class="field"><span class="input-label">Checkbox</span><input class="checkbox input-line-through" type="text" placeholder="Checkbox" /></label>

package/llm/examples/checkmark.html

@@ -0,0 +1 @@
+<div class="checkmark checkmark-invisible">Checkmark</div>

package/llm/examples/collapsible.html

@@ -0,0 +1 @@
+<div class="collapsible collapsible-has-arrow">Collapsible</div>

package/llm/examples/color-palette.html

@@ -0,0 +1 @@
+<div class="color-palette">Color palette</div>

package/llm/examples/color-usage.html

@@ -0,0 +1 @@
+<div class="color-usage">Color usage</div>

package/llm/examples/combobox.html

@@ -0,0 +1 @@
+<label class="field"><span class="input-label">Combobox</span><input class="combobox" type="text" placeholder="Combobox" /></label>

package/llm/examples/command-palette.html

@@ -0,0 +1 @@
+<div class="command">Command palette</div>

package/llm/examples/countdown.html

@@ -0,0 +1 @@
+<div class="countdown">Countdown</div>

package/llm/examples/datepicker.html

@@ -0,0 +1 @@
+<label class="field"><span class="input-label">Datepicker</span><input class="datepicker range-start" type="text" placeholder="Datepicker" /></label>

package/llm/examples/divider.html

@@ -0,0 +1 @@
+<div class="divider divider-horizontal">Divider</div>

package/llm/examples/empty-state.html

@@ -0,0 +1 @@
+<div class="empty-state">Empty state</div>

package/llm/examples/field.html

@@ -0,0 +1 @@
+<label class="field"><span class="input-label">Field</span><input class="field" type="text" placeholder="Field" /></label>

package/llm/examples/fieldset.html

@@ -0,0 +1 @@
+<label class="field"><span class="input-label">Fieldset</span><input class="fieldset" type="text" placeholder="Fieldset" /></label>

package/llm/examples/file-upload.html

@@ -0,0 +1 @@
+<label class="field"><span class="input-label">File upload</span><input class="file-upload file-upload-error" type="text" placeholder="File upload" /></label>