@pine-ds/core 5.0.0-mercury.0 → 5.0.0

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

@@ -1,16 +1,99 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-2a33b470.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-4_RRPJTO.js';
+import { H as HostStylingKeeper } from './attributes-CD8knu3a.js';
+import './keep-hydrated-BgNaWLoS.js';
 
-const pdsTabsCss = ":host{--spacing-panel-margin-top:0;--spacing-panel-padding:0;--outline:2px solid var(--pine-color-blue-200);--spacing-gap-availability:var(--pine-spacing-100);--spacing-gap-default:var(--pine-spacing-300);--spacing-gap-filter:var(--pine-spacing-200);display:block}.pds-tabs__tablist{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--spacing-gap-default)}:host(.pds-tabs--availability) .pds-tabs__tablist{gap:var(--spacing-gap-availability)}:host(.pds-tabs--filter) .pds-tabs__tablist{gap:var(--spacing-gap-filter)}";
-const PdsTabsStyle0 = pdsTabsCss;
+const pdsTabsCss = () => `:host{--tabs-dimension-panel-margin-top:var(--pine-dimension-none);--tabs-dimension-panel-padding:0;display:block}.pds-tabs__tablist{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-md)}:host(.pds-tabs--divider) .pds-tabs__tablist{-webkit-border-after:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-block-end:var(--pine-border-width-thin) solid var(--pine-color-border-subtle)}:host(.pds-tabs--stretch){block-size:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host(.pds-tabs--stretch) .pds-tabs__tablist{-ms-flex:0 0 auto;flex:0 0 auto}:host(.pds-tabs--availability) .pds-tabs__tablist{gap:var(--pine-dimension-xs)}:host(.pds-tabs--filter) .pds-tabs__tablist{gap:var(--pine-dimension-sm)}:host(.pds-tabs--pill) .pds-tabs__tablist{background-color:var(--pine-color-background-app);border:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-radius:var(--pine-dimension-100);display:-ms-inline-flexbox;display:inline-flex;display:-ms-flexbox;display:flex;gap:0;height:var(--pine-dimension-450)}`;
 
 const PdsTabs = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.tablistLabel = undefined;
