ids-enterprise-wc 1.4.1 → 1.5.0

package/chunks/{ids-chunk-OGCQUAFR.js → ids-chunk-ZBGSS75H.js}

@@ -1,4 +1,4 @@
-import{a as v}from"./ids-chunk-EX3JGHXB.js";import{a as b}from"./ids-chunk-BBZCGBJQ.js";import{a as u}from"./ids-chunk-AKXLMJEO.js";import{a as c,b as l}from"./ids-chunk-XE4WFW5M.js";import{a as r,b as a,d,g as s}from"./ids-chunk-Y32WUP63.js";var m=`/**
+import{a as v}from"./ids-chunk-35YLGXKN.js";import{a as b}from"./ids-chunk-TPB43LXV.js";import{a as u}from"./ids-chunk-7PC5M3PD.js";import{a as c,b as l}from"./ids-chunk-XE4WFW5M.js";import{a as r,b as a,d,f as s}from"./ids-chunk-ZMMCFAAI.js";var m=`/**
  * Ids Button Component CSS
  * (Includes standard and icon button rules)
  */
@@ -52,8 +52,8 @@ import{a as v}from"./ids-chunk-EX3JGHXB.js";import{a as b}from"./ids-chunk-BBZCG
 }
 
 :host([system-button]) button:hover {
-  background-color: transparent;
-  border-color: transparent;
+  background-color: var(--ids-color-transparent);
+  border-color: var(--ids-color-transparent);
   color: var(--ids-button-system-color-text-hover);
 }
 
