@carbon/ibm-products-web-components 0.30.0 → 0.31.0-rc.0

package/es-custom/components/about-modal/about-modal-helpers.js

@@ -0,0 +1,141 @@
+/**
+ * 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 { html } from 'lit';
+import { prefix } from '../../globals/settings.js';
+import img$1 from './_story-assets/ansible-logo.svg.js';
+import img from './_story-assets/grafana-logo.svg.js';
+import img$2 from './_story-assets/js-logo.svg.js';
+
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const blockClass = `${prefix}--about-modal`;
+const storyPrefix = 'about-modal-stories__';
+const getTitle = (index) => {
+    switch (index) {
+        case 0:
+            return html `IBM Product name`;
+        case 1:
+            return html `IBM Product name example that is longer than one line`;
+        case 2:
+            return html `IBM <span style="font-weight: 600">Product name</span>`;
+        default:
+            return null;
+    }
+};
+const getAdditionalInfo = (index) => {
+    switch (index) {
+        case 1:
+            return html `
+        <p class=${`${blockClass}__footer-label`}>Powered by</p>
+        <img
+          src=${img}
+          alt="Grafana"
+          class=${`${blockClass}__footer--tech-logo`}
+        />
+        <img
+          src=${img$1}
+          alt="Ansible"
+          class=${`${blockClass}__footer--tech-logo`}
+        />
+        <img
+          src=${img$2}
+          alt="JavaScript"
+          class=${`${blockClass}__footer--tech-logo`}
+        />
+      `;
+        default:
+            return null;
+    }
+};
+const getContent = (index) => {
+    switch (index) {
+        case 1:
+            return html `This Web site contains proprietary notices and copyright
+      information, the terms of which must be observed and followed.`;
+        case 2:
+            return html `This Web site contains proprietary notices and copyright
+      information, the terms of which must be observed and followed. Please see
+      the tab entitled 'Copyright and trademark information' for related
+      information. IBM grants you a non-exclusive, non-transferable, limited
+      permission to access and display the Web pages within this site as a
+      customer or potential customer of IBM provided you comply with these Terms
+      of Use, and all copyright, trademark, and other proprietary notices remain
+      intact.`;
+        case 3:
+            return html `This Web site contains proprietary notices and copyright
+      information, the terms of which must be observed and followed. Please see
+      the tab entitled 'Copyright and trademark information' for related
+      information. IBM grants you a non-exclusive, non-transferable, limited
+      permission to access and display the Web pages within this site as a
+      customer or potential customer of IBM provided you comply with these Terms
+      of Use, and all copyright, trademark, and other proprietary notices remain
+      intact. You may only use a crawler to crawl this Web site as permitted by
+      this Web site's robots.txt protocol, and IBM may block any crawlers in its
+      sole discretion. The use authorized under this agreement is non-commercial
+      in nature (e.g., you may not sell the content you access on or through
+      this Web site.) All other use of this site is prohibited. Except for the
+      limited permission in the preceding paragraph, IBM does not grant you any
+      express or implied rights or licenses under any patents, trademarks,
+      copyrights, or other proprietary or intellectual property rights. You may
+      not mirror any of the content from this site on another Web site or in any
+      other media. Any software and other materials that are made available for
+      downloading, access, or other use from this site with their own license
+      terms will be governed by such terms, conditions, and notices. Your
+      failure to comply with such terms or any of the terms on this site will
+      result in automatic termination of any rights granted to you, without
+      prior notice, and you must immediately destroy all copies of downloaded
+      materials in your possession, custody or control. This Web site contains
+      proprietary notices and copyright information, the terms of which must be
+      observed and followed. Please see the tab entitled “Copyright and
+      trademark information” for related information. IBM grants you a
+      non-exclusive, non-transferable, limited permission to access and display
+      the Web pages within this site as a customer or potential customer of IBM
+      provided you comply with these Terms of Use, and all copyright, trademark,
+      and other proprietary notices remain intact. You may only use a crawler to
+      crawl this Web site as permitted by this Web site’s robots.txt protocol,
+      and IBM may block any crawlers in its sole discretion. The use authorized
+      under this agreement is non-commercial in nature (e.g., you may not sell
+      the content you access on or through this Web site.) All other use of this
+      site is prohibited. Except for the limited permission in the preceding
+      paragraph, IBM does not grant you any express or implied rights or
+      licenses under any patents, trademarks, copyrights, or other proprietary
+      or intellectual property rights. You may not mirror any of the content
+      from this site on another Web site or in any other media. Any software and
+      other materials that are made available for downloading, access, or other
+      use from this site with their own license terms will be governed by such
+      terms, conditions, and notices. Your failure to comply with such terms or
+      any of the terms on this site will result in automatic termination of any
+      rights granted to you, without prior notice, and you must immediately
+      destroy all copies of downloaded materials in your possession, custody or
+      control.`;
+        default:
+            return null;
+    }
+};
+const getLinks = (index) => {
+    if (index > 0) {
+        const links = [];
+        for (let i = 0; i < index; i++) {
+            const link = html `<cds-custom-link href="#"> Link action </cds-custom-link>`;
+            links.push(link);
+        }
+        return links;
+    }
+    else {
+        return null;
+    }
+};
+
+export { blockClass, getAdditionalInfo, getContent, getLinks, getTitle, storyPrefix };
+//# sourceMappingURL=about-modal-helpers.js.map

package/es-custom/components/about-modal/about-modal-helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"about-modal-helpers.js","sources":["../../../src/components/about-modal/about-modal-helpers.ts"],"sourcesContent":[null],"names":["grafanaLogo","ansibleLogo","jsLogo"],"mappings":";;;;;;;;;;;;;AAAA;;;;;;;AAOG;AAQU,MAAA,UAAU,GAAG,CAAG,EAAA,MAAM;AAC5B,MAAM,WAAW,GAAG;AACd,MAAA,QAAQ,GAAG,CAAC,KAAK,KAAI;IAChC,QAAQ,KAAK;AACX,QAAA,KAAK,CAAC;YACJ,OAAO,IAAI,CAAA,CAAA,gBAAA,CAAkB;AAC/B,QAAA,KAAK,CAAC;YACJ,OAAO,IAAI,CAAA,CAAA,qDAAA,CAAuD;AACpE,QAAA,KAAK,CAAC;YACJ,OAAO,IAAI,CAAA,CAAA,sDAAA,CAAwD;AACrE,QAAA;AACE,YAAA,OAAO,IAAI;;AAEjB;AAEa,MAAA,iBAAiB,GAAG,CAAC,KAAK,KAAI;IACzC,QAAQ,KAAK;AACX,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,IAAI,CAAA;AACE,iBAAA,EAAA,CAAA,EAAG,UAAU,CAAgB,cAAA,CAAA,CAAA;;gBAEhCA,GAAW;;AAET,gBAAA,EAAA,CAAA,EAAG,UAAU,CAAqB,mBAAA,CAAA;;;gBAGpCC,KAAW;;AAET,gBAAA,EAAA,CAAA,EAAG,UAAU,CAAqB,mBAAA,CAAA;;;gBAGpCC,KAAM;;AAEJ,gBAAA,EAAA,CAAA,EAAG,UAAU,CAAqB,mBAAA,CAAA;;OAE7C;AACH,QAAA;AACE,YAAA,OAAO,IAAI;;AAEjB;AAEa,MAAA,UAAU,GAAG,CAAC,KAAK,KAAI;IAClC,QAAQ,KAAK;AACX,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,IAAI,CAAA,CAAA;qEACoD;AACjE,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,IAAI,CAAA,CAAA;;;;;;;cAOH;AACV,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,IAAI,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eA6CF;AACX,QAAA;AACE,YAAA,OAAO,IAAI;;AAEjB;AAEa,MAAA,QAAQ,GAAG,CAAC,KAAK,KAAI;AAChC,IAAA,IAAI,KAAK,GAAG,CAAC,EAAE;QACb,MAAM,KAAK,GAAqB,EAAE;AAClC,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE,EAAE;AAC9B,YAAA,MAAM,IAAI,GAAG,IAAI,CAAA,6CAA6C;AAC9D,YAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;;AAElB,QAAA,OAAO,KAAK;;SACP;AACL,QAAA,OAAO,IAAI;;AAEf;;;;"}

package/es-custom/components/notification-panel/notification-panel-footer.figma.js

@@ -0,0 +1,31 @@
+/**
+ * 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';
+
+/**
+ * Copyright IBM Corp. 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.
+ */
+
+
+figma.connect(
+  'https://www.figma.com/design/0F9dKH2abAd7gSfvnacfWf/-v11--IBM-Products-%E2%80%93-Carbon-Design-System?node-id=10574-240285',
+  {
+    example: () =>
+      html`<c4p-notification-footer
+        slot="footer"
+        viewAllLabel="View all (16)"
+      ></c4p-notification-footer>`,
+    imports: [
+      "import '@carbon/ibm-products-web-components/es/components/notification-panel/index.js'",
+    ],
+  }
+);
+//# sourceMappingURL=notification-panel-footer.figma.js.map

