@i-cell/ids-styles 0.0.67 → 0.0.70

package/dist/autocomplete/autocomplete.css

@@ -14,9 +14,11 @@
   border-color: transparent;
 }
 .ids-autocomplete-panel {
-  display: grid;
-  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
   width: 100%;
+  overflow-y: auto;
   scrollbar-width: thin;
 }
 .ids-autocomplete-overlay-panel {

package/dist/autocomplete/autocomplete.min.css

@@ -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;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)}
+.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:flex;flex-direction:column;align-items:flex-start;width:100%;overflow-y:auto;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)}

package/dist/autocomplete/autocomplete.plugin.js

@@ -17,7 +17,14 @@ module.exports = function AutocompletePlugin() {
         borderStyle: 'none',
         borderColor: 'rgba(0,0,0,0)',
       },
-      '.ids-autocomplete-panel': { display: 'grid', overflow: 'auto', width: '100%', scrollbarWidth: 'thin' },
+      '.ids-autocomplete-panel': {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        width: '100%',
+        overflowY: 'auto',
+        scrollbarWidth: 'thin',
+      },
       '.ids-autocomplete-overlay-panel': { width: '100%' },
       '.ids-autocomplete-suffix': { display: 'flex', alignItems: 'center' },
       '.ids-autocomplete-chip-list': { display: 'contents' },

package/dist/checkbox/checkbox-group.css

@@ -4,7 +4,7 @@
   justify-content: center;
   align-items: flex-start;
 }
-.ids-checkbox-group > .ids-checkbox-group__label {
+.ids-checkbox-group > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
   font-style: normal;
 }
 .ids-checkbox-group > .ids-checkbox-group__list {
@@ -19,71 +19,131 @@
   align-items: flex-start;
 }
 .ids-checkbox-group.ids-checkbox-group-compact {
-  padding: var(--ids-comp-checkbox-group-vertical-container-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-compact);
-  gap: var(--ids-comp-checkbox-group-vertical-container-size-gap-compact);
+  padding: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-compact);
+  gap: var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-compact);
 }
-.ids-checkbox-group.ids-checkbox-group-compact .ids-checkbox-group__label {
+.ids-checkbox-group.ids-checkbox-group-compact > .ids-checkbox-group__legend {
+  gap: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-compact);
+}
+.ids-checkbox-group.ids-checkbox-group-compact > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
   font-family: var(--ids-comp-checkbox-group-label-typography-font-family-compact);
   font-size: var(--ids-comp-checkbox-group-label-typography-font-size-compact);
   font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-compact);
   line-height: var(--ids-comp-checkbox-group-label-typography-line-height-compact);
   letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-compact);
 }
-.ids-checkbox-group.ids-checkbox-group-compact .ids-checkbox-group__list {
-  padding: var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-compact);
-  gap: var(--ids-comp-checkbox-group-horizontal-list-size-gap-compact);
+.ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
+  padding: var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-compact);
+  gap: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-compact);
+}
+.ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
+  padding: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-compact);
+  gap: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-compact);
+}
+.ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
+  padding: var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-compact);
+  gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-compact);
+}
+.ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
+  padding: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-compact);
+  gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-compact);
 }
 .ids-checkbox-group.ids-checkbox-group-comfortable {
-  padding: var(--ids-comp-checkbox-group-vertical-container-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-comfortable);
-  gap: var(--ids-comp-checkbox-group-vertical-container-size-gap-comfortable);
+  padding: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-comfortable);
+  gap: var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-comfortable);
 }
-.ids-checkbox-group.ids-checkbox-group-comfortable .ids-checkbox-group__label {
+.ids-checkbox-group.ids-checkbox-group-comfortable > .ids-checkbox-group__legend {
+  gap: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-comfortable);
+}
+.ids-checkbox-group.ids-checkbox-group-comfortable > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
   font-family: var(--ids-comp-checkbox-group-label-typography-font-family-comfortable);
   font-size: var(--ids-comp-checkbox-group-label-typography-font-size-comfortable);
   font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-comfortable);
   line-height: var(--ids-comp-checkbox-group-label-typography-line-height-comfortable);
   letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-comfortable);
 }
