@sapudex/web-components 0.111.0

package/src/themes/SideNavigationMobile.css

@@ -0,0 +1,60 @@
+:host {
+  --udex-side-navigation-item-height: 2.5rem;
+  --udex-side-navigation-item-bottom-margin: var(--udexSpacer8);
+  --udex-side-navigation-icon-font-size: 1.25rem;
+  --udex-side-navigation-item-padding-left: var(--udexSpacer16);
+  --udex-side-navigation-mobile-trigger-shadow: var(--sapContent_Shadow1, 0 2px 8px 0 #2236494D);
+  --udex-side-navigation-mobile-trigger-padding-horizontal: var(--udexSpacer16);
+  --udex-side-navigation-mobile-active-trigger-border-color: var(--udexColorBlue7, #0070F2);
+  --udex-side-navigation-mobile-active-arrow-color: var(--udexColorBlue7, #0070F2);
+  --udex-side-navigation-padding-vertical: var(--udexSpacer16);
+  --udex-side-navigation-selected-item-text-weight: var(--udexTypographyFontWeightMedium);
+
+  width: 100%;
+  font-size: var(--udexTypographyNavigationMediumMFontSize);
+  font-family: var(--sapFontFamily);
+  position: relative;
+  z-index: 106;
+}
+
+.udex-side-navigation-mobile__trigger {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: var(--udex-side-navigation-mobile-trigger-shadow);
+  height: var(--udex-side-navigation-item-height);
+  padding-inline-start: var(--udex-side-navigation-mobile-trigger-padding-horizontal);
+  padding-inline-end: var(--udex-side-navigation-mobile-trigger-padding-horizontal);
+  cursor: pointer;
+  position: relative;
+}
+
+.udex-side-navigation-mobile__selected-item {
+  display: flex;
+  align-items: center;
+  font-weight: var(--udex-side-navigation-selected-item-text-weight);
+}
+
+.udex-side-navigation-mobile__selected-item-icon {
+  height: var(--udex-side-navigation-icon-font-size);
+  width: var(--udex-side-navigation-icon-font-size);
+  min-width: var(--udex-side-navigation-icon-font-size);
+  color: var(--udex-side-navigation-icon-color);
+  padding-inline-end: calc(var(--udexSpacer48) - var(--udex-side-navigation-icon-font-size) - var(--udex-side-navigation-item-padding-left));
+}
+
+.udex-side-navigation-mobile__trigger-toggle-icon {
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  color: var(--udex-side-navigation-icon-color);
+}
+
+.udex-side-navigation-mobile__trigger[active] {
+  box-shadow: var(--udex-side-navigation-mobile-trigger-shadow);
+  border-bottom: 1px solid var(--udex-side-navigation-mobile-active-trigger-border-color);
+}
+
+.udex-side-navigation-mobile__trigger[active] .udex-side-navigation-mobile__trigger-toggle-icon {
+  color: var(--udex-side-navigation-mobile-active-arrow-color);
+}

package/src/themes/SideNavigationMobileDropdown.css

@@ -0,0 +1,29 @@
+:host {
+  --udex-side-navigation-item-height: 2.5rem;
+  --udex-side-navigation-item-bottom-margin: var(--udexSpacer8);
+  --udex-side-navigation-icon-font-size: 1.25rem;
+  --udex-side-navigation-item-padding-left: var(--udexSpacer16);
+  --udex-side-navigation-mobile-trigger-shadow: var(--sapContent_Shadow1, 0 2px 8px 0 #2236494D);
+  --udex-side-navigation-mobile-trigger-padding-horizontal: var(--udexSpacer16);
+  --udex-side-navigation-mobile-active-trigger-border-color: var(--udexColorBlue7, #0070F2);
+  --udex-side-navigation-mobile-active-arrow-color: var(--udexColorBlue7, #0070F2);
+  --udex-side-navigation-padding-vertical: var(--udexSpacer16);
+
+  width: 100%;
+  font-size: var(--udexTypographyNavigationMediumMFontSize);
+  font-family: var(--sapFontFamily);
+}
+
+.udex-side-navigation-mobile__popover {
+  --udex-dropdown-vertical-distance: 0;
+  --udex-dropdown-box-shadow: var(--sapContent_Shadow1, 0 2px 8px 0 #2236494D);
+  --udex-dropdown-border-radius: 0;
+  --udex-dropdown-border-width: 0;
+  --udex-dropdown-pane-max-width: 100%;
+  --udex-dropdown-pane-overflow: auto;
+}
+
+udex-side-navigation {
+  --udex-side-navigation-max-width: 100%;
+  --udex-side-navigation-padding: var(--udex-side-navigation-padding-vertical) 0;
+}

package/src/themes/SideNavigationSubItem.css

@@ -0,0 +1,63 @@
+:host {
+  --udex-side-navigation-icon-color: var(--udexColorGrey9, #223548);
+  --udex-side-navigation-item-bottom-margin: 0;
+  --udex-side-navigation-item-height: 2.5rem;
+  --udex-side-navigation-icon-font-size: 1.25rem;
+  --udex-side-navigation-item_color-selected-text: var(--udexColorBlue7, #0070F2);
+  --udex-side-navigation-selection-indicator-display: none;
+  --udex-side-navigation-item-padding-left: var(--udexSpacer16);
+  --udex-side-navigation-item-focus-border-offset: 0;
+  --udex-side-navigation-selection-background-color: none;
+  --udex-side-navigation-hover-selection-background-color: var(--udexColorGrey1, #F5F6F7);
+
+  color: var(--udex-side-navigation-icon-color);
+  font-size: var(--udexTypographyNavigationMediumMFontSize);
+}
+
+:host(:not([hidden])) {
+  font-family: var(--sapFontFamily);
+}
+
+.ui5-sn-item {
+  margin-block-end: var(--udex-side-navigation-item-bottom-margin);
+  height: var(--udex-side-navigation-item-height);
+  padding-inline-end: var(--udexSpacer16);
+}
+
+.ui5-sn-item-icon {
+  height: var(--udex-side-navigation-icon-font-size);
+  width: var(--udex-side-navigation-icon-font-size);
+  min-width: var(--udex-side-navigation-icon-font-size);
+  color: var(--udex-side-navigation-icon-color);
+  padding-inline-end: calc(var(--udexSpacer48) - var(--udex-side-navigation-icon-font-size) - var(--udex-side-navigation-item-padding-left));
+}
+
+.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected,
+.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected .ui5-sn-item-toggle-icon,
+.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected .ui5-sn-item-external-link-icon,
+.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected .ui5-sn-item-icon {
+  color: var(--udex-side-navigation-item_color-selected-text);
+  background: var(--udex-side-navigation-selection-background-color);
+}
+
+.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected:hover {
+  background: var(--udex-side-navigation-hover-selection-background-color);
+}
+
+.ui5-sn-item-selected .ui5-sn-item-selection-icon {
+  display: var(--udex-side-navigation-selection-indicator-display);
+}
+
+.ui5-sn-item-level2 {
+  --udex-side-navigation-group-icon-width: 1.75rem;
+  padding-inline-start: var(--udex-side-navigation-group-icon-width);
+}
+
+:host([with-icon]) .ui5-sn-item-level2 {
+  --udex-side-navigation-group-icon-width: var(--udexSpacer48);
+  padding-inline-start: var(--udex-side-navigation-group-icon-width);
+}
+
+.ui5-sn-item:focus::after {
+  inset: var(--udex-side-navigation-item-focus-border-offset);
+}

package/src/themes/Slider.css

@@ -0,0 +1,65 @@
+:host {
+  --udex-slider-color-track-start-point: var(
+    --sapSlider_Selected_Background,
+    #0070f2
+  );
+  --udex-slider-color-track-active: var(
+    --sapSlider_Selected_Background,
+    #0070f2
+  );
+  --udex-slider-color-handle-focus-range: var(
+    --sapSlider_Selected_BorderColor,
+    #0070f2
+  );
+  --udex-slider-color-handle-active-background: var(
+    --sapSlider_Active_HandleBackground,
+    #ffffff
+  );
+  --udex-slider-color-handle-default-icon: var(
+    --sapContent_Selected_ForegroundColor,
+    #0040b0
+  );
+
+  --udex-slider-radius-range-size: var(---udexRadiusM, 0.5rem);
+}
+
+:host {
+  font-family: var(--sapFontFamily);
+  font-weight: var(--udexTypographyFontWeightRegular, 400);
+  font-size: var(--udexTypographyNavigationRegularMFontSize, 14px);
+  line-height: var(--udexTypographyHeadingLineHeight, 1.1);
+  color: var(--sapContent_MeasureIndicatorColor, #5b738b);
+  height: 74px;
+}
+
+.ui5-slider-progress-container::before {
+  background-color: var(--udex-slider-color-track-start-point);
+}
+
+.ui5-slider-progress {
+  background-color: var(--udex-slider-color-track-active);
+}
+
+.ui5-slider-progress:focus::after {
+  border: 2px solid var(--udex-slider-color-handle-focus-range);
+  border-radius: var(--udex-slider-radius-range-size);
+}
+
+:host([desktop]) .ui5-slider-handle:focus,
+.ui5-slider-handle:focus-visible {
+  background-color: var(--_ui5_range_slider_handle_background_focus);
+}
+
+:host .ui5-slider-inner .ui5-slider-labels {
+  top: 34px;
+}
+
+:host .ui5-slider-inner .ui5-slider-labels li {
+  height: 1.375rem;
+  font-family: var(--sapFontFamily);
+  font-size: var(--udexTypographyNavigationRegularMFontSize, 14px);
+}
+
+[slider-icon] {
+  color: var(--udex-slider-color-handle-default-icon);
+}

package/src/themes/StatusMessage.css

@@ -0,0 +1,45 @@
+:host {
+  --udex-status-message-supporting-text-paddings: var(--udexSpacer4, 4px) 0;
+  --udex-status-message-supporting-text-font-family: var(--sapFontFamily, 'sans-serif');
+  --udex-status-message-supporting-text-font-size: var(--sapFontSmallSize, 12px);
+  --udex-status-message-color-standard-default-supporting-text: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));
+  --udex-status-message-color-error-default-supporting-text: var(--sapField_InvalidColor, #d20a0a);
+  --udex-status-message-color-success-default-supporting-text: var(--sapField_SuccessColor, #188918);
+  --udex-status-message-color-warning-default-supporting-text: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));
+}
+
+.udex-status-message__supporting-text {
+  font-family: var(--udex-status-message-supporting-text-font-family);
+  font-size: var(--udex-status-message-supporting-text-font-size);
+  line-height: 1.5;
+  padding: var(--udex-status-message-supporting-text-paddings);
+  color: var(--udex-status-message-color-standard-default-supporting-text);
+  text-align: start;
+  padding-inline-start: var(--udexSpacer12, 12px);
+}
+
+:host([supporting-text-alignment="Right"]:not([value-state="Error"]):not([value-state="Success"]):not([value-state="Warning"])) .udex-status-message__supporting-text {
+  text-align: end;
+}
+
+.udex-status-message__icon {
+  color: inherit;
+  vertical-align: top;
+  margin-inline-end: var(--udexSpacer4, 4px);
+}
+
+:host([value-state="Error"]) .udex-status-message__supporting-text {
+  color: var(--udex-status-message-color-error-default-supporting-text);
+}
+
+:host([value-state="Success"]) .udex-status-message__supporting-text {
+  color: var(--udex-status-message-color-success-default-supporting-text);
+}
+
+:host([value-state="Warning"]) .udex-status-message__supporting-text {
+  color: var(--udex-status-message-color-warning-default-supporting-text);
+}
+
+:host([disabled]) .udex-status-message__supporting-text {
+  opacity: 0.4;
+}

package/src/themes/StepInput.css

@@ -0,0 +1,124 @@
+:host {
+    --udex-step-input-button-size: 42px;
+
+    --udex-step-input-input-horizontal-padding: var(--udexSpacer8, 8px);
+
+    --udex-step-input-color-standard-hover-border: var(--sapField_Hover_BorderColor, var(--udexColorBlue6));
+    --udex-step-input-color-standard-active-border: var(--sapField_Active_BorderColor, var(--udexColorBlue9));
+
+    --udex-step-input-color-error-hover-border: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));
+    --udex-step-input-color-error-active-border: var(--udexCoreSemanticError9, #840606);
+
+    --udex-step-input-color-warning-hover-border: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));
+    --udex-step-input-color-warning-active-border: var(--udexCoreSemanticWarning9, #8D2A00);
+
+    --udex-step-input-color-success-hover-border: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));
+    --udex-step-input-color-success-active-border: var(--udexCoreSemanticSuccess9, #1E592F);
+}
+
+:host udex-text-field {
+    --udex-input-color-standard-hover-border: var(--udex-step-input-color-standard-hover-border);
+    --udex-input-color-standard-active-border: var(--udex-step-input-color-standard-active-border);
+
+    --udex-input-color-error-hover-border: var(--udex-step-input-color-error-hover-border);
+    --udex-input-color-error-active-border: var(--udex-step-input-color-error-active-border);
+
+    --udex-input-color-warning-hover-border: var(--udex-step-input-color-warning-hover-border);
+    --udex-input-color-warning-active-border: var(--udex-step-input-color-warning-active-border);
+
+    --udex-input-color-success-hover-border: var(--udex-step-input-color-success-hover-border);
+    --udex-input-color-success-active-border: var(--udex-step-input-color-success-active-border);
+}
+ 
+:host(:not([displayonly])) .udex-step-input__root {
+    display: flex;
+    align-items: flex-start;
+}
+
+:host .udex-step-input__button {
+    --udex-control-button-large-height: var(--udex-step-input-button-size);
+    --udex-control-button-large-width: var(--udex-step-input-button-size);
+
+    z-index: 2;
+    background: none;
+    flex-shrink: 0;
+}
+
+:host .udex-step-input__root .udex-step-input__button_inc:not(:disabled):dir(ltr),
+:host .udex-step-input__root .udex-step-input__button_dec:not(:disabled):dir(rtl) {
+    border-top-color: transparent;
+    border-right-color: transparent;
+    border-bottom-color: transparent;
+}
+
+:host .udex-step-input__root .udex-step-input__button_inc:not(:disabled):dir(rtl),
+:host .udex-step-input__root .udex-step-input__button_dec:not(:disabled):dir(ltr) {
+    border-top-color: transparent;
+    border-bottom-color: transparent;
+    border-left-color: transparent;
+}
+
+:host([readonly]) .udex-step-input__button {
+    opacity: 1;
+}
+
+:host(:not([disabled]):not([readonly]):not([displayonly]):hover) ::part(textfield-input) {
+    border-color: var(--udex-step-input-color-standard-hover-border);
+}
+
+:host([value-state="Success"]:not([disabled]):not([readonly]):not([displayonly]):hover) ::part(textfield-input) {
+    border-color: var(--udex-step-input-color-success-hover-border);
+}
+
+:host([value-state="Warning"]:not([disabled]):not([readonly]):not([displayonly]):hover) ::part(textfield-input) {
+    border-color: var(--udex-step-input-color-warning-hover-border);
+}
+
+:host([value-state="Error"]:not([disabled]):not([readonly]):not([displayonly]):hover) ::part(textfield-input) {
+    border-color: var(--udex-step-input-color-error-hover-border);
+}
+
+/* The selectors for the focused state include the `:not([displayonly])` rule
+   to make them the same weight as the selectors for the hover state */
+:host(:not([disabled]):not([readonly]):not([displayonly]):focus-within) ::part(textfield-input) {
+    border-color: var(--udex-step-input-color-standard-active-border);
+}
+
+:host([value-state="Success"]:not([disabled]):not([readonly]):not([displayonly]):focus-within) ::part(textfield-input) {
+    border-color: var(--udex-step-input-color-success-active-border);
+}
+
+:host([value-state="Warning"]:not([disabled]):not([readonly]):not([displayonly]):focus-within) ::part(textfield-input) {
+    border-color: var(--udex-step-input-color-warning-active-border);
+}
+
+:host([value-state="Error"]:not([disabled]):not([readonly]):not([displayonly]):focus-within) ::part(textfield-input) {
+    border-color: var(--udex-step-input-color-error-active-border);
+}
+
+:host(:not([displayonly])) udex-text-field::part(textfield-input) {
+    padding-right: calc(var(--udex-step-input-button-size) + var(--udex-step-input-input-horizontal-padding));
+    padding-left: calc(var(--udex-step-input-button-size) + var(--udex-step-input-input-horizontal-padding));
+}
+
+:host(:not([displayonly])) udex-text-field {
+    margin-right: calc(var(--udex-step-input-button-size) * -1);
+    margin-left: calc(var(--udex-step-input-button-size) * -1);
+    width: 100%;
+}
+
+:host(:not([displayonly])) udex-text-field::part(textfield-input) {
+    text-align: end;
+}
+
+:host .udex-step-input__button_dec {
+    order: 1;
+}
+
+:host udex-text-field {
+    order: 2;
+}
+
+:host .udex-step-input__button_inc {
+    order: 3;
+}

package/src/themes/Switch.css

@@ -0,0 +1,250 @@
+:host {
+  /* Standard inactive */
+  --udex-switch-color-standard-default-inactive-handle-background: var(--sapButton_Handle_Background, var(--udexColorNeutralWhite));
+  --udex-switch-color-standard-default-inactive-icon: var(--sapButton_Handle_TextColor, var(--udexColorGrey9));
+  --udex-switch-color-standard-default-inactive-track-background: var(--sapButton_Track_Background, var(--udexColorGrey5));
+
+  --udex-switch-color-standard-hover-inactive-handle-background: var(--sapButton_Handle_Hover_Background, var(--udexColorNeutralWhite));
+  --udex-switch-color-standard-hover-inactive-handle-border: var(--sapButton_Handle_Hover_BorderColor, var(--udexColorNeutralWhite40));
+  --udex-switch-color-standard-hover-inactive-icon: var(--sapButton_Handle_TextColor, var(--udexColorGrey9));
+  --udex-switch-color-standard-hover-inactive-track-background: var(--sapButton_Track_Hover_Background, var(--udexColorGrey6));
+
+  /* Standard active */
+  --udex-switch-color-standard-default-active-handle-background: var(--sapButton_Handle_Selected_Background, var(--udexColorNeutralWhite));
+  --udex-switch-color-standard-default-active-icon: var(--sapButton_Handle_Selected_TextColor, var(--udexColorBlue7));
+  --udex-switch-color-standard-default-active-track-background: var(--sapButton_Track_Selected_Background, var(--udexColorBlue7));
+
+  --udex-switch-color-standard-hover-active-handle-background: var(--sapButton_Handle_Selected_Background, var(--udexColorNeutralWhite));
+  --udex-switch-color-standard-hover-active-handle-border: var(--sapButton_Handle_Selected_Hover_BorderColor, var(--udexColorNeutralWhite40));
+  --udex-switch-color-standard-hover-active-icon: var(--udexColorBlue9, #0040b0);
+  --udex-switch-color-standard-hover-active-track-background: var(--sapButton_Track_Selected_Hover_Background, var(--udexColorBlue9));
+
+  /* Reject */
+  --udex-switch-color-reject-default-handle-background: var(--sapButton_Handle_Negative_Background, var(--udexColorNeutralWhite));
+  --udex-switch-color-reject-default-icon: var(--sapButton_Handle_Negative_TextColor, var(--udexCoreSemanticError8));
+  --udex-switch-color-reject-default-track-background: var(--sapButton_Track_Negative_Background, var(--udexCoreSemanticError6));
+
+  --udex-switch-color-reject-hover-handle-background: var(--sapButton_Handle_Negative_Hover_Background, var(--udexColorNeutralWhite));
+  --udex-switch-color-reject-hover-handle-border: var(--sapButton_Handle_Negative_Hover_BorderColor, var(--udexColorNeutralWhite40));
+  --udex-switch-color-reject-hover-icon: var(--sapButton_Track_Negative_TextColor, var(--udexCoreSemanticError8));
+  --udex-switch-color-reject-hover-track-background: var(--sapButton_Track_Negative_Hover_Background, var(--udexCoreSemanticError7));
+
+  /* Accept */
+  --udex-switch-color-accept-default-handle-background: var(--sapButton_Handle_Positive_Background, var(--udexColorNeutralWhite));
+  --udex-switch-color-accept-default-icon: var(--sapButton_Handle_Positive_TextColor, var(--udexCoreSemanticSuccess8));
+  --udex-switch-color-accept-default-track-background: var(--sapButton_Track_Positive_Background, var(--udexCoreSemanticSuccess7));
+
+  --udex-switch-color-accept-hover-handle-background: var(--sapButton_Handle_Positive_Hover_Background, var(--udexColorNeutralWhite));
+  --udex-switch-color-accept-hover-handle-border: var(--sapButton_Handle_Positive_Hover_BorderColor, var(--udexColorNeutralWhite40));
+  --udex-switch-color-accept-hover-icon: var(--sapButton_Handle_Positive_TextColor, var(--udexCoreSemanticSuccess8));
+  --udex-switch-color-accept-hover-track-background: var(--sapButton_Track_Positive_Hover_Background, var(--udexCoreSemanticSuccess8));
+}
+
+:host {
+  display: inline-block;
+}
+
+.udex-switch {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  font-family: var(--sapFontFamily);
+  gap: var(--udexSpacer12, 12px);
+  color: var(--udexCoreTextDark, #223548);
+}
+:host([desktop]) .udex-switch__container:focus,
+.udex-switch__container:focus-visible {
+  outline: var(--udexSpacer2, 2px) solid var(--udexColorBlue9, #0040B0);
+  outline-offset: var(--udexSpacer2, 2px);
+  border-radius: var(--udexSwitchRadius, 100px);
+}
+
+:host([disabled]) .udex-switch {
+  opacity: 0.4;
+}
+
+/* Label styles */
+
+.udex-switch__label {
+  font-size: var(--udexTypographyBodySFontSize, 16px);
+  line-height: 24px;
+  font-weight: 400;
+}
+
+/* Switch styles */
+
+.udex-switch__container {
+  width: 40px;
+  height: 24px;
+}
+
+:host(:not([disabled])) .udex-switch__container {
+  cursor: pointer;
+}
+
+.udex-switch__track {
+  border-radius: var(--udexSwitchRadius, 100px);
+  height: inherit;
+  padding: var(--udexSpacer2, 2px);
+  box-sizing: border-box;
+  container-type: inline-size;
+}
+
+.udex-switch__handle {
+  padding: var(--udexSpacer2, 2px) var(--udexSpacer4, 4px);
+  width: 24px;
+  height: 20px;
+  border-radius: var(--udexSwitchRadius, 100px);
+  box-sizing: border-box;
+  transition: transform 0.3s ease;
+}
+
+:host(:not([checked])) .udex-switch__track .udex-switch__handle {
+  transform: translateX(0%);
+}
+
+:host([checked]:dir(ltr)) .udex-switch__track .udex-switch__handle {
+  transform: translateX(calc(100cqw - 100%));
+}
+
+:host([checked]:dir(rtl)) .udex-switch__track .udex-switch__handle {
+  transform: translateX(calc(-100cqw + 100%));
+}
+
+.udex-switch__icon {
+  display: block;
+  width: 16px;
+  height: 16px;
+}
+
+/* Non-semantic inactive styles */
+
+.udex-switch__track--inactive.udex-switch__track,
+:host([color=Non-Semantic]) .udex-switch__track--inactive.udex-switch__track {
+  background-color: var(--udex-switch-color-standard-default-inactive-track-background);
+}
+
+.udex-switch__track--inactive .udex-switch__handle ,
+:host([color=Non-Semantic]) .udex-switch__track--inactive .udex-switch__handle {
+  background-color: var(--udex-switch-color-standard-default-inactive-handle-background);
+}
+
+.udex-switch__track--inactive .udex-switch__icon ,
+:host([color=Non-Semantic]) .udex-switch__track--inactive .udex-switch__icon {
+  color: var(--udex-switch-color-standard-default-inactive-icon);
+}
+
+.udex-switch__container:hover .udex-switch__track--inactive.udex-switch__track ,
+:host([color=Non-Semantic]:not([disabled])) .udex-switch__container:hover .udex-switch__track--inactive.udex-switch__track {
+  background-color: var(--udex-switch-color-standard-hover-inactive-track-background);
+}
+
+.udex-switch__container:hover .udex-switch__track--inactive .udex-switch__handle ,
+:host([color=Non-Semantic]:not([disabled])) .udex-switch__container:hover .udex-switch__track--inactive .udex-switch__handle {
+  background-color: var(--udex-switch-color-standard-hover-inactive-handle-background);
+  box-shadow: 0 0 0 2px var(--udex-switch-color-standard-hover-inactive-handle-border);
+}
+
+.udex-switch__container:hover .udex-switch__track--inactive .udex-switch__icon ,
+:host([color=Non-Semantic]:not([disabled])) .udex-switch__container:hover .udex-switch__track--inactive .udex-switch__icon {
+  color: var(--udex-switch-color-standard-hover-inactive-icon);
+}
+
+/* Non-semantic active styles */
+
+.udex-switch__track--active.udex-switch__track ,
+:host([color=Non-Semantic]) .udex-switch__track--active.udex-switch__track {
+  background-color: var(--udex-switch-color-standard-default-active-track-background);
+}
+
+.udex-switch__track--active .udex-switch__handle ,
+:host([color=Non-Semantic]) .udex-switch__track--active .udex-switch__handle {
+  background-color: var(--udex-switch-color-standard-default-active-handle-background);
+}
+
+.udex-switch__track--active .udex-switch__icon ,
+:host([color=Non-Semantic]) .udex-switch__track--active .udex-switch__icon {
+  color: var(--udex-switch-color-standard-default-active-icon);
+}
+
+.udex-switch__container:hover .udex-switch__track--active.udex-switch__track ,
+:host([color=Non-Semantic]:not([disabled])) .udex-switch__container:hover .udex-switch__track--active.udex-switch__track {
+  background-color: var(--udex-switch-color-standard-hover-active-track-background);
+}
+
+.udex-switch__container:hover .udex-switch__track--active .udex-switch__handle ,
+:host([color=Non-Semantic]:not([disabled])) .udex-switch__container:hover .udex-switch__track--active .udex-switch__handle {
+  background-color: var(--udex-switch-color-standard-hover-active-handle-background);
+  box-shadow: 0 0 0 2px var(--udex-switch-color-standard-hover-active-handle-border);
+}
+
+.udex-switch__container:hover .udex-switch__track--active .udex-switch__icon ,
+:host([color=Non-Semantic]:not([disabled])) .udex-switch__container:hover .udex-switch__track--active .udex-switch__icon {
+  color: var(--udex-switch-color-standard-hover-active-icon);
+}
+
+/* Semantic inactive styles */
+
+:host([color=Semantic]) .udex-switch__track--inactive.udex-switch__track {
+  background-color: var(--udex-switch-color-reject-default-track-background);
+}
+
+:host([color=Semantic]) .udex-switch__track--inactive .udex-switch__handle {
+  background-color: var(--udex-switch-color-reject-default-handle-background);
+}
+
+:host([color=Semantic]) .udex-switch__track--inactive .udex-switch__icon {
+  color: var(--udex-switch-color-reject-default-icon);
+}
+
+:host([color=Semantic]:not([disabled])) .udex-switch__container:hover .udex-switch__track--inactive.udex-switch__track {
+  background-color: var(--udex-switch-color-reject-hover-track-background);
+}
+
+:host([color=Semantic]:not([disabled])) .udex-switch__container:hover .udex-switch__track--inactive .udex-switch__handle {
+  background-color: var(--udex-switch-color-reject-hover-handle-background);
+  box-shadow: 0 0 0 2px var(--udex-switch-color-reject-hover-handle-border);
+}
+
+:host([color=Semantic]:not([disabled])) .udex-switch__container:hover .udex-switch__track--inactive .udex-switch__icon {
+  color: var(--udex-switch-color-reject-hover-icon);
+}
+
+/* Semantic active styles */
+
+:host([color=Semantic]) .udex-switch__track--active.udex-switch__track {
+  background-color: var(--udex-switch-color-accept-default-track-background);
+}
+
+:host([color=Semantic]) .udex-switch__track--active .udex-switch__handle {
+  background-color: var(--udex-switch-color-accept-default-handle-background);
+}
+
+:host([color=Semantic]) .udex-switch__track--active .udex-switch__icon {
+  color: var(--udex-switch-color-accept-default-icon);
+}
+
+:host([color=Semantic]:not([disabled])) .udex-switch__container:hover .udex-switch__track--active.udex-switch__track {
+  background-color: var(--udex-switch-color-accept-hover-track-background);
+}
+
+:host([color=Semantic]:not([disabled])) .udex-switch__container:hover .udex-switch__track--active .udex-switch__handle {
+  background-color: var(--udex-switch-color-accept-hover-handle-background);
+  box-shadow: 0 0 0 2px var(--udex-switch-color-accept-hover-handle-border);
+}
+
+:host([color=Semantic]:not([disabled])) .udex-switch__container:hover .udex-switch__track--active .udex-switch__icon {
+  color: var(--udex-switch-color-accept-hover-icon);
+}
+
+.udex-switch__input {
+  position: absolute;
+	inset-inline-start: 0;
+	width: 0;
+	height: 0;
+	margin: 0;
+	visibility: hidden;
+	appearance: none;
+}
+