genesys-spark-components 4.56.1 → 4.58.0

package/dist/cjs/gux-tag.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7fb02c8c.js');
 const index$1 = require('./index-a1a48d79.js');
-const usage = require('./usage-d4df8415.js');
+const usage = require('./usage-28b13cde.js');
 require('./get-closest-element-9e41d6b9.js');
 
 const tag = "tag with label: {label}";

package/dist/cjs/gux-text-highlight.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7fb02c8c.js');
-const usage = require('./usage-d4df8415.js');
+const usage = require('./usage-28b13cde.js');
 
 const conversion = /[ +]/g;
 const expressions = new Map();

package/dist/cjs/gux-time-beta.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7fb02c8c.js');
-const usage = require('./usage-d4df8415.js');
+const usage = require('./usage-28b13cde.js');
 const getValidTimezone = require('./get-valid-timezone-52eac7fa.js');
 const useRegionalDates = require('./use-regional-dates-34243a86.js');
 const index$1 = require('./index-a1a48d79.js');

package/dist/cjs/gux-time-picker.cjs.entry.js

@@ -7,7 +7,7 @@ const onClickOutside = require('./on-click-outside-6db914c3.js');
 const simulateNativeEvent = require('./simulate-native-event-e88bf64f.js');
 const afterNextRender = require('./after-next-render-162425fe.js');
 const index = require('./index-a1a48d79.js');
-const usage = require('./usage-d4df8415.js');
+const usage = require('./usage-28b13cde.js');
 const useRegionalDates = require('./use-regional-dates-34243a86.js');
 require('./get-closest-element-9e41d6b9.js');
 

package/dist/cjs/gux-time-zone-picker-beta.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7fb02c8c.js');
 const index$1 = require('./index-a1a48d79.js');
-const usage = require('./usage-d4df8415.js');
+const usage = require('./usage-28b13cde.js');
 const simulateNativeEvent = require('./simulate-native-event-e88bf64f.js');
 require('./get-closest-element-9e41d6b9.js');
 

package/dist/cjs/gux-toast.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7fb02c8c.js');
-const usage = require('./usage-d4df8415.js');
+const usage = require('./usage-28b13cde.js');
 const hasSlot = require('./has-slot-3edae188.js');
 
 const guxToastCss = ".gux-toast{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-toast-gap);place-content:stretch flex-start;align-items:flex-start;width:var(--gse-ui-toast-wrappingWidth);padding:var(--gse-ui-toast-margin);margin-bottom:var(--gse-ui-toast-stacking-gap);border-radius:var(--gse-ui-toast-borderRadius);box-shadow:var(--gse-ui-toast-boxShadow-x) var(--gse-ui-toast-boxShadow-y) var(--gse-ui-toast-boxShadow-blur) var(--gse-ui-toast-boxShadow-spread) var(--gse-ui-toast-boxShadow-color)}.gux-toast .gux-icon ::slotted(gux-icon){width:var(--gse-ui-toast-icon) !important;height:var(--gse-ui-toast-icon) !important}.gux-toast .gux-icon gux-icon{width:var(--gse-ui-toast-icon) !important;height:var(--gse-ui-toast-icon) !important}.gux-toast .gux-icon.gux-icon-error{color:var(--gse-ui-toast-error-iconColor)}.gux-toast .gux-icon.gux-icon-warning{color:var(--gse-ui-toast-warning-iconColor)}.gux-toast .gux-icon.gux-icon-success{color:var(--gse-ui-toast-success-iconColor)}.gux-toast .gux-icon.gux-icon-info{color:var(--gse-ui-toast-info-iconColor)}.gux-toast .gux-icon.gux-icon-action{color:var(--gse-ui-toast-action-iconColor)}.gux-toast .gux-content{display:flex;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap;gap:var(--gse-ui-toast-gapButton);place-content:stretch flex-start;align-items:flex-start;align-self:auto;order:0}.gux-toast .gux-content .gux-message{display:flex;flex-direction:column;gap:var(--gse-ui-toast-gapText)}.gux-toast .gux-content .gux-message .gux-message-title{font-family:var(--gse-ui-toast-heading-fontFamily);font-size:var(--gse-ui-toast-heading-fontSize);font-weight:var(--gse-ui-toast-heading-fontWeight);line-height:var(--gse-ui-toast-heading-lineHeight)}.gux-toast .gux-content .gux-message .gux-message-body{font-family:var(--gse-ui-toast-text-fontFamily);font-size:var(--gse-ui-toast-text-fontSize);line-height:var(--gse-ui-toast-text-lineHeight)}.gux-toast .gux-content .gux-buttons-bar{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-toast-buttonBar-gap);justify-content:flex-start}.gux-toast .gux-content .gux-buttons-bar ::slotted(a){font-family:var(--gse-ui-link-inLine-medium-underlinedText-fontFamily);font-size:var(--gse-ui-link-inLine-medium-underlinedText-fontSize);font-weight:var(--gse-ui-link-inLine-medium-underlinedText-fontWeight);line-height:var(--gse-ui-link-inLine-medium-underlinedText-lineHeight)}.gux-toast.gux-toast-success{background-color:var(--gse-ui-toast-success-backgroundColor)}.gux-toast.gux-toast-success .gux-message{color:var(--gse-ui-toast-success-foregroundColor)}.gux-toast.gux-toast-warning{background-color:var(--gse-ui-toast-warning-backgroundColor)}.gux-toast.gux-toast-warning .gux-message{color:var(--gse-ui-toast-warning-foregroundColor)}.gux-toast.gux-toast-error{background-color:var(--gse-ui-toast-error-backgroundColor)}.gux-toast.gux-toast-error .gux-message{color:var(--gse-ui-toast-error-foregroundColor)}.gux-toast.gux-toast-info{background-color:var(--gse-ui-toast-info-backgroundColor)}.gux-toast.gux-toast-info .gux-message{color:var(--gse-ui-toast-info-foregroundColor)}.gux-toast.gux-toast-action{background-color:var(--gse-ui-toast-action-backgroundColor)}.gux-toast.gux-toast-action .gux-message{color:var(--gse-ui-toast-action-foregroundColor)}";