-.ids-checkbox-group.ids-checkbox-group-comfortable .ids-checkbox-group__list {
-  padding: var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-comfortable);
-  gap: var(--ids-comp-checkbox-group-horizontal-list-size-gap-comfortable);
+.ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
+  padding: var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-comfortable);
+  gap: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-comfortable);
+}
+.ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
+  padding: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-comfortable);
+  gap: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-comfortable);
+}
+.ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
+  padding: var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-comfortable);
+  gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-comfortable);
+}
+.ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
+  padding: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-comfortable);
+  gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-comfortable);
 }
 .ids-checkbox-group.ids-checkbox-group-spacious {
-  padding: var(--ids-comp-checkbox-group-vertical-container-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-spacious);
-  gap: var(--ids-comp-checkbox-group-vertical-container-size-gap-spacious);
+  padding: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-spacious);
+  gap: var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-spacious);
 }
-.ids-checkbox-group.ids-checkbox-group-spacious .ids-checkbox-group__label {
+.ids-checkbox-group.ids-checkbox-group-spacious > .ids-checkbox-group__legend {
+  gap: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-spacious);
+}
+.ids-checkbox-group.ids-checkbox-group-spacious > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
   font-family: var(--ids-comp-checkbox-group-label-typography-font-family-spacious);
   font-size: var(--ids-comp-checkbox-group-label-typography-font-size-spacious);
   font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-spacious);
   line-height: var(--ids-comp-checkbox-group-label-typography-line-height-spacious);
   letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-spacious);
 }
-.ids-checkbox-group.ids-checkbox-group-spacious .ids-checkbox-group__list {
-  padding: var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-spacious);
-  gap: var(--ids-comp-checkbox-group-horizontal-list-size-gap-spacious);
+.ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
+  padding: var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-spacious);
+  gap: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-spacious);
+}
+.ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
+  padding: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-spacious);
+  gap: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-spacious);
+}
+.ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
+  padding: var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-spacious);
+  gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-spacious);
+}
+.ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
+  padding: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-spacious);
+  gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-spacious);
 }
 .ids-checkbox-group.ids-checkbox-group-dense {
-  padding: var(--ids-comp-checkbox-group-vertical-container-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-dense);
-  gap: var(--ids-comp-checkbox-group-vertical-container-size-gap-dense);
+  padding: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-dense);
+  gap: var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-dense);
 }
-.ids-checkbox-group.ids-checkbox-group-dense .ids-checkbox-group__label {
+.ids-checkbox-group.ids-checkbox-group-dense > .ids-checkbox-group__legend {
+  gap: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-dense);
+}
+.ids-checkbox-group.ids-checkbox-group-dense > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
   font-family: var(--ids-comp-checkbox-group-label-typography-font-family-dense);
   font-size: var(--ids-comp-checkbox-group-label-typography-font-size-dense);
   font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-dense);
   line-height: var(--ids-comp-checkbox-group-label-typography-line-height-dense);
   letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-dense);
 }
-.ids-checkbox-group.ids-checkbox-group-dense .ids-checkbox-group__list {
-  padding: var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-dense);
-  gap: var(--ids-comp-checkbox-group-horizontal-list-size-gap-dense);
+.ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
+  padding: var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-dense);
+  gap: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-dense);
+}
+.ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
+  padding: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-dense);
+  gap: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-dense);
+}
+.ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
+  padding: var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-dense);
+  gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-dense);
+}
+.ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
+  padding: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-dense);
+  gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-dense);
 }
