@lostgradient/cinder 0.5.0 → 0.6.0

package/src/components/matrix-chart/matrix-chart.schema.json

@@ -0,0 +1,90 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "type": "object",
+  "properties": {
+    "label": {
+      "type": "string",
+      "description": "Accessible label for the chart. Required for screen readers."
+    },
+    "description": {
+      "type": "string",
+      "description": "Optional description rendered below the label."
+    },
+    "data": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "additionalProperties": {
+          "anyOf": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "number"
+            },
+            {
+              "type": "null"
+            }
+          ]
+        }
+      },
+      "description": "Rows of data. Each row must include the keys named by the `xField`, `yField`, and `valueField` props."
+    },
+    "xField": {
+      "type": "string",
+      "description": "Key on each datum used for the x-axis (columns)."
+    },
+    "yField": {
+      "type": "string",
+      "description": "Key on each datum used for the y-axis (rows)."
+    },
+    "valueField": {
+      "type": "string",
+      "description": "Key on each datum used for the numeric cell value."
+    },
+    "colorScale": {
+      "enum": ["sequential", "diverging"],
+      "description": "Color interpolation scale. Default `sequential`."
+    },
+    "showCellLabels": {
+      "type": "boolean",
+      "description": "Show cell value labels. Default `true`."
+    },
+    "height": {
+      "type": "number",
+      "description": "Pixel height of the chart viewport. Default `280`."
+    },
+    "loading": {
+      "type": "boolean",
+      "description": "Whether the chart is in a loading state. Default `false`."
+    },
+    "dataTableCaption": {
+      "type": "string",
+      "description": "Custom data table caption; falls back to `label`."
+    },
+    "dataTableVisibility": {
+      "enum": ["screen-reader-only", "visible", "hidden"],
+      "description": "Controls data table visibility. Default `screen-reader-only`."
+    },
+    "class": {
+      "type": "string",
+      "description": "Custom class applied to the root element."
+    }
+  },
+  "additionalProperties": false,
+  "required": ["data", "label", "valueField", "xField", "yField"],
+  "metadata": {
+    "unsupportedProps": [
+      {
+        "name": "empty",
+        "reason": "function-or-snippet",
+        "description": "Snippet rendered when the chart has no data."
+      },
+      {
+        "name": "loadingContent",
+        "reason": "function-or-snippet",
+        "description": "Snippet rendered while the chart is loading."
+      }
+    ]
+  }
+}

package/src/components/matrix-chart/matrix-chart.variables.json

@@ -0,0 +1 @@
+[]

package/src/components/media-controls/media-controls.schema.json

@@ -0,0 +1,68 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "type": "object",
+  "properties": {
+    "playing": {
+      "type": "boolean",
+      "description": "Whether playback is active.",
+      "default": false
+    },
+    "replay": {
+      "type": "boolean",
+      "description": "Show a replay action when the track has ended.",
+      "default": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "description": "Disable all controls.",
+      "default": false
+    },
+    "loading": {
+      "type": "boolean",
+      "description": "Show loading state while media is buffering.",
+      "default": false
+    },
+    "unavailable": {
+      "type": "boolean",
+      "description": "Controls are unavailable.",
+      "default": false
+    },
+    "progress": {
+      "type": "number",
+      "description": "Progress value between 0 and 1. Omit to hide the progress bar."
+    },
+    "progressLabel": {
+      "type": "string",
+      "description": "Accessible label for the progress bar."
+    },
+    "layout": {
+      "enum": ["compact", "expanded"],
+      "description": "Layout mode.",
+      "default": "compact"
+    },
+    "class": {
+      "type": "string",
+      "description": "Additional class names merged with `.cinder-media-controls`."
+    }
+  },
+  "additionalProperties": false,
+  "metadata": {
+    "unsupportedProps": [
+      {
+        "name": "onpause",
+        "reason": "function-or-snippet",
+        "description": "Called when the pause action is triggered."
+      },
+      {
+        "name": "onplay",
+        "reason": "function-or-snippet",
+        "description": "Called when the play action is triggered."
+      },
+      {
+        "name": "onreplay",
+        "reason": "function-or-snippet",
+        "description": "Called when the replay action is triggered."
+      }
+    ]
+  }
+}

