@openelement/ui 0.41.0-alpha.1

package/src/open-input.js

@@ -0,0 +1,233 @@
+/** @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 { StyleSheet } from '@openelement/core/style-sheet';
+import { escapeAttr, escapeHtml } from '@openelement/core';
+export const tagName = 'open-input';
+const sheet = new StyleSheet();
+sheet.replaceSync(`
+  :host {
+    display: block;
+  }
+
+  .input-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-2);
+  }
+
+  label {
+    font-size: var(--font-size-0);
+    font-weight: var(--font-weight-5);
+    color: var(--gray-6);
+    letter-spacing: var(--font-letterspacing-2);
+  }
+
+  .input {
+    width: 100%;
+    padding: var(--size-2) var(--size-3);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-1);
+    color: var(--gray-9);
+    background: var(--gray-0);
+    border: var(--border-size-1) solid var(--gray-3);
+    border-radius: var(--radius-2);
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    outline: none;
+  }
+
+  .input::placeholder {
+    color: var(--gray-5);
+  }
+
+  .input:hover {
+    border-color: var(--gray-5);
+  }
+
+  .input:focus {
+    border-color: var(--brand, var(--indigo-6));
+    box-shadow: 0 0 0 1px var(--brand, var(--indigo-6));
+  }
+
+  .input:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    background: var(--gray-1);
+  }
+
+  .input--error {
+    border-color: var(--error);
+  }
+
+  :host(:state(disabled)) .input {
+    opacity: 0.5;
+    cursor: not-allowed;
+    background: var(--gray-1);
+  }
+
+  :host(:state(invalid)) .input {
+    border-color: var(--error);
+  }
+
+  .error-message {
+    font-size: var(--font-size-00);
+    color: var(--error);
+  }
+`);
+export class OpenInput extends OpenElement {
+  static styles = [
+    sheet
+  ];
+  static formAssociated = true;
+  static delegatesFocus = true;
+  static observedAttributes = [
+    'type',
+    'placeholder',
+    'label',
+    'value',
+    'name',
+    'disabled',
+    'required',
+    'error'
+  ];
+  render() {
+    const type = this.getAttribute('type') || 'text';
+    const placeholder = this.getAttribute('placeholder') || '';
+    const label1 = this.getAttribute('label') || '';
+    const value = this.getAttribute('value') || '';
+    const name = this.getAttribute('name') || '';
+    const d = this.hasAttribute('disabled');
+    const r = this.hasAttribute('required');
+    const error = this.getAttribute('error') || '';
+    const errorClass = error ? ' input--error' : '';
+    return <div className='input-wrapper' part='wrapper'>
+        {label1 && <label htmlFor='input' part='label'>
+            {this._esc(label1)}
+            {r ? ' *' : ''}
+          </label>}
+        <input id='input' className={`input${errorClass}`} part='control' type={type} placeholder={placeholder} value={value} name={name} disabled={d} required={r} aria-invalid={error ? 'true' : undefined} aria-describedby={error ? 'input-error' : undefined} aria-errormessage={error ? 'input-error' : undefined} onInput={(e)=>this._handleInput(e)} onChange={(e)=>this._handleChange(e)} onFocus={()=>this._handleFocus()} onBlur={()=>this._handleBlur()}/>
+        {error && <small id='input-error' role='alert' className='error-message' part='error'>
+            {this._esc(error)}
+          </small>}
+      </div>;
+  }
+  attributeChangedCallback(name, old, val) {
+    if (old === val) return;
+    if (name === 'disabled' || name === 'error') {
+      this._syncDOM();
+      this._updateStates();
+    } else if (name === 'value') {
+      this._syncDOM();
+      if (this._internals) {
+        this._internals.setFormValue(val || '');
+      }
+    } else {
+      this._syncDOM();
+    }
+  }
+  _syncDOM() {
+    const input1 = this.shadowRoot?.querySelector('input, textarea, select');
+    if (!input1) return;
+    input1.disabled = this.hasAttribute('disabled');
+    const val = this.getAttribute('value');
+    if (val !== null && input1.value !== val) {
+      input1.value = val;
+    }
+  }
+  _updateStates() {
+    if (!this._internals?.states) return;
+    if (this.hasAttribute('disabled')) {
+      this._internals.states.add('disabled');
+      this._internals.states.delete('enabled');
+    } else {
+      this._internals.states.delete('disabled');
+      this._internals.states.add('enabled');
+    }
+    if (this.getAttribute('error')) {
+      this._internals.states.add('invalid');
+    } else {
+      this._internals.states.delete('invalid');
+    }
+  }
+  _handleInput(e) {
+    const input1 = e.target;
+    this.setAttribute('value', input1.value);
+    this._internals?.setFormValue(input1.value);
+    this.dispatchEvent(new CustomEvent('open-input', {
+      detail: {
+        value: input1.value
+      },
+      bubbles: true,
+      composed: false
+    }));
+  }
+  _handleChange(e) {
+    const input1 = e.target;
+    this.dispatchEvent(new CustomEvent('open-change', {
+      detail: {
+        value: input1.value
+      },
+      bubbles: true,
+      composed: false
+    }));
+  }
+  _handleFocus() {
+    this.dispatchEvent(new CustomEvent('open-focus', {
+      bubbles: true,
+      composed: false
+    }));
+  }
+  _handleBlur() {
+    this.dispatchEvent(new CustomEvent('open-blur', {
+      bubbles: true,
+      composed: false
+    }));
+  }
+  formResetCallback() {
+    this.setAttribute('value', '');
+    this.removeAttribute('error');
+    this._internals?.setFormValue('');
+    this._syncDOM();
+  }
+  formDisabledCallback(disabled) {
+    if (disabled) {
+      this.setAttribute('disabled', '');
+    } else {
+      this.removeAttribute('disabled');
+    }
+  }
+  _esc = escapeHtml;
+  _escAttr = escapeAttr;
+}
+export default OpenInput;
+// Guard: idempotent across SSR paths
+if (typeof customElements !== 'undefined' && !customElements.get(tagName)) {
+  customElements.define(tagName, OpenInput);
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZpbGU6Ly8vaG9tZS9ydW5uZXIvd29yay9vcGVuZWxlbWVudC9vcGVuZWxlbWVudC9wYWNrYWdlcy91aS9zcmMvb3Blbi1pbnB1dC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiLyoqIEBqc3hJbXBvcnRTb3VyY2UgQG9wZW5lbGVtZW50L2NvcmUgKi9cbi8qKlxuICogQG9wZW5lbGVtZW50L3VpIC0gb3Blbi1pbnB1dFxuICpcbiAqIE1pbmltYWwgaW5wdXQgZmllbGQgZm9sbG93aW5nIFN3aXNzIEludGVybmF0aW9uYWwgU3R5bGUuXG4gKiBDbGVhbiBib3JkZXJzLCBzdWJ0bGUgZm9jdXMgc3RhdGVzLlxuICpcbiAqIHYwLjIwLjA6IE1pZ3JhdGVkIGZyb20gRHNkTGl0RWxlbWVudCB0byBEc2RFbGVtZW50IChPY2VhbiBjb21wb25lbnQpLlxuICogdjAuMjQuMTogTWlncmF0ZWQgZnJvbSBodG1sYGAgdGVtcGxhdGUgdG8gSlNYIChBRFItMDA1NykuXG4gKlxuICogRmVhdHVyZXM6XG4gKiAtIEZvcm0tYXNzb2NpYXRlZDogcGFydGljaXBhdGVzIGluIG5hdGl2ZSA8Zm9ybT4gc3VibWlzc2lvblxuICogLSBTdXBwb3J0cyBsYWJlbCwgcGxhY2Vob2xkZXIsIGVycm9yLCBkaXNhYmxlZCwgcmVxdWlyZWRcbiAqIC0gRGlzcGF0Y2hlcyAnb3Blbi1pbnB1dCcgY3VzdG9tIGV2ZW50IG9uIHZhbHVlIGNoYW5nZVxuICpcbiAqIEBjc3NwYXJ0IHdyYXBwZXIgLVRoZSBvdXRlciBpbnB1dC13cmFwcGVyIGRpdlxuICogQGNzc3BhcnQgbGFiZWwgLVRoZSBsYWJlbCBlbGVtZW50XG4gKiBAY3NzcGFydCBjb250cm9sIC1UaGUgaW5wdXQvdGV4dGFyZWEvc2VsZWN0IGVsZW1lbnRcbiAqIEBjc3NwYXJ0IGVycm9yIC1UaGUgZXJyb3IgbWVzc2FnZSBzbWFsbCBlbGVtZW50XG4gKlxuICogVXNhZ2U6XG4gKiBgYGBodG1sXG4gKiA8b3Blbi1pbnB1dCBwbGFjZWhvbGRlcj1cIkVudGVyIHRleHRcIj48L29wZW4taW5wdXQ+XG4gKiA8b3Blbi1pbnB1dCB0eXBlPVwiZW1haWxcIiBsYWJlbD1cIkVtYWlsXCI+PC9vcGVuLWlucHV0PlxuICogPGZvcm0gb25zdWJtaXQ9XCJjb25zb2xlLmluZm8obmV3IEZvcm1EYXRhKHRoaXMpKVwiPlxuICogICA8b3Blbi1pbnB1dCBuYW1lPVwidXNlcm5hbWVcIiBsYWJlbD1cIlVzZXJuYW1lXCI+PC9vcGVuLWlucHV0PlxuICogICA8YnV0dG9uIHR5cGU9XCJzdWJtaXRcIj5TdWJtaXQ8L2J1dHRvbj5cbiAqIDwvZm9ybT5cbiAqIGBgYFxuICovXG5cbmltcG9ydCB7IE9wZW5FbGVtZW50IH0gZnJvbSAnQG9wZW5lbGVtZW50L2VsZW1lbnQnO1xuaW1wb3J0IHsgU3R5bGVTaGVldCwgdHlwZSBTdHlsZVNoZWV0TGlrZSB9IGZyb20gJ0BvcGVuZWxlbWVudC9jb3JlL3N0eWxlLXNoZWV0JztcbmltcG9ydCB7IGVzY2FwZUF0dHIsIGVzY2FwZUh0bWwgfSBmcm9tICdAb3BlbmVsZW1lbnQvY29yZSc7XG5cbmV4cG9ydCBjb25zdCB0YWdOYW1lID0gJ29wZW4taW5wdXQnO1xuXG5jb25zdCBzaGVldDogU3R5bGVTaGVldExpa2UgPSBuZXcgU3R5bGVTaGVldCgpO1xuc2hlZXQucmVwbGFjZVN5bmMoYFxuICA6aG9zdCB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gIH1cblxuICAuaW5wdXQtd3JhcHBlciB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIGdhcDogdmFyKC0tc2l6ZS0yKTtcbiAgfVxuXG4gIGxhYmVsIHtcbiAgICBmb250LXNpemU6IHZhcigtLWZvbnQtc2l6ZS0wKTtcbiAgICBmb250LXdlaWdodDogdmFyKC0tZm9udC13ZWlnaHQtNSk7XG4gICAgY29sb3I6IHZhcigtLWdyYXktNik7XG4gICAgbGV0dGVyLXNwYWNpbmc6IHZhcigtLWZvbnQtbGV0dGVyc3BhY2luZy0yKTtcbiAgfVxuXG4gIC5pbnB1dCB7XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgcGFkZGluZzogdmFyKC0tc2l6ZS0yKSB2YXIoLS1zaXplLTMpO1xuICAgIGZvbnQtZmFtaWx5OiB2YXIoLS1mb250LXNhbnMpO1xuICAgIGZvbnQtc2l6ZTogdmFyKC0tZm9udC1zaXplLTEpO1xuICAgIGNvbG9yOiB2YXIoLS1ncmF5LTkpO1xuICAgIGJhY2tncm91bmQ6IHZhcigtLWdyYXktMCk7XG4gICAgYm9yZGVyOiB2YXIoLS1ib3JkZXItc2l6ZS0xKSBzb2xpZCB2YXIoLS1ncmF5LTMpO1xuICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLXJhZGl1cy0yKTtcbiAgICB0cmFuc2l0aW9uOiBib3JkZXItY29sb3IgMC4ycyBlYXNlLCBib3gtc2hhZG93IDAuMnMgZWFzZTtcbiAgICBvdXRsaW5lOiBub25lO1xuICB9XG5cbiAgLmlucHV0OjpwbGFjZWhvbGRlciB7XG4gICAgY29sb3I6IHZhcigtLWdyYXktNSk7XG4gIH1cblxuICAuaW5wdXQ6aG92ZXIge1xuICAgIGJvcmRlci1jb2xvcjogdmFyKC0tZ3JheS01KTtcbiAgfVxuXG4gIC5pbnB1dDpmb2N1cyB7XG4gICAgYm9yZGVyLWNvbG9yOiB2YXIoLS1icmFuZCwgdmFyKC0taW5kaWdvLTYpKTtcbiAgICBib3gtc2hhZG93OiAwIDAgMCAxcHggdmFyKC0tYnJhbmQsIHZhcigtLWluZGlnby02KSk7XG4gIH1cblxuICAuaW5wdXQ6ZGlzYWJsZWQge1xuICAgIG9wYWNpdHk6IDAuNTtcbiAgICBjdXJzb3I6IG5vdC1hbGxvd2VkO1xuICAgIGJhY2tncm91bmQ6IHZhcigtLWdyYXktMSk7XG4gIH1cblxuICAuaW5wdXQtLWVycm9yIHtcbiAgICBib3JkZXItY29sb3I6IHZhcigtLWVycm9yKTtcbiAgfVxuXG4gIDpob3N0KDpzdGF0ZShkaXNhYmxlZCkpIC5pbnB1dCB7XG4gICAgb3BhY2l0eTogMC41O1xuICAgIGN1cnNvcjogbm90LWFsbG93ZWQ7XG4gICAgYmFja2dyb3VuZDogdmFyKC0tZ3JheS0xKTtcbiAgfVxuXG4gIDpob3N0KDpzdGF0ZShpbnZhbGlkKSkgLmlucHV0IHtcbiAgICBib3JkZXItY29sb3I6IHZhcigtLWVycm9yKTtcbiAgfVxuXG4gIC5lcnJvci1tZXNzYWdlIHtcbiAgICBmb250LXNpemU6IHZhcigtLWZvbnQtc2l6ZS0wMCk7XG4gICAgY29sb3I6IHZhcigtLWVycm9yKTtcbiAgfVxuYCk7XG5cbmV4cG9ydCBjbGFzcyBPcGVuSW5wdXQgZXh0ZW5kcyBPcGVuRWxlbWVudCB7XG4gIHN0YXRpYyBvdmVycmlkZSBzdHlsZXMgPSBbc2hlZXRdO1xuICBzdGF0aWMgb3ZlcnJpZGUgZm9ybUFzc29jaWF0ZWQgPSB0cnVlO1xuICBzdGF0aWMgb3ZlcnJpZGUgZGVsZWdhdGVzRm9jdXMgPSB0cnVlO1xuICBzdGF0aWMgb3ZlcnJpZGUgb2JzZXJ2ZWRBdHRyaWJ1dGVzID0gW1xuICAgICd0eXBlJyxcbiAgICAncGxhY2Vob2xkZXInLFxuICAgICdsYWJlbCcsXG4gICAgJ3ZhbHVlJyxcbiAgICAnbmFtZScsXG4gICAgJ2Rpc2FibGVkJyxcbiAgICAncmVxdWlyZWQnLFxuICAgICdlcnJvcicsXG4gIF07XG5cbiAgb3ZlcnJpZGUgcmVuZGVyKCk6IFJldHVyblR5cGU8dHlwZW9mIE9wZW5FbGVtZW50LnByb3RvdHlwZS5yZW5kZXI+IHtcbiAgICBjb25zdCB0eXBlID0gdGhpcy5nZXRBdHRyaWJ1dGUoJ3R5cGUnKSB8fCAndGV4dCc7XG4gICAgY29uc3QgcGxhY2Vob2xkZXIgPSB0aGlzLmdldEF0dHJpYnV0ZSgncGxhY2Vob2xkZXInKSB8fCAnJztcbiAgICBjb25zdCBsYWJlbCA9IHRoaXMuZ2V0QXR0cmlidXRlKCdsYWJlbCcpIHx8ICcnO1xuICAgIGNvbnN0IHZhbHVlID0gdGhpcy5nZXRBdHRyaWJ1dGUoJ3ZhbHVlJykgfHwgJyc7XG4gICAgY29uc3QgbmFtZSA9IHRoaXMuZ2V0QXR0cmlidXRlKCduYW1lJykgfHwgJyc7XG4gICAgY29uc3QgZCA9IHRoaXMuaGFzQXR0cmlidXRlKCdkaXNhYmxlZCcpO1xuICAgIGNvbnN0IHIgPSB0aGlzLmhhc0F0dHJpYnV0ZSgncmVxdWlyZWQnKTtcbiAgICBjb25zdCBlcnJvciA9IHRoaXMuZ2V0QXR0cmlidXRlKCdlcnJvcicpIHx8ICcnO1xuICAgIGNvbnN0IGVycm9yQ2xhc3MgPSBlcnJvciA/ICcgaW5wdXQtLWVycm9yJyA6ICcnO1xuXG4gICAgcmV0dXJuIChcbiAgICAgIDxkaXYgY2xhc3NOYW1lPSdpbnB1dC13cmFwcGVyJyBwYXJ0PSd3cmFwcGVyJz5cbiAgICAgICAge2xhYmVsICYmIChcbiAgICAgICAgICA8bGFiZWwgaHRtbEZvcj0naW5wdXQnIHBhcnQ9J2xhYmVsJz5cbiAgICAgICAgICAgIHt0aGlzLl9lc2MobGFiZWwpfVxuICAgICAgICAgICAge3IgPyAnIConIDogJyd9XG4gICAgICAgICAgPC9sYWJlbD5cbiAgICAgICAgKX1cbiAgICAgICAgPGlucHV0XG4gICAgICAgICAgaWQ9J2lucHV0J1xuICAgICAgICAgIGNsYXNzTmFtZT17YGlucHV0JHtlcnJvckNsYXNzfWB9XG4gICAgICAgICAgcGFydD0nY29udHJvbCdcbiAgICAgICAgICB0eXBlPXt0eXBlfVxuICAgICAgICAgIHBsYWNlaG9sZGVyPXtwbGFjZWhvbGRlcn1cbiAgICAgICAgICB2YWx1ZT17dmFsdWV9XG4gICAgICAgICAgbmFtZT17bmFtZX1cbiAgICAgICAgICBkaXNhYmxlZD17ZH1cbiAgICAgICAgICByZXF1aXJlZD17cn1cbiAgICAgICAgICBhcmlhLWludmFsaWQ9e2Vycm9yID8gJ3RydWUnIDogdW5kZWZpbmVkfVxuICAgICAgICAgIGFyaWEtZGVzY3JpYmVkYnk9e2Vycm9yID8gJ2lucHV0LWVycm9yJyA6IHVuZGVmaW5lZH1cbiAgICAgICAgICBhcmlhLWVycm9ybWVzc2FnZT17ZXJyb3IgPyAnaW5wdXQtZXJyb3InIDogdW5kZWZpbmVkfVxuICAgICAgICAgIG9uSW5wdXQ9eyhlOiBFdmVudCkgPT4gdGhpcy5faGFuZGxlSW5wdXQoZSl9XG4gICAgICAgICAgb25DaGFuZ2U9eyhlOiBFdmVudCkgPT4gdGhpcy5faGFuZGxlQ2hhbmdlKGUpfVxuICAgICAgICAgIG9uRm9jdXM9eygpID0+IHRoaXMuX2hhbmRsZUZvY3VzKCl9XG4gICAgICAgICAgb25CbHVyPXsoKSA9PiB0aGlzLl9oYW5kbGVCbHVyKCl9XG4gICAgICAgIC8+XG4gICAgICAgIHtlcnJvciAmJiAoXG4gICAgICAgICAgPHNtYWxsIGlkPSdpbnB1dC1lcnJvcicgcm9sZT0nYWxlcnQnIGNsYXNzTmFtZT0nZXJyb3ItbWVzc2FnZScgcGFydD0nZXJyb3InPlxuICAgICAgICAgICAge3RoaXMuX2VzYyhlcnJvcil9XG4gICAgICAgICAgPC9zbWFsbD5cbiAgICAgICAgKX1cbiAgICAgIDwvZGl2PlxuICAgICk7XG4gIH1cblxuICBvdmVycmlkZSBhdHRyaWJ1dGVDaGFuZ2VkQ2FsbGJhY2sobmFtZTogc3RyaW5nLCBvbGQ6IHN0cmluZyB8IG51bGwsIHZhbDogc3RyaW5nIHwgbnVsbCk6IHZvaWQge1xuICAgIGlmIChvbGQgPT09IHZhbCkgcmV0dXJuO1xuICAgIGlmIChuYW1lID09PSAnZGlzYWJsZWQnIHx8IG5hbWUgPT09ICdlcnJvcicpIHtcbiAgICAgIHRoaXMuX3N5bmNET00oKTtcbiAgICAgIHRoaXMuX3VwZGF0ZVN0YXRlcygpO1xuICAgIH0gZWxzZSBpZiAobmFtZSA9PT0gJ3ZhbHVlJykge1xuICAgICAgdGhpcy5fc3luY0RPTSgpO1xuICAgICAgaWYgKHRoaXMuX2ludGVybmFscykge1xuICAgICAgICB0aGlzLl9pbnRlcm5hbHMuc2V0Rm9ybVZhbHVlKHZhbCB8fCAnJyk7XG4gICAgICB9XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMuX3N5bmNET00oKTtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIF9zeW5jRE9NKCk6IHZvaWQge1xuICAgIGNvbnN0IGlucHV0ID0gdGhpcy5zaGFkb3dSb290Py5xdWVyeVNlbGVjdG9yKCdpbnB1dCwgdGV4dGFyZWEsIHNlbGVjdCcpIGFzXG4gICAgICB8IEhUTUxJbnB1dEVsZW1lbnRcbiAgICAgIHwgbnVsbDtcbiAgICBpZiAoIWlucHV0KSByZXR1cm47XG4gICAgaW5wdXQuZGlzYWJsZWQgPSB0aGlzLmhhc0F0dHJpYnV0ZSgnZGlzYWJsZWQnKTtcbiAgICBjb25zdCB2YWwgPSB0aGlzLmdldEF0dHJpYnV0ZSgndmFsdWUnKTtcbiAgICBpZiAodmFsICE9PSBudWxsICYmIGlucHV0LnZhbHVlICE9PSB2YWwpIHtcbiAgICAgIGlucHV0LnZhbHVlID0gdmFsO1xuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgX3VwZGF0ZVN0YXRlcygpOiB2b2lkIHtcbiAgICBpZiAoIXRoaXMuX2ludGVybmFscz8uc3RhdGVzKSByZXR1cm47XG4gICAgaWYgKHRoaXMuaGFzQXR0cmlidXRlKCdkaXNhYmxlZCcpKSB7XG4gICAgICB0aGlzLl9pbnRlcm5hbHMuc3RhdGVzLmFkZCgnZGlzYWJsZWQnKTtcbiAgICAgIHRoaXMuX2ludGVybmFscy5zdGF0ZXMuZGVsZXRlKCdlbmFibGVkJyk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMuX2ludGVybmFscy5zdGF0ZXMuZGVsZXRlKCdkaXNhYmxlZCcpO1xuICAgICAgdGhpcy5faW50ZXJuYWxzLnN0YXRlcy5hZGQoJ2VuYWJsZWQnKTtcbiAgICB9XG4gICAgaWYgKHRoaXMuZ2V0QXR0cmlidXRlKCdlcnJvcicpKSB7XG4gICAgICB0aGlzLl9pbnRlcm5hbHMuc3RhdGVzLmFkZCgnaW52YWxpZCcpO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLl9pbnRlcm5hbHMuc3RhdGVzLmRlbGV0ZSgnaW52YWxpZCcpO1xuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgX2hhbmRsZUlucHV0KGU6IEV2ZW50KTogdm9pZCB7XG4gICAgY29uc3QgaW5wdXQgPSBlLnRhcmdldCBhcyBIVE1MSW5wdXRFbGVtZW50O1xuICAgIHRoaXMuc2V0QXR0cmlidXRlKCd2YWx1ZScsIGlucHV0LnZhbHVlKTtcbiAgICB0aGlzLl9pbnRlcm5hbHM/LnNldEZvcm1WYWx1ZShpbnB1dC52YWx1ZSk7XG4gICAgdGhpcy5kaXNwYXRjaEV2ZW50KFxuICAgICAgbmV3IEN1c3RvbUV2ZW50KCdvcGVuLWlucHV0Jywge1xuICAgICAgICBkZXRhaWw6IHsgdmFsdWU6IGlucHV0LnZhbHVlIH0sXG4gICAgICAgIGJ1YmJsZXM6IHRydWUsXG4gICAgICAgIGNvbXBvc2VkOiBmYWxzZSxcbiAgICAgIH0pLFxuICAgICk7XG4gIH1cblxuICBwcml2YXRlIF9oYW5kbGVDaGFuZ2UoZTogRXZlbnQpOiB2b2lkIHtcbiAgICBjb25zdCBpbnB1dCA9IGUudGFyZ2V0IGFzIEhUTUxJbnB1dEVsZW1lbnQ7XG4gICAgdGhpcy5kaXNwYXRjaEV2ZW50KFxuICAgICAgbmV3IEN1c3RvbUV2ZW50KCdvcGVuLWNoYW5nZScsIHtcbiAgICAgICAgZGV0YWlsOiB7IHZhbHVlOiBpbnB1dC52YWx1ZSB9LFxuICAgICAgICBidWJibGVzOiB0cnVlLFxuICAgICAgICBjb21wb3NlZDogZmFsc2UsXG4gICAgICB9KSxcbiAgICApO1xuICB9XG5cbiAgcHJpdmF0ZSBfaGFuZGxlRm9jdXMoKTogdm9pZCB7XG4gICAgdGhpcy5kaXNwYXRjaEV2ZW50KG5ldyBDdXN0b21FdmVudCgnb3Blbi1mb2N1cycsIHsgYnViYmxlczogdHJ1ZSwgY29tcG9zZWQ6IGZhbHNlIH0pKTtcbiAgfVxuXG4gIHByaXZhdGUgX2hhbmRsZUJsdXIoKTogdm9pZCB7XG4gICAgdGhpcy5kaXNwYXRjaEV2ZW50KG5ldyBDdXN0b21FdmVudCgnb3Blbi1ibHVyJywgeyBidWJibGVzOiB0cnVlLCBjb21wb3NlZDogZmFsc2UgfSkpO1xuICB9XG5cbiAgZm9ybVJlc2V0Q2FsbGJhY2soKTogdm9pZCB7XG4gICAgdGhpcy5zZXRBdHRyaWJ1dGUoJ3ZhbHVlJywgJycpO1xuICAgIHRoaXMucmVtb3ZlQXR0cmlidXRlKCdlcnJvcicpO1xuICAgIHRoaXMuX2ludGVybmFscz8uc2V0Rm9ybVZhbHVlKCcnKTtcbiAgICB0aGlzLl9zeW5jRE9NKCk7XG4gIH1cblxuICBmb3JtRGlzYWJsZWRDYWxsYmFjayhkaXNhYmxlZDogYm9vbGVhbik6IHZvaWQge1xuICAgIGlmIChkaXNhYmxlZCkge1xuICAgICAgdGhpcy5zZXRBdHRyaWJ1dGUoJ2Rpc2FibGVkJywgJycpO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLnJlbW92ZUF0dHJpYnV0ZSgnZGlzYWJsZWQnKTtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIF9lc2MgPSBlc2NhcGVIdG1sO1xuICBwcml2YXRlIF9lc2NBdHRyID0gZXNjYXBlQXR0cjtcbn1cblxuZXhwb3J0IGRlZmF1bHQgT3BlbklucHV0O1xuXG4vLyBHdWFyZDogaWRlbXBvdGVudCBhY3Jvc3MgU1NSIHBhdGhzXG5pZiAodHlwZW9mIGN1c3RvbUVsZW1lbnRzICE9PSAndW5kZWZpbmVkJyAmJiAhY3VzdG9tRWxlbWVudHMuZ2V0KHRhZ05hbWUpKSB7XG4gIGN1c3RvbUVsZW1lbnRzLmRlZmluZSh0YWdOYW1lLCBPcGVuSW5wdXQpO1xufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHVDQUF1QyxHQUN2Qzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztDQTRCQyxHQUVELFNBQVMsV0FBVyxRQUFRLHVCQUF1QjtBQUNuRCxTQUFTLFVBQVUsUUFBNkIsZ0NBQWdDO0FBQ2hGLFNBQVMsVUFBVSxFQUFFLFVBQVUsUUFBUSxvQkFBb0I7QUFFM0QsT0FBTyxNQUFNLFVBQVUsYUFBYTtBQUVwQyxNQUFNLFFBQXdCLElBQUk7QUFDbEMsTUFBTSxXQUFXLENBQUMsQ0FBQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFvRW5CLENBQUM7QUFFRCxPQUFPLE1BQU0sa0JBQWtCO0VBQzdCLE9BQWdCLFNBQVM7SUFBQztHQUFNLENBQUM7RUFDakMsT0FBZ0Is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

package/src/open-lab-panel.d.ts

@@ -0,0 +1,16 @@
+/** @jsxImportSource @openelement/core */ /**
+ * @openelement/ui - open-lab-panel
+ *
+ * Standards-lab panel for specs, artifact frames, and reference desks.
+ */ import { OpenElement } from '@openelement/element';
+import { type StyleSheetLike } from '@openelement/core/style-sheet';
+export declare const tagName: 'open-lab-panel';
+declare const sheet: StyleSheetLike;
+export declare class OpenLabPanel extends OpenElement {
+  static override styles: [];
+  static override observedAttributes: [string, string, string, string];
+  override render(): ReturnType<typeof OpenElement.prototype.render>;
+  private _esc: any;
+  private _getStr: any;
+}
+export default OpenLabPanel;

