npm - @i-cell/ids-styles - Versions diffs - 0.0.64 → 0.0.67 - Mend

@i-cell/ids-styles 0.0.64 → 0.0.67

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/dist/accordion/accordion.css +44 -43
package/dist/accordion/accordion.min.css +1 -1
package/dist/accordion/accordion.plugin.js +84 -79
package/dist/autocomplete/autocomplete.css +158 -26
package/dist/autocomplete/autocomplete.min.css +1 -1
package/dist/autocomplete/autocomplete.plugin.js +138 -16
package/dist/components.css +210 -69
package/dist/components.min.css +1 -1
package/dist/components.plugin.js +251 -102
package/dist/notification/notification.css +8 -0
package/dist/notification/notification.min.css +1 -1
package/dist/notification/notification.plugin.js +29 -7
package/package.json +2 -2

package/dist/accordion/accordion.plugin.js CHANGED Viewed

@@ -20,30 +20,31 @@ module.exports = function AccordionPlugin() {
         borderColor: 'rgba(0,0,0,0)',
       },
       '.ids-accordion>.ids-accordion-controls': { display: 'flex', alignItems: 'flex-start', alignSelf: 'stretch' },
-      '.ids-accordion>.ids-accordion-item': {
-        display: 'flex',
+      '.ids-accordion>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)': {
         width: '100%',
+        display: 'flex',
         flexDirection: 'column',
         alignItems: 'flex-start',
-        flexShrink: 0,
+        alignSelf: 'stretch',
       },
-      '.ids-accordion>.ids-accordion-item>.ids-accordion-item-summary': {
+      '.ids-accordion>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary': {
         display: 'flex',
         alignItems: 'center',
         width: '100%',
         flex: '1 0 0',
         borderStyle: 'solid',
         cursor: 'pointer',
+        textAlign: 'left',
       },
-      '.ids-accordion>.ids-accordion-item>.ids-accordion-item-summary:focus,.ids-accordion>.ids-accordion-item>.ids-accordion-item-summary:focus-visible':
+      '.ids-accordion>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus,.ids-accordion>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus-visible':
         { outlineOffset: '2px', outlineStyle: 'solid', zIndex: 1 },
-      '.ids-accordion>.ids-accordion-item>.ids-accordion-item-summary>.ids-accordion-item-title': {
+      '.ids-accordion>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-accordion-item-title': {
         flex: '1 0 0',
         whiteSpace: 'nowrap',
         overflow: 'hidden',
         textOverflow: 'ellipsis',
       },
-      '.ids-accordion>.ids-accordion-item.ids-accordion-item-disabled>.ids-accordion-item-summary': {
+      '.ids-accordion>.ids-accordion-item.ids-accordion-item-disabled>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary': {
         pointerEvents: 'none',
         userSelect: 'none',
       },
@@ -67,26 +68,27 @@ module.exports = function AccordionPlugin() {
         padding: 'var(--ids-comp-accordion-item-size-padding-y-compact) var(--ids-comp-accordion-item-size-padding-x-compact)',
         gap: 'var(--ids-comp-accordion-item-size-gap-compact)',
       },
-      '.ids-accordion.ids-accordion-compact>.ids-accordion-item>.ids-accordion-item-summary': {
+      '.ids-accordion.ids-accordion-compact>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary': {
         height: 'var(--ids-comp-accordion-summary-size-height-compact)',
         padding: 'var(--ids-comp-accordion-summary-size-padding-y-compact) var(--ids-comp-accordion-summary-size-padding-x-compact)',
         gap: 'var(--ids-comp-accordion-summary-size-gap-compact)',
         borderRadius: 'var(--ids-comp-accordion-summary-size-border-radius-compact)',
         borderWidth: 'var(--ids-comp-accordion-summary-size-border-width-compact)',
       },
-      '.ids-accordion.ids-accordion-compact>.ids-accordion-item>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-compact>.ids-accordion-item>.ids-accordion-item-summary:focus-visible':
+      '.ids-accordion.ids-accordion-compact>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-compact>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus-visible':
         {
           outlineWidth: 'var(--ids-comp-accordion-summary-focused-outline-size-outline-compact)',
           outlineColor: 'var(--ids-comp-accordion-summary-focused-outline-color-dark-focused)',
         },
-      '.ids-accordion.ids-accordion-compact>.ids-accordion-item>.ids-accordion-item-summary>.ids-accordion-item-title': {
-        fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-compact)',
-        fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-compact)',
-        fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-compact)',
-        letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-compact)',
-        lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-compact)',
-      },
-      '.ids-accordion.ids-accordion-compact>.ids-accordion-item>.ids-accordion-item-summary>.ids-icon': {
+      '.ids-accordion.ids-accordion-compact>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-accordion-item-title':
+        {
+          fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-compact)',
+          fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-compact)',
+          fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-compact)',
+          letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-compact)',
+          lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-compact)',
+        },
+      '.ids-accordion.ids-accordion-compact>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-icon': {
         fontSize: 'var(--ids-comp-accordion-summary-icon-typography-font-size-compact)',
         fontWeight: 'var(--ids-comp-accordion-summary-icon-typography-font-weight-compact)',
         lineHeight: 'var(--ids-comp-accordion-summary-icon-typography-line-height-compact)',
@@ -113,7 +115,7 @@ module.exports = function AccordionPlugin() {
         padding: 'var(--ids-comp-accordion-item-size-padding-y-comfortable) var(--ids-comp-accordion-item-size-padding-x-comfortable)',
         gap: 'var(--ids-comp-accordion-item-size-gap-comfortable)',
       },
-      '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>.ids-accordion-item-summary': {
+      '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary': {
         height: 'var(--ids-comp-accordion-summary-size-height-comfortable)',
         padding:
           'var(--ids-comp-accordion-summary-size-padding-y-comfortable) var(--ids-comp-accordion-summary-size-padding-x-comfortable)',
@@ -121,19 +123,20 @@ module.exports = function AccordionPlugin() {
         borderRadius: 'var(--ids-comp-accordion-summary-size-border-radius-comfortable)',
         borderWidth: 'var(--ids-comp-accordion-summary-size-border-width-comfortable)',
       },
-      '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>.ids-accordion-item-summary:focus-visible':
+      '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus-visible':
         {
           outlineWidth: 'var(--ids-comp-accordion-summary-focused-outline-size-outline-comfortable)',
           outlineColor: 'var(--ids-comp-accordion-summary-focused-outline-color-dark-focused)',
         },
-      '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>.ids-accordion-item-summary>.ids-accordion-item-title': {
-        fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-comfortable)',
-        fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-comfortable)',
-        fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-comfortable)',
-        letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-comfortable)',
-        lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-comfortable)',
-      },
-      '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>.ids-accordion-item-summary>.ids-icon': {
+      '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-accordion-item-title':
+        {
+          fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-comfortable)',
+          fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-comfortable)',
+          fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-comfortable)',
+          letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-comfortable)',
+          lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-comfortable)',
+        },
+      '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-icon': {
         fontSize: 'var(--ids-comp-accordion-summary-icon-typography-font-size-comfortable)',
         fontWeight: 'var(--ids-comp-accordion-summary-icon-typography-font-weight-comfortable)',
         lineHeight: 'var(--ids-comp-accordion-summary-icon-typography-line-height-comfortable)',
@@ -159,26 +162,27 @@ module.exports = function AccordionPlugin() {
         padding: 'var(--ids-comp-accordion-item-size-padding-y-spacious) var(--ids-comp-accordion-item-size-padding-x-spacious)',
         gap: 'var(--ids-comp-accordion-item-size-gap-spacious)',
       },
-      '.ids-accordion.ids-accordion-spacious>.ids-accordion-item>.ids-accordion-item-summary': {
+      '.ids-accordion.ids-accordion-spacious>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary': {
         height: 'var(--ids-comp-accordion-summary-size-height-spacious)',
         padding: 'var(--ids-comp-accordion-summary-size-padding-y-spacious) var(--ids-comp-accordion-summary-size-padding-x-spacious)',
         gap: 'var(--ids-comp-accordion-summary-size-gap-spacious)',
         borderRadius: 'var(--ids-comp-accordion-summary-size-border-radius-spacious)',
         borderWidth: 'var(--ids-comp-accordion-summary-size-border-width-spacious)',
       },
-      '.ids-accordion.ids-accordion-spacious>.ids-accordion-item>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-spacious>.ids-accordion-item>.ids-accordion-item-summary:focus-visible':
+      '.ids-accordion.ids-accordion-spacious>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-spacious>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus-visible':
         {
           outlineWidth: 'var(--ids-comp-accordion-summary-focused-outline-size-outline-spacious)',
           outlineColor: 'var(--ids-comp-accordion-summary-focused-outline-color-dark-focused)',
         },
-      '.ids-accordion.ids-accordion-spacious>.ids-accordion-item>.ids-accordion-item-summary>.ids-accordion-item-title': {
-        fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-spacious)',
-        fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-spacious)',
-        fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-spacious)',
-        letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-spacious)',
-        lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-spacious)',
-      },
-      '.ids-accordion.ids-accordion-spacious>.ids-accordion-item>.ids-accordion-item-summary>.ids-icon': {
+      '.ids-accordion.ids-accordion-spacious>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-accordion-item-title':
+        {
+          fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-spacious)',
+          fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-spacious)',
+          fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-spacious)',
+          letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-spacious)',
+          lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-spacious)',
+        },
+      '.ids-accordion.ids-accordion-spacious>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-icon': {
         fontSize: 'var(--ids-comp-accordion-summary-icon-typography-font-size-spacious)',
         fontWeight: 'var(--ids-comp-accordion-summary-icon-typography-font-weight-spacious)',
         lineHeight: 'var(--ids-comp-accordion-summary-icon-typography-line-height-spacious)',
@@ -203,26 +207,27 @@ module.exports = function AccordionPlugin() {
         padding: 'var(--ids-comp-accordion-item-size-padding-y-dense) var(--ids-comp-accordion-item-size-padding-x-dense)',
         gap: 'var(--ids-comp-accordion-item-size-gap-dense)',
       },
-      '.ids-accordion.ids-accordion-dense>.ids-accordion-item>.ids-accordion-item-summary': {
+      '.ids-accordion.ids-accordion-dense>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary': {
         height: 'var(--ids-comp-accordion-summary-size-height-dense)',
         padding: 'var(--ids-comp-accordion-summary-size-padding-y-dense) var(--ids-comp-accordion-summary-size-padding-x-dense)',
         gap: 'var(--ids-comp-accordion-summary-size-gap-dense)',
         borderRadius: 'var(--ids-comp-accordion-summary-size-border-radius-dense)',
         borderWidth: 'var(--ids-comp-accordion-summary-size-border-width-dense)',
       },
-      '.ids-accordion.ids-accordion-dense>.ids-accordion-item>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-dense>.ids-accordion-item>.ids-accordion-item-summary:focus-visible':
+      '.ids-accordion.ids-accordion-dense>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-dense>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus-visible':
         {
           outlineWidth: 'var(--ids-comp-accordion-summary-focused-outline-size-outline-dense)',
           outlineColor: 'var(--ids-comp-accordion-summary-focused-outline-color-dark-focused)',
         },
-      '.ids-accordion.ids-accordion-dense>.ids-accordion-item>.ids-accordion-item-summary>.ids-accordion-item-title': {
-        fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-dense)',
-        fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-dense)',
-        fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-dense)',
-        letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-dense)',
-        lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-dense)',
-      },
-      '.ids-accordion.ids-accordion-dense>.ids-accordion-item>.ids-accordion-item-summary>.ids-icon': {
+      '.ids-accordion.ids-accordion-dense>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-accordion-item-title':
+        {
+          fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-dense)',
+          fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-dense)',
+          fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-dense)',
+          letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-dense)',
+          lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-dense)',
+        },
+      '.ids-accordion.ids-accordion-dense>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-icon': {
         fontSize: 'var(--ids-comp-accordion-summary-icon-typography-font-size-dense)',
         fontWeight: 'var(--ids-comp-accordion-summary-icon-typography-font-weight-dense)',
         lineHeight: 'var(--ids-comp-accordion-summary-icon-typography-line-height-dense)',
@@ -237,90 +242,90 @@ module.exports = function AccordionPlugin() {
         borderColor: 'var(--ids-comp-accordion-container-color-border-default)',
         backgroundColor: 'var(--ids-comp-accordion-container-color-bg-default)',
       },
-      '.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary': {
+      '.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary': {
         background: 'var(--ids-comp-accordion-summary-text-color-bg-default)',
         borderColor: 'var(--ids-comp-accordion-summary-text-color-border-default)',
         color: 'var(--ids-comp-accordion-summary-text-color-fg-label-default)',
       },
-      '.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary>.ids-icon': {
+      '.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-icon': {
         color: 'var(--ids-comp-accordion-summary-text-color-fg-icon-default)',
       },
-      '.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary:hover': {
+      '.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:hover': {
         background: 'var(--ids-comp-accordion-summary-text-color-bg-hovered)',
         borderColor: 'var(--ids-comp-accordion-summary-text-color-border-hovered)',
         color: 'var(--ids-comp-accordion-summary-text-color-fg-label-hovered)',
       },
-      '.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary:hover>.ids-icon': {
+      '.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:hover>.ids-icon': {
         color: 'var(--ids-comp-accordion-summary-text-color-fg-icon-hovered)',
       },
-      '.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary:focus-visible':
+      '.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus-visible':
         {
           background: 'var(--ids-comp-accordion-summary-text-color-bg-focused)',
           borderColor: 'var(--ids-comp-accordion-summary-text-color-border-focused)',
           color: 'var(--ids-comp-accordion-summary-text-color-fg-label-focused)',
         },
-      '.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary:focus>.ids-icon,.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary:focus-visible>.ids-icon':
+      '.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus>.ids-icon,.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus-visible>.ids-icon':
         { color: 'var(--ids-comp-accordion-summary-text-color-fg-icon-focused)' },
-      '.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary:active': {
+      '.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:active': {
         background: 'var(--ids-comp-accordion-summary-text-color-bg-pressed)',
         borderColor: 'var(--ids-comp-accordion-summary-text-color-border-pressed)',
         color: 'var(--ids-comp-accordion-summary-text-color-fg-label-pressed)',
       },
-      '.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary:active>.ids-icon': {
+      '.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:active>.ids-icon': {
         color: 'var(--ids-comp-accordion-summary-text-color-fg-icon-pressed)',
       },
-      '.ids-accordion.ids-accordion-text .ids-accordion-item.ids-accordion-item-disabled>.ids-accordion-item-summary': {
-        background: 'var(--ids-comp-accordion-summary-text-color-bg-disabled)',
-        borderColor: 'var(--ids-comp-accordion-summary-text-color-border-disabled)',
-        color: 'var(--ids-comp-accordion-summary-text-color-fg-label-disabled)',
-      },
-      '.ids-accordion.ids-accordion-text .ids-accordion-item.ids-accordion-item-disabled>.ids-accordion-item-summary>.ids-icon': {
-        color: 'var(--ids-comp-accordion-summary-text-color-fg-icon-disabled)',
-      },
+      '.ids-accordion.ids-accordion-text .ids-accordion-item.ids-accordion-item-disabled>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary':
+        {
+          background: 'var(--ids-comp-accordion-summary-text-color-bg-disabled)',
+          borderColor: 'var(--ids-comp-accordion-summary-text-color-border-disabled)',
+          color: 'var(--ids-comp-accordion-summary-text-color-fg-label-disabled)',
+        },
+      '.ids-accordion.ids-accordion-text .ids-accordion-item.ids-accordion-item-disabled>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-icon':
+        { color: 'var(--ids-comp-accordion-summary-text-color-fg-icon-disabled)' },
       '.ids-accordion.ids-accordion-filled': {
         borderColor: 'var(--ids-comp-accordion-container-color-border-default)',
         backgroundColor: 'var(--ids-comp-accordion-container-color-bg-default)',
       },
-      '.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary': {
+      '.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary': {
         background: 'var(--ids-comp-accordion-summary-filled-color-bg-default)',
         borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-default)',
         color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-default)',
       },
-      '.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary>.ids-icon': {
+      '.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-icon': {
         color: 'var(--ids-comp-accordion-summary-filled-color-fg-icon-default)',
       },
-      '.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary:hover': {
+      '.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:hover': {
         background: 'var(--ids-comp-accordion-summary-filled-color-bg-hovered)',
         borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-hovered)',
         color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-hovered)',
       },
-      '.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary:hover>.ids-icon': {
+      '.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:hover>.ids-icon': {
         color: 'var(--ids-comp-accordion-summary-filled-color-fg-icon-hovered)',
       },
-      '.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary:focus-visible':
+      '.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus-visible':
         {
           background: 'var(--ids-comp-accordion-summary-filled-color-bg-focused)',
           borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-focused)',
           color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-focused)',
         },
-      '.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary:focus>.ids-icon,.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary:focus-visible>.ids-icon':
+      '.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus>.ids-icon,.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus-visible>.ids-icon':
         { color: 'var(--ids-comp-accordion-summary-filled-color-fg-icon-focused)' },
-      '.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary:active': {
+      '.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:active': {
         background: 'var(--ids-comp-accordion-summary-filled-color-bg-pressed)',
         borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-pressed)',
         color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-pressed)',
       },
-      '.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary:active>.ids-icon': {
+      '.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:active>.ids-icon': {
         color: 'var(--ids-comp-accordion-summary-filled-color-fg-icon-pressed)',
       },
-      '.ids-accordion.ids-accordion-filled .ids-accordion-item.ids-accordion-item-disabled>.ids-accordion-item-summary': {
-        background: 'var(--ids-comp-accordion-summary-filled-color-bg-disabled)',
-        borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-disabled)',
-        color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-disabled)',
-      },
-      '.ids-accordion.ids-accordion-filled .ids-accordion-item.ids-accordion-item-disabled>.ids-accordion-item-summary>.ids-icon': {
-        color: 'var(--ids-comp-accordion-summary-filled-color-fg-icon-disabled)',
-      },
+      '.ids-accordion.ids-accordion-filled .ids-accordion-item.ids-accordion-item-disabled>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary':
+        {
+          background: 'var(--ids-comp-accordion-summary-filled-color-bg-disabled)',
+          borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-disabled)',
+          color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-disabled)',
+        },
+      '.ids-accordion.ids-accordion-filled .ids-accordion-item.ids-accordion-item-disabled>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-icon':
+        { color: 'var(--ids-comp-accordion-summary-filled-color-fg-icon-disabled)' },
     };
     addComponents(cssObj);

