@fusion.dev/helix-headless 0.114.0 → 0.115.0

package/custom-elements.json

@@ -62448,9 +62448,28 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`connectMap` fills the shape as a layer of the map, under its place names.\nThe frame lists each area by its `label` and `description` for screen\nreaders.",
+          "description": "`connectMap` fills the shape as a layer of the map, under its place names.\nThe frame lists each area by its `label` and `description` for screen\nreaders.\n\nSet `caption` to draw words on the map with the area, such as a letter for a\nsearch sector, in a color that reads on the map. It is drawn rather than\nfocusable, so it adds nothing to the tab order, and a screen reader reads\nthe area's `label` in the frame's list.",
           "name": "HelixHeadlessMapArea",
           "members": [
+            {
+              "kind": "field",
+              "name": "caption",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Words drawn on the map with the area, such as `A` for a search sector.\nUnset, nothing is drawn. Keep it short: it is a caption on a map, and the\narea's `label` is what a screen reader hears.",
+              "attribute": "caption"
+            },
+            {
+              "kind": "field",
+              "name": "captionPlacement",
+              "type": {
+                "text": "'inside' | 'outside'"
+              },
+              "default": "'inside'",
+              "description": "Where the caption stands. `inside`, the default, at the point of the area\nfurthest from its edges. `outside`, just above the area's northernmost\npoint, clear of the shape, for an area whose caption would cover what is\nin it.",
+              "attribute": "caption-placement"
+            },
             {
               "kind": "field",
               "name": "description",
@@ -62834,6 +62853,23 @@
             }
           ],
           "attributes": [
+            {
+              "name": "caption",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Words drawn on the map with the area, such as `A` for a search sector.\nUnset, nothing is drawn. Keep it short: it is a caption on a map, and the\narea's `label` is what a screen reader hears.",
+              "fieldName": "caption"
+            },
+            {
+              "name": "caption-placement",
+              "type": {
+                "text": "'inside' | 'outside'"
+              },
+              "default": "'inside'",
+              "description": "Where the caption stands. `inside`, the default, at the point of the area\nfurthest from its edges. `outside`, just above the area's northernmost\npoint, clear of the shape, for an area whose caption would cover what is\nin it.",
+              "fieldName": "captionPlacement"
+            },
             {
               "name": "description",
               "type": {

package/dist/map/area/map-area.d.ts

@@ -9,6 +9,11 @@ import { type MapPoint } from '../route/map-route.js';
  * The frame lists each area by its `label` and `description` for screen
  * readers.
  *
+ * Set `caption` to draw words on the map with the area, such as a letter for a
+ * search sector, in a color that reads on the map. It is drawn rather than
+ * focusable, so it adds nothing to the tab order, and a screen reader reads
+ * the area's `label` in the frame's list.
+ *
  * @since 0.105.0
  * @status experimental
  * @category media
@@ -18,6 +23,19 @@ import { type MapPoint } from '../route/map-route.js';
  * @event {HelixMapPartChangeEvent} helix-map-part-change - The area's points, name, or color changed. Used by `connectMap`; pages do not need to listen for it.
  */
 export declare class HelixHeadlessMapArea extends HelixElement {
+    /**
+     * Words drawn on the map with the area, such as `A` for a search sector.
+     * Unset, nothing is drawn. Keep it short: it is a caption on a map, and the
+     * area's `label` is what a screen reader hears.
+     */
+    caption?: string;
+    /**
+     * Where the caption stands. `inside`, the default, at the point of the area
+     * furthest from its edges. `outside`, just above the area's northernmost
+     * point, clear of the shape, for an area whose caption would cover what is
+     * in it.
+     */
+    captionPlacement: 'inside' | 'outside';
     /** More about the area. Read after its label in the frame's list. */
     description?: string;
     /**

package/dist/map/area/map-area.js

@@ -11,6 +11,7 @@ import { pointsConverter } from '../route/map-route.js';
 let HelixHeadlessMapArea = class HelixHeadlessMapArea extends HelixElement {
     constructor() {
         super(...arguments);
+        this.captionPlacement = 'inside';
         this.isMapLayer = true;
         this.layerKind = 'area';
         this.label = 'Area';
@@ -23,6 +24,12 @@ let HelixHeadlessMapArea = class HelixHeadlessMapArea extends HelixElement {
         return nothing;
     }
 };
+__decorate([
+    property()
+], HelixHeadlessMapArea.prototype, "caption", void 0);
+__decorate([
+    property({ attribute: 'caption-placement' })
+], HelixHeadlessMapArea.prototype, "captionPlacement", void 0);
 __decorate([
     property()
 ], HelixHeadlessMapArea.prototype, "description", void 0);

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.114.0",
+  "version": "0.115.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.114.0",
-    "@fusion.dev/helix-icons": "0.114.0",
+    "@fusion.dev/helix-core": "0.115.0",
+    "@fusion.dev/helix-icons": "0.115.0",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.114.0",
-    "@fusion.dev/helix-testing": "0.114.0",
+    "@fusion.dev/helix-cem": "0.115.0",
+    "@fusion.dev/helix-testing": "0.115.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

@@ -11474,6 +11474,20 @@ export type HelixHeadlessMapAreaHelixMapPartChangeElementEvent =
   HelixHeadlessMapAreaElementEvent<HelixMapPartChangeEvent>;
 
 export type HelixHeadlessMapAreaProps = {
+  /** Words drawn on the map with the area, such as `A` for a search sector.
+Unset, nothing is drawn. Keep it short: it is a caption on a map, and the
+area's `label` is what a screen reader hears. */
+  caption?: (HelixHeadlessMapArea["caption"]) | undefined;
+  /** Where the caption stands. `inside`, the default, at the point of the area
+furthest from its edges. `outside`, just above the area's northernmost
+point, clear of the shape, for an area whose caption would cover what is
+in it. */
+  "caption-placement"?: (HelixHeadlessMapArea["captionPlacement"]) | undefined;
+  /** Where the caption stands. `inside`, the default, at the point of the area
+furthest from its edges. `outside`, just above the area's northernmost
+point, clear of the shape, for an area whose caption would cover what is
+in it. */
+  captionPlacement?: (HelixHeadlessMapArea["captionPlacement"]) | undefined;
   /** More about the area. Read after its label in the frame's list. */
   description?: (HelixHeadlessMapArea["description"]) | undefined;
   /** A name this layer shares with other layers, such as a route and its
@@ -11494,6 +11508,20 @@ first. */
 };
 
 export type HelixHeadlessMapAreaSolidJsProps = {
+  /** Words drawn on the map with the area, such as `A` for a search sector.
+Unset, nothing is drawn. Keep it short: it is a caption on a map, and the
+area's `label` is what a screen reader hears. */
+  "prop:caption"?: (HelixHeadlessMapArea["caption"]) | undefined;
+  /** Where the caption stands. `inside`, the default, at the point of the area
+furthest from its edges. `outside`, just above the area's northernmost
+point, clear of the shape, for an area whose caption would cover what is
+in it. */
+  "attr:caption-placement"?: (HelixHeadlessMapArea["captionPlacement"]) | undefined;
+  /** Where the caption stands. `inside`, the default, at the point of the area
+furthest from its edges. `outside`, just above the area's northernmost
+point, clear of the shape, for an area whose caption would cover what is
+in it. */
+  "prop:captionPlacement"?: (HelixHeadlessMapArea["captionPlacement"]) | undefined;
   /** More about the area. Read after its label in the frame's list. */
   "prop:description"?: (HelixHeadlessMapArea["description"]) | undefined;
   /** A name this layer shares with other layers, such as a route and its
@@ -32495,10 +32523,22 @@ export type CustomElements = {
    * The frame lists each area by its `label` and `description` for screen
    * readers.
    *
+   * Set `caption` to draw words on the map with the area, such as a letter for a
+   * search sector, in a color that reads on the map. It is drawn rather than
+   * focusable, so it adds nothing to the tab order, and a screen reader reads
+   * the area's `label` in the frame's list.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
+   * - `caption`: Words drawn on the map with the area, such as `A` for a search sector.
+   * Unset, nothing is drawn. Keep it short: it is a caption on a map, and the
+   * area's `label` is what a screen reader hears.
+   * - `caption-placement`/`captionPlacement`: Where the caption stands. `inside`, the default, at the point of the area
+   * furthest from its edges. `outside`, just above the area's northernmost
+   * point, clear of the shape, for an area whose caption would cover what is
+   * in it.
    * - `description`: More about the area. Read after its label in the frame's list.
    * - `group`: A name this layer shares with other layers, such as a route and its
    * dotted legs. The layers menu shows layers in the same group as one entry,
@@ -52564,10 +52604,22 @@ export type CustomElementsSolidJs = {
    * The frame lists each area by its `label` and `description` for screen
    * readers.
    *
+   * Set `caption` to draw words on the map with the area, such as a letter for a
+   * search sector, in a color that reads on the map. It is drawn rather than
+   * focusable, so it adds nothing to the tab order, and a screen reader reads
+   * the area's `label` in the frame's list.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
+   * - `caption`: Words drawn on the map with the area, such as `A` for a search sector.
+   * Unset, nothing is drawn. Keep it short: it is a caption on a map, and the
+   * area's `label` is what a screen reader hears.
+   * - `caption-placement`/`captionPlacement`: Where the caption stands. `inside`, the default, at the point of the area
+   * furthest from its edges. `outside`, just above the area's northernmost
+   * point, clear of the shape, for an area whose caption would cover what is
+   * in it.
    * - `description`: More about the area. Read after its label in the frame's list.
    * - `group`: A name this layer shares with other layers, such as a route and its
    * dotted legs. The layers menu shows layers in the same group as one entry,

package/types/vue.d.ts

@@ -5872,6 +5872,20 @@ export type HelixHeadlessMapAreaHelixMapPartChangeElementEvent =
   HelixHeadlessMapAreaElementEvent<HelixMapPartChangeEvent>;
 
 export type HelixHeadlessMapAreaVueProps = {
+  /** Words drawn on the map with the area, such as `A` for a search sector.
+Unset, nothing is drawn. Keep it short: it is a caption on a map, and the
+area's `label` is what a screen reader hears. */
+  caption?: (HelixHeadlessMapArea["caption"]) | undefined;
+  /** Where the caption stands. `inside`, the default, at the point of the area
+furthest from its edges. `outside`, just above the area's northernmost
+point, clear of the shape, for an area whose caption would cover what is
+in it. */
+  "caption-placement"?: (HelixHeadlessMapArea["captionPlacement"]) | undefined;
+  /** Where the caption stands. `inside`, the default, at the point of the area
+furthest from its edges. `outside`, just above the area's northernmost
+point, clear of the shape, for an area whose caption would cover what is
+in it. */
+  captionPlacement?: (HelixHeadlessMapArea["captionPlacement"]) | undefined;
   /** More about the area. Read after its label in the frame's list. */
   description?: (HelixHeadlessMapArea["description"]) | undefined;
   /** A name this layer shares with other layers, such as a route and its
@@ -12140,7 +12154,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessLoaderVueProps,
     HelixHeadlessLoaderVueEvents
   >;
-  /** 'connectMap' fills the shape as a layer of the map, under its place names. The frame lists each area by its 'label' and 'description' for screen readers. */
+  /** 'connectMap' fills the shape as a layer of the map, under its place names. The frame lists each area by its 'label' and 'description' for screen readers.  Set 'caption' to draw words on the map with the area, such as a letter for a search sector, in a color that reads on the map. It is drawn rather than focusable, so it adds nothing to the tab order, and a screen reader reads the area's 'label' in the frame's list. */
   "helix-headless-map-area": DefineCustomElement<
     HelixHeadlessMapArea,
     HelixHeadlessMapAreaVueProps,