@i-cell/ids-styles 0.0.62 → 0.0.64

package/dist/components.plugin.js

@@ -327,8 +327,6 @@ module.exports = function ComponentsPlugin() {
         borderStyle: 'none',
         borderColor: 'rgba(0,0,0,0)',
         lineHeight: 1.5,
-        display: 'inline-flex',
-        alignItems: 'center',
       },
       '.ids-autocomplete::before,.ids-autocomplete::after,.ids-autocomplete *,.ids-autocomplete ::before,.ids-autocomplete ::after': {
         boxSizing: 'border-box',
@@ -336,27 +334,47 @@ module.exports = function ComponentsPlugin() {
         borderStyle: 'none',
         borderColor: 'rgba(0,0,0,0)',
       },
-      '.ids-autocomplete>input': { textOverflow: 'ellipsis' },
-      '.ids-autocomplete>ids-overlay-panel': { display: 'none' },
-      '.ids-autocomplete.ids-autocomplete-compact': {
-        gap: 'var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-compact)',
-      },
-      '.ids-autocomplete.ids-autocomplete-comfortable': {
-        gap: 'var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-comfortable)',
-      },
-      '.ids-autocomplete.ids-autocomplete-spacious': {
-        gap: 'var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-spacious)',
-      },
-      '.ids-autocomplete.ids-autocomplete-dense': {
-        gap: 'var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-dense)',
-      },
-      '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(.ids-autocomplete)':
-        { overflowX: 'visible' },
-      '.ids-overlay-panel__autocomplete-panel': { width: '100%' },
-      '.ids-overlay-panel__autocomplete-panel .ids-overlay-panel__autocomplete-message>.ids-option': { width: '100%' },
-      '.ids-overlay-panel__autocomplete-panel .ids-overlay-panel__autocomplete-message>.ids-option:is([disabled])': {
-        outlineStyle: 'none',
-      },
+      '.ids-autocomplete-panel': { overflow: 'auto', width: '100%', padding: '8px', scrollbarWidth: 'thin' },
+      '.ids-autocomplete-overlay-panel': { width: '100%' },
+      '.ids-autocomplete-suffix': { display: 'flex', alignItems: 'center' },
+      '.ids-autocomplete-chip-list': { display: 'flex', flexWrap: 'wrap', gap: '4px', marginBottom: '4px' },
+      '.ids-autocomplete-chip-list:not(:has(button:first-child))': { display: 'none' },
+      '.ids-autocomplete-chip-list button[idsChip].ids-chip': { borderStyle: 'solid !important' },
+      '.ids-autocomplete-chip-list button[idsChip].ids-chip>div.ids-chip__label': {
+        textAlign: 'left',
+        wordBreak: 'break-all',
+        overflow: 'hidden',
+        display: '-webkit-box',
+        lineClamp: 1,
+        WebkitBoxOrient: 'vertical',
+        WebkitLineClamp: '1',
+      },
+      '.ids-autocomplete-hint__wrapper': { padding: '8px 12px' },
+      '.ids-autocomplete.ids-autocomplete-compact>.ids-autocomplete-suffix': { gap: 'var(--ids-comp-forms-input-size-icons-gap-compact)' },
+      '.ids-autocomplete.ids-autocomplete-comfortable>.ids-autocomplete-suffix': {
+        gap: 'var(--ids-comp-forms-input-size-icons-gap-comfortable)',
+      },
+      '.ids-autocomplete.ids-autocomplete-spacious>.ids-autocomplete-suffix': {
+        gap: 'var(--ids-comp-forms-input-size-icons-gap-spacious)',
+      },
+      '.ids-autocomplete.ids-autocomplete-dense>.ids-autocomplete-suffix': { gap: 'var(--ids-comp-forms-input-size-icons-gap-dense)' },
+      'input[autocomplete]': { width: '100%', textOverflow: 'ellipsis' },
+      '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete])':
+        { width: '100%', display: 'inline-flex', alignItems: 'center' },
+      '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]):has(.ids-autocomplete-chip-list>button:first-child)':
+        { display: 'grid', gridTemplateColumns: '1fr auto' },
+      '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]):has(.ids-autocomplete-chip-list>button:first-child)>input[autocomplete]':
+        { order: 3 },
+      '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]):has(.ids-autocomplete-chip-list>button:first-child)>.ids-autocomplete':
+        { order: 2, gridRow: 'span 2/span 1' },
+      '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]~.ids-autocomplete-compact)':
+        { columnGap: 'var(--ids-comp-forms-input-size-gap-compact)' },
+      '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]~.ids-autocomplete-comfortable)':
+        { columnGap: 'var(--ids-comp-forms-input-size-gap-comfortable)' },
+      '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]~.ids-autocomplete-spacious)':
+        { columnGap: 'var(--ids-comp-forms-input-size-gap-spacious)' },
+      '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]~.ids-autocomplete-dense)':
+        { columnGap: 'var(--ids-comp-forms-input-size-gap-dense)' },
       '.ids-avatar': {
         boxSizing: 'border-box',
         borderWidth: '0',
@@ -6101,6 +6119,11 @@ module.exports = function ComponentsPlugin() {
       '.ids-form-field.ids-form-field-dense>.ids-form-field__field-wrapper:has(.ids-form-field-control:focus)': {
         outlineWidth: 'var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-dense)',
       },
+      '.ids-form-field:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.ids-input)': { cursor: 'text' },
+      '.ids-form-field.ids-form-field-disabled>.ids-form-field__field-wrapper:has(.ids-input)': {
+        cursor: 'default',
+        pointerEvents: 'none',
+      },
       '.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper': {
         borderColor: 'var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-default)',
         background: 'var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-default)',

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

@@ -364,6 +364,13 @@
 .ids-form-field.ids-form-field-dense > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) {
   outline-width: var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-dense);
 }
+.ids-form-field:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-input) {
+  cursor: text;
+}
+.ids-form-field.ids-form-field-disabled > .ids-form-field__field-wrapper:has(.ids-input) {
+  cursor: default;
+  pointer-events: none;
+}
 .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper {
   border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-default);
   background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-default);