package/dist/autocomplete/autocomplete.css CHANGED Viewed

@@ -4,6 +4,8 @@
   border-style: none;
   border-color: transparent;
   line-height: 1.5;
+  position: absolute;
+  right: 0;
 }
 .ids-autocomplete::before, .ids-autocomplete::after, .ids-autocomplete *, .ids-autocomplete ::before, .ids-autocomplete ::after {
   box-sizing: border-box;
@@ -12,9 +14,9 @@
   border-color: transparent;
 }
 .ids-autocomplete-panel {
+  display: grid;
   overflow: auto;
   width: 100%;
-  padding: 8px;
   scrollbar-width: thin;
 }
 .ids-autocomplete-overlay-panel {
@@ -25,13 +27,7 @@
   align-items: center;
 }
 .ids-autocomplete-chip-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  margin-bottom: 4px;
-}
-.ids-autocomplete-chip-list:not(:has(button:first-child)) {
-  display: none;
+  display: contents;
 }
 .ids-autocomplete-chip-list button[idsChip].ids-chip {
   border-style: solid !important;
@@ -45,52 +41,188 @@
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
 }
-.ids-autocomplete-hint__wrapper {
-  padding: 8px 12px;
-}
 .ids-autocomplete.ids-autocomplete-compact > .ids-autocomplete-suffix {
   gap: var(--ids-comp-forms-input-size-icons-gap-compact);
 }
