@redvars/peacock 3.8.5 → 3.9.0

package/dist/sub-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"sub-menu.js","sources":["../../src/menu/sub-menu/sub-menu.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport styles from './sub-menu.scss';\nimport { MenuItem } from '../menu-item/menu-item.js';\nimport { Menu } from '../menu/menu.js';\nimport IndividualComponent from '@/IndividualComponent.js';\n\nlet subMenuIdCounter = 0;\n\n/**\n * @label Sub Menu\n * @tag wc-sub-menu\n * @rawTag sub-menu\n * @summary Connects a menu item to a nested menu.\n */\n@IndividualComponent\nexport class SubMenu extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Number, attribute: 'hover-open-delay' })\n  hoverOpenDelay = 120;\n\n  @property({ type: Number, attribute: 'hover-close-delay' })\n  hoverCloseDelay = 180;\n\n  @property({ type: String, attribute: 'anchor-corner' })\n  anchorCorner = 'start-end';\n\n  @property({ type: String, attribute: 'menu-corner' })\n  menuCorner = 'start-start';\n\n  @queryAssignedElements({ slot: 'item' })\n  private readonly _items!: Element[];\n\n  @queryAssignedElements({ slot: 'menu' })\n  private readonly _menus!: Element[];\n\n  private _openTimeout?: number;\n\n  private _closeTimeout?: number;\n\n  private _resolveAnchorElement(item: MenuItem) {\n    //@ts-ignore\n    return item.itemElement?.itemElement ?? item.itemElement ?? item;\n  }\n\n  private readonly _onChildMenuOpened = () => {\n    const { item } = this;\n    if (!item) {\n      return;\n    }\n\n    item.submenuOpen = true;\n    item.setAttribute('aria-expanded', 'true');\n  };\n\n  private readonly _onChildMenuClosed = () => {\n    const { item } = this;\n    if (!item) {\n      return;\n    }\n\n    item.submenuOpen = false;\n    item.setAttribute('aria-expanded', 'false');\n  };\n\n  get item(): MenuItem | null {\n    const [candidate] = this._items ?? [];\n    return candidate instanceof MenuItem ? candidate : null;\n  }\n\n  get menu(): Menu | null {\n    const [candidate] = this._menus ?? [];\n    return candidate instanceof Menu ? candidate : null;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('mouseenter', this._onMouseEnter);\n    this.addEventListener('mouseleave', this._onMouseLeave);\n  }\n\n  disconnectedCallback() {\n    const { menu } = this;\n    menu?.removeEventListener('opened', this._onChildMenuOpened);\n    menu?.removeEventListener('closed', this._onChildMenuClosed);\n    this.removeEventListener('mouseenter', this._onMouseEnter);\n    this.removeEventListener('mouseleave', this._onMouseLeave);\n    window.clearTimeout(this._openTimeout);\n    window.clearTimeout(this._closeTimeout);\n    super.disconnectedCallback();\n  }\n\n  async show() {\n    const { item, menu } = this;\n    if (!item || !menu) {\n      return;\n    }\n\n    menu.anchorElement = this._resolveAnchorElement(item);\n    menu.isSubmenu = true;\n    menu.show();\n\n    item.hasSubmenu = true;\n    item.submenuOpen = true;\n    item.setAttribute('aria-expanded', 'true');\n  }\n\n  async close() {\n    const { item, menu } = this;\n    if (!item || !menu) {\n      return;\n    }\n\n    menu.close({ kind: 'programmatic' });\n    item.submenuOpen = false;\n    item.setAttribute('aria-expanded', 'false');\n  }\n\n  render() {\n    return html`\n      <slot\n        name=\"item\"\n        @slotchange=${this._onSlotChange}\n        @click=${this._onItemClick}\n        @keydown=${this._onItemKeyDown}\n      ></slot>\n      <slot\n        name=\"menu\"\n        @slotchange=${this._onSlotChange}\n        @close-menu=${this._onCloseMenu}\n        @keydown=${this._onMenuKeyDown}\n      ></slot>\n    `;\n  }\n\n  private _onSlotChange = () => {\n    const { item, menu } = this;\n    if (!item || !menu) {\n      return;\n    }\n\n    if (!menu.id) {\n      subMenuIdCounter += 1;\n      menu.id = `wc-sub-menu-${subMenuIdCounter}`;\n    }\n\n    item.keepOpen = true;\n    item.hasSubmenu = true;\n    item.submenuOpen = menu.open;\n    item.setAttribute('aria-haspopup', 'menu');\n    item.setAttribute('aria-expanded', String(menu.open));\n    item.setAttribute('aria-controls', menu.id);\n\n    menu.removeEventListener('opened', this._onChildMenuOpened);\n    menu.removeEventListener('closed', this._onChildMenuClosed);\n    menu.addEventListener('opened', this._onChildMenuOpened);\n    menu.addEventListener('closed', this._onChildMenuClosed);\n\n    menu.isSubmenu = true;\n    menu.anchorElement = this._resolveAnchorElement(item);\n    menu.placement =\n      getComputedStyle(this).direction === 'rtl' ? 'left-start' : 'right-start';\n    menu.offset = 4;\n  };\n\n  private _onItemClick = () => {\n    if (this.menu?.open) {\n      this.close();\n      return;\n    }\n\n    this.show();\n  };\n\n  private _onItemKeyDown = async (event: KeyboardEvent) => {\n    const isRtl = getComputedStyle(this).direction === 'rtl';\n    const arrowEnter = isRtl ? 'ArrowLeft' : 'ArrowRight';\n\n    const shouldOpen =\n      event.key === arrowEnter || event.key === 'Enter' || event.key === ' ';\n\n    if (!shouldOpen) {\n      return;\n    }\n\n    event.preventDefault();\n    if (event.key === arrowEnter) {\n      event.stopPropagation();\n    }\n\n    await this.show();\n    const firstItem = this.menu?.items.find(menuItem => !menuItem.disabled);\n    if (firstItem) {\n      firstItem.tabIndex = 0;\n      firstItem.focus();\n    }\n  };\n\n  private _onMenuKeyDown = async (event: KeyboardEvent) => {\n    const isRtl = getComputedStyle(this).direction === 'rtl';\n    const arrowExit = isRtl ? 'ArrowRight' : 'ArrowLeft';\n\n    if (event.key !== 'Escape' && event.key !== arrowExit) {\n      return;\n    }\n\n    event.preventDefault();\n    event.stopPropagation();\n\n    await this.close();\n\n    const { item } = this;\n    if (item) {\n      item.tabIndex = 0;\n      item.focus();\n    }\n  };\n\n  private _onCloseMenu = async (\n    event: CustomEvent<{ reason?: { kind?: string; key?: string } }>,\n  ) => {\n    const { reason } = event.detail ?? {};\n    const { key } = reason ?? {};\n    if (reason?.kind === 'keydown' && key === 'Escape') {\n      event.stopPropagation();\n      await this.close();\n      this.item?.focus();\n    }\n  };\n\n  private _onMouseEnter = () => {\n    window.clearTimeout(this._closeTimeout);\n    this._openTimeout = window.setTimeout(() => {\n      this.show();\n    }, this.hoverOpenDelay);\n  };\n\n  private _onMouseLeave = (event: MouseEvent) => {\n    const { relatedTarget: related } = event;\n    if (related instanceof Node && this.contains(related)) {\n      return;\n    }\n\n    window.clearTimeout(this._openTimeout);\n    this._closeTimeout = window.setTimeout(() => {\n      this.close();\n    }, this.hoverCloseDelay);\n  };\n}\n"],"names":["LitElement","html","styles","property","queryAssignedElements"],"mappings":"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"}
+{"version":3,"file":"sub-menu.js","sources":["../../src/menu/sub-menu/sub-menu.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport styles from './sub-menu.scss';\nimport { MenuItem } from '../menu-item/menu-item.js';\nimport { Menu } from '../menu/menu.js';\nimport IndividualComponent from '@/IndividualComponent.js';\n\nlet subMenuIdCounter = 0;\n\n/**\n * @label Sub Menu\n * @tag wc-sub-menu\n * @rawTag sub-menu\n * @summary Connects a menu item to a nested menu.\n */\n@IndividualComponent\nexport class SubMenu extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Number, attribute: 'hover-open-delay' })\n  hoverOpenDelay = 120;\n\n  @property({ type: Number, attribute: 'hover-close-delay' })\n  hoverCloseDelay = 180;\n\n  @property({ type: String, attribute: 'anchor-corner' })\n  anchorCorner = 'start-end';\n\n  @property({ type: String, attribute: 'menu-corner' })\n  menuCorner = 'start-start';\n\n  @queryAssignedElements({ slot: 'item' })\n  private readonly _items!: Element[];\n\n  @queryAssignedElements({ slot: 'menu' })\n  private readonly _menus!: Element[];\n\n  private _openTimeout?: number;\n\n  private _closeTimeout?: number;\n\n  private _resolveAnchorElement(item: MenuItem) {\n    //@ts-ignore\n    return item.itemElement?.itemElement ?? item.itemElement ?? item;\n  }\n\n  private readonly _onChildMenuOpened = () => {\n    const { item } = this;\n    if (!item) {\n      return;\n    }\n\n    item.submenuOpen = true;\n    item.setAttribute('aria-expanded', 'true');\n  };\n\n  private readonly _onChildMenuClosed = () => {\n    const { item } = this;\n    if (!item) {\n      return;\n    }\n\n    item.submenuOpen = false;\n    item.setAttribute('aria-expanded', 'false');\n  };\n\n  get item(): MenuItem | null {\n    const [candidate] = this._items ?? [];\n    return candidate instanceof MenuItem ? candidate : null;\n  }\n\n  get menu(): Menu | null {\n    const [candidate] = this._menus ?? [];\n    return candidate instanceof Menu ? candidate : null;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('mouseenter', this._onMouseEnter);\n    this.addEventListener('mouseleave', this._onMouseLeave);\n  }\n\n  disconnectedCallback() {\n    const { menu } = this;\n    menu?.removeEventListener('opened', this._onChildMenuOpened);\n    menu?.removeEventListener('closed', this._onChildMenuClosed);\n    this.removeEventListener('mouseenter', this._onMouseEnter);\n    this.removeEventListener('mouseleave', this._onMouseLeave);\n    window.clearTimeout(this._openTimeout);\n    window.clearTimeout(this._closeTimeout);\n    super.disconnectedCallback();\n  }\n\n  async show() {\n    const { item, menu } = this;\n    if (!item || !menu) {\n      return;\n    }\n\n    menu.anchorElement = this._resolveAnchorElement(item);\n    menu.isSubmenu = true;\n    menu.show();\n\n    item.hasSubmenu = true;\n    item.submenuOpen = true;\n    item.setAttribute('aria-expanded', 'true');\n  }\n\n  async close() {\n    const { item, menu } = this;\n    if (!item || !menu) {\n      return;\n    }\n\n    menu.close({ kind: 'programmatic' });\n    item.submenuOpen = false;\n    item.setAttribute('aria-expanded', 'false');\n  }\n\n  render() {\n    return html`\n      <slot\n        name=\"item\"\n        @slotchange=${this._onSlotChange}\n        @click=${this._onItemClick}\n        @keydown=${this._onItemKeyDown}\n      ></slot>\n      <slot\n        name=\"menu\"\n        @slotchange=${this._onSlotChange}\n        @close-menu=${this._onCloseMenu}\n        @keydown=${this._onMenuKeyDown}\n      ></slot>\n    `;\n  }\n\n  private _onSlotChange = () => {\n    const { item, menu } = this;\n    if (!item || !menu) {\n      return;\n    }\n\n    if (!menu.id) {\n      subMenuIdCounter += 1;\n      menu.id = `wc-sub-menu-${subMenuIdCounter}`;\n    }\n\n    item.keepOpen = true;\n    item.hasSubmenu = true;\n    item.submenuOpen = menu.open;\n    item.setAttribute('aria-haspopup', 'menu');\n    item.setAttribute('aria-expanded', String(menu.open));\n    item.setAttribute('aria-controls', menu.id);\n\n    menu.removeEventListener('opened', this._onChildMenuOpened);\n    menu.removeEventListener('closed', this._onChildMenuClosed);\n    menu.addEventListener('opened', this._onChildMenuOpened);\n    menu.addEventListener('closed', this._onChildMenuClosed);\n\n    menu.isSubmenu = true;\n    menu.anchorElement = this._resolveAnchorElement(item);\n    menu.placement =\n      getComputedStyle(this).direction === 'rtl' ? 'left-start' : 'right-start';\n    menu.offset = 4;\n  };\n\n  private _onItemClick = () => {\n    if (this.menu?.open) {\n      this.close();\n      return;\n    }\n\n    this.show();\n  };\n\n  private _onItemKeyDown = async (event: KeyboardEvent) => {\n    const isRtl = getComputedStyle(this).direction === 'rtl';\n    const arrowEnter = isRtl ? 'ArrowLeft' : 'ArrowRight';\n\n    const shouldOpen =\n      event.key === arrowEnter || event.key === 'Enter' || event.key === ' ';\n\n    if (!shouldOpen) {\n      return;\n    }\n\n    event.preventDefault();\n    if (event.key === arrowEnter) {\n      event.stopPropagation();\n    }\n\n    await this.show();\n    const firstItem = this.menu?.items.find(menuItem => !menuItem.disabled);\n    if (firstItem) {\n      firstItem.tabIndex = 0;\n      firstItem.focus();\n    }\n  };\n\n  private _onMenuKeyDown = async (event: KeyboardEvent) => {\n    const isRtl = getComputedStyle(this).direction === 'rtl';\n    const arrowExit = isRtl ? 'ArrowRight' : 'ArrowLeft';\n\n    if (event.key !== 'Escape' && event.key !== arrowExit) {\n      return;\n    }\n\n    event.preventDefault();\n    event.stopPropagation();\n\n    await this.close();\n\n    const { item } = this;\n    if (item) {\n      item.tabIndex = 0;\n      item.focus();\n    }\n  };\n\n  private _onCloseMenu = async (\n    event: CustomEvent<{ reason?: { kind?: string; key?: string } }>,\n  ) => {\n    const { reason } = event.detail ?? {};\n    const { key } = reason ?? {};\n    if (reason?.kind === 'keydown' && key === 'Escape') {\n      event.stopPropagation();\n      await this.close();\n      this.item?.focus();\n    }\n  };\n\n  private _onMouseEnter = () => {\n    window.clearTimeout(this._closeTimeout);\n    this._openTimeout = window.setTimeout(() => {\n      this.show();\n    }, this.hoverOpenDelay);\n  };\n\n  private _onMouseLeave = (event: MouseEvent) => {\n    const { relatedTarget: related } = event;\n    if (related instanceof Node && this.contains(related)) {\n      return;\n    }\n\n    window.clearTimeout(this._openTimeout);\n    this._closeTimeout = window.setTimeout(() => {\n      this.close();\n    }, this.hoverCloseDelay);\n  };\n}\n"],"names":["LitElement","html","styles","property","queryAssignedElements"],"mappings":"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"}

