@orange-halo/components 2.1.0 → 3.0.0

package/dist/oh-textarea.d.ts

@@ -0,0 +1,129 @@
+/**
+ * oh-textarea
+ *
+ * A multi-line text field for messages, comments and feedback.
+ *
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * 1. SAME FAMILY AS oh-input
+ *    - Same tokens: stroke.control border in color.border.emphasis,
+ *      shape.control corners, an inset shadow offset by elevation.offset.md
+ *      in elevation.color.field
+ *    - Focus is a solid inset ring in focus.ringColor inside the border;
+ *      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.
+ *
+ * **Use it for** messages, comments, feedback: text that may run to several
+ * lines. **Don't use it for** a single line of text (use `oh-input`).
+ *
+ * **States:** rest, hover, focus, error (set `error-text`), disabled,
+ * required. `rows` sets the visible lines (default 4); people can drag it
+ * taller. `maxlength` limits the length.
+ *
+ * **Behaviour:** form-associated. Give it a `name` and it submits with the
+ * form. `required` stops the form submitting while it's empty, with the
+ * browser's own message. A form reset restores its starting text, and a
+ * disabled `<fieldset>` disables it. Fires `oh-input` on every keystroke and
+ * `oh-change` when the value is committed. Its line height is 1.5 times the
+ * text size, rounded up to `grid.unit`, so long messages stay on the grid.
+ *
+ * **Accessibility:** always set `label`: it names the field. A placeholder
+ * isn't a label. Helper and error text are linked to the field with
+ * `aria-describedby`, so screen readers read them. Errors come before the
+ * field, with an icon, set `aria-invalid`, and are announced only when they
+ * appear after the page has loaded. Focus is a solid inset ring. Use
+ * `autocomplete` when the field asks for something a browser can fill in,
+ * such as an address (WCAG 1.3.5).
+ *
+ * **Look:** set by tokens — `stroke.control` in `color.border.emphasis`
+ * (border), `shape.control` (corners), `typography.control.*` (type),
+ * `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-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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;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,401 @@
+/**
+ * oh-textarea
+ *
+ * A multi-line text field for messages, comments and feedback.
+ *
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * 1. SAME FAMILY AS oh-input
+ *    - Same tokens: stroke.control border in color.border.emphasis,
+ *      shape.control corners, an inset shadow offset by elevation.offset.md
+ *      in elevation.color.field
+ *    - Focus is a solid inset ring in focus.ringColor inside the border;
+ *      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.
+ *
+ * **Use it for** messages, comments, feedback: text that may run to several
+ * lines. **Don't use it for** a single line of text (use `oh-input`).
+ *
+ * **States:** rest, hover, focus, error (set `error-text`), disabled,
+ * required. `rows` sets the visible lines (default 4); people can drag it
+ * taller. `maxlength` limits the length.
+ *
+ * **Behaviour:** form-associated. Give it a `name` and it submits with the
+ * form. `required` stops the form submitting while it's empty, with the
+ * browser's own message. A form reset restores its starting text, and a
+ * disabled `<fieldset>` disables it. Fires `oh-input` on every keystroke and
+ * `oh-change` when the value is committed. Its line height is 1.5 times the
+ * text size, rounded up to `grid.unit`, so long messages stay on the grid.
+ *
+ * **Accessibility:** always set `label`: it names the field. A placeholder
+ * isn't a label. Helper and error text are linked to the field with
+ * `aria-describedby`, so screen readers read them. Errors come before the
+ * field, with an icon, set `aria-invalid`, and are announced only when they
+ * appear after the page has loaded. Focus is a solid inset ring. Use
+ * `autocomplete` when the field asks for something a browser can fill in,
+ * such as an address (WCAG 1.3.5).
+ *
+ * **Look:** set by tokens — `stroke.control` in `color.border.emphasis`
+ * (border), `shape.control` (corners), `typography.control.*` (type),
+ * `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-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-elevation-color-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-elevation-color-error);
+      }
+
+      .textarea--error:focus {
+        border-color: var(--oh-color-feedback-error);
+        box-shadow: inset 0 0 0 2px var(--oh-color-feedback-error);
+      }
+
+      /* Disabled: color.*.disabled tokens, no shadow, no resizing */
+      .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

