@orange-halo/components 1.0.0

package/dist/oh-checkbox-group.js

@@ -0,0 +1,309 @@
+/**
+ * oh-checkbox-group
+ *
+ * A checkbox group with proper semantics and group-level error handling.
+ * For single checkboxes, use oh-checkbox directly.
+ *
+ * ACCESSIBILITY:
+ * ─────────────
+ * - Uses <fieldset> and <legend> for proper semantics
+ * - Group-level error messaging with aria-describedby
+ * - Visible focus ring (outline, not inset)
+ * - aria-invalid for error state
+ *
+ * @element oh-checkbox-group
+ */
+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 } from "lit/decorators.js";
+import { OhElement, baseStyles } from "./base.js";
+let OhCheckboxGroup = class OhCheckboxGroup extends OhElement {
+    constructor() {
+        super(...arguments);
+        this.legend = "";
+        this.name = "";
+        this.options = [];
+        this.value = [];
+        this.required = false;
+        this.error = false;
+        this.errorMessage = "";
+    }
+    static { this.styles = [
+        baseStyles,
+        css `
+      :host {
+        display: block;
+      }
+
+      .checkbox-group {
+        display: flex;
+        flex-direction: column;
+        gap: var(--oh-spacing-2);
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         FIELDSET & LEGEND
+         ═══════════════════════════════════════════════════════════════ */
+
+      fieldset {
+        border: none;
+        margin: 0;
+        padding: 0;
+        min-width: 0;
+      }
+
+      legend {
+        font-family: var(--oh-font-family-sans);
+        font-size: var(--oh-font-size-base);
+        font-weight: var(--oh-font-weight-semibold);
+        color: var(--oh-color-text-primary);
+        margin-bottom: var(--oh-spacing-2);
+        padding: 0;
+        display: block;
+        width: 100%;
+      }
+
+      legend.legend--required::after {
+        content: " *";
+        color: var(--oh-color-feedback-error);
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         CHECKBOX OPTION
+         ═══════════════════════════════════════════════════════════════ */
+
+      .checkbox-option {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--oh-spacing-3);
+        cursor: pointer;
+        position: relative;
+      }
+
+      .native-checkbox {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+      }
+
+      .checkbox-box {
+        position: relative;
+        width: 24px;
+        height: 24px;
+        flex-shrink: 0;
+        border: var(--oh-input-base-border-width) solid var(--oh-color-border-emphasis);
+        border-radius: var(--oh-radius-sm);
+        background-color: var(--oh-color-surface-base);
+        box-shadow: 3px 3px 0 0 var(--oh-shadow-secondary);
+        transition: 
+          transform var(--oh-motion-snappy) var(--oh-motion-ease-playful),
+          box-shadow var(--oh-motion-snappy) var(--oh-motion-ease-playful),
+          background-color var(--oh-motion-quick) ease,
+          border-color var(--oh-motion-quick) ease;
+      }
+
+      .checkbox-box::after {
+        content: '';
+        position: absolute;
+        top: 3px;
+        left: 7px;
+        width: 6px;
+        height: 12px;
+        border: solid var(--oh-color-text-on-brand);
+        border-width: 0 3px 3px 0;
+        transform: rotate(45deg);
+        opacity: 0;
+        transition: opacity var(--oh-motion-snappy) ease;
+      }
+
+      .option-label {
+        font-family: var(--oh-font-family-sans);
+        font-size: var(--oh-font-size-lg);
+        line-height: var(--oh-font-line-height-normal);
+        color: var(--oh-color-text-primary);
+        user-select: none;
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         STATES
+         ═══════════════════════════════════════════════════════════════ */
+
+      /* Hover: lift up-left, shadow grows */
+      .checkbox-option:hover .checkbox-box {
+        border-color: var(--oh-color-border-hover);
+        transform: translate(-1px, -1px);
+        box-shadow: 4px 4px 0 0 var(--oh-shadow-secondary);
+      }
+
+      /* Active: press down-right, shadow shrinks */
+      .checkbox-option:active .checkbox-box {
+        transform: translate(1px, 1px);
+        box-shadow: 1px 1px 0 0 var(--oh-shadow-secondary);
+      }
+
+      /* Checked: primary color with warm shadow */
+      .native-checkbox:checked + .checkbox-box {
+        background-color: var(--oh-color-brand-primary);
+        border-color: var(--oh-color-brand-primary);
+        box-shadow: 3px 3px 0 0 var(--oh-shadow-primary);
+      }
+
+      .native-checkbox:checked + .checkbox-box::after {
+        opacity: 1;
+      }
+
+      /* Checked + Hover */
+      .checkbox-option:hover .native-checkbox:checked + .checkbox-box {
+        background-color: var(--oh-color-brand-primary-hover);
+        border-color: var(--oh-color-brand-primary-hover);
+        transform: translate(-1px, -1px);
+        box-shadow: 4px 4px 0 0 var(--oh-shadow-primary);
+      }
+
+      /* Checked + Active */
+      .checkbox-option:active .native-checkbox:checked + .checkbox-box {
+        background-color: var(--oh-color-brand-primary-active);
+        transform: translate(1px, 1px);
+        box-shadow: 1px 1px 0 0 var(--oh-shadow-primary);
+      }
+
+      /* Focus: underline the label (accessible indicator) */
+      .native-checkbox:focus-visible ~ .option-label {
+        text-decoration: underline;
+        text-underline-offset: var(--oh-spacing-1);
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         ERROR STATE
+         ═══════════════════════════════════════════════════════════════ */
+
+      :host([error]) .checkbox-box {
+        border-color: var(--oh-color-feedback-error);
+        box-shadow: 3px 3px 0 0 var(--oh-shadow-error);
+      }
+
+      :host([error]) .checkbox-option:hover .checkbox-box {
+        border-color: var(--oh-color-feedback-error-hover);
+        box-shadow: 4px 4px 0 0 var(--oh-shadow-error);
+      }
+
+      .error-message {
+        display: flex;
+        align-items: center;
+        gap: var(--oh-spacing-2);
+        font-family: var(--oh-font-family-sans);
+        font-size: var(--oh-font-size-base);
+        color: var(--oh-color-feedback-error);
+        margin-bottom: var(--oh-spacing-2);
+      }
+
+      .error-icon {
+        flex-shrink: 0;
+        width: var(--oh-font-size-lg);
+        height: var(--oh-font-size-lg);
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         REDUCED MOTION
+         ═══════════════════════════════════════════════════════════════ */
+
+      @media (prefers-reduced-motion: reduce) {
+        .checkbox-box,
+        .checkbox-box::after {
+          transition-duration: 0.01ms !important;
+        }
+      }
+    `,
+    ]; }
+    _handleChange(event, optionValue) {
+        const target = event.target;
+        if (target.checked) {
+            this.value = [...this.value, optionValue];
+        }
+        else {
+            this.value = this.value.filter(v => v !== optionValue);
+        }
+        this.emit("oh-change", { value: this.value });
+    }
+    render() {
+        return html `
+      <fieldset
+        aria-invalid=${this.error ? "true" : nothing}
+        aria-describedby=${this.error && this.errorMessage ? "error-msg" : nothing}
+      >
+        ${this.legend
+            ? html `
+              <legend class="${this.required ? "legend--required" : ""}">
+                ${this.legend}
+              </legend>
+            `
+            : nothing}
+
+        ${this.error && this.errorMessage
+            ? html `
+              <div id="error-msg" class="error-message" role="alert">
+                <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.errorMessage}
+              </div>
+            `
+            : nothing}
+        
+        <div class="checkbox-group">
+          ${this.options.map((option) => html `
+              <label class="checkbox-option">
+                <input
+                  type="checkbox"
+                  class="native-checkbox"
+                  name=${this.name}
+                  .value=${option.value}
+                  .checked=${this.value.includes(option.value)}
+                  @change=${(e) => this._handleChange(e, option.value)}
+                />
+                <span class="checkbox-box"></span>
+                <span class="option-label">${option.label}</span>
+              </label>
+            `)}
+        </div>
+      </fieldset>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], OhCheckboxGroup.prototype, "legend", void 0);
+__decorate([
+    property({ type: String })
+], OhCheckboxGroup.prototype, "name", void 0);
+__decorate([
+    property({ type: Array })
+], OhCheckboxGroup.prototype, "options", void 0);
+__decorate([
+    property({ type: Array })
+], OhCheckboxGroup.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], OhCheckboxGroup.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], OhCheckboxGroup.prototype, "error", void 0);
+__decorate([
+    property({ type: String })
+], OhCheckboxGroup.prototype, "errorMessage", void 0);
+OhCheckboxGroup = __decorate([
+    customElement("oh-checkbox-group")
+], OhCheckboxGroup);
+export { OhCheckboxGroup };
+//# sourceMappingURL=oh-checkbox-group.js.map

package/dist/oh-checkbox-group.js.map

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

package/dist/oh-checkbox.d.ts

@@ -0,0 +1,50 @@
+/**
+ * oh-checkbox
+ *
+ * A chunky, playful checkbox with hand-crafted feel.
+ * Matches the inset/pressed aesthetic of oh-input.
+ *
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * 1. CHUNKY & TACTILE
+ *    - Thick 2.5px border
+ *    - Inset shadow when unchecked (pressed into page)
+ *    - 6px border radius (slightly less than buttons)
+ *
+ * 2. CHECKED STATE
+ *    - Filled with primary color
+ *    - Custom chunky checkmark
+ *    - Shadow shifts to feel "activated"
+ *
+ * 3. ACCESSIBILITY
+ *    - Native checkbox hidden but accessible
+ *    - Label always required
+ *    - Focus ring matches input (even inner ring)
+ *    - Minimum touch target 44px
+ *
+ * @element oh-checkbox
+ */
+import { OhElement } from "./base.js";
+export type CheckboxState = "default" | "hover" | "focus";
+export declare class OhCheckbox extends OhElement {
+    static styles: import("lit").CSSResult[];
+    checked: boolean;
+    label: string;
+    name: string;
+    value: string;
+    error: boolean;
+    errorMessage: string;
+    /**
+     * Force a visual state (for documentation/Figma sync only)
+     * Values: 'hover' | 'focus'
+     */
+    forceState: CheckboxState;
+    private _handleChange;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "oh-checkbox": OhCheckbox;
+    }
+}
+//# sourceMappingURL=oh-checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"oh-checkbox.d.ts","sourceRoot":"","sources":["../src/oh-checkbox.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAE1D,qBACa,UAAW,SAAQ,SAAS;IACvC,OAAgB,MAAM,4BAyMpB;IAGF,OAAO,UAAS;IAGhB,KAAK,SAAM;IAGX,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,KAAK,UAAS;IAGd,YAAY,SAAM;IAElB;;;OAGG;IAEH,UAAU,EAAE,aAAa,CAAa;IAEtC,OAAO,CAAC,aAAa;IAMrB,MAAM;CAgCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/oh-checkbox.js

@@ -0,0 +1,315 @@
+/**
+ * oh-checkbox
+ *
+ * A chunky, playful checkbox with hand-crafted feel.
+ * Matches the inset/pressed aesthetic of oh-input.
+ *
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * 1. CHUNKY & TACTILE
+ *    - Thick 2.5px border
+ *    - Inset shadow when unchecked (pressed into page)
+ *    - 6px border radius (slightly less than buttons)
+ *
+ * 2. CHECKED STATE
+ *    - Filled with primary color
+ *    - Custom chunky checkmark
+ *    - Shadow shifts to feel "activated"
+ *
+ * 3. ACCESSIBILITY
+ *    - Native checkbox hidden but accessible
+ *    - Label always required
+ *    - Focus ring matches input (even inner ring)
+ *    - Minimum touch target 44px
+ *
+ * @element oh-checkbox
+ */
+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 } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { OhElement, baseStyles } from "./base.js";
+let OhCheckbox = class OhCheckbox extends OhElement {
+    constructor() {
+        super(...arguments);
+        this.checked = false;
+        this.label = "";
+        this.name = "";
+        this.value = "";
+        this.error = false;
+        this.errorMessage = "";
+        /**
+         * Force a visual state (for documentation/Figma sync only)
+         * Values: 'hover' | 'focus'
+         */
+        this.forceState = "default";
+    }
+    static { this.styles = [
+        baseStyles,
+        css `
+      /* ═══════════════════════════════════════════════════════════════
+         ORANGE HALO CHECKBOX
+         Chunky • Tactile • Playful
+         ═══════════════════════════════════════════════════════════════ */
+
+      :host {
+        display: inline-block;
+      }
+
+      .checkbox-wrapper {
+        display: inline-flex;
+        align-items: flex-start;
+        gap: var(--oh-spacing-3);
+        cursor: pointer;
+      }
+
+      /* Hide native checkbox but keep it accessible */
+      .native-checkbox {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         CUSTOM CHECKBOX BOX
+         ═══════════════════════════════════════════════════════════════ */
+
+      .checkbox-box {
+        position: relative;
+        width: 24px;
+        height: 24px;
+        flex-shrink: 0;
+        
+        /* Chunky border */
+        border: var(--oh-input-base-border-width) solid var(--oh-color-border-emphasis);
+        border-radius: var(--oh-radius-sm);
+        
+        /* Offset shadow like primary button */
+        background-color: var(--oh-color-surface-base);
+        box-shadow: 3px 3px 0 0 var(--oh-shadow-secondary);
+        
+        transition: 
+          transform var(--oh-motion-snappy) var(--oh-motion-ease-playful),
+          box-shadow var(--oh-motion-snappy) var(--oh-motion-ease-playful),
+          background-color var(--oh-motion-quick) ease,
+          border-color var(--oh-motion-quick) ease;
+      }
+
+      /* Checkmark (hidden by default) */
+      .checkbox-box::after {
+        content: '';
+        position: absolute;
+        top: 3px;
+        left: 7px;
+        width: 6px;
+        height: 12px;
+        border: solid var(--oh-color-text-on-brand);
+        border-width: 0 3px 3px 0;
+        transform: rotate(45deg);
+        opacity: 0;
+        transition: opacity var(--oh-motion-snappy) ease;
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         STATES
+         ═══════════════════════════════════════════════════════════════ */
+
+      /* Hover: lift up-left, shadow grows */
+      .checkbox-wrapper:hover .checkbox-box {
+        border-color: var(--oh-color-border-hover);
+        transform: translate(-1px, -1px);
+        box-shadow: 4px 4px 0 0 var(--oh-shadow-secondary);
+      }
+
+      /* Active: press down-right, shadow shrinks */
+      .checkbox-wrapper:active .checkbox-box {
+        transform: translate(1px, 1px);
+        box-shadow: 1px 1px 0 0 var(--oh-shadow-secondary);
+      }
+
+      /* Checked: primary color with warm shadow */
+      .native-checkbox:checked + .checkbox-box {
+        background-color: var(--oh-color-brand-primary);
+        border-color: var(--oh-color-brand-primary);
+        box-shadow: 3px 3px 0 0 var(--oh-shadow-primary);
+      }
+
+      .native-checkbox:checked + .checkbox-box::after {
+        opacity: 1;
+      }
+
+      /* Checked + Hover */
+      .checkbox-wrapper:hover .native-checkbox:checked + .checkbox-box {
+        background-color: var(--oh-color-brand-primary-hover);
+        border-color: var(--oh-color-brand-primary-hover);
+        transform: translate(-1px, -1px);
+        box-shadow: 4px 4px 0 0 var(--oh-shadow-primary);
+      }
+
+      /* Checked + Active */
+      .checkbox-wrapper:active .native-checkbox:checked + .checkbox-box {
+        background-color: var(--oh-color-brand-primary-active);
+        transform: translate(1px, 1px);
+        box-shadow: 1px 1px 0 0 var(--oh-shadow-primary);
+      }
+
+      /* Focus: underline the label (accessible indicator) */
+      .native-checkbox:focus-visible ~ .label {
+        text-decoration: underline;
+        text-underline-offset: var(--oh-spacing-1);
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         LABEL
+         ═══════════════════════════════════════════════════════════════ */
+
+      .label {
+        font-family: var(--oh-font-family-sans);
+        font-size: var(--oh-font-size-lg);
+        line-height: var(--oh-font-line-height-normal);
+        color: var(--oh-color-text-primary);
+        user-select: none;
+        padding-top: 0; /* Align with checkbox */
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         ERROR STATE
+         ═══════════════════════════════════════════════════════════════ */
+
+      :host([error]) .checkbox-box {
+        border-color: var(--oh-color-feedback-error);
+        box-shadow: 3px 3px 0 0 var(--oh-shadow-error);
+      }
+
+      :host([error]) .checkbox-wrapper:hover .checkbox-box {
+        border-color: var(--oh-color-feedback-error-hover);
+        box-shadow: 4px 4px 0 0 var(--oh-shadow-error);
+      }
+
+      .error-message {
+        display: flex;
+        align-items: center;
+        gap: var(--oh-spacing-2);
+        font-family: var(--oh-font-family-sans);
+        font-size: var(--oh-font-size-base);
+        color: var(--oh-color-feedback-error);
+        margin-top: var(--oh-spacing-1);
+        margin-left: calc(24px + var(--oh-spacing-3)); /* Align with label */
+      }
+
+      .error-icon {
+        flex-shrink: 0;
+        width: var(--oh-spacing-4);
+        height: var(--oh-spacing-4);
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         REDUCED MOTION
+         ═══════════════════════════════════════════════════════════════ */
+
+      @media (prefers-reduced-motion: reduce) {
+        .checkbox-box,
+        .checkbox-box::after {
+          transition-duration: 0.01ms !important;
+        }
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         FORCED STATES (for Figma Sync / documentation)
+         ═══════════════════════════════════════════════════════════════ */
+
+      /* Forced Hover - Unchecked */
+      :host([force-state="hover"]) .checkbox-box {
+        border-color: var(--oh-color-border-hover);
+        transform: translate(-1px, -1px);
+        box-shadow: 4px 4px 0 0 var(--oh-shadow-secondary);
+      }
+
+      /* Forced Focus - Unchecked */
+      :host([force-state="focus"]) .label {
+        text-decoration: underline;
+        text-underline-offset: var(--oh-spacing-1);
+      }
+
+      /* Forced Hover - Checked */
+      :host([force-state="hover"][checked]) .checkbox-box {
+        background-color: var(--oh-color-brand-primary-hover);
+        border-color: var(--oh-color-brand-primary-hover);
+        transform: translate(-1px, -1px);
+        box-shadow: 4px 4px 0 0 var(--oh-shadow-primary);
+      }
+    `,
+    ]; }
+    _handleChange(event) {
+        const target = event.target;
+        this.checked = target.checked;
+        this.emit("oh-change", { checked: this.checked, value: this.value });
+    }
+    render() {
+        const inputId = this.name || `oh-checkbox-${Math.random().toString(36).substr(2, 9)}`;
+        return html `
+      <div>
+        <label class="checkbox-wrapper" for=${inputId}>
+          <input
+            type="checkbox"
+            class="native-checkbox"
+            id=${inputId}
+            name=${this.name}
+            .value=${this.value}
+            .checked=${this.checked}
+            aria-invalid=${this.error ? "true" : "false"}
+            @change=${this._handleChange}
+          />
+          <span class="checkbox-box" part="box"></span>
+          <span class="label" part="label">${this.label}</span>
+        </label>
+        ${this.error && this.errorMessage
+            ? html `
+              <div class="error-message" part="error" role="alert">
+                <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.errorMessage}
+              </div>
+            `
+            : ""}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], OhCheckbox.prototype, "checked", void 0);
+__decorate([
+    property({ type: String })
+], OhCheckbox.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], OhCheckbox.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], OhCheckbox.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], OhCheckbox.prototype, "error", void 0);
+__decorate([
+    property({ type: String })
+], OhCheckbox.prototype, "errorMessage", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: "force-state" })
+], OhCheckbox.prototype, "forceState", void 0);
+OhCheckbox = __decorate([
+    customElement("oh-checkbox")
+], OhCheckbox);
+export { OhCheckbox };
+//# sourceMappingURL=oh-checkbox.js.map