package/src/components/media-controls/media-controls.variables.json

@@ -0,0 +1 @@
+[]

package/src/components/mega-menu/mega-menu.schema.json

@@ -0,0 +1,37 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "type": "object",
+  "properties": {
+    "openOnHover": {
+      "type": "boolean",
+      "description": "Hover opens top-level content instead of click-only mode."
+    },
+    "showViewport": {
+      "type": "boolean",
+      "description": "Render the shared content viewport wrapper."
+    },
+    "showIndicator": {
+      "type": "boolean",
+      "description": "Render an active trigger indicator bar."
+    },
+    "label": {
+      "type": "string",
+      "description": "Accessible name for the navigation landmark."
+    },
+    "class": {
+      "type": "string",
+      "description": "Additional classes merged onto the root element."
+    }
+  },
+  "additionalProperties": false,
+  "metadata": {
+    "unsupportedProps": [
+      {
+        "name": "items",
+        "reason": "unknown-shape",
+        "required": true,
+        "description": "Top-level trigger/content entries."
+      }
+    ]
+  }
+}

package/src/components/mega-menu/mega-menu.variables.json

@@ -0,0 +1 @@
+[]

package/src/components/menu-bar/menu-bar.schema.json

@@ -0,0 +1,32 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "type": "object",
+  "properties": {
+    "id": {
+      "type": "string",
+      "description": "HTML id applied to the menubar root element. Auto-generated when omitted."
+    },
+    "label": {
+      "type": "string",
+      "description": "Accessible label for the menubar, applied as aria-label. Ignored when labelledBy is set. Default `Application menu`."
+    },
+    "labelledBy": {
+      "type": "string",
+      "description": "ID of an existing element whose text labels the menubar, applied as aria-labelledby. Takes precedence over label."
+    },
+    "class": {
+      "type": "string",
+      "description": "Additional class names merged with the component's root class."
+    }
+  },
+  "additionalProperties": false,
+  "metadata": {
+    "unsupportedProps": [
+      {
+        "name": "menus",
+        "reason": "unknown-shape",
+        "required": true
+      }
+    ]
+  }
+}

package/src/components/menu-bar/menu-bar.variables.json

@@ -0,0 +1 @@
+[]

package/src/components/message/message.schema.json

@@ -0,0 +1,38 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "type": "object",
+  "properties": {
+    "role": {
+      "enum": ["user", "assistant", "system"],
+      "description": "Role of the speaker — drives visual treatment."
+    },
+    "datetime": {
+      "type": "string",
+      "description": "The machine-readable date/time value placed on the `<time datetime>` attribute."
+    },
+    "timestamp": {
+      "type": "string",
+      "description": "Human-readable display text rendered inside the `<time>` element.\nFalls back to `datetime` when omitted."
+    },
+    "name": {
+      "type": "string",
+      "description": "Optional speaker name override (defaults derived from role)."
+    },
+    "class": {
+      "type": "string",
+      "description": "Additional class names merged with `.cinder-message`."
+    }
+  },
+  "additionalProperties": false,
+  "required": ["role"],
+  "metadata": {
+    "unsupportedProps": [
+      {
+        "name": "children",
+        "reason": "function-or-snippet",
+        "required": true,
+        "description": "Message body content."
+      }
+    ]
+  }
+}

package/src/components/message/message.variables.json

@@ -0,0 +1 @@
+[]

package/src/components/meter/meter.schema.json

