@lostgradient/cinder 0.12.1 → 0.13.0

package/dist/components/segment/index.js

@@ -302,25 +302,69 @@ var rest_excludes = new Set([
   "$$events",
   "$$legacy",
   "value",
+  "href",
+  "download",
+  "target",
+  "rel",
+  "current",
+  "currentToken",
   "disabled",
   "controls",
   "leading",
   "trailing",
   "children",
-  "class"
+  "class",
+  "onclick"
 ]);
 var root = $2.from_html(`<span class="cinder-segmented-control-option-icon" aria-hidden="true"><!></span>`);
 var root_1 = $2.from_html(`<span class="cinder-segmented-control-option-trailing" aria-hidden="true"><!></span>`);
-var root_2 = $2.from_html(`<button><!> <!> <!></button>`);
+var root_2 = $2.from_html(`<!> <!> <!>`, 1);
+var root_3 = $2.from_html(`<a><!></a>`);
+var root_4 = $2.from_html(`<button><!></button>`);
 function Segment($$anchor, $$props) {
   $2.push($$props, true);
-  let disabled = $2.prop($$props, "disabled", 3, false), rest = $2.rest_props($$props, rest_excludes);
+  const content = ($$anchor2) => {
+    var fragment = root_2();
+    var node_1 = $2.first_child(fragment);
+    {
+      var consequent = ($$anchor3) => {
+        var span = root();
+        var node_2 = $2.child(span);
+        $2.snippet(node_2, () => $$props.leading);
+        $2.reset(span);
+        $2.append($$anchor3, span);
+      };
+      $2.if(node_1, ($$render) => {
+        if ($$props.leading)
+          $$render(consequent);
+      });
+    }
+    var node_3 = $2.sibling(node_1, 2);
+    $2.snippet(node_3, () => $$props.children ?? $2.noop);
+    var node_4 = $2.sibling(node_3, 2);
+    {
+      var consequent_1 = ($$anchor3) => {
+        var span_1 = root_1();
+        var node_5 = $2.child(span_1);
+        $2.snippet(node_5, () => $$props.trailing);
+        $2.reset(span_1);
+        $2.append($$anchor3, span_1);
+      };
+      $2.if(node_4, ($$render) => {
+        if ($$props.trailing)
+          $$render(consequent_1);
+      });
+    }
+    $2.append($$anchor2, fragment);
+  };
+  let current = $2.prop($$props, "current", 3, false), currentToken = $2.prop($$props, "currentToken", 3, "page"), disabled = $2.prop($$props, "disabled", 3, false), rest = $2.rest_props($$props, rest_excludes);
   const context = getSegmentedControlContext();
+  const buttonValue = $2.derived(() => $$props.value ?? $$props.href ?? "");
   const registerSegment = (node) => {
     return untrack(() => context.register({
       node,
       get value() {
-        return $$props.value;
+        return $2.get(buttonValue);
       },
       get disabled() {
         return disabled() || context.controlDisabled;
@@ -330,64 +374,83 @@ function Segment($$anchor, $$props) {
       }
     }));
   };
-  const isSelected = $2.derived(() => context.isSelected($$props.value));
-  const isFocusable = $2.derived(() => context.isFocusable($$props.value));
+  const isSelected = $2.derived(() => context.isSelected($2.get(buttonValue)));
+  const isFocusable = $2.derived(() => context.isFocusable($2.get(buttonValue)));
   const effectiveDisabled = $2.derived(() => disabled() || context.controlDisabled);
+  const isNavigationItem = $2.derived(() => context.variant === "navigation");
+  const anchorDisabled = $2.derived(() => $2.get(effectiveDisabled) || $$props.href === undefined);
+  const elementAttributes = $2.derived(() => rest);
+  const anchorTabindex = $2.derived(() => $2.get(anchorDisabled) ? -1 : $2.get(elementAttributes).tabindex);
   const role = $2.derived(() => context.selectionMode === "multiple" ? undefined : context.variant === "tablist" ? "tab" : "radio");
-  var button = root_2();
-  var event_handler = () => context.toggle($$props.value);
-  $2.attribute_effect(button, ($0) => ({
-    ...rest,
-    type: "button",
-    role: $2.get(role),
-    "data-cinder-segment-value": $$props.value,
-    "aria-checked": $2.get(role) === "radio" ? $2.get(isSelected) : undefined,
-    "aria-selected": $2.get(role) === "tab" ? $2.get(isSelected) : undefined,
-    "aria-pressed": context.selectionMode === "multiple" ? $2.get(isSelected) : undefined,
-    "aria-controls": $2.get(role) === "tab" ? $$props.controls : undefined,
-    "aria-disabled": $2.get(effectiveDisabled) ? "true" : undefined,
-    disabled: context.selectionMode === "multiple" ? $2.get(effectiveDisabled) : undefined,
-    tabindex: $2.get(isFocusable) ? 0 : -1,
-    class: $0,
-    "data-cinder-selected": $2.get(isSelected) ? "" : undefined,
-    "data-cinder-pressed": context.selectionMode === "multiple" && $2.get(isSelected) ? "" : undefined,
-    onclick: event_handler
-  }), [
-    () => classNames("cinder-segmented-control-option", $$props.class)
-  ]);
-  var node_1 = $2.child(button);
-  {
-    var consequent = ($$anchor2) => {
-      var span = root();
-      var node_2 = $2.child(span);
-      $2.snippet(node_2, () => $$props.leading);
-      $2.reset(span);
-      $2.append($$anchor2, span);
-    };
-    $2.if(node_1, ($$render) => {
-      if ($$props.leading)
-        $$render(consequent);
-    });
+  function handleAnchorClick(event) {
+    if ($2.get(anchorDisabled)) {
+      event.preventDefault();
+      return;
+    }
+    $$props.onclick?.(event);
   }
-  var node_3 = $2.sibling(node_1, 2);
-  $2.snippet(node_3, () => $$props.children ?? $2.noop);
-  var node_4 = $2.sibling(node_3, 2);
+  var fragment_1 = $2.comment();
+  var node_6 = $2.first_child(fragment_1);
   {
-    var consequent_1 = ($$anchor2) => {
-      var span_1 = root_1();
-      var node_5 = $2.child(span_1);
-      $2.snippet(node_5, () => $$props.trailing);
-      $2.reset(span_1);
-      $2.append($$anchor2, span_1);
+    var consequent_2 = ($$anchor2) => {
+      var a = root_3();
+      $2.attribute_effect(a, ($0) => ({
+        ...$2.get(elementAttributes),
+        href: $2.get(anchorDisabled) ? undefined : $$props.href,
+        download: $$props.download,
+        target: $$props.target,
+        rel: $$props.rel,
+        "data-cinder-segment-value": $2.get(buttonValue),
+        "aria-current": current() ? currentToken() : undefined,
+        "aria-disabled": $2.get(anchorDisabled) ? "true" : undefined,
+        tabindex: $2.get(anchorTabindex),
+        class: $0,
+        "data-cinder-current": current() ? "" : undefined,
+        onclick: handleAnchorClick
+      }), [
+        () => classNames("cinder-segmented-control-option", $$props.class)
+      ]);
+      var node_7 = $2.child(a);
+      content(node_7);
+      $2.reset(a);
+      $2.append($$anchor2, a);
+    };
+    var alternate = ($$anchor2) => {
+      var button = root_4();
+      var event_handler = () => context.toggle($2.get(buttonValue));
+      $2.attribute_effect(button, ($0) => ({
+        ...$2.get(elementAttributes),
+        type: "button",
+        role: $2.get(role),
+        "data-cinder-segment-value": $2.get(buttonValue),
+        "aria-checked": $2.get(role) === "radio" ? $2.get(isSelected) : undefined,
+        "aria-selected": $2.get(role) === "tab" ? $2.get(isSelected) : undefined,
+        "aria-pressed": context.selectionMode === "multiple" ? $2.get(isSelected) : undefined,
+        "aria-controls": $2.get(role) === "tab" ? $$props.controls : undefined,
+        "aria-disabled": $2.get(effectiveDisabled) ? "true" : undefined,
+        disabled: context.selectionMode === "multiple" ? $2.get(effectiveDisabled) : undefined,
+        tabindex: $2.get(isFocusable) ? 0 : -1,
+        class: $0,
+        "data-cinder-selected": $2.get(isSelected) ? "" : undefined,
+        "data-cinder-pressed": context.selectionMode === "multiple" && $2.get(isSelected) ? "" : undefined,
+        onclick: event_handler
+      }), [
+        () => classNames("cinder-segmented-control-option", $$props.class)
+      ]);
+      var node_8 = $2.child(button);
+      content(node_8);
+      $2.reset(button);
+      $2.attach(button, () => registerSegment);
+      $2.append($$anchor2, button);
     };
-    $2.if(node_4, ($$render) => {
-      if ($$props.trailing)
-        $$render(consequent_1);
+    $2.if(node_6, ($$render) => {
+      if ($2.get(isNavigationItem))
+        $$render(consequent_2);
+      else
+        $$render(alternate, -1);
     });
   }
-  $2.reset(button);
-  $2.attach(button, () => registerSegment);
-  $2.append($$anchor, button);
+  $2.append($$anchor, fragment_1);
   $2.pop();
 }
 
@@ -398,4 +461,4 @@ export {
   Segment
 };
 
-//# debugId=CFCFE4C72557F31C64756E2164756E21
+//# debugId=7889F5204BDFFA8464756E2164756E21

package/dist/components/segment/segment.schema.d.ts

@@ -1,3 +1,3 @@
 import type { ComponentSchema } from '../../schema-types';
-declare const _default: ComponentSchema;
-export default _default;
+declare const schema: ComponentSchema;
+export default schema;

package/dist/components/segment/segment.schema.js

@@ -52,54 +52,92 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 });
 
 // src/components/segment/segment.schema.ts
-var schema = {
-  $schema: "https://json-schema.org/draft/2020-12/schema",
-  type: "object",
-  properties: {
-    class: {
-      type: "string",
-      description: "Custom class merged with `.cinder-segmented-control-option`."
+var schema = JSON.parse(`{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "type": "object",
+  "properties": {
+    "class": {
+      "type": "string",
+      "description": "Custom class merged with \`.cinder-segmented-control-option\`."
     },
-    disabled: {
-      type: "boolean",
-      description: "Disable just this segment (independent of the control-level `disabled`)."
+    "disabled": {
+      "type": "boolean",
+      "description": "Disable just this segment (independent of the control-level \`disabled\`)."
     },
-    controls: {
-      type: "string",
-      description: 'ID of the panel this segment controls — only meaningful when the parent\n`SegmentedControl` uses `variant="tablist"`.'
+    "href": {
+      "type": "string",
+      "description": "Render this segment as a real link inside \`SegmentedControl variant=\\"navigation\\"\`."
+    },
+    "current": {
+      "type": "boolean",
+      "description": "Marks this linked segment as the current route/filter."
+    },
+    "currentToken": {
+      "enum": [
+        "page",
+        "step",
+        "location",
+        "date",
+        "time",
+        "true"
+      ],
+      "description": "\`aria-current\` token emitted while \`current\` is true. Defaults to \`\\"page\\"\`."
+    },
+    "value": {
+      "type": "string",
+      "description": "Value this segment represents. Required when \`href\` is not provided."
+    },
+    "controls": {
+      "type": "string",
+      "description": "ID of the panel this segment controls — only meaningful when the parent\\n\`SegmentedControl\` uses \`variant=\\"tablist\\"\`."
     }
   },
-  additionalProperties: false,
-  metadata: {
-    unsupportedProps: [
+  "additionalProperties": false,
+  "metadata": {
+    "unsupportedProps": [
       {
-        name: "children",
-        reason: "function-or-snippet",
-        required: true,
-        description: "The segment's label content."
+        "name": "children",
+        "reason": "function-or-snippet",
+        "required": true,
+        "description": "The segment's label content."
       },
       {
-        name: "leading",
-        reason: "function-or-snippet",
-        description: "Optional decorative content rendered before the label, inside `aria-hidden`."
+        "name": "leading",
+        "reason": "function-or-snippet",
+        "description": "Optional decorative content rendered before the label, inside \`aria-hidden\`."
       },
       {
-        name: "trailing",
-        reason: "function-or-snippet",
-        description: "Optional decorative content rendered after the label, inside `aria-hidden`."
+        "name": "onclick",
+        "reason": "function-or-snippet",
+        "description": "Optional click handler for the rendered link. Disabled navigation segments\\nprevent default and do not call this handler."
       },
       {
-        name: "value",
-        reason: "unknown-shape",
-        required: true,
-        description: "Value this segment represents. Must be unique within the parent control."
+        "name": "trailing",
+        "reason": "function-or-snippet",
+        "description": "Optional decorative content rendered after the label, inside \`aria-hidden\`."
       }
     ]
-  }
-};
+  },
+  "allOf": [
+    {
+      "if": {
+        "not": {
+          "required": [
+            "href"
+          ]
+        }
+      },
+      "then": {
+        "required": [
+          "value"
+        ]
+      }
+    }
+  ]
+}`);
 var segment_schema_default = schema;
 export {
   segment_schema_default as default
 };
 
-//# debugId=B44936DB628401DB64756E2164756E21
+//# debugId=3A6B83E20522836564756E2164756E21

package/dist/components/segment/segment.svelte.d.ts

@@ -2,11 +2,12 @@
  * @cinder
  * @category form
  * @status stable
- * @purpose Individual option inside a SegmentedControl that renders the button, wires the value, and forwards leading/trailing decorations.
+ * @purpose Individual option inside a SegmentedControl that renders either a selection button or a route-backed link with shared segmented styling.
  * @tag form
  * @tag selection
  * @useWhen Authoring SegmentedControl children declaratively so consumers can compose icons, labels, and badges per segment.
  * @useWhen Mixing disabled and enabled segments inside a single radiogroup/tablist where each segment carries its own metadata.
+ * @useWhen Rendering route filters as real links inside `SegmentedControl variant="navigation"`.
  * @avoidWhen Building a standalone toggle button — use Button or Toggle instead.
  * @avoidWhen Selecting one option from a long list — use Select or Combobox instead.
  * @related segmented-control, button, toggle

package/dist/components/segment/segment.types.d.ts

@@ -1,18 +1,11 @@
 import type { Snippet } from 'svelte';
-import type { HTMLButtonAttributes } from 'svelte/elements';
-type SegmentOwnedAttributes = 'role' | 'type' | 'disabled' | 'tabindex' | 'class' | 'aria-checked' | 'aria-selected' | 'aria-pressed' | 'aria-controls' | 'aria-disabled' | 'onclick';
-export type SegmentProps = Omit<HTMLButtonAttributes, SegmentOwnedAttributes> & {
-    /** Value this segment represents. Must be unique within the parent control. */
-    value: string;
+import type { HTMLAnchorAttributes, HTMLAttributes } from 'svelte/elements';
+export type SegmentCurrentToken = 'page' | 'step' | 'location' | 'date' | 'time' | 'true';
+type SharedProps = {
     /** Custom class merged with `.cinder-segmented-control-option`. */
     class?: string | undefined;
     /** Disable just this segment (independent of the control-level `disabled`). */
     disabled?: boolean | undefined;
-    /**
-     * ID of the panel this segment controls — only meaningful when the parent
-     * `SegmentedControl` uses `variant="tablist"`.
-     */
-    controls?: string | undefined;
     /** Optional decorative content rendered before the label, inside `aria-hidden`. */
     leading?: Snippet | undefined;
     /** Optional decorative content rendered after the label, inside `aria-hidden`. */
@@ -20,4 +13,68 @@ export type SegmentProps = Omit<HTMLButtonAttributes, SegmentOwnedAttributes> &
     /** The segment's label content. */
     children: Snippet;
 };
+type SegmentOwnedAttributes = 'role' | 'type' | 'disabled' | 'tabindex' | 'class' | 'href' | 'download' | 'target' | 'rel' | 'aria-checked' | 'aria-selected' | 'aria-pressed' | 'aria-controls' | 'aria-disabled' | 'aria-current' | 'onclick';
+type SharedElementAttributes = Omit<HTMLAttributes<HTMLElement>, SegmentOwnedAttributes>;
+type SegmentButtonProps = SharedElementAttributes & SharedProps & {
+    href?: undefined;
+    download?: undefined;
+    target?: undefined;
+    rel?: undefined;
+    current?: undefined;
+    currentToken?: undefined;
+    onclick?: undefined;
+    /** Value this segment represents. Must be unique within the parent control. */
+    value: string;
+    /**
+     * ID of the panel this segment controls — only meaningful when the parent
+     * `SegmentedControl` uses `variant="tablist"`.
+     */
+    controls?: string | undefined;
+};
+type SegmentAnchorProps = SharedElementAttributes & SharedProps & {
+    /** Render this segment as a real link inside `SegmentedControl variant="navigation"`. */
+    href: string;
+    /** Download hint for the rendered link. */
+    download?: boolean | string | undefined;
+    /** Browsing context for the rendered link. */
+    target?: HTMLAnchorAttributes['target'] | undefined;
+    /** Relationship metadata for the rendered link. */
+    rel?: HTMLAnchorAttributes['rel'] | undefined;
+    /** Optional tab index for enabled links. Disabled navigation links force `-1`. */
+    tabindex?: HTMLAttributes<HTMLElement>['tabindex'] | undefined;
+    /**
+     * Optional click handler for the rendered link. Disabled navigation segments
+     * prevent default and do not call this handler.
+     */
+    onclick?: ((event: MouseEvent) => void) | undefined;
+    /** Marks this linked segment as the current route/filter. */
+    current?: boolean | undefined;
+    /** `aria-current` token emitted while `current` is true. Defaults to `"page"`. */
+    currentToken?: SegmentCurrentToken | undefined;
+    /** Optional value for consumer metadata; navigation segments do not bind selection state. */
+    value?: string | undefined;
+    /** Panel controls apply only to tab segments, not navigation links. */
+    controls?: undefined;
+};
+export type SegmentProps = SegmentButtonProps | SegmentAnchorProps;
+/** Schema generator surface for Segment's cinder-specific, JSON-expressible props. */
+export interface SegmentSchemaProps {
+    /** Custom class merged with `.cinder-segmented-control-option`. */
+    class?: string | undefined;
+    /** Disable just this segment (independent of the control-level `disabled`). */
+    disabled?: boolean | undefined;
+    /** Render this segment as a real link inside `SegmentedControl variant="navigation"`. */
+    href?: string | undefined;
+    /** Marks this linked segment as the current route/filter. */
+    current?: boolean | undefined;
+    /** `aria-current` token emitted while `current` is true. Defaults to `"page"`. */
+    currentToken?: SegmentCurrentToken | undefined;
+    /** Value this segment represents. Required when `href` is not provided. */
+    value?: string | undefined;
+    /**
+     * ID of the panel this segment controls — only meaningful when the parent
+     * `SegmentedControl` uses `variant="tablist"`.
+     */
+    controls?: string | undefined;
+}
 export {};