package/dist/timeline-item.js

@@ -0,0 +1,175 @@
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, b } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+
+var css_248z = i`:host {
+  display: block;
+}
+
+.timeline-item {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.75rem;
+  align-items: stretch;
+}
+
+:host-context([orientation=horizontal]) .timeline-item {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  grid-template-columns: 1fr;
+  gap: 0.75rem;
+  align-items: stretch;
+  min-height: auto;
+}
+
+.marker-column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: var(--timeline-dot-size, 2rem);
+}
+
+:host-context([orientation=horizontal]) .marker-column {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: auto;
+  height: var(--timeline-dot-size, 2rem);
+}
+
+.marker {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--timeline-dot-size, 2rem);
+  height: var(--timeline-dot-size, 2rem);
+  flex-shrink: 0;
+}
+
+.marker-dot {
+  width: var(--timeline-dot-size, 2rem);
+  height: var(--timeline-dot-size, 2rem);
+  min-width: var(--timeline-dot-size, 2rem);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--timeline-dot-bg, var(--color-primary));
+  --icon-color: var(--timeline-dot-color, var(--color-on-primary));
+  position: relative;
+  z-index: 2;
+}
+
+.marker-dot ::slotted(wc-icon) {
+  --icon-size: calc(var(--timeline-dot-size, 2rem) * 0.6);
+}
+
+.dot-spinner {
+  --progress-height: calc(var(--timeline-dot-size, 2rem) * 0.6);
+}
+
+/* Flexible connector line that stretches to fill remaining height */
+.connector {
+  flex: 1;
+  min-height: 2rem;
+  width: 2px;
+  background: var(--timeline-line-color, var(--color-outline));
+  margin: auto;
+  margin-block: 0.25rem;
+}
+
+:host(:last-child) .connector {
+  display: none;
+}
+
+/* Horizontal orientation connector */
+:host-context([orientation=horizontal]) .connector {
+  flex: 1;
+  min-width: 2rem;
+  width: auto;
+  height: 2px;
+  background: var(--timeline-line-color, var(--color-outline));
+  margin: auto;
+  margin-inline: 0.25rem;
+}
+
+:host-context([orientation=horizontal]):last-child .connector {
+  display: none;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.description {
+  color: var(--timeline-description-color, var(--color-on-surface-variant));
+  line-height: 1.4;
+}`;
+
+/**
+ * @label Timeline Item
+ * @tag wc-timeline-item
+ * @rawTag timeline-item
+ *
+ * @summary An item for use inside a timeline, with a dot/marker and description.
+ *
+ * @example
+ * ```html
+ * <wc-timeline-item description="Step completed">
+ *   <span>Step title</span>
+ *   <wc-icon slot="dot" name="check"></wc-icon>
+ * </wc-timeline-item>
+ * ```
+ * @tags display
+ */
+let TimelineItem = class TimelineItem extends i$1 {
+    constructor() {
+        super(...arguments);
+        this.loading = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'listitem');
+        }
+    }
+    render() {
+        return b `
+      <div class="timeline-item">
+        <div class="marker-column">
+          <div class="marker">
+            <div class="marker-dot">
+              ${this.loading
+            ? b `<wc-circular-progress
+                    class="dot-spinner"
+                    indeterminate
+                    aria-label="Loading"
+                  ></wc-circular-progress>`
+            : b `<slot name="dot"></slot>`}
+            </div>
+          </div>
+          <div class="connector"></div>
+        </div>
+
+        <div class="content">
+          <div class="headline"><slot></slot></div>
+          <div class="description">
+            <slot name="content"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+};
+TimelineItem.styles = [css_248z];
+__decorate([
+    n({ type: Boolean, reflect: true })
+], TimelineItem.prototype, "loading", void 0);
+TimelineItem = __decorate([
+    IndividualComponent
+], TimelineItem);
+
+export { TimelineItem };
+//# sourceMappingURL=timeline-item.js.map

package/dist/timeline-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-item.js","sources":["../../src/timeline/timeline-item.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport styles from './timeline-item.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Timeline Item\n * @tag wc-timeline-item\n * @rawTag timeline-item\n *\n * @summary An item for use inside a timeline, with a dot/marker and description.\n *\n * @example\n * ```html\n * <wc-timeline-item description=\"Step completed\">\n *   <span>Step title</span>\n *   <wc-icon slot=\"dot\" name=\"check\"></wc-icon>\n * </wc-timeline-item>\n * ```\n * @tags display\n */\n@IndividualComponent\nexport class TimelineItem extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Boolean, reflect: true }) loading = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'listitem');\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"timeline-item\">\n        <div class=\"marker-column\">\n          <div class=\"marker\">\n            <div class=\"marker-dot\">\n              ${this.loading\n                ? html`<wc-circular-progress\n                    class=\"dot-spinner\"\n                    indeterminate\n                    aria-label=\"Loading\"\n                  ></wc-circular-progress>`\n                : html`<slot name=\"dot\"></slot>`}\n            </div>\n          </div>\n          <div class=\"connector\"></div>\n        </div>\n\n        <div class=\"content\">\n          <div class=\"headline\"><slot></slot></div>\n          <div class=\"description\">\n            <slot name=\"content\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA;;;;;;;;;;;;;;;AAeG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQA,GAAU,CAAA;AAArC,IAAA,WAAA,GAAA;;QAGuC,IAAA,CAAA,OAAO,GAAG,KAAK;IAoC7D;IAlCE,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE;QACzB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;AAC9B,YAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC;QACvC;IACF;IAEA,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA;;;;;AAKC,cAAA,EAAA,IAAI,CAAC;cACHA,CAAI,CAAA,CAAA;;;;AAIqB,0CAAA;cACzBA,CAAI,CAAA,CAAA,wBAAA,CAA0B;;;;;;;;;;;;;KAa3C;IACH;;AArCO,YAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAEoB,UAAA,CAAA;IAA3CC,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAAkB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAHjD,YAAY,GAAA,UAAA,CAAA;IADxB;AACY,CAAA,EAAA,YAAY,CAuCxB;;;;"}