-.ids-checkbox-group.ids-checkbox-group-light > .ids-checkbox-group__label {
+.ids-checkbox-group.ids-checkbox-group-light > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
   color: var(--ids-comp-checkbox-label-color-fg-light-default);
 }
-.ids-checkbox-group.ids-checkbox-group-dark > .ids-checkbox-group__label {
+.ids-checkbox-group.ids-checkbox-group-dark > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
   color: var(--ids-comp-checkbox-label-color-fg-dark-default);
 }
-.ids-checkbox-group.ids-checkbox-group-surface > .ids-checkbox-group__label {
+.ids-checkbox-group.ids-checkbox-group-surface > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
   color: var(--ids-comp-checkbox-label-color-fg-surface-default);
 }

package/dist/checkbox/checkbox-group.min.css

@@ -1 +1 @@
-.ids-checkbox-group{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.ids-checkbox-group>.ids-checkbox-group__label{font-style:normal}.ids-checkbox-group>.ids-checkbox-group__list{display:flex}.ids-checkbox-group.ids-checkbox-group-horizontal>.ids-checkbox-group__list{flex-direction:row;align-items:center}.ids-checkbox-group.ids-checkbox-group-vertical>.ids-checkbox-group__list{flex-direction:column;align-items:flex-start}.ids-checkbox-group.ids-checkbox-group-compact{padding:var(--ids-comp-checkbox-group-vertical-container-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-compact);gap:var(--ids-comp-checkbox-group-vertical-container-size-gap-compact)}.ids-checkbox-group.ids-checkbox-group-compact .ids-checkbox-group__label{font-family:var(--ids-comp-checkbox-group-label-typography-font-family-compact);font-size:var(--ids-comp-checkbox-group-label-typography-font-size-compact);font-weight:var(--ids-comp-checkbox-group-label-typography-font-weight-compact);line-height:var(--ids-comp-checkbox-group-label-typography-line-height-compact);letter-spacing:var(--ids-comp-checkbox-group-label-typography-letter-spacing-compact)}.ids-checkbox-group.ids-checkbox-group-compact .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-compact);gap:var(--ids-comp-checkbox-group-horizontal-list-size-gap-compact)}.ids-checkbox-group.ids-checkbox-group-comfortable{padding:var(--ids-comp-checkbox-group-vertical-container-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-comfortable);gap:var(--ids-comp-checkbox-group-vertical-container-size-gap-comfortable)}.ids-checkbox-group.ids-checkbox-group-comfortable .ids-checkbox-group__label{font-family:var(--ids-comp-checkbox-group-label-typography-font-family-comfortable);font-size:var(--ids-comp-checkbox-group-label-typography-font-size-comfortable);font-weight:var(--ids-comp-checkbox-group-label-typography-font-weight-comfortable);line-height:var(--ids-comp-checkbox-group-label-typography-line-height-comfortable);letter-spacing:var(--ids-comp-checkbox-group-label-typography-letter-spacing-comfortable)}.ids-checkbox-group.ids-checkbox-group-comfortable .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-comfortable);gap:var(--ids-comp-checkbox-group-horizontal-list-size-gap-comfortable)}.ids-checkbox-group.ids-checkbox-group-spacious{padding:var(--ids-comp-checkbox-group-vertical-container-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-spacious);gap:var(--ids-comp-checkbox-group-vertical-container-size-gap-spacious)}.ids-checkbox-group.ids-checkbox-group-spacious .ids-checkbox-group__label{font-family:var(--ids-comp-checkbox-group-label-typography-font-family-spacious);font-size:var(--ids-comp-checkbox-group-label-typography-font-size-spacious);font-weight:var(--ids-comp-checkbox-group-label-typography-font-weight-spacious);line-height:var(--ids-comp-checkbox-group-label-typography-line-height-spacious);letter-spacing:var(--ids-comp-checkbox-group-label-typography-letter-spacing-spacious)}.ids-checkbox-group.ids-checkbox-group-spacious .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-spacious);gap:var(--ids-comp-checkbox-group-horizontal-list-size-gap-spacious)}.ids-checkbox-group.ids-checkbox-group-dense{padding:var(--ids-comp-checkbox-group-vertical-container-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-dense);gap:var(--ids-comp-checkbox-group-vertical-container-size-gap-dense)}.ids-checkbox-group.ids-checkbox-group-dense .ids-checkbox-group__label{font-family:var(--ids-comp-checkbox-group-label-typography-font-family-dense);font-size:var(--ids-comp-checkbox-group-label-typography-font-size-dense);font-weight:var(--ids-comp-checkbox-group-label-typography-font-weight-dense);line-height:var(--ids-comp-checkbox-group-label-typography-line-height-dense);letter-spacing:var(--ids-comp-checkbox-group-label-typography-letter-spacing-dense)}.ids-checkbox-group.ids-checkbox-group-dense .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-dense);gap:var(--ids-comp-checkbox-group-horizontal-list-size-gap-dense)}.ids-checkbox-group.ids-checkbox-group-light>.ids-checkbox-group__label{color:var(--ids-comp-checkbox-label-color-fg-light-default)}.ids-checkbox-group.ids-checkbox-group-dark>.ids-checkbox-group__label{color:var(--ids-comp-checkbox-label-color-fg-dark-default)}.ids-checkbox-group.ids-checkbox-group-surface>.ids-checkbox-group__label{color:var(--ids-comp-checkbox-label-color-fg-surface-default)}
+.ids-checkbox-group{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.ids-checkbox-group>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label{font-style:normal}.ids-checkbox-group>.ids-checkbox-group__list{display:flex}.ids-checkbox-group.ids-checkbox-group-horizontal>.ids-checkbox-group__list{flex-direction:row;align-items:center}.ids-checkbox-group.ids-checkbox-group-vertical>.ids-checkbox-group__list{flex-direction:column;align-items:flex-start}.ids-checkbox-group.ids-checkbox-group-compact{padding:var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-compact);gap:var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-compact)}.ids-checkbox-group.ids-checkbox-group-compact>.ids-checkbox-group__legend{gap:var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-compact)}.ids-checkbox-group.ids-checkbox-group-compact>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label{font-family:var(--ids-comp-checkbox-group-label-typography-font-family-compact);font-size:var(--ids-comp-checkbox-group-label-typography-font-size-compact);font-weight:var(--ids-comp-checkbox-group-label-typography-font-weight-compact);line-height:var(--ids-comp-checkbox-group-label-typography-line-height-compact);letter-spacing:var(--ids-comp-checkbox-group-label-typography-letter-spacing-compact)}.ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-compact);gap:var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-compact)}.ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-compact);gap:var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-compact)}.ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-compact);gap:var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-compact)}.ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-compact);gap:var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-compact)}.ids-checkbox-group.ids-checkbox-group-comfortable{padding:var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-comfortable);gap:var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-comfortable)}.ids-checkbox-group.ids-checkbox-group-comfortable>.ids-checkbox-group__legend{gap:var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-comfortable)}.ids-checkbox-group.ids-checkbox-group-comfortable>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label{font-family:var(--ids-comp-checkbox-group-label-typography-font-family-comfortable);font-size:var(--ids-comp-checkbox-group-label-typography-font-size-comfortable);font-weight:var(--ids-comp-checkbox-group-label-typography-font-weight-comfortable);line-height:var(--ids-comp-checkbox-group-label-typography-line-height-comfortable);letter-spacing:var(--ids-comp-checkbox-group-label-typography-letter-spacing-comfortable)}.ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-comfortable);gap:var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-comfortable)}.ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-comfortable);gap:var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-comfortable)}.ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-comfortable);gap:var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-comfortable)}.ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-comfortable);gap:var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-comfortable)}.ids-checkbox-group.ids-checkbox-group-spacious{padding:var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-spacious);gap:var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-spacious)}.ids-checkbox-group.ids-checkbox-group-spacious>.ids-checkbox-group__legend{gap:var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-spacious)}.ids-checkbox-group.ids-checkbox-group-spacious>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label{font-family:var(--ids-comp-checkbox-group-label-typography-font-family-spacious);font-size:var(--ids-comp-checkbox-group-label-typography-font-size-spacious);font-weight:var(--ids-comp-checkbox-group-label-typography-font-weight-spacious);line-height:var(--ids-comp-checkbox-group-label-typography-line-height-spacious);letter-spacing:var(--ids-comp-checkbox-group-label-typography-letter-spacing-spacious)}.ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-spacious);gap:var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-spacious)}.ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-spacious);gap:var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-spacious)}.ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-spacious);gap:var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-spacious)}.ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-spacious);gap:var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-spacious)}.ids-checkbox-group.ids-checkbox-group-dense{padding:var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-dense);gap:var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-dense)}.ids-checkbox-group.ids-checkbox-group-dense>.ids-checkbox-group__legend{gap:var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-dense)}.ids-checkbox-group.ids-checkbox-group-dense>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label{font-family:var(--ids-comp-checkbox-group-label-typography-font-family-dense);font-size:var(--ids-comp-checkbox-group-label-typography-font-size-dense);font-weight:var(--ids-comp-checkbox-group-label-typography-font-weight-dense);line-height:var(--ids-comp-checkbox-group-label-typography-line-height-dense);letter-spacing:var(--ids-comp-checkbox-group-label-typography-letter-spacing-dense)}.ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-dense);gap:var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-dense)}.ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-dense);gap:var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-dense)}.ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-dense);gap:var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-dense)}.ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-dense);gap:var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-dense)}.ids-checkbox-group.ids-checkbox-group-light>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label{color:var(--ids-comp-checkbox-label-color-fg-light-default)}.ids-checkbox-group.ids-checkbox-group-dark>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label{color:var(--ids-comp-checkbox-label-color-fg-dark-default)}.ids-checkbox-group.ids-checkbox-group-surface>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label{color:var(--ids-comp-checkbox-label-color-fg-surface-default)}

