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

package/lib/patterns/step-flow/_story-assets/step-tearsheet.d.ts

@@ -0,0 +1,41 @@
+/**
+ * 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.
+ */
+import { LitElement, PropertyValues } from 'lit';
+import '@carbon/web-components/es/components/progress-indicator/index.js';
+import '@carbon/web-components/es/components/stack/index.js';
+import '@carbon/web-components/es/components/code-snippet/index.js';
+import '../step-group';
+import '../../../components/tearsheet/index.js';
+declare const StepTearsheet_base: typeof LitElement;
+export declare class StepTearsheet extends StepTearsheet_base {
+    narrow: boolean;
+    private _open;
+    private _email;
+    private _city;
+    private _state;
+    private _trapFocusAPI;
+    private _onButtonClick;
+    private _handleCancelButton;
+    private _handleBackButton;
+    private _handleNextButton;
+    private _handleEmailInput;
+    private _handleCityInput;
+    private _handleStateInput;
+    private _stepInfo;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    updated(changedProps: Map<string | number | symbol, unknown>): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: any;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'step-tearsheet': StepTearsheet;
+    }
+}
+export {};

package/lib/patterns/step-flow/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 './step-flow-signal';
+import './step-group';

package/lib/patterns/step-flow/step-flow-signal.d.ts

@@ -0,0 +1,24 @@
+/**
+ * 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.
+ */
+interface formStateType {
+    [key: string]: any;
+}
+export declare class StepInstance {
+    #private;
+    get data(): {
+        totalSteps: number;
+        formState: {};
+        currentStep: number;
+    };
+    set handleGoToStep(value: number);
+    set updateTotalStepCount(value: number);
+    set updateFormState(newFormValue: formStateType);
+    handleNext(): void;
+    handlePrevious(): void;
+    reset(): void;
+}
+export {};

package/lib/patterns/step-flow/step-flow-signal.test.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 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.
+ */
+export {};

package/lib/patterns/step-flow/step-group.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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.
+ */
+import { LitElement } from 'lit';
+export declare class StepGroup extends LitElement {
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'step-group': StepGroup;
+    }
+}

package/lib/utilities/carousel/carousel.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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 { InitCarousel, Config } from './types';
+/**
+ * Initializes a carousel with the given configuration.
+ * @param carouselContainer - The HTMLElement representing the carousel container.
+ * @param config - Optional configuration object.
+ * @returns An object containing methods to control the carousel.
+ */
+export declare const initCarousel: (carouselContainer: HTMLElement, config?: Config) => InitCarousel;

package/lib/utilities/carousel/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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 * from './carousel';
+export * from './types';

package/lib/utilities/carousel/swipeEvents.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.
+ */
+export declare const registerSwipeEvents: (carousel: HTMLElement, next: () => void, prev: () => void, destroy: boolean) => void;

package/lib/utilities/carousel/types.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.
+ */
+interface CarouselStackHistory {
+    id: number;
+    elem: HTMLLIElement;
+}
+type CarouselResponse = {
+    currentIndex: number;
+    lastIndex: number;
+    totalViews: number;
+    historyStack: CarouselStackHistory[];
+};
+type ActiveItem = {
+    index: number;
+    item: HTMLElement | null;
+};
+export type Config = {
+    onViewChangeStart?: (args: CarouselResponse) => void;
+    onViewChangeEnd?: (args: CarouselResponse) => void;
+    excludeSwipeSupport?: boolean;
+};
+interface InitCarousel {
+    next: () => void;
+    prev: () => void;
+    reset: () => void;
+    goToIndex: (index: number) => void;
+    getActiveItem: () => ActiveItem;
+    destroyEvents: (() => void) | null;
+    allViews: Record<number, HTMLElement | null>;
+}
+export type { CarouselStackHistory, CarouselResponse, InitCarousel };

package/lib/utilities/makeDraggable/makeDraggable.d.ts

