@carbon/ibm-products-web-components 0.24.1 → 0.25.0-rc.0

package/lib/components/checklist/checklist-icon.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @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/icon/index.js';
+import { Kinds } from './checklist.types';
+/**
+ * @element c4p-checklist-icon
+ * Represents checklist item status with different icons (unchecked, checked, indeterminate, error).
+ */
+declare class CDSChecklistIcon extends LitElement {
+    /**
+     * The icon to be displayed.
+     * Values can be 'unchecked', 'indeterminate', 'checked', 'error', 'disabled'
+  
+     */
+    kind: Kinds;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: any;
+}
+export default CDSChecklistIcon;

package/lib/components/checklist/checklist-item.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @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';
+/**
+ * item in c4p-checklist-group
+ * @element c4p-checklist-item
+ * @slot icon - checklist item icon, usually a status indicator icon
+ * @slot content - checklist item title/description
+ * @fires c4p-checklist-item-clicked - The custom event which is fired when a user clicks on checklist item with clickable attribute.
+ */
+declare class CDSChecklistItem extends LitElement {
+    /**
+     * label of the c4p-checklist-item
+     */
+    label: any;
+    /**
+     * status of the c4p-checklist-item
+     * Values can be 'not started', 'in progress', 'completed', 'error', 'disabled'
+     */
+    status: any;
+    /** When true, makes the checklist item label clickable */
+    clickable: boolean;
+    private _handleClick;
+    private _mapStatusToKind;
+    private _updateAttributes;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    /**
+     * The custom event which is fired when the checklist item is clicked.
+     */
+    static get checklistItemClicked(): string;
+    static styles: any;
+}
+export default CDSChecklistItem;

package/lib/components/checklist/checklist.d.ts

@@ -0,0 +1,71 @@
+/**
+ * @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/icon-button/index.js';
+import './checklist-chart';
+import './checklist-icon';
+/**
+ * @element c4p-checklist
+ * @slot checklist-header - Header area which includes the title and the progress indicator.
+ * @slot default - Contains one or more `c4p-checklist-group` components to organize tasks into logical groups.
+ * @slot checklist-footer - Optional footer area for actions like buttons, links, or additional notes.
+ * @fires c4p-checklist-view-all - The custom event which is fired when a user clicks on View All button in checklist footer.
+ * @fires c4p-checklist-toggle - The custom event which is fired when user clicks on toggle button in checklist header.
+ */
+declare class CDSChecklist extends LitElement {
+    /**
+     * Specifies whether the component is opened or closed.
+     */
+    open: boolean;
+    /**
+     * The title of the component.
+     */
+    title: any;
+    /**
+     * The label for progress indicator chart
+     */
+    chartLabel: any;
+    /**
+     * A number between 0 and 1 which indicates the progress of checklist
+     */
+    chartValue: any;
+    /**
+     * Whether or not to show the open/close toggle.
+     */
+    disableToggle: boolean;
+    /**
+     * The label for the toggle's tooltip.
+     */
+    toggleLabel: any;
+    /**
+     * The alignment of the toggle's tooltip.
+     */
+    toggleLabelAlign: any;
+    /**
+     * Aria-label for the Checklist's toggle component.
+     */
+    toggleAriaLabel: any;
+    /**
+     * If defined, will show and enable the "View all (#)" button in the checklist footer.
+     */
+    viewAllLabel: any;
+    private _viewAll;
+    private _onToggle;
+    render(): import("lit-html").TemplateResult<1>;
+    /**
+     * The custom event which is fired when the  view all button in checklist footer is clicked or when the Enter key is pressed on it.
+     */
+    static get checklistViewAll(): string;
+    /**
+     * The custom event which is fired when the checklist toggle button is clicked or when the Enter key is pressed on it.
+     */
+    static get checklistToggle(): string;
+    static styles: any;
+}
+export default CDSChecklist;

package/lib/components/checklist/checklist.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.ts';

package/lib/components/checklist/checklist.types.d.ts