package/dist/checkbox/checkbox-group.plugin.js

@@ -3,85 +3,173 @@ module.exports = function CheckboxGroupPlugin() {
   return function ({ addComponents }) {
     const cssObj = {
       '.ids-checkbox-group': { display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'flex-start' },
-      '.ids-checkbox-group>.ids-checkbox-group__label': { fontStyle: 'normal' },
+      '.ids-checkbox-group>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label': { fontStyle: 'normal' },
       '.ids-checkbox-group>.ids-checkbox-group__list': { display: 'flex' },
       '.ids-checkbox-group.ids-checkbox-group-horizontal>.ids-checkbox-group__list': { flexDirection: 'row', alignItems: 'center' },
       '.ids-checkbox-group.ids-checkbox-group-vertical>.ids-checkbox-group__list': { flexDirection: 'column', alignItems: 'flex-start' },
       '.ids-checkbox-group.ids-checkbox-group-compact': {
         padding:
-          'var(--ids-comp-checkbox-group-vertical-container-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-compact)',
-        gap: 'var(--ids-comp-checkbox-group-vertical-container-size-gap-compact)',
+          'var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-compact)',
+        gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-compact)',
       },
-      '.ids-checkbox-group.ids-checkbox-group-compact .ids-checkbox-group__label': {
+      '.ids-checkbox-group.ids-checkbox-group-compact>.ids-checkbox-group__legend': {
+        gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-compact)',
+      },
+      '.ids-checkbox-group.ids-checkbox-group-compact>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label': {
         fontFamily: 'var(--ids-comp-checkbox-group-label-typography-font-family-compact)',
         fontSize: 'var(--ids-comp-checkbox-group-label-typography-font-size-compact)',
         fontWeight: 'var(--ids-comp-checkbox-group-label-typography-font-weight-compact)',
         lineHeight: 'var(--ids-comp-checkbox-group-label-typography-line-height-compact)',
         letterSpacing: 'var(--ids-comp-checkbox-group-label-typography-letter-spacing-compact)',
       },
-      '.ids-checkbox-group.ids-checkbox-group-compact .ids-checkbox-group__list': {
-        padding:
-          'var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-compact)',
-        gap: 'var(--ids-comp-checkbox-group-horizontal-list-size-gap-compact)',
-      },
+      '.ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list':
+        {
+          padding:
+            'var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-compact)',
+          gap: 'var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-compact)',
+        },
+      '.ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list':
+        {
+          padding:
+            'var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-compact)',
+          gap: 'var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-compact)',
+        },
+      '.ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list':
+        {
+          padding:
+            'var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-compact)',
+          gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-compact)',
+        },
+      '.ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list':
+        {
+          padding:
+            'var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-compact)',
+          gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-compact)',
+        },
       '.ids-checkbox-group.ids-checkbox-group-comfortable': {
         padding:
-          'var(--ids-comp-checkbox-group-vertical-container-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-comfortable)',
-        gap: 'var(--ids-comp-checkbox-group-vertical-container-size-gap-comfortable)',
+          'var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-comfortable)',
+        gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-comfortable)',
       },
