genesys-spark-components 4.0.0-beta.32 → 4.0.0-beta.33

package/dist/cjs/gux-tab-advanced-list.cjs.entry.js

@@ -3030,7 +3030,7 @@ _extends(Remove, {
 Sortable.mount(new AutoScrollPlugin());
 Sortable.mount(Remove, Revert);
 
-const guxTabAdvancedListCss = "gux-tab-advanced-list .gux-tab-container{display:flex;align-items:flex-end;width:100%;height:50px;margin-bottom:16px;overflow-x:auto;overflow-y:hidden;background-color:#f6f7f9;border-bottom:1px solid #d7dce5;border-radius:4px 4px 0 0}gux-tab-advanced-list .gux-tab-container .action-button-container{display:flex;border-radius:4px}gux-tab-advanced-list .gux-tab-container .action-button-container .add-tab-button{min-width:35px;height:50px;padding:0;margin-left:2px;color:#2e394c;background-color:#e2e6ee;border:none;border-radius:4px;transition:color 0.25s}gux-tab-advanced-list .gux-tab-container .action-button-container .add-tab-button [slot='add-tab']{display:inline-flex;align-items:center;padding:0 12px;white-space:nowrap;font-size:12px;line-height:20px;font-family:sans-serif;font-weight:400;font-weight:700}gux-tab-advanced-list .gux-tab-container .action-button-container .add-tab-button [slot='add-tab'] gux-icon{padding-right:8px}gux-tab-advanced-list .gux-tab-container .action-button-container .add-tab-button:disabled{opacity:0.5}gux-tab-advanced-list .gux-tab-container .action-button-container .add-tab-button:hover{background-color:#d7dce5}gux-tab-advanced-list .gux-tab-container .action-button-container .add-tab-button:active{background-color:#c8cfda}gux-tab-advanced-list .gux-tab-container .action-button-container .add-tab-button:focus-visible{outline:none;box-shadow:inset 0 0 0 3px #aac9ff}gux-tab-advanced-list .gux-tab-container .action-button-container .add-tab-button:focus-visible{border-radius:5px;outline:none;box-shadow:inset 0 0 0 3px #aac9ff}gux-tab-advanced-list .gux-tab-container .action-button-container .add-tab-button gux-icon{width:16px;height:16px}gux-tab-advanced-list .gux-tab-container .action-button-container .gux-scroll-button-container{display:flex;border-radius:4px}gux-tab-advanced-list .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button{display:flex;align-items:center;justify-content:center;width:28px;height:50px;padding:0;color:#2e394c;background-color:#e2e6ee;border:none;border-radius:4px;transition:color 0.25s}gux-tab-advanced-list .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button:focus-visible{border:3px solid #aac9ff;border-radius:5px;outline:none}gux-tab-advanced-list .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button gux-icon{width:16px;height:16px}gux-tab-advanced-list .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button:focus-visible{border:3px solid #aac9ff;outline:none}gux-tab-advanced-list .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button:hover{background-color:#d7dce5}gux-tab-advanced-list .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button:active{background-color:#c8cfda}gux-tab-advanced-list .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button:focus-visible{outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}gux-tab-advanced-list .gux-tab-container .gux-scrollable-section{display:flex;align-items:flex-end;height:50px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none}gux-tab-advanced-list .gux-tab-container .gux-scrollable-section::-webkit-scrollbar{height:0}gux-tab-advanced-list .gux-sr-only{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}";
+const guxTabAdvancedListCss = ".gux-focus-ring-focused:focus{outline-width:var(--gse-semantic-focusRing-default-border-width);outline-style:var(--gse-semantic-focusRing-default-border-style);outline-color:var(--gse-semantic-focusRing-default-border-color);outline-offset:var(--gse-semantic-focusRing-offset)}.gux-focus-ring-focused-within:focus-within{outline-width:var(--gse-semantic-focusRing-default-border-width);outline-style:var(--gse-semantic-focusRing-default-border-style);outline-color:var(--gse-semantic-focusRing-default-border-color);outline-offset:var(--gse-semantic-focusRing-offset)}.gux-focus-ring-focused-visible:focus-visible{outline-width:var(--gse-semantic-focusRing-default-border-width);outline-style:var(--gse-semantic-focusRing-default-border-style);outline-color:var(--gse-semantic-focusRing-default-border-color);outline-offset:var(--gse-semantic-focusRing-offset)}.gux-focus-ring-small-focused:focus{outline-width:var(--gse-semantic-focusRing-small-border-width);outline-style:var(--gse-semantic-focusRing-small-border-style);outline-color:var(--gse-semantic-focusRing-small-border-color)}.gux-focus-ring-small-focused-within:focus-within{outline-width:var(--gse-semantic-focusRing-small-border-width);outline-style:var(--gse-semantic-focusRing-small-border-style);outline-color:var(--gse-semantic-focusRing-small-border-color)}.gux-focus-ring-small-focused-visible:focus-visible{outline-width:var(--gse-semantic-focusRing-small-border-width);outline-style:var(--gse-semantic-focusRing-small-border-style);outline-color:var(--gse-semantic-focusRing-small-border-color)}.gux-focus-ring-focused:focus{outline-width:var(--gse-semantic-focusRing-default-border-width);outline-style:var(--gse-semantic-focusRing-default-border-style);outline-color:var(--gse-semantic-focusRing-default-border-color);outline-offset:var(--gse-semantic-focusRing-offset)}.gux-focus-ring-focused-within:focus-within{outline-width:var(--gse-semantic-focusRing-default-border-width);outline-style:var(--gse-semantic-focusRing-default-border-style);outline-color:var(--gse-semantic-focusRing-default-border-color);outline-offset:var(--gse-semantic-focusRing-offset)}.gux-focus-ring-focused-visible:focus-visible{outline-width:var(--gse-semantic-focusRing-default-border-width);outline-style:var(--gse-semantic-focusRing-default-border-style);outline-color:var(--gse-semantic-focusRing-default-border-color);outline-offset:var(--gse-semantic-focusRing-offset)}.gux-focus-ring-small-focused:focus{outline-width:var(--gse-semantic-focusRing-small-border-width);outline-style:var(--gse-semantic-focusRing-small-border-style);outline-color:var(--gse-semantic-focusRing-small-border-color)}.gux-focus-ring-small-focused-within:focus-within{outline-width:var(--gse-semantic-focusRing-small-border-width);outline-style:var(--gse-semantic-focusRing-small-border-style);outline-color:var(--gse-semantic-focusRing-small-border-color)}.gux-focus-ring-small-focused-visible:focus-visible{outline-width:var(--gse-semantic-focusRing-small-border-width);outline-style:var(--gse-semantic-focusRing-small-border-style);outline-color:var(--gse-semantic-focusRing-small-border-color)}.gux-icon-anchor gux-icon{padding-right:var(--gse-ui-links-inLine-padding)}gux-tab-advanced-list .gux-tab-container{display:flex;align-items:flex-end;width:100%;height:50px;margin-bottom:16px;overflow-x:auto;overflow-y:hidden;background-color:#f6f7f9;border-bottom:1px solid #d7dce5;border-radius:4px 4px 0 0}gux-tab-advanced-list .gux-tab-container .action-button-container{display:flex;border-radius:4px}gux-tab-advanced-list .gux-tab-container .action-button-container .add-tab-button{min-width:35px;height:50px;padding:0;margin-left:2px;color:#2e394c;background-color:#e2e6ee;border:none;border-radius:4px;transition:color 0.25s}gux-tab-advanced-list .gux-tab-container .action-button-container .add-tab-button [slot=add-tab]{display:inline-flex;align-items:center;padding:0 12px;white-space:nowrap;font-family:var(--gse-core-fontFamily-body), sans-serif;font-weight:var(--gse-core-fontWeight-bold)}gux-tab-advanced-list .gux-tab-container .action-button-container .add-tab-button [slot=add-tab] gux-icon{padding-right:8px}gux-tab-advanced-list .gux-tab-container .action-button-container .add-tab-button:disabled{opacity:0.5}gux-tab-advanced-list .gux-tab-container .action-button-container .add-tab-button:hover{background-color:#d7dce5}gux-tab-advanced-list .gux-tab-container .action-button-container .add-tab-button:active{background-color:#c8cfda}gux-tab-advanced-list .gux-tab-container .action-button-container .add-tab-button:focus-visible{outline:none;box-shadow:inset 0 0 0 3px #aac9ff}gux-tab-advanced-list .gux-tab-container .action-button-container .add-tab-button:focus-visible{border-radius:5px;outline:none;box-shadow:inset 0 0 0 3px #aac9ff}gux-tab-advanced-list .gux-tab-container .action-button-container .add-tab-button gux-icon{width:16px;height:16px}gux-tab-advanced-list .gux-tab-container .action-button-container .gux-scroll-button-container{display:flex;border-radius:4px}gux-tab-advanced-list .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button{display:flex;align-items:center;justify-content:center;width:28px;height:50px;padding:0;color:#2e394c;background-color:#e2e6ee;border:none;border-radius:4px;transition:color 0.25s}gux-tab-advanced-list .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button:focus-visible{border:3px solid #aac9ff;border-radius:5px;outline:none}gux-tab-advanced-list .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button gux-icon{width:16px;height:16px}gux-tab-advanced-list .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button:focus-visible{border:3px solid #aac9ff;outline:none}gux-tab-advanced-list .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button:hover{background-color:#d7dce5}gux-tab-advanced-list .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button:active{background-color:#c8cfda}gux-tab-advanced-list .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button:focus-visible{outline-width:var(--gse-semantic-focusRing-default-border-width);outline-style:var(--gse-semantic-focusRing-default-border-style);outline-color:var(--gse-semantic-focusRing-default-border-color);outline-offset:var(--gse-semantic-focusRing-offset)}gux-tab-advanced-list .gux-tab-container .gux-scrollable-section{display:flex;align-items:flex-end;height:50px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none}gux-tab-advanced-list .gux-tab-container .gux-scrollable-section::-webkit-scrollbar{height:0}gux-tab-advanced-list .gux-sr-only{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;

package/dist/cjs/gux-tab-advanced-panel.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
 
-const guxTabAdvancedPanelCss = "gux-tab-advanced-panel div[role='tabpanel']:focus{outline:none}gux-tab-advanced-panel div[role='tabpanel']:focus-visible{outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}";
+const guxTabAdvancedPanelCss = ".gux-focus-ring-focused:focus{outline-width:var(--gse-semantic-focusRing-default-border-width);outline-style:var(--gse-semantic-focusRing-default-border-style);outline-color:var(--gse-semantic-focusRing-default-border-color);outline-offset:var(--gse-semantic-focusRing-offset)}.gux-focus-ring-focused-within:focus-within{outline-width:var(--gse-semantic-focusRing-default-border-width);outline-style:var(--gse-semantic-focusRing-default-border-style);outline-color:var(--gse-semantic-focusRing-default-border-color);outline-offset:var(--gse-semantic-focusRing-offset)}.gux-focus-ring-focused-visible:focus-visible{outline-width:var(--gse-semantic-focusRing-default-border-width);outline-style:var(--gse-semantic-focusRing-default-border-style);outline-color:var(--gse-semantic-focusRing-default-border-color);outline-offset:var(--gse-semantic-focusRing-offset)}.gux-focus-ring-small-focused:focus{outline-width:var(--gse-semantic-focusRing-small-border-width);outline-style:var(--gse-semantic-focusRing-small-border-style);outline-color:var(--gse-semantic-focusRing-small-border-color)}.gux-focus-ring-small-focused-within:focus-within{outline-width:var(--gse-semantic-focusRing-small-border-width);outline-style:var(--gse-semantic-focusRing-small-border-style);outline-color:var(--gse-semantic-focusRing-small-border-color)}.gux-focus-ring-small-focused-visible:focus-visible{outline-width:var(--gse-semantic-focusRing-small-border-width);outline-style:var(--gse-semantic-focusRing-small-border-style);outline-color:var(--gse-semantic-focusRing-small-border-color)}gux-tab-advanced-panel div[role=tabpanel]:focus{outline:none}gux-tab-advanced-panel div[role=tabpanel]:focus-visible{outline-width:var(--gse-semantic-focusRing-default-border-width);outline-style:var(--gse-semantic-focusRing-default-border-style);outline-color:var(--gse-semantic-focusRing-default-border-color);outline-offset:var(--gse-semantic-focusRing-offset)}";
 
 const GuxTabAdvancedPanel = class {
   constructor(hostRef) {

package/dist/cjs/gux-tab-list.cjs.entry.js

@@ -19,7 +19,7 @@ const tabsResources = {
 	scrollDown: scrollDown
 };
 
-const guxTabListCss = "gux-tabs[orientation='vertical']{height:100%}gux-tabs[orientation='vertical']>gux-tab-list .gux-tab-container{display:flex;flex-direction:column;width:160px;max-width:160px;height:100%;margin-right:16px;border-right:1px solid #d7dce5}gux-tabs[orientation='vertical']>gux-tab-list .gux-tab-container .gux-scroll-button-container{width:100%}gux-tabs[orientation='vertical']>gux-tab-list .gux-tab-container .gux-scroll-button-container button{width:100%}gux-tabs[orientation='vertical']>gux-tab-list .gux-tab-container .gux-scrollable-section{flex-direction:column;height:100%;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}gux-tabs[orientation='vertical']>gux-tab-list .gux-tab-container .gux-scrollable-section::-webkit-scrollbar{width:0;height:0}gux-tabs:not([orientation='vertical'])>gux-tab-list .gux-tab-container{height:40px;margin-bottom:16px;border-bottom:1px solid #d7dce5}gux-tabs:not([orientation='vertical'])>gux-tab-list .gux-scrollable-section{overflow-x:auto}gux-tabs .gux-tab-container{box-sizing:content-box;display:flex;width:100%;overflow-x:hidden;overflow-y:hidden;background-color:#fff}gux-tabs .gux-scrollable-section{display:flex;flex:1 1 auto;scroll-behavior:smooth;scrollbar-width:none}gux-tabs .gux-scrollable-section::-webkit-scrollbar{height:0}gux-tabs .gux-scroll-button-container{display:flex;border-radius:4px}gux-tabs .gux-scroll-button-container .gux-scroll-button{display:flex;align-items:center;justify-content:center;width:28px;height:40px;color:#202937;cursor:pointer;background-color:#c8cfda;background-color:#e2e6ee;border:none;border-radius:4px}gux-tabs .gux-scroll-button-container .gux-scroll-button gux-icon{width:16px;height:16px}gux-tabs .gux-scroll-button-container .gux-scroll-button:hover:not(:disabled){background-color:#d7dce5}gux-tabs .gux-scroll-button-container .gux-scroll-button:active:not(:disabled){background-color:#d2d8e5}gux-tabs .gux-scroll-button-container .gux-scroll-button:disabled{cursor:default;opacity:0.5}";
+const guxTabListCss = "gux-tabs[orientation=vertical]{height:100%}gux-tabs[orientation=vertical]>gux-tab-list .gux-tab-container{display:flex;flex-direction:column;width:160px;max-width:160px;height:100%;margin-right:16px;border-right:1px solid #d7dce5}gux-tabs[orientation=vertical]>gux-tab-list .gux-tab-container .gux-scroll-button-container{width:100%}gux-tabs[orientation=vertical]>gux-tab-list .gux-tab-container .gux-scroll-button-container button{width:100%}gux-tabs[orientation=vertical]>gux-tab-list .gux-tab-container .gux-scrollable-section{flex-direction:column;height:100%;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}gux-tabs[orientation=vertical]>gux-tab-list .gux-tab-container .gux-scrollable-section::-webkit-scrollbar{width:0;height:0}gux-tabs:not([orientation=vertical])>gux-tab-list .gux-tab-container{height:40px;margin-bottom:16px;border-bottom:1px solid #d7dce5}gux-tabs:not([orientation=vertical])>gux-tab-list .gux-scrollable-section{overflow-x:auto}gux-tabs .gux-tab-container{box-sizing:content-box;display:flex;width:100%;overflow-x:hidden;overflow-y:hidden;background-color:#fff}gux-tabs .gux-scrollable-section{display:flex;flex:1 1 auto;scroll-behavior:smooth;scrollbar-width:none}gux-tabs .gux-scrollable-section::-webkit-scrollbar{height:0}gux-tabs .gux-scroll-button-container{display:flex;border-radius:4px}gux-tabs .gux-scroll-button-container .gux-scroll-button{display:flex;align-items:center;justify-content:center;width:28px;height:40px;color:#202937;cursor:pointer;background-color:#c8cfda;background-color:#e2e6ee;border:none;border-radius:4px}gux-tabs .gux-scroll-button-container .gux-scroll-button gux-icon{width:16px;height:16px}gux-tabs .gux-scroll-button-container .gux-scroll-button:hover:not(:disabled){background-color:#d7dce5}gux-tabs .gux-scroll-button-container .gux-scroll-button:active:not(:disabled){background-color:#d2d8e5}gux-tabs .gux-scroll-button-container .gux-scroll-button:disabled{cursor:default;opacity:0.5}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
 
-const guxTabCss = "gux-tabs[orientation='vertical']>gux-tab-list .gux-tab{display:flex;justify-content:flex-end;padding:12px 16px}gux-tabs[orientation='vertical']>gux-tab-list .gux-tab.gux-active{padding-right:14px;border-right:2px solid #2a60c8}gux-tabs[orientation='vertical']>gux-tab-list .gux-tab:hover:not(.gux-active):not(.gux-disabled){padding-right:14px;border-right:2px solid #8a97ad}gux-tabs:not([orientation='vertical'])>gux-tab-list .gux-tab{box-sizing:border-box;padding-bottom:2px}gux-tabs:not([orientation='vertical'])>gux-tab-list .gux-tab.gux-active{padding-bottom:0;border-bottom:2px solid #2a60c8}gux-tabs:not([orientation='vertical'])>gux-tab-list .gux-tab:hover:not(.gux-active):not(.gux-disabled){padding-bottom:0;border-bottom:2px solid #8a97ad}gux-tabs:not([orientation='vertical'])>gux-tab-list .gux-tab gux-tooltip-title{margin:auto}gux-tabs[alignment='center']>gux-tab-list .gux-scrollable-section{justify-content:center}gux-tabs[alignment='full-width']>gux-tab-list .gux-scrollable-section{flex-grow:1}gux-tabs[alignment='full-width']>gux-tab-list gux-tab{width:100%;max-width:100%}gux-tabs[alignment='full-width']>gux-tab-list gux-tab .gux-tab{width:100%;max-width:100%}gux-tab{display:flex;max-width:160px}gux-tab .gux-tab{display:flex;align-items:center;width:100%;max-width:160px;height:40px;padding:0 16px;font-size:14px;color:#2e394c;cursor:pointer;background-color:#fff;border:none}gux-tab .gux-tab.gux-disabled{cursor:default}gux-tab .gux-tab.gux-disabled gux-tooltip-title{color:rgba(46, 57, 76, 0.5)}gux-tab .gux-tab:focus-visible{padding:0 13px 3px;border:3px solid #aac9ff;border-radius:5px;outline:none}gux-tab .gux-tab gux-tooltip-title{max-width:160px;white-space:nowrap}";
+const guxTabCss = "gux-tabs[orientation=vertical]>gux-tab-list .gux-tab{display:flex;justify-content:flex-end;padding:12px 16px}gux-tabs[orientation=vertical]>gux-tab-list .gux-tab.gux-active{padding-right:14px;border-right:2px solid #2a60c8}gux-tabs[orientation=vertical]>gux-tab-list .gux-tab:hover:not(.gux-active):not(.gux-disabled){padding-right:14px;border-right:2px solid #8a97ad}gux-tabs:not([orientation=vertical])>gux-tab-list .gux-tab{box-sizing:border-box;padding-bottom:2px}gux-tabs:not([orientation=vertical])>gux-tab-list .gux-tab.gux-active{padding-bottom:0;border-bottom:2px solid #2a60c8}gux-tabs:not([orientation=vertical])>gux-tab-list .gux-tab:hover:not(.gux-active):not(.gux-disabled){padding-bottom:0;border-bottom:2px solid #8a97ad}gux-tabs:not([orientation=vertical])>gux-tab-list .gux-tab gux-tooltip-title{margin:auto}gux-tabs[alignment=center]>gux-tab-list .gux-scrollable-section{justify-content:center}gux-tabs[alignment=full-width]>gux-tab-list .gux-scrollable-section{flex-grow:1}gux-tabs[alignment=full-width]>gux-tab-list gux-tab{width:100%;max-width:100%}gux-tabs[alignment=full-width]>gux-tab-list gux-tab .gux-tab{width:100%;max-width:100%}gux-tab{display:flex;max-width:160px}gux-tab .gux-tab{display:flex;align-items:center;width:100%;max-width:160px;height:40px;padding:0 16px;font-size:14px;color:#2e394c;cursor:pointer;background-color:#fff;border:none}gux-tab .gux-tab.gux-disabled{cursor:default}gux-tab .gux-tab.gux-disabled gux-tooltip-title{color:rgba(46, 57, 76, 0.5)}gux-tab .gux-tab:focus-visible{padding:0 13px 3px;border:3px solid #aac9ff;border-radius:5px;outline:none}gux-tab .gux-tab gux-tooltip-title{max-width:160px;white-space:nowrap}";
 
 const GuxTab = class {
   constructor(hostRef) {

package/dist/cjs/gux-table-toolbar-action.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
 const capitalizeFirstLetter = require('./capitalize-first-letter-8e2f04e5.js');
-const usage = require('./usage-7433aa78.js');
+const usage = require('./usage-9520c06b.js');
 const index$1 = require('./index-9bbde1aa.js');
 require('./get-closest-element-ab4b2eee.js');
 

package/dist/cjs/gux-table-toolbar-custom-action.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-7433aa78.js');
+const usage = require('./usage-9520c06b.js');
 const getSlotTextContent = require('./get-slot-text-content-30aa5492.js');
 
 const guxTableToolbarCustomActionCss = ":host([disabled]),button[disabled]{pointer-events:none}.gux-sr-only{display:flex}.gux-sr-only:not(:focus):not(:active){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.gux-action-title{display:flex;flex-direction:row;gap:var(--gse-ui-button-gap);align-items:center}.gux-action-title slot[name=icon]::slotted(gux-icon){width:var(--gse-ui-icon-size-sm);height:var(--gse-ui-icon-size-sm)}";

package/dist/cjs/gux-table-toolbar-menu-button.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-7433aa78.js');
+const usage = require('./usage-9520c06b.js');
 const onClickOutside = require('./on-click-outside-428f8bbf.js');
 const index$1 = require('./index-9bbde1aa.js');
 const afterNextRender = require('./after-next-render-a09f528a.js');
@@ -98,7 +98,7 @@ const GuxTableToolbarMenuButton = class {
     usage.trackComponent(this.root);
   }
   render() {
-    return (index.h(index.Host, { class: { 'gux-show-menu': this.showMenu } }, index.h("gux-popup", { expanded: this.expanded }, index.h("div", { slot: "target", class: "gux-toolbar-menu-container" }, index.h("gux-button-slot", { class: "gux-menu-button" }, index.h("button", { type: "button", ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.expanded.toString() }, index.h("gux-tooltip-title", { ref: el => (this.tooltipTitleElement = el) }, index.h("span", null, index.h("gux-icon", { "screenreader-text": this.i18n('additionalActions'), "icon-name": "menu-kebab-horizontal" })))))), index.h("div", { class: "gux-list-container", slot: "popup" }, index.h("gux-list", { ref: el => (this.listElement = el) }, index.h("slot", null))))));
+    return (index.h(index.Host, { class: { 'gux-show-menu': this.showMenu } }, index.h("gux-popup", { expanded: this.expanded, "exceed-target-width": true }, index.h("div", { slot: "target", class: "gux-toolbar-menu-container" }, index.h("gux-button-slot", { class: "gux-menu-button" }, index.h("button", { type: "button", ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.expanded.toString() }, index.h("gux-tooltip-title", { ref: el => (this.tooltipTitleElement = el) }, index.h("span", null, index.h("gux-icon", { "screenreader-text": this.i18n('additionalActions'), "icon-name": "menu-kebab-horizontal" })))))), index.h("div", { class: "gux-list-container", slot: "popup" }, index.h("gux-list", { ref: el => (this.listElement = el) }, index.h("slot", null))))));
   }
   static get delegatesFocus() { return true; }
   get root() { return index.getElement(this); }

package/dist/cjs/gux-table-toolbar.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-0d0fdb85.js');
 const onResize = require('./on-resize-ee6a4b87.js');
 const onMutation = require('./on-mutation-247f99dd.js');
-const usage = require('./usage-7433aa78.js');
+const usage = require('./usage-9520c06b.js');
 const getSlot = require('./get-slot-097ade01.js');
 
 /**

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

@@ -6,7 +6,7 @@ const index = require('./index-0d0fdb85.js');
 const index$1 = require('./index-9bbde1aa.js');
 const whenEventIsFrom = require('./when-event-is-from-69b5ca13.js');
 const randomHtmlId = require('./random-html-id-b86b61c0.js');
-const usage = require('./usage-7433aa78.js');
+const usage = require('./usage-9520c06b.js');
 const en = require('./en-d1b32383.js');
 require('./get-closest-element-ab4b2eee.js');
 

package/dist/cjs/gux-tabs-advanced.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-7433aa78.js');
+const usage = require('./usage-9520c06b.js');
 
 const guxTabsAdvancedCss = "gux-tabs-advanced{-custom-noop:noop}";
 

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-7433aa78.js');
+const usage = require('./usage-9520c06b.js');
 
 const guxTabsCss = ":host(.gux-flex){display:flex;flex-direction:column}:host(.gux-flex) .gux-tabs{display:flex;flex-direction:column;height:100%}:host(.gux-flex) .gux-panel-container{display:flex;flex-direction:column;height:100%}.gux-tabs.gux-vertical{display:flex;height:100%}";
 

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
 const index$1 = require('./index-9bbde1aa.js');
-const usage = require('./usage-7433aa78.js');
+const usage = require('./usage-9520c06b.js');
 require('./get-closest-element-ab4b2eee.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-0d0fdb85.js');
-const usage = require('./usage-7433aa78.js');
+const usage = require('./usage-9520c06b.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-0d0fdb85.js');
-const usage = require('./usage-7433aa78.js');
+const usage = require('./usage-9520c06b.js');
 const getValidTimezone = require('./get-valid-timezone-39ba3e64.js');
 const index$1 = require('./index-9bbde1aa.js');
 require('./get-closest-element-ab4b2eee.js');

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

@@ -7,7 +7,7 @@ const onClickOutside = require('./on-click-outside-428f8bbf.js');
 const simulateNativeEvent = require('./simulate-native-event-fe3e62da.js');
 const afterNextRender = require('./after-next-render-a09f528a.js');
 const index = require('./index-9bbde1aa.js');
-const usage = require('./usage-7433aa78.js');
+const usage = require('./usage-9520c06b.js');
 require('./get-closest-element-ab4b2eee.js');
 
 const am = "AM";

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-0d0fdb85.js');
 const index$1 = require('./index-9bbde1aa.js');
-const usage = require('./usage-7433aa78.js');
+const usage = require('./usage-9520c06b.js');
 const simulateNativeEvent = require('./simulate-native-event-fe3e62da.js');
 require('./get-closest-element-ab4b2eee.js');
 

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-7433aa78.js');
+const usage = require('./usage-9520c06b.js');
 const hasSlot = require('./has-slot-2e73d6e7.js');
 
 const guxToastCss = ".gux-toast{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;gap:var(--gse-ui-toast-gap);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;align-content:stretch;align-items:flex-start;align-self:auto;justify-content:flex-start;order:0;gap:var(--gse-ui-toast-gapButton)}.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);line-height:var(--gse-ui-toast-heading-lineHeight);font-size:var(--gse-ui-toast-heading-fontSize);font-weight:var(--gse-ui-toast-heading-fontWeight)}.gux-toast .gux-content .gux-message .gux-message-body{font-family:var(--gse-ui-toast-text-fontFamily);line-height:var(--gse-ui-toast-text-lineHeight);font-size:var(--gse-ui-toast-text-fontSize)}.gux-toast .gux-content .gux-buttons-bar{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;gap:var(--gse-ui-toast-buttonBar-gap)}.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-0d0fdb85.js');
-const usage = require('./usage-7433aa78.js');
+const usage = require('./usage-9520c06b.js');
 const randomHtmlId = require('./random-html-id-b86b61c0.js');
 const index$1 = require('./index-9bbde1aa.js');
 require('./get-closest-element-ab4b2eee.js');

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-0d0fdb85.js');
 const floatingUi_dom_esm = require('./floating-ui.dom.esm-2ed3685b.js');
 const randomHtmlId = require('./random-html-id-b86b61c0.js');
-const usage = require('./usage-7433aa78.js');
+const usage = require('./usage-9520c06b.js');
 const findElementById = require('./find-element-by-id-ecf0efa3.js');
 const afterNextRender = require('./after-next-render-a09f528a.js');
 

package/dist/cjs/{usage-7433aa78.js → usage-9520c06b.js}

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

package/dist/collection/components/beta/gux-month-picker/gux-month-picker.js

@@ -187,7 +187,7 @@ export class GuxMonthPicker {
     return (h("gux-month-calendar", { slot: "popup", ref: (el) => (this.monthCalendarElement = el), onInput: () => this.onMonthCalendarInput(), value: this.value, min: this.min, max: this.max }));
   }
   render() {
-    return (h("gux-popup", { expanded: this.expanded, disabled: this.disabled }, this.renderTarget(), this.renderPopup()));
+    return (h("gux-popup", { expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
   }
   static get is() { return "gux-month-picker-beta"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-phone-input/gux-phone-input.css

@@ -75,7 +75,7 @@
   background-image: none;
   border: 1px solid #6b7585;
   border-radius: 4px;
-  box-shadow: inset 0 0 4px fade(#202937, 16%);
+  box-shadow: inset 0 0 4px rgba(32, 41, 55, 0.16);
 }
 .target-container.gux-error {
   border-color: #ea0b0b;

package/dist/collection/components/legacy/gux-advanced-dropdown-legacy/gux-advanced-dropdown.css

@@ -108,7 +108,6 @@ gux-popup .gux-select-field:hover .gux-icon-wrapper gux-icon {
   color: #2e394c;
 }
 gux-popup .gux-advanced-dropdown-menu {
-  width: 100%;
   background: #fdfdfd;
   border: 1px solid #b4bccb;
   border-radius: 4px;

package/dist/collection/components/stable/gux-content-search/gux-content-search.css

@@ -1,21 +1,56 @@
+.gux-focus-ring-focused:focus {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-focused-within:focus-within {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-focused-visible:focus-visible {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-small-focused:focus {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
+.gux-focus-ring-small-focused-within:focus-within {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
+.gux-focus-ring-small-focused-visible:focus-visible {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
 :host {
   display: inline-block;
   width: 300px;
   min-width: 300px;
   color: #596373;
 }
+
 ::slotted(input) {
   box-sizing: border-box;
   width: 100%;
-  height: 32px;
-  padding: 4px 12px;
   font-family: inherit;
   font-size: 12px;
   line-height: 1.6667;
-  background-color: #fdfdfd;
   background-image: none;
-  border: 1px solid #6b7585;
-  border-radius: 2px;
   flex-basis: 100%;
   flex-shrink: 1;
   min-width: 0;
@@ -30,18 +65,12 @@
 ::slotted(input)::placeholder {
   color: #596373;
 }
-::slotted(input).gux-focused,
-::slotted(input):focus-visible {
-  border: 1px solid #2a60c8;
-  outline: none;
-  box-shadow: 0 0 4px rgba(170, 201, 255, 0.5);
-}
-::slotted(input).gux-focused,
-::slotted(input):focus {
+::slotted(input).gux-focused, ::slotted(input):focus, ::slotted(input):focus-visible {
   border: 0;
   outline: none;
   box-shadow: none;
 }
+
 .gux-content-search {
   box-sizing: border-box;
   display: flex;
@@ -61,8 +90,7 @@
   cursor: default;
   opacity: 0.5;
 }
-.gux-content-search:focus-visible,
-.gux-content-search:focus-within {
+.gux-content-search:focus-visible, .gux-content-search:focus-within {
   border: 1px solid #2a60c8;
   outline: none;
   box-shadow: 0 0 4px #75a8ff;
@@ -114,14 +142,14 @@
   cursor: default;
   opacity: 0.5;
 }
-.gux-content-search .gux-content-control-panel button:not(:disabled):hover,
-.gux-content-search .gux-content-control-panel button:not(:disabled):focus-visible {
+.gux-content-search .gux-content-control-panel button:not(:disabled):hover, .gux-content-search .gux-content-control-panel button:not(:disabled):focus-visible {
   color: #2e394c;
 }
 .gux-content-search .gux-content-control-panel button:not(.gux-clear-button):focus-visible:enabled {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
 }
 .gux-content-search .gux-content-control-panel button.gux-clear-button {
   flex-shrink: 0;
@@ -167,4 +195,4 @@
   padding-right: 0;
   padding-left: 0;
   margin-right: 4px;
-}
+}

package/dist/collection/components/stable/gux-content-search/gux-content-search.js

@@ -136,7 +136,7 @@ export class GuxContentSearch {
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-content-search.less"]
+      "$": ["gux-content-search.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/stable/gux-context-menu/gux-context-menu.js

@@ -107,7 +107,7 @@ export class GuxContextMenu {
     this.i18n = await buildI18nForComponent(this.root, translationResources);
   }
   render() {
-    return (h(Host, null, h("gux-popup", { expanded: this.isOpen }, h("div", { slot: "target", class: "gux-button-container" }, h("gux-button-slot", { accent: "ghost" }, h("button", { type: "button", onClick: () => this.onButtonClick(), id: this.buttonId, class: { 'gux-compact': this.compact }, ref: el => (this.button = el), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString(), disabled: this.disabled }, h("gux-icon", { "icon-name": "menu-kebab-vertical", "screenreader-text": this.screenreaderText ||
+    return (h(Host, null, h("gux-popup", { expanded: this.isOpen, "exceed-target-width": true }, h("div", { slot: "target", class: "gux-button-container" }, h("gux-button-slot", { accent: "ghost" }, h("button", { type: "button", onClick: () => this.onButtonClick(), id: this.buttonId, class: { 'gux-compact': this.compact }, ref: el => (this.button = el), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString(), disabled: this.disabled }, h("gux-icon", { "icon-name": "menu-kebab-vertical", "screenreader-text": this.screenreaderText ||
         this.i18n('contextMenuScreenreaderText') })))), h("div", { slot: "popup", class: "gux-list-container" }, h("gux-list", { onClick: e => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", null))))));
   }
   static get is() { return "gux-context-menu"; }