@ds-mo/ui 14.31.1 → 14.31.3

package/dist/components/{p-DF8W85Tz.js.map → p-ln3dJxQT.js.map}

@@ -1 +1 @@
-{"version":3,"names":["markdownCss","parserPromise","loadParser","Promise","all","import","then","fromMarkdownModule","gfmFromMarkdownModule","gfmModule","fromMarkdown","gfmFromMarkdown","gfm","Markdown","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","content","streaming","tree","parseRevision","componentWillLoad","document","parse","disconnectedCallback","parseFrame","cancelAnimationFrame","scheduleParse","requestAnimationFrame","undefined","revision","extensions","mdastExtensions","children","node","map","child","renderNode","type","h","class","value","Tag","depth","code","language","lang","filename","meta","href","resolveSafeUrl","url","protocols","target","rel","ordered","start","checked","disabled","tabIndex","heading","rows","cell","scope","row","alt","label","render","Host","key"],"sources":["src/wc/components/Markdown/Markdown.css?tag=ds-markdown&encapsulation=scoped","src/wc/components/Markdown/Markdown.tsx"],"sourcesContent":["@import '../../styles/prose.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  color: inherit;\n  box-sizing: border-box;\n  -webkit-user-select: text;\n  user-select: text;\n}\n","import { Component, h, Host, Prop, State, VNode, Watch } from '@stencil/core';\nimport type { Nodes, Root } from 'mdast';\nimport { resolveSafeUrl } from '../../utils';\n\ntype MarkdownRender = VNode | string | null | MarkdownRender[];\ntype MarkdownParser = {\n  fromMarkdown: typeof import('mdast-util-from-markdown').fromMarkdown;\n  gfmFromMarkdown: typeof import('mdast-util-gfm').gfmFromMarkdown;\n  gfm: typeof import('micromark-extension-gfm').gfm;\n};\n\nlet parserPromise: Promise<MarkdownParser> | undefined;\n\nfunction loadParser(): Promise<MarkdownParser> {\n  parserPromise ??= Promise.all([\n    import('mdast-util-from-markdown'),\n    import('mdast-util-gfm'),\n    import('micromark-extension-gfm'),\n  ]).then(([fromMarkdownModule, gfmFromMarkdownModule, gfmModule]) => ({\n    fromMarkdown: fromMarkdownModule.fromMarkdown,\n    gfmFromMarkdown: gfmFromMarkdownModule.gfmFromMarkdown,\n    gfm: gfmModule.gfm,\n  }));\n  return parserPromise;\n}\n\n@Component({\n  tag: 'ds-markdown',\n  styleUrl: 'Markdown.css',\n  scoped: true,\n})\nexport class Markdown {\n  @Prop() content: string = '';\n  @Prop() streaming: boolean = false;\n\n  @State() private tree: Root | null = null;\n  private parseFrame?: number;\n  private parseRevision = 0;\n\n  componentWillLoad() {\n    // The browser-targeted named-character decoder used by the Markdown parser\n    // creates a DOM element when its module is evaluated. Keep public package\n    // imports server-safe by loading that parser only in a browser context.\n    if (typeof document !== 'undefined') return this.parse();\n  }\n\n  disconnectedCallback() {\n    this.parseRevision += 1;\n    if (this.parseFrame && typeof cancelAnimationFrame === 'function') {\n      cancelAnimationFrame(this.parseFrame);\n    }\n  }\n\n  @Watch('content')\n  scheduleParse() {\n    if (typeof requestAnimationFrame !== 'function') return;\n    if (this.parseFrame) cancelAnimationFrame(this.parseFrame);\n    this.parseFrame = requestAnimationFrame(() => {\n      this.parseFrame = undefined;\n      void this.parse();\n    });\n  }\n\n  private async parse() {\n    const revision = ++this.parseRevision;\n    try {\n      const { fromMarkdown, gfmFromMarkdown, gfm } = await loadParser();\n      const tree = fromMarkdown(this.content, {\n        extensions: [gfm()],\n        mdastExtensions: [gfmFromMarkdown()],\n      });\n      if (revision === this.parseRevision) this.tree = tree;\n    } catch {\n      if (revision === this.parseRevision) this.tree = null;\n    }\n  }\n\n  private children(node: Nodes): MarkdownRender[] {\n    if (!('children' in node)) return [];\n    return node.children.map(child => this.renderNode(child));\n  }\n\n  private renderNode(node: Nodes): MarkdownRender {\n    switch (node.type) {\n      case 'root':\n        return this.children(node);\n      case 'text':\n        // Keep prose text on an element boundary. Besides giving streaming updates a\n        // stable render target, this avoids axe-core treating a bare Stencil text\n        // vnode as an element while it generates a contrast-result selector.\n        return <span class=\"markdown__text\">{node.value}</span>;\n      case 'paragraph':\n        return <p class=\"markdown__paragraph\">{this.children(node)}</p>;\n      case 'heading': {\n        const Tag = `h${node.depth}`;\n        return <Tag class=\"markdown__heading\">{this.children(node)}</Tag>;\n      }\n      case 'strong':\n        return <strong class=\"markdown__strong\">{this.children(node)}</strong>;\n      case 'emphasis':\n        return <em class=\"markdown__emphasis\">{this.children(node)}</em>;\n      case 'delete':\n        return <del class=\"markdown__delete\">{this.children(node)}</del>;\n      case 'blockquote':\n        return <blockquote class=\"markdown__blockquote\">{this.children(node)}</blockquote>;\n      case 'break':\n        return <br class=\"markdown__break\" />;\n      case 'thematicBreak':\n        return <hr class=\"markdown__thematic-break\" />;\n      case 'inlineCode':\n        return <code class=\"markdown__inline-code\">{node.value}</code>;\n      case 'code':\n        return (\n          <ds-code-block\n            class=\"markdown__code-block\"\n            data-ds-prose=\"off\"\n            code={node.value}\n            language={node.lang ?? ''}\n            filename={node.meta ?? ''}\n          />\n        );\n      case 'link': {\n        const href = resolveSafeUrl(node.url, {\n          protocols: ['http:', 'https:', 'mailto:'],\n        });\n        return href ? (\n          <a class=\"markdown__link\" href={href} target=\"_blank\" rel=\"noopener noreferrer\">\n            {this.children(node)}\n          </a>\n        ) : (\n          this.children(node)\n        );\n      }\n      case 'list': {\n        const Tag = node.ordered ? 'ol' : 'ul';\n        return (\n          <Tag class=\"markdown__list\" start={node.ordered && node.start ? node.start : undefined}>\n            {this.children(node)}\n          </Tag>\n        );\n      }\n      case 'listItem':\n        return (\n          <li class=\"markdown__list-item\">\n            {typeof node.checked === 'boolean' ? (\n              <input\n                class=\"markdown__task-indicator\"\n                type=\"checkbox\"\n                checked={node.checked}\n                disabled\n                aria-hidden=\"true\"\n                tabIndex={-1}\n              />\n            ) : null}\n            {this.children(node)}\n          </li>\n        );\n      case 'table': {\n        const [heading, ...rows] = node.children;\n        return (\n          <div class=\"markdown__table-wrap ds-prose__table-scroll\" tabIndex={0}>\n            <table class=\"markdown__table\">\n              {heading ? (\n                <thead class=\"markdown__table-head\">\n                  <tr class=\"markdown__table-row\">\n                    {heading.children.map(cell => (\n                      <th class=\"markdown__table-heading\" scope=\"col\">\n                        {this.children(cell)}\n                      </th>\n                    ))}\n                  </tr>\n                </thead>\n              ) : null}\n              <tbody class=\"markdown__table-body\">{rows.map(row => this.renderNode(row))}</tbody>\n            </table>\n          </div>\n        );\n      }\n      case 'tableRow':\n        return <tr class=\"markdown__table-row\">{this.children(node)}</tr>;\n      case 'tableCell':\n        return <td class=\"markdown__table-cell\">{this.children(node)}</td>;\n      case 'image': {\n        const href = resolveSafeUrl(node.url, {\n          protocols: ['http:', 'https:', 'mailto:'],\n        });\n        return href ? (\n          <a class=\"markdown__image-link\" href={href} target=\"_blank\" rel=\"noopener noreferrer\">\n            {node.alt || 'View image'}\n          </a>\n        ) : (\n          node.alt || null\n        );\n      }\n      case 'html':\n      case 'definition':\n      case 'footnoteDefinition':\n        return null;\n      case 'footnoteReference':\n        return <sup class=\"markdown__footnote\">{node.label}</sup>;\n      default:\n        return this.children(node);\n    }\n  }\n\n  render() {\n    return (\n      <Host aria-busy={this.streaming ? 'true' : undefined}>\n        <div class=\"markdown ds-prose\">\n          {this.tree ? (\n            this.renderNode(this.tree)\n          ) : (\n            <p class=\"markdown__paragraph\">\n              <span class=\"markdown__text\">{this.content}</span>\n            </p>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sVAAA,MAAMA,EAAc,IAAM,0uRCW1B,IAAIC,EAEJ,SAASC,IACPD,MAAkBE,QAAQC,IAAI,CAC5BC,OAAO,mBACPA,OAAO,mBACPA,OAAO,qBACNC,MAAK,EAAEC,EAAoBC,EAAuBC,MAAU,CAC7DC,aAAcH,EAAmBG,aACjCC,gBAAiBH,EAAsBG,gBACvCC,IAAKH,EAAUG,SAEjB,OAAOX,CACT,C,MAOaY,EAAQC,EAAA,MAAAD,UAAAE,EALrB,WAAAC,CAAAC,G,4CAMUC,KAAAC,QAAkB,GAClBD,KAAAE,UAAqB,MAEZF,KAAAG,KAAoB,KAE7BH,KAAAI,cAAgB,CAuLzB,CArLC,iBAAAC,GAIE,UAAWC,WAAa,YAAa,OAAON,KAAKO,O,CAGnD,oBAAAC,GACER,KAAKI,eAAiB,EACtB,GAAIJ,KAAKS,mBAAqBC,uBAAyB,WAAY,CACjEA,qBAAqBV,KAAKS,W,EAK9B,aAAAE,GACE,UAAWC,wBAA0B,WAAY,OACjD,GAAIZ,KAAKS,WAAYC,qBAAqBV,KAAKS,YAC/CT,KAAKS,WAAaG,uBAAsB,KACtCZ,KAAKS,WAAaI,eACbb,KAAKO,OAAO,G,CAIb,WAAMA,GACZ,MAAMO,IAAad,KAAKI,cACxB,IACE,MAAMZ,aAAEA,EAAYC,gBAAEA,EAAeC,IAAEA,SAAcV,IACrD,MAAMmB,EAAOX,EAAaQ,KAAKC,QAAS,CACtCc,WAAY,CAACrB,KACbsB,gBAAiB,CAACvB,OAEpB,GAAIqB,IAAad,KAAKI,cAAeJ,KAAKG,KAAOA,C,CACjD,MACA,GAAIW,IAAad,KAAKI,cAAeJ,KAAKG,KAAO,I,EAI7C,QAAAc,CAASC,GACf,KAAM,aAAcA,GAAO,MAAO,GAClC,OAAOA,EAAKD,SAASE,KAAIC,GAASpB,KAAKqB,WAAWD,I,CAG5C,UAAAC,CAAWH,GACjB,OAAQA,EAAKI,MACX,IAAK,OACH,OAAOtB,KAAKiB,SAASC,GACvB,IAAK,OAIH,OAAOK,EAAA,QAAMC,MAAM,kBAAkBN,EAAKO,OAC5C,IAAK,YACH,OAAOF,EAAA,KAAGC,MAAM,uBAAuBxB,KAAKiB,SAASC,IACvD,IAAK,UAAW,CACd,MAAMQ,EAAM,IAAIR,EAAKS,QACrB,OAAOJ,EAACG,EAAG,CAACF,MAAM,qBAAqBxB,KAAKiB,SAASC,G,CAEvD,IAAK,SACH,OAAOK,EAAA,UAAQC,MAAM,oBAAoBxB,KAAKiB,SAASC,IACzD,IAAK,WACH,OAAOK,EAAA,MAAIC,MAAM,sBAAsBxB,KAAKiB,SAASC,IACvD,IAAK,SACH,OAAOK,EAAA,OAAKC,MAAM,oBAAoBxB,KAAKiB,SAASC,IACtD,IAAK,aACH,OAAOK,EAAA,cAAYC,MAAM,wBAAwBxB,KAAKiB,SAASC,IACjE,IAAK,QACH,OAAOK,EAAA,MAAIC,MAAM,oBACnB,IAAK,gBACH,OAAOD,EAAA,MAAIC,MAAM,6BACnB,IAAK,aACH,OAAOD,EAAA,QAAMC,MAAM,yBAAyBN,EAAKO,OACnD,IAAK,OACH,OACEF,EAAA,iBACEC,MAAM,uBAAsB,gBACd,MACdI,KAAMV,EAAKO,MACXI,SAAUX,EAAKY,MAAQ,GACvBC,SAAUb,EAAKc,MAAQ,KAG7B,IAAK,OAAQ,CACX,MAAMC,EAAOC,EAAehB,EAAKiB,IAAK,CACpCC,UAAW,CAAC,QAAS,SAAU,aAEjC,OAAOH,EACLV,EAAA,KAAGC,MAAM,iBAAiBS,KAAMA,EAAMI,OAAO,SAASC,IAAI,uBACvDtC,KAAKiB,SAASC,IAGjBlB,KAAKiB,SAASC,E,CAGlB,IAAK,OAAQ,CACX,MAAMQ,EAAMR,EAAKqB,QAAU,KAAO,KAClC,OACEhB,EAACG,EAAG,CAACF,MAAM,iBAAiBgB,MAAOtB,EAAKqB,SAAWrB,EAAKsB,MAAQtB,EAAKsB,MAAQ3B,WAC1Eb,KAAKiB,SAASC,G,CAIrB,IAAK,WACH,OACEK,EAAA,MAAIC,MAAM,8BACAN,EAAKuB,UAAY,UACvBlB,EAAA,SACEC,MAAM,2BACNF,KAAK,WACLmB,QAASvB,EAAKuB,QACdC,SAAQ,mBACI,OACZC,UAAU,IAEV,KACH3C,KAAKiB,SAASC,IAGrB,IAAK,QAAS,CACZ,MAAO0B,KAAYC,GAAQ3B,EAAKD,SAChC,OACEM,EAAA,OAAKC,MAAM,8CAA8CmB,SAAU,GACjEpB,EAAA,SAAOC,MAAM,mBACVoB,EACCrB,EAAA,SAAOC,MAAM,wBACXD,EAAA,MAAIC,MAAM,uBACPoB,EAAQ3B,SAASE,KAAI2B,GACpBvB,EAAA,MAAIC,MAAM,0BAA0BuB,MAAM,OACvC/C,KAAKiB,SAAS6B,QAKrB,KACJvB,EAAA,SAAOC,MAAM,wBAAwBqB,EAAK1B,KAAI6B,GAAOhD,KAAKqB,WAAW2B,O,CAK7E,IAAK,WACH,OAAOzB,EAAA,MAAIC,MAAM,uBAAuBxB,KAAKiB,SAASC,IACxD,IAAK,YACH,OAAOK,EAAA,MAAIC,MAAM,wBAAwBxB,KAAKiB,SAASC,IACzD,IAAK,QAAS,CACZ,MAAMe,EAAOC,EAAehB,EAAKiB,IAAK,CACpCC,UAAW,CAAC,QAAS,SAAU,aAEjC,OAAOH,EACLV,EAAA,KAAGC,MAAM,uBAAuBS,KAAMA,EAAMI,OAAO,SAASC,IAAI,uBAC7DpB,EAAK+B,KAAO,cAGf/B,EAAK+B,KAAO,I,CAGhB,IAAK,OACL,IAAK,aACL,IAAK,qBACH,OAAO,KACT,IAAK,oBACH,OAAO1B,EAAA,OAAKC,MAAM,sBAAsBN,EAAKgC,OAC/C,QACE,OAAOlD,KAAKiB,SAASC,G,CAI3B,MAAAiC,GACE,OACE5B,EAAC6B,EAAI,CAAAC,IAAA,uDAAYrD,KAAKE,UAAY,OAASW,WACzCU,EAAA,OAAA8B,IAAA,2CAAK7B,MAAM,qBACRxB,KAAKG,KACJH,KAAKqB,WAAWrB,KAAKG,MAErBoB,EAAA,KAAGC,MAAM,uBACPD,EAAA,QAAMC,MAAM,kBAAkBxB,KAAKC,W","ignoreList":[]}
+{"version":3,"names":["markdownCss","parserPromise","loadParser","Promise","all","import","then","fromMarkdownModule","gfmFromMarkdownModule","gfmModule","fromMarkdown","gfmFromMarkdown","gfm","Markdown","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","content","streaming","tree","parseRevision","componentWillLoad","document","parse","disconnectedCallback","parseFrame","cancelAnimationFrame","scheduleParse","requestAnimationFrame","undefined","revision","extensions","mdastExtensions","children","node","map","child","renderNode","type","h","class","value","Tag","depth","code","language","lang","filename","meta","href","resolveSafeUrl","url","protocols","target","rel","ordered","start","checked","disabled","tabIndex","heading","rows","cell","scope","row","alt","label","render","Host","key"],"sources":["src/wc/components/Markdown/Markdown.css?tag=ds-markdown&encapsulation=scoped","src/wc/components/Markdown/Markdown.tsx"],"sourcesContent":["@import '../../styles/prose.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  color: inherit;\n  box-sizing: border-box;\n  -webkit-user-select: text;\n  user-select: text;\n}\n","import { Component, h, Host, Prop, State, VNode, Watch } from '@stencil/core';\nimport type { Nodes, Root } from 'mdast';\nimport { resolveSafeUrl } from '../../utils';\n\ntype MarkdownRender = VNode | string | null | MarkdownRender[];\ntype MarkdownParser = {\n  fromMarkdown: typeof import('mdast-util-from-markdown').fromMarkdown;\n  gfmFromMarkdown: typeof import('mdast-util-gfm').gfmFromMarkdown;\n  gfm: typeof import('micromark-extension-gfm').gfm;\n};\n\nlet parserPromise: Promise<MarkdownParser> | undefined;\n\nfunction loadParser(): Promise<MarkdownParser> {\n  parserPromise ??= Promise.all([\n    import('mdast-util-from-markdown'),\n    import('mdast-util-gfm'),\n    import('micromark-extension-gfm'),\n  ]).then(([fromMarkdownModule, gfmFromMarkdownModule, gfmModule]) => ({\n    fromMarkdown: fromMarkdownModule.fromMarkdown,\n    gfmFromMarkdown: gfmFromMarkdownModule.gfmFromMarkdown,\n    gfm: gfmModule.gfm,\n  }));\n  return parserPromise;\n}\n\n@Component({\n  tag: 'ds-markdown',\n  styleUrl: 'Markdown.css',\n  scoped: true,\n})\nexport class Markdown {\n  @Prop() content: string = '';\n  @Prop() streaming: boolean = false;\n\n  @State() private tree: Root | null = null;\n  private parseFrame?: number;\n  private parseRevision = 0;\n\n  componentWillLoad() {\n    // The browser-targeted named-character decoder used by the Markdown parser\n    // creates a DOM element when its module is evaluated. Keep public package\n    // imports server-safe by loading that parser only in a browser context.\n    if (typeof document !== 'undefined') return this.parse();\n  }\n\n  disconnectedCallback() {\n    this.parseRevision += 1;\n    if (this.parseFrame && typeof cancelAnimationFrame === 'function') {\n      cancelAnimationFrame(this.parseFrame);\n    }\n  }\n\n  @Watch('content')\n  scheduleParse() {\n    if (typeof requestAnimationFrame !== 'function') return;\n    if (this.parseFrame) cancelAnimationFrame(this.parseFrame);\n    this.parseFrame = requestAnimationFrame(() => {\n      this.parseFrame = undefined;\n      void this.parse();\n    });\n  }\n\n  private async parse() {\n    const revision = ++this.parseRevision;\n    try {\n      const { fromMarkdown, gfmFromMarkdown, gfm } = await loadParser();\n      const tree = fromMarkdown(this.content, {\n        extensions: [gfm()],\n        mdastExtensions: [gfmFromMarkdown()],\n      });\n      if (revision === this.parseRevision) this.tree = tree;\n    } catch {\n      if (revision === this.parseRevision) this.tree = null;\n    }\n  }\n\n  private children(node: Nodes): MarkdownRender[] {\n    if (!('children' in node)) return [];\n    return node.children.map(child => this.renderNode(child));\n  }\n\n  private renderNode(node: Nodes): MarkdownRender {\n    switch (node.type) {\n      case 'root':\n        return this.children(node);\n      case 'text':\n        // Keep prose text on an element boundary. Besides giving streaming updates a\n        // stable render target, this avoids axe-core treating a bare Stencil text\n        // vnode as an element while it generates a contrast-result selector.\n        return <span class=\"markdown__text\">{node.value}</span>;\n      case 'paragraph':\n        return <p class=\"markdown__paragraph\">{this.children(node)}</p>;\n      case 'heading': {\n        const Tag = `h${node.depth}`;\n        return <Tag class=\"markdown__heading\">{this.children(node)}</Tag>;\n      }\n      case 'strong':\n        return <strong class=\"markdown__strong\">{this.children(node)}</strong>;\n      case 'emphasis':\n        return <em class=\"markdown__emphasis\">{this.children(node)}</em>;\n      case 'delete':\n        return <del class=\"markdown__delete\">{this.children(node)}</del>;\n      case 'blockquote':\n        return <blockquote class=\"markdown__blockquote\">{this.children(node)}</blockquote>;\n      case 'break':\n        return <br class=\"markdown__break\" />;\n      case 'thematicBreak':\n        return <hr class=\"markdown__thematic-break\" />;\n      case 'inlineCode':\n        return <code class=\"markdown__inline-code\">{node.value}</code>;\n      case 'code':\n        return (\n          <ds-code-block\n            class=\"markdown__code-block\"\n            data-ds-prose=\"off\"\n            code={node.value}\n            language={node.lang ?? ''}\n            filename={node.meta ?? ''}\n          />\n        );\n      case 'link': {\n        const href = resolveSafeUrl(node.url, {\n          protocols: ['http:', 'https:', 'mailto:'],\n        });\n        return href ? (\n          <a class=\"markdown__link\" href={href} target=\"_blank\" rel=\"noopener noreferrer\">\n            {this.children(node)}\n          </a>\n        ) : (\n          this.children(node)\n        );\n      }\n      case 'list': {\n        const Tag = node.ordered ? 'ol' : 'ul';\n        return (\n          <Tag class=\"markdown__list\" start={node.ordered && node.start ? node.start : undefined}>\n            {this.children(node)}\n          </Tag>\n        );\n      }\n      case 'listItem':\n        return (\n          <li class=\"markdown__list-item\">\n            {typeof node.checked === 'boolean' ? (\n              <input\n                class=\"markdown__task-indicator\"\n                type=\"checkbox\"\n                checked={node.checked}\n                disabled\n                aria-hidden=\"true\"\n                tabIndex={-1}\n              />\n            ) : null}\n            {this.children(node)}\n          </li>\n        );\n      case 'table': {\n        const [heading, ...rows] = node.children;\n        return (\n          <div class=\"markdown__table-wrap ds-prose__table-scroll\" tabIndex={0}>\n            <table class=\"markdown__table\">\n              {heading ? (\n                <thead class=\"markdown__table-head\">\n                  <tr class=\"markdown__table-row\">\n                    {heading.children.map(cell => (\n                      <th class=\"markdown__table-heading\" scope=\"col\">\n                        {this.children(cell)}\n                      </th>\n                    ))}\n                  </tr>\n                </thead>\n              ) : null}\n              <tbody class=\"markdown__table-body\">{rows.map(row => this.renderNode(row))}</tbody>\n            </table>\n          </div>\n        );\n      }\n      case 'tableRow':\n        return <tr class=\"markdown__table-row\">{this.children(node)}</tr>;\n      case 'tableCell':\n        return <td class=\"markdown__table-cell\">{this.children(node)}</td>;\n      case 'image': {\n        const href = resolveSafeUrl(node.url, {\n          protocols: ['http:', 'https:', 'mailto:'],\n        });\n        return href ? (\n          <a class=\"markdown__image-link\" href={href} target=\"_blank\" rel=\"noopener noreferrer\">\n            {node.alt || 'View image'}\n          </a>\n        ) : (\n          node.alt || null\n        );\n      }\n      case 'html':\n      case 'definition':\n      case 'footnoteDefinition':\n        return null;\n      case 'footnoteReference':\n        return <sup class=\"markdown__footnote\">{node.label}</sup>;\n      default:\n        return this.children(node);\n    }\n  }\n\n  render() {\n    return (\n      <Host aria-busy={this.streaming ? 'true' : undefined}>\n        <div class=\"markdown ds-prose\">\n          {this.tree ? (\n            this.renderNode(this.tree)\n          ) : (\n            <p class=\"markdown__paragraph\">\n              <span class=\"markdown__text\">{this.content}</span>\n            </p>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sVAAA,MAAMA,EAAc,IAAM,0+SCW1B,IAAIC,EAEJ,SAASC,IACPD,MAAkBE,QAAQC,IAAI,CAC5BC,OAAO,mBACPA,OAAO,mBACPA,OAAO,qBACNC,MAAK,EAAEC,EAAoBC,EAAuBC,MAAU,CAC7DC,aAAcH,EAAmBG,aACjCC,gBAAiBH,EAAsBG,gBACvCC,IAAKH,EAAUG,SAEjB,OAAOX,CACT,C,MAOaY,EAAQC,EAAA,MAAAD,UAAAE,EALrB,WAAAC,CAAAC,G,4CAMUC,KAAAC,QAAkB,GAClBD,KAAAE,UAAqB,MAEZF,KAAAG,KAAoB,KAE7BH,KAAAI,cAAgB,CAuLzB,CArLC,iBAAAC,GAIE,UAAWC,WAAa,YAAa,OAAON,KAAKO,O,CAGnD,oBAAAC,GACER,KAAKI,eAAiB,EACtB,GAAIJ,KAAKS,mBAAqBC,uBAAyB,WAAY,CACjEA,qBAAqBV,KAAKS,W,EAK9B,aAAAE,GACE,UAAWC,wBAA0B,WAAY,OACjD,GAAIZ,KAAKS,WAAYC,qBAAqBV,KAAKS,YAC/CT,KAAKS,WAAaG,uBAAsB,KACtCZ,KAAKS,WAAaI,eACbb,KAAKO,OAAO,G,CAIb,WAAMA,GACZ,MAAMO,IAAad,KAAKI,cACxB,IACE,MAAMZ,aAAEA,EAAYC,gBAAEA,EAAeC,IAAEA,SAAcV,IACrD,MAAMmB,EAAOX,EAAaQ,KAAKC,QAAS,CACtCc,WAAY,CAACrB,KACbsB,gBAAiB,CAACvB,OAEpB,GAAIqB,IAAad,KAAKI,cAAeJ,KAAKG,KAAOA,C,CACjD,MACA,GAAIW,IAAad,KAAKI,cAAeJ,KAAKG,KAAO,I,EAI7C,QAAAc,CAASC,GACf,KAAM,aAAcA,GAAO,MAAO,GAClC,OAAOA,EAAKD,SAASE,KAAIC,GAASpB,KAAKqB,WAAWD,I,CAG5C,UAAAC,CAAWH,GACjB,OAAQA,EAAKI,MACX,IAAK,OACH,OAAOtB,KAAKiB,SAASC,GACvB,IAAK,OAIH,OAAOK,EAAA,QAAMC,MAAM,kBAAkBN,EAAKO,OAC5C,IAAK,YACH,OAAOF,EAAA,KAAGC,MAAM,uBAAuBxB,KAAKiB,SAASC,IACvD,IAAK,UAAW,CACd,MAAMQ,EAAM,IAAIR,EAAKS,QACrB,OAAOJ,EAACG,EAAG,CAACF,MAAM,qBAAqBxB,KAAKiB,SAASC,G,CAEvD,IAAK,SACH,OAAOK,EAAA,UAAQC,MAAM,oBAAoBxB,KAAKiB,SAASC,IACzD,IAAK,WACH,OAAOK,EAAA,MAAIC,MAAM,sBAAsBxB,KAAKiB,SAASC,IACvD,IAAK,SACH,OAAOK,EAAA,OAAKC,MAAM,oBAAoBxB,KAAKiB,SAASC,IACtD,IAAK,aACH,OAAOK,EAAA,cAAYC,MAAM,wBAAwBxB,KAAKiB,SAASC,IACjE,IAAK,QACH,OAAOK,EAAA,MAAIC,MAAM,oBACnB,IAAK,gBACH,OAAOD,EAAA,MAAIC,MAAM,6BACnB,IAAK,aACH,OAAOD,EAAA,QAAMC,MAAM,yBAAyBN,EAAKO,OACnD,IAAK,OACH,OACEF,EAAA,iBACEC,MAAM,uBAAsB,gBACd,MACdI,KAAMV,EAAKO,MACXI,SAAUX,EAAKY,MAAQ,GACvBC,SAAUb,EAAKc,MAAQ,KAG7B,IAAK,OAAQ,CACX,MAAMC,EAAOC,EAAehB,EAAKiB,IAAK,CACpCC,UAAW,CAAC,QAAS,SAAU,aAEjC,OAAOH,EACLV,EAAA,KAAGC,MAAM,iBAAiBS,KAAMA,EAAMI,OAAO,SAASC,IAAI,uBACvDtC,KAAKiB,SAASC,IAGjBlB,KAAKiB,SAASC,E,CAGlB,IAAK,OAAQ,CACX,MAAMQ,EAAMR,EAAKqB,QAAU,KAAO,KAClC,OACEhB,EAACG,EAAG,CAACF,MAAM,iBAAiBgB,MAAOtB,EAAKqB,SAAWrB,EAAKsB,MAAQtB,EAAKsB,MAAQ3B,WAC1Eb,KAAKiB,SAASC,G,CAIrB,IAAK,WACH,OACEK,EAAA,MAAIC,MAAM,8BACAN,EAAKuB,UAAY,UACvBlB,EAAA,SACEC,MAAM,2BACNF,KAAK,WACLmB,QAASvB,EAAKuB,QACdC,SAAQ,mBACI,OACZC,UAAU,IAEV,KACH3C,KAAKiB,SAASC,IAGrB,IAAK,QAAS,CACZ,MAAO0B,KAAYC,GAAQ3B,EAAKD,SAChC,OACEM,EAAA,OAAKC,MAAM,8CAA8CmB,SAAU,GACjEpB,EAAA,SAAOC,MAAM,mBACVoB,EACCrB,EAAA,SAAOC,MAAM,wBACXD,EAAA,MAAIC,MAAM,uBACPoB,EAAQ3B,SAASE,KAAI2B,GACpBvB,EAAA,MAAIC,MAAM,0BAA0BuB,MAAM,OACvC/C,KAAKiB,SAAS6B,QAKrB,KACJvB,EAAA,SAAOC,MAAM,wBAAwBqB,EAAK1B,KAAI6B,GAAOhD,KAAKqB,WAAW2B,O,CAK7E,IAAK,WACH,OAAOzB,EAAA,MAAIC,MAAM,uBAAuBxB,KAAKiB,SAASC,IACxD,IAAK,YACH,OAAOK,EAAA,MAAIC,MAAM,wBAAwBxB,KAAKiB,SAASC,IACzD,IAAK,QAAS,CACZ,MAAMe,EAAOC,EAAehB,EAAKiB,IAAK,CACpCC,UAAW,CAAC,QAAS,SAAU,aAEjC,OAAOH,EACLV,EAAA,KAAGC,MAAM,uBAAuBS,KAAMA,EAAMI,OAAO,SAASC,IAAI,uBAC7DpB,EAAK+B,KAAO,cAGf/B,EAAK+B,KAAO,I,CAGhB,IAAK,OACL,IAAK,aACL,IAAK,qBACH,OAAO,KACT,IAAK,oBACH,OAAO1B,EAAA,OAAKC,MAAM,sBAAsBN,EAAKgC,OAC/C,QACE,OAAOlD,KAAKiB,SAASC,G,CAI3B,MAAAiC,GACE,OACE5B,EAAC6B,EAAI,CAAAC,IAAA,uDAAYrD,KAAKE,UAAY,OAASW,WACzCU,EAAA,OAAA8B,IAAA,2CAAK7B,MAAM,qBACRxB,KAAKG,KACJH,KAAKqB,WAAWrB,KAAKG,MAErBoB,EAAA,KAAGC,MAAM,uBACPD,EAAA,QAAMC,MAAM,kBAAkBxB,KAAKC,W","ignoreList":[]}

package/dist/components/{p-BLTHIBsE.js → p-pkGqqLm-.js}

@@ -1,2 +1,2 @@
-import{p as e,H as t,h as i,a as s,t as d}from"./index.js";import{d as n}from"./p-aMyflqva.js";const r=()=>`.ds-field-stack.sc-ds-field-h,.ds-field-stack.sc-ds-field{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.sc-ds-field-h{display:block}.field__control.sc-ds-field{display:flex;min-width:0}.field__control.sc-ds-field>*.sc-ds-field{width:100%}`;let a=0;const o=e=>e?.split(/\s+/).filter(Boolean)??[];const l=(...e)=>[...new Set(e.flat())];const h=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.error=false;this.focused=false;this.filled=false;this.dirty=false;this.touched=false;this.controlDisabled=false;this.controlRequired=false;this.slotRevision=0;this.generatedId=`ds-field-${++a}`;this.initialValue="";this.authoredAria=new WeakMap;this.didLoad=false;this.syncControl=()=>{const e=this.findControl();if(!e)return;if(e!==this.control){this.control=e;this.initialValue=this.readValue(e);this.authoredAria.set(e,{labelledby:o(e.getAttribute("aria-labelledby")),describedby:o(e.getAttribute("aria-describedby"))})}const t=e.tagName.startsWith("DS-");if(t&&"inputId"in e)e.inputId=this.controlId;else this.updateControlAttribute(e,"id",this.controlId);const i=this.authoredAria.get(e)??{labelledby:[],describedby:[]};const s=l(i.labelledby,[this.labelId]).join(" ");const d=l(i.describedby,this.renderedDescription?[this.descriptionId]:[],this.renderedError?[this.errorId]:[]).join(" ");this.updateControlAttribute(e,"aria-labelledby",s);this.updateControlAttribute(e,"aria-describedby",d||undefined);this.updateControlAttribute(e,"aria-invalid",this.error?"true":undefined);if(t&&"error"in e&&e.error!==this.error)e.error=this.error;const n=this.readValue(e);this.filled=n.length>0;this.dirty=n!==this.initialValue;this.controlDisabled=Boolean(e.disabled||e.isInactive||e.hasAttribute("disabled"));this.controlRequired=Boolean(e.required||e.hasAttribute("required"))};this.handleLabelClick=e=>{if(!this.control?.tagName.startsWith("DS-"))return;e.preventDefault();this.control.setFocus?.()};this.handleFocusIn=()=>{this.focused=true};this.handleFocusOut=e=>{if(e.relatedTarget instanceof Node&&this.el.contains(e.relatedTarget))return;this.focused=false;this.touched=true};this.handleValueChange=()=>{this.syncControl()}}connectedCallback(){if(this.didLoad)this.observeLateControls()}disconnectedCallback(){this.childObserver?.disconnect();this.childObserver=undefined}componentDidLoad(){this.syncControl();this.didLoad=true;this.observeLateControls();requestAnimationFrame((()=>this.syncControl()))}componentDidRender(){this.syncControl()}onFieldContractChange(){this.syncControl()}get controlId(){return this.fieldId||this.generatedId}get labelId(){return`${this.controlId}-label`}get descriptionId(){return`${this.controlId}-description`}get errorId(){return`${this.controlId}-error`}get renderedDescription(){return Boolean(this.description)&&!this.renderedError}get renderedError(){return this.error&&Boolean(this.errorMessage)}readValue(e){const t=e.value;return Array.isArray(t)?t.join(""):String(t??"")}updateControlAttribute(e,t,i){if(i===undefined){if(e.hasAttribute(t))e.removeAttribute(t);return}if(e.getAttribute(t)!==i)e.setAttribute(t,i)}findControl(){return this.controlContainer?.querySelector(":scope > :not(slot)")??undefined}observeLateControls(){if(this.childObserver||typeof MutationObserver==="undefined")return;this.childObserver=new MutationObserver((e=>{const t=e.some((e=>Array.from(e.addedNodes).some((e=>e.nodeType===1))));if(t)this.slotRevision++}));this.childObserver.observe(this.el,{childList:true})}render(){return i(s,{key:"43959fd0943c064d8904e3b9de1cff9b92011fba","data-focused":this.focused?"":undefined,"data-filled":this.filled?"":undefined,"data-dirty":this.dirty?"":undefined,"data-touched":this.touched?"":undefined,"data-invalid":this.error?"":undefined,"data-disabled":this.controlDisabled?"":undefined,"data-required":this.controlRequired?"":undefined,onFocusin:this.handleFocusIn,onFocusout:this.handleFocusOut,onInput:this.handleValueChange,onChange:this.handleValueChange,onDsChange:this.handleValueChange},i("div",{key:"d0c3c7d7df962b5fac0490098efd077a6bf67dfd",class:"field ds-field-stack"},i("ds-text",{key:"8240964b0f7d44aa1065c9691e9165fdf6f99467",class:"field__label",as:"label",variant:"text-body-small",color:"primary",emphasis:true,for:this.controlId,textId:this.labelId,onClick:this.handleLabelClick},this.label),i("div",{key:"16a0f8c694a1d1459843cd97d67bb81cd9ca20df",class:"field__control",ref:e=>this.controlContainer=e},i("slot",{key:"96407e82cf6afe3ea137c084d44687f0dae1671d",onSlotchange:this.syncControl})),this.renderedDescription&&i("ds-text",{key:"14fb62f93759e4ef1b73960ad5faa881f4001036",class:"field__description",as:"div",variant:"text-body-small",color:"secondary",textId:this.descriptionId},this.description),this.renderedError&&i("ds-text",{key:"cf6beebaa6521ced065cad52cbc75772105c7272",class:"field__error",as:"div",variant:"text-body-small",color:"negative",textId:this.errorId,role:"alert"},this.errorMessage)))}get el(){return this}static get watchers(){return{fieldId:[{onFieldContractChange:0}],description:[{onFieldContractChange:0}],error:[{onFieldContractChange:0}],errorMessage:[{onFieldContractChange:0}]}}static get style(){return r()}},[262,"ds-field",{label:[1],fieldId:[1,"field-id"],description:[1],error:[4],errorMessage:[1,"error-message"],focused:[32],filled:[32],dirty:[32],touched:[32],controlDisabled:[32],controlRequired:[32],slotRevision:[32]},undefined,{fieldId:[{onFieldContractChange:0}],description:[{onFieldContractChange:0}],error:[{onFieldContractChange:0}],errorMessage:[{onFieldContractChange:0}]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-field","ds-text"];e.forEach((e=>{switch(e){case"ds-field":if(!customElements.get(d(e))){customElements.define(d(e),h)}break;case"ds-text":if(!customElements.get(d(e))){n()}break}}))}c();export{h as F,c as d};
-//# sourceMappingURL=p-BLTHIBsE.js.map
+import{p as e,H as t,h as i,a as s,t as d}from"./index.js";import{d as n}from"./p-B9oadFSC.js";const r=()=>`.ds-field-stack.sc-ds-field-h,.ds-field-stack.sc-ds-field{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.sc-ds-field-h{display:block}.field__control.sc-ds-field{display:flex;min-width:0}.field__control.sc-ds-field>*.sc-ds-field{width:100%}`;let a=0;const o=e=>e?.split(/\s+/).filter(Boolean)??[];const l=(...e)=>[...new Set(e.flat())];const h=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.error=false;this.focused=false;this.filled=false;this.dirty=false;this.touched=false;this.controlDisabled=false;this.controlRequired=false;this.slotRevision=0;this.generatedId=`ds-field-${++a}`;this.initialValue="";this.authoredAria=new WeakMap;this.didLoad=false;this.syncControl=()=>{const e=this.findControl();if(!e)return;if(e!==this.control){this.control=e;this.initialValue=this.readValue(e);this.authoredAria.set(e,{labelledby:o(e.getAttribute("aria-labelledby")),describedby:o(e.getAttribute("aria-describedby"))})}const t=e.tagName.startsWith("DS-");if(t&&"inputId"in e)e.inputId=this.controlId;else this.updateControlAttribute(e,"id",this.controlId);const i=this.authoredAria.get(e)??{labelledby:[],describedby:[]};const s=l(i.labelledby,[this.labelId]).join(" ");const d=l(i.describedby,this.renderedDescription?[this.descriptionId]:[],this.renderedError?[this.errorId]:[]).join(" ");this.updateControlAttribute(e,"aria-labelledby",s);this.updateControlAttribute(e,"aria-describedby",d||undefined);this.updateControlAttribute(e,"aria-invalid",this.error?"true":undefined);if(t&&"error"in e&&e.error!==this.error)e.error=this.error;const n=this.readValue(e);this.filled=n.length>0;this.dirty=n!==this.initialValue;this.controlDisabled=Boolean(e.disabled||e.isInactive||e.hasAttribute("disabled"));this.controlRequired=Boolean(e.required||e.hasAttribute("required"))};this.handleLabelClick=e=>{if(!this.control?.tagName.startsWith("DS-"))return;e.preventDefault();this.control.setFocus?.()};this.handleFocusIn=()=>{this.focused=true};this.handleFocusOut=e=>{if(e.relatedTarget instanceof Node&&this.el.contains(e.relatedTarget))return;this.focused=false;this.touched=true};this.handleValueChange=()=>{this.syncControl()}}connectedCallback(){if(this.didLoad)this.observeLateControls()}disconnectedCallback(){this.childObserver?.disconnect();this.childObserver=undefined}componentDidLoad(){this.syncControl();this.didLoad=true;this.observeLateControls();requestAnimationFrame((()=>this.syncControl()))}componentDidRender(){this.syncControl()}onFieldContractChange(){this.syncControl()}get controlId(){return this.fieldId||this.generatedId}get labelId(){return`${this.controlId}-label`}get descriptionId(){return`${this.controlId}-description`}get errorId(){return`${this.controlId}-error`}get renderedDescription(){return Boolean(this.description)&&!this.renderedError}get renderedError(){return this.error&&Boolean(this.errorMessage)}readValue(e){const t=e.value;return Array.isArray(t)?t.join(""):String(t??"")}updateControlAttribute(e,t,i){if(i===undefined){if(e.hasAttribute(t))e.removeAttribute(t);return}if(e.getAttribute(t)!==i)e.setAttribute(t,i)}findControl(){return this.controlContainer?.querySelector(":scope > :not(slot)")??undefined}observeLateControls(){if(this.childObserver||typeof MutationObserver==="undefined")return;this.childObserver=new MutationObserver((e=>{const t=e.some((e=>Array.from(e.addedNodes).some((e=>e.nodeType===1))));if(t)this.slotRevision++}));this.childObserver.observe(this.el,{childList:true})}render(){return i(s,{key:"01ac395afc229748e3629d67e3ee5b17161bac01","data-focused":this.focused?"":undefined,"data-filled":this.filled?"":undefined,"data-dirty":this.dirty?"":undefined,"data-touched":this.touched?"":undefined,"data-invalid":this.error?"":undefined,"data-disabled":this.controlDisabled?"":undefined,"data-required":this.controlRequired?"":undefined,onFocusin:this.handleFocusIn,onFocusout:this.handleFocusOut,onInput:this.handleValueChange,onChange:this.handleValueChange,onDsChange:this.handleValueChange},i("div",{key:"3f191e3ca6a6715469ae9c60e8470b950ebb920e",class:"field ds-field-stack"},i("ds-text",{key:"2a4ec6f5baa04dde3ff16c24d5fad3d503bbf145",class:"field__label",as:"label",variant:"text-body-small",color:"primary",emphasis:true,for:this.controlId,textId:this.labelId,onClick:this.handleLabelClick},this.label),i("div",{key:"05c43549c4517831dbaf594797c8c18b7ae57226",class:"field__control",ref:e=>this.controlContainer=e},i("slot",{key:"88be33a0b5d6c63cc69a17707ed0fdbc8770142a",onSlotchange:this.syncControl})),this.renderedDescription&&i("ds-text",{key:"27d05770b0990ead7950b78955ff14efdaf4f022",class:"field__description",as:"div",variant:"text-body-small",color:"secondary",textId:this.descriptionId},this.description),this.renderedError&&i("ds-text",{key:"a227de78846f9297f051b511cdf2d3006cbe7691",class:"field__error",as:"div",variant:"text-body-small",color:"negative",textId:this.errorId,role:"alert"},this.errorMessage)))}get el(){return this}static get watchers(){return{fieldId:[{onFieldContractChange:0}],description:[{onFieldContractChange:0}],error:[{onFieldContractChange:0}],errorMessage:[{onFieldContractChange:0}]}}static get style(){return r()}},[262,"ds-field",{label:[1],fieldId:[1,"field-id"],description:[1],error:[4],errorMessage:[1,"error-message"],focused:[32],filled:[32],dirty:[32],touched:[32],controlDisabled:[32],controlRequired:[32],slotRevision:[32]},undefined,{fieldId:[{onFieldContractChange:0}],description:[{onFieldContractChange:0}],error:[{onFieldContractChange:0}],errorMessage:[{onFieldContractChange:0}]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-field","ds-text"];e.forEach((e=>{switch(e){case"ds-field":if(!customElements.get(d(e))){customElements.define(d(e),h)}break;case"ds-text":if(!customElements.get(d(e))){n()}break}}))}c();export{h as F,c as d};
+//# sourceMappingURL=p-pkGqqLm-.js.map

package/dist/components/{p-DbDYEEWq.js → p-uqsR98po.js}

@@ -1,2 +1,2 @@
-import{p as d,H as i,h as e,a as r,t as s}from"./index.js";const o=()=>`@media (forced-colors: active){.sc-ds-divider:root,.sc-ds-divider-h,.ds-forced-colors-scope.sc-ds-divider{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-divider-h{--_divider-color:var(--color-divider-divider);--_divider-inset:0;--_divider-length:100%;display:block;flex-shrink:0;width:var(--_divider-length);height:var(--dimension-stroke-width-012);margin:0 var(--_divider-inset);border:none;background-color:var(--_divider-color)}.divider--vertical.sc-ds-divider-h{width:var(--dimension-stroke-width-012);height:var(--_divider-length);min-height:var(--dimension-stroke-width-012);margin:var(--_divider-inset) 0;align-self:stretch}.divider--vertical.divider--custom-length.sc-ds-divider-h{align-self:center}[background='bold'].sc-ds-divider-h,.divider--background-bold.sc-ds-divider-h{--_divider-color:var(--color-divider-divider-on-bold-background)}[background='strong'].sc-ds-divider-h,.divider--background-strong.sc-ds-divider-h{--_divider-color:var(--color-divider-divider-on-strong-background)}[background='medium'].sc-ds-divider-h,.divider--background-medium.sc-ds-divider-h{--_divider-color:var(--color-divider-divider-on-medium-background)}[background='translucent'].sc-ds-divider-h,.divider--background-translucent.sc-ds-divider-h{--_divider-color:var(--color-translucent-divider)}[background='navigation'].sc-ds-divider-h,.divider--background-navigation.sc-ds-divider-h{--_divider-color:var(--color-navigation-divider)}[background='media'].sc-ds-divider-h,.divider--background-media.sc-ds-divider-h{--_divider-color:var(--color-media-divider)}[background='always-dark'].sc-ds-divider-h,.divider--background-always-dark.sc-ds-divider-h{--_divider-color:var(--color-always-dark-divider)}[background='inverted'].sc-ds-divider-h,.divider--background-inverted.sc-ds-divider-h{--_divider-color:var(--color-inverted-divider)}@media (forced-colors: active){.sc-ds-divider-h{background-color:var(--ds-forced-color-content)}}`;const c={none:"0","space-000":"var(--dimension-space-000)","space-012":"var(--dimension-space-012)","space-025":"var(--dimension-space-025)","space-050":"var(--dimension-space-050)","space-075":"var(--dimension-space-075)","space-100":"var(--dimension-space-100)","space-125":"var(--dimension-space-125)","space-150":"var(--dimension-space-150)","space-175":"var(--dimension-space-175)","space-200":"var(--dimension-space-200)","space-250":"var(--dimension-space-250)","space-300":"var(--dimension-space-300)","space-400":"var(--dimension-space-400)","space-600":"var(--dimension-space-600)","space-800":"var(--dimension-space-800)"};const a=d(class d extends i{constructor(d){super();if(d!==false){this.__registerHost()}this.orientation="horizontal";this.inset="none";this.length="auto";this.semantic=false}resolveInset(){return Object.prototype.hasOwnProperty.call(c,this.inset)?c[this.inset]:this.inset}resolveLength(){return this.length==="auto"||this.length==="full"?"100%":this.length}render(){const d=this.orientation==="vertical";const i=this.length!=="auto"&&this.length!=="full";return e(r,{key:"501826330bd523ce7c4cb9ac485075ce6d5a60d2",role:this.semantic?"separator":undefined,"aria-orientation":this.semantic?this.orientation:undefined,"aria-hidden":this.semantic?undefined:"true",class:{divider:true,"divider--vertical":d,"divider--custom-length":i,[`divider--background-${this.background}`]:!!this.background},style:{"--_divider-inset":this.resolveInset(),"--_divider-length":this.resolveLength()}})}static get style(){return o()}},[2,"ds-divider",{orientation:[1],background:[1],inset:[1],length:[1],semantic:[4]}]);function n(){if(typeof customElements==="undefined"){return}const d=["ds-divider"];d.forEach((d=>{switch(d){case"ds-divider":if(!customElements.get(s(d))){customElements.define(s(d),a)}break}}))}n();export{a as D,n as d};
-//# sourceMappingURL=p-DbDYEEWq.js.map
+import{p as d,H as i,h as e,a as r,t as s}from"./index.js";const o=()=>`@media (forced-colors: active){.sc-ds-divider:root,.sc-ds-divider-h,.ds-forced-colors-scope.sc-ds-divider{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-divider-h{--_divider-color:var(--color-divider-divider);--_divider-inset:0;--_divider-length:100%;display:block;flex-shrink:0;width:var(--_divider-length);height:var(--dimension-stroke-width-012);margin:0 var(--_divider-inset);border:none;background-color:var(--_divider-color)}.divider--vertical.sc-ds-divider-h{width:var(--dimension-stroke-width-012);height:var(--_divider-length);min-height:var(--dimension-stroke-width-012);margin:var(--_divider-inset) 0;align-self:stretch}.divider--vertical.divider--custom-length.sc-ds-divider-h{align-self:center}[background='bold'].sc-ds-divider-h,.divider--background-bold.sc-ds-divider-h{--_divider-color:var(--color-divider-divider-on-bold-background)}[background='strong'].sc-ds-divider-h,.divider--background-strong.sc-ds-divider-h{--_divider-color:var(--color-divider-divider-on-strong-background)}[background='medium'].sc-ds-divider-h,.divider--background-medium.sc-ds-divider-h{--_divider-color:var(--color-divider-divider-on-medium-background)}[background='translucent'].sc-ds-divider-h,.divider--background-translucent.sc-ds-divider-h{--_divider-color:var(--color-translucent-divider)}[background='navigation'].sc-ds-divider-h,.divider--background-navigation.sc-ds-divider-h{--_divider-color:var(--color-navigation-divider)}[background='media'].sc-ds-divider-h,.divider--background-media.sc-ds-divider-h{--_divider-color:var(--color-media-divider)}[background='always-dark'].sc-ds-divider-h,.divider--background-always-dark.sc-ds-divider-h{--_divider-color:var(--color-always-dark-divider)}[background='inverted'].sc-ds-divider-h,.divider--background-inverted.sc-ds-divider-h{--_divider-color:var(--color-inverted-divider)}@media (forced-colors: active){.sc-ds-divider-h{background-color:var(--ds-forced-color-content)}}`;const c={none:"0","space-000":"var(--dimension-space-000)","space-012":"var(--dimension-space-012)","space-025":"var(--dimension-space-025)","space-050":"var(--dimension-space-050)","space-075":"var(--dimension-space-075)","space-100":"var(--dimension-space-100)","space-125":"var(--dimension-space-125)","space-150":"var(--dimension-space-150)","space-175":"var(--dimension-space-175)","space-200":"var(--dimension-space-200)","space-250":"var(--dimension-space-250)","space-300":"var(--dimension-space-300)","space-400":"var(--dimension-space-400)","space-600":"var(--dimension-space-600)","space-800":"var(--dimension-space-800)"};const a=d(class d extends i{constructor(d){super();if(d!==false){this.__registerHost()}this.orientation="horizontal";this.inset="none";this.length="auto";this.semantic=false}resolveInset(){return Object.prototype.hasOwnProperty.call(c,this.inset)?c[this.inset]:this.inset}resolveLength(){return this.length==="auto"||this.length==="full"?"100%":this.length}render(){const d=this.orientation==="vertical";const i=this.length!=="auto"&&this.length!=="full";return e(r,{key:"0f6b42f05304b8781cbdbd2a701c4d07f760c6b1",role:this.semantic?"separator":undefined,"aria-orientation":this.semantic?this.orientation:undefined,"aria-hidden":this.semantic?undefined:"true",class:{divider:true,"divider--vertical":d,"divider--custom-length":i,[`divider--background-${this.background}`]:!!this.background},style:{"--_divider-inset":this.resolveInset(),"--_divider-length":this.resolveLength()}})}static get style(){return o()}},[2,"ds-divider",{orientation:[1],background:[1],inset:[1],length:[1],semantic:[4]}]);function n(){if(typeof customElements==="undefined"){return}const d=["ds-divider"];d.forEach((d=>{switch(d){case"ds-divider":if(!customElements.get(s(d))){customElements.define(s(d),a)}break}}))}n();export{a as D,n as d};
+//# sourceMappingURL=p-uqsR98po.js.map

package/dist/docs/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-09-05T02:44:38",
+  "timestamp": "2026-09-05T21:08:43",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.5",
@@ -22005,10 +22005,10 @@
           "docsTags": [
             {
               "name": "default",
-              "text": "true"
+              "text": "false"
             }
           ],
-          "default": "true",
+          "default": "false",
           "values": [
             {
               "type": "boolean"

package/dist/mcp-data/registry/banner.json

@@ -61,7 +61,8 @@
       "responsiveBehavior": [
         "Applications select orientation explicitly. Horizontal keeps copy and actions in one row, with actions top-aligned to dismissal. Vertical puts actions below copy on the 16px text boundary and keeps controls 16px above the bottom boundary; without actions it reserves no trailing row and keeps the copy visually balanced between the top and bottom edges.",
         "When placed in ShellApp's banner slot, the banner spans the complete application above navigation, workspace, and tools.",
-        "ShellApp reserves the mobile top safe area once above the banner and keeps the banner visible while mobile tools or navigation surfaces replace the routed stage."
+        "ShellApp reserves the mobile top safe area once above the banner and keeps the banner visible while mobile tools or navigation surfaces replace the routed stage.",
+        "A mobile shell banner paints a fixed top edge with its resolved background through exit motion. Color variants and theme changes follow the banner automatically; native Safari status-area tint remains a device-verified browser behavior."
       ],
       "frameworkCaveats": {
         "customElements": [
@@ -326,12 +327,12 @@
   "files": [
     {
       "path": "src/wc/components/Banner/Banner.css",
-      "content": "@import '../../utils/forced-colors.css';\n@import '../../utils/chrome-header.css';\n\n:host {\n  display: grid;\n  overflow: hidden;\n  min-width: 0;\n  grid-template-rows: 1fr;\n  transition: grid-template-rows var(--effect-animation-duration-short-3)\n    var(--_banner-motion-easing);\n\n  --ds-banner-background: var(--color-background-faint-neutral);\n  --ds-banner-heading: var(--color-foreground-primary);\n  --ds-banner-description: var(--color-foreground-secondary);\n  --ds-banner-border: var(--color-border-tertiary);\n  --_banner-motion-easing: var(--effect-animation-easing-ease-in-out, ease);\n  --_banner-surface-translate: 0%;\n}\n\n:host(.banner--open) {\n  --_banner-motion-easing: var(--effect-animation-easing-ease-out, ease-out);\n}\n\n:host(.banner--closing) {\n  --_banner-motion-easing: var(--effect-animation-easing-ease-in, ease-in);\n  --_banner-surface-translate: -100%;\n  grid-template-rows: 0fr;\n}\n\n:host(.banner--hidden) {\n  --_banner-surface-translate: -100%;\n\n  display: none;\n  visibility: hidden;\n  grid-template-rows: 0fr;\n}\n\n.banner-overflow {\n  min-height: 0;\n  overflow: visible;\n}\n\n.banner-surface {\n  display: flex;\n  position: relative;\n  width: 100%;\n  padding-inline-end: calc(var(--dimension-size-400) + var(--dimension-space-200));\n  color: var(--ds-banner-description);\n  background-color: var(--ds-banner-background);\n  border-bottom: var(--dimension-stroke-width-012) solid var(--ds-banner-border);\n  transform: translateY(var(--_banner-surface-translate));\n  transition: transform var(--effect-animation-duration-short-3) var(--_banner-motion-easing);\n}\n\n@starting-style {\n  :host(.banner--open) {\n    grid-template-rows: 0fr;\n  }\n\n  :host(.banner--open) .banner-surface {\n    transform: translateY(-100%);\n  }\n}\n\n.banner-copy {\n  flex-basis: var(--dimension-card-width-sm);\n}\n\n:host(.banner--orientation-horizontal) .banner-surface {\n  flex-wrap: nowrap;\n}\n\n:host(.banner--orientation-vertical) .banner-copy {\n  flex-basis: 100%;\n}\n\n.banner-copy-flow {\n  box-sizing: border-box;\n  min-width: 0;\n  padding-inline: var(--ds-control-label-inset, var(--dimension-space-025));\n  color: var(--ds-banner-description);\n}\n\n.banner-heading {\n  display: inline-block;\n  width: auto;\n  max-width: 100%;\n  margin-inline-end: var(--dimension-space-100);\n  vertical-align: baseline;\n  color: var(--ds-banner-heading);\n}\n\n.banner-description {\n  color: var(--ds-banner-description);\n}\n\n.banner-actions {\n  display: flex;\n  align-items: center;\n  flex: 0 0 auto;\n  flex-wrap: nowrap;\n  min-width: 0;\n  gap: var(--dimension-space-100);\n}\n\n.banner-actions slot {\n  display: contents;\n}\n\n.banner-actions ::slotted(:not(ds-button-unfilled)),\n.banner-actions ::slotted(ds-button-unfilled:nth-of-type(n + 3)) {\n  display: none;\n}\n\n.banner-actions--empty {\n  display: none;\n}\n\n.banner-trailing {\n  align-self: flex-start;\n  flex-wrap: nowrap;\n}\n\n:host(.banner--orientation-vertical:not(.banner--has-actions)) .banner-trailing {\n  display: contents;\n}\n\n:host(.banner--orientation-vertical.banner--has-actions) .banner-trailing {\n  margin-inline: var(--dimension-space-100) auto;\n  padding-block-end: var(--dimension-space-100);\n  box-sizing: border-box;\n}\n\n:host(.banner--orientation-vertical) .banner-description {\n  display: block;\n}\n\n:host(.banner--orientation-vertical) .banner-heading + .banner-description {\n  margin-block-start: var(--dimension-space-050);\n}\n\n.banner-close {\n  flex: 0 0 auto;\n}\n\n.banner-dismiss {\n  position: absolute;\n  inset-block-start: var(--dimension-space-100);\n  inset-inline-end: var(--dimension-space-100);\n}\n\n:host(.banner--intent-neutral) {\n  --ds-banner-faint-background: var(--color-background-faint-neutral);\n}\n\n:host(.banner--intent-brand) {\n  --ds-banner-faint-background: var(--color-background-faint-brand);\n}\n\n:host(.banner--intent-positive) {\n  --ds-banner-faint-background: var(--color-background-faint-positive);\n}\n\n:host(.banner--intent-warning) {\n  --ds-banner-faint-background: var(--color-background-faint-warning);\n}\n\n:host(.banner--intent-caution) {\n  --ds-banner-faint-background: var(--color-background-faint-caution);\n}\n\n:host(.banner--intent-negative) {\n  --ds-banner-faint-background: var(--color-background-faint-negative);\n}\n\n:host(.banner--contrast-faint) {\n  --ds-banner-background: var(--ds-banner-faint-background);\n  --ds-banner-heading: var(--color-foreground-primary);\n  --ds-banner-description: var(--color-foreground-secondary);\n  --ds-banner-border: var(--color-border-tertiary);\n}\n\n:host(.banner--contrast-medium) {\n  --ds-banner-background: var(--color-background-medium-neutral);\n  --ds-banner-heading: var(--color-foreground-on-medium-background-primary);\n  --ds-banner-description: var(--color-foreground-on-medium-background-secondary);\n  --ds-banner-border: var(--color-border-on-medium-background-tertiary);\n}\n\n:host(.banner--intent-brand.banner--contrast-medium) {\n  --ds-banner-background: var(--color-background-medium-brand);\n}\n:host(.banner--intent-positive.banner--contrast-medium) {\n  --ds-banner-background: var(--color-background-medium-positive);\n}\n:host(.banner--intent-warning.banner--contrast-medium) {\n  --ds-banner-background: var(--color-background-medium-warning);\n}\n:host(.banner--intent-caution.banner--contrast-medium) {\n  --ds-banner-background: var(--color-background-medium-caution);\n}\n:host(.banner--intent-negative.banner--contrast-medium) {\n  --ds-banner-background: var(--color-background-medium-negative);\n}\n\n:host(.banner--contrast-strong) {\n  --ds-banner-background: var(--color-background-strong-neutral);\n  --ds-banner-heading: var(--color-foreground-on-strong-background-primary);\n  --ds-banner-description: var(--color-foreground-on-strong-background-secondary);\n  --ds-banner-border: var(--color-border-on-strong-background-tertiary);\n}\n\n:host(.banner--intent-brand.banner--contrast-strong) {\n  --ds-banner-background: var(--color-background-strong-brand);\n}\n:host(.banner--intent-positive.banner--contrast-strong) {\n  --ds-banner-background: var(--color-background-strong-positive);\n}\n:host(.banner--intent-warning.banner--contrast-strong) {\n  --ds-banner-background: var(--color-background-strong-warning);\n}\n:host(.banner--intent-caution.banner--contrast-strong) {\n  --ds-banner-background: var(--color-background-strong-caution);\n}\n:host(.banner--intent-negative.banner--contrast-strong) {\n  --ds-banner-background: var(--color-background-strong-negative);\n}\n\n:host(.banner--contrast-bold) {\n  --ds-banner-background: var(--color-background-bold-neutral);\n  --ds-banner-heading: var(--color-foreground-on-bold-background-primary);\n  --ds-banner-description: var(--color-foreground-on-bold-background-secondary);\n  --ds-banner-border: var(--color-border-on-bold-background-tertiary);\n}\n\n:host(.banner--intent-brand.banner--contrast-bold) {\n  --ds-banner-background: var(--color-background-bold-brand);\n}\n:host(.banner--intent-positive.banner--contrast-bold) {\n  --ds-banner-background: var(--color-background-bold-positive);\n}\n:host(.banner--intent-warning.banner--contrast-bold) {\n  --ds-banner-background: var(--color-background-bold-warning);\n}\n:host(.banner--intent-caution.banner--contrast-bold) {\n  --ds-banner-background: var(--color-background-bold-caution);\n}\n:host(.banner--intent-negative.banner--contrast-bold) {\n  --ds-banner-background: var(--color-background-bold-negative);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host,\n  .banner-surface {\n    transition: none;\n  }\n}\n\n@media (forced-colors: active) {\n  .banner-surface {\n    color: var(--ds-forced-color-content);\n    background-color: var(--ds-forced-color-surface);\n    border-bottom-color: var(--ds-forced-color-content);\n  }\n\n  .banner-heading,\n  .banner-description {\n    color: var(--ds-forced-color-content);\n  }\n}\n",
+      "content": "@import '../../utils/forced-colors.css';\n@import '../../utils/chrome-header.css';\n\n:host {\n  display: grid;\n  overflow: hidden;\n  min-width: 0;\n  grid-template-rows: 1fr;\n  transition: grid-template-rows var(--effect-animation-duration-short-3)\n    var(--_banner-motion-easing);\n\n  --ds-banner-background: var(--color-background-faint-neutral);\n  --ds-banner-heading: var(--color-foreground-primary);\n  --ds-banner-description: var(--color-foreground-secondary);\n  --ds-banner-border: var(--color-border-tertiary);\n  --_banner-motion-easing: var(--effect-animation-easing-ease-in-out, ease);\n  --_banner-surface-translate: 0%;\n}\n\n:host(.banner--open) {\n  --_banner-motion-easing: var(--effect-animation-easing-ease-out, ease-out);\n}\n\n:host(.banner--closing) {\n  --_banner-motion-easing: var(--effect-animation-easing-ease-in, ease-in);\n  --_banner-surface-translate: -100%;\n  grid-template-rows: 0fr;\n}\n\n:host(.banner--hidden) {\n  --_banner-surface-translate: -100%;\n\n  display: none;\n  visibility: hidden;\n  grid-template-rows: 0fr;\n}\n\n.banner-overflow {\n  min-height: 0;\n  overflow: visible;\n}\n\n/* ShellApp enables this surface only in its mobile banner lane. Keep it outside\n * the translated copy surface so fixed positioning stays viewport-owned. */\n.banner-browser-edge {\n  display: none;\n  position: fixed;\n  inset: 0 0 auto;\n  height: max(var(--dimension-space-200), env(safe-area-inset-top, 0px));\n  pointer-events: none;\n  background-color: var(--ds-banner-background);\n}\n\n:host(.banner--open) .banner-browser-edge,\n:host(.banner--closing) .banner-browser-edge {\n  display: var(--_shell-banner-edge-display, none);\n}\n\n.banner-surface {\n  display: flex;\n  position: relative;\n  width: 100%;\n  padding-inline-end: calc(var(--dimension-size-400) + var(--dimension-space-200));\n  color: var(--ds-banner-description);\n  background-color: var(--ds-banner-background);\n  border-bottom: var(--dimension-stroke-width-012) solid var(--ds-banner-border);\n  transform: translateY(var(--_banner-surface-translate));\n  transition: transform var(--effect-animation-duration-short-3) var(--_banner-motion-easing);\n}\n\n@starting-style {\n  :host(.banner--open) {\n    grid-template-rows: 0fr;\n  }\n\n  :host(.banner--open) .banner-surface {\n    transform: translateY(-100%);\n  }\n}\n\n.banner-copy {\n  flex-basis: var(--dimension-card-width-sm);\n}\n\n:host(.banner--orientation-horizontal) .banner-surface {\n  flex-wrap: nowrap;\n}\n\n:host(.banner--orientation-vertical) .banner-copy {\n  flex-basis: 100%;\n}\n\n.banner-copy-flow {\n  box-sizing: border-box;\n  min-width: 0;\n  padding-inline: var(--ds-control-label-inset, var(--dimension-space-025));\n  color: var(--ds-banner-description);\n}\n\n.banner-heading {\n  display: inline-block;\n  width: auto;\n  max-width: 100%;\n  margin-inline-end: var(--dimension-space-100);\n  vertical-align: baseline;\n  color: var(--ds-banner-heading);\n}\n\n.banner-description {\n  color: var(--ds-banner-description);\n}\n\n.banner-actions {\n  display: flex;\n  align-items: center;\n  flex: 0 0 auto;\n  flex-wrap: nowrap;\n  min-width: 0;\n  gap: var(--dimension-space-100);\n}\n\n.banner-actions slot {\n  display: contents;\n}\n\n.banner-actions ::slotted(:not(ds-button-unfilled)),\n.banner-actions ::slotted(ds-button-unfilled:nth-of-type(n + 3)) {\n  display: none;\n}\n\n.banner-actions--empty {\n  display: none;\n}\n\n.banner-trailing {\n  align-self: flex-start;\n  flex-wrap: nowrap;\n}\n\n:host(.banner--orientation-vertical:not(.banner--has-actions)) .banner-trailing {\n  display: contents;\n}\n\n:host(.banner--orientation-vertical.banner--has-actions) .banner-trailing {\n  margin-inline: var(--dimension-space-100) auto;\n  padding-block-end: var(--dimension-space-100);\n  box-sizing: border-box;\n}\n\n:host(.banner--orientation-vertical) .banner-description {\n  display: block;\n}\n\n:host(.banner--orientation-vertical) .banner-heading + .banner-description {\n  margin-block-start: var(--dimension-space-050);\n}\n\n.banner-close {\n  flex: 0 0 auto;\n}\n\n.banner-dismiss {\n  position: absolute;\n  inset-block-start: var(--dimension-space-100);\n  inset-inline-end: var(--dimension-space-100);\n}\n\n:host(.banner--intent-neutral) {\n  --ds-banner-faint-background: var(--color-background-faint-neutral);\n}\n\n:host(.banner--intent-brand) {\n  --ds-banner-faint-background: var(--color-background-faint-brand);\n}\n\n:host(.banner--intent-positive) {\n  --ds-banner-faint-background: var(--color-background-faint-positive);\n}\n\n:host(.banner--intent-warning) {\n  --ds-banner-faint-background: var(--color-background-faint-warning);\n}\n\n:host(.banner--intent-caution) {\n  --ds-banner-faint-background: var(--color-background-faint-caution);\n}\n\n:host(.banner--intent-negative) {\n  --ds-banner-faint-background: var(--color-background-faint-negative);\n}\n\n:host(.banner--contrast-faint) {\n  --ds-banner-background: var(--ds-banner-faint-background);\n  --ds-banner-heading: var(--color-foreground-primary);\n  --ds-banner-description: var(--color-foreground-secondary);\n  --ds-banner-border: var(--color-border-tertiary);\n}\n\n:host(.banner--contrast-medium) {\n  --ds-banner-background: var(--color-background-medium-neutral);\n  --ds-banner-heading: var(--color-foreground-on-medium-background-primary);\n  --ds-banner-description: var(--color-foreground-on-medium-background-secondary);\n  --ds-banner-border: var(--color-border-on-medium-background-tertiary);\n}\n\n:host(.banner--intent-brand.banner--contrast-medium) {\n  --ds-banner-background: var(--color-background-medium-brand);\n}\n:host(.banner--intent-positive.banner--contrast-medium) {\n  --ds-banner-background: var(--color-background-medium-positive);\n}\n:host(.banner--intent-warning.banner--contrast-medium) {\n  --ds-banner-background: var(--color-background-medium-warning);\n}\n:host(.banner--intent-caution.banner--contrast-medium) {\n  --ds-banner-background: var(--color-background-medium-caution);\n}\n:host(.banner--intent-negative.banner--contrast-medium) {\n  --ds-banner-background: var(--color-background-medium-negative);\n}\n\n:host(.banner--contrast-strong) {\n  --ds-banner-background: var(--color-background-strong-neutral);\n  --ds-banner-heading: var(--color-foreground-on-strong-background-primary);\n  --ds-banner-description: var(--color-foreground-on-strong-background-secondary);\n  --ds-banner-border: var(--color-border-on-strong-background-tertiary);\n}\n\n:host(.banner--intent-brand.banner--contrast-strong) {\n  --ds-banner-background: var(--color-background-strong-brand);\n}\n:host(.banner--intent-positive.banner--contrast-strong) {\n  --ds-banner-background: var(--color-background-strong-positive);\n}\n:host(.banner--intent-warning.banner--contrast-strong) {\n  --ds-banner-background: var(--color-background-strong-warning);\n}\n:host(.banner--intent-caution.banner--contrast-strong) {\n  --ds-banner-background: var(--color-background-strong-caution);\n}\n:host(.banner--intent-negative.banner--contrast-strong) {\n  --ds-banner-background: var(--color-background-strong-negative);\n}\n\n:host(.banner--contrast-bold) {\n  --ds-banner-background: var(--color-background-bold-neutral);\n  --ds-banner-heading: var(--color-foreground-on-bold-background-primary);\n  --ds-banner-description: var(--color-foreground-on-bold-background-secondary);\n  --ds-banner-border: var(--color-border-on-bold-background-tertiary);\n}\n\n:host(.banner--intent-brand.banner--contrast-bold) {\n  --ds-banner-background: var(--color-background-bold-brand);\n}\n:host(.banner--intent-positive.banner--contrast-bold) {\n  --ds-banner-background: var(--color-background-bold-positive);\n}\n:host(.banner--intent-warning.banner--contrast-bold) {\n  --ds-banner-background: var(--color-background-bold-warning);\n}\n:host(.banner--intent-caution.banner--contrast-bold) {\n  --ds-banner-background: var(--color-background-bold-caution);\n}\n:host(.banner--intent-negative.banner--contrast-bold) {\n  --ds-banner-background: var(--color-background-bold-negative);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host,\n  .banner-surface {\n    transition: none;\n  }\n}\n\n@media (forced-colors: active) {\n  .banner-browser-edge {\n    background-color: var(--ds-forced-color-surface);\n  }\n\n  .banner-surface {\n    color: var(--ds-forced-color-content);\n    background-color: var(--ds-forced-color-surface);\n    border-bottom-color: var(--ds-forced-color-content);\n  }\n\n  .banner-heading,\n  .banner-description {\n    color: var(--ds-forced-color-content);\n  }\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/Banner/Banner.tsx",
-      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { resolveMotionTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nexport type BannerIntent = 'neutral' | 'brand' | 'positive' | 'warning' | 'caution' | 'negative';\n\nexport type BannerContrast = 'faint' | 'medium' | 'strong' | 'bold';\nexport type BannerAnnouncement = 'none' | 'polite' | 'assertive';\nexport type BannerOrientation = 'horizontal' | 'vertical';\n\ntype BannerPhase = 'closed' | 'open' | 'closing';\n\n@Component({\n  tag: 'ds-banner',\n  styleUrl: 'Banner.css',\n  scoped: true,\n})\nexport class Banner {\n  @Element() el!: HTMLElement;\n\n  /** Required explanatory copy. */\n  @Prop() description!: string;\n  /** Optional visual heading rendered before the description. */\n  @Prop() heading: string = '';\n  /** Semantic color family. */\n  @Prop({ reflect: true }) intent: BannerIntent = 'neutral';\n  /** Surface fill weight. */\n  @Prop({ reflect: true }) contrast: BannerContrast = 'faint';\n  /** Copy and action-lane arrangement, selected by the application. */\n  @Prop({ reflect: true }) orientation: BannerOrientation = 'horizontal';\n  /** Controlled visibility. Keep the element mounted until dsAfterClose when unmounting. */\n  @Prop({ reflect: true }) open: boolean = true;\n  /** Localized accessible label for the close control. */\n  @Prop() dismissLabel: string = 'Dismiss banner';\n  /** Live-region urgency, independent of visual intent. */\n  @Prop() announcement: BannerAnnouncement = 'none';\n\n  /** Emitted when the close control requests dismissal. The application controls open. */\n  @Event() dsClose!: EventEmitter<MouseEvent>;\n  /** Emitted once after controlled exit motion and layout collapse complete. */\n  @Event() dsAfterClose!: EventEmitter<void>;\n\n  @State() private rendered = false;\n  @State() private phase: BannerPhase = 'closed';\n  @State() private hasActions = false;\n\n  private loaded = false;\n  private transitionTimer: ReturnType<typeof setTimeout> | null = null;\n  private closePending = false;\n\n  componentWillLoad() {\n    this.rendered = this.open;\n    this.phase = this.open ? 'open' : 'closed';\n  }\n\n  componentDidLoad() {\n    this.loaded = true;\n    this.updateActionsPresence();\n  }\n\n  disconnectedCallback() {\n    this.clearTransitionWork();\n  }\n\n  @Watch('open')\n  onOpenChange(isOpen: boolean) {\n    if (!this.loaded) return;\n    if (isOpen) this.startOpen();\n    else this.startClose();\n  }\n\n  private get closeMotionMs(): number {\n    return resolveMotionTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);\n  }\n\n  private clearTransitionWork() {\n    if (this.transitionTimer) clearTimeout(this.transitionTimer);\n    this.transitionTimer = null;\n  }\n\n  private startOpen() {\n    this.clearTransitionWork();\n    this.closePending = false;\n    this.rendered = true;\n    this.phase = 'open';\n  }\n\n  private startClose() {\n    this.clearTransitionWork();\n    if (!this.rendered || this.phase === 'closed') {\n      this.rendered = false;\n      return;\n    }\n\n    this.closePending = true;\n    this.phase = 'closing';\n    const duration = this.closeMotionMs;\n    if (duration <= 0) {\n      this.finishClose();\n      return;\n    }\n    this.transitionTimer = setTimeout(() => {\n      this.transitionTimer = null;\n      this.finishClose();\n    }, duration);\n  }\n\n  private finishClose() {\n    if (this.open || !this.closePending) return;\n    this.closePending = false;\n    this.rendered = false;\n    this.phase = 'closed';\n    this.dsAfterClose.emit();\n  }\n\n  private updateActionsPresence(slot?: HTMLSlotElement) {\n    const actions = slot\n      ? slot.assignedElements().filter(element => element.tagName === 'DS-BUTTON-UNFILLED')\n      : Array.from(this.el.querySelectorAll('ds-button-unfilled[slot=\"actions\"]'));\n    this.hasActions = actions.length > 0;\n  }\n\n  private requestClose(event: CustomEvent<MouseEvent>) {\n    if (!this.open || this.phase === 'closing') return;\n    this.dsClose.emit(event.detail);\n  }\n\n  private get role(): 'status' | 'alert' | undefined {\n    if (this.announcement === 'polite') return 'status';\n    if (this.announcement === 'assertive') return 'alert';\n    return undefined;\n  }\n\n  private get ariaLive(): 'polite' | 'assertive' | undefined {\n    return this.announcement === 'none' ? undefined : this.announcement;\n  }\n\n  render() {\n    const closing = this.phase === 'closing';\n    const hostClass = {\n      banner: true,\n      'banner--open': this.phase === 'open',\n      'banner--closing': closing,\n      'banner--hidden': !this.rendered,\n      'banner--has-actions': this.hasActions,\n      [`banner--orientation-${this.orientation}`]: true,\n      [`banner--intent-${this.intent}`]: true,\n      [`banner--contrast-${this.contrast}`]: true,\n    };\n\n    return (\n      <Host class={hostClass}>\n        <div class=\"banner-overflow\">\n          <section\n            class=\"banner-surface ds-chrome-header ds-chrome-header--wrapping\"\n            role={this.role}\n            aria-live={this.ariaLive}\n            aria-atomic={this.announcement === 'none' ? undefined : 'true'}\n            aria-hidden={closing ? 'true' : undefined}\n            inert={closing ? true : undefined}\n            data-phase={this.phase}\n          >\n            {/* eslint-disable-next-line local/prefer-direct-ds-text -- The header-copy lane owns the 6px container inset separately from the inline text flow's 2px inset. */}\n            <div class=\"banner-copy ds-chrome-header__copy ds-chrome-header__copy--wrapping ds-control--md\">\n              <ds-text class=\"banner-copy-flow\" as=\"div\" variant=\"text-body-medium\" color=\"inherit\">\n                {this.heading && (\n                  <ds-text\n                    class=\"banner-heading\"\n                    as=\"span\"\n                    variant=\"text-title-small\"\n                    color=\"inherit\"\n                  >\n                    {this.heading}\n                  </ds-text>\n                )}\n                <span class=\"banner-description\">{this.description}</span>\n              </ds-text>\n            </div>\n            <div class=\"banner-trailing ds-chrome-header__trailing\">\n              <div class={{ 'banner-actions': true, 'banner-actions--empty': !this.hasActions }}>\n                <slot\n                  name=\"actions\"\n                  onSlotchange={(event: Event) =>\n                    this.updateActionsPresence(event.currentTarget as HTMLSlotElement)\n                  }\n                />\n              </div>\n              <div class=\"banner-dismiss\">\n                <ds-tooltip label={this.dismissLabel} side=\"bottom\" size=\"sm\">\n                  <ds-button-unfilled\n                    class=\"banner-close\"\n                    variant=\"icon\"\n                    icon=\"Cross\"\n                    size=\"md\"\n                    type=\"button\"\n                    background={this.contrast}\n                    aria-label={this.dismissLabel}\n                    hasBorder={false}\n                    activeFill={false}\n                    onDsClick={(event: CustomEvent<MouseEvent>) => this.requestClose(event)}\n                  />\n                </ds-tooltip>\n              </div>\n            </div>\n          </section>\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { resolveMotionTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nexport type BannerIntent = 'neutral' | 'brand' | 'positive' | 'warning' | 'caution' | 'negative';\n\nexport type BannerContrast = 'faint' | 'medium' | 'strong' | 'bold';\nexport type BannerAnnouncement = 'none' | 'polite' | 'assertive';\nexport type BannerOrientation = 'horizontal' | 'vertical';\n\ntype BannerPhase = 'closed' | 'open' | 'closing';\n\n@Component({\n  tag: 'ds-banner',\n  styleUrl: 'Banner.css',\n  scoped: true,\n})\nexport class Banner {\n  @Element() el!: HTMLElement;\n\n  /** Required explanatory copy. */\n  @Prop() description!: string;\n  /** Optional visual heading rendered before the description. */\n  @Prop() heading: string = '';\n  /** Semantic color family. */\n  @Prop({ reflect: true }) intent: BannerIntent = 'neutral';\n  /** Surface fill weight. */\n  @Prop({ reflect: true }) contrast: BannerContrast = 'faint';\n  /** Copy and action-lane arrangement, selected by the application. */\n  @Prop({ reflect: true }) orientation: BannerOrientation = 'horizontal';\n  /** Controlled visibility. Keep the element mounted until dsAfterClose when unmounting. */\n  @Prop({ reflect: true }) open: boolean = true;\n  /** Localized accessible label for the close control. */\n  @Prop() dismissLabel: string = 'Dismiss banner';\n  /** Live-region urgency, independent of visual intent. */\n  @Prop() announcement: BannerAnnouncement = 'none';\n\n  /** Emitted when the close control requests dismissal. The application controls open. */\n  @Event() dsClose!: EventEmitter<MouseEvent>;\n  /** Emitted once after controlled exit motion and layout collapse complete. */\n  @Event() dsAfterClose!: EventEmitter<void>;\n\n  @State() private rendered = false;\n  @State() private phase: BannerPhase = 'closed';\n  @State() private hasActions = false;\n\n  private loaded = false;\n  private transitionTimer: ReturnType<typeof setTimeout> | null = null;\n  private closePending = false;\n\n  componentWillLoad() {\n    this.rendered = this.open;\n    this.phase = this.open ? 'open' : 'closed';\n  }\n\n  componentDidLoad() {\n    this.loaded = true;\n    this.updateActionsPresence();\n  }\n\n  disconnectedCallback() {\n    this.clearTransitionWork();\n  }\n\n  @Watch('open')\n  onOpenChange(isOpen: boolean) {\n    if (!this.loaded) return;\n    if (isOpen) this.startOpen();\n    else this.startClose();\n  }\n\n  private get closeMotionMs(): number {\n    return resolveMotionTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);\n  }\n\n  private clearTransitionWork() {\n    if (this.transitionTimer) clearTimeout(this.transitionTimer);\n    this.transitionTimer = null;\n  }\n\n  private startOpen() {\n    this.clearTransitionWork();\n    this.closePending = false;\n    this.rendered = true;\n    this.phase = 'open';\n  }\n\n  private startClose() {\n    this.clearTransitionWork();\n    if (!this.rendered || this.phase === 'closed') {\n      this.rendered = false;\n      return;\n    }\n\n    this.closePending = true;\n    this.phase = 'closing';\n    const duration = this.closeMotionMs;\n    if (duration <= 0) {\n      this.finishClose();\n      return;\n    }\n    this.transitionTimer = setTimeout(() => {\n      this.transitionTimer = null;\n      this.finishClose();\n    }, duration);\n  }\n\n  private finishClose() {\n    if (this.open || !this.closePending) return;\n    this.closePending = false;\n    this.rendered = false;\n    this.phase = 'closed';\n    this.dsAfterClose.emit();\n  }\n\n  private updateActionsPresence(slot?: HTMLSlotElement) {\n    const actions = slot\n      ? slot.assignedElements().filter(element => element.tagName === 'DS-BUTTON-UNFILLED')\n      : Array.from(this.el.querySelectorAll('ds-button-unfilled[slot=\"actions\"]'));\n    this.hasActions = actions.length > 0;\n  }\n\n  private requestClose(event: CustomEvent<MouseEvent>) {\n    if (!this.open || this.phase === 'closing') return;\n    this.dsClose.emit(event.detail);\n  }\n\n  private get role(): 'status' | 'alert' | undefined {\n    if (this.announcement === 'polite') return 'status';\n    if (this.announcement === 'assertive') return 'alert';\n    return undefined;\n  }\n\n  private get ariaLive(): 'polite' | 'assertive' | undefined {\n    return this.announcement === 'none' ? undefined : this.announcement;\n  }\n\n  render() {\n    const closing = this.phase === 'closing';\n    const hostClass = {\n      banner: true,\n      'banner--open': this.phase === 'open',\n      'banner--closing': closing,\n      'banner--hidden': !this.rendered,\n      'banner--has-actions': this.hasActions,\n      [`banner--orientation-${this.orientation}`]: true,\n      [`banner--intent-${this.intent}`]: true,\n      [`banner--contrast-${this.contrast}`]: true,\n    };\n\n    return (\n      <Host class={hostClass}>\n        <div class=\"banner-browser-edge\" aria-hidden=\"true\" />\n        <div class=\"banner-overflow\">\n          <section\n            class=\"banner-surface ds-chrome-header ds-chrome-header--wrapping\"\n            role={this.role}\n            aria-live={this.ariaLive}\n            aria-atomic={this.announcement === 'none' ? undefined : 'true'}\n            aria-hidden={closing ? 'true' : undefined}\n            inert={closing ? true : undefined}\n            data-phase={this.phase}\n          >\n            {/* eslint-disable-next-line local/prefer-direct-ds-text -- The header-copy lane owns the 6px container inset separately from the inline text flow's 2px inset. */}\n            <div class=\"banner-copy ds-chrome-header__copy ds-chrome-header__copy--wrapping ds-control--md\">\n              <ds-text class=\"banner-copy-flow\" as=\"div\" variant=\"text-body-medium\" color=\"inherit\">\n                {this.heading && (\n                  <ds-text\n                    class=\"banner-heading\"\n                    as=\"span\"\n                    variant=\"text-title-small\"\n                    color=\"inherit\"\n                  >\n                    {this.heading}\n                  </ds-text>\n                )}\n                <span class=\"banner-description\">{this.description}</span>\n              </ds-text>\n            </div>\n            <div class=\"banner-trailing ds-chrome-header__trailing\">\n              <div class={{ 'banner-actions': true, 'banner-actions--empty': !this.hasActions }}>\n                <slot\n                  name=\"actions\"\n                  onSlotchange={(event: Event) =>\n                    this.updateActionsPresence(event.currentTarget as HTMLSlotElement)\n                  }\n                />\n              </div>\n              <div class=\"banner-dismiss\">\n                <ds-tooltip label={this.dismissLabel} side=\"bottom\" size=\"sm\">\n                  <ds-button-unfilled\n                    class=\"banner-close\"\n                    variant=\"icon\"\n                    icon=\"Cross\"\n                    size=\"md\"\n                    type=\"button\"\n                    background={this.contrast}\n                    aria-label={this.dismissLabel}\n                    hasBorder={false}\n                    activeFill={false}\n                    onDsClick={(event: CustomEvent<MouseEvent>) => this.requestClose(event)}\n                  />\n                </ds-tooltip>\n              </div>\n            </div>\n          </section>\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

package/dist/mcp-data/registry/registry.json

@@ -885,7 +885,8 @@
           "responsiveBehavior": [
             "Applications select orientation explicitly. Horizontal keeps copy and actions in one row, with actions top-aligned to dismissal. Vertical puts actions below copy on the 16px text boundary and keeps controls 16px above the bottom boundary; without actions it reserves no trailing row and keeps the copy visually balanced between the top and bottom edges.",
             "When placed in ShellApp's banner slot, the banner spans the complete application above navigation, workspace, and tools.",
-            "ShellApp reserves the mobile top safe area once above the banner and keeps the banner visible while mobile tools or navigation surfaces replace the routed stage."
+            "ShellApp reserves the mobile top safe area once above the banner and keeps the banner visible while mobile tools or navigation surfaces replace the routed stage.",
+            "A mobile shell banner paints a fixed top edge with its resolved background through exit motion. Color variants and theme changes follow the banner automatically; native Safari status-area tint remains a device-verified browser behavior."
           ],
           "frameworkCaveats": {
             "customElements": [
@@ -8075,6 +8076,7 @@
             "Use errorMessage with error so the trigger is described by the rendered alert."
           ],
           "states": [
+            "Selected trigger foreground communicates the current value independently of fill. Opt into activeFill when the trigger needs additional selected emphasis; popup option selection keeps its own treatment.",
             "The multiple property changes cardinality without changing the component family: scalar mode selects and closes, while multiple mode toggles array values and keeps the popup open.",
             "Every size applies one complete control-density recipe across trigger height, inline padding, icon zones, text-container inset, gap, and radius; error content follows the shared 4px field flow.",
             "Value is controlled through the mutable value property as a string in scalar mode or a string array in multiple mode; dsChange reports the matching shape.",
@@ -8453,7 +8455,8 @@
             "Paper texture chrome is desktop/tablet-only and follows the fixed viewport phase of the shell chrome; mobile remains a solid primary stage.",
             "Managed page-header capacity follows only the fixed shell breakpoint: roomy on desktop and compact on tablet. Opening PanelTools does not compact or constrain BarTitle.",
             "Mobile keeps at most the first eligible ordered icon command visible and moves labeled buttons, menu choices, split actions, and explicit overflow commands into one shell-owned text-only page-actions menu.",
-            "The bottom bar remains visible at all route and tool depths in the foundation release."
+            "The bottom bar remains visible at all route and tool depths in the foundation release.",
+            "A mobile shell banner paints a fixed top edge with its resolved background through exit motion. Color variants and theme changes follow the banner automatically; native Safari status-area tint remains a device-verified browser behavior."
           ],
           "frameworkCaveats": {
             "customElements": [

package/dist/mcp-data/registry/select.json

@@ -55,6 +55,7 @@
         "Use errorMessage with error so the trigger is described by the rendered alert."
       ],
       "states": [
+        "Selected trigger foreground communicates the current value independently of fill. Opt into activeFill when the trigger needs additional selected emphasis; popup option selection keeps its own treatment.",
         "The multiple property changes cardinality without changing the component family: scalar mode selects and closes, while multiple mode toggles array values and keeps the popup open.",
         "Every size applies one complete control-density recipe across trigger height, inline padding, icon zones, text-container inset, gap, and radius; error content follows the shared 4px field flow.",
         "Value is controlled through the mutable value property as a string in scalar mode or a string array in multiple mode; dsChange reports the matching shape.",
@@ -128,7 +129,7 @@
           "type": "boolean",
           "resolvedType": "boolean",
           "attribute": "active-fill",
-          "default": "true",
+          "default": "false",
           "required": false,
           "mutable": false,
           "description": "Show the selected interaction fill when a valid value exists."
@@ -526,7 +527,7 @@
         "type": "boolean",
         "resolvedType": "boolean",
         "attribute": "active-fill",
-        "default": "true",
+        "default": "false",
         "required": false,
         "mutable": false,
         "description": "Show the selected interaction fill when a valid value exists."
@@ -977,7 +978,7 @@
     },
     {
       "path": "src/wc/components/Select/Select.tsx",
-      "content": "import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  type VNode,\n  Watch,\n} from '@stencil/core';\nimport {\n  controlWidthClass,\n  CONTROL_SUPPORTING_TEXT_VARIANT,\n  CONTROL_TEXT_VARIANT,\n  DEFAULT_REQUIRED_MESSAGE,\n  restoreStringArrayFormState,\n  restoreStringFormState,\n  setFormControlValue,\n  setRepeatedFormControlValue,\n  setRequiredValidity,\n  type ControlWidth,\n} from '../../utils';\nimport {\n  ChoiceActionFooter,\n  ChoiceFooter,\n  ChoiceOptionRow,\n  ChoiceSearch,\n} from '../../utils/choice-list-parts';\nimport {\n  choiceBackgroundClassMap,\n  choiceListUsesIcons,\n  choiceListUsesSubtext,\n  enabledChoiceIndexes,\n  filterChoiceSections,\n  flattenChoiceSections,\n  resolveChoiceSections,\n  type ChoiceBackground,\n  type ChoiceOption,\n  type ChoiceSection,\n} from '../../utils/choice-list';\nimport { SelectController } from '../../utils/select-controller';\nimport { observeTableCaptionCompact } from '../../utils/table-caption-compact';\n\nexport type SelectOption = ChoiceOption;\nexport type SelectSection = ChoiceSection;\nexport type SelectBackground = ChoiceBackground;\nexport type SelectSize = 'lg' | 'md' | 'sm' | 'xs';\nexport type SelectWidth = ControlWidth;\nexport type SelectPopupAlign = 'start' | 'end';\nexport type SelectValue = string | string[];\nexport type SelectIndicator = 'down' | 'up-down';\n\nexport interface SelectOptionActionDetail {\n  value: string;\n  anchorId: string;\n  originalEvent: MouseEvent;\n}\n\nexport interface SelectOptionSubtextActionDetail {\n  value: string;\n  actionValue: string;\n  originalEvent: MouseEvent;\n}\n\nconst ICON_SIZE: Record<SelectSize, 'lg' | 'md' | 'sm' | 'xs'> = {\n  lg: 'lg',\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\nconst OPTION_ACTION_SIZE: Record<SelectSize, 'md' | 'sm' | 'xs'> = {\n  lg: 'md',\n  md: 'sm',\n  sm: 'xs',\n  xs: 'xs',\n};\n\nlet selectId = 0;\n\n@Component({\n  tag: 'ds-select',\n  styleUrl: 'Select.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class Select {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Flat choices. Assign arrays through the JavaScript property. */\n  @Prop() options: SelectOption[] = [];\n  /** Grouped choices; takes precedence over options. Assign through JavaScript. */\n  @Prop() sections: SelectSection[] = [];\n  /** Enable independent multi-value selection while keeping the popup open. */\n  @Prop({ reflect: true }) multiple: boolean = false;\n  /** Selected scalar or array value according to `multiple`. */\n  @Prop({ mutable: true }) value: SelectValue = '';\n  /** Controlled popup visibility. */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n  /** Native form field name. */\n  @Prop({ reflect: true }) name: string | undefined;\n  /** Native disabled state. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Require one valid selected value. */\n  @Prop({ reflect: true }) required: boolean = false;\n  /** Validation message used when required is missing. */\n  @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n  /** Trigger text shown when no valid value is selected. */\n  @Prop() placeholder: string = 'Select';\n  /** Optional scalar-mode trigger text that does not change the selected option label. */\n  @Prop() triggerLabel: string | undefined;\n  /** Present triggerLabel with placeholder emphasis while preserving the selected value. */\n  @Prop() triggerLabelPlaceholder: boolean = false;\n  /** Show a supplemental notification dot beside the trigger label. */\n  @Prop() dot: boolean = false;\n  /** Control density. */\n  @Prop() size: SelectSize = 'md';\n  /** Width fit — hug content (default) or fill the parent. */\n  @Prop() width: SelectWidth = 'hug';\n  /** Align the popup's choice edge to the trigger start or end edge. */\n  @Prop() popupAlign: SelectPopupAlign = 'start';\n  /** Explicit collision owner; otherwise the nearest data-ds-overlay-boundary ancestor is used. */\n  @Prop() boundary: HTMLElement | undefined;\n  /** Shared inactive treatment; removes interaction and form submission. */\n  @Prop() isInactive: boolean = false;\n  /** Replace the prefix with a loader and disable option interaction. */\n  @Prop() isLoading: boolean = false;\n  /** Show the selected interaction fill when a valid value exists. */\n  @Prop() activeFill: boolean = true;\n  /**\n   * Opt into table-caption icon-only chrome below 900px. The trigger omits its\n   * visible label and chevron; keep an accessible name via aria-label.\n   */\n  @Prop({ reflect: true }) collapseLabel: boolean = false;\n  /** Show the surface-aware inset border, including focused and invalid strokes. */\n  @Prop() hasBorder: boolean = true;\n  /** Optional trigger prefix icon name. */\n  @Prop() icon: string | undefined;\n  /** Trailing choice indicator. Use up-down for compact value steppers such as page size. */\n  @Prop() indicator: SelectIndicator = 'down';\n  /** Show the clear footer action when a value exists. */\n  @Prop() allowClear: boolean = true;\n  /** Localized clear action label. */\n  @Prop() clearLabel: string = 'Clear';\n  /** Localized noun displayed after the selected count in multiple mode. */\n  @Prop() selectedLabel: string = 'selected';\n  /** Optional text action shown in the popup footer instead of the clear action. */\n  @Prop() footerActionLabel: string | undefined;\n  /** Show immediate local filtering over option labels, subtext, and section headings. */\n  @Prop() searchable: boolean = false;\n  /** Localized search-field placeholder and accessible name. */\n  @Prop() searchPlaceholder: string = 'Search';\n  /** Localized empty-filter result text. */\n  @Prop() noResultsText: string = 'No results found';\n  /** Accessible loading status label. */\n  @Prop() loadingLabel: string = 'Loading';\n  /** Actual parent surface context; omit on primary and secondary surfaces. */\n  @Prop() background: SelectBackground | undefined;\n  /** Show invalid visual state. */\n  @Prop() error: boolean = false;\n  /** Error text rendered below the trigger when error is true. */\n  @Prop() errorMessage: string | undefined;\n  /** ID applied to the internal combobox trigger for external labels. */\n  @Prop() inputId: string | undefined;\n  /** Direct accessible name when no external label is available. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  /** IDs of elements that label the combobox. */\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n  /** Additional IDs that describe the combobox. */\n  @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n\n  /** Emitted after selection or clearing with the next scalar or array value. */\n  @Event() dsChange!: EventEmitter<SelectValue>;\n  /** Emitted after the footer clear action. */\n  @Event() dsClear!: EventEmitter<void>;\n  /** Emitted whenever popup visibility changes. */\n  @Event() dsOpenChange!: EventEmitter<boolean>;\n  /** Emitted when the optional popup footer action is activated. */\n  @Event() dsFooterAction!: EventEmitter<void>;\n  /** Emitted when an option's contextual ellipsis action is activated. */\n  @Event() dsOptionAction!: EventEmitter<SelectOptionActionDetail>;\n  /** Emitted when an option's supporting text action is activated. */\n  @Event() dsOptionSubtextAction!: EventEmitter<SelectOptionSubtextActionDetail>;\n\n  @State() private activeIndex = -1;\n  @State() private searchTerm = '';\n  @State() private formDisabled = false;\n  @State() private position = { x: 0, y: 0 };\n  @State() private positionReady = false;\n  @State() private focusRingVisible = false;\n  @State() private compactFooterSummary = false;\n  @State() private captionCompact = false;\n\n  private readonly generatedId = `ds-select-${++selectId}`;\n  private readonly listboxId = `${this.generatedId}-listbox`;\n  private readonly errorId = `${this.generatedId}-error`;\n  private initialValue: SelectValue = '';\n  private readonly controller = this.createController();\n  private footerContentElement?: HTMLDivElement;\n  private footerSummaryMeasureElement?: HTMLElement;\n  private footerClearElement?: HTMLButtonElement;\n  private footerResizeObserver?: ResizeObserver;\n  private observedFooterContentElement?: HTMLDivElement;\n  private footerMeasurementFrame?: number;\n  private captionCompactDisconnect: (() => void) | undefined;\n  private hasLoaded = false;\n\n  private createController() {\n    // eslint-disable-next-line @typescript-eslint/no-this-alias -- adapter getters preserve reactive component ownership without inheritance.\n    const owner = this;\n    return new SelectController<SelectOption>({\n      get host() {\n        return owner.el;\n      },\n      generatedId: owner.generatedId,\n      get options() {\n        return owner.visibleOptions;\n      },\n      get searchable() {\n        return owner.searchable;\n      },\n      get isLoading() {\n        return owner.isLoading;\n      },\n      get isDisabled() {\n        return owner.isDisabled;\n      },\n      get preferredIndex() {\n        if (owner.multiple) return -1;\n        return owner.visibleOptions.findIndex(\n          option => option.value === owner.scalarValue && !option.isInactive\n        );\n      },\n      get popupAlign() {\n        return owner.popupAlign;\n      },\n      get boundary() {\n        return owner.boundary;\n      },\n      get open() {\n        return owner.open;\n      },\n      set open(value) {\n        owner.open = value;\n      },\n      get activeIndex() {\n        return owner.activeIndex;\n      },\n      set activeIndex(value) {\n        owner.activeIndex = value;\n      },\n      get searchTerm() {\n        return owner.searchTerm;\n      },\n      set searchTerm(value) {\n        owner.searchTerm = value;\n      },\n      get focusRingVisible() {\n        return owner.focusRingVisible;\n      },\n      set focusRingVisible(value) {\n        owner.focusRingVisible = value;\n      },\n      get position() {\n        return owner.position;\n      },\n      set position(value) {\n        owner.position = value;\n      },\n      get positionReady() {\n        return owner.positionReady;\n      },\n      set positionReady(value) {\n        owner.positionReady = value;\n      },\n      selectOption: option => owner.selectOption(option),\n    });\n  }\n\n  componentWillLoad() {\n    this.value = this.normalizeValueForMode(this.value);\n    this.initialValue = Array.isArray(this.value) ? [...this.value] : this.value;\n    this.syncFormValue();\n  }\n\n  componentDidLoad() {\n    this.hasLoaded = true;\n    this.controller.connect();\n    this.observeFooterContent();\n    this.syncCaptionCompactObserver();\n  }\n\n  connectedCallback() {\n    if (!this.hasLoaded) return;\n    this.controller.connect();\n    this.observeFooterContent();\n    this.syncCaptionCompactObserver();\n  }\n\n  componentDidRender() {\n    this.observeFooterContent();\n    this.scheduleFooterSummaryMeasurement();\n  }\n\n  disconnectedCallback() {\n    this.controller.disconnect();\n    this.footerResizeObserver?.disconnect();\n    this.observedFooterContentElement = undefined;\n    if (this.footerMeasurementFrame !== undefined) {\n      cancelAnimationFrame(this.footerMeasurementFrame);\n      this.footerMeasurementFrame = undefined;\n    }\n    this.disconnectCaptionCompactObserver();\n  }\n\n  @Watch('collapseLabel')\n  onCollapseLabelChange() {\n    this.syncCaptionCompactObserver();\n  }\n\n  @Watch('value')\n  @Watch('multiple')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('required')\n  @Watch('name')\n  @Watch('options')\n  @Watch('sections')\n  syncFormValue() {\n    if (\n      (this.multiple && !Array.isArray(this.value)) ||\n      (!this.multiple && Array.isArray(this.value))\n    ) {\n      this.value = this.normalizeValueForMode(this.value);\n    }\n    const inactive = this.isDisabled;\n    if (this.multiple) {\n      const values = this.resolvedValues;\n      setRepeatedFormControlValue(this.internals, this.name, values, { inactive });\n    } else {\n      const value = this.hasSelection ? this.scalarValue : '';\n      setFormControlValue(this.internals, value, { inactive });\n    }\n    const missing = this.required && !inactive && !this.hasSelection;\n    setRequiredValidity(this.internals, missing, this.requiredMessage);\n    this.controller.optionsChanged();\n  }\n\n  @Watch('isLoading')\n  onLoadingChange() {\n    this.controller.loadingChanged();\n  }\n\n  @Watch('popupAlign')\n  @Watch('boundary')\n  onPopupAlignChange() {\n    this.controller.positionChanged();\n  }\n\n  @Watch('open')\n  onOpenChange(open: boolean) {\n    this.dsOpenChange.emit(open);\n    this.controller.openChanged(open);\n  }\n\n  @Watch('searchTerm')\n  onSearchTermChange() {\n    this.controller.searchChanged();\n  }\n\n  @Watch('activeIndex')\n  onActiveIndexChange() {\n    this.controller.activeIndexChanged();\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.value = this.normalizeValueForMode(this.initialValue);\n    this.closePopup();\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    if (!this.multiple) {\n      this.value = restoreStringFormState(state);\n      return;\n    }\n    this.value = restoreStringArrayFormState(state);\n  }\n\n  @Method()\n  async setFocus() {\n    this.controller.setFocus();\n  }\n\n  private get isDisabled(): boolean {\n    return this.disabled || this.isInactive || this.formDisabled;\n  }\n\n  private normalizeValueForMode(value: SelectValue): SelectValue {\n    if (this.multiple) {\n      return Array.isArray(value) ? [...value] : value ? [value] : [];\n    }\n    return Array.isArray(value) ? (value[0] ?? '') : value;\n  }\n\n  private get allSections(): SelectSection[] {\n    return resolveChoiceSections(this.options, this.sections);\n  }\n\n  private get allOptions(): SelectOption[] {\n    return flattenChoiceSections(this.allSections);\n  }\n\n  private get visibleSections(): SelectSection[] {\n    return this.searchable\n      ? filterChoiceSections(this.allSections, this.searchTerm)\n      : this.allSections;\n  }\n\n  private get visibleOptions(): SelectOption[] {\n    return flattenChoiceSections(this.visibleSections);\n  }\n\n  private get scalarValue(): string {\n    return typeof this.value === 'string' ? this.value : '';\n  }\n\n  private get resolvedValues(): string[] {\n    if (!this.multiple || !Array.isArray(this.value)) return [];\n    const valid = new Set(this.allOptions.map(option => option.value));\n    return [...new Set(this.value.filter(value => valid.has(value)))];\n  }\n\n  private get selectedOption(): SelectOption | undefined {\n    if (this.multiple) return undefined;\n    return this.allOptions.find(option => option.value === this.scalarValue);\n  }\n\n  private get hasSelection(): boolean {\n    return this.multiple ? this.resolvedValues.length > 0 : Boolean(this.selectedOption);\n  }\n\n  private get activeOptionId(): string | undefined {\n    return this.controller.activeOptionId;\n  }\n\n  private get popupRole(): 'listbox' | 'grid' {\n    return this.allOptions.some(option => Boolean(option.action)) ? 'grid' : 'listbox';\n  }\n\n  private observeFooterContent() {\n    const content =\n      this.open && this.multiple && this.hasSelection ? this.footerContentElement : undefined;\n    if (!content?.isConnected) {\n      this.footerResizeObserver?.disconnect();\n      this.observedFooterContentElement = undefined;\n      return;\n    }\n    if (this.observedFooterContentElement === content) return;\n\n    this.footerResizeObserver?.disconnect();\n    if (typeof ResizeObserver !== 'undefined') {\n      this.footerResizeObserver = new ResizeObserver(() => this.scheduleFooterSummaryMeasurement());\n      this.footerResizeObserver.observe(content);\n    }\n    this.observedFooterContentElement = content;\n  }\n\n  private scheduleFooterSummaryMeasurement() {\n    if (\n      !this.open ||\n      !this.multiple ||\n      !this.hasSelection ||\n      this.footerMeasurementFrame !== undefined\n    ) {\n      return;\n    }\n    this.footerMeasurementFrame = requestAnimationFrame(() => {\n      this.footerMeasurementFrame = undefined;\n      this.measureFooterSummary();\n    });\n  }\n\n  private measureFooterSummary() {\n    const content = this.footerContentElement;\n    const summary = this.footerSummaryMeasureElement;\n    const clear = this.footerClearElement;\n    if (!content?.isConnected || !summary?.isConnected || !clear?.isConnected) return;\n\n    const styles = getComputedStyle(content);\n    const innerWidth =\n      content.clientWidth -\n      Number.parseFloat(styles.paddingInlineStart || '0') -\n      Number.parseFloat(styles.paddingInlineEnd || '0');\n    const requiredWidth =\n      summary.getBoundingClientRect().width +\n      clear.getBoundingClientRect().width +\n      Number.parseFloat(styles.columnGap || '0');\n    const nextCompact = requiredWidth > innerWidth + 0.5;\n    if (nextCompact !== this.compactFooterSummary) {\n      this.compactFooterSummary = nextCompact;\n    }\n  }\n\n  private closePopup(restoreFocus = false) {\n    this.controller.closePopup(restoreFocus);\n  }\n\n  private openPopup(focusVisible: boolean, edge?: 'first' | 'last') {\n    this.controller.openPopup(focusVisible, edge);\n  }\n\n  private selectOption(option: SelectOption) {\n    if (option.isInactive || this.isLoading) return;\n    if (this.multiple) {\n      const current = this.resolvedValues;\n      const next = current.includes(option.value)\n        ? current.filter(value => value !== option.value)\n        : [...current, option.value];\n      this.value = next;\n      this.dsChange.emit([...next]);\n      return;\n    }\n    this.value = option.value;\n    this.dsChange.emit(option.value);\n    this.controller.closePopup(true);\n  }\n\n  private clearSelection = (event: Event) => {\n    event.preventDefault();\n    event.stopPropagation();\n    this.value = this.multiple ? [] : '';\n    this.dsChange.emit(this.multiple ? [] : '');\n    this.dsClear.emit();\n    if (!this.multiple) {\n      const enabled = enabledChoiceIndexes(this.visibleOptions);\n      this.activeIndex = enabled[0] ?? -1;\n    }\n    this.controller.focusSearchOrTrigger();\n  };\n\n  private activateFooterAction = (event: MouseEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    this.dsFooterAction.emit();\n    this.closePopup();\n  };\n\n  private readonly handleListKeyDown = this.controller.handleListKeyDown;\n  private readonly handleTriggerKeyDown = this.controller.handleTriggerKeyDown;\n\n  private renderOption(\n    option: SelectOption,\n    index: number,\n    usesIcons: boolean,\n    usesSubtext: boolean\n  ) {\n    const selected = this.multiple\n      ? this.resolvedValues.includes(option.value)\n      : option.value === this.scalarValue;\n    const active = index === this.activeIndex;\n    const actionId = `${this.generatedId}-option-action-${index}`;\n    return (\n      <ChoiceOptionRow\n        size={this.size}\n        id={`${this.generatedId}-option-${index}`}\n        option={option}\n        selected={selected}\n        active={active}\n        focusRingVisible={this.focusRingVisible}\n        usesSubtext={usesSubtext}\n        actionOpen={option.action?.surfaceOpen ?? option.action?.expanded}\n        popupRole={this.popupRole}\n        leading={\n          this.multiple ? (\n            <span\n              class=\"ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content\"\n              aria-hidden=\"true\"\n            >\n              <ds-checkbox\n                class=\"select-option__checkbox\"\n                label=\"\"\n                size={this.size}\n                checked={selected}\n                presentation\n              />\n            </span>\n          ) : usesIcons && option.icon ? (\n            <span\n              class=\"ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content\"\n              aria-hidden=\"true\"\n            >\n              <ds-icon name={option.icon} size={this.size} color=\"inherit\" />\n            </span>\n          ) : undefined\n        }\n        supporting={\n          option.subtextActions?.length ? (\n            <span class=\"ds-choice-item__subtext ds-control-label-box select-option__subtext-actions\">\n              {option.subtextActions.map((action, actionIndex) => [\n                actionIndex > 0 ? (\n                  <ds-text\n                    class=\"select-option__subtext-action-separator\"\n                    as=\"span\"\n                    variant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n                    color=\"inherit\"\n                    aria-hidden=\"true\"\n                  >\n                    ·\n                  </ds-text>\n                ) : null,\n                <button\n                  type=\"button\"\n                  class={{\n                    'select-option__subtext-action': true,\n                    'select-option__subtext-action--negative': action.tone === 'negative',\n                    'ds-text-action': true,\n                    'ds-focus-ring': true,\n                  }}\n                  onKeyDown={(event: KeyboardEvent) => event.stopPropagation()}\n                  onClick={(event: MouseEvent) => {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    this.dsOptionSubtextAction.emit({\n                      value: option.value,\n                      actionValue: action.value,\n                      originalEvent: event,\n                    });\n                  }}\n                >\n                  <ds-text\n                    as=\"span\"\n                    variant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n                    color=\"inherit\"\n                  >\n                    {action.label}\n                  </ds-text>\n                </button>,\n              ])}\n            </span>\n          ) : undefined\n        }\n        action={\n          option.action ? (\n            <ds-tooltip label={option.action.label} side=\"left\" size=\"sm\">\n              <ds-button-unfilled\n                id={actionId}\n                variant=\"icon\"\n                size={OPTION_ACTION_SIZE[this.size]}\n                icon=\"Ellipses\"\n                rounded\n                hasBorder={false}\n                activeFill={false}\n                ariaLabel={option.action.label}\n                haspopup=\"menu\"\n                controls={option.action.controls}\n                expanded={option.action.expanded}\n                surfaceOpen={option.action.surfaceOpen}\n                onKeyDown={event => {\n                  event.stopPropagation();\n                  if (event.key === 'Escape' || event.key === 'ArrowLeft') {\n                    event.preventDefault();\n                    this.controller.focusSearchOrTrigger();\n                  }\n                }}\n                onDsClick={(event: CustomEvent<MouseEvent>) => {\n                  event.stopPropagation();\n                  this.dsOptionAction.emit({\n                    value: option.value,\n                    anchorId: actionId,\n                    originalEvent: event.detail,\n                  });\n                }}\n              />\n            </ds-tooltip>\n          ) : undefined\n        }\n        onHover={() => {\n          this.focusRingVisible = false;\n          this.activeIndex = index;\n        }}\n        onSelect={() => this.selectOption(option)}\n      />\n    );\n  }\n\n  private get captionIconOnly(): boolean {\n    return this.collapseLabel && this.captionCompact && Boolean(this.icon || this.isLoading);\n  }\n\n  private syncCaptionCompactObserver(): void {\n    this.disconnectCaptionCompactObserver();\n    if (!this.collapseLabel) {\n      if (this.captionCompact) this.captionCompact = false;\n      return;\n    }\n    this.captionCompactDisconnect = observeTableCaptionCompact(this.el, compact => {\n      if (this.captionCompact !== compact) this.captionCompact = compact;\n    });\n  }\n\n  private disconnectCaptionCompactObserver(): void {\n    this.captionCompactDisconnect?.();\n    this.captionCompactDisconnect = undefined;\n  }\n\n  private renderCaptionTooltip(trigger: VNode, label: string): VNode {\n    if (!this.collapseLabel) return trigger;\n    return (\n      <ds-tooltip label={label} side=\"top\" size=\"sm\">\n        {trigger}\n      </ds-tooltip>\n    );\n  }\n\n  render() {\n    const inactive = this.isDisabled;\n    const showPlaceholder = !this.hasSelection;\n    const count = this.resolvedValues.length;\n    const label = this.multiple\n      ? `${this.placeholder}${count > 0 ? ` · ${count}` : ''}`\n      : showPlaceholder\n        ? this.placeholder\n        : (this.triggerLabel ?? this.selectedOption?.label);\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n    const usesOptionIcons = !this.multiple && choiceListUsesIcons(this.allOptions);\n    const usesOptionSubtext = choiceListUsesSubtext(this.allOptions);\n    const showError = this.error && Boolean(this.errorMessage);\n    const describedBy =\n      [this.ariaDescribedby, showError ? this.errorId : undefined].filter(Boolean).join(' ') ||\n      undefined;\n    const popupStyle = {\n      position: 'fixed',\n      left: '0',\n      top: '0',\n      transform: `translate(${Math.round(this.position.x)}px, ${Math.round(this.position.y)}px)`,\n      zIndex: 'var(--dimension-z-index-floating)',\n      visibility: this.positionReady ? 'visible' : 'hidden',\n    };\n    let flatIndex = 0;\n\n    return (\n      <Host\n        class={{\n          'select-host': true,\n          'ds-select-trigger-host': true,\n          'select-host--multiple': this.multiple,\n          'ds-field-stack': true,\n          'ds-control-inactive': inactive,\n          [`ds-control--${this.size}`]: true,\n          'ds-table-caption-control': this.collapseLabel,\n          'ds-table-caption-control--compact': this.captionIconOnly,\n          ...controlWidthClass(this.width),\n          [`select-host--background-${this.background}`]: !!this.background,\n          [`ds-select-trigger-host--background-${this.background}`]: !!this.background,\n        }}\n      >\n        {this.renderCaptionTooltip(\n          <button\n            ref={element => {\n              this.controller.setTriggerElement((element as HTMLButtonElement) ?? null);\n            }}\n            id={this.inputId ?? this.generatedId}\n            type=\"button\"\n            class={{\n              trigger: true,\n              'ds-control-frame': true,\n              'ds-focus-ring-inset': true,\n              'ds-interaction-fill': true,\n              'ds-interaction-fill--selected': !inactive && this.activeFill && this.hasSelection,\n              'trigger--expanded': !inactive && this.open,\n              'ds-interaction-fill--surface-open': !inactive && this.open,\n              'trigger--bordered': this.hasBorder,\n              'trigger--placeholder': showPlaceholder && !this.multiple,\n              'trigger--has-value': this.hasSelection,\n              'trigger--label-placeholder':\n                !this.multiple && Boolean(this.triggerLabel) && this.triggerLabelPlaceholder,\n              'wrapper--error': this.hasBorder && this.error,\n              [`ds-control--${this.size}`]: true,\n              ...choiceBackgroundClassMap(this.background),\n            }}\n            disabled={inactive}\n            role=\"combobox\"\n            aria-haspopup={this.popupRole}\n            aria-expanded={String(this.open)}\n            aria-controls={this.open ? this.listboxId : undefined}\n            aria-activedescendant={this.open && !this.searchable ? this.activeOptionId : undefined}\n            aria-label={this.ariaLabel ?? (this.captionIconOnly ? label : undefined)}\n            aria-labelledby={this.ariaLabelledby}\n            aria-describedby={describedBy}\n            aria-invalid={this.error ? 'true' : undefined}\n            aria-required={this.required || undefined}\n            aria-busy={this.isLoading ? 'true' : undefined}\n            onClick={() => (this.open ? this.closePopup() : this.openPopup(false))}\n            onKeyDown={event => {\n              const action = this.visibleOptions[this.activeIndex]?.action;\n              if (\n                this.open &&\n                action &&\n                (event.key === 'ArrowRight' || (event.key === 'F10' && event.shiftKey))\n              ) {\n                event.preventDefault();\n                document\n                  .getElementById(`${this.generatedId}-option-action-${this.activeIndex}`)\n                  ?.querySelector<HTMLElement>('button')\n                  ?.focus();\n                return;\n              }\n              this.handleTriggerKeyDown(event);\n            }}\n          >\n            {(this.icon || this.isLoading) && (\n              <span\n                class=\"trigger__prefix ds-control-icon-box ds-interaction-fill__content\"\n                aria-hidden=\"true\"\n              >\n                {this.isLoading ? (\n                  <ds-loader size={iconSize} color=\"inherit\" />\n                ) : (\n                  <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n                )}\n              </span>\n            )}\n            {this.captionIconOnly ? null : (\n              <span\n                class={{\n                  'trigger__label-box': true,\n                  'ds-interaction-fill__content': true,\n                }}\n              >\n                <span\n                  class={{\n                    'trigger__label-content': true,\n                    'ds-control-label-box': true,\n                    'ds-control-label-dot': this.dot,\n                    'trigger__label-content--dot': this.dot,\n                  }}\n                >\n                  <ds-text\n                    class=\"trigger__label\"\n                    as=\"span\"\n                    variant={textVariant}\n                    color=\"inherit\"\n                    lineTruncation={1}\n                  >\n                    {label}\n                  </ds-text>\n                  {this.dot && (\n                    <ds-badge\n                      class=\"trigger__dot ds-control-label-dot__badge\"\n                      variant=\"dot\"\n                      hasRing={false}\n                      label=\"\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                </span>\n              </span>\n            )}\n            {this.captionIconOnly ? null : (\n              <span\n                class=\"trigger__chevron ds-control-icon-box ds-interaction-fill__content\"\n                aria-hidden=\"true\"\n              >\n                <ds-icon\n                  name={this.indicator === 'up-down' ? 'ChevronUpDown' : 'ChevronDown'}\n                  size={iconSize}\n                  color=\"inherit\"\n                />\n              </span>\n            )}\n          </button>,\n          this.captionIconOnly ? this.ariaLabel?.trim() || this.placeholder : ''\n        )}\n\n        {this.open && (\n          <div\n            popover=\"manual\"\n            ref={element => {\n              this.controller.setPopupElement((element as HTMLDivElement) ?? null);\n            }}\n            class=\"select-popup ds-choice-popup\"\n            style={popupStyle}\n          >\n            {this.searchable && (\n              <ChoiceSearch\n                size={this.size}\n                value={this.searchTerm}\n                placeholder={this.searchPlaceholder}\n                controls={this.listboxId}\n                activeDescendant={this.activeOptionId}\n                inputRef={this.controller.setSearchElement}\n                clearLabel={this.clearLabel}\n                onValueChange={value => {\n                  this.searchTerm = value;\n                }}\n                onKeyDown={event => this.handleListKeyDown(event)}\n              />\n            )}\n            <div\n              id={this.listboxId}\n              class=\"ds-choice-list\"\n              role={this.popupRole}\n              aria-multiselectable={this.multiple ? 'true' : undefined}\n              aria-label={this.ariaLabel ?? this.placeholder}\n              aria-busy={this.isLoading ? 'true' : undefined}\n            >\n              {this.isLoading ? (\n                <div\n                  class=\"ds-choice-loading ds-empty-region\"\n                  role={this.popupRole === 'grid' ? 'row' : 'option'}\n                  aria-selected=\"false\"\n                  aria-disabled=\"true\"\n                  aria-label={this.loadingLabel}\n                  aria-live=\"polite\"\n                >\n                  {this.popupRole === 'grid' ? (\n                    <span role=\"gridcell\">\n                      <ds-loader size={this.size} color=\"inherit\" />\n                    </span>\n                  ) : (\n                    <ds-loader size={this.size} color=\"inherit\" />\n                  )}\n                </div>\n              ) : this.visibleOptions.length === 0 ? (\n                <div\n                  class=\"ds-choice-empty ds-empty-region\"\n                  role={this.popupRole === 'grid' ? 'row' : 'option'}\n                  aria-selected=\"false\"\n                  aria-disabled=\"true\"\n                  aria-label={this.noResultsText}\n                  aria-live=\"polite\"\n                >\n                  {this.popupRole === 'grid' ? (\n                    <span role=\"gridcell\">\n                      <ds-empty-state body={this.noResultsText} />\n                    </span>\n                  ) : (\n                    <ds-empty-state body={this.noResultsText} />\n                  )}\n                </div>\n              ) : (\n                this.visibleSections.map((section, sectionIndex) => (\n                  <div\n                    class={{\n                      'ds-choice-section': true,\n                      'ds-chrome-column': true,\n                      'ds-chrome-space--sm': true,\n                      'ds-choice-section--divided': !!section.divider,\n                      'ds-choice-section--headed-after-first':\n                        sectionIndex > 0 && Boolean(section.header),\n                    }}\n                    role={\n                      this.popupRole === 'grid' ? 'rowgroup' : section.header ? 'group' : undefined\n                    }\n                    aria-label={section.header}\n                  >\n                    {section.header && this.popupRole === 'grid' ? (\n                      <ds-text\n                        class={`ds-choice-section__header ds-control-section-heading ds-control--${this.size}`}\n                        as=\"span\"\n                        variant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n                        emphasis\n                        color=\"primary\"\n                        role=\"row\"\n                      >\n                        <span class=\"ds-choice-section__header-label\" role=\"gridcell\">\n                          {section.header}\n                        </span>\n                      </ds-text>\n                    ) : section.header ? (\n                      <ds-text\n                        class={`ds-choice-section__header ds-control-section-heading ds-control--${this.size}`}\n                        as=\"span\"\n                        variant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n                        emphasis\n                        color=\"primary\"\n                        aria-hidden=\"true\"\n                      >\n                        <span class=\"ds-choice-section__header-label\">{section.header}</span>\n                      </ds-text>\n                    ) : null}\n                    {section.options.map(option =>\n                      this.renderOption(option, flatIndex++, usesOptionIcons, usesOptionSubtext)\n                    )}\n                  </div>\n                ))\n              )}\n            </div>\n            {this.footerActionLabel && !this.isLoading ? (\n              <ChoiceActionFooter\n                size={this.size}\n                label={this.footerActionLabel}\n                onAction={this.activateFooterAction}\n              />\n            ) : this.allowClear && this.hasSelection && !this.isLoading ? (\n              <ChoiceFooter\n                size={this.size}\n                summary={this.multiple ? `${count} ${this.selectedLabel}` : undefined}\n                compactSummary={this.multiple ? String(count) : undefined}\n                useCompactSummary={this.compactFooterSummary}\n                contentRef={element => {\n                  this.footerContentElement = element ?? undefined;\n                }}\n                summaryMeasureRef={element => {\n                  this.footerSummaryMeasureElement = element ?? undefined;\n                }}\n                clearRef={element => {\n                  this.footerClearElement = element ?? undefined;\n                }}\n                clearLabel={this.clearLabel}\n                onClear={this.clearSelection}\n              />\n            ) : null}\n          </div>\n        )}\n\n        {showError && (\n          <ds-text\n            class=\"error-text\"\n            as=\"div\"\n            variant=\"text-body-small\"\n            color=\"negative\"\n            textId={this.errorId}\n            role=\"alert\"\n          >\n            {this.errorMessage}\n          </ds-text>\n        )}\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  type VNode,\n  Watch,\n} from '@stencil/core';\nimport {\n  controlWidthClass,\n  CONTROL_SUPPORTING_TEXT_VARIANT,\n  CONTROL_TEXT_VARIANT,\n  DEFAULT_REQUIRED_MESSAGE,\n  restoreStringArrayFormState,\n  restoreStringFormState,\n  setFormControlValue,\n  setRepeatedFormControlValue,\n  setRequiredValidity,\n  type ControlWidth,\n} from '../../utils';\nimport {\n  ChoiceActionFooter,\n  ChoiceFooter,\n  ChoiceOptionRow,\n  ChoiceSearch,\n} from '../../utils/choice-list-parts';\nimport {\n  choiceBackgroundClassMap,\n  choiceListUsesIcons,\n  choiceListUsesSubtext,\n  enabledChoiceIndexes,\n  filterChoiceSections,\n  flattenChoiceSections,\n  resolveChoiceSections,\n  type ChoiceBackground,\n  type ChoiceOption,\n  type ChoiceSection,\n} from '../../utils/choice-list';\nimport { SelectController } from '../../utils/select-controller';\nimport { observeTableCaptionCompact } from '../../utils/table-caption-compact';\n\nexport type SelectOption = ChoiceOption;\nexport type SelectSection = ChoiceSection;\nexport type SelectBackground = ChoiceBackground;\nexport type SelectSize = 'lg' | 'md' | 'sm' | 'xs';\nexport type SelectWidth = ControlWidth;\nexport type SelectPopupAlign = 'start' | 'end';\nexport type SelectValue = string | string[];\nexport type SelectIndicator = 'down' | 'up-down';\n\nexport interface SelectOptionActionDetail {\n  value: string;\n  anchorId: string;\n  originalEvent: MouseEvent;\n}\n\nexport interface SelectOptionSubtextActionDetail {\n  value: string;\n  actionValue: string;\n  originalEvent: MouseEvent;\n}\n\nconst ICON_SIZE: Record<SelectSize, 'lg' | 'md' | 'sm' | 'xs'> = {\n  lg: 'lg',\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\nconst OPTION_ACTION_SIZE: Record<SelectSize, 'md' | 'sm' | 'xs'> = {\n  lg: 'md',\n  md: 'sm',\n  sm: 'xs',\n  xs: 'xs',\n};\n\nlet selectId = 0;\n\n@Component({\n  tag: 'ds-select',\n  styleUrl: 'Select.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class Select {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Flat choices. Assign arrays through the JavaScript property. */\n  @Prop() options: SelectOption[] = [];\n  /** Grouped choices; takes precedence over options. Assign through JavaScript. */\n  @Prop() sections: SelectSection[] = [];\n  /** Enable independent multi-value selection while keeping the popup open. */\n  @Prop({ reflect: true }) multiple: boolean = false;\n  /** Selected scalar or array value according to `multiple`. */\n  @Prop({ mutable: true }) value: SelectValue = '';\n  /** Controlled popup visibility. */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n  /** Native form field name. */\n  @Prop({ reflect: true }) name: string | undefined;\n  /** Native disabled state. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Require one valid selected value. */\n  @Prop({ reflect: true }) required: boolean = false;\n  /** Validation message used when required is missing. */\n  @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n  /** Trigger text shown when no valid value is selected. */\n  @Prop() placeholder: string = 'Select';\n  /** Optional scalar-mode trigger text that does not change the selected option label. */\n  @Prop() triggerLabel: string | undefined;\n  /** Present triggerLabel with placeholder emphasis while preserving the selected value. */\n  @Prop() triggerLabelPlaceholder: boolean = false;\n  /** Show a supplemental notification dot beside the trigger label. */\n  @Prop() dot: boolean = false;\n  /** Control density. */\n  @Prop() size: SelectSize = 'md';\n  /** Width fit — hug content (default) or fill the parent. */\n  @Prop() width: SelectWidth = 'hug';\n  /** Align the popup's choice edge to the trigger start or end edge. */\n  @Prop() popupAlign: SelectPopupAlign = 'start';\n  /** Explicit collision owner; otherwise the nearest data-ds-overlay-boundary ancestor is used. */\n  @Prop() boundary: HTMLElement | undefined;\n  /** Shared inactive treatment; removes interaction and form submission. */\n  @Prop() isInactive: boolean = false;\n  /** Replace the prefix with a loader and disable option interaction. */\n  @Prop() isLoading: boolean = false;\n  /** Show the selected interaction fill when a valid value exists. */\n  @Prop() activeFill: boolean = false;\n  /**\n   * Opt into table-caption icon-only chrome below 900px. The trigger omits its\n   * visible label and chevron; keep an accessible name via aria-label.\n   */\n  @Prop({ reflect: true }) collapseLabel: boolean = false;\n  /** Show the surface-aware inset border, including focused and invalid strokes. */\n  @Prop() hasBorder: boolean = true;\n  /** Optional trigger prefix icon name. */\n  @Prop() icon: string | undefined;\n  /** Trailing choice indicator. Use up-down for compact value steppers such as page size. */\n  @Prop() indicator: SelectIndicator = 'down';\n  /** Show the clear footer action when a value exists. */\n  @Prop() allowClear: boolean = true;\n  /** Localized clear action label. */\n  @Prop() clearLabel: string = 'Clear';\n  /** Localized noun displayed after the selected count in multiple mode. */\n  @Prop() selectedLabel: string = 'selected';\n  /** Optional text action shown in the popup footer instead of the clear action. */\n  @Prop() footerActionLabel: string | undefined;\n  /** Show immediate local filtering over option labels, subtext, and section headings. */\n  @Prop() searchable: boolean = false;\n  /** Localized search-field placeholder and accessible name. */\n  @Prop() searchPlaceholder: string = 'Search';\n  /** Localized empty-filter result text. */\n  @Prop() noResultsText: string = 'No results found';\n  /** Accessible loading status label. */\n  @Prop() loadingLabel: string = 'Loading';\n  /** Actual parent surface context; omit on primary and secondary surfaces. */\n  @Prop() background: SelectBackground | undefined;\n  /** Show invalid visual state. */\n  @Prop() error: boolean = false;\n  /** Error text rendered below the trigger when error is true. */\n  @Prop() errorMessage: string | undefined;\n  /** ID applied to the internal combobox trigger for external labels. */\n  @Prop() inputId: string | undefined;\n  /** Direct accessible name when no external label is available. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  /** IDs of elements that label the combobox. */\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n  /** Additional IDs that describe the combobox. */\n  @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n\n  /** Emitted after selection or clearing with the next scalar or array value. */\n  @Event() dsChange!: EventEmitter<SelectValue>;\n  /** Emitted after the footer clear action. */\n  @Event() dsClear!: EventEmitter<void>;\n  /** Emitted whenever popup visibility changes. */\n  @Event() dsOpenChange!: EventEmitter<boolean>;\n  /** Emitted when the optional popup footer action is activated. */\n  @Event() dsFooterAction!: EventEmitter<void>;\n  /** Emitted when an option's contextual ellipsis action is activated. */\n  @Event() dsOptionAction!: EventEmitter<SelectOptionActionDetail>;\n  /** Emitted when an option's supporting text action is activated. */\n  @Event() dsOptionSubtextAction!: EventEmitter<SelectOptionSubtextActionDetail>;\n\n  @State() private activeIndex = -1;\n  @State() private searchTerm = '';\n  @State() private formDisabled = false;\n  @State() private position = { x: 0, y: 0 };\n  @State() private positionReady = false;\n  @State() private focusRingVisible = false;\n  @State() private compactFooterSummary = false;\n  @State() private captionCompact = false;\n\n  private readonly generatedId = `ds-select-${++selectId}`;\n  private readonly listboxId = `${this.generatedId}-listbox`;\n  private readonly errorId = `${this.generatedId}-error`;\n  private initialValue: SelectValue = '';\n  private readonly controller = this.createController();\n  private footerContentElement?: HTMLDivElement;\n  private footerSummaryMeasureElement?: HTMLElement;\n  private footerClearElement?: HTMLButtonElement;\n  private footerResizeObserver?: ResizeObserver;\n  private observedFooterContentElement?: HTMLDivElement;\n  private footerMeasurementFrame?: number;\n  private captionCompactDisconnect: (() => void) | undefined;\n  private hasLoaded = false;\n\n  private createController() {\n    // eslint-disable-next-line @typescript-eslint/no-this-alias -- adapter getters preserve reactive component ownership without inheritance.\n    const owner = this;\n    return new SelectController<SelectOption>({\n      get host() {\n        return owner.el;\n      },\n      generatedId: owner.generatedId,\n      get options() {\n        return owner.visibleOptions;\n      },\n      get searchable() {\n        return owner.searchable;\n      },\n      get isLoading() {\n        return owner.isLoading;\n      },\n      get isDisabled() {\n        return owner.isDisabled;\n      },\n      get preferredIndex() {\n        if (owner.multiple) return -1;\n        return owner.visibleOptions.findIndex(\n          option => option.value === owner.scalarValue && !option.isInactive\n        );\n      },\n      get popupAlign() {\n        return owner.popupAlign;\n      },\n      get boundary() {\n        return owner.boundary;\n      },\n      get open() {\n        return owner.open;\n      },\n      set open(value) {\n        owner.open = value;\n      },\n      get activeIndex() {\n        return owner.activeIndex;\n      },\n      set activeIndex(value) {\n        owner.activeIndex = value;\n      },\n      get searchTerm() {\n        return owner.searchTerm;\n      },\n      set searchTerm(value) {\n        owner.searchTerm = value;\n      },\n      get focusRingVisible() {\n        return owner.focusRingVisible;\n      },\n      set focusRingVisible(value) {\n        owner.focusRingVisible = value;\n      },\n      get position() {\n        return owner.position;\n      },\n      set position(value) {\n        owner.position = value;\n      },\n      get positionReady() {\n        return owner.positionReady;\n      },\n      set positionReady(value) {\n        owner.positionReady = value;\n      },\n      selectOption: option => owner.selectOption(option),\n    });\n  }\n\n  componentWillLoad() {\n    this.value = this.normalizeValueForMode(this.value);\n    this.initialValue = Array.isArray(this.value) ? [...this.value] : this.value;\n    this.syncFormValue();\n  }\n\n  componentDidLoad() {\n    this.hasLoaded = true;\n    this.controller.connect();\n    this.observeFooterContent();\n    this.syncCaptionCompactObserver();\n  }\n\n  connectedCallback() {\n    if (!this.hasLoaded) return;\n    this.controller.connect();\n    this.observeFooterContent();\n    this.syncCaptionCompactObserver();\n  }\n\n  componentDidRender() {\n    this.observeFooterContent();\n    this.scheduleFooterSummaryMeasurement();\n  }\n\n  disconnectedCallback() {\n    this.controller.disconnect();\n    this.footerResizeObserver?.disconnect();\n    this.observedFooterContentElement = undefined;\n    if (this.footerMeasurementFrame !== undefined) {\n      cancelAnimationFrame(this.footerMeasurementFrame);\n      this.footerMeasurementFrame = undefined;\n    }\n    this.disconnectCaptionCompactObserver();\n  }\n\n  @Watch('collapseLabel')\n  onCollapseLabelChange() {\n    this.syncCaptionCompactObserver();\n  }\n\n  @Watch('value')\n  @Watch('multiple')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('required')\n  @Watch('name')\n  @Watch('options')\n  @Watch('sections')\n  syncFormValue() {\n    if (\n      (this.multiple && !Array.isArray(this.value)) ||\n      (!this.multiple && Array.isArray(this.value))\n    ) {\n      this.value = this.normalizeValueForMode(this.value);\n    }\n    const inactive = this.isDisabled;\n    if (this.multiple) {\n      const values = this.resolvedValues;\n      setRepeatedFormControlValue(this.internals, this.name, values, { inactive });\n    } else {\n      const value = this.hasSelection ? this.scalarValue : '';\n      setFormControlValue(this.internals, value, { inactive });\n    }\n    const missing = this.required && !inactive && !this.hasSelection;\n    setRequiredValidity(this.internals, missing, this.requiredMessage);\n    this.controller.optionsChanged();\n  }\n\n  @Watch('isLoading')\n  onLoadingChange() {\n    this.controller.loadingChanged();\n  }\n\n  @Watch('popupAlign')\n  @Watch('boundary')\n  onPopupAlignChange() {\n    this.controller.positionChanged();\n  }\n\n  @Watch('open')\n  onOpenChange(open: boolean) {\n    this.dsOpenChange.emit(open);\n    this.controller.openChanged(open);\n  }\n\n  @Watch('searchTerm')\n  onSearchTermChange() {\n    this.controller.searchChanged();\n  }\n\n  @Watch('activeIndex')\n  onActiveIndexChange() {\n    this.controller.activeIndexChanged();\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.value = this.normalizeValueForMode(this.initialValue);\n    this.closePopup();\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    if (!this.multiple) {\n      this.value = restoreStringFormState(state);\n      return;\n    }\n    this.value = restoreStringArrayFormState(state);\n  }\n\n  @Method()\n  async setFocus() {\n    this.controller.setFocus();\n  }\n\n  private get isDisabled(): boolean {\n    return this.disabled || this.isInactive || this.formDisabled;\n  }\n\n  private normalizeValueForMode(value: SelectValue): SelectValue {\n    if (this.multiple) {\n      return Array.isArray(value) ? [...value] : value ? [value] : [];\n    }\n    return Array.isArray(value) ? (value[0] ?? '') : value;\n  }\n\n  private get allSections(): SelectSection[] {\n    return resolveChoiceSections(this.options, this.sections);\n  }\n\n  private get allOptions(): SelectOption[] {\n    return flattenChoiceSections(this.allSections);\n  }\n\n  private get visibleSections(): SelectSection[] {\n    return this.searchable\n      ? filterChoiceSections(this.allSections, this.searchTerm)\n      : this.allSections;\n  }\n\n  private get visibleOptions(): SelectOption[] {\n    return flattenChoiceSections(this.visibleSections);\n  }\n\n  private get scalarValue(): string {\n    return typeof this.value === 'string' ? this.value : '';\n  }\n\n  private get resolvedValues(): string[] {\n    if (!this.multiple || !Array.isArray(this.value)) return [];\n    const valid = new Set(this.allOptions.map(option => option.value));\n    return [...new Set(this.value.filter(value => valid.has(value)))];\n  }\n\n  private get selectedOption(): SelectOption | undefined {\n    if (this.multiple) return undefined;\n    return this.allOptions.find(option => option.value === this.scalarValue);\n  }\n\n  private get hasSelection(): boolean {\n    return this.multiple ? this.resolvedValues.length > 0 : Boolean(this.selectedOption);\n  }\n\n  private get activeOptionId(): string | undefined {\n    return this.controller.activeOptionId;\n  }\n\n  private get popupRole(): 'listbox' | 'grid' {\n    return this.allOptions.some(option => Boolean(option.action)) ? 'grid' : 'listbox';\n  }\n\n  private observeFooterContent() {\n    const content =\n      this.open && this.multiple && this.hasSelection ? this.footerContentElement : undefined;\n    if (!content?.isConnected) {\n      this.footerResizeObserver?.disconnect();\n      this.observedFooterContentElement = undefined;\n      return;\n    }\n    if (this.observedFooterContentElement === content) return;\n\n    this.footerResizeObserver?.disconnect();\n    if (typeof ResizeObserver !== 'undefined') {\n      this.footerResizeObserver = new ResizeObserver(() => this.scheduleFooterSummaryMeasurement());\n      this.footerResizeObserver.observe(content);\n    }\n    this.observedFooterContentElement = content;\n  }\n\n  private scheduleFooterSummaryMeasurement() {\n    if (\n      !this.open ||\n      !this.multiple ||\n      !this.hasSelection ||\n      this.footerMeasurementFrame !== undefined\n    ) {\n      return;\n    }\n    this.footerMeasurementFrame = requestAnimationFrame(() => {\n      this.footerMeasurementFrame = undefined;\n      this.measureFooterSummary();\n    });\n  }\n\n  private measureFooterSummary() {\n    const content = this.footerContentElement;\n    const summary = this.footerSummaryMeasureElement;\n    const clear = this.footerClearElement;\n    if (!content?.isConnected || !summary?.isConnected || !clear?.isConnected) return;\n\n    const styles = getComputedStyle(content);\n    const innerWidth =\n      content.clientWidth -\n      Number.parseFloat(styles.paddingInlineStart || '0') -\n      Number.parseFloat(styles.paddingInlineEnd || '0');\n    const requiredWidth =\n      summary.getBoundingClientRect().width +\n      clear.getBoundingClientRect().width +\n      Number.parseFloat(styles.columnGap || '0');\n    const nextCompact = requiredWidth > innerWidth + 0.5;\n    if (nextCompact !== this.compactFooterSummary) {\n      this.compactFooterSummary = nextCompact;\n    }\n  }\n\n  private closePopup(restoreFocus = false) {\n    this.controller.closePopup(restoreFocus);\n  }\n\n  private openPopup(focusVisible: boolean, edge?: 'first' | 'last') {\n    this.controller.openPopup(focusVisible, edge);\n  }\n\n  private selectOption(option: SelectOption) {\n    if (option.isInactive || this.isLoading) return;\n    if (this.multiple) {\n      const current = this.resolvedValues;\n      const next = current.includes(option.value)\n        ? current.filter(value => value !== option.value)\n        : [...current, option.value];\n      this.value = next;\n      this.dsChange.emit([...next]);\n      return;\n    }\n    this.value = option.value;\n    this.dsChange.emit(option.value);\n    this.controller.closePopup(true);\n  }\n\n  private clearSelection = (event: Event) => {\n    event.preventDefault();\n    event.stopPropagation();\n    this.value = this.multiple ? [] : '';\n    this.dsChange.emit(this.multiple ? [] : '');\n    this.dsClear.emit();\n    if (!this.multiple) {\n      const enabled = enabledChoiceIndexes(this.visibleOptions);\n      this.activeIndex = enabled[0] ?? -1;\n    }\n    this.controller.focusSearchOrTrigger();\n  };\n\n  private activateFooterAction = (event: MouseEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    this.dsFooterAction.emit();\n    this.closePopup();\n  };\n\n  private readonly handleListKeyDown = this.controller.handleListKeyDown;\n  private readonly handleTriggerKeyDown = this.controller.handleTriggerKeyDown;\n\n  private renderOption(\n    option: SelectOption,\n    index: number,\n    usesIcons: boolean,\n    usesSubtext: boolean\n  ) {\n    const selected = this.multiple\n      ? this.resolvedValues.includes(option.value)\n      : option.value === this.scalarValue;\n    const active = index === this.activeIndex;\n    const actionId = `${this.generatedId}-option-action-${index}`;\n    return (\n      <ChoiceOptionRow\n        size={this.size}\n        id={`${this.generatedId}-option-${index}`}\n        option={option}\n        selected={selected}\n        active={active}\n        focusRingVisible={this.focusRingVisible}\n        usesSubtext={usesSubtext}\n        actionOpen={option.action?.surfaceOpen ?? option.action?.expanded}\n        popupRole={this.popupRole}\n        leading={\n          this.multiple ? (\n            <span\n              class=\"ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content\"\n              aria-hidden=\"true\"\n            >\n              <ds-checkbox\n                class=\"select-option__checkbox\"\n                label=\"\"\n                size={this.size}\n                checked={selected}\n                presentation\n              />\n            </span>\n          ) : usesIcons && option.icon ? (\n            <span\n              class=\"ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content\"\n              aria-hidden=\"true\"\n            >\n              <ds-icon name={option.icon} size={this.size} color=\"inherit\" />\n            </span>\n          ) : undefined\n        }\n        supporting={\n          option.subtextActions?.length ? (\n            <span class=\"ds-choice-item__subtext ds-control-label-box select-option__subtext-actions\">\n              {option.subtextActions.map((action, actionIndex) => [\n                actionIndex > 0 ? (\n                  <ds-text\n                    class=\"select-option__subtext-action-separator\"\n                    as=\"span\"\n                    variant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n                    color=\"inherit\"\n                    aria-hidden=\"true\"\n                  >\n                    ·\n                  </ds-text>\n                ) : null,\n                <button\n                  type=\"button\"\n                  class={{\n                    'select-option__subtext-action': true,\n                    'select-option__subtext-action--negative': action.tone === 'negative',\n                    'ds-text-action': true,\n                    'ds-focus-ring': true,\n                  }}\n                  onKeyDown={(event: KeyboardEvent) => event.stopPropagation()}\n                  onClick={(event: MouseEvent) => {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    this.dsOptionSubtextAction.emit({\n                      value: option.value,\n                      actionValue: action.value,\n                      originalEvent: event,\n                    });\n                  }}\n                >\n                  <ds-text\n                    as=\"span\"\n                    variant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n                    color=\"inherit\"\n                  >\n                    {action.label}\n                  </ds-text>\n                </button>,\n              ])}\n            </span>\n          ) : undefined\n        }\n        action={\n          option.action ? (\n            <ds-tooltip label={option.action.label} side=\"left\" size=\"sm\">\n              <ds-button-unfilled\n                id={actionId}\n                variant=\"icon\"\n                size={OPTION_ACTION_SIZE[this.size]}\n                icon=\"Ellipses\"\n                rounded\n                hasBorder={false}\n                activeFill={false}\n                ariaLabel={option.action.label}\n                haspopup=\"menu\"\n                controls={option.action.controls}\n                expanded={option.action.expanded}\n                surfaceOpen={option.action.surfaceOpen}\n                onKeyDown={event => {\n                  event.stopPropagation();\n                  if (event.key === 'Escape' || event.key === 'ArrowLeft') {\n                    event.preventDefault();\n                    this.controller.focusSearchOrTrigger();\n                  }\n                }}\n                onDsClick={(event: CustomEvent<MouseEvent>) => {\n                  event.stopPropagation();\n                  this.dsOptionAction.emit({\n                    value: option.value,\n                    anchorId: actionId,\n                    originalEvent: event.detail,\n                  });\n                }}\n              />\n            </ds-tooltip>\n          ) : undefined\n        }\n        onHover={() => {\n          this.focusRingVisible = false;\n          this.activeIndex = index;\n        }}\n        onSelect={() => this.selectOption(option)}\n      />\n    );\n  }\n\n  private get captionIconOnly(): boolean {\n    return this.collapseLabel && this.captionCompact && Boolean(this.icon || this.isLoading);\n  }\n\n  private syncCaptionCompactObserver(): void {\n    this.disconnectCaptionCompactObserver();\n    if (!this.collapseLabel) {\n      if (this.captionCompact) this.captionCompact = false;\n      return;\n    }\n    this.captionCompactDisconnect = observeTableCaptionCompact(this.el, compact => {\n      if (this.captionCompact !== compact) this.captionCompact = compact;\n    });\n  }\n\n  private disconnectCaptionCompactObserver(): void {\n    this.captionCompactDisconnect?.();\n    this.captionCompactDisconnect = undefined;\n  }\n\n  private renderCaptionTooltip(trigger: VNode, label: string): VNode {\n    if (!this.collapseLabel) return trigger;\n    return (\n      <ds-tooltip label={label} side=\"top\" size=\"sm\">\n        {trigger}\n      </ds-tooltip>\n    );\n  }\n\n  render() {\n    const inactive = this.isDisabled;\n    const showPlaceholder = !this.hasSelection;\n    const count = this.resolvedValues.length;\n    const label = this.multiple\n      ? `${this.placeholder}${count > 0 ? ` · ${count}` : ''}`\n      : showPlaceholder\n        ? this.placeholder\n        : (this.triggerLabel ?? this.selectedOption?.label);\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n    const usesOptionIcons = !this.multiple && choiceListUsesIcons(this.allOptions);\n    const usesOptionSubtext = choiceListUsesSubtext(this.allOptions);\n    const showError = this.error && Boolean(this.errorMessage);\n    const describedBy =\n      [this.ariaDescribedby, showError ? this.errorId : undefined].filter(Boolean).join(' ') ||\n      undefined;\n    const popupStyle = {\n      position: 'fixed',\n      left: '0',\n      top: '0',\n      transform: `translate(${Math.round(this.position.x)}px, ${Math.round(this.position.y)}px)`,\n      zIndex: 'var(--dimension-z-index-floating)',\n      visibility: this.positionReady ? 'visible' : 'hidden',\n    };\n    let flatIndex = 0;\n\n    return (\n      <Host\n        class={{\n          'select-host': true,\n          'ds-select-trigger-host': true,\n          'select-host--multiple': this.multiple,\n          'ds-field-stack': true,\n          'ds-control-inactive': inactive,\n          [`ds-control--${this.size}`]: true,\n          'ds-table-caption-control': this.collapseLabel,\n          'ds-table-caption-control--compact': this.captionIconOnly,\n          ...controlWidthClass(this.width),\n          [`select-host--background-${this.background}`]: !!this.background,\n          [`ds-select-trigger-host--background-${this.background}`]: !!this.background,\n        }}\n      >\n        {this.renderCaptionTooltip(\n          <button\n            ref={element => {\n              this.controller.setTriggerElement((element as HTMLButtonElement) ?? null);\n            }}\n            id={this.inputId ?? this.generatedId}\n            type=\"button\"\n            class={{\n              trigger: true,\n              'ds-control-frame': true,\n              'ds-focus-ring-inset': true,\n              'ds-interaction-fill': true,\n              'ds-interaction-fill--selected': !inactive && this.activeFill && this.hasSelection,\n              'trigger--expanded': !inactive && this.open,\n              'ds-interaction-fill--surface-open': !inactive && this.open,\n              'trigger--bordered': this.hasBorder,\n              'trigger--placeholder': showPlaceholder && !this.multiple,\n              'trigger--has-value': this.hasSelection,\n              'trigger--label-placeholder':\n                !this.multiple && Boolean(this.triggerLabel) && this.triggerLabelPlaceholder,\n              'wrapper--error': this.hasBorder && this.error,\n              [`ds-control--${this.size}`]: true,\n              ...choiceBackgroundClassMap(this.background),\n            }}\n            disabled={inactive}\n            role=\"combobox\"\n            aria-haspopup={this.popupRole}\n            aria-expanded={String(this.open)}\n            aria-controls={this.open ? this.listboxId : undefined}\n            aria-activedescendant={this.open && !this.searchable ? this.activeOptionId : undefined}\n            aria-label={this.ariaLabel ?? (this.captionIconOnly ? label : undefined)}\n            aria-labelledby={this.ariaLabelledby}\n            aria-describedby={describedBy}\n            aria-invalid={this.error ? 'true' : undefined}\n            aria-required={this.required || undefined}\n            aria-busy={this.isLoading ? 'true' : undefined}\n            onClick={() => (this.open ? this.closePopup() : this.openPopup(false))}\n            onKeyDown={event => {\n              const action = this.visibleOptions[this.activeIndex]?.action;\n              if (\n                this.open &&\n                action &&\n                (event.key === 'ArrowRight' || (event.key === 'F10' && event.shiftKey))\n              ) {\n                event.preventDefault();\n                document\n                  .getElementById(`${this.generatedId}-option-action-${this.activeIndex}`)\n                  ?.querySelector<HTMLElement>('button')\n                  ?.focus();\n                return;\n              }\n              this.handleTriggerKeyDown(event);\n            }}\n          >\n            {(this.icon || this.isLoading) && (\n              <span\n                class=\"trigger__prefix ds-control-icon-box ds-interaction-fill__content\"\n                aria-hidden=\"true\"\n              >\n                {this.isLoading ? (\n                  <ds-loader size={iconSize} color=\"inherit\" />\n                ) : (\n                  <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n                )}\n              </span>\n            )}\n            {this.captionIconOnly ? null : (\n              <span\n                class={{\n                  'trigger__label-box': true,\n                  'ds-interaction-fill__content': true,\n                }}\n              >\n                <span\n                  class={{\n                    'trigger__label-content': true,\n                    'ds-control-label-box': true,\n                    'ds-control-label-dot': this.dot,\n                    'trigger__label-content--dot': this.dot,\n                  }}\n                >\n                  <ds-text\n                    class=\"trigger__label\"\n                    as=\"span\"\n                    variant={textVariant}\n                    color=\"inherit\"\n                    lineTruncation={1}\n                  >\n                    {label}\n                  </ds-text>\n                  {this.dot && (\n                    <ds-badge\n                      class=\"trigger__dot ds-control-label-dot__badge\"\n                      variant=\"dot\"\n                      hasRing={false}\n                      label=\"\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                </span>\n              </span>\n            )}\n            {this.captionIconOnly ? null : (\n              <span\n                class=\"trigger__chevron ds-control-icon-box ds-interaction-fill__content\"\n                aria-hidden=\"true\"\n              >\n                <ds-icon\n                  name={this.indicator === 'up-down' ? 'ChevronUpDown' : 'ChevronDown'}\n                  size={iconSize}\n                  color=\"inherit\"\n                />\n              </span>\n            )}\n          </button>,\n          this.captionIconOnly ? this.ariaLabel?.trim() || this.placeholder : ''\n        )}\n\n        {this.open && (\n          <div\n            popover=\"manual\"\n            ref={element => {\n              this.controller.setPopupElement((element as HTMLDivElement) ?? null);\n            }}\n            class=\"select-popup ds-choice-popup\"\n            style={popupStyle}\n          >\n            {this.searchable && (\n              <ChoiceSearch\n                size={this.size}\n                value={this.searchTerm}\n                placeholder={this.searchPlaceholder}\n                controls={this.listboxId}\n                activeDescendant={this.activeOptionId}\n                inputRef={this.controller.setSearchElement}\n                clearLabel={this.clearLabel}\n                onValueChange={value => {\n                  this.searchTerm = value;\n                }}\n                onKeyDown={event => this.handleListKeyDown(event)}\n              />\n            )}\n            <div\n              id={this.listboxId}\n              class=\"ds-choice-list\"\n              role={this.popupRole}\n              aria-multiselectable={this.multiple ? 'true' : undefined}\n              aria-label={this.ariaLabel ?? this.placeholder}\n              aria-busy={this.isLoading ? 'true' : undefined}\n            >\n              {this.isLoading ? (\n                <div\n                  class=\"ds-choice-loading ds-empty-region\"\n                  role={this.popupRole === 'grid' ? 'row' : 'option'}\n                  aria-selected=\"false\"\n                  aria-disabled=\"true\"\n                  aria-label={this.loadingLabel}\n                  aria-live=\"polite\"\n                >\n                  {this.popupRole === 'grid' ? (\n                    <span role=\"gridcell\">\n                      <ds-loader size={this.size} color=\"inherit\" />\n                    </span>\n                  ) : (\n                    <ds-loader size={this.size} color=\"inherit\" />\n                  )}\n                </div>\n              ) : this.visibleOptions.length === 0 ? (\n                <div\n                  class=\"ds-choice-empty ds-empty-region\"\n                  role={this.popupRole === 'grid' ? 'row' : 'option'}\n                  aria-selected=\"false\"\n                  aria-disabled=\"true\"\n                  aria-label={this.noResultsText}\n                  aria-live=\"polite\"\n                >\n                  {this.popupRole === 'grid' ? (\n                    <span role=\"gridcell\">\n                      <ds-empty-state body={this.noResultsText} />\n                    </span>\n                  ) : (\n                    <ds-empty-state body={this.noResultsText} />\n                  )}\n                </div>\n              ) : (\n                this.visibleSections.map((section, sectionIndex) => (\n                  <div\n                    class={{\n                      'ds-choice-section': true,\n                      'ds-chrome-column': true,\n                      'ds-chrome-space--sm': true,\n                      'ds-choice-section--divided': !!section.divider,\n                      'ds-choice-section--headed-after-first':\n                        sectionIndex > 0 && Boolean(section.header),\n                    }}\n                    role={\n                      this.popupRole === 'grid' ? 'rowgroup' : section.header ? 'group' : undefined\n                    }\n                    aria-label={section.header}\n                  >\n                    {section.header && this.popupRole === 'grid' ? (\n                      <ds-text\n                        class={`ds-choice-section__header ds-control-section-heading ds-control--${this.size}`}\n                        as=\"span\"\n                        variant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n                        emphasis\n                        color=\"primary\"\n                        role=\"row\"\n                      >\n                        <span class=\"ds-choice-section__header-label\" role=\"gridcell\">\n                          {section.header}\n                        </span>\n                      </ds-text>\n                    ) : section.header ? (\n                      <ds-text\n                        class={`ds-choice-section__header ds-control-section-heading ds-control--${this.size}`}\n                        as=\"span\"\n                        variant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n                        emphasis\n                        color=\"primary\"\n                        aria-hidden=\"true\"\n                      >\n                        <span class=\"ds-choice-section__header-label\">{section.header}</span>\n                      </ds-text>\n                    ) : null}\n                    {section.options.map(option =>\n                      this.renderOption(option, flatIndex++, usesOptionIcons, usesOptionSubtext)\n                    )}\n                  </div>\n                ))\n              )}\n            </div>\n            {this.footerActionLabel && !this.isLoading ? (\n              <ChoiceActionFooter\n                size={this.size}\n                label={this.footerActionLabel}\n                onAction={this.activateFooterAction}\n              />\n            ) : this.allowClear && this.hasSelection && !this.isLoading ? (\n              <ChoiceFooter\n                size={this.size}\n                summary={this.multiple ? `${count} ${this.selectedLabel}` : undefined}\n                compactSummary={this.multiple ? String(count) : undefined}\n                useCompactSummary={this.compactFooterSummary}\n                contentRef={element => {\n                  this.footerContentElement = element ?? undefined;\n                }}\n                summaryMeasureRef={element => {\n                  this.footerSummaryMeasureElement = element ?? undefined;\n                }}\n                clearRef={element => {\n                  this.footerClearElement = element ?? undefined;\n                }}\n                clearLabel={this.clearLabel}\n                onClear={this.clearSelection}\n              />\n            ) : null}\n          </div>\n        )}\n\n        {showError && (\n          <ds-text\n            class=\"error-text\"\n            as=\"div\"\n            variant=\"text-body-small\"\n            color=\"negative\"\n            textId={this.errorId}\n            role=\"alert\"\n          >\n            {this.errorMessage}\n          </ds-text>\n        )}\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

package/dist/mcp-data/registry/shell-app.json

@@ -101,7 +101,8 @@
         "Paper texture chrome is desktop/tablet-only and follows the fixed viewport phase of the shell chrome; mobile remains a solid primary stage.",
         "Managed page-header capacity follows only the fixed shell breakpoint: roomy on desktop and compact on tablet. Opening PanelTools does not compact or constrain BarTitle.",
         "Mobile keeps at most the first eligible ordered icon command visible and moves labeled buttons, menu choices, split actions, and explicit overflow commands into one shell-owned text-only page-actions menu.",
-        "The bottom bar remains visible at all route and tool depths in the foundation release."
+        "The bottom bar remains visible at all route and tool depths in the foundation release.",
+        "A mobile shell banner paints a fixed top edge with its resolved background through exit motion. Color variants and theme changes follow the banner automatically; native Safari status-area tint remains a device-verified browser behavior."
       ],
       "frameworkCaveats": {
         "customElements": [
@@ -691,7 +692,7 @@
   "files": [
     {
       "path": "src/wc/components/ShellApp/ShellApp.css",
-      "content": ":host {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n  overflow: hidden;\n  overscroll-behavior: none;\n  font-family: var(--typography-font-family-ui, system-ui);\n  --ds-shell-panel-tools-width: var(--dimension-panel-width-xs);\n  --ds-shell-gradient-context: flat;\n}\n\n:host {\n  --_shell-chrome-bg: var(--color-background-secondary);\n}\n\n:host(.shell-app--gradient) {\n  --ds-shell-gradient-context: gradient;\n}\n\n.shell-app__row {\n  display: flex;\n  flex: 1 1 0;\n  min-height: 0;\n  position: relative;\n}\n\n.shell-app__banner {\n  flex: 0 0 auto;\n  min-width: 0;\n  position: relative;\n  z-index: 5;\n}\n\n.shell-app__banner ::slotted(ds-banner) {\n  display: grid;\n  width: 100%;\n}\n\n/*\n * One chrome layer behind the shell row. Wash uses background-attachment: fixed\n * so the pattern is locked to the viewport — panel/tools collapse only changes the\n * transparent window, not the pattern phase. JS sets wash background-size from\n * readShellViewportDimensions(), not the shell element box.\n */\n.shell-app__chrome {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 0;\n  overflow: hidden;\n  background-color: var(--_shell-chrome-bg);\n}\n\n:host(.shell-app--gradient) .shell-app__chrome::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  background-position: 0 0;\n  background-attachment: fixed;\n  z-index: 1;\n  opacity: var(--ds-shell-gradient-opacity, 1);\n  background-image: var(--ds-shell-gradient-image, none);\n  background-size: var(--ds-shell-gradient-size, auto);\n  background-repeat: no-repeat;\n}\n\n.shell-app__paper-texture {\n  z-index: 2;\n}\n\n.shell-app__panel {\n  flex: 0 0 auto;\n  min-height: 0;\n  height: 100%;\n  position: relative;\n  /* Above main so resize handle line can paint over the workspace edge */\n  z-index: 2;\n}\n\n.shell-app__panel ::slotted(ds-panel-nav) {\n  display: block;\n  height: 100%;\n}\n\n.shell-app__panel > ds-panel-nav {\n  display: block;\n  height: 100%;\n}\n\n.shell-app__main {\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  grid-template-rows: auto minmax(0, 1fr);\n  grid-template-areas:\n    'bar tools'\n    'content tools';\n  position: relative;\n  z-index: 1;\n}\n\n.shell-app__mobile-sheet-nav,\n.shell-app__mobile-bar-nav {\n  display: none;\n}\n\n.shell-app__bar {\n  grid-area: bar;\n  flex: 0 0 auto;\n  min-width: 0;\n}\n\n.shell-app__bar ::slotted(ds-bar-nav) {\n  display: block;\n}\n\n.shell-app__bar ::slotted(ds-bar-title) {\n  display: block;\n}\n\n.shell-app__bar > ds-bar-nav {\n  display: block;\n}\n\n.shell-app__bar > ds-bar-title {\n  display: block;\n}\n\n.shell-app__content {\n  grid-area: content;\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n  overflow: auto;\n  overscroll-behavior: none;\n  /* Limit reflow to the page column — not on __main (breaks tools flex shrink). */\n  contain: layout;\n}\n\n/* Layout scroller, not a control: keep it keyboard-focusable without a page-sized ring. */\n.shell-app__content:focus,\n.shell-app__content:focus-visible {\n  outline: none;\n}\n\n/* Opaque page surface — masks the fixed chrome layer in the content column. */\n.shell-app__content {\n  position: relative;\n  z-index: 1;\n  background-color: var(--color-background-primary);\n}\n\n.shell-app__tools {\n  grid-area: tools;\n  flex: 0 0 auto;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n  display: flex;\n  position: relative;\n  z-index: 0;\n  overflow: hidden;\n}\n\n.shell-app__tools ::slotted(ds-panel-tools) {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n.shell-app__tools ::slotted(ds-shell-tools) {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n.shell-app__tools > ds-shell-tools {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n.shell-app__tool-slot-proxy {\n  display: block;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n}\n\n.shell-app__content > ds-shell-page {\n  display: block;\n  min-height: 100%;\n}\n\n:host(.shell-app--tools-fullscreen) .shell-app__panel,\n:host(.shell-app--tools-fullscreen) .shell-app__bar,\n:host(.shell-app--tools-fullscreen) .shell-app__content {\n  visibility: hidden;\n}\n\n:host(.shell-app--mobile) {\n  --_shell-chrome-bg: var(--color-background-primary);\n  padding-block-start: env(safe-area-inset-top);\n  background: var(--ds-shell-safe-area-background, var(--color-background-primary));\n}\n\n/* Refresh the Mobile WebKit stage layer without remounting app content. */\n:host(.shell-app--mobile.shell-app--foreground-refresh) .shell-app__main {\n  transform: translateZ(0);\n}\n\n:host(.shell-app--mobile) .shell-app__chrome,\n:host(.shell-app--mobile) .shell-app__panel,\n:host(.shell-app--mobile) .shell-app__bar {\n  display: none;\n}\n\n:host(.shell-app--mobile) .shell-app__main {\n  width: 100%;\n  box-sizing: border-box;\n  grid-template-columns: minmax(0, 1fr);\n  grid-template-rows: minmax(0, 1fr) auto;\n  grid-template-areas:\n    'stage'\n    'mobile-bar-nav';\n  background: var(--color-background-primary);\n}\n\n:host(.shell-app--mobile) .shell-app__content,\n:host(.shell-app--mobile) .shell-app__tools,\n:host(.shell-app--mobile) .shell-app__mobile-sheet-nav {\n  grid-area: stage;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n  position: relative;\n}\n\n:host(.shell-app--mobile) .shell-app__content {\n  z-index: 1;\n  overflow: auto;\n}\n\n:host(.shell-app--mobile) .shell-app__tools {\n  z-index: 2;\n  width: 100%;\n  overflow: hidden;\n  background: var(--color-background-primary);\n}\n\n:host(.shell-app--mobile) .shell-app__mobile-sheet-nav {\n  display: block;\n  z-index: 3;\n  overflow: hidden;\n  background: var(--color-background-primary);\n}\n\n:host(.shell-app--mobile) .shell-app__mobile-bar-nav {\n  grid-area: mobile-bar-nav;\n  display: block;\n  min-width: 0;\n  position: relative;\n  z-index: 4;\n}\n\n:host(.shell-app--mobile) .shell-app__tools[hidden],\n:host(.shell-app--mobile) .shell-app__mobile-sheet-nav[hidden],\n:host(.shell-app--mobile) .shell-app__mobile-bar-nav[hidden] {\n  display: none;\n}\n\n:host(.shell-app--mobile-tool-active) .shell-app__content,\n:host(.shell-app--mobile-sheet-nav-open) .shell-app__content,\n:host(.shell-app--mobile-sheet-nav-open) .shell-app__tools {\n  visibility: hidden;\n}\n",
+      "content": ":host {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n  overflow: hidden;\n  overscroll-behavior: none;\n  font-family: var(--typography-font-family-ui, system-ui);\n  --ds-shell-panel-tools-width: var(--dimension-panel-width-xs);\n  --ds-shell-gradient-context: flat;\n}\n\n:host {\n  --_shell-chrome-bg: var(--color-background-secondary);\n}\n\n:host(.shell-app--gradient) {\n  --ds-shell-gradient-context: gradient;\n}\n\n.shell-app__row {\n  display: flex;\n  flex: 1 1 0;\n  min-height: 0;\n  position: relative;\n}\n\n.shell-app__banner {\n  --_shell-banner-edge-display: none;\n  flex: 0 0 auto;\n  min-width: 0;\n  position: relative;\n  z-index: 5;\n}\n\n.shell-app__banner ::slotted(ds-banner) {\n  display: grid;\n  width: 100%;\n}\n\n/*\n * One chrome layer behind the shell row. Wash uses background-attachment: fixed\n * so the pattern is locked to the viewport — panel/tools collapse only changes the\n * transparent window, not the pattern phase. JS sets wash background-size from\n * readShellViewportDimensions(), not the shell element box.\n */\n.shell-app__chrome {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 0;\n  overflow: hidden;\n  background-color: var(--_shell-chrome-bg);\n}\n\n:host(.shell-app--gradient) .shell-app__chrome::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  background-position: 0 0;\n  background-attachment: fixed;\n  z-index: 1;\n  opacity: var(--ds-shell-gradient-opacity, 1);\n  background-image: var(--ds-shell-gradient-image, none);\n  background-size: var(--ds-shell-gradient-size, auto);\n  background-repeat: no-repeat;\n}\n\n.shell-app__paper-texture {\n  z-index: 2;\n}\n\n.shell-app__panel {\n  flex: 0 0 auto;\n  min-height: 0;\n  height: 100%;\n  position: relative;\n  /* Above main so resize handle line can paint over the workspace edge */\n  z-index: 2;\n}\n\n.shell-app__panel ::slotted(ds-panel-nav) {\n  display: block;\n  height: 100%;\n}\n\n.shell-app__panel > ds-panel-nav {\n  display: block;\n  height: 100%;\n}\n\n.shell-app__main {\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  grid-template-rows: auto minmax(0, 1fr);\n  grid-template-areas:\n    'bar tools'\n    'content tools';\n  position: relative;\n  z-index: 1;\n}\n\n.shell-app__mobile-sheet-nav,\n.shell-app__mobile-bar-nav {\n  display: none;\n}\n\n.shell-app__bar {\n  grid-area: bar;\n  flex: 0 0 auto;\n  min-width: 0;\n}\n\n.shell-app__bar ::slotted(ds-bar-nav) {\n  display: block;\n}\n\n.shell-app__bar ::slotted(ds-bar-title) {\n  display: block;\n}\n\n.shell-app__bar > ds-bar-nav {\n  display: block;\n}\n\n.shell-app__bar > ds-bar-title {\n  display: block;\n}\n\n.shell-app__content {\n  grid-area: content;\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n  overflow: auto;\n  overscroll-behavior: none;\n  /* Limit reflow to the page column — not on __main (breaks tools flex shrink). */\n  contain: layout;\n}\n\n/* Layout scroller, not a control: keep it keyboard-focusable without a page-sized ring. */\n.shell-app__content:focus,\n.shell-app__content:focus-visible {\n  outline: none;\n}\n\n/* Opaque page surface — masks the fixed chrome layer in the content column. */\n.shell-app__content {\n  position: relative;\n  z-index: 1;\n  background-color: var(--color-background-primary);\n}\n\n.shell-app__tools {\n  grid-area: tools;\n  flex: 0 0 auto;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n  display: flex;\n  position: relative;\n  z-index: 0;\n  overflow: hidden;\n}\n\n.shell-app__tools ::slotted(ds-panel-tools) {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n.shell-app__tools ::slotted(ds-shell-tools) {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n.shell-app__tools > ds-shell-tools {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n.shell-app__tool-slot-proxy {\n  display: block;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n}\n\n.shell-app__content > ds-shell-page {\n  display: block;\n  min-height: 100%;\n}\n\n:host(.shell-app--tools-fullscreen) .shell-app__panel,\n:host(.shell-app--tools-fullscreen) .shell-app__bar,\n:host(.shell-app--tools-fullscreen) .shell-app__content {\n  visibility: hidden;\n}\n\n:host(.shell-app--mobile) {\n  --_shell-chrome-bg: var(--color-background-primary);\n  padding-block-start: env(safe-area-inset-top);\n  background: var(--ds-shell-safe-area-background, var(--color-background-primary));\n}\n\n:host(.shell-app--mobile) .shell-app__banner {\n  --_shell-banner-edge-display: block;\n}\n\n/* Refresh the Mobile WebKit stage layer without remounting app content. */\n:host(.shell-app--mobile.shell-app--foreground-refresh) .shell-app__main {\n  transform: translateZ(0);\n}\n\n:host(.shell-app--mobile) .shell-app__chrome,\n:host(.shell-app--mobile) .shell-app__panel,\n:host(.shell-app--mobile) .shell-app__bar {\n  display: none;\n}\n\n:host(.shell-app--mobile) .shell-app__main {\n  width: 100%;\n  box-sizing: border-box;\n  grid-template-columns: minmax(0, 1fr);\n  grid-template-rows: minmax(0, 1fr) auto;\n  grid-template-areas:\n    'stage'\n    'mobile-bar-nav';\n  background: var(--color-background-primary);\n}\n\n:host(.shell-app--mobile) .shell-app__content,\n:host(.shell-app--mobile) .shell-app__tools,\n:host(.shell-app--mobile) .shell-app__mobile-sheet-nav {\n  grid-area: stage;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n  position: relative;\n}\n\n:host(.shell-app--mobile) .shell-app__content {\n  z-index: 1;\n  overflow: auto;\n}\n\n:host(.shell-app--mobile) .shell-app__tools {\n  z-index: 2;\n  width: 100%;\n  overflow: hidden;\n  background: var(--color-background-primary);\n}\n\n:host(.shell-app--mobile) .shell-app__mobile-sheet-nav {\n  display: block;\n  z-index: 3;\n  overflow: hidden;\n  background: var(--color-background-primary);\n}\n\n:host(.shell-app--mobile) .shell-app__mobile-bar-nav {\n  grid-area: mobile-bar-nav;\n  display: block;\n  min-width: 0;\n  position: relative;\n  z-index: 4;\n}\n\n:host(.shell-app--mobile) .shell-app__tools[hidden],\n:host(.shell-app--mobile) .shell-app__mobile-sheet-nav[hidden],\n:host(.shell-app--mobile) .shell-app__mobile-bar-nav[hidden] {\n  display: none;\n}\n\n:host(.shell-app--mobile-tool-active) .shell-app__content,\n:host(.shell-app--mobile-sheet-nav-open) .shell-app__content,\n:host(.shell-app--mobile-sheet-nav-open) .shell-app__tools {\n  visibility: hidden;\n}\n",
       "type": "registry:ui"
     },
     {

package/dist/styles/prose.css

@@ -51,6 +51,13 @@
 }
 
 :where(.ds-prose) :where(h3, h4):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  font-size: var(--typography-fontsize-md);
+  line-height: var(--typography-lineheight-md);
+  font-weight: var(--typography-weight-medium);
+  letter-spacing: var(--typography-letterspacing-negative-half);
+}
+
+:where(.ds-prose) :where(h2):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
   font-size: var(--typography-fontsize-lg);
   line-height: var(--typography-lineheight-lg);
   letter-spacing: var(--typography-letterspacing-negative);
@@ -95,6 +102,19 @@
   padding-inline-start: var(--dimension-space-300);
 }
 
+:where(.ds-prose) :where(ol > li):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  padding-block-end: var(--dimension-space-100);
+}
+
+:where(.ds-prose)
+  :where(ol > li:has(> :is(h3, h4):first-child)):not(
+    :where([data-ds-prose='off'], [data-ds-prose='off'] *)
+  )::marker {
+  color: var(--color-foreground-primary);
+  font-size: var(--typography-fontsize-md);
+  font-weight: var(--typography-weight-medium);
+}
+
 :where(.ds-prose)
   :where(li > ul, li > ol):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
   margin-block-start: var(--dimension-space-050);