-      '.ids-checkbox-group.ids-checkbox-group-comfortable .ids-checkbox-group__label': {
+      '.ids-checkbox-group.ids-checkbox-group-comfortable>.ids-checkbox-group__legend': {
+        gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-comfortable)',
+      },
+      '.ids-checkbox-group.ids-checkbox-group-comfortable>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label': {
         fontFamily: 'var(--ids-comp-checkbox-group-label-typography-font-family-comfortable)',
         fontSize: 'var(--ids-comp-checkbox-group-label-typography-font-size-comfortable)',
         fontWeight: 'var(--ids-comp-checkbox-group-label-typography-font-weight-comfortable)',
         lineHeight: 'var(--ids-comp-checkbox-group-label-typography-line-height-comfortable)',
         letterSpacing: 'var(--ids-comp-checkbox-group-label-typography-letter-spacing-comfortable)',
       },
-      '.ids-checkbox-group.ids-checkbox-group-comfortable .ids-checkbox-group__list': {
-        padding:
-          'var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-comfortable)',
-        gap: 'var(--ids-comp-checkbox-group-horizontal-list-size-gap-comfortable)',
-      },
+      '.ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list':
+        {
+          padding:
+            'var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-comfortable)',
+          gap: 'var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-comfortable)',
+        },
+      '.ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list':
+        {
+          padding:
+            'var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-comfortable)',
+          gap: 'var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-comfortable)',
+        },
+      '.ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list':
+        {
+          padding:
+            'var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-comfortable)',
+          gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-comfortable)',
+        },
+      '.ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list':
+        {
+          padding:
+            'var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-comfortable)',
+          gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-comfortable)',
+        },
       '.ids-checkbox-group.ids-checkbox-group-spacious': {
         padding:
-          'var(--ids-comp-checkbox-group-vertical-container-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-spacious)',
-        gap: 'var(--ids-comp-checkbox-group-vertical-container-size-gap-spacious)',
+          'var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-spacious)',
+        gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-spacious)',
       },