@@ -0,0 +1,22 @@
+/**
+ * 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 Kinds {
+    unchecked = "unchecked",
+    indeterminate = "indeterminate",
+    checked = "checked",
+    disabled = "disabled",
+    error = "error"
+}
+export type Kind = Kinds.unchecked | Kinds.indeterminate | Kinds.checked | Kinds.disabled | Kinds.error;
+export declare enum Statuses {
+    NotStarted = "not started",
+    InProgress = "in progress",
+    Completed = "completed",
+    Error = "error",
+    Disabled = "disabled"
+}
+export type Status = Statuses.NotStarted | Statuses.InProgress | Statuses.Completed | Statuses.Error | Statuses.Disabled;

package/lib/components/checklist/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @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 './checklist-group';
+import './checklist-item';
+import './checklist-chart';
+import './checklist-icon';
+import './checklist';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products-web-components",
   "description": "Carbon for IBM Products Web Components",
-  "version": "0.24.1",
+  "version": "0.25.0-rc.0",
   "license": "Apache-2.0",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -56,7 +56,7 @@
   },
   "dependencies": {
     "@carbon-labs/wc-empty-state": "^0.9.0",
-    "@carbon/ibm-products-styles": "^2.71.0",
+    "@carbon/ibm-products-styles": "^2.72.0-rc.0",
     "@carbon/styles": "1.89.0",
     "@carbon/web-components": "2.37.0",
     "@ibm/telemetry-js": "^1.10.2",
@@ -105,5 +105,5 @@
     "vitest": "^3.2.0",
     "web-component-analyzer": "2.0.0"
   },
-  "gitHead": "8ee10e9dbaab3b601899cdd9c9c4a91d19399dad"
+  "gitHead": "bf120ae9c3bf30ed5898cd7684f1f04ac3d137d9"
 }

package/scss/components/checklist/checklist.scss

@@ -0,0 +1,65 @@
+//
+// 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.
+//
+
+$css--plex: true !default;
+
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/colors';
+@use '@carbon/styles/scss/components/tag';
+@use '@carbon/ibm-products-styles/scss/config';
+@use '@carbon/ibm-products-styles/scss/components/Checklist/index' as checklist;
+
+$prefix: config.$pkg-prefix;
+$carbon-prefix: config.$carbon-prefix;
+
+$baseClass: #{$prefix}--checklist;
+
+:host(#{$prefix}-checklist) {
+  .#{$baseClass}__toggle {
+    margin-block-start: calc(-1 * spacing.$spacing-03);
+    margin-inline: auto calc(-1 * spacing.$spacing-03);
+  }
+}
+
+:host(#{$prefix}-checklist-item) {
+  display: flex;
+  margin-block-end: spacing.$spacing-03;
+}
+
+:host(#{$prefix}-checklist-item:last-of-type) {
+  margin-block-end: 0;
+}
+
+:host(#{$prefix}-checklist-group) {
+  display: block;
+  padding: spacing.$spacing-05;
+  border-block-start: 1px solid theme.$border-subtle-01;
+}
+
+:host(#{$prefix}-checklist-group:first-of-type) {
+  border-block-start: none;
+}
+
+.#{$baseClass}__label--clickable {
+  color: theme.$link-primary;
+  cursor: pointer;
+}
+
+.#{$baseClass}__label--clickable:hover {
+  color: theme.$link-primary-hover;
+  text-decoration: underline;
+}
+
+.#{$baseClass}__chart {
+  border-radius: 50%;
+  background-image: conic-gradient(
+    colors.$purple-50 var(--#{$prefix}-num-degrees),
+    tag.$tag-background-gray var(--#{$prefix}-num-degrees) 360deg
+  );
+}

package/telemetry.yml

@@ -28,6 +28,7 @@ collect:
         - title
         - type
         - value
+        - view-all-label
         - within-grid
         # c4p-about-modal
         - additionalInfo
@@ -38,6 +39,19 @@ collect:
         - onc4p-about-modal-beingclosed
         - onc4p-about-modal-closed
         - version
+        # c4p-checklist
+        - chart-label
+        - chart-value
+        - disable-toggle
+        - onc4p-checklist-toggle
+        - onc4p-checklist-view-all
+        - toggle-aria-label
+        - toggle-label
+        - toggle-label-align
+        # c4p-checklist-item
+        - clickable
+        - onc4p-checklist-item-clicked
+        - status
         # c4p-interstitial-screen
         - fullscreen
         - onc4p-interstitial-beingclosed
@@ -65,7 +79,6 @@ collect:
         # c4p-notification-footer
         - onc4p-notification-settings
         - onc4p-notification-view-all
-        - view-all-label
         # c4p-notification-panel
         - date-time-locale
         - dismiss-all-label
@@ -134,12 +147,17 @@ collect:
         - tags-data
       allowedAttributeStringValues:
         # General - boolean attributes
-        - 'true'
-        - 'false'
+        - "true"
+        - "false"
         # General - kind
-        - '403'
-        - '404'
+        - "403"
+        - "404"
+        - checked
         - custom
+        - disabled
+        - error
+        - indeterminate
+        - unchecked
         # General - size
         - 2xl
         - lg
@@ -171,3 +189,6 @@ collect:
   js:
     functions: {}
     tokens: null
+  js:
+    functions: {}
+    tokens: null