package/dist/cjs/gux-toggle.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7fb02c8c.js');
-const usage = require('./usage-d4df8415.js');
+const usage = require('./usage-28b13cde.js');
 const randomHtmlId = require('./random-html-id-71c43d5a.js');
 const index$1 = require('./index-a1a48d79.js');
 require('./get-closest-element-9e41d6b9.js');

package/dist/cjs/gux-tooltip-base-beta.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-7fb02c8c.js');
 const floatingUi_dom_esm = require('./floating-ui.dom.esm-f8b4cd90.js');
 const randomHtmlId = require('./random-html-id-71c43d5a.js');
-const usage = require('./usage-d4df8415.js');
+const usage = require('./usage-28b13cde.js');
 const afterNextRender = require('./after-next-render-162425fe.js');
 
 const guxTooltipBaseCss = ":host{position:fixed;z-index:var(--gse-semantic-zIndex-tooltip);display:none;width:max-content;max-width:250px;pointer-events:none;border-radius:var(--gse-ui-tooltip-borderRadius);box-shadow:var(--gse-ui-tooltip-boxShadow-x) var(--gse-ui-tooltip-boxShadow-y) var(--gse-ui-tooltip-boxShadow-blur) var(--gse-ui-tooltip-boxShadow-spread) var(--gse-ui-tooltip-boxShadow-color);opacity:0}:host(.gux-show){display:block;animation-name:fade-in;animation-duration:250ms;animation-delay:1s;animation-fill-mode:forwards}.gux-container{box-sizing:border-box;display:flex;flex-direction:row;gap:var(--gse-ui-tooltip-gap);place-content:center flex-start;padding:var(--gse-ui-tooltip-padding);font-family:var(--gse-ui-tooltip-text-fontFamily);font-size:var(--gse-ui-tooltip-text-fontSize);font-weight:var(--gse-ui-tooltip-text-fontWeight);line-height:var(--gse-ui-tooltip-text-lineHeight);color:var(--gse-ui-tooltip-light-foregroundColor);background-color:var(--gse-ui-tooltip-light-backgroundColor);border:var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color);border-radius:var(--gse-ui-tooltip-borderRadius)}.gux-container ::slotted(gux-icon){align-self:center;width:var(--gse-ui-icon-size-sm);height:var(--gse-ui-icon-size-sm);color:var(--gse-ui-tooltip-light-iconColor)}.gux-container ::slotted(*){width:100%;overflow-wrap:break-word;white-space:normal}.gux-container.gux-dark{color:var(--gse-ui-tooltip-dark-foregroundColor);background-color:var(--gse-ui-tooltip-dark-backgroundColor);border-color:var(--gse-ui-tooltip-dark-border-color)}.gux-container.gux-dark ::slotted(gux-icon){align-self:center;width:var(--gse-ui-icon-size-sm);height:var(--gse-ui-icon-size-sm);color:var(--gse-ui-tooltip-dark-iconColor)}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}";

package/dist/cjs/gux-tooltip-beta.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7fb02c8c.js');
-const usage = require('./usage-d4df8415.js');
+const usage = require('./usage-28b13cde.js');
 const findElementById = require('./find-element-by-id-fde17c92.js');
 const randomHtmlId = require('./random-html-id-71c43d5a.js');
 

