@carbon/ibm-products-web-components 0.32.0 → 0.33.0

package/es-custom/components/page-header/page-header.figma.js

@@ -0,0 +1,248 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import figma, { html } from '@figma/code-connect/html';
+import '@carbon/web-components/es-custom/components/button/index.js';
+import '@carbon/web-components/es-custom/components/icon-button/index.js';
+import '@carbon/web-components/es-custom/components/breadcrumb/index.js';
+import '@carbon/web-components/es-custom/components/tabs/index.js';
+import '@carbon/web-components/es-custom/components/tag/index.js';
+import { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';
+import Bee32 from '@carbon/icons/es/bee/32.js';
+import Bee16 from '@carbon/icons/es/bee/16.js';
+import Activity16 from '@carbon/icons/es/activity/16.js';
+
+/**
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+
+// Breadcrumb bar
+figma.connect(
+  'https://www.figma.com/design/0F9dKH2abAd7gSfvnacfWf/-v11--IBM-Products-%E2%80%93-Carbon-Design-System?node-id=41243-6410',
+  {
+    props: {
+      icon: figma.boolean('Icon', {
+        true: html`${iconLoader(Bee16, { slot: 'icon' })}`,
+        false: undefined,
+      }),
+      contentActions: figma.boolean('Buttons', {
+        true: html`<div slot="content-actions">
+          <cds-custom-button size="md">Button</cds-custom-button>
+        </div>`,
+        false: undefined,
+      }),
+      pageActions: figma.boolean('Actions', {
+        true: html`<cds-custom-icon-button
+            slot="page-actions"
+            kind="ghost"
+            size="md"
+            align="bottom"
+          >
+            ${iconLoader(Activity16, { slot: 'icon' })}
+            <span slot="tooltip-content">action 1</span>
+          </cds-custom-icon-button>
+          <cds-custom-icon-button
+            slot="page-actions"
+            kind="ghost"
+            size="md"
+            align="bottom"
+          >
+            ${iconLoader(Activity16, { slot: 'icon' })}
+            <span slot="tooltip-content">action 2</span>
+          </cds-custom-icon-button>
+          <cds-custom-icon-button
+            slot="page-actions"
+            kind="ghost"
+            size="md"
+            align="bottom"
+          >
+            ${iconLoader(Activity16, { slot: 'icon' })}
+            <span slot="tooltip-content">action 3</span>
+          </cds-custom-icon-button>`,
+        false: undefined,
+      }),
+      border: figma.boolean('Bottom border'),
+    },
+    example: (props) => {
+      return html` <c4p-page-header-breadcrumb border=${props.border}>
+        ${props.icon}
+        <cds-custom-breadcrumb>
+          <cds-custom-breadcrumb-item>
+            <cds-custom-breadcrumb-link href="#">Breadcrumb</cds-custom-breadcrumb-link>
+          </cds-custom-breadcrumb-item>
+          <cds-custom-breadcrumb-item>
+            <cds-custom-breadcrumb-link href="#">Breadcrumb</cds-custom-breadcrumb-link>
+          </cds-custom-breadcrumb-item>
+          <cds-custom-breadcrumb-item>
+            <cds-custom-breadcrumb-link href="#">Breadcrumb</cds-custom-breadcrumb-link>
+          </cds-custom-breadcrumb-item>
+          <cds-custom-breadcrumb-item>
+            <cds-custom-breadcrumb-link href="#">Breadcrumb</cds-custom-breadcrumb-link>
+          </cds-custom-breadcrumb-item>
+        </cds-custom-breadcrumb>
+        ${props.contentActions} ${props.pageActions}
+      </c4p-page-header-breadcrumb>`;
+    },
+    imports: [
+      "import '@carbon/ibm-products-web-components/es/components/page-header/index.js'",
+    ],
+  }
+);
+
+// Tab bar
+figma.connect(
+  'https://www.figma.com/design/0F9dKH2abAd7gSfvnacfWf/-v11--IBM-Products-%E2%80%93-Carbon-Design-System?node-id=41241-4083',
+  {
+    props: {
+      tabs: figma.boolean('Tabs', {
+        true: html`<cds-custom-tabs value="tab-1">
+          <cds-custom-tab id="tab-1" target="tab-panel-1" value="tab-1">
+            Tab label
+          </cds-custom-tab>
+          <cds-custom-tab id="tab-2" target="tab-panel-2" value="tab-2">
+            Tab label
+          </cds-custom-tab>
+        </cds-custom-tabs>`,
+        false: undefined,
+      }),
+      tags: figma.boolean('Tags', {
+        true: html`<div slot="tags">
+          <cds-custom-tag type="blue" size="md">Tag</cds-custom-tag>
+          <cds-custom-tag type="blue" size="md">Tag</cds-custom-tag>
+        </div>`,
+        false: undefined,
+      }),
+      scroller: figma.boolean('Collapsable button', {
+        true: html` <c4p-page-header-scroller slot="scroller">
+        </c4p-page-header-scroller>`,
+        false: undefined,
+      }),
+    },
+    example: (props) => {
+      return html`<c4p-page-header-tabs>
+        ${props.scroller} ${props.tabs} ${props.tags}
+      </c4p-page-header-tabs>`;
+    },
+    imports: [
+      "import '@carbon/ibm-products-web-components/es/components/page-header/index.js'",
+    ],
+  }
+);
+
+const sharedProps = {
+  title: figma.nestedProps('_Title', {
+    text: figma.string('Title text'),
+    icon: figma.boolean('Leading icon', {
+      true: html`${iconLoader(Bee32, { slot: 'icon' })}`,
+      false: undefined,
+    }),
+    tags: figma.boolean('Slot', {
+      true: html`<div slot="contextual-actions">
+        <cds-custom-tag type="blue" size="lg">Tag</cds-custom-tag>
+      </div>`,
+      false: undefined,
+    }),
+  }),
+  summary: figma.nestedProps('_Summary', {
+    text: figma.string('Summary text'),
+  }),
+};
+
+figma.connect(
+  'https://www.figma.com/design/0F9dKH2abAd7gSfvnacfWf/-v11--IBM-Products-%E2%80%93-Carbon-Design-System?node-id=31080%3A23323',
+  {
+    variant: { Style: 'Action' },
+    props: {
+      ...sharedProps,
+      breadcrumbBar: figma.boolean('Breadcrumb bar', {
+        true: figma.children('_Breadcrumb bar'),
+        false: undefined,
+      }),
+      header: figma.nestedProps('_Content', {
+        actions: figma.boolean('Actions', {
+          true: html` <div slot="page-actions">
+            <cds-custom-button size="md">Button</cds-custom-button>
+          </div>`,
+          false: undefined,
+        }),
+        subtitle: figma.boolean('Subtitle', {
+          true: figma.textContent('Subtitle'),
+          false: undefined,
+        }),
+      }),
+      tabBar: figma.boolean('Tab bar', {
+        true: figma.children('_Tab bar'),
+        false: undefined,
+      }),
+    },
+    example: (props) =>
+      html`<c4p-page-header>
+        ${props.breadcrumbBar}
+        <c4p-page-header-content title=${props.title.text}>
+          ${props.title.icon} ${props.title.tags} ${props.header.actions}
+          <c4p-page-header-content-text subtitle=${props.header.subtitle}>
+            ${props.summary.text}
+          </c4p-page-header-content-text>
+        </c4p-page-header-content>
+        ${props.tabBar}
+      </c4p-page-header>`,
+    imports: [
+      "import '@carbon/ibm-products-web-components/es/components/page-header/index.js'",
+    ],
+  }
+);
+
+figma.connect(
+  'https://www.figma.com/design/0F9dKH2abAd7gSfvnacfWf/-v11--IBM-Products-%E2%80%93-Carbon-Design-System?node-id=31080%3A23323',
+  {
+    variant: { Style: 'Image' },
+    props: {
+      ...sharedProps,
+      content: figma.nestedProps('_Content expressive', {
+        subtitle: figma.boolean('Subtitle', {
+          true: figma.textContent('Subtitle'),
+          false: undefined,
+        }),
+      }),
+    },
+    example: (props) => {
+      return html`<c4p-page-header>
+        <div class="cds-custom--css-grid">
+          <div
+            class="cds-custom--sm:col-span-4 cds-custom--md:col-span-4 cds-custom--lg:col-span-8 cds-custom--css-grid-column"
+          >
+            <c4p-page-header-content within-grid title=${props.title.text}>
+              ${props.title.icon} ${props.title.tags}
+              <c4p-page-header-content-text subtitle=${props.content.subtitle}>
+                ${props.summary.text}
+              </c4p-page-header-content-text>
+            </c4p-page-header-content>
+          </div>
+          <div
+            class="cds-custom--sm:col-span-0 cds-custom--md:col-span-4 cds-custom--lg:col-span-8 cds-custom--css-grid-column"
+          >
+            <c4p-page-header-hero-image>
+              <img
+                src="image1"
+                alt="a default image"
+                style="max-width:100%;height:auto"
+              />
+            </c4p-page-header-hero-image>
+          </div>
+        </div>
+      </c4p-page-header>`;
+    },
+    imports: [
+      "import '@carbon/ibm-products-web-components/es/components/page-header/index.js'",
+    ],
+  }
+);
+//# sourceMappingURL=page-header.figma.js.map

package/es-custom/components/page-header/page-header.figma.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header.figma.js","sources":["../../../src/components/page-header/page-header.figma.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2025, 2025\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport figma, { html } from '@figma/code-connect/html';\nimport '@carbon/web-components/es-custom/components/button/index.js';\nimport '@carbon/web-components/es-custom/components/icon-button/index.js';\nimport '@carbon/web-components/es-custom/components/breadcrumb/index.js';\nimport '@carbon/web-components/es-custom/components/tabs/index.js';\nimport '@carbon/web-components/es-custom/components/tag/index.js';\nimport { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';\n\nimport Bee32 from '@carbon/icons/es/bee/32.js';\nimport Bee16 from '@carbon/icons/es/bee/16.js';\nimport Activity16 from '@carbon/icons/es/activity/16.js';\n\n// Breadcrumb bar\nfigma.connect(\n  'https://www.figma.com/design/0F9dKH2abAd7gSfvnacfWf/-v11--IBM-Products-%E2%80%93-Carbon-Design-System?node-id=41243-6410',\n  {\n    props: {\n      icon: figma.boolean('Icon', {\n        true: html`${iconLoader(Bee16, { slot: 'icon' })}`,\n        false: undefined,\n      }),\n      contentActions: figma.boolean('Buttons', {\n        true: html`<div slot=\"content-actions\">\n          <cds-custom-button size=\"md\">Button</cds-custom-button>\n        </div>`,\n        false: undefined,\n      }),\n      pageActions: figma.boolean('Actions', {\n        true: html`<cds-custom-icon-button\n            slot=\"page-actions\"\n            kind=\"ghost\"\n            size=\"md\"\n            align=\"bottom\"\n          >\n            ${iconLoader(Activity16, { slot: 'icon' })}\n            <span slot=\"tooltip-content\">action 1</span>\n          </cds-custom-icon-button>\n          <cds-custom-icon-button\n            slot=\"page-actions\"\n            kind=\"ghost\"\n            size=\"md\"\n            align=\"bottom\"\n          >\n            ${iconLoader(Activity16, { slot: 'icon' })}\n            <span slot=\"tooltip-content\">action 2</span>\n          </cds-custom-icon-button>\n          <cds-custom-icon-button\n            slot=\"page-actions\"\n            kind=\"ghost\"\n            size=\"md\"\n            align=\"bottom\"\n          >\n            ${iconLoader(Activity16, { slot: 'icon' })}\n            <span slot=\"tooltip-content\">action 3</span>\n          </cds-custom-icon-button>`,\n        false: undefined,\n      }),\n      border: figma.boolean('Bottom border'),\n    },\n    example: (props) => {\n      return html` <c4p-page-header-breadcrumb border=${props.border}>\n        ${props.icon}\n        <cds-custom-breadcrumb>\n          <cds-custom-breadcrumb-item>\n            <cds-custom-breadcrumb-link href=\"#\">Breadcrumb</cds-custom-breadcrumb-link>\n          </cds-custom-breadcrumb-item>\n          <cds-custom-breadcrumb-item>\n            <cds-custom-breadcrumb-link href=\"#\">Breadcrumb</cds-custom-breadcrumb-link>\n          </cds-custom-breadcrumb-item>\n          <cds-custom-breadcrumb-item>\n            <cds-custom-breadcrumb-link href=\"#\">Breadcrumb</cds-custom-breadcrumb-link>\n          </cds-custom-breadcrumb-item>\n          <cds-custom-breadcrumb-item>\n            <cds-custom-breadcrumb-link href=\"#\">Breadcrumb</cds-custom-breadcrumb-link>\n          </cds-custom-breadcrumb-item>\n        </cds-custom-breadcrumb>\n        ${props.contentActions} ${props.pageActions}\n      </c4p-page-header-breadcrumb>`;\n    },\n    imports: [\n      \"import '@carbon/ibm-products-web-components/es/components/page-header/index.js'\",\n    ],\n  }\n);\n\n// Tab bar\nfigma.connect(\n  'https://www.figma.com/design/0F9dKH2abAd7gSfvnacfWf/-v11--IBM-Products-%E2%80%93-Carbon-Design-System?node-id=41241-4083',\n  {\n    props: {\n      tabs: figma.boolean('Tabs', {\n        true: html`<cds-custom-tabs value=\"tab-1\">\n          <cds-custom-tab id=\"tab-1\" target=\"tab-panel-1\" value=\"tab-1\">\n            Tab label\n          </cds-custom-tab>\n          <cds-custom-tab id=\"tab-2\" target=\"tab-panel-2\" value=\"tab-2\">\n            Tab label\n          </cds-custom-tab>\n        </cds-custom-tabs>`,\n        false: undefined,\n      }),\n      tags: figma.boolean('Tags', {\n        true: html`<div slot=\"tags\">\n          <cds-custom-tag type=\"blue\" size=\"md\">Tag</cds-custom-tag>\n          <cds-custom-tag type=\"blue\" size=\"md\">Tag</cds-custom-tag>\n        </div>`,\n        false: undefined,\n      }),\n      scroller: figma.boolean('Collapsable button', {\n        true: html` <c4p-page-header-scroller slot=\"scroller\">\n        </c4p-page-header-scroller>`,\n        false: undefined,\n      }),\n    },\n    example: (props) => {\n      return html`<c4p-page-header-tabs>\n        ${props.scroller} ${props.tabs} ${props.tags}\n      </c4p-page-header-tabs>`;\n    },\n    imports: [\n      \"import '@carbon/ibm-products-web-components/es/components/page-header/index.js'\",\n    ],\n  }\n);\n\nconst sharedProps = {\n  title: figma.nestedProps('_Title', {\n    text: figma.string('Title text'),\n    icon: figma.boolean('Leading icon', {\n      true: html`${iconLoader(Bee32, { slot: 'icon' })}`,\n      false: undefined,\n    }),\n    tags: figma.boolean('Slot', {\n      true: html`<div slot=\"contextual-actions\">\n        <cds-custom-tag type=\"blue\" size=\"lg\">Tag</cds-custom-tag>\n      </div>`,\n      false: undefined,\n    }),\n  }),\n  summary: figma.nestedProps('_Summary', {\n    text: figma.string('Summary text'),\n  }),\n};\n\nfigma.connect(\n  'https://www.figma.com/design/0F9dKH2abAd7gSfvnacfWf/-v11--IBM-Products-%E2%80%93-Carbon-Design-System?node-id=31080%3A23323',\n  {\n    variant: { Style: 'Action' },\n    props: {\n      ...sharedProps,\n      breadcrumbBar: figma.boolean('Breadcrumb bar', {\n        true: figma.children('_Breadcrumb bar'),\n        false: undefined,\n      }),\n      header: figma.nestedProps('_Content', {\n        actions: figma.boolean('Actions', {\n          true: html` <div slot=\"page-actions\">\n            <cds-custom-button size=\"md\">Button</cds-custom-button>\n          </div>`,\n          false: undefined,\n        }),\n        subtitle: figma.boolean('Subtitle', {\n          true: figma.textContent('Subtitle'),\n          false: undefined,\n        }),\n      }),\n      tabBar: figma.boolean('Tab bar', {\n        true: figma.children('_Tab bar'),\n        false: undefined,\n      }),\n    },\n    example: (props) =>\n      html`<c4p-page-header>\n        ${props.breadcrumbBar}\n        <c4p-page-header-content title=${props.title.text}>\n          ${props.title.icon} ${props.title.tags} ${props.header.actions}\n          <c4p-page-header-content-text subtitle=${props.header.subtitle}>\n            ${props.summary.text}\n          </c4p-page-header-content-text>\n        </c4p-page-header-content>\n        ${props.tabBar}\n      </c4p-page-header>`,\n    imports: [\n      \"import '@carbon/ibm-products-web-components/es/components/page-header/index.js'\",\n    ],\n  }\n);\n\nfigma.connect(\n  'https://www.figma.com/design/0F9dKH2abAd7gSfvnacfWf/-v11--IBM-Products-%E2%80%93-Carbon-Design-System?node-id=31080%3A23323',\n  {\n    variant: { Style: 'Image' },\n    props: {\n      ...sharedProps,\n      content: figma.nestedProps('_Content expressive', {\n        subtitle: figma.boolean('Subtitle', {\n          true: figma.textContent('Subtitle'),\n          false: undefined,\n        }),\n      }),\n    },\n    example: (props) => {\n      return html`<c4p-page-header>\n        <div class=\"cds-custom--css-grid\">\n          <div\n            class=\"cds-custom--sm:col-span-4 cds-custom--md:col-span-4 cds-custom--lg:col-span-8 cds-custom--css-grid-column\"\n          >\n            <c4p-page-header-content within-grid title=${props.title.text}>\n              ${props.title.icon} ${props.title.tags}\n              <c4p-page-header-content-text subtitle=${props.content.subtitle}>\n                ${props.summary.text}\n              </c4p-page-header-content-text>\n            </c4p-page-header-content>\n          </div>\n          <div\n            class=\"cds-custom--sm:col-span-0 cds-custom--md:col-span-4 cds-custom--lg:col-span-8 cds-custom--css-grid-column\"\n          >\n            <c4p-page-header-hero-image>\n              <img\n                src=\"image1\"\n                alt=\"a default image\"\n                style=\"max-width:100%;height:auto\"\n              />\n            </c4p-page-header-hero-image>\n          </div>\n        </div>\n      </c4p-page-header>`;\n    },\n    imports: [\n      \"import '@carbon/ibm-products-web-components/es/components/page-header/index.js'\",\n    ],\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;;;AAcA;AACA,KAAK,CAAC,OAAO;AACb,EAAE,0HAA0H;AAC5H,EAAE;AACF,IAAI,KAAK,EAAE;AACX,MAAM,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,EAAE;AAClC,QAAQ,IAAI,EAAE,IAAI,CAAC,EAAE,UAAU,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;AAC1D,QAAQ,KAAK,EAAE,SAAS;AACxB,OAAO,CAAC;AACR,MAAM,cAAc,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE;AAC/C,QAAQ,IAAI,EAAE,IAAI,CAAC;AACnB;AACA,cAAc,CAAC;AACf,QAAQ,KAAK,EAAE,SAAS;AACxB,OAAO,CAAC;AACR,MAAM,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE;AAC5C,QAAQ,IAAI,EAAE,IAAI,CAAC;AACnB;AACA;AACA;AACA;AACA;AACA,YAAY,EAAE,UAAU,CAAC,UAAU,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,YAAY,EAAE,UAAU,CAAC,UAAU,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,YAAY,EAAE,UAAU,CAAC,UAAU,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACtD;AACA,4BAA4B,CAAC;AAC7B,QAAQ,KAAK,EAAE,SAAS;AACxB,OAAO,CAAC;AACR,MAAM,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC;AAC5C,KAAK;AACL,IAAI,OAAO,EAAE,CAAC,KAAK,KAAK;AACxB,MAAM,OAAO,IAAI,CAAC,oCAAoC,EAAE,KAAK,CAAC,MAAM,CAAC;AACrE,QAAQ,EAAE,KAAK,CAAC,IAAI;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQ,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW;AACnD,mCAAmC,CAAC;AACpC,KAAK;AACL,IAAI,OAAO,EAAE;AACb,MAAM,iFAAiF;AACvF,KAAK;AACL;AACA,CAAC;;AAED;AACA,KAAK,CAAC,OAAO;AACb,EAAE,0HAA0H;AAC5H,EAAE;AACF,IAAI,KAAK,EAAE;AACX,MAAM,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,EAAE;AAClC,QAAQ,IAAI,EAAE,IAAI,CAAC;AACnB;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmB,CAAC;AACpB,QAAQ,KAAK,EAAE,SAAS;AACxB,OAAO,CAAC;AACR,MAAM,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,EAAE;AAClC,QAAQ,IAAI,EAAE,IAAI,CAAC;AACnB;AACA;AACA,cAAc,CAAC;AACf,QAAQ,KAAK,EAAE,SAAS;AACxB,OAAO,CAAC;AACR,MAAM,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE;AACpD,QAAQ,IAAI,EAAE,IAAI,CAAC;AACnB,mCAAmC,CAAC;AACpC,QAAQ,KAAK,EAAE,SAAS;AACxB,OAAO,CAAC;AACR,KAAK;AACL,IAAI,OAAO,EAAE,CAAC,KAAK,KAAK;AACxB,MAAM,OAAO,IAAI,CAAC;AAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,CAAC,IAAI;AACpD,6BAA6B,CAAC;AAC9B,KAAK;AACL,IAAI,OAAO,EAAE;AACb,MAAM,iFAAiF;AACvF,KAAK;AACL;AACA,CAAC;;AAED,MAAM,WAAW,GAAG;AACpB,EAAE,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,QAAQ,EAAE;AACrC,IAAI,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC;AACpC,IAAI,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,EAAE;AACxC,MAAM,IAAI,EAAE,IAAI,CAAC,EAAE,UAAU,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;AACxD,MAAM,KAAK,EAAE,SAAS;AACtB,KAAK,CAAC;AACN,IAAI,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,EAAE;AAChC,MAAM,IAAI,EAAE,IAAI,CAAC;AACjB;AACA,YAAY,CAAC;AACb,MAAM,KAAK,EAAE,SAAS;AACtB,KAAK,CAAC;AACN,GAAG,CAAC;AACJ,EAAE,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,UAAU,EAAE;AACzC,IAAI,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC;AACtC,GAAG,CAAC;AACJ,CAAC;;AAED,KAAK,CAAC,OAAO;AACb,EAAE,6HAA6H;AAC/H,EAAE;AACF,IAAI,OAAO,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE;AAChC,IAAI,KAAK,EAAE;AACX,MAAM,GAAG,WAAW;AACpB,MAAM,aAAa,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB,EAAE;AACrD,QAAQ,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,iBAAiB,CAAC;AAC/C,QAAQ,KAAK,EAAE,SAAS;AACxB,OAAO,CAAC;AACR,MAAM,MAAM,EAAE,KAAK,CAAC,WAAW,CAAC,UAAU,EAAE;AAC5C,QAAQ,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE;AAC1C,UAAU,IAAI,EAAE,IAAI,CAAC;AACrB;AACA,gBAAgB,CAAC;AACjB,UAAU,KAAK,EAAE,SAAS;AAC1B,SAAS,CAAC;AACV,QAAQ,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE;AAC5C,UAAU,IAAI,EAAE,KAAK,CAAC,WAAW,CAAC,UAAU,CAAC;AAC7C,UAAU,KAAK,EAAE,SAAS;AAC1B,SAAS,CAAC;AACV,OAAO,CAAC;AACR,MAAM,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE;AACvC,QAAQ,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC;AACxC,QAAQ,KAAK,EAAE,SAAS;AACxB,OAAO,CAAC;AACR,KAAK;AACL,IAAI,OAAO,EAAE,CAAC,KAAK;AACnB,MAAM,IAAI,CAAC;AACX,QAAQ,EAAE,KAAK,CAAC,aAAa;AAC7B,uCAAuC,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;AAC1D,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO;AACxE,iDAAiD,EAAE,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC;AACzE,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI;AAChC;AACA;AACA,QAAQ,EAAE,KAAK,CAAC,MAAM;AACtB,wBAAwB,CAAC;AACzB,IAAI,OAAO,EAAE;AACb,MAAM,iFAAiF;AACvF,KAAK;AACL;AACA,CAAC;;AAED,KAAK,CAAC,OAAO;AACb,EAAE,6HAA6H;AAC/H,EAAE;AACF,IAAI,OAAO,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;AAC/B,IAAI,KAAK,EAAE;AACX,MAAM,GAAG,WAAW;AACpB,MAAM,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,qBAAqB,EAAE;AACxD,QAAQ,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE;AAC5C,UAAU,IAAI,EAAE,KAAK,CAAC,WAAW,CAAC,UAAU,CAAC;AAC7C,UAAU,KAAK,EAAE,SAAS;AAC1B,SAAS,CAAC;AACV,OAAO,CAAC;AACR,KAAK;AACL,IAAI,OAAO,EAAE,CAAC,KAAK,KAAK;AACxB,MAAM,OAAO,IAAI,CAAC;AAClB;AACA;AACA;AACA;AACA,uDAAuD,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;AAC1E,cAAc,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI;AACpD,qDAAqD,EAAE,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC;AAC9E,gBAAgB,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;AACzB,KAAK;AACL,IAAI,OAAO,EAAE;AACb,MAAM,iFAAiF;AACvF,KAAK;AACL;AACA,CAAC"}

package/es-custom/components/page-header/utils.js

@@ -48,6 +48,12 @@ const windowExists = typeof window !== `undefined`;
  */
 const scrollable = (target) => {
     const style = window.getComputedStyle(target);
+    const tagName = target.tagName.toLowerCase();
+    // Exclude body/html from hidden check (modals set overflow:hidden on body)
+    if (tagName === 'body' || tagName === 'html') {
+        return /(auto|scroll)/.test(style.overflow);
+    }
+    // For other elements, include hidden as it may be intentional scroll container
     return /(auto|scroll|hidden)/.test(style.overflow);
 };
 /**

package/es-custom/components/page-header/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../src/components/page-header/utils.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAAA;;;;;;;AAOG;AAEH;;;;AAIG;AAEU,MAAA,eAAe,GAAG,CAAC,EAAe,KAAY;AACzD,IAAA,MAAM,mBAAmB,GAAG,kBAAkB,CAAC,EAAE,CAAC;;AAGlD,IAAA,MAAM,kBAAkB,GAAG,EAAE,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAC,GAAG,GAAG,CAAC;AAElE,IAAA,IAAI,mBAAmB,KAAK,QAAQ,CAAC,gBAAgB,EAAE;;;QAGrD,OAAO,kBAAkB,IAAI,CAAC,GAAG,kBAAkB,GAAG,CAAC;;SAClD;;QAEL,MAAM,sBAAsB,GAAG;AAC7B,cAAG,mBAAmC,CAAC,qBAAqB,EAAE,CAAC;cAC7D,CAAC;;AAGL,QAAA,MAAM,iBAAiB,GACrB,kBAAkB,KAAK;cACnB,kBAAkB,GAAG;cACrB,CAAC;QACP,OAAO,iBAAiB,IAAI,CAAC,GAAG,iBAAiB,GAAG,CAAC;;AAEzD;AAEA,MAAM,YAAY,GAAG,OAAO,MAAM,KAAK,WAAW;AAElD;;;;;AAKG;AACU,MAAA,UAAU,GAAG,CAAC,MAAmB,KAAa;IACzD,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,MAAM,CAAC;IAC7C,OAAO,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;AACpD;AAEA;;AAEG;AACU,MAAA,uBAAuB,GAAG,CAAC,MAAmB,KAAI;IAC7D,IAAI,MAAM,CAAC,UAAU,IAAI,MAAM,CAAC,UAAU,KAAK,QAAQ,EAAE;AACvD,QAAA,IAAI,UAAU,CAAC,MAAM,CAAC,UAAyB,CAAC,EAAE;YAChD,OAAO,MAAM,CAAC,UAAU;;aACnB;AACL,YAAA,OAAO,uBAAuB,CAAC,MAAM,CAAC,UAAyB,CAAC;;;SAE7D;QACL,OAAO,QAAQ,CAAC,gBAAgB;;AAEpC;AAEA;;;;;AAKG;AACU,MAAA,kBAAkB,GAAG,CAAC,MAAmB,KAAI;AACxD,IAAA,IAAI,CAAC,YAAY,IAAI,CAAC,MAAM,EAAE;AAC5B,QAAA,OAAO,IAAI;;;IAIb,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,MAAM,CAAC;AAE7C,IAAA,IAAI,CAAC,MAAM,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,QAAQ,KAAK,OAAO,EAAE;QACnD,OAAO,QAAQ,CAAC,gBAAgB;;AAElC,IAAA,OAAO,uBAAuB,CAAC,MAAM,CAAC;AACxC;;;;"}
+{"version":3,"file":"utils.js","sources":["../../../src/components/page-header/utils.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAAA;;;;;;;AAOG;AAEH;;;;AAIG;AAEU,MAAA,eAAe,GAAG,CAAC,EAAe,KAAY;AACzD,IAAA,MAAM,mBAAmB,GAAG,kBAAkB,CAAC,EAAE,CAAC;;AAGlD,IAAA,MAAM,kBAAkB,GAAG,EAAE,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAC,GAAG,GAAG,CAAC;AAElE,IAAA,IAAI,mBAAmB,KAAK,QAAQ,CAAC,gBAAgB,EAAE;;;QAGrD,OAAO,kBAAkB,IAAI,CAAC,GAAG,kBAAkB,GAAG,CAAC;;SAClD;;QAEL,MAAM,sBAAsB,GAAG;AAC7B,cAAG,mBAAmC,CAAC,qBAAqB,EAAE,CAAC;cAC7D,CAAC;;AAGL,QAAA,MAAM,iBAAiB,GACrB,kBAAkB,KAAK;cACnB,kBAAkB,GAAG;cACrB,CAAC;QACP,OAAO,iBAAiB,IAAI,CAAC,GAAG,iBAAiB,GAAG,CAAC;;AAEzD;AAEA,MAAM,YAAY,GAAG,OAAO,MAAM,KAAK,WAAW;AAElD;;;;;AAKG;AACU,MAAA,UAAU,GAAG,CAAC,MAAmB,KAAa;IACzD,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,MAAM,CAAC;IAC7C,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE;;IAG5C,IAAI,OAAO,KAAK,MAAM,IAAI,OAAO,KAAK,MAAM,EAAE;QAC5C,OAAO,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;;;IAI7C,OAAO,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;AACpD;AAEA;;AAEG;AACU,MAAA,uBAAuB,GAAG,CAAC,MAAmB,KAAI;IAC7D,IAAI,MAAM,CAAC,UAAU,IAAI,MAAM,CAAC,UAAU,KAAK,QAAQ,EAAE;AACvD,QAAA,IAAI,UAAU,CAAC,MAAM,CAAC,UAAyB,CAAC,EAAE;YAChD,OAAO,MAAM,CAAC,UAAU;;aACnB;AACL,YAAA,OAAO,uBAAuB,CAAC,MAAM,CAAC,UAAyB,CAAC;;;SAE7D;QACL,OAAO,QAAQ,CAAC,gBAAgB;;AAEpC;AAEA;;;;;AAKG;AACU,MAAA,kBAAkB,GAAG,CAAC,MAAmB,KAAI;AACxD,IAAA,IAAI,CAAC,YAAY,IAAI,CAAC,MAAM,EAAE;AAC5B,QAAA,OAAO,IAAI;;;IAIb,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,MAAM,CAAC;AAE7C,IAAA,IAAI,CAAC,MAAM,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,QAAQ,KAAK,OAAO,EAAE;QACnD,OAAO,QAAQ,CAAC,gBAAgB;;AAElC,IAAA,OAAO,uBAAuB,CAAC,MAAM,CAAC;AACxC;;;;"}