@carbon/ibm-products-web-components 0.17.0 → 0.18.0

package/es-custom/index.js

@@ -11,4 +11,5 @@ export { default as CDSFullPageError } from './components/full-page-error/full-p
 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 CDSOptionsTile } from './components/options-tile/options-tile.js';
+export { default as CDSTruncatedText } from './components/truncated-text/truncated-text.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/package.json.js

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

package/lib/components/options-tile/options-tile.d.ts

@@ -6,7 +6,8 @@
  * 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, nothing } from 'lit';
+import { LitElement } from 'lit';
+import '@carbon/web-components/es/components/button/index.js';
 export declare const blockClass = "c4p--options-tile";
 declare const CDSOptionsTile_base: {
     new (...args: any[]): {
@@ -373,20 +374,19 @@ declare class CDSOptionsTile extends CDSOptionsTile_base {
      * Determines the size of the header
      */
     size?: 'lg' | 'xl';
-    /**
-     * Text for the title
-     */
-    title: string;
     /**
      * ID for the title
      */
     titleId: string;
+    /**
+     * Text for the title
+     */
+    titleText: string;
     static get eventOpen(): string;
     static get eventClose(): string;
     private _toggle;
     private _handleOpen;
     private _handleClose;
-    getBody(): import("lit-html").TemplateResult<1> | typeof nothing;
     render(): import("lit-html").TemplateResult<1>;
     static styles: any;
 }

package/lib/components/tearsheet/tearsheet.d.ts

@@ -393,6 +393,8 @@ declare class CDSTearsheet extends CDSTearsheet_base {
     _hasHeaderActions: boolean;
     _hasLabel: boolean;
     _hasSlug: boolean;
+    _hasDecorator: boolean;
+    _hasAILabel: boolean;
     _hasTitle: boolean;
     _hasDescription: boolean;
     _hasInfluencerLeft: boolean;
@@ -428,6 +430,7 @@ declare class CDSTearsheet extends CDSTearsheet_base {
      */
     private _handleUserInitiatedClose;
     private _handleSlugChange;
+    private _handleDecoratorChange;
     /**
      * Optional aria label for the tearsheet
      */

package/lib/components/tearsheet/utils.d.ts

@@ -11,6 +11,8 @@ import '@carbon/web-components/es/components/text-input/index.js';
 import '@carbon/web-components/es/components/textarea/index.js';
 import '@carbon/web-components/es/components/tabs/index.js';
 import '@carbon/web-components/es/components/slug/index.js';
+import '@carbon/web-components/es/components/ai-label/index.js';
+import '@carbon/web-components/es/components/toggle-tip/index.js';
 import '@carbon/web-components/es/components/dropdown/index.js';
 import '@carbon/web-components/es/components/progress-indicator/index.js';
 import '@carbon/web-components/es/components/progress-bar/index.js';
@@ -27,3 +29,4 @@ export declare const getActionToolbarItems: (index: any) => import("lit-html").T
 export declare const getActionItems: (index: any) => import("lit-html").TemplateResult<1>[] | null;
 export declare const getNavigation: (index: any) => import("lit-html").TemplateResult<1> | null;
 export declare const getSlug: (index: any) => import("lit-html").TemplateResult<1> | null;
+export declare const getDecorator: (decorator: any) => import("lit-html").TemplateResult<1> | undefined;

package/lib/components/truncated-text/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ *
+ * 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 './truncated-text';

package/lib/components/truncated-text/truncated-text.d.ts

@@ -0,0 +1,73 @@
+/**
+ * @license
+ *
+ * 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';
+import '@carbon/web-components/es/components/tooltip/index.js';
+import '@carbon/web-components/es/components/button/button.js';
+import '@carbon/web-components/es/components/link/index.js';
+export declare const blockClass = "c4p--truncated-text";
+declare const elementName = "c4p-truncated-text";
+/**
+ * TruncatedText.
+ *
+ * @element c4p-truncated-text
+ */
+export declare class CDSTruncatedText extends LitElement {
+    /**
+     * The maximum number of lines to display before truncation.
+     */
+    lines: number;
+    /**
+     * The string value to be truncated.
+     */
+    value: string;
+    /**
+     * Specify how the tooltip should align with the content.
+     */
+    align: string;
+    /**
+     * Specify whether a auto align functionality should be applied
+     */
+    autoalign: boolean;
+    /**
+     * The label on expand button.
+     */
+    expandLabel: string;
+    /**
+     * The label on the collapse button.
+     */
+    collapseLabel: string;
+    /**
+     * The method to display the full text when truncated. Options are "tooltip" or "expand". if not passed, the text would just be truncated with ellipsis.
+     */
+    with: 'tooltip' | 'expand';
+    private _isOverflowing;
+    private _isExpanded;
+    private _maxHeight;
+    private _textElement;
+    private _lineHeight;
+    private _isLayered;
+    private _resizeObserver?;
+    static styles: any;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private _updateMaxHeight;
+    private _setupResizeObserver;
+    private _updateOverflowStatus;
+    private _toggleExpansion;
+    private _renderToggleButton;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: CDSTruncatedText;
+    }
+}
+export default CDSTruncatedText;

package/lib/components/truncated-text/truncated-text.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.
+ */
+import './index';

package/lib/index.d.ts

@@ -12,3 +12,4 @@ export { default as CDSFullPageError } from './components/full-page-error/full-p
 export { default as CDSAboutModal } from './components/about-modal/about-modal';
 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';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products-web-components",
   "description": "Carbon for IBM Products Web Components",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "license": "Apache-2.0",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -54,17 +54,17 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@carbon/ibm-products-styles": "^2.64.0",
-    "@carbon/styles": "1.79.0",
-    "@carbon/web-components": "2.27.1",
+    "@carbon/ibm-products-styles": "^2.65.0",
+    "@carbon/styles": "1.82.0",
+    "@carbon/web-components": "2.30.0",
     "@ibm/telemetry-js": "^1.9.1",
     "lit": "^3.1.0"
   },
   "devDependencies": {
     "@blockquote/rollup-plugin-externalize-source-dependencies": "^1.0.0",
-    "@carbon/icon-helpers": "^10.57.0",
-    "@carbon/icons": "^11.58.0",
-    "@carbon/motion": "^11.26.0",
+    "@carbon/icon-helpers": "^10.59.0",
+    "@carbon/icons": "^11.60.0",
+    "@carbon/motion": "^11.28.0",
     "@mordech/vite-lit-loader": "^0.37.0",
     "@open-wc/testing": "^4.0.0",
     "@rollup/plugin-alias": "^5.1.1",
@@ -87,7 +87,7 @@
     "c8": "^10.1.3",
     "cssnano": "^7.0.6",
     "eslint": "^9.14.0",
-    "eslint-config-carbon": "^3.20.0",
+    "eslint-config-carbon": "^3.22.0",
     "globby": "^14.0.2",
     "happy-dom": "^17.0.0",
     "playwright": "^1.51.1",
@@ -106,5 +106,5 @@
     "vitest": "^3.0.1",
     "web-component-analyzer": "2.0.0"
   },
-  "gitHead": "b17f047c13c438ecf4a53c66381ed9fdcbf0c7e7"
+  "gitHead": "4aec9b9d0c951b243025b3266cc9084e3a37578d"
 }

package/scss/components/api-key-modal/story-styles.scss

@@ -0,0 +1,10 @@
+/*
+* 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.
+*/
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+
+$story-prefix: 'import-modal-stories__';

package/scss/components/options-tile/options-tile.scss

@@ -20,15 +20,32 @@ $block-class: #{$prefix}--options-tile;
 :host(#{$prefix}-options-tile) {
   .#{$block-class} {
     background: $layer-01;
+    border-block-end: 1px solid $border-subtle-01;
+
+    ::marker,
+    ::-webkit-details-marker {
+      display: none;
+      content: '';
+    }
 
     &__header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       block-size: $spacing-09;
+      cursor: pointer;
       padding-inline: $spacing-05;
       padding-inline-end: $spacing-05;
 
+      &:hover {
+        background: $background-hover;
+      }
+
+      &:focus {
+        outline: 2px solid $focus;
+        outline-offset: -2px;
+      }
+
       &-left {
         display: flex;
         align-items: center;
@@ -42,14 +59,17 @@ $block-class: #{$prefix}--options-tile;
 
     &__title {
       @include type.type-style('heading-compact-01');
+
+      &-block {
+        margin-inline-end: $spacing-05;
+        margin-inline-start: $spacing-05;
+      }
     }
 
     &__summary {
       @include type.type-style('helper-text-01');
-    }
 
-    &__chevron {
-      margin-inline-end: $spacing-03;
+      color: $text-secondary;
     }
 
     &__body {
@@ -60,8 +80,14 @@ $block-class: #{$prefix}--options-tile;
     }
   }
 
-  .#{$block-class}--xl .#{$block-class}__header {
-    block-size: $spacing-10;
+  .#{$block-class}--xl {
+    .#{$block-class}__header {
+      block-size: $spacing-10;
+    }
+
+    .#{$block-class}__summary {
+      margin-block-start: $spacing-01;
+    }
   }
 
   .#{$block-class}--open .#{$block-class}__chevron {