package/es-custom/components/notification-panel/notification-panel-footer.figma.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-panel-footer.figma.js","sources":["../../../src/components/notification-panel/notification-panel-footer.figma.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 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';\n\nfigma.connect(\n  'https://www.figma.com/design/0F9dKH2abAd7gSfvnacfWf/-v11--IBM-Products-%E2%80%93-Carbon-Design-System?node-id=10574-240285',\n  {\n    example: () =>\n      html`<c4p-notification-footer\n        slot=\"footer\"\n        viewAllLabel=\"View all (16)\"\n      ></c4p-notification-footer>`,\n    imports: [\n      \"import '@carbon/ibm-products-web-components/es/components/notification-panel/index.js'\",\n    ],\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;;;AAIA,KAAK,CAAC,OAAO;AACb,EAAE,4HAA4H;AAC9H,EAAE;AACF,IAAI,OAAO,EAAE;AACb,MAAM,IAAI,CAAC;AACX;AACA;AACA,iCAAiC,CAAC;AAClC,IAAI,OAAO,EAAE;AACb,MAAM,wFAAwF;AAC9F,KAAK;AACL;AACA,CAAC"}

package/es-custom/components/notification-panel/notification-panel.figma.js

@@ -0,0 +1,114 @@
+/**
+ * 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';
+
+/**
+ * Copyright IBM Corp. 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.
+ */
+
+
+const sharedProps = {
+  title: figma.nestedProps('Header', {
+    text: figma.textContent('"Notifications"'),
+  }),
+  doNotDisturbLabel: figma.nestedProps('Toggle', {
+    text: figma.textContent('Value'),
+  }),
+};
+
+figma.connect(
+  'https://www.figma.com/design/0F9dKH2abAd7gSfvnacfWf?node-id=10574%3A240266',
+  {
+    variant: { 'Empty state': false },
+    props: {
+      ...sharedProps,
+    },
+
+    example: (props) =>
+      html`<c4p-notification-panel
+        open
+        title-text="${props.title.text}"
+        today-text="Today"
+        previous-text="Previous"
+        dismiss-all-label="Dismiss all"
+        donot-disturb-label="${props.doNotDisturbLabel.text}"
+        date-time-locale="en-US"
+      >
+        <c4p-notification
+          slot="previous"
+          type="success"
+          unread="true"
+          .timestamp="Time stamp [00:00:00]"
+        >
+          <h4 slot="title">Title</h4>
+          <div slot="description">Message</div>
+        </c4p-notification>
+
+        <c4p-notification
+          slot="previous"
+          type="error"
+          unread="false"
+          .timestamp="Time stamp [00:00:00]"
+        >
+          <h4 slot="title">Title</h4>
+          <div slot="description">Message</div>
+        </c4p-notification>
+
+        <c4p-notification
+          slot="previous"
+          type="warning"
+          unread="false"
+          .timestamp="Time stamp [00:00:00]"
+        >
+          <h4 slot="title">Title</h4>
+          <div slot="description">Message</div>
+        </c4p-notification>
+
+        <c4p-notification-footer
+          slot="footer"
+          view-all-label="View all (16)"
+        ></c4p-notification-footer>
+      </c4p-notification-panel>`,
+    imports: [
+      "import '@carbon/ibm-products-web-components/es/components/notification-panel/index.js'",
+    ],
+  }
+);
+
+figma.connect(
+  'https://www.figma.com/design/0F9dKH2abAd7gSfvnacfWf?node-id=10574%3A240266',
+  {
+    variant: { 'Empty state': true },
+    props: {
+      ...sharedProps,
+      emptyStateLabel: figma.nestedProps(
+        'Empty state | (v11) Carbon for IBM Products',
+        {
+          text: figma.string('Title text'),
+        }
+      ),
+    },
+
+    example: (props) =>
+      html`<c4p-notification-panel
+        open
+        title-text="${props.title.text}"
+        dismiss-all-label="Dismiss all"
+        donot-disturb-label="${props.doNotDisturbLabel.text}"
+        empty-state-label="${props.emptyStateLabel.text}"
+      >
+      </c4p-notification-panel>`,
+    imports: [
+      "import '@carbon/ibm-products-web-components/es/components/notification-panel/index.js'",
+    ],
+  }
+);
+//# sourceMappingURL=notification-panel.figma.js.map

