@swisspost/design-system-components 10.0.0-next.55 → 10.0.0-next.57

package/dist/esm/post-tabs.entry.js

@@ -1,7 +1,9 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-wEFJ-c34.js';
-import { v as version } from './package-BhxZzOEC.js';
-import { f as fadeOut, a as fadeIn } from './fade-SbIC4aZX.js';
-import './breakpoints-CJ80BZ06.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CDZBzSdV.js';
+import { v as version } from './package-CZvbetqX.js';
+import { f as fade } from './fade-DsgPYmAa.js';
+import { c as checkRequiredAndType } from './breakpoints-DYoSKGHO.js';
+import './utils-CoDiS_Ik.js';
+import './environment-CEmnRoA6.js';
 
 /**
  * Invoke the `componentOnReady` method if it is available, simulate it otherwise
@@ -24,49 +26,169 @@ function customOnReady(callback) {
     return setTimeout(callback);
 }
 
-const postTabsCss = ".tabs-wrapper{position:relative;padding-top:1rem;border:0;background-color:rgba(0,0,0,.02)}.tabs-wrapper::after{content:\"\";position:absolute;bottom:0;width:100%;height:1px;background-color:#ccc}.tabs-wrapper .tabs{background-color:rgba(0,0,0,0) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tabs-wrapper::after{background-color:ButtonBorder}}.tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;white-space:nowrap;margin-block:0;padding-inline-start:0;list-style:none}.tabs::after{content:\"\";display:block;flex:1 0 auto;width:1rem}.tab-content{padding-top:1rem}:host{display:block}:host([full-width=true]) .tabs-wrapper{margin-inline:calc(-1*var(--post-container-offset))}:host([full-width=true]) .tabs-wrapper .tabs{padding-inline:var(--post-container-offset)}";
+const postTabsCss = () => `.tabs-wrapper{position:relative;padding-top:1rem;border:0;background-color:rgba(0,0,0,.02)}.tabs-wrapper::after{content:"";position:absolute;bottom:0;width:100%;height:1px;background-color:#ccc}.tabs-wrapper .tabs{background-color:rgba(0,0,0,0) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tabs-wrapper::after{background-color:ButtonBorder}}.tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;white-space:nowrap;margin-block:0;padding-inline-start:0;list-style:none}.tabs::after{content:"";display:block;flex:1 0 auto;width:1rem}.tab-content{padding-top:1rem}:host{display:block}:host([full-width=true]) .tabs-wrapper{margin-inline:calc(-1*var(--post-container-offset))}:host([full-width=true]) .tabs-wrapper .tabs{padding-inline:var(--post-container-offset)}`;
 
 const PostTabs = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.postChange = createEvent(this, "postChange");
         this.isLoaded = false;
+        this.isNavigationMode = false;
         /**
          * When set to true, this property allows the tabs container to span the
+         * Changing this value after initialization has no effect.
          * full width of the screen, from edge to edge.
          */
         this.fullWidth = false;
     }
     get tabs() {
-        return Array.from(this.host.querySelectorAll('post-tab-header')).filter(tab => tab.closest('post-tabs') === this.host);
+        return Array.from(this.host.querySelectorAll('post-tab-item')).filter(tab => tab.closest('post-tabs') === this.host);
+    }
+    get panels() {
+        return Array.from(this.host.querySelectorAll('post-tab-panel')).filter(panel => panel.closest('post-tabs') === this.host);
+    }
+    validateLabel() {
+        if (this.isNavigationMode) {
+            checkRequiredAndType(this, 'label', 'string');
+        }
+    }
+    componentWillRender() {
+        this.detectMode();
     }
     componentDidLoad() {
         this.moveMisplacedTabs();
+        this.moveMisplacedPanels();
         this.enableTabs();
-        const initiallyActivePanel = this.activePanel || this.tabs[0]?.panel;
-        void this.show(initiallyActivePanel);
-        this.isLoaded = true;
+        this.setupContentObserver();
+        this.validateLabel();
+        if (this.isNavigationMode) {
+            const activeTab = this.findActiveNavigationTab();
+            if (activeTab) {
+                this.activateTab(activeTab);
+            }
+        }
+        else {
+            const tabToActivate = this.activeTab || this.tabs[0]?.name;
+            if (tabToActivate) {
+                void this.show(tabToActivate);
+            }
+        }
+    }
+    disconnectedCallback() {
+        if (this.showing) {
+            this.showing.cancel();
+            this.showing = null;
+        }
+        if (this.hiding) {
+            this.hiding.cancel();
+            this.hiding = null;
+        }
+        if (this.contentObserver) {
+            this.contentObserver.disconnect();
+        }
+    }
+    setupContentObserver() {
+        const config = {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['data-navigation-mode', 'aria-current'],
+        };
+        this.contentObserver = new MutationObserver(this.handleContentChange.bind(this));
+        this.contentObserver.observe(this.host, config);
+    }
+    handleContentChange(mutations) {
+        const shouldRedetect = this.shouldRedetectMode(mutations);
+        const ariaCurrentChanged = this.hasAriaCurrentChanged(mutations);
+        if (ariaCurrentChanged && this.isNavigationMode) {
+            this.updateActiveNavigationTab();
+        }
+        if (shouldRedetect) {
+            this.handleModeChange();
+        }
+    }
+    shouldRedetectMode(mutations) {
+        return mutations.some(mutation => {
+            if (mutation.type === 'childList') {
+                return mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0;
+            }
+            if (mutation.type === 'attributes' && mutation.attributeName === 'data-navigation-mode') {
+                return true;
+            }
+            return false;
+        });
+    }
+    hasAriaCurrentChanged(mutations) {
+        return mutations.some(mutation => mutation.type === 'attributes' && mutation.attributeName === 'aria-current');
+    }
+    updateActiveNavigationTab() {
+        const activeTab = this.findActiveNavigationTab();
+        if (activeTab && activeTab !== this.currentActiveTab) {
+            this.activateTab(activeTab);
+        }
+    }
+    handleModeChange() {
+        const previousMode = this.isNavigationMode;
+        this.detectMode();
+        if (previousMode !== this.isNavigationMode) {
+            this.enableTabs();
+            this.initializeActiveTab();
+        }
+    }
+    initializeActiveTab() {
+        if (this.isNavigationMode) {
+            const activeTab = this.findActiveNavigationTab();
+            if (activeTab) {
+                this.activateTab(activeTab);
+            }
+        }
+        else {
+            const tabToActivate = this.activeTab || this.tabs[0]?.name;
+            if (tabToActivate) {
+                void this.show(tabToActivate);
+            }
+        }
+    }
+    detectMode() {
+        // Check for navigation mode by looking for anchor elements in tabs
+        // This works even before post-tab-item sets data-navigation-mode attribute
+        const hasNavigationTabs = this.tabs.some(tab => {
+            const hasAnchor = tab.querySelector('a') !== null;
+            const navModeAttr = tab.getAttribute('data-navigation-mode') === 'true';
+            return hasAnchor || navModeAttr;
+        });
+        const hasPanels = this.panels.length > 0;
+        if (hasNavigationTabs && hasPanels) {
+            throw new Error('PostTabs: Mixed mode detected. Cannot use both navigation mode (anchor elements) and panel mode (post-tab-panel elements) at the same time.');
+        }
+        this.isNavigationMode = hasNavigationTabs;
+    }
+    findActiveNavigationTab() {
+        return (this.tabs.find(tab => {
+            const anchor = tab.querySelector('a[aria-current="page"]');
+            return anchor !== null;
+        }) || null);
     }
     /**
      * Shows the panel with the given name and selects its associated tab.
      * Any other panel that was previously shown becomes hidden and its associated tab is unselected.
      */