@@ -0,0 +1,38 @@
+/**
+ * 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.
+ */
+interface DraggableProps {
+    /**
+     * HTML element to move.
+     */
+    el: HTMLElement;
+    /**
+     * HTML element to initiate the drag (e.g., header).
+     */
+    dragHandle?: HTMLElement;
+    /**
+     * HTML element to focus on drag for keyboard interaction (e.g., Drag Icon).
+     */
+    focusableDragHandle?: HTMLElement;
+    /**
+     * Pixel value that defines the distance to move when dragging with arrow
+     * keys.
+     */
+    dragStep?: number;
+    /**
+     * Pixel value that defines the distance to move when dragging with
+     * shift+arrow keys.
+     */
+    shiftDragStep?: number;
+}
+/**
+ * Makes a given element draggable using a handle element.
+ *@param draggable - object which accepts el and optional attributes handle,focusableInHandle,dragStep and shiftDragStep
+ */
+export declare const makeDraggable: ({ el, dragHandle, focusableDragHandle, dragStep, shiftDragStep, }: DraggableProps) => {
+    cleanup: () => void;
+};
+export {};

package/lib/utilities/manageFocusTrap/manageFocusTrap.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.
+ */
+export declare const registerFocusableContainers: (container: any) => void;
+export declare const clearFocusableContainers: () => void;
+export declare const trapFocus: (containers?: HTMLElement[]) => {
+    cleanup: () => void;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products-web-components",
   "description": "Carbon for IBM Products Web Components",
-  "version": "0.30.0-rc.0",
+  "version": "0.30.0",
   "license": "Apache-2.0",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -56,7 +56,7 @@
   },
   "dependencies": {
     "@carbon-labs/wc-empty-state": "^0.11.0",
-    "@carbon/ibm-products-styles": "^2.77.0-rc.0",
+    "@carbon/ibm-products-styles": "^2.77.0",
     "@carbon/styles": "^1.96.0",
     "@carbon/web-components": "2.44.0",
     "@figma/code-connect": "^1.3.6",
@@ -109,5 +109,5 @@
     "vitest": "^3.2.0",
     "web-component-analyzer": "2.0.0"
   },
-  "gitHead": "ce77cbed929b10db0fba0700c13be743e067a4be"
+  "gitHead": "c87b35ce9849eda09efec7c648f4e98849b84028"
 }

package/scss/components/about-modal/about-modal.scss