@@ -0,0 +1,51 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "type": "object",
+  "properties": {
+    "value": {
+      "type": "number",
+      "description": "Current measurement value. Defaults to 0."
+    },
+    "min": {
+      "type": "number",
+      "description": "Lower bound for the range. Defaults to 0."
+    },
+    "max": {
+      "type": "number",
+      "description": "Upper bound for the range. Defaults to 100."
+    },
+    "low": {
+      "type": "number",
+      "description": "Lower threshold boundary for segmented rendering."
+    },
+    "high": {
+      "type": "number",
+      "description": "Upper threshold boundary for segmented rendering."
+    },
+    "optimum": {
+      "type": "number",
+      "description": "Optimal target value. Influences computed state semantics to match native\nmeter expectations."
+    },
+    "size": {
+      "enum": ["sm", "md", "lg"],
+      "description": "Size token for track height. Default `md`."
+    },
+    "ariaValueText": {
+      "type": "string",
+      "description": "Human-readable text exposed via `aria-valuetext`.\nWhen omitted, `aria-valuetext` is not rendered.\nExample: `50% (6 hours remaining)`."
+    },
+    "ariaLabel": {
+      "type": "string",
+      "description": "Accessible name applied directly to the meter element when no visible\nlabel element is present."
+    },
+    "ariaLabelledby": {
+      "type": "string",
+      "description": "Id of a visible element that serves as the accessible name for the meter.\nPrefer this when a visible label exists."
+    },
+    "class": {
+      "type": "string",
+      "description": "Additional class names merged with `.cinder-meter`."
+    }
+  },
+  "additionalProperties": false
+}

package/src/components/meter/meter.variables.json

@@ -0,0 +1 @@
+[]

package/src/components/modal/modal.schema.json

@@ -0,0 +1,77 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "type": "object",
+  "properties": {
+    "open": {
+      "type": "boolean",
+      "description": "Controls whether the modal is open; bindable for controlled usage."
+    },
+    "title": {
+      "type": "string",
+      "description": "Text rendered as the modal's visible heading and used as its accessible label."
+    },
+    "dismissOnBackdropClick": {
+      "type": "boolean",
+      "description": "When true, clicking the backdrop outside the modal panel dismisses it. Default `true`."
+    },
+    "dismissOnEscape": {
+      "type": "boolean",
+      "description": "When true, pressing Escape dismisses the modal. Default `true`."
+    },
+    "showCloseButton": {
+      "type": "boolean",
+      "description": "When true, renders the close button in the upper corner of the modal panel. Default `true`."
+    },
+    "class": {
+      "type": "string",
+      "description": "Additional class names merged with the component's root class."
+    },
+    "role": {
+      "enum": ["dialog", "alertdialog"],
+      "description": "ARIA role applied to the underlying dialog element. Default `dialog`."
+    },
+    "describedById": {
+      "type": "string",
+      "description": "When set, applied as aria-describedby on the underlying <dialog>. Pass a short, plain description ID only."
+    }
+  },
+  "additionalProperties": false,
+  "required": ["open", "title"],
+  "metadata": {
+    "unsupportedProps": [
+      {
+        "name": "children",
+        "reason": "function-or-snippet",
+        "required": true
+      },
+      {
+        "name": "footer",
+        "reason": "function-or-snippet"
+      },
+      {
+        "name": "ondismiss",
+        "reason": "function-or-snippet",
+        "description": "Fired on user-initiated dismissal. Includes: Escape key (native dialog 'cancel' event),\nbackdrop click, and the close-X button. EXCLUDES: parent-driven open = false.\nCallbacks are not awaited and thrown callbacks do not block close."
+      },
+      {
+        "name": "triggerRef",
+        "reason": "unknown-shape"
+      }
+    ]
+  },
+  "allOf": [
+    {
+      "if": {
+        "properties": {
+          "role": {
+            "const": "alertdialog"
+          }
+        },
+        "required": ["role"]
+      },
+      "then": {
+        "required": ["describedById"]
+      }
+    }
+  ]
+}

package/src/components/modal/modal.variables.json