+.ids-autocomplete.ids-autocomplete-compact > .ids-autocomplete-suffix > .ids-icon-button {
+  height: var(--ids-comp-forms-input-icon-button-width-compact);
+  width: var(--ids-comp-forms-input-icon-button-width-compact);
+}
+.ids-autocomplete.ids-autocomplete-compact > .ids-autocomplete-suffix > .ids-icon-button .ids-icon {
+  font-family: var(--ids-comp-forms-input-icon-button-typography-font-family-compact);
+  font-size: var(--ids-comp-forms-input-icon-button-typography-font-size-compact);
+  font-weight: var(--ids-comp-forms-input-icon-button-typography-font-weight-compact);
+  line-height: var(--ids-comp-forms-input-icon-button-typography-line-height-compact);
+}
+.ids-autocomplete.ids-autocomplete-compact > .ids-autocomplete-suffix > .ids-icon {
+  font-family: var(--ids-comp-forms-input-icon-typography-font-family-compact);
+  height: var(--ids-comp-forms-input-icon-width-compact);
+  width: var(--ids-comp-forms-input-icon-width-compact);
+  font-size: var(--ids-comp-forms-input-icon-typography-font-size-compact);
+  font-weight: var(--ids-comp-forms-input-icon-typography-font-weight-compact);
+  line-height: var(--ids-comp-forms-input-icon-typography-line-height-compact);
+}
+.ids-autocomplete.ids-autocomplete-compact > .ids-autocomplete-suffix .ids-spinner {
+  width: var(--ids-comp-forms-input-size-spinner-compact);
+  height: var(--ids-comp-forms-input-size-spinner-compact);
+}
+.ids-autocomplete-overlay-panel.ids-overlay-panel-compact .ids-autocomplete-panel {
+  gap: var(--ids-comp-forms-list-item-size-gap-compact);
+  padding: var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact);
+  margin: calc(var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact) * -1);
+}
+.ids-autocomplete-overlay-panel.ids-overlay-panel-compact .ids-autocomplete-panel .ids-autocomplete-hint__wrapper {
+  padding: 0 var(--ids-comp-forms-list-item-hint-text-size-padding-x-compact);
+}
 .ids-autocomplete.ids-autocomplete-comfortable > .ids-autocomplete-suffix {
   gap: var(--ids-comp-forms-input-size-icons-gap-comfortable);
 }