package/dist/cjs/gux-tooltip.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-7fb02c8c.js');
 const floatingUi_dom_esm = require('./floating-ui.dom.esm-f8b4cd90.js');
 const randomHtmlId = require('./random-html-id-71c43d5a.js');
-const usage = require('./usage-d4df8415.js');
+const usage = require('./usage-28b13cde.js');
 const findElementById = require('./find-element-by-id-fde17c92.js');
 const afterNextRender = require('./after-next-render-162425fe.js');
 

package/dist/cjs/gux-truncate.cjs.entry.js

@@ -19,7 +19,7 @@ function getTextContentFromNodes(elements) {
         .join(' ');
 }
 
-const guxTruncateCss = ":host{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:inherit}::slotted(*){display:inline}.gux-truncate-multi-line{white-space:normal}.gux-truncate-multi-line .gux-truncate-slot-container{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}gux-tooltip{font-weight:normal;line-height:normal;text-align:left;overflow-wrap:break-word;white-space:normal}.gux-truncate-slot-container>*{display:inline}.gux-truncate-slot-container{display:block;overflow:hidden;text-overflow:ellipsis}";
+const guxTruncateCss = ":host{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:inherit}::slotted(*){display:inline}.gux-truncate-multi-line{white-space:normal}.gux-truncate-multi-line .gux-truncate-slot-container{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}gux-tooltip{font-weight:normal;line-height:normal;text-align:left;overflow-wrap:break-word;white-space:normal}.gux-truncate-slot-container>*{display:inline}.gux-truncate-slot-container{display:block;text-overflow:ellipsis}.gux-overflow-hidden{overflow:hidden}";
 const GuxTruncateStyle0 = guxTruncateCss;
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -69,7 +69,10 @@ const GuxTruncate = class {
         var _a;
         return (index.h("div", { key: '7fa91b7c19dded106b243b38ec8856c8b4c5ce53', class: {
                 'gux-truncate-multi-line': Boolean(this.maxLines)
-            } }, index.h("span", { key: '4b287dfde87039d509a513b64b23300743c6c3fa', class: "gux-truncate-slot-container", style: { webkitLineClamp: (_a = this.maxLines) === null || _a === void 0 ? void 0 : _a.toString() } }, index.h("slot", { key: 'e2c3ab17bb095e7fa89fe56f7ebe29e2226d6cb7' })), this.renderTooltip()));
+            } }, index.h("span", { key: '3e8cf159ac4dff3ad6c03ac5b993d8201e63ae33', class: {
+                'gux-overflow-hidden': this.needsTruncation(),
+                'gux-truncate-slot-container': true
+            }, style: { webkitLineClamp: (_a = this.maxLines) === null || _a === void 0 ? void 0 : _a.toString() } }, index.h("slot", { key: '0c677242fff5fb8005bedca9ce41e0ab0bbeb00c' })), this.renderTooltip()));
     }
     get root() { return index.getElement(this); }
 };

package/dist/cjs/{usage-d4df8415.js → usage-28b13cde.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const name = "genesys-spark-components";
-const version = "4.56.1";
+const version = "4.58.0";
 const description = "Common webcomponents";
 const license = "MIT";
 const main = "dist/stencil-wrapper.js";

package/dist/collection/components/beta/gux-selector-cards/gux-selector-card/gux-selector-card.css

@@ -1,14 +1,3 @@
-:host(.gux-disabled) {
-  cursor: not-allowed;
-}
-:host(.gux-disabled) .gux-content {
-  pointer-events: none;
-  -webkit-user-select: none; /* Safari */
-  user-select: none;
-  background-color: var(--gse-ui-selectorCard-disabled-backgroundColor);
-  opacity: var(--gse-ui-selectorCard-disabled-opacity);
-}
-
 ::slotted(*) {
   cursor: pointer;
 }
@@ -88,7 +77,7 @@
   mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8C5 6.31563 6.31563 5 8 5C9.65625 5 11 6.31563 11 8C11 9.65625 9.65625 11 8 11C6.31563 11 5 9.65625 5 8ZM16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40938 1.5 1.5 4.40938 1.5 8C1.5 11.5906 4.40938 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40938 11.5906 1.5 8 1.5Z' /%3E%3C/svg%3E");
 }
 