package/es-custom/components/notification-panel/notification-panel.figma.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-panel.figma.js","sources":["../../../src/components/notification-panel/notification-panel.figma.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 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';\n\nconst sharedProps = {\n  title: figma.nestedProps('Header', {\n    text: figma.textContent('\"Notifications\"'),\n  }),\n  doNotDisturbLabel: figma.nestedProps('Toggle', {\n    text: figma.textContent('Value'),\n  }),\n};\n\nfigma.connect(\n  'https://www.figma.com/design/0F9dKH2abAd7gSfvnacfWf?node-id=10574%3A240266',\n  {\n    variant: { 'Empty state': false },\n    props: {\n      ...sharedProps,\n    },\n\n    example: (props) =>\n      html`<c4p-notification-panel\n        open\n        title-text=\"${props.title.text}\"\n        today-text=\"Today\"\n        previous-text=\"Previous\"\n        dismiss-all-label=\"Dismiss all\"\n        donot-disturb-label=\"${props.doNotDisturbLabel.text}\"\n        date-time-locale=\"en-US\"\n      >\n        <c4p-notification\n          slot=\"previous\"\n          type=\"success\"\n          unread=\"true\"\n          .timestamp=\"Time stamp [00:00:00]\"\n        >\n          <h4 slot=\"title\">Title</h4>\n          <div slot=\"description\">Message</div>\n        </c4p-notification>\n\n        <c4p-notification\n          slot=\"previous\"\n          type=\"error\"\n          unread=\"false\"\n          .timestamp=\"Time stamp [00:00:00]\"\n        >\n          <h4 slot=\"title\">Title</h4>\n          <div slot=\"description\">Message</div>\n        </c4p-notification>\n\n        <c4p-notification\n          slot=\"previous\"\n          type=\"warning\"\n          unread=\"false\"\n          .timestamp=\"Time stamp [00:00:00]\"\n        >\n          <h4 slot=\"title\">Title</h4>\n          <div slot=\"description\">Message</div>\n        </c4p-notification>\n\n        <c4p-notification-footer\n          slot=\"footer\"\n          view-all-label=\"View all (16)\"\n        ></c4p-notification-footer>\n      </c4p-notification-panel>`,\n    imports: [\n      \"import '@carbon/ibm-products-web-components/es/components/notification-panel/index.js'\",\n    ],\n  }\n);\n\nfigma.connect(\n  'https://www.figma.com/design/0F9dKH2abAd7gSfvnacfWf?node-id=10574%3A240266',\n  {\n    variant: { 'Empty state': true },\n    props: {\n      ...sharedProps,\n      emptyStateLabel: figma.nestedProps(\n        'Empty state | (v11) Carbon for IBM Products',\n        {\n          text: figma.string('Title text'),\n        }\n      ),\n    },\n\n    example: (props) =>\n      html`<c4p-notification-panel\n        open\n        title-text=\"${props.title.text}\"\n        dismiss-all-label=\"Dismiss all\"\n        donot-disturb-label=\"${props.doNotDisturbLabel.text}\"\n        empty-state-label=\"${props.emptyStateLabel.text}\"\n      >\n      </c4p-notification-panel>`,\n    imports: [\n      \"import '@carbon/ibm-products-web-components/es/components/notification-panel/index.js'\",\n    ],\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;;;AAIA,MAAM,WAAW,GAAG;AACpB,EAAE,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,QAAQ,EAAE;AACrC,IAAI,IAAI,EAAE,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC;AAC9C,GAAG,CAAC;AACJ,EAAE,iBAAiB,EAAE,KAAK,CAAC,WAAW,CAAC,QAAQ,EAAE;AACjD,IAAI,IAAI,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC;AACpC,GAAG,CAAC;AACJ,CAAC;;AAED,KAAK,CAAC,OAAO;AACb,EAAE,4EAA4E;AAC9E,EAAE;AACF,IAAI,OAAO,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE;AACrC,IAAI,KAAK,EAAE;AACX,MAAM,GAAG,WAAW;AACpB,KAAK;;AAEL,IAAI,OAAO,EAAE,CAAC,KAAK;AACnB,MAAM,IAAI,CAAC;AACX;AACA,oBAAoB,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;AACvC;AACA;AACA;AACA,6BAA6B,EAAE,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,+BAA+B,CAAC;AAChC,IAAI,OAAO,EAAE;AACb,MAAM,wFAAwF;AAC9F,KAAK;AACL;AACA,CAAC;;AAED,KAAK,CAAC,OAAO;AACb,EAAE,4EAA4E;AAC9E,EAAE;AACF,IAAI,OAAO,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE;AACpC,IAAI,KAAK,EAAE;AACX,MAAM,GAAG,WAAW;AACpB,MAAM,eAAe,EAAE,KAAK,CAAC,WAAW;AACxC,QAAQ,6CAA6C;AACrD,QAAQ;AACR,UAAU,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC;AAC1C;AACA,OAAO;AACP,KAAK;;AAEL,IAAI,OAAO,EAAE,CAAC,KAAK;AACnB,MAAM,IAAI,CAAC;AACX;AACA,oBAAoB,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;AACvC;AACA,6BAA6B,EAAE,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC;AAC5D,2BAA2B,EAAE,KAAK,CAAC,eAAe,CAAC,IAAI,CAAC;AACxD;AACA,+BAA+B,CAAC;AAChC,IAAI,OAAO,EAAE;AACb,MAAM,wFAAwF;AAC9F,KAAK;AACL;AACA,CAAC"}