+.ids-autocomplete.ids-autocomplete-comfortable > .ids-autocomplete-suffix > .ids-icon-button {
+  height: var(--ids-comp-forms-input-icon-button-width-comfortable);
+  width: var(--ids-comp-forms-input-icon-button-width-comfortable);
+}
+.ids-autocomplete.ids-autocomplete-comfortable > .ids-autocomplete-suffix > .ids-icon-button .ids-icon {
+  font-family: var(--ids-comp-forms-input-icon-button-typography-font-family-comfortable);
+  font-size: var(--ids-comp-forms-input-icon-button-typography-font-size-comfortable);
+  font-weight: var(--ids-comp-forms-input-icon-button-typography-font-weight-comfortable);
+  line-height: var(--ids-comp-forms-input-icon-button-typography-line-height-comfortable);
+}
+.ids-autocomplete.ids-autocomplete-comfortable > .ids-autocomplete-suffix > .ids-icon {
+  font-family: var(--ids-comp-forms-input-icon-typography-font-family-comfortable);
+  height: var(--ids-comp-forms-input-icon-width-comfortable);
+  width: var(--ids-comp-forms-input-icon-width-comfortable);
+  font-size: var(--ids-comp-forms-input-icon-typography-font-size-comfortable);
+  font-weight: var(--ids-comp-forms-input-icon-typography-font-weight-comfortable);
+  line-height: var(--ids-comp-forms-input-icon-typography-line-height-comfortable);
+}
+.ids-autocomplete.ids-autocomplete-comfortable > .ids-autocomplete-suffix .ids-spinner {
+  width: var(--ids-comp-forms-input-size-spinner-comfortable);
+  height: var(--ids-comp-forms-input-size-spinner-comfortable);
+}
+.ids-autocomplete-overlay-panel.ids-overlay-panel-comfortable .ids-autocomplete-panel {
+  gap: var(--ids-comp-forms-list-item-size-gap-comfortable);
+  padding: var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact);
+  margin: calc(var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact) * -1);
+}
+.ids-autocomplete-overlay-panel.ids-overlay-panel-comfortable .ids-autocomplete-panel .ids-autocomplete-hint__wrapper {
+  padding: 0 var(--ids-comp-forms-list-item-hint-text-size-padding-x-comfortable);
+}
 .ids-autocomplete.ids-autocomplete-spacious > .ids-autocomplete-suffix {
   gap: var(--ids-comp-forms-input-size-icons-gap-spacious);
 }
