@orange-halo/components 2.0.0 → 2.2.0

package/dist/oh-textarea.d.ts

@@ -0,0 +1,98 @@
+/**
+ * oh-textarea
+ *
+ * A multi-line text field for messages, comments and feedback. The same
+ * chunky, inset field as oh-input, and the first OHDS control that takes
+ * part in a native <form>.
+ *
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * 1. SAME FAMILY AS oh-input
+ *    - Thick border (stroke.control), inset shadow, shape.control corners
+ *    - Focus thickens the border inward with an inset ring in
+ *      focus.ringColor; background switches to color.surface.highlight
+ *
+ * 2. ON THE GRID
+ *    - Line height is 1.5 times the text size, rounded up to the brand's
+ *      grid (grid.unit), so every line of a long message sits on it
+ *
+ * 3. A REAL FORM CONTROL
+ *    - Form-associated: its value submits with the form under its name,
+ *      `required` blocks submission with the browser's own message, a
+ *      form reset restores the starting text, and a disabled <fieldset>
+ *      disables it
+ *
+ * 4. 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";
+/**
+ * A multi-line text field that submits with a native form.
+ *
+ * @element oh-textarea
+ * @fires oh-input - On every keystroke. detail: { value, originalEvent }
+ * @fires oh-change - When the value is committed (on blur). detail: { value, originalEvent }
+ * @csspart label - The visible label
+ * @csspart textarea - The text field
+ * @csspart helper - The helper text
+ * @csspart error - The error message
+ */
+export declare class OhTextarea extends OhElement {
+    static formAssociated: boolean;
+    static styles: import("lit").CSSResult[];
+    /** The visible label. Always set one: it names the field. */
+    label: string;
+    /** The text in the field */
+    value: string;
+    /** Example text shown while the field is empty. Not a replacement for the label */
+    placeholder: 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;
+    /** Visible lines of text before the field scrolls (people can drag it taller) */
+    rows: number;
+    /** Longest allowed text, in characters */
+    maxlength?: number;
+    /** The field's purpose for autofill and assistive tech (WCAG 1.3.5), e.g. "street-address" */
+    autocomplete?: string;
+    private _textarea;
+    private _internals;
+    /** The starting text, 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 {
+    interface HTMLElementTagNameMap {
+        "oh-textarea": OhTextarea;
+    }
+}
+//# sourceMappingURL=oh-textarea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"oh-textarea.d.ts","sourceRoot":"","sources":["../src/oh-textarea.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9D,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD;;;;;;;;;;GAUG;AACH,qBACa,UAAW,SAAQ,SAAS;IACvC,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAgB,MAAM,4BA4HpB;IAEF,6DAA6D;IAE7D,KAAK,SAAM;IAEX,4BAA4B;IAE5B,KAAK,SAAM;IAEX,mFAAmF;IAEnF,WAAW,SAAM;IAEjB,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,iFAAiF;IAEjF,IAAI,SAAK;IAET,0CAA0C;IAE1C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,8FAA8F;IAE9F,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,OAAO,CAAC,SAAS,CAAuB;IAExC,OAAO,CAAC,UAAU,CAA0B;IAE5C,uDAAuD;IACvD,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;CAsEP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/oh-textarea.js

@@ -0,0 +1,370 @@
+/**
+ * oh-textarea
+ *
+ * A multi-line text field for messages, comments and feedback. The same
+ * chunky, inset field as oh-input, and the first OHDS control that takes
+ * part in a native <form>.
+ *
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * 1. SAME FAMILY AS oh-input
+ *    - Thick border (stroke.control), inset shadow, shape.control corners
+ *    - Focus thickens the border inward with an inset ring in
+ *      focus.ringColor; background switches to color.surface.highlight
+ *
+ * 2. ON THE GRID
+ *    - Line height is 1.5 times the text size, rounded up to the brand's
+ *      grid (grid.unit), so every line of a long message sits on it
+ *
+ * 3. A REAL FORM CONTROL
+ *    - Form-associated: its value submits with the form under its name,
+ *      `required` blocks submission with the browser's own message, a
+ *      form reset restores the starting text, and a disabled <fieldset>
+ *      disables it
+ *
+ * 4. 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
+ */
+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;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, css, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { OhElement, baseStyles } from "./base.js";
+/**
+ * A multi-line text field that submits with a native form.
+ *
+ * @element oh-textarea
+ * @fires oh-input - On every keystroke. detail: { value, originalEvent }
+ * @fires oh-change - When the value is committed (on blur). detail: { value, originalEvent }
+ * @csspart label - The visible label
+ * @csspart textarea - The text field
+ * @csspart helper - The helper text
+ * @csspart error - The error message
+ */
+let OhTextarea = class OhTextarea extends OhElement {
+    constructor() {
+        super(...arguments);
+        /** The visible label. Always set one: it names the field. */
+        this.label = "";
+        /** The text in the field */
+        this.value = "";
+        /** Example text shown while the field is empty. Not a replacement for the label */
+        this.placeholder = "";
+        /** Help shown under the field and linked to it */
+        this.helperText = "";
+        /** Error shown before the field and linked to it. Setting it puts the field in its error state */
+        this.errorText = "";
+        /** The name the value is submitted under */
+        this.name = "";
+        /** Must be filled in before the form submits */
+        this.required = false;
+        /** Not editable, and left out of the form's data */
+        this.disabled = false;
+        /** Visible lines of text before the field scrolls (people can drag it taller) */
+        this.rows = 4;
+        this._internals = this.attachInternals();
+        /** The starting text, restored when the form resets */
+        this._defaultValue = "";
+        /** Set when a disabled <fieldset> around it disables it */
+        this._formDisabled = false;
+        /**
+         * 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.
+         */
+        this._announceError = false;
+    }
+    static { this.formAssociated = true; }
+    static { this.styles = [
+        baseStyles,
+        css `
+      :host {
+        display: block;
+      }
+
+      .wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: var(--oh-spacing-2);
+      }
+
+      .label {
+        font-family: var(--oh-typography-control-font-family);
+        font-size: var(--oh-typography-control-font-size-sm);
+        font-weight: var(--oh-typography-control-font-weight);
+        color: var(--oh-color-text-primary);
+        letter-spacing: var(--oh-typography-control-letter-spacing);
+      }
+
+      .label--required::after {
+        content: " *";
+        color: var(--oh-color-feedback-error);
+      }
+
+      .textarea {
+        display: block;
+        width: 100%;
+        margin: 0;
+        resize: vertical;
+        font-family: var(--oh-typography-control-font-family);
+        font-size: var(--oh-typography-control-font-size-md);
+        /* 1.5 x the text size, rounded up to the brand's grid */
+        line-height: 1.5;
+        line-height: round(
+          up,
+          calc(var(--oh-typography-control-font-size-md) * 1.5),
+          var(--oh-grid-unit)
+        );
+        color: var(--oh-color-text-primary);
+        background-color: var(--oh-color-surface-base);
+        padding: var(--oh-spacing-3) var(--oh-spacing-4);
+        border: var(--oh-stroke-control) solid var(--oh-color-border-emphasis);
+        border-radius: var(--oh-shape-control);
+        box-shadow: inset var(--oh-elevation-offset-md)
+          var(--oh-elevation-offset-md) 0 0 var(--oh-shadow-field);
+        transition:
+          border-color var(--oh-motion-snappy) ease,
+          box-shadow var(--oh-motion-snappy) ease,
+          background-color var(--oh-motion-quick) ease;
+      }
+
+      .textarea::placeholder {
+        color: var(--oh-color-text-secondary);
+      }
+
+      .textarea:hover:not(:focus):not(:disabled) {
+        border-color: var(--oh-color-border-hover);
+      }
+
+      .textarea:focus {
+        outline: none;
+        background-color: var(--oh-color-surface-highlight);
+        border-color: var(--oh-focus-ring-color);
+        box-shadow: inset 0 0 0 2px var(--oh-focus-ring-color);
+      }
+
+      .textarea--error {
+        border-color: var(--oh-color-feedback-error);
+        background-color: var(--oh-color-feedback-error-subtle);
+        box-shadow: inset var(--oh-elevation-offset-md)
+          var(--oh-elevation-offset-md) 0 0 var(--oh-shadow-error);
+      }
+
+      .textarea--error:focus {
+        border-color: var(--oh-color-feedback-error);
+        box-shadow: inset 0 0 0 2px var(--oh-color-feedback-error);
+      }
+
+      /* Disabled: quiet, not broken */
+      .textarea:disabled {
+        cursor: not-allowed;
+        resize: none;
+        color: var(--oh-color-text-disabled);
+        background-color: var(--oh-color-surface-disabled);
+        border-color: var(--oh-color-border-disabled);
+        box-shadow: none;
+      }
+
+      .label--disabled {
+        color: var(--oh-color-text-disabled);
+      }
+
+      .helper {
+        font-family: var(--oh-typography-body-font-family);
+        font-size: var(--oh-typography-body-base-font-size);
+        line-height: var(--oh-typography-body-base-line-height);
+        color: var(--oh-color-text-secondary);
+        letter-spacing: var(--oh-typography-control-letter-spacing);
+      }
+
+      .error {
+        display: flex;
+        align-items: center;
+        gap: var(--oh-spacing-2);
+        font-family: var(--oh-typography-body-font-family);
+        font-size: var(--oh-typography-body-base-font-size);
+        line-height: var(--oh-typography-body-base-line-height);
+        color: var(--oh-color-feedback-error);
+      }
+
+      .error-icon {
+        flex-shrink: 0;
+        width: var(--oh-spacing-4);
+        height: var(--oh-spacing-4);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .textarea {
+          transition-duration: 0.01ms !important;
+        }
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasUpdated)
+            this._defaultValue = this.value;
+    }
+    /** The form this field belongs to */
+    get form() {
+        return this._internals.form;
+    }
+    focus(options) {
+        this._textarea?.focus(options);
+    }
+    blur() {
+        this._textarea?.blur();
+    }
+    formResetCallback() {
+        this.value = this._defaultValue;
+    }
+    formDisabledCallback(disabled) {
+        this._formDisabled = disabled;
+    }
+    formStateRestoreCallback(state) {
+        if (typeof state === "string")
+            this.value = state;
+    }
+    willUpdate(changed) {
+        if (this.hasUpdated && changed.has("errorText")) {
+            this._announceError = !!this.errorText;
+        }
+    }
+    updated(changed) {
+        if (changed.has("value"))
+            this._internals.setFormValue(this.value);
+        if (changed.has("value") ||
+            changed.has("required") ||
+            changed.has("maxlength")) {
+            this._internals.setValidity(this._textarea.validity, this._textarea.validationMessage, this._textarea);
+        }
+    }
+    _handleInput(event) {
+        this.value = event.target.value;
+        this.emit("oh-input", { value: this.value, originalEvent: event });
+    }
+    _handleChange(event) {
+        this.emit("oh-change", { value: this.value, originalEvent: event });
+    }
+    render() {
+        const hasError = !!this.errorText;
+        const disabled = this.disabled || this._formDisabled;
+        const describedBy = hasError ? "error" : this.helperText ? "helper" : "";
+        return html `
+      <div class="wrapper">
+        ${this.label
+            ? html `<label
+              class=${this.classMap({
+                label: true,
+                "label--required": this.required,
+                "label--disabled": disabled,
+            })}
+              part="label"
+              for="textarea"
+              >${this.label}</label
+            >`
+            : nothing}
+        ${hasError
+            ? html `<span
+              id="error"
+              class="error"
+              part="error"
+              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}
+            </span>`
+            : nothing}
+
+        <textarea
+          id="textarea"
+          part="textarea"
+          class=${this.classMap({
+            textarea: true,
+            "textarea--error": hasError,
+        })}
+          .value=${this.value}
+          rows=${this.rows}
+          placeholder=${this.placeholder || nothing}
+          maxlength=${this.maxlength ?? nothing}
+          autocomplete=${this.autocomplete || nothing}
+          ?required=${this.required}
+          ?disabled=${disabled}
+          aria-invalid=${hasError ? "true" : nothing}
+          aria-describedby=${describedBy || nothing}
+          @input=${this._handleInput}
+          @change=${this._handleChange}
+        ></textarea>
+
+        ${this.helperText && !hasError
+            ? html `<span id="helper" class="helper" part="helper"
+              >${this.helperText}</span
+            >`
+            : nothing}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], OhTextarea.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], OhTextarea.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], OhTextarea.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: String, attribute: "helper-text" })
+], OhTextarea.prototype, "helperText", void 0);
+__decorate([
+    property({ type: String, attribute: "error-text" })
+], OhTextarea.prototype, "errorText", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], OhTextarea.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], OhTextarea.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], OhTextarea.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Number })
+], OhTextarea.prototype, "rows", void 0);
+__decorate([
+    property({ type: Number })
+], OhTextarea.prototype, "maxlength", void 0);
+__decorate([
+    property({ type: String })
+], OhTextarea.prototype, "autocomplete", void 0);
+__decorate([
+    query("textarea")
+], OhTextarea.prototype, "_textarea", void 0);
+__decorate([
+    state()
+], OhTextarea.prototype, "_formDisabled", void 0);
+__decorate([
+    state()
+], OhTextarea.prototype, "_announceError", void 0);
+OhTextarea = __decorate([
+    customElement("oh-textarea")
+], OhTextarea);
+export { OhTextarea };
+//# sourceMappingURL=oh-textarea.js.map