-        this.componentId = undefined;
-        this.variant = undefined;
-        this.activeTabName = undefined;
-        this.activeTabIndex = undefined;
+        this.hostKeeper = new HostStylingKeeper();
+        this.slotChangeScheduled = false;
+        // The tab that most recently had focus, tracked continuously via `focusin` rather
+        // than sampled inside handleSlotChange: removing a focused element blurs it to
+        // <body> synchronously, but slotchange only fires later (a microtask checkpoint),
+        // by which point the sample would already read <body>.
+        this.lastFocusedTab = null;
+        this.handleFocusIn = (event) => {
+            var _a;
+            const tab = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest('pds-tab');
+            if (tab && tab.closest('pds-tabs') === this.el) {
+                this.lastFocusedTab = tab;
+            }
+        };
+        // Focus that leaves a tab forgets it, so replacing the tab later doesn't pull focus back,
+        // including focus that moves into a panel. Focus moving to another tab is tracked again
+        // by focusin, which follows focusout. Removing a focused tab also fires focusout (with no
+        // relatedTarget), while the tab is still connected, so that case is checked a microtask
+        // later: a tab that's gone by then was removed, and is kept so its focus can be restored.
+        this.handleFocusOut = (event) => {
+            const tab = this.lastFocusedTab;
+            if (event.relatedTarget) {
+                this.lastFocusedTab = null;
+                return;
+            }
+            queueMicrotask(() => {
+                if (this.lastFocusedTab === tab && (tab === null || tab === void 0 ? void 0 : tab.isConnected))
+                    this.lastFocusedTab = null;
+            });
+        };
+        /**
+         * Adds a divider rule beneath the tab list.
+         * @defaultValue false
+         */
+        this.divider = false;
+        /**
+         * Stretches the component to fill its container's height. The active tab panel keeps the height of its content.
+         * Requires the component to have a constrained height (e.g. a flex parent).
+         * @defaultValue false
+         */
+        this.stretch = false;
+        /**
+         * Renders the tab strip as navigation instead of an in-page panel switcher: each
+         * `pds-tab` becomes an `<a href>` inside a `<nav>` landmark (with `aria-current`
+         * on the `active` tab) rather than a `role="tab"` button over a `pds-tabpanel`.
+         * Give every `pds-tab` an `href` and omit `pds-tabpanel`s.
+         * @defaultValue false
+         */
+        this.nav = false;
+        // The tabs and tabpanels slots fire slotchange separately, even for the same morph
+        // (both swapped together). Coalesce same-tick firings into one re-collection pass
+        // with a microtask, the way a single DOM mutation already only triggers one event.
+        this.handleSlotChange = () => {
+            if (this.slotChangeScheduled)
+                return;
+            this.slotChangeScheduled = true;
+            this.activeTabNameBeforeSlotChange = this.activeTabName;
+            queueMicrotask(() => {
+                this.slotChangeScheduled = false;
+                this.recollectAfterSlotChange();
+            });
+        };
+    }
+    connectedCallback() {
+        this.hostKeeper.connect(this.el);
+        this.el.addEventListener('focusin', this.handleFocusIn);
+        this.el.addEventListener('focusout', this.handleFocusOut);
+        // componentDidLoad only runs once, so a reconnect (the element moved in the DOM) re-attaches
+        // the slotchange listeners disconnectedCallback removed. Before the first render the slots
+        // don't exist yet, so this is a no-op and componentDidLoad attaches them.
+        const isReconnect = this.tabsSlot != null;
+        this.setupSlotChangeListeners();
+        // Content can change while detached, with no listener to see it — re-collect now
+        // instead of waiting on a slotchange that may never come if nothing changes again.
+        if (isReconnect)
+            this.handleSlotChange();
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        this.hostKeeper.disconnect();
+        this.el.removeEventListener('focusin', this.handleFocusIn);
+        this.el.removeEventListener('focusout', this.handleFocusOut);
+        (_a = this.tabsSlot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
+        (_b = this.tabPanelsSlot) === null || _b === void 0 ? void 0 : _b.removeEventListener('slotchange', this.handleSlotChange);
+    }
+    componentDidLoad() {
+        this.setupSlotChangeListeners();
     }
     tabClickHandler(event) {
         if (this.componentId === event.detail[1]) {
@@ -19,12 +102,48 @@ const PdsTabs = class {
         }
     }
     handleKeyDown(ev) {
+        // Navigation mode uses real links: Tab moves focus, Enter follows the href.
+        // The roving/arrow model is a panel-mode (role=tab) concern only.
+        if (this.isNav)
+            return;
         const keySet = ["ArrowLeft", "ArrowRight", "Home", "End"];
-        if (keySet.includes(ev.key)) {
+        // Only handle keyboard navigation if the event originated from a tab button
+        // that belongs to THIS tabs component
+        const target = ev.target;
+        const targetTab = target.closest('pds-tab');
+        // Check if the tab belongs to this tabs instance (not a nested one)
+        const isOwnTab = targetTab && targetTab.closest('pds-tabs') === this.el;
+        if (keySet.includes(ev.key) && isOwnTab) {
             ev.preventDefault();
             this.moveActiveTab(ev.key);
         }
     }
+    // Navigation mode is an explicit, single source of truth: `nav` drives both the
+    // container (<nav> of links vs role=tablist of buttons) and every child tab (via
+    // `navMode`), so the tabs present when the strip initializes can't mix the two.
+    // Unlike child discovery (re-run on slotchange), `nav` itself isn't watched — it's
+    // a load-time mode switch, not something a consumer is expected to toggle live.
+    get isNav() {
+        return !!this.nav;
+    }
+    // `nav` and per-tab `href` should agree. Warn on the two authoring mistakes
+    // rather than silently rendering a link with no destination, or ignoring an href.
+    warnOnNavConfig() {
+        var _a;
+        if (!((_a = this.tabs) === null || _a === void 0 ? void 0 : _a.length))
+            return;
+        // An empty `href=""` is not a usable destination, so it counts as missing.
+        const withHref = this.tabs.filter((tab) => {
+            const href = tab.getAttribute('href');
+            return href != null && href !== '';
+        }).length;
+        if (this.nav && withHref < this.tabs.length) {
+            console.warn('pds-tabs: `nav` is set, so every pds-tab needs an `href`.');
+        }
+        else if (!this.nav && withHref > 0) {
+            console.warn('pds-tabs: a pds-tab has an `href` but `nav` is not set — add `nav` to pds-tabs for navigation mode; the href is ignored in panel mode.');
+        }
+    }
     moveActiveTab(key) {
         const firstTabNumber = 0;
         const lastTabNumber = this.tabs.length - 1;
@@ -49,23 +168,82 @@ const PdsTabs = class {
         this.activeTabIndex = moveFocusTo;
     }
     findAllChildren() {
-        this.tabs = this.el.querySelectorAll('pds-tab');
-        this.tabPanels = this.el.querySelectorAll('pds-tabpanel');
+        // Only select direct children tabs/tabpanels, not nested ones
+        const allTabs = Array.from(this.el.querySelectorAll('pds-tab'));
+        const allTabPanels = Array.from(this.el.querySelectorAll('pds-tabpanel'));
+        // Filter to only include tabs that belong to this tabs component (not nested)
+        this.tabs = allTabs.filter(tab => tab.closest('pds-tabs') === this.el);
+        this.tabPanels = allTabPanels.filter(panel => panel.closest('pds-tabs') === this.el);
+    }
+    // The initial collection (componentWillLoad) only sees tabs/panels present at load.
+    // A tab or panel added, removed or replaced afterwards — including by a DOM morph
+    // swapping in a fresh copy — needs to be re-collected the same way pds-dropdown-menu,
+    // pds-select and pds-multiselect already do for their own slotted content.
+    setupSlotChangeListeners() {
+        var _a, _b, _c, _d;
+        this.tabsSlot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="tabs"]');
+        this.tabPanelsSlot = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('slot[name="tabpanels"]');
+        (_c = this.tabsSlot) === null || _c === void 0 ? void 0 : _c.addEventListener('slotchange', this.handleSlotChange);
+        (_d = this.tabPanelsSlot) === null || _d === void 0 ? void 0 : _d.addEventListener('slotchange', this.handleSlotChange);
+    }
+    recollectAfterSlotChange() {
+        const previousActiveTabName = this.activeTabNameBeforeSlotChange;
+        // A removed node stays referenced but disconnected — checked before
+        // findAllChildren() re-collects, since that doesn't affect this either way.
+        const focusedTabWasRemoved = !this.isNav && this.lastFocusedTab != null && !this.lastFocusedTab.isConnected;
+        this.findAllChildren();
+        this.warnOnNavConfig();
+        // Keep the current selection if it still exists. Otherwise clear it so
+        // passPropsToChildren() falls back to the first enabled tab, the same way
+        // it does when a consumer never set activeTabName in the first place.
+        if (previousActiveTabName != null && !this.tabs.some((tab) => tab.name === previousActiveTabName)) {
+            this.activeTabName = undefined;
+        }
+        this.passPropsToChildren();
+        // If the tab that last had focus was removed (e.g. replaced by a fresh copy),
+        // the browser already silently dropped focus to <body> — restore it to the new
+        // active tab's button so keyboard/screen-reader users don't lose their place.
+        // Deferred a frame since a freshly-created pds-tab's button doesn't exist until
+        // its own render completes; re-checked then in case focus moved on its own, to
+        // the tabs or anywhere else — only focus the removal dropped to <body> is restored.
+        if (focusedTabWasRemoved) {
+            this.lastFocusedTab = null;
+            requestAnimationFrame(() => {
+                var _a;
+                const active = document.activeElement;
+                if (active && active !== document.body)
+                    return;
+                const newActiveTab = this.tabs.find((tab) => tab.name === this.activeTabName);
+                (_a = newActiveTab === null || newActiveTab === void 0 ? void 0 : newActiveTab.querySelector('button')) === null || _a === void 0 ? void 0 : _a.focus();
+            });
+        }
     }
     propGeneration(child, index = 0) {
         child.parentComponentId = this.componentId.toString();
-        child.variant = this.variant.toString();
+        child.variant = this.variant;
         child.selected = (this.activeTabName === child.name) ? true : false;
         child['index'] = index;
     }
     passPropsToChildren() {
+        var _a;
+        // Panel mode needs a selected tab so the tablist stays keyboard-reachable
+        // (an all-unselected tablist has every button at tabindex="-1"). Default to
+        // the first ENABLED tab when the consumer omits `activeTabName` — a disabled
+        // tab is itself tabindex="-1", so selecting it would recreate the trap. Nav
+        // mode has no roving/selection, so it's left unset there.
+        if (!this.nav && this.activeTabName == null && this.tabs.length) {
+            const firstEnabled = (_a = this.tabs.find((tab) => !tab.disabled)) !== null && _a !== void 0 ? _a : this.tabs[0];
+            this.activeTabName = firstEnabled.name;
+        }
         this.tabs.forEach((child, index) => {
             if (this.activeTabName === child.name)
                 this.activeTabIndex = index;
             this.propGeneration(child, index);
+            child.navMode = this.nav;
         });
         this.tabPanels.forEach((child) => {
             this.propGeneration(child);
+            child.stretch = this.stretch;
         });
     }
     classNames() {
@@ -74,22 +252,34 @@ const PdsTabs = class {
             const variantClassName = `pds-tabs--${this.variant}`;
             className += ' ' + variantClassName;
         }
+        if (this.divider) {
+            className += ' pds-tabs--divider';
+        }
+        if (this.stretch) {
+            className += ' pds-tabs--stretch';
+        }
         return className;
     }
     ;
     componentWillLoad() {
         this.findAllChildren();
+        this.warnOnNavConfig();
     }
     componentWillRender() {
         this.passPropsToChildren();
     }
     render() {
-        return (h(Host, { key: 'a36e242d5e746954f80778cf515879ca82258978', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, h("div", { key: 'd6d89fd90a9a534f249c549e34308ed245773f60', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel }, h("slot", { key: '9b5e5268c27ecf2a5331cec64d2c7121cef366a1', name: "tabs" })), h("slot", { key: 'b835cf1befe68f54b1751a976846d271ce97634e', name: "tabpanels" })));
+        // Navigation mode: a <nav> landmark of links (aria-current marks the current
+        // page). Panel mode: the ARIA tablist of role=tab buttons over tabpanels.
+        const tabList = this.isNav ? (h("nav", { class: "pds-tabs__tablist", "aria-label": this.tablistLabel || undefined, part: "tab-list" }, h("slot", { name: "tabs" }))) : (h("div", { class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel, part: "tab-list" }, h("slot", { name: "tabs" })));
+        const hostClass = this.classNames();
+        // Only the classes: `active-tab-name` backs the mutable activeTabName prop, so a morph that drops
+        // it is a prop change, not a strip.
+        this.hostKeeper.record(hostClass);
+        return (h(Host, { key: '6ededb588230706dc0848164e991694490436bf1', "active-tab-name": this.activeTabName, class: hostClass }, tabList, h("slot", { key: '68d090b7b6a3bae74ceb66e1487ce96666a38c6e', name: "tabpanels" })));
     }
     get el() { return getElement(this); }
 };
-PdsTabs.style = PdsTabsStyle0;
+PdsTabs.style = pdsTabsCss();
 
 export { PdsTabs as pds_tabs };
-
-//# sourceMappingURL=pds-tabs.entry.js.map

package/dist/esm/pds-text.entry.js

@@ -0,0 +1,139 @@
+import { r as registerInstance, h, a as getElement } from './index-4_RRPJTO.js';
+import { s as setColor } from './utils-OYK5-nwe.js';
+import { F as FOCUSABLE_WRAPPER, s as setupTruncationTooltip, f as flattenedText } from './truncation-tooltip-CkIWm6Z-.js';
+import { TEXT_SIZES } from './index.js';
+import './keep-hydrated-BgNaWLoS.js';
+import './floating-ui.dom-Cuc0DYlm.js';
+import './portal-target-CKRzRKdO.js';
+
+const pdsTextCss = () => `:host{display:inline}:host([decoration=underline-dotted])>*{-webkit-text-decoration-color:var(--pine-color-text-tertiary);text-decoration-color:var(--pine-color-text-tertiary);-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-style:dotted;text-decoration-style:dotted;text-decoration-thickness:12%;text-underline-offset:0.3rem;text-underline-position:under}:host([decoration=strikethrough])>*{text-decoration:line-through}h1{font:var(--pine-typography-heading-1);letter-spacing:var(--pine-letter-spacing-heading-1)}h2{font:var(--pine-typography-heading-2);letter-spacing:var(--pine-letter-spacing-heading-2)}h3{font:var(--pine-typography-heading-3);letter-spacing:var(--pine-letter-spacing-heading-3)}h4{font:var(--pine-typography-heading-4);letter-spacing:var(--pine-letter-spacing-heading-4)}h5{font:var(--pine-typography-heading-5);letter-spacing:var(--pine-letter-spacing-heading-5)}h6{font:var(--pine-typography-heading-6);letter-spacing:var(--pine-letter-spacing-heading-6)}code,em,p,pre,strong{font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing)}code,pre{font-family:monospace;letter-spacing:0;line-height:1}em{font-style:normal}strong{font-weight:bolder}:host([truncate]){display:block;min-width:0}:host([truncate])>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([italic])>*{font-style:italic}.pds-text{color:var(--color, var(--pine-color-text));margin:var(--pine-dimension-none)}.pds-text--size-2xl{font-size:var(--pine-font-size-body-2xl)}.pds-text--size-xl{font-size:var(--pine-font-size-body-xl)}.pds-text--size-lg{font-size:var(--pine-font-size-body-lg)}.pds-text--size-md{font-size:var(--pine-font-size-body-md)}.pds-text--size-sm{font-size:var(--pine-font-size-body-sm)}.pds-text--size-xs{font-size:var(--pine-font-size-body-xs)}.pds-text--size-2xs{font-size:var(--pine-font-size-body-2xs)}.pds-text--size-h1{font-size:var(--pine-font-size-heading-1)}.pds-text--size-h2{font-size:var(--pine-font-size-heading-2)}.pds-text--size-h3{font-size:var(--pine-font-size-heading-3)}.pds-text--size-h4{font-size:var(--pine-font-size-heading-4)}.pds-text--size-h5{font-size:var(--pine-font-size-heading-5)}.pds-text--size-h6{font-size:var(--pine-font-size-heading-6)}.pds-text--weight-extra-light{font-weight:var(--pine-font-weight-extra-light)}.pds-text--weight-light{font-weight:var(--pine-font-weight-light)}.pds-text--weight-regular{font-weight:var(--pine-font-weight-regular)}.pds-text--weight-medium{font-weight:var(--pine-font-weight-medium)}.pds-text--weight-semibold{font-weight:var(--pine-font-weight-semi-bold)}.pds-text--weight-bold{font-weight:var(--pine-font-weight-bold)}.pds-text--gutter-2xl{-webkit-margin-after:var(--pine-dimension-2xl);margin-block-end:var(--pine-dimension-2xl)}.pds-text--gutter-xl{-webkit-margin-after:var(--pine-dimension-xl);margin-block-end:var(--pine-dimension-xl)}.pds-text--gutter-lg{-webkit-margin-after:var(--pine-dimension-lg);margin-block-end:var(--pine-dimension-lg)}.pds-text--gutter-md{-webkit-margin-after:var(--pine-dimension-md);margin-block-end:var(--pine-dimension-md)}.pds-text--gutter-sm{-webkit-margin-after:var(--pine-dimension-sm);margin-block-end:var(--pine-dimension-sm)}.pds-text--gutter-xs{-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-text--gutter-2xs{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-text--align-start{text-align:start}.pds-text--align-center{text-align:center}.pds-text--align-end{text-align:end}.pds-text--align-justify{text-align:justify}`;
+
+// Re-runs setup for each text bound to its wrapping control, keyed by host, so a truncated
+// text that joins the same control later can take that control's focus away from it.
+const textsUsingWrapper = new WeakMap();
+const PdsText = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.truncationCleanup = null;
+        /**
+         * Determines what semantic text tag to render.
+         */
+        this.tag = 'p';
+    }
+    handleTruncateChange(newValue) {
+        if (newValue) {
+            this.initTruncationTooltip();
+        }
+        else {
+            this.destroyTruncationTooltip();
+        }
+    }
+    validateSize(newValue) {
+        // Skip when the prop is omitted or explicitly cleared (an empty string is a
+        // common "unset" sentinel), or its attribute was removed (Stencil sets the
+        // prop to `null`). Any other unsupported value — including a
+        // whitespace-only string — is a developer mistake worth warning about.
+        if (newValue == null || newValue === '') {
+            return;
+        }
+        if (!TEXT_SIZES.includes(newValue)) {
+            const display = newValue.length > 80 ? `${newValue.slice(0, 80)}…` : newValue;
+            console.warn(`pds-text: invalid size "${display}". Valid values are: ${TEXT_SIZES.join(', ')}.`);
+        }
+    }
+    componentWillLoad() {
+        // Validate the initial value before the first render so the warning precedes
+        // any attempt to apply an unknown size class. @Watch covers later changes.
+        this.validateSize(this.size);
+    }
+    // componentDidLoad runs once, so a moved element re-binds here what disconnectedCallback tore
+    // down. Before the first render there's no contentEl yet, and componentDidLoad binds it.
+    connectedCallback() {
+        if (this.truncate && this.contentEl) {
+            this.initTruncationTooltip();
+        }
+    }
+    componentDidLoad() {
+        if (this.truncate) {
+            this.initTruncationTooltip();
+        }
+    }
+    disconnectedCallback() {
+        this.destroyTruncationTooltip();
+    }
+    initTruncationTooltip() {
+        var _a;
+        // Clean up any existing tooltip before setting up a new one
+        this.destroyTruncationTooltip();
+        if (this.contentEl) {
+            const wrapper = this.el.closest(FOCUSABLE_WRAPPER);
+            // A pds-chip with a max width binds its tooltip to the wrapper too.
+            const others = wrapper === null ? [] : wrapper.querySelectorAll('pds-text, pds-chip');
+            // One focus on a shared wrapper would open every clipped text's tooltip at once, so texts sharing one each keep
+            // their own stop, and a text bound before this one joined lets go: this one's focus bubbles to the wrapper too.
+            let sharesWrapper = false;
+            for (let i = 0; i < others.length; i++) {
+                const other = others[i];
+                // The property counts too: setting `truncate` runs setup before the next render reflects the attribute.
+                if (other !== this.el && (other.truncate || other.maxWidth || other.hasAttribute('truncate') || other.hasAttribute('max-width'))) {
+                    sharesWrapper = true;
+                    (_a = textsUsingWrapper.get(other)) === null || _a === void 0 ? void 0 : _a();
+                }
+            }
+            const usesWrapper = wrapper !== null && !sharesWrapper;
+            this.truncationCleanup = setupTruncationTooltip({
+                hostEl: this.el,
+                contentEl: this.contentEl,
+                // Not `textContent`: a consumer that wraps its own slot in this text, as `pds-alert` does, holds a
+                // `<slot>` here, which counts as empty and would leave the tooltip with nothing to show.
+                getTooltipText: () => flattenedText(this.el),
+                // A wrapping link or button already takes focus, so its focus reveals the text instead of a nested tab stop.
+                manageTabIndex: !usesWrapper,
+                focusEl: usesWrapper ? wrapper : this.el,
+            });
+            if (usesWrapper)
+                textsUsingWrapper.set(this.el, () => this.initTruncationTooltip());
+        }
+    }
+    destroyTruncationTooltip() {
+        textsUsingWrapper.delete(this.el);
+        if (this.truncationCleanup) {
+            this.truncationCleanup();
+            this.truncationCleanup = null;
+        }
+    }
+    render() {
+        const Tag = this.tag;
+        const typeClasses = `
+      pds-text
+      ${this.align != null && this.align.trim() !== ''
+            ? `pds-text--align-${this.align}`
+            : ''}
+      ${this.gutter != null && this.gutter.trim() !== ''
+            ? `pds-text--gutter-${this.gutter}`
+            : ''}
+      ${this.size != null && this.size.trim() !== ''
+            ? `pds-text--size-${this.size}`
+            : ''}
+      ${this.weight != null && this.weight.trim() !== ''
+            ? `pds-text--weight-${this.weight}`
+            : ''}
+      ${this.decoration != null && this.decoration.trim() !== ''
+            ? `pds-text--decoration-${this.decoration}`
+            : ''}
+    `;
+        return (h(Tag, { key: '3b9efbad7872410a7e07438801ec17382282ab16', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content" }, h("slot", { key: '0784e6aee6ce23f93f0e3c077da5fa3ca944aebb' })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "truncate": [{
+                "handleTruncateChange": 0
+            }],
+        "size": [{
+                "validateSize": 0
+            }]
+    }; }
+};
+PdsText.style = pdsTextCss();
+
+export { PdsText as pds_text };