npm - @i-cell/ids-styles - Versions diffs - 0.0.37 → 0.0.39 - Mend

@i-cell/ids-styles 0.0.37 → 0.0.39

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/badge/badge.css +227 -0
package/dist/badge/badge.min.css +1 -0
package/dist/badge/badge.plugin.js +220 -0
package/dist/components.css +246 -22
package/dist/components.min.css +1 -1
package/dist/components.plugin.js +229 -19
package/dist/datepicker/datepicker.css +0 -4
package/dist/datepicker/datepicker.min.css +1 -1
package/dist/datepicker/datepicker.plugin.js +0 -1
package/dist/form-elements/form-field/form-field.css +18 -18
package/dist/form-elements/form-field/form-field.min.css +1 -1
package/dist/form-elements/form-field/form-field.plugin.js +18 -18
package/package.json +1 -1

package/dist/components.plugin.js CHANGED Viewed

@@ -519,6 +519,217 @@ module.exports = function ComponentsPlugin() {
         borderColor: 'var(--ids-comp-avatar-color-border-dark-default)',
         background: 'var(--ids-comp-avatar-color-bg-dark-default)',
       },
+      '.ids-badge': {
+        boxSizing: 'border-box',
+        borderWidth: '0',
+        borderStyle: 'none',
+        borderColor: 'rgba(0,0,0,0)',
+        lineHeight: 1.5,
+        display: 'inline-flex',
+        position: 'relative',
+      },
+      '.ids-badge::before,.ids-badge::after,.ids-badge *,.ids-badge ::before,.ids-badge ::after': {
+        boxSizing: 'border-box',
+        borderWidth: '0',
+        borderStyle: 'none',
+        borderColor: 'rgba(0,0,0,0)',
+      },
+      '.ids-badge .ids-badge__container,.ids-badge .ids-badge__container-no-element': {
+        whiteSpace: 'nowrap',
+        position: 'absolute',
+        top: '0',
+        left: '100%',
+        transform: 'translate(0, -50%)',
+        transformOrigin: 'top left',
+        textAlign: 'center',
+        display: 'flex',
+        alignItems: 'center',
+        zIndex: 1000,
+      },
+      '.ids-badge-primary>.ids-badge__container,.ids-badge-primary .ids-badge__container-no-element': {
+        backgroundColor: 'var(--ids-comp-badge-filled-color-bg-primary-default)',
+        borderColor: 'var(--ids-comp-badge-filled-color-border-primary-default)',
+        color: 'var(--ids-comp-badge-filled-color-fg-label-primary-default)',
+      },
+      '.ids-badge-primary>.ids-badge__container>.ids-icon,.ids-badge-primary .ids-badge__container-no-element>.ids-icon': {
+        color: 'var(--ids-comp-badge-filled-color-fg-icon-primary-default)',
+      },
+      '.ids-badge-secondary>.ids-badge__container,.ids-badge-secondary .ids-badge__container-no-element': {
+        backgroundColor: 'var(--ids-comp-badge-filled-color-bg-secondary-default)',
+        borderColor: 'var(--ids-comp-badge-filled-color-border-secondary-default)',
+        color: 'var(--ids-comp-badge-filled-color-fg-label-secondary-default)',
+      },
+      '.ids-badge-secondary>.ids-badge__container>.ids-icon,.ids-badge-secondary .ids-badge__container-no-element>.ids-icon': {
+        color: 'var(--ids-comp-badge-filled-color-fg-icon-secondary-default)',
+      },
+      '.ids-badge-brand>.ids-badge__container,.ids-badge-brand .ids-badge__container-no-element': {
+        backgroundColor: 'var(--ids-comp-badge-filled-color-bg-brand-default)',
+        borderColor: 'var(--ids-comp-badge-filled-color-border-brand-default)',
+        color: 'var(--ids-comp-badge-filled-color-fg-label-brand-default)',
+      },
+      '.ids-badge-brand>.ids-badge__container>.ids-icon,.ids-badge-brand .ids-badge__container-no-element>.ids-icon': {
+        color: 'var(--ids-comp-badge-filled-color-fg-icon-brand-default)',
+      },
+      '.ids-badge-error>.ids-badge__container,.ids-badge-error .ids-badge__container-no-element': {
+        backgroundColor: 'var(--ids-comp-badge-filled-color-bg-error-default)',
+        borderColor: 'var(--ids-comp-badge-filled-color-border-error-default)',
+        color: 'var(--ids-comp-badge-filled-color-fg-label-error-default)',
+      },
+      '.ids-badge-error>.ids-badge__container>.ids-icon,.ids-badge-error .ids-badge__container-no-element>.ids-icon': {
+        color: 'var(--ids-comp-badge-filled-color-fg-icon-error-default)',
+      },
+      '.ids-badge-success>.ids-badge__container,.ids-badge-success .ids-badge__container-no-element': {
+        backgroundColor: 'var(--ids-comp-badge-filled-color-bg-success-default)',
+        borderColor: 'var(--ids-comp-badge-filled-color-border-success-default)',
+        color: 'var(--ids-comp-badge-filled-color-fg-label-success-default)',
+      },
+      '.ids-badge-success>.ids-badge__container>.ids-icon,.ids-badge-success .ids-badge__container-no-element>.ids-icon': {
+        color: 'var(--ids-comp-badge-filled-color-fg-icon-success-default)',
+      },
+      '.ids-badge-warning>.ids-badge__container,.ids-badge-warning .ids-badge__container-no-element': {
+        backgroundColor: 'var(--ids-comp-badge-filled-color-bg-warning-default)',
+        borderColor: 'var(--ids-comp-badge-filled-color-border-warning-default)',
+        color: 'var(--ids-comp-badge-filled-color-fg-label-warning-default)',
+      },
+      '.ids-badge-warning>.ids-badge__container>.ids-icon,.ids-badge-warning .ids-badge__container-no-element>.ids-icon': {
+        color: 'var(--ids-comp-badge-filled-color-fg-icon-warning-default)',
+      },
+      '.ids-badge-light>.ids-badge__container,.ids-badge-light .ids-badge__container-no-element': {
+        backgroundColor: 'var(--ids-comp-badge-filled-color-bg-light-default)',
+        borderColor: 'var(--ids-comp-badge-filled-color-border-light-default)',
+        color: 'var(--ids-comp-badge-filled-color-fg-label-light-default)',
+      },
+      '.ids-badge-light>.ids-badge__container>.ids-icon,.ids-badge-light .ids-badge__container-no-element>.ids-icon': {
+        color: 'var(--ids-comp-badge-filled-color-fg-icon-light-default)',
+      },
+      '.ids-badge-dark>.ids-badge__container,.ids-badge-dark .ids-badge__container-no-element': {
+        backgroundColor: 'var(--ids-comp-badge-filled-color-bg-dark-default)',
+        borderColor: 'var(--ids-comp-badge-filled-color-border-dark-default)',
+        color: 'var(--ids-comp-badge-filled-color-fg-label-dark-default)',
+      },
+      '.ids-badge-dark>.ids-badge__container>.ids-icon,.ids-badge-dark .ids-badge__container-no-element>.ids-icon': {
+        color: 'var(--ids-comp-badge-filled-color-fg-icon-dark-default)',
+      },
+      '.ids-badge-surface>.ids-badge__container,.ids-badge-surface .ids-badge__container-no-element': {
+        backgroundColor: 'var(--ids-comp-badge-filled-color-bg-surface-default)',
+        borderColor: 'var(--ids-comp-badge-filled-color-border-surface-default)',
+        color: 'var(--ids-comp-badge-filled-color-fg-label-surface-default)',
+      },
+      '.ids-badge-surface>.ids-badge__container>.ids-icon,.ids-badge-surface .ids-badge__container-no-element>.ids-icon': {
+        color: 'var(--ids-comp-badge-filled-color-fg-icon-surface-default)',
+      },
+      '.ids-badge-compact>.ids-badge__container': {
+        borderRadius: 'var(--ids-comp-badge-size-border-radius-compact)',
+        borderWidth: 'var(--ids-comp-badge-size-border-width-compact)',
+        padding: 'var(--ids-comp-badge-size-padding-y-compact) var(--ids-comp-badge-size-padding-x-compact)',
+        height: 'var(--ids-comp-badge-size-height-compact)',
+        minWidth: 'var(--ids-comp-badge-size-min-width-compact)',
+        gap: 'var(--ids-comp-badge-size-gap-compact)',
+      },
+      '.ids-badge-compact>.ids-badge__container>.ids-badge__label': {
+        fontFamily: 'var(--ids-comp-badge-label-typography-font-family-compact)',
+        fontSize: 'var(--ids-comp-badge-label-typography-font-size-compact)',
+        fontWeight: 'var(--ids-comp-badge-label-typography-font-weight-compact)',
+        letterSpacing: 'var(--ids-comp-badge-label-typography-letter-spacing-compact)',
+        lineHeight: 'var(--ids-comp-badge-label-typography-line-height-compact)',
+      },
+      '.ids-badge-compact>.ids-badge__container>.ids-icon': {
+        fontSize: 'var(--ids-comp-badge-icon-typography-font-size-compact)',
+        fontWeight: 'var(--ids-comp-badge-icon-typography-font-weight-compact)',
+        lineHeight: 'var(--ids-comp-badge-icon-typography-line-height-compact)',
+        width: 'var(--ids-comp-badge-size-icon-compact)',
+        height: 'var(--ids-comp-badge-size-icon-compact)',
+      },
+      '.ids-badge-compact>.ids-badge__container-no-element': {
+        borderRadius: 'var(--ids-comp-badge-noelement-size-border-radius-compact)',
+        borderWidth: 'var(--ids-comp-badge-noelement-size-border-width-compact)',
+        minWidth: 'var(--ids-comp-badge-noelement-size-width-compact)',
+        height: 'var(--ids-comp-badge-noelement-size-height-compact)',
+      },
+      '.ids-badge-comfortable>.ids-badge__container': {
+        borderRadius: 'var(--ids-comp-badge-size-border-radius-comfortable)',
+        borderWidth: 'var(--ids-comp-badge-size-border-width-comfortable)',
+        padding: 'var(--ids-comp-badge-size-padding-y-comfortable) var(--ids-comp-badge-size-padding-x-comfortable)',
+        height: 'var(--ids-comp-badge-size-height-comfortable)',
+        minWidth: 'var(--ids-comp-badge-size-min-width-comfortable)',
+        gap: 'var(--ids-comp-badge-size-gap-comfortable)',
+      },
+      '.ids-badge-comfortable>.ids-badge__container>.ids-badge__label': {
+        fontFamily: 'var(--ids-comp-badge-label-typography-font-family-comfortable)',
+        fontSize: 'var(--ids-comp-badge-label-typography-font-size-comfortable)',
+        fontWeight: 'var(--ids-comp-badge-label-typography-font-weight-comfortable)',
+        letterSpacing: 'var(--ids-comp-badge-label-typography-letter-spacing-comfortable)',
+        lineHeight: 'var(--ids-comp-badge-label-typography-line-height-comfortable)',
+      },
+      '.ids-badge-comfortable>.ids-badge__container>.ids-icon': {
+        fontSize: 'var(--ids-comp-badge-icon-typography-font-size-comfortable)',
+        fontWeight: 'var(--ids-comp-badge-icon-typography-font-weight-comfortable)',
+        lineHeight: 'var(--ids-comp-badge-icon-typography-line-height-comfortable)',
+        width: 'var(--ids-comp-badge-size-icon-comfortable)',
+        height: 'var(--ids-comp-badge-size-icon-comfortable)',
+      },
+      '.ids-badge-comfortable>.ids-badge__container-no-element': {
+        borderRadius: 'var(--ids-comp-badge-noelement-size-border-radius-comfortable)',
+        borderWidth: 'var(--ids-comp-badge-noelement-size-border-width-comfortable)',
+        minWidth: 'var(--ids-comp-badge-noelement-size-width-comfortable)',
+        height: 'var(--ids-comp-badge-noelement-size-height-comfortable)',
+      },
+      '.ids-badge-spacious>.ids-badge__container': {
+        borderRadius: 'var(--ids-comp-badge-size-border-radius-spacious)',
+        borderWidth: 'var(--ids-comp-badge-size-border-width-spacious)',
+        padding: 'var(--ids-comp-badge-size-padding-y-spacious) var(--ids-comp-badge-size-padding-x-spacious)',
+        height: 'var(--ids-comp-badge-size-height-spacious)',
+        minWidth: 'var(--ids-comp-badge-size-min-width-spacious)',
+        gap: 'var(--ids-comp-badge-size-gap-spacious)',
+      },
+      '.ids-badge-spacious>.ids-badge__container>.ids-badge__label': {
+        fontFamily: 'var(--ids-comp-badge-label-typography-font-family-spacious)',
+        fontSize: 'var(--ids-comp-badge-label-typography-font-size-spacious)',
+        fontWeight: 'var(--ids-comp-badge-label-typography-font-weight-spacious)',
+        letterSpacing: 'var(--ids-comp-badge-label-typography-letter-spacing-spacious)',
+        lineHeight: 'var(--ids-comp-badge-label-typography-line-height-spacious)',
+      },
+      '.ids-badge-spacious>.ids-badge__container>.ids-icon': {
+        fontSize: 'var(--ids-comp-badge-icon-typography-font-size-spacious)',
+        fontWeight: 'var(--ids-comp-badge-icon-typography-font-weight-spacious)',
+        lineHeight: 'var(--ids-comp-badge-icon-typography-line-height-spacious)',
+        width: 'var(--ids-comp-badge-size-icon-spacious)',
+        height: 'var(--ids-comp-badge-size-icon-spacious)',
+      },
+      '.ids-badge-spacious>.ids-badge__container-no-element': {
+        borderRadius: 'var(--ids-comp-badge-noelement-size-border-radius-spacious)',
+        borderWidth: 'var(--ids-comp-badge-noelement-size-border-width-spacious)',
+        minWidth: 'var(--ids-comp-badge-noelement-size-width-spacious)',
+        height: 'var(--ids-comp-badge-noelement-size-height-spacious)',
+      },
+      '.ids-badge-dense>.ids-badge__container': {
+        borderRadius: 'var(--ids-comp-badge-size-border-radius-dense)',
+        borderWidth: 'var(--ids-comp-badge-size-border-width-dense)',
+        padding: 'var(--ids-comp-badge-size-padding-y-dense) var(--ids-comp-badge-size-padding-x-dense)',
+        height: 'var(--ids-comp-badge-size-height-dense)',
+        minWidth: 'var(--ids-comp-badge-size-min-width-dense)',
+        gap: 'var(--ids-comp-badge-size-gap-dense)',
+      },
+      '.ids-badge-dense>.ids-badge__container>.ids-badge__label': {
+        fontFamily: 'var(--ids-comp-badge-label-typography-font-family-dense)',
+        fontSize: 'var(--ids-comp-badge-label-typography-font-size-dense)',
+        fontWeight: 'var(--ids-comp-badge-label-typography-font-weight-dense)',
+        letterSpacing: 'var(--ids-comp-badge-label-typography-letter-spacing-dense)',
+        lineHeight: 'var(--ids-comp-badge-label-typography-line-height-dense)',
+      },
+      '.ids-badge-dense>.ids-badge__container>.ids-icon': {
+        fontSize: 'var(--ids-comp-badge-icon-typography-font-size-dense)',
+        fontWeight: 'var(--ids-comp-badge-icon-typography-font-weight-dense)',
+        lineHeight: 'var(--ids-comp-badge-icon-typography-line-height-dense)',
+        width: 'var(--ids-comp-badge-size-icon-dense)',
+        height: 'var(--ids-comp-badge-size-icon-dense)',
+      },
+      '.ids-badge-dense>.ids-badge__container-no-element': {
+        borderRadius: 'var(--ids-comp-badge-noelement-size-border-radius-dense)',
+        borderWidth: 'var(--ids-comp-badge-noelement-size-border-width-dense)',
+        minWidth: 'var(--ids-comp-badge-noelement-size-width-dense)',
+        height: 'var(--ids-comp-badge-noelement-size-height-dense)',
+      },
       '.ids-button-group': {
         boxSizing: 'border-box',
         borderWidth: '0',
@@ -4405,7 +4616,6 @@ module.exports = function ComponentsPlugin() {
       },
       '.ids-calendar .ids-calendar-cell': { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' },
       '.ids-calendar .ids-calendar-cell>.ids-calendar-button': { cursor: 'pointer', outlineStyle: 'none' },
-      '.ids-calendar .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-selected': { cursor: 'default', pointerEvents: 'none' },
       '.ids-calendar .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-today': { borderStyle: 'solid' },
       '.ids-calendar .ids-calendar-cell>.ids-calendar-button:is(:focus,:focus-visible)': { outlineStyle: 'solid', outlineOffset: '2px' },
       '.ids-calendar .ids-calendar-cell>.ids-calendar-button:disabled': { cursor: 'default' },
@@ -5488,27 +5698,27 @@ module.exports = function ComponentsPlugin() {
           borderLeftColor: 'var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-surface-default)',
           background: 'var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-surface-default)',
         },
-      '.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.iids-form-field-control:focus)':
+      '.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.ids-form-field-control:focus)':
         {
           borderColor: 'var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-focused)',
           background: 'var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-focused)',
           outlineColor: 'var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused)',
         },
-      '.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.iids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__leading-icon>.ids-icon':
+      '.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.ids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__leading-icon>.ids-icon':
         { color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-surface-focused)' },
-      '.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.iids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__prefix':
+      '.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.ids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__prefix':
         { color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-focused)' },
-      '.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.iids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__infix .ids-form-field-control':
+      '.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.ids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__infix .ids-form-field-control':
         { color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-focused)' },
-      '.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.iids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__infix .ids-form-field-control .ids-icon':
+      '.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.ids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__infix .ids-form-field-control .ids-icon':
         { color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-icon-surface-focused)' },
-      '.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.iids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__infix ::placeholder':
+      '.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.ids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__infix ::placeholder':
         { color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-focused)' },
-      '.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.iids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__suffix':
+      '.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.ids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__suffix':
         { color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-surface-focused)' },
-      '.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.iids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__trailing-icon>.ids-icon':
+      '.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.ids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__trailing-icon>.ids-icon':
         { color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-surface-focused)' },
-      '.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.iids-form-field-control:focus)>.ids-form-field__field-wrapper__action':
+      '.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.ids-form-field-control:focus)>.ids-form-field__field-wrapper__action':
         {
           borderLeftColor: 'var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-surface-default)',
           background: 'var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-surface-default)',
@@ -5808,27 +6018,27 @@ module.exports = function ComponentsPlugin() {
           borderLeftColor: 'var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-light-default)',
           background: 'var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-light-default)',
         },
-      '.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.iids-form-field-control:focus)':
+      '.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.ids-form-field-control:focus)':
         {
           borderColor: 'var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-light-focused)',
           background: 'var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-focused)',
           outlineColor: 'var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-light-focused)',
         },
-      '.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.iids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__leading-icon>.ids-icon':
+      '.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.ids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__leading-icon>.ids-icon':
         { color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-light-focused)' },
-      '.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.iids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__prefix':
+      '.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.ids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__prefix':
         { color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-focused)' },
-      '.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.iids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__infix .ids-form-field-control':
+      '.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.ids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__infix .ids-form-field-control':
         { color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-focused)' },
-      '.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.iids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__infix .ids-form-field-control .ids-icon':
+      '.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.ids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__infix .ids-form-field-control .ids-icon':
         { color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-icon-light-focused)' },
-      '.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.iids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__infix ::placeholder':
+      '.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.ids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__infix ::placeholder':
         { color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-focused)' },
-      '.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.iids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__suffix':
+      '.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.ids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__suffix':
         { color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-light-focused)' },
-      '.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.iids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__trailing-icon>.ids-icon':
+      '.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.ids-form-field-control:focus)>.ids-form-field__field-wrapper__container>.ids-form-field__trailing-icon>.ids-icon':
         { color: 'var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-light-focused)' },
-      '.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.iids-form-field-control:focus)>.ids-form-field__field-wrapper__action':
+      '.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.ids-form-field-control:focus)>.ids-form-field__field-wrapper__action':
         {
           borderLeftColor: 'var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-light-default)',
           background: 'var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-light-default)',

package/dist/datepicker/datepicker.css CHANGED Viewed

@@ -36,10 +36,6 @@
   cursor: pointer;
   outline-style: none;
 }
-.ids-calendar .ids-calendar-cell > .ids-calendar-button.ids-calendar-button-selected {
-  cursor: default;
-  pointer-events: none;
-}
 .ids-calendar .ids-calendar-cell > .ids-calendar-button.ids-calendar-button-today {
   border-style: solid;
 }

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

	@@ -1 +1 @@
1	- .ids-calendar{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0);line-height:1.5}.ids-calendar::before,.ids-calendar::after,.ids-calendar *,.ids-calendar ::before,.ids-calendar ::after{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0)}.ids-calendar{display:flex;flex-direction:column;background-color:#fff;border-width:1px;border-style:solid;border-color:#d3d3d3}.ids-calendar>.ids-calendar__header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.ids-calendar .ids-calendar-cell{display:flex;flex-direction:row;align-items:center;justify-content:center}.ids-calendar .ids-calendar-cell>.ids-calendar-button{cursor:pointer;outline-style:none}.ids-calendar .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-selected{cursor:default;pointer-events:none}.ids-calendar .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-today{border-style:solid}.ids-calendar .ids-calendar-cell>.ids-calendar-button:is(:focus,:focus-visible){outline-style:solid;outline-offset:2px}.ids-calendar .ids-calendar-cell>.ids-calendar-button:disabled{cursor:default}.ids-calendar.ids-calendar-compact{gap:var(--ids-comp-date-picker-size-gap-compact);padding:var(--ids-comp-date-picker-size-padding-y-compact) var(--ids-comp-date-picker-size-padding-x-compact)}.ids-calendar.ids-calendar-compact .ids-calendar-grid{column-gap:var(--ids-comp-date-picker-calendar-size-column-gap-compact);row-gap:var(--ids-comp-date-picker-calendar-size-row-gap-compact);padding:var(--ids-comp-date-picker-calendar-size-padding-y-compact) var(--ids-comp-date-picker-calendar-size-padding-x-compact)}.ids-calendar.ids-calendar-compact .ids-calendar-cell{border-radius:var(--ids-comp-date-picker-calendar-cell-size-border-radius-compact);border-width:var(--ids-comp-date-picker-calendar-cell-size-border-width-compact);min-height:var(--ids-comp-date-picker-calendar-cell-size-min-height-compact);min-width:var(--ids-comp-date-picker-calendar-cell-size-min-width-compact);padding:var(--ids-comp-date-picker-calendar-cell-size-padding-y-compact) var(--ids-comp-date-picker-calendar-cell-size-padding-x-compact)}.ids-calendar.ids-calendar-compact .ids-calendar-cell>.ids-calendar-weekday-label{font-family:var(--ids-comp-date-picker-calendar-days-typography-font-family-compact);font-size:var(--ids-comp-date-picker-calendar-days-typography-font-size-compact);font-weight:var(--ids-comp-date-picker-calendar-days-typography-font-weight-compact);letter-spacing:var(--ids-comp-date-picker-calendar-days-typography-letter-spacing-compact);line-height:var(--ids-comp-date-picker-calendar-days-typography-line-height-compact)}.ids-calendar.ids-calendar-compact .ids-calendar-cell>.ids-calendar-button{border-width:var(--ids-comp-date-picker-calendar-button-size-border-width-compact);border-radius:var(--ids-comp-date-picker-calendar-button-size-border-radius-compact);min-width:var(--ids-comp-date-picker-calendar-button-size-min-width-compact);height:var(--ids-comp-date-picker-calendar-button-size-height-compact);padding-left:var(--ids-comp-date-picker-calendar-button-size-padding-x-compact);padding-right:var(--ids-comp-date-picker-calendar-button-size-padding-x-compact);font-family:var(--ids-comp-date-picker-calendar-button-typography-font-family-compact);font-size:var(--ids-comp-date-picker-calendar-button-typography-font-size-compact);font-weight:var(--ids-comp-date-picker-calendar-button-typography-font-weight-compact);letter-spacing:var(--ids-comp-date-picker-calendar-button-typography-letter-spacing-compact);line-height:var(--ids-comp-date-picker-calendar-button-typography-line-height-compact)}.ids-calendar.ids-calendar-compact .ids-calendar-cell>.ids-calendar-button:is(:focus,:focus-visible){outline-width:var(--ids-comp-date-picker-focused-outline-size-outline-compact)}.ids-calendar.ids-calendar-comfortable{gap:var(--ids-comp-date-picker-size-gap-comfortable);padding:var(--ids-comp-date-picker-size-padding-y-comfortable) var(--ids-comp-date-picker-size-padding-x-comfortable)}.ids-calendar.ids-calendar-comfortable .ids-calendar-grid{column-gap:var(--ids-comp-date-picker-calendar-size-column-gap-comfortable);row-gap:var(--ids-comp-date-picker-calendar-size-row-gap-comfortable);padding:var(--ids-comp-date-picker-calendar-size-padding-y-comfortable) var(--ids-comp-date-picker-calendar-size-padding-x-comfortable)}.ids-calendar.ids-calendar-comfortable .ids-calendar-cell{border-radius:var(--ids-comp-date-picker-calendar-cell-size-border-radius-comfortable);border-width:var(--ids-comp-date-picker-calendar-cell-size-border-width-comfortable);min-height:var(--ids-comp-date-picker-calendar-cell-size-min-height-comfortable);min-width:var(--ids-comp-date-picker-calendar-cell-size-min-width-comfortable);padding:var(--ids-comp-date-picker-calendar-cell-size-padding-y-comfortable) var(--ids-comp-date-picker-calendar-cell-size-padding-x-comfortable)}.ids-calendar.ids-calendar-comfortable .ids-calendar-cell>.ids-calendar-weekday-label{font-family:var(--ids-comp-date-picker-calendar-days-typography-font-family-comfortable);font-size:var(--ids-comp-date-picker-calendar-days-typography-font-size-comfortable);font-weight:var(--ids-comp-date-picker-calendar-days-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-date-picker-calendar-days-typography-letter-spacing-comfortable);line-height:var(--ids-comp-date-picker-calendar-days-typography-line-height-comfortable)}.ids-calendar.ids-calendar-comfortable .ids-calendar-cell>.ids-calendar-button{border-width:var(--ids-comp-date-picker-calendar-button-size-border-width-comfortable);border-radius:var(--ids-comp-date-picker-calendar-button-size-border-radius-comfortable);min-width:var(--ids-comp-date-picker-calendar-button-size-min-width-comfortable);height:var(--ids-comp-date-picker-calendar-button-size-height-comfortable);padding-left:var(--ids-comp-date-picker-calendar-button-size-padding-x-comfortable);padding-right:var(--ids-comp-date-picker-calendar-button-size-padding-x-comfortable);font-family:var(--ids-comp-date-picker-calendar-button-typography-font-family-comfortable);font-size:var(--ids-comp-date-picker-calendar-button-typography-font-size-comfortable);font-weight:var(--ids-comp-date-picker-calendar-button-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-date-picker-calendar-button-typography-letter-spacing-comfortable);line-height:var(--ids-comp-date-picker-calendar-button-typography-line-height-comfortable)}.ids-calendar.ids-calendar-comfortable .ids-calendar-cell>.ids-calendar-button:is(:focus,:focus-visible){outline-width:var(--ids-comp-date-picker-focused-outline-size-outline-comfortable)}.ids-calendar.ids-calendar-spacious{gap:var(--ids-comp-date-picker-size-gap-spacious);padding:var(--ids-comp-date-picker-size-padding-y-spacious) var(--ids-comp-date-picker-size-padding-x-spacious)}.ids-calendar.ids-calendar-spacious .ids-calendar-grid{column-gap:var(--ids-comp-date-picker-calendar-size-column-gap-spacious);row-gap:var(--ids-comp-date-picker-calendar-size-row-gap-spacious);padding:var(--ids-comp-date-picker-calendar-size-padding-y-spacious) var(--ids-comp-date-picker-calendar-size-padding-x-spacious)}.ids-calendar.ids-calendar-spacious .ids-calendar-cell{border-radius:var(--ids-comp-date-picker-calendar-cell-size-border-radius-spacious);border-width:var(--ids-comp-date-picker-calendar-cell-size-border-width-spacious);min-height:var(--ids-comp-date-picker-calendar-cell-size-min-height-spacious);min-width:var(--ids-comp-date-picker-calendar-cell-size-min-width-spacious);padding:var(--ids-comp-date-picker-calendar-cell-size-padding-y-spacious) var(--ids-comp-date-picker-calendar-cell-size-padding-x-spacious)}.ids-calendar.ids-calendar-spacious .ids-calendar-cell>.ids-calendar-weekday-label{font-family:var(--ids-comp-date-picker-calendar-days-typography-font-family-spacious);font-size:var(--ids-comp-date-picker-calendar-days-typography-font-size-spacious);font-weight:var(--ids-comp-date-picker-calendar-days-typography-font-weight-spacious);letter-spacing:var(--ids-comp-date-picker-calendar-days-typography-letter-spacing-spacious);line-height:var(--ids-comp-date-picker-calendar-days-typography-line-height-spacious)}.ids-calendar.ids-calendar-spacious .ids-calendar-cell>.ids-calendar-button{border-width:var(--ids-comp-date-picker-calendar-button-size-border-width-spacious);border-radius:var(--ids-comp-date-picker-calendar-button-size-border-radius-spacious);min-width:var(--ids-comp-date-picker-calendar-button-size-min-width-spacious);height:var(--ids-comp-date-picker-calendar-button-size-height-spacious);padding-left:var(--ids-comp-date-picker-calendar-button-size-padding-x-spacious);padding-right:var(--ids-comp-date-picker-calendar-button-size-padding-x-spacious);font-family:var(--ids-comp-date-picker-calendar-button-typography-font-family-spacious);font-size:var(--ids-comp-date-picker-calendar-button-typography-font-size-spacious);font-weight:var(--ids-comp-date-picker-calendar-button-typography-font-weight-spacious);letter-spacing:var(--ids-comp-date-picker-calendar-button-typography-letter-spacing-spacious);line-height:var(--ids-comp-date-picker-calendar-button-typography-line-height-spacious)}.ids-calendar.ids-calendar-spacious .ids-calendar-cell>.ids-calendar-button:is(:focus,:focus-visible){outline-width:var(--ids-comp-date-picker-focused-outline-size-outline-spacious)}.ids-calendar.ids-calendar-dense{gap:var(--ids-comp-date-picker-size-gap-dense);padding:var(--ids-comp-date-picker-size-padding-y-dense) var(--ids-comp-date-picker-size-padding-x-dense)}.ids-calendar.ids-calendar-dense .ids-calendar-grid{column-gap:var(--ids-comp-date-picker-calendar-size-column-gap-dense);row-gap:var(--ids-comp-date-picker-calendar-size-row-gap-dense);padding:var(--ids-comp-date-picker-calendar-size-padding-y-dense) var(--ids-comp-date-picker-calendar-size-padding-x-dense)}.ids-calendar.ids-calendar-dense .ids-calendar-cell{border-radius:var(--ids-comp-date-picker-calendar-cell-size-border-radius-dense);border-width:var(--ids-comp-date-picker-calendar-cell-size-border-width-dense);min-height:var(--ids-comp-date-picker-calendar-cell-size-min-height-dense);min-width:var(--ids-comp-date-picker-calendar-cell-size-min-width-dense);padding:var(--ids-comp-date-picker-calendar-cell-size-padding-y-dense) var(--ids-comp-date-picker-calendar-cell-size-padding-x-dense)}.ids-calendar.ids-calendar-dense .ids-calendar-cell>.ids-calendar-weekday-label{font-family:var(--ids-comp-date-picker-calendar-days-typography-font-family-dense);font-size:var(--ids-comp-date-picker-calendar-days-typography-font-size-dense);font-weight:var(--ids-comp-date-picker-calendar-days-typography-font-weight-dense);letter-spacing:var(--ids-comp-date-picker-calendar-days-typography-letter-spacing-dense);line-height:var(--ids-comp-date-picker-calendar-days-typography-line-height-dense)}.ids-calendar.ids-calendar-dense .ids-calendar-cell>.ids-calendar-button{border-width:var(--ids-comp-date-picker-calendar-button-size-border-width-dense);border-radius:var(--ids-comp-date-picker-calendar-button-size-border-radius-dense);min-width:var(--ids-comp-date-picker-calendar-button-size-min-width-dense);height:var(--ids-comp-date-picker-calendar-button-size-height-dense);padding-left:var(--ids-comp-date-picker-calendar-button-size-padding-x-dense);padding-right:var(--ids-comp-date-picker-calendar-button-size-padding-x-dense);font-family:var(--ids-comp-date-picker-calendar-button-typography-font-family-dense);font-size:var(--ids-comp-date-picker-calendar-button-typography-font-size-dense);font-weight:var(--ids-comp-date-picker-calendar-button-typography-font-weight-dense);letter-spacing:var(--ids-comp-date-picker-calendar-button-typography-letter-spacing-dense);line-height:var(--ids-comp-date-picker-calendar-button-typography-line-height-dense)}.ids-calendar.ids-calendar-dense .ids-calendar-cell>.ids-calendar-button:is(:focus,:focus-visible){outline-width:var(--ids-comp-date-picker-focused-outline-size-outline-dense)}.ids-calendar.ids-calendar-surface .ids-calendar-cell{background-color:var(--ids-comp-date-picker-cell-unselected-color-bg-surface-default);border-color:var(--ids-comp-date-picker-cell-unselected-color-border-surface-default)}.ids-calendar.ids-calendar-surface .ids-calendar-cell.ids-calendar-cell-selected{background-color:var(--ids-comp-date-picker-cell-selected-color-bg-surface-default);border-color:var(--ids-comp-date-picker-cell-selected-color-border-surface-default)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-weekday-label{color:var(--ids-comp-date-picker-calendar-days-color-fg-surface-default);background-color:var(--ids-comp-date-picker-calendar-days-color-bg-surface-default);border-color:var(--ids-comp-date-picker-calendar-days-color-border-surface-default)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button{color:var(--ids-comp-date-picker-calendar-button-unselected-color-fg-surface-default);background-color:var(--ids-comp-date-picker-calendar-button-unselected-color-bg-surface-default);border-color:var(--ids-comp-date-picker-calendar-button-unselected-color-border-surface-default)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button:hover{color:var(--ids-comp-date-picker-calendar-button-unselected-color-fg-surface-hovered);background-color:var(--ids-comp-date-picker-calendar-button-unselected-color-bg-surface-hovered);border-color:var(--ids-comp-date-picker-calendar-button-unselected-color-border-surface-hovered)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button:active{color:var(--ids-comp-date-picker-calendar-button-unselected-color-fg-surface-pressed);background-color:var(--ids-comp-date-picker-calendar-button-unselected-color-bg-surface-pressed);border-color:var(--ids-comp-date-picker-calendar-button-unselected-color-border-surface-pressed)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button:disabled{color:var(--ids-comp-date-picker-calendar-button-unselected-color-fg-surface-disabled);background-color:var(--ids-comp-date-picker-calendar-button-unselected-color-bg-surface-disabled);border-color:var(--ids-comp-date-picker-calendar-button-unselected-color-border-surface-disabled)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-today{color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-fg-surface-default);background-color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-bg-surface-default);border-color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-border-surface-default)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-today:hover{color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-fg-surface-hovered);background-color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-bg-surface-hovered);border-color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-border-surface-hovered)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-today:active{color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-fg-surface-pressed);background-color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-bg-surface-pressed);border-color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-border-surface-pressed)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-today:disabled{color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-fg-surface-disabled);background-color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-bg-surface-disabled);border-color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-border-surface-disabled)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-selected{color:var(--ids-comp-date-picker-calendar-button-selected-color-fg-surface-default);background-color:var(--ids-comp-date-picker-calendar-button-selected-color-bg-surface-default);border-color:var(--ids-comp-date-picker-calendar-button-selected-color-border-surface-default)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-selected:hover{color:var(--ids-comp-date-picker-calendar-button-selected-color-fg-surface-hovered);background-color:var(--ids-comp-date-picker-calendar-button-selected-color-bg-surface-hovered);border-color:var(--ids-comp-date-picker-calendar-button-selected-color-border-surface-hovered)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-selected:active{color:var(--ids-comp-date-picker-calendar-button-selected-color-fg-surface-pressed);background-color:var(--ids-comp-date-picker-calendar-button-selected-color-bg-surface-pressed);border-color:var(--ids-comp-date-picker-calendar-button-selected-color-border-surface-pressed)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-selected:disabled{color:var(--ids-comp-date-picker-calendar-button-selected-color-fg-surface-disabled);background-color:var(--ids-comp-date-picker-calendar-button-selected-color-bg-surface-disabled);border-color:var(--ids-comp-date-picker-calendar-button-selected-color-border-surface-disabled)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button:is(:focus,:focus-visible){outline-color:var(--ids-comp-date-picker-focused-outline-color-dark)}.ids-year-selector>.ids-year-selector__years-grid{display:grid;grid-template-columns:repeat(4, 1fr);align-items:center;justify-items:center}.ids-month-selector>.ids-month-selector__months-grid{display:grid;grid-template-columns:repeat(4, 1fr);align-items:center;justify-items:center}.ids-day-selector>.ids-day-selector__days-grid{display:grid;grid-template-columns:repeat(7, 1fr)}
1	+ .ids-calendar{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0);line-height:1.5}.ids-calendar::before,.ids-calendar::after,.ids-calendar *,.ids-calendar ::before,.ids-calendar ::after{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0)}.ids-calendar{display:flex;flex-direction:column;background-color:#fff;border-width:1px;border-style:solid;border-color:#d3d3d3}.ids-calendar>.ids-calendar__header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.ids-calendar .ids-calendar-cell{display:flex;flex-direction:row;align-items:center;justify-content:center}.ids-calendar .ids-calendar-cell>.ids-calendar-button{cursor:pointer;outline-style:none}.ids-calendar .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-today{border-style:solid}.ids-calendar .ids-calendar-cell>.ids-calendar-button:is(:focus,:focus-visible){outline-style:solid;outline-offset:2px}.ids-calendar .ids-calendar-cell>.ids-calendar-button:disabled{cursor:default}.ids-calendar.ids-calendar-compact{gap:var(--ids-comp-date-picker-size-gap-compact);padding:var(--ids-comp-date-picker-size-padding-y-compact) var(--ids-comp-date-picker-size-padding-x-compact)}.ids-calendar.ids-calendar-compact .ids-calendar-grid{column-gap:var(--ids-comp-date-picker-calendar-size-column-gap-compact);row-gap:var(--ids-comp-date-picker-calendar-size-row-gap-compact);padding:var(--ids-comp-date-picker-calendar-size-padding-y-compact) var(--ids-comp-date-picker-calendar-size-padding-x-compact)}.ids-calendar.ids-calendar-compact .ids-calendar-cell{border-radius:var(--ids-comp-date-picker-calendar-cell-size-border-radius-compact);border-width:var(--ids-comp-date-picker-calendar-cell-size-border-width-compact);min-height:var(--ids-comp-date-picker-calendar-cell-size-min-height-compact);min-width:var(--ids-comp-date-picker-calendar-cell-size-min-width-compact);padding:var(--ids-comp-date-picker-calendar-cell-size-padding-y-compact) var(--ids-comp-date-picker-calendar-cell-size-padding-x-compact)}.ids-calendar.ids-calendar-compact .ids-calendar-cell>.ids-calendar-weekday-label{font-family:var(--ids-comp-date-picker-calendar-days-typography-font-family-compact);font-size:var(--ids-comp-date-picker-calendar-days-typography-font-size-compact);font-weight:var(--ids-comp-date-picker-calendar-days-typography-font-weight-compact);letter-spacing:var(--ids-comp-date-picker-calendar-days-typography-letter-spacing-compact);line-height:var(--ids-comp-date-picker-calendar-days-typography-line-height-compact)}.ids-calendar.ids-calendar-compact .ids-calendar-cell>.ids-calendar-button{border-width:var(--ids-comp-date-picker-calendar-button-size-border-width-compact);border-radius:var(--ids-comp-date-picker-calendar-button-size-border-radius-compact);min-width:var(--ids-comp-date-picker-calendar-button-size-min-width-compact);height:var(--ids-comp-date-picker-calendar-button-size-height-compact);padding-left:var(--ids-comp-date-picker-calendar-button-size-padding-x-compact);padding-right:var(--ids-comp-date-picker-calendar-button-size-padding-x-compact);font-family:var(--ids-comp-date-picker-calendar-button-typography-font-family-compact);font-size:var(--ids-comp-date-picker-calendar-button-typography-font-size-compact);font-weight:var(--ids-comp-date-picker-calendar-button-typography-font-weight-compact);letter-spacing:var(--ids-comp-date-picker-calendar-button-typography-letter-spacing-compact);line-height:var(--ids-comp-date-picker-calendar-button-typography-line-height-compact)}.ids-calendar.ids-calendar-compact .ids-calendar-cell>.ids-calendar-button:is(:focus,:focus-visible){outline-width:var(--ids-comp-date-picker-focused-outline-size-outline-compact)}.ids-calendar.ids-calendar-comfortable{gap:var(--ids-comp-date-picker-size-gap-comfortable);padding:var(--ids-comp-date-picker-size-padding-y-comfortable) var(--ids-comp-date-picker-size-padding-x-comfortable)}.ids-calendar.ids-calendar-comfortable .ids-calendar-grid{column-gap:var(--ids-comp-date-picker-calendar-size-column-gap-comfortable);row-gap:var(--ids-comp-date-picker-calendar-size-row-gap-comfortable);padding:var(--ids-comp-date-picker-calendar-size-padding-y-comfortable) var(--ids-comp-date-picker-calendar-size-padding-x-comfortable)}.ids-calendar.ids-calendar-comfortable .ids-calendar-cell{border-radius:var(--ids-comp-date-picker-calendar-cell-size-border-radius-comfortable);border-width:var(--ids-comp-date-picker-calendar-cell-size-border-width-comfortable);min-height:var(--ids-comp-date-picker-calendar-cell-size-min-height-comfortable);min-width:var(--ids-comp-date-picker-calendar-cell-size-min-width-comfortable);padding:var(--ids-comp-date-picker-calendar-cell-size-padding-y-comfortable) var(--ids-comp-date-picker-calendar-cell-size-padding-x-comfortable)}.ids-calendar.ids-calendar-comfortable .ids-calendar-cell>.ids-calendar-weekday-label{font-family:var(--ids-comp-date-picker-calendar-days-typography-font-family-comfortable);font-size:var(--ids-comp-date-picker-calendar-days-typography-font-size-comfortable);font-weight:var(--ids-comp-date-picker-calendar-days-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-date-picker-calendar-days-typography-letter-spacing-comfortable);line-height:var(--ids-comp-date-picker-calendar-days-typography-line-height-comfortable)}.ids-calendar.ids-calendar-comfortable .ids-calendar-cell>.ids-calendar-button{border-width:var(--ids-comp-date-picker-calendar-button-size-border-width-comfortable);border-radius:var(--ids-comp-date-picker-calendar-button-size-border-radius-comfortable);min-width:var(--ids-comp-date-picker-calendar-button-size-min-width-comfortable);height:var(--ids-comp-date-picker-calendar-button-size-height-comfortable);padding-left:var(--ids-comp-date-picker-calendar-button-size-padding-x-comfortable);padding-right:var(--ids-comp-date-picker-calendar-button-size-padding-x-comfortable);font-family:var(--ids-comp-date-picker-calendar-button-typography-font-family-comfortable);font-size:var(--ids-comp-date-picker-calendar-button-typography-font-size-comfortable);font-weight:var(--ids-comp-date-picker-calendar-button-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-date-picker-calendar-button-typography-letter-spacing-comfortable);line-height:var(--ids-comp-date-picker-calendar-button-typography-line-height-comfortable)}.ids-calendar.ids-calendar-comfortable .ids-calendar-cell>.ids-calendar-button:is(:focus,:focus-visible){outline-width:var(--ids-comp-date-picker-focused-outline-size-outline-comfortable)}.ids-calendar.ids-calendar-spacious{gap:var(--ids-comp-date-picker-size-gap-spacious);padding:var(--ids-comp-date-picker-size-padding-y-spacious) var(--ids-comp-date-picker-size-padding-x-spacious)}.ids-calendar.ids-calendar-spacious .ids-calendar-grid{column-gap:var(--ids-comp-date-picker-calendar-size-column-gap-spacious);row-gap:var(--ids-comp-date-picker-calendar-size-row-gap-spacious);padding:var(--ids-comp-date-picker-calendar-size-padding-y-spacious) var(--ids-comp-date-picker-calendar-size-padding-x-spacious)}.ids-calendar.ids-calendar-spacious .ids-calendar-cell{border-radius:var(--ids-comp-date-picker-calendar-cell-size-border-radius-spacious);border-width:var(--ids-comp-date-picker-calendar-cell-size-border-width-spacious);min-height:var(--ids-comp-date-picker-calendar-cell-size-min-height-spacious);min-width:var(--ids-comp-date-picker-calendar-cell-size-min-width-spacious);padding:var(--ids-comp-date-picker-calendar-cell-size-padding-y-spacious) var(--ids-comp-date-picker-calendar-cell-size-padding-x-spacious)}.ids-calendar.ids-calendar-spacious .ids-calendar-cell>.ids-calendar-weekday-label{font-family:var(--ids-comp-date-picker-calendar-days-typography-font-family-spacious);font-size:var(--ids-comp-date-picker-calendar-days-typography-font-size-spacious);font-weight:var(--ids-comp-date-picker-calendar-days-typography-font-weight-spacious);letter-spacing:var(--ids-comp-date-picker-calendar-days-typography-letter-spacing-spacious);line-height:var(--ids-comp-date-picker-calendar-days-typography-line-height-spacious)}.ids-calendar.ids-calendar-spacious .ids-calendar-cell>.ids-calendar-button{border-width:var(--ids-comp-date-picker-calendar-button-size-border-width-spacious);border-radius:var(--ids-comp-date-picker-calendar-button-size-border-radius-spacious);min-width:var(--ids-comp-date-picker-calendar-button-size-min-width-spacious);height:var(--ids-comp-date-picker-calendar-button-size-height-spacious);padding-left:var(--ids-comp-date-picker-calendar-button-size-padding-x-spacious);padding-right:var(--ids-comp-date-picker-calendar-button-size-padding-x-spacious);font-family:var(--ids-comp-date-picker-calendar-button-typography-font-family-spacious);font-size:var(--ids-comp-date-picker-calendar-button-typography-font-size-spacious);font-weight:var(--ids-comp-date-picker-calendar-button-typography-font-weight-spacious);letter-spacing:var(--ids-comp-date-picker-calendar-button-typography-letter-spacing-spacious);line-height:var(--ids-comp-date-picker-calendar-button-typography-line-height-spacious)}.ids-calendar.ids-calendar-spacious .ids-calendar-cell>.ids-calendar-button:is(:focus,:focus-visible){outline-width:var(--ids-comp-date-picker-focused-outline-size-outline-spacious)}.ids-calendar.ids-calendar-dense{gap:var(--ids-comp-date-picker-size-gap-dense);padding:var(--ids-comp-date-picker-size-padding-y-dense) var(--ids-comp-date-picker-size-padding-x-dense)}.ids-calendar.ids-calendar-dense .ids-calendar-grid{column-gap:var(--ids-comp-date-picker-calendar-size-column-gap-dense);row-gap:var(--ids-comp-date-picker-calendar-size-row-gap-dense);padding:var(--ids-comp-date-picker-calendar-size-padding-y-dense) var(--ids-comp-date-picker-calendar-size-padding-x-dense)}.ids-calendar.ids-calendar-dense .ids-calendar-cell{border-radius:var(--ids-comp-date-picker-calendar-cell-size-border-radius-dense);border-width:var(--ids-comp-date-picker-calendar-cell-size-border-width-dense);min-height:var(--ids-comp-date-picker-calendar-cell-size-min-height-dense);min-width:var(--ids-comp-date-picker-calendar-cell-size-min-width-dense);padding:var(--ids-comp-date-picker-calendar-cell-size-padding-y-dense) var(--ids-comp-date-picker-calendar-cell-size-padding-x-dense)}.ids-calendar.ids-calendar-dense .ids-calendar-cell>.ids-calendar-weekday-label{font-family:var(--ids-comp-date-picker-calendar-days-typography-font-family-dense);font-size:var(--ids-comp-date-picker-calendar-days-typography-font-size-dense);font-weight:var(--ids-comp-date-picker-calendar-days-typography-font-weight-dense);letter-spacing:var(--ids-comp-date-picker-calendar-days-typography-letter-spacing-dense);line-height:var(--ids-comp-date-picker-calendar-days-typography-line-height-dense)}.ids-calendar.ids-calendar-dense .ids-calendar-cell>.ids-calendar-button{border-width:var(--ids-comp-date-picker-calendar-button-size-border-width-dense);border-radius:var(--ids-comp-date-picker-calendar-button-size-border-radius-dense);min-width:var(--ids-comp-date-picker-calendar-button-size-min-width-dense);height:var(--ids-comp-date-picker-calendar-button-size-height-dense);padding-left:var(--ids-comp-date-picker-calendar-button-size-padding-x-dense);padding-right:var(--ids-comp-date-picker-calendar-button-size-padding-x-dense);font-family:var(--ids-comp-date-picker-calendar-button-typography-font-family-dense);font-size:var(--ids-comp-date-picker-calendar-button-typography-font-size-dense);font-weight:var(--ids-comp-date-picker-calendar-button-typography-font-weight-dense);letter-spacing:var(--ids-comp-date-picker-calendar-button-typography-letter-spacing-dense);line-height:var(--ids-comp-date-picker-calendar-button-typography-line-height-dense)}.ids-calendar.ids-calendar-dense .ids-calendar-cell>.ids-calendar-button:is(:focus,:focus-visible){outline-width:var(--ids-comp-date-picker-focused-outline-size-outline-dense)}.ids-calendar.ids-calendar-surface .ids-calendar-cell{background-color:var(--ids-comp-date-picker-cell-unselected-color-bg-surface-default);border-color:var(--ids-comp-date-picker-cell-unselected-color-border-surface-default)}.ids-calendar.ids-calendar-surface .ids-calendar-cell.ids-calendar-cell-selected{background-color:var(--ids-comp-date-picker-cell-selected-color-bg-surface-default);border-color:var(--ids-comp-date-picker-cell-selected-color-border-surface-default)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-weekday-label{color:var(--ids-comp-date-picker-calendar-days-color-fg-surface-default);background-color:var(--ids-comp-date-picker-calendar-days-color-bg-surface-default);border-color:var(--ids-comp-date-picker-calendar-days-color-border-surface-default)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button{color:var(--ids-comp-date-picker-calendar-button-unselected-color-fg-surface-default);background-color:var(--ids-comp-date-picker-calendar-button-unselected-color-bg-surface-default);border-color:var(--ids-comp-date-picker-calendar-button-unselected-color-border-surface-default)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button:hover{color:var(--ids-comp-date-picker-calendar-button-unselected-color-fg-surface-hovered);background-color:var(--ids-comp-date-picker-calendar-button-unselected-color-bg-surface-hovered);border-color:var(--ids-comp-date-picker-calendar-button-unselected-color-border-surface-hovered)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button:active{color:var(--ids-comp-date-picker-calendar-button-unselected-color-fg-surface-pressed);background-color:var(--ids-comp-date-picker-calendar-button-unselected-color-bg-surface-pressed);border-color:var(--ids-comp-date-picker-calendar-button-unselected-color-border-surface-pressed)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button:disabled{color:var(--ids-comp-date-picker-calendar-button-unselected-color-fg-surface-disabled);background-color:var(--ids-comp-date-picker-calendar-button-unselected-color-bg-surface-disabled);border-color:var(--ids-comp-date-picker-calendar-button-unselected-color-border-surface-disabled)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-today{color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-fg-surface-default);background-color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-bg-surface-default);border-color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-border-surface-default)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-today:hover{color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-fg-surface-hovered);background-color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-bg-surface-hovered);border-color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-border-surface-hovered)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-today:active{color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-fg-surface-pressed);background-color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-bg-surface-pressed);border-color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-border-surface-pressed)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-today:disabled{color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-fg-surface-disabled);background-color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-bg-surface-disabled);border-color:var(--ids-comp-date-picker-calendar-button-unselected-current-date-color-border-surface-disabled)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-selected{color:var(--ids-comp-date-picker-calendar-button-selected-color-fg-surface-default);background-color:var(--ids-comp-date-picker-calendar-button-selected-color-bg-surface-default);border-color:var(--ids-comp-date-picker-calendar-button-selected-color-border-surface-default)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-selected:hover{color:var(--ids-comp-date-picker-calendar-button-selected-color-fg-surface-hovered);background-color:var(--ids-comp-date-picker-calendar-button-selected-color-bg-surface-hovered);border-color:var(--ids-comp-date-picker-calendar-button-selected-color-border-surface-hovered)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-selected:active{color:var(--ids-comp-date-picker-calendar-button-selected-color-fg-surface-pressed);background-color:var(--ids-comp-date-picker-calendar-button-selected-color-bg-surface-pressed);border-color:var(--ids-comp-date-picker-calendar-button-selected-color-border-surface-pressed)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-selected:disabled{color:var(--ids-comp-date-picker-calendar-button-selected-color-fg-surface-disabled);background-color:var(--ids-comp-date-picker-calendar-button-selected-color-bg-surface-disabled);border-color:var(--ids-comp-date-picker-calendar-button-selected-color-border-surface-disabled)}.ids-calendar.ids-calendar-surface .ids-calendar-cell>.ids-calendar-button:is(:focus,:focus-visible){outline-color:var(--ids-comp-date-picker-focused-outline-color-dark)}.ids-year-selector>.ids-year-selector__years-grid{display:grid;grid-template-columns:repeat(4, 1fr);align-items:center;justify-items:center}.ids-month-selector>.ids-month-selector__months-grid{display:grid;grid-template-columns:repeat(4, 1fr);align-items:center;justify-items:center}.ids-day-selector>.ids-day-selector__days-grid{display:grid;grid-template-columns:repeat(7, 1fr)}

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

@@ -26,7 +26,6 @@ module.exports = function DatepickerPlugin() {
       },
       '.ids-calendar .ids-calendar-cell': { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' },
       '.ids-calendar .ids-calendar-cell>.ids-calendar-button': { cursor: 'pointer', outlineStyle: 'none' },
-      '.ids-calendar .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-selected': { cursor: 'default', pointerEvents: 'none' },
       '.ids-calendar .ids-calendar-cell>.ids-calendar-button.ids-calendar-button-today': { borderStyle: 'solid' },
       '.ids-calendar .ids-calendar-cell>.ids-calendar-button:is(:focus,:focus-visible)': { outlineStyle: 'solid', outlineOffset: '2px' },
       '.ids-calendar .ids-calendar-cell>.ids-calendar-button:disabled': { cursor: 'default' },

package/dist/form-elements/form-field/form-field.css CHANGED Viewed

@@ -422,33 +422,33 @@
   border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-surface-default);
   background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-surface-default);
 }
