@openelement/ui 0.41.0-alpha.1

package/src/open-standards-visual.js

@@ -0,0 +1,425 @@
+/** @jsxImportSource @openelement/core */ /**
+ * @openelement/ui - open-standards-visual
+ *
+ * Product-art diagrams for the openElement standards lab website.
+ */ import { OpenElement } from '@openelement/element';
+import { StyleSheet } from '@openelement/core/style-sheet';
+export const tagName = 'open-standards-visual';
+const sheet = new StyleSheet();
+sheet.replaceSync(`
+  :host {
+    display: block;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .visual {
+    display: grid;
+    gap: var(--size-4);
+    color: var(--text-primary);
+  }
+
+  .visual--high {
+    gap: var(--size-5);
+  }
+
+  .hero {
+    display: grid;
+    gap: var(--size-4);
+  }
+
+  .hero__top {
+    display: grid;
+    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
+    gap: var(--size-4);
+  }
+
+  .code {
+    margin: 0;
+    overflow: auto;
+    color: var(--code-text);
+    font-family: var(--font-mono);
+    font-size: var(--font-size-00);
+    line-height: var(--font-lineheight-4);
+    white-space: pre-wrap;
+  }
+
+  .mark {
+    color: var(--brand-light);
+  }
+
+  .spec {
+    display: grid;
+    gap: var(--size-3);
+  }
+
+  .spec__row,
+  .route,
+  .package,
+  .token,
+  .stage {
+    position: relative;
+    display: grid;
+    gap: var(--size-1);
+    padding: var(--size-3);
+    overflow: hidden;
+    border: var(--border-size-1) solid var(--border);
+    border-radius: var(--radius-2);
+    background: var(--bg-card);
+  }
+
+  .route::before,
+  .package::before,
+  .token::before,
+  .stage::before {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    width: var(--size-1);
+    background: var(--brand);
+    opacity: .72;
+  }
+
+  .spec__key,
+  .route__path,
+  .package__name,
+  .token__name,
+  .stage__num {
+    color: var(--brand);
+    font-family: var(--font-mono);
+    font-size: var(--font-size-00);
+    font-weight: var(--font-weight-8);
+    letter-spacing: 0;
+  }
+
+  .spec__value,
+  .route__desc,
+  .package__desc,
+  .token__desc,
+  .stage__copy {
+    color: var(--text-secondary);
+    font-size: var(--font-size-0);
+    line-height: var(--font-lineheight-3);
+  }
+
+  .pipeline {
+    display: grid;
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+    gap: var(--size-2);
+  }
+
+  .stage {
+    min-height: var(--size-16);
+    background: color-mix(in srgb, var(--bg-card) 82%, var(--brand-subtle));
+  }
+
+  .visual--high .stage,
+  .visual--high .route,
+  .visual--high .package,
+  .visual--high .token {
+    background:
+      linear-gradient(135deg, color-mix(in srgb, var(--brand-subtle) 64%, transparent), transparent),
+      var(--bg-card);
+  }
+
+  .stage--success .stage__num,
+  .package--success .package__name {
+    color: var(--success);
+  }
+
+  .stage--success::before,
+  .package--success::before {
+    background: var(--success);
+  }
+
+  .stage--warning .stage__num,
+  .package--warning .package__name {
+    color: var(--warning);
+  }
+
+  .stage--warning::before,
+  .package--warning::before {
+    background: var(--warning);
+  }
+
+  .routes,
+  .packages,
+  .tokens {
+    display: grid;
+    gap: var(--size-3);
+  }
+
+  .route {
+    grid-template-columns: minmax(0, .44fr) minmax(0, 1fr);
+    align-items: start;
+  }
+
+  .package {
+    grid-template-columns: minmax(0, .36fr) minmax(0, 1fr);
+    align-items: start;
+  }
+
+  .tokens {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .token__swatch {
+    width: var(--size-8);
+    height: var(--size-5);
+    border-radius: var(--radius-1);
+    border: var(--border-size-1) solid var(--border);
+    background: var(--bg-card);
+  }
+
+  .token--brand .token__swatch { background: var(--brand); }
+  .token--success .token__swatch { background: var(--success); }
+  .token--warning .token__swatch { background: var(--warning); }
+  .token--info .token__swatch { background: var(--info); }
+  .token--surface .token__swatch { background: var(--bg-elevated); }
+  .token--code .token__swatch { background: var(--bg-code, var(--gray-11)); }
+
+  .matrix {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--size-3);
+  }
+
+  .visual--motion .stage,
+  .visual--motion .route,
+  .visual--motion .package,
+  .visual--motion .token {
+    animation: visual-lift 7s var(--ease-2) infinite alternate;
+  }
+
+  .visual--motion .stage:nth-child(2),
+  .visual--motion .route:nth-child(2),
+  .visual--motion .package:nth-child(2),
+  .visual--motion .token:nth-child(2) {
+    animation-delay: 600ms;
+  }
+
+  .visual--motion .stage:nth-child(3),
+  .visual--motion .route:nth-child(3),
+  .visual--motion .package:nth-child(3),
+  .visual--motion .token:nth-child(3) {
+    animation-delay: 1200ms;
+  }
+
+  .visual--motion .code {
+    animation: visual-code 8s var(--ease-1) infinite alternate;
+  }
+
+  @keyframes visual-lift {
+    from {
+      filter: brightness(1);
+    }
+    to {
+      filter: brightness(1.12);
+    }
+  }
+
+  @keyframes visual-code {
+    from {
+      color: var(--code-text);
+    }
+    to {
+      color: var(--brand-light);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .visual--motion .stage,
+    .visual--motion .route,
+    .visual--motion .package,
+    .visual--motion .token,
+    .visual--motion .code {
+      animation: none;
+    }
+  }
+
+  @media (max-width: 760px) {
+    .hero__top,
+    .pipeline,
+    .route,
+    .package,
+    .tokens,
+    .matrix {
+      grid-template-columns: 1fr;
+    }
+  }
+`);
+export class OpenStandardsVisual extends OpenElement {
+  static styles = [
+    sheet
+  ];
+  static observedAttributes = [
+    'variant',
+    'motion',
+    'emphasis'
+  ];
+  render() {
+    const variant = this._getStr('variant', 'hero');
+    const visualClass = this._visualClass();
+    if (variant === 'routes') return this._routes(visualClass);
+    if (variant === 'packages') return this._packages(visualClass);
+    if (variant === 'tokens') return this._tokens(visualClass);
+    return this._hero(visualClass);
+  }
+  _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;
+  }
+  _visualClass() {
+    const motion = this._getStr('motion', 'auto') === 'off' ? 'still' : 'motion';
+    const emphasis = this._getStr('emphasis', 'normal') === 'high' ? 'high' : 'normal';
+    return `visual visual--${emphasis} visual--${motion}`;
+  }
+  _hero(visualClass) {
+    return <div className={`${visualClass} hero`}>
+        <div className='hero__top'>
+          <pre className='code'><code>{`export default app({
+  routes: './app/routes',
+  render: 'declarative-shadow-dom',
+  islands: 'interaction-only',
+  adapter: 'vite'
+})`}</code></pre>
+          <div className='spec' aria-label='Standards sheet'>
+            <div className='spec__row'>
+              <span className='spec__key'>HTML</span>
+              <span className='spec__value'>
+                Declarative Shadow DOM as the first rendering target
+              </span>
+            </div>
+            <div className='spec__row'>
+              <span className='spec__key'>WC</span>
+              <span className='spec__value'>
+                Custom elements own behavior and progressive hydration
+              </span>
+            </div>
+            <div className='spec__row'>
+              <span className='spec__key'>API</span>
+              <span className='spec__value'>
+                Hono endpoints sit beside pages and content routes
+              </span>
+            </div>
+          </div>
+        </div>
+        <div className='pipeline' aria-label='Render pipeline'>
+          <div className='stage'>
+            <span className='stage__num'>01</span>
+            <span className='stage__copy'>Route</span>
+          </div>
+          <div className='stage stage--success'>
+            <span className='stage__num'>02</span>
+            <span className='stage__copy'>Render DSD</span>
+          </div>
+          <div className='stage'>
+            <span className='stage__num'>03</span>
+            <span className='stage__copy'>Ship HTML</span>
+          </div>
+          <div className='stage stage--warning'>
+            <span className='stage__num'>04</span>
+            <span className='stage__copy'>Hydrate island</span>
+          </div>
+          <div className='stage'>
+            <span className='stage__num'>05</span>
+            <span className='stage__copy'>Verify</span>
+          </div>
+        </div>
+      </div>;
+  }
+  _routes(visualClass) {
+    return <div className={`${visualClass} routes`} aria-label='Route graph'>
+        <div className='route'>
+          <span className='route__path'>/</span>
+          <span className='route__desc'>homepage lab artifact and product paths</span>
+        </div>
+        <div className='route'>
+          <span className='route__path'>/guide/*</span>
+          <span className='route__desc'>
+            build path, configuration, deployment, and production flow
+          </span>
+        </div>
+        <div className='route'>
+          <span className='route__path'>/architecture/*</span>
+          <span className='route__desc'>package graph, DSD, islands, and standards registry</span>
+        </div>
+        <div className='route'>
+          <span className='route__path'>/api</span>
+          <span className='route__desc'>public contract index across the product graph</span>
+        </div>
+      </div>;
+  }
+  _packages(visualClass) {
+    return <div className={`${visualClass} packages`} aria-label='Package graph'>
+        <div className='package package--success'>
+          <span className='package__name'>Elements</span>
+          <span className='package__desc'>
+            custom elements, DSD rendering, and component contracts
+          </span>
+        </div>
+        <div className='package'>
+          <span className='package__name'>UI</span>
+          <span className='package__desc'>
+            Open Props primitives used by this website and consumers
+          </span>
+        </div>
+        <div className='package package--warning'>
+          <span className='package__name'>Framework</span>
+          <span className='package__desc'>
+            routes, layouts, content, islands, i18n, and adapter-vite
+          </span>
+        </div>
+        <div className='package'>
+          <span className='package__name'>Protocols</span>
+          <span className='package__desc'>
+            public boundary declarations and package compatibility language
+          </span>
+        </div>
+      </div>;
+  }
+  _tokens(visualClass) {
+    return <div className={`${visualClass} tokens`} aria-label='Token board'>
+        <div className='token token--surface'>
+          <span className='token__swatch'></span>
+          <span className='token__name'>--bg-card</span>
+          <span className='token__desc'>reading surfaces</span>
+        </div>
+        <div className='token token--brand'>
+          <span className='token__swatch'></span>
+          <span className='token__name'>--brand</span>
+          <span className='token__desc'>links and primary action</span>
+        </div>
+        <div className='token token--success'>
+          <span className='token__swatch'></span>
+          <span className='token__name'>--success</span>
+          <span className='token__desc'>standards and shipped state</span>
+        </div>
+        <div className='token token--warning'>
+          <span className='token__swatch'></span>
+          <span className='token__name'>--warning</span>
+          <span className='token__desc'>planned or directional state</span>
+        </div>
+        <div className='token token--info'>
+          <span className='token__swatch'></span>
+          <span className='token__name'>--info</span>
+          <span className='token__desc'>reference and API state</span>
+        </div>
+        <div className='token token--code'>
+          <span className='token__swatch'></span>
+          <span className='token__name'>--bg-code</span>
+          <span className='token__desc'>code and artifact panels</span>
+        </div>
+      </div>;
+  }
+}
+export default OpenStandardsVisual;
+if (typeof customElements !== 'undefined' && !customElements.get(tagName)) {
+  customElements.define(tagName, OpenStandardsVisual);
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZpbGU6Ly8vaG9tZS9ydW5uZXIvd29yay9vcGVuZWxlbWVudC9vcGVuZWxlbWVudC9wYWNrYWdlcy91aS9zcmMvb3Blbi1zdGFuZGFyZHMtdmlzdWFsLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGpzeEltcG9ydFNvdXJjZSBAb3BlbmVsZW1lbnQvY29yZSAqL1xuLyoqXG4gKiBAb3BlbmVsZW1lbnQvdWkgLSBvcGVuLXN0YW5kYXJkcy12aXN1YWxcbiAqXG4gKiBQcm9kdWN0LWFydCBkaWFncmFtcyBmb3IgdGhlIG9wZW5FbGVtZW50IHN0YW5kYXJkcyBsYWIgd2Vic2l0ZS5cbiAqL1xuXG5pbXBvcnQgeyBPcGVuRWxlbWVudCB9IGZyb20gJ0BvcGVuZWxlbWVudC9lbGVtZW50JztcbmltcG9ydCB7IFN0eWxlU2hlZXQsIHR5cGUgU3R5bGVTaGVldExpa2UgfSBmcm9tICdAb3BlbmVsZW1lbnQvY29yZS9zdHlsZS1zaGVldCc7XG5cbmV4cG9ydCBjb25zdCB0YWdOYW1lID0gJ29wZW4tc3RhbmRhcmRzLXZpc3VhbCc7XG5cbmNvbnN0IHNoZWV0OiBTdHlsZVNoZWV0TGlrZSA9IG5ldyBTdHlsZVNoZWV0KCk7XG5zaGVldC5yZXBsYWNlU3luYyhgXG4gIDpob3N0IHtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgfVxuXG4gICoge1xuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIH1cblxuICAudmlzdWFsIHtcbiAgICBkaXNwbGF5OiBncmlkO1xuICAgIGdhcDogdmFyKC0tc2l6ZS00KTtcbiAgICBjb2xvcjogdmFyKC0tdGV4dC1wcmltYXJ5KTtcbiAgfVxuXG4gIC52aXN1YWwtLWhpZ2gge1xuICAgIGdhcDogdmFyKC0tc2l6ZS01KTtcbiAgfVxuXG4gIC5oZXJvIHtcbiAgICBkaXNwbGF5OiBncmlkO1xuICAgIGdhcDogdmFyKC0tc2l6ZS00KTtcbiAgfVxuXG4gIC5oZXJvX190b3Age1xuICAgIGRpc3BsYXk6IGdyaWQ7XG4gICAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiBtaW5tYXgoMCwgMS4xMmZyKSBtaW5tYXgoMCwgLjg4ZnIpO1xuICAgIGdhcDogdmFyKC0tc2l6ZS00KTtcbiAgfVxuXG4gIC5jb2RlIHtcbiAgICBtYXJnaW46IDA7XG4gICAgb3ZlcmZsb3c6IGF1dG87XG4gICAgY29sb3I6IHZhcigtLWNvZGUtdGV4dCk7XG4gICAgZm9udC1mYW1pbHk6IHZhcigtLWZvbnQtbW9ubyk7XG4gICAgZm9udC1zaXplOiB2YXIoLS1mb250LXNpemUtMDApO1xuICAgIGxpbmUtaGVpZ2h0OiB2YXIoLS1mb250LWxpbmVoZWlnaHQtNCk7XG4gICAgd2hpdGUtc3BhY2U6IHByZS13cmFwO1xuICB9XG5cbiAgLm1hcmsge1xuICAgIGNvbG9yOiB2YXIoLS1icmFuZC1saWdodCk7XG4gIH1cblxuICAuc3BlYyB7XG4gICAgZGlzcGxheTogZ3JpZDtcbiAgICBnYXA6IHZhcigtLXNpemUtMyk7XG4gIH1cblxuICAuc3BlY19fcm93LFxuICAucm91dGUsXG4gIC5wYWNrYWdlLFxuICAudG9rZW4sXG4gIC5zdGFnZSB7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGRpc3BsYXk6IGdyaWQ7XG4gICAgZ2FwOiB2YXIoLS1zaXplLTEpO1xuICAgIHBhZGRpbmc6IHZhcigtLXNpemUtMyk7XG4gICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICBib3JkZXI6IHZhcigtLWJvcmRlci1zaXplLTEpIHNvbGlkIHZhcigtLWJvcmRlcik7XG4gICAgYm9yZGVyLXJhZGl1czogdmFyKC0tcmFkaXVzLTIpO1xuICAgIGJhY2tncm91bmQ6IHZhcigtLWJnLWNhcmQpO1xuICB9XG5cbiAgLnJvdXRlOjpiZWZvcmUsXG4gIC5wYWNrYWdlOjpiZWZvcmUsXG4gIC50b2tlbjo6YmVmb3JlLFxuICAuc3RhZ2U6OmJlZm9yZSB7XG4gICAgY29udGVudDogXCJcIjtcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgaW5zZXQtYmxvY2s6IDA7XG4gICAgaW5zZXQtaW5saW5lLXN0YXJ0OiAwO1xuICAgIHdpZHRoOiB2YXIoLS1zaXplLTEpO1xuICAgIGJhY2tncm91bmQ6IHZhcigtLWJyYW5kKTtcbiAgICBvcGFjaXR5OiAuNzI7XG4gIH1cblxuICAuc3BlY19fa2V5LFxuICAucm91dGVfX3BhdGgsXG4gIC5wYWNrYWdlX19uYW1lLFxuICAudG9rZW5fX25hbWUsXG4gIC5zdGFnZV9fbnVtIHtcbiAgICBjb2xvcjogdmFyKC0tYnJhbmQpO1xuICAgIGZvbnQtZmFtaWx5OiB2YXIoLS1mb250LW1vbm8pO1xuICAgIGZvbnQtc2l6ZTogdmFyKC0tZm9udC1zaXplLTAwKTtcbiAgICBmb250LXdlaWdodDogdmFyKC0tZm9udC13ZWlnaHQtOCk7XG4gICAgbGV0dGVyLXNwYWNpbmc6IDA7XG4gIH1cblxuICAuc3BlY19fdmFsdWUsXG4gIC5yb3V0ZV9fZGVzYyxcbiAgLnBhY2thZ2VfX2Rlc2MsXG4gIC50b2tlbl9fZGVzYyxcbiAgLnN0YWdlX19jb3B5IHtcbiAgICBjb2xvcjogdmFyKC0tdGV4dC1zZWNvbmRhcnkpO1xuICAgIGZvbnQtc2l6ZTogdmFyKC0tZm9udC1zaXplLTApO1xuICAgIGxpbmUtaGVpZ2h0OiB2YXIoLS1mb250LWxpbmVoZWlnaHQtMyk7XG4gIH1cblxuICAucGlwZWxpbmUge1xuICAgIGRpc3BsYXk6IGdyaWQ7XG4gICAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoNSwgbWlubWF4KDAsIDFmcikpO1xuICAgIGdhcDogdmFyKC0tc2l6ZS0yKTtcbiAgfVxuXG4gIC5zdGFnZSB7XG4gICAgbWluLWhlaWdodDogdmFyKC0tc2l6ZS0xNik7XG4gICAgYmFja2dyb3VuZDogY29sb3ItbWl4KGluIHNyZ2IsIHZhcigtLWJnLWNhcmQpIDgyJSwgdmFyKC0tYnJhbmQtc3VidGxlKSk7XG4gIH1cblxuICAudmlzdWFsLS1oaWdoIC5zdGFnZSxcbiAgLnZpc3VhbC0taGlnaCAucm91dGUsXG4gIC52aXN1YWwtLWhpZ2ggLnBhY2thZ2UsXG4gIC52aXN1YWwtLWhpZ2ggLnRva2VuIHtcbiAgICBiYWNrZ3JvdW5kOlxuICAgICAgbGluZWFyLWdyYWRpZW50KDEzNWRlZywgY29sb3ItbWl4KGluIHNyZ2IsIHZhcigtLWJyYW5kLXN1YnRsZSkgNjQlLCB0cmFuc3BhcmVudCksIHRyYW5zcGFyZW50KSxcbiAgICAgIHZhcigtLWJnLWNhcmQpO1xuICB9XG5cbiAgLnN0YWdlLS1zdWNjZXNzIC5zdGFnZV9fbnVtLFxuICAucGFja2FnZS0tc3VjY2VzcyAucGFja2FnZV9fbmFtZSB7XG4gICAgY29sb3I6IHZhcigtLXN1Y2Nlc3MpO1xuICB9XG5cbiAgLnN0YWdlLS1zdWNjZXNzOjpiZWZvcmUsXG4gIC5wYWNrYWdlLS1zdWNjZXNzOjpiZWZvcmUge1xuICAgIGJhY2tncm91bmQ6IHZhcigtLXN1Y2Nlc3MpO1xuICB9XG5cbiAgLnN0YWdlLS13YXJuaW5nIC5zdGFnZV9fbnVtLFxuICAucGFja2FnZS0td2FybmluZyAucGFja2FnZV9fbmFtZSB7XG4gICAgY29sb3I6IHZhcigtLXdhcm5pbmcpO1xuICB9XG5cbiAgLnN0YWdlLS13YXJuaW5nOjpiZWZvcmUsXG4gIC5wYWNrYWdlLS13YXJuaW5nOjpiZWZvcmUge1xuICAgIGJhY2tncm91bmQ6IHZhcigtLXdhcm5pbmcpO1xuICB9XG5cbiAgLnJvdXRlcyxcbiAgLnBhY2thZ2VzLFxuICAudG9rZW5zIHtcbiAgICBkaXNwbGF5OiBncmlkO1xuICAgIGdhcDogdmFyKC0tc2l6ZS0zKTtcbiAgfVxuXG4gIC5yb3V0ZSB7XG4gICAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiBtaW5tYXgoMCwgLjQ0ZnIpIG1pbm1heCgwLCAxZnIpO1xuICAgIGFsaWduLWl0ZW1zOiBzdGFydDtcbiAgfVxuXG4gIC5wYWNrYWdlIHtcbiAgICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IG1pbm1heCgwLCAuMzZmcikgbWlubWF4KDAsIDFmcik7XG4gICAgYWxpZ24taXRlbXM6IHN0YXJ0O1xuICB9XG5cbiAgLnRva2VucyB7XG4gICAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoMiwgbWlubWF4KDAsIDFmcikpO1xuICB9XG5cbiAgLnRva2VuX19zd2F0Y2gge1xuICAgIHdpZHRoOiB2YXIoLS1zaXplLTgpO1xuICAgIGhlaWdodDogdmFyKC0tc2l6ZS01KTtcbiAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1yYWRpdXMtMSk7XG4gICAgYm9yZGVyOiB2YXIoLS1ib3JkZXItc2l6ZS0xKSBzb2xpZCB2YXIoLS1ib3JkZXIpO1xuICAgIGJhY2tncm91bmQ6IHZhcigtLWJnLWNhcmQpO1xuICB9XG5cbiAgLnRva2VuLS1icmFuZCAudG9rZW5fX3N3YXRjaCB7IGJhY2tncm91bmQ6IHZhcigtLWJyYW5kKTsgfVxuICAudG9rZW4tLXN1Y2Nlc3MgLnRva2VuX19zd2F0Y2ggeyBiYWNrZ3JvdW5kOiB2YXIoLS1zdWNjZXNzKTsgfVxuICAudG9rZW4tLXdhcm5pbmcgLnRva2VuX19zd2F0Y2ggeyBiYWNrZ3JvdW5kOiB2YXIoLS13YXJuaW5nKTsgfVxuICAudG9rZW4tLWluZm8gLnRva2VuX19zd2F0Y2ggeyBiYWNrZ3JvdW5kOiB2YXIoLS1pbmZvKTsgfVxuICAudG9rZW4tLXN1cmZhY2UgLnRva2VuX19zd2F0Y2ggeyBiYWNrZ3JvdW5kOiB2YXIoLS1iZy1lbGV2YXRlZCk7IH1cbiAgLnRva2VuLS1jb2RlIC50b2tlbl9fc3dhdGNoIHsgYmFja2dyb3VuZDogdmFyKC0tYmctY29kZSwgdmFyKC0tZ3JheS0xMSkpOyB9XG5cbiAgLm1hdHJpeCB7XG4gICAgZGlzcGxheTogZ3JpZDtcbiAgICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdCgyLCBtaW5tYXgoMCwgMWZyKSk7XG4gICAgZ2FwOiB2YXIoLS1zaXplLTMpO1xuICB9XG5cbiAgLnZpc3VhbC0tbW90aW9uIC5zdGFnZSxcbiAgLnZpc3VhbC0tbW90aW9uIC5yb3V0ZSxcbiAgLnZpc3VhbC0tbW90aW9uIC5wYWNrYWdlLFxuICAudmlzdWFsLS1tb3Rpb24gLnRva2VuIHtcbiAgICBhbmltYXRpb246IHZpc3VhbC1saWZ0IDdzIHZhcigtLWVhc2UtMikgaW5maW5pdGUgYWx0ZXJuYXRlO1xuICB9XG5cbiAgLnZpc3VhbC0tbW90aW9uIC5zdGFnZTpudGgtY2hpbGQoMiksXG4gIC52aXN1YWwtLW1vdGlvbiAucm91dGU6bnRoLWNoaWxkKDIpLFxuICAudmlzdWFsLS1tb3Rpb24gLnBhY2thZ2U6bnRoLWNoaWxkKDIpLFxuICAudmlzdWFsLS1tb3Rpb24gLnRva2VuOm50aC1jaGlsZCgyKSB7XG4gICAgYW5pbWF0aW9uLWRlbGF5OiA2MDBtcztcbiAgfVxuXG4gIC52aXN1YWwtLW1vdGlvbiAuc3RhZ2U6bnRoLWNoaWxkKDMpLFxuICAudmlzdWFsLS1tb3Rpb24gLnJvdXRlOm50aC1jaGlsZCgzKSxcbiAgLnZpc3VhbC0tbW90aW9uIC5wYWNrYWdlOm50aC1jaGlsZCgzKSxcbiAgLnZpc3VhbC0tbW90aW9uIC50b2tlbjpudGgtY2hpbGQoMykge1xuICAgIGFuaW1hdGlvbi1kZWxheTogMTIwMG1zO1xuICB9XG5cbiAgLnZpc3VhbC0tbW90aW9uIC5jb2RlIHtcbiAgICBhbmltYXRpb246IHZpc3VhbC1jb2RlIDhzIHZhcigtLWVhc2UtMSkgaW5maW5pdGUgYWx0ZXJuYXRlO1xuICB9XG5cbiAgQGtleWZyYW1lcyB2aXN1YWwtbGlmdCB7XG4gICAgZnJvbSB7XG4gICAgICBmaWx0ZXI6IGJyaWdodG5lc3MoMSk7XG4gICAgfVxuICAgIHRvIHtcbiAgICAgIGZpbHRlcjogYnJpZ2h0bmVzcygxLjEyKTtcbiAgICB9XG4gIH1cblxuICBAa2V5ZnJhbWVzIHZpc3VhbC1jb2RlIHtcbiAgICBmcm9tIHtcbiAgICAgIGNvbG9yOiB2YXIoLS1jb2RlLXRleHQpO1xuICAgIH1cbiAgICB0byB7XG4gICAgICBjb2xvcjogdmFyKC0tYnJhbmQtbGlnaHQpO1xuICAgIH1cbiAgfVxuXG4gIEBtZWRpYSAocHJlZmVycy1yZWR1Y2VkLW1vdGlvbjogcmVkdWNlKSB7XG4gICAgLnZpc3VhbC0tbW90aW9uIC5zdGFnZSxcbiAgICAudmlzdWFsLS1tb3Rpb24gLnJvdXRlLFxuICAgIC52aXN1YWwtLW1vdGlvbiAucGFja2FnZSxcbiAgICAudmlzdWFsLS1tb3Rpb24gLnRva2VuLFxuICAgIC52aXN1YWwtLW1vdGlvbiAuY29kZSB7XG4gICAgICBhbmltYXRpb246IG5vbmU7XG4gICAgfVxuICB9XG5cbiAgQG1lZGlhIChtYXgtd2lkdGg6IDc2MHB4KSB7XG4gICAgLmhlcm9fX3RvcCxcbiAgICAucGlwZWxpbmUsXG4gICAgLnJvdXRlLFxuICAgIC5wYWNrYWdlLFxuICAgIC50b2tlbnMsXG4gICAgLm1hdHJpeCB7XG4gICAgICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IDFmcjtcbiAgICB9XG4gIH1cbmApO1xuXG5leHBvcnQgY2xhc3MgT3BlblN0YW5kYXJkc1Zpc3VhbCBleHRlbmRzIE9wZW5FbGVtZW50IHtcbiAgc3RhdGljIG92ZXJyaWRlIHN0eWxlcyA9IFtzaGVldF07XG4gIHN0YXRpYyBvdmVycmlkZSBvYnNlcnZlZEF0dHJpYnV0ZXMgPSBbJ3ZhcmlhbnQnLCAnbW90aW9uJywgJ2VtcGhhc2lzJ107XG5cbiAgb3ZlcnJpZGUgcmVuZGVyKCk6IFJldHVyblR5cGU8dHlwZW9mIE9wZW5FbGVtZW50LnByb3RvdHlwZS5yZW5kZXI+IHtcbiAgICBjb25zdCB2YXJpYW50ID0gdGhpcy5fZ2V0U3RyKCd2YXJpYW50JywgJ2hlcm8nKTtcbiAgICBjb25zdCB2aXN1YWxDbGFzcyA9IHRoaXMuX3Zpc3VhbENsYXNzKCk7XG4gICAgaWYgKHZhcmlhbnQgPT09ICdyb3V0ZXMnKSByZXR1cm4gdGhpcy5fcm91dGVzKHZpc3VhbENsYXNzKTtcbiAgICBpZiAodmFyaWFudCA9PT0gJ3BhY2thZ2VzJykgcmV0dXJuIHRoaXMuX3BhY2thZ2VzKHZpc3VhbENsYXNzKTtcbiAgICBpZiAodmFyaWFudCA9PT0gJ3Rva2VucycpIHJldHVybiB0aGlzLl90b2tlbnModmlzdWFsQ2xhc3MpO1xuICAgIHJldHVybiB0aGlzLl9oZXJvKHZpc3VhbENsYXNzKTtcbiAgfVxuXG4gIHByaXZhdGUgX2dldFN0cihhdHRyOiBzdHJpbmcsIGRlZjogc3RyaW5nKTogc3RyaW5nIHtcbiAgICBjb25zdCBjYW1lbCA9IGF0dHIucmVwbGFjZSgvLShbYS16XSkvZywgKF8sIGM6IHN0cmluZykgPT4gYy50b1VwcGVyQ2FzZSgpKTtcbiAgICBjb25zdCBwcm9wID0gKHRoaXMgYXMgUmVjb3JkPHN0cmluZywgdW5rbm93bj4pW2NhbWVsXSA/P1xuICAgICAgKHRoaXMgYXMgUmVjb3JkPHN0cmluZywgdW5rbm93bj4pW2F0dHJdO1xuICAgIGlmIChwcm9wICE9PSB1bmRlZmluZWQgJiYgcHJvcCAhPT0gbnVsbCkgcmV0dXJuIFN0cmluZyhwcm9wKTtcbiAgICByZXR1cm4gdGhpcy5nZXRBdHRyaWJ1dGUoYXR0cikgfHwgZGVmO1xuICB9XG5cbiAgcHJpdmF0ZSBfdmlzdWFsQ2xhc3MoKTogc3RyaW5nIHtcbiAgICBjb25zdCBtb3Rpb24gPSB0aGlzLl9nZXRTdHIoJ21vdGlvbicsICdhdXRvJykgPT09ICdvZmYnID8gJ3N0aWxsJyA6ICdtb3Rpb24nO1xuICAgIGNvbnN0IGVtcGhhc2lzID0gdGhpcy5fZ2V0U3RyKCdlbXBoYXNpcycsICdub3JtYWwnKSA9PT0gJ2hpZ2gnID8gJ2hpZ2gnIDogJ25vcm1hbCc7XG4gICAgcmV0dXJuIGB2aXN1YWwgdmlzdWFsLS0ke2VtcGhhc2lzfSB2aXN1YWwtLSR7bW90aW9ufWA7XG4gIH1cblxuICBwcml2YXRlIF9oZXJvKHZpc3VhbENsYXNzOiBzdHJpbmcpOiBSZXR1cm5UeXBlPHR5cGVvZiBPcGVuRWxlbWVudC5wcm90b3R5cGUucmVuZGVyPiB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxkaXYgY2xhc3NOYW1lPXtgJHt2aXN1YWxDbGFzc30gaGVyb2B9PlxuICAgICAgICA8ZGl2IGNsYXNzTmFtZT0naGVyb19fdG9wJz5cbiAgICAgICAgICA8cHJlIGNsYXNzTmFtZT0nY29kZSc+PGNvZGU+e2BleHBvcnQgZGVmYXVsdCBhcHAoe1xuICByb3V0ZXM6ICcuL2FwcC9yb3V0ZXMnLFxuICByZW5kZXI6ICdkZWNsYXJhdGl2ZS1zaGFkb3ctZG9tJyxcbiAgaXNsYW5kczogJ2ludGVyYWN0aW9uLW9ubHknLFxuICBhZGFwdGVyOiAndml0ZSdcbn0pYH08L2NvZGU+PC9wcmU+XG4gICAgICAgICAgPGRpdiBjbGFzc05hbWU9J3NwZWMnIGFyaWEtbGFiZWw9J1N0YW5kYXJkcyBzaGVldCc+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT0nc3BlY19fcm93Jz5cbiAgICAgICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPSdzcGVjX19rZXknPkhUTUw8L3NwYW4+XG4gICAgICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT0nc3BlY19fdmFsdWUnPlxuICAgICAgICAgICAgICAgIERlY2xhcmF0aXZlIFNoYWRvdyBET00gYXMgdGhlIGZpcnN0IHJlbmRlcmluZyB0YXJnZXRcbiAgICAgICAgICAgICAgPC9zcGFuPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT0nc3BlY19fcm93Jz5cbiAgICAgICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPSdzcGVjX19rZXknPldDPC9zcGFuPlxuICAgICAgICAgICAgICA8c3BhbiBjbGFzc05hbWU9J3NwZWNfX3ZhbHVlJz5cbiAgICAgICAgICAgICAgICBDdXN0b20gZWxlbWVudHMgb3duIGJlaGF2aW9yIGFuZCBwcm9ncmVzc2l2ZSBoeWRyYXRpb25cbiAgICAgICAgICAgICAgPC9zcGFuPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT0nc3BlY19fcm93Jz5cbiAgICAgICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPSdzcGVjX19rZXknPkFQSTwvc3Bhbj5cbiAgICAgICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPSdzcGVjX192YWx1ZSc+XG4gICAgICAgICAgICAgICAgSG9ubyBlbmRwb2ludHMgc2l0IGJlc2lkZSBwYWdlcyBhbmQgY29udGVudCByb3V0ZXNcbiAgICAgICAgICAgICAgPC9zcGFuPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzTmFtZT0ncGlwZWxpbmUnIGFyaWEtbGFiZWw9J1JlbmRlciBwaXBlbGluZSc+XG4gICAgICAgICAgPGRpdiBjbGFzc05hbWU9J3N0YWdlJz5cbiAgICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT0nc3RhZ2VfX251bSc+MDE8L3NwYW4+XG4gICAgICAgICAgICA8c3BhbiBjbGFzc05hbWU9J3N0YWdlX19jb3B5Jz5Sb3V0ZTwvc3Bhbj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT0nc3RhZ2Ugc3RhZ2UtLXN1Y2Nlc3MnPlxuICAgICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPSdzdGFnZV9fbnVtJz4wMjwvc3Bhbj5cbiAgICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT0nc3RhZ2VfX2NvcHknPlJlbmRlciBEU0Q8L3NwYW4+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgPGRpdiBjbGFzc05hbWU9J3N0YWdlJz5cbiAgICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT0nc3RhZ2VfX251bSc+MDM8L3NwYW4+XG4gICAgICAgICAgICA8c3BhbiBjbGFzc05hbWU9J3N0YWdlX19jb3B5Jz5TaGlwIEhUTUw8L3NwYW4+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgPGRpdiBjbGFzc05hbWU9J3N0YWdlIHN0YWdlLS13YXJuaW5nJz5cbiAgICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT0nc3RhZ2VfX251bSc+MDQ8L3NwYW4+XG4gICAgICAgICAgICA8c3BhbiBjbGFzc05hbWU9J3N0YWdlX19jb3B5Jz5IeWRyYXRlIGlzbGFuZDwvc3Bhbj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT0nc3RhZ2UnPlxuICAgICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPSdzdGFnZV9fbnVtJz4wNTwvc3Bhbj5cbiAgICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT0nc3RhZ2VfX2NvcHknPlZlcmlmeTwvc3Bhbj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICApO1xuICB9XG5cbiAgcHJpdmF0ZSBfcm91dGVzKHZpc3VhbENsYXNzOiBzdHJpbmcpOiBSZXR1cm5UeXBlPHR5cGVvZiBPcGVuRWxlbWVudC5wcm90b3R5cGUucmVuZGVyPiB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxkaXYgY2xhc3NOYW1lPXtgJHt2aXN1YWxDbGFzc30gcm91dGVzYH0gYXJpYS1sYWJlbD0nUm91dGUgZ3JhcGgnPlxuICAgICAgICA8ZGl2IGNsYXNzTmFtZT0ncm91dGUnPlxuICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT0ncm91dGVfX3BhdGgnPi88L3NwYW4+XG4gICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPSdyb3V0ZV9fZGVzYyc+aG9tZXBhZ2UgbGFiIGFydGlmYWN0IGFuZCBwcm9kdWN0IHBhdGhzPC9zcGFuPlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzc05hbWU9J3JvdXRlJz5cbiAgICAgICAgICA8c3BhbiBjbGFzc05hbWU9J3JvdXRlX19wYXRoJz4vZ3VpZGUvKjwvc3Bhbj5cbiAgICAgICAgICA8c3BhbiBjbGFzc05hbWU9J3JvdXRlX19kZXNjJz5cbiAgICAgICAgICAgIGJ1aWxkIHBhdGgsIGNvbmZpZ3VyYXRpb24sIGRlcGxveW1lbnQsIGFuZCBwcm9kdWN0aW9uIGZsb3dcbiAgICAgICAgICA8L3NwYW4+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzTmFtZT0ncm91dGUnPlxuICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT0ncm91dGVfX3BhdGgnPi9hcmNoaXRlY3R1cmUvKjwvc3Bhbj5cbiAgICAgICAgICA8c3BhbiBjbGFzc05hbWU9J3JvdXRlX19kZXNjJz5wYWNrYWdlIGdyYXBoLCBEU0QsIGlzbGFuZHMsIGFuZCBzdGFuZGFyZHMgcmVnaXN0cnk8L3NwYW4+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzTmFtZT0ncm91dGUnPlxuICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT0ncm91dGVfX3BhdGgnPi9hcGk8L3NwYW4+XG4gICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPSdyb3V0ZV9fZGVzYyc+cHVibGljIGNvbnRyYWN0IGluZGV4IGFjcm9zcyB0aGUgcHJvZHVjdCBncmFwaDwvc3Bhbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICApO1xuICB9XG5cbiAgcHJpdmF0ZSBfcGFja2FnZXModmlzdWFsQ2xhc3M6IHN0cmluZyk6IFJldHVyblR5cGU8dHlwZW9mIE9wZW5FbGVtZW50LnByb3RvdHlwZS5yZW5kZXI+IHtcbiAgICByZXR1cm4gKFxuICAgICAgPGRpdiBjbGFzc05hbWU9e2Ake3Zpc3VhbENsYXNzfSBwYWNrYWdlc2B9IGFyaWEtbGFiZWw9J1BhY2thZ2UgZ3JhcGgnPlxuICAgICAgICA8ZGl2IGNsYXNzTmFtZT0ncGFja2FnZSBwYWNrYWdlLS1zdWNjZXNzJz5cbiAgICAgICAgICA8c3BhbiBjbGFzc05hbWU9J3BhY2thZ2VfX25hbWUnPkVsZW1lbnRzPC9zcGFuPlxuICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT0ncGFja2FnZV9fZGVzYyc+XG4gICAgICAgICAgICBjdXN0b20gZWxlbWVudHMsIERTRCByZW5kZXJpbmcsIGFuZCBjb21wb25lbnQgY29udHJhY3RzXG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzc05hbWU9J3BhY2thZ2UnPlxuICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT0ncGFja2FnZV9fbmFtZSc+VUk8L3NwYW4+XG4gICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPSdwYWNrYWdlX19kZXNjJz5cbiAgICAgICAgICAgIE9wZW4gUHJvcHMgcHJpbWl0aXZlcyB1c2VkIGJ5IHRoaXMgd2Vic2l0ZSBhbmQgY29uc3VtZXJzXG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzc05hbWU9J3BhY2thZ2UgcGFja2FnZS0td2FybmluZyc+XG4gICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPSdwYWNrYWdlX19uYW1lJz5GcmFtZXdvcms8L3NwYW4+XG4gICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPSdwYWNrYWdlX19kZXNjJz5cbiAgICAgICAgICAgIHJvdXRlcywgbGF5b3V0cywgY29udGVudCwgaXNsYW5kcywgaTE4biwgYW5kIGFkYXB0ZXItdml0ZVxuICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3NOYW1lPSdwYWNrYWdlJz5cbiAgICAgICAgICA8c3BhbiBjbGFzc05hbWU9J3BhY2thZ2VfX25hbWUnPlByb3RvY29sczwvc3Bhbj5cbiAgICAgICAgICA8c3BhbiBjbGFzc05hbWU9J3BhY2thZ2VfX2Rlc2MnPlxuICAgICAgICAgICAgcHVibGljIGJvdW5kYXJ5IGRlY2xhcmF0aW9ucyBhbmQgcGFja2FnZSBjb21wYXRpYmlsaXR5IGxhbmd1YWdlXG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgICk7XG4gIH1cblxuICBwcml2YXRlIF90b2tlbnModmlzdWFsQ2xhc3M6IHN0cmluZyk6IFJldHVyblR5cGU8dHlwZW9mIE9wZW5FbGVtZW50LnByb3RvdHlwZS5yZW5kZXI+IHtcbiAgICByZXR1cm4gKFxuICAgICAgPGRpdiBjbGFzc05hbWU9e2Ake3Zpc3VhbENsYXNzfSB0b2tlbnNgfSBhcmlhLWxhYmVsPSdUb2tlbiBib2FyZCc+XG4gICAgICAgIDxkaXYgY2xhc3NOYW1lPSd0b2tlbiB0b2tlbi0tc3VyZmFjZSc+XG4gICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPSd0b2tlbl9fc3dhdGNoJz48L3NwYW4+XG4gICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPSd0b2tlbl9fbmFtZSc+LS1iZy1jYXJkPC9zcGFuPlxuICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT0ndG9rZW5fX2Rlc2MnPnJlYWRpbmcgc3VyZmFjZXM8L3NwYW4+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzTmFtZT0ndG9rZW4gdG9rZW4tLWJyYW5kJz5cbiAgICAgICAgICA8c3BhbiBjbGFzc05hbWU9J3Rva2VuX19zd2F0Y2gnPjwvc3Bhbj5cbiAgICAgICAgICA8c3BhbiBjbGFzc05hbWU9J3Rva2VuX19uYW1lJz4tLWJyYW5kPC9zcGFuPlxuICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT0ndG9rZW5fX2Rlc2MnPmxpbmtzIGFuZCBwcmltYXJ5IGFjdGlvbjwvc3Bhbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3NOYW1lPSd0b2tlbiB0b2tlbi0tc3VjY2Vzcyc+XG4gICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPSd0b2tlbl9fc3dhdGNoJz48L3NwYW4+XG4gICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPSd0b2tlbl9fbmFtZSc+LS1zdWNjZXNzPC9zcGFuPlxuICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT0ndG9rZW5fX2Rlc2MnPnN0YW5kYXJkcyBhbmQgc2hpcHBlZCBzdGF0ZTwvc3Bhbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3NOYW1lPSd0b2tlbiB0b2tlbi0td2FybmluZyc+XG4gICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPSd0b2tlbl9fc3dhdGNoJz48L3NwYW4+XG4gICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPSd0b2tlbl9fbmFtZSc+LS13YXJuaW5nPC9zcGFuPlxuICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT0ndG9rZW5fX2Rlc2MnPnBsYW5uZWQgb3IgZGlyZWN0aW9uYWwgc3RhdGU8L3NwYW4+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzTmFtZT0ndG9rZW4gdG9rZW4tLWluZm8nPlxuICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT0ndG9rZW5fX3N3YXRjaCc+PC9zcGFuPlxuICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT0ndG9rZW5fX25hbWUnPi0taW5mbzwvc3Bhbj5cbiAgICAgICAgICA8c3BhbiBjbGFzc05hbWU9J3Rva2VuX19kZXNjJz5yZWZlcmVuY2UgYW5kIEFQSSBzdGF0ZTwvc3Bhbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3NOYW1lPSd0b2tlbiB0b2tlbi0tY29kZSc+XG4gICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPSd0b2tlbl9fc3dhdGNoJz48L3NwYW4+XG4gICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPSd0b2tlbl9fbmFtZSc+LS1iZy1jb2RlPC9zcGFuPlxuICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT0ndG9rZW5fX2Rlc2MnPmNvZGUgYW5kIGFydGlmYWN0IHBhbmVsczwvc3Bhbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICApO1xuICB9XG59XG5cbmV4cG9ydCBkZWZhdWx0IE9wZW5TdGFuZGFyZHNWaXN1YWw7XG5cbmlmICh0eXBlb2YgY3VzdG9tRWxlbWVudHMgIT09ICd1bmRlZmluZWQnICYmICFjdXN0b21FbGVtZW50cy5nZXQodGFnTmFtZSkpIHtcbiAgY3VzdG9tRWxlbWVudHMuZGVmaW5lKHRhZ05hbWUsIE9wZW5TdGFuZGFyZHNWaXN1YWwpO1xufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHVDQUF1QyxHQUN2Qzs7OztDQUlDLEdBRUQsU0FBUyxXQUFXLFFBQVEsdUJBQXVCO0FBQ25ELFNBQVMsVUFBVSxRQUE2QixnQ0FBZ0M7QUFFaEYsT0FBTyxNQUFNLFVBQVUsd0JBQXdCO0FBRS9DLE1BQU0sUUFBd0IsSUFBSTtBQUNsQyxNQUFNLFdBQVcsQ0FBQyxDQUFDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7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

package/src/open-step-card.d.ts

@@ -0,0 +1,34 @@
+/** @jsxImportSource @openelement/core */ /**
+ * @openelement/ui - OpenStepCard Component
+ *
+ * Step card with numbered indicator and label.
+ * Used in Quick Start sections and Getting Started guides.
+ *
+ * v0.20.0: Migrated from DsdLitElement to DsdElement (Ocean component).
+ * v0.24.1: Migrated from html`` template to JSX (ADR-0057).
+ *
+ * @csspart container -The step card wrapper
+ * @csspart indicator -The step number circle
+ * @csspart title -The step label heading
+ * @csspart description -The step description paragraph
+ * @csspart content -The slot content area
+ *
+ * Usage:
+ * ```html
+ * <open-step-card step="1" label="Create">
+ *   deno run -A npm:@openelement/create my-app
+ * </open-step-card>
+ * ```
+ */ import { OpenElement } from '@openelement/element';
+import { type StyleSheetLike } from '@openelement/core/style-sheet';
+export declare const tagName: 'open-step-card';
+declare const sheet: StyleSheetLike;
+export declare class OpenStepCard extends OpenElement {
+  static override styles: [];
+  static override observedAttributes: [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 _esc: any;
+}
+export default OpenStepCard;

package/src/open-step-card.js

@@ -0,0 +1,117 @@
+/** @jsxImportSource @openelement/core */ /**
+ * @openelement/ui - OpenStepCard Component
+ *
+ * Step card with numbered indicator and label.
+ * Used in Quick Start sections and Getting Started guides.
+ *
+ * v0.20.0: Migrated from DsdLitElement to DsdElement (Ocean component).
+ * v0.24.1: Migrated from html`` template to JSX (ADR-0057).
+ *
+ * @csspart container -The step card wrapper
+ * @csspart indicator -The step number circle
+ * @csspart title -The step label heading
+ * @csspart description -The step description paragraph
+ * @csspart content -The slot content area
+ *
+ * Usage:
+ * ```html
+ * <open-step-card step="1" label="Create">
+ *   deno run -A npm:@openelement/create my-app
+ * </open-step-card>
+ * ```
+ */ import { OpenElement } from '@openelement/element';
+import { StyleSheet } from '@openelement/core/style-sheet';
+import { escapeHtml } from '@openelement/core';
+export const tagName = 'open-step-card';
+const sheet = new StyleSheet();
+sheet.replaceSync(`
+  :host {
+    display: block;
+  }
+  .step-card {
+    border: var(--border-size-1) solid var(--gray-3);
+    border-radius: var(--radius-2);
+    padding: var(--size-4);
+    background: var(--gray-1);
+    position: relative;
+    border-top: var(--border-size-2) solid var(--brand);
+  }
+  .step-header {
+    display: flex;
+    align-items: center;
+    gap: var(--size-2);
+    margin-bottom: var(--size-2);
+  }
+  .step-number {
+    width: 28px;
+    height: 28px;
+    border-radius: var(--radius-round);
+    background: var(--brand);
+    color: var(--text-primary);
+    font-size: var(--font-size-00);
+    font-weight: var(--font-weight-7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .step-label {
+    font-size: var(--font-size-00);
+    font-weight: var(--font-weight-6);
+    color: var(--gray-5);
+    text-transform: uppercase;
+    letter-spacing: var(--font-letterspacing-5);
+  }
+  .step-body {
+    font-size: var(--font-size-1);
+    line-height: var(--font-lineheight-3);
+    color: var(--gray-9);
+  }
+  .step-body ::slotted(code) {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-00);
+    color: var(--gray-9);
+  }
+`);
+export class OpenStepCard extends OpenElement {
+  static styles = [
+    sheet
+  ];
+  static observedAttributes = [
+    'step',
+    'label',
+    'description',
+    'status'
+  ];
+  render() {
+    const step = parseInt(this.getAttribute('step') || '1', 10);
+    const label = this.getAttribute('label') || '';
+    const description = this.getAttribute('description') || '';
+    return <div className='step-card' part='container'>
+        <div className='step-header'>
+          <span className='step-number' part='indicator'>{step}</span>
+          <span className='step-label' part='title'>{this._esc(label)}</span>
+        </div>
+        {description && <p part='description' style='margin:0 0 var(--size-2);color:var(--gray-7);font-size:var(--font-size-0);'>
+            {this._esc(description)}
+          </p>}
+        <div className='step-body' part='content'>
+          <slot></slot>
+        </div>
+      </div>;
+  }
+  attributeChangedCallback(_name, old, val) {
+    if (old === val) return;
+    this._syncDOM();
+  }
+  _syncDOM() {
+    this.update();
+  }
+  _esc = escapeHtml;
+}
+export default OpenStepCard;
+// Guard: idempotent across SSR paths
+if (typeof customElements !== 'undefined' && !customElements.get(tagName)) {
+  customElements.define(tagName, OpenStepCard);
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZpbGU6Ly8vaG9tZS9ydW5uZXIvd29yay9vcGVuZWxlbWVudC9vcGVuZWxlbWVudC9wYWNrYWdlcy91aS9zcmMvb3Blbi1zdGVwLWNhcmQudHN4Il0sInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4SW1wb3J0U291cmNlIEBvcGVuZWxlbWVudC9jb3JlICovXG4vKipcbiAqIEBvcGVuZWxlbWVudC91aSAtIE9wZW5TdGVwQ2FyZCBDb21wb25lbnRcbiAqXG4gKiBTdGVwIGNhcmQgd2l0aCBudW1iZXJlZCBpbmRpY2F0b3IgYW5kIGxhYmVsLlxuICogVXNlZCBpbiBRdWljayBTdGFydCBzZWN0aW9ucyBhbmQgR2V0dGluZyBTdGFydGVkIGd1aWRlcy5cbiAqXG4gKiB2MC4yMC4wOiBNaWdyYXRlZCBmcm9tIERzZExpdEVsZW1lbnQgdG8gRHNkRWxlbWVudCAoT2NlYW4gY29tcG9uZW50KS5cbiAqIHYwLjI0LjE6IE1pZ3JhdGVkIGZyb20gaHRtbGBgIHRlbXBsYXRlIHRvIEpTWCAoQURSLTAwNTcpLlxuICpcbiAqIEBjc3NwYXJ0IGNvbnRhaW5lciAtVGhlIHN0ZXAgY2FyZCB3cmFwcGVyXG4gKiBAY3NzcGFydCBpbmRpY2F0b3IgLVRoZSBzdGVwIG51bWJlciBjaXJjbGVcbiAqIEBjc3NwYXJ0IHRpdGxlIC1UaGUgc3RlcCBsYWJlbCBoZWFkaW5nXG4gKiBAY3NzcGFydCBkZXNjcmlwdGlvbiAtVGhlIHN0ZXAgZGVzY3JpcHRpb24gcGFyYWdyYXBoXG4gKiBAY3NzcGFydCBjb250ZW50IC1UaGUgc2xvdCBjb250ZW50IGFyZWFcbiAqXG4gKiBVc2FnZTpcbiAqIGBgYGh0bWxcbiAqIDxvcGVuLXN0ZXAtY2FyZCBzdGVwPVwiMVwiIGxhYmVsPVwiQ3JlYXRlXCI+XG4gKiAgIGRlbm8gcnVuIC1BIG5wbTpAb3BlbmVsZW1lbnQvY3JlYXRlIG15LWFwcFxuICogPC9vcGVuLXN0ZXAtY2FyZD5cbiAqIGBgYFxuICovXG5cbmltcG9ydCB7IE9wZW5FbGVtZW50IH0gZnJvbSAnQG9wZW5lbGVtZW50L2VsZW1lbnQnO1xuaW1wb3J0IHsgU3R5bGVTaGVldCwgdHlwZSBTdHlsZVNoZWV0TGlrZSB9IGZyb20gJ0BvcGVuZWxlbWVudC9jb3JlL3N0eWxlLXNoZWV0JztcbmltcG9ydCB7IGVzY2FwZUh0bWwgfSBmcm9tICdAb3BlbmVsZW1lbnQvY29yZSc7XG5cbmV4cG9ydCBjb25zdCB0YWdOYW1lID0gJ29wZW4tc3RlcC1jYXJkJztcblxuY29uc3Qgc2hlZXQ6IFN0eWxlU2hlZXRMaWtlID0gbmV3IFN0eWxlU2hlZXQoKTtcbnNoZWV0LnJlcGxhY2VTeW5jKGBcbiAgOmhvc3Qge1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICB9XG4gIC5zdGVwLWNhcmQge1xuICAgIGJvcmRlcjogdmFyKC0tYm9yZGVyLXNpemUtMSkgc29saWQgdmFyKC0tZ3JheS0zKTtcbiAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1yYWRpdXMtMik7XG4gICAgcGFkZGluZzogdmFyKC0tc2l6ZS00KTtcbiAgICBiYWNrZ3JvdW5kOiB2YXIoLS1ncmF5LTEpO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBib3JkZXItdG9wOiB2YXIoLS1ib3JkZXItc2l6ZS0yKSBzb2xpZCB2YXIoLS1icmFuZCk7XG4gIH1cbiAgLnN0ZXAtaGVhZGVyIHtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgZ2FwOiB2YXIoLS1zaXplLTIpO1xuICAgIG1hcmdpbi1ib3R0b206IHZhcigtLXNpemUtMik7XG4gIH1cbiAgLnN0ZXAtbnVtYmVyIHtcbiAgICB3aWR0aDogMjhweDtcbiAgICBoZWlnaHQ6IDI4cHg7XG4gICAgYm9yZGVyLXJhZGl1czogdmFyKC0tcmFkaXVzLXJvdW5kKTtcbiAgICBiYWNrZ3JvdW5kOiB2YXIoLS1icmFuZCk7XG4gICAgY29sb3I6IHZhcigtLXRleHQtcHJpbWFyeSk7XG4gICAgZm9udC1zaXplOiB2YXIoLS1mb250LXNpemUtMDApO1xuICAgIGZvbnQtd2VpZ2h0OiB2YXIoLS1mb250LXdlaWdodC03KTtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gICAgZmxleC1zaHJpbms6IDA7XG4gIH1cbiAgLnN0ZXAtbGFiZWwge1xuICAgIGZvbnQtc2l6ZTogdmFyKC0tZm9udC1zaXplLTAwKTtcbiAgICBmb250LXdlaWdodDogdmFyKC0tZm9udC13ZWlnaHQtNik7XG4gICAgY29sb3I6IHZhcigtLWdyYXktNSk7XG4gICAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbiAgICBsZXR0ZXItc3BhY2luZzogdmFyKC0tZm9udC1sZXR0ZXJzcGFjaW5nLTUpO1xuICB9XG4gIC5zdGVwLWJvZHkge1xuICAgIGZvbnQtc2l6ZTogdmFyKC0tZm9udC1zaXplLTEpO1xuICAgIGxpbmUtaGVpZ2h0OiB2YXIoLS1mb250LWxpbmVoZWlnaHQtMyk7XG4gICAgY29sb3I6IHZhcigtLWdyYXktOSk7XG4gIH1cbiAgLnN0ZXAtYm9keSA6OnNsb3R0ZWQoY29kZSkge1xuICAgIGZvbnQtZmFtaWx5OiB2YXIoLS1mb250LW1vbm8pO1xuICAgIGZvbnQtc2l6ZTogdmFyKC0tZm9udC1zaXplLTAwKTtcbiAgICBjb2xvcjogdmFyKC0tZ3JheS05KTtcbiAgfVxuYCk7XG5cbmV4cG9ydCBjbGFzcyBPcGVuU3RlcENhcmQgZXh0ZW5kcyBPcGVuRWxlbWVudCB7XG4gIHN0YXRpYyBvdmVycmlkZSBzdHlsZXMgPSBbc2hlZXRdO1xuICBzdGF0aWMgb3ZlcnJpZGUgb2JzZXJ2ZWRBdHRyaWJ1dGVzID0gWydzdGVwJywgJ2xhYmVsJywgJ2Rlc2NyaXB0aW9uJywgJ3N0YXR1cyddO1xuXG4gIG92ZXJyaWRlIHJlbmRlcigpOiBSZXR1cm5UeXBlPHR5cGVvZiBPcGVuRWxlbWVudC5wcm90b3R5cGUucmVuZGVyPiB7XG4gICAgY29uc3Qgc3RlcCA9IHBhcnNlSW50KHRoaXMuZ2V0QXR0cmlidXRlKCdzdGVwJykgfHwgJzEnLCAxMCk7XG4gICAgY29uc3QgbGFiZWwgPSB0aGlzLmdldEF0dHJpYnV0ZSgnbGFiZWwnKSB8fCAnJztcbiAgICBjb25zdCBkZXNjcmlwdGlvbiA9IHRoaXMuZ2V0QXR0cmlidXRlKCdkZXNjcmlwdGlvbicpIHx8ICcnO1xuXG4gICAgcmV0dXJuIChcbiAgICAgIDxkaXYgY2xhc3NOYW1lPSdzdGVwLWNhcmQnIHBhcnQ9J2NvbnRhaW5lcic+XG4gICAgICAgIDxkaXYgY2xhc3NOYW1lPSdzdGVwLWhlYWRlcic+XG4gICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPSdzdGVwLW51bWJlcicgcGFydD0naW5kaWNhdG9yJz57c3RlcH08L3NwYW4+XG4gICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPSdzdGVwLWxhYmVsJyBwYXJ0PSd0aXRsZSc+e3RoaXMuX2VzYyhsYWJlbCl9PC9zcGFuPlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAge2Rlc2NyaXB0aW9uICYmIChcbiAgICAgICAgICA8cFxuICAgICAgICAgICAgcGFydD0nZGVzY3JpcHRpb24nXG4gICAgICAgICAgICBzdHlsZT0nbWFyZ2luOjAgMCB2YXIoLS1zaXplLTIpO2NvbG9yOnZhcigtLWdyYXktNyk7Zm9udC1zaXplOnZhcigtLWZvbnQtc2l6ZS0wKTsnXG4gICAgICAgICAgPlxuICAgICAgICAgICAge3RoaXMuX2VzYyhkZXNjcmlwdGlvbil9XG4gICAgICAgICAgPC9wPlxuICAgICAgICApfVxuICAgICAgICA8ZGl2IGNsYXNzTmFtZT0nc3RlcC1ib2R5JyBwYXJ0PSdjb250ZW50Jz5cbiAgICAgICAgICA8c2xvdD48L3Nsb3Q+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgKTtcbiAgfVxuXG4gIG92ZXJyaWRlIGF0dHJpYnV0ZUNoYW5nZWRDYWxsYmFjayhfbmFtZTogc3RyaW5nLCBvbGQ6IHN0cmluZyB8IG51bGwsIHZhbDogc3RyaW5nIHwgbnVsbCk6IHZvaWQge1xuICAgIGlmIChvbGQgPT09IHZhbCkgcmV0dXJuO1xuICAgIHRoaXMuX3N5bmNET00oKTtcbiAgfVxuXG4gIHByaXZhdGUgX3N5bmNET00oKTogdm9pZCB7XG4gICAgdGhpcy51cGRhdGUoKTtcbiAgfVxuXG4gIHByaXZhdGUgX2VzYyA9IGVzY2FwZUh0bWw7XG59XG5cbmV4cG9ydCBkZWZhdWx0IE9wZW5TdGVwQ2FyZDtcblxuLy8gR3VhcmQ6IGlkZW1wb3RlbnQgYWNyb3NzIFNTUiBwYXRoc1xuaWYgKHR5cGVvZiBjdXN0b21FbGVtZW50cyAhPT0gJ3VuZGVmaW5lZCcgJiYgIWN1c3RvbUVsZW1lbnRzLmdldCh0YWdOYW1lKSkge1xuICBjdXN0b21FbGVtZW50cy5kZWZpbmUodGFnTmFtZSwgT3BlblN0ZXBDYXJkKTtcbn1cbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSx1Q0FBdUMsR0FDdkM7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztDQXFCQyxHQUVELFNBQVMsV0FBVyxRQUFRLHVCQUF1QjtBQUNuRCxTQUFTLFVBQVUsUUFBNkIsZ0NBQWdDO0FBQ2hGLFNBQVMsVUFBVSxRQUFRLG9CQUFvQjtBQUUvQyxPQUFPLE1BQU0sVUFBVSxpQkFBaUI7QUFFeEMsTUFBTSxRQUF3QixJQUFJO0FBQ2xDLE1BQU0sV0FBVyxDQUFDLENBQUM7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQWdEbkIsQ0FBQztBQUVELE9BQU8sTUFBTSxxQkFBcUI7RUFDaEMsT0FBZ0IsU0FBUztJQUFDO0dBQU0sQ0FBQztFQUNqQyxPQUFnQixxQkFBcUI7SUFBQztJQUFRO0lBQVM7SUFBZTtHQUFTLENBQUM7RUFFdkUsU0FBMEQ7SUFDakUsTUFBTSxPQUFPLFNBQVMsSUFBSSxDQUFDLFlBQVksQ0FBQyxXQUFXLEtBQUs7SUFDeEQsTUFBTSxRQUFRLElBQUksQ0FBQyxZQUFZLENBQUMsWUFBWTtJQUM1QyxNQUFNLGNBQWMsSUFBSSxDQUFDLFlBQVksQ0FBQyxrQkFBa0I7SUFFeEQsUUFDRyxJQUFJLFVBQVUsWUFBWSxLQUFLLFlBQVk7UUFDMUMsQ0FBQyxJQUFJLFVBQVUsY0FBYztVQUMzQixDQUFDLEtBQUssVUFBVSxjQUFjLEtBQUssYUFBYSxPQUFPLEtBQUs7VUFDNUQsQ0FBQyxLQUFLLFVBQVUsYUFBYSxLQUFLLFNBQVMsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLEtBQUs7UUFDckUsRUFBRSxJQUFJO1FBQ04sQ0FBQyxnQkFDRSxFQUNDLEtBQUssY0FDTCxNQUFNLDZFQUNQO1lBQ0MsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLGFBQWE7VUFDMUIsRUFBRSxHQUNGO1FBQ0YsQ0FBQyxJQUFJLFVBQVUsWUFBWSxLQUFLLFVBQVU7VUFDeEMsQ0FBQyxPQUFPLEtBQUs7UUFDZixFQUFFLElBQUk7TUFDUixFQUFFO0VBRU47RUFFUyx5QkFBeUIsS0FBYSxFQUFFLEdBQWtCLEVBQUUsR0FBa0IsRUFBUTtJQUM3RixJQUFJLFFBQVEsS0FBSztJQUNqQixJQUFJLENBQUMsUUFBUTtFQUNmO0VBRVEsV0FBaUI7SUFDdkIsSUFBSSxDQUFDLE1BQU07RUFDYjtFQUVRLE9BQU8sV0FBVztBQUM1QjtBQUVBLGVBQWUsYUFBYTtBQUU1QixxQ0FBcUM7QUFDckMsSUFBSSxPQUFPLG1CQUFtQixlQUFlLENBQUMsZUFBZSxHQUFHLENBQUMsVUFBVTtFQUN6RSxlQUFlLE1BQU0sQ0FBQyxTQUFTO0FBQ2pDIn0=

package/src/open-tabs.d.ts

@@ -0,0 +1,27 @@
+/** @jsxImportSource @openelement/core */ /**
+ * @openelement/ui - open-tabs
+ *
+ * DaisyUI-style tabs using DsdElement + Signals.
+ * Reads light DOM children with `slot="tab"` and `slot="panel"`
+ * to render tab buttons and panel content.
+ *
+ * Usage:
+ * ```html
+ * <open-tabs>
+ *   <span slot="tab">Tab 1</span>
+ *   <span slot="tab">Tab 2</span>
+ *   <div slot="panel">Panel 1 content</div>
+ *   <div slot="panel">Panel 2 content</div>
+ * </open-tabs>
+ * ```
+ *
+ * @slot tab - Tab button labels (multiple)
+ * @slot panel - Tab panel content (multiple, one per tab)
+ */ import { OpenElement, type VNode } from '@openelement/element';
+import { daisyClassSheet } from "./daisy-classes.js";
+export declare const tagName: 'open-tabs';
+export declare class OpenTabs extends OpenElement {
+  static override styles: [];
+  override render(): VNode;
+}
+export default OpenTabs;