@lostgradient/cinder 0.1.1 → 0.2.0

package/src/components/bar-chart/bar-chart.svelte

@@ -24,7 +24,12 @@
     dataTableClass,
     formatNumericValue,
     legendVisible,
+    type ChartTarget,
   } from '../../_internal/chart/chart-utilities.ts';
+  import {
+    DEFAULT_CHART_FOCUS_RING_STROKE_PADDING,
+    createBarFocusRingGeometry,
+  } from '../../_internal/chart/chart-focus-ring.ts';
   import { ChartInteraction } from '../../_internal/chart/chart-interaction.svelte.ts';
   import { classNames } from '../../utilities/class-names.ts';
   import type { BarChartProps } from './bar-chart.types.ts';
@@ -96,6 +101,28 @@
       ? `${rootId}-table-guidance`
       : undefined,
   );
+  const focusedTarget = $derived.by(() => {
+    const currentTarget = interaction.focusedTarget;
+    if (!currentTarget) return undefined;
+    return model.targets.find((target) => target.id === currentTarget.id);
+  });
+  let keyboardFocusModality = $state(false);
+  let focusVisibleTargetId = $state<string>();
+  const focusRingTarget = $derived(
+    keyboardFocusModality && focusedTarget && focusVisibleTargetId === focusedTarget.id
+      ? focusedTarget
+      : undefined,
+  );
+  const barFocusRing = $derived(
+    focusRingTarget
+      ? createBarFocusRingGeometry({
+          target: focusRingTarget,
+          plotWidth: model.geometry.plotWidth,
+          plotHeight: model.geometry.plotHeight,
+          strokePadding: DEFAULT_CHART_FOCUS_RING_STROKE_PADDING,
+        })
+      : null,
+  );
 
   $effect(() => {
     assertValidNonNegativeInteger(
@@ -109,8 +136,44 @@
   $effect(() => {
     interaction.clearStaleTargets(loading, model.empty, model.targets);
   });
+
+  function rememberKeyboardFocusModality(event: KeyboardEvent): void {
+    if (
+      event.key === 'Tab' ||
+      event.key === 'Home' ||
+      event.key === 'End' ||
+      event.key.startsWith('Arrow')
+    ) {
+      keyboardFocusModality = true;
+    }
+  }
+
+  function clearKeyboardFocusModality(): void {
+    keyboardFocusModality = false;
+    focusVisibleTargetId = undefined;
+  }
+
+  function handleTargetFocus(target: ChartTarget): void {
+    interaction.focusedTarget = target;
+    focusVisibleTargetId = keyboardFocusModality ? target.id : undefined;
+  }
+
+  function handleTargetBlur(): void {
+    interaction.focusedTarget = undefined;
+    focusVisibleTargetId = undefined;
+  }
+
+  function handleTargetKeydown(event: KeyboardEvent): void {
+    rememberKeyboardFocusModality(event);
+    interaction.activateByKeyboard(event, rootElement!, model.targets, keyboardEnabled);
+  }
 </script>
 
+<svelte:window
+  onkeydown={rememberKeyboardFocusModality}
+  onpointerdown={clearKeyboardFocusModality}
+/>
+
 <figure
   {...rest}
   bind:this={rootElement}
@@ -160,7 +223,7 @@
         <title id="{rootId}-svg-title">{label}</title>
       {/if}
       <g transform={`translate(${model.geometry.marginLeft}, ${model.geometry.marginTop})`}>
-        {#each model.yTicks as tick, index}
+        {#each model.yTicks as tick, index (tick)}
           <!--
             Bar chart tick positions depend on orientation:
             - Vertical: y-axis labels appear left of the chart (same as line/area).
@@ -199,7 +262,7 @@
             data-cinder-category={bar.categoryLabel}
           />
         {/each}
-        {#each model.categoryTicks as tick (tick.label)}
+        {#each model.categoryTicks as tick (tick.categoryKey)}
           <!--
             Category axis labels differ by orientation:
             - Vertical: labels appear below bars (middle-anchored x, no baseline).
@@ -266,23 +329,41 @@
                 tabindex="0"
                 role="button"
                 data-cinder-target-id={target.id}
+                data-cinder-series-id={target.seriesId}
+                data-cinder-focus-ring-active={barFocusRing && focusRingTarget?.id === target.id
+                  ? 'true'
+                  : undefined}
                 aria-label={`${target.seriesLabel}, ${target.xLabel}, ${target.valueLabel}`}
                 aria-describedby={interaction.activeTarget?.id === target.id
                   ? `${rootId}-tooltip`
                   : undefined}
-                onfocus={() => (interaction.focusedTarget = target)}
-                onblur={() => (interaction.focusedTarget = undefined)}
-                onkeydown={(event) =>
-                  interaction.activateByKeyboard(
-                    event,
-                    rootElement!,
-                    model.targets,
-                    keyboardEnabled,
-                  )}
+                onfocus={() => handleTargetFocus(target)}
+                onblur={handleTargetBlur}
+                onkeydown={handleTargetKeydown}
               />
             {/each}
           {/if}
         {/if}
+        {#if barFocusRing}
+          <g class="cinder-bar-chart__focus-ring-layer" aria-hidden="true">
+            <rect
+              class="cinder-bar-chart__focus-ring-halo"
+              x={barFocusRing.x}
+              y={barFocusRing.y}
+              width={barFocusRing.width}
+              height={barFocusRing.height}
+              rx={barFocusRing.radius}
+            />
+            <rect
+              class="cinder-bar-chart__focus-ring"
+              x={barFocusRing.x}
+              y={barFocusRing.y}
+              width={barFocusRing.width}
+              height={barFocusRing.height}
+              rx={barFocusRing.radius}
+            />
+          </g>
+        {/if}
       </g>
     </svg>
     {#if interaction.activeTarget}<div
@@ -313,8 +394,8 @@
         ></thead
       >
       <tbody>
-        {#each model.tableRows as row}
-          {#each row.values as value}
+        {#each model.tableRows as row (row.categoryKey)}
+          {#each row.values as value (value.seriesId)}
             <tr
               ><th scope="row">{row.categoryLabel}</th><td>{value.seriesLabel}</td><td
                 >{value.valueLabel}</td

package/src/components/button/button.css

@@ -194,8 +194,8 @@
  * ---------------------------------------- */
 
   .cinder-button[data-cinder-variant='primary'] {
-    /* Ring uses the dedicated --cinder-ring-color (not the bright fill-accent):
-       the L=0.72 accent is the button face, so an accent ring would be invisible
+    /* Ring uses the dedicated --cinder-ring-color (not the fill-accent):
+       the accent is the button face, so an accent ring would be invisible
        against it and fail WCAG 1.4.11 (3:1) against the page. */
     --_cinder-button-ring: var(--cinder-ring-color);
     background: var(--cinder-accent);
@@ -423,7 +423,9 @@
  * hover paint when both states are active on hover-capable devices. Unwrapped
  * so they fire on tap. */
   .cinder-button[data-cinder-variant='primary']:active:not(:disabled):not([aria-disabled='true']) {
-    background: var(--cinder-accent-active);
+    /* Use the gentler on-fill pressed token so the --cinder-accent-contrast label stays AA-legible
+       on the pressed fill (the general --cinder-accent-active would drop the label below 4.5:1). */
+    background: var(--cinder-accent-active-on-fill);
   }
 
   .cinder-button[data-cinder-variant='secondary']:active:not(:disabled):not(

package/src/components/button/button.examples.json

@@ -25,6 +25,7 @@
       "id": "primary",
       "title": "Primary button",
       "description": "The default button variant.",
+      "featured": true,
       "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n</script>\n\n<Button label=\"Click me\" />\n"
     },
     {

package/src/components/button/button.svelte

@@ -48,6 +48,9 @@
     'aria-busy': consumerAriaBusy,
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
+    'aria-expanded': ariaExpanded,
+    'aria-controls': ariaControls,
+    'aria-haspopup': ariaHaspopup,
     ...rest
   }: ButtonProps = $props();
 
@@ -98,6 +101,9 @@
     | 'aria-busy'
     | 'aria-label'
     | 'aria-labelledby'
+    | 'aria-expanded'
+    | 'aria-controls'
+    | 'aria-haspopup'
   >;
   const buttonAttributes = rest as Omit<
     HTMLButtonAttributes,
@@ -109,6 +115,9 @@
     | 'aria-busy'
     | 'aria-label'
     | 'aria-labelledby'
+    | 'aria-expanded'
+    | 'aria-controls'
+    | 'aria-haspopup'
   >;
 
   // Branch-specific prop reads stay `$derived` because they extract a *value* off `rest`
@@ -212,6 +221,9 @@
     aria-busy={resolvedAriaBusy}
     aria-label={resolvedAriaLabel}
     aria-labelledby={resolvedAriaLabelledBy}
+    aria-expanded={ariaExpanded}
+    aria-controls={ariaControls}
+    aria-haspopup={ariaHaspopup}
     onclick={handleClick}
   >
     {@render buttonContent()}
@@ -227,6 +239,9 @@
     aria-busy={resolvedAriaBusy}
     aria-label={resolvedAriaLabel}
     aria-labelledby={resolvedAriaLabelledBy}
+    aria-expanded={ariaExpanded}
+    aria-controls={ariaControls}
+    aria-haspopup={ariaHaspopup}
     onclick={handleClick}
   >
     {@render buttonContent()}

package/src/components/capability-gate/README.md

@@ -0,0 +1,60 @@
+# CapabilityGate
+
+Present feature availability and next action for browser permission or support states, with accessible status text and focus management.
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { CapabilityGate } from '@lostgradient/cinder/capability-gate';
+</script>
+```
+
+## Guidance
+
+### Use When
+
+- Surfacing that a feature requires a browser permission such as microphone or notifications.
+- Communicating that a feature is unsupported in the current browser with a clear fallback path.
+
+### Avoid When
+
+- Performing the actual feature detection or permission request — wire that in userland.
+- Storing permission state — CapabilityGate is a pure presentation component.
+
+## Props
+
+<!-- generated:props:start -->
+
+| Prop               | Type                                                                                                                 | Required | Default    | Description                                                                                                                |
+| ------------------ | -------------------------------------------------------------------------------------------------------------------- | -------- | ---------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `class`            | `string`                                                                                                             | no       | —          | Additional class names merged with `.cinder-capability-gate`.                                                              |
+| `dismissAction`    | `string`                                                                                                             | no       | —          | Label for the dismiss action.                                                                                              |
+| `fallbackAction`   | `string`                                                                                                             | no       | —          | Label for the fallback action.                                                                                             |
+| `fallbackHref`     | `string`                                                                                                             | no       | —          | Href for a fallback link.                                                                                                  |
+| `feature`          | `string`                                                                                                             | yes      | —          | The feature being gated.                                                                                                   |
+| `primaryAction`    | `string`                                                                                                             | no       | —          | Label for the primary action button.                                                                                       |
+| `state`            | `"supported"` \| `"unsupported"` \| `"permission-needed"` \| `"permission-denied"` \| `"loading"` \| `"unavailable"` | yes      | —          | Current availability state.                                                                                                |
+| `variant`          | `"inline"` \| `"banner"` \| `"callout"`                                                                              | no       | `"inline"` | Presentation variant.                                                                                                      |
+| `children`         | `(opaque)`                                                                                                           | no       | —          | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `onDismiss`        | `(opaque)`                                                                                                           | no       | —          | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `onFallbackAction` | `(opaque)`                                                                                                           | no       | —          | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `onPrimaryAction`  | `(opaque)`                                                                                                           | no       | —          | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+
+<!-- generated:props:end -->
+
+## CSS Variables
+
+<!-- generated:variables:start -->
+
+This component does not declare any local CSS variables.
+
+<!-- generated:variables:end -->
+
+## Subcomponents
+
+<!-- generated:subcomponents:start -->
+
+None.
+
+<!-- generated:subcomponents:end -->

package/src/components/capability-gate/capability-gate.css

@@ -0,0 +1,131 @@
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+@layer cinder.components {
+  .cinder-capability-gate {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-2);
+    padding: var(--cinder-space-3);
+    border-radius: var(--cinder-radius-md);
+    border: 1px solid var(--cinder-border);
+    background-color: var(--cinder-surface);
+    color: var(--cinder-text);
+  }
+
+  /* Variant-based color theming */
+  .cinder-capability-gate[data-cinder-variant='error'] {
+    border-color: var(--cinder-color-danger-border);
+    background-color: var(--cinder-color-danger-bg);
+  }
+
+  .cinder-capability-gate[data-cinder-variant='warning'] {
+    border-color: var(--cinder-color-warning-border);
+    background-color: var(--cinder-color-warning-bg);
+  }
+
+  .cinder-capability-gate[data-cinder-variant='success'] {
+    border-color: var(--cinder-color-success-border);
+    background-color: var(--cinder-color-success-bg);
+  }
+
+  /* Banner presentation — full width, less rounding */
+  .cinder-capability-gate[data-cinder-presentation='banner'] {
+    border-radius: var(--cinder-radius-sm);
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  /* Callout presentation — indented, inline */
+  .cinder-capability-gate[data-cinder-presentation='callout'] {
+    border-inline-start-width: 4px;
+    border-radius: 0 var(--cinder-radius-md) var(--cinder-radius-md) 0;
+  }
+
+  .cinder-capability-gate__status {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-1);
+    flex: 1;
+  }
+
+  .cinder-capability-gate__feature {
+    font-weight: 600;
+    font-size: var(--cinder-text-sm);
+    /* No text-transform: `feature` is consumer-owned text — capitalizing it
+       would corrupt names like "MIDI" → "Midi" or "iOS" → "Ios". */
+  }
+
+  .cinder-capability-gate__state-text {
+    font-size: var(--cinder-text-sm);
+    color: var(--cinder-text-muted);
+  }
+
+  .cinder-capability-gate__content {
+    font-size: var(--cinder-text-sm);
+  }
+
+  .cinder-capability-gate__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--cinder-space-1);
+    align-items: center;
+  }
+
+  .cinder-capability-gate__primary,
+  .cinder-capability-gate__fallback,
+  .cinder-capability-gate__dismiss {
+    display: inline-flex;
+    align-items: center;
+    padding: var(--cinder-space-1) var(--cinder-space-2);
+    border-radius: var(--cinder-radius-sm);
+    font-size: var(--cinder-text-sm);
+    font-weight: 500;
+    cursor: pointer;
+    border: 1px solid transparent;
+    text-decoration: none;
+  }
+
+  .cinder-capability-gate__primary {
+    background-color: var(--cinder-accent);
+    color: var(--cinder-accent-contrast);
+    border-color: var(--cinder-accent);
+  }
+
+  @media (hover: hover) {
+    .cinder-capability-gate__primary:hover {
+      background-color: var(--cinder-accent-hover);
+      border-color: var(--cinder-accent-hover);
+    }
+  }
+
+  .cinder-capability-gate__primary:focus-visible,
+  .cinder-capability-gate__fallback:focus-visible,
+  .cinder-capability-gate__dismiss:focus-visible {
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow:
+      0 0 0 var(--cinder-ring-offset) var(--cinder-ring-offset-color),
+      0 0 0 calc(var(--cinder-ring-offset) + var(--cinder-ring-width)) var(--cinder-ring-color);
+  }
+
+  .cinder-capability-gate__fallback {
+    background-color: transparent;
+    color: var(--cinder-text);
+    border-color: var(--cinder-border);
+  }
+
+  @media (hover: hover) {
+    .cinder-capability-gate__fallback:hover {
+      background-color: var(--cinder-surface-raised);
+    }
+  }
+
+  .cinder-capability-gate__dismiss {
+    background-color: transparent;
+    color: var(--cinder-text-muted);
+    margin-inline-start: auto;
+  }
+
+  .cinder-capability-gate__dismiss:hover {
+    color: var(--cinder-text);
+  }
+}

package/src/components/capability-gate/capability-gate.examples.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "../../schemas/examples.schema.json",
+  "component": "capability-gate",
+  "import": "@lostgradient/cinder/capability-gate",
+  "examples": [
+    {
+      "id": "microphone",
+      "title": "Microphone permission gate",
+      "description": "Shows the capability gate in each state for a microphone permission request.",
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { CapabilityGate } from '@lostgradient/cinder/capability-gate';\n  import type { CapabilityGateState } from '@lostgradient/cinder/capability-gate';\n\n  let capabilityState = $state<CapabilityGateState>('permission-needed');\n  const needsAction = $derived(capabilityState === 'permission-needed');\n\n  const states: CapabilityGateState[] = [\n    'supported',\n    'unsupported',\n    'permission-needed',\n    'permission-denied',\n    'loading',\n    'unavailable',\n  ];\n</script>\n\n<div style=\"display: flex; flex-direction: column; gap: 1rem; max-width: 28rem;\">\n  {#if needsAction}\n    <CapabilityGate\n      feature=\"Microphone\"\n      state={capabilityState}\n      primaryAction=\"Allow microphone\"\n      onPrimaryAction={() => {\n        capabilityState = 'supported';\n      }}\n      fallbackAction=\"Use text instead\"\n      onFallbackAction={() => {\n        capabilityState = 'unsupported';\n      }}\n    >\n      <p style=\"font-size: 0.875rem; color: var(--cinder-text-muted); margin: 0;\">\n        Microphone access is needed for voice input. Your audio is never stored or shared.\n      </p>\n    </CapabilityGate>\n  {:else}\n    <CapabilityGate feature=\"Microphone\" state={capabilityState} />\n  {/if}\n\n  <div style=\"display: flex; gap: 0.5rem; flex-wrap: wrap;\">\n    {#each states as s (s)}\n      <Button\n        size=\"sm\"\n        variant={capabilityState === s ? 'secondary' : 'ghost'}\n        onclick={() => {\n          capabilityState = s;\n        }}\n      >\n        {s}\n      </Button>\n    {/each}\n  </div>\n</div>\n"
+    },
+    {
+      "id": "notifications",
+      "title": "Notifications permission gate (banner)",
+      "description": "A banner-style capability gate for browser notifications.",
+      "code": "<script lang=\"ts\">\n  import { CapabilityGate } from '@lostgradient/cinder/capability-gate';\n</script>\n\n<div style=\"display: flex; flex-direction: column; gap: 1rem;\">\n  <CapabilityGate\n    feature=\"Notifications\"\n    state=\"permission-denied\"\n    variant=\"banner\"\n    fallbackAction=\"Enable in settings\"\n    fallbackHref=\"#\"\n    dismissAction=\"Dismiss\"\n  />\n  <CapabilityGate feature=\"Offline storage\" state=\"unsupported\" variant=\"callout\">\n    <p style=\"font-size: 0.875rem; color: var(--cinder-text-muted); margin: 0;\">\n      Your browser does not support offline storage. Some features may be limited.\n    </p>\n  </CapabilityGate>\n</div>\n"
+    }
+  ]
+}

package/src/components/capability-gate/capability-gate.schema.json

@@ -0,0 +1,68 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "type": "object",
+  "properties": {
+    "feature": {
+      "type": "string",
+      "description": "The feature being gated."
+    },
+    "state": {
+      "enum": [
+        "supported",
+        "unsupported",
+        "permission-needed",
+        "permission-denied",
+        "loading",
+        "unavailable"
+      ],
+      "description": "Current availability state."
+    },
+    "variant": {
+      "enum": ["inline", "banner", "callout"],
+      "description": "Presentation variant.",
+      "default": "inline"
+    },
+    "primaryAction": {
+      "type": "string",
+      "description": "Label for the primary action button."
+    },
+    "fallbackAction": {
+      "type": "string",
+      "description": "Label for the fallback action."
+    },
+    "fallbackHref": {
+      "type": "string",
+      "description": "Href for a fallback link."
+    },
+    "dismissAction": {
+      "type": "string",
+      "description": "Label for the dismiss action."
+    },
+    "class": {
+      "type": "string",
+      "description": "Additional class names merged with `.cinder-capability-gate`."
+    }
+  },
+  "additionalProperties": false,
+  "required": ["feature", "state"],
+  "metadata": {
+    "unsupportedProps": [
+      {
+        "name": "children",
+        "reason": "function-or-snippet"
+      },
+      {
+        "name": "onDismiss",
+        "reason": "function-or-snippet"
+      },
+      {
+        "name": "onFallbackAction",
+        "reason": "function-or-snippet"
+      },
+      {
+        "name": "onPrimaryAction",
+        "reason": "function-or-snippet"
+      }
+    ]
+  }
+}

package/src/components/capability-gate/capability-gate.schema.ts

@@ -0,0 +1,72 @@
+import type { ComponentSchema } from '../../schema-types';
+
+const schema = {
+  $schema: 'https://json-schema.org/draft/2020-12/schema',
+  type: 'object',
+  properties: {
+    feature: {
+      type: 'string',
+      description: 'The feature being gated.',
+    },
+    state: {
+      enum: [
+        'supported',
+        'unsupported',
+        'permission-needed',
+        'permission-denied',
+        'loading',
+        'unavailable',
+      ],
+      description: 'Current availability state.',
+    },
+    variant: {
+      enum: ['inline', 'banner', 'callout'],
+      description: 'Presentation variant.',
+      default: 'inline',
+    },
+    primaryAction: {
+      type: 'string',
+      description: 'Label for the primary action button.',
+    },
+    fallbackAction: {
+      type: 'string',
+      description: 'Label for the fallback action.',
+    },
+    fallbackHref: {
+      type: 'string',
+      description: 'Href for a fallback link.',
+    },
+    dismissAction: {
+      type: 'string',
+      description: 'Label for the dismiss action.',
+    },
+    class: {
+      type: 'string',
+      description: 'Additional class names merged with `.cinder-capability-gate`.',
+    },
+  },
+  additionalProperties: false,
+  required: ['feature', 'state'],
+  metadata: {
+    unsupportedProps: [
+      {
+        name: 'children',
+        reason: 'function-or-snippet',
+      },
+      {
+        name: 'onDismiss',
+        reason: 'function-or-snippet',
+      },
+      {
+        name: 'onFallbackAction',
+        reason: 'function-or-snippet',
+      },
+      {
+        name: 'onPrimaryAction',
+        reason: 'function-or-snippet',
+      },
+    ],
+  },
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;