-.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) {
+.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) {
   border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-focused);
   background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-focused);
   outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused);
 }
-.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon > .ids-icon {
+.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon > .ids-icon {
   color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-surface-focused);
 }
-.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
+.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
   color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-focused);
 }
-.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
+.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
   color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-focused);
 }
-.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control .ids-icon {
+.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control .ids-icon {
   color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-icon-surface-focused);
 }
-.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
+.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
   color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-focused);
 }
-.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
+.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
   color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-surface-focused);
 }
-.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon > .ids-icon {
+.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon > .ids-icon {
   color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-surface-focused);
 }
-.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__action {
+.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__action {
   border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-surface-default);
   background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-surface-default);
 }
@@ -814,33 +814,33 @@
   border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-light-default);
   background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-light-default);
 }
-.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) {
+.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) {
   border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-light-focused);
   background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-light-focused);
   outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-light-focused);
 }
-.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon > .ids-icon {
+.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon > .ids-icon {
   color: var(--ids-comp-forms-form-field-standard-field-wrapper-leading-icon-color-fg-light-focused);
 }
-.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
+.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
   color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-focused);
 }
-.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
+.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control {
   color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-focused);
 }
-.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control .ids-icon {
+.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix .ids-form-field-control .ids-icon {
   color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-icon-light-focused);
 }
-.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
+.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
   color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-focused);
 }
-.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
+.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
   color: var(--ids-comp-forms-form-field-standard-field-wrapper-suffix-color-fg-light-focused);
 }
-.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon > .ids-icon {
+.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon > .ids-icon {
   color: var(--ids-comp-forms-form-field-standard-field-wrapper-trailing-icon-color-fg-light-focused);
 }
-.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.iids-form-field-control:focus) > .ids-form-field__field-wrapper__action {
+.ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) > .ids-form-field__field-wrapper__action {
   border-left-color: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-border-light-default);
   background: var(--ids-comp-forms-form-field-standard-field-wrapper-action-color-bg-light-default);
 }