@orange-halo/components 2.1.0 → 3.0.0

package/dist/oh-select.js

@@ -1,31 +1,31 @@
 /**
  * oh-select
  *
- * A chunky, playful dropdown select with hand-crafted feel.
- * Custom-styled dropdown (not native) for full visual control.
+ * A custom dropdown select (not a native <select>), so the trigger and the
+ * list can be styled with tokens.
  *
  * DESIGN DECISIONS:
  * ─────────────────
- * 1. CHUNKY & TACTILE
- *    - Thick border (stroke.control)
- *    - Offset shadow (sticker effect like button)
- *    - shape.control corners
- *    - Solid warm fills
+ * 1. TRIGGER
+ *    - A <button role="combobox">, with the same tokens as the other
+ *      controls: stroke.control border in color.border.emphasis,
+ *      shape.control corners, an outset shadow offset by
+ *      elevation.offset.lg in elevation.color.secondary
+ *    - Hover and press move it by lift.hoverMd / lift.pressSm, like oh-button
  *
  * 2. DROPDOWN PANEL
- *    - Appears below trigger with shadow
- *    - Options have hover/focus states
- *    - Selected option highlighted
- *    - Smooth open/close animation
+ *    - A listbox below the trigger, on color.surface.highlight with
+ *      shape.container corners
+ *    - The highlighted option is underlined; the selected option is marked
+ *      in color.brand.primary and set in typography.emphasis.fontWeight
+ *    - Opens and closes with a transition (none under reduced motion)
  *
  * 3. ACCESSIBILITY
- *    - role="combobox" with proper ARIA
- *    - Keyboard navigation (arrows, enter, escape, home, end)
+ *    - role="combobox" with aria-expanded, aria-controls and
+ *      aria-activedescendant; focus stays on the trigger
+ *    - Keyboard navigation (arrows, Enter, Space, Escape, Home, End, Tab)
  *    - Type-ahead search
- *    - Focus management
  *    - Label always required
- *
- * @element oh-select
  */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -36,6 +36,48 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, css, nothing } from "lit";
 import { customElement, property, state, query } from "lit/decorators.js";
 import { OhElement, baseStyles } from "./base.js";