+.ids-autocomplete.ids-autocomplete-spacious > .ids-autocomplete-suffix > .ids-icon-button {
+  height: var(--ids-comp-forms-input-icon-button-width-spacious);
+  width: var(--ids-comp-forms-input-icon-button-width-spacious);
+}
+.ids-autocomplete.ids-autocomplete-spacious > .ids-autocomplete-suffix > .ids-icon-button .ids-icon {
+  font-family: var(--ids-comp-forms-input-icon-button-typography-font-family-spacious);
+  font-size: var(--ids-comp-forms-input-icon-button-typography-font-size-spacious);
+  font-weight: var(--ids-comp-forms-input-icon-button-typography-font-weight-spacious);
+  line-height: var(--ids-comp-forms-input-icon-button-typography-line-height-spacious);
+}
+.ids-autocomplete.ids-autocomplete-spacious > .ids-autocomplete-suffix > .ids-icon {
+  font-family: var(--ids-comp-forms-input-icon-typography-font-family-spacious);
+  height: var(--ids-comp-forms-input-icon-width-spacious);
+  width: var(--ids-comp-forms-input-icon-width-spacious);
+  font-size: var(--ids-comp-forms-input-icon-typography-font-size-spacious);
+  font-weight: var(--ids-comp-forms-input-icon-typography-font-weight-spacious);
+  line-height: var(--ids-comp-forms-input-icon-typography-line-height-spacious);
+}
+.ids-autocomplete.ids-autocomplete-spacious > .ids-autocomplete-suffix .ids-spinner {
+  width: var(--ids-comp-forms-input-size-spinner-spacious);
+  height: var(--ids-comp-forms-input-size-spinner-spacious);
+}
+.ids-autocomplete-overlay-panel.ids-overlay-panel-spacious .ids-autocomplete-panel {
+  gap: var(--ids-comp-forms-list-item-size-gap-spacious);
+  padding: var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact);
+  margin: calc(var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact) * -1);
+}
+.ids-autocomplete-overlay-panel.ids-overlay-panel-spacious .ids-autocomplete-panel .ids-autocomplete-hint__wrapper {
+  padding: 0 var(--ids-comp-forms-list-item-hint-text-size-padding-x-spacious);
+}
 .ids-autocomplete.ids-autocomplete-dense > .ids-autocomplete-suffix {
   gap: var(--ids-comp-forms-input-size-icons-gap-dense);
 }
+.ids-autocomplete.ids-autocomplete-dense > .ids-autocomplete-suffix > .ids-icon-button {
+  height: var(--ids-comp-forms-input-icon-button-width-dense);
+  width: var(--ids-comp-forms-input-icon-button-width-dense);
+}
+.ids-autocomplete.ids-autocomplete-dense > .ids-autocomplete-suffix > .ids-icon-button .ids-icon {
+  font-family: var(--ids-comp-forms-input-icon-button-typography-font-family-dense);
+  font-size: var(--ids-comp-forms-input-icon-button-typography-font-size-dense);
+  font-weight: var(--ids-comp-forms-input-icon-button-typography-font-weight-dense);
+  line-height: var(--ids-comp-forms-input-icon-button-typography-line-height-dense);
+}
+.ids-autocomplete.ids-autocomplete-dense > .ids-autocomplete-suffix > .ids-icon {
+  font-family: var(--ids-comp-forms-input-icon-typography-font-family-dense);
+  height: var(--ids-comp-forms-input-icon-width-dense);
+  width: var(--ids-comp-forms-input-icon-width-dense);
+  font-size: var(--ids-comp-forms-input-icon-typography-font-size-dense);
+  font-weight: var(--ids-comp-forms-input-icon-typography-font-weight-dense);
+  line-height: var(--ids-comp-forms-input-icon-typography-line-height-dense);
+}
+.ids-autocomplete.ids-autocomplete-dense > .ids-autocomplete-suffix .ids-spinner {
+  width: var(--ids-comp-forms-input-size-spinner-dense);
+  height: var(--ids-comp-forms-input-size-spinner-dense);
+}
+.ids-autocomplete-overlay-panel.ids-overlay-panel-dense .ids-autocomplete-panel {
+  gap: var(--ids-comp-forms-list-item-size-gap-dense);
+  padding: var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact);
+  margin: calc(var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact) * -1);
+}
+.ids-autocomplete-overlay-panel.ids-overlay-panel-dense .ids-autocomplete-panel .ids-autocomplete-hint__wrapper {
+  padding: 0 var(--ids-comp-forms-list-item-hint-text-size-padding-x-dense);
+}
 input[autocomplete] {
   width: 100%;
   text-overflow: ellipsis;
 }