package/scss/components/tearsheet/tearsheet.scss

@@ -102,8 +102,11 @@ $motion-duration: $duration-moderate-02;
   .#{$block-class}__influencer[wide] {
     @extend .#{$block-class}__influencer--wide;
   }
+  ::slotted([slot='decorator']),
   ::slotted(#{$carbon-prefix}-slug) {
+    position: absolute;
     display: flex;
+    inset-block-start: to-rem(10px);
     inset-inline-end: 0;
     /* stylelint-disable-next-line carbon/layout-use */
     margin-block: 6px;
@@ -171,7 +174,8 @@ $motion-duration: $duration-moderate-02;
   @extend .#{$carbon-prefix}--visually-hidden;
 }
 
-:host(#{$prefix}-tearsheet[slug]) {
+:host(#{$prefix}-tearsheet[slug]),
+:host(#{$prefix}-tearsheet[ai-label]) {
   --overlay-color: #{$ai-overlay};
 
   .#{$block-class}__container {
@@ -200,7 +204,13 @@ $motion-duration: $duration-moderate-02;
 
 :host(#{$prefix}-tearsheet[slug])
   .#{$prefix}--tearsheet__header[has-actions]
-  ::slotted(#{$prefix}-slug) {
+  ::slotted(#{$prefix}-slug),
+:host(#{$prefix}-tearsheet[ai-label])
+  .#{$prefix}--tearsheet__header[has-actions]
+  ::slotted(#{$prefix}-ai-label),
+:host(#{$prefix}-tearsheet[decorator])
+  .#{$prefix}--tearsheet__header[has-actions]
+  ::slotted([slot='decorator']) {
   inset-inline-end: 0;
 }
 
@@ -216,7 +226,6 @@ $motion-duration: $duration-moderate-02;
 :host(#{$prefix}-tearsheet[width='narrow']) {
   .#{$block-class}__header {
     margin: 0;
-    background-color: $layer;
     border-block-end: 1px solid $border-subtle-01;
   }
 
@@ -226,7 +235,7 @@ $motion-duration: $duration-moderate-02;
   }
 
   .#{$block-class}__main {
-    background-color: $layer;
+    background-color: unset;
   }
 }
 
@@ -256,11 +265,13 @@ $motion-duration: $duration-moderate-02;
   }
 
   .#{$block-class}__header[has-close-icon],
-  .#{$block-class}__header[has-slug] {
+  .#{$block-class}__header[has-slug],
+  .#{$block-class}__header[has-decorator] {
     padding-inline-end: $spacing-11;
   }
 
-  .#{$block-class}__header[has-close-icon][has-slug] {
+  .#{$block-class}__header[has-close-icon][has-slug],
+  .#{$block-class}__header[has-close-icon][has-decorator] {
     /* stylelint-disable-next-line carbon/layout-use */
     padding-inline-end: calc(#{$spacing-11 + $spacing-09});
   }
@@ -325,3 +336,8 @@ $motion-duration: $duration-moderate-02;
   ::slotted(#{$carbon-prefix}-button) {
   block-size: $spacing-10;
 }
+:host(#{$prefix}-tearsheet[width='narrow']) {
+  .#{$block-class}__buttons {
+    background-color: unset;
+  }
+}

package/scss/components/truncated-text/story-styles.scss

@@ -0,0 +1,13 @@
+/*
+* 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.
+*/
+
+@use '@carbon/styles/scss/theme' as *;
+
+// $story-prefix: 'truncated-text-stories__';
+#main-content {
+  padding: 12rem;
+}

package/scss/components/truncated-text/truncated-text.scss

@@ -0,0 +1,122 @@
+/*
+* 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/utilities' as *;
+@use '@carbon/themes' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/config';
+
+$prefix: 'c4p';
+$carbon-prefix: config.$prefix;
+$block-class: #{$prefix}--truncated-text;
+
+// Common reset button style
+%reset-button {
+  border: none;
+  cursor: pointer;
+  font: inherit;
+  line-height: inherit;
+}
+
+// Mixin for directional gradients
+@mixin gradient-bg($direction, $color) {
+  background: linear-gradient($direction, rgba(255, 255, 255, 0) 0%, $color 0%);
+}
+
+:host(#{$prefix}-truncated-text) {
+  display: block;
+  inline-size: 100%;
+
+  .#{$block-class}_transition {
+    @media (prefers-reduced-motion: no-preference) {
+      transition: max-height $duration-fast-02 motion(standard, productive);
+    }
+  }
+
+  .#{$block-class}_content {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--line-clamp, 0);
+    text-overflow: clip;
+    white-space: normal;
+
+    &:focus {
+      @include focus-outline('outline');
+    }
+  }
+
+  #{$carbon-prefix}-tooltip {
+    display: inline-flex;
+  }
+
+  button:focus,
+  .#{$block-class}_button-expand:focus,
+  .#{$block-class}_button-collapse:focus {
+    @include focus-outline('outline');
+  }
+}
+
+.#{$block-class}_button-expand,
+.#{$block-class}_button-collapse {
+  @extend %reset-button;
+
+  padding: 0 $spacing-01;
+  color: $link-primary;
+
+  &.#{$block-class}_button-hide {
+    display: none;
+  }
+}
+
+.#{$block-class}_button-expand {
+  position: absolute;
+  background-color: $background;
+  inset-block-end: 0;
+  inset-inline-end: 0;
+
+  &.#{$block-class}_button-layered {
+    background-color: $layer;
+  }
+
+  &::before {
+    position: absolute;
+    block-size: 100%;
+    color: $text-primary;
+    content: '...';
+    inline-size: 1em; // use em so truncation element scales with parent font size
+    inset-inline-start: -1em; // positions pseudo element before button without overlap across font sizes
+    pointer-events: none;
+  }
+
+  // Gradient LTR
+  &:dir(ltr)::before {
+    @include gradient-bg(90deg, $background);
+  }
+
+  &.#{$block-class}_button-layered:dir(ltr)::before {
+    @include gradient-bg(90deg, $layer);
+  }
+
+  // Gradient RTL
+  &:dir(rtl)::before {
+    @include gradient-bg(270deg, $background);
+  }
+
+  &.#{$block-class}_button-layered:dir(rtl)::before {
+    @include gradient-bg(270deg, $layer);
+  }
+}
+
+.#{$block-class}_button-collapse {
+  background-color: transparent;
+}