genesys-spark-components 4.0.0-beta.26 → 4.0.0-beta.28

package/dist/collection/components/stable/gux-popover-list/gux-popover-list.css

@@ -4,43 +4,17 @@
   left: 0;
   z-index: var(--gux-zindex-popover, 2);
   display: inline-block;
-  padding: 8px 0;
-  color: #2e394c;
-  background-color: #fdfdfd;
-  border: 1px solid #b4bccb;
-  border-radius: 4px;
-  box-shadow: 0 2px 4px rgba(32, 41, 55, 0.24);
+  padding: 8px 0px;
+  background-color: var(--gse-ui-popover-backgroundColor);
+  border-radius: var(--gse-ui-popover-borderRadius);
+  box-shadow: var(--gse-ui-popover-boxShadow-x) var(--gse-ui-popover-boxShadow-y) var(--gse-ui-popover-boxShadow-blur) var(--gse-ui-popover-boxShadow-spread) var(--gse-ui-tooltip-boxShadow-color);
 }
 .gux-popover-wrapper.gux-hidden {
   display: none;
 }
 .gux-popover-wrapper .gux-arrow {
   position: absolute;
-  width: 10px;
-  height: 10px;
-  background: inherit;
-}
-.gux-popover-wrapper[data-placement='bottom'] .gux-arrow,
-.gux-popover-wrapper[data-placement='bottom-start'] .gux-arrow,
-.gux-popover-wrapper[data-placement='bottom-end'] .gux-arrow {
-  border-top: 1px solid #b4bccb;
-  border-left: 1px solid #b4bccb;
-}
-.gux-popover-wrapper[data-placement='top'] .gux-arrow,
-.gux-popover-wrapper[data-placement='top-start'] .gux-arrow,
-.gux-popover-wrapper[data-placement='top-end'] .gux-arrow {
-  border-right: 1px solid #b4bccb;
-  border-bottom: 1px solid #b4bccb;
-}
-.gux-popover-wrapper[data-placement='left'] .gux-arrow,
-.gux-popover-wrapper[data-placement='left-start'] .gux-arrow,
-.gux-popover-wrapper[data-placement='left-end'] .gux-arrow {
-  border-top: 1px solid #b4bccb;
-  border-right: 1px solid #b4bccb;
-}
-.gux-popover-wrapper[data-placement='right'] .gux-arrow,
-.gux-popover-wrapper[data-placement='right-start'] .gux-arrow,
-.gux-popover-wrapper[data-placement='right-end'] .gux-arrow {
-  border-bottom: 1px solid #b4bccb;
-  border-left: 1px solid #b4bccb;
-}
+  width: var(--gse-ui-popover-anchor-width);
+  height: var(--gse-ui-popover-anchor-width);
+  background: var(--gse-ui-popover-backgroundColor);
+}

package/dist/collection/components/stable/gux-popover-list/gux-popover-list.js

@@ -127,7 +127,7 @@ export class GuxPopoverList {
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-popover-list.less"]
+      "$": ["gux-popover-list.scss"]
     };
   }
   static get styleUrls() {

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

@@ -7,6 +7,7 @@
 .gux-popup-container {
   position: fixed;
   background-color: white;
+  z-index: var(--gux-zindex-popup, 1);
   width: max-content;
   visibility: hidden;
 }

package/dist/collection/components/stable/gux-skip-navigation-list/gux-skip-navigation-item/gux-skip-navigation-item.css

@@ -6,6 +6,7 @@
   height: 1px;
   overflow: hidden;
 }
+
 :host(:focus-within) {
   position: inherit;
   top: inherit;
@@ -14,9 +15,10 @@
   height: inherit;
   overflow: inherit;
 }