+input[autocomplete] {
+  min-width: var(--ids-comp-forms-input-size-min-width-compact);
+}
+input[autocomplete] {
+  min-width: var(--ids-comp-forms-input-size-min-width-comfortable);
+}
+input[autocomplete] {
+  min-width: var(--ids-comp-forms-input-size-min-width-spacious);
+}
+input[autocomplete] {
+  min-width: var(--ids-comp-forms-input-size-min-width-dense);
+}
 .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix:has(> input[autocomplete]) {
   width: 100%;
   display: inline-flex;
+  flex-wrap: wrap;
   align-items: center;
-}
-.ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix:has(> input[autocomplete]):has(.ids-autocomplete-chip-list > button:first-child) {
-  display: grid;
-  grid-template-columns: 1fr auto;
-}
-.ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix:has(> input[autocomplete]):has(.ids-autocomplete-chip-list > button:first-child) > input[autocomplete] {
-  order: 3;
-}
-.ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix:has(> input[autocomplete]):has(.ids-autocomplete-chip-list > button:first-child) > .ids-autocomplete {
-  order: 2;
-  grid-row: span 2/span 1;
+  position: relative;
 }
 .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix:has(> input[autocomplete] ~ .ids-autocomplete-compact) {
-  column-gap: var(--ids-comp-forms-input-size-gap-compact);
+  padding-right: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-size-padding-right-compact);
+}
+.ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix:has(> .ids-autocomplete-chip-list ~ input[autocomplete] ~ .ids-autocomplete-compact) {
+  gap: var(--ids-comp-forms-input-size-chip-input-gap-compact);
 }
 .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix:has(> input[autocomplete] ~ .ids-autocomplete-comfortable) {
-  column-gap: var(--ids-comp-forms-input-size-gap-comfortable);
+  padding-right: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-size-padding-right-comfortable);
+}
+.ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix:has(> .ids-autocomplete-chip-list ~ input[autocomplete] ~ .ids-autocomplete-comfortable) {
+  gap: var(--ids-comp-forms-input-size-chip-input-gap-comfortable);
 }
 .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix:has(> input[autocomplete] ~ .ids-autocomplete-spacious) {
-  column-gap: var(--ids-comp-forms-input-size-gap-spacious);
+  padding-right: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-size-padding-right-spacious);
+}
+.ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix:has(> .ids-autocomplete-chip-list ~ input[autocomplete] ~ .ids-autocomplete-spacious) {
+  gap: var(--ids-comp-forms-input-size-chip-input-gap-spacious);
 }
 .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix:has(> input[autocomplete] ~ .ids-autocomplete-dense) {
-  column-gap: var(--ids-comp-forms-input-size-gap-dense);
+  padding-right: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-size-padding-right-dense);
+}
+.ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix:has(> .ids-autocomplete-chip-list ~ input[autocomplete] ~ .ids-autocomplete-dense) {
+  gap: var(--ids-comp-forms-input-size-chip-input-gap-dense);
 }