@@ -0,0 +1 @@
+[]

package/src/components/multi-select/multi-select.schema.json

@@ -0,0 +1,88 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "type": "object",
+  "properties": {
+    "id": {
+      "type": "string",
+      "description": "Unique identifier — required for label association and ARIA wiring."
+    },
+    "name": {
+      "type": "string",
+      "description": "Native form field name. Emits one hidden input per selected id."
+    },
+    "label": {
+      "type": "string",
+      "description": "Visible label rendered in a `<label>` associated via `for`."
+    },
+    "placeholder": {
+      "type": "string",
+      "description": "Placeholder text when nothing is selected."
+    },
+    "description": {
+      "type": "string",
+      "description": "Helper text displayed below the trigger; wired via aria-describedby."
+    },
+    "error": {
+      "type": "string",
+      "description": "Validation error message; sets aria-invalid=\"true\"."
+    },
+    "warning": {
+      "type": "string",
+      "description": "Warning text rendered below the control and included in aria-describedby."
+    },
+    "disabled": {
+      "type": "boolean",
+      "description": "Disables the control. Inherited from a wrapping FormField when unset."
+    },
+    "readonly": {
+      "type": "boolean",
+      "description": "Prevents changing selection while still allowing viewing current selections."
+    },
+    "required": {
+      "type": "boolean",
+      "description": "Marks the field required and shows the required marker on the label."
+    },
+    "filterable": {
+      "type": "boolean",
+      "description": "Enables the filter input rendered above the options list."
+    },
+    "selectionFeedback": {
+      "enum": ["top", "fixed", "top-after-reopen"],
+      "description": "Selected-option ordering behavior when the menu is open."
+    },
+    "direction": {
+      "enum": ["down", "up"],
+      "description": "Open direction for the floating panel."
+    },
+    "class": {
+      "type": "string",
+      "description": "Additional class names merged with `.cinder-multi-select`."
+    },
+    "aria-describedby": {
+      "type": "string",
+      "description": "External id(s) composed into aria-describedby."
+    }
+  },
+  "additionalProperties": false,
+  "required": ["id"],
+  "metadata": {
+    "unsupportedProps": [
+      {
+        "name": "filterItem",
+        "reason": "function-or-snippet",
+        "description": "Custom option filter callback. Defaults to case-insensitive label/description matching."
+      },
+      {
+        "name": "items",
+        "reason": "unknown-shape",
+        "required": true,
+        "description": "Full option set. The sole inference source for T."
+      },
+      {
+        "name": "selectedIds",
+        "reason": "generic-type-parameter",
+        "description": "Bindable selected IDs."
+      }
+    ]
+  }
+}

package/src/components/multi-select/multi-select.variables.json

@@ -0,0 +1 @@
+[]

package/src/components/navigation-bar/navigation-bar.css

@@ -133,6 +133,11 @@
       display: inline-flex;
     }
 
+    .cinder-navigation-bar[data-collapsible='true'][data-cinder-menu-toggle-placement='after-brand']
+      .cinder-navigation-bar__menu-toggle {
+      margin-inline-start: auto;
+    }
+
     .cinder-navigation-bar[data-collapsible='true'] .cinder-navigation-bar__items {
       position: absolute;
       inset-inline: 0;
@@ -173,6 +178,16 @@
       inline-size: 100%;
       justify-content: flex-start;
       padding-block: var(--cinder-space-3);
+      border-bottom: none;
+      border-inline-start: 2px solid transparent;
+      border-radius: var(--cinder-radius-sm);
+    }
+
+    .cinder-navigation-bar[data-collapsible='true']
+      .cinder-navigation-bar__items[data-open='true']
+      .cinder-navigation-item[data-variant='mobile'][data-active='true'] {
+      border-inline-start-color: var(--cinder-accent);
+      background-color: var(--cinder-surface-inset);
     }
   }
 

package/src/components/navigation-bar/navigation-bar.examples.json

