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

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-checkbox/gux-form-field-checkbox.css

@@ -1,3 +1,19 @@
+/**
+* @prop --gse-ui-checkbox-icon-height
+* @prop --gse-ui-checkbox-icon-width
+* @prop --gse-ui-checkbox-label-foregroundColor
+* @prop --gse-ui-checkbox-label-text-fontFamily
+* @prop --gse-ui-checkbox-label-text-fontWeight
+* @prop --gse-ui-checkbox-label-text-lineHeight
+* @prop --gse-ui-checkbox-gap
+* @prop --gse-ui-checkbox-disabled-opacity
+* @prop --gse-ui-checkbox-focus-border-color
+* @prop --gse-ui-checkbox-focus-border-width
+* @prop --gse-ui-checkbox-focus-border-style
+* @prop --gse-ui-checkbox-focus-offset
+* @prop --gse-ui-checkbox-focus-borderRadius
+*/
+/* stylelint-disable-next-line selector-class-pattern */ /* stylelint-disable-next-line selector-class-pattern */
 .gux-form-field-error {
   display: none;
   flex-direction: row;
@@ -5,10 +21,11 @@
   align-content: stretch;
   align-items: flex-start;
   justify-content: flex-start;
-  margin: 4px 0;
-  font-size: 12px;
-  line-height: 20px;
-  color: #2e394c;
+  padding: var(--gse-ui-formControl-helper-errorPadding);
+  font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
+  font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
+  line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
+  color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error.gux-show {
   display: flex;
@@ -17,16 +34,17 @@
   flex: 0 1 auto;
   align-self: auto;
   order: 0;
-  min-width: 16px;
-  min-height: 16px;
-  margin: 2px 4px 0 0;
-  color: #ea0b0b;
+  min-width: var(--gse-ui-icon-size-sm);
+  min-height: var(--gse-ui-icon-size-sm);
+  margin-right: var(--gse-ui-formControl-helper-gap);
+  color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {
   flex: 0 1 auto;
   align-self: auto;
   order: 0;
 }
+
 .gux-form-field-help {
   display: none;
   flex-direction: row;
@@ -34,11 +52,11 @@
   align-content: stretch;
   align-items: flex-start;
   justify-content: flex-start;
-  margin: 4px 0;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 20px;
-  color: #6b7585;
+  padding: var(--gse-ui-formControl-helper-padding);
+  font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
+  font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
+  line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
+  color: var(--gse-ui-formControl-helper-defaultColor);
 }
 .gux-form-field-help.gux-show {
   display: flex;
@@ -48,13 +66,32 @@
   align-self: none;
   order: 0;
 }
+
 :host {
   display: block;
-  color: #2e394c;
 }
-:host(.gux-input-error) ::slotted(input[type='checkbox']:not(:checked))::before {
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.3077 1.84615H3.69231C2.67271 1.84615 1.84615 2.67271 1.84615 3.69231V12.3077C1.84615 13.3273 2.67271 14.1538 3.69231 14.1538H12.3077C13.3273 14.1538 14.1538 13.3273 14.1538 12.3077V3.69231C14.1538 2.67271 13.3273 1.84615 12.3077 1.84615ZM3.69231 0C1.6531 0 0 1.6531 0 3.69231V12.3077C0 14.3469 1.6531 16 3.69231 16H12.3077C14.3469 16 16 14.3469 16 12.3077V3.69231C16 1.6531 14.3469 0 12.3077 0H3.69231Z' fill='%23ea0b0b'/%3E%3C/svg%3E");
+
+:host(.gux-input-error) ::slotted(input[type=checkbox]:not(:checked))::before {
+  background: #e22245;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M13.7143 0C14.975 0 16 1.02321 16 2.28571V13.7143C16 14.975 14.975 16 13.7143 16H2.28571C1.02321 16 0 14.975 0 13.7143V2.28571C0 1.02321 1.02321 0 2.28571 0H13.7143ZM13.7143 1.71429H2.28571C1.97 1.71429 1.71429 1.97 1.71429 2.28571V13.7143C1.71429 14.0286 1.97 14.2857 2.28571 14.2857H13.7143C14.0286 14.2857 14.2857 14.0286 14.2857 13.7143V2.28571C14.2857 1.97 14.0286 1.71429 13.7143 1.71429Z' /%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='M13.7143 0C14.975 0 16 1.02321 16 2.28571V13.7143C16 14.975 14.975 16 13.7143 16H2.28571C1.02321 16 0 14.975 0 13.7143V2.28571C0 1.02321 1.02321 0 2.28571 0H13.7143ZM13.7143 1.71429H2.28571C1.97 1.71429 1.71429 1.97 1.71429 2.28571V13.7143C1.71429 14.0286 1.97 14.2857 2.28571 14.2857H13.7143C14.0286 14.2857 14.2857 14.0286 14.2857 13.7143V2.28571C14.2857 1.97 14.0286 1.71429 13.7143 1.71429Z' /%3E%3C/svg%3E");
+}
+:host(.gux-input-error) ::slotted(input[type=checkbox]:checked)::before {
+  background: #e22245;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M2.28571 0C1.025 0 0 1.025 0 2.28571V13.7143C0 14.975 1.025 16 2.28571 16H13.7143C14.975 16 16 14.975 16 13.7143V2.28571C16 1.025 14.975 0 13.7143 0H2.28571ZM12.0357 6.32143L7.46429 10.8929C7.12857 11.2286 6.58571 11.2286 6.25357 10.8929L3.96786 8.60714C3.63214 8.27143 3.63214 7.72857 3.96786 7.39643C4.30357 7.06429 4.84643 7.06071 5.17857 7.39643L6.85714 9.075L10.8214 5.10714C11.1571 4.77143 11.7 4.77143 12.0321 5.10714C12.3643 5.44286 12.3679 5.98571 12.0321 6.31786L12.0357 6.32143Z' /%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='M2.28571 0C1.025 0 0 1.025 0 2.28571V13.7143C0 14.975 1.025 16 2.28571 16H13.7143C14.975 16 16 14.975 16 13.7143V2.28571C16 1.025 14.975 0 13.7143 0H2.28571ZM12.0357 6.32143L7.46429 10.8929C7.12857 11.2286 6.58571 11.2286 6.25357 10.8929L3.96786 8.60714C3.63214 8.27143 3.63214 7.72857 3.96786 7.39643C4.30357 7.06429 4.84643 7.06071 5.17857 7.39643L6.85714 9.075L10.8214 5.10714C11.1571 4.77143 11.7 4.77143 12.0321 5.10714C12.3643 5.44286 12.3679 5.98571 12.0321 6.31786L12.0357 6.32143Z' /%3E%3C/svg%3E");
 }
+:host(.gux-input-error) ::slotted(input[type=checkbox]:not(:checked):not(:disabled):not(:indeterminate):hover)::before {
+  background: #e22245;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M13.7143 0C14.975 0 16 1.02321 16 2.28571V13.7143C16 14.975 14.975 16 13.7143 16H2.28571C1.02321 16 0 14.975 0 13.7143V2.28571C0 1.02321 1.02321 0 2.28571 0H13.7143ZM13.7143 1.71429H2.28571C1.97 1.71429 1.71429 1.97 1.71429 2.28571V13.7143C1.71429 14.0286 1.97 14.2857 2.28571 14.2857H13.7143C14.0286 14.2857 14.2857 14.0286 14.2857 13.7143V2.28571C14.2857 1.97 14.0286 1.71429 13.7143 1.71429Z' /%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='M13.7143 0C14.975 0 16 1.02321 16 2.28571V13.7143C16 14.975 14.975 16 13.7143 16H2.28571C1.02321 16 0 14.975 0 13.7143V2.28571C0 1.02321 1.02321 0 2.28571 0H13.7143ZM13.7143 1.71429H2.28571C1.97 1.71429 1.71429 1.97 1.71429 2.28571V13.7143C1.71429 14.0286 1.97 14.2857 2.28571 14.2857H13.7143C14.0286 14.2857 14.2857 14.0286 14.2857 13.7143V2.28571C14.2857 1.97 14.0286 1.71429 13.7143 1.71429Z' /%3E%3C/svg%3E");
+}
+:host(.gux-input-error) ::slotted(input[type=checkbox]:indeterminate)::before {
+  background: #e22245;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M11.1429 7.14286C11.6179 7.14286 12 7.525 12 8C12 8.475 11.6179 8.85714 11.1429 8.85714H4.85714C4.38214 8.85714 4 8.475 4 8C4 7.525 4.38214 7.14286 4.85714 7.14286H11.1429ZM0 2.28571C0 1.02321 1.02321 0 2.28571 0H13.7143C14.975 0 16 1.02321 16 2.28571V13.7143C16 14.975 14.975 16 13.7143 16H2.28571C1.02321 16 0 14.975 0 13.7143V2.28571ZM1.71429 2.28571V13.7143C1.71429 14.0286 1.97 14.2857 2.28571 14.2857H13.7143C14.0286 14.2857 14.2857 14.0286 14.2857 13.7143V2.28571C14.2857 1.97 14.0286 1.71429 13.7143 1.71429H2.28571C1.97 1.71429 1.71429 1.97 1.71429 2.28571Z' /%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='M11.1429 7.14286C11.6179 7.14286 12 7.525 12 8C12 8.475 11.6179 8.85714 11.1429 8.85714H4.85714C4.38214 8.85714 4 8.475 4 8C4 7.525 4.38214 7.14286 4.85714 7.14286H11.1429ZM0 2.28571C0 1.02321 1.02321 0 2.28571 0H13.7143C14.975 0 16 1.02321 16 2.28571V13.7143C16 14.975 14.975 16 13.7143 16H2.28571C1.02321 16 0 14.975 0 13.7143V2.28571ZM1.71429 2.28571V13.7143C1.71429 14.0286 1.97 14.2857 2.28571 14.2857H13.7143C14.0286 14.2857 14.2857 14.0286 14.2857 13.7143V2.28571C14.2857 1.97 14.0286 1.71429 13.7143 1.71429H2.28571C1.97 1.71429 1.71429 1.97 1.71429 2.28571Z' /%3E%3C/svg%3E");
+}
+
 :host(.gux-disabled) {
   cursor: not-allowed;
   opacity: 0.5;
@@ -62,19 +99,21 @@
 :host(.gux-disabled) ::slotted(label) {
   cursor: not-allowed;
 }
+
 .gux-input-label {
   display: flex;
   flex-direction: row;
+  gap: 5px;
 }
 .gux-input-label .gux-label {
   display: flex;
   flex-direction: column;
 }
-::slotted(input[type='checkbox']) {
+
+::slotted(input[type=checkbox]) {
   display: inline-grid;
   width: 16px;
   height: 16px;
-  margin: 4px;
   text-align: center;
   vertical-align: middle;
   -webkit-appearance: none;
@@ -83,37 +122,43 @@
   border: 0;
   outline: none;
 }
-::slotted(input[type='checkbox'])::before {
-  grid-area: 1;
-  content: '';
+
+::slotted(input[type=checkbox])::before {
+  grid-area: 1/1;
+  content: "";
   border-radius: 15%;
 }
-::slotted(input[type='checkbox']:focus-visible)::before {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
-}
-::slotted(input[type='checkbox']:not(:checked))::before {
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.3077 1.84615H3.69231C2.67271 1.84615 1.84615 2.67271 1.84615 3.69231V12.3077C1.84615 13.3273 2.67271 14.1538 3.69231 14.1538H12.3077C13.3273 14.1538 14.1538 13.3273 14.1538 12.3077V3.69231C14.1538 2.67271 13.3273 1.84615 12.3077 1.84615ZM3.69231 0C1.6531 0 0 1.6531 0 3.69231V12.3077C0 14.3469 1.6531 16 3.69231 16H12.3077C14.3469 16 16 14.3469 16 12.3077V3.69231C16 1.6531 14.3469 0 12.3077 0H3.69231Z' fill='%2377828f'/%3E%3C/svg%3E");
-}
-::slotted( input[type='checkbox']:not(:checked):not(:disabled):not(
-        :indeterminate
-      ):hover)::before {
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.3077 1.84615H3.69231C2.67271 1.84615 1.84615 2.67271 1.84615 3.69231V12.3077C1.84615 13.3273 2.67271 14.1538 3.69231 14.1538H12.3077C13.3273 14.1538 14.1538 13.3273 14.1538 12.3077V3.69231C14.1538 2.67271 13.3273 1.84615 12.3077 1.84615ZM3.69231 0C1.6531 0 0 1.6531 0 3.69231V12.3077C0 14.3469 1.6531 16 3.69231 16H12.3077C14.3469 16 16 14.3469 16 12.3077V3.69231C16 1.6531 14.3469 0 12.3077 0H3.69231Z' fill='%232a60c8'/%3E%3C/svg%3E");
-}
-::slotted(input[type='checkbox']:checked)::before {
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.69231 0H12.3077C13.287 0 14.2261 0.38901 14.9185 1.08145C15.611 1.77389 16 2.71305 16 3.69231V12.3077C16 13.287 15.611 14.2261 14.9185 14.9185C14.2261 15.611 13.287 16 12.3077 16H3.69231C2.71305 16 1.77389 15.611 1.08145 14.9185C0.38901 14.2261 0 13.287 0 12.3077V3.69231C0 2.71305 0.38901 1.77389 1.08145 1.08145C1.77389 0.38901 2.71305 0 3.69231 0ZM5.62483 11.5936C5.79089 11.7597 6.00122 11.8372 6.21155 11.8372C6.43295 11.8372 6.64329 11.7486 6.79827 11.5936L13.2854 5.10652C13.6064 4.78549 13.6064 4.25412 13.2854 3.93308C12.9643 3.61205 12.433 3.61205 12.1119 3.93308L6.21155 9.83348L3.87575 7.4866C3.55472 7.16557 3.02335 7.16557 2.70231 7.4866C2.38128 7.80764 2.38128 8.339 2.70231 8.66004L5.62483 11.5936Z' fill='%232a60c8'/%3E%3C/svg%3E");
-}
-::slotted(input[type='checkbox']:indeterminate)::before {
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.69231 1.84615H12.3077C13.3273 1.84615 14.1538 2.67271 14.1538 3.69231V12.3077C14.1538 13.3273 13.3273 14.1538 12.3077 14.1538H3.69231C2.67271 14.1538 1.84615 13.3273 1.84615 12.3077V3.69231C1.84615 2.67271 2.67271 1.84615 3.69231 1.84615ZM0 3.69231C0 1.6531 1.6531 0 3.69231 0H12.3077C14.3469 0 16 1.6531 16 3.69231V12.3077C16 14.3469 14.3469 16 12.3077 16H3.69231C1.6531 16 0 14.3469 0 12.3077V3.69231ZM4.00028 9.2308H12.0003C12.5049 9.2308 12.9234 8.81234 12.9234 8.30773C12.9234 7.80311 12.5049 7.38465 12.0003 7.38465H4.00028C3.49567 7.38465 3.07721 7.80311 3.07721 8.30773C3.07721 8.81234 3.49567 9.2308 4.00028 9.2308Z' fill='%232a60c8'/%3E%3C/svg%3E");
-}
-::slotted(input[type='checkbox']:disabled)::before {
+
+::slotted(input[type=checkbox]:not(:checked))::before {
+  background: #767c8d;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M13.7143 0C14.975 0 16 1.02321 16 2.28571V13.7143C16 14.975 14.975 16 13.7143 16H2.28571C1.02321 16 0 14.975 0 13.7143V2.28571C0 1.02321 1.02321 0 2.28571 0H13.7143ZM13.7143 1.71429H2.28571C1.97 1.71429 1.71429 1.97 1.71429 2.28571V13.7143C1.71429 14.0286 1.97 14.2857 2.28571 14.2857H13.7143C14.0286 14.2857 14.2857 14.0286 14.2857 13.7143V2.28571C14.2857 1.97 14.0286 1.71429 13.7143 1.71429Z' /%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='M13.7143 0C14.975 0 16 1.02321 16 2.28571V13.7143C16 14.975 14.975 16 13.7143 16H2.28571C1.02321 16 0 14.975 0 13.7143V2.28571C0 1.02321 1.02321 0 2.28571 0H13.7143ZM13.7143 1.71429H2.28571C1.97 1.71429 1.71429 1.97 1.71429 2.28571V13.7143C1.71429 14.0286 1.97 14.2857 2.28571 14.2857H13.7143C14.0286 14.2857 14.2857 14.0286 14.2857 13.7143V2.28571C14.2857 1.97 14.0286 1.71429 13.7143 1.71429Z' /%3E%3C/svg%3E");
+}
+
+::slotted(input[type=checkbox]:not(:checked):not(:disabled):not(:indeterminate):hover)::before {
+  background: #3742a2;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M13.7143 0C14.975 0 16 1.02321 16 2.28571V13.7143C16 14.975 14.975 16 13.7143 16H2.28571C1.02321 16 0 14.975 0 13.7143V2.28571C0 1.02321 1.02321 0 2.28571 0H13.7143ZM13.7143 1.71429H2.28571C1.97 1.71429 1.71429 1.97 1.71429 2.28571V13.7143C1.71429 14.0286 1.97 14.2857 2.28571 14.2857H13.7143C14.0286 14.2857 14.2857 14.0286 14.2857 13.7143V2.28571C14.2857 1.97 14.0286 1.71429 13.7143 1.71429Z' /%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='M13.7143 0C14.975 0 16 1.02321 16 2.28571V13.7143C16 14.975 14.975 16 13.7143 16H2.28571C1.02321 16 0 14.975 0 13.7143V2.28571C0 1.02321 1.02321 0 2.28571 0H13.7143ZM13.7143 1.71429H2.28571C1.97 1.71429 1.71429 1.97 1.71429 2.28571V13.7143C1.71429 14.0286 1.97 14.2857 2.28571 14.2857H13.7143C14.0286 14.2857 14.2857 14.0286 14.2857 13.7143V2.28571C14.2857 1.97 14.0286 1.71429 13.7143 1.71429Z' /%3E%3C/svg%3E");
+}
+
+::slotted(input[type=checkbox]:checked)::before {
+  background: #4856cb;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M2.28571 0C1.025 0 0 1.025 0 2.28571V13.7143C0 14.975 1.025 16 2.28571 16H13.7143C14.975 16 16 14.975 16 13.7143V2.28571C16 1.025 14.975 0 13.7143 0H2.28571ZM12.0357 6.32143L7.46429 10.8929C7.12857 11.2286 6.58571 11.2286 6.25357 10.8929L3.96786 8.60714C3.63214 8.27143 3.63214 7.72857 3.96786 7.39643C4.30357 7.06429 4.84643 7.06071 5.17857 7.39643L6.85714 9.075L10.8214 5.10714C11.1571 4.77143 11.7 4.77143 12.0321 5.10714C12.3643 5.44286 12.3679 5.98571 12.0321 6.31786L12.0357 6.32143Z' /%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='M2.28571 0C1.025 0 0 1.025 0 2.28571V13.7143C0 14.975 1.025 16 2.28571 16H13.7143C14.975 16 16 14.975 16 13.7143V2.28571C16 1.025 14.975 0 13.7143 0H2.28571ZM12.0357 6.32143L7.46429 10.8929C7.12857 11.2286 6.58571 11.2286 6.25357 10.8929L3.96786 8.60714C3.63214 8.27143 3.63214 7.72857 3.96786 7.39643C4.30357 7.06429 4.84643 7.06071 5.17857 7.39643L6.85714 9.075L10.8214 5.10714C11.1571 4.77143 11.7 4.77143 12.0321 5.10714C12.3643 5.44286 12.3679 5.98571 12.0321 6.31786L12.0357 6.32143Z' /%3E%3C/svg%3E");
+}
+
+::slotted(input[type=checkbox]:indeterminate)::before {
+  background: #4856cb;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M11.1429 7.14286C11.6179 7.14286 12 7.525 12 8C12 8.475 11.6179 8.85714 11.1429 8.85714H4.85714C4.38214 8.85714 4 8.475 4 8C4 7.525 4.38214 7.14286 4.85714 7.14286H11.1429ZM0 2.28571C0 1.02321 1.02321 0 2.28571 0H13.7143C14.975 0 16 1.02321 16 2.28571V13.7143C16 14.975 14.975 16 13.7143 16H2.28571C1.02321 16 0 14.975 0 13.7143V2.28571ZM1.71429 2.28571V13.7143C1.71429 14.0286 1.97 14.2857 2.28571 14.2857H13.7143C14.0286 14.2857 14.2857 14.0286 14.2857 13.7143V2.28571C14.2857 1.97 14.0286 1.71429 13.7143 1.71429H2.28571C1.97 1.71429 1.71429 1.97 1.71429 2.28571Z'/%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='M11.1429 7.14286C11.6179 7.14286 12 7.525 12 8C12 8.475 11.6179 8.85714 11.1429 8.85714H4.85714C4.38214 8.85714 4 8.475 4 8C4 7.525 4.38214 7.14286 4.85714 7.14286H11.1429ZM0 2.28571C0 1.02321 1.02321 0 2.28571 0H13.7143C14.975 0 16 1.02321 16 2.28571V13.7143C16 14.975 14.975 16 13.7143 16H2.28571C1.02321 16 0 14.975 0 13.7143V2.28571ZM1.71429 2.28571V13.7143C1.71429 14.0286 1.97 14.2857 2.28571 14.2857H13.7143C14.0286 14.2857 14.2857 14.0286 14.2857 13.7143V2.28571C14.2857 1.97 14.0286 1.71429 13.7143 1.71429H2.28571C1.97 1.71429 1.71429 1.97 1.71429 2.28571Z'/%3E%3C/svg%3E");
+}
+
+::slotted(input[type=checkbox]:disabled)::before {
   cursor: not-allowed;
-  opacity: 0.5;
 }
+
 ::slotted(label) {
   display: inline-block;
   font-size: 12px;
-  line-height: 24px;
   vertical-align: middle;
-}
+}

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-checkbox/gux-form-field-checkbox.js

@@ -63,7 +63,7 @@ export class GuxFormFieldCheckbox {
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-form-field-checkbox.less"]
+      "$": ["gux-form-field-checkbox.scss"]
     };
   }
   static get styleUrls() {

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

@@ -1,3 +1,95 @@
+/*
+@prop $gse-ui-modal-closeButtonColor // TODO: COMUI-2300 - follow up later when dismiss button has been tokenized
+@prop $gse-ui-modal-headerColor
+@prop $gse-ui-modal-backgroundColor
+@prop $gse-ui-modal-shroudColor
+@prop $gse-ui-modal-header-gap
+@prop $gse-ui-modal-padding
+@prop $gse-ui-modal-gap
+@prop $gse-ui-modal-heading-fontFamily
+@prop $gse-ui-modal-heading-lineHeight
+@prop $gse-ui-modal-heading-fontSize
+@prop $gse-ui-modal-heading-fontWeight
+@prop $gse-ui-modal-heading-letterSpacing
+@prop $gse-ui-modal-icon // TODO: COMUI-2300 - follow up later when dismiss button has been tokenized
+@prop $gse-ui-modal-small-width
+@prop $gse-ui-modal-medium-width
+@prop $gse-ui-modal-large-width
+@prop $gse-ui-modal-buttonBar-gap 
+@prop $gse-ui-modal-boxShadow-x
+@prop $gse-ui-modal-boxShadow-y
+@prop $gse-ui-modal-boxShadow-blur
+@prop $gse-ui-modal-boxShadow-spread
+@prop $gse-ui-modal-boxShadow-color
+@prop $gse-ui-modal-boxShadow-type
+@prop $gse-ui-modal-borderRadius
+@prop $gse-ui-modal-opacity - Skipped (this is incoporated into the gse-ui-modal-shroudColor token and is no longer needed. Thinking about asking design team to remove this token to avoid confusion)
+*/
+.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);
+}
+
+/*
+ * Typography styles and mixins.
+ */
+/* Helpers */
+/* Base typography */
+/* Headings */
+/* Anchor */
+.gux-icon-anchor gux-icon {
+  padding-right: var(--gse-ui-links-inLine-padding);
+}
+
+/* Custom Styles */
+::slotted(button:active:enabled) {
+  text-decoration: underline;
+  color: var(--gse-ui-link-active-color);
+  background: none;
+}
+
+slot[name=left-align-buttons]::slotted(:not(button, gux-button)) {
+  display: flex;
+  flex-direction: row;
+  gap: var(--gse-ui-modal-buttonBar-gap);
+  align-content: flex-start;
+  align-items: center;
+}
+
 :host .gux-modal {
   position: fixed;
   inset: 0;
@@ -6,51 +98,56 @@
   align-items: center;
   justify-content: center;
   color: #2e394c;
-  background: rgba(32, 41, 55, 0.8);
+  background: var(--gse-ui-modal-shroudColor);
 }
 :host .gux-modal .gux-modal-container {
+  box-shadow: var(--gse-ui-modal-boxShadow-x) var(--gse-ui-modal-boxShadow-y) var(--gse-ui-modal-boxShadow-blur) var(--gse-ui-modal-boxShadow-spread) var(--gse-ui-modal-boxShadow-color);
   position: relative;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  padding: 40px;
-  background: #fdfdfd;
+  padding: var(--gse-ui-modal-padding);
+  background: var(--gse-ui-modal-backgroundColor);
   border: 1px solid #b4bccb;
-  border-radius: 4px;
-  box-shadow: 0 8px 24px rgba(32, 41, 55, 0.4);
+  border-radius: var(--gse-ui-modal-borderRadius);
 }
 :host .gux-modal .gux-modal-container.gux-small {
-  width: 416px;
+  width: var(--gse-ui-modal-small-width);
   max-height: min(368px, 100vh - 2 * 24px);
 }
 :host .gux-modal .gux-modal-container.gux-medium {
-  width: 672px;
+  width: var(--gse-ui-modal-medium-width);
   max-height: min(640px, 100vh - 2 * 24px);
 }
 :host .gux-modal .gux-modal-container.gux-large {
-  width: 940px;
+  width: var(--gse-ui-modal-large-width);
   max-height: min(640px, 100vh - 2 * 24px);
 }
 :host .gux-modal .gux-modal-container.gux-dynamic {
-  max-width: calc(100vw - 2 * 24px);
-  max-height: calc(100vh - 2 * 24px);
+  max-width: calc(100vw - 48px);
+  max-height: calc(100vh - 48px);
 }
 :host .gux-modal .gux-modal-container.gux-dynamic .gux-modal-content {
   max-height: none;
 }
 :host .gux-modal .gux-modal-container .gux-modal-header {
-  padding-bottom: 24px;
   margin: 0;
-  font-family: sans-serif;
-  font-weight: 400;
-  font-weight: 300;
-  font-size: 24px;
-  line-height: 32px;
+  color: var(--gse-ui-modal-headerColor);
+  line-height: var(--gse-ui-modal-heading-fontFamily);
+  font-family: var(--gse-ui-modal-heading-fontFamily);
+  font-size: var(--gse-ui-modal-heading-fontSize);
+  font-weight: var(--gse-ui-modal-heading-fontWeight);
+  letter-spacing: var(--gse-ui-modal-heading-letterSpacing);
+  font-family: var(--gse-core-fontFamily-heading), var(--gse-core-fontFamily-body), sans-serif;
+  font-weight: var(--gse-core-fontWeight-bold);
+  font-size: var(--gse-core-fontSize-xl);
+  line-height: var(--gse-core-lineHeight-xl);
 }
 :host .gux-modal .gux-modal-container .gux-modal-content {
   max-height: 432px;
-  margin: 0 8px 24px;
+  margin-top: var(--gse-ui-modal-gap);
+  margin-bottom: var(--gse-ui-modal-gap);
   overflow-y: auto;
 }
 :host .gux-modal .gux-modal-container .gux-modal-content.gux-no-buttons {
@@ -60,17 +157,9 @@
   display: flex;
   justify-content: space-between;
 }
-:host .gux-modal .gux-modal-container .gux-button-footer .gux-left-align-buttons gux-button {
-  padding-right: 5px;
-}
-:host .gux-modal .gux-modal-container .gux-button-footer .gux-right-align-buttons gux-button {
-  padding-left: 5px;
-}
 @media (max-width: 416px) {
-  :host .gux-modal .gux-modal-container.gux-small,
-  :host .gux-modal .gux-modal-container.gux-medium,
-  :host .gux-modal .gux-modal-container.gux-large {
+  :host .gux-modal .gux-modal-container.gux-small, :host .gux-modal .gux-modal-container.gux-medium, :host .gux-modal .gux-modal-container.gux-large {
     width: 100%;
     height: 100%;
   }
-}
+}

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

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

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

@@ -1,6 +1,5 @@
 import { h } from '@stencil/core';
 import { autoUpdate, computePosition, flip, offset, size, shift, hide } from '@floating-ui/dom';
-import { hasParentElement } from '@utils/dom/has-parent-element';
 /**
  * @slot target - Required slot for target
  * @slot popup - Required slot for popup
@@ -9,6 +8,7 @@ export class GuxPopup {
   constructor() {
     this.expanded = false;
     this.disabled = false;
+    this.exceedTargetWidth = false;
   }
   runUpdatePosition() {
     this.cleanupUpdatePosition = autoUpdate(this.targetElementContainer, this.popupElementContainer, () => this.updatePosition(), {
@@ -20,8 +20,7 @@ export class GuxPopup {
   }
   updatePosition() {
     if (this.targetElementContainer && this.popupElementContainer) {
-      const popupElementContainer = this.popupElementContainer;
-      const root = this.root;
+      const exceedTargetWidth = this.exceedTargetWidth;
       void computePosition(this.targetElementContainer, this.popupElementContainer, {
         strategy: 'fixed',
         placement: 'bottom-start',
@@ -29,15 +28,19 @@ export class GuxPopup {
           offset(2),
           flip(),
           size({
-            apply({ rects }) {
-              if (hasParentElement('gux-action-button, gux-button-multi', root)) {
-                Object.assign(popupElementContainer.style, {
+            apply({ rects, elements }) {
+              if (exceedTargetWidth) {
+                // These elements should be at least as wide the target but can expand beyond
+                Object.assign(elements.floating.style, {
                   minWidth: `${rects.reference.width}px`
                 });
               }
               else {
-                Object.assign(popupElementContainer.style, {
-                  width: `${rects.reference.width}px`
+                // Everything else is constrained to the width of the target.
+                // Note: if the contents overflow the flip and shift middleware will not detect it
+                Object.assign(elements.floating.style, {
+                  width: `${rects.reference.width}px`,
+                  overflow: 'hidden'
                 });
               }
             }
@@ -141,6 +144,24 @@ export class GuxPopup {
         "attribute": "disabled",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "exceedTargetWidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "set if parent component design allows for popup exceeding target width"
+        },
+        "attribute": "exceed-target-width",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
@@ -177,7 +198,6 @@ export class GuxPopup {
         }
       }];
   }
-  static get elementRef() { return "root"; }
   static get watchers() {
     return [{
         "propName": "expanded",

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

@@ -20,5 +20,5 @@
   padding: 12px;
   font-size: 2rem;
   background-color: #fdfdfd;
-  box-shadow: 0 8px 24px fade(#202937, 40%), 0 0 0 1px #fdfdfd, 0 0 0 4px #aac9ff !important;
+  box-shadow: 0 8px 24px rgba(32, 41, 55, 0.4), 0 0 0 1px #fdfdfd, 0 0 0 4px #aac9ff !important;
 }

package/dist/collection/components/stable/gux-table-toolbar/gux-table-toolbar-menu-button/gux-table-toolbar-menu-button.js

@@ -85,7 +85,7 @@ export class GuxTableToolbarMenuButton {
     trackComponent(this.root);
   }
   render() {
-    return (h(Host, { class: { 'gux-show-menu': this.showMenu } }, h("gux-popup", { expanded: this.expanded }, h("div", { slot: "target", class: "gux-toolbar-menu-container" }, h("gux-button-slot", { class: "gux-menu-button" }, h("button", { type: "button", ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.expanded.toString() }, h("gux-tooltip-title", { ref: el => (this.tooltipTitleElement = el) }, h("span", null, h("gux-icon", { "screenreader-text": this.i18n('additionalActions'), "icon-name": "menu-kebab-horizontal" })))))), h("div", { class: "gux-list-container", slot: "popup" }, h("gux-list", { ref: el => (this.listElement = el) }, h("slot", null))))));
+    return (h(Host, { class: { 'gux-show-menu': this.showMenu } }, h("gux-popup", { expanded: this.expanded, "exceed-target-width": true }, h("div", { slot: "target", class: "gux-toolbar-menu-container" }, h("gux-button-slot", { class: "gux-menu-button" }, h("button", { type: "button", ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.expanded.toString() }, h("gux-tooltip-title", { ref: el => (this.tooltipTitleElement = el) }, h("span", null, h("gux-icon", { "screenreader-text": this.i18n('additionalActions'), "icon-name": "menu-kebab-horizontal" })))))), h("div", { class: "gux-list-container", slot: "popup" }, h("gux-list", { ref: el => (this.listElement = el) }, h("slot", null))))));
   }
   static get is() { return "gux-table-toolbar-menu-button"; }
   static get encapsulation() { return "shadow"; }

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

@@ -1,45 +1,49 @@
-gux-tabs[orientation='vertical'] > gux-tab-list .gux-tab {
+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 {
+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) {
+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 {
+
+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 {
+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) {
+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 {
+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 {
+
+gux-tabs[alignment=center] > gux-tab-list .gux-scrollable-section {
   justify-content: center;
 }
-gux-tabs[alignment='full-width'] > gux-tab-list .gux-scrollable-section {
+
+gux-tabs[alignment=full-width] > gux-tab-list .gux-scrollable-section {
   flex-grow: 1;
 }
-gux-tabs[alignment='full-width'] > gux-tab-list gux-tab {
+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 {
+gux-tabs[alignment=full-width] > gux-tab-list gux-tab .gux-tab {
   width: 100%;
   max-width: 100%;
 }
+
 gux-tab {
   display: flex;
   max-width: 160px;
@@ -72,4 +76,4 @@ gux-tab .gux-tab:focus-visible {
 gux-tab .gux-tab gux-tooltip-title {
   max-width: 160px;
   white-space: nowrap;
-}
+}

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

@@ -43,7 +43,7 @@ export class GuxTab {
   static get is() { return "gux-tab"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-tab.less"]
+      "$": ["gux-tab.scss"]
     };
   }
   static get styleUrls() {