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

package/es-custom/index.d.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2024, 2025
+ * Copyright IBM Corp. 2024, 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.
@@ -23,3 +23,6 @@ export { default as CDSGuideBanner } from './components/guide-banner/guide-banne
 export { default as CDSGuideBannerElement } from './components/guide-banner/guide-banner-element';
 export { default as CDSCoachmark } from './components/coachmark/coachmark';
 export { default as CDSCoachmarkBeacon } from './components/coachmark/coachmark-beacon/coachmark-beacon';
+export { default as CDSCoachmarkTagline } from './components/coachmark/coachmark-tagline/coachmark-tagline';
+export { default as CDSBigNumber } from './components/big-number/big-number';
+export { default as CDSBigNumberSkeleton } from './components/big-number/big-number-skeleton';

package/es-custom/index.js

@@ -22,4 +22,7 @@ export { default as CDSGuideBanner } from './components/guide-banner/guide-banne
 export { default as CDSGuideBannerElement } from './components/guide-banner/guide-banner-element.js';
 export { default as CDSCoachmark } from './components/coachmark/coachmark.js';
 export { default as CDSCoachmarkBeacon } from './components/coachmark/coachmark-beacon/coachmark-beacon.js';
+export { default as CDSCoachmarkTagline } from './components/coachmark/coachmark-tagline/coachmark-tagline.js';
+export { default as CDSBigNumber } from './components/big-number/big-number.js';
+export { default as CDSBigNumberSkeleton } from './components/big-number/big-number-skeleton.js';
 //# sourceMappingURL=index.js.map

package/es-custom/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}

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.31.0-rc.0";
+var version = "0.31.0";
 var packageJson = {
 	version: version};
 

package/{es/utilities/carousel/swipeEvents.d.ts → es-custom/utilities/snapscroll/index.d.ts}

@@ -4,4 +4,4 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-export declare const registerSwipeEvents: (carousel: HTMLElement, next: () => void, prev: () => void, destroy: boolean) => void;
+export { snapScroll, scrollNext, scrollPrevious, blockClass, getNextSibling, getPreviousSibling, } from './snapscroll';

package/es-custom/utilities/snapscroll/index.js

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+
+export { blockClass, getNextSibling, getPreviousSibling, scrollNext, scrollPrevious, snapScroll } from './snapscroll.js';
+//# sourceMappingURL=index.js.map

package/es-custom/utilities/snapscroll/snapscroll.d.ts

@@ -0,0 +1,29 @@
+/**
+ * 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.
+ */
+/**
+ * Initiates the snapScroll functionality
+ * @param body selector for element that contains the items
+ * @param child selector for the item elements
+ * @returns void
+ */
+export declare const blockClass = "c4p--snappy";
+export declare function snapScroll(body: string, child: string): void;
+/**
+ * Retreives the currently focused element
+ * @returns currently focused element
+ */
+export declare function getFocusedItem(): Element | null;
+/**
+ * Scrolls to the next sibling element of the currently focused element
+ */
+export declare function scrollNext(): void;
+/**
+ * Scrolls to the previous sibling element of the currently focused element
+ */
+export declare function scrollPrevious(): void;
+export declare function getNextSibling(): Element | null | undefined;
+export declare function getPreviousSibling(): Element | null | undefined;

package/es-custom/utilities/snapscroll/snapscroll.js