+
 ::slotted(a) {
   padding: 12px;
   font-size: 2rem;
   background-color: #fdfdfd;
-  box-shadow: 0 8px 24px rgba(32, 41, 55, 0.4), 0 0 0 1px #fdfdfd, 0 0 0 4px #aac9ff !important;
-}
+  box-shadow: 0 8px 24px fade(#202937, 40%), 0 0 0 1px #fdfdfd, 0 0 0 4px #aac9ff !important;
+}

package/dist/collection/components/stable/gux-skip-navigation-list/gux-skip-navigation-item/gux-skip-navigation-item.js

@@ -11,7 +11,7 @@ export class GuxSkipNavigationItem {
   static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-skip-navigation-item.less"]
+      "$": ["gux-skip-navigation-item.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/stable/gux-switch/gux-switch-item/gux-switch-item.css

@@ -1,3 +1,171 @@
+.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);
+}
+
+/* Font Definitions. */
+/* From: https://google-webfonts-helper.herokuapp.com */
+/* roboto-300 - latin */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 300;
+  src: url("./fonts/roboto-v20-latin-300.eot"); /* IE9 Compat Modes */
+  src: local("Roboto Light"), local("Roboto-Light"), url("./fonts/roboto-v20-latin-300.eot?#iefix") format("embedded-opentype"), url("./fonts/roboto-v20-latin-300.woff2") format("woff2"), url("./fonts/roboto-v20-latin-300.woff") format("woff"), url("./fonts/roboto-v20-latin-300.ttf") format("truetype"), url("./fonts/roboto-v20-latin-300.svg#Roboto") format("svg"); /* Legacy iOS */
+}
+/* roboto-regular - latin */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 400;
+  src: url("./fonts/roboto-v20-latin-regular.eot"); /* IE9 Compat Modes */
+  src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-regular.eot?#iefix") format("embedded-opentype"), url("./fonts/roboto-v20-latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-regular.woff") format("woff"), url("./fonts/roboto-v20-latin-regular.ttf") format("truetype"), url("./fonts/roboto-v20-latin-regular.svg#Roboto") format("svg"); /* Legacy iOS */
+}
+/* roboto-italic - latin */
+@font-face {
+  font-family: Roboto;
+  font-style: italic;
+  font-weight: 400;
+  src: url("./fonts/roboto-v20-latin-italic.eot"); /* IE9 Compat Modes */
+  src: local("Roboto Italic"), local("Roboto-Italic"), url("./fonts/roboto-v20-latin-italic.eot?#iefix") format("embedded-opentype"), url("./fonts/roboto-v20-latin-italic.woff2") format("woff2"), url("./fonts/roboto-v20-latin-italic.woff") format("woff"), url("./fonts/roboto-v20-latin-italic.ttf") format("truetype"), url("./fonts/roboto-v20-latin-italic.svg#Roboto") format("svg"); /* Legacy iOS */
+}
+/* roboto-700 - latin */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 700;
+  src: url("./fonts/roboto-v20-latin-700.eot"); /* IE9 Compat Modes */
+  src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-700.eot?#iefix") format("embedded-opentype"), url("./fonts/roboto-v20-latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-700.woff") format("woff"), url("./fonts/roboto-v20-latin-700.ttf") format("truetype"), url("./fonts/roboto-v20-latin-700.svg#Roboto") format("svg"); /* Legacy iOS */
+}
+/*
+ * Typography styles and mixins.
+ */
+/* Helpers */
+/* Base typography */
+body {
+  font-family: Roboto, sans-serif;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 20px;
+}
+
+/* Headings */
+h1 {
+  font-family: Roboto, sans-serif;
+  font-weight: 400;
+  font-weight: 300;
+  font-size: 24px;
+  line-height: 32px;
+}
+
+h2 {
+  font-family: Roboto, sans-serif;
+  font-weight: 400;
+  font-weight: 300;
+  font-size: 18px;
+  line-height: 24px;
+}
+
+h3 {
+  font-family: Roboto, sans-serif;
+  font-weight: 400;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+h4,
+h5,
+h6 {
+  font-family: Roboto, sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+/* Anchor */
+.gux-icon-anchor gux-icon {
+  padding-right: var(--gse-ui-links-inLine-padding);
+}
+
+a {
+  color: var(--gse-ui-link-default-color);
+  text-decoration: underline;
+  border-radius: var(--gse-ui-links-borderRadius);
+}
+a:hover {
+  color: var(--gse-ui-link-hover-color);
+}
+a:active {
+  color: var(--gse-ui-link-active-color);
+}
+a:visited {
+  color: var(--gse-ui-link-visited-color);
+}
+a: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);
+}
+
+table a {
+  color: var(--gse-ui-link-default-color);
+  text-decoration: underline;
+  border-radius: var(--gse-ui-links-borderRadius);
+  text-decoration: none;
+}
+table a:hover {
+  color: var(--gse-ui-link-hover-color);
+}
+table a:active {
+  color: var(--gse-ui-link-active-color);
+}
+table a:visited {
+  color: var(--gse-ui-link-visited-color);
+}
+table a: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);
+}
+
+/* Custom Styles */
 gux-switch-item > .gux-switch-item {
   font-family: Roboto, sans-serif;
   font-weight: 400;
@@ -22,18 +190,17 @@ gux-switch-item.gux-selected {
   font-weight: 400;
   font-weight: 700;
 }
+
 gux-switch > gux-switch-item .gux-switch-item {
   padding: 0 8px 4px;
   border-bottom: 1px solid #e2e6ee;
 }
-gux-switch > gux-switch-item .gux-switch-item:focus-visible,
-gux-switch > gux-switch-item .gux-switch-item:hover {
+gux-switch > gux-switch-item .gux-switch-item:focus-visible, gux-switch > gux-switch-item .gux-switch-item:hover {
   padding: 0 8px 1px;
   border-bottom: 4px solid #2a60c8;
   outline: none;
 }
-gux-switch > gux-switch-item .gux-switch-item:focus-visible > gux-icon svg,
-gux-switch > gux-switch-item .gux-switch-item:hover > gux-icon svg {
+gux-switch > gux-switch-item .gux-switch-item:focus-visible > gux-icon svg, gux-switch > gux-switch-item .gux-switch-item:hover > gux-icon svg {
   fill: #2e394c;
 }
 gux-switch > gux-switch-item .gux-switch-item > gux-icon {
@@ -55,8 +222,7 @@ gux-switch.gux-small > gux-switch-item .gux-switch-item {
   padding: 0 4px;
   border-bottom: 1px solid #e2e6ee;
 }
-gux-switch.gux-small > gux-switch-item .gux-switch-item:focus-visible,
-gux-switch.gux-small > gux-switch-item .gux-switch-item:hover {
+gux-switch.gux-small > gux-switch-item .gux-switch-item:focus-visible, gux-switch.gux-small > gux-switch-item .gux-switch-item:hover {
   border-bottom-color: #2e394c;
 }
 gux-switch.gux-small > gux-switch-item .gux-switch-item > gux-icon {
@@ -65,4 +231,4 @@ gux-switch.gux-small > gux-switch-item .gux-switch-item > gux-icon {
 }
 gux-switch.gux-small > gux-switch-item.gux-selected .gux-switch-item {
   border-bottom-color: #2e394c;
-}
+}

package/dist/collection/components/stable/gux-switch/gux-switch-item/gux-switch-item.js

@@ -19,7 +19,7 @@ export class GuxSwitchItem {
   static get is() { return "gux-switch-item"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-switch-item.less"]
+      "$": ["gux-switch-item.scss"]
     };
   }
   static get styleUrls() {

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

@@ -1,4 +1,4 @@
-gux-switch {
+:host {
   display: flex;
   align-items: flex-end;
-}
+}

package/dist/collection/components/stable/gux-switch/gux-switch.js

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

package/dist/collection/components/stable/gux-table/gux-table-select-menu/gux-table-select-menu.css

@@ -1,34 +1,40 @@
 .gux-focus-ring-focused:focus {
-  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-focus-ring-focused-within:focus-within {
-  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-focus-ring-focused-visible:focus-visible {
-  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-focus-ring-small-focused:focus {
-  outline: 2px solid #aac9ff;
-  outline-offset: 0;
+  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: 2px solid #aac9ff;
-  outline-offset: 0;
+  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: 2px solid #aac9ff;
-  outline-offset: 0;
+  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-table-select-menu {

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

@@ -1,34 +1,40 @@
 .gux-focus-ring-focused:focus {
-  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-focus-ring-focused-within:focus-within {
-  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-focus-ring-focused-visible:focus-visible {
-  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-focus-ring-small-focused:focus {
-  outline: 2px solid #aac9ff;
-  outline-offset: 0;
+  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: 2px solid #aac9ff;
-  outline-offset: 0;
+  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: 2px solid #aac9ff;
-  outline-offset: 0;
+  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);
 }
 
 /* Font Definitions. */
@@ -113,42 +119,50 @@ h6 {
 
 /* Anchor */
 .gux-icon-anchor gux-icon {
-  padding-right: 2px;
+  padding-right: var(--gse-ui-links-inLine-padding);
 }
 
 a {
-  color: #2a60c8;
+  color: var(--gse-ui-link-default-color);
   text-decoration: underline;
-  border-radius: 2px;
+  border-radius: var(--gse-ui-links-borderRadius);
 }
 a:hover {
-  color: #2754ac;
+  color: var(--gse-ui-link-hover-color);
 }
 a:active {
-  color: #23478f;
+  color: var(--gse-ui-link-active-color);
+}
+a:visited {
+  color: var(--gse-ui-link-visited-color);
 }
 a:focus-visible {
-  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);
 }
 
 table a {
-  color: #2a60c8;
+  color: var(--gse-ui-link-default-color);
   text-decoration: underline;
-  border-radius: 2px;
+  border-radius: var(--gse-ui-links-borderRadius);
   text-decoration: none;
 }
 table a:hover {
-  color: #2754ac;
+  color: var(--gse-ui-link-hover-color);
 }
 table a:active {
-  color: #23478f;
+  color: var(--gse-ui-link-active-color);
+}
+table a:visited {
+  color: var(--gse-ui-link-visited-color);
 }
 table a:focus-visible {
-  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);
 }
 
 /* Custom Styles */

package/dist/collection/components/stable/gux-tabs/gux-tab-panel/gux-tab-panel.css

@@ -1,8 +1,58 @@
-gux-tab-panel div[role='tabpanel']:focus {
-  outline: none;
+.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-tab-panel div[role='tabpanel']:focus-visible {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
+
+.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 {
+  height: calc(100% - 57px);
+}
+
+:host(:not([hidden])) {
+  display: flex;
+  flex-grow: 1;
+}
+
+:host(:focus) {
+  outline: none;
 }
+
+:host(: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);
+}

package/dist/collection/components/stable/gux-tabs/gux-tab-panel/gux-tab-panel.js

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 /**
  * @slot - content
  */
@@ -17,12 +17,13 @@ export class GuxTabPanel {
     }
   }
   render() {
-    return (h("div", { id: `gux-${this.tabId}-panel`, role: "tabpanel", "aria-labelledby": `gux-${this.tabId}-tab`, tabIndex: 0, hidden: !this.active }, h("slot", null)));
+    return (h(Host, { id: `gux-${this.tabId}-panel`, role: "tabpanel", "aria-labelledby": `gux-${this.tabId}-tab`, tabIndex: 0, hidden: !this.active }, h("slot", null)));
   }
   static get is() { return "gux-tab-panel"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-tab-panel.less"]
+      "$": ["gux-tab-panel.scss"]
     };
   }
   static get styleUrls() {