package/dist/autocomplete/autocomplete.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- .ids-autocomplete{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0);line-height:1.5}.ids-autocomplete::before,.ids-autocomplete::after,.ids-autocomplete *,.ids-autocomplete ::before,.ids-autocomplete ::after{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0)}.ids-autocomplete-panel{overflow:auto;width:100%;padding:8px;scrollbar-width:thin}.ids-autocomplete-overlay-panel{width:100%}.ids-autocomplete-suffix{display:flex;align-items:center}.ids-autocomplete-chip-list{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px}.ids-autocomplete-chip-list:not(:has(button:first-child)){display:none}.ids-autocomplete-chip-list button[idsChip].ids-chip{border-style:solid !important}.ids-autocomplete-chip-list button[idsChip].ids-chip>div.ids-chip__label{text-align:left;word-break:break-all;overflow:hidden;display:-webkit-box;line-clamp:1;-webkit-box-orient:vertical;-webkit-line-clamp:1}.ids-autocomplete-hint__wrapper{padding:8px 12px}.ids-autocomplete.ids-autocomplete-compact>.ids-autocomplete-suffix{gap:var(--ids-comp-forms-input-size-icons-gap-compact)}.ids-autocomplete.ids-autocomplete-comfortable>.ids-autocomplete-suffix{gap:var(--ids-comp-forms-input-size-icons-gap-comfortable)}.ids-autocomplete.ids-autocomplete-spacious>.ids-autocomplete-suffix{gap:var(--ids-comp-forms-input-size-icons-gap-spacious)}.ids-autocomplete.ids-autocomplete-dense>.ids-autocomplete-suffix{gap:var(--ids-comp-forms-input-size-icons-gap-dense)}input[autocomplete]{width:100%;text-overflow:ellipsis}.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]){width:100%;display:inline-flex;align-items:center}.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]):has(.ids-autocomplete-chip-list>button:first-child){display:grid;grid-template-columns:1fr auto}.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]):has(.ids-autocomplete-chip-list>button:first-child)>input[autocomplete]{order:3}.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]):has(.ids-autocomplete-chip-list>button:first-child)>.ids-autocomplete{order:2;grid-row:span 2/span 1}.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]~.ids-autocomplete-compact){column-gap:var(--ids-comp-forms-input-size-gap-compact)}.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]~.ids-autocomplete-comfortable){column-gap:var(--ids-comp-forms-input-size-gap-comfortable)}.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]~.ids-autocomplete-spacious){column-gap:var(--ids-comp-forms-input-size-gap-spacious)}.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]~.ids-autocomplete-dense){column-gap:var(--ids-comp-forms-input-size-gap-dense)}
1	+ .ids-autocomplete{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0);line-height:1.5;position:absolute;right:0}.ids-autocomplete::before,.ids-autocomplete::after,.ids-autocomplete ,.ids-autocomplete ::before,.ids-autocomplete ::after{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0)}.ids-autocomplete-panel{display:grid;overflow:auto;width:100%;scrollbar-width:thin}.ids-autocomplete-overlay-panel{width:100%}.ids-autocomplete-suffix{display:flex;align-items:center}.ids-autocomplete-chip-list{display:contents}.ids-autocomplete-chip-list button[idsChip].ids-chip{border-style:solid !important}.ids-autocomplete-chip-list button[idsChip].ids-chip>div.ids-chip__label{text-align:left;word-break:break-all;overflow:hidden;display:-webkit-box;line-clamp:1;-webkit-box-orient:vertical;-webkit-line-clamp:1}.ids-autocomplete.ids-autocomplete-compact>.ids-autocomplete-suffix{gap:var(--ids-comp-forms-input-size-icons-gap-compact)}.ids-autocomplete.ids-autocomplete-compact>.ids-autocomplete-suffix>.ids-icon-button{height:var(--ids-comp-forms-input-icon-button-width-compact);width:var(--ids-comp-forms-input-icon-button-width-compact)}.ids-autocomplete.ids-autocomplete-compact>.ids-autocomplete-suffix>.ids-icon-button .ids-icon{font-family:var(--ids-comp-forms-input-icon-button-typography-font-family-compact);font-size:var(--ids-comp-forms-input-icon-button-typography-font-size-compact);font-weight:var(--ids-comp-forms-input-icon-button-typography-font-weight-compact);line-height:var(--ids-comp-forms-input-icon-button-typography-line-height-compact)}.ids-autocomplete.ids-autocomplete-compact>.ids-autocomplete-suffix>.ids-icon{font-family:var(--ids-comp-forms-input-icon-typography-font-family-compact);height:var(--ids-comp-forms-input-icon-width-compact);width:var(--ids-comp-forms-input-icon-width-compact);font-size:var(--ids-comp-forms-input-icon-typography-font-size-compact);font-weight:var(--ids-comp-forms-input-icon-typography-font-weight-compact);line-height:var(--ids-comp-forms-input-icon-typography-line-height-compact)}.ids-autocomplete.ids-autocomplete-compact>.ids-autocomplete-suffix .ids-spinner{width:var(--ids-comp-forms-input-size-spinner-compact);height:var(--ids-comp-forms-input-size-spinner-compact)}.ids-autocomplete-overlay-panel.ids-overlay-panel-compact .ids-autocomplete-panel{gap:var(--ids-comp-forms-list-item-size-gap-compact);padding:var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact);margin:calc(var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact)-1)}.ids-autocomplete-overlay-panel.ids-overlay-panel-compact .ids-autocomplete-panel .ids-autocomplete-hint__wrapper{padding:0 var(--ids-comp-forms-list-item-hint-text-size-padding-x-compact)}.ids-autocomplete.ids-autocomplete-comfortable>.ids-autocomplete-suffix{gap:var(--ids-comp-forms-input-size-icons-gap-comfortable)}.ids-autocomplete.ids-autocomplete-comfortable>.ids-autocomplete-suffix>.ids-icon-button{height:var(--ids-comp-forms-input-icon-button-width-comfortable);width:var(--ids-comp-forms-input-icon-button-width-comfortable)}.ids-autocomplete.ids-autocomplete-comfortable>.ids-autocomplete-suffix>.ids-icon-button .ids-icon{font-family:var(--ids-comp-forms-input-icon-button-typography-font-family-comfortable);font-size:var(--ids-comp-forms-input-icon-button-typography-font-size-comfortable);font-weight:var(--ids-comp-forms-input-icon-button-typography-font-weight-comfortable);line-height:var(--ids-comp-forms-input-icon-button-typography-line-height-comfortable)}.ids-autocomplete.ids-autocomplete-comfortable>.ids-autocomplete-suffix>.ids-icon{font-family:var(--ids-comp-forms-input-icon-typography-font-family-comfortable);height:var(--ids-comp-forms-input-icon-width-comfortable);width:var(--ids-comp-forms-input-icon-width-comfortable);font-size:var(--ids-comp-forms-input-icon-typography-font-size-comfortable);font-weight:var(--ids-comp-forms-input-icon-typography-font-weight-comfortable);line-height:var(--ids-comp-forms-input-icon-typography-line-height-comfortable)}.ids-autocomplete.ids-autocomplete-comfortable>.ids-autocomplete-suffix .ids-spinner{width:var(--ids-comp-forms-input-size-spinner-comfortable);height:var(--ids-comp-forms-input-size-spinner-comfortable)}.ids-autocomplete-overlay-panel.ids-overlay-panel-comfortable .ids-autocomplete-panel{gap:var(--ids-comp-forms-list-item-size-gap-comfortable);padding:var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact);margin:calc(var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact)-1)}.ids-autocomplete-overlay-panel.ids-overlay-panel-comfortable .ids-autocomplete-panel .ids-autocomplete-hint__wrapper{padding:0 var(--ids-comp-forms-list-item-hint-text-size-padding-x-comfortable)}.ids-autocomplete.ids-autocomplete-spacious>.ids-autocomplete-suffix{gap:var(--ids-comp-forms-input-size-icons-gap-spacious)}.ids-autocomplete.ids-autocomplete-spacious>.ids-autocomplete-suffix>.ids-icon-button{height:var(--ids-comp-forms-input-icon-button-width-spacious);width:var(--ids-comp-forms-input-icon-button-width-spacious)}.ids-autocomplete.ids-autocomplete-spacious>.ids-autocomplete-suffix>.ids-icon-button .ids-icon{font-family:var(--ids-comp-forms-input-icon-button-typography-font-family-spacious);font-size:var(--ids-comp-forms-input-icon-button-typography-font-size-spacious);font-weight:var(--ids-comp-forms-input-icon-button-typography-font-weight-spacious);line-height:var(--ids-comp-forms-input-icon-button-typography-line-height-spacious)}.ids-autocomplete.ids-autocomplete-spacious>.ids-autocomplete-suffix>.ids-icon{font-family:var(--ids-comp-forms-input-icon-typography-font-family-spacious);height:var(--ids-comp-forms-input-icon-width-spacious);width:var(--ids-comp-forms-input-icon-width-spacious);font-size:var(--ids-comp-forms-input-icon-typography-font-size-spacious);font-weight:var(--ids-comp-forms-input-icon-typography-font-weight-spacious);line-height:var(--ids-comp-forms-input-icon-typography-line-height-spacious)}.ids-autocomplete.ids-autocomplete-spacious>.ids-autocomplete-suffix .ids-spinner{width:var(--ids-comp-forms-input-size-spinner-spacious);height:var(--ids-comp-forms-input-size-spinner-spacious)}.ids-autocomplete-overlay-panel.ids-overlay-panel-spacious .ids-autocomplete-panel{gap:var(--ids-comp-forms-list-item-size-gap-spacious);padding:var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact);margin:calc(var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact)-1)}.ids-autocomplete-overlay-panel.ids-overlay-panel-spacious .ids-autocomplete-panel .ids-autocomplete-hint__wrapper{padding:0 var(--ids-comp-forms-list-item-hint-text-size-padding-x-spacious)}.ids-autocomplete.ids-autocomplete-dense>.ids-autocomplete-suffix{gap:var(--ids-comp-forms-input-size-icons-gap-dense)}.ids-autocomplete.ids-autocomplete-dense>.ids-autocomplete-suffix>.ids-icon-button{height:var(--ids-comp-forms-input-icon-button-width-dense);width:var(--ids-comp-forms-input-icon-button-width-dense)}.ids-autocomplete.ids-autocomplete-dense>.ids-autocomplete-suffix>.ids-icon-button .ids-icon{font-family:var(--ids-comp-forms-input-icon-button-typography-font-family-dense);font-size:var(--ids-comp-forms-input-icon-button-typography-font-size-dense);font-weight:var(--ids-comp-forms-input-icon-button-typography-font-weight-dense);line-height:var(--ids-comp-forms-input-icon-button-typography-line-height-dense)}.ids-autocomplete.ids-autocomplete-dense>.ids-autocomplete-suffix>.ids-icon{font-family:var(--ids-comp-forms-input-icon-typography-font-family-dense);height:var(--ids-comp-forms-input-icon-width-dense);width:var(--ids-comp-forms-input-icon-width-dense);font-size:var(--ids-comp-forms-input-icon-typography-font-size-dense);font-weight:var(--ids-comp-forms-input-icon-typography-font-weight-dense);line-height:var(--ids-comp-forms-input-icon-typography-line-height-dense)}.ids-autocomplete.ids-autocomplete-dense>.ids-autocomplete-suffix .ids-spinner{width:var(--ids-comp-forms-input-size-spinner-dense);height:var(--ids-comp-forms-input-size-spinner-dense)}.ids-autocomplete-overlay-panel.ids-overlay-panel-dense .ids-autocomplete-panel{gap:var(--ids-comp-forms-list-item-size-gap-dense);padding:var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact);margin:calc(var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact)*-1)}.ids-autocomplete-overlay-panel.ids-overlay-panel-dense .ids-autocomplete-panel .ids-autocomplete-hint__wrapper{padding:0 var(--ids-comp-forms-list-item-hint-text-size-padding-x-dense)}input[autocomplete]{width:100%;text-overflow:ellipsis}input[autocomplete]{min-width:var(--ids-comp-forms-input-size-min-width-compact)}input[autocomplete]{min-width:var(--ids-comp-forms-input-size-min-width-comfortable)}input[autocomplete]{min-width:var(--ids-comp-forms-input-size-min-width-spacious)}input[autocomplete]{min-width:var(--ids-comp-forms-input-size-min-width-dense)}.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]){width:100%;display:inline-flex;flex-wrap:wrap;align-items:center;position:relative}.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]~.ids-autocomplete-compact){padding-right:var(--ids-comp-forms-form-field-standard-field-wrapper-infix-size-padding-right-compact)}.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>.ids-autocomplete-chip-list~input[autocomplete]~.ids-autocomplete-compact){gap:var(--ids-comp-forms-input-size-chip-input-gap-compact)}.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]~.ids-autocomplete-comfortable){padding-right:var(--ids-comp-forms-form-field-standard-field-wrapper-infix-size-padding-right-comfortable)}.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>.ids-autocomplete-chip-list~input[autocomplete]~.ids-autocomplete-comfortable){gap:var(--ids-comp-forms-input-size-chip-input-gap-comfortable)}.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]~.ids-autocomplete-spacious){padding-right:var(--ids-comp-forms-form-field-standard-field-wrapper-infix-size-padding-right-spacious)}.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>.ids-autocomplete-chip-list~input[autocomplete]~.ids-autocomplete-spacious){gap:var(--ids-comp-forms-input-size-chip-input-gap-spacious)}.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]~.ids-autocomplete-dense){padding-right:var(--ids-comp-forms-form-field-standard-field-wrapper-infix-size-padding-right-dense)}.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>.ids-autocomplete-chip-list~input[autocomplete]~.ids-autocomplete-dense){gap:var(--ids-comp-forms-input-size-chip-input-gap-dense)}