@i-cell/ids-styles 0.0.51 → 0.0.53

package/dist/components.plugin.js

@@ -3455,6 +3455,31 @@ module.exports = function ComponentsPlugin() {
         fontSize: 'var(--ids-comp-checkbox-label-typography-font-size-dense)',
         lineHeight: 'var(--ids-comp-checkbox-label-typography-line-height-dense)',
       },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate)':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-hovered)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-hovered)',
+        },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):is(:checked,:indeterminate)':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-hovered)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-hovered)',
+        },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled)+.ids-checkbox__icon': {
+        color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-hovered)',
+      },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate)':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-pressed)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-pressed)',
+        },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):is(:checked,:indeterminate)':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-pressed)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-pressed)',
+        },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled)+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-pressed)' },
       '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled)': {
         borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-default)',
         backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-default)',
@@ -3502,7 +3527,6 @@ module.exports = function ComponentsPlugin() {
         {
           borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-disabled)',
           backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-disabled)',
-          color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-disabled)',
         },
       '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon':
         { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-default)' },
@@ -3512,6 +3536,8 @@ module.exports = function ComponentsPlugin() {
         { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-pressed)' },
       '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-checkbox__icon':
         { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-focused)' },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-disabled)' },
       '.ids-checkbox.ids-checkbox-light .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label': {
         color: 'var(--ids-comp-checkbox-label-color-fg-light-default)',
       },
@@ -3525,6 +3551,31 @@ module.exports = function ComponentsPlugin() {
         { color: 'var(--ids-comp-checkbox-label-color-fg-light-focused)' },
       '.ids-checkbox.ids-checkbox-light.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label':
         { color: 'var(--ids-comp-checkbox-label-color-fg-light-disabled)' },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate)':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-hovered)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-hovered)',
+        },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):is(:checked,:indeterminate)':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-hovered)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-hovered)',
+        },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled)+.ids-checkbox__icon': {
+        color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-hovered)',
+      },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate)':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-pressed)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-pressed)',
+        },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):is(:checked,:indeterminate)':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-pressed)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-pressed)',
+        },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled)+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-pressed)' },
       '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled)': {
         borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-default)',
         backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-default)',
@@ -3572,7 +3623,6 @@ module.exports = function ComponentsPlugin() {
         {
           borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-disabled)',
           backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-disabled)',
-          color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-disabled)',
         },
       '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon':
         { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-default)' },
@@ -3582,6 +3632,8 @@ module.exports = function ComponentsPlugin() {
         { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-pressed)' },
       '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-checkbox__icon':
         { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-focused)' },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-disabled)' },
       '.ids-checkbox.ids-checkbox-dark .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label': {
         color: 'var(--ids-comp-checkbox-label-color-fg-dark-default)',
       },
@@ -3595,6 +3647,31 @@ module.exports = function ComponentsPlugin() {
         { color: 'var(--ids-comp-checkbox-label-color-fg-dark-focused)' },
       '.ids-checkbox.ids-checkbox-dark.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label':
         { color: 'var(--ids-comp-checkbox-label-color-fg-dark-disabled)' },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate)':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-hovered)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-hovered)',
+        },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):is(:checked,:indeterminate)':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-hovered)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-hovered)',
+        },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled)+.ids-checkbox__icon': {
+        color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-hovered)',
+      },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate)':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-pressed)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-pressed)',
+        },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):is(:checked,:indeterminate)':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-pressed)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed)',
+        },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled)+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-pressed)' },
       '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled)': {
         borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-default)',
         backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-default)',
@@ -3642,7 +3719,6 @@ module.exports = function ComponentsPlugin() {
         {
           borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-disabled)',
           backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-disabled)',
-          color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-disabled)',
         },
       '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon':
         { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-default)' },
@@ -3652,6 +3728,8 @@ module.exports = function ComponentsPlugin() {
         { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-pressed)' },
       '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-checkbox__icon':
         { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-focused)' },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-disabled)' },
       '.ids-checkbox.ids-checkbox-surface .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label': {
         color: 'var(--ids-comp-checkbox-label-color-fg-surface-default)',
       },