@@ -0,0 +1,117 @@
+/*
+* 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;
+
+/* Other Carbon settings. */
+@use '@carbon/styles' as styles;
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/themes/scss/themes';
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/utilities';
+@use '@carbon/styles/scss/utilities/ai-gradient' as *;
+@use '@carbon/styles/scss/components/modal' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
+@use 'sass:map';
+
+$prefix: 'c4p';
+$carbon-prefix: 'cds';
+
+@use '@carbon/ibm-products-styles/scss/components/AboutModal/index' as *;
+
+:host(#{$prefix}-about-modal) {
+  .#{$prefix}--about-modal__logo {
+    margin: $spacing-05 $spacing-05 $spacing-07 $spacing-05;
+  }
+  #{$carbon-prefix}-modal-header {
+    padding: 0 20% 0 $spacing-05;
+    grid-row: auto;
+    margin-block-end: 0;
+  }
+  #{$carbon-prefix}-modal-body {
+    @include type.type-style('body-compact-02');
+
+    overflow: hidden auto;
+    grid-row: auto;
+    min-block-size: $spacing-10;
+    padding-block-start: 0;
+    padding-inline: $spacing-05 20%;
+    &:not(.#{$prefix}--about-modal-scroll-content) {
+      margin-block-end: $spacing-06;
+      padding-block-end: 0;
+    }
+    &.#{$prefix}--about-modal-scroll-content {
+      @extend .#{$carbon-prefix}--modal-scroll-content;
+    }
+  }
+
+  #{$carbon-prefix}-modal-heading {
+    @include type.type-style('heading-04');
+
+    color: $text-primary;
+    margin-block-end: $spacing-02;
+  }
+
+  .#{$prefix}--about-modal__version {
+    color: $text-secondary;
+  }
+
+  .#{$prefix}--about-modal__content,
+  .#{$prefix}--about-modal__copyright-text {
+    @include type.type-style('label-01');
+
+    color: $text-secondary;
+    margin-block: $spacing-06 0;
+  }
+
+  .#{$prefix}--about-modal__copyright-text {
+    margin-block-start: $spacing-05;
+  }
+
+  .#{$prefix}--about-modal__content:first-child,
+  .#{$prefix}--about-modal__copyright-text:first-child {
+    margin-block-start: $spacing-07;
+  }
+  #{$carbon-prefix}-link {
+    display: inline-flex;
+  }
+  .#{$prefix}--about-modal__links-container {
+    @include type.type-style('body-compact-01');
+
+    margin-block-start: $spacing-06;
+    #{$carbon-prefix}-link + #{$carbon-prefix}-link {
+      border-inline-start: 1px solid $border-strong-01;
+      margin-inline-start: $spacing-03;
+      padding-inline-start: $spacing-03;
+    }
+  }
+  #{$carbon-prefix}-modal-footer {
+    @include styles.theme(styles.$g100);
+
+    display: block;
+    padding: $spacing-05;
+    background-color: $layer-02;
+    block-size: auto;
+    .#{$prefix}--about-modal__footer-label {
+      @include type.type-style('label-01');
+
+      color: $text-secondary;
+      margin-block-end: $spacing-02;
+    }
+    .#{$prefix}--about-modal__footer--tech-logo {
+      block-size: $spacing-06;
+      inline-size: $spacing-06;
+      margin-inline-end: $spacing-03;
+      object-fit: contain;
+    }
+  }
+}

package/scss/components/checklist/checklist.scss

@@ -0,0 +1,70 @@
+//
+// 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.
+//
+
+$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);
+  }
+
+  #{$carbon-prefix}-icon-button::part(button):focus {
+    box-shadow: none;
+    outline: 2px solid theme.$focus;
+  }
+}
+
+: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/scss/components/coachmark/coachmark-beacon/coachmark-beacon.scss

@@ -0,0 +1,91 @@
+//
+// 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/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/ibm-products-styles/scss/config';
+@use '@carbon/ibm-products-styles/scss/components/Coachmark/_coachmark-beacon';
+
+$prefix: config.$pkg-prefix;
+$carbon-prefix: config.$carbon-prefix;
+
+$block-class: #{$prefix}--coachmark-beacon;
+
+:host(#{$prefix}-coachmark-beacon) {
+  position: relative;
+}
+
+:host(.#{$prefix}--coachmark-beacon-default) {
+  .#{$block-class}__target {
+    &::before {
+      display: none;
+    }
+    // the blue dot
+    &::after {
+      position: absolute;
+      border-radius: 50%;
+      /* stylelint-disable-next-line carbon/theme-use */
+      background-color: $blue-50;
+      block-size: $spacing-04;
+      content: '';
+      inline-size: $spacing-04;
+      inset-block-start: calc($spacing-01 + $spacing-03);
+      inset-inline-start: calc($spacing-01 + $spacing-03);
+    }
+
+    &:focus {
+      outline: transparent;
+
+      &::before {
+        position: absolute;
+        display: block;
+        border-radius: 100%;
+        block-size: 18px;
+        content: '';
+        inline-size: 18px;
+        inset-block-start: 7px;
+        inset-inline-start: 7px;
+        /* stylelint-disable-next-line carbon/theme-use */
+        outline: $spacing-01 $focus solid;
+      }
+    }
+  }
+
+  .#{$block-class}__target {
+    display: flex;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background-color: transparent;
+    block-size: $spacing-07;
+    box-shadow: none;
+    cursor: pointer;
+    inline-size: $spacing-07;
+
+    &[aria-expanded='true'] {
+      circle {
+        animation: none;
+      }
+    }
+  }
+
+  .#{$block-class}__target::part(button) {
+    background-color: transparent;
+    box-shadow: none;
+    max-block-size: 0;
+    min-block-size: 0;
+    padding-inline: 0;
+
+    &:focus {
+      border-color: transparent;
+      box-shadow: none;
+    }
+  }
+}

