@orange-halo/components 2.2.0 → 3.1.0

package/dist/oh-icon.js

@@ -1,14 +1,15 @@
 /**
  * oh-icon
  *
- * A flexible icon component for the Orange Halo design system.
+ * A flexible icon component for the design system.
  * Can render as a standalone icon or as an interactive link.
  *
  * DESIGN DECISIONS:
  * ─────────────────
  * 1. SIZE
- *    - Default size matches line-height (1em)
- *    - Size variants: sm (16px), md (20px), lg (24px), xl (32px)
+ *    - With no size, the icon is 1em, so it follows the text around it
+ *    - Size variants: sm, md, lg, xl (fixed sizes, set in this file; there
+ *      are no icon size tokens yet)
  *
  * 2. LINK MODE
  *    - When `href` is provided, renders as an <a> tag
@@ -19,8 +20,6 @@
  *    - Decorative by default (aria-hidden="true")
  *    - Provide `label` for meaningful icons
  *    - When used as link, label becomes aria-label
- *
- * @element oh-icon
  */
 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;
@@ -158,6 +157,23 @@ const icons = {
         path: `M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z`,
     },
 };
+/**
+ * An icon from the system's built-in set, shown on its own, with a label, or as an icon-only link.
+ *
+ * **Use it for** an icon next to text, an icon that carries meaning on its own (with `label`), or a compact link such as a social profile (`href` + `label`). **Don't use it for** an icon-only button (use `oh-button` with `icon-only`); or for an image or logo (use `<img>`).
+ *
+ * **Names:** `name` picks the icon: social (`twitter`, `github`, `linkedin`, `instagram`, `youtube`, `facebook`, `email`, `substack`), navigation (`arrow-*`, `chevron-*`, `external-link`), actions (`close`, `plus`, `minus`, `check`, `search`, `menu`, `settings`, `heart`, `sparkle`) and feedback (`info`, `warning`, `error`, `success`). An unknown name renders nothing and logs a warning.
+ *
+ * **Sizes:** with no `size` the icon is 1em and follows the text; `sm`, `md`, `lg`, `xl` set fixed sizes. **`inverse`:** for icons on an accent-coloured or dark background.
+ *
+ * **Behaviour:** the icon takes the current text colour. `arrow-left`, `arrow-right`, `chevron-left` and `chevron-right` mirror in right-to-left text, so they keep pointing back and forward along the line. With `href` it renders as a link, with hover, active and focus-visible states; `target="_blank"` adds `rel="noopener noreferrer"`.
+ *
+ * **Accessibility:** without `label` the icon is decorative (`aria-hidden="true"`). With `label` it's `role="img"` with that name. As a link, `label` is required (it logs a warning without one) and becomes the link's `aria-label`. Focus-visible shows a solid ring in `focus.ringColor` (`color.text.onAccent` when `inverse`).
+ *
+ * **Look:** set by tokens. The icon is `currentColor`; `inverse` sets `color.text.onAccent`. As a link: `shape.compact` corners, hover moves by `lift.hoverMd` with an `elevation.offset.lg` shadow in `color.border.default` (`color.text.onAccent` when `inverse`); motion uses `motion.snappy` and `motion.easeGentle`, off under `prefers-reduced-motion`.
+ *
+ * @element oh-icon
+ */
 let OhIcon = class OhIcon extends OhElement {
     constructor() {
         super(...arguments);
@@ -175,6 +191,12 @@ let OhIcon = class OhIcon extends OhElement {
         vertical-align: middle;
       }
 
+      /* Icons that point along the line (left/right arrows and chevrons)
+         mirror in right-to-left text, so "next" still points forward */
+      svg.directional {
+        transform: scaleX(var(--_oh-dir));
+      }
+
       svg {
         display: block;
         fill: currentColor;
@@ -268,6 +290,7 @@ let OhIcon = class OhIcon extends OhElement {
         }
         const svg = html `
       <svg
+        class=${/-(left|right)$/.test(this.name) ? "directional" : nothing}
         viewBox=${iconData.viewBox}
         fill="currentColor"
         aria-hidden=${this.href ? "true" : this.label ? "false" : "true"}

package/dist/oh-icon.js.map

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

package/dist/oh-input.d.ts

@@ -1,41 +1,113 @@
 /**
  * oh-input
  *
- * A chunky, inset input field that feels pressed into the page.
- * On focus, it rises to meet you.
- *
  * DESIGN DECISIONS:
  * ─────────────────
- * 1. CHUNKY & CONFIDENT
- *    - Thick border (stroke.control) that feels illustrative
- *    - Solid fill, no subtle gradients
- *    - shape.control corners (matches button)
- *
- * 2. INSET SHADOW (PRESSED IN)
- *    - Shadow offset to top-left (inset)
- *    - Feels pressed into the surface
- *    - Opposite of button's outset sticker effect
+ * 1. LOOK FROM TOKENS
+ *    - Border: input.base.borderWidth (stroke.control) in color.border.emphasis
+ *    - Corners: shape.control (same as oh-button)
+ *    - Shadow: an inset shadow offset by elevation.offset.md in elevation.color.field
  *
- * 3. FOCUS THICKENS
- *    - An inset ring in focus.ringColor thickens the border inward
+ * 2. FOCUS IS A SOLID RING
+ *    - An inset ring in focus.ringColor inside the border, so focus doesn't
+ *      shift the layout
  *    - Background switches to color.surface.highlight
- *    - Clear visual hierarchy
  *
- * @element oh-input
+ * 3. A REAL FORM CONTROL
+ *    - Form-associated, like oh-textarea: its value submits with the form
+ *      under its name and shows in form.elements, `required` blocks
+ *      submission, a form reset restores the starting value, and a
+ *      disabled <fieldset> disables it
+ *
+ * 4. SUGGESTIONS ARE NATIVE
+ *    - `suggestions` renders a <datalist> inside the component (a list
+ *      outside it can't reach an input in the shadow root). The browser
+ *      draws the list and handles the keyboard and screen readers, so
+ *      people can still type anything: it suggests, it doesn't restrict
+ *
+ * 5. ERRORS BEFORE THE FIELD
+ *    - Error text sits after the label and before the field, with an icon,
+ *      so it's read before the field is reached. Helper text sits after
  */
 import { type PropertyValues } from "lit";
 import { OhElement } from "./base.js";
 export type InputType = "text" | "email" | "password" | "search" | "tel" | "url";
 export type InputState = "default" | "hover" | "focus";
+/**
+ * A single-line text field that submits with a native form, with optional
+ * typing suggestions.
+ *
+ * **Use it for** short free text: names, email addresses, search terms.
+ * **Don't use it for** several lines (use `oh-textarea`) or a choice from a
+ * fixed list (use `oh-select`, or `oh-radio-group` for a few options).
+ * `suggestions` offers values while still allowing any text.
+ *
+ * **Types:** `text` (default), `email`, `password`, `search`, `tel`, `url`.
+ * One size. **States:** rest, hover, focus, error (set `error-text`),
+ * disabled, required.
+ *
+ * **Behaviour:** form-associated: the value submits under `name`, `required`
+ * blocks submission (validity comes from the inner `<input>`), a form reset
+ * restores the starting value, and a disabled `<fieldset>` disables it.
+ * Fires `oh-input` as the text changes and `oh-change` when it's committed.
+ * `suggestions` renders a native `<datalist>`, so the browser handles its
+ * keyboard and screen reader support. `autocomplete` is passed to the inner
+ * `<input>`.
+ *
+ * **Accessibility:** always set `label`: it's the field's name. The error
+ * shows after the label and before the field, with an icon, and is linked
+ * with `aria-describedby` and `aria-invalid`; it's announced (`role="alert"`)
+ * only when it appears after first render. Helper text is linked the same
+ * way (it's hidden while an error shows). Focus is a solid inset ring.
+ * Set `autocomplete` for personal data (WCAG 1.3.5).
+ *
+ * **Look:** set by tokens — `input.base.borderWidth` (`stroke.control`) in
+ * `color.border.emphasis` (border), `shape.control` (corners),
+ * `typography.control.*` (type), `input.size.md.minHeight` (height),
+ * `elevation.offset.md` and `elevation.color.field` (inset shadow),
+ * `color.border.hover` (hover), `focus.ringColor` and
+ * `color.surface.highlight` (focus), `color.feedback.error`,
+ * `color.feedback.errorSubtle` and `elevation.color.error` (error),
+ * `color.surface.disabled`, `color.border.disabled` and
+ * `color.text.disabled` (disabled).
+ *
+ * @element oh-input
+ * @fires oh-input - Whenever the text changes: typing, or picking a suggestion. detail: { value, originalEvent }
+ * @fires oh-change - When the value is committed (on blur or Enter). detail: { value, originalEvent }
+ * @csspart label - The visible label
+ * @csspart input - The text field
+ * @csspart helper - The helper text, and the error message (which also has the error part)
+ * @csspart error - The error message
+ */
 export declare class OhInput extends OhElement {
+    static formAssociated: boolean;
     static styles: import("lit").CSSResult[];
+    /** The kind of text: text, email, password, search, tel or url */
     type: InputType;
+    /** The text in the field */
     value: string;
+    /** Example text shown while the field is empty. Not a replacement for the label */
     placeholder: string;
+    /** The visible label. Always set one: it names the field */
     label: string;
+    /** Help shown under the field and linked to it */
     helperText: string;
+    /** Error shown before the field and linked to it. Setting it puts the field in its error state */
     errorText: string;
+    /** The name the value is submitted under */
+    name: string;
+    /** Must be filled in before the form submits */
     required: boolean;
+    /** Not editable, and left out of the form's data */
+    disabled: boolean;
+    /**
+     * Values offered while typing, shown by the browser as a list under the
+     * field. They suggest, they don't restrict: any text is still allowed.
+     * Set it as a property (an array of strings) or, in HTML, as a JSON array:
+     * suggestions='["Option one","Option two"]'. Browsers also offer the
+     * field's autofill history, so set autocomplete="off" to show only these.
+     */
+    suggestions: string[];
     /**
      * The input's purpose, for autofill and assistive tech (WCAG 1.3.5):
      * an HTML autocomplete token such as "email", "name" or "tel".
@@ -43,22 +115,34 @@ export declare class OhInput extends OhElement {
      */
     autocomplete?: string;
     /**
-     * Force a visual state (for documentation/Figma sync only)
+     * Force a visual state (for documentation only)
      * Values: 'hover' | 'focus'
      */
     forceState: InputState;
     private _input;
-    private _handleInput;
-    private _handleChange;
-    focus(): void;
-    blur(): void;
+    private _internals;
+    /** The starting value, restored when the form resets */
+    private _defaultValue;
+    /** Set when a disabled <fieldset> around it disables it */
+    private _formDisabled;
     /**
      * Errors that appear after first render (e.g. on submit) are announced via
      * role="alert". Errors present on page load are only linked with
      * aria-describedby, so they aren't read out unprompted.
      */
     private _announceError;
+    connectedCallback(): void;
+    /** The form this field belongs to */
+    get form(): HTMLFormElement | null;
+    focus(options?: FocusOptions): void;
+    blur(): void;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    formStateRestoreCallback(state: string | File | FormData | null): void;
     willUpdate(changed: PropertyValues): void;
+    updated(changed: PropertyValues): void;
+    private _handleInput;
+    private _handleChange;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/oh-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"oh-input.d.ts","sourceRoot":"","sources":["../src/oh-input.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9D,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,OAAO,GACP,UAAU,GACV,QAAQ,GACR,KAAK,GACL,KAAK,CAAC;AACV,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAEvD,qBACa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,4BAuKpB;IAGF,IAAI,EAAE,SAAS,CAAU;IAGzB,KAAK,SAAM;IAGX,WAAW,SAAM;IAGjB,KAAK,SAAM;IAGX,UAAU,SAAM;IAGhB,SAAS,SAAM;IAGf,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IAEH,UAAU,EAAE,UAAU,CAAa;IAGnC,OAAO,CAAC,MAAM,CAAoB;IAElC,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,aAAa;IAIrB,KAAK;IAIL,IAAI;IAIJ;;;;OAIG;IAEH,OAAO,CAAC,cAAc,CAAS;IAE/B,UAAU,CAAC,OAAO,EAAE,cAAc;IAMlC,MAAM;CAqEP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
+{"version":3,"file":"oh-input.d.ts","sourceRoot":"","sources":["../src/oh-input.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9D,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,OAAO,GACP,UAAU,GACV,QAAQ,GACR,KAAK,GACL,KAAK,CAAC;AACV,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,qBACa,OAAQ,SAAQ,SAAS;IACpC,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAgB,MAAM,4BAiLpB;IAEF,kEAAkE;IAElE,IAAI,EAAE,SAAS,CAAU;IAEzB,4BAA4B;IAE5B,KAAK,SAAM;IAEX,mFAAmF;IAEnF,WAAW,SAAM;IAEjB,4DAA4D;IAE5D,KAAK,SAAM;IAEX,kDAAkD;IAElD,UAAU,SAAM;IAEhB,kGAAkG;IAElG,SAAS,SAAM;IAEf,4CAA4C;IAE5C,IAAI,SAAM;IAEV,gDAAgD;IAEhD,QAAQ,UAAS;IAEjB,oDAAoD;IAEpD,QAAQ,UAAS;IAEjB;;;;;;OAMG;IAEH,WAAW,EAAE,MAAM,EAAE,CAAM;IAE3B;;;;OAIG;IAEH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IAEH,UAAU,EAAE,UAAU,CAAa;IAGnC,OAAO,CAAC,MAAM,CAAoB;IAElC,OAAO,CAAC,UAAU,CAA0B;IAE5C,wDAAwD;IACxD,OAAO,CAAC,aAAa,CAAM;IAE3B,2DAA2D;IAE3D,OAAO,CAAC,aAAa,CAAS;IAE9B;;;;OAIG;IAEH,OAAO,CAAC,cAAc,CAAS;IAE/B,iBAAiB;IAKjB,qCAAqC;IACrC,IAAI,IAAI,2BAEP;IAED,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAI5B,IAAI;IAIJ,iBAAiB;IAIjB,oBAAoB,CAAC,QAAQ,EAAE,OAAO;IAItC,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI;IAI/D,UAAU,CAAC,OAAO,EAAE,cAAc;IAMlC,OAAO,CAAC,OAAO,EAAE,cAAc;IAe/B,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,aAAa;IAIrB,MAAM;CAkFP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}