package/es-custom/components/notification-panel/notification.figma.js

@@ -0,0 +1,55 @@
+/**
+ * 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';
+
+/**
+ * Copyright IBM Corp. 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.
+ */
+
+
+figma.connect(
+  'https://www.figma.com/design/0F9dKH2abAd7gSfvnacfWf/-v11--IBM-Products-%E2%80%93-Carbon-Design-System?node-id=10574-240216',
+  {
+    variant: { State: 'Enabled' },
+    props: {
+      type: figma.nestedProps('Status icon', {
+        value: figma.enum('Status', {
+          Normal: 'Success',
+          Information: 'informational',
+          Failure: 'error',
+          'Warning yellow': 'warning',
+        }),
+      }),
+      timestamp: figma.boolean('Time stamp', {
+        true: figma.string('Time stamp text'),
+        false: '',
+      }),
+      titleText: figma.boolean('Title', {
+        true: figma.string('Title text'),
+        false: '',
+      }),
+      messageText: figma.boolean('Message', {
+        true: figma.string('Message text'),
+        false: '',
+      }),
+    },
+
+    example: (props) =>
+      html`<c4p-notification
+        type=${props.type.value}
+        timestamp=${props.timestamp}
+      >
+        <h4 slot="title">${props.titleText}</h4>
+        <div slot="description">${props.messageText}</div>
+      </c4p-notification>`,
+  }
+);
+//# sourceMappingURL=notification.figma.js.map