@@ -0,0 +1,134 @@
+/**
+ * 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 { prefix } from '../../globals/settings.js';
+
+/**
+ * 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.
+ */
+/**
+ * Initiates the snapScroll functionality
+ * @param body selector for element that contains the items
+ * @param child selector for the item elements
+ * @returns void
+ */
+const blockClass = `${prefix}--snappy`;
+const elmClass = `${blockClass}__elm`;
+const selectionClass = `${blockClass}__selection`;
+function snapScroll(body, child) {
+    const bodyEl = document.querySelector(body);
+    if (!bodyEl) {
+        return;
+    }
+    const styleElement = document.createElement('style');
+    styleElement.textContent = `
+  .${blockClass} {
+    display: flex;
+    flex: none;
+    overflow: scroll;
+    scroll-snap-type: x mandatory;
+    width: 100%;
+  }
+
+  .${blockClass}::-webkit-scrollbar {
+    display: none;
+  }
+
+  .${blockClass}__elm {
+    scroll-snap-align: start;
+    flex: none;
+    width: 100%;
+  }
+`;
+    document.head.appendChild(styleElement);
+    bodyEl.classList.add(blockClass);
+    const scrollsnapSupported = 'onscrollsnapchange' in bodyEl;
+    const children = bodyEl.querySelectorAll(child);
+    if (children.length > 0) {
+        children.forEach((el) => {
+            el.classList.add(elmClass);
+        });
+    }
+    if (scrollsnapSupported) {
+        bodyEl.addEventListener('scrollsnapchange', (event) => {
+            const snapevent = event;
+            const currentlySnapped = document.querySelector(`.${selectionClass}`);
+            if (currentlySnapped) {
+                currentlySnapped.classList.remove(selectionClass);
+            }
+            snapevent.snapTargetInline.classList.add(selectionClass);
+        });
+    }
+    else {
+        const handler = (entries) => {
+            entries.forEach((entry) => {
+                entry.target.classList.toggle(selectionClass, entry.isIntersecting);
+            });
+        };
+        let observer;
+        const createObserver = () => {
+            if (observer) {
+                observer.disconnect();
+            }
+            observer = new IntersectionObserver(handler, {
+                root: bodyEl,
+                threshold: 1,
+            });
+            children.forEach((child) => {
+                observer.observe(child);
+            });
+        };
+        createObserver();
+    }
+}
+/**
+ * Retreives the currently focused element
+ * @returns currently focused element
+ */
+function getFocusedItem() {
+    return document.querySelector(`.${selectionClass}`);
+}
+/**
+ * Scrolls to the next sibling element of the currently focused element
+ */
+function scrollNext() {
+    const sibling = getNextSibling();
+    sibling === null || sibling === void 0 ? void 0 : sibling.scrollIntoView({
+        behavior: 'smooth',
+        inline: 'start',
+    });
+}
+/**
+ * Scrolls to the previous sibling element of the currently focused element
+ */
+function scrollPrevious() {
+    const sibling = getPreviousSibling();
+    sibling === null || sibling === void 0 ? void 0 : sibling.scrollIntoView({
+        behavior: 'smooth',
+        inline: 'start',
+    });
+}
+function getNextSibling() {
+    const item = getFocusedItem();
+    if (!item) {
+        return;
+    }
+    return item.nextElementSibling;
+}
+function getPreviousSibling() {
+    const item = getFocusedItem();
+    if (!item) {
+        return;
+    }
+    return item.previousElementSibling;
+}
+
+export { blockClass, getFocusedItem, getNextSibling, getPreviousSibling, scrollNext, scrollPrevious, snapScroll };
+//# sourceMappingURL=snapscroll.js.map

package/es-custom/utilities/snapscroll/snapscroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snapscroll.js","sources":["../../../src/utilities/snapscroll/snapscroll.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/es-custom/utilities/snapscroll/snapscroll.test.d.ts

@@ -0,0 +1 @@
+export {};

package/es-custom/utilities/snapscroll/snapscroll.test.js