-      '.ids-checkbox-group.ids-checkbox-group-spacious .ids-checkbox-group__label': {
+      '.ids-checkbox-group.ids-checkbox-group-spacious>.ids-checkbox-group__legend': {
+        gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-spacious)',
+      },
+      '.ids-checkbox-group.ids-checkbox-group-spacious>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label': {
         fontFamily: 'var(--ids-comp-checkbox-group-label-typography-font-family-spacious)',
         fontSize: 'var(--ids-comp-checkbox-group-label-typography-font-size-spacious)',
         fontWeight: 'var(--ids-comp-checkbox-group-label-typography-font-weight-spacious)',
         lineHeight: 'var(--ids-comp-checkbox-group-label-typography-line-height-spacious)',
         letterSpacing: 'var(--ids-comp-checkbox-group-label-typography-letter-spacing-spacious)',
       },
-      '.ids-checkbox-group.ids-checkbox-group-spacious .ids-checkbox-group__list': {
-        padding:
-          'var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-spacious)',
-        gap: 'var(--ids-comp-checkbox-group-horizontal-list-size-gap-spacious)',
-      },
+      '.ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list':
+        {
+          padding:
+            'var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-spacious)',
+          gap: 'var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-spacious)',
+        },
+      '.ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list':
+        {
+          padding:
+            'var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-spacious)',
+          gap: 'var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-spacious)',
+        },
+      '.ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list':
+        {
+          padding:
+            'var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-spacious)',
+          gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-spacious)',
+        },
+      '.ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list':
+        {
+          padding:
+            'var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-spacious)',
+          gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-spacious)',
+        },
       '.ids-checkbox-group.ids-checkbox-group-dense': {
         padding:
-          'var(--ids-comp-checkbox-group-vertical-container-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-dense)',
-        gap: 'var(--ids-comp-checkbox-group-vertical-container-size-gap-dense)',
+          'var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-dense)',
+        gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-dense)',
       },