package/es-custom/components/notification-panel/notification.figma.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification.figma.js","sources":["../../../src/components/notification-panel/notification.figma.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 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';\n\nfigma.connect(\n  'https://www.figma.com/design/0F9dKH2abAd7gSfvnacfWf/-v11--IBM-Products-%E2%80%93-Carbon-Design-System?node-id=10574-240216',\n  {\n    variant: { State: 'Enabled' },\n    props: {\n      type: figma.nestedProps('Status icon', {\n        value: figma.enum('Status', {\n          Normal: 'Success',\n          Information: 'informational',\n          Failure: 'error',\n          'Warning yellow': 'warning',\n        }),\n      }),\n      timestamp: figma.boolean('Time stamp', {\n        true: figma.string('Time stamp text'),\n        false: '',\n      }),\n      titleText: figma.boolean('Title', {\n        true: figma.string('Title text'),\n        false: '',\n      }),\n      messageText: figma.boolean('Message', {\n        true: figma.string('Message text'),\n        false: '',\n      }),\n    },\n\n    example: (props) =>\n      html`<c4p-notification\n        type=${props.type.value}\n        timestamp=${props.timestamp}\n      >\n        <h4 slot=\"title\">${props.titleText}</h4>\n        <div slot=\"description\">${props.messageText}</div>\n      </c4p-notification>`,\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;;;AAIA,KAAK,CAAC,OAAO;AACb,EAAE,4HAA4H;AAC9H,EAAE;AACF,IAAI,OAAO,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;AACjC,IAAI,KAAK,EAAE;AACX,MAAM,IAAI,EAAE,KAAK,CAAC,WAAW,CAAC,aAAa,EAAE;AAC7C,QAAQ,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,QAAQ,EAAE;AACpC,UAAU,MAAM,EAAE,SAAS;AAC3B,UAAU,WAAW,EAAE,eAAe;AACtC,UAAU,OAAO,EAAE,OAAO;AAC1B,UAAU,gBAAgB,EAAE,SAAS;AACrC,SAAS,CAAC;AACV,OAAO,CAAC;AACR,MAAM,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;AAC7C,QAAQ,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,iBAAiB,CAAC;AAC7C,QAAQ,KAAK,EAAE,EAAE;AACjB,OAAO,CAAC;AACR,MAAM,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE;AACxC,QAAQ,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC;AACxC,QAAQ,KAAK,EAAE,EAAE;AACjB,OAAO,CAAC;AACR,MAAM,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE;AAC5C,QAAQ,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC;AAC1C,QAAQ,KAAK,EAAE,EAAE;AACjB,OAAO,CAAC;AACR,KAAK;;AAEL,IAAI,OAAO,EAAE,CAAC,KAAK;AACnB,MAAM,IAAI,CAAC;AACX,aAAa,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK;AAC/B,kBAAkB,EAAE,KAAK,CAAC,SAAS;AACnC;AACA,yBAAyB,EAAE,KAAK,CAAC,SAAS,CAAC;AAC3C,gCAAgC,EAAE,KAAK,CAAC,WAAW,CAAC;AACpD,yBAAyB,CAAC;AAC1B;AACA,CAAC"}

