@fusion.dev/helix-headless 0.133.1 → 0.135.0

package/custom-elements.json

@@ -77814,7 +77814,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Renders a real `<nav>`, the landmark that screen reader users jump to.\nNavigation is its own component, separate from `AppHeader`, so you can use it\nin a header, a footer, or a sidebar.\n\n**It renders no links.** Bring your own, mark the current one with\n`aria-current=\"page\"`, and style them with the `data-navigation-item` recipe.\nA router renders its own anchors and cannot render them inside the\ncomponent's shadow root.\n\nThe component moves a marker to the current item. It finds the current item\nby reading `aria-current`, so the attribute that screen readers announce also\nplaces the marker.",
+          "description": "Renders a real `<nav>`, the landmark that screen reader users jump to.\nNavigation is its own component, separate from `AppHeader`, so you can use it\nin a header, a footer, or a sidebar.\n\n**It renders no links.** Bring your own, mark the current one with\n`aria-current=\"page\"`, and style them with the `data-navigation-item` recipe.\nA router renders its own anchors and cannot render them inside the\ncomponent's shadow root.\n\nThe component moves a marker to the current item. It finds the current item\nby reading `aria-current`, so the attribute that screen readers announce also\nplaces the marker.\n\nSet `orientation=\"vertical\"` to stack the destinations in a column, for a\nsidebar.",
           "name": "HelixHeadlessNavigation",
           "cssParts": [
             {
@@ -77850,6 +77850,16 @@
               "description": "The landmark's name, read by screen readers.",
               "attribute": "label"
             },
+            {
+              "kind": "field",
+              "name": "orientation",
+              "type": {
+                "text": "'vertical' | undefined"
+              },
+              "description": "Stacks the destinations in a column, for a sidebar, where unset is a row\nfor a header or a footer. The marker follows the current destination down\nthe column as it does along the row.",
+              "attribute": "orientation",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "current",
@@ -78213,6 +78223,14 @@
               "default": "'Main'",
               "description": "The landmark's name, read by screen readers.",
               "fieldName": "label"
+            },
+            {
+              "name": "orientation",
+              "type": {
+                "text": "'vertical' | undefined"
+              },
+              "description": "Stacks the destinations in a column, for a sidebar, where unset is a row\nfor a header or a footer. The marker follows the current destination down\nthe column as it does along the row.",
+              "fieldName": "orientation"
             }
           ],
           "superclass": {

package/dist/navigation/root/navigation-root.d.ts

@@ -17,6 +17,9 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * by reading `aria-current`, so the attribute that screen readers announce also
  * places the marker.
  *
+ * Set `orientation="vertical"` to stack the destinations in a column, for a
+ * sidebar.
+ *
  * @since 0.1.0
  * @status stable
  * @category navigation
@@ -34,6 +37,12 @@ export declare class HelixHeadlessNavigation extends HelixElement {
      * The landmark's name, read by screen readers.
      */
     label: string;
+    /**
+     * Stacks the destinations in a column, for a sidebar, where unset is a row
+     * for a header or a footer. The marker follows the current destination down
+     * the column as it does along the row.
+     */
+    orientation?: 'vertical';
     private current;
     /** The destinations the consumer slotted. */
     private get items();

package/dist/navigation/root/navigation-root.js

@@ -54,6 +54,9 @@ let HelixHeadlessNavigation = class HelixHeadlessNavigation extends HelixElement
 __decorate([
     property()
 ], HelixHeadlessNavigation.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessNavigation.prototype, "orientation", void 0);
 HelixHeadlessNavigation = __decorate([
     customElement('helix-headless-navigation')
 ], HelixHeadlessNavigation);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-headless",
   "description": "Headless component tier. Structure, accessibility, state, and form participation. No styling.",
-  "version": "0.133.1",
+  "version": "0.135.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -46,13 +46,13 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.133.1",
-    "@fusion.dev/helix-icons": "0.133.1",
+    "@fusion.dev/helix-core": "0.135.0",
+    "@fusion.dev/helix-icons": "0.135.0",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.133.1",
-    "@fusion.dev/helix-testing": "0.133.1",
+    "@fusion.dev/helix-cem": "0.135.0",
+    "@fusion.dev/helix-testing": "0.135.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",

package/types/jsx.d.ts

@@ -14280,11 +14280,19 @@ fair summary of a task and a poor one of a quantity. */
 export type HelixHeadlessNavigationProps = {
   /** The landmark's name, read by screen readers. */
   label?: (HelixHeadlessNavigation["label"]) | undefined;
+  /** Stacks the destinations in a column, for a sidebar, where unset is a row
+for a header or a footer. The marker follows the current destination down
+the column as it does along the row. */
+  orientation?: (HelixHeadlessNavigation["orientation"]) | undefined;
 };
 
 export type HelixHeadlessNavigationSolidJsProps = {
   /** The landmark's name, read by screen readers. */
   "prop:label"?: (HelixHeadlessNavigation["label"]) | undefined;
+  /** Stacks the destinations in a column, for a sidebar, where unset is a row
+for a header or a footer. The marker follows the current destination down
+the column as it does along the row. */
+  "prop:orientation"?: (HelixHeadlessNavigation["orientation"]) | undefined;
 
   /** Set the innerHTML of the element */
   innerHTML?: (string) | undefined;
@@ -35262,11 +35270,17 @@ export type CustomElements = {
    * by reading `aria-current`, so the attribute that screen readers announce also
    * places the marker.
    *
+   * Set `orientation="vertical"` to stack the destinations in a column, for a
+   * sidebar.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
    * - `label`: The landmark's name, read by screen readers.
+   * - `orientation`: Stacks the destinations in a column, for a sidebar, where unset is a row
+   * for a header or a footer. The marker follows the current destination down
+   * the column as it does along the row.
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -55751,11 +55765,17 @@ export type CustomElementsSolidJs = {
    * by reading `aria-current`, so the attribute that screen readers announce also
    * places the marker.
    *
+   * Set `orientation="vertical"` to stack the destinations in a column, for a
+   * sidebar.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
    * - `label`: The landmark's name, read by screen readers.
+   * - `orientation`: Stacks the destinations in a column, for a sidebar, where unset is a row
+   * for a header or a footer. The marker follows the current destination down
+   * the column as it does along the row.
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by

package/types/vue.d.ts

@@ -7317,6 +7317,10 @@ export type HelixHeadlessMeterVueEvents = {};
 export type HelixHeadlessNavigationVueProps = {
   /** The landmark's name, read by screen readers. */
   label?: (HelixHeadlessNavigation["label"]) | undefined;
+  /** Stacks the destinations in a column, for a sidebar, where unset is a row
+for a header or a footer. The marker follows the current destination down
+the column as it does along the row. */
+  orientation?: (HelixHeadlessNavigation["orientation"]) | undefined;
 };
 
 export type HelixHeadlessNavigationVueEvents = {};
@@ -12651,7 +12655,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessMeterVueProps,
     HelixHeadlessMeterVueEvents
   >;
-  /** Renders a real '<nav>', the landmark that screen reader users jump to. Navigation is its own component, separate from 'AppHeader', so you can use it in a header, a footer, or a sidebar.  **It renders no links.** Bring your own, mark the current one with 'aria-current="page"', and style them with the 'data-navigation-item' recipe. A router renders its own anchors and cannot render them inside the component's shadow root.  The component moves a marker to the current item. It finds the current item by reading 'aria-current', so the attribute that screen readers announce also places the marker. */
+  /** Renders a real '<nav>', the landmark that screen reader users jump to. Navigation is its own component, separate from 'AppHeader', so you can use it in a header, a footer, or a sidebar.  **It renders no links.** Bring your own, mark the current one with 'aria-current="page"', and style them with the 'data-navigation-item' recipe. A router renders its own anchors and cannot render them inside the component's shadow root.  The component moves a marker to the current item. It finds the current item by reading 'aria-current', so the attribute that screen readers announce also places the marker.  Set 'orientation="vertical"' to stack the destinations in a column, for a sidebar. */
   "helix-headless-navigation": DefineCustomElement<
     HelixHeadlessNavigation,
     HelixHeadlessNavigationVueProps,