-    async show(panelName) {
+    async show(tabName) {
         // do nothing if the tab is already active
-        if (panelName === this.activeTab?.panel) {
+        if (tabName === this.currentActiveTab?.name) {
             return;
         }
-        const previousTab = this.activeTab;
-        const newTab = this.host.querySelector(`post-tab-header[panel=${panelName}]`);
+        const previousTab = this.currentActiveTab;
+        const newTab = this.host.querySelector(`post-tab-item[name=${tabName}]`);
         this.activateTab(newTab);
         // if a panel is currently being displayed, remove it from the view and complete the associated animation
         if (this.showing) {
-            this.showing.effect['target'].style.display = 'none';
             this.showing.finish();
+            this.showing = null;
         }
         // hide the currently visible panel only if no other animation is running
         if (previousTab && !this.showing && !this.hiding)
-            this.hidePanel(previousTab.panel);
+            this.hidePanel(previousTab.name);
         // wait for any hiding animation to complete before showing the selected tab
         if (this.hiding)
             await this.hiding.finished;
@@ -75,15 +197,25 @@ const PostTabs = class {
         if (this.showing)
             await this.showing.finished;
         if (this.isLoaded)
-            this.postChange.emit(this.activeTab.panel);
+            this.postChange.emit(this.currentActiveTab.name);
     }
     moveMisplacedTabs() {
         if (!this.tabs)
             return;
         this.tabs.forEach(tab => {
-            if (tab.getAttribute('slot') === 'tabs')
-                return;
-            tab.setAttribute('slot', 'tabs');
+            // Tab items should go in the default slot, so remove any slot attribute
+            if (tab.getAttribute('slot')) {
+                tab.removeAttribute('slot');
+            }
+        });
+    }
+    moveMisplacedPanels() {
+        if (!this.panels)
+            return;
+        this.panels.forEach(panel => {
+            if (panel.getAttribute('slot') !== 'panels') {
+                panel.setAttribute('slot', 'panels');
+            }
         });
     }
     enableTabs() {
@@ -91,19 +223,25 @@ const PostTabs = class {
             return;
         this.tabs.forEach(async (tab) => {
             await componentOnReady(tab);
-            // if the tab has an "aria-controls" attribute it was already linked to its panel: do nothing
+            // In navigation mode, navigation is handled by the consumer's routing
+            if (this.isNavigationMode) {
+                return;
+            }
+            // Panel mode: set up ARIA relationships and event handlers
             if (tab.getAttribute('aria-controls'))
                 return;
-            const tabPanel = this.getPanel(tab.panel);
-            tab.setAttribute('aria-controls', tabPanel.id);
-            tabPanel.setAttribute('aria-labelledby', tab.id);
+            const tabPanel = this.getPanel(tab.name);
+            if (tabPanel) {
+                tab.setAttribute('aria-controls', tabPanel.id);
+                tabPanel.setAttribute('aria-labelledby', tab.id);
+            }
             tab.addEventListener('click', () => {
-                void this.show(tab.panel);
+                void this.show(tab.name);
             });
             tab.addEventListener('keydown', (e) => {
                 if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault();
-                    void this.show(tab.panel);
+                    void this.show(tab.name);
                 }
             });
             tab.addEventListener('keydown', (e) => {
@@ -112,44 +250,51 @@ const PostTabs = class {
             });
         });
         // if the currently active tab was removed from the DOM then select the first one
-        if (this.activeTab && !this.activeTab.isConnected) {
-            void this.show(this.tabs[0]?.panel);
+        if (this.currentActiveTab && !this.currentActiveTab.isConnected) {
+            void this.show(this.tabs[0]?.name);
         }
     }
     activateTab(tab) {
-        if (this.activeTab) {
-            this.activeTab.setAttribute('aria-selected', 'false');
-            this.activeTab.setAttribute('tabindex', '-1');
-            this.activeTab.classList.remove('active');
+        // Deactivate previous tab
+        if (this.currentActiveTab) {
+            this.currentActiveTab.classList.remove('active');
+            if (!this.isNavigationMode) {
+                this.currentActiveTab.setAttribute('aria-selected', 'false');
+                this.currentActiveTab.setAttribute('tabindex', '-1');
+            }
         }
-        tab.setAttribute('aria-selected', 'true');
-        tab.setAttribute('tabindex', '0');
         tab.classList.add('active');
-        this.activeTab = tab;
+        if (!this.isNavigationMode) {
+            tab.setAttribute('aria-selected', 'true');
+            tab.setAttribute('tabindex', '0');
+        }
+        this.currentActiveTab = tab;
     }
     hidePanel(panelName) {
         const previousPanel = this.getPanel(panelName);
         if (!previousPanel)
             return;
-        this.hiding = fadeOut(previousPanel);
+        this.hiding = fade(previousPanel, 'out');
         this.hiding.onfinish = () => {
             previousPanel.style.display = 'none';
             this.hiding = null;
         };
     }
     showSelectedPanel() {
-        const panel = this.getPanel(this.activeTab.panel);
+        const panel = this.getPanel(this.currentActiveTab.name);
+        if (!panel)
+            return;
         panel.style.display = 'block';
         // prevent the initially selected panel from fading in
         if (!this.isLoaded)
             return;
-        this.showing = fadeIn(panel);
+        this.showing = fade(panel, 'in');
         this.showing.onfinish = () => {
             this.showing = null;
         };
     }
     getPanel(name) {
-        return this.host.querySelector(`post-tab-panel[name=${name}]`);
+        return this.host.querySelector(`post-tab-panel[for=${name}]`);
     }
     navigateTabs(tab, key) {
         const activeTabIndex = Array.from(this.tabs).indexOf(tab);
@@ -163,12 +308,22 @@ const PostTabs = class {
         if (!nextTab)
             return;
         nextTab.focus();
+        void this.show(nextTab.name);
     }
     render() {
-        return (h(Host, { key: 'f3534a3b05c379ce1cb311d4c5ea950c8eba87d0', "data-version": version }, h("div", { key: 'd812db6b2a895504fce8ac9dae2663821b9dd759', class: "tabs-wrapper", part: "tabs" }, h("div", { key: '9abd0ee00204a085ceaebce5e11fcff527273605', class: "tabs", role: "tablist" }, h("slot", { key: '89f09f443ca740dc9af66fedb1367cdb4885074d', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: '4a94a19fd67814482934bd31bb219470bea8dec6', class: "tab-content", part: "content" }, h("slot", { key: '44db446865edacb1b1c0fc20ef391adfa189e8cb', onSlotchange: () => this.moveMisplacedTabs() }))));
+        const TabsContainer = this.isNavigationMode ? 'nav' : 'div';
+        return (h(Host, { key: '89edc2a79734ee9cd60c9db0f01e2f05f2849071', "data-version": version }, h("div", { key: 'd85aa2320cef490831bf59117b54dc7c4edd9d65', class: "tabs-wrapper", part: "post-tabs" }, h(TabsContainer, { key: 'e4aa70db5e2d0f3391d8ebfaab6374c1966d6678', class: "tabs", role: this.isNavigationMode ? undefined : 'tablist', "aria-label": this.isNavigationMode ? this.label : undefined }, h("slot", { key: '7ab6f1e7bbe24ef642d5917b810b62e362ae2dc1', onSlotchange: () => {
+                this.moveMisplacedTabs();
+                this.enableTabs();
+            } }))), !this.isNavigationMode && (h("div", { key: '354eafcea40f6aa9bbb206a93bc2155eac725bb4', class: "tab-content", part: "post-tabs-content" }, h("slot", { key: 'a133b48cea08eade14a954933062380edf112523', name: "panels", onSlotchange: () => this.moveMisplacedPanels() })))));
     }
     get host() { return getElement(this); }
+    static get watchers() { return {
+        "label": [{
+                "validateLabel": 0
+            }]
+    }; }
 };
-PostTabs.style = postTabsCss;
+PostTabs.style = postTabsCss();
 
 export { PostTabs as post_tabs };

package/dist/esm/post-tooltip-trigger.entry.js

@@ -1,10 +1,10 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-wEFJ-c34.js';
-import { I as IS_BROWSER } from './breakpoints-CJ80BZ06.js';
-import { a as checkEmptyOrType } from './index-Beaz8wEe.js';
-import { v as version } from './package-BhxZzOEC.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-CDZBzSdV.js';
+import { a as IS_BROWSER } from './environment-CEmnRoA6.js';
+import { b as checkEmptyOrType } from './breakpoints-DYoSKGHO.js';
+import { v as version } from './package-CZvbetqX.js';
 import { i as isFocusable } from './focusable-HygIVKXC.js';
 
-const postTooltipTriggerCss = "post-tooltip-trigger{vertical-align:top}:host{cursor:pointer}";
+const postTooltipTriggerCss = () => `post-tooltip-trigger{vertical-align:top}:host{cursor:pointer}`;
 
 const TRIGGER_EVENTS = ['pointerenter', 'pointerleave', 'focusin', 'focusout', 'long-press'];
 if (IS_BROWSER) {
@@ -171,13 +171,15 @@ const PostTooltipTrigger = class {
         this.tooltip?.hide();
     }
     render() {
-        return (h(Host, { key: '48246523aabaf1851e05d0273346d3e26e7ad866', "data-version": version }, h("slot", { key: '0442aeadddd59642c317b6f10c93008adf3e6585', onSlotchange: () => this.handleSlotChange() })));
+        return (h(Host, { key: '4f6165e23284794b677748c495401ed7c110d134', "data-version": version }, h("slot", { key: '87a8d412ed0e3fb145853aebb9426dfe13677853', onSlotchange: () => this.handleSlotChange() })));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "for": ["validateControlFor"]
+        "for": [{
+                "validateControlFor": 0
+            }]
     }; }
 };
-PostTooltipTrigger.style = postTooltipTriggerCss;
+PostTooltipTrigger.style = postTooltipTriggerCss();
 
 export { PostTooltipTrigger as post_tooltip_trigger };

package/dist/esm/post-tooltip.entry.js

@@ -1,10 +1,10 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-wEFJ-c34.js';
-import { v as version } from './package-BhxZzOEC.js';
-import { d as checkEmptyOrOneOf } from './index-Beaz8wEe.js';
-import './breakpoints-CJ80BZ06.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-CDZBzSdV.js';
+import { v as version } from './package-CZvbetqX.js';
+import { f as checkEmptyOrOneOf } from './breakpoints-DYoSKGHO.js';
 import { P as PLACEMENT_TYPES } from './placement-DRiVosES.js';
+import './environment-CEmnRoA6.js';
 
-const postTooltipCss = ":host{display:none}:host([open]){display:contents}post-popovercontainer[arrow]::after{position:absolute;content:\"\";inset:-13px;z-index:-1}post-popovercontainer>div{color:var(--post-current-fg);background-color:var(--post-current-bg);padding:var(--post-core-dimension-4) var(--post-core-dimension-8);max-width:var(--post-tooltip-max-width, 280px);width:inherit;min-height:32px;word-wrap:break-word;white-space:normal}";
+const postTooltipCss = () => `:host{display:none}:host([open]){display:contents}post-popovercontainer[arrow]::after{position:absolute;content:"";inset:-13px;z-index:-1}post-popovercontainer>div{color:var(--post-current-fg);background-color:var(--post-current-bg);padding:var(--post-core-dimension-4) var(--post-core-dimension-8);max-width:var(--post-tooltip-max-width, 280px);width:inherit;min-height:32px;word-wrap:break-word;white-space:normal}`;
 
 const PostTooltip = class {
     constructor(hostRef) {
@@ -44,7 +44,7 @@ const PostTooltip = class {
     async show(target) {
         if (this.open)
             return;
-        this.popoverRef.show(target);
+        await this.popoverRef.show(target);
     }
     /**
      * Programmatically hide this tooltip.
@@ -64,18 +64,20 @@ const PostTooltip = class {
      * Set the open state based on the toggle event.
      * @param e Popovercontainer toggle event
      */
-    handleToggle(e) {
-        this.open = e.detail.isOpen;
+    handleBeforeToggle(e) {
+        this.open = e.detail.willOpen;
     }
     render() {
         const popoverClass = `${this.arrow ? 'has-arrow' : ''}`;
-        return (h(Host, { key: 'ebc25bd8a9615a13be82d58f246b5a5d42113cf2', "data-version": version }, h("post-popovercontainer", { key: 'dba7a96c1f354752475a6f1d9116b0097dddf320', safeSpace: "trapezoid", class: popoverClass, role: "tooltip", arrow: this.arrow, animation: this.animation, placement: this.placement, onPostToggle: e => this.handleToggle(e), ref: (el) => (this.popoverRef = el) }, h("slot", { key: '537370b88912d323a72ee074767b4cf2b4bc1b57' }))));
+        return (h(Host, { key: '5de53c10c2556ddb974a65ba06e27ccc99311762', "data-version": version }, h("post-popovercontainer", { key: 'ae3a26fc69d983884eb5aee2b024e74d91983c73', safeSpace: "trapezoid", class: popoverClass, role: "tooltip", arrow: this.arrow, placement: this.placement, onPostBeforeToggle: e => this.handleBeforeToggle(e), ref: (el) => (this.popoverRef = el) }, h("slot", { key: '1fd537504554e094894f8549de5c29c515322866' }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "placement": ["validatePlacement"]
+        "placement": [{
+                "validatePlacement": 0
+            }]
     }; }
 };
-PostTooltip.style = postTooltipCss;
+PostTooltip.style = postTooltipCss();
 
 export { PostTooltip as post_tooltip };

package/dist/esm/utils-CoDiS_Ik.js

@@ -0,0 +1,24 @@
+const headerEase = {
+    x1: 0.8,
+    y1: 0.2,
+    x2: 0.8,
+    y2: 0.7,
+};
+const PRESET_MAP = {
+    'linear': 'linear',
+    'ease': 'ease',
+    'ease-in': 'ease-in',
+    'ease-out': 'ease-out',
+    'ease-in-out': 'ease-in-out',
+    'headerEase': headerEase,
+};
+
+function resolveEasing(easing) {
+    const e = typeof easing === 'string' ? (PRESET_MAP[easing] ?? easing) : easing;
+    if (typeof e === 'string')
+        return e;
+    const { x1, y1, x2, y2 } = e;
+    return `cubic-bezier(${x1}, ${y1}, ${x2}, ${y2})`;
+}
+
+export { resolveEasing as r };

package/dist/post-components/p-09ba7cf9.entry.js

@@ -0,0 +1 @@
+import{r as t,h as o,H as e,a as s}from"./p-CDZBzSdV.js";import{v as i}from"./p-CZvbetqX.js";import{f as a}from"./p-B7ebLhHc.js";import{P as r}from"./p-DRiVosES.js";import"./p-CEmnRoA6.js";const n=class{constructor(o){t(this,o),this.placement="top",this.arrow=!1,this.open=!1}validatePlacement(){a(this,"placement",r)}componentWillLoad(){this.validatePlacement()}componentDidLoad(){this.host.id||console.error("No id set: <post-tooltip> must have an id, linking it to it's target element with a <post-tooltip-trigger> element.")}async show(t){this.open||await this.popoverRef.show(t)}async hide(){this.popoverRef.hide()}async toggle(t,o){this.popoverRef.toggle(t,o)}handleBeforeToggle(t){this.open=t.detail.willOpen}render(){return o(e,{key:"5de53c10c2556ddb974a65ba06e27ccc99311762","data-version":i},o("post-popovercontainer",{key:"ae3a26fc69d983884eb5aee2b024e74d91983c73",safeSpace:"trapezoid",class:this.arrow?"has-arrow":"",role:"tooltip",arrow:this.arrow,placement:this.placement,onPostBeforeToggle:t=>this.handleBeforeToggle(t),ref:t=>this.popoverRef=t},o("slot",{key:"1fd537504554e094894f8549de5c29c515322866"})))}get host(){return s(this)}static get watchers(){return{placement:[{validatePlacement:0}]}}};n.style=':host{display:none}:host([open]){display:contents}post-popovercontainer[arrow]::after{position:absolute;content:"";inset:-13px;z-index:-1}post-popovercontainer>div{color:var(--post-current-fg);background-color:var(--post-current-bg);padding:var(--post-core-dimension-4) var(--post-core-dimension-8);max-width:var(--post-tooltip-max-width, 280px);width:inherit;min-height:32px;word-wrap:break-word;white-space:normal}';export{n as post_tooltip}

package/dist/post-components/p-0c091898.entry.js

@@ -0,0 +1 @@
+import{r as e,h as t,H as i,a as o}from"./p-CDZBzSdV.js";import{v as r}from"./p-CZvbetqX.js";import{a as s,c as a}from"./p-B7ebLhHc.js";import{d as c}from"./p-C9hMpmsD.js";import"./p-CEmnRoA6.js";const n=class{constructor(t){e(this,t),this.breadcrumbItems=[],this.waitForBreadcrumbsRef=c((()=>{this.breadcrumbsNavRef?.clientWidth>0?this.checkConcatenation():this.waitForBreadcrumbsRef()}),50),this.handleResize=()=>{window.innerWidth!==this.lastWindowWidth&&(this.lastWindowWidth=window.innerWidth,this.checkConcatenation())}}validateHomeUrl(){s(this,"homeUrl")}validateTextHome(){a(this,"textHome","string")}validateTextBreadcrumbs(){a(this,"textBreadcrumbs","string")}validateTextMoreItems(){a(this,"textMoreItems","string")}componentWillLoad(){this.updateBreadcrumbItems()}componentDidLoad(){this.validateHomeUrl(),this.validateTextHome(),this.validateTextBreadcrumbs(),this.validateTextMoreItems(),window.addEventListener("resize",this.handleResize),this.waitForBreadcrumbsRef()}disconnectedCallback(){window.removeEventListener("resize",this.handleResize)}updateBreadcrumbItems(){this.breadcrumbItems=Array.from(this.host.querySelectorAll("post-breadcrumb-item")).map((e=>({text:e.textContent||"",url:e.getAttribute("url")||""}))),this.lastItem=this.breadcrumbItems[this.breadcrumbItems.length-1]}getParentWidth(){let e=this.host.parentNode;for(;e&&!(e instanceof HTMLElement);)e=e.parentNode;return e instanceof HTMLElement?e.clientWidth:window.innerWidth}checkConcatenation(){if(!this.breadcrumbsNavRef)return;const e=this.getParentWidth(),t=Array.from(this.host.shadowRoot?.querySelectorAll(".hidden-breadcrumb-item")||[]).reduce(((e,t)=>e+t.getBoundingClientRect().width),0);this.isConcatenated=t>e}handleBreadcrumbItemClick(){if(this.host.shadowRoot){const e=this.host.shadowRoot?.querySelector(".menu-trigger-wrapper")?.querySelector("button");e&&e.click()}}render(){const e=this.breadcrumbItems.slice(0,-1);return t(i,{key:"f3c59a174634a6ca6d3b9beceb455563275d04a6","data-version":r},t("nav",{key:"cdc7cd4bbad53c57cdcbb735804b548f20b39523","aria-label":this.textBreadcrumbs,class:"breadcrumbs-nav",ref:e=>this.breadcrumbsNavRef=e},t("ol",{key:"419658d8f58822c3fbf8e58bfc0069f629fc46d9",class:"no-list breadcrumbs-list"},t("li",{key:"52348e55a01f3236957e23fc502cce6cbb4eadb9"},t("a",{key:"8d1d8acff9f33c52e82ff4ce920c3f6a8418cdaa",href:this.homeUrl,class:"breadcrumb-link"},t("span",{key:"1aca58d1afb96580f4b2f744dd972a1556fd9ad3",class:"visually-hidden"},this.textHome),t("post-icon",{key:"dfe6d8b330f718408ac82024ebd89e13382119bf",name:"home",class:"home-icon"}))),this.isConcatenated?t("li",{class:"menu-trigger-wrapper"},t("post-icon",{name:"chevronright",class:"breadcrumb-item-icon"}),t("div",{class:"actual-menu"},t("post-menu-trigger",{for:"breadcrumb-menu",tabIndex:0,onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleBreadcrumbItemClick())}},t("button",{class:"btn",tabIndex:-1},"...")),t("post-menu",{id:"breadcrumb-menu",label:this.textMoreItems},e.map((e=>t("post-menu-item",{key:e.url||e.text,class:"breadcrumb-item",onKeyDown:e=>{if("Enter"===e.key||" "===e.key){const t=e.currentTarget.querySelector("a");t?.click(),e.preventDefault()}}},e.url?t("a",{href:e.url},e.text):t("span",null,e.text))))))):e.map((e=>t("li",null,t("post-breadcrumb-item",{url:e.url,key:e.url||e.text},e.text)))),this.lastItem&&t("li",{key:"13d8b9834218f995a2e7404227c288ef6e87f583","aria-current":"page"},t("post-breadcrumb-item",{key:"eb1b375fa201d81fa84a3b30cff0f64f58bfd3a4",url:this.lastItem.url,tabindex:-1},this.lastItem.text))),t("div",{key:"5527023bc4109b42b20202404246a74bd3120eff",class:"hidden-items"},t("a",{key:"0a7d14bb5d482790011c816599ddf663a2b32e80",href:this.homeUrl,class:"hidden-breadcrumb-item"},t("span",{key:"715281201fd630b00306add80d68c87ade21f83c",class:"visually-hidden"},this.textHome),t("post-icon",{key:"e8c78c08c0eff93d180e927d4ebe6c7e4b5fd224",name:"home",class:"home-icon"})),this.breadcrumbItems.map((e=>t("post-breadcrumb-item",{url:e.url,key:`hidden-${e.url||e.text}`,class:"hidden-breadcrumb-item"},e.text))))))}get host(){return o(this)}static get watchers(){return{homeUrl:[{validateHomeUrl:0}],textHome:[{validateTextHome:0}],textBreadcrumbs:[{validateTextBreadcrumbs:0}],textMoreItems:[{validateTextMoreItems:0}]}}};n.style=":host{display:flex;align-items:center}.breadcrumbs-nav{display:flex;align-items:center}.hidden-items{gap:var(--post-device-spacing-gap-inline-4);position:absolute;height:0;overflow:hidden;white-space:nowrap}.breadcrumbs-list{display:flex;flex-wrap:nowrap;position:relative;margin:0;padding:0;list-style:none;align-items:center;height:100%;gap:var(--post-device-spacing-gap-inline-4)}post-icon{display:inline-block;box-sizing:border-box;color:var(--post-scheme-color-interactive-primary-enabled-fg1);height:var(--post-core-dimension-24);width:var(--post-core-dimension-24)}.breadcrumb-item-icon{padding-block:var(--post-core-dimension-4);padding-inline:var(--post-core-dimension-4)}li a{display:flex;align-items:center}li a{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}li a:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){li a:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){li a:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){li a:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}li a:focus{border-radius:var(--post-device-border-radius-focus)}li a .home-icon{padding-block:var(--post-device-spacing-padding-4);padding-inline:var(--post-device-spacing-padding-4)}li a .home-icon:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){li a .home-icon a,li a .home-icon:focus,li a .home-icon:hover{color:CanvasText !important}}.menu-trigger-wrapper{display:flex;align-items:center;gap:var(--post-device-spacing-gap-inline-5)}.actual-menu{display:flex;align-items:center}post-menu-trigger{display:flex;align-items:center;padding-block:var(--post-device-spacing-padding-block-7)}post-menu-trigger{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}post-menu-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-menu-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-menu-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-menu-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}post-menu-trigger:focus{border-radius:var(--post-device-border-radius-focus)}post-menu-trigger button{background:none;border:none;line-height:150%;font-size:var(--post-device-font-size-6);cursor:pointer;padding:0;color:var(--post-scheme-color-interactive-primary-enabled-fg1)}post-menu-trigger button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-menu-trigger button a,post-menu-trigger button:focus,post-menu-trigger button:hover{color:LinkText !important}}post-menu::part(popover-container){display:flex;flex-direction:column;align-items:start;padding:.6rem;gap:var(--post-device-spacing-gap-inline-4)}post-menu::part(popover-container) ::slotted(post-menu-item:not(:last-child)){margin-block-end:var(--post-device-spacing-gap-inline-4)}.breadcrumb-item{display:flex;align-items:center;justify-content:center;gap:var(--post-device-spacing-gap-inline-5)}.breadcrumb-item span:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1);text-decoration:var(--post-core-text-decoration-underline)}.breadcrumb-item span:focus-visible{border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.breadcrumb-item a,.breadcrumb-item:focus,.breadcrumb-item:hover{color:LinkText !important}.breadcrumb-item:visited{color:VisitedText !important}}li[aria-current=page] post-breadcrumb-item{pointer-events:none;color:var(--post-scheme-color-interactive-primary-selected-fg1);font-weight:var(--post-device-font-weight-bold);text-decoration:var(--post-core-text-decoration-none)}li[aria-current=page] post-breadcrumb-item:hover{color:var(--post-scheme-color-interactive-primary-selected-fg1);text-decoration:none}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}";export{n as post_breadcrumbs}

package/dist/post-components/{p-cd03e6f2.entry.js → p-0e97fcfd.entry.js}

@@ -1 +1 @@
-import{r as t,h as s,H as i,a as e}from"./p-wEFJ-c34.js";import{I as o}from"./p-CJ80BZ06.js";import{a as r}from"./p-Beaz8wEe.js";import{v as h}from"./p-BhxZzOEC.js";import{i as n}from"./p-HygIVKXC.js";const a=["pointerenter","pointerleave","focusin","focusout","long-press"];o&&(async()=>{await import("./p-C_2k3G1c.js")})();const l=class{constructor(s){t(this,s),this.delay=0,this.trigger=null,this.delayTimeout=null,this.boundTriggerHandler=this.handleTriggerEvent.bind(this),this.boundTooltipHandler=this.handleTooltipEvent.bind(this)}validateControlFor(){r(this,"for","string")}get tooltip(){if(!o)return null;const t=document.getElementById(this.for);return"post-tooltip"===t?.localName?t:null}componentDidLoad(){this.setupTrigger(),this.attachListeners(),this.attachTooltipListeners()}disconnectedCallback(){this.removeListeners(),this.removeTooltipListeners(),this.cleanupTrigger(),this.delayTimeout&&(clearTimeout(this.delayTimeout),this.delayTimeout=null)}handleSlotChange(){this.cleanupTrigger(),this.setupTrigger()}cleanupTrigger(){if(this.trigger){const t=this.trigger.getAttribute("aria-describedby")||"";if(t.includes(this.for)){const s=t.split(" ").filter((t=>t!==this.for)).join(" ");s?this.trigger.setAttribute("aria-describedby",s):this.trigger.removeAttribute("aria-describedby")}this.trigger=null}}setupTrigger(){if(this.trigger=this.host.querySelector("*"),this.trigger){n(this.trigger)||this.trigger.setAttribute("tabindex","0");const t=this.trigger.getAttribute("aria-describedby")||"";t.includes(this.for)||this.trigger.setAttribute("aria-describedby",`${t} ${this.for}`.trim())}else console.warn("No content found in the post-tooltip-trigger slot. Please insert a focusable element or content that can receive focus.")}attachListeners(){a.forEach((t=>{this.host.addEventListener(t,this.boundTriggerHandler)}))}removeListeners(){a.forEach((t=>{this.host.removeEventListener(t,this.boundTriggerHandler)}))}attachTooltipListeners(){this.tooltip&&(this.tooltip.addEventListener("pointerenter",this.boundTooltipHandler),this.tooltip.addEventListener("pointerleave",this.boundTooltipHandler))}removeTooltipListeners(){this.tooltip&&(this.tooltip.removeEventListener("pointerenter",this.boundTooltipHandler),this.tooltip.removeEventListener("pointerleave",this.boundTooltipHandler))}handleTriggerEvent(t){switch(t.type){case"pointerenter":case"focusin":case"long-press":this.handleEnter();break;case"pointerleave":case"focusout":this.handleLeave(t)}}handleTooltipEvent(t){switch(t.type){case"pointerenter":this.handleEnter();break;case"pointerleave":this.handleLeave(t)}}handleEnter(){this.delayTimeout&&(clearTimeout(this.delayTimeout),this.delayTimeout=null),this.interestHandler()}handleLeave(t){const s=t.relatedTarget;this.tooltip&&s&&this.tooltip.contains(s)||s===this.trigger||this.interestLostHandler()}interestHandler(){this.trigger&&(this.delay>0?this.delayTimeout=window.setTimeout((()=>{this.tooltip?.show(this.trigger),this.delayTimeout=null}),this.delay):this.tooltip?.show(this.trigger))}interestLostHandler(){this.delayTimeout&&(clearTimeout(this.delayTimeout),this.delayTimeout=null),this.tooltip?.hide()}render(){return s(i,{key:"48246523aabaf1851e05d0273346d3e26e7ad866","data-version":h},s("slot",{key:"0442aeadddd59642c317b6f10c93008adf3e6585",onSlotchange:()=>this.handleSlotChange()}))}get host(){return e(this)}static get watchers(){return{for:["validateControlFor"]}}};l.style="post-tooltip-trigger{vertical-align:top}:host{cursor:pointer}";export{l as post_tooltip_trigger}
+import{r as t,h as s,H as i,a as e}from"./p-CDZBzSdV.js";import{a as o}from"./p-CEmnRoA6.js";import{b as r}from"./p-B7ebLhHc.js";import{v as h}from"./p-CZvbetqX.js";import{i as n}from"./p-HygIVKXC.js";const a=["pointerenter","pointerleave","focusin","focusout","long-press"];o&&(async()=>{await import("./p-C_2k3G1c.js")})();const l=class{constructor(s){t(this,s),this.delay=0,this.trigger=null,this.delayTimeout=null,this.boundTriggerHandler=this.handleTriggerEvent.bind(this),this.boundTooltipHandler=this.handleTooltipEvent.bind(this)}validateControlFor(){r(this,"for","string")}get tooltip(){if(!o)return null;const t=document.getElementById(this.for);return"post-tooltip"===t?.localName?t:null}componentDidLoad(){this.setupTrigger(),this.attachListeners(),this.attachTooltipListeners()}disconnectedCallback(){this.removeListeners(),this.removeTooltipListeners(),this.cleanupTrigger(),this.delayTimeout&&(clearTimeout(this.delayTimeout),this.delayTimeout=null)}handleSlotChange(){this.cleanupTrigger(),this.setupTrigger()}cleanupTrigger(){if(this.trigger){const t=this.trigger.getAttribute("aria-describedby")||"";if(t.includes(this.for)){const s=t.split(" ").filter((t=>t!==this.for)).join(" ");s?this.trigger.setAttribute("aria-describedby",s):this.trigger.removeAttribute("aria-describedby")}this.trigger=null}}setupTrigger(){if(this.trigger=this.host.querySelector("*"),this.trigger){n(this.trigger)||this.trigger.setAttribute("tabindex","0");const t=this.trigger.getAttribute("aria-describedby")||"";t.includes(this.for)||this.trigger.setAttribute("aria-describedby",`${t} ${this.for}`.trim())}else console.warn("No content found in the post-tooltip-trigger slot. Please insert a focusable element or content that can receive focus.")}attachListeners(){a.forEach((t=>{this.host.addEventListener(t,this.boundTriggerHandler)}))}removeListeners(){a.forEach((t=>{this.host.removeEventListener(t,this.boundTriggerHandler)}))}attachTooltipListeners(){this.tooltip&&(this.tooltip.addEventListener("pointerenter",this.boundTooltipHandler),this.tooltip.addEventListener("pointerleave",this.boundTooltipHandler))}removeTooltipListeners(){this.tooltip&&(this.tooltip.removeEventListener("pointerenter",this.boundTooltipHandler),this.tooltip.removeEventListener("pointerleave",this.boundTooltipHandler))}handleTriggerEvent(t){switch(t.type){case"pointerenter":case"focusin":case"long-press":this.handleEnter();break;case"pointerleave":case"focusout":this.handleLeave(t)}}handleTooltipEvent(t){switch(t.type){case"pointerenter":this.handleEnter();break;case"pointerleave":this.handleLeave(t)}}handleEnter(){this.delayTimeout&&(clearTimeout(this.delayTimeout),this.delayTimeout=null),this.interestHandler()}handleLeave(t){const s=t.relatedTarget;this.tooltip&&s&&this.tooltip.contains(s)||s===this.trigger||this.interestLostHandler()}interestHandler(){this.trigger&&(this.delay>0?this.delayTimeout=window.setTimeout((()=>{this.tooltip?.show(this.trigger),this.delayTimeout=null}),this.delay):this.tooltip?.show(this.trigger))}interestLostHandler(){this.delayTimeout&&(clearTimeout(this.delayTimeout),this.delayTimeout=null),this.tooltip?.hide()}render(){return s(i,{key:"4f6165e23284794b677748c495401ed7c110d134","data-version":h},s("slot",{key:"87a8d412ed0e3fb145853aebb9426dfe13677853",onSlotchange:()=>this.handleSlotChange()}))}get host(){return e(this)}static get watchers(){return{for:[{validateControlFor:0}]}}};l.style="post-tooltip-trigger{vertical-align:top}:host{cursor:pointer}";export{l as post_tooltip_trigger}