package/es-custom/index.d.ts

@@ -10,7 +10,7 @@ export { default as CDSSidePanel } from './components/side-panel/side-panel';
 export { default as CDSTearsheet } from './components/tearsheet/tearsheet';
 export { default as CDSFullPageError } from './components/full-page-error/full-page-error';
 export { default as CDSAboutModal } from './components/about-modal/about-modal';
-export { default as CDSUseravatar } from './components/user-avatar/user-avatar';
+export { default as CDSUserAvatar } from './components/user-avatar/user-avatar';
 export { default as CDSOptionsTile } from './components/options-tile/options-tile';
 export { default as CDSTruncatedText } from './components/truncated-text/truncated-text';
 export { default as CDSPageHeader } from './components/page-header/page-header';

package/es-custom/index.js

@@ -9,7 +9,7 @@ export { default as CDSSidePanel } from './components/side-panel/side-panel.js';
 export { default as CDSTearsheet } from './components/tearsheet/tearsheet.js';
 export { default as CDSFullPageError } from './components/full-page-error/full-page-error.js';
 export { default as CDSAboutModal } from './components/about-modal/about-modal.js';
-export { default as CDSUseravatar } from './components/user-avatar/user-avatar.js';
+export { default as CDSUserAvatar } from './components/user-avatar/user-avatar.js';
 export { default as CDSOptionsTile } from './components/options-tile/options-tile.js';
 export { default as CDSTruncatedText } from './components/truncated-text/truncated-text.js';
 export { default as CDSPageHeader } from './components/page-header/page-header.js';