@@ -0,0 +1,41 @@
+/**
+ * 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 { describe, it, expect } from 'vitest';
+import { fixture, html } from '@open-wc/testing';
+import { snapScroll } from './snapscroll.js';
+
+/**
+ * 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 template = () => {
+    return html `
+    <div class="app">
+      <div class="body">
+        <div class="child">child element</div>
+        <div class="child">child element</div>
+        <div class="child">child element</div>
+      </div>
+    </div>
+  `;
+};
+describe('snapscroll', () => {
+    it('snaps', async () => {
+        const el = await fixture(template());
+        snapScroll('.body', '.child');
+        const body = el.querySelector('.body');
+        expect(body === null || body === void 0 ? void 0 : body.classList.contains('c4p--snappy')).toBe(true);
+        const child = el.querySelector('.child');
+        expect(child === null || child === void 0 ? void 0 : child.classList.contains('c4p--snappy__elm')).toBe(true);
+        const children = el.querySelectorAll('.c4p--snappy__elm');
+        expect(children.length).toBe(3);
+    });
+});
+//# sourceMappingURL=snapscroll.test.js.map

package/es-custom/utilities/snapscroll/snapscroll.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snapscroll.test.js","sources":["../../../src/utilities/snapscroll/snapscroll.test.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;AAAA;;;;;AAKG;AAKH,MAAM,QAAQ,GAAG,MAAK;AACpB,IAAA,OAAO,IAAI,CAAA;;;;;;;;GAQV;AACH,CAAC;AAED,QAAQ,CAAC,YAAY,EAAE,MAAK;AAC1B,IAAA,EAAE,CAAC,OAAO,EAAE,YAAW;QACrB,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,QAAQ,EAAE,CAAC;AACpC,QAAA,UAAU,CAAC,OAAO,EAAE,QAAQ,CAAC;QAC7B,MAAM,IAAI,GAAG,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC;AACtC,QAAA,MAAM,CAAC,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAJ,MAAA,GAAA,MAAA,GAAA,IAAI,CAAE,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;QAC1D,MAAM,KAAK,GAAG,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC;AACxC,QAAA,MAAM,CAAC,KAAK,KAAA,IAAA,IAAL,KAAK,KAAL,MAAA,GAAA,MAAA,GAAA,KAAK,CAAE,SAAS,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;QAChE,MAAM,QAAQ,GAAG,EAAE,CAAC,gBAAgB,CAAC,mBAAmB,CAAC;QACzD,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AACjC,KAAC,CAAC;AACJ,CAAC,CAAC"}

package/lib/components/big-number/big-number-skeleton.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @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 '@carbon/web-components/es/components/skeleton-text/index.js';
+import '@carbon/web-components/es/components/skeleton-placeholder/index.js';
+import { BigNumberSizeValues } from './constants';
+/**
+ * @element c4p-big-number-skeleton
+ * Note: This component is only used within c4p-big-number. It displays a skeleton version while content is loading (handled by the c4p-big-number prop `loading').
+ */
+declare class CDSBigNumberSkeleton extends LitElement {
+    size?: BigNumberSizeValues;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: any;
+}
+export default CDSBigNumberSkeleton;

package/lib/components/big-number/big-number.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @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 './big-number-skeleton';
+import { BigNumberSizeValues } from './constants';
+/**
+ * @element c4p-big-number
+ * @slot label - Header area that displays the label above the value. This slot can be customized to include an info icon and a tooltip for additional context.
+ * @slot trending-icon - Displays an icon indicating trend direction. Can be customized to show a downward arrow when the trend is not upward.
+ * @slot icon-button - Displays an icon button next to `value`.
+ */
+declare class CDSBigNumber extends LitElement {
+    fractionDigits: number;
+    label: string | undefined;
+    loading: boolean;
+    locale: string;
+    percentage: boolean;
+    size: BigNumberSizeValues;
+    total?: number;
+    trending: boolean;
+    truncate: boolean;
+    value?: number;
+    private _getSupportedLocale;
+    private _formatValue;
+    private _getTruncatedValue;
+    private _shouldDisplayDenominator;
+    private _getTrendingIcon;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: any;
+}
+export default CDSBigNumber;

package/lib/components/big-number/big-number.test.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 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 './index';

package/lib/components/big-number/constants.d.ts

@@ -0,0 +1,19 @@
+/**
+ * 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.
+ */
+export declare enum BigNumberSize {
+    Default = "default",
+    Large = "lg",
+    XLarge = "xl"
+}
+export type BigNumberSizeValues = `${BigNumberSize}`;
+export declare enum Characters {
+    Dash = "\u2013",
+    Slash = "/",
+    Percentage = "%"
+}
+export declare const DefaultLocale = "en-US";
+export declare const UNKNOWN = "Unknown";

package/lib/components/big-number/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @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 './big-number';
+import './big-number-skeleton';