-      '.ids-checkbox-group.ids-checkbox-group-dense .ids-checkbox-group__label': {
+      '.ids-checkbox-group.ids-checkbox-group-dense>.ids-checkbox-group__legend': {
+        gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-dense)',
+      },
+      '.ids-checkbox-group.ids-checkbox-group-dense>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label': {
         fontFamily: 'var(--ids-comp-checkbox-group-label-typography-font-family-dense)',
         fontSize: 'var(--ids-comp-checkbox-group-label-typography-font-size-dense)',
         fontWeight: 'var(--ids-comp-checkbox-group-label-typography-font-weight-dense)',
         lineHeight: 'var(--ids-comp-checkbox-group-label-typography-line-height-dense)',
         letterSpacing: 'var(--ids-comp-checkbox-group-label-typography-letter-spacing-dense)',
       },
-      '.ids-checkbox-group.ids-checkbox-group-dense .ids-checkbox-group__list': {
-        padding:
-          'var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-dense)',
-        gap: 'var(--ids-comp-checkbox-group-horizontal-list-size-gap-dense)',
-      },
-      '.ids-checkbox-group.ids-checkbox-group-light>.ids-checkbox-group__label': {
+      '.ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list':
+        {
+          padding:
+            'var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-dense)',
+          gap: 'var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-dense)',
+        },
+      '.ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list':
+        {
+          padding:
+            'var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-dense)',
+          gap: 'var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-dense)',
+        },
+      '.ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list':
+        {
+          padding:
+            'var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-dense)',
+          gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-dense)',
+        },
+      '.ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list':
+        {
+          padding:
+            'var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-dense)',
+          gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-dense)',
+        },
+      '.ids-checkbox-group.ids-checkbox-group-light>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label': {
         color: 'var(--ids-comp-checkbox-label-color-fg-light-default)',
       },
-      '.ids-checkbox-group.ids-checkbox-group-dark>.ids-checkbox-group__label': {
+      '.ids-checkbox-group.ids-checkbox-group-dark>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label': {
         color: 'var(--ids-comp-checkbox-label-color-fg-dark-default)',
       },
-      '.ids-checkbox-group.ids-checkbox-group-surface>.ids-checkbox-group__label': {
+      '.ids-checkbox-group.ids-checkbox-group-surface>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label': {
         color: 'var(--ids-comp-checkbox-label-color-fg-surface-default)',
       },
     };