package/es-custom/packages/ibm-products-web-components/package.json.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-var version = "0.30.0-rc.0";
+var version = "0.30.0";
 var packageJson = {
 	version: version};
 

package/es-custom/patterns/step-flow/_story-assets/step-side-panel.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 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.
+ */
+import { LitElement } from 'lit';
+import '../../../components/side-panel/index.js';
+import '@carbon/web-components/es-custom/components/text-input/index.js';
+import '@carbon/web-components/es-custom/components/button/index.js';
+import '@carbon/web-components/es-custom/components/progress-indicator/index.js';
+import '../step-group';
+declare const StepSidePanel_base: typeof LitElement;
+export declare class StepSidePanel extends StepSidePanel_base {
+    open: boolean;
+    private _email;
+    private _city;
+    private _state;
+    private _openHandler;
+    private _handleCancelButton;
+    private _handleBackButton;
+    private _handleNextButton;
+    private _handleEmailInput;
+    private _handleCityInput;
+    private _handleStateInput;
+    private _stepInfo;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: any;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'step-side-panel': StepSidePanel;
+    }
+}
+export {};

package/es-custom/patterns/step-flow/_story-assets/step-side-panel.js

@@ -0,0 +1,217 @@
+/**
+ * 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 { __decorate } from 'tslib';
+import { LitElement, nothing, html } from 'lit';
+import { state, customElement } from 'lit/decorators.js';
+import '../../../components/side-panel/side-panel.js';
+import '@carbon/web-components/es-custom/components/text-input/index.js';
+import '@carbon/web-components/es-custom/components/button/index.js';
+import '@carbon/web-components/es-custom/components/progress-indicator/index.js';
+import { StepInstance } from '../step-flow-signal.js';
+import { SignalWatcher } from '@lit-labs/signals';
+import '../step-group.js';
+import styles from './step-side-panel.scss.js';
+
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 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.
+ */
+const blockClass = 'c4p--step-side-panel';
+let StepSidePanel = class StepSidePanel extends SignalWatcher(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.open = true;
+        this._email = '';
+        this._city = '';
+        this._state = '';
+        this._stepInfo = new StepInstance();
+    }
+    _openHandler() {
+        this.open = !this.open;
+    }
+    _handleCancelButton() {
+        this._openHandler();
+        this._stepInfo.reset();
+    }
+    _handleBackButton() {
+        const { currentStep } = this._stepInfo.data;
+        if (currentStep === 0) {
+            return;
+        }
+        return this._stepInfo.handlePrevious();
+    }
+    _handleNextButton() {
+        const { currentStep, totalSteps } = this._stepInfo.data;
+        if (currentStep + 1 === totalSteps) {
+            this._openHandler();
+            this._stepInfo.reset();
+            return;
+        }
+        return this._stepInfo.handleNext();
+    }
+    _handleEmailInput(e) {
+        const savedFormState = structuredClone(this._stepInfo.data.formState);
+        savedFormState.email = e.target.value;
+        this._stepInfo.updateFormState = savedFormState;
+    }
+    _handleCityInput(e) {
+        const savedFormState = structuredClone(this._stepInfo.data.formState);
+        savedFormState.city = e.target.value;
+        this._stepInfo.updateFormState = savedFormState;
+    }
+    _handleStateInput(e) {
+        const savedFormState = structuredClone(this._stepInfo.data.formState);
+        savedFormState.state = e.target.value;
+        this._stepInfo.updateFormState = savedFormState;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._stepInfo.updateTotalStepCount = 3;
+    }
+    render() {
+        const { formState, totalSteps, currentStep } = this._stepInfo.data;
+        return html `
+      <div>
+        <cds-custom-button @click=${this._openHandler}>Create partitions</cds-custom-button>
+        <c4p-side-panel
+          @c4p-side-panel-closed=${this._openHandler}
+          class="${blockClass}"
+          ?animate-title=${false}
+          include-overlay
+          ?open=${this.open}
+          size="md"
+          title="Create partitions"
+        >
+          <div slot="subtitle">
+            Specify the details of the partitions you're creating
+          </div>
+          <div slot="below-title">
+            <cds-custom-progress-indicator class="progress-indicator">
+              <cds-custom-progress-step
+                label="First step"
+                state=${currentStep + 1 === 1 ? 'current' : 'complete'}
+              ></cds-custom-progress-step>
+              <cds-custom-progress-step
+                label="Second step"
+                state=${currentStep + 1 === 2
+            ? 'current'
+            : currentStep + 1 < 2
+                ? 'incomplete'
+                : 'complete'}
+              ></cds-custom-progress-step>
+              <cds-custom-progress-step
+                label="Third step"
+                state=${currentStep + 1 === 3
+            ? 'current'
+            : currentStep + 1 < 3
+                ? 'incomplete'
+                : 'complete'}
+              ></cds-custom-progress-step>
+            </cds-custom-progress-indicator>
+          </div>
+          <h3
+            class="${blockClass}__form-title-text ${blockClass}__content-text"
+          >
+            Core configuration
+          </h3>
+          <p
+            class="${blockClass}__form-description-text ${blockClass}__content-text"
+          >
+            We recommend you fill out and evaluate these details at a minimum
+            before deploying your topic.
+          </p>
+          <step-group>
+            ${currentStep + 1 === 1
+            ? html ` <cds-custom-text-input
+                  label="Email"
+                  id="tearsheet-story-text-input-a"
+                  value=${this._email}
+                  @input="${this._handleEmailInput}"
+                ></cds-custom-text-input>`
+            : nothing}
+            ${currentStep + 1 === 2
+            ? html ` <cds-custom-text-input
+                  label="City"
+                  id="tearsheet-story-text-input-city"
+                  value=${this._city}
+                  @input="${this._handleCityInput}"
+                ></cds-custom-text-input>`
+            : nothing}
+            ${currentStep + 1 === 2
+            ? html ` <cds-custom-text-input
+                  label="State"
+                  id="tearsheet-story-text-input-state"
+                  value=${this._state}
+                  @input="${this._handleStateInput}"
+                ></cds-custom-text-input>`
+            : nothing}
+            ${currentStep + 1 === 3
+            ? html `<div>
+                  <!-- //cspell: disable -->
+                  <cds-custom-code-snippet
+                    type="multi"
+                    copy-text=""
+                    maxcollapsednumberofrows="15"
+                    maxexpandednumberofrows=""
+                    mincollapsednumberofrows="3"
+                    minexpandednumberofrows=""
+                    show-less-text="Show less"
+                    show-more-text="Show more"
+                    feedback=""
+                    feedback-timeout="0"
+                    tooltip-content="Copy to clipboard"
+                  >
+                    ${JSON.stringify(formState, null, 2)}
+                  </cds-custom-code-snippet>
+                  <!-- //cspell: enable -->
+                </div>`
+            : nothing}
+          </step-group>
+          <cds-custom-button
+            slot="actions"
+            kind="ghost"
+            @click=${this._handleCancelButton}
+            >Cancel</cds-custom-button
+          >
+          <cds-custom-button
+            slot="actions"
+            kind="secondary"
+            @click=${this._handleBackButton}
+            >Back</cds-custom-button
+          >
+          <cds-custom-button slot="actions" @click=${this._handleNextButton}>
+            ${currentStep + 1 < totalSteps ? 'Next' : 'Submit'}
+          </cds-custom-button>
+        </c4p-side-panel>
+      </div>
+    `;
+    }
+};
+StepSidePanel.styles = styles;
+__decorate([
+    state()
+], StepSidePanel.prototype, "open", void 0);
+__decorate([
+    state()
+], StepSidePanel.prototype, "_email", void 0);
+__decorate([
+    state()
+], StepSidePanel.prototype, "_city", void 0);
+__decorate([
+    state()
+], StepSidePanel.prototype, "_state", void 0);
+StepSidePanel = __decorate([
+    customElement('step-side-panel')
+], StepSidePanel);
+
+export { StepSidePanel };
+//# sourceMappingURL=step-side-panel.js.map