package/scss/components/coachmark/coachmark-body.scss

@@ -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.
+//
+
+$css--plex: true !default;
+
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/ibm-products-styles/scss/config';
+
+$prefix: config.$pkg-prefix;
+$carbon-prefix: config.$carbon-prefix;
+
+:host(#{$prefix}-coachmark-body) {
+  display: block;
+  padding: 0 $spacing-05 $spacing-05;
+}

package/scss/components/coachmark/coachmark-header.scss

@@ -0,0 +1,32 @@
+//
+// 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/theme' as *;
+@use '@carbon/ibm-products-styles/scss/config';
+
+$prefix: config.$pkg-prefix;
+
+:host(#{$prefix}-coachmark-header) {
+  display: flex;
+  justify-content: flex-end;
+
+  .#{$prefix}--coachmark-header-drag-handle {
+    margin-inline-end: auto;
+  }
+
+  .#{$prefix}--coachmark-header-drag-icon {
+    /* stylelint-disable-next-line color-named */
+    fill: $background;
+  }
+
+  .#{$prefix}--coachmark-header-close-icon {
+    /* stylelint-disable-next-line color-named */
+    fill: $background;
+  }
+}

package/scss/components/coachmark/coachmark.scss

@@ -0,0 +1,30 @@
+//
+// 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/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/ibm-products-styles/scss/config';
+@use '@carbon/ibm-products-styles/scss/components/Coachmark/_coachmark-beacon';
+
+$prefix: config.$pkg-prefix;
+$carbon-prefix: config.$carbon-prefix;
+
+$block-class: #{$prefix}--coachmark;
+
+.#{$block-class}--popover {
+  position: fixed;
+
+  /* stylelint-disable-next-line selector-type-no-unknown */
+  #{$carbon-prefix}-popover-content.is-dragging::part(content) {
+    border-radius: 0;
+    box-shadow:
+      0 0 0 $spacing-01 $icon-inverse,
+      0 0 0 $spacing-02 $background-inverse;
+  }
+}

package/scss/components/full-page-error/full-page-error.scss

@@ -0,0 +1,29 @@
+/*
+* 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.
+*/
+
+$css--plex: true !default;
+@use 'sass:map';
+
+@use '@carbon/styles/scss/reset';
+
+@use '@carbon/grid';
+@use '@carbon/ibm-products-styles/scss/components/FullPageError' as *;
+
+@use '@carbon/themes' as *;
+
+@include grid.css-grid();
+
+// Local vars
+$prefix: 'c4p';
+$carbon-prefix: 'cds';
+$block-class: #{$prefix}--side-panel;
+
+:host(#{$prefix}-full-page-error) {
+  .#{$block-class} {
+    @extend .#{$block-class};
+  }
+}

package/scss/components/guide-banner/guide-banner.scss

@@ -0,0 +1,30 @@
+/*
+* 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.
+*/
+
+$css--plex: true !default;
+
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/type';
+@use '@carbon/ibm-products-styles/scss/config';
+@use '@carbon/ibm-products-styles/scss/components/Guidebanner' as *;
+
+$prefix: config.$pkg-prefix;
+
+:host(#{$prefix}-guide-banner) {
+  details {
+    display: flex;
+    flex-direction: column-reverse;
+  }
+
+  ::marker,
+  ::-webkit-details-marker {
+    display: none;
+    content: '';
+  }
+}