package/dist/oh-textarea.js.map

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

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

@@ -1 +1 @@
-{"version":3,"file":"oh-toggle.d.ts","sourceRoot":"","sources":["../src/oh-toggle.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BAkHpB;IAEF,uCAAuC;IAEvC,OAAO,UAAS;IAEhB,8CAA8C;IAE9C,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IAEH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,+BAA+B;IAE/B,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,gCAAgC;IAEhC,KAAK,SAAQ;IAEb,OAAO,CAAC,OAAO;IAWf,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA+D;IAExF,MAAM;CAqBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"oh-toggle.d.ts","sourceRoot":"","sources":["../src/oh-toggle.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BA0HpB;IAEF,uCAAuC;IAEvC,OAAO,UAAS;IAEhB,8CAA8C;IAE9C,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IAEH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,+BAA+B;IAE/B,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,gCAAgC;IAEhC,KAAK,SAAQ;IAEb,OAAO,CAAC,OAAO;IAWf,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA+D;IAExF,MAAM;CA4BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/oh-toggle.js

@@ -97,10 +97,11 @@ let OhToggle = class OhToggle extends OhElement {
         width: 26px;
         height: 26px;
         background-color: var(--oh-color-surface-base);
-        border: var(--oh-input-base-border-width) solid var(--oh-color-border-emphasis);
+        border: var(--oh-stroke-control) solid var(--oh-color-border-emphasis);
         border-radius: 50%;
-        box-shadow: 3px 3px 0 0 var(--oh-shadow-secondary);
-        transition: 
+        box-shadow: var(--oh-elevation-offset-md) var(--oh-elevation-offset-md)
+          0 0 var(--oh-shadow-secondary);
+        transition:
           transform var(--oh-motion-snappy) var(--oh-motion-ease-gentle),
           box-shadow var(--oh-motion-snappy) ease;
       }
@@ -108,31 +109,38 @@ let OhToggle = class OhToggle extends OhElement {
       /* Checked: thumb moves right, shadow flips to bottom-left */
       .toggle__track--checked .toggle__thumb {
         transform: translateX(30px);
-        box-shadow: -3px 3px 0 0 var(--oh-shadow-primary);
+        box-shadow: calc(-1 * var(--oh-elevation-offset-md))
+          var(--oh-elevation-offset-md) 0 0 var(--oh-shadow-primary);
       }
 
       /* Hover state - lift further up-left, shadow grows */
       .toggle__track:hover .toggle__thumb {
-        transform: translate(-1px, -1px);
-        box-shadow: 4px 4px 0 0 var(--oh-shadow-secondary);
+        transform: translate(var(--oh-lift-hover-sm), var(--oh-lift-hover-sm));
+        box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
+          0 0 var(--oh-shadow-secondary);
       }
 
       /* Checked hover - shadow flipped and grows */
       .toggle__track--checked:hover .toggle__thumb {
-        transform: translateX(30px) translate(1px, -1px);
-        box-shadow: -4px 4px 0 0 var(--oh-shadow-primary);
+        transform: translateX(30px)
+          translate(var(--oh-lift-press-sm), var(--oh-lift-hover-sm));
+        box-shadow: calc(-1 * var(--oh-elevation-offset-lg))
+          var(--oh-elevation-offset-lg) 0 0 var(--oh-shadow-primary);
       }
 
       /* Active/pressed state - press down, shadow shrinks */
       .toggle__track:active .toggle__thumb {
-        transform: translate(1px, 1px);
-        box-shadow: 1px 1px 0 0 var(--oh-shadow-secondary);
+        transform: translate(var(--oh-lift-press-sm), var(--oh-lift-press-sm));
+        box-shadow: var(--oh-elevation-offset-xs) var(--oh-elevation-offset-xs)
+          0 0 var(--oh-shadow-secondary);
       }
 
       /* Checked active - shadow flipped and shrinks */
       .toggle__track--checked:active .toggle__thumb {
-        transform: translateX(30px) translate(-1px, 1px);
-        box-shadow: -1px 1px 0 0 var(--oh-shadow-primary);
+        transform: translateX(30px)
+          translate(var(--oh-lift-hover-sm), var(--oh-lift-press-sm));
+        box-shadow: calc(-1 * var(--oh-elevation-offset-xs))
+          var(--oh-elevation-offset-xs) 0 0 var(--oh-shadow-primary);
       }
 
       /* ═══════════════════════════════════════════════════════════════
@@ -182,7 +190,9 @@ let OhToggle = class OhToggle extends OhElement {
         role="switch"
         aria-checked="${this.checked}"
         aria-labelledby="${hasVisibleLabel ? this._labelId : nothing}"
-        aria-label="${!hasVisibleLabel && this.accessibleLabel ? this.accessibleLabel : nothing}"
+        aria-label="${!hasVisibleLabel && this.accessibleLabel
+            ? this.accessibleLabel
+            : nothing}"
         tabindex="0"
         @click="${this._handleClick}"
         @keydown="${this._handleKeydown}"
@@ -190,7 +200,12 @@ let OhToggle = class OhToggle extends OhElement {
         <div class="toggle__thumb"></div>
       </div>
       ${hasVisibleLabel
-            ? html `<span id="${this._labelId}" class="toggle__label" @click="${this._handleClick}">${this.label}</span>`
+            ? html `<span
+            id="${this._labelId}"
+            class="toggle__label"
+            @click="${this._handleClick}"
+            >${this.label}</span
+          >`
             : nothing}
     `;
     }

package/dist/oh-toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"oh-toggle.js","sourceRoot":"","sources":["../src/oh-toggle.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAG3C,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,SAAS;IAAhC;;QAqHL,uCAAuC;QAEvC,YAAO,GAAG,KAAK,CAAC;QAiBhB,gCAAgC;QAEhC,UAAK,GAAG,IAAI,CAAC;QAwBI,aAAQ,GAAG,mBAAmB,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;IAuB1F,CAAC;aAxLiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+GF;KACF,AAlHqB,CAkHpB;IAyBM,OAAO;QACb,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,WAAW,EAAE;YAC3B,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE;YACjC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,cAAc,CAAC,CAAgB;QACrC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YACvC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,OAAO,EAAE,CAAC;QACjB,CAAC;IACH,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,OAAO,EAAE,CAAC;IACjB,CAAC;IAID,MAAM;QACJ,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAE5C,OAAO,IAAI,CAAA;;+BAEgB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE;;wBAEnD,IAAI,CAAC,OAAO;2BACT,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;sBAC9C,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO;;kBAE7E,IAAI,CAAC,YAAY;oBACf,IAAI,CAAC,cAAc;;;;QAI/B,eAAe;YACf,CAAC,CAAC,IAAI,CAAA,aAAa,IAAI,CAAC,QAAQ,mCAAmC,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,KAAK,SAAS;YAC5G,CAAC,CAAC,OAAO;KACZ,CAAC;IACJ,CAAC;;AAjED;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAC3B;AAIhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACZ;AAOf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;iDACjC;AAIzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACb;AAId;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACd;AA1IF,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAyLpB"}
+{"version":3,"file":"oh-toggle.js","sourceRoot":"","sources":["../src/oh-toggle.ts"],"names":[],"mappings":"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"}

package/dist/styles/typography.js

@@ -124,18 +124,18 @@ export const typographyStyles = css `
 
   a::after,
   .oh-link::after {
-    content: '';
+    content: "";
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
-    height: 2px;
+    height: var(--oh-decoration-underline-thickness);
     background: repeating-linear-gradient(
       to right,
       currentColor 0,
-      currentColor 4px,
-      transparent 4px,
-      transparent 8px
+      currentColor var(--oh-decoration-underline-dash),
+      transparent var(--oh-decoration-underline-dash),
+      transparent var(--oh-decoration-underline-period)
     );
     transform-origin: right;
     transition: transform var(--oh-motion-slow) ease;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orange-halo/components",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "description": "Web Components for Orange Halo Design System",
   "type": "module",
   "main": "./dist/index.js",
@@ -10,6 +10,7 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./custom-elements.json": "./custom-elements.json",
     "./oh-accordion.js": {
       "types": "./dist/oh-accordion.d.ts",
       "import": "./dist/oh-accordion.js"
@@ -113,6 +114,14 @@
     "./oh-tabs.js": {
       "types": "./dist/oh-tabs.d.ts",
       "import": "./dist/oh-tabs.js"
+    },
+    "./oh-textarea.js": {
+      "types": "./dist/oh-textarea.d.ts",
+      "import": "./dist/oh-textarea.js"
+    },
+    "./oh-toggle.js": {
+      "types": "./dist/oh-toggle.d.ts",
+      "import": "./dist/oh-toggle.js"
     }
   },
   "files": [
@@ -124,18 +133,20 @@
     "lit": "^3.2.1"
   },
   "peerDependencies": {
-    "@orange-halo/tokens": "^2.0.0",
+    "@orange-halo/tokens": "^2.2.0",
     "@orange-halo/utils": "^1.1.0"
   },
   "devDependencies": {
-    "@orange-halo/tokens": "2.0.0",
+    "@custom-elements-manifest/analyzer": "^0.11.0",
+    "@orange-halo/tokens": "2.2.0",
     "@orange-halo/utils": "1.1.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && cem analyze",
+    "analyze": "cem analyze",
     "dev": "tsc --watch",
     "clean": "rm -rf dist",
     "lint": "eslint src/",