@orange-halo/components 1.0.0 → 2.1.0

package/dist/oh-input.js

@@ -7,9 +7,9 @@
  * DESIGN DECISIONS:
  * ─────────────────
  * 1. CHUNKY & CONFIDENT
- *    - Thick border (2.5px) that feels illustrative
+ *    - Thick border (stroke.control) that feels illustrative
  *    - Solid fill, no subtle gradients
- *    - 10px rounded corners (matches button)
+ *    - shape.control corners (matches button)
  *
  * 2. INSET SHADOW (PRESSED IN)
  *    - Shadow offset to top-left (inset)
@@ -19,7 +19,7 @@
  * 3. FOCUS RISES UP
  *    - Inset shadow disappears
  *    - Outset shadow appears (field lifts)
- *    - Border turns marmalade
+ *    - Border turns brand orange
  *    - Clear visual hierarchy
  *
  * @element oh-input
@@ -31,7 +31,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, css, nothing } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
+import { customElement, property, query, state } from "lit/decorators.js";
 import { OhElement, baseStyles } from "./base.js";
 let OhInput = class OhInput extends OhElement {
     constructor() {
@@ -48,6 +48,12 @@ let OhInput = class OhInput extends OhElement {
          * Values: 'hover' | 'focus'
          */
         this.forceState = "default";
+        /**
+         * 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.styles = [
         baseStyles,
@@ -69,11 +75,11 @@ let OhInput = class OhInput extends OhElement {
 
       /* ─── Label: friendly and readable (16px minimum) ─── */
       .label {
-        font-family: var(--oh-font-family-sans);
-        font-size: var(--oh-font-size-base);
-        font-weight: var(--oh-font-weight-semibold);
+        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-font-letter-spacing-wide);
+        letter-spacing: var(--oh-typography-control-letter-spacing);
       }
 
       .label--required::after {
@@ -88,7 +94,7 @@ let OhInput = class OhInput extends OhElement {
 
       .input {
         width: 100%;
-        font-family: var(--oh-font-family-sans);
+        font-family: var(--oh-typography-control-font-family);
         color: var(--oh-color-text-primary);
         
         /* Solid fill — no gradients */
@@ -96,10 +102,10 @@ let OhInput = class OhInput extends OhElement {
         
         /* Thick illustrative border (WCAG 3:1 compliant) */
         border: var(--oh-input-base-border-width) solid var(--oh-color-border-emphasis);
-        border-radius: var(--oh-radius-md);
+        border-radius: var(--oh-shape-control);
         
         /* Inset offset shadow: pressed into page */
-        box-shadow: var(--oh-shadow-chunky-inset, inset 3px 3px 0 0 rgba(61, 50, 41, 0.15));
+        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,
@@ -119,11 +125,11 @@ let OhInput = class OhInput extends OhElement {
       /* ─── Focus: even inner ring on all sides (no layout shift) ─── */
       .input:focus {
         outline: none;
-        background-color: var(--oh-color-surface-white);
-        border-color: var(--oh-color-border-focus);
+        background-color: var(--oh-color-surface-highlight);
+        border-color: var(--oh-focus-ring-color);
         
-        /* 2px inset ring + 2.5px border = ~4.5px total, even on all sides */
-        box-shadow: inset 0 0 0 2px var(--oh-color-border-focus);
+        /* Inset ring + border, even on all sides */
+        box-shadow: inset 0 0 0 2px var(--oh-focus-ring-color);
       }
 
       /* ═══════════════════════════════════════════════════════════════
@@ -131,7 +137,7 @@ let OhInput = class OhInput extends OhElement {
          ═══════════════════════════════════════════════════════════════ */
 
       .input {
-        font-size: var(--oh-font-size-lg);
+        font-size: var(--oh-typography-control-font-size-md);
         padding: var(--oh-spacing-3) var(--oh-spacing-4);
         min-height: var(--oh-input-size-md-min-height);
       }
@@ -144,7 +150,7 @@ let OhInput = class OhInput extends OhElement {
       .input--error {
         border-color: var(--oh-color-feedback-error);
         background-color: var(--oh-color-feedback-error-subtle);
-        box-shadow: inset 3px 3px 0 0 var(--oh-shadow-error);
+        box-shadow: inset var(--oh-elevation-offset-md) var(--oh-elevation-offset-md) 0 0 var(--oh-shadow-error);
       }
 
       .input--error:focus {
@@ -157,10 +163,10 @@ let OhInput = class OhInput extends OhElement {
          ═══════════════════════════════════════════════════════════════ */
 
       .helper {
-        font-family: var(--oh-font-family-sans);
-        font-size: var(--oh-font-size-base);
+        font-family: var(--oh-typography-body-font-family);
+        font-size: var(--oh-typography-body-base-font-size);
         color: var(--oh-color-text-secondary);
-        letter-spacing: var(--oh-font-letter-spacing-wide);
+        letter-spacing: var(--oh-typography-control-letter-spacing);
       }
 
       .helper--error {
@@ -197,14 +203,14 @@ let OhInput = class OhInput extends OhElement {
 
       /* Forced Focus */
       :host([force-state="focus"]) .input {
-        background-color: var(--oh-color-surface-white);
-        border-color: var(--oh-color-border-focus);
-        box-shadow: inset 0 0 0 2px var(--oh-color-border-focus);
+        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);
       }
 
       /* Error + Forced Hover */
       :host([force-state="hover"]) .input--error {
-        border-color: var(--oh-color-feedback-error-hover, #b83a00);
+        border-color: var(--oh-color-feedback-error-hover);
       }
 
       /* Error + Forced Focus */
@@ -228,6 +234,11 @@ let OhInput = class OhInput extends OhElement {
     blur() {
         this._input?.blur();
     }
+    willUpdate(changed) {
+        if (this.hasUpdated && changed.has("errorText")) {
+            this._announceError = !!this.errorText;
+        }
+    }
     render() {
         const hasError = !!this.errorText;
         const helperContent = hasError ? this.errorText : this.helperText;
@@ -263,25 +274,23 @@ let OhInput = class OhInput extends OhElement {
           @change=${this._handleChange}
         />
 
-        ${helperContent
+        ${hasError
             ? html `
-              <span 
+              <span
                 id="helper"
-                class="helper ${hasError ? "helper--error" : ""}" 
+                class="helper helper--error"
                 part="helper"
-                role=${hasError ? "alert" : nothing}
+                role=${this._announceError ? "alert" : nothing}
               >
-                ${hasError
-                ? html `
-                      <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>
-                    `
-                : nothing}
-                ${helperContent}
+                <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}
+            : this.helperText
+                ? html `<span id="helper" class="helper" part="helper">${this.helperText}</span>`
+                : nothing}
       </div>
     `;
     }
@@ -313,6 +322,9 @@ __decorate([
 __decorate([
     query("input")
 ], OhInput.prototype, "_input", void 0);
+__decorate([
+    state()
+], OhInput.prototype, "_announceError", void 0);
 OhInput = __decorate([
     customElement("oh-input")
 ], OhInput);

package/dist/oh-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"oh-input.js","sourceRoot":"","sources":["../src/oh-input.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAM3C,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,SAAS;IAA/B;;QAwKL,SAAI,GAAc,MAAM,CAAC;QAGzB,UAAK,GAAG,EAAE,CAAC;QAGX,gBAAW,GAAG,EAAE,CAAC;QAGjB,UAAK,GAAG,EAAE,CAAC;QAGX,eAAU,GAAG,EAAE,CAAC;QAGhB,cAAS,GAAG,EAAE,CAAC;QAGf,aAAQ,GAAG,KAAK,CAAC;QAEjB;;;WAGG;QAEH,eAAU,GAAe,SAAS,CAAC;IAkFrC,CAAC;aAlRiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiKF;KACF,AApKqB,CAoKpB;IAiCM,YAAY,CAAC,KAAY;QAC/B,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAChD,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC,CAAC;IACrE,CAAC;IAEO,aAAa,CAAC,KAAY;QAChC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC,CAAC;IACtE,CAAC;IAED,KAAK;QACH,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,CAAC;IACvB,CAAC;IAED,IAAI;QACF,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC;IACtB,CAAC;IAED,MAAM;QACJ,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC;QAClC,MAAM,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC;QAElE,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC;YACjC,KAAK,EAAE,IAAI;YACX,cAAc,EAAE,QAAQ;SACzB,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA;;+BAEe,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE;;;;kBAInD,IAAI,CAAC,KAAK;;aAEf;YACH,CAAC,CAAC,OAAO;;;;;kBAKD,YAAY;iBACb,IAAI,CAAC,IAAI;mBACP,IAAI,CAAC,KAAK;wBACL,IAAI,CAAC,WAAW,IAAI,OAAO;sBAC7B,IAAI,CAAC,QAAQ;yBACV,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;6BACvB,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;mBAC5C,IAAI,CAAC,YAAY;oBAChB,IAAI,CAAC,aAAa;;;UAG5B,aAAa;YACb,CAAC,CAAC,IAAI,CAAA;;;gCAGgB,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE;;uBAExC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO;;kBAEjC,QAAQ;gBACR,CAAC,CAAC,IAAI,CAAA;;;;qBAIH;gBACH,CAAC,CAAC,OAAO;kBACT,aAAa;;aAElB;YACH,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;;AA1GD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACF;AAGzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAChB;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACV;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAChB;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACX;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACZ;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAC1B;AAOjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;2CACjC;AAG3B;IADP,KAAK,CAAC,OAAO,CAAC;uCACmB;AApMvB,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAmRnB"}
+{"version":3,"file":"oh-input.js","sourceRoot":"","sources":["../src/oh-input.ts"],"names":[],"mappings":"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"}

package/dist/oh-link.d.ts

@@ -9,7 +9,7 @@
  * 1. INLINE VARIANT
  *    - Dotted underline (quirky, retro feel)
  *    - Becomes solid on hover
- *    - Warm marmalade color
+ *    - Warm brand orange
  *    - Subtle but distinctive
  *
  * 2. STANDALONE VARIANT

package/dist/oh-link.js

@@ -9,7 +9,7 @@
  * 1. INLINE VARIANT
  *    - Dotted underline (quirky, retro feel)
  *    - Becomes solid on hover
- *    - Warm marmalade color
+ *    - Warm brand orange
  *    - Subtle but distinctive
  *
  * 2. STANDALONE VARIANT
@@ -57,8 +57,8 @@ let OhLink = class OhLink extends OhElement {
       }
 
       .link {
-        font-family: var(--oh-font-family-sans);
-        color: var(--oh-color-brand-primary);
+        font-family: var(--oh-typography-body-font-family);
+        color: var(--oh-color-text-link);
         text-decoration: none;
         cursor: pointer;
         position: relative;
@@ -81,13 +81,13 @@ let OhLink = class OhLink extends OhElement {
         left: 0;
         right: 0;
         bottom: 0;
-        height: 2px;
+        height: var(--oh-decoration-underline-thickness);
         background: repeating-linear-gradient(
           to right,
-          var(--oh-color-brand-primary) 0,
-          var(--oh-color-brand-primary) 4px,
-          transparent 4px,
-          transparent 8px
+          var(--oh-color-text-link) 0,
+          var(--oh-color-text-link) var(--oh-decoration-underline-dash),
+          transparent var(--oh-decoration-underline-dash),
+          transparent var(--oh-decoration-underline-period)
         );
         transform-origin: right;
         transform: scaleX(1);
@@ -126,7 +126,7 @@ let OhLink = class OhLink extends OhElement {
       .link--inline:focus .link__text::after {
         /* Solid underline on focus */
         background: var(--oh-color-brand-primary);
-        height: 3px;
+        height: var(--oh-decoration-underline-focus-thickness);
         transform: scaleX(1);
       }
 
@@ -138,12 +138,12 @@ let OhLink = class OhLink extends OhElement {
       .link--inline:focus:not(:focus-visible) .link__text::after {
         background: repeating-linear-gradient(
           to right,
-          var(--oh-color-brand-primary) 0,
-          var(--oh-color-brand-primary) 4px,
-          transparent 4px,
-          transparent 8px
+          var(--oh-color-text-link) 0,
+          var(--oh-color-text-link) var(--oh-decoration-underline-dash),
+          transparent var(--oh-decoration-underline-dash),
+          transparent var(--oh-decoration-underline-period)
         );
-        height: 2px;
+        height: var(--oh-decoration-underline-thickness);
       }
 
       /* ═══════════════════════════════════════════════════════════════
@@ -155,8 +155,8 @@ let OhLink = class OhLink extends OhElement {
         display: inline-flex;
         align-items: center;
         gap: var(--oh-spacing-2);
-        font-weight: var(--oh-font-weight-semibold);
-        font-size: var(--oh-font-size-lg);
+        font-weight: var(--oh-typography-emphasis-font-weight);
+        font-size: var(--oh-typography-body-lg-font-size);
         text-decoration: none;
         padding: var(--oh-spacing-1) 0;
       }
@@ -174,14 +174,14 @@ let OhLink = class OhLink extends OhElement {
         outline: 2px solid transparent;
         outline-offset: 2px;
         background-color: var(--oh-focus-glow-color);
-        border-radius: var(--oh-radius-xs);
+        border-radius: var(--oh-shape-tight);
         padding: var(--oh-spacing-1) var(--oh-spacing-2);
         margin: 0 calc(-1 * var(--oh-spacing-2));
       }
 
       .link--standalone:focus .link__text::after {
         background: var(--oh-color-brand-primary);
-        height: 3px;
+        height: var(--oh-decoration-underline-focus-thickness);
         transform: scaleX(1);
       }
 
@@ -195,12 +195,12 @@ let OhLink = class OhLink extends OhElement {
       .link--standalone:focus:not(:focus-visible) .link__text::after {
         background: repeating-linear-gradient(
           to right,
-          var(--oh-color-brand-primary) 0,
-          var(--oh-color-brand-primary) 4px,
-          transparent 4px,
-          transparent 8px
+          var(--oh-color-text-link) 0,
+          var(--oh-color-text-link) var(--oh-decoration-underline-dash),
+          transparent var(--oh-decoration-underline-dash),
+          transparent var(--oh-decoration-underline-period)
         );
-        height: 2px;
+        height: var(--oh-decoration-underline-thickness);
       }
 
       /* ═══════════════════════════════════════════════════════════════
@@ -253,7 +253,7 @@ let OhLink = class OhLink extends OhElement {
          ═══════════════════════════════════════════════════════════════ */
 
       .link:visited {
-        color: var(--oh-color-brand-primary);
+        color: var(--oh-color-text-link);
       }
 
       /* ═══════════════════════════════════════════════════════════════
@@ -273,14 +273,14 @@ let OhLink = class OhLink extends OhElement {
         background: repeating-linear-gradient(
           to right,
           var(--oh-color-text-on-accent) 0,
-          var(--oh-color-text-on-accent) 4px,
-          transparent 4px,
-          transparent 8px
+          var(--oh-color-text-on-accent) var(--oh-decoration-underline-dash),
+          transparent var(--oh-decoration-underline-dash),
+          transparent var(--oh-decoration-underline-period)
         );
       }
 
       :host([inverse]) .link--inline:focus {
-        background-color: rgba(0, 0, 0, 0.1);
+        background-color: var(--oh-link-inverse-focus-background);
       }
 
       :host([inverse]) .link--inline:focus .link__text::after {
@@ -295,14 +295,14 @@ let OhLink = class OhLink extends OhElement {
         background: repeating-linear-gradient(
           to right,
           var(--oh-color-text-on-accent) 0,
-          var(--oh-color-text-on-accent) 4px,
-          transparent 4px,
-          transparent 8px
+          var(--oh-color-text-on-accent) var(--oh-decoration-underline-dash),
+          transparent var(--oh-decoration-underline-dash),
+          transparent var(--oh-decoration-underline-period)
         );
       }
 
       :host([inverse]) .link--standalone:focus {
-        background-color: rgba(0, 0, 0, 0.1);
+        background-color: var(--oh-link-inverse-focus-background);
       }
 
       :host([inverse]) .link--standalone:focus .link__text::after {
@@ -317,9 +317,9 @@ let OhLink = class OhLink extends OhElement {
         background: repeating-linear-gradient(
           to right,
           var(--oh-color-text-on-accent) 0,
-          var(--oh-color-text-on-accent) 4px,
-          transparent 4px,
-          transparent 8px
+          var(--oh-color-text-on-accent) var(--oh-decoration-underline-dash),
+          transparent var(--oh-decoration-underline-dash),
+          transparent var(--oh-decoration-underline-period)
         );
       }
 

package/dist/oh-modal.d.ts

@@ -6,12 +6,12 @@
  * DESIGN DECISIONS:
  * ─────────────────
  * 1. CHUNKY & LIFTED
- *    - 2.5px border like other components
- *    - Offset shadow (4px 4px) — feels like a lifted surface
+ *    - stroke.control border like other components
+ *    - Offset shadow (elevation.offset.2xl) — feels like a lifted surface
  *    - Warm backdrop, not pure black
  *
  * 2. ACCESSIBLE
- *    - Focus trap when open
+ *    - Focus trap when open (focus guards at each end of the dialog)
  *    - Escape key closes (when dismissible)
  *    - Focus returns to trigger on close
  *    - role="dialog" + aria-modal="true"
@@ -38,8 +38,14 @@ export declare class OhModal extends OhElement {
     private _onOpen;
     private _onClose;
     private _handleKeyDown;
-    private _trapFocus;
+    /** Focusable elements in the dialog, in tab order, excluding the guards. */
     private _getFocusableElements;
+    /**
+     * Focus guards: Tab past the last control lands on the end guard, which
+     * wraps to the first; Shift+Tab before the first wraps to the last. This
+     * holds however the browser orders Tab (Safari skips links by default).
+     */
+    private _focusEdge;
     private _focusFirstElement;
     private _handleBackdropClick;
     private _requestClose;

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

@@ -1 +1 @@
-{"version":3,"file":"oh-modal.d.ts","sourceRoot":"","sources":["../src/oh-modal.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,qBACa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,4BA0NpB;IAGF,IAAI,UAAS;IAGb,OAAO,SAAM;IAGb,WAAW,UAAQ;IAGnB,IAAI,EAAE,SAAS,CAAQ;IAGvB,OAAO,CAAC,sBAAsB,CAA4B;IAI1D,OAAO,CAAC,YAAY,CAAqB;IAEzC,iBAAiB;IAKjB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAU/C,OAAO,CAAC,OAAO;IAoBf,OAAO,CAAC,QAAQ;IAchB,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,UAAU;IAsBlB,OAAO,CAAC,qBAAqB;IAqB7B,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,oBAAoB;IAM5B,OAAO,CAAC,aAAa;IAKrB,oBAAoB;IAMpB,MAAM;CA8DP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
+{"version":3,"file":"oh-modal.d.ts","sourceRoot":"","sources":["../src/oh-modal.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAGlD,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,qBACa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,4BA4OpB;IAGF,IAAI,UAAS;IAGb,OAAO,SAAM;IAGb,WAAW,UAAQ;IAGnB,IAAI,EAAE,SAAS,CAAQ;IAGvB,OAAO,CAAC,sBAAsB,CAA4B;IAI1D,OAAO,CAAC,YAAY,CAAqB;IAEzC,iBAAiB;IAKjB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAU/C,OAAO,CAAC,OAAO;IAwBf,OAAO,CAAC,QAAQ;IAchB,OAAO,CAAC,cAAc;IAOtB,4EAA4E;IAC5E,OAAO,CAAC,qBAAqB;IAK7B;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,oBAAoB;IAM5B,OAAO,CAAC,aAAa;IAKrB,oBAAoB;IAMpB,MAAM;CAgEP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}