package/dist/timeline.js

@@ -0,0 +1,69 @@
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, b } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+import { TimelineItem } from './timeline-item.js';
+
+var css_248z = i`:host {
+  display: block;
+}
+
+.timeline {
+  display: grid;
+  gap: 0;
+  position: relative;
+  padding-left: calc(var(--timeline-dot-size, 2rem) / 2);
+}
+
+:host([orientation=horizontal]) .timeline {
+  display: grid;
+  gap: 0;
+  position: relative;
+  padding-left: 0;
+  padding-top: calc(var(--timeline-dot-size, 2rem) / 2);
+  grid-auto-flow: column;
+  grid-template-rows: 1fr;
+}`;
+
+/**
+ * @label Timeline
+ * @tag wc-timeline
+ * @rawTag timeline
+ *
+ * @summary A vertical timeline layout for a series of timeline items.
+ *
+ * @example
+ * ```html
+ * <wc-timeline>
+ *   <wc-timeline-item description="Task completed">
+ *     <span>Task title</span>
+ *     <wc-icon slot="dot" name="check"></wc-icon>
+ *   </wc-timeline-item>
+ * </wc-timeline>
+ * ```
+ * @tags display
+ */
+let Timeline = class Timeline extends i$1 {
+    constructor() {
+        super(...arguments);
+        this.orientation = 'vertical';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'list');
+        }
+    }
+    render() {
+        return b `<div class="timeline"><slot></slot></div>`;
+    }
+};
+Timeline.styles = [css_248z];
+Timeline.Item = TimelineItem;
+__decorate([
+    n({ type: String, reflect: true })
+], Timeline.prototype, "orientation", void 0);
+Timeline = __decorate([
+    IndividualComponent
+], Timeline);
+
+export { Timeline };
+//# sourceMappingURL=timeline.js.map