@@ -1,30 +1,63 @@
 /**
  * oh-toggle
  *
- * A toggle/switch component for binary on/off states.
+ * A switch for binary on/off settings.
  *
  * DESIGN DECISIONS:
  * ─────────────────
- * 1. CHUNKY 3D FEEL
- *    - Thumb offset up-left from center to appear "popping out"
- *    - Shadow flips horizontally when checked (light source stays consistent)
- *    - Smooth slide animation
+ * 1. LOOK FROM TOKENS
+ *    - Track: shape.pill, color.surface.raised off, color.brand.primary on
+ *    - Thumb: color.surface.base with a stroke.control border in
+ *      color.border.emphasis, and a shadow offset by elevation.offset.*
+ *      (elevation.color.secondary off, elevation.color.primary on). The shadow's horizontal
+ *      offset flips when checked; hover and press move the thumb by
+ *      lift.hoverSm / lift.pressSm
  *
  * 2. VISUAL STATES
- *    - Off: Neutral track, thumb on left, shadow bottom-right
- *    - On: Brand primary track, thumb on right, shadow bottom-left (flipped)
+ *    - Off: thumb at the start of the track; on: thumb at the end
  *
  * 3. ACCESSIBILITY
- *    - Uses role="switch" with aria-checked
+ *    - role="switch" with aria-checked on a focusable track
  *    - Keyboard: Space/Enter to toggle
- *    - Focus ring matches design system
- *    - Label association via aria-labelledby
+ *    - Focus: a solid outline in focus.ringColor (focus.glowColor adds a
+ *      glow around it, as decoration)
+ *    - Named by its visible label (aria-labelledby) or accessible-label
+ */
+import { OhElement } from "./base.js";
+/**
+ * A switch that turns a setting on or off.
+ *
+ * **Use it for** a setting that takes effect straight away, such as turning
+ * notifications on. **Don't use it for** a choice that's only applied when a
+ * form is submitted, or one that must be agreed to (use `oh-checkbox`), or
+ * a choice between more than two options (use `oh-radio-group`).
+ *
+ * **States:** off, on, hover, active, focus.
+ *
+ * **Behaviour:** clicking the switch or its label, or pressing Space or
+ * Enter while it's focused, flips `checked` and fires `oh-change` with
+ * `{ checked }`. `name` and `value` are stored but it isn't form-associated,
+ * so it doesn't submit with a native form: listen for `oh-change`. It has no
+ * `disabled` property. Under `prefers-reduced-motion` it doesn't animate.
+ *
+ * **Accessibility:** `role="switch"` with `aria-checked`, in the tab order.
+ * Set `label` (a visible label, linked with `aria-labelledby`), or
+ * `accessible-label` when there's no visible label (not `aria-label`, which
+ * isn't forwarded into the shadow root). Focus is a solid outline in
+ * `focus.ringColor`.
+ *
+ * **Look:** set by tokens — `shape.pill` (track), `color.surface.raised` /
+ * `color.brand.primary` (track off / on), `color.surface.base`,
+ * `stroke.control` and `color.border.emphasis` (thumb),
+ * `elevation.offset.*` with `elevation.color.secondary` / `elevation.color.primary` (thumb
+ * shadow off / on), `lift.hoverSm` / `lift.pressSm` (movement on hover and
+ * press), `focus.ringColor` and `focus.glowColor` (focus),
+ * `typography.body.*` (label).
  *
  * @element oh-toggle
  *
- * @fires oh-change - Fired when the toggle state changes
+ * @fires oh-change - Fired when the toggle state changes. detail: { checked }
  */
-import { OhElement } from "./base.js";
 export declare class OhToggle extends OhElement {
     static styles: import("lit").CSSResult[];
     /** Whether the toggle is checked/on */

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;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BA4HpB;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"}