package/src/open-lab-panel.js

@@ -0,0 +1,151 @@
+/** @jsxImportSource @openelement/core */ /**
+ * @openelement/ui - open-lab-panel
+ *
+ * Standards-lab panel for specs, artifact frames, and reference desks.
+ */ import { OpenElement } from '@openelement/element';
+import { StyleSheet } from '@openelement/core/style-sheet';
+import { escapeHtml } from '@openelement/core';
+export const tagName = 'open-lab-panel';
+const sheet = new StyleSheet();
+sheet.replaceSync(`
+  :host {
+    display: block;
+  }
+
+  .panel {
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr);
+    min-height: var(--panel-min-height, auto);
+    overflow: hidden;
+    border: var(--border-size-1) solid var(--border);
+    border-radius: var(--radius-3);
+    background:
+      linear-gradient(135deg, color-mix(in srgb, var(--violet-1) 18%, transparent), transparent 44%),
+      var(--bg-card);
+    color: var(--text-primary);
+    box-shadow: 0 var(--size-2) var(--size-8) color-mix(in srgb, var(--brand) 8%, transparent);
+  }
+
+  .panel--muted {
+    background: var(--bg-surface);
+  }
+
+  .panel--artifact,
+  .panel--code {
+    background: var(--bg-code, var(--gray-11));
+    color: var(--code-text);
+    border-color: var(--code-border, var(--gray-8));
+  }
+
+  .panel__bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--size-4);
+    min-height: var(--size-10);
+    padding: var(--size-2) var(--size-4);
+    border-bottom: var(--border-size-1) solid var(--border);
+    background: color-mix(in srgb, var(--bg-surface) 78%, transparent);
+  }
+
+  .panel--artifact .panel__bar,
+  .panel--code .panel__bar {
+    border-bottom-color: var(--code-border, var(--gray-8));
+    background: color-mix(in srgb, var(--gray-12) 8%, transparent);
+  }
+
+  .panel__label {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--size-2);
+    min-width: 0;
+    color: var(--text-muted);
+    font-family: var(--font-mono);
+    font-size: var(--font-size-00);
+    font-weight: var(--font-weight-8);
+    letter-spacing: 0;
+    text-transform: uppercase;
+  }
+
+  .panel--artifact .panel__label,
+  .panel--code .panel__label {
+    color: var(--gray-5);
+  }
+
+  .panel__dot {
+    width: var(--size-2);
+    height: var(--size-2);
+    border-radius: var(--radius-round);
+    background: var(--brand);
+    box-shadow:
+      calc(var(--size-3) * -1) 0 0 var(--warning),
+      var(--size-3) 0 0 var(--success);
+    margin-inline: var(--size-3) var(--size-2);
+    flex: 0 0 auto;
+  }
+
+  .panel__meta {
+    color: var(--text-muted);
+    font-family: var(--font-mono);
+    font-size: var(--font-size-00);
+    white-space: nowrap;
+  }
+
+  .panel--artifact .panel__meta,
+  .panel--code .panel__meta {
+    color: var(--gray-6);
+  }
+
+  .panel__body {
+    min-width: 0;
+    padding: var(--size-5);
+  }
+
+  :host([compact]) .panel__body {
+    padding: var(--size-4);
+  }
+
+  ::slotted(*) {
+    margin-block-start: 0;
+  }
+`);
+export class OpenLabPanel extends OpenElement {
+  static styles = [
+    sheet
+  ];
+  static observedAttributes = [
+    'variant',
+    'label',
+    'meta',
+    'compact'
+  ];
+  render() {
+    const variant = this._getStr('variant', 'surface');
+    const label = this._getStr('label', '');
+    const meta = this._getStr('meta', '');
+    return <section className={`panel panel--${variant}`} part='container'>
+        {(label || meta) && <header className='panel__bar' part='header'>
+            <span className='panel__label'>
+              <span className='panel__dot' aria-hidden='true'></span>
+              {this._esc(label)}
+            </span>
+            {meta && <span className='panel__meta'>{this._esc(meta)}</span>}
+          </header>}
+        <div className='panel__body' part='body'>
+          <slot></slot>
+        </div>
+      </section>;
+  }
+  _esc = escapeHtml;
+  _getStr(attr, def) {
+    const camel = attr.replace(/-([a-z])/g, (_, c)=>c.toUpperCase());
+    const prop = this[camel] ?? this[attr];
+    if (prop !== undefined && prop !== null) return String(prop);
+    return this.getAttribute(attr) || def;
+  }
+}
+export default OpenLabPanel;
+if (typeof customElements !== 'undefined' && !customElements.get(tagName)) {
+  customElements.define(tagName, OpenLabPanel);
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZpbGU6Ly8vaG9tZS9ydW5uZXIvd29yay9vcGVuZWxlbWVudC9vcGVuZWxlbWVudC9wYWNrYWdlcy91aS9zcmMvb3Blbi1sYWItcGFuZWwudHN4Il0sInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4SW1wb3J0U291cmNlIEBvcGVuZWxlbWVudC9jb3JlICovXG4vKipcbiAqIEBvcGVuZWxlbWVudC91aSAtIG9wZW4tbGFiLXBhbmVsXG4gKlxuICogU3RhbmRhcmRzLWxhYiBwYW5lbCBmb3Igc3BlY3MsIGFydGlmYWN0IGZyYW1lcywgYW5kIHJlZmVyZW5jZSBkZXNrcy5cbiAqL1xuXG5pbXBvcnQgeyBPcGVuRWxlbWVudCB9IGZyb20gJ0BvcGVuZWxlbWVudC9lbGVtZW50JztcbmltcG9ydCB7IFN0eWxlU2hlZXQsIHR5cGUgU3R5bGVTaGVldExpa2UgfSBmcm9tICdAb3BlbmVsZW1lbnQvY29yZS9zdHlsZS1zaGVldCc7XG5pbXBvcnQgeyBlc2NhcGVIdG1sIH0gZnJvbSAnQG9wZW5lbGVtZW50L2NvcmUnO1xuXG5leHBvcnQgY29uc3QgdGFnTmFtZSA9ICdvcGVuLWxhYi1wYW5lbCc7XG5cbmNvbnN0IHNoZWV0OiBTdHlsZVNoZWV0TGlrZSA9IG5ldyBTdHlsZVNoZWV0KCk7XG5zaGVldC5yZXBsYWNlU3luYyhgXG4gIDpob3N0IHtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgfVxuXG4gIC5wYW5lbCB7XG4gICAgZGlzcGxheTogZ3JpZDtcbiAgICBncmlkLXRlbXBsYXRlLXJvd3M6IGF1dG8gbWlubWF4KDAsIDFmcik7XG4gICAgbWluLWhlaWdodDogdmFyKC0tcGFuZWwtbWluLWhlaWdodCwgYXV0byk7XG4gICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICBib3JkZXI6IHZhcigtLWJvcmRlci1zaXplLTEpIHNvbGlkIHZhcigtLWJvcmRlcik7XG4gICAgYm9yZGVyLXJhZGl1czogdmFyKC0tcmFkaXVzLTMpO1xuICAgIGJhY2tncm91bmQ6XG4gICAgICBsaW5lYXItZ3JhZGllbnQoMTM1ZGVnLCBjb2xvci1taXgoaW4gc3JnYiwgdmFyKC0tdmlvbGV0LTEpIDE4JSwgdHJhbnNwYXJlbnQpLCB0cmFuc3BhcmVudCA0NCUpLFxuICAgICAgdmFyKC0tYmctY2FyZCk7XG4gICAgY29sb3I6IHZhcigtLXRleHQtcHJpbWFyeSk7XG4gICAgYm94LXNoYWRvdzogMCB2YXIoLS1zaXplLTIpIHZhcigtLXNpemUtOCkgY29sb3ItbWl4KGluIHNyZ2IsIHZhcigtLWJyYW5kKSA4JSwgdHJhbnNwYXJlbnQpO1xuICB9XG5cbiAgLnBhbmVsLS1tdXRlZCB7XG4gICAgYmFja2dyb3VuZDogdmFyKC0tYmctc3VyZmFjZSk7XG4gIH1cblxuICAucGFuZWwtLWFydGlmYWN0LFxuICAucGFuZWwtLWNvZGUge1xuICAgIGJhY2tncm91bmQ6IHZhcigtLWJnLWNvZGUsIHZhcigtLWdyYXktMTEpKTtcbiAgICBjb2xvcjogdmFyKC0tY29kZS10ZXh0KTtcbiAgICBib3JkZXItY29sb3I6IHZhcigtLWNvZGUtYm9yZGVyLCB2YXIoLS1ncmF5LTgpKTtcbiAgfVxuXG4gIC5wYW5lbF9fYmFyIHtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICAgIGdhcDogdmFyKC0tc2l6ZS00KTtcbiAgICBtaW4taGVpZ2h0OiB2YXIoLS1zaXplLTEwKTtcbiAgICBwYWRkaW5nOiB2YXIoLS1zaXplLTIpIHZhcigtLXNpemUtNCk7XG4gICAgYm9yZGVyLWJvdHRvbTogdmFyKC0tYm9yZGVyLXNpemUtMSkgc29saWQgdmFyKC0tYm9yZGVyKTtcbiAgICBiYWNrZ3JvdW5kOiBjb2xvci1taXgoaW4gc3JnYiwgdmFyKC0tYmctc3VyZmFjZSkgNzglLCB0cmFuc3BhcmVudCk7XG4gIH1cblxuICAucGFuZWwtLWFydGlmYWN0IC5wYW5lbF9fYmFyLFxuICAucGFuZWwtLWNvZGUgLnBhbmVsX19iYXIge1xuICAgIGJvcmRlci1ib3R0b20tY29sb3I6IHZhcigtLWNvZGUtYm9yZGVyLCB2YXIoLS1ncmF5LTgpKTtcbiAgICBiYWNrZ3JvdW5kOiBjb2xvci1taXgoaW4gc3JnYiwgdmFyKC0tZ3JheS0xMikgOCUsIHRyYW5zcGFyZW50KTtcbiAgfVxuXG4gIC5wYW5lbF9fbGFiZWwge1xuICAgIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgZ2FwOiB2YXIoLS1zaXplLTIpO1xuICAgIG1pbi13aWR0aDogMDtcbiAgICBjb2xvcjogdmFyKC0tdGV4dC1tdXRlZCk7XG4gICAgZm9udC1mYW1pbHk6IHZhcigtLWZvbnQtbW9ubyk7XG4gICAgZm9udC1zaXplOiB2YXIoLS1mb250LXNpemUtMDApO1xuICAgIGZvbnQtd2VpZ2h0OiB2YXIoLS1mb250LXdlaWdodC04KTtcbiAgICBsZXR0ZXItc3BhY2luZzogMDtcbiAgICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICB9XG5cbiAgLnBhbmVsLS1hcnRpZmFjdCAucGFuZWxfX2xhYmVsLFxuICAucGFuZWwtLWNvZGUgLnBhbmVsX19sYWJlbCB7XG4gICAgY29sb3I6IHZhcigtLWdyYXktNSk7XG4gIH1cblxuICAucGFuZWxfX2RvdCB7XG4gICAgd2lkdGg6IHZhcigtLXNpemUtMik7XG4gICAgaGVpZ2h0OiB2YXIoLS1zaXplLTIpO1xuICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLXJhZGl1cy1yb3VuZCk7XG4gICAgYmFja2dyb3VuZDogdmFyKC0tYnJhbmQpO1xuICAgIGJveC1zaGFkb3c6XG4gICAgICBjYWxjKHZhcigtLXNpemUtMykgKiAtMSkgMCAwIHZhcigtLXdhcm5pbmcpLFxuICAgICAgdmFyKC0tc2l6ZS0zKSAwIDAgdmFyKC0tc3VjY2Vzcyk7XG4gICAgbWFyZ2luLWlubGluZTogdmFyKC0tc2l6ZS0zKSB2YXIoLS1zaXplLTIpO1xuICAgIGZsZXg6IDAgMCBhdXRvO1xuICB9XG5cbiAgLnBhbmVsX19tZXRhIHtcbiAgICBjb2xvcjogdmFyKC0tdGV4dC1tdXRlZCk7XG4gICAgZm9udC1mYW1pbHk6IHZhcigtLWZvbnQtbW9ubyk7XG4gICAgZm9udC1zaXplOiB2YXIoLS1mb250LXNpemUtMDApO1xuICAgIHdoaXRlLXNwYWNlOiBub3dyYXA7XG4gIH1cblxuICAucGFuZWwtLWFydGlmYWN0IC5wYW5lbF9fbWV0YSxcbiAgLnBhbmVsLS1jb2RlIC5wYW5lbF9fbWV0YSB7XG4gICAgY29sb3I6IHZhcigtLWdyYXktNik7XG4gIH1cblxuICAucGFuZWxfX2JvZHkge1xuICAgIG1pbi13aWR0aDogMDtcbiAgICBwYWRkaW5nOiB2YXIoLS1zaXplLTUpO1xuICB9XG5cbiAgOmhvc3QoW2NvbXBhY3RdKSAucGFuZWxfX2JvZHkge1xuICAgIHBhZGRpbmc6IHZhcigtLXNpemUtNCk7XG4gIH1cblxuICA6OnNsb3R0ZWQoKikge1xuICAgIG1hcmdpbi1ibG9jay1zdGFydDogMDtcbiAgfVxuYCk7XG5cbmV4cG9ydCBjbGFzcyBPcGVuTGFiUGFuZWwgZXh0ZW5kcyBPcGVuRWxlbWVudCB7XG4gIHN0YXRpYyBvdmVycmlkZSBzdHlsZXMgPSBbc2hlZXRdO1xuICBzdGF0aWMgb3ZlcnJpZGUgb2JzZXJ2ZWRBdHRyaWJ1dGVzID0gWyd2YXJpYW50JywgJ2xhYmVsJywgJ21ldGEnLCAnY29tcGFjdCddO1xuXG4gIG92ZXJyaWRlIHJlbmRlcigpOiBSZXR1cm5UeXBlPHR5cGVvZiBPcGVuRWxlbWVudC5wcm90b3R5cGUucmVuZGVyPiB7XG4gICAgY29uc3QgdmFyaWFudCA9IHRoaXMuX2dldFN0cigndmFyaWFudCcsICdzdXJmYWNlJyk7XG4gICAgY29uc3QgbGFiZWwgPSB0aGlzLl9nZXRTdHIoJ2xhYmVsJywgJycpO1xuICAgIGNvbnN0IG1ldGEgPSB0aGlzLl9nZXRTdHIoJ21ldGEnLCAnJyk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgPHNlY3Rpb24gY2xhc3NOYW1lPXtgcGFuZWwgcGFuZWwtLSR7dmFyaWFudH1gfSBwYXJ0PSdjb250YWluZXInPlxuICAgICAgICB7KGxhYmVsIHx8IG1ldGEpICYmIChcbiAgICAgICAgICA8aGVhZGVyIGNsYXNzTmFtZT0ncGFuZWxfX2JhcicgcGFydD0naGVhZGVyJz5cbiAgICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT0ncGFuZWxfX2xhYmVsJz5cbiAgICAgICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPSdwYW5lbF9fZG90JyBhcmlhLWhpZGRlbj0ndHJ1ZSc+PC9zcGFuPlxuICAgICAgICAgICAgICB7dGhpcy5fZXNjKGxhYmVsKX1cbiAgICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgICAgIHttZXRhICYmIDxzcGFuIGNsYXNzTmFtZT0ncGFuZWxfX21ldGEnPnt0aGlzLl9lc2MobWV0YSl9PC9zcGFuPn1cbiAgICAgICAgICA8L2hlYWRlcj5cbiAgICAgICAgKX1cbiAgICAgICAgPGRpdiBjbGFzc05hbWU9J3BhbmVsX19ib2R5JyBwYXJ0PSdib2R5Jz5cbiAgICAgICAgICA8c2xvdD48L3Nsb3Q+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9zZWN0aW9uPlxuICAgICk7XG4gIH1cblxuICBwcml2YXRlIF9lc2MgPSBlc2NhcGVIdG1sO1xuXG4gIHByaXZhdGUgX2dldFN0cihhdHRyOiBzdHJpbmcsIGRlZjogc3RyaW5nKTogc3RyaW5nIHtcbiAgICBjb25zdCBjYW1lbCA9IGF0dHIucmVwbGFjZSgvLShbYS16XSkvZywgKF8sIGM6IHN0cmluZykgPT4gYy50b1VwcGVyQ2FzZSgpKTtcbiAgICBjb25zdCBwcm9wID0gKHRoaXMgYXMgUmVjb3JkPHN0cmluZywgdW5rbm93bj4pW2NhbWVsXSA/P1xuICAgICAgKHRoaXMgYXMgUmVjb3JkPHN0cmluZywgdW5rbm93bj4pW2F0dHJdO1xuICAgIGlmIChwcm9wICE9PSB1bmRlZmluZWQgJiYgcHJvcCAhPT0gbnVsbCkgcmV0dXJuIFN0cmluZyhwcm9wKTtcbiAgICByZXR1cm4gdGhpcy5nZXRBdHRyaWJ1dGUoYXR0cikgfHwgZGVmO1xuICB9XG59XG5cbmV4cG9ydCBkZWZhdWx0IE9wZW5MYWJQYW5lbDtcblxuaWYgKHR5cGVvZiBjdXN0b21FbGVtZW50cyAhPT0gJ3VuZGVmaW5lZCcgJiYgIWN1c3RvbUVsZW1lbnRzLmdldCh0YWdOYW1lKSkge1xuICBjdXN0b21FbGVtZW50cy5kZWZpbmUodGFnTmFtZSwgT3BlbkxhYlBhbmVsKTtcbn1cbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSx1Q0FBdUMsR0FDdkM7Ozs7Q0FJQyxHQUVELFNBQVMsV0FBVyxRQUFRLHVCQUF1QjtBQUNuRCxTQUFTLFVBQVUsUUFBNkIsZ0NBQWdDO0FBQ2hGLFNBQVMsVUFBVSxRQUFRLG9CQUFvQjtBQUUvQyxPQUFPLE1BQU0sVUFBVSxpQkFBaUI7QUFFeEMsTUFBTSxRQUF3QixJQUFJO0FBQ2xDLE1BQU0sV0FBVyxDQUFDLENBQUM7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBcUduQixDQUFDO0FBRUQsT0FBTyxNQUFNLHFCQUFxQjtFQUNoQyxPQUFnQixTQUFTO0lBQUM7R0FBTSxDQUFDO0VBQ2pDLE9BQWdCLHFCQUFxQjtJQUFDO0lBQVc7SUFBUztJQUFRO0dBQVUsQ0FBQztFQUVwRSxTQUEwRDtJQUNqRSxNQUFNLFVBQVUsSUFBSSxDQUFDLE9BQU8sQ0FBQyxXQUFXO0lBQ3hDLE1BQU0sUUFBUSxJQUFJLENBQUMsT0FBTyxDQUFDLFNBQVM7SUFDcEMsTUFBTSxPQUFPLElBQUksQ0FBQyxPQUFPLENBQUMsUUFBUTtJQUVsQyxRQUNHLFFBQVEsV0FBVyxDQUFDLGFBQWEsRUFBRSxTQUFTLEVBQUUsS0FBSyxZQUFZO1FBQzlELENBQUMsQ0FBQyxTQUFTLElBQUksTUFDWixPQUFPLFVBQVUsYUFBYSxLQUFLLFNBQVM7WUFDM0MsQ0FBQyxLQUFLLFVBQVUsZUFBZTtjQUM3QixDQUFDLEtBQUssVUFBVSxhQUFhLFlBQVksU0FBUyxLQUFLO2NBQ3ZELENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPO1lBQ3BCLEVBQUUsS0FBSztZQUNQLENBQUMsU0FBUyxLQUFLLFVBQVUsZUFBZSxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsTUFBTTtVQUNsRSxFQUFFLFFBQ0Y7UUFDRixDQUFDLElBQUksVUFBVSxjQUFjLEtBQUssT0FBTztVQUN2QyxDQUFDLE9BQU8sS0FBSztRQUNmLEVBQUUsSUFBSTtNQUNSLEVBQUU7RUFFTjtFQUVRLE9BQU8sV0FBVztFQUVsQixRQUFRLElBQVksRUFBRSxHQUFXLEVBQVU7SUFDakQsTUFBTSxRQUFRLEtBQUssT0FBTyxDQUFDLGFBQWEsQ0FBQyxHQUFHLElBQWMsRUFBRSxXQUFXO0lBQ3ZFLE1BQU0sT0FBTyxBQUFDLElBQUksQUFBNEIsQ0FBQyxNQUFNLElBQ25ELEFBQUMsSUFBSSxBQUE0QixDQUFDLEtBQUs7SUFDekMsSUFBSSxTQUFTLGFBQWEsU0FBUyxNQUFNLE9BQU8sT0FBTztJQUN2RCxPQUFPLElBQUksQ0FBQyxZQUFZLENBQUMsU0FBUztFQUNwQztBQUNGO0FBRUEsZUFBZSxhQUFhO0FBRTVCLElBQUksT0FBTyxtQkFBbUIsZUFBZSxDQUFDLGVBQWUsR0FBRyxDQUFDLFVBQVU7RUFDekUsZUFBZSxNQUFNLENBQUMsU0FBUztBQUNqQyJ9

package/src/open-lab-stage.d.ts

@@ -0,0 +1,15 @@
+/** @jsxImportSource @openelement/core */ /**
+ * @openelement/ui - open-lab-stage
+ *
+ * Kinetic standards-lab hero primitive for product-art landing pages.
+ */ import { OpenElement } from '@openelement/element';
+import { type StyleSheetLike } from '@openelement/core/style-sheet';
+export declare const tagName: 'open-lab-stage';
+declare const sheet: StyleSheetLike;
+export declare class OpenLabStage extends OpenElement {
+  static override styles: [];
+  static override observedAttributes: [string, string];
+  override render(): ReturnType<typeof OpenElement.prototype.render>;
+  private _getStr: any;
+}
+export default OpenLabStage;