package/dist/timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.js","sources":["../../src/timeline/timeline.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport styles from './timeline.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport { TimelineItem } from './timeline-item.js';\n\n/**\n * @label Timeline\n * @tag wc-timeline\n * @rawTag timeline\n *\n * @summary A vertical timeline layout for a series of timeline items.\n *\n * @example\n * ```html\n * <wc-timeline>\n *   <wc-timeline-item description=\"Task completed\">\n *     <span>Task title</span>\n *     <wc-icon slot=\"dot\" name=\"check\"></wc-icon>\n *   </wc-timeline-item>\n * </wc-timeline>\n * ```\n * @tags display\n */\n@IndividualComponent\nexport class Timeline extends LitElement {\n  static styles = [styles];\n\n  static Item = TimelineItem;\n\n  @property({ type: String, reflect: true }) orientation: 'vertical' | 'horizontal' = 'vertical';\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'list');\n    }\n  }\n\n  render() {\n    return html`<div class=\"timeline\"><slot></slot></div>`;\n  }\n}\n"],"names":["LitElement","html","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;;;;;;;;;;;;;;;;AAiBG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQA,GAAU,CAAA;AAAjC,IAAA,WAAA,GAAA;;QAKsC,IAAA,CAAA,WAAW,GAA8B,UAAU;IAYhG;IAVE,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE;QACzB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;AAC9B,YAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC;QACnC;IACF;IAEA,MAAM,GAAA;QACJ,OAAOC,CAAI,CAAA,CAAA,yCAAA,CAA2C;IACxD;;AAfO,QAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAEjB,QAAA,CAAA,IAAI,GAAG,YAAH;AAEgC,UAAA,CAAA;IAA1CC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAAsD,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,aAAA,EAAA,MAAA,CAAA;AALpF,QAAQ,GAAA,UAAA,CAAA;IADpB;AACY,CAAA,EAAA,QAAQ,CAiBpB;;;;"}