-.gux-content {
+.gux-selector-card .gux-content {
   position: relative;
   box-sizing: border-box;
   display: flex;
@@ -106,45 +95,107 @@
   background-color: var(--gse-ui-selectorCard-default-backgroundColor);
   border-radius: var(--gse-ui-selectorCard-simple-borderRadius);
 }
-.gux-content .gux-icon {
+.gux-selector-card .gux-content gux-truncate {
+  z-index: calc(var(--gse-semantic-zIndex-showFocus));
+}
+.gux-selector-card .gux-content .gux-icon {
   line-height: 0;
 }
-.gux-content:focus-within {
+.gux-selector-card .gux-content:focus-within {
   outline: var(--gse-semantic-focusRing-default-border-color) var(--gse-semantic-focusRing-default-border-style) var(--gse-semantic-focusRing-default-border-width);
   outline-offset: var(--gse-semantic-focusRing-offset);
 }
-.gux-content:hover {
+.gux-selector-card .gux-content:hover {
   cursor: pointer;
   background-color: var(--gse-ui-selectorCard-hover-backgroundColor);
 }
-.gux-content:hover ::slotted(input[type=radio]:not(:checked):not(:disabled))::before {
+.gux-selector-card .gux-content:hover ::slotted(input[type=radio]:not(:checked):not(:disabled))::before {
   background-color: var(--gse-ui-selectorCard-hover-selectedIndicator-foregroundColor);
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40937 1.5 1.5 4.40937 1.5 8C1.5 11.5906 4.40937 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40937 11.5906 1.5 8 1.5Z' fill-rule='evenodd' clip-rule='evenodd' /%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40937 1.5 1.5 4.40937 1.5 8C1.5 11.5906 4.40937 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40937 11.5906 1.5 8 1.5Z' fill-rule='evenodd' clip-rule='evenodd' /%3E%3C/svg%3E");
 }
-.gux-content:hover ::slotted(input[type=radio]:checked:not(:disabled))::before {
+.gux-selector-card .gux-content:hover ::slotted(input[type=radio]:checked:not(:disabled))::before {
   background-color: var(--gse-ui-selectorCard-hover-selectedIndicator-foregroundColor);
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8C5 6.31563 6.31563 5 8 5C9.65625 5 11 6.31563 11 8C11 9.65625 9.65625 11 8 11C6.31563 11 5 9.65625 5 8ZM16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40938 1.5 1.5 4.40938 1.5 8C1.5 11.5906 4.40938 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40938 11.5906 1.5 8 1.5Z' /%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8C5 6.31563 6.31563 5 8 5C9.65625 5 11 6.31563 11 8C11 9.65625 9.65625 11 8 11C6.31563 11 5 9.65625 5 8ZM16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40938 1.5 1.5 4.40938 1.5 8C1.5 11.5906 4.40938 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40938 11.5906 1.5 8 1.5Z' /%3E%3C/svg%3E");
 }
-.gux-content:active {
+.gux-selector-card .gux-content:active {
   background-color: var(--gse-ui-selectorCard-active-backgroundColor);
 }
-.gux-content:active ::slotted(input[type=radio]:not(:checked):not(:disabled))::before {
+.gux-selector-card .gux-content:active ::slotted(input[type=radio]:not(:checked):not(:disabled))::before {
   background-color: var(--gse-ui-selectorCard-active-selectedIndicator-foregroundColor);
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40937 1.5 1.5 4.40937 1.5 8C1.5 11.5906 4.40937 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40937 11.5906 1.5 8 1.5Z' fill-rule='evenodd' clip-rule='evenodd' /%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40937 1.5 1.5 4.40937 1.5 8C1.5 11.5906 4.40937 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40937 11.5906 1.5 8 1.5Z' fill-rule='evenodd' clip-rule='evenodd' /%3E%3C/svg%3E");
 }
-.gux-content:active ::slotted(input[type=radio]:checked:not(:disabled))::before {
+.gux-selector-card .gux-content:active ::slotted(input[type=radio]:checked:not(:disabled))::before {
   background-color: var(--gse-ui-selectorCard-active-selectedIndicator-foregroundColor);
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8C5 6.31563 6.31563 5 8 5C9.65625 5 11 6.31563 11 8C11 9.65625 9.65625 11 8 11C6.31563 11 5 9.65625 5 8ZM16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40938 1.5 1.5 4.40938 1.5 8C1.5 11.5906 4.40938 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40938 11.5906 1.5 8 1.5Z' /%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8C5 6.31563 6.31563 5 8 5C9.65625 5 11 6.31563 11 8C11 9.65625 9.65625 11 8 11C6.31563 11 5 9.65625 5 8ZM16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40938 1.5 1.5 4.40938 1.5 8C1.5 11.5906 4.40938 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40938 11.5906 1.5 8 1.5Z' /%3E%3C/svg%3E");
 }
-.gux-content .gux-screenreader {
+.gux-selector-card .gux-content .gux-screenreader {
   position: absolute;
   top: auto;
   left: -10000px;
   width: 1px;
   height: 1px;
   overflow: hidden;
+}
+.gux-selector-card.gux-descriptive .gux-content {
+  align-items: flex-start;
+  width: var(--gse-ui-selectorCard-descriptive-minWidth);
+  min-width: var(--gse-ui-selectorCard-descriptive-minWidth);
+  max-width: var(--gse-ui-selectorCard-descriptive-maxWidth);
+  min-height: var(--gse-ui-selectorCard-descriptive-minHeight);
+  max-height: var(--gse-ui-selectorCard-descriptive-maxHeight);
+  padding: var(--gse-ui-selectorCard-descriptive-padding);
+  text-align: start;
+  border-radius: var(--gse-ui-selectorCard-descriptive-borderRadius);
+}
+.gux-selector-card.gux-descriptive .gux-content .gux-description {
+  z-index: var(--gse-semantic-zIndex-showFocus);
+  margin-bottom: var(--gse-ui-selectorCard-descriptive-gap);
+  font-family: var(--gse-ui-selectorCard-descriptive-description-fontFamily);
+  font-size: var(--gse-ui-selectorCard-descriptive-description-fontSize);
+  font-weight: var(--gse-ui-selectorCard-descriptive-description-fontWeight);
+  line-height: var(--gse-ui-selectorCard-descriptive-description-lineHeight);
+}
+.gux-selector-card.gux-descriptive .gux-content gux-truncate {
+  z-index: calc(var(--gse-semantic-zIndex-showFocus) + 1);
+}
+.gux-selector-card.gux-descriptive .gux-content ::slotted(gux-badge) {
+  margin-top: var(-gse-ui-selectorCard-descriptive-badge-marginTop);
+}
+.gux-selector-card.gux-descriptive .gux-content ::slotted(input[type=radio]) {
+  left: 0;
+  border-radius: var(--gse-ui-selectorCard-descriptive-borderRadius);
+}
+.gux-selector-card.gux-descriptive .gux-content ::slotted(input[type=radio])::before {
+  inset-block-start: var(--gse-ui-selectorCard-descriptive-gap);
+  inset-inline-end: var(--gse-ui-selectorCard-descriptive-gap);
+  width: var(--gse-ui-icon-size-md);
+  height: var(--gse-ui-icon-size-md);
+}
+.gux-selector-card.gux-descriptive .gux-content ::slotted(label) {
+  display: block;
+  margin-bottom: var(--gse-ui-selectorCard-descriptive-text-gap);
+  font-family: var(--gse-ui-selectorCard-descriptive-label-fontFamily);
+  font-size: var(--gse-ui-selectorCard-descriptive-label-fontSize);
+  font-weight: var(--gse-ui-selectorCard-descriptive-label-fontWeight);
+  line-height: var(--gse-ui-selectorCard-descriptive-label-lineHeight);
+}
+.gux-selector-card.gux-descriptive .gux-content ::slotted(gux-icon) {
+  width: var(--gse-ui-icon-size-lg);
+  height: var(--gse-ui-icon-size-lg);
+  margin-bottom: var(--gse-ui-selectorCard-descriptive-gap);
+}
+.gux-selector-card.gux-disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+}
+.gux-selector-card.gux-disabled .gux-content {
+  pointer-events: none;
+  -webkit-user-select: none; /* Safari */
+  user-select: none;
+  background-color: var(--gse-ui-selectorCard-disabled-backgroundColor);
+  opacity: var(--gse-ui-selectorCard-disabled-opacity);
 }

package/dist/collection/components/beta/gux-selector-cards/gux-selector-card/gux-selector-card.js

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
+import { h } from "@stencil/core";
 import { trackComponent } from "../../../../utils/tracking/usage";
 import { validateFormIds, getSlottedInput } from "../../../stable/gux-form-field/gux-form-field.service";
 import { calculateInputDisabledState } from "../../../../utils/dom/calculate-input-disabled-state";
@@ -9,7 +9,7 @@ import { setSlotAriaDescribedby } from "../../../stable/gux-form-field/gux-form-
  * @slot icon - Required slot for icon
  * @slot input - Required slot for input tag
  * @slot label - Required slot for label tag
- * @slot content - Optional slot for additional text content
+ * @slot description - Optional slot for additional text description
  * @slot badge - Optional slot for badge
  */
 export class GuxSelectorCard {
@@ -29,19 +29,19 @@ export class GuxSelectorCard {
     setInput() {
         this.input = getSlottedInput(this.root, 'input[type="radio"][slot="input"]');
         preventBrowserValidationStyling(this.input);
-        setSlotAriaDescribedby(this.root, this.input, 'content');
+        setSlotAriaDescribedby(this.root, this.input, 'description');
         this.disabled = calculateInputDisabledState(this.input);
         this.disabledObserver = onInputDisabledStateChange(this.input, (disabled) => {
             this.disabled = disabled;
         });
         validateFormIds(this.root, this.input);
     }
-    renderContent() {
+    renderDescription() {
         if (this.variant === 'simple') {
-            return (h("span", { class: "gux-screenreader" }, h("slot", { name: "content" })));
+            return (h("span", { class: "gux-screenreader" }, h("slot", { name: "description" })));
         }
         else {
-            return (h("slot", { name: "content" })); //TODO: COMUI-2784 Descriptive variant
+            return (h("gux-truncate", { class: "gux-description", "max-lines": 3 }, h("slot", { name: "description" })));
         }
     }
     renderBadge() {
@@ -50,10 +50,11 @@ export class GuxSelectorCard {
         }
     }
     render() {
-        return (h(Host, { key: '4cbf7206e2e03e4090022509bd1402526b1ef3ed', class: {
+        return (h("div", { key: 'b76c1d4a8d437a154542478b344d7d8a36e357b3', class: {
+                'gux-selector-card': true,
                 [`gux-${this.variant}`]: true,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: '63ce896f8247992a1af212ab959eb5dd1164e65b', class: "gux-content" }, h("div", { key: 'b688cfe5bd162e2b2695424ad7a4db5e418aa0e4', class: "gux-icon" }, h("slot", { key: '1b2d46fd865856d37e15ff0a20e6e007f408254c', name: "icon" })), h("gux-truncate", { key: 'b67f056af0446ea92b998dce54ca6ba5906b0ea4', "max-lines": 2 }, h("slot", { key: '389c736fb21c9b2dbe39e90df82484079d9c937d', name: "label" })), h("slot", { key: 'bad138245e6d37e5bcb5da8404a589d12264098b', name: "input" }), this.renderContent(), this.renderBadge())));
+            }, onClick: () => this.input.setAttribute('checked', 'true') }, h("div", { key: '7510e92a07c04b9d4afb4c6545afdde2d6068b33', class: "gux-content" }, h("div", { key: '3cd3676b4e3f768cc30188afa2e16dd1c2a45fc3', class: "gux-icon" }, h("slot", { key: '4114bb5813890d3f07a25e0d0e7327674c6a097a', name: "icon" })), h("gux-truncate", { key: '89e4611a8ceeb6c2da47565a0563d8bc51733817', class: "gux-label", "max-lines": 2 }, h("slot", { key: 'a598116d7c68874542dd5656339c5172be565ee9', name: "label" })), h("slot", { key: '5918c2cbe784b5049f989146b52fffb989927b55', name: "input" }), this.renderDescription(), this.renderBadge())));
     }
     static get is() { return "gux-selector-card-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-selector-cards/gux-selector-card/tests/gux-selector-card.spec.js

@@ -49,7 +49,90 @@ describe('gux-form-field-radio', () => {
         />
         <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
       </gux-selector-card-beta>
-      `
+      `,
+            `<gux-selector-card-beta variant="descriptive">
+        <label slot="label" for="fourth">A longer card label example. This can span up to 2 lines. </label>
+        <input
+          slot="input"
+          id="fourth"
+          type="radio"
+          name="example4"
+          value="card-label"
+        />
+        <span slot="content"
+          >A description for a sample selector card. Used in Spark WCL. Descriptions can span up to 3 lines before being truncated. </span
+        >
+        <gux-badge slot="badge" bold>Badge</gux-badge>
+        <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+      </gux-selector-card-beta>`,
+            `<gux-selector-card-beta variant="descriptive">
+        <label slot="label" for="third">Card Label</label>
+        <input
+          slot="input"
+          id="third"
+          type="radio"
+          name="example3"
+          disabled
+          checked
+          value="card-label"
+        />
+        <span slot="content"
+          >A label for a sample selector card. Used in Spark WCL.</span
+        >
+        <gux-badge slot="badge" bold>Badge</gux-badge>
+        <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+      </gux-selector-card-beta>`,
+            `<gux-selector-card-beta variant="descriptive">
+        <label slot="label" for="second">Card Label</label>
+        <input
+          slot="input"
+          id="second"
+          type="radio"
+          name="example2"
+          disabled
+          value="card-label"
+        />
+        <span slot="content">A label for a sample selector card. Used in Spark WCL.</span>
+        <gux-badge slot="badge" bold>Badge</gux-badge>ß
+        <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+      </gux-selector-card-beta>`,
+            `<gux-selector-card-beta variant="descriptive">
+        <label slot="label" for="first">Card label</label>
+        <input
+          slot="input"
+          id="first"
+          type="radio"
+          name="example1"
+          value="card-label"
+        />
+        <span slot="content">A label for a sample selector card. Used in Spark WCL.</span>
+        <gux-badge slot="badge" bold>Badge</gux-badge>
+        <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+      </gux-selector-card-beta>`,
+            `<gux-selector-card-beta variant="descriptive">
+        <label slot="label" for="first">Card label</label>
+        <input
+          slot="input"
+          id="first"
+          type="radio"
+          name="example1"
+          value="card-label"
+        />
+        <span slot="content">A label for a sample selector card. Used in Spark WCL.</span>
+        <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+      </gux-selector-card-beta>`,
+            `<gux-selector-card-beta variant="descriptive">
+        <label slot="label" for="first">Card label</label>
+        <input
+          slot="input"
+          id="first"
+          type="radio"
+          name="example1"
+          value="card-label"
+        />
+        <gux-badge slot="badge" bold>Badge</gux-badge>
+        <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+      </gux-selector-card-beta>`
         ].forEach((html, index) => {
             it(`should render component as expected (${index + 1})`, async () => {
                 const page = await newSpecPage({ components, html, language });

package/dist/collection/components/beta/gux-selector-cards/tests/gux-selector-cards.e2e.js

@@ -46,7 +46,48 @@ describe('gux-selector-cards', () => {
           <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
         </gux-selector-card-beta>
       </gux-selector-cards-beta>
-      `
+      `,
+            `<gux-selector-cards-beta class="example2">
+        <gux-selector-card-beta variant="descriptive">
+          <label slot="label" for="first">First</label>
+          <input slot="input" id="first" type="radio" name="example2" />
+          <span slot="content">A label for a sample selector card. Used in Spark WCL.</span>
+          <gux-badge slot="badge" bold>Badge</gux-badge>
+          <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="descriptive">
+          <label slot="label" for="second">Second</label>
+          <input slot="input" id="second" type="radio" name="example2" />
+          <span slot="content">A label for a sample selector card. Used in Spark WCL.</span>
+          <gux-badge slot="badge" bold>Badge</gux-badge>
+          <gux-icon slot="icon" icon-name="fa/bell-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="descriptive">
+          <label slot="label" for="third">Third</label>
+          <input slot="input" id="third" type="radio" name="example2" />
+          <span slot="content">A label for a sample selector card. Used in Spark WCL.</span>
+          <gux-badge slot="badge" bold>Badge</gux-badge>
+          <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="descriptive">
+          <label slot="label" for="fourth">Fourth</label>
+          <input slot="input" id="fourth" type="radio" name="example2" disabled />
+          <span slot="content">A label for a sample selector card. Used in Spark WCL.</span>
+          <gux-badge slot="badge" bold>Badge</gux-badge>
+          <gux-icon slot="icon" icon-name="fa/bell-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="descriptive">
+          <label slot="label" for="fifth">Fifth</label>
+          <input slot="input" id="fifth" type="radio" name="example2" />
+          <span slot="content">A label for a sample selector card. Used in Spark WCL.</span>
+          <gux-badge slot="badge" bold>Badge</gux-badge>
+          <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
+        </gux-selector-card-beta>
+      </gux-selector-cards-beta>`
         ].forEach((html, index) => {
             it(`should render component as expected (${index + 1})`, async () => {
                 const page = await newNonrandomE2EPage({ html });

package/dist/collection/components/beta/gux-selector-cards/tests/gux-selector-cards.spec.js

@@ -74,7 +74,48 @@ describe('gux-selector-cards', () => {
           <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
         </gux-selector-card-beta>
       </gux-selector-cards-beta>
-      `
+      `,
+            `<gux-selector-cards-beta class="example2">
+        <gux-selector-card-beta variant="descriptive">
+          <label slot="label" for="first">First</label>
+          <input slot="input" id="first" type="radio" name="example2" />
+          <span slot="content">A label for a sample selector card. Used in Spark WCL.</span>
+          <gux-badge slot="badge" bold>Badge</gux-badge>
+          <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="descriptive">
+          <label slot="label" for="second">Second</label>
+          <input slot="input" id="second" type="radio" name="example2" />
+          <span slot="content">A label for a sample selector card. Used in Spark WCL.</span>
+          <gux-badge slot="badge" bold>Badge</gux-badge>
+          <gux-icon slot="icon" icon-name="fa/bell-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="descriptive">
+          <label slot="label" for="third">Third</label>
+          <input slot="input" id="third" type="radio" name="example2" />
+          <span slot="content">A label for a sample selector card. Used in Spark WCL.</span>
+          <gux-badge slot="badge" bold>Badge</gux-badge>
+          <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="descriptive">
+          <label slot="label" for="fourth">Fourth</label>
+          <input slot="input" id="fourth" type="radio" name="example2" disabled />
+          <span slot="content">A label for a sample selector card. Used in Spark WCL.</span>
+          <gux-badge slot="badge" bold>Badge</gux-badge>
+          <gux-icon slot="icon" icon-name="fa/bell-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="descriptive">
+          <label slot="label" for="fifth">Fifth</label>
+          <input slot="input" id="fifth" type="radio" name="example2" />
+          <span slot="content">A label for a sample selector card. Used in Spark WCL.</span>
+          <gux-badge slot="badge" bold>Badge</gux-badge>
+          <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
+        </gux-selector-card-beta>
+      </gux-selector-cards-beta>`
         ].forEach((html, index) => {
             it(`should render component as expected (${index + 1})`, async () => {
                 const page = await newSpecPage({ components, html, language });

package/dist/collection/components/stable/gux-tooltip-title/tests/gux-tooltip-title.e2e.js

@@ -0,0 +1,86 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { a11yCheck } from "../../../../test/e2eTestUtils";
+async function newNonrandomE2EPage({ html }, lang = 'en') {
+    const page = await newE2EPage();
+    await page.evaluateOnNewDocument(() => {
+        Math.random = () => 0.5;
+    });
+    await page.setContent(`<div lang=${lang}>${html}</div>`);
+    await page.waitForChanges();
+    await page.addScriptTag({
+        path: '../../node_modules/axe-core/axe.min.js'
+    });
+    await page.waitForChanges();
+    return page;
+}
+describe('gux-tooltip-title', () => {
+    describe('#render', () => {
+        [
+            '<div style="max-width: 40px"><gux-tooltip-title><span><slot aria-hidden="true" onSlotchange={this.onSlotChange.bind(this)}>Some long text to truncate and use a tooltip</slot></span></gux-tooltip-title></div>',
+            '<gux-tooltip-title><div style="max-width: 200px">Some short text</div></gux-tooltip-title>'
+        ].forEach((html, index) => {
+            it(`should render component as expected (${index + 1})`, async () => {
+                const page = await newNonrandomE2EPage({ html });
+                const element = await page.find('gux-tooltip-title');
+                await a11yCheck(page);
+                expect(element.outerHTML).toMatchSnapshot();
+            });
+        });
+    });
+    it('should render a tooltip if the component text width is greater than the parent container', async () => {
+        const page = await newNonrandomE2EPage({
+            html: `
+        <div style="max-width: 40px">
+            <gux-tooltip-title>
+                <span>
+                <slot aria-hidden="true" onSlotchange={this.onSlotChange.bind(this)}>Some long text to truncate and use a tooltip</slot>
+                </span>
+            </gux-tooltip-title>
+        </div>
+    `
+        });
+        const tooltipElement = await page.find('pierce/gux-tooltip');
+        expect(tooltipElement).toBeDefined();
+    });
+    it('should not render a tooltip if the component text width is less than the parent container', async () => {
+        const page = await newNonrandomE2EPage({
+            html: `
+        <gux-tooltip-title>
+            <span>Some short text</span>
+        </gux-tooltip-title>
+    `
+        });
+        const tooltipElement = await page.find('pierce/gux-tooltip');
+        expect(tooltipElement).toBeNull();
+    });
+    it('should truncate title text if tooltip is rendered', async () => {
+        const page = await newNonrandomE2EPage({
+            html: `
+        <div style="max-width: 40px">
+            <gux-tooltip-title>
+                <span>
+                <slot aria-hidden="true" onSlotchange={this.onSlotChange.bind(this)}>Some long text to truncate and use a tooltip</slot>
+                </span>
+            </gux-tooltip-title>
+        </div>
+    `
+        });
+        const element = await page.find('gux-tooltip-title');
+        expect(element).toHaveClass('gux-overflow-hidden');
+    });
+    it('Tooltip title text should match screenreader text if gux-icon is being used and no title text is set', async () => {
+        const page = await newNonrandomE2EPage({
+            html: `
+        <div style="max-width: 40px">
+            <gux-tooltip-title>
+              <span>
+                <gux-icon icon-name="unknown" decorative screenreader-text="test screenreader text"></gux-icon>
+              </span>
+            </gux-tooltip-title>
+        </div>
+    `
+        });
+        const tooltipElement = await page.find('gux-tooltip');
+        expect(tooltipElement.innerText).toBe('test screenreader text');
+    });
+});

package/dist/collection/components/stable/gux-truncate/gux-truncate.css

@@ -34,6 +34,9 @@ gux-tooltip {
 
 .gux-truncate-slot-container {
   display: block;
-  overflow: hidden;
   text-overflow: ellipsis;
+}
+
+.gux-overflow-hidden {
+  overflow: hidden;
 }