@@ -7,7 +7,7 @@
       "id": "basic",
       "title": "Basic navigation bar",
       "description": "Brand, link and button navigation items, disabled state, and an action in the trailing slot.",
-      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { NavigationBar } from '@lostgradient/cinder/navigation-bar';\n  import { NavigationItem } from '@lostgradient/cinder/navigation-item';\n  let active = $state('home');\n  let mobileMenuOpen = $state(false);\n</script>\n\n<NavigationBar bind:mobileMenuOpen>\n  {#snippet brand()}\n    <strong>Acme</strong>\n  {/snippet}\n  {#snippet menuToggle(attrs)}\n    <button type=\"button\" {...attrs} aria-label={mobileMenuOpen ? 'Close menu' : 'Open menu'}>\n      <span aria-hidden=\"true\">☰</span>\n    </button>\n  {/snippet}\n  {#snippet items({ variant })}\n    <NavigationItem {variant} onclick={() => (active = 'home')} active={active === 'home'}>\n      Home\n    </NavigationItem>\n    <NavigationItem {variant} onclick={() => (active = 'docs')} active={active === 'docs'}>\n      Docs\n    </NavigationItem>\n    <NavigationItem {variant} href=\"#blog\" active={active === 'blog'}>Blog</NavigationItem>\n    <NavigationItem {variant} onclick={() => (active = 'billing')} disabled>Billing</NavigationItem>\n  {/snippet}\n  {#snippet actions()}\n    <Button variant=\"primary\" size=\"sm\" label=\"Sign up\" />\n  {/snippet}\n</NavigationBar>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { NavigationBar } from '@lostgradient/cinder/navigation-bar';\n  import { NavigationItem } from '@lostgradient/cinder/navigation-item';\n  let active = $state('home');\n  let mobileMenuOpen = $state(false);\n</script>\n\n<NavigationBar bind:mobileMenuOpen menuTogglePlacement=\"before-brand\">\n  {#snippet brand()}\n    <strong>Acme</strong>\n  {/snippet}\n  {#snippet menuToggle(attrs)}\n    <button type=\"button\" {...attrs} aria-label={mobileMenuOpen ? 'Close menu' : 'Open menu'}>\n      <span aria-hidden=\"true\">☰</span>\n    </button>\n  {/snippet}\n  {#snippet items({ variant })}\n    <NavigationItem {variant} onclick={() => (active = 'home')} active={active === 'home'}>\n      Home\n    </NavigationItem>\n    <NavigationItem {variant} onclick={() => (active = 'docs')} active={active === 'docs'}>\n      Docs\n    </NavigationItem>\n    <NavigationItem {variant} href=\"#blog\" active={active === 'blog'}>Blog</NavigationItem>\n    <NavigationItem {variant} onclick={() => (active = 'billing')} disabled>Billing</NavigationItem>\n  {/snippet}\n  {#snippet actions()}\n    <Button variant=\"primary\" size=\"sm\" label=\"Sign up\" />\n  {/snippet}\n</NavigationBar>\n"
     },
     {
       "id": "bottom-tabs",

package/src/components/navigation-bar/navigation-bar.schema.json

@@ -0,0 +1,57 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "type": "object",
+  "properties": {
+    "class": {
+      "type": "string",
+      "description": "Custom class merged onto the root `<nav>` element."
+    },
+    "placement": {
+      "enum": ["top", "bottom"],
+      "description": "Visual placement mode. `bottom` renders a mobile tab-bar composition, but\nstill does not fix or stick itself to the viewport.",
+      "default": "top"
+    },
+    "showLabels": {
+      "enum": ["always", "active", "never"],
+      "description": "Label visibility for mobile bottom-tab compositions. Hidden labels remain in\nthe accessibility tree when wrapped in `[data-cinder-navigation-label]`.",
+      "default": "always"
+    },
+    "menuTogglePlacement": {
+      "enum": ["after-brand", "before-brand"],
+      "description": "Placement for the collapsible mobile menu toggle in top navigation bars.\nIgnored for `placement=\"bottom\"`.",
+      "default": "after-brand"
+    },
+    "mobileMenuOpen": {
+      "type": "boolean",
+      "description": "Two-way bindable open state of the mobile menu."
+    },
+    "label": {
+      "type": "string",
+      "description": "Accessible name for the <nav> landmark. Wins over any aria-label passed via rest. Default 'Main navigation'."
+    }
+  },
+  "additionalProperties": false,
+  "metadata": {
+    "unsupportedProps": [
+      {
+        "name": "actions",
+        "reason": "function-or-snippet"
+      },
+      {
+        "name": "brand",
+        "reason": "function-or-snippet"
+      },
+      {
+        "name": "items",
+        "reason": "function-or-snippet",
+        "required": true,
+        "description": "Receives a context object with the current variant."
+      },
+      {
+        "name": "menuToggle",
+        "reason": "function-or-snippet",
+        "description": "Snippet receiving toggle button attributes. Consumer renders the actual <button> and should mark decorative glyphs or icons inside it as aria-hidden so the button name comes from text or aria-label, not the ornament."
+      }
+    ]
+  }
+}