@@ -8828,8 +8906,10 @@ module.exports = function ComponentsPlugin() {
       '.ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-surface.ids-overlay-panel-outlined': {
         borderColor: 'var(--ids-comp-overlay-panel-elevated-color-border-surface-default)',
       },
-      '.ids-overlay-panel button:hover': { borderColor: 'rgba(0,0,0,0)' },
-      '.ids-overlay-panel button:focus,.ids-overlay-panel button:focus-visible': { outlineStyle: 'none !important' },
+      '.ids-overlay-panel.ids-overlay-panel-has-menu button:hover': { borderColor: 'rgba(0,0,0,0)' },
+      '.ids-overlay-panel.ids-overlay-panel-has-menu button:focus,.ids-overlay-panel.ids-overlay-panel-has-menu button:focus-visible': {
+        outlineStyle: 'none !important',
+      },
       '.ids-paginator': {
         boxSizing: 'border-box',
         borderWidth: '0',
@@ -10897,6 +10977,16 @@ module.exports = function ComponentsPlugin() {
         { color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-focused)' },
       '.ids-form-field>.ids-form-field__field-wrapper:active .ids-select.ids-select-light>.ids-select__trigger>.ids-select__value>.ids-select__placeholder':
         { color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-pressed)' },
+      '@keyframes expand-submenu': {
+        '0%': { overflow: 'hidden', visibility: 'hidden' },
+        '99%': { overflow: 'hidden', visibility: 'visible' },
+        '100%': { overflow: 'visible', visibility: 'visible' },
+      },
+      '@keyframes collapse-submenu': {
+        '0%': { overflow: 'visible', visibility: 'visible' },
+        '99%': { overflow: 'hidden', visibility: 'visible' },
+        '100%': { overflow: 'hidden', visibility: 'hidden' },
+      },
       '.ids-side-nav': {
         boxSizing: 'border-box',
         borderWidth: '0',
@@ -10928,11 +11018,12 @@ module.exports = function ComponentsPlugin() {
         maxHeight: '0',
         opacity: 0,
         transition: 'all 300ms ease-out',
+        animation: 'collapse-submenu .3s forwards',
       },
       '.ids-side-nav .ids-side-nav-item.ids-side-nav-item-expandable .ids-side-nav-item-expandable-submenu.expanded': {
-        maxHeight: '10000px',
         opacity: 1,
         transition: 'all 300ms ease-in',
+        animation: 'expand-submenu .3s forwards',
       },
       '.ids-side-nav .ids-side-nav-item.ids-side-nav-item-expandable .ids-side-nav-item-expandable-summary>button[idsIconButton]': {
         marginLeft: 'auto',
@@ -10982,10 +11073,6 @@ module.exports = function ComponentsPlugin() {
         letterSpacing: 'var(--ids-comp-sidenav-section-title-typography-letter-spacing-compact)',
         lineHeight: 'var(--ids-comp-sidenav-section-title-typography-line-height-compact)',
       },
-      '.ids-side-nav.ids-side-nav-compact .ids-side-nav-item': {
-        '--submenu-outline-compensation':
-          'calc( var(--ids-comp-sidenav-navitem-expandable-summary-focused-outline-size-outline-compact) + 2px )',
-      },
       '.ids-side-nav.ids-side-nav-compact .ids-side-nav-item .ids-side-nav-item-single': {
         borderRadius: 'var(--ids-comp-sidenav-navitem-single-size-border-radius-compact)',
         borderWidth: 'var(--ids-comp-sidenav-navitem-single-size-border-width-compact)',
@@ -11048,21 +11135,24 @@ module.exports = function ComponentsPlugin() {
         left: 'calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-padding-x-compact)*-1)',
         marginRight: 'calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-gap-compact)*-1)',
       },
-      '.ids-side-nav.ids-side-nav-compact .ids-side-nav-item .ids-side-nav-item-expandable-submenu': {
-        margin: 'calc(var(--submenu-outline-compensation)*-1)',
+      '.ids-side-nav.ids-side-nav-compact .ids-side-nav-item .ids-side-nav-item-expandable-submenu.expanded': {
+        '--submenu-item-height':
+          'calc( max( var(--ids-comp-sidenav-navitem-single-size-height-compact), var(--ids-comp-sidenav-navitem-expandable-summary-size-height-compact) ) + var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-compact) + var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-compact) + calc(var(--ids-comp-sidenav-navitem-expandable-submenu-gap-compact) * var(--submenu-items-count)) )',
+        maxHeight: 'calc(var(--submenu-items-count)*var(--submenu-item-height))',
         gap: 'var(--ids-comp-sidenav-navitem-expandable-submenu-gap-compact)',
         padding:
-          'calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-compact) + var(--submenu-outline-compensation)) calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-right-compact) + var(--submenu-outline-compensation)) calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-compact) + var(--submenu-outline-compensation)) calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-compact) + var(--submenu-outline-compensation))',
+          'var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-compact) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-right-compact) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-compact) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-compact)',
       },
       '.ids-side-nav.ids-side-nav-compact .ids-side-nav-item.ids-side-nav-item-expandable': {
-        gap: 'var(--ids-comp-sidenav-navitem-expandable-size-gap-compact)',
         padding:
           'var(--ids-comp-sidenav-navitem-expandable-size-padding-y-compact) var(--ids-comp-sidenav-navitem-expandable-size-padding-x-compact)',
       },
+      '.ids-side-nav.ids-side-nav-compact .ids-side-nav-item.ids-side-nav-item-expandable:has(.ids-side-nav-item-expandable-submenu.expanded)':
+        { gap: 'var(--ids-comp-sidenav-navitem-expandable-size-gap-compact)' },
       '.ids-side-nav.ids-side-nav-compact .ids-side-nav-item.ids-side-nav-item-expandable:has(.ids-side-nav-item-expandable-summary>.ids-icon[icon-leading]) .ids-side-nav-item-expandable-submenu':
         {
           paddingLeft:
-            'calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-compact) + var(--ids-comp-sidenav-navitem-expandable-submenu-indent-width-compact) + var(--submenu-outline-compensation))',
+            'calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-compact) + var(--ids-comp-sidenav-navitem-expandable-submenu-indent-width-compact))',
         },
       '.ids-side-nav.ids-side-nav-compact .ids-side-nav-title+.ids-side-nav-item': {
         marginTop: 'var(--ids-comp-sidenav-section-size-gap-compact)',
@@ -11095,10 +11185,6 @@ module.exports = function ComponentsPlugin() {
         letterSpacing: 'var(--ids-comp-sidenav-section-title-typography-letter-spacing-comfortable)',
         lineHeight: 'var(--ids-comp-sidenav-section-title-typography-line-height-comfortable)',
       },
-      '.ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item': {
-        '--submenu-outline-compensation':
-          'calc( var(--ids-comp-sidenav-navitem-expandable-summary-focused-outline-size-outline-comfortable) + 2px )',
-      },
       '.ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item .ids-side-nav-item-single': {
         borderRadius: 'var(--ids-comp-sidenav-navitem-single-size-border-radius-comfortable)',
         borderWidth: 'var(--ids-comp-sidenav-navitem-single-size-border-width-comfortable)',
@@ -11161,21 +11247,24 @@ module.exports = function ComponentsPlugin() {
         left: 'calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-padding-x-comfortable)*-1)',
         marginRight: 'calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-gap-comfortable)*-1)',
       },
-      '.ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item .ids-side-nav-item-expandable-submenu': {
-        margin: 'calc(var(--submenu-outline-compensation)*-1)',
+      '.ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item .ids-side-nav-item-expandable-submenu.expanded': {
+        '--submenu-item-height':
+          'calc( max( var(--ids-comp-sidenav-navitem-single-size-height-comfortable), var(--ids-comp-sidenav-navitem-expandable-summary-size-height-comfortable) ) + var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-comfortable) + var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-comfortable) + calc(var(--ids-comp-sidenav-navitem-expandable-submenu-gap-comfortable) * var(--submenu-items-count)) )',
+        maxHeight: 'calc(var(--submenu-items-count)*var(--submenu-item-height))',
         gap: 'var(--ids-comp-sidenav-navitem-expandable-submenu-gap-comfortable)',
         padding:
-          'calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-comfortable) + var(--submenu-outline-compensation)) calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-right-comfortable) + var(--submenu-outline-compensation)) calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-comfortable) + var(--submenu-outline-compensation)) calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-comfortable) + var(--submenu-outline-compensation))',
+          'var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-comfortable) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-right-comfortable) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-comfortable) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-comfortable)',
       },
       '.ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item.ids-side-nav-item-expandable': {
-        gap: 'var(--ids-comp-sidenav-navitem-expandable-size-gap-comfortable)',
         padding:
           'var(--ids-comp-sidenav-navitem-expandable-size-padding-y-comfortable) var(--ids-comp-sidenav-navitem-expandable-size-padding-x-comfortable)',
       },
+      '.ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item.ids-side-nav-item-expandable:has(.ids-side-nav-item-expandable-submenu.expanded)':
+        { gap: 'var(--ids-comp-sidenav-navitem-expandable-size-gap-comfortable)' },
       '.ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item.ids-side-nav-item-expandable:has(.ids-side-nav-item-expandable-summary>.ids-icon[icon-leading]) .ids-side-nav-item-expandable-submenu':
         {
           paddingLeft:
-            'calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-comfortable) + var(--ids-comp-sidenav-navitem-expandable-submenu-indent-width-comfortable) + var(--submenu-outline-compensation))',
+            'calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-comfortable) + var(--ids-comp-sidenav-navitem-expandable-submenu-indent-width-comfortable))',
         },
       '.ids-side-nav.ids-side-nav-comfortable .ids-side-nav-title+.ids-side-nav-item': {
         marginTop: 'var(--ids-comp-sidenav-section-size-gap-comfortable)',
@@ -11208,10 +11297,6 @@ module.exports = function ComponentsPlugin() {
         letterSpacing: 'var(--ids-comp-sidenav-section-title-typography-letter-spacing-spacious)',
         lineHeight: 'var(--ids-comp-sidenav-section-title-typography-line-height-spacious)',
       },
-      '.ids-side-nav.ids-side-nav-spacious .ids-side-nav-item': {
-        '--submenu-outline-compensation':
-          'calc( var(--ids-comp-sidenav-navitem-expandable-summary-focused-outline-size-outline-spacious) + 2px )',
-      },
       '.ids-side-nav.ids-side-nav-spacious .ids-side-nav-item .ids-side-nav-item-single': {
         borderRadius: 'var(--ids-comp-sidenav-navitem-single-size-border-radius-spacious)',
         borderWidth: 'var(--ids-comp-sidenav-navitem-single-size-border-width-spacious)',
@@ -11274,21 +11359,24 @@ module.exports = function ComponentsPlugin() {
         left: 'calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-padding-x-spacious)*-1)',
         marginRight: 'calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-gap-spacious)*-1)',
       },
-      '.ids-side-nav.ids-side-nav-spacious .ids-side-nav-item .ids-side-nav-item-expandable-submenu': {
-        margin: 'calc(var(--submenu-outline-compensation)*-1)',
+      '.ids-side-nav.ids-side-nav-spacious .ids-side-nav-item .ids-side-nav-item-expandable-submenu.expanded': {
+        '--submenu-item-height':
+          'calc( max( var(--ids-comp-sidenav-navitem-single-size-height-spacious), var(--ids-comp-sidenav-navitem-expandable-summary-size-height-spacious) ) + var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-spacious) + var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-spacious) + calc(var(--ids-comp-sidenav-navitem-expandable-submenu-gap-spacious) * var(--submenu-items-count)) )',
+        maxHeight: 'calc(var(--submenu-items-count)*var(--submenu-item-height))',
         gap: 'var(--ids-comp-sidenav-navitem-expandable-submenu-gap-spacious)',
         padding:
-          'calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-spacious) + var(--submenu-outline-compensation)) calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-right-spacious) + var(--submenu-outline-compensation)) calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-spacious) + var(--submenu-outline-compensation)) calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-spacious) + var(--submenu-outline-compensation))',
+          'var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-spacious) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-right-spacious) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-spacious) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-spacious)',
       },
       '.ids-side-nav.ids-side-nav-spacious .ids-side-nav-item.ids-side-nav-item-expandable': {
-        gap: 'var(--ids-comp-sidenav-navitem-expandable-size-gap-spacious)',
         padding:
           'var(--ids-comp-sidenav-navitem-expandable-size-padding-y-spacious) var(--ids-comp-sidenav-navitem-expandable-size-padding-x-spacious)',
       },
+      '.ids-side-nav.ids-side-nav-spacious .ids-side-nav-item.ids-side-nav-item-expandable:has(.ids-side-nav-item-expandable-submenu.expanded)':
+        { gap: 'var(--ids-comp-sidenav-navitem-expandable-size-gap-spacious)' },
       '.ids-side-nav.ids-side-nav-spacious .ids-side-nav-item.ids-side-nav-item-expandable:has(.ids-side-nav-item-expandable-summary>.ids-icon[icon-leading]) .ids-side-nav-item-expandable-submenu':
         {
           paddingLeft:
-            'calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-spacious) + var(--ids-comp-sidenav-navitem-expandable-submenu-indent-width-spacious) + var(--submenu-outline-compensation))',
+            'calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-spacious) + var(--ids-comp-sidenav-navitem-expandable-submenu-indent-width-spacious))',
         },
       '.ids-side-nav.ids-side-nav-spacious .ids-side-nav-title+.ids-side-nav-item': {
         marginTop: 'var(--ids-comp-sidenav-section-size-gap-spacious)',
@@ -11320,10 +11408,6 @@ module.exports = function ComponentsPlugin() {
         letterSpacing: 'var(--ids-comp-sidenav-section-title-typography-letter-spacing-dense)',
         lineHeight: 'var(--ids-comp-sidenav-section-title-typography-line-height-dense)',
       },
-      '.ids-side-nav.ids-side-nav-dense .ids-side-nav-item': {
-        '--submenu-outline-compensation':
-          'calc( var(--ids-comp-sidenav-navitem-expandable-summary-focused-outline-size-outline-dense) + 2px )',
-      },
       '.ids-side-nav.ids-side-nav-dense .ids-side-nav-item .ids-side-nav-item-single': {
         borderRadius: 'var(--ids-comp-sidenav-navitem-single-size-border-radius-dense)',
         borderWidth: 'var(--ids-comp-sidenav-navitem-single-size-border-width-dense)',
@@ -11385,21 +11469,24 @@ module.exports = function ComponentsPlugin() {
         left: 'calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-padding-x-dense)*-1)',
         marginRight: 'calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-gap-dense)*-1)',
       },
-      '.ids-side-nav.ids-side-nav-dense .ids-side-nav-item .ids-side-nav-item-expandable-submenu': {
-        margin: 'calc(var(--submenu-outline-compensation)*-1)',
+      '.ids-side-nav.ids-side-nav-dense .ids-side-nav-item .ids-side-nav-item-expandable-submenu.expanded': {
+        '--submenu-item-height':
+          'calc( max( var(--ids-comp-sidenav-navitem-single-size-height-dense), var(--ids-comp-sidenav-navitem-expandable-summary-size-height-dense) ) + var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-dense) + var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-dense) + calc(var(--ids-comp-sidenav-navitem-expandable-submenu-gap-dense) * var(--submenu-items-count)) )',
+        maxHeight: 'calc(var(--submenu-items-count)*var(--submenu-item-height))',
         gap: 'var(--ids-comp-sidenav-navitem-expandable-submenu-gap-dense)',
         padding:
-          'calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-dense) + var(--submenu-outline-compensation)) calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-right-dense) + var(--submenu-outline-compensation)) calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-dense) + var(--submenu-outline-compensation)) calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-dense) + var(--submenu-outline-compensation))',
+          'var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-dense) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-right-dense) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-dense) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-dense)',
       },
       '.ids-side-nav.ids-side-nav-dense .ids-side-nav-item.ids-side-nav-item-expandable': {
-        gap: 'var(--ids-comp-sidenav-navitem-expandable-size-gap-dense)',
         padding:
           'var(--ids-comp-sidenav-navitem-expandable-size-padding-y-dense) var(--ids-comp-sidenav-navitem-expandable-size-padding-x-dense)',
       },
+      '.ids-side-nav.ids-side-nav-dense .ids-side-nav-item.ids-side-nav-item-expandable:has(.ids-side-nav-item-expandable-submenu.expanded)':
+        { gap: 'var(--ids-comp-sidenav-navitem-expandable-size-gap-dense)' },
       '.ids-side-nav.ids-side-nav-dense .ids-side-nav-item.ids-side-nav-item-expandable:has(.ids-side-nav-item-expandable-summary>.ids-icon[icon-leading]) .ids-side-nav-item-expandable-submenu':
         {
           paddingLeft:
-            'calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-dense) + var(--ids-comp-sidenav-navitem-expandable-submenu-indent-width-dense) + var(--submenu-outline-compensation))',
+            'calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-dense) + var(--ids-comp-sidenav-navitem-expandable-submenu-indent-width-dense))',
         },
       '.ids-side-nav.ids-side-nav-dense .ids-side-nav-title+.ids-side-nav-item': {
         marginTop: 'var(--ids-comp-sidenav-section-size-gap-dense)',

package/dist/overlay-panel/overlay-panel.css

@@ -128,9 +128,9 @@
 .ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-surface.ids-overlay-panel-outlined {
   border-color: var(--ids-comp-overlay-panel-elevated-color-border-surface-default);
 }
-.ids-overlay-panel button:hover {
+.ids-overlay-panel.ids-overlay-panel-has-menu button:hover {
   border-color: transparent;
 }
-.ids-overlay-panel button:focus, .ids-overlay-panel button:focus-visible {
+.ids-overlay-panel.ids-overlay-panel-has-menu button:focus, .ids-overlay-panel.ids-overlay-panel-has-menu button:focus-visible {
   outline-style: none !important;
 }

package/dist/overlay-panel/overlay-panel.min.css

@@ -1 +1 @@
-.ids-overlay-panel{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0);line-height:1.5;display:flex;flex-direction:column;align-items:flex-start;box-sizing:border-box}.ids-overlay-panel::before,.ids-overlay-panel::after,.ids-overlay-panel *,.ids-overlay-panel ::before,.ids-overlay-panel ::after{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0)}.ids-overlay-panel.ids-overlay-panel-compact{gap:var(--ids-comp-overlay-panel-size-gap-compact);padding:var(--ids-comp-overlay-panel-size-padding-y-compact) var(--ids-comp-overlay-panel-size-padding-x-compact);border-radius:var(--ids-comp-overlay-panel-size-border-radius-compact)}.ids-overlay-panel.ids-overlay-panel-compact.ids-overlay-panel-filled.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-compact);border-style:solid}.ids-overlay-panel.ids-overlay-panel-compact.ids-overlay-panel-outlined.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-compact);border-style:solid}.ids-overlay-panel.ids-overlay-panel-compact.ids-overlay-panel-elevated.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-compact);border-style:solid}.ids-overlay-panel.ids-overlay-panel-comfortable{gap:var(--ids-comp-overlay-panel-size-gap-comfortable);padding:var(--ids-comp-overlay-panel-size-padding-y-comfortable) var(--ids-comp-overlay-panel-size-padding-x-comfortable);border-radius:var(--ids-comp-overlay-panel-size-border-radius-comfortable)}.ids-overlay-panel.ids-overlay-panel-comfortable.ids-overlay-panel-filled.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-comfortable);border-style:solid}.ids-overlay-panel.ids-overlay-panel-comfortable.ids-overlay-panel-outlined.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-comfortable);border-style:solid}.ids-overlay-panel.ids-overlay-panel-comfortable.ids-overlay-panel-elevated.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-comfortable);border-style:solid}.ids-overlay-panel.ids-overlay-panel-spacious{gap:var(--ids-comp-overlay-panel-size-gap-spacious);padding:var(--ids-comp-overlay-panel-size-padding-y-spacious) var(--ids-comp-overlay-panel-size-padding-x-spacious);border-radius:var(--ids-comp-overlay-panel-size-border-radius-spacious)}.ids-overlay-panel.ids-overlay-panel-spacious.ids-overlay-panel-filled.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-spacious);border-style:solid}.ids-overlay-panel.ids-overlay-panel-spacious.ids-overlay-panel-outlined.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-spacious);border-style:solid}.ids-overlay-panel.ids-overlay-panel-spacious.ids-overlay-panel-elevated.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-spacious);border-style:solid}.ids-overlay-panel.ids-overlay-panel-dense{gap:var(--ids-comp-overlay-panel-size-gap-dense);padding:var(--ids-comp-overlay-panel-size-padding-y-dense) var(--ids-comp-overlay-panel-size-padding-x-dense);border-radius:var(--ids-comp-overlay-panel-size-border-radius-dense)}.ids-overlay-panel.ids-overlay-panel-dense.ids-overlay-panel-filled.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-dense);border-style:solid}.ids-overlay-panel.ids-overlay-panel-dense.ids-overlay-panel-outlined.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-dense);border-style:solid}.ids-overlay-panel.ids-overlay-panel-dense.ids-overlay-panel-elevated.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-dense);border-style:solid}.ids-overlay-panel.ids-overlay-panel-filled{box-shadow:none}.ids-overlay-panel.ids-overlay-panel-outlined{box-shadow:var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxs) var(--ids-smc-reference-container-effects-shadow-blur-xxs) var(--ids-smc-reference-container-effects-shadow-spread-none) var(--ids-smc-reference-container-effects-shadow-color-dark-lighter)}.ids-overlay-panel.ids-overlay-panel-elevated{box-shadow:var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxl) var(--ids-smc-reference-container-effects-shadow-blur-xxxl) var(--ids-smc-reference-container-effects-shadow-spread-xxs) var(--ids-smc-reference-container-effects-shadow-color-dark-default)}.ids-overlay-panel.ids-overlay-panel-filled.ids-overlay-panel-light{background:var(--ids-comp-overlay-panel-filled-color-bg-light-default)}.ids-overlay-panel.ids-overlay-panel-filled.ids-overlay-panel-light.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-filled-color-border-light-default)}.ids-overlay-panel.ids-overlay-panel-filled.ids-overlay-panel-surface{background:var(--ids-comp-overlay-panel-filled-color-bg-surface-default)}.ids-overlay-panel.ids-overlay-panel-filled.ids-overlay-panel-surface.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-filled-color-border-surface-default)}.ids-overlay-panel.ids-overlay-panel-outlined.ids-overlay-panel-light{background:var(--ids-comp-overlay-panel-outlined-color-bg-light-default)}.ids-overlay-panel.ids-overlay-panel-outlined.ids-overlay-panel-light.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-outlined-color-border-light-default)}.ids-overlay-panel.ids-overlay-panel-outlined.ids-overlay-panel-surface{background:var(--ids-comp-overlay-panel-outlined-color-bg-surface-default)}.ids-overlay-panel.ids-overlay-panel-outlined.ids-overlay-panel-surface.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-outlined-color-border-surface-default)}.ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-light{background:var(--ids-comp-overlay-panel-elevated-color-bg-light-default)}.ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-light.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-elevated-color-border-light-default)}.ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-surface{background:var(--ids-comp-overlay-panel-elevated-color-bg-surface-default)}.ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-surface.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-elevated-color-border-surface-default)}.ids-overlay-panel button:hover{border-color:rgba(0,0,0,0)}.ids-overlay-panel button:focus,.ids-overlay-panel button:focus-visible{outline-style:none !important}
+.ids-overlay-panel{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0);line-height:1.5;display:flex;flex-direction:column;align-items:flex-start;box-sizing:border-box}.ids-overlay-panel::before,.ids-overlay-panel::after,.ids-overlay-panel *,.ids-overlay-panel ::before,.ids-overlay-panel ::after{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0)}.ids-overlay-panel.ids-overlay-panel-compact{gap:var(--ids-comp-overlay-panel-size-gap-compact);padding:var(--ids-comp-overlay-panel-size-padding-y-compact) var(--ids-comp-overlay-panel-size-padding-x-compact);border-radius:var(--ids-comp-overlay-panel-size-border-radius-compact)}.ids-overlay-panel.ids-overlay-panel-compact.ids-overlay-panel-filled.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-compact);border-style:solid}.ids-overlay-panel.ids-overlay-panel-compact.ids-overlay-panel-outlined.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-compact);border-style:solid}.ids-overlay-panel.ids-overlay-panel-compact.ids-overlay-panel-elevated.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-compact);border-style:solid}.ids-overlay-panel.ids-overlay-panel-comfortable{gap:var(--ids-comp-overlay-panel-size-gap-comfortable);padding:var(--ids-comp-overlay-panel-size-padding-y-comfortable) var(--ids-comp-overlay-panel-size-padding-x-comfortable);border-radius:var(--ids-comp-overlay-panel-size-border-radius-comfortable)}.ids-overlay-panel.ids-overlay-panel-comfortable.ids-overlay-panel-filled.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-comfortable);border-style:solid}.ids-overlay-panel.ids-overlay-panel-comfortable.ids-overlay-panel-outlined.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-comfortable);border-style:solid}.ids-overlay-panel.ids-overlay-panel-comfortable.ids-overlay-panel-elevated.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-comfortable);border-style:solid}.ids-overlay-panel.ids-overlay-panel-spacious{gap:var(--ids-comp-overlay-panel-size-gap-spacious);padding:var(--ids-comp-overlay-panel-size-padding-y-spacious) var(--ids-comp-overlay-panel-size-padding-x-spacious);border-radius:var(--ids-comp-overlay-panel-size-border-radius-spacious)}.ids-overlay-panel.ids-overlay-panel-spacious.ids-overlay-panel-filled.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-spacious);border-style:solid}.ids-overlay-panel.ids-overlay-panel-spacious.ids-overlay-panel-outlined.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-spacious);border-style:solid}.ids-overlay-panel.ids-overlay-panel-spacious.ids-overlay-panel-elevated.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-spacious);border-style:solid}.ids-overlay-panel.ids-overlay-panel-dense{gap:var(--ids-comp-overlay-panel-size-gap-dense);padding:var(--ids-comp-overlay-panel-size-padding-y-dense) var(--ids-comp-overlay-panel-size-padding-x-dense);border-radius:var(--ids-comp-overlay-panel-size-border-radius-dense)}.ids-overlay-panel.ids-overlay-panel-dense.ids-overlay-panel-filled.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-dense);border-style:solid}.ids-overlay-panel.ids-overlay-panel-dense.ids-overlay-panel-outlined.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-dense);border-style:solid}.ids-overlay-panel.ids-overlay-panel-dense.ids-overlay-panel-elevated.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-dense);border-style:solid}.ids-overlay-panel.ids-overlay-panel-filled{box-shadow:none}.ids-overlay-panel.ids-overlay-panel-outlined{box-shadow:var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxs) var(--ids-smc-reference-container-effects-shadow-blur-xxs) var(--ids-smc-reference-container-effects-shadow-spread-none) var(--ids-smc-reference-container-effects-shadow-color-dark-lighter)}.ids-overlay-panel.ids-overlay-panel-elevated{box-shadow:var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxl) var(--ids-smc-reference-container-effects-shadow-blur-xxxl) var(--ids-smc-reference-container-effects-shadow-spread-xxs) var(--ids-smc-reference-container-effects-shadow-color-dark-default)}.ids-overlay-panel.ids-overlay-panel-filled.ids-overlay-panel-light{background:var(--ids-comp-overlay-panel-filled-color-bg-light-default)}.ids-overlay-panel.ids-overlay-panel-filled.ids-overlay-panel-light.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-filled-color-border-light-default)}.ids-overlay-panel.ids-overlay-panel-filled.ids-overlay-panel-surface{background:var(--ids-comp-overlay-panel-filled-color-bg-surface-default)}.ids-overlay-panel.ids-overlay-panel-filled.ids-overlay-panel-surface.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-filled-color-border-surface-default)}.ids-overlay-panel.ids-overlay-panel-outlined.ids-overlay-panel-light{background:var(--ids-comp-overlay-panel-outlined-color-bg-light-default)}.ids-overlay-panel.ids-overlay-panel-outlined.ids-overlay-panel-light.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-outlined-color-border-light-default)}.ids-overlay-panel.ids-overlay-panel-outlined.ids-overlay-panel-surface{background:var(--ids-comp-overlay-panel-outlined-color-bg-surface-default)}.ids-overlay-panel.ids-overlay-panel-outlined.ids-overlay-panel-surface.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-outlined-color-border-surface-default)}.ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-light{background:var(--ids-comp-overlay-panel-elevated-color-bg-light-default)}.ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-light.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-elevated-color-border-light-default)}.ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-surface{background:var(--ids-comp-overlay-panel-elevated-color-bg-surface-default)}.ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-surface.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-elevated-color-border-surface-default)}.ids-overlay-panel.ids-overlay-panel-has-menu button:hover{border-color:rgba(0,0,0,0)}.ids-overlay-panel.ids-overlay-panel-has-menu button:focus,.ids-overlay-panel.ids-overlay-panel-has-menu button:focus-visible{outline-style:none !important}

package/dist/overlay-panel/overlay-panel.plugin.js

@@ -131,8 +131,10 @@ module.exports = function OverlayPanelPlugin() {
       '.ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-surface.ids-overlay-panel-outlined': {
         borderColor: 'var(--ids-comp-overlay-panel-elevated-color-border-surface-default)',
       },
-      '.ids-overlay-panel button:hover': { borderColor: 'rgba(0,0,0,0)' },
-      '.ids-overlay-panel button:focus,.ids-overlay-panel button:focus-visible': { outlineStyle: 'none !important' },
+      '.ids-overlay-panel.ids-overlay-panel-has-menu button:hover': { borderColor: 'rgba(0,0,0,0)' },
+      '.ids-overlay-panel.ids-overlay-panel-has-menu button:focus,.ids-overlay-panel.ids-overlay-panel-has-menu button:focus-visible': {
+        outlineStyle: 'none !important',
+      },
     };
 
     addComponents(cssObj);