dap-design-system 0.62.4 → 0.63.1

package/dist/components/toc/toc.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"toc.component.js","sources":["../../../src/components/toc/toc.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { PropertyValueMap, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { anchorClass } from '@/common/const'\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { SizedMixin } from '@/internal/mixin/sizedMixin'\nimport { t } from '@/localization/localization'\n\nimport styles from './toc.scss?inline'\n\ntype Heading = { level: number; id: any; text: any }\n\n/**\n * `dap-ds-toc`\n * @summary A table of contents (TOC) is a list of links that allows users to quickly navigate to sections within a document.\n * @element dap-ds-toc\n * @title - toc\n *\n * @property { 'xs' | 'sm' | 'md' | 'lg' } size - The size of the TOC. Default is `lg.\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\").\n *\n * @event {{ selectedItem: HTMLAnchorElement, anchorElement: IntersectionObserverEntry | HTMLElement }} dds-anchor-change - Event that is triggered when the anchor changes.\n *\n * @csspart base - The main container of the toc.\n *\n * @cssproperty --dds-toc-border-width - Width of the TOC border. (default: var(--dds-border-width-base))\n * @cssproperty --dds-toc-border-color - Color of the TOC border. (default: var(--dds-border-neutral-divider))\n * @cssproperty --dds-toc-title-color - Color of the TOC title. (default: var(--dds-text-neutral-strong))\n * @cssproperty --dds-toc-title-font-size - Font size of the TOC title. (default: var(--dds-font-base))\n * @cssproperty --dds-toc-title-font-weight - Font weight of the TOC title. (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-toc-title-line-height - Line height of the TOC title. (default: 1.25)\n * @cssproperty --dds-toc-link-color - Color of the TOC links. (default: var(--dds-button-subtle-text-neutral-enabled))\n * @cssproperty --dds-toc-link-active-color - Color of the active TOC link. (default: var(--dds-button-subtle-text-enabled))\n * @cssproperty --dds-toc-link-border-color - Border color of the active TOC link. (default: var(--dds-border-brand-base))\n * @cssproperty --dds-toc-link-line-height - Line height of the TOC links. (default: 1.2)\n * @cssproperty --dds-toc-link-padding - Padding of the TOC links. (default: var(--dds-spacing-200))\n * @cssproperty --dds-toc-indent-level-0 - Indent level of the TOC items. (default: var(--dds-spacing-400))\n * @cssproperty --dds-toc-indent-level-1 - Indent level of the TOC items. (default: var(--dds-spacing-800))\n * @cssproperty --dds-toc-indent-level-2 - Indent level of the TOC items. (default: var(--dds-spacing-1200))\n * @cssproperty --dds-toc-indent-level-3 - Indent level of the TOC items. (default: var(--dds-spacing-1600))\n * @cssproperty --dds-toc-indent-level-4 - Indent level of the TOC items. (default: var(--dds-spacing-2000))\n * @cssproperty --dds-toc-indent-level-5 - Indent level of the TOC items. (default: var(--dds-spacing-2400))\n */\nexport default class DapDSTOC extends SizedMixin(DdsElement) {\n  static tagName = 'dap-ds-toc'\n\n  /** The root element to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#root) */\n  @property() root: string = ''\n\n  /** The margin around the root element to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) */\n  @property() rootMargin: string = '0px 0px -80% 0px'\n\n  /** The margin around the last anchor to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) */\n  @property() lastAnchorRootMargin: string = '0px 0px -50% 0px'\n  /** The threshold to trigger [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold) */\n  @property({ type: Array }) threshold: number[] = [0, 0.1, 0.25, 0.5, 0.75, 1]\n\n  /** The minimum heading level to include in the TOC. The default value is `2`. */\n  @property({ type: Number }) minHeadingLevel: number = 2\n\n  /** The maximum heading level to include in the TOC. The default value is `3`. */\n  @property({ type: Number }) maxHeadingLevel: number = 3\n\n  /** Whether to indent the TOC items. */\n  @property({ type: Boolean }) noIndent: boolean = false\n\n  /** The header of the TOC. */\n  @property() header: string\n\n  private _observer: IntersectionObserver\n  private _lastAnchorObserver: IntersectionObserver\n  private _anchors: HTMLElement[]\n  private _activeAnchor: HTMLAnchorElement\n  private _selectors: string[] = []\n  private _items: Heading[]\n  private _intersectionData: Map<\n    HTMLElement,\n    {\n      isIntersecting: boolean\n      intersectionRatio: number\n      boundingRect: DOMRect\n    }\n  > = new Map()\n  private _debounceTimer: number | null = null\n\n  static readonly styles = unsafeCSS(styles)\n\n  constructor() {\n    super()\n    // Use multiple thresholds for more precise intersection detection\n    this.threshold = [0.1]\n    this.size = 'lg'\n  }\n\n  get activeAnchor() {\n    return this._activeAnchor\n  }\n\n  get anchors() {\n    return this._anchors\n  }\n\n  get items() {\n    return this._items\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    const options = {\n      root: this.root ? document.querySelector(this.root) : null,\n      rootMargin: this.rootMargin,\n      threshold: this.threshold,\n    }\n\n    this._observer = new IntersectionObserver(this._handleIntersect, options)\n\n    this._lastAnchorObserver = new IntersectionObserver(this._handleIntersect, {\n      ...options,\n      rootMargin: this.lastAnchorRootMargin,\n    })\n\n    window.addEventListener('scroll', this.onScroll)\n  }\n\n  protected async firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): Promise<void> {\n    super.firstUpdated(_changedProperties)\n    await this.renderTree()\n  }\n\n  async attributeChangedCallback(name: string, oldValue: any, newValue: any) {\n    super.attributeChangedCallback(name, oldValue, newValue)\n    await this.renderTree()\n  }\n\n  async updated(changedProperties: Map<PropertyKey, unknown>) {\n    super.updated(changedProperties)\n    await this.renderTree()\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    if (this._observer) {\n      this._observer?.disconnect()\n      this._lastAnchorObserver?.disconnect()\n      window.removeEventListener('scroll', this.onScroll)\n    }\n  }\n\n  private readonly onScroll = () => {\n    if (\n      this._anchors &&\n      this._anchors.length > 0 &&\n      Math.round(window.scrollY + window.innerHeight) ===\n        document.body.scrollHeight\n    ) {\n      const entry = this._anchors[this._anchors.length - 1]\n      const link = this.shadowRoot!.querySelector(`[href=\"#${entry.id}\"`)\n      if (link) {\n        this.setActiveAnchor(link as HTMLAnchorElement, link as HTMLElement)\n      }\n    }\n  }\n\n  async renderTree() {\n    this._anchors = this.getAnchors(\n      !this.minHeadingLevel ? 2 : this.minHeadingLevel,\n      !this.maxHeadingLevel ? 3 : this.maxHeadingLevel,\n    )\n\n    if (this._anchors.length === 0 || !this._anchors) {\n      return\n    }\n\n    this._anchors.forEach((anchor, index) => {\n      if (index === this._anchors.length - 1)\n        this._lastAnchorObserver?.observe(anchor)\n      else {\n        this._observer?.observe(anchor)\n      }\n    })\n\n    this._items = await this.getHeaders()\n    const tree = this.buildTree(this._items)\n\n    const baseElement = document.createElement('div')\n    baseElement.setAttribute('part', 'base')\n    baseElement.classList.add('toc')\n\n    const base = `\n        <span class=\"toc-title toc-title--${this.effectiveSize}\">${this.header ?? t('tocTitle')}</span>\n        <nav aria-label='${this.header ?? t('tocTitle')}''>${tree}</nav>`\n\n    baseElement.innerHTML = base\n\n    if (!this.shadowRoot) return\n\n    this.shadowRoot.removeChild(this.shadowRoot.childNodes[0])\n    this.shadowRoot.appendChild(baseElement)\n  }\n\n  getAnchors(minHeadingLevel: number, maxHeadingLevel: number): HTMLElement[] {\n    this._selectors = []\n    for (let i = minHeadingLevel; i <= maxHeadingLevel; i += 1) {\n      this._selectors.push(`h${i}.${anchorClass}`)\n      this._selectors.push(`dap-ds-typography[variant=h${i}][anchor]`)\n    }\n\n    return Array.from(document.querySelectorAll(this._selectors.join()))\n  }\n\n  setActiveAnchor(\n    element: HTMLAnchorElement,\n    entry: IntersectionObserverEntry | HTMLElement,\n  ) {\n    this._activeAnchor?.removeAttribute('aria-current')\n    element.setAttribute('aria-current', 'true')\n    this._activeAnchor = element\n\n    this.emit('dds-anchor-change', {\n      selectedItem: element,\n      anchorElement: entry,\n    })\n  }\n\n  private readonly getHeaders = async () => {\n    const headers: Heading[] = []\n\n    await this._anchors.forEach(async (el, index) => {\n      await (el as any).updateComplete\n\n      const textContent =\n        el.getAttribute('data-text') ||\n        el.innerText?.trim() ||\n        el.textContent?.trim() ||\n        ''\n      const id =\n        el.id ||\n        el.innerText?.toLowerCase().split(' ').join('-') ||\n        textContent.toLowerCase().split(' ').join('-')\n\n      if (!el.id && id) {\n        let count = 0\n\n        if (this._anchors.some(anchor => anchor.id === id)) {\n          count++\n        }\n\n        while (this._anchors.some(anchor => anchor.id === `${id}-${count}`)) {\n          count++\n        }\n\n        if (count === 0) {\n          el.setAttribute('id', id)\n        } else {\n          el.setAttribute('id', `${id}-${count}`)\n        }\n      }\n\n      let level = this._selectors.indexOf(\n        `${el.tagName.toLowerCase()}.${anchorClass}`,\n      )\n\n      if (level === -1) {\n        level = this._selectors.indexOf(\n          `dap-ds-typography[variant=${el.getAttribute('variant')}][anchor]`,\n        )\n      }\n\n      headers[index] = {\n        id,\n        text: textContent,\n        level: Math.floor(level / 2),\n      }\n    })\n\n    return headers\n  }\n\n  buildTree(headers: any[]) {\n    const list: string[] = []\n    let nextLevelHeaders: any[] = []\n    let lastLevel = -1\n\n    if (headers.length === 0) {\n      return ''\n    }\n\n    const buildSubTree = () => {\n      if (nextLevelHeaders.length > 0) {\n        list[list.length - 1] += this.buildTree(nextLevelHeaders)\n      }\n    }\n\n    headers.forEach((h: Heading) => {\n      if (lastLevel !== -1 && lastLevel < h.level) {\n        nextLevelHeaders.push(h)\n        return\n      }\n\n      buildSubTree()\n\n      lastLevel = h.level\n      list.push(\n        `<a href=\"#${h.id}\" class=\"toc-link toc-link--${this.effectiveSize}\">${h.text}<span class=\"toc-link__high-contrast\"></span></a>`,\n      )\n      nextLevelHeaders = []\n    })\n\n    buildSubTree()\n\n    const listHTML = list\n      .map(\n        i => `<li class=\"toc-item ${'toc-item-level-' + lastLevel}\">${i}</li>`,\n      )\n      .join('')\n\n    return `<ul class=\"${clsx({\n      'toc--no-indent': this.noIndent,\n    })}\">${listHTML}</ul>`\n  }\n\n  private readonly _handleIntersect = (\n    entries: IntersectionObserverEntry[],\n  ) => {\n    // Update intersection data for all entries\n    entries.forEach(entry => {\n      this._intersectionData.set(entry.target as HTMLElement, {\n        isIntersecting: entry.isIntersecting,\n        intersectionRatio: entry.intersectionRatio,\n        boundingRect: entry.boundingClientRect,\n      })\n    })\n\n    // Debounce the active anchor selection to prevent rapid changes\n    if (this._debounceTimer) {\n      clearTimeout(this._debounceTimer)\n    }\n\n    this._debounceTimer = window.setTimeout(() => {\n      this._updateActiveAnchor()\n    }, 50) // 50ms debounce\n  }\n\n  private readonly _updateActiveAnchor = () => {\n    const viewportCenter = window.innerHeight / 2\n    let bestAnchor: HTMLElement | null = null\n    let bestScore = -Infinity\n\n    // Find the best anchor based on intersection ratio and distance from viewport center\n    this._intersectionData.forEach((data, anchor) => {\n      if (!data.isIntersecting) return\n\n      const distanceFromCenter = Math.abs(\n        data.boundingRect.top + data.boundingRect.height / 2 - viewportCenter,\n      )\n      const intersectionScore = data.intersectionRatio\n\n      // Calculate a score that prioritizes elements closer to viewport center\n      // and with higher intersection ratios\n      const score =\n        intersectionScore - (distanceFromCenter / window.innerHeight) * 0.5\n\n      if (score > bestScore) {\n        bestScore = score\n        bestAnchor = anchor as HTMLElement\n      }\n    })\n\n    if (bestAnchor && (bestAnchor as HTMLElement).id) {\n      const link = this.shadowRoot!.querySelector(\n        `[href=\"#${(bestAnchor as HTMLElement).id}\"`,\n      )\n      if (link && link !== this._activeAnchor) {\n        this.setActiveAnchor(\n          link as HTMLAnchorElement,\n          bestAnchor as HTMLElement,\n        )\n      }\n    }\n  }\n}\n"],"names":["_DapDSTOC","SizedMixin","DdsElement","entry","link","__async","headers","el","index","textContent","_a","_b","id","_c","count","anchor","level","anchorClass","entries","viewportCenter","bestAnchor","bestScore","data","distanceFromCenter","score","options","__spreadProps","__spreadValues","_changedProperties","__superGet","name","oldValue","newValue","changedProperties","tree","baseElement","base","t","minHeadingLevel","maxHeadingLevel","i","element","list","nextLevelHeaders","lastLevel","buildSubTree","h","listHTML","clsx","unsafeCSS","styles","DapDSTOC","__decorateClass","property"],"mappings":"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"}
+{"version":3,"file":"toc.component.js","sources":["../../../src/components/toc/toc.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { PropertyValueMap, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { anchorClass } from '@/common/const'\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { SizedMixin } from '@/internal/mixin/sizedMixin'\nimport { t } from '@/localization/localization'\n\nimport styles from './toc.scss?inline'\n\ntype Heading = { level: number; id: any; text: any }\n\n/**\n * `dap-ds-toc`\n * @summary A table of contents (TOC) is a list of links that allows users to quickly navigate to sections within a document.\n * @element dap-ds-toc\n * @title - toc\n *\n * @property { 'xs' | 'sm' | 'md' | 'lg' } size - The size of the TOC. Default is `lg.\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\").\n *\n * @event {{ selectedItem: HTMLAnchorElement, anchorElement: IntersectionObserverEntry | HTMLElement }} dds-anchor-change - Event that is triggered when the anchor changes.\n *\n * @csspart base - The main container of the toc.\n * @csspart title - The title of the toc.\n * @csspart nav - The navigation element holding the links.\n *\n * @cssproperty --dds-toc-border-width - Width of the TOC border. (default: var(--dds-border-width-base))\n * @cssproperty --dds-toc-border-color - Color of the TOC border. (default: var(--dds-border-neutral-divider))\n * @cssproperty --dds-toc-title-color - Color of the TOC title. (default: var(--dds-text-neutral-strong))\n * @cssproperty --dds-toc-title-font-size - Font size of the TOC title. (default: var(--dds-font-base))\n * @cssproperty --dds-toc-title-font-weight - Font weight of the TOC title. (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-toc-title-line-height - Line height of the TOC title. (default: 1.25)\n * @cssproperty --dds-toc-link-color - Color of the TOC links. (default: var(--dds-button-subtle-text-neutral-enabled))\n * @cssproperty --dds-toc-link-active-color - Color of the active TOC link. (default: var(--dds-button-subtle-text-enabled))\n * @cssproperty --dds-toc-link-border-color - Border color of the active TOC link. (default: var(--dds-border-brand-base))\n * @cssproperty --dds-toc-link-line-height - Line height of the TOC links. (default: 1.2)\n * @cssproperty --dds-toc-link-padding - Padding of the TOC links. (default: var(--dds-spacing-200))\n * @cssproperty --dds-toc-indent-level-0 - Indent level of the TOC items. (default: var(--dds-spacing-400))\n * @cssproperty --dds-toc-indent-level-1 - Indent level of the TOC items. (default: var(--dds-spacing-800))\n * @cssproperty --dds-toc-indent-level-2 - Indent level of the TOC items. (default: var(--dds-spacing-1200))\n * @cssproperty --dds-toc-indent-level-3 - Indent level of the TOC items. (default: var(--dds-spacing-1600))\n * @cssproperty --dds-toc-indent-level-4 - Indent level of the TOC items. (default: var(--dds-spacing-2000))\n * @cssproperty --dds-toc-indent-level-5 - Indent level of the TOC items. (default: var(--dds-spacing-2400))\n */\nexport default class DapDSTOC extends SizedMixin(DdsElement) {\n  static tagName = 'dap-ds-toc'\n\n  /** The root element to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#root) */\n  @property() root: string = ''\n\n  /** The margin around the root element to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) */\n  @property() rootMargin: string = '0px 0px -80% 0px'\n\n  /** The margin around the last anchor to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) */\n  @property() lastAnchorRootMargin: string = '0px 0px -50% 0px'\n  /** The threshold to trigger [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold) */\n  @property({ type: Array }) threshold: number[] = [0, 0.1, 0.25, 0.5, 0.75, 1]\n\n  /** The minimum heading level to include in the TOC. The default value is `2`. */\n  @property({ type: Number }) minHeadingLevel: number = 2\n\n  /** The maximum heading level to include in the TOC. The default value is `3`. */\n  @property({ type: Number }) maxHeadingLevel: number = 3\n\n  /** Whether to indent the TOC items. */\n  @property({ type: Boolean }) noIndent: boolean = false\n\n  /** The header of the TOC. */\n  @property() header: string\n\n  private _observer: IntersectionObserver\n  private _lastAnchorObserver: IntersectionObserver\n  private _anchors: HTMLElement[]\n  private _activeAnchor: HTMLAnchorElement\n  private _selectors: string[] = []\n  private _items: Heading[]\n  private _intersectionData: Map<\n    HTMLElement,\n    {\n      isIntersecting: boolean\n      intersectionRatio: number\n      boundingRect: DOMRect\n    }\n  > = new Map()\n  private _debounceTimer: number | null = null\n\n  static readonly styles = unsafeCSS(styles)\n\n  constructor() {\n    super()\n    // Use multiple thresholds for more precise intersection detection\n    this.threshold = [0.1]\n    this.size = 'lg'\n  }\n\n  get activeAnchor() {\n    return this._activeAnchor\n  }\n\n  get anchors() {\n    return this._anchors\n  }\n\n  get items() {\n    return this._items\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    const options = {\n      root: this.root ? document.querySelector(this.root) : null,\n      rootMargin: this.rootMargin,\n      threshold: this.threshold,\n    }\n\n    this._observer = new IntersectionObserver(this._handleIntersect, options)\n\n    this._lastAnchorObserver = new IntersectionObserver(this._handleIntersect, {\n      ...options,\n      rootMargin: this.lastAnchorRootMargin,\n    })\n\n    window.addEventListener('scroll', this.onScroll)\n  }\n\n  protected async firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): Promise<void> {\n    super.firstUpdated(_changedProperties)\n    await this.renderTree()\n  }\n\n  async attributeChangedCallback(name: string, oldValue: any, newValue: any) {\n    super.attributeChangedCallback(name, oldValue, newValue)\n    await this.renderTree()\n  }\n\n  async updated(changedProperties: Map<PropertyKey, unknown>) {\n    super.updated(changedProperties)\n    await this.renderTree()\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    if (this._observer) {\n      this._observer?.disconnect()\n      this._lastAnchorObserver?.disconnect()\n      window.removeEventListener('scroll', this.onScroll)\n    }\n  }\n\n  private readonly onScroll = () => {\n    if (\n      this._anchors &&\n      this._anchors.length > 0 &&\n      Math.round(window.scrollY + window.innerHeight) ===\n        document.body.scrollHeight\n    ) {\n      const entry = this._anchors[this._anchors.length - 1]\n      const link = this.shadowRoot!.querySelector(`[href=\"#${entry.id}\"`)\n      if (link) {\n        this.setActiveAnchor(link as HTMLAnchorElement, link as HTMLElement)\n      }\n    }\n  }\n\n  async renderTree() {\n    this._anchors = this.getAnchors(\n      !this.minHeadingLevel ? 2 : this.minHeadingLevel,\n      !this.maxHeadingLevel ? 3 : this.maxHeadingLevel,\n    )\n\n    if (this._anchors.length === 0 || !this._anchors) {\n      return\n    }\n\n    this._anchors.forEach((anchor, index) => {\n      if (index === this._anchors.length - 1)\n        this._lastAnchorObserver?.observe(anchor)\n      else {\n        this._observer?.observe(anchor)\n      }\n    })\n\n    this._items = await this.getHeaders()\n    const tree = this.buildTree(this._items)\n\n    const baseElement = document.createElement('div')\n    baseElement.setAttribute('part', 'base')\n    baseElement.classList.add('toc')\n\n    const base = `\n        <span part=\"title\" class=\"toc-title toc-title--${this.effectiveSize}\">${this.header ?? t('tocTitle')}</span>\n        <nav part=\"nav\" aria-label='${this.header ?? t('tocTitle')}'>${tree}</nav>`\n\n    baseElement.innerHTML = base\n\n    if (!this.shadowRoot) return\n\n    // Idempotent: remove any previously-rendered toc base, then append the fresh\n    // one. `renderTree` runs on firstUpdated + updated + attributeChangedCallback,\n    // so removing `childNodes[0]` and appending (the old approach) accumulated\n    // duplicate bases — most visibly under SSR hydration (triple-render).\n    this.shadowRoot.querySelectorAll('.toc').forEach(node => node.remove())\n    this.shadowRoot.appendChild(baseElement)\n  }\n\n  getAnchors(minHeadingLevel: number, maxHeadingLevel: number): HTMLElement[] {\n    this._selectors = []\n    for (let i = minHeadingLevel; i <= maxHeadingLevel; i += 1) {\n      this._selectors.push(`h${i}.${anchorClass}`)\n      this._selectors.push(`dap-ds-typography[variant=h${i}][anchor]`)\n    }\n\n    return Array.from(document.querySelectorAll(this._selectors.join()))\n  }\n\n  setActiveAnchor(\n    element: HTMLAnchorElement,\n    entry: IntersectionObserverEntry | HTMLElement,\n  ) {\n    this._activeAnchor?.removeAttribute('aria-current')\n    element.setAttribute('aria-current', 'true')\n    this._activeAnchor = element\n\n    this.emit('dds-anchor-change', {\n      selectedItem: element,\n      anchorElement: entry,\n    })\n  }\n\n  private readonly getHeaders = async () => {\n    const headers: Heading[] = []\n\n    await this._anchors.forEach(async (el, index) => {\n      await (el as any).updateComplete\n\n      const textContent =\n        el.getAttribute('data-text') ||\n        el.innerText?.trim() ||\n        el.textContent?.trim() ||\n        ''\n      const id =\n        el.id ||\n        el.innerText?.toLowerCase().split(' ').join('-') ||\n        textContent.toLowerCase().split(' ').join('-')\n\n      if (!el.id && id) {\n        let count = 0\n\n        if (this._anchors.some(anchor => anchor.id === id)) {\n          count++\n        }\n\n        while (this._anchors.some(anchor => anchor.id === `${id}-${count}`)) {\n          count++\n        }\n\n        if (count === 0) {\n          el.setAttribute('id', id)\n        } else {\n          el.setAttribute('id', `${id}-${count}`)\n        }\n      }\n\n      let level = this._selectors.indexOf(\n        `${el.tagName.toLowerCase()}.${anchorClass}`,\n      )\n\n      if (level === -1) {\n        level = this._selectors.indexOf(\n          `dap-ds-typography[variant=${el.getAttribute('variant')}][anchor]`,\n        )\n      }\n\n      headers[index] = {\n        id,\n        text: textContent,\n        level: Math.floor(level / 2),\n      }\n    })\n\n    return headers\n  }\n\n  buildTree(headers: any[]) {\n    const list: string[] = []\n    let nextLevelHeaders: any[] = []\n    let lastLevel = -1\n\n    if (headers.length === 0) {\n      return ''\n    }\n\n    const buildSubTree = () => {\n      if (nextLevelHeaders.length > 0) {\n        list[list.length - 1] += this.buildTree(nextLevelHeaders)\n      }\n    }\n\n    headers.forEach((h: Heading) => {\n      if (lastLevel !== -1 && lastLevel < h.level) {\n        nextLevelHeaders.push(h)\n        return\n      }\n\n      buildSubTree()\n\n      lastLevel = h.level\n      list.push(\n        `<a href=\"#${h.id}\" class=\"toc-link toc-link--${this.effectiveSize}\">${h.text}<span class=\"toc-link__high-contrast\"></span></a>`,\n      )\n      nextLevelHeaders = []\n    })\n\n    buildSubTree()\n\n    const listHTML = list\n      .map(\n        i => `<li class=\"toc-item ${'toc-item-level-' + lastLevel}\">${i}</li>`,\n      )\n      .join('')\n\n    return `<ul class=\"${clsx({\n      'toc--no-indent': this.noIndent,\n    })}\">${listHTML}</ul>`\n  }\n\n  private readonly _handleIntersect = (\n    entries: IntersectionObserverEntry[],\n  ) => {\n    // Update intersection data for all entries\n    entries.forEach(entry => {\n      this._intersectionData.set(entry.target as HTMLElement, {\n        isIntersecting: entry.isIntersecting,\n        intersectionRatio: entry.intersectionRatio,\n        boundingRect: entry.boundingClientRect,\n      })\n    })\n\n    // Debounce the active anchor selection to prevent rapid changes\n    if (this._debounceTimer) {\n      clearTimeout(this._debounceTimer)\n    }\n\n    this._debounceTimer = window.setTimeout(() => {\n      this._updateActiveAnchor()\n    }, 50) // 50ms debounce\n  }\n\n  private readonly _updateActiveAnchor = () => {\n    const viewportCenter = window.innerHeight / 2\n    let bestAnchor: HTMLElement | null = null\n    let bestScore = -Infinity\n\n    // Find the best anchor based on intersection ratio and distance from viewport center\n    this._intersectionData.forEach((data, anchor) => {\n      if (!data.isIntersecting) return\n\n      const distanceFromCenter = Math.abs(\n        data.boundingRect.top + data.boundingRect.height / 2 - viewportCenter,\n      )\n      const intersectionScore = data.intersectionRatio\n\n      // Calculate a score that prioritizes elements closer to viewport center\n      // and with higher intersection ratios\n      const score =\n        intersectionScore - (distanceFromCenter / window.innerHeight) * 0.5\n\n      if (score > bestScore) {\n        bestScore = score\n        bestAnchor = anchor as HTMLElement\n      }\n    })\n\n    if (bestAnchor && (bestAnchor as HTMLElement).id) {\n      const link = this.shadowRoot!.querySelector(\n        `[href=\"#${(bestAnchor as HTMLElement).id}\"`,\n      )\n      if (link && link !== this._activeAnchor) {\n        this.setActiveAnchor(\n          link as HTMLAnchorElement,\n          bestAnchor as HTMLElement,\n        )\n      }\n    }\n  }\n}\n"],"names":["_DapDSTOC","SizedMixin","DdsElement","entry","link","__async","headers","el","index","textContent","_a","_b","id","_c","count","anchor","level","anchorClass","entries","viewportCenter","bestAnchor","bestScore","data","distanceFromCenter","score","options","__spreadProps","__spreadValues","_changedProperties","__superGet","name","oldValue","newValue","changedProperties","tree","baseElement","base","t","node","minHeadingLevel","maxHeadingLevel","i","element","list","nextLevelHeaders","lastLevel","buildSubTree","h","listHTML","clsx","unsafeCSS","styles","DapDSTOC","__decorateClass","property"],"mappings":"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"}