package/dist/oh-checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"oh-checkbox.js","sourceRoot":"","sources":["../src/oh-checkbox.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAK3C,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,SAAS;IAAlC;;QA6ML,YAAO,GAAG,KAAK,CAAC;QAGhB,UAAK,GAAG,EAAE,CAAC;QAGX,SAAI,GAAG,EAAE,CAAC;QAGV,UAAK,GAAG,EAAE,CAAC;QAGX,UAAK,GAAG,KAAK,CAAC;QAGd,iBAAY,GAAG,EAAE,CAAC;QAElB;;;WAGG;QAEH,eAAU,GAAkB,SAAS,CAAC;IAwCxC,CAAC;aA1QiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsMF;KACF,AAzMqB,CAyMpB;IA2BM,aAAa,CAAC,KAAY;QAChC,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAChD,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;QAC9B,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IACvE,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,IAAI,eAAe,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;QAEtF,OAAO,IAAI,CAAA;;8CAE+B,OAAO;;;;iBAIpC,OAAO;mBACL,IAAI,CAAC,IAAI;qBACP,IAAI,CAAC,KAAK;uBACR,IAAI,CAAC,OAAO;2BACR,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;sBAClC,IAAI,CAAC,aAAa;;;6CAGK,IAAI,CAAC,KAAK;;UAE7C,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY;YAC/B,CAAC,CAAC,IAAI,CAAA;;;;;kBAKE,IAAI,CAAC,YAAY;;aAEtB;YACH,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;;AA7DD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAC3B;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAChB;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAChB;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAC7B;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACT;AAOlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;8CAC9B;AAnO3B,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CA2QtB"}