+/**
+ * A dropdown for choosing one option from a list.
+ *
+ * **Use it for** one choice from a list too long to show every option.
+ * **Don't use it for** a few options (use `oh-radio-group`, which shows them
+ * all), several choices (use `oh-checkbox-group`) or free text (use
+ * `oh-input` with `suggestions`).
+ *
+ * **Parts:** a trigger showing the selected option's label (or
+ * `placeholder`), and a list of `options` (`{ label, value }`). One size.
+ * **States:** rest, hover, active, focus, open, error (set `error-text`),
+ * required.
+ *
+ * **Behaviour:** click the trigger, or press Enter, Space or an arrow key,
+ * to open the list. Arrow keys, Home and End move the highlight, Enter or
+ * Space selects, Escape and Tab close, and clicking outside closes. Typing
+ * letters jumps to a matching option (and selects it while the list is
+ * closed). Selecting sets `value`, returns focus to the trigger and fires
+ * `oh-change`. It isn't form-associated: it doesn't submit with a native
+ * form, so read `value` or listen for `oh-change`. It has no `disabled`
+ * property.
+ *
+ * **Accessibility:** the trigger is a `combobox` controlling a `listbox`,
+ * with `aria-activedescendant` for the highlighted option, so focus stays
+ * on the trigger. Always set `label`: it names the trigger and the list.
+ * The error shows after the label and before the trigger, with an icon, sets
+ * `aria-invalid` and is linked with `aria-describedby`; it's announced
+ * (`role="alert"`) only when it appears after first render. Focus is a
+ * solid underline on the trigger text.
+ *
+ * **Look:** set by tokens — `stroke.control` in `color.border.emphasis`
+ * (border), `shape.control` (trigger corners), `shape.container` (list
+ * corners), `typography.control.*` (type), `elevation.offset.*` and
+ * `elevation.color.secondary` (shadow), `lift.hoverMd` / `lift.pressSm` (movement
+ * on hover and press), `color.border.hover` (hover), `focus.ringColor` and
+ * `color.surface.highlight` (open), `color.surface.hover` and
+ * `color.brand.primary` (selected option), `color.feedback.error` and
+ * `elevation.color.error` (error).
+ *
+ * @element oh-select
+ * @fires oh-change - An option was selected. detail: { value }
+ */
 let OhSelect = class OhSelect extends OhElement {
     constructor() {
         super(...arguments);
@@ -53,6 +95,7 @@ let OhSelect = class OhSelect extends OhElement {
         this._labelId = `oh-select-label-${Math.random().toString(36).substr(2, 9)}`;
         this._listboxId = `oh-select-listbox-${Math.random().toString(36).substr(2, 9)}`;
         this._errorId = `oh-select-error-${Math.random().toString(36).substr(2, 9)}`;
+        this._helperId = `oh-select-helper-${Math.random().toString(36).substr(2, 9)}`;
         this._typeaheadBuffer = "";
         this._typeaheadTimeout = null;
         this._handleClickOutside = (event) => {
@@ -70,11 +113,6 @@ let OhSelect = class OhSelect extends OhElement {
     static { this.styles = [
         baseStyles,
         css `
-      /* ═══════════════════════════════════════════════════════════════
-         ORANGE HALO SELECT
-         Chunky • Playful • Tactile Dropdown
-         ═══════════════════════════════════════════════════════════════ */
-
       :host {
         display: block;
         position: relative;
@@ -113,25 +151,26 @@ let OhSelect = class OhSelect extends OhElement {
         width: 100%;
         min-height: var(--oh-input-size-md-min-height);
         padding: var(--oh-spacing-3) var(--oh-spacing-4);
-        
+
         font-family: var(--oh-typography-control-font-family);
         font-size: var(--oh-typography-control-font-size-md);
         color: var(--oh-color-text-primary);
         text-align: left;
-        
+
         background-color: var(--oh-color-surface-base);
         border: var(--oh-stroke-control) solid var(--oh-color-border-emphasis);
         border-radius: var(--oh-shape-control);
-        box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg) 0 0 var(--oh-shadow-secondary);
-        
+        box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
+          0 0 var(--oh-elevation-color-secondary);
+
         cursor: pointer;
         -webkit-appearance: none;
         -moz-appearance: none;
         appearance: none;
-        
-        transition: 
-          transform var(--oh-motion-snappy) var(--oh-motion-ease-playful),
-          box-shadow var(--oh-motion-snappy) var(--oh-motion-ease-playful),
+
+        transition:
+          transform var(--oh-motion-snappy) var(--oh-motion-ease-emphasized),
+          box-shadow var(--oh-motion-snappy) var(--oh-motion-ease-emphasized),
           border-color var(--oh-motion-snappy) ease,
           background-color var(--oh-motion-quick) ease;
       }
@@ -168,12 +207,14 @@ let OhSelect = class OhSelect extends OhElement {
       .trigger:hover {
         border-color: var(--oh-color-border-hover);
         transform: translate(var(--oh-lift-hover-md), var(--oh-lift-hover-md));
-        box-shadow: var(--oh-elevation-offset-2xl) var(--oh-elevation-offset-2xl) 0 0 var(--oh-shadow-secondary);
+        box-shadow: var(--oh-elevation-offset-2xl)
+          var(--oh-elevation-offset-2xl) 0 0 var(--oh-elevation-color-secondary);
       }
 
       .trigger:active {
         transform: translate(var(--oh-lift-press-sm), var(--oh-lift-press-sm));
-        box-shadow: var(--oh-elevation-offset-sm) var(--oh-elevation-offset-sm) 0 0 var(--oh-shadow-secondary);
+        box-shadow: var(--oh-elevation-offset-sm) var(--oh-elevation-offset-sm)
+          0 0 var(--oh-elevation-color-secondary);
       }
 
       .trigger--open {
@@ -181,7 +222,7 @@ let OhSelect = class OhSelect extends OhElement {
         background-color: var(--oh-color-surface-highlight);
       }
 
-      /* Focus: underline trigger text (accessible indicator, like button) */
+      /* Focus: underline the trigger text (a solid indicator, like oh-button) */
       .trigger:focus {
         outline: none;
       }
@@ -208,21 +249,22 @@ let OhSelect = class OhSelect extends OhElement {
         right: 0;
         z-index: var(--oh-z-index-dropdown);
         margin-top: var(--oh-spacing-1);
-        
+
         background-color: var(--oh-color-surface-highlight);
         border: var(--oh-stroke-control) solid var(--oh-color-border-emphasis);
         border-radius: var(--oh-shape-container);
-        box-shadow: var(--oh-elevation-offset-2xl) var(--oh-elevation-offset-2xl) 0 0 var(--oh-shadow-secondary);
-        
+        box-shadow: var(--oh-elevation-offset-2xl)
+          var(--oh-elevation-offset-2xl) 0 0 var(--oh-elevation-color-secondary);
+
         max-height: 0;
         overflow: hidden;
         opacity: 0;
         transform: translateY(-8px);
-        
-        transition: 
+
+        transition:
           max-height var(--oh-motion-gentle) ease,
           opacity var(--oh-motion-snappy) ease,
-          transform var(--oh-motion-snappy) var(--oh-motion-ease-playful);
+          transform var(--oh-motion-snappy) var(--oh-motion-ease-emphasized);
       }
 
       .dropdown--open {
@@ -244,11 +286,11 @@ let OhSelect = class OhSelect extends OhElement {
         align-items: center;
         gap: var(--oh-spacing-3);
         padding: var(--oh-spacing-3) var(--oh-spacing-4);
-        
+
         font-family: var(--oh-typography-control-font-family);
         font-size: var(--oh-typography-control-font-size-md);
         color: var(--oh-color-text-primary);
-        
+
         cursor: pointer;
         transition: background-color var(--oh-motion-quick) ease;
       }
@@ -270,7 +312,7 @@ let OhSelect = class OhSelect extends OhElement {
       }
 
       .option--selected::before {
-        content: '';
+        content: "";
         width: 8px;
         height: 8px;
         background-color: var(--oh-color-brand-primary);
@@ -284,12 +326,14 @@ let OhSelect = class OhSelect extends OhElement {
 
       .trigger--error {
         border-color: var(--oh-color-feedback-error);
-        box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg) 0 0 var(--oh-shadow-error);
+        box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
+          0 0 var(--oh-elevation-color-error);
       }
 
       .trigger--error:hover {
         border-color: var(--oh-color-feedback-error-hover);
-        box-shadow: var(--oh-elevation-offset-2xl) var(--oh-elevation-offset-2xl) 0 0 var(--oh-shadow-error);
+        box-shadow: var(--oh-elevation-offset-2xl)
+          var(--oh-elevation-offset-2xl) 0 0 var(--oh-elevation-color-error);
       }
 
       .helper {
@@ -329,11 +373,11 @@ let OhSelect = class OhSelect extends OhElement {
     `,
     ]; }
     get _selectedOption() {
-        return this.options.find(opt => opt.value === this.value);
+        return this.options.find((opt) => opt.value === this.value);
     }
     _open_dropdown() {
         this._open = true;
-        this._highlightedIndex = this.options.findIndex(opt => opt.value === this.value);
+        this._highlightedIndex = this.options.findIndex((opt) => opt.value === this.value);
         if (this._highlightedIndex === -1 && this.options.length > 0) {
             this._highlightedIndex = 0;
         }
@@ -431,7 +475,7 @@ let OhSelect = class OhSelect extends OhElement {
         this._typeaheadTimeout = window.setTimeout(() => {
             this._typeaheadBuffer = "";
         }, 500);
-        const matchIndex = this.options.findIndex(opt => opt.label.toLowerCase().startsWith(this._typeaheadBuffer));
+        const matchIndex = this.options.findIndex((opt) => opt.label.toLowerCase().startsWith(this._typeaheadBuffer));
         if (matchIndex >= 0) {
             if (this._open) {
                 this._highlightedIndex = matchIndex;
@@ -450,9 +494,10 @@ let OhSelect = class OhSelect extends OhElement {
     _highlightPrevious() {
         if (this.options.length === 0)
             return;
-        this._highlightedIndex = this._highlightedIndex <= 0
-            ? this.options.length - 1
-            : this._highlightedIndex - 1;
+        this._highlightedIndex =
+            this._highlightedIndex <= 0
+                ? this.options.length - 1
+                : this._highlightedIndex - 1;
         this._scrollToHighlighted();
     }
     _highlightFirst() {
@@ -469,8 +514,8 @@ let OhSelect = class OhSelect extends OhElement {
     }
     _scrollToHighlighted() {
         requestAnimationFrame(() => {
-            const highlighted = this._listbox?.querySelector('.option--highlighted');
-            highlighted?.scrollIntoView({ block: 'nearest' });
+            const highlighted = this._listbox?.querySelector(".option--highlighted");
+            highlighted?.scrollIntoView({ block: "nearest" });
         });
     }
     _handleOptionClick(option, event) {
@@ -494,14 +539,14 @@ let OhSelect = class OhSelect extends OhElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        document.addEventListener('click', this._handleClickOutside);
+        document.addEventListener("click", this._handleClickOutside);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        document.removeEventListener('click', this._handleClickOutside);
+        document.removeEventListener("click", this._handleClickOutside);
     }
     willUpdate(changed) {
-        if (this.hasUpdated && (changed.has("errorText"))) {
+        if (this.hasUpdated && changed.has("errorText")) {
             this._announceError = !!this.errorText;
         }
     }
@@ -519,7 +564,7 @@ let OhSelect = class OhSelect extends OhElement {
         <div class="label-container">
           ${this.label
             ? html `
-                <label 
+                <label
                   id=${this._labelId}
                   class="label ${this.required ? "label--required" : ""}"
                 >
@@ -531,9 +576,22 @@ let OhSelect = class OhSelect extends OhElement {
 
         ${hasError
             ? html `
-              <div id=${this._errorId} class="error-message" role=${this._announceError ? "alert" : nothing}>
-                <svg class="error-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                  <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
+              <div
+                id=${this._errorId}
+                class="error-message"
+                role=${this._announceError ? "alert" : nothing}
+              >
+                <svg
+                  class="error-icon"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  aria-hidden="true"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z"
+                    clip-rule="evenodd"
+                  />
                 </svg>
                 ${this.errorText}
               </div>
@@ -553,27 +611,39 @@ let OhSelect = class OhSelect extends OhElement {
             : nothing}
           aria-required=${this.required ? "true" : nothing}
           aria-invalid=${hasError ? "true" : nothing}
-          aria-describedby=${hasError ? this._errorId : nothing}
+          aria-describedby=${hasError
+            ? this._errorId
+            : this.helperText
+                ? this._helperId
+                : nothing}
           @click=${this._handleTriggerClick}
           @keydown=${this._handleTriggerKeydown}
           @focus=${this._handleFocus}
           @blur=${this._handleBlur}
         >
-          <span class="trigger__text ${!selectedLabel ? 'trigger__text--placeholder' : ''}">
+          <span
+            class="trigger__text ${!selectedLabel
+            ? "trigger__text--placeholder"
+            : ""}"
+          >
             ${selectedLabel || this.placeholder}
           </span>
-          <svg 
-            class="trigger__icon ${this._open ? 'trigger__icon--open' : ''}" 
-            viewBox="0 0 20 20" 
+          <svg
+            class="trigger__icon ${this._open ? "trigger__icon--open" : ""}"
+            viewBox="0 0 20 20"
             fill="currentColor"
             aria-hidden="true"
           >
-            <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
+            <path
+              fill-rule="evenodd"
+              d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
+              clip-rule="evenodd"
+            />
           </svg>
         </button>
 
-        <ul 
-          class="dropdown ${this._open ? 'dropdown--open' : ''}"
+        <ul
+          class="dropdown ${this._open ? "dropdown--open" : ""}"
           role="listbox"
           id=${this._listboxId}
           aria-labelledby=${this.label ? this._labelId : nothing}
@@ -602,7 +672,9 @@ let OhSelect = class OhSelect extends OhElement {
         </ul>
 
         ${this.helperText && !hasError
-            ? html `<span class="helper">${this.helperText}</span>`
+            ? html `<span id=${this._helperId} class="helper"
+              >${this.helperText}</span
+            >`
             : nothing}
       </div>
     `;
@@ -627,10 +699,10 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], OhSelect.prototype, "required", void 0);
 __decorate([
-    property({ type: String })
+    property({ type: String, attribute: "helper-text" })
 ], OhSelect.prototype, "helperText", void 0);
 __decorate([
-    property({ type: String })
+    property({ type: String, attribute: "error-text" })
 ], OhSelect.prototype, "errorText", void 0);
 __decorate([
     state()

package/dist/oh-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"oh-select.js","sourceRoot":"","sources":["../src/oh-select.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"oh-select.js","sourceRoot":"","sources":["../src/oh-select.ts"],"names":[],"mappings":"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"}

package/dist/oh-skip-link.d.ts

@@ -1,28 +1,46 @@
 /**
  * oh-skip-link
  *
- * Accessibility skip link for keyboard navigation.
- *
  * DESIGN DECISIONS:
  * ─────────────────
- * 1. ACCESSIBILITY FIRST
- *    - Hidden until Tab focus
- *    - High contrast focus state
- *    - Semantic anchor link
+ * 1. A native anchor, visually hidden (but still read by screen readers)
+ *    until it has focus.
+ * 2. On focus it appears fixed at the top-left of the viewport, above other
+ *    content, and transitions in.
+ * 3. Focus is shown by a border in `color.brand.primary` on a raised
+ *    surface; look comes from tokens only.
+ */
+import { OhElement } from "./base.js";
+/**
+ * A "skip to content" link that lets keyboard users jump past repeated content, such as navigation.
  *
- * 2. POSITIONING
- *    - Fixed top-left position
- *    - Smooth transition on focus
- *    - Z-index above other content
+ * **Use it for** the first focusable element on every page, pointing at the
+ * main content. Add more for other landmarks (search results, footer) if
+ * useful. **Don't use it for** in-page navigation that everyone sees (use
+ * `oh-link`).
  *
- * 3. STYLING
- *    - Warm orange focus state
- *    - Chunky padding and border
- *    - Clear typography
+ * **Parts:** `href` is the target (defaults to `#main`); `text` is the label
+ * (defaults to "Skip to main content").
+ *
+ * **Behaviour:** hidden until it receives keyboard focus, then shown fixed at
+ * the top-left of the viewport, above other content. Enter follows the link.
+ * Transitions are cut short under `prefers-reduced-motion`.
+ *
+ * **Accessibility:** screen readers can read it at all times. Put it first in
+ * the page, and give the target an `id` and `tabindex="-1"` so focus moves to
+ * it.
+ *
+ * **Look:** set by tokens — `color.surface.base`, `color.border.emphasis` and
+ * `color.text.link` at rest; `color.surface.raised`, `color.text.linkRaised`
+ * and `color.brand.primary` (border) on focus; `stroke.control` the border,
+ * `shape.control` the corners; `elevation.offset.lg` with `elevation.color.neutral`
+ * (`elevation.color.primary` on focus) the shadow; `typography.body.*` and
+ * `typography.label.base.fontWeight` the text; `spacing.*` the padding and
+ * position; `motion.gentle`, `motion.quick` and `motion.snappy` the
+ * transitions.
  *
  * @element oh-skip-link
  */
-import { OhElement } from "./base.js";
 export declare class OhSkipLink extends OhElement {
     static styles: import("lit").CSSResult[];
     href: string;

package/dist/oh-skip-link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"oh-skip-link.d.ts","sourceRoot":"","sources":["../src/oh-skip-link.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,qBACa,UAAW,SAAQ,SAAS;IACvC,OAAgB,MAAM,4BAmFpB;IAGF,IAAI,SAAW;IAGf,IAAI,SAA0B;IAE9B,MAAM;CAWP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}
+{"version":3,"file":"oh-skip-link.d.ts","sourceRoot":"","sources":["../src/oh-skip-link.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBACa,UAAW,SAAQ,SAAS;IACvC,OAAgB,MAAM,4BAgFpB;IAGF,IAAI,SAAW;IAGf,IAAI,SAA0B;IAE9B,MAAM;CAOP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}

package/dist/oh-skip-link.js

@@ -1,26 +1,14 @@
 /**
  * oh-skip-link
  *
- * Accessibility skip link for keyboard navigation.
- *
  * DESIGN DECISIONS:
  * ─────────────────
- * 1. ACCESSIBILITY FIRST
- *    - Hidden until Tab focus
- *    - High contrast focus state
- *    - Semantic anchor link
- *
- * 2. POSITIONING
- *    - Fixed top-left position
- *    - Smooth transition on focus
- *    - Z-index above other content
- *
- * 3. STYLING
- *    - Warm orange focus state
- *    - Chunky padding and border
- *    - Clear typography
- *
- * @element oh-skip-link
+ * 1. A native anchor, visually hidden (but still read by screen readers)
+ *    until it has focus.
+ * 2. On focus it appears fixed at the top-left of the viewport, above other
+ *    content, and transitions in.
+ * 3. Focus is shown by a border in `color.brand.primary` on a raised
+ *    surface; look comes from tokens only.
  */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -31,6 +19,36 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { OhElement, baseStyles } from "./base.js";
+/**
+ * A "skip to content" link that lets keyboard users jump past repeated content, such as navigation.
+ *
+ * **Use it for** the first focusable element on every page, pointing at the
+ * main content. Add more for other landmarks (search results, footer) if
+ * useful. **Don't use it for** in-page navigation that everyone sees (use
+ * `oh-link`).
+ *
+ * **Parts:** `href` is the target (defaults to `#main`); `text` is the label
+ * (defaults to "Skip to main content").
+ *
+ * **Behaviour:** hidden until it receives keyboard focus, then shown fixed at
+ * the top-left of the viewport, above other content. Enter follows the link.
+ * Transitions are cut short under `prefers-reduced-motion`.
+ *
+ * **Accessibility:** screen readers can read it at all times. Put it first in
+ * the page, and give the target an `id` and `tabindex="-1"` so focus moves to
+ * it.
+ *
+ * **Look:** set by tokens — `color.surface.base`, `color.border.emphasis` and
+ * `color.text.link` at rest; `color.surface.raised`, `color.text.linkRaised`
+ * and `color.brand.primary` (border) on focus; `stroke.control` the border,
+ * `shape.control` the corners; `elevation.offset.lg` with `elevation.color.neutral`
+ * (`elevation.color.primary` on focus) the shadow; `typography.body.*` and
+ * `typography.label.base.fontWeight` the text; `spacing.*` the padding and
+ * position; `motion.gentle`, `motion.quick` and `motion.snappy` the
+ * transitions.
+ *
+ * @element oh-skip-link
+ */
 let OhSkipLink = class OhSkipLink extends OhElement {
     constructor() {
         super(...arguments);
@@ -40,11 +58,6 @@ let OhSkipLink = class OhSkipLink extends OhElement {
     static { this.styles = [
         baseStyles,
         css `
-      /* ═══════════════════════════════════════════════════════════════
-         ORANGE HALO SKIP LINK
-         Accessibility • Keyboard Navigation • Hidden until focus
-         ═══════════════════════════════════════════════════════════════ */
-
       :host {
         display: contents;
       }
@@ -61,7 +74,7 @@ let OhSkipLink = class OhSkipLink extends OhElement {
         pointer-events: none;
 
         /* Smooth transition */
-        transition: 
+        transition:
           opacity var(--oh-motion-gentle) ease,
           transform var(--oh-motion-gentle) ease;
 
@@ -71,7 +84,8 @@ let OhSkipLink = class OhSkipLink extends OhElement {
         background-color: var(--oh-color-surface-base);
         border: var(--oh-stroke-control) solid var(--oh-color-border-emphasis);
         border-radius: var(--oh-shape-control);
-        box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg) 0 0 var(--oh-shadow-neutral);
+        box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
+          0 0 var(--oh-elevation-color-neutral);
 
         font-family: var(--oh-typography-body-font-family);
         font-size: var(--oh-typography-body-base-font-size);
@@ -80,7 +94,7 @@ let OhSkipLink = class OhSkipLink extends OhElement {
         text-decoration: none;
 
         /* Focus state */
-        transition: 
+        transition:
           opacity var(--oh-motion-gentle) ease,
           transform var(--oh-motion-gentle) ease,
           background-color var(--oh-motion-quick) ease,
@@ -96,7 +110,8 @@ let OhSkipLink = class OhSkipLink extends OhElement {
         background-color: var(--oh-color-surface-raised);
         color: var(--oh-color-text-link-raised);
         border-color: var(--oh-color-brand-primary);
-        box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg) 0 0 var(--oh-shadow-primary);
+        box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
+          0 0 var(--oh-elevation-color-primary);
       }
 
       /* Screen reader only when not focused */
@@ -123,11 +138,7 @@ let OhSkipLink = class OhSkipLink extends OhElement {
     ]; }
     render() {
         return html `
-      <a
-        class="skip-link"
-        href=${this.href}
-        aria-label=${this.text}
-      >
+      <a class="skip-link" href=${this.href} aria-label=${this.text}>
         ${this.text}
       </a>
     `;