package/src/components/navigation-bar/navigation-bar.variables.json

@@ -0,0 +1 @@
+[]

package/src/components/navigation-item/navigation-item.schema.json

@@ -0,0 +1,45 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "type": "object",
+  "properties": {
+    "active": {
+      "type": "boolean",
+      "description": "Marks this item as the currently active destination; emits `aria-current` and applies active visual styling."
+    },
+    "disabled": {
+      "type": "boolean",
+      "description": "Prevents interaction: removes the item from the tab order, blocks clicks, and applies disabled visual styling."
+    },
+    "current": {
+      "enum": ["true", "page", "step", "location", "date", "time"],
+      "description": "The `aria-current` token emitted while `active` is true. Defaults to `'page'`,\nwhich is correct for navigation bars and breadcrumb-adjacent links. Use\n`'true'` (or another standard token such as `'step'` / `'location'`) for\nsection/view switchers, where `'page'` would mislabel the current section as\nthe current page in the browsing context."
+    },
+    "class": {
+      "type": "string",
+      "description": "Additional class merged onto the `.cinder-navigation-item` root element."
+    },
+    "variant": {
+      "enum": ["horizontal", "vertical", "mobile"],
+      "description": "Controls item geometry. Emitted as `data-variant`. Default `'horizontal'`.\n\n- `'horizontal'`: top-rounded radius, accent bottom-border active indicator.\n  Used inside `NavigationBar` and similar horizontal tab-bar contexts.\n- `'mobile'`: stacked full-width layout when an owning navigation surface\n  enters its narrow container mode.\n- `'vertical'`: square row geometry, neutral selected surface, and accent inline-start border active indicator.\n  Used inside `SideNavigation` (set automatically by `SideNavigationItem`) or\n  standalone sidebar footers where flush sidebar edges are required."
+    },
+    "href": {
+      "type": "string",
+      "description": "Destination URL. Providing this prop renders the item as an `<a>` element instead of a `<button>`."
+    }
+  },
+  "additionalProperties": false,
+  "metadata": {
+    "unsupportedProps": [
+      {
+        "name": "children",
+        "reason": "function-or-snippet",
+        "required": true
+      },
+      {
+        "name": "onclick",
+        "reason": "function-or-snippet",
+        "description": "Optional click handler called for the rendered `<a>` element. Useful for\nintercepting plain left-clicks for SPA navigation while letting modified\nclicks (cmd/ctrl/shift/alt or middle-click) fall through to native browser\nbehavior. Disabled-state preventDefault still applies."
+      }
+    ]
+  }
+}

package/src/components/navigation-item/navigation-item.variables.json

@@ -0,0 +1 @@
+[]