@openelement/ui 0.41.0-alpha.1

package/src/open-dialog.js

@@ -0,0 +1,235 @@
+/** @jsxImportSource @openelement/core */ /**
+ * @openelement/ui - open-dialog
+ *
+ * Dialog component using native <dialog> element + popover API.
+ * Per WHATWG HTML Living Standard sections 4.11.4 (dialog) and 6.9.2 (popover).
+ *
+ * v0.20.0: Migrated from DsdLitElement to DsdElement (Ocean component).
+ * v0.24.1: Migrated from html`` template to JSX (ADR-0057).
+ *
+ * @csspart overlay - The dialog backdrop/element
+ * @csspart header -The header bar
+ * @csspart close -The close button
+ * @csspart body -The content area (<slot>)
+ * @csspart footer -The optional footer slot
+ *
+ * Usage:
+ * ```html
+ * <open-dialog>
+ *   <button slot="trigger">Open Dialog</button>
+ *   <div>Dialog content here</div>
+ * </open-dialog>
+ * ```
+ */ import { OpenElement } from '@openelement/element';
+import { StyleSheet } from '@openelement/core/style-sheet';
+import { escapeAttr, escapeHtml } from '@openelement/core';
+export const tagName = 'open-dialog';
+const sheet = new StyleSheet();
+sheet.replaceSync(`
+  :host {
+    display: inline-block;
+  }
+
+  ::slotted([slot="trigger"]) {
+    cursor: pointer;
+  }
+
+  dialog {
+    border: var(--border-size-1) solid var(--gray-3);
+    border-radius: var(--radius-3);
+    background: var(--gray-0);
+    color: var(--gray-9);
+    padding: var(--size-6);
+    max-width: min(90vw, 480px);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+    font-family: var(--font-sans);
+  }
+
+  dialog::backdrop {
+    background: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(4px);
+  }
+
+  dialog[open] {
+    animation: dialogFadeIn 0.2s ease-out;
+  }
+
+  @keyframes dialogFadeIn {
+    from { opacity: 0; transform: translateY(-8px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  .dialog-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--size-4);
+  }
+
+  .dialog-title {
+    font-size: var(--font-size-2);
+    font-weight: var(--font-weight-6);
+    color: var(--gray-9);
+    margin: 0;
+  }
+
+  .dialog-close {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--gray-5);
+    font-size: var(--font-size-2);
+    line-height: var(--font-lineheight-1);
+    padding: var(--size-1);
+    border-radius: var(--radius-1);
+    transition: color 0.15s ease;
+  }
+
+  .dialog-close:hover {
+    color: var(--gray-9);
+    background: rgba(83,74,183,0.06);
+  }
+
+  .dialog-body {
+    font-size: var(--font-size-1);
+    color: var(--gray-7);
+    line-height: var(--font-lineheight-3);
+  }
+
+  .dialog-footer {
+    margin-top: var(--size-5);
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--size-2);
+  }
+
+  :host(:state(open)) dialog {
+    display: block;
+  }
+`);
+export class OpenDialog extends OpenElement {
+  static styles = [
+    sheet
+  ];
+  static delegatesFocus = true;
+  static observedAttributes = [
+    'open',
+    'label'
+  ];
+  static _originalInertStates = new WeakMap();
+  render() {
+    const label = this._esc(this.getAttribute('label') || '');
+    return <>
+        <slot name='trigger' onClick={()=>this._handleTrigger()}></slot>
+        <dialog aria-label={this.getAttribute('label') || ''} part='overlay' onCancel={(e)=>this._handleCancel(e)} onClose={()=>this._handleClose()}>
+          <div className='dialog-header' part='header'>
+            <h2 className='dialog-title'>{label}</h2>
+            <button type='button' className='dialog-close' part='close' aria-label='Close' onClick={()=>this._handleClose()}>
+              &times;
+            </button>
+          </div>
+          <div className='dialog-body' part='body'>
+            <slot></slot>
+          </div>
+          <div className='dialog-footer' part='footer'>
+            <slot name='footer'></slot>
+          </div>
+        </dialog>
+      </>;
+  }
+  attributeChangedCallback(name, old, val) {
+    if (old === val) return;
+    if (name === 'open') {
+      this._updateStates();
+      this._syncDialogElement();
+      this._syncInert();
+    }
+  }
+  _updateStates() {
+    if (!this._internals?.states) return;
+    if (this.hasAttribute('open')) {
+      this._internals.states.add('open');
+      this._internals.states.delete('closed');
+    } else {
+      this._internals.states.delete('open');
+      this._internals.states.add('closed');
+    }
+  }
+  show() {
+    this.setAttribute('open', '');
+  }
+  close() {
+    this.removeAttribute('open');
+  }
+  toggle() {
+    if (this.hasAttribute('open')) this.removeAttribute('open');
+    else this.setAttribute('open', '');
+  }
+  _syncDialogElement() {
+    const dialog1 = this.shadowRoot?.querySelector('dialog');
+    if (!dialog1) return;
+    if (this.hasAttribute('open') && !dialog1.open) {
+      dialog1.showModal();
+    } else if (!this.hasAttribute('open') && dialog1.open) {
+      dialog1.close();
+    }
+  }
+  _syncInert() {
+    const parent = this.parentNode;
+    if (!parent) return;
+    const parentEl = parent instanceof ShadowRoot ? parent.host.parentNode : parent;
+    if (!parentEl) return;
+    const children = [
+      ...parentEl.children
+    ];
+    const open = this.hasAttribute('open');
+    if (open) {
+      for (const child of children){
+        if (child !== this) {
+          if (!OpenDialog._originalInertStates.has(child)) {
+            OpenDialog._originalInertStates.set(child, child.hasAttribute('inert'));
+          }
+          child.setAttribute('inert', '');
+        }
+      }
+    } else {
+      for (const child of children){
+        if (child !== this) {
+          const wasOriginallyInert = OpenDialog._originalInertStates.get(child);
+          if (wasOriginallyInert) child.setAttribute('inert', '');
+          else child.removeAttribute('inert');
+          OpenDialog._originalInertStates.delete(child);
+        }
+      }
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.hasAttribute('open')) this._syncInert();
+  }
+  _handleClose() {
+    this.removeAttribute('open');
+    this._updateStates();
+    this._syncDialogElement();
+    this._syncInert();
+    this.dispatchEvent(new CustomEvent('open-dialog-close', {
+      bubbles: true,
+      composed: true
+    }));
+  }
+  _handleCancel(e) {
+    e.preventDefault();
+    this._handleClose();
+  }
+  _handleTrigger() {
+    this.toggle();
+  }
+  _esc = escapeHtml;
+  _escAttr = escapeAttr;
+}
+export default OpenDialog;
+// Guard: idempotent across SSR paths
+if (typeof customElements !== 'undefined' && !customElements.get(tagName)) {
+  customElements.define(tagName, OpenDialog);
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZpbGU6Ly8vaG9tZS9ydW5uZXIvd29yay9vcGVuZWxlbWVudC9vcGVuZWxlbWVudC9wYWNrYWdlcy91aS9zcmMvb3Blbi1kaWFsb2cudHN4Il0sInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4SW1wb3J0U291cmNlIEBvcGVuZWxlbWVudC9jb3JlICovXG4vKipcbiAqIEBvcGVuZWxlbWVudC91aSAtIG9wZW4tZGlhbG9nXG4gKlxuICogRGlhbG9nIGNvbXBvbmVudCB1c2luZyBuYXRpdmUgPGRpYWxvZz4gZWxlbWVudCArIHBvcG92ZXIgQVBJLlxuICogUGVyIFdIQVRXRyBIVE1MIExpdmluZyBTdGFuZGFyZCBzZWN0aW9ucyA0LjExLjQgKGRpYWxvZykgYW5kIDYuOS4yIChwb3BvdmVyKS5cbiAqXG4gKiB2MC4yMC4wOiBNaWdyYXRlZCBmcm9tIERzZExpdEVsZW1lbnQgdG8gRHNkRWxlbWVudCAoT2NlYW4gY29tcG9uZW50KS5cbiAqIHYwLjI0LjE6IE1pZ3JhdGVkIGZyb20gaHRtbGBgIHRlbXBsYXRlIHRvIEpTWCAoQURSLTAwNTcpLlxuICpcbiAqIEBjc3NwYXJ0IG92ZXJsYXkgLSBUaGUgZGlhbG9nIGJhY2tkcm9wL2VsZW1lbnRcbiAqIEBjc3NwYXJ0IGhlYWRlciAtVGhlIGhlYWRlciBiYXJcbiAqIEBjc3NwYXJ0IGNsb3NlIC1UaGUgY2xvc2UgYnV0dG9uXG4gKiBAY3NzcGFydCBib2R5IC1UaGUgY29udGVudCBhcmVhICg8c2xvdD4pXG4gKiBAY3NzcGFydCBmb290ZXIgLVRoZSBvcHRpb25hbCBmb290ZXIgc2xvdFxuICpcbiAqIFVzYWdlOlxuICogYGBgaHRtbFxuICogPG9wZW4tZGlhbG9nPlxuICogICA8YnV0dG9uIHNsb3Q9XCJ0cmlnZ2VyXCI+T3BlbiBEaWFsb2c8L2J1dHRvbj5cbiAqICAgPGRpdj5EaWFsb2cgY29udGVudCBoZXJlPC9kaXY+XG4gKiA8L29wZW4tZGlhbG9nPlxuICogYGBgXG4gKi9cblxuaW1wb3J0IHsgT3BlbkVsZW1lbnQgfSBmcm9tICdAb3BlbmVsZW1lbnQvZWxlbWVudCc7XG5pbXBvcnQgeyBTdHlsZVNoZWV0LCB0eXBlIFN0eWxlU2hlZXRMaWtlIH0gZnJvbSAnQG9wZW5lbGVtZW50L2NvcmUvc3R5bGUtc2hlZXQnO1xuaW1wb3J0IHsgZXNjYXBlQXR0ciwgZXNjYXBlSHRtbCB9IGZyb20gJ0BvcGVuZWxlbWVudC9jb3JlJztcblxuZXhwb3J0IGNvbnN0IHRhZ05hbWUgPSAnb3Blbi1kaWFsb2cnO1xuXG5jb25zdCBzaGVldDogU3R5bGVTaGVldExpa2UgPSBuZXcgU3R5bGVTaGVldCgpO1xuc2hlZXQucmVwbGFjZVN5bmMoYFxuICA6aG9zdCB7XG4gICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICB9XG5cbiAgOjpzbG90dGVkKFtzbG90PVwidHJpZ2dlclwiXSkge1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgfVxuXG4gIGRpYWxvZyB7XG4gICAgYm9yZGVyOiB2YXIoLS1ib3JkZXItc2l6ZS0xKSBzb2xpZCB2YXIoLS1ncmF5LTMpO1xuICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLXJhZGl1cy0zKTtcbiAgICBiYWNrZ3JvdW5kOiB2YXIoLS1ncmF5LTApO1xuICAgIGNvbG9yOiB2YXIoLS1ncmF5LTkpO1xuICAgIHBhZGRpbmc6IHZhcigtLXNpemUtNik7XG4gICAgbWF4LXdpZHRoOiBtaW4oOTB2dywgNDgwcHgpO1xuICAgIGJveC1zaGFkb3c6IDAgOHB4IDMycHggcmdiYSgwLCAwLCAwLCAwLjEyKTtcbiAgICBmb250LWZhbWlseTogdmFyKC0tZm9udC1zYW5zKTtcbiAgfVxuXG4gIGRpYWxvZzo6YmFja2Ryb3Age1xuICAgIGJhY2tncm91bmQ6IHJnYmEoMCwgMCwgMCwgMC40KTtcbiAgICBiYWNrZHJvcC1maWx0ZXI6IGJsdXIoNHB4KTtcbiAgfVxuXG4gIGRpYWxvZ1tvcGVuXSB7XG4gICAgYW5pbWF0aW9uOiBkaWFsb2dGYWRlSW4gMC4ycyBlYXNlLW91dDtcbiAgfVxuXG4gIEBrZXlmcmFtZXMgZGlhbG9nRmFkZUluIHtcbiAgICBmcm9tIHsgb3BhY2l0eTogMDsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC04cHgpOyB9XG4gICAgdG8geyBvcGFjaXR5OiAxOyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCk7IH1cbiAgfVxuXG4gIC5kaWFsb2ctaGVhZGVyIHtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIG1hcmdpbi1ib3R0b206IHZhcigtLXNpemUtNCk7XG4gIH1cblxuICAuZGlhbG9nLXRpdGxlIHtcbiAgICBmb250LXNpemU6IHZhcigtLWZvbnQtc2l6ZS0yKTtcbiAgICBmb250LXdlaWdodDogdmFyKC0tZm9udC13ZWlnaHQtNik7XG4gICAgY29sb3I6IHZhcigtLWdyYXktOSk7XG4gICAgbWFyZ2luOiAwO1xuICB9XG5cbiAgLmRpYWxvZy1jbG9zZSB7XG4gICAgYmFja2dyb3VuZDogbm9uZTtcbiAgICBib3JkZXI6IG5vbmU7XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICAgIGNvbG9yOiB2YXIoLS1ncmF5LTUpO1xuICAgIGZvbnQtc2l6ZTogdmFyKC0tZm9udC1zaXplLTIpO1xuICAgIGxpbmUtaGVpZ2h0OiB2YXIoLS1mb250LWxpbmVoZWlnaHQtMSk7XG4gICAgcGFkZGluZzogdmFyKC0tc2l6ZS0xKTtcbiAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1yYWRpdXMtMSk7XG4gICAgdHJhbnNpdGlvbjogY29sb3IgMC4xNXMgZWFzZTtcbiAgfVxuXG4gIC5kaWFsb2ctY2xvc2U6aG92ZXIge1xuICAgIGNvbG9yOiB2YXIoLS1ncmF5LTkpO1xuICAgIGJhY2tncm91bmQ6IHJnYmEoODMsNzQsMTgzLDAuMDYpO1xuICB9XG5cbiAgLmRpYWxvZy1ib2R5IHtcbiAgICBmb250LXNpemU6IHZhcigtLWZvbnQtc2l6ZS0xKTtcbiAgICBjb2xvcjogdmFyKC0tZ3JheS03KTtcbiAgICBsaW5lLWhlaWdodDogdmFyKC0tZm9udC1saW5laGVpZ2h0LTMpO1xuICB9XG5cbiAgLmRpYWxvZy1mb290ZXIge1xuICAgIG1hcmdpbi10b3A6IHZhcigtLXNpemUtNSk7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtZW5kO1xuICAgIGdhcDogdmFyKC0tc2l6ZS0yKTtcbiAgfVxuXG4gIDpob3N0KDpzdGF0ZShvcGVuKSkgZGlhbG9nIHtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgfVxuYCk7XG5cbmV4cG9ydCBjbGFzcyBPcGVuRGlhbG9nIGV4dGVuZHMgT3BlbkVsZW1lbnQge1xuICBzdGF0aWMgb3ZlcnJpZGUgc3R5bGVzID0gW3NoZWV0XTtcbiAgc3RhdGljIG92ZXJyaWRlIGRlbGVnYXRlc0ZvY3VzID0gdHJ1ZTtcbiAgc3RhdGljIG92ZXJyaWRlIG9ic2VydmVkQXR0cmlidXRlcyA9IFsnb3BlbicsICdsYWJlbCddO1xuXG4gIHByaXZhdGUgc3RhdGljIF9vcmlnaW5hbEluZXJ0U3RhdGVzID0gbmV3IFdlYWtNYXA8RWxlbWVudCwgYm9vbGVhbj4oKTtcblxuICBvdmVycmlkZSByZW5kZXIoKTogUmV0dXJuVHlwZTx0eXBlb2YgT3BlbkVsZW1lbnQucHJvdG90eXBlLnJlbmRlcj4ge1xuICAgIGNvbnN0IGxhYmVsID0gdGhpcy5fZXNjKHRoaXMuZ2V0QXR0cmlidXRlKCdsYWJlbCcpIHx8ICcnKTtcbiAgICByZXR1cm4gKFxuICAgICAgPD5cbiAgICAgICAgPHNsb3QgbmFtZT0ndHJpZ2dlcicgb25DbGljaz17KCkgPT4gdGhpcy5faGFuZGxlVHJpZ2dlcigpfT48L3Nsb3Q+XG4gICAgICAgIDxkaWFsb2dcbiAgICAgICAgICBhcmlhLWxhYmVsPXt0aGlzLmdldEF0dHJpYnV0ZSgnbGFiZWwnKSB8fCAnJ31cbiAgICAgICAgICBwYXJ0PSdvdmVybGF5J1xuICAgICAgICAgIG9uQ2FuY2VsPXsoZTogRXZlbnQpID0+IHRoaXMuX2hhbmRsZUNhbmNlbChlKX1cbiAgICAgICAgICBvbkNsb3NlPXsoKSA9PiB0aGlzLl9oYW5kbGVDbG9zZSgpfVxuICAgICAgICA+XG4gICAgICAgICAgPGRpdiBjbGFzc05hbWU9J2RpYWxvZy1oZWFkZXInIHBhcnQ9J2hlYWRlcic+XG4gICAgICAgICAgICA8aDIgY2xhc3NOYW1lPSdkaWFsb2ctdGl0bGUnPntsYWJlbH08L2gyPlxuICAgICAgICAgICAgPGJ1dHRvblxuICAgICAgICAgICAgICB0eXBlPSdidXR0b24nXG4gICAgICAgICAgICAgIGNsYXNzTmFtZT0nZGlhbG9nLWNsb3NlJ1xuICAgICAgICAgICAgICBwYXJ0PSdjbG9zZSdcbiAgICAgICAgICAgICAgYXJpYS1sYWJlbD0nQ2xvc2UnXG4gICAgICAgICAgICAgIG9uQ2xpY2s9eygpID0+IHRoaXMuX2hhbmRsZUNsb3NlKCl9XG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgICZ0aW1lcztcbiAgICAgICAgICAgIDwvYnV0dG9uPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPSdkaWFsb2ctYm9keScgcGFydD0nYm9keSc+XG4gICAgICAgICAgICA8c2xvdD48L3Nsb3Q+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgPGRpdiBjbGFzc05hbWU9J2RpYWxvZy1mb290ZXInIHBhcnQ9J2Zvb3Rlcic+XG4gICAgICAgICAgICA8c2xvdCBuYW1lPSdmb290ZXInPjwvc2xvdD5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaWFsb2c+XG4gICAgICA8Lz5cbiAgICApO1xuICB9XG5cbiAgb3ZlcnJpZGUgYXR0cmlidXRlQ2hhbmdlZENhbGxiYWNrKG5hbWU6IHN0cmluZywgb2xkOiBzdHJpbmcgfCBudWxsLCB2YWw6IHN0cmluZyB8IG51bGwpOiB2b2lkIHtcbiAgICBpZiAob2xkID09PSB2YWwpIHJldHVybjtcbiAgICBpZiAobmFtZSA9PT0gJ29wZW4nKSB7XG4gICAgICB0aGlzLl91cGRhdGVTdGF0ZXMoKTtcbiAgICAgIHRoaXMuX3N5bmNEaWFsb2dFbGVtZW50KCk7XG4gICAgICB0aGlzLl9zeW5jSW5lcnQoKTtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIF91cGRhdGVTdGF0ZXMoKTogdm9pZCB7XG4gICAgaWYgKCF0aGlzLl9pbnRlcm5hbHM/LnN0YXRlcykgcmV0dXJuO1xuICAgIGlmICh0aGlzLmhhc0F0dHJpYnV0ZSgnb3BlbicpKSB7XG4gICAgICB0aGlzLl9pbnRlcm5hbHMuc3RhdGVzLmFkZCgnb3BlbicpO1xuICAgICAgdGhpcy5faW50ZXJuYWxzLnN0YXRlcy5kZWxldGUoJ2Nsb3NlZCcpO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLl9pbnRlcm5hbHMuc3RhdGVzLmRlbGV0ZSgnb3BlbicpO1xuICAgICAgdGhpcy5faW50ZXJuYWxzLnN0YXRlcy5hZGQoJ2Nsb3NlZCcpO1xuICAgIH1cbiAgfVxuXG4gIHNob3coKTogdm9pZCB7XG4gICAgdGhpcy5zZXRBdHRyaWJ1dGUoJ29wZW4nLCAnJyk7XG4gIH1cblxuICBjbG9zZSgpOiB2b2lkIHtcbiAgICB0aGlzLnJlbW92ZUF0dHJpYnV0ZSgnb3BlbicpO1xuICB9XG5cbiAgdG9nZ2xlKCk6IHZvaWQge1xuICAgIGlmICh0aGlzLmhhc0F0dHJpYnV0ZSgnb3BlbicpKSB0aGlzLnJlbW92ZUF0dHJpYnV0ZSgnb3BlbicpO1xuICAgIGVsc2UgdGhpcy5zZXRBdHRyaWJ1dGUoJ29wZW4nLCAnJyk7XG4gIH1cblxuICBwcml2YXRlIF9zeW5jRGlhbG9nRWxlbWVudCgpOiB2b2lkIHtcbiAgICBjb25zdCBkaWFsb2cgPSB0aGlzLnNoYWRvd1Jvb3Q/LnF1ZXJ5U2VsZWN0b3IoJ2RpYWxvZycpO1xuICAgIGlmICghZGlhbG9nKSByZXR1cm47XG4gICAgaWYgKHRoaXMuaGFzQXR0cmlidXRlKCdvcGVuJykgJiYgIWRpYWxvZy5vcGVuKSB7XG4gICAgICBkaWFsb2cuc2hvd01vZGFsKCk7XG4gICAgfSBlbHNlIGlmICghdGhpcy5oYXNBdHRyaWJ1dGUoJ29wZW4nKSAmJiBkaWFsb2cub3Blbikge1xuICAgICAgZGlhbG9nLmNsb3NlKCk7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBfc3luY0luZXJ0KCk6IHZvaWQge1xuICAgIGNvbnN0IHBhcmVudCA9IHRoaXMucGFyZW50Tm9kZTtcbiAgICBpZiAoIXBhcmVudCkgcmV0dXJuO1xuICAgIGNvbnN0IHBhcmVudEVsID0gcGFyZW50IGluc3RhbmNlb2YgU2hhZG93Um9vdFxuICAgICAgPyAocGFyZW50Lmhvc3QucGFyZW50Tm9kZSBhcyBFbGVtZW50KVxuICAgICAgOiAocGFyZW50IGFzIEVsZW1lbnQpO1xuICAgIGlmICghcGFyZW50RWwpIHJldHVybjtcblxuICAgIGNvbnN0IGNoaWxkcmVuID0gWy4uLnBhcmVudEVsLmNoaWxkcmVuXTtcbiAgICBjb25zdCBvcGVuID0gdGhpcy5oYXNBdHRyaWJ1dGUoJ29wZW4nKTtcbiAgICBpZiAob3Blbikge1xuICAgICAgZm9yIChjb25zdCBjaGlsZCBvZiBjaGlsZHJlbikge1xuICAgICAgICBpZiAoY2hpbGQgIT09IHRoaXMpIHtcbiAgICAgICAgICBpZiAoIU9wZW5EaWFsb2cuX29yaWdpbmFsSW5lcnRTdGF0ZXMuaGFzKGNoaWxkKSkge1xuICAgICAgICAgICAgT3BlbkRpYWxvZy5fb3JpZ2luYWxJbmVydFN0YXRlcy5zZXQoY2hpbGQsIGNoaWxkLmhhc0F0dHJpYnV0ZSgnaW5lcnQnKSk7XG4gICAgICAgICAgfVxuICAgICAgICAgIGNoaWxkLnNldEF0dHJpYnV0ZSgnaW5lcnQnLCAnJyk7XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9IGVsc2Uge1xuICAgICAgZm9yIChjb25zdCBjaGlsZCBvZiBjaGlsZHJlbikge1xuICAgICAgICBpZiAoY2hpbGQgIT09IHRoaXMpIHtcbiAgICAgICAgICBjb25zdCB3YXNPcmlnaW5hbGx5SW5lcnQgPSBPcGVuRGlhbG9nLl9vcmlnaW5hbEluZXJ0U3RhdGVzLmdldChjaGlsZCk7XG4gICAgICAgICAgaWYgKHdhc09yaWdpbmFsbHlJbmVydCkgY2hpbGQuc2V0QXR0cmlidXRlKCdpbmVydCcsICcnKTtcbiAgICAgICAgICBlbHNlIGNoaWxkLnJlbW92ZUF0dHJpYnV0ZSgnaW5lcnQnKTtcbiAgICAgICAgICBPcGVuRGlhbG9nLl9vcmlnaW5hbEluZXJ0U3RhdGVzLmRlbGV0ZShjaGlsZCk7XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9XG4gIH1cblxuICBvdmVycmlkZSBkaXNjb25uZWN0ZWRDYWxsYmFjaygpOiB2b2lkIHtcbiAgICBzdXBlci5kaXNjb25uZWN0ZWRDYWxsYmFjaygpO1xuICAgIGlmICh0aGlzLmhhc0F0dHJpYnV0ZSgnb3BlbicpKSB0aGlzLl9zeW5jSW5lcnQoKTtcbiAgfVxuXG4gIHByaXZhdGUgX2hhbmRsZUNsb3NlKCk6IHZvaWQge1xuICAgIHRoaXMucmVtb3ZlQXR0cmlidXRlKCdvcGVuJyk7XG4gICAgdGhpcy5fdXBkYXRlU3RhdGVzKCk7XG4gICAgdGhpcy5fc3luY0RpYWxvZ0VsZW1lbnQoKTtcbiAgICB0aGlzLl9zeW5jSW5lcnQoKTtcbiAgICB0aGlzLmRpc3BhdGNoRXZlbnQobmV3IEN1c3RvbUV2ZW50KCdvcGVuLWRpYWxvZy1jbG9zZScsIHsgYnViYmxlczogdHJ1ZSwgY29tcG9zZWQ6IHRydWUgfSkpO1xuICB9XG5cbiAgcHJpdmF0ZSBfaGFuZGxlQ2FuY2VsKGU6IEV2ZW50KTogdm9pZCB7XG4gICAgZS5wcmV2ZW50RGVmYXVsdCgpO1xuICAgIHRoaXMuX2hhbmRsZUNsb3NlKCk7XG4gIH1cblxuICBwcml2YXRlIF9oYW5kbGVUcmlnZ2VyKCk6IHZvaWQge1xuICAgIHRoaXMudG9nZ2xlKCk7XG4gIH1cblxuICBwcml2YXRlIF9lc2MgPSBlc2NhcGVIdG1sO1xuICBwcml2YXRlIF9lc2NBdHRyID0gZXNjYXBlQXR0cjtcbn1cblxuZXhwb3J0IGRlZmF1bHQgT3BlbkRpYWxvZztcblxuLy8gR3VhcmQ6IGlkZW1wb3RlbnQgYWNyb3NzIFNTUiBwYXRoc1xuaWYgKHR5cGVvZiBjdXN0b21FbGVtZW50cyAhPT0gJ3VuZGVmaW5lZCcgJiYgIWN1c3RvbUVsZW1lbnRzLmdldCh0YWdOYW1lKSkge1xuICBjdXN0b21FbGVtZW50cy5kZWZpbmUodGFnTmFtZSwgT3BlbkRpYWxvZyk7XG59XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsdUNBQXVDLEdBQ3ZDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0NBc0JDLEdBRUQsU0FBUyxXQUFXLFFBQVEsdUJBQXVCO0FBQ25ELFNBQVMsVUFBVSxRQUE2QixnQ0FBZ0M7QUFDaEYsU0FBUyxVQUFVLEVBQUUsVUFBVSxRQUFRLG9CQUFvQjtBQUUzRCxPQUFPLE1BQU0sVUFBVSxjQUFjO0FBRXJDLE1BQU0sUUFBd0IsSUFBSTtBQUNsQyxNQUFNLFdBQVcsQ0FBQyxDQUFDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFpRm5CLENBQUM7QUFFRCxPQUFPLE1BQU0sbUJBQW1CO0VBQzlCLE9BQWdCLFNBQVM7SUFBQztHQUFNLENBQUM7RUFDakMsT0FBZ0IsaUJBQWlCLEtBQUs7RUFDdEMsT0FBZ0IscUJBQXFCO0lBQUM7SUFBUTtHQUFRLENBQUM7RUFFdkQsT0FBZSx1QkFBdUIsSUFBSSxVQUE0QjtFQUU3RCxTQUEwRDtJQUNqRSxNQUFNLFFBQVEsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLFlBQVk7SUFDdEQsU0FDSTtRQUNBLENBQUMsS0FBSyxLQUFLLFVBQVUsU0FBUyxJQUFNLElBQUksQ0FBQyxjQUFjLE1BQU0sS0FBSztRQUNsRSxDQUFDLE9BQ0MsWUFBWSxJQUFJLENBQUMsWUFBWSxDQUFDLFlBQVksSUFDMUMsS0FBSyxVQUNMLFVBQVUsQ0FBQyxJQUFhLElBQUksQ0FBQyxhQUFhLENBQUMsSUFDM0MsU0FBUyxJQUFNLElBQUksQ0FBQyxZQUFZLElBQ2pDO1VBQ0MsQ0FBQyxJQUFJLFVBQVUs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

package/src/open-dropdown.d.ts

@@ -0,0 +1,25 @@
+/** @jsxImportSource @openelement/core */ /**
+ * @openelement/ui - open-dropdown
+ *
+ * DaisyUI-style dropdown using DsdElement + Signals.
+ * State is reflected to the host `data-open` attribute.
+ * CSS uses `:host([data-open="true"])` to control visibility.
+ *
+ * Usage:
+ * ```html
+ * <open-dropdown>
+ *   <button slot="trigger">Open</button>
+ *   <div>Dropdown content</div>
+ * </open-dropdown>
+ * ```
+ *
+ * @slot trigger - Click target to toggle the dropdown
+ * @slot - Dropdown content (shown when open)
+ */ import { OpenElement, type VNode } from '@openelement/element';
+import { daisyClassSheet } from "./daisy-classes.js";
+export declare const tagName: 'open-dropdown';
+export declare class OpenDropdown extends OpenElement {
+  static override styles: [];
+  override render(): VNode;
+}
+export default OpenDropdown;

package/src/open-dropdown.js

@@ -0,0 +1,45 @@
+/** @jsxImportSource @openelement/core */ /**
+ * @openelement/ui - open-dropdown
+ *
+ * DaisyUI-style dropdown using DsdElement + Signals.
+ * State is reflected to the host `data-open` attribute.
+ * CSS uses `:host([data-open="true"])` to control visibility.
+ *
+ * Usage:
+ * ```html
+ * <open-dropdown>
+ *   <button slot="trigger">Open</button>
+ *   <div>Dropdown content</div>
+ * </open-dropdown>
+ * ```
+ *
+ * @slot trigger - Click target to toggle the dropdown
+ * @slot - Dropdown content (shown when open)
+ */ import { OpenElement } from '@openelement/element';
+import { signal } from '@openelement/signal';
+import { daisyClassSheet } from './daisy-classes.js';
+export const tagName = 'open-dropdown';
+export class OpenDropdown extends OpenElement {
+  static styles = [
+    daisyClassSheet
+  ];
+  #open = signal(false);
+  #toggle() {
+    this.#open.value = !this.#open.value;
+    this.setAttribute('data-open', String(this.#open.value));
+  }
+  render() {
+    return <div class='dropdown'>
+        <slot name='trigger' onClick={()=>this.#toggle()}/>
+        <div class='dropdown-content'>
+          <slot/>
+        </div>
+      </div>;
+  }
+}
+export default OpenDropdown;
+// Guard: idempotent across SSR paths
+if (typeof customElements !== 'undefined' && !customElements.get(tagName)) {
+  customElements.define(tagName, OpenDropdown);
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZpbGU6Ly8vaG9tZS9ydW5uZXIvd29yay9vcGVuZWxlbWVudC9vcGVuZWxlbWVudC9wYWNrYWdlcy91aS9zcmMvb3Blbi1kcm9wZG93bi50c3giXSwic291cmNlc0NvbnRlbnQiOlsiLyoqIEBqc3hJbXBvcnRTb3VyY2UgQG9wZW5lbGVtZW50L2NvcmUgKi9cbi8qKlxuICogQG9wZW5lbGVtZW50L3VpIC0gb3Blbi1kcm9wZG93blxuICpcbiAqIERhaXN5VUktc3R5bGUgZHJvcGRvd24gdXNpbmcgRHNkRWxlbWVudCArIFNpZ25hbHMuXG4gKiBTdGF0ZSBpcyByZWZsZWN0ZWQgdG8gdGhlIGhvc3QgYGRhdGEtb3BlbmAgYXR0cmlidXRlLlxuICogQ1NTIHVzZXMgYDpob3N0KFtkYXRhLW9wZW49XCJ0cnVlXCJdKWAgdG8gY29udHJvbCB2aXNpYmlsaXR5LlxuICpcbiAqIFVzYWdlOlxuICogYGBgaHRtbFxuICogPG9wZW4tZHJvcGRvd24+XG4gKiAgIDxidXR0b24gc2xvdD1cInRyaWdnZXJcIj5PcGVuPC9idXR0b24+XG4gKiAgIDxkaXY+RHJvcGRvd24gY29udGVudDwvZGl2PlxuICogPC9vcGVuLWRyb3Bkb3duPlxuICogYGBgXG4gKlxuICogQHNsb3QgdHJpZ2dlciAtIENsaWNrIHRhcmdldCB0byB0b2dnbGUgdGhlIGRyb3Bkb3duXG4gKiBAc2xvdCAtIERyb3Bkb3duIGNvbnRlbnQgKHNob3duIHdoZW4gb3BlbilcbiAqL1xuXG5pbXBvcnQgeyBPcGVuRWxlbWVudCwgdHlwZSBWTm9kZSB9IGZyb20gJ0BvcGVuZWxlbWVudC9lbGVtZW50JztcbmltcG9ydCB7IHNpZ25hbCB9IGZyb20gJ0BvcGVuZWxlbWVudC9zaWduYWwnO1xuaW1wb3J0IHsgZGFpc3lDbGFzc1NoZWV0IH0gZnJvbSAnLi9kYWlzeS1jbGFzc2VzLmpzJztcblxuZXhwb3J0IGNvbnN0IHRhZ05hbWUgPSAnb3Blbi1kcm9wZG93bic7XG5cbmV4cG9ydCBjbGFzcyBPcGVuRHJvcGRvd24gZXh0ZW5kcyBPcGVuRWxlbWVudCB7XG4gIHN0YXRpYyBvdmVycmlkZSBzdHlsZXMgPSBbZGFpc3lDbGFzc1NoZWV0XTtcbiAgI29wZW4gPSBzaWduYWwoZmFsc2UpO1xuXG4gICN0b2dnbGUoKTogdm9pZCB7XG4gICAgdGhpcy4jb3Blbi52YWx1ZSA9ICF0aGlzLiNvcGVuLnZhbHVlO1xuICAgIHRoaXMuc2V0QXR0cmlidXRlKCdkYXRhLW9wZW4nLCBTdHJpbmcodGhpcy4jb3Blbi52YWx1ZSkpO1xuICB9XG5cbiAgb3ZlcnJpZGUgcmVuZGVyKCk6IFZOb2RlIHtcbiAgICByZXR1cm4gKFxuICAgICAgPGRpdiBjbGFzcz0nZHJvcGRvd24nPlxuICAgICAgICA8c2xvdCBuYW1lPSd0cmlnZ2VyJyBvbkNsaWNrPXsoKSA9PiB0aGlzLiN0b2dnbGUoKX0gLz5cbiAgICAgICAgPGRpdiBjbGFzcz0nZHJvcGRvd24tY29udGVudCc+XG4gICAgICAgICAgPHNsb3QgLz5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICApO1xuICB9XG59XG5cbmV4cG9ydCBkZWZhdWx0IE9wZW5Ecm9wZG93bjtcblxuLy8gR3VhcmQ6IGlkZW1wb3RlbnQgYWNyb3NzIFNTUiBwYXRoc1xuaWYgKHR5cGVvZiBjdXN0b21FbGVtZW50cyAhPT0gJ3VuZGVmaW5lZCcgJiYgIWN1c3RvbUVsZW1lbnRzLmdldCh0YWdOYW1lKSkge1xuICBjdXN0b21FbGVtZW50cy5kZWZpbmUodGFnTmFtZSwgT3BlbkRyb3Bkb3duKTtcbn1cbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSx1Q0FBdUMsR0FDdkM7Ozs7Ozs7Ozs7Ozs7Ozs7O0NBaUJDLEdBRUQsU0FBUyxXQUFXLFFBQW9CLHVCQUF1QjtBQUMvRCxTQUFTLE1BQU0sUUFBUSxzQkFBc0I7QUFDN0MsU0FBUyxlQUFlLFFBQVEscUJBQXFCO0FBRXJELE9BQU8sTUFBTSxVQUFVLGdCQUFnQjtBQUV2QyxPQUFPLE1BQU0scUJBQXFCO0VBQ2hDLE9BQWdCLFNBQVM7SUFBQztHQUFnQixDQUFDO0VBQzNDLENBQUEsSUFBSyxHQUFHLE9BQU8sT0FBTztFQUV0QixDQUFBLE1BQU87SUFDTCxJQUFJLENBQUMsQ0FBQSxJQUFLLENBQUMsS0FBSyxHQUFHLENBQUMsSUFBSSxDQUFDLENBQUEsSUFBSyxDQUFDLEtBQUs7SUFDcEMsSUFBSSxDQUFDLFlBQVksQ0FBQyxhQUFhLE9BQU8sSUFBSSxDQUFDLENBQUEsSUFBSyxDQUFDLEtBQUs7RUFDeEQ7RUFFUyxTQUFnQjtJQUN2QixRQUNHLElBQUksTUFBTSxXQUFXO1FBQ3BCLENBQUMsS0FBSyxLQUFLLFVBQVUsU0FBUyxJQUFNLElBQUksQ0FBQyxDQUFBLE1BQU8sS0FBTTtRQUN0RCxDQUFDLElBQUksTUFBTSxtQkFBbUI7VUFDNUIsQ0FBQyxNQUFPO1FBQ1YsRUFBRSxJQUFJO01BQ1IsRUFBRTtFQUVOO0FBQ0Y7QUFFQSxlQUFlLGFBQWE7QUFFNUIscUNBQXFDO0FBQ3JDLElBQUksT0FBTyxtQkFBbUIsZUFBZSxDQUFDLGVBQWUsR0FBRyxDQUFDLFVBQVU7RUFDekUsZUFBZSxNQUFNLENBQUMsU0FBUztBQUNqQyJ9

package/src/open-hero-ping.d.ts

@@ -0,0 +1,27 @@
+/** @jsxImportSource @openelement/core */ /**
+ * Hero Ping - Ocean component (v0.20.0 Ocean-Island).
+ *
+ * Calls a real API endpoint and shows a status dot with response info.
+ * Pure DsdElement - zero Lit dependency. State changes are reflected
+ * by re-rendering the shadow DOM and re-hydrating events.
+ *
+ * v0.24.1: Migrated from html`` template to JSX (ADR-0057).
+ *
+ * @csspart dot-static  - The static status dot
+ * @csspart dot-animated - The animated ping button
+ */ import { OpenElement } from '@openelement/element';
+import { type StyleSheetLike } from '@openelement/core/style-sheet';
+export declare const tagName: 'open-hero-ping';
+declare const styles: StyleSheetLike;
+export default class HeroPing extends OpenElement {
+  static override styles: [];
+  apiUrl: string;
+  _state: 'idle' | 'loading' | 'ok' | 'err';
+  _msg: string;
+  private _abortController?: any;
+  override connectedCallback(): void;
+  override disconnectedCallback(): void;
+  _fetch: () => Promise<void>;
+  override render(): ReturnType<typeof OpenElement.prototype.render>;
+  private _renderToDom: any;
+}

package/src/open-hero-ping.js

@@ -0,0 +1,136 @@
+/** @jsxImportSource @openelement/core */ /**
+ * Hero Ping - Ocean component (v0.20.0 Ocean-Island).
+ *
+ * Calls a real API endpoint and shows a status dot with response info.
+ * Pure DsdElement - zero Lit dependency. State changes are reflected
+ * by re-rendering the shadow DOM and re-hydrating events.
+ *
+ * v0.24.1: Migrated from html`` template to JSX (ADR-0057).
+ *
+ * @csspart dot-static  - The static status dot
+ * @csspart dot-animated - The animated ping button
+ */ import { OpenElement } from '@openelement/element';
+import { StyleSheet } from '@openelement/core/style-sheet';
+export const tagName = 'open-hero-ping';
+const styles = new StyleSheet();
+styles.replaceSync(`
+  :host {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--size-2);
+  }
+  .ping {
+    padding: var(--size-1) var(--size-5);
+    border-radius: var(--radius-1);
+    border: var(--border-size-1) solid var(--gray-5);
+    background: transparent;
+    color: var(--gray-5);
+    font-size: var(--font-size-00);
+    cursor: pointer;
+    letter-spacing: var(--font-letterspacing-5);
+    text-transform: uppercase;
+    transition: all var(--ease-2) var(--duration-2);
+    font-family: inherit;
+    white-space: nowrap;
+  }
+  .ping:hover {
+    background: var(--gray-2);
+    color: var(--text-primary);
+    border-color: var(--gray-6);
+  }
+  .ping:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+  .dot {
+    width: 7px;
+    height: 7px;
+    border-radius: var(--radius-round);
+    display: inline-block;
+    flex-shrink: 0;
+  }
+  .dot.idle { background: var(--gray-6); }
+  .dot.loading {
+    background: var(--gray-5);
+    animation: pulse 0.8s ease-in-out infinite alternate;
+  }
+  .dot.ok { background: var(--success); }
+  .dot.err { background: var(--error); }
+  .info {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-00);
+    color: var(--text-muted);
+    white-space: nowrap;
+  }
+  .info .ok { color: var(--success); }
+  .info .err { color: var(--error); }
+  @keyframes pulse {
+    from { opacity: 0.4; }
+    to { opacity: 1; }
+  }
+`);
+export default class HeroPing extends OpenElement {
+  static styles = [
+    styles
+  ];
+  apiUrl = '';
+  _state = 'idle';
+  _msg = '';
+  _abortController;
+  connectedCallback() {
+    super.connectedCallback();
+    // DsdElement handles shadow root creation + initial render.
+    // Fetch after DOM is ready.
+    this._fetch();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._abortController?.abort();
+  }
+  _fetch = async ()=>{
+    this._abortController?.abort();
+    this._abortController = new AbortController();
+    this._state = 'loading';
+    this._msg = '';
+    this._renderToDom();
+    try {
+      const url = this.apiUrl || 'https://demo.openelement.org/api';
+      const r = await fetch(url, {
+        signal: this._abortController.signal
+      });
+      if (!r.ok) throw new Error(`HTTP ${r.status}`);
+      const d = await r.json();
+      this._state = 'ok';
+      this._msg = `${d.framework} v${d.version}  ${d.timestamp.slice(11, 19)}`;
+    } catch (e) {
+      if (e instanceof DOMException && e.name === 'AbortError') return;
+      const err = e;
+      this._state = 'err';
+      this._msg = String(e).includes('HTTP') ? err.message : 'connection failed';
+    } finally{
+      this._renderToDom();
+    }
+  };
+  render() {
+    const dotClass = `dot ${this._state}`;
+    const loading = this._state === 'loading';
+    return <>
+        <span className={dotClass} part='dot-static'></span>
+        <button type='button' className='ping' part='dot-animated' disabled={loading} onClick={this._fetch}>
+          {loading ? 'pinging...' : 'ping server'}
+        </button>
+        {this._msg && <span className='info'>
+            <span className={this._state}>{this._msg}</span>
+          </span>}
+      </>;
+  }
+  /** Re-render shadow DOM and re-hydrate click events. */ _renderToDom() {
+    if (!this.shadowRoot) return;
+    this.update();
+  }
+}
+// Guard: idempotent across SSR paths
+if (typeof customElements !== 'undefined' && !customElements.get(tagName)) {
+  customElements.define(tagName, HeroPing);
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZpbGU6Ly8vaG9tZS9ydW5uZXIvd29yay9vcGVuZWxlbWVudC9vcGVuZWxlbWVudC9wYWNrYWdlcy91aS9zcmMvb3Blbi1oZXJvLXBpbmcudHN4Il0sInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4SW1wb3J0U291cmNlIEBvcGVuZWxlbWVudC9jb3JlICovXG4vKipcbiAqIEhlcm8gUGluZyAtIE9jZWFuIGNvbXBvbmVudCAodjAuMjAuMCBPY2Vhbi1Jc2xhbmQpLlxuICpcbiAqIENhbGxzIGEgcmVhbCBBUEkgZW5kcG9pbnQgYW5kIHNob3dzIGEgc3RhdHVzIGRvdCB3aXRoIHJlc3BvbnNlIGluZm8uXG4gKiBQdXJlIERzZEVsZW1lbnQgLSB6ZXJvIExpdCBkZXBlbmRlbmN5LiBTdGF0ZSBjaGFuZ2VzIGFyZSByZWZsZWN0ZWRcbiAqIGJ5IHJlLXJlbmRlcmluZyB0aGUgc2hhZG93IERPTSBhbmQgcmUtaHlkcmF0aW5nIGV2ZW50cy5cbiAqXG4gKiB2MC4yNC4xOiBNaWdyYXRlZCBmcm9tIGh0bWxgYCB0ZW1wbGF0ZSB0byBKU1ggKEFEUi0wMDU3KS5cbiAqXG4gKiBAY3NzcGFydCBkb3Qtc3RhdGljICAtIFRoZSBzdGF0aWMgc3RhdHVzIGRvdFxuICogQGNzc3BhcnQgZG90LWFuaW1hdGVkIC0gVGhlIGFuaW1hdGVkIHBpbmcgYnV0dG9uXG4gKi9cbmltcG9ydCB7IE9wZW5FbGVtZW50IH0gZnJvbSAnQG9wZW5lbGVtZW50L2VsZW1lbnQnO1xuaW1wb3J0IHsgU3R5bGVTaGVldCwgdHlwZSBTdHlsZVNoZWV0TGlrZSB9IGZyb20gJ0BvcGVuZWxlbWVudC9jb3JlL3N0eWxlLXNoZWV0JztcbmV4cG9ydCBjb25zdCB0YWdOYW1lID0gJ29wZW4taGVyby1waW5nJztcblxuY29uc3Qgc3R5bGVzOiBTdHlsZVNoZWV0TGlrZSA9IG5ldyBTdHlsZVNoZWV0KCk7XG5zdHlsZXMucmVwbGFjZVN5bmMoYFxuICA6aG9zdCB7XG4gICAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBnYXA6IHZhcigtLXNpemUtMik7XG4gIH1cbiAgLnBpbmcge1xuICAgIHBhZGRpbmc6IHZhcigtLXNpemUtMSkgdmFyKC0tc2l6ZS01KTtcbiAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1yYWRpdXMtMSk7XG4gICAgYm9yZGVyOiB2YXIoLS1ib3JkZXItc2l6ZS0xKSBzb2xpZCB2YXIoLS1ncmF5LTUpO1xuICAgIGJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuICAgIGNvbG9yOiB2YXIoLS1ncmF5LTUpO1xuICAgIGZvbnQtc2l6ZTogdmFyKC0tZm9udC1zaXplLTAwKTtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgbGV0dGVyLXNwYWNpbmc6IHZhcigtLWZvbnQtbGV0dGVyc3BhY2luZy01KTtcbiAgICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICAgIHRyYW5zaXRpb246IGFsbCB2YXIoLS1lYXNlLTIpIHZhcigtLWR1cmF0aW9uLTIpO1xuICAgIGZvbnQtZmFtaWx5OiBpbmhlcml0O1xuICAgIHdoaXRlLXNwYWNlOiBub3dyYXA7XG4gIH1cbiAgLnBpbmc6aG92ZXIge1xuICAgIGJhY2tncm91bmQ6IHZhcigtLWdyYXktMik7XG4gICAgY29sb3I6IHZhcigtLXRleHQtcHJpbWFyeSk7XG4gICAgYm9yZGVyLWNvbG9yOiB2YXIoLS1ncmF5LTYpO1xuICB9XG4gIC5waW5nOmRpc2FibGVkIHtcbiAgICBvcGFjaXR5OiAwLjM7XG4gICAgY3Vyc29yOiBub3QtYWxsb3dlZDtcbiAgfVxuICAuZG90IHtcbiAgICB3aWR0aDogN3B4O1xuICAgIGhlaWdodDogN3B4O1xuICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLXJhZGl1cy1yb3VuZCk7XG4gICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICAgIGZsZXgtc2hyaW5rOiAwO1xuICB9XG4gIC5kb3QuaWRsZSB7IGJhY2tncm91bmQ6IHZhcigtLWdyYXktNik7IH1cbiAgLmRvdC5sb2FkaW5nIHtcbiAgICBiYWNrZ3JvdW5kOiB2YXIoLS1ncmF5LTUpO1xuICAgIGFuaW1hdGlvbjogcHVsc2UgMC44cyBlYXNlLWluLW91dCBpbmZpbml0ZSBhbHRlcm5hdGU7XG4gIH1cbiAgLmRvdC5vayB7IGJhY2tncm91bmQ6IHZhcigtLXN1Y2Nlc3MpOyB9XG4gIC5kb3QuZXJyIHsgYmFja2dyb3VuZDogdmFyKC0tZXJyb3IpOyB9XG4gIC5pbmZvIHtcbiAgICBmb250LWZhbWlseTogdmFyKC0tZm9udC1tb25vKTtcbiAgICBmb250LXNpemU6IHZhcigtLWZvbnQtc2l6ZS0wMCk7XG4gICAgY29sb3I6IHZhcigtLXRleHQtbXV0ZWQpO1xuICAgIHdoaXRlLXNwYWNlOiBub3dyYXA7XG4gIH1cbiAgLmluZm8gLm9rIHsgY29sb3I6IHZhcigtLXN1Y2Nlc3MpOyB9XG4gIC5pbmZvIC5lcnIgeyBjb2xvcjogdmFyKC0tZXJyb3IpOyB9XG4gIEBrZXlmcmFtZXMgcHVsc2Uge1xuICAgIGZyb20geyBvcGFjaXR5OiAwLjQ7IH1cbiAgICB0byB7IG9wYWNpdHk6IDE7IH1cbiAgfVxuYCk7XG5cbmV4cG9ydCBkZWZhdWx0IGNsYXNzIEhlcm9QaW5nIGV4dGVuZHMgT3BlbkVsZW1lbnQge1xuICBzdGF0aWMgb3ZlcnJpZGUgc3R5bGVzID0gW3N0eWxlc107XG5cbiAgYXBpVXJsID0gJyc7XG4gIF9zdGF0ZTogJ2lkbGUnIHwgJ2xvYWRpbmcnIHwgJ29rJyB8ICdlcnInID0gJ2lkbGUnO1xuICBfbXNnID0gJyc7XG4gIHByaXZhdGUgX2Fib3J0Q29udHJvbGxlcj86IEFib3J0Q29udHJvbGxlcjtcblxuICBvdmVycmlkZSBjb25uZWN0ZWRDYWxsYmFjaygpOiB2b2lkIHtcbiAgICBzdXBlci5jb25uZWN0ZWRDYWxsYmFjaygpO1xuICAgIC8vIERzZEVsZW1lbnQgaGFuZGxlcyBzaGFkb3cgcm9vdCBjcmVhdGlvbiArIGluaXRpYWwgcmVuZGVyLlxuICAgIC8vIEZldGNoIGFmdGVyIERPTSBpcyByZWFkeS5cbiAgICB0aGlzLl9mZXRjaCgpO1xuICB9XG5cbiAgb3ZlcnJpZGUgZGlzY29ubmVjdGVkQ2FsbGJhY2soKTogdm9pZCB7XG4gICAgc3VwZXIuZGlzY29ubmVjdGVkQ2FsbGJhY2soKTtcbiAgICB0aGlzLl9hYm9ydENvbnRyb2xsZXI/LmFib3J0KCk7XG4gIH1cblxuICBfZmV0Y2ggPSBhc3luYyAoKTogUHJvbWlzZTx2b2lkPiA9PiB7XG4gICAgdGhpcy5fYWJvcnRDb250cm9sbGVyPy5hYm9ydCgpO1xuICAgIHRoaXMuX2Fib3J0Q29udHJvbGxlciA9IG5ldyBBYm9ydENvbnRyb2xsZXIoKTtcbiAgICB0aGlzLl9zdGF0ZSA9ICdsb2FkaW5nJztcbiAgICB0aGlzLl9tc2cgPSAnJztcbiAgICB0aGlzLl9yZW5kZXJUb0RvbSgpO1xuICAgIHRyeSB7XG4gICAgICBjb25zdCB1cmwgPSB0aGlzLmFwaVVybCB8fCAnaHR0cHM6Ly9kZW1vLm9wZW5lbGVtZW50Lm9yZy9hcGknO1xuICAgICAgY29uc3QgciA9IGF3YWl0IGZldGNoKHVybCwgeyBzaWduYWw6IHRoaXMuX2Fib3J0Q29udHJvbGxlci5zaWduYWwgfSk7XG4gICAgICBpZiAoIXIub2spIHRocm93IG5ldyBFcnJvcihgSFRUUCAke3Iuc3RhdHVzfWApO1xuICAgICAgY29uc3QgZCA9IGF3YWl0IHIuanNvbigpO1xuICAgICAgdGhpcy5fc3RhdGUgPSAnb2snO1xuICAgICAgdGhpcy5fbXNnID0gYCR7ZC5mcmFtZXdvcmt9IHYke2QudmVyc2lvbn0gICR7ZC50aW1lc3RhbXAuc2xpY2UoMTEsIDE5KX1gO1xuICAgIH0gY2F0Y2ggKGU6IHVua25vd24pIHtcbiAgICAgIGlmIChlIGluc3RhbmNlb2YgRE9NRXhjZXB0aW9uICYmIGUubmFtZSA9PT0gJ0Fib3J0RXJyb3InKSByZXR1cm47XG4gICAgICBjb25zdCBlcnIgPSBlIGFzIEVycm9yO1xuICAgICAgdGhpcy5fc3RhdGUgPSAnZXJyJztcbiAgICAgIHRoaXMuX21zZyA9IFN0cmluZyhlKS5pbmNsdWRlcygnSFRUUCcpID8gZXJyLm1lc3NhZ2UgOiAnY29ubmVjdGlvbiBmYWlsZWQnO1xuICAgIH0gZmluYWxseSB7XG4gICAgICB0aGlzLl9yZW5kZXJUb0RvbSgpO1xuICAgIH1cbiAgfTtcblxuICBvdmVycmlkZSByZW5kZXIoKTogUmV0dXJuVHlwZTx0eXBlb2YgT3BlbkVsZW1lbnQucHJvdG90eXBlLnJlbmRlcj4ge1xuICAgIGNvbnN0IGRvdENsYXNzID0gYGRvdCAke3RoaXMuX3N0YXRlfWA7XG4gICAgY29uc3QgbG9hZGluZyA9IHRoaXMuX3N0YXRlID09PSAnbG9hZGluZyc7XG4gICAgcmV0dXJuIChcbiAgICAgIDw+XG4gICAgICAgIDxzcGFuIGNsYXNzTmFtZT17ZG90Q2xhc3N9IHBhcnQ9J2RvdC1zdGF0aWMnPjwvc3Bhbj5cbiAgICAgICAgPGJ1dHRvblxuICAgICAgICAgIHR5cGU9J2J1dHRvbidcbiAgICAgICAgICBjbGFzc05hbWU9J3BpbmcnXG4gICAgICAgICAgcGFydD0nZG90LWFuaW1hdGVkJ1xuICAgICAgICAgIGRpc2FibGVkPXtsb2FkaW5nfVxuICAgICAgICAgIG9uQ2xpY2s9e3RoaXMuX2ZldGNofVxuICAgICAgICA+XG4gICAgICAgICAge2xvYWRpbmcgPyAncGluZ2luZy4uLicgOiAncGluZyBzZXJ2ZXInfVxuICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAge3RoaXMuX21zZyAmJiAoXG4gICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPSdpbmZvJz5cbiAgICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT17dGhpcy5fc3RhdGV9Pnt0aGlzLl9tc2d9PC9zcGFuPlxuICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgKX1cbiAgICAgIDwvPlxuICAgICk7XG4gIH1cblxuICAvKiogUmUtcmVuZGVyIHNoYWRvdyBET00gYW5kIHJlLWh5ZHJhdGUgY2xpY2sgZXZlbnRzLiAqL1xuICBwcml2YXRlIF9yZW5kZXJUb0RvbSgpOiB2b2lkIHtcbiAgICBpZiAoIXRoaXMuc2hhZG93Um9vdCkgcmV0dXJuO1xuICAgIHRoaXMudXBkYXRlKCk7XG4gIH1cbn1cblxuLy8gR3VhcmQ6IGlkZW1wb3RlbnQgYWNyb3NzIFNTUiBwYXRoc1xuaWYgKHR5cGVvZiBjdXN0b21FbGVtZW50cyAhPT0gJ3VuZGVmaW5lZCcgJiYgIWN1c3RvbUVsZW1lbnRzLmdldCh0YWdOYW1lKSkge1xuICBjdXN0b21FbGVtZW50cy5kZWZpbmUodGFnTmFtZSwgSGVyb1BpbmcpO1xufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHVDQUF1QyxHQUN2Qzs7Ozs7Ozs7Ozs7Q0FXQyxHQUNELFNBQVMsV0FBVyxRQUFRLHVCQUF1QjtBQUNuRCxTQUFTLFVBQVUsUUFBNkIsZ0NBQWdDO0FBQ2hGLE9BQU8sTUFBTSxVQUFVLGlCQUFpQjtBQUV4QyxNQUFNLFNBQXlCLElBQUk7QUFDbkMsT0FBTyxXQUFXLENBQUMsQ0FBQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQXVEcEIsQ0FBQztBQUVELGVBQWUsTUFBTSxpQkFBaUI7RUFDcEMsT0FBZ0IsU0FBUztJQUFDO0dBQU8sQ0FBQztFQUVsQyxTQUFTLEdBQUc7RUFDWixTQUE0QyxPQUFPO0VBQ25ELE9BQU8sR0FBRztFQUNGLGlCQUFtQztFQUVsQyxvQkFBMEI7SUFDakMsS0FBSyxDQUFDO0lBQ04sNERBQTREO0lBQzVELDRCQUE0QjtJQUM1QixJQUFJLENBQUMsTUFBTTtFQUNiO0VBRVMsdUJBQTZCO0lBQ3BDLEtBQUssQ0FBQztJQUNOLElBQUksQ0FBQyxnQkFBZ0IsRUFBRTtFQUN6QjtFQUVBLFNBQVM7SUFDUCxJQUFJLENBQUMsZ0JBQWdCLEVBQUU7SUFDdkIsSUFBSSxDQUFDLGdCQUFnQixHQUFHLElBQUk7SUFDNUIsSUFBSSxDQUFDLE1BQU0sR0FBRztJQUNkLElBQUksQ0FBQyxJQUFJLEdBQUc7SUFDWixJQUFJLENBQUMsWUFBWTtJQUNqQixJQUFJO01BQ0YsTUFBTSxNQUFNLElBQUksQ0FBQyxNQUFNLElBQUk7TUFDM0IsTUFBTSxJQUFJLE1BQU0sTUFBTSxLQUFLO1FBQUUsUUFBUSxJQUFJLENBQUMsZ0JBQWdCLENBQUMsTUFBTTtNQUFDO01BQ2xFLElBQUksQ0FBQyxFQUFFLEVBQUUsRUFBRSxNQUFNLElBQUksTUFBTSxDQUFDLEtBQUssRUFBRSxFQUFFLE1BQU0sRUFBRTtNQUM3QyxNQUFNLElBQUksTUFBTSxFQUFFLElBQUk7TUFDdEIsSUFBSSxDQUFDLE1BQU0sR0FBRztNQUNkLElBQUksQ0FBQyxJQUFJLEdBQUcsR0FBRyxFQUFFLFNBQVMsQ0FBQyxFQUFFLEVBQUUsRUFBRSxPQUFPLENBQUMsRUFBRSxFQUFFLEVBQUUsU0FBUyxDQUFDLEtBQUssQ0FBQyxJQUFJLEtBQUs7SUFDMUUsRUFBRSxPQUFPLEdBQVk7TUFDbkIsSUFBSSxhQUFhLGdCQUFnQixFQUFFLElBQUksS0FBSyxjQUFjO01BQzFELE1BQU0sTUFBTTtNQUNaLElBQUksQ0FBQyxNQUFNLEdBQUc7TUFDZCxJQUFJLENBQUMsSUFBSSxHQUFHLE9BQU8sR0FBRyxRQUFRLENBQUMsVUFBVSxJQUFJLE9BQU8sR0FBRztJQUN6RCxTQUFVO01BQ1IsSUFBSSxDQUFDLFlBQVk7SUFDbkI7RUFDRixFQUFFO0VBRU8sU0FBMEQ7SUFDakUsTUFBTSxXQUFXLENBQUMsSUFBSSxFQUFFLElBQUksQ0FBQyxNQUFNLEVBQUU7SUFDckMsTUFBTSxVQUFVLElBQUksQ0FBQyxNQUFNLEtBQUs7SUFDaEMsU0FDSTtRQUNBLENBQUMsS0FBSyxXQUFXLFVBQVUsS0FBSyxlQUFlLEtBQUs7UUFDcEQsQ0FBQyxPQUNDLEtBQUssU0FDTCxVQUFVLE9BQ1YsS0FBSyxlQUNMLFVBQVUsU0FDVixTQUFTLElBQUksQ0FBQyxNQUFNLEVBQ3JCO1VBQ0MsQ0FBQyxVQUFVLGVBQWUsY0FBYztRQUMxQyxFQUFFLE9BQU87UUFDVCxDQUFDLElBQUksQ0FBQyxJQUFJLEtBQ1AsS0FBSyxVQUFVLE9BQU87WUFDckIsQ0FBQyxLQUFLLFdBQVcsSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsSUFBSSxHQUFHLEtBQUs7VUFDbEQsRUFBRSxNQUNGO01BQ0o7RUFFSjtFQUVBLHNEQUFzRCxHQUN0RCxBQUFRLGVBQXFCO0lBQzNCLElBQUksQ0FBQyxJQUFJLENBQUMsVUFBVSxFQUFFO0lBQ3RCLElBQUksQ0FBQyxNQUFNO0VBQ2I7QUFDRjtBQUVBLHFDQUFxQztBQUNyQyxJQUFJLE9BQU8sbUJBQW1CLGVBQWUsQ0FBQyxlQUFlLEdBQUcsQ0FBQyxVQUFVO0VBQ3pFLGVBQWUsTUFBTSxDQUFDLFNBQVM7QUFDakMifQ==

package/src/open-input.d.ts

@@ -0,0 +1,51 @@
+/** @jsxImportSource @openelement/core */ /**
+ * @openelement/ui - open-input
+ *
+ * Minimal input field following Swiss International Style.
+ * Clean borders, subtle focus states.
+ *
+ * v0.20.0: Migrated from DsdLitElement to DsdElement (Ocean component).
+ * v0.24.1: Migrated from html`` template to JSX (ADR-0057).
+ *
+ * Features:
+ * - Form-associated: participates in native <form> submission
+ * - Supports label, placeholder, error, disabled, required
+ * - Dispatches 'open-input' custom event on value change
+ *
+ * @csspart wrapper -The outer input-wrapper div
+ * @csspart label -The label element
+ * @csspart control -The input/textarea/select element
+ * @csspart error -The error message small element
+ *
+ * Usage:
+ * ```html
+ * <open-input placeholder="Enter text"></open-input>
+ * <open-input type="email" label="Email"></open-input>
+ * <form onsubmit="console.info(new FormData(this))">
+ *   <open-input name="username" label="Username"></open-input>
+ *   <button type="submit">Submit</button>
+ * </form>
+ * ```
+ */ import { OpenElement } from '@openelement/element';
+import { type StyleSheetLike } from '@openelement/core/style-sheet';
+export declare const tagName: 'open-input';
+declare const sheet: StyleSheetLike;
+export declare class OpenInput extends OpenElement {
+  static override styles: [];
+  static formAssociated: boolean;
+  static delegatesFocus: boolean;
+  static override observedAttributes: [string, string, string, string, string, string, string, string];
+  override render(): ReturnType<typeof OpenElement.prototype.render>;
+  override attributeChangedCallback(name: string, old: string | null, val: string | null): void;
+  private _syncDOM: any;
+  private _updateStates: any;
+  private _handleInput: any;
+  private _handleChange: any;
+  private _handleFocus: any;
+  private _handleBlur: any;
+  formResetCallback(): void;
+  formDisabledCallback(disabled: boolean): void;
+  private _esc: any;
+  private _escAttr: any;
+}
+export default OpenInput;