package/dist/tooltip.js

@@ -1,8 +1,9 @@
 import { i, _ as __decorate, I as IndividualComponent, a as i$1, b } from './IndividualComponent-Bdwyrvd6.js';
 import { n } from './property-B49QQ8pS.js';
 import { e } from './class-map-DG7CA1et.js';
-import { F as FloatingController } from './floating-controller-CnUZnOhK.js';
+import { F as FloatingController } from './floating-controller-CZYwnRVu.js';
 import './directive-ZPhl09Yt.js';
+import './floating-ui.dom-oQieRCpS.js';
 
 var css_248z = i`* {
   box-sizing: border-box;

package/dist/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":["../../src/tooltip/tooltip.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './tooltip.scss';\nimport { FloatingController } from '../__internal/controllers/floating-controller.js';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n// Define a type for valid trigger combinations\nexport type TooltipTrigger = 'hover' | 'focus' | 'click';\n\n/**\n * @label Tooltip\n * @tag wc-tooltip\n * @rawTag tooltip\n * @summary Displays a tooltip for an element.\n * @tags display\n *\n * @example\n * ```html\n * <wc-tooltip preview>Tooltip</wc-tooltip>\n * ```\n */\n@IndividualComponent\nexport class Tooltip extends LitElement {\n  static styles = [styles];\n\n  @property() content: string = '';\n\n  /**\n   * The ID of the element the tooltip should attach to.\n   * If not provided, it defaults to the parent element.\n   */\n  @property() for: string = '';\n\n  @property({ type: String }) trigger: string = 'hover focus';\n\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @property({ type: String, reflect: true }) variant: 'plain' | 'rich' =\n    'plain';\n\n  @property({ type: Boolean, reflect: true }) preview = false;\n\n  private _target: HTMLElement | null = null;\n\n  private _floating: FloatingController | null = null;\n\n  private resolveTrigger():\n    | 'hover'\n    | 'click'\n    | 'focus'\n    | 'manual'\n    | 'hover-focus' {\n    if (this.preview) return 'manual';\n\n    const triggerTokens = this.trigger.split(' ');\n    const hasHover = triggerTokens.includes('hover');\n    const hasFocus = triggerTokens.includes('focus');\n    const hasClick = triggerTokens.includes('click');\n\n    if (hasClick) return 'click';\n    if (hasHover && hasFocus) return 'hover-focus';\n    if (hasFocus) return 'focus';\n    if (hasHover) return 'hover';\n    return 'manual';\n  }\n\n  private detachListeners() {\n    if (this._floating) {\n      this._floating.close();\n      this._floating = null;\n    }\n    this._target = null;\n  }\n\n  _focusTarget?: HTMLElement;\n\n  set forElement(value: HTMLElement | null) {\n    if (value) {\n      this._focusTarget = value;\n    } else {\n      this._focusTarget = undefined;\n    }\n  }\n\n  __getFocusTarget(): HTMLElement | null {\n    if (this._focusTarget) {\n      return this._focusTarget;\n    }\n\n    const focusTarget = document.getElementById(this.for);\n    if (focusTarget) {\n      return focusTarget;\n    }\n\n    return this.parentElement;\n  }\n\n  private attachListeners() {\n    this.detachListeners();\n\n    // Resolve target: ID-based lookup or fallback to parent\n    const root = this.getRootNode() as ShadowRoot | Document;\n    this._target = this.for\n      ? (root.getElementById(this.for) as HTMLElement)\n      : this.parentElement;\n\n    if (!this._target) return;\n\n    this._floating = new FloatingController(this, {\n      placement: 'top',\n      strategy: 'fixed',\n      offset: 0,\n      trigger: this.resolveTrigger(),\n      closeOnClickOutside: true,\n      onOpenChange: isOpen => {\n        if (this.open === isOpen) return;\n        this.open = isOpen;\n      },\n    });\n\n    this._floating.setElements(this._target, this);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.attachListeners();\n  }\n\n  disconnectedCallback() {\n    this.detachListeners();\n    super.disconnectedCallback();\n  }\n\n  protected updated(changedProps: Map<string, any>) {\n    // If the 'for' property changes, re-bind listeners to the new target\n    if (changedProps.has('for')) {\n      this.attachListeners();\n    }\n\n    if (changedProps.has('trigger') || changedProps.has('preview')) {\n      this.attachListeners();\n    }\n\n    if (this._floating && this._target) {\n      this._floating.setElements(this._target, this);\n\n      if (changedProps.has('open') && this.open && !this._floating.isOpen) {\n        this._floating.open();\n      }\n\n      if (changedProps.has('open') && !this.open && this._floating.isOpen) {\n        this._floating.close();\n      }\n    }\n  }\n\n  render() {\n    return html` <div\n      class=${classMap({\n        tooltip: true,\n        [`variant-${this.variant}`]: true,\n      })}\n      id=\"tooltip\"\n      role=\"tooltip\"\n      aria-hidden=${!this.open}\n      aria-labelledby=\"tooltip-labelledby\"\n    >\n      ${this.variant === 'plain'\n        ? this.__renderPlainTooltip()\n        : this.__renderRichTooltip()}\n    </div>`;\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  __renderPlainTooltip() {\n    return html`<div class=\"tooltip-content\" id=\"tooltip-labelledby\">\n      <slot></slot>\n    </div>`;\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  __renderRichTooltip() {\n    return html`\n      <div class=\"tooltip-content\">\n        <wc-elevation class=\"elevation\"></wc-elevation>\n\n        <div class=\"tooltip-title\" id=\"tooltip-labelledby\">\n          <slot name=\"title\"></slot>\n        </div>\n        <div class=\"tooltip-support-text\">\n          <slot></slot>\n        </div>\n        <div class=\"tooltip-actions\">\n          <slot name=\"actions\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","styles","property"],"mappings":"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"}
+{"version":3,"file":"tooltip.js","sources":["../../src/tooltip/tooltip.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './tooltip.scss';\nimport { FloatingController } from '../__internal/controllers/floating-controller.js';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n// Define a type for valid trigger combinations\nexport type TooltipTrigger = 'hover' | 'focus' | 'click';\n\n/**\n * @label Tooltip\n * @tag wc-tooltip\n * @rawTag tooltip\n * @summary Displays a tooltip for an element.\n * @tags display\n *\n * @example\n * ```html\n * <wc-tooltip preview>Tooltip</wc-tooltip>\n * ```\n */\n@IndividualComponent\nexport class Tooltip extends LitElement {\n  static styles = [styles];\n\n  @property() content: string = '';\n\n  /**\n   * The ID of the element the tooltip should attach to.\n   * If not provided, it defaults to the parent element.\n   */\n  @property() for: string = '';\n\n  @property({ type: String }) trigger: string = 'hover focus';\n\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @property({ type: String, reflect: true }) variant: 'plain' | 'rich' =\n    'plain';\n\n  @property({ type: Boolean, reflect: true }) preview = false;\n\n  private _target: HTMLElement | null = null;\n\n  private _floating: FloatingController | null = null;\n\n  private resolveTrigger():\n    | 'hover'\n    | 'click'\n    | 'focus'\n    | 'manual'\n    | 'hover-focus' {\n    if (this.preview) return 'manual';\n\n    const triggerTokens = this.trigger.split(' ');\n    const hasHover = triggerTokens.includes('hover');\n    const hasFocus = triggerTokens.includes('focus');\n    const hasClick = triggerTokens.includes('click');\n\n    if (hasClick) return 'click';\n    if (hasHover && hasFocus) return 'hover-focus';\n    if (hasFocus) return 'focus';\n    if (hasHover) return 'hover';\n    return 'manual';\n  }\n\n  private detachListeners() {\n    if (this._floating) {\n      this._floating.close();\n      this._floating = null;\n    }\n    this._target = null;\n  }\n\n  _focusTarget?: HTMLElement;\n\n  set forElement(value: HTMLElement | null) {\n    if (value) {\n      this._focusTarget = value;\n    } else {\n      this._focusTarget = undefined;\n    }\n  }\n\n  __getFocusTarget(): HTMLElement | null {\n    if (this._focusTarget) {\n      return this._focusTarget;\n    }\n\n    const focusTarget = document.getElementById(this.for);\n    if (focusTarget) {\n      return focusTarget;\n    }\n\n    return this.parentElement;\n  }\n\n  private attachListeners() {\n    this.detachListeners();\n\n    // Resolve target: ID-based lookup or fallback to parent\n    const root = this.getRootNode() as ShadowRoot | Document;\n    this._target = this.for\n      ? (root.getElementById(this.for) as HTMLElement)\n      : this.parentElement;\n\n    if (!this._target) return;\n\n    this._floating = new FloatingController(this, {\n      placement: 'top',\n      strategy: 'fixed',\n      offset: 0,\n      trigger: this.resolveTrigger(),\n      closeOnClickOutside: true,\n      onOpenChange: isOpen => {\n        if (this.open === isOpen) return;\n        this.open = isOpen;\n      },\n    });\n\n    this._floating.setElements(this._target, this);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.attachListeners();\n  }\n\n  disconnectedCallback() {\n    this.detachListeners();\n    super.disconnectedCallback();\n  }\n\n  protected updated(changedProps: Map<string, any>) {\n    // If the 'for' property changes, re-bind listeners to the new target\n    if (changedProps.has('for')) {\n      this.attachListeners();\n    }\n\n    if (changedProps.has('trigger') || changedProps.has('preview')) {\n      this.attachListeners();\n    }\n\n    if (this._floating && this._target) {\n      this._floating.setElements(this._target, this);\n\n      if (changedProps.has('open') && this.open && !this._floating.isOpen) {\n        this._floating.open();\n      }\n\n      if (changedProps.has('open') && !this.open && this._floating.isOpen) {\n        this._floating.close();\n      }\n    }\n  }\n\n  render() {\n    return html` <div\n      class=${classMap({\n        tooltip: true,\n        [`variant-${this.variant}`]: true,\n      })}\n      id=\"tooltip\"\n      role=\"tooltip\"\n      aria-hidden=${!this.open}\n      aria-labelledby=\"tooltip-labelledby\"\n    >\n      ${this.variant === 'plain'\n        ? this.__renderPlainTooltip()\n        : this.__renderRichTooltip()}\n    </div>`;\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  __renderPlainTooltip() {\n    return html`<div class=\"tooltip-content\" id=\"tooltip-labelledby\">\n      <slot></slot>\n    </div>`;\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  __renderRichTooltip() {\n    return html`\n      <div class=\"tooltip-content\">\n        <wc-elevation class=\"elevation\"></wc-elevation>\n\n        <div class=\"tooltip-title\" id=\"tooltip-labelledby\">\n          <slot name=\"title\"></slot>\n        </div>\n        <div class=\"tooltip-support-text\">\n          <slot></slot>\n        </div>\n        <div class=\"tooltip-actions\">\n          <slot name=\"actions\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","styles","property"],"mappings":"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"}