@@ -86,14 +86,14 @@ button {
 .ids-menu-button {
   box-shadow: var(--ids-shadow-none);
   font-weight: var(--ids-font-weight-normal);
-  font-family: var(--ids-font-family-default);
-  font-size: var(--ids-font-size-40);
+  font-family: var(--ids-font-family-default), var(--ids-font-family-system-sans);
+  font-size: var(--ids-font-size-sm);
   overflow: hidden;
   padding-bottom: calc(var(--ids-space-xs) - 2px);
   padding-top: calc(var(--ids-space-xs) - 2px);
   position: relative;
   border: 1px solid transparent;
-  background-color: transparent;
+  background-color: var(--ids-color-transparent);
   color: var(--ids-button-color-text-default);
   transition: background-color var(--ids-motion-duration) var(--ids-motion-ease), border-color var(--ids-motion-duration) var(--ids-motion-ease), color var(--ids-motion-duration) var(--ids-motion-ease), opacity var(--ids-motion-duration) var(--ids-motion-ease);
   white-space: nowrap;
@@ -122,7 +122,7 @@ button {
 .ids-toggle-button:focus,
 .ids-menu-button:focus {
   outline: none;
-  outline-color: transparent;
+  outline-color: var(--ids-color-transparent);
 }
 .ids-button:not([disabled]),
 .ids-toggle-button:not([disabled]),
@@ -149,7 +149,7 @@ button {
 .ids-button:not(.ids-icon-button):not(.align-icon-end) ::slotted(ids-icon:not([icon=insights-smart-panel])),
 .ids-toggle-button:not(.ids-icon-button):not(.align-icon-end) ::slotted(ids-icon:not([icon=insights-smart-panel])),
 .ids-menu-button:not(.ids-icon-button):not(.align-icon-end) ::slotted(ids-icon:not([icon=insights-smart-panel])) {
-  margin-inline-end: calc(var(--ids-space-xxs) + 3px);
+  margin-inline-end: calc(var(--ids-space-2xs) + 3px);
 }
 .ids-button .ids-icon,
 .ids-toggle-button .ids-icon,
@@ -159,7 +159,7 @@ button {
 .ids-button.align-icon-end ::slotted(ids-icon),
 .ids-toggle-button.align-icon-end ::slotted(ids-icon),
 .ids-menu-button.align-icon-end ::slotted(ids-icon) {
-  margin-inline-start: var(--ids-space-xxs);
+  margin-inline-start: var(--ids-space-2xs);
 }
 .ids-button.content-align-start,
 .ids-toggle-button.content-align-start,
@@ -176,11 +176,6 @@ button {
 .ids-menu-button.no-margins {
   margin-inline: var(--ids-space-none);
 }
-.ids-button:not(.no-margins),
-.ids-toggle-button:not(.no-margins),
-.ids-menu-button:not(.no-margins) {
-  margin: var(--ids-button-alt-margin);
-}
 .ids-button.field-height-xxs:not(.btn-secondary):not(.no-margins),
 .ids-toggle-button.field-height-xxs:not(.btn-secondary):not(.no-margins),
 .ids-menu-button.field-height-xxs:not(.btn-secondary):not(.no-margins) {
@@ -339,7 +334,7 @@ button {
     background-color: #fff;
   }
   50%, 100% {
-    background-color: rgba(255, 255, 255, 0.4);
+    background-color: rgba(255 255 255/var(--ids-opacity-disabled));
   }
 }
 @keyframes dot-flashing-colors {
@@ -432,7 +427,7 @@ button {
 .ids-menu-button.btn-tertiary-generative-ai {
   background: var(--ids-button-ai-color-tertiary-background-default);
   background-clip: text;
-  -webkit-text-fill-color: transparent;
+  -webkit-text-fill-color: var(--ids-color-transparent);
   align-items: center;
 }
 .ids-button.btn-tertiary-generative-ai:hover,
@@ -440,8 +435,8 @@ button {
 .ids-menu-button.btn-tertiary-generative-ai:hover {
   background: var(--ids-button-ai-color-tertiary-background-hover);
   background-clip: text;
-  border-color: transparent;
-  -webkit-text-fill-color: transparent;
+  border-color: var(--ids-color-transparent);
+  -webkit-text-fill-color: var(--ids-color-transparent);
 }
 .ids-button.btn-tertiary-generative-ai ::slotted(ids-icon[icon=insights-smart-panel]),
 .ids-toggle-button.btn-tertiary-generative-ai ::slotted(ids-icon[icon=insights-smart-panel]),
@@ -460,14 +455,14 @@ button {
 .ids-menu-button.btn-tertiary-generative-ai:active .ids-menu-button.btn-tertiary-generative-ai.gen-ai-active {
   background: var(--ids-button-ai-color-background-active);
   background-clip: text;
-  -webkit-text-fill-color: transparent;
+  -webkit-text-fill-color: var(--ids-color-transparent);
 }
 .ids-button.btn-tertiary-generative-ai[disabled],
 .ids-toggle-button.btn-tertiary-generative-ai[disabled],
 .ids-menu-button.btn-tertiary-generative-ai[disabled] {
   background: var(--ids-button-tertiary-ai-color-background-disabled);
   background-clip: text;
-  -webkit-text-fill-color: transparent;
+  -webkit-text-fill-color: var(--ids-color-transparent);
   opacity: var(--ids-button-ai-opacity-disabled);
 }
 .ids-button.btn-tertiary-generative-ai[disabled] ::slotted(ids-icon[icon=insights-smart-panel]),
@@ -584,7 +579,7 @@ button {
 .ids-menu-button.color-variant-alternate:hover,
 .ids-menu-button.color-variant-alternate-formatter:hover {
   background-color: var(--ids-button-formatter-color-background-hover);
-  border-color: transparent;
+  border-color: var(--ids-color-transparent);
   color: var(--ids-button-formatter-color-text-hover);
   opacity: 1;
 }
@@ -593,7 +588,7 @@ button {
 .ids-toggle-button.color-variant-alternate-formatter[disabled],
 .ids-menu-button.color-variant-alternate[disabled],
 .ids-menu-button.color-variant-alternate-formatter[disabled] {
-  background-color: transparent;
+  background-color: var(--ids-color-transparent);
   opacity: var(--ids-button-formatter-opacity-disabled);
 }
 .ids-button.color-variant-alternate-formatter,
@@ -636,8 +631,8 @@ button {
 .ids-button.color-variant-alternate-formatter.ids-menu-button.compact,
 .ids-toggle-button.color-variant-alternate-formatter.ids-menu-button.compact,
 .ids-menu-button.color-variant-alternate-formatter.ids-menu-button.compact {
-  padding: var(--ids-space-xxs);
-  padding-inline: var(--ids-space-xxs);
+  padding: var(--ids-space-2xs);
+  padding-inline: var(--ids-space-2xs);
 }
 .ids-button.color-variant-alternate-formatter.ids-menu-button.compact.square,
 .ids-toggle-button.color-variant-alternate-formatter.ids-menu-button.compact.square,
@@ -700,20 +695,20 @@ button {
 }
 .ids-menu-button.formatter-width:not(.formatter-width-percentage) .ids-icon {
   position: absolute;
-  inset-inline-end: var(--ids-space-xxs);
+  inset-inline-end: var(--ids-space-2xs);
 }
 
 .ids-icon-button {
   box-shadow: var(--ids-shadow-none);
   font-weight: var(--ids-font-weight-normal);
-  font-family: var(--ids-font-family-default);
-  font-size: var(--ids-font-size-40);
+  font-family: var(--ids-font-family-default), var(--ids-font-family-system-sans);
+  font-size: var(--ids-font-size-sm);
   overflow: hidden;
   padding-bottom: calc(var(--ids-space-xs) - 2px);
   padding-top: calc(var(--ids-space-xs) - 2px);
   position: relative;
   border: 1px solid transparent;
-  background-color: transparent;
+  background-color: var(--ids-color-transparent);
   color: var(--ids-button-color-text-default);
   transition: background-color var(--ids-motion-duration) var(--ids-motion-ease), border-color var(--ids-motion-duration) var(--ids-motion-ease), color var(--ids-motion-duration) var(--ids-motion-ease), opacity var(--ids-motion-duration) var(--ids-motion-ease);
   white-space: nowrap;
@@ -736,7 +731,7 @@ button {
 }
 .ids-icon-button:focus {
   outline: none;
-  outline-color: transparent;
+  outline-color: var(--ids-color-transparent);
 }
 .ids-icon-button:not([disabled]) {
   cursor: var(--ids-cursor-pointer);
@@ -755,13 +750,13 @@ button {
   width: 1px;
 }
 .ids-icon-button:not(.ids-icon-button):not(.align-icon-end) ::slotted(ids-icon:not([icon=insights-smart-panel])) {
-  margin-inline-end: calc(var(--ids-space-xxs) + 3px);
+  margin-inline-end: calc(var(--ids-space-2xs) + 3px);
 }
 .ids-icon-button .ids-icon {
   vertical-align: middle;
 }
 .ids-icon-button.align-icon-end ::slotted(ids-icon) {
-  margin-inline-start: var(--ids-space-xxs);
+  margin-inline-start: var(--ids-space-2xs);
 }
 .ids-icon-button.content-align-start {
   justify-content: start;
@@ -772,9 +767,6 @@ button {
 .ids-icon-button.no-margins {
   margin-inline: var(--ids-space-none);
 }
-.ids-icon-button:not(.no-margins) {
-  margin: var(--ids-button-alt-margin);
-}
 .ids-icon-button.field-height-xxs:not(.btn-secondary):not(.no-margins) {
   margin-block-start: 3px;
   margin-inline-end: -2px;
@@ -871,7 +863,7 @@ button {
     background-color: #fff;
   }
   50%, 100% {
-    background-color: rgba(255, 255, 255, 0.4);
+    background-color: rgba(255 255 255/var(--ids-opacity-disabled));
   }
 }
 @keyframes dot-flashing-colors {
@@ -938,14 +930,14 @@ button {
 .ids-icon-button.btn-tertiary-generative-ai {
   background: var(--ids-button-ai-color-tertiary-background-default);
   background-clip: text;
-  -webkit-text-fill-color: transparent;
+  -webkit-text-fill-color: var(--ids-color-transparent);
   align-items: center;
 }
 .ids-icon-button.btn-tertiary-generative-ai:hover {
   background: var(--ids-button-ai-color-tertiary-background-hover);
   background-clip: text;
-  border-color: transparent;
-  -webkit-text-fill-color: transparent;
+  border-color: var(--ids-color-transparent);
+  -webkit-text-fill-color: var(--ids-color-transparent);
 }
 .ids-icon-button.btn-tertiary-generative-ai ::slotted(ids-icon[icon=insights-smart-panel]) {
   --ids-button-ai-color-icon-primary: var(--ids-button-ai-color-icon-primary-hover);
@@ -954,12 +946,12 @@ button {
 .ids-icon-button.btn-tertiary-generative-ai:active .ids-icon-button.btn-tertiary-generative-ai.gen-ai-active {
   background: var(--ids-button-ai-color-background-active);
   background-clip: text;
-  -webkit-text-fill-color: transparent;
+  -webkit-text-fill-color: var(--ids-color-transparent);
 }
 .ids-icon-button.btn-tertiary-generative-ai[disabled] {
   background: var(--ids-button-tertiary-ai-color-background-disabled);
   background-clip: text;
-  -webkit-text-fill-color: transparent;
+  -webkit-text-fill-color: var(--ids-color-transparent);
   opacity: var(--ids-button-ai-opacity-disabled);
 }
 .ids-icon-button.btn-tertiary-generative-ai[disabled] ::slotted(ids-icon[icon=insights-smart-panel]) {
@@ -1022,12 +1014,12 @@ button {
 }
 .ids-icon-button.color-variant-alternate:hover, .ids-icon-button.color-variant-alternate-formatter:hover {
   background-color: var(--ids-button-formatter-color-background-hover);
-  border-color: transparent;
+  border-color: var(--ids-color-transparent);
   color: var(--ids-button-formatter-color-text-hover);
   opacity: 1;
 }
 .ids-icon-button.color-variant-alternate[disabled], .ids-icon-button.color-variant-alternate-formatter[disabled] {
-  background-color: transparent;
+  background-color: var(--ids-color-transparent);
   opacity: var(--ids-button-formatter-opacity-disabled);
 }
 .ids-icon-button.color-variant-alternate-formatter {
@@ -1052,8 +1044,8 @@ button {
   color: var(--ids-button-formatter-color-active);
 }
 .ids-icon-button.color-variant-alternate-formatter.ids-menu-button.compact {
-  padding: var(--ids-space-xxs);
-  padding-inline: var(--ids-space-xxs);
+  padding: var(--ids-space-2xs);
+  padding-inline: var(--ids-space-2xs);
 }
 .ids-icon-button.color-variant-alternate-formatter.ids-menu-button.compact.square {
   border-radius: var(--ids-border-radius-xs);
@@ -1085,13 +1077,13 @@ button {
   border-radius: var(--ids-button-radius);
 }
 .ids-icon-button.square {
-  border-radius: 0;
+  border-radius: var(--ids-border-radius-none);
 }
-.ids-icon-button .ids-icon {
+.ids-icon-button .ids-icon:not(.dropdown-icon) {
   display: block;
-  padding-inline-start: 2px;
+  padding-inline-start: var(--ids-space-3xs);
   font-size: 0;
-  padding-block-start: 2px;
+  padding-block-start: var(--ids-space-3xs);
 }
 .ids-icon-button span.audible {
   clip: rect(0, 0, 0, 0);
@@ -1206,7 +1198,7 @@ button {
 .ids-menu-button.btn-primary-generative-ai:not(.hide-focus).focus-within,
 .ids-menu-button.btn-primary-generative-ai:not(.hide-focus):focus {
   box-shadow: var(--ids-button-ai-shadow-focus);
-  border-color: transparent;
+  border-color: var(--ids-color-transparent);
 }
 .ids-button.btn-tertiary-generative-ai:not(.hide-focus).is-active, .ids-button.btn-tertiary-generative-ai:not(.hide-focus).is-focused, .ids-button.btn-tertiary-generative-ai:not(.hide-focus).focus-within, .ids-button.btn-tertiary-generative-ai:not(.hide-focus):focus,
 .ids-icon-button.btn-tertiary-generative-ai:not(.hide-focus).is-active,
@@ -1224,21 +1216,21 @@ button {
 .ids-modal-button:not(.ids-modal-icon-button) {
   box-shadow: var(--ids-shadow-none);
   font-weight: var(--ids-font-weight-normal);
-  font-family: var(--ids-font-family-default);
-  font-size: var(--ids-font-size-40);
+  font-family: var(--ids-font-family-default), var(--ids-font-family-system-sans);
+  font-size: var(--ids-font-size-sm);
   overflow: hidden;
   padding-bottom: calc(var(--ids-space-xs) - 2px);
   padding-top: calc(var(--ids-space-xs) - 2px);
   position: relative;
   border: 1px solid transparent;
-  background-color: transparent;
+  background-color: var(--ids-color-transparent);
   color: var(--ids-button-color-text-default);
   transition: background-color var(--ids-motion-duration) var(--ids-motion-ease), border-color var(--ids-motion-duration) var(--ids-motion-ease), color var(--ids-motion-duration) var(--ids-motion-ease), opacity var(--ids-motion-duration) var(--ids-motion-ease);
   white-space: nowrap;
   padding-block-start: var(--ids-space-12);
   padding-block-end: var(--ids-space-12);
   display: block;
-  font-weight: var(--ids-font-weight-semibold);
+  font-weight: var(--ids-font-weight-strong);
   justify-content: center;
   height: 100%;
   width: 100%;
@@ -1251,7 +1243,7 @@ button {
 }
 .ids-modal-button:not(.ids-modal-icon-button):focus {
   outline: none;
-  outline-color: transparent;
+  outline-color: var(--ids-color-transparent);
 }
 .ids-modal-button:not(.ids-modal-icon-button):not([disabled]) {
   cursor: var(--ids-cursor-pointer);
@@ -1270,13 +1262,13 @@ button {
   width: 1px;
 }
 .ids-modal-button:not(.ids-modal-icon-button):not(.ids-icon-button):not(.align-icon-end) ::slotted(ids-icon:not([icon=insights-smart-panel])) {
-  margin-inline-end: calc(var(--ids-space-xxs) + 3px);
+  margin-inline-end: calc(var(--ids-space-2xs) + 3px);
 }
 .ids-modal-button:not(.ids-modal-icon-button) .ids-icon {
   vertical-align: middle;
 }
 .ids-modal-button:not(.ids-modal-icon-button).align-icon-end ::slotted(ids-icon) {
-  margin-inline-start: var(--ids-space-xxs);
+  margin-inline-start: var(--ids-space-2xs);
 }
 .ids-modal-button:not(.ids-modal-icon-button).content-align-start {
   justify-content: start;
@@ -1287,9 +1279,6 @@ button {
 .ids-modal-button:not(.ids-modal-icon-button).no-margins {
   margin-inline: var(--ids-space-none);
 }
-.ids-modal-button:not(.ids-modal-icon-button):not(.no-margins) {
-  margin: var(--ids-button-alt-margin);
-}
 .ids-modal-button:not(.ids-modal-icon-button).field-height-xxs:not(.btn-secondary):not(.no-margins) {
   margin-block-start: 3px;
   margin-inline-end: -2px;
@@ -1351,7 +1340,7 @@ button {
 .btn-swipe-action-right:hover,
 .btn-swipe-action-right:focus {
   box-shadow: none;
-  border-color: transparent;
+  border-color: var(--ids-color-transparent);
 }
 
 .ids-button:not(.no-margins).btn-swipe-action-left,
@@ -1360,8 +1349,8 @@ button {
 }
 
 .btn-swipe-action-left {
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
+  border-start-end-radius: var(--ids-border-radius-none);
+  border-end-end-radius: var(--ids-border-radius-none);
   background-color: var(--ids-swipe-action-color-background-left);
   color: var(--ids-swipe-action-color-text-left);
 }
@@ -1375,8 +1364,8 @@ button {
 }
 
 .btn-swipe-action-right {
-  border-start-start-radius: 0;
-  border-end-start-radius: 0;
+  border-start-start-radius: var(--ids-border-radius-none);
+  border-end-start-radius: var(--ids-border-radius-none);
   background-color: var(--ids-swipe-action-color-background-right);
   color: var(--ids-swipe-action-color-text-right);
 }
@@ -1400,9 +1389,9 @@ button {
 
 .ids-icon-button.gen-ai-active .loading-dots {
   padding-inline-start: 3px;
-  padding-inline-end: 2px;
+  padding-inline-end: var(--ids-space-3xs);
   padding-block-start: 7px;
-  padding-block-end: 8px;
+  padding-block-end: var(--ids-space-xs);
 }
 
 .ids-button ::slotted(ids-icon:not(:first-child)),
@@ -1410,7 +1399,7 @@ button {
 .ids-menu-button:not(.ids-icon-button) ::slotted(ids-icon:not(:first-child)),
 .ids-modal-button:not(.ids-icon-button) ::slotted(ids-icon:not(:first-child)) {
   margin-inline-start: 5px;
-  margin-inline-end: 0;
+  margin-inline-end: var(--ids-space-none);
 }
 .ids-button .ids-icon:last-child,
 .ids-button span + span:not(.audible),
@@ -1428,7 +1417,7 @@ button {
 }
 
 .ids-modal-button ::slotted(ids-icon:not(:first-child)) {
-  padding: var(--ids-space-xxxs);
+  padding: var(--ids-space-3xs);
 }
 
 :host(:not([show-loading-indicator=true])) ::slotted(.slot-loading-indicator) {
@@ -1460,8 +1449,8 @@ button {
   position: absolute;
   margin-inline-start: auto;
   margin-inline-end: auto;
-  left: 0;
-  right: 0;
+  left: var(--ids-space-none);
+  right: var(--ids-space-none);
 }
 
 :host(ids-toggle-button) {
@@ -1491,6 +1480,21 @@ button {
   --ids-button-tertiary-color-text-default: var(--ids-button-toggle-color-text-pressed-red);
 }
 
+:host(ids-toggle-button.ids-toggle-button-segmented) button {
+  border-radius: var(--ids-border-radius-circle);
+}
+:host(ids-toggle-button.ids-toggle-button-segmented) button:hover {
+  color: var(--ids-segmented-control-text-color);
+  background-color: var(--ids-segmented-control-background-hover);
+}
+
+:host(ids-toggle-button.ids-toggle-button-segmented[pressed]) button {
+  color: var(--ids-segmented-control-text-color);
+  background-color: var(--ids-segmented-control-background-hover);
+  box-shadow: var(--ids-segmented-control-box-shadow);
+  border-color: transparent;
+}
+
 :host {
   display: block;
 }
@@ -1514,7 +1518,7 @@ button {
 .ids-accordion-header {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  border-width: 1px;
+  border-width: var(--ids-border-width-sm);
   border-style: solid;
   align-items: center;
   cursor: pointer;
@@ -1532,7 +1536,7 @@ button {
   outline: 0;
 }
 .ids-accordion-header:not([class*=color-variant-]) {
-  border-color: transparent;
+  border-color: var(--ids-color-transparent);
   border-bottom-color: var(--ids-accordion-header-color-border-bottom);
   padding: var(--ids-accordion-header-padding);
 }
@@ -1556,14 +1560,14 @@ button {
 .ids-accordion-header.color-variant-app-menu {
   margin-inline: 8px;
   border-radius: 4px;
-  background-color: transparent;
-  border-color: transparent;
+  background-color: var(--ids-color-transparent);
+  border-color: var(--ids-color-transparent);
   color: var(--ids-app-menu-accordion-header-color-text-default);
   padding: var(--ids-accordion-header-app-menu-padding);
 }
 .ids-accordion-header.color-variant-app-menu.expanded {
-  background-color: transparent;
-  border-color: transparent;
+  background-color: var(--ids-color-transparent);
+  border-color: var(--ids-color-transparent);
 }
 .ids-accordion-header.color-variant-app-menu:hover {
   background-color: var(--ids-app-menu-header-color-background-hover);
@@ -1593,15 +1597,15 @@ button {
 .ids-accordion-header.color-variant-sub-app-menu {
   margin-inline: 8px;
   border-radius: 4px;
-  background-color: transparent;
-  border-color: transparent;
+  background-color: var(--ids-color-transparent);
+  border-color: var(--ids-color-transparent);
   color: var(--ids-app-menu-accordion-header-color-text-default);
   margin: 0;
   padding: var(--ids-accordion-header-sub-app-menu-padding);
 }
 .ids-accordion-header.color-variant-sub-app-menu.expanded {
-  background-color: transparent;
-  border-color: transparent;
+  background-color: var(--ids-color-transparent);
+  border-color: var(--ids-color-transparent);
 }
 .ids-accordion-header.color-variant-sub-app-menu:hover {
   background-color: var(--ids-app-menu-header-color-background-hover);
@@ -1656,10 +1660,10 @@ button {
   transition: height var(--ids-motion-duration) var(--ids-motion-ease), margin var(--ids-motion-duration) var(--ids-motion-ease), padding var(--ids-motion-duration) var(--ids-motion-ease), width var(--ids-motion-duration) var(--ids-motion-ease);
 }
 .ids-module-nav-item.color-variant-module-nav {
-  border-color: transparent;
+  border-color: var(--ids-color-transparent);
   border-radius: var(--ids-module-nav-common-border-radius);
   border-style: solid;
-  border-width: 1px;
+  border-width: var(--ids-border-width-sm);
   color: var(--ids-module-nav-item-text-color);
 }
 .ids-module-nav-item.color-variant-module-nav:hover {
@@ -1669,9 +1673,10 @@ button {
 .ids-module-nav-item.color-variant-module-nav:active {
   background-color: var(--ids-module-nav-item-selected-bg-color);
   color: var(--ids-module-nav-item-selected-text-color);
+  border-color: var(--ids-module-nav-item-active-border-color);
 }
 .ids-module-nav-item.color-variant-module-nav:focus:not(.hide-focus) {
-  border-color: var(--ids-module-nav-item-selected-text-color);
+  border-color: var(--ids-module-nav-item-active-border-color);
 }
 .ids-module-nav-item.color-variant-module-nav.selected {
   background-color: var(--ids-module-nav-item-selected-bg-color);
@@ -1688,7 +1693,7 @@ button {
 }
 .ids-module-nav-item.color-variant-module-nav:not([class*=display-mode-]) {
   height: var(--ids-module-nav-item-collapsed-size);
-  margin-block: var(--ids-module-nav-item-collapsed-general-spacing-size);
+  margin-block: var(--ids-module-nav-item-collapsed-general-space-size);
   margin-inline: auto;
   padding-block: var(--ids-module-nav-item-padding-block);
   padding-inline: auto;
@@ -1706,7 +1711,7 @@ button {
 .ids-module-nav-item.color-variant-module-nav.display-mode-collapsed {
   height: var(--ids-module-nav-item-collapsed-size);
   width: var(--ids-module-nav-item-collapsed-size);
-  margin: var(--ids-module-nav-item-collapsed-general-spacing-size) auto;
+  margin: var(--ids-module-nav-item-collapsed-general-space-size) auto;
 }
 .ids-module-nav-item.color-variant-module-nav.display-mode-collapsed .ids-accordion-display-icon {
   margin-inline: var(--ids-module-nav-item-display-icon-collapsed-margin);
@@ -1739,16 +1744,16 @@ button {
   margin-block-end: 0;
 }
 .ids-module-nav-item.color-variant-module-nav.display-mode-expanded .ids-accordion-display-icon {
-  margin-inline-end: var(--ids-module-nav-item-expanded-icon-text-spacing-size);
+  margin-inline-end: var(--ids-module-nav-item-expanded-icon-text-space-size);
 }
 .ids-module-nav-item.color-variant-module-nav.display-mode-expanded .ids-accordion-expander-icon:last-child {
   margin-inline-end: 4px;
 }
 .ids-module-nav-item.color-variant-sub-module-nav {
-  border-color: transparent;
+  border-color: var(--ids-color-transparent);
   border-radius: var(--ids-module-nav-common-border-radius);
   border-style: solid;
-  border-width: 1px;
+  border-width: var(--ids-border-width-sm);
   color: var(--ids-module-nav-item-text-color);
 }
 .ids-module-nav-item.color-variant-sub-module-nav:hover {
@@ -1758,9 +1763,10 @@ button {
 .ids-module-nav-item.color-variant-sub-module-nav:active {
   background-color: var(--ids-module-nav-item-selected-bg-color);
   color: var(--ids-module-nav-item-selected-text-color);
+  border-color: var(--ids-module-nav-item-active-border-color);
 }
 .ids-module-nav-item.color-variant-sub-module-nav:focus:not(.hide-focus) {
-  border-color: var(--ids-module-nav-item-selected-text-color);
+  border-color: var(--ids-module-nav-item-active-border-color);
 }
 .ids-module-nav-item.color-variant-sub-module-nav.selected {
   background-color: var(--ids-module-nav-item-selected-bg-color);
@@ -1777,7 +1783,7 @@ button {
 }
 .ids-module-nav-item.color-variant-sub-module-nav:not([class*=display-mode-]) {
   height: var(--ids-module-nav-item-collapsed-size);
-  margin-block: var(--ids-module-nav-item-collapsed-general-spacing-size);
+  margin-block: var(--ids-module-nav-item-collapsed-general-space-size);
   margin-inline: auto;
   padding-block: var(--ids-module-nav-item-padding-block);
   padding-inline: auto;
@@ -1795,7 +1801,7 @@ button {
 .ids-module-nav-item.color-variant-sub-module-nav.display-mode-collapsed {
   height: var(--ids-module-nav-item-collapsed-size);
   width: var(--ids-module-nav-item-collapsed-size);
-  margin: var(--ids-module-nav-item-collapsed-general-spacing-size) auto;
+  margin: var(--ids-module-nav-item-collapsed-general-space-size) auto;
 }
 .ids-module-nav-item.color-variant-sub-module-nav.display-mode-collapsed .ids-accordion-display-icon {
   margin-inline: var(--ids-module-nav-item-display-icon-collapsed-margin);
@@ -1828,7 +1834,7 @@ button {
   margin-block-end: 0;
 }
 .ids-module-nav-item.color-variant-sub-module-nav.display-mode-expanded .ids-accordion-display-icon {
-  margin-inline-end: var(--ids-module-nav-item-expanded-icon-text-spacing-size);
+  margin-inline-end: var(--ids-module-nav-item-expanded-icon-text-space-size);
 }
 .ids-module-nav-item.color-variant-sub-module-nav.display-mode-expanded .ids-accordion-expander-icon:last-child {
   margin-inline-end: 4px;
@@ -1994,11 +2000,11 @@ button {
 .ids-module-nav-button {
   display: flex;
   align-self: center;
-  background-color: transparent;
-  border-color: transparent;
+  background-color: var(--ids-color-transparent);
+  border-color: var(--ids-color-transparent);
   border-radius: var(--ids-module-nav-common-border-radius);
   border-style: solid;
-  border-width: 1px;
+  border-width: var(--ids-border-width-sm);
   color: var(--ids-module-nav-item-text-color);
   height: var(--ids-module-nav-switcher-button-size);
   width: var(--ids-module-nav-switcher-button-size);
@@ -2052,7 +2058,7 @@ button {
 
 ::slotted(ids-icon) {
   margin-inline-start: 0;
-  margin-inline-end: var(--ids-module-nav-item-expanded-icon-text-spacing-size);
+  margin-inline-end: var(--ids-module-nav-item-expanded-icon-text-space-size);
 }
 
 ::slotted(ids-menu-button) {
@@ -2076,24 +2082,24 @@ ids-separator::part(separator) {
 .ids-module-nav-settings {
   box-shadow: var(--ids-shadow-none);
   font-weight: var(--ids-font-weight-normal);
-  font-family: var(--ids-font-family-default);
-  font-size: var(--ids-font-size-40);
+  font-family: var(--ids-font-family-default), var(--ids-font-family-system-sans);
+  font-size: var(--ids-font-size-sm);
   overflow: hidden;
   padding-bottom: calc(var(--ids-space-xs) - 2px);
   padding-top: calc(var(--ids-space-xs) - 2px);
   position: relative;
   border: 1px solid transparent;
-  background-color: transparent;
+  background-color: var(--ids-color-transparent);
   color: var(--ids-button-color-text-default);
   transition: background-color var(--ids-motion-duration) var(--ids-motion-ease), border-color var(--ids-motion-duration) var(--ids-motion-ease), color var(--ids-motion-duration) var(--ids-motion-ease), opacity var(--ids-motion-duration) var(--ids-motion-ease);
   white-space: nowrap;
   display: flex;
   align-self: center;
-  background-color: transparent;
-  border-color: transparent;
+  background-color: var(--ids-color-transparent);
+  border-color: var(--ids-color-transparent);
   border-radius: var(--ids-module-nav-common-border-radius);
   border-style: solid;
-  border-width: 1px;
+  border-width: var(--ids-border-width-sm);
   color: var(--ids-module-nav-item-text-color);
   height: var(--ids-module-nav-switcher-button-size);
   width: var(--ids-module-nav-switcher-button-size);
@@ -2106,7 +2112,7 @@ ids-separator::part(separator) {
 }
 .ids-module-nav-settings:focus {
   outline: none;
-  outline-color: transparent;
+  outline-color: var(--ids-color-transparent);
 }
 .ids-module-nav-settings:not([disabled]) {
   cursor: var(--ids-cursor-pointer);
@@ -2125,13 +2131,13 @@ ids-separator::part(separator) {
   width: 1px;
 }
 .ids-module-nav-settings:not(.ids-icon-button):not(.align-icon-end) ::slotted(ids-icon:not([icon=insights-smart-panel])) {
-  margin-inline-end: calc(var(--ids-space-xxs) + 3px);
+  margin-inline-end: calc(var(--ids-space-2xs) + 3px);
 }
 .ids-module-nav-settings .ids-icon {
   vertical-align: middle;
 }
 .ids-module-nav-settings.align-icon-end ::slotted(ids-icon) {
-  margin-inline-start: var(--ids-space-xxs);
+  margin-inline-start: var(--ids-space-2xs);
 }
 .ids-module-nav-settings.content-align-start {
   justify-content: start;
@@ -2142,9 +2148,6 @@ ids-separator::part(separator) {
 .ids-module-nav-settings.no-margins {
   margin-inline: var(--ids-space-none);
 }
-.ids-module-nav-settings:not(.no-margins) {
-  margin: var(--ids-button-alt-margin);
-}
 .ids-module-nav-settings.field-height-xxs:not(.btn-secondary):not(.no-margins) {
   margin-block-start: 3px;
   margin-inline-end: -2px;
@@ -2189,7 +2192,7 @@ ids-separator::part(separator) {
 }
 .ids-module-nav-settings.color-variant-module-nav:not([class*=display-mode-]) {
   height: var(--ids-module-nav-item-collapsed-size);
-  margin-block: var(--ids-module-nav-item-collapsed-general-spacing-size);
+  margin-block: var(--ids-module-nav-item-collapsed-general-space-size);
   margin-inline: auto;
   padding-block: var(--ids-module-nav-item-margin-inline);
   padding-inline: auto;
@@ -2209,7 +2212,7 @@ ids-separator::part(separator) {
 .ids-module-nav-settings.color-variant-module-nav.display-mode-collapsed ::slotted(ids-menu-button) {
   height: var(--ids-module-nav-item-collapsed-size);
   width: var(--ids-module-nav-item-collapsed-size);
-  margin: var(--ids-module-nav-item-collapsed-general-spacing-size) auto;
+  margin: var(--ids-module-nav-item-collapsed-general-space-size) auto;
 }
 .ids-module-nav-settings.color-variant-module-nav.display-mode-collapsed ::slotted(ids-icon) {
   margin-inline-end: 0;