@deepfuture/dui-cdn 0.0.16 → 0.0.17

package/dui.js

@@ -57,6 +57,20 @@ var __privateWrapper = (obj, member, setter, getter) => ({
 });
 
 // packages/core/src/apply-theme.ts
+function flattenWithDependencies(roots) {
+  const seen = /* @__PURE__ */ new Set();
+  const result = [];
+  function visit(cls) {
+    if (seen.has(cls.tagName)) return;
+    seen.add(cls.tagName);
+    if (cls.dependencies) {
+      for (const dep of cls.dependencies) visit(dep);
+    }
+    result.push(cls);
+  }
+  for (const cls of roots) visit(cls);
+  return result;
+}
 var activeTheme = null;
 function getActiveTheme() {
   return activeTheme;
@@ -69,7 +83,8 @@ function applyTheme({ theme, components }) {
   if (theme.prose && !document.adoptedStyleSheets.includes(theme.prose)) {
     document.adoptedStyleSheets = [...document.adoptedStyleSheets, theme.prose];
   }
-  for (const Base of components) {
+  const ordered = flattenWithDependencies(components);
+  for (const Base of ordered) {
     const tagName = Base.tagName;
     if (customElements.get(tagName)) continue;
     const themeStyles = theme.styles.get(tagName);
@@ -731,6 +746,7 @@ function type(size3, overrides) {
 }
 
 // packages/theme-default/src/components/accordion-item.ts
+var chevronMask = r(`url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")`);
 var accordionItemStyles = i`
   /* ── Item ── */
 
@@ -775,17 +791,23 @@ var accordionItemStyles = i`
     opacity: 0.4;
   }
 
-  /* ── Indicator ── */
+  /* ── Indicator (theme-owned) ── */
 
-  [part="indicator"] {
+  [part="trigger"]::after {
+    content: "";
+    display: var(--collapsible-indicator-display, block);
     width: var(--space-4);
     height: var(--space-4);
+    flex-shrink: 0;
+    background: currentColor;
+    -webkit-mask: ${chevronMask} center / contain no-repeat;
+    mask: ${chevronMask} center / contain no-repeat;
     transition-property: transform;
     transition-duration: var(--duration-fast);
     transition-timing-function: var(--ease-out-3);
   }
 
-  [part="trigger"][data-open] [part="indicator"] {
+  [part="trigger"][data-open]::after {
     transform: rotate(180deg);
   }
 
@@ -813,7 +835,7 @@ var accordionItemStyles = i`
 
   @media (prefers-reduced-motion: reduce) {
     [part="trigger"],
-    [part="indicator"],
+    [part="trigger"]::after,
     [part="panel"] {
       transition-duration: 0s;
     }
@@ -1754,13 +1776,14 @@ var checkboxGroupStyles = i`
 `;
 
 // packages/theme-default/src/components/collapsible.ts
+var chevronMask2 = r(`url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")`);
 var collapsibleStyles = i`
   /* ── Trigger ── */
 
   [part="trigger"] {
     gap: var(--space-4);
     padding-block: var(--space-2);
-    padding-inline: var(--space-4);
+    padding-inline: var(--space-2);
     color: var(--text-1);
     font-family: var(--font-sans);
     font-weight: var(--font-weight-semibold);
@@ -1789,17 +1812,23 @@ var collapsibleStyles = i`
     opacity: 0.4;
   }
 
-  /* ── Indicator ── */
+  /* ── Indicator (theme-owned) ── */
 
-  [part="indicator"] {
+  [part="trigger"]::after {
+    content: "";
+    display: var(--collapsible-indicator-display, block);
     width: var(--space-4);
     height: var(--space-4);
+    flex-shrink: 0;
+    background: currentColor;
+    -webkit-mask: ${chevronMask2} center / contain no-repeat;
+    mask: ${chevronMask2} center / contain no-repeat;
     transition-property: transform;
     transition-duration: var(--duration-fast);
     transition-timing-function: var(--ease-out-3);
   }
 
-  [part="trigger"][data-open] [part="indicator"] {
+  [part="trigger"][data-open]::after {
     transform: rotate(180deg);
   }
 
@@ -1816,7 +1845,7 @@ var collapsibleStyles = i`
   }
 
   [part="content"] {
-    padding: var(--space-1) var(--space-4) var(--space-3);
+    padding: var(--space-1) var(--space-2) var(--space-3);
     font-family: var(--font-sans);
     ${type("sm")}
     font-weight: var(--font-weight-regular);
@@ -1827,7 +1856,7 @@ var collapsibleStyles = i`
 
   @media (prefers-reduced-motion: reduce) {
     [part="trigger"],
-    [part="indicator"],
+    [part="trigger"]::after,
     [part="panel"] {
       transition-duration: 0s;
     }
@@ -2074,17 +2103,28 @@ var tabsStyles = i``;
 // packages/theme-default/src/components/tabs-indicator.ts
 var tabsIndicatorStyles = i`
   :host {
-    height: var(--component-height-xs);
-    border-radius: var(--radius-sm);
-    background: oklch(from var(--foreground) l c h / 0.08);
-    transition-duration: var(--duration-normal);
-    transition-timing-function: var(--ease-in-out-3);
+    --tabs-indicator-height: var(--component-height-xs);
+    --tabs-indicator-radius: var(--radius-sm);
+    --tabs-indicator-bg: oklch(from var(--foreground) l c h / 0.08);
+    --tabs-indicator-duration: var(--duration-normal);
+    --tabs-indicator-easing: var(--ease-in-out-3);
+
+    height: var(--tabs-indicator-height);
+    border-radius: var(--tabs-indicator-radius);
+    background: var(--tabs-indicator-bg);
+    transition-duration: var(--tabs-indicator-duration);
+    transition-timing-function: var(--tabs-indicator-easing);
   }
 `;
 
 // packages/theme-default/src/components/tabs-list.ts
 var tabsListStyles = i`
+  :host {
+    --tabs-list-justify: start;
+  }
+
   [part="list"] {
+    justify-content: var(--tabs-list-justify);
     padding-inline: 0;
     gap: 0;
   }
@@ -2098,15 +2138,37 @@ var tabsListStyles = i`
 
 // packages/theme-default/src/components/tabs-panel.ts
 var tabsPanelStyles = i`
+  :host {
+    --tabs-panel-padding: var(--space-3);
+    --tabs-panel-border-width: var(--border-width-thin);
+    --tabs-panel-border-color: var(--border);
+    --tabs-panel-border-radius: var(--radius-md);
+    --tabs-panel-background: none;
+  }
+
+  :host(:not([data-hidden])) {
+    flex: 1;
+    min-height: 0;
+    padding: var(--tabs-panel-padding);
+    border: var(--tabs-panel-border-width) solid var(--tabs-panel-border-color);
+    border-radius: var(--tabs-panel-border-radius);
+    background: var(--tabs-panel-background);
+  }
+
   [part="panel"] {
     transition-property: box-shadow;
     transition-duration: var(--duration-fast);
+    font-family: var(--font-sans);
+    ${type("sm")}
+    font-weight: var(--font-weight-regular);
+    color: var(--text-2);
   }
 
   [part="panel"]:focus-visible {
     box-shadow:
       0 0 0 var(--focus-ring-offset) var(--background),
-      0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
+      0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width))
+        var(--focus-ring-color);
     border-radius: var(--radius-md);
   }
 `;
@@ -3303,7 +3365,7 @@ var progressStyles = i`
 
   [part="track"] {
     height: var(--progress-height);
-    background: var(--surface-1);
+    background: color-mix(in oklch, var(--foreground) 08%, transparent);
     border-radius: var(--radius-full);
   }
 
@@ -3835,6 +3897,13 @@ var calendarStyles = i`
   }
 `;
 
+// packages/theme-default/src/components/card-grid.ts
+var cardGridStyles = i`
+  [part="root"] {
+    gap: var(--space-4);
+  }
+`;
+
 // packages/theme-default/src/prose.css
 var prose_default = '/* =================================================================\n * DUI Prose \u2014 Rich-text / markdown content styles\n * =================================================================\n * Apply class="dui-prose" to any container with rendered HTML\n * (markdown output, CMS content, help text, etc.).\n *\n * All values reference --prose-* tokens (customizable) and existing\n * DUI design tokens. No hardcoded colors or spacing.\n * ================================================================= */\n\n/* --- Root -------------------------------------------------------- */\n.dui-prose {\n  color: var(--prose-body);\n  font-size: var(--font-size-base);\n  line-height: var(--line-height-relaxed);\n  max-width: 65ch;\n}\n\n.dui-prose > :first-child {\n  margin-block-start: 0;\n}\n\n.dui-prose > :last-child {\n  margin-block-end: 0;\n}\n\n/* --- Headings ---------------------------------------------------- */\n.dui-prose h1 {\n  color: var(--prose-headings);\n  font-weight: var(--font-weight-semibold);\n  font-size: var(--font-size-4xl);\n  line-height: var(--line-height-tight);\n  letter-spacing: var(--letter-spacing-tightest);\n  margin-block: 0 var(--space-4);\n}\n\n.dui-prose h2 {\n  color: var(--prose-headings);\n  font-weight: var(--font-weight-semibold);\n  font-size: var(--font-size-3xl);\n  line-height: var(--line-height-tight);\n  letter-spacing: var(--letter-spacing-tighter);\n  margin-block: var(--space-10) var(--space-3);\n}\n\n.dui-prose h3 {\n  color: var(--prose-headings);\n  font-weight: var(--font-weight-semibold);\n  font-size: var(--font-size-2xl);\n  line-height: var(--line-height-tight);\n  letter-spacing: var(--letter-spacing-tight);\n  margin-block: var(--space-8) var(--space-3);\n}\n\n.dui-prose h4 {\n  color: var(--prose-headings);\n  font-weight: var(--font-weight-semibold);\n  font-size: var(--font-size-xl);\n  line-height: var(--line-height-tight);\n  letter-spacing: var(--letter-spacing-normal);\n  margin-block: var(--space-6) var(--space-2);\n}\n\n.dui-prose h5 {\n  color: var(--prose-headings);\n  font-weight: var(--font-weight-semibold);\n  font-size: var(--font-size-lg);\n  line-height: var(--line-height-tight);\n  letter-spacing: var(--letter-spacing-normal);\n  margin-block: var(--space-6) var(--space-2);\n}\n\n.dui-prose h6 {\n  color: var(--prose-headings);\n  font-weight: var(--font-weight-semibold);\n  font-size: var(--font-size-lg);\n  line-height: var(--line-height-tight);\n  letter-spacing: var(--letter-spacing-normal);\n  margin-block: var(--space-6) var(--space-2);\n}\n\n/* --- Paragraphs -------------------------------------------------- */\n.dui-prose p {\n  color: var(--prose-body);\n  margin-block: 1em 0;\n}\n\n/* --- Inline text ------------------------------------------------- */\n.dui-prose strong,\n.dui-prose b {\n  color: var(--prose-bold);\n  font-weight: var(--font-weight-semibold);\n}\n\n.dui-prose em,\n.dui-prose i {\n  font-style: italic;\n}\n\n.dui-prose small {\n  font-size: 0.875em;\n  color: var(--prose-caption);\n}\n\n/* --- Links ------------------------------------------------------- */\n.dui-prose a {\n  color: var(--prose-links);\n  text-decoration: underline;\n  text-underline-offset: 0.15em;\n}\n\n.dui-prose a:hover {\n  color: var(--prose-links-hover);\n}\n\n/* --- Lists ------------------------------------------------------- */\n.dui-prose ul {\n  list-style-type: disc;\n  padding-inline-start: var(--space-6);\n  margin-block: 1em 0;\n}\n\n.dui-prose ol {\n  list-style-type: decimal;\n  padding-inline-start: var(--space-6);\n  margin-block: 1em 0;\n}\n\n.dui-prose li {\n  margin-block: var(--space-1);\n}\n\n.dui-prose li > ul,\n.dui-prose li > ol {\n  margin-block: var(--space-0_5);\n}\n\n.dui-prose li > p {\n  margin-block: var(--space-1);\n}\n\n/* --- Blockquote -------------------------------------------------- */\n.dui-prose blockquote {\n  border-inline-start: 3px solid var(--prose-blockquote-border);\n  color: var(--prose-blockquote-text);\n  padding-inline-start: var(--space-4);\n  font-style: italic;\n  margin-inline: 0;\n  margin-block: 1em 0;\n}\n\n/* --- Inline code ------------------------------------------------- */\n.dui-prose code {\n  color: var(--prose-code);\n  background: var(--prose-code-bg);\n  padding: 0.15em 0.35em;\n  border-radius: var(--radius-sm);\n  font-family: var(--font-mono);\n  font-size: 0.875em;\n}\n\n/* --- Code blocks ------------------------------------------------- */\n.dui-prose pre {\n  background: var(--prose-pre-bg);\n  border: var(--border-width-thin) solid var(--prose-pre-border);\n  border-radius: var(--radius-md);\n  padding: var(--space-4);\n  overflow-x: auto;\n  font-size: var(--font-size-sm);\n  line-height: var(--line-height-relaxed);\n  margin-block: 1em 0;\n}\n\n.dui-prose pre code {\n  background: none;\n  padding: 0;\n  border-radius: 0;\n  font-size: inherit;\n}\n\n/* --- Horizontal rule --------------------------------------------- */\n.dui-prose hr {\n  border: none;\n  border-top: var(--border-width-thin) solid var(--prose-hr);\n  margin-block: 2em;\n}\n\n/* --- Tables ------------------------------------------------------ */\n.dui-prose table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: var(--font-size-sm);\n  margin-block: 1em 0;\n}\n\n.dui-prose th {\n  border-bottom: var(--border-width-medium) solid var(--prose-th-border);\n  text-align: start;\n  padding: var(--space-2) var(--space-3);\n  font-weight: var(--font-weight-semibold);\n}\n\n.dui-prose td {\n  border-bottom: var(--border-width-thin) solid var(--prose-td-border);\n  padding: var(--space-2) var(--space-3);\n}\n\n.dui-prose caption {\n  color: var(--prose-caption);\n  font-size: var(--font-size-sm);\n  margin-block-end: var(--space-2);\n}\n\n/* --- Keyboard input ---------------------------------------------- */\n.dui-prose kbd {\n  background: var(--prose-kbd-bg);\n  border: var(--border-width-thin) solid var(--prose-kbd-border);\n  border-radius: var(--radius-sm);\n  padding: 0.1em 0.35em;\n  font-family: var(--font-mono);\n  font-size: 0.875em;\n}\n\n/* --- Images and figures ------------------------------------------ */\n.dui-prose img {\n  max-width: 100%;\n  height: auto;\n  border-radius: var(--radius-md);\n}\n\n.dui-prose figure {\n  margin-inline: 0;\n  margin-block: 1.5em;\n}\n\n.dui-prose figcaption {\n  color: var(--prose-caption);\n  font-size: var(--font-size-sm);\n  margin-block-start: var(--space-2);\n}\n\n/* --- Details / summary ------------------------------------------- */\n.dui-prose details {\n  margin-block: 1em;\n}\n\n.dui-prose summary {\n  cursor: pointer;\n  font-weight: var(--font-weight-medium);\n}\n';
 
@@ -3928,6 +3997,7 @@ var tokens_default = `/* =======================================================
   --letter-spacing-normal: 0em;
   --letter-spacing-wide: 0.006em;
   --letter-spacing-wider: 0.012em;
+  --letter-spacing-widest: 0.018em;
 
   --font-size-fluid-sm: clamp(0.813rem, 0.75rem + 0.315vw, 0.875rem);
   --font-size-fluid-md: clamp(0.875rem, 0.813rem + 0.315vw, 1rem);
@@ -4657,7 +4727,8 @@ var defaultTheme = {
     ["dui-number-field", numberFieldStyles],
     ["dui-stepper", stepperStyles],
     ["dui-menubar", menubarStyles],
-    ["dui-calendar", calendarStyles]
+    ["dui-calendar", calendarStyles],
+    ["dui-card-grid", cardGridStyles]
   ])
 };
 
@@ -5106,29 +5177,12 @@ var styles2 = i`
     cursor: default;
   }
 
-  [part="indicator"] {
-    flex-shrink: 0;
-  }
-
   [part="panel"] {
     overflow: hidden;
     contain: content;
     transition-property: height;
   }
 `;
-var chevronSvg = b2`<svg
-  part="indicator"
-  width="16"
-  height="16"
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <path d="m6 9 6 6 6-6" />
-</svg>`;
 var _visible_dec, _panelHeight_dec, _ending_dec, _starting_dec, __ctx_dec2, _disabled_dec2, _value_dec2, _a2, _init2, _value2, _disabled2, __ctx2, _starting, _b2, starting_get, starting_set, _DuiAccordionItem_instances, _ending, _c, ending_get, ending_set, _panelHeight, _d, panelHeight_get, panelHeight_set, _visible, _e, visible_get, visible_set, _prevOpen, _animGen, open_get, isDisabled_get, triggerId_get, panelId_get, startOpenAnimation_fn, startCloseAnimation_fn, _onTransitionEnd, _onClick, _onKeyDown;
 var DuiAccordionItem = class extends (_a2 = i4, _value_dec2 = [n4({ type: String })], _disabled_dec2 = [n4({ type: Boolean })], __ctx_dec2 = [c4({ context: accordionContext, subscribe: true })], _starting_dec = [r5()], _ending_dec = [r5()], _panelHeight_dec = [r5()], _visible_dec = [r5()], _a2) {
   constructor() {
@@ -5228,7 +5282,6 @@ var DuiAccordionItem = class extends (_a2 = i4, _value_dec2 = [n4({ type: String
             @keydown=${__privateGet(this, _onKeyDown)}
           >
             <slot name="trigger"></slot>
-            ${chevronSvg}
           </button>
         </h3>
         ${shouldRender ? b2`
@@ -6989,8 +7042,9 @@ var styles15 = i`
     cursor: default;
   }
 
-  [part="indicator"] {
-    flex-shrink: 0;
+  slot[name="trigger"] {
+    flex: 1;
+    min-width: 0;
   }
 
   [part="panel"] {
@@ -6999,19 +7053,6 @@ var styles15 = i`
     transition-property: height;
   }
 `;
-var chevronSvg2 = b2`<svg
-  part="indicator"
-  width="16"
-  height="16"
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <path d="m6 9 6 6 6-6" />
-</svg>`;
 var _internalOpen_dec2, _visible_dec2, _panelHeight_dec2, _ending_dec2, _starting_dec2, _keepMounted_dec3, _disabled_dec7, _defaultOpen_dec2, _open_dec2, _a10, _init10, _open2, _defaultOpen2, _disabled7, _keepMounted3, _starting2, _b9, starting_get2, starting_set2, _DuiCollapsible_instances, _ending2, _c5, ending_get2, ending_set2, _panelHeight2, _d4, panelHeight_get2, panelHeight_set2, _visible2, _e3, visible_get2, visible_set2, _internalOpen2, _f, internalOpen_get2, internalOpen_set2, _prevOpen2, _animGen2, _controlled, isOpen_get2, startOpenAnimation_fn2, startCloseAnimation_fn2, _onTransitionEnd2, _onClick2;
 var DuiCollapsible = class extends (_a10 = i4, _open_dec2 = [n4({ type: Boolean, reflect: true })], _defaultOpen_dec2 = [n4({ type: Boolean, attribute: "default-open" })], _disabled_dec7 = [n4({ type: Boolean, reflect: true })], _keepMounted_dec3 = [n4({ type: Boolean, attribute: "keep-mounted" })], _starting_dec2 = [r5()], _ending_dec2 = [r5()], _panelHeight_dec2 = [r5()], _visible_dec2 = [r5()], _internalOpen_dec2 = [r5()], _a10) {
   constructor() {
@@ -7086,7 +7127,6 @@ var DuiCollapsible = class extends (_a10 = i4, _open_dec2 = [n4({ type: Boolean,
         @click=${__privateGet(this, _onClick2)}
       >
         <slot name="trigger"></slot>
-        ${chevronSvg2}
       </button>
       ${shouldRender ? b2`
             <div
@@ -9912,7 +9952,7 @@ var styles19 = i`
     display: block;
   }
 
-  :host([data-hidden]) {
+  :host([data-hidden]) .Group {
     display: none;
   }
 
@@ -9976,7 +10016,7 @@ var styles20 = i`
     display: block;
   }
 
-  :host([data-hidden]) {
+  :host([data-hidden]) .Item {
     display: none;
   }
 
@@ -10129,7 +10169,7 @@ var styles21 = i`
     display: block;
   }
 
-  :host([data-hidden]) {
+  :host([data-hidden]) .Empty {
     display: none;
   }
 
@@ -12910,6 +12950,10 @@ var DuiPopoverTrigger = class extends i4 {
 // packages/components/src/popover/popover-popup.ts
 var hostStyles15 = i`
   :host {
+    display: contents;
+  }
+
+  .slot-wrapper {
     display: none;
   }
 `;
@@ -13023,7 +13067,7 @@ var DuiPopoverPopup = class extends (_a30 = i4, _showArrow_dec = [n4({ type: Boo
     __privateSet(this, _wasOpen, isOpen);
   }
   render() {
-    return b2`<slot></slot>`;
+    return b2`<div class="slot-wrapper"><slot></slot></div>`;
   }
 };
 _init30 = __decoratorStart(_a30);
@@ -13370,6 +13414,10 @@ var DuiPreviewCardTrigger = class extends i4 {
 // packages/components/src/preview-card/preview-card-popup.ts
 var hostStyles19 = i`
   :host {
+    display: contents;
+  }
+
+  .slot-wrapper {
     display: none;
   }
 `;
@@ -13479,7 +13527,7 @@ var DuiPreviewCardPopup = class extends (_a33 = i4, _showArrow_dec2 = [n4({ type
     __privateSet(this, _wasOpen2, isOpen);
   }
   render() {
-    return b2`<slot></slot>`;
+    return b2`<div class="slot-wrapper"><slot></slot></div>`;
   }
 };
 _init33 = __decoratorStart(_a33);
@@ -16578,7 +16626,11 @@ var styles56 = i`
     display: block;
   }
 
-  :host([data-hidden]) {
+  .wrapper {
+    display: contents;
+  }
+
+  .wrapper[hidden] {
     display: none;
   }
 
@@ -16586,10 +16638,6 @@ var styles56 = i`
     position: relative;
     outline: 0;
   }
-
-  [part="panel"][hidden] {
-    display: none;
-  }
 `;
 var __ctx_dec20, _keepMounted_dec5, _value_dec20, _a50, _init50, _value20, _keepMounted5, __ctx20, _DuiTabsPanel_instances, isActive_get2;
 var DuiTabsPanel = class extends (_a50 = i4, _value_dec20 = [n4()], _keepMounted_dec5 = [n4({ type: Boolean, attribute: "keep-mounted" })], __ctx_dec20 = [c4({ context: tabsContext, subscribe: true })], _a50) {
@@ -16609,17 +16657,9 @@ var DuiTabsPanel = class extends (_a50 = i4, _value_dec20 = [n4()], _keepMounted
   }
   render() {
     const isActive = __privateGet(this, _DuiTabsPanel_instances, isActive_get2);
-    if (!isActive && !this.keepMounted) {
-      return A;
-    }
     return b2`
-      <div
-        part="panel"
-        role="tabpanel"
-        ?hidden=${!isActive}
-        tabindex="0"
-      >
-        <slot></slot>
+      <div class="wrapper" ?hidden=${!isActive}>
+        ${isActive || this.keepMounted ? b2`<div part="panel" role="tabpanel" tabindex="0"><slot></slot></div>` : A}
       </div>
     `;
   }
@@ -17347,6 +17387,10 @@ __publicField(DuiTooltipTrigger, "styles", [base, hostStyles23, componentStyles1
 // packages/components/src/tooltip/tooltip-popup.ts
 var hostStyles24 = i`
   :host {
+    display: contents;
+  }
+
+  .slot-wrapper {
     display: none;
   }
 `;
@@ -17448,7 +17492,7 @@ var DuiTooltipPopup = class extends (_a57 = i4, _showArrow_dec3 = [n4({ type: Bo
     __privateSet(this, _wasOpen3, isOpen);
   }
   render() {
-    return b2`<slot></slot>`;
+    return b2`<div class="slot-wrapper"><slot></slot></div>`;
   }
 };
 _init57 = __decoratorStart(_a57);