package/dist/components/toggle-button/toggle-button.component.js

@@ -1,19 +1,16 @@
 import { clsx as u } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as a } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { ifDefined as p } from "../../node_modules/lit-html/directives/if-defined.js";
-import { html as f } from "../../node_modules/lit-html/static.js";
-import { GenericFormElement as c } from "../../internal/mixin/genericFormElement.js";
-import b from "./_styles/toggle-button.scss.js";
-import { unsafeCSS as m } from "../../node_modules/@lit/reactive-element/css-tag.js";
+import { unsafeCSS as f } from "lit";
+import { property as a } from "lit/decorators.js";
+import { ifDefined as p } from "lit/directives/if-defined.js";
+import { html as c } from "lit/static-html.js";
+import { GenericFormElement as b } from "../../internal/mixin/genericFormElement.js";
+import m from "./_styles/toggle-button.scss.js";
 var g = Object.defineProperty, l = (d, t, i, h) => {
   for (var e = void 0, o = d.length - 1, n; o >= 0; o--)
     (n = d[o]) && (e = n(t, i, e) || e);
   return e && g(t, i, e), e;
 };
-const r = class r extends c {
+const r = class r extends b {
   constructor() {
     super(), this.active = !1, this.shape = "button", this.sizeChildren = "true", this.size = "md";
   }
@@ -43,7 +40,7 @@ const r = class r extends c {
     this.disabled;
   }
   render() {
-    return f`
+    return c`
       <button
         part="base"
         .disabled=${this.disabled}
@@ -68,7 +65,7 @@ const r = class r extends c {
     `;
   }
 };
-r.tagName = "dap-ds-toggle-button", r.styles = m(b);
+r.tagName = "dap-ds-toggle-button", r.styles = f(m);
 let s = r;
 l([
   a({ type: Boolean, reflect: !0 })

package/dist/components/toggle-button/toggle-button.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-button.component.js","sources":["../../../src/components/toggle-button/toggle-button.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { PropertyValues, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { GenericFormElement } from '@/internal/mixin/genericFormElement'\n\nimport { ButtonShape } from '../../common/types'\nimport styles from './_styles/toggle-button.scss?inline'\n\n/**\n * `dap-ds-toggle-button` is a custom toggle button component.\n * @element dap-ds-toggle-button\n * @summary A toggle button is a button that can be toggled on (active) or off (inactive).\n * @title - Toggle button\n *\n * @property { 'xs' | 'sm' | 'md' | 'lg' } size - The size of the toggle button. Default is `md`\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\")\n *\n * @slot - The content of the toggle button.\n *\n * @csspart base - The main button container.\n * @csspart high-contrast - The high contrast part of the button.\n *\n * @cssproperty --dds-toggle-button-min-width-lg - Minimum width of the large toggle button (default: var(--dds-spacing-2400))\n * @cssproperty --dds-toggle-button-min-width-md - Minimum width of the medium toggle button (default: var(--dds-spacing-2000))\n * @cssproperty --dds-toggle-button-min-width-sm - Minimum width of the small toggle button (default: var(--dds-spacing-1200))\n * @cssproperty --dds-toggle-button-min-width-xs - Minimum width of the extra small toggle button (default: var(--dds-spacing-1200))\n * @cssproperty --dds-toggle-button-height-lg - Height of the large toggle button (default: var(--dds-spacing-1200))\n * @cssproperty --dds-toggle-button-height-md - Height of the medium toggle button (default: var(--dds-spacing-1000))\n * @cssproperty --dds-toggle-button-height-sm - Height of the small toggle button (default: var(--dds-spacing-800))\n * @cssproperty --dds-toggle-button-height-xs - Height of the extra small toggle button (default: var(--dds-spacing-600))\n * @cssproperty --dds-toggle-button-padding-lg - Padding of the large toggle button (default: var(--dds-spacing-300) var(--dds-spacing-400))\n * @cssproperty --dds-toggle-button-padding-md - Padding of the medium toggle button (default: var(--dds-spacing-300))\n * @cssproperty --dds-toggle-button-padding-sm - Padding of the small toggle button (default: var(--dds-spacing-200))\n * @cssproperty --dds-toggle-button-padding-xs - Padding of the extra small toggle button (default: var(--dds-spacing-150) var(--dds-spacing-200))\n * @cssproperty --dds-toggle-button-font-size-lg - Font size of the large toggle button (default: 1.125rem)\n * @cssproperty --dds-toggle-button-font-size-md - Font size of the medium toggle button (default: 1rem)\n * @cssproperty --dds-toggle-button-font-size-sm - Font size of the small toggle button (default: 0.875rem)\n * @cssproperty --dds-toggle-button-font-size-xs - Font size of the extra small toggle button (default: var(--dds-font-xs))\n * @cssproperty --dds-toggle-button-border-enabled - Border color in enabled state (default: var(--dds-button-toggle-border-enabled))\n * @cssproperty --dds-toggle-button-background-enabled - Background color in enabled state (default: var(--dds-button-toggle-background-enabled))\n * @cssproperty --dds-toggle-button-content-enabled - Content/text color in enabled state (default: var(--dds-button-toggle-content-enabled))\n * @cssproperty --dds-toggle-button-border-hover - Border color in hover state (default: var(--dds-button-toggle-border-hover))\n * @cssproperty --dds-toggle-button-background-hover - Background color in hover state (default: var(--dds-button-toggle-background-hover))\n * @cssproperty --dds-toggle-button-border-pressed - Border color in pressed state (default: var(--dds-button-toggle-border-pressed))\n * @cssproperty --dds-toggle-button-background-pressed - Background color in pressed state (default: var(--dds-button-toggle-background-pressed))\n * @cssproperty --dds-toggle-button-background-selected-enabled - Background color in selected enabled state (default: var(--dds-button-toggle-background-selected-enabled))\n * @cssproperty --dds-toggle-button-content-selected-enabled - Content/text color in selected enabled state (default: var(--dds-button-toggle-content-selected-enabled))\n * @cssproperty --dds-toggle-button-background-selected-hover - Background color in selected hover state (default: var(--dds-button-toggle-background-selected-hover))\n * @cssproperty --dds-toggle-button-background-selected-pressed - Background color in selected pressed state (default: var(--dds-button-toggle-background-selected-pressed))\n * @cssproperty --dds-toggle-button-border-disabled - Border color in disabled state (default: var(--dds-button-toggle-border-disabled))\n * @cssproperty --dds-toggle-button-background-disabled - Background color in disabled state (default: var(--dds-button-toggle-background-disabled))\n * @cssproperty --dds-toggle-button-content-disabled - Content/text color in disabled state (default: var(--dds-button-toggle-content-disabled))\n * @cssproperty --dds-toggle-button-highcontrast-border - High contrast border color (default: var(--dds-button-toggle-highcontrast-border))\n * @cssproperty --dds-toggle-button-highcontrast-border-hover - High contrast border color on hover (default: var(--dds-button-toggle-highcontrast-border-hover))\n *\n */\nexport default class DapDSToggleButton extends GenericFormElement {\n  static tagName = 'dap-ds-toggle-button'\n\n  constructor() {\n    super()\n    this.size = 'md'\n  }\n\n  /** Whether the button is active. */\n  @property({ type: Boolean, reflect: true }) active = false\n\n  /** The shape of the button\n   * @type { 'button' | 'circle' }\n   */\n  @property({ reflect: true }) shape: ButtonShape = 'button'\n\n  @property({ type: String }) sizeChildren = 'true'\n\n  static readonly styles = unsafeCSS(styles)\n\n  /** Maps effectiveSize from SizedMixin to toggle button visual size (xxs→xs). */\n  private get toggleButtonSize(): 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' {\n    return this.effectiveSize === 'xxs' ? 'xs' : this.effectiveSize\n  }\n\n  get focusElement(): HTMLButtonElement {\n    return this.shadowRoot?.querySelector('button') as HTMLButtonElement\n  }\n\n  protected firstUpdated(_changedProperties: PropertyValues): void {\n    super.firstUpdated(_changedProperties)\n    this._sizeSlottedChildren()\n  }\n\n  protected override updated(changedProperties: PropertyValues): void {\n    super.updated(changedProperties)\n    if (\n      changedProperties.has('size') ||\n      changedProperties.has('sizeMap') ||\n      changedProperties.has('sizeChildren')\n    ) {\n      this._sizeSlottedChildren()\n    }\n  }\n\n  private _sizeSlottedChildren(): void {\n    if (this.sizeChildren !== 'true') return\n    const slot = this.shadowRoot?.querySelector('slot')\n    slot?.assignedElements().forEach(el => {\n      el.setAttribute('size', this.toggleButtonSize)\n    })\n  }\n\n  private handleClick(): void {\n    if (this.disabled) {\n      return\n    }\n  }\n\n  render() {\n    return html`\n      <button\n        part=\"base\"\n        .disabled=${this.disabled}\n        aria-disabled=${this.disabled}\n        aria-label=${ifDefined(this.ariaLabel) || ''}\n        aria-pressed=${this.active}\n        .autofocus=${this.autofocus}\n        type=\"button\"\n        class=${clsx(\n          'toggle-button',\n          `toggle-button--${this.toggleButtonSize}`,\n          `toggle-button--${this.shape}`,\n          {\n            'toggle-button--active': this.active,\n            'toggle-button--disabled': this.disabled,\n          },\n        )}\n        @click=${this.handleClick}>\n        <div part=\"high-contrast\" class=\"toggle-button__highcontrast\"></div>\n        <slot></slot>\n      </button>\n    `\n  }\n}\n"],"names":["_DapDSToggleButton","GenericFormElement","_a","_changedProperties","changedProperties","slot","el","html","ifDefined","clsx","unsafeCSS","styles","DapDSToggleButton","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;;AA2DA,MAAqBA,IAArB,MAAqBA,UAA0BC,EAAmB;AAAA,EAGhE,cAAc;AACN,UAAA,GAK6C,KAAA,SAAA,IAKH,KAAA,QAAA,UAEP,KAAA,eAAA,QAXzC,KAAK,OAAO;AAAA,EAAA;AAAA;AAAA,EAgBd,IAAY,mBAA6D;AACvE,WAAO,KAAK,kBAAkB,QAAQ,OAAO,KAAK;AAAA,EAAA;AAAA,EAGpD,IAAI,eAAkC;;AAC7B,YAAAC,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAAc;AAAA,EAAQ;AAAA,EAGtC,aAAaC,GAA0C;AAC/D,UAAM,aAAaA,CAAkB,GACrC,KAAK,qBAAqB;AAAA,EAAA;AAAA,EAGT,QAAQC,GAAyC;AAClE,UAAM,QAAQA,CAAiB,IAE7BA,EAAkB,IAAI,MAAM,KAC5BA,EAAkB,IAAI,SAAS,KAC/BA,EAAkB,IAAI,cAAc,MAEpC,KAAK,qBAAqB;AAAA,EAC5B;AAAA,EAGM,uBAA6B;;AAC/B,QAAA,KAAK,iBAAiB,OAAQ;AAClC,UAAMC,KAAOH,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAAc;AACtC,IAAAG,KAAA,QAAAA,EAAA,mBAAmB,QAAQ,CAAMC,MAAA;AAClC,MAAAA,EAAA,aAAa,QAAQ,KAAK,gBAAgB;AAAA,IAAA;AAAA,EAC9C;AAAA,EAGK,cAAoB;AAC1B,IAAI,KAAK;AAAA,EAET;AAAA,EAGF,SAAS;AACA,WAAAC;AAAAA;AAAAA;AAAAA,oBAGS,KAAK,QAAQ;AAAA,wBACT,KAAK,QAAQ;AAAA,qBAChBC,EAAU,KAAK,SAAS,KAAK,EAAE;AAAA,uBAC7B,KAAK,MAAM;AAAA,qBACb,KAAK,SAAS;AAAA;AAAA,gBAEnBC;AAAA,MACN;AAAA,MACA,kBAAkB,KAAK,gBAAgB;AAAA,MACvC,kBAAkB,KAAK,KAAK;AAAA,MAC5B;AAAA,QACE,yBAAyB,KAAK;AAAA,QAC9B,2BAA2B,KAAK;AAAA,MAAA;AAAA,IAEnC,CAAA;AAAA,iBACQ,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMjC;AAnFET,EAAO,UAAU,wBAiBDA,EAAA,SAASU,EAAUC,CAAM;AAlB3C,IAAqBC,IAArBZ;AAS8Ca,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GATvBF,EASyB,WAAA,QAAA;AAKfC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GAdRF,EAcU,WAAA,OAAA;AAEDC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAhBPF,EAgBS,WAAA,cAAA;"}
+{"version":3,"file":"toggle-button.component.js","sources":["../../../src/components/toggle-button/toggle-button.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { PropertyValues, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { GenericFormElement } from '@/internal/mixin/genericFormElement'\n\nimport { ButtonShape } from '../../common/types'\nimport styles from './_styles/toggle-button.scss?inline'\n\n/**\n * `dap-ds-toggle-button` is a custom toggle button component.\n * @element dap-ds-toggle-button\n * @summary A toggle button is a button that can be toggled on (active) or off (inactive).\n * @title - Toggle button\n *\n * @property { 'xs' | 'sm' | 'md' | 'lg' } size - The size of the toggle button. Default is `md`\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\")\n *\n * @slot - The content of the toggle button.\n *\n * @csspart base - The main button container.\n * @csspart high-contrast - The high contrast part of the button.\n *\n * @cssproperty --dds-toggle-button-min-width-lg - Minimum width of the large toggle button (default: var(--dds-spacing-2400))\n * @cssproperty --dds-toggle-button-min-width-md - Minimum width of the medium toggle button (default: var(--dds-spacing-2000))\n * @cssproperty --dds-toggle-button-min-width-sm - Minimum width of the small toggle button (default: var(--dds-spacing-1200))\n * @cssproperty --dds-toggle-button-min-width-xs - Minimum width of the extra small toggle button (default: var(--dds-spacing-1200))\n * @cssproperty --dds-toggle-button-height-lg - Height of the large toggle button (default: var(--dds-spacing-1200))\n * @cssproperty --dds-toggle-button-height-md - Height of the medium toggle button (default: var(--dds-spacing-1000))\n * @cssproperty --dds-toggle-button-height-sm - Height of the small toggle button (default: var(--dds-spacing-800))\n * @cssproperty --dds-toggle-button-height-xs - Height of the extra small toggle button (default: var(--dds-spacing-600))\n * @cssproperty --dds-toggle-button-padding-lg - Padding of the large toggle button (default: var(--dds-spacing-300) var(--dds-spacing-400))\n * @cssproperty --dds-toggle-button-padding-md - Padding of the medium toggle button (default: var(--dds-spacing-300))\n * @cssproperty --dds-toggle-button-padding-sm - Padding of the small toggle button (default: var(--dds-spacing-200))\n * @cssproperty --dds-toggle-button-padding-xs - Padding of the extra small toggle button (default: var(--dds-spacing-150) var(--dds-spacing-200))\n * @cssproperty --dds-toggle-button-font-size-lg - Font size of the large toggle button (default: 1.125rem)\n * @cssproperty --dds-toggle-button-font-size-md - Font size of the medium toggle button (default: 1rem)\n * @cssproperty --dds-toggle-button-font-size-sm - Font size of the small toggle button (default: 0.875rem)\n * @cssproperty --dds-toggle-button-font-size-xs - Font size of the extra small toggle button (default: var(--dds-font-xs))\n * @cssproperty --dds-toggle-button-border-enabled - Border color in enabled state (default: var(--dds-button-toggle-border-enabled))\n * @cssproperty --dds-toggle-button-background-enabled - Background color in enabled state (default: var(--dds-button-toggle-background-enabled))\n * @cssproperty --dds-toggle-button-content-enabled - Content/text color in enabled state (default: var(--dds-button-toggle-content-enabled))\n * @cssproperty --dds-toggle-button-border-hover - Border color in hover state (default: var(--dds-button-toggle-border-hover))\n * @cssproperty --dds-toggle-button-background-hover - Background color in hover state (default: var(--dds-button-toggle-background-hover))\n * @cssproperty --dds-toggle-button-border-pressed - Border color in pressed state (default: var(--dds-button-toggle-border-pressed))\n * @cssproperty --dds-toggle-button-background-pressed - Background color in pressed state (default: var(--dds-button-toggle-background-pressed))\n * @cssproperty --dds-toggle-button-background-selected-enabled - Background color in selected enabled state (default: var(--dds-button-toggle-background-selected-enabled))\n * @cssproperty --dds-toggle-button-content-selected-enabled - Content/text color in selected enabled state (default: var(--dds-button-toggle-content-selected-enabled))\n * @cssproperty --dds-toggle-button-background-selected-hover - Background color in selected hover state (default: var(--dds-button-toggle-background-selected-hover))\n * @cssproperty --dds-toggle-button-background-selected-pressed - Background color in selected pressed state (default: var(--dds-button-toggle-background-selected-pressed))\n * @cssproperty --dds-toggle-button-border-disabled - Border color in disabled state (default: var(--dds-button-toggle-border-disabled))\n * @cssproperty --dds-toggle-button-background-disabled - Background color in disabled state (default: var(--dds-button-toggle-background-disabled))\n * @cssproperty --dds-toggle-button-content-disabled - Content/text color in disabled state (default: var(--dds-button-toggle-content-disabled))\n * @cssproperty --dds-toggle-button-highcontrast-border - High contrast border color (default: var(--dds-button-toggle-highcontrast-border))\n * @cssproperty --dds-toggle-button-highcontrast-border-hover - High contrast border color on hover (default: var(--dds-button-toggle-highcontrast-border-hover))\n *\n */\nexport default class DapDSToggleButton extends GenericFormElement {\n  static tagName = 'dap-ds-toggle-button'\n\n  constructor() {\n    super()\n    this.size = 'md'\n  }\n\n  /** Whether the button is active. */\n  @property({ type: Boolean, reflect: true }) active = false\n\n  /** The shape of the button\n   * @type { 'button' | 'circle' }\n   */\n  @property({ reflect: true }) shape: ButtonShape = 'button'\n\n  @property({ type: String }) sizeChildren = 'true'\n\n  static readonly styles = unsafeCSS(styles)\n\n  /** Maps effectiveSize from SizedMixin to toggle button visual size (xxs→xs). */\n  private get toggleButtonSize(): 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' {\n    return this.effectiveSize === 'xxs' ? 'xs' : this.effectiveSize\n  }\n\n  get focusElement(): HTMLButtonElement {\n    return this.shadowRoot?.querySelector('button') as HTMLButtonElement\n  }\n\n  protected firstUpdated(_changedProperties: PropertyValues): void {\n    super.firstUpdated(_changedProperties)\n    this._sizeSlottedChildren()\n  }\n\n  protected override updated(changedProperties: PropertyValues): void {\n    super.updated(changedProperties)\n    if (\n      changedProperties.has('size') ||\n      changedProperties.has('sizeMap') ||\n      changedProperties.has('sizeChildren')\n    ) {\n      this._sizeSlottedChildren()\n    }\n  }\n\n  private _sizeSlottedChildren(): void {\n    if (this.sizeChildren !== 'true') return\n    const slot = this.shadowRoot?.querySelector('slot')\n    slot?.assignedElements().forEach(el => {\n      el.setAttribute('size', this.toggleButtonSize)\n    })\n  }\n\n  private handleClick(): void {\n    if (this.disabled) {\n      return\n    }\n  }\n\n  render() {\n    return html`\n      <button\n        part=\"base\"\n        .disabled=${this.disabled}\n        aria-disabled=${this.disabled}\n        aria-label=${ifDefined(this.ariaLabel) || ''}\n        aria-pressed=${this.active}\n        .autofocus=${this.autofocus}\n        type=\"button\"\n        class=${clsx(\n          'toggle-button',\n          `toggle-button--${this.toggleButtonSize}`,\n          `toggle-button--${this.shape}`,\n          {\n            'toggle-button--active': this.active,\n            'toggle-button--disabled': this.disabled,\n          },\n        )}\n        @click=${this.handleClick}>\n        <div part=\"high-contrast\" class=\"toggle-button__highcontrast\"></div>\n        <slot></slot>\n      </button>\n    `\n  }\n}\n"],"names":["_DapDSToggleButton","GenericFormElement","_a","_changedProperties","changedProperties","slot","el","html","ifDefined","clsx","unsafeCSS","styles","DapDSToggleButton","__decorateClass","property"],"mappings":";;;;;;;;;;;;AA2DA,MAAqBA,IAArB,MAAqBA,UAA0BC,EAAmB;AAAA,EAGhE,cAAc;AACN,UAAA,GAK6C,KAAA,SAAA,IAKH,KAAA,QAAA,UAEP,KAAA,eAAA,QAXzC,KAAK,OAAO;AAAA,EAAA;AAAA;AAAA,EAgBd,IAAY,mBAA6D;AACvE,WAAO,KAAK,kBAAkB,QAAQ,OAAO,KAAK;AAAA,EAAA;AAAA,EAGpD,IAAI,eAAkC;;AAC7B,YAAAC,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAAc;AAAA,EAAQ;AAAA,EAGtC,aAAaC,GAA0C;AAC/D,UAAM,aAAaA,CAAkB,GACrC,KAAK,qBAAqB;AAAA,EAAA;AAAA,EAGT,QAAQC,GAAyC;AAClE,UAAM,QAAQA,CAAiB,IAE7BA,EAAkB,IAAI,MAAM,KAC5BA,EAAkB,IAAI,SAAS,KAC/BA,EAAkB,IAAI,cAAc,MAEpC,KAAK,qBAAqB;AAAA,EAC5B;AAAA,EAGM,uBAA6B;;AAC/B,QAAA,KAAK,iBAAiB,OAAQ;AAClC,UAAMC,KAAOH,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAAc;AACtC,IAAAG,KAAA,QAAAA,EAAA,mBAAmB,QAAQ,CAAMC,MAAA;AAClC,MAAAA,EAAA,aAAa,QAAQ,KAAK,gBAAgB;AAAA,IAAA;AAAA,EAC9C;AAAA,EAGK,cAAoB;AAC1B,IAAI,KAAK;AAAA,EAET;AAAA,EAGF,SAAS;AACA,WAAAC;AAAA;AAAA;AAAA,oBAGS,KAAK,QAAQ;AAAA,wBACT,KAAK,QAAQ;AAAA,qBAChBC,EAAU,KAAK,SAAS,KAAK,EAAE;AAAA,uBAC7B,KAAK,MAAM;AAAA,qBACb,KAAK,SAAS;AAAA;AAAA,gBAEnBC;AAAA,MACN;AAAA,MACA,kBAAkB,KAAK,gBAAgB;AAAA,MACvC,kBAAkB,KAAK,KAAK;AAAA,MAC5B;AAAA,QACE,yBAAyB,KAAK;AAAA,QAC9B,2BAA2B,KAAK;AAAA,MAAA;AAAA,IAEnC,CAAA;AAAA,iBACQ,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMjC;AAnFET,EAAO,UAAU,wBAiBDA,EAAA,SAASU,EAAUC,CAAM;AAlB3C,IAAqBC,IAArBZ;AAS8Ca,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GATvBF,EASyB,WAAA,QAAA;AAKfC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GAdRF,EAcU,WAAA,OAAA;AAEDC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAhBPF,EAgBS,WAAA,cAAA;"}

package/dist/components/tooltip/tooltip.component.d.ts

@@ -16,6 +16,8 @@ export type TooltipMode = 'tooltip' | 'toggle';
  * @csspart trigger - The trigger element of the tooltip.
  * @csspart popup - The popup of the tooltip.
  * @csspart arrow - The arrow of the tooltip.
+ * @csspart base__popup - Alias of the popup part.
+ * @csspart base__arrow - Alias of the arrow part.
  *
  * @cssproperty --dds-tooltip-max-width - The maximum width of the tooltip before its content will wrap (default: 14rem)
  * @cssproperty --dds-tooltip-padding - The padding inside the tooltip (default: var(--dds-spacing-400))

package/dist/components/tooltip/tooltip.component.js

@@ -14,23 +14,19 @@ var g = (a, e, t) => new Promise((h, s) => {
   }, u = (n) => n.done ? h(n.value) : Promise.resolve(n.value).then(p, l);
   u((t = t.apply(a, e)).next());
 });
-import { clsx as f } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as r } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { state as v } from "../../node_modules/@lit/reactive-element/decorators/state.js";
-import { html as m } from "../../node_modules/lit-html/static.js";
-import { DdsElement as y } from "../../internal/dds-hu-element.js";
-import w from "../popup/popup.component.js";
-import T from "./tooltip.scss.js";
-import { unsafeCSS as b } from "../../node_modules/@lit/reactive-element/css-tag.js";
+import { clsx as m } from "../../node_modules/clsx/dist/clsx.js";
+import { unsafeCSS as v } from "lit";
+import { property as r, state as y } from "lit/decorators.js";
+import { html as f } from "lit/static-html.js";
+import { DdsElement as w } from "../../internal/dds-hu-element.js";
+import T from "../popup/popup.component.js";
+import b from "./tooltip.scss.js";
 var E = Object.defineProperty, O = Object.getOwnPropertyDescriptor, i = (a, e, t, h) => {
   for (var s = h > 1 ? void 0 : h ? O(e, t) : e, p = a.length - 1, l; p >= 0; p--)
     (l = a[p]) && (s = (h ? l(e, t, s) : l(s)) || s);
   return h && s && E(e, t, s), s;
 };
-const L = 8, d = class d extends y {
+const L = 8, d = class d extends w {
   constructor() {
     super(...arguments), this.placement = "bottom", this.opened = !1, this.mode = "tooltip", this.noArrow = !1, this.floatingStrategy = "absolute", this.disableViewportAutoClose = !1, this._trigger = "hover focus", this.mouseOverTooltip = !1, this.handleDocumentKeyDown = (e) => {
       e.key === "Escape" && this.opened && (e.preventDefault(), e.stopPropagation(), this.hideTooltip());
@@ -76,16 +72,18 @@ const L = 8, d = class d extends y {
     });
   }
   render() {
-    return m`
+    return f`
       <dap-ds-popup
         part="base"
         role="tooltip"
         id="tooltip"
         exportparts="
+          popup:popup,
+          arrow:arrow,
           popup:base__popup,
           arrow:base__arrow
         "
-        class=${f("tooltip", {
+        class=${m("tooltip", {
       "tooltip--open": this.opened,
       "tooltip--tooltip": this.mode === "tooltip",
       "tooltip--toggle": this.mode === "toggle"
@@ -104,14 +102,14 @@ const L = 8, d = class d extends y {
           name="trigger"
           slot="trigger"
           aria-describedby="tooltip"></slot>
-        ${this.content ? m`${this.content}` : m`<slot></slot>`}
+        ${this.content ? f`${this.content}` : f`<slot></slot>`}
       </dap-ds-popup>
     `;
   }
 };
 d.tagName = "dap-ds-tooltip", d.dependencies = {
-  "dap-ds-popup": w
-}, d.styles = b(T);
+  "dap-ds-popup": T
+}, d.styles = v(b);
 let o = d;
 i([
   r()
@@ -138,7 +136,7 @@ i([
   r()
 ], o.prototype, "trigger", 1);
 i([
-  v()
+  y()
 ], o.prototype, "mouseOverTooltip", 2);
 export {
   o as default

package/dist/components/tooltip/tooltip.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.component.js","sources":["../../../src/components/tooltip/tooltip.component.ts"],"sourcesContent":["import { clsx } from 'clsx'\nimport { PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { PopupPlacement } from '../../common/types'\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport DapDSPopup from '../popup/popup.component'\nimport styles from './tooltip.scss?inline'\nexport type TooltipMode = 'tooltip' | 'toggle'\n\n/**\n * The distance in pixels between the tooltip and the trigger element.\n */\nconst TOOLTIP_OFFSET = 8\n\n/**\n * `dap-ds-tooltip`\n * @summary A tooltip is a container for tooltip content.\n * @element dap-ds-tooltip\n * @title - Tooltip\n *\n * @slot - The content of the tooltip.\n * @slot trigger - The trigger element of the tooltip.\n *\n * @csspart base - The main tooltip container.\n * @csspart trigger - The trigger element of the tooltip.\n * @csspart popup - The popup of the tooltip.\n * @csspart arrow - The arrow of the tooltip.\n *\n * @cssproperty --dds-tooltip-max-width - The maximum width of the tooltip before its content will wrap (default: 14rem)\n * @cssproperty --dds-tooltip-padding - The padding inside the tooltip (default: var(--dds-spacing-400))\n * @cssproperty --dds-tooltip-border-color - The border color of the tooltip (default: var(--dds-border-neutral-subtle))\n * @cssproperty --dds-tooltip-bg-color - The background color of the tooltip (default: var(--dds-background-neutral-base))\n * @cssproperty --dds-tooltip-text-color - The text color of the tooltip (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-tooltip-font-size - The font size of the tooltip text (default: var(--dds-font-sm))\n * @cssproperty --dds-tooltip-box-shadow - The box shadow of the tooltip (default: 0 8px 12px -2px rgb(0 0 0 / 8%), 0 2px 6px -2px rgb(0 0 0 / 6%))\n */\nexport default class DapDSTooltip extends DdsElement {\n  static tagName = 'dap-ds-tooltip'\n\n  static dependencies = {\n    'dap-ds-popup': DapDSPopup,\n  }\n\n  static readonly styles = unsafeCSS(styles)\n\n  /** The content of the tooltip, supporting text only. */\n  @property() content: string\n\n  /** The position of the tooltip around the trigger element.\n   * @type { 'top' | 'right' | 'bottom' | 'left' }\n   */\n  @property({ reflect: true }) placement: PopupPlacement = 'bottom'\n\n  /** Sets the tooltip to opened by default (will still be closed on closing events). */\n  @property({ type: Boolean, reflect: true }) opened? = false\n\n  /** Sets the tooltip to toggle mode.\n   * @type { 'tooltip' | 'toggle' }\n   */\n  @property() mode?: TooltipMode = 'tooltip'\n\n  /** Hides the arrow of the tooltip. */\n  @property({ type: Boolean, reflect: true }) noArrow? = false\n\n  /** The floating strategy of the tooltip. Default is `absolute`. Can be `absolute` or `fixed`.\n   * @type { 'absolute' | 'fixed' }\n   */\n  @property({ reflect: true })\n  floatingStrategy: 'absolute' | 'fixed' = 'absolute'\n\n  /** Whether to keep popup open when trigger leaves viewport. */\n  @property({ type: Boolean }) disableViewportAutoClose: boolean = false\n\n  private _trigger: string = 'hover focus'\n\n  /** Sets custom trigger event (hover, focus, click). Default is `hover focus`. */\n  @property()\n  set trigger(value: string) {\n    this._trigger = value\n  }\n  get trigger() {\n    if (!this.mode) {\n      return 'hover focus'\n    }\n\n    if (this.mode === 'toggle') {\n      return 'click'\n    }\n\n    return this._trigger\n  }\n\n  /** @ignore */\n  @state() mouseOverTooltip: boolean = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.addEventListener('blur', this.handleBlur, true)\n    this.addEventListener('focus', this.handleFocus, true)\n    this.addEventListener('click', this.handleClick)\n    this.addEventListener('mouseover', this.handleMouseOver)\n    this.addEventListener('mouseout', this.handleMouseOut)\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener('blur', this.handleBlur, true)\n    this.removeEventListener('focus', this.handleFocus, true)\n    this.removeEventListener('click', this.handleClick)\n    this.removeEventListener('mouseover', this.handleMouseOver)\n    this.removeEventListener('mouseout', this.handleMouseOut)\n    document.removeEventListener('keydown', this.handleDocumentKeyDown, true)\n    super.disconnectedCallback()\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n\n    this.setAttribute('role', 'status')\n\n    // Expose the collapsed state from the start, not only after the first open\n    this.setTriggerExpanded(!!this.opened)\n    if (this.opened) {\n      document.addEventListener('keydown', this.handleDocumentKeyDown, true)\n    }\n  }\n\n  private setTriggerExpanded(expanded: boolean) {\n    const trigger = this.querySelector('[slot=\"trigger\"]')\n    if (trigger) {\n      trigger.setAttribute('aria-expanded', String(expanded))\n    }\n  }\n\n  async showTooltip() {\n    if (this.opened) {\n      return\n    }\n\n    this.opened = true\n    this.setTriggerExpanded(true)\n    document.addEventListener('keydown', this.handleDocumentKeyDown, true)\n  }\n\n  async hideTooltip() {\n    if (!this.opened) {\n      return\n    }\n\n    this.opened = false\n    this.setTriggerExpanded(false)\n    document.removeEventListener('keydown', this.handleDocumentKeyDown, true)\n  }\n\n  // Escape dismisses the tooltip without moving focus or pointer (WCAG 1.4.13).\n  // Captured on document so it works for hover too, and stopped so an enclosing\n  // modal does not close on the same keypress.\n  private readonly handleDocumentKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape' && this.opened) {\n      event.preventDefault()\n      event.stopPropagation()\n      this.hideTooltip()\n    }\n  }\n\n  private readonly handleBlur = () => {\n    if (this.hasTrigger('focus')) {\n      this.hideTooltip()\n    }\n  }\n\n  private readonly handleClick = () => {\n    if (this.hasTrigger('click')) {\n      this.opened && !this.hasTrigger('focus')\n        ? this.hideTooltip()\n        : this.showTooltip()\n    }\n  }\n\n  private readonly handleFocus = () => {\n    if (this.hasTrigger('focus')) {\n      this.showTooltip()\n    }\n  }\n\n  private readonly handleMouseOver = () => {\n    if (this.hasTrigger('hover')) {\n      this.showTooltip()\n    }\n  }\n\n  private readonly handleMouseOut = () => {\n    if (!this.mouseOverTooltip) {\n      if (this.hasTrigger('hover')) {\n        this.hideTooltip()\n      }\n    }\n  }\n\n  private readonly hasTrigger = (triggerType: string) => {\n    const triggers = this.trigger.split(' ')\n    return triggers.includes(triggerType)\n  }\n\n  render() {\n    return html`\n      <dap-ds-popup\n        part=\"base\"\n        role=\"tooltip\"\n        id=\"tooltip\"\n        exportparts=\"\n          popup:base__popup,\n          arrow:base__arrow\n        \"\n        class=${clsx('tooltip', {\n          'tooltip--open': this.opened,\n          'tooltip--tooltip': this.mode === 'tooltip',\n          'tooltip--toggle': this.mode === 'toggle',\n        })}\n        ?opened=${this.opened}\n        placement=${this.placement}\n        offset=${TOOLTIP_OFFSET}\n        floatingStrategy=${this.floatingStrategy}\n        ?disableViewportAutoClose=${this.disableViewportAutoClose}\n        ?hasArrow=${!this.noArrow}\n        @dds-close=${this.hideTooltip}\n        @dds-closed=${this.hideTooltip}\n        @dds-opened=${this.showTooltip}>\n        <slot\n          part=\"trigger\"\n          name=\"trigger\"\n          slot=\"trigger\"\n          aria-describedby=\"tooltip\"></slot>\n        ${this.content ? html`${this.content}` : html`<slot></slot>`}\n      </dap-ds-popup>\n    `\n  }\n}\n"],"names":["TOOLTIP_OFFSET","_DapDSTooltip","DdsElement","event","triggerType","value","_changedProperties","expanded","trigger","__async","html","clsx","DapDSPopup","unsafeCSS","styles","DapDSTooltip","__decorateClass","property","state"],"mappings":"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"}
+{"version":3,"file":"tooltip.component.js","sources":["../../../src/components/tooltip/tooltip.component.ts"],"sourcesContent":["import { clsx } from 'clsx'\nimport { PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { PopupPlacement } from '../../common/types'\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport DapDSPopup from '../popup/popup.component'\nimport styles from './tooltip.scss?inline'\nexport type TooltipMode = 'tooltip' | 'toggle'\n\n/**\n * The distance in pixels between the tooltip and the trigger element.\n */\nconst TOOLTIP_OFFSET = 8\n\n/**\n * `dap-ds-tooltip`\n * @summary A tooltip is a container for tooltip content.\n * @element dap-ds-tooltip\n * @title - Tooltip\n *\n * @slot - The content of the tooltip.\n * @slot trigger - The trigger element of the tooltip.\n *\n * @csspart base - The main tooltip container.\n * @csspart trigger - The trigger element of the tooltip.\n * @csspart popup - The popup of the tooltip.\n * @csspart arrow - The arrow of the tooltip.\n * @csspart base__popup - Alias of the popup part.\n * @csspart base__arrow - Alias of the arrow part.\n *\n * @cssproperty --dds-tooltip-max-width - The maximum width of the tooltip before its content will wrap (default: 14rem)\n * @cssproperty --dds-tooltip-padding - The padding inside the tooltip (default: var(--dds-spacing-400))\n * @cssproperty --dds-tooltip-border-color - The border color of the tooltip (default: var(--dds-border-neutral-subtle))\n * @cssproperty --dds-tooltip-bg-color - The background color of the tooltip (default: var(--dds-background-neutral-base))\n * @cssproperty --dds-tooltip-text-color - The text color of the tooltip (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-tooltip-font-size - The font size of the tooltip text (default: var(--dds-font-sm))\n * @cssproperty --dds-tooltip-box-shadow - The box shadow of the tooltip (default: 0 8px 12px -2px rgb(0 0 0 / 8%), 0 2px 6px -2px rgb(0 0 0 / 6%))\n */\nexport default class DapDSTooltip extends DdsElement {\n  static tagName = 'dap-ds-tooltip'\n\n  static dependencies = {\n    'dap-ds-popup': DapDSPopup,\n  }\n\n  static readonly styles = unsafeCSS(styles)\n\n  /** The content of the tooltip, supporting text only. */\n  @property() content: string\n\n  /** The position of the tooltip around the trigger element.\n   * @type { 'top' | 'right' | 'bottom' | 'left' }\n   */\n  @property({ reflect: true }) placement: PopupPlacement = 'bottom'\n\n  /** Sets the tooltip to opened by default (will still be closed on closing events). */\n  @property({ type: Boolean, reflect: true }) opened? = false\n\n  /** Sets the tooltip to toggle mode.\n   * @type { 'tooltip' | 'toggle' }\n   */\n  @property() mode?: TooltipMode = 'tooltip'\n\n  /** Hides the arrow of the tooltip. */\n  @property({ type: Boolean, reflect: true }) noArrow? = false\n\n  /** The floating strategy of the tooltip. Default is `absolute`. Can be `absolute` or `fixed`.\n   * @type { 'absolute' | 'fixed' }\n   */\n  @property({ reflect: true })\n  floatingStrategy: 'absolute' | 'fixed' = 'absolute'\n\n  /** Whether to keep popup open when trigger leaves viewport. */\n  @property({ type: Boolean }) disableViewportAutoClose: boolean = false\n\n  private _trigger: string = 'hover focus'\n\n  /** Sets custom trigger event (hover, focus, click). Default is `hover focus`. */\n  @property()\n  set trigger(value: string) {\n    this._trigger = value\n  }\n  get trigger() {\n    if (!this.mode) {\n      return 'hover focus'\n    }\n\n    if (this.mode === 'toggle') {\n      return 'click'\n    }\n\n    return this._trigger\n  }\n\n  /** @ignore */\n  @state() mouseOverTooltip: boolean = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.addEventListener('blur', this.handleBlur, true)\n    this.addEventListener('focus', this.handleFocus, true)\n    this.addEventListener('click', this.handleClick)\n    this.addEventListener('mouseover', this.handleMouseOver)\n    this.addEventListener('mouseout', this.handleMouseOut)\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener('blur', this.handleBlur, true)\n    this.removeEventListener('focus', this.handleFocus, true)\n    this.removeEventListener('click', this.handleClick)\n    this.removeEventListener('mouseover', this.handleMouseOver)\n    this.removeEventListener('mouseout', this.handleMouseOut)\n    document.removeEventListener('keydown', this.handleDocumentKeyDown, true)\n    super.disconnectedCallback()\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n\n    this.setAttribute('role', 'status')\n\n    // Expose the collapsed state from the start, not only after the first open\n    this.setTriggerExpanded(!!this.opened)\n    if (this.opened) {\n      document.addEventListener('keydown', this.handleDocumentKeyDown, true)\n    }\n  }\n\n  private setTriggerExpanded(expanded: boolean) {\n    const trigger = this.querySelector('[slot=\"trigger\"]')\n    if (trigger) {\n      trigger.setAttribute('aria-expanded', String(expanded))\n    }\n  }\n\n  async showTooltip() {\n    if (this.opened) {\n      return\n    }\n\n    this.opened = true\n    this.setTriggerExpanded(true)\n    document.addEventListener('keydown', this.handleDocumentKeyDown, true)\n  }\n\n  async hideTooltip() {\n    if (!this.opened) {\n      return\n    }\n\n    this.opened = false\n    this.setTriggerExpanded(false)\n    document.removeEventListener('keydown', this.handleDocumentKeyDown, true)\n  }\n\n  // Escape dismisses the tooltip without moving focus or pointer (WCAG 1.4.13).\n  // Captured on document so it works for hover too, and stopped so an enclosing\n  // modal does not close on the same keypress.\n  private readonly handleDocumentKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape' && this.opened) {\n      event.preventDefault()\n      event.stopPropagation()\n      this.hideTooltip()\n    }\n  }\n\n  private readonly handleBlur = () => {\n    if (this.hasTrigger('focus')) {\n      this.hideTooltip()\n    }\n  }\n\n  private readonly handleClick = () => {\n    if (this.hasTrigger('click')) {\n      this.opened && !this.hasTrigger('focus')\n        ? this.hideTooltip()\n        : this.showTooltip()\n    }\n  }\n\n  private readonly handleFocus = () => {\n    if (this.hasTrigger('focus')) {\n      this.showTooltip()\n    }\n  }\n\n  private readonly handleMouseOver = () => {\n    if (this.hasTrigger('hover')) {\n      this.showTooltip()\n    }\n  }\n\n  private readonly handleMouseOut = () => {\n    if (!this.mouseOverTooltip) {\n      if (this.hasTrigger('hover')) {\n        this.hideTooltip()\n      }\n    }\n  }\n\n  private readonly hasTrigger = (triggerType: string) => {\n    const triggers = this.trigger.split(' ')\n    return triggers.includes(triggerType)\n  }\n\n  render() {\n    return html`\n      <dap-ds-popup\n        part=\"base\"\n        role=\"tooltip\"\n        id=\"tooltip\"\n        exportparts=\"\n          popup:popup,\n          arrow:arrow,\n          popup:base__popup,\n          arrow:base__arrow\n        \"\n        class=${clsx('tooltip', {\n          'tooltip--open': this.opened,\n          'tooltip--tooltip': this.mode === 'tooltip',\n          'tooltip--toggle': this.mode === 'toggle',\n        })}\n        ?opened=${this.opened}\n        placement=${this.placement}\n        offset=${TOOLTIP_OFFSET}\n        floatingStrategy=${this.floatingStrategy}\n        ?disableViewportAutoClose=${this.disableViewportAutoClose}\n        ?hasArrow=${!this.noArrow}\n        @dds-close=${this.hideTooltip}\n        @dds-closed=${this.hideTooltip}\n        @dds-opened=${this.showTooltip}>\n        <slot\n          part=\"trigger\"\n          name=\"trigger\"\n          slot=\"trigger\"\n          aria-describedby=\"tooltip\"></slot>\n        ${this.content ? html`${this.content}` : html`<slot></slot>`}\n      </dap-ds-popup>\n    `\n  }\n}\n"],"names":["TOOLTIP_OFFSET","_DapDSTooltip","DdsElement","event","triggerType","value","_changedProperties","expanded","trigger","__async","html","clsx","DapDSPopup","unsafeCSS","styles","DapDSTooltip","__decorateClass","property","state"],"mappings":"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"}

package/dist/components/tray/tray.component.d.ts

@@ -57,7 +57,10 @@ import { default as ModalBaseElement } from '../modal/modal-base-element';
  * @csspart header - The header of the tray.
  * @csspart footer - The footer of the tray.
  * @csspart content - The content of the tray.
- * @csspart body - The body of the tray.
+ * @csspart header-container - The container of the header.
+ * @csspart title - The title of the tray.
+ * @csspart description - The description of the tray.
+ * @csspart closebutton - The close button of the tray.
  *
  */
 export default class DapDSTray extends ModalBaseElement {

package/dist/components/tray/tray.component.js

@@ -1,16 +1,13 @@
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as p } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import f from "../modal/modal-base-element.js";
-import n from "./tray.scss.js";
-import { unsafeCSS as m, css as d } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var h = Object.defineProperty, c = (o, i, a, u) => {
-  for (var t = void 0, r = o.length - 1, l; r >= 0; r--)
-    (l = o[r]) && (t = l(i, a, t) || t);
-  return t && h(i, a, t), t;
+import { unsafeCSS as f, css as m } from "lit";
+import { property as n } from "lit/decorators.js";
+import d from "../modal/modal-base-element.js";
+import p from "./tray.scss.js";
+var h = Object.defineProperty, c = (o, i, l, u) => {
+  for (var t = void 0, r = o.length - 1, a; r >= 0; r--)
+    (a = o[r]) && (t = a(i, l, t) || t);
+  return t && h(i, l, t), t;
 };
-const e = class e extends f {
+const e = class e extends d {
   constructor() {
     super(), this.placement = "bottom", this.footer = "false", this.header = "false", this.title && (this.header = "true");
   }
@@ -18,13 +15,13 @@ const e = class e extends f {
     return this.renderModal();
   }
 };
-e.tagName = "dap-ds-tray", e.styles = d`
-    ${m(f.styles)}
-    ${m(n)}
+e.tagName = "dap-ds-tray", e.styles = m`
+    ${f(d.styles)}
+    ${f(p)}
   `;
 let s = e;
 c([
-  p({ reflect: !0 })
+  n({ reflect: !0 })
 ], s.prototype, "placement");
 export {
   s as default

package/dist/components/tray/tray.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"tray.component.js","sources":["../../../src/components/tray/tray.component.ts"],"sourcesContent":["import { css, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport ModalBaseElement from '../modal/modal-base-element'\nimport style from './tray.scss?inline'\n\n/**\n * `dap-ds-tray`\n * @summary A tray is a container for slide in content.\n * @element dap-ds-tray\n * @title - Tray\n *\n * @property {boolean} open - The open state of the tray.\n * @property {boolean} noModal - Whether the tray should have a modal overlay. Default is false. If true the tray will use the .show() method, if false the tray will use the .showModal() method.\n * @property {boolean} closeOnEsc - Whether the tray should close on pressing the escape key. Default is true.\n * @property {boolean} closeOnOverlayClick - Whether the tray should close on clicking the overlay. Default is true.\n * @property {string} closeButton - Whether the tray should have a close button. Default is true.\n * @property {string} title - The title of the tray.\n * @property {string} description - The description of the tray.\n * @property {string} okButtonLabel - The label of the OK button.\n * @property {string} cancelButtonLabel - The label of the Cancel button.\n * @property { 'sm' | 'lg' } size - The size of the tray. Default is 'sm'.\n * @property {string} footer - Whether the tray should have a footer. Default is false.\n * @property {string} header - Whether the tray should have a header. Default is false.\n *\n * @event {{ void }} dds-before-open - Fires before the tray opens.\n * @event {{ void }} dds-opened - Fires after the tray opens.\n * @event {{ void }} dds-before-close - Fires before the tray closes.\n * @event {{ void }} dds-closed - Fires after the tray closed.\n * @event {{ void }} dds-close - Fires when the tray is closes. You can prevent the tray from closing by calling `event.preventDefault()`.\n *\n * @slot - The content of the tray.\n * @slot header - The header of the tray.\n * @slot footer - The footer of the tray.\n *\n * @cssproperty --dds-modal-max-block-size - Maximum height of the modal. (default: 80vh)\n * @cssproperty --dds-modal-max-inline-size - Maximum width of the modal. (default: 600px)\n * @cssproperty --dds-modal-padding-sm - Padding inside the modal. (default: var(--dds-spacing-600))\n * @cssproperty --dds-modal-padding-lg - Padding inside the modal. (default: var(--dds-spacing-1200))\n * @cssproperty --dds-modal-transform-amount - Amount to transform for entrance animation. (default: 2rem)\n * @cssproperty --dds-modal-transition-speed - Speed of transition animations. (default: var(--dds-transition-fast))\n * @cssproperty --dds-modal-transition-timing - Timing function for transitions. (default: var(--dds-easing-ease-in-out))\n * @cssproperty --dds-modal-border-width - Border width of the modal. (default: var(--dds-border-width-base))\n * @cssproperty --dds-modal-border-color - Border color of the modal. (default: var(--dds-border-neutral-divider))\n * @cssproperty --dds-modal-border-radius - Border radius of the modal. (default: var(--dds-radius-large, 16px))\n * @cssproperty --dds-modal-background - Background color of the modal. (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-modal-header-margin-sm - Margin below the header. (default: var(--dds-spacing-400))\n * @cssproperty --dds-modal-header-margin-lg - Margin below the header. (default: var(--dds-spacing-600))\n * @cssproperty --dds-modal-footer-margin-sm - Margin above the footer. (default: var(--dds-spacing-400))\n * @cssproperty --dds-modal-footer-margin-lg - Margin above the footer. (default: var(--dds-spacing-600))\n * @cssproperty --dds-modal-footer-gap - Gap between footer elements. (default: var(--dds-spacing-400))\n * @cssproperty --dds-modal-close-margin - Margin for the close button. (default: var(--dds-spacing-300))\n * @cssproperty --dds-tray-width-side - Width of the side (left/right) trays. (default: 250px)\n * @cssproperty --dds-tray-min-width-horizontal - Minimum width of the horizontal (top/bottom) trays. (default: 400px)\n * @cssproperty --dds-tray-min-height-horizontal - Minimum height of the horizontal (top/bottom) trays. (default: 300px)\n * @cssproperty --dds-tray-min-height-vertical - Minimum height of the vertical (left/right) trays. (default: 100%)\n * @cssproperty --dds-tray-transform-duration - Duration of the transform animation. (default: 0.3s)\n * @cssproperty --dds-tray-transform-timing - Timing function for the transform animation. (default: ease-in-out)\n *\n * @csspart base - The main tray container.\n * @csspart panel - The panel of the tray.\n * @csspart header - The header of the tray.\n * @csspart footer - The footer of the tray.\n * @csspart content - The content of the tray.\n * @csspart body - The body of the tray.\n *\n */\nexport default class DapDSTray extends ModalBaseElement {\n  static tagName = 'dap-ds-tray'\n\n  /** The placement of the tray.\n   * @type { 'left' | 'right' | 'top' | 'bottom' }\n   */\n  @property({ reflect: true }) placement: 'left' | 'right' | 'top' | 'bottom' =\n    'bottom'\n\n  constructor() {\n    super()\n    this.footer = 'false'\n    this.header = 'false'\n\n    if (this.title) {\n      this.header = 'true'\n    }\n  }\n\n  static readonly styles = css`\n    ${unsafeCSS(ModalBaseElement.styles)}\n    ${unsafeCSS(style)}\n  `\n\n  render() {\n    return this.renderModal()\n  }\n}\n"],"names":["_DapDSTray","ModalBaseElement","css","unsafeCSS","style","DapDSTray","__decorateClass","property"],"mappings":";;;;;;;;;;;;AAmEA,MAAqBA,IAArB,MAAqBA,UAAkBC,EAAiB;AAAA,EAStD,cAAc;AACN,UAAA,GAHN,KAAA,YAAA,UAIA,KAAK,SAAS,SACd,KAAK,SAAS,SAEV,KAAK,UACP,KAAK,SAAS;AAAA,EAChB;AAAA,EAQF,SAAS;AACP,WAAO,KAAK,YAAY;AAAA,EAAA;AAE5B;AA1BED,EAAO,UAAU,eAkBjBA,EAAgB,SAASE;AAAAA,MACrBC,EAAUF,EAAiB,MAAM,CAAC;AAAA,MAClCE,EAAUC,CAAK,CAAC;AAAA;AArBtB,IAAqBC,IAArBL;AAM+BM,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GANRF,EAMU,WAAA,WAAA;"}
+{"version":3,"file":"tray.component.js","sources":["../../../src/components/tray/tray.component.ts"],"sourcesContent":["import { css, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport ModalBaseElement from '../modal/modal-base-element'\nimport style from './tray.scss?inline'\n\n/**\n * `dap-ds-tray`\n * @summary A tray is a container for slide in content.\n * @element dap-ds-tray\n * @title - Tray\n *\n * @property {boolean} open - The open state of the tray.\n * @property {boolean} noModal - Whether the tray should have a modal overlay. Default is false. If true the tray will use the .show() method, if false the tray will use the .showModal() method.\n * @property {boolean} closeOnEsc - Whether the tray should close on pressing the escape key. Default is true.\n * @property {boolean} closeOnOverlayClick - Whether the tray should close on clicking the overlay. Default is true.\n * @property {string} closeButton - Whether the tray should have a close button. Default is true.\n * @property {string} title - The title of the tray.\n * @property {string} description - The description of the tray.\n * @property {string} okButtonLabel - The label of the OK button.\n * @property {string} cancelButtonLabel - The label of the Cancel button.\n * @property { 'sm' | 'lg' } size - The size of the tray. Default is 'sm'.\n * @property {string} footer - Whether the tray should have a footer. Default is false.\n * @property {string} header - Whether the tray should have a header. Default is false.\n *\n * @event {{ void }} dds-before-open - Fires before the tray opens.\n * @event {{ void }} dds-opened - Fires after the tray opens.\n * @event {{ void }} dds-before-close - Fires before the tray closes.\n * @event {{ void }} dds-closed - Fires after the tray closed.\n * @event {{ void }} dds-close - Fires when the tray is closes. You can prevent the tray from closing by calling `event.preventDefault()`.\n *\n * @slot - The content of the tray.\n * @slot header - The header of the tray.\n * @slot footer - The footer of the tray.\n *\n * @cssproperty --dds-modal-max-block-size - Maximum height of the modal. (default: 80vh)\n * @cssproperty --dds-modal-max-inline-size - Maximum width of the modal. (default: 600px)\n * @cssproperty --dds-modal-padding-sm - Padding inside the modal. (default: var(--dds-spacing-600))\n * @cssproperty --dds-modal-padding-lg - Padding inside the modal. (default: var(--dds-spacing-1200))\n * @cssproperty --dds-modal-transform-amount - Amount to transform for entrance animation. (default: 2rem)\n * @cssproperty --dds-modal-transition-speed - Speed of transition animations. (default: var(--dds-transition-fast))\n * @cssproperty --dds-modal-transition-timing - Timing function for transitions. (default: var(--dds-easing-ease-in-out))\n * @cssproperty --dds-modal-border-width - Border width of the modal. (default: var(--dds-border-width-base))\n * @cssproperty --dds-modal-border-color - Border color of the modal. (default: var(--dds-border-neutral-divider))\n * @cssproperty --dds-modal-border-radius - Border radius of the modal. (default: var(--dds-radius-large, 16px))\n * @cssproperty --dds-modal-background - Background color of the modal. (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-modal-header-margin-sm - Margin below the header. (default: var(--dds-spacing-400))\n * @cssproperty --dds-modal-header-margin-lg - Margin below the header. (default: var(--dds-spacing-600))\n * @cssproperty --dds-modal-footer-margin-sm - Margin above the footer. (default: var(--dds-spacing-400))\n * @cssproperty --dds-modal-footer-margin-lg - Margin above the footer. (default: var(--dds-spacing-600))\n * @cssproperty --dds-modal-footer-gap - Gap between footer elements. (default: var(--dds-spacing-400))\n * @cssproperty --dds-modal-close-margin - Margin for the close button. (default: var(--dds-spacing-300))\n * @cssproperty --dds-tray-width-side - Width of the side (left/right) trays. (default: 250px)\n * @cssproperty --dds-tray-min-width-horizontal - Minimum width of the horizontal (top/bottom) trays. (default: 400px)\n * @cssproperty --dds-tray-min-height-horizontal - Minimum height of the horizontal (top/bottom) trays. (default: 300px)\n * @cssproperty --dds-tray-min-height-vertical - Minimum height of the vertical (left/right) trays. (default: 100%)\n * @cssproperty --dds-tray-transform-duration - Duration of the transform animation. (default: 0.3s)\n * @cssproperty --dds-tray-transform-timing - Timing function for the transform animation. (default: ease-in-out)\n *\n * @csspart base - The main tray container.\n * @csspart panel - The panel of the tray.\n * @csspart header - The header of the tray.\n * @csspart footer - The footer of the tray.\n * @csspart content - The content of the tray.\n * @csspart header-container - The container of the header.\n * @csspart title - The title of the tray.\n * @csspart description - The description of the tray.\n * @csspart closebutton - The close button of the tray.\n *\n */\nexport default class DapDSTray extends ModalBaseElement {\n  static tagName = 'dap-ds-tray'\n\n  /** The placement of the tray.\n   * @type { 'left' | 'right' | 'top' | 'bottom' }\n   */\n  @property({ reflect: true }) placement: 'left' | 'right' | 'top' | 'bottom' =\n    'bottom'\n\n  constructor() {\n    super()\n    this.footer = 'false'\n    this.header = 'false'\n\n    if (this.title) {\n      this.header = 'true'\n    }\n  }\n\n  static readonly styles = css`\n    ${unsafeCSS(ModalBaseElement.styles)}\n    ${unsafeCSS(style)}\n  `\n\n  render() {\n    return this.renderModal()\n  }\n}\n"],"names":["_DapDSTray","ModalBaseElement","css","unsafeCSS","style","DapDSTray","__decorateClass","property"],"mappings":";;;;;;;;;AAsEA,MAAqBA,IAArB,MAAqBA,UAAkBC,EAAiB;AAAA,EAStD,cAAc;AACN,UAAA,GAHN,KAAA,YAAA,UAIA,KAAK,SAAS,SACd,KAAK,SAAS,SAEV,KAAK,UACP,KAAK,SAAS;AAAA,EAChB;AAAA,EAQF,SAAS;AACP,WAAO,KAAK,YAAY;AAAA,EAAA;AAE5B;AA1BED,EAAO,UAAU,eAkBjBA,EAAgB,SAASE;AAAA,MACrBC,EAAUF,EAAiB,MAAM,CAAC;AAAA,MAClCE,EAAUC,CAAK,CAAC;AAAA;AArBtB,IAAqBC,IAArBL;AAM+BM,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GANRF,EAMU,WAAA,WAAA;"}

package/dist/components/typography/typography.component.js

@@ -1,21 +1,18 @@
-import { cva as u } from "../../node_modules/class-variance-authority/dist/index.js";
+import { cva as f } from "../../node_modules/class-variance-authority/dist/index.js";
 import { clsx as h } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as p } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { ifDefined as d } from "../../node_modules/lit-html/directives/if-defined.js";
-import { unsafeStatic as y, html as c } from "../../node_modules/lit-html/static.js";
-import { anchorClass as f } from "../../common/const.js";
-import { DdsElement as v } from "../../internal/dds-hu-element.js";
-import b from "./_styles/typography.scss.js";
-import { unsafeCSS as _ } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var $ = Object.defineProperty, n = (m, r, s, e) => {
-  for (var t = void 0, i = m.length - 1, o; i >= 0; i--)
-    (o = m[i]) && (t = o(r, s, t) || t);
-  return t && $(r, s, t), t;
+import { unsafeCSS as m } from "lit";
+import { property as p } from "lit/decorators.js";
+import { ifDefined as d } from "lit/directives/if-defined.js";
+import { unsafeStatic as y, html as c } from "lit/static-html.js";
+import { anchorClass as v } from "../../common/const.js";
+import { DdsElement as b } from "../../internal/dds-hu-element.js";
+import _ from "./_styles/typography.scss.js";
+var $ = Object.defineProperty, n = (u, e, s, r) => {
+  for (var t = void 0, i = u.length - 1, o; i >= 0; i--)
+    (o = u[i]) && (t = o(e, s, t) || t);
+  return t && $(e, s, t), t;
 };
-const l = u("typography", {
+const l = f("typography", {
   variants: {
     variant: {
       h1: "heading typography-h1",
@@ -74,69 +71,69 @@ const l = u("typography", {
       class: "typography-caption-inverted"
     }
   ]
-}), g = class g extends v {
+}), g = class g extends b {
   constructor() {
     super(...arguments), this.anchor = !1, this.inverted = !1;
   }
-  firstUpdated(r) {
-    super.firstUpdated(r), this.elementId && this.setAttribute("id", this.elementId);
+  firstUpdated(e) {
+    super.firstUpdated(e), this.elementId && this.setAttribute("id", this.elementId);
   }
   get elementId() {
     return this.id ? this.id : void 0;
   }
-  _renderHeading(r, s, e, t, i) {
+  _renderHeading(e, s, r, t, i) {
     return c`
-      <${y(e)}
+      <${y(r)}
         part="base"
-        id=${d(r)}
+        id=${d(e)}
         class=${h(
-      l({ variant: e, size: t, inverted: i }),
-      { [f]: this.anchor },
+      l({ variant: r, size: t, inverted: i }),
+      { [v]: this.anchor },
       s
     )}
       >
        <slot></slot>
-      </${y(e)}>
+      </${y(r)}>
     `;
   }
-  _renderBody(r, s, e, t, i) {
+  _renderBody(e, s, r, t, i) {
     return c`
       <${y(t)}
-        id=${d(r)}
+        id=${d(e)}
         part="base"
-        class=${h(l({ variant: "body", size: e, inverted: i }), s)}
+        class=${h(l({ variant: "body", size: r, inverted: i }), s)}
       >
         <slot></slot>
       </${y(t)}>
     `;
   }
-  _renderCaption(r, s, e) {
+  _renderCaption(e, s, r) {
     return c`
       <span
-        id=${d(r)}
+        id=${d(e)}
         part="base"
         class=${h(
-      l({ variant: "caption", inverted: e }),
+      l({ variant: "caption", inverted: r }),
       s
     )}>
         <slot></slot>
       </span>
     `;
   }
-  _renderDescription(r, s, e, t) {
+  _renderDescription(e, s, r, t) {
     return c`
       <span
-        id=${d(r)}
+        id=${d(e)}
         part="base"
         class=${h(
-      l({ variant: "description", size: e, inverted: t }),
+      l({ variant: "description", size: r, inverted: t }),
       s
     )}>
         <slot></slot>
       </span>
     `;
   }
-  _getElement(r, s, e, t = "", i = "p", o = !1) {
+  _getElement(e, s, r, t = "", i = "p", o = !1) {
     switch (s) {
       case "h1":
       case "h2":
@@ -145,18 +142,18 @@ const l = u("typography", {
       case "h5":
       case "h6":
         return this._renderHeading(
-          r,
+          e,
           t,
           s,
-          e,
+          r,
           o
         );
       case "body":
-        return this._renderBody(r, t, e, i, o);
+        return this._renderBody(e, t, r, i, o);
       case "caption":
-        return this._renderCaption(r, t, o);
+        return this._renderCaption(e, t, o);
       case "description":
-        return this._renderDescription(r, t, e, o);
+        return this._renderDescription(e, t, r, o);
       default:
         return null;
     }
@@ -172,7 +169,7 @@ const l = u("typography", {
     );
   }
 };
-g.tagName = "dap-ds-typography", g.styles = _(b);
+g.tagName = "dap-ds-typography", g.styles = m(_);
 let a = g;
 n([
   p({ reflect: !0 })