From e0a662f6e9dc31d6109be0aab555889d01318c33 Mon Sep 17 00:00:00 2001 From: sivanova Date: Tue, 30 Sep 2025 13:56:43 +0300 Subject: [PATCH 01/12] refactor(input-group): design updates --- src/components/combo/themes/combo.base.scss | 15 +++++--------- .../combo/themes/shared/combo.fluent.scss | 2 -- .../combo/themes/shared/combo.indigo.scss | 2 -- .../combo/themes/shared/combo.material.scss | 4 +--- .../date-picker/themes/date-picker.base.scss | 7 ++++++- .../themes/shared/date-picker.bootstrap.scss | 3 --- .../themes/shared/date-picker.common.scss | 3 --- .../themes/shared/date-picker.fluent.scss | 4 ---- .../themes/shared/date-picker.indigo.scss | 10 ++++++---- .../themes/shared/date-picker.material.scss | 6 ++++++ .../date-range-picker.base.scss | 5 +++++ .../shared/date-range-picker.bootstrap.scss | 3 --- .../shared/date-range-picker.common.scss | 3 --- .../shared/date-range-picker.fluent.scss | 4 ---- .../shared/date-range-picker.indigo.scss | 10 ++++++---- .../shared/date-range-picker.material.scss | 6 ++++++ src/components/input/themes/input.base.scss | 5 +++++ .../input/themes/shared/input.bootstrap.scss | 6 ++---- .../input/themes/shared/input.common.scss | 7 +++++++ .../input/themes/shared/input.fluent.scss | 5 +---- .../input/themes/shared/input.indigo.scss | 6 +----- .../input/themes/shared/input.material.scss | 8 ++------ src/components/select/themes/select.base.scss | 5 +++++ .../select/themes/shared/select.fluent.scss | 2 -- .../select/themes/shared/select.indigo.scss | 2 -- .../select/themes/shared/select.material.scss | 4 +--- .../themes/shared/textarea.bootstrap.scss | 8 +++----- .../themes/shared/textarea.common.scss | 7 +++++++ .../themes/shared/textarea.fluent.scss | 8 +++----- .../themes/shared/textarea.indigo.scss | 8 ++------ .../themes/shared/textarea.material.scss | 20 ++++++++++--------- .../textarea/themes/textarea.base.scss | 5 +++++ 32 files changed, 96 insertions(+), 97 deletions(-) diff --git a/src/components/combo/themes/combo.base.scss b/src/components/combo/themes/combo.base.scss index 2a211866e..733e7c8b0 100644 --- a/src/components/combo/themes/combo.base.scss +++ b/src/components/combo/themes/combo.base.scss @@ -19,6 +19,11 @@ text-overflow: ellipsis; cursor: pointer; } + + ::part(helper-text) { + @include type-style('caption'); + @include line-clamp(2, true, true); + } } :host(:not([single-select])) { @@ -29,16 +34,6 @@ } } -[part='helper-text'] { - line-height: 1; - - ::slotted([slot='helper-text']) { - @include type-style('caption'); - - line-height: inherit; - } -} - [part='clear-icon'], [part='toggle-icon'], [part~='case-icon'] { diff --git a/src/components/combo/themes/shared/combo.fluent.scss b/src/components/combo/themes/shared/combo.fluent.scss index 7259142bf..1ad9e489d 100644 --- a/src/components/combo/themes/shared/combo.fluent.scss +++ b/src/components/combo/themes/shared/combo.fluent.scss @@ -10,8 +10,6 @@ $dropdown-theme: dropdown-theme.$fluent; --combo-size: var(--component-size); ::part(helper-text) { - @include type-style('caption'); - margin-block-start: pad-block(rem(5px)); grid-auto-rows: minmax(rem(18px), auto); } diff --git a/src/components/combo/themes/shared/combo.indigo.scss b/src/components/combo/themes/shared/combo.indigo.scss index 87a9dc3bf..5d5c7f535 100644 --- a/src/components/combo/themes/shared/combo.indigo.scss +++ b/src/components/combo/themes/shared/combo.indigo.scss @@ -17,8 +17,6 @@ $dropdown-theme: dropdown-theme.$indigo; } ::part(helper-text) { - @include type-style('caption'); - margin-block-start: pad-block(rem(4px)); grid-auto-rows: minmax(rem(15px), auto); } diff --git a/src/components/combo/themes/shared/combo.material.scss b/src/components/combo/themes/shared/combo.material.scss index 2ee082908..ae0477e5d 100644 --- a/src/components/combo/themes/shared/combo.material.scss +++ b/src/components/combo/themes/shared/combo.material.scss @@ -12,11 +12,9 @@ $dropdown-theme: dropdown-theme.$material; --combo-size: var(--component-size); ::part(helper-text) { - @include type-style('caption'); - margin-block-start: pad-block(rem(4px)); grid-auto-rows: minmax(rem(18px), auto); - padding-inline: pad-inline(rem(14px), rem(16px), rem(18px)); + padding-inline: pad-inline(rem(12px), rem(14px), rem(16px)); } ::slotted([slot='prefix']), diff --git a/src/components/date-picker/themes/date-picker.base.scss b/src/components/date-picker/themes/date-picker.base.scss index 0f583cd68..0001cf3b3 100644 --- a/src/components/date-picker/themes/date-picker.base.scss +++ b/src/components/date-picker/themes/date-picker.base.scss @@ -22,6 +22,11 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; } + + ::part(helper-text) { + @include type-style('caption'); + @include line-clamp(2, true, true); + } } :host([required]) { @@ -31,7 +36,7 @@ } [part='label'] { - display: inline-block; + display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; diff --git a/src/components/date-picker/themes/shared/date-picker.bootstrap.scss b/src/components/date-picker/themes/shared/date-picker.bootstrap.scss index 4b9bf7cf7..36f7d1354 100644 --- a/src/components/date-picker/themes/shared/date-picker.bootstrap.scss +++ b/src/components/date-picker/themes/shared/date-picker.bootstrap.scss @@ -25,10 +25,7 @@ $theme: $bootstrap; ::part(helper-text) { @include type-style('body-2'); - color: var-get($theme, 'helper-text-color'); grid-auto-rows: minmax(rem(20px), auto); - padding-inline-start: 0; - margin-block-start: pad-block(rem(4px)); } } diff --git a/src/components/date-picker/themes/shared/date-picker.common.scss b/src/components/date-picker/themes/shared/date-picker.common.scss index 9f0e1110f..ebd0cd660 100644 --- a/src/components/date-picker/themes/shared/date-picker.common.scss +++ b/src/components/date-picker/themes/shared/date-picker.common.scss @@ -57,12 +57,9 @@ $input-theme: input-theme.$material; } ::part(helper-text) { - @include type-style('caption'); - color: var-get($theme, 'helper-text-color'); grid-auto-rows: minmax(rem(18px), auto); margin-block-start: pad-block(rem(4px)); - padding-inline: pad-inline(rem(14px), rem(16px), rem(18px)); } } diff --git a/src/components/date-picker/themes/shared/date-picker.fluent.scss b/src/components/date-picker/themes/shared/date-picker.fluent.scss index 6392fb5b3..530a7c63e 100644 --- a/src/components/date-picker/themes/shared/date-picker.fluent.scss +++ b/src/components/date-picker/themes/shared/date-picker.fluent.scss @@ -15,12 +15,8 @@ $theme: $fluent; } ::part(helper-text) { - @include type-style('caption'); - - color: var-get($theme, 'helper-text-color'); grid-auto-rows: minmax(rem(18px), auto); margin-block-start: pad-block(rem(5px)); - padding-inline-start: 0; } } diff --git a/src/components/date-picker/themes/shared/date-picker.indigo.scss b/src/components/date-picker/themes/shared/date-picker.indigo.scss index 23f245aef..8a750da4e 100644 --- a/src/components/date-picker/themes/shared/date-picker.indigo.scss +++ b/src/components/date-picker/themes/shared/date-picker.indigo.scss @@ -8,6 +8,12 @@ $input-theme: input-theme.$indigo; :host { --calendar-border-color: #{$indigo-calendar-border-color}; + --input-icon: #{sizable(rem(14px), rem(16px), rem(16px))}; + + igc-icon, + ::slotted(igc-icon) { + --size: var(--input-icon) !important; + } igc-dialog[open]::part(base) { border-radius: rem(6px); @@ -19,11 +25,7 @@ $input-theme: input-theme.$indigo; } ::part(helper-text) { - @include type-style('caption'); - - color: var-get($theme, 'helper-text-color'); grid-auto-rows: minmax(rem(15px), auto); - padding-inline-start: 0; } } diff --git a/src/components/date-picker/themes/shared/date-picker.material.scss b/src/components/date-picker/themes/shared/date-picker.material.scss index 72b1a195d..3bf3649a4 100644 --- a/src/components/date-picker/themes/shared/date-picker.material.scss +++ b/src/components/date-picker/themes/shared/date-picker.material.scss @@ -3,6 +3,12 @@ $theme: $material; +:host { + ::part(helper-text) { + padding-inline: pad-inline(rem(12px), rem(14px), rem(16px)); + } +} + :host([outlined][readonly]:hover) { igc-date-time-input::part(start), igc-date-time-input::part(end), diff --git a/src/components/date-range-picker/date-range-picker.base.scss b/src/components/date-range-picker/date-range-picker.base.scss index a50f2f3c9..56736b241 100644 --- a/src/components/date-range-picker/date-range-picker.base.scss +++ b/src/components/date-range-picker/date-range-picker.base.scss @@ -25,6 +25,11 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; } + + ::part(helper-text) { + @include type-style('caption'); + @include line-clamp(2, true, true); + } } :host([required]) { diff --git a/src/components/date-range-picker/themes/shared/date-range-picker.bootstrap.scss b/src/components/date-range-picker/themes/shared/date-range-picker.bootstrap.scss index 5aad3307e..87d072294 100644 --- a/src/components/date-range-picker/themes/shared/date-range-picker.bootstrap.scss +++ b/src/components/date-range-picker/themes/shared/date-range-picker.bootstrap.scss @@ -15,10 +15,7 @@ $theme: $bootstrap; ::part(helper-text) { @include type-style('body-2'); - color: var-get($theme, 'helper-text-color'); grid-auto-rows: minmax(rem(20px), auto); - padding-inline-start: 0; - margin-block-start: pad-block(rem(4px)); } } diff --git a/src/components/date-range-picker/themes/shared/date-range-picker.common.scss b/src/components/date-range-picker/themes/shared/date-range-picker.common.scss index 9dde79ba5..86733f10d 100644 --- a/src/components/date-range-picker/themes/shared/date-range-picker.common.scss +++ b/src/components/date-range-picker/themes/shared/date-range-picker.common.scss @@ -51,12 +51,9 @@ $theme: $material; } ::part(helper-text) { - @include type-style('caption'); - color: var-get($theme, 'helper-text-color'); grid-auto-rows: minmax(rem(18px), auto); margin-block-start: pad-block(rem(4px)); - padding-inline: pad-inline(rem(14px), rem(16px), rem(18px)); } } diff --git a/src/components/date-range-picker/themes/shared/date-range-picker.fluent.scss b/src/components/date-range-picker/themes/shared/date-range-picker.fluent.scss index 6098061f1..cbbd0891e 100644 --- a/src/components/date-range-picker/themes/shared/date-range-picker.fluent.scss +++ b/src/components/date-range-picker/themes/shared/date-range-picker.fluent.scss @@ -11,12 +11,8 @@ $theme: $fluent; } ::part(helper-text) { - @include type-style('caption'); - - color: var-get($theme, 'helper-text-color'); grid-auto-rows: minmax(rem(18px), auto); margin-block-start: pad-block(rem(5px)); - padding-inline-start: 0; } } diff --git a/src/components/date-range-picker/themes/shared/date-range-picker.indigo.scss b/src/components/date-range-picker/themes/shared/date-range-picker.indigo.scss index faec8d039..4fadae81b 100644 --- a/src/components/date-range-picker/themes/shared/date-range-picker.indigo.scss +++ b/src/components/date-range-picker/themes/shared/date-range-picker.indigo.scss @@ -5,6 +5,12 @@ $theme: $indigo; :host { --calendar-border-color: #{$indigo-calendar-border-color}; + --input-icon: #{sizable(rem(14px), rem(16px), rem(16px))}; + + igc-icon, + ::slotted(igc-icon) { + --size: var(--input-icon) !important; + } igc-dialog[open]::part(base) { border-radius: rem(6px); @@ -17,11 +23,7 @@ $theme: $indigo; } ::part(helper-text) { - @include type-style('caption'); - - color: var-get($theme, 'helper-text-color'); grid-auto-rows: minmax(rem(15px), auto); - padding-inline-start: 0; } } diff --git a/src/components/date-range-picker/themes/shared/date-range-picker.material.scss b/src/components/date-range-picker/themes/shared/date-range-picker.material.scss index cabbc5d70..108da4796 100644 --- a/src/components/date-range-picker/themes/shared/date-range-picker.material.scss +++ b/src/components/date-range-picker/themes/shared/date-range-picker.material.scss @@ -3,6 +3,12 @@ $theme: $material; +:host { + ::part(helper-text) { + padding-inline: pad-inline(rem(12px), rem(14px), rem(16px)); + } +} + :host(:not(:focus-within)[outlined][readonly]:hover) { igc-input::part(start), igc-input::part(end), diff --git a/src/components/input/themes/input.base.scss b/src/components/input/themes/input.base.scss index abb2ec200..f2ad930a2 100644 --- a/src/components/input/themes/input.base.scss +++ b/src/components/input/themes/input.base.scss @@ -11,6 +11,11 @@ display: block; font-family: var(--ig-font-family); outline-style: none; + + ::part(helper-text) { + @include type-style('caption'); + @include line-clamp(2, true, true); + } } ::slotted(igc-icon) { diff --git a/src/components/input/themes/shared/input.bootstrap.scss b/src/components/input/themes/shared/input.bootstrap.scss index e7b5b46c3..624ffe850 100644 --- a/src/components/input/themes/shared/input.bootstrap.scss +++ b/src/components/input/themes/shared/input.bootstrap.scss @@ -9,14 +9,12 @@ $theme: $bootstrap; --font: #{sizable(rem(14px), rem(16px), rem(20px))}; --input-border-color: #{var-get($theme, 'border-color')}; --input-height: #{var-get($theme, 'size')}; - --affix-padding: #{pad-inline(rem(8px), rem(12px), rem(14px))}; + --affix-padding: #{pad-inline(rem(8px), rem(10px), rem(14px))}; ::part(helper-text) { @include type-style('body-2'); - color: var-get($theme, 'helper-text-color'); grid-auto-rows: minmax(rem(20px), auto); - margin-block-start: rem(4px); } [part='prefix'] { @@ -42,7 +40,7 @@ $theme: $bootstrap; @include type-style('body-1'); border-radius: var-get($theme, 'border-border-radius'); - padding-inline: pad-inline(8px, 12px, 16px); + padding-inline: pad-inline(8px, 10px, 14px); padding-block: pad-block(4px, 6px, 8px); color: var-get($theme, 'idle-text-color'); background: transparent; diff --git a/src/components/input/themes/shared/input.common.scss b/src/components/input/themes/shared/input.common.scss index 25b77cd52..2e9c04968 100644 --- a/src/components/input/themes/shared/input.common.scss +++ b/src/components/input/themes/shared/input.common.scss @@ -29,6 +29,13 @@ $theme: $base; color: var-get($theme, 'placeholder-color'); } +:host { + ::part(helper-text) { + color: var-get($theme, 'helper-text-color'); + margin-block-start: rem(4px); + } +} + :host(:focus-within), :host(:not([readonly],[disabled]):hover) { [part~='input']::placeholder { diff --git a/src/components/input/themes/shared/input.fluent.scss b/src/components/input/themes/shared/input.fluent.scss index ed1770dd4..4c996ea43 100644 --- a/src/components/input/themes/shared/input.fluent.scss +++ b/src/components/input/themes/shared/input.fluent.scss @@ -8,7 +8,7 @@ $theme: $fluent; --input-size: var(--component-size); --helper-text-top-spacer: rem(5px); --input-border-size: #{rem(1px)}; - --affix-padding: #{pad-inline(rem(8px), rem(12px), rem(16px))}; + --affix-padding: #{pad-inline(rem(8px), rem(10px), rem(14px))}; [part='prefix'], [part='suffix'] { @@ -22,9 +22,6 @@ $theme: $fluent; } ::part(helper-text) { - @include type-style('caption'); - - color: var-get($theme, 'helper-text-color'); margin-block-start: rem(5px); grid-auto-rows: minmax(rem(18px), auto); } diff --git a/src/components/input/themes/shared/input.indigo.scss b/src/components/input/themes/shared/input.indigo.scss index e1e31fefb..1016f38c3 100644 --- a/src/components/input/themes/shared/input.indigo.scss +++ b/src/components/input/themes/shared/input.indigo.scss @@ -15,7 +15,7 @@ $transition-duration: .25s; :host { --component-size: var(--ig-size, #{var-get($theme, 'default-size')}); --input-size: var(--component-size); - --input-icon: #{sizable(rem(14px), rem(16px), rem(18px))}; + --input-icon: #{sizable(rem(14px), rem(16px), rem(16px))}; --affix-padding: #{pad-inline(rem(2px), rem(4px), rem(6px))}; ::slotted(igc-icon) { @@ -23,10 +23,6 @@ $transition-duration: .25s; } ::part(helper-text) { - @include type-style('caption'); - - color: var-get($theme, 'helper-text-color'); - margin-block-start: pad-block(rem(4px)); grid-auto-rows: minmax(rem(15px), auto); } diff --git a/src/components/input/themes/shared/input.material.scss b/src/components/input/themes/shared/input.material.scss index ab7e7fe55..adf5a0db9 100644 --- a/src/components/input/themes/shared/input.material.scss +++ b/src/components/input/themes/shared/input.material.scss @@ -32,12 +32,8 @@ $fs: rem(16px) !default; } ::part(helper-text) { - @include type-style('caption'); - - color: var-get($theme, 'helper-text-color'); - margin-block-start: rem(4px); grid-auto-rows: minmax(rem(18px), auto); - padding-inline: pad-inline(rem(14px), rem(16px), rem(18px)); + padding-inline: pad-inline(rem(12px), rem(14px), rem(16px)); } } @@ -131,7 +127,7 @@ input:placeholder-shown + [part='notch'] [part='label'], [part='start'], [part='end'] { display: flex; - min-width: sizable(rem(10px), rem(12px), rem(14px)); + min-width: sizable(rem(8px), rem(10px), rem(12px)); height: var(--size); overflow: hidden; } diff --git a/src/components/select/themes/select.base.scss b/src/components/select/themes/select.base.scss index a6d3429cc..9b9d75d69 100644 --- a/src/components/select/themes/select.base.scss +++ b/src/components/select/themes/select.base.scss @@ -4,6 +4,11 @@ :host { display: block; + + ::part(helper-text) { + @include type-style('caption'); + @include line-clamp(2, true, true); + } } [role='combobox'] { diff --git a/src/components/select/themes/shared/select.fluent.scss b/src/components/select/themes/shared/select.fluent.scss index 99f9b5ac5..d8bb62d0a 100644 --- a/src/components/select/themes/shared/select.fluent.scss +++ b/src/components/select/themes/shared/select.fluent.scss @@ -13,8 +13,6 @@ $input-theme: input-theme.$fluent; --dropdown-size: var(--component-size); ::part(helper-text) { - @include type-style('caption'); - color: var-get($theme, 'helper-text-color'); margin-block-start: pad-block(rem(5px)); grid-auto-rows: minmax(rem(18px), auto); diff --git a/src/components/select/themes/shared/select.indigo.scss b/src/components/select/themes/shared/select.indigo.scss index 6e0d51f9a..61a80ac05 100644 --- a/src/components/select/themes/shared/select.indigo.scss +++ b/src/components/select/themes/shared/select.indigo.scss @@ -14,8 +14,6 @@ $input-theme: input-theme.$indigo; --input-icon: #{sizable(rem(14px), rem(16px), rem(18px))}; ::part(helper-text) { - @include type-style('caption'); - margin-block-start: pad-block(rem(4px)); grid-auto-rows: minmax(rem(15px), auto); } diff --git a/src/components/select/themes/shared/select.material.scss b/src/components/select/themes/shared/select.material.scss index 84da43c9b..f440522d5 100644 --- a/src/components/select/themes/shared/select.material.scss +++ b/src/components/select/themes/shared/select.material.scss @@ -21,10 +21,8 @@ $active-border-width: rem(2px) !default; --dropdown-size: var(--component-size); ::part(helper-text) { - @include type-style('caption'); - margin-block-start: pad-block(rem(4px)); - padding-inline: pad-inline(rem(14px), rem(16px), rem(18px)); + padding-inline: pad-inline(rem(12px), rem(14px), rem(16px)); grid-auto-rows: minmax(rem(18px), auto); } } diff --git a/src/components/textarea/themes/shared/textarea.bootstrap.scss b/src/components/textarea/themes/shared/textarea.bootstrap.scss index d6a6fa608..d301858d0 100644 --- a/src/components/textarea/themes/shared/textarea.bootstrap.scss +++ b/src/components/textarea/themes/shared/textarea.bootstrap.scss @@ -7,14 +7,12 @@ $theme: $bootstrap; @include type-style('body-1'); --component-size: var(--ig-size, #{var-get($theme, 'default-size')}); - --affix-padding: #{pad-inline(rem(10px), rem(12px), rem(12px))}; + --affix-padding: #{pad-inline(rem(8px), rem(10px), rem(14px))}; ::part(helper-text) { @include type-style('body-2'); - color: var-get($theme, 'helper-text-color'); grid-auto-rows: minmax(rem(20px), auto); - margin-block-start: pad-block(rem(4px)); } ::slotted([slot="prefix"]), @@ -98,8 +96,8 @@ textarea { @include type-style('body-1'); border: rem(1px) solid var-get($theme, 'border-color'); - padding-block: pad-block(rem(4px), rem(6px), rem(8px)); - padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); + padding-block: pad-block(rem(4px), rem(8px), rem(12px)) 0; + padding-inline: pad-inline(rem(8px), rem(10px), rem(14px)); border-radius: var-get($theme, 'border-border-radius'); z-index: 1; transition: box-shadow .15s ease-out, border .15s ease-out; diff --git a/src/components/textarea/themes/shared/textarea.common.scss b/src/components/textarea/themes/shared/textarea.common.scss index a6c8d7eb6..6e20e38bc 100644 --- a/src/components/textarea/themes/shared/textarea.common.scss +++ b/src/components/textarea/themes/shared/textarea.common.scss @@ -46,6 +46,13 @@ textarea { } } +:host { + ::part(helper-text) { + color: var-get($theme, 'helper-text-color'); + margin-block-start: pad-block(rem(4px)); + } +} + :host([readonly]) { [part='prefix'], [part='suffix'] { diff --git a/src/components/textarea/themes/shared/textarea.fluent.scss b/src/components/textarea/themes/shared/textarea.fluent.scss index be02ebdb2..465738df8 100644 --- a/src/components/textarea/themes/shared/textarea.fluent.scss +++ b/src/components/textarea/themes/shared/textarea.fluent.scss @@ -9,12 +9,9 @@ $border-size: rem(1px); --component-size: var(--ig-size, #{var-get($theme, 'default-size')}); --textarea-border-size: #{rem(1px)}; - --affix-padding: #{pad-inline(rem(8px), rem(12px), rem(16px))}; + --affix-padding: #{pad-inline(rem(8px), rem(10px), rem(14px))}; ::part(helper-text) { - @include type-style('caption'); - - color: var-get($theme, 'helper-text-color'); grid-auto-rows: minmax(rem(18px), auto); margin-block-start: pad-block(rem(5px)); } @@ -82,7 +79,8 @@ $border-size: rem(1px); textarea { @include type-style('body-2'); - padding: pad(rem(8px)); + padding-inline: pad-inline(rem(8px)); + padding-block: pad-block(rem(6px), rem(10px), rem(14px)) 0; } :host([required]:not(:disabled)), diff --git a/src/components/textarea/themes/shared/textarea.indigo.scss b/src/components/textarea/themes/shared/textarea.indigo.scss index 79149f881..a2cb812a8 100644 --- a/src/components/textarea/themes/shared/textarea.indigo.scss +++ b/src/components/textarea/themes/shared/textarea.indigo.scss @@ -8,7 +8,7 @@ $theme: $indigo; @include type-style('body-2'); --component-size: var(--ig-size, #{var-get($theme, 'default-size')}); - --input-icon: #{sizable(rem(14px), rem(16px), rem(18px))}; + --input-icon: #{sizable(rem(14px), rem(16px), rem(16px))}; --affix-padding: #{pad-inline(rem(2px), rem(4px), rem(6px))}; ::slotted(igc-icon) { @@ -16,11 +16,7 @@ $theme: $indigo; } ::part(helper-text) { - @include type-style('caption'); - - color: var-get($theme, 'helper-text-color'); grid-auto-rows: minmax(rem(15px), auto); - margin-block-start: pad-block(rem(4px)); } } @@ -92,7 +88,7 @@ $theme: $indigo; textarea { @include type-style('body-2'); - padding-block: pad-block(rem(6px)); + padding-block: pad-block(rem(4px), rem(6px), rem(8px)) 0; padding-inline: pad-inline(rem(2px), rem(4px), rem(6px)); margin-block-end: pad-block(rem(1px)); diff --git a/src/components/textarea/themes/shared/textarea.material.scss b/src/components/textarea/themes/shared/textarea.material.scss index 218e716ad..4c6f01f46 100644 --- a/src/components/textarea/themes/shared/textarea.material.scss +++ b/src/components/textarea/themes/shared/textarea.material.scss @@ -3,7 +3,7 @@ @use 'igniteui-theming/sass/animations/easings' as *; $theme: $material; -$input-top-padding: rem(20px); +$input-top-padding: pad-block(rem(8px), rem(12px), rem(16px)); $input-bottom-padding: rem(6px); :host { @@ -13,12 +13,8 @@ $input-bottom-padding: rem(6px); --affix-padding: #{pad-inline(rem(12px), rem(14px), rem(16px))}; ::part(helper-text) { - @include type-style('caption'); - - color: var-get($theme, 'helper-text-color'); grid-auto-rows: minmax(rem(18px), auto); - margin-block-start: pad-block(rem(4px)); - padding-inline: pad-inline(rem(14px), rem(16px), rem(18px)); + padding-inline: pad-inline(rem(12px), rem(14px), rem(16px)); } } @@ -26,7 +22,7 @@ textarea { border: none; padding: 0; overflow: auto; - margin-block-start: pad-block($input-top-padding); + margin-block-start: $input-top-padding; grid-area: 1 / 2 / span 1 / span 2; flex-grow: 1; position: relative; @@ -84,7 +80,13 @@ textarea { } textarea { - margin-block-end: pad-block(rem(2px)); + margin-block: pad-block(rem(8px), rem(12px), rem(16px)) rem(2px); + } + } + + [part~='labelled'] { + textarea { + margin-block: pad-block(rem(16px), rem(20px), rem(24px)) rem(2px); } } @@ -197,7 +199,7 @@ textarea { [part='end'] { display: flex; align-items: center; - min-width: pad(rem(10px), rem(12px), rem(14px)); + min-width: pad(rem(8px), rem(10px), rem(12px)); min-height: 100%; overflow: hidden; } diff --git a/src/components/textarea/themes/textarea.base.scss b/src/components/textarea/themes/textarea.base.scss index 59ba307d4..eea5f605e 100644 --- a/src/components/textarea/themes/textarea.base.scss +++ b/src/components/textarea/themes/textarea.base.scss @@ -23,6 +23,11 @@ $base-scale-size: ( [part~='label'] { @include ellipsis(); } + + ::part(helper-text) { + @include type-style('caption'); + @include line-clamp(2, true, true); + } } [part~='container'] { From 872bbc75a8d96d5bfae9bccabd73a6c520efe2d0 Mon Sep 17 00:00:00 2001 From: sivanova Date: Tue, 7 Oct 2025 09:46:04 +0300 Subject: [PATCH 02/12] refactor(input-group): textarea & combo changes --- .../combo/themes/shared/combo.bootstrap.scss | 7 ++++ .../combo/themes/shared/combo.indigo.scss | 3 +- .../combo/themes/shared/combo.material.scss | 6 +++ .../date-range-picker.base.scss | 3 ++ .../themes/shared/textarea.bootstrap.scss | 17 +++++---- .../themes/shared/textarea.fluent.scss | 4 +- .../themes/shared/textarea.indigo.scss | 4 +- .../themes/shared/textarea.material.scss | 38 +++++++++++++++---- .../textarea/themes/textarea.base.scss | 19 ---------- 9 files changed, 64 insertions(+), 37 deletions(-) diff --git a/src/components/combo/themes/shared/combo.bootstrap.scss b/src/components/combo/themes/shared/combo.bootstrap.scss index 5f5407f0c..f9f0aaef1 100644 --- a/src/components/combo/themes/shared/combo.bootstrap.scss +++ b/src/components/combo/themes/shared/combo.bootstrap.scss @@ -32,6 +32,12 @@ $dropdown-theme: dropdown-theme.$bootstrap; background: var-get($dropdown-theme, 'background-color'); border-radius: var-get($dropdown-theme, 'border-radius'); + igc-input, + igc-input::part(container), + igc-input::part(input) { + height: rem(28px); + } + igc-input::part(container) { background: transparent; border-inline-start: 0; @@ -67,6 +73,7 @@ $dropdown-theme: dropdown-theme.$bootstrap; [part='search-input'] { [part~='case-icon'] { border-block-end: rem(1px) solid color(gray, 400); + border-inline: none; transition: border 0.15s ease-out; } diff --git a/src/components/combo/themes/shared/combo.indigo.scss b/src/components/combo/themes/shared/combo.indigo.scss index 5d5c7f535..249267e15 100644 --- a/src/components/combo/themes/shared/combo.indigo.scss +++ b/src/components/combo/themes/shared/combo.indigo.scss @@ -70,7 +70,8 @@ $dropdown-theme: dropdown-theme.$indigo; } [part='filter-input'] { - padding: pad-inline(rem(12px)); + padding-inline: pad-inline(rem(8px), rem(12px), rem(12px)); + padding-block: pad-block(rem(12px)); } :host(:focus-within) { diff --git a/src/components/combo/themes/shared/combo.material.scss b/src/components/combo/themes/shared/combo.material.scss index ae0477e5d..c21a5e912 100644 --- a/src/components/combo/themes/shared/combo.material.scss +++ b/src/components/combo/themes/shared/combo.material.scss @@ -35,6 +35,12 @@ $dropdown-theme: dropdown-theme.$material; background: var-get($dropdown-theme, 'background-color'); border-radius: var-get($dropdown-theme, 'border-radius'); + igc-input, + igc-input::part(container), + igc-input::part(input) { + height: rem(38px); + } + igc-input::part(container) { background: transparent; border-inline-start: 0; diff --git a/src/components/date-range-picker/date-range-picker.base.scss b/src/components/date-range-picker/date-range-picker.base.scss index 56736b241..ccfe1eeb3 100644 --- a/src/components/date-range-picker/date-range-picker.base.scss +++ b/src/components/date-range-picker/date-range-picker.base.scss @@ -70,5 +70,8 @@ } igc-date-time-input { + display: flex; + flex-direction: column; width: 100%; + min-width: 0; } diff --git a/src/components/textarea/themes/shared/textarea.bootstrap.scss b/src/components/textarea/themes/shared/textarea.bootstrap.scss index d301858d0..1e2e7f858 100644 --- a/src/components/textarea/themes/shared/textarea.bootstrap.scss +++ b/src/components/textarea/themes/shared/textarea.bootstrap.scss @@ -8,6 +8,9 @@ $theme: $bootstrap; --component-size: var(--ig-size, #{var-get($theme, 'default-size')}); --affix-padding: #{pad-inline(rem(8px), rem(10px), rem(14px))}; + --block-padding: #{sizable(rem(4px), rem(8px), rem(12px))}; + --border-width: #{rem(1px)}; + --textarea-height: calc((var(--ig-body-1-line-height) * 3) + var(--block-padding) + var(--border-width) * 2); ::part(helper-text) { @include type-style('body-2'); @@ -36,7 +39,7 @@ $theme: $bootstrap; [part~='prefixed'] { [part~='prefix'] { - border-block-width: rem(1px); + border-block-width: var(--border-width); border-style: solid; border-color: var-get($theme, 'border-color'); overflow: hidden; @@ -65,7 +68,7 @@ $theme: $bootstrap; [part~='suffixed'] { [part~='suffix'] { - border-block-width: rem(1px); + border-block-width: var(--border-width); border-style: solid; border-color: var-get($theme, 'border-color'); overflow: hidden; @@ -95,8 +98,8 @@ $theme: $bootstrap; textarea { @include type-style('body-1'); - border: rem(1px) solid var-get($theme, 'border-color'); - padding-block: pad-block(rem(4px), rem(8px), rem(12px)) 0; + border: var(--border-width) solid var-get($theme, 'border-color'); + padding-block: pad-block(var(--block-padding)) 0; padding-inline: pad-inline(rem(8px), rem(10px), rem(14px)); border-radius: var-get($theme, 'border-border-radius'); z-index: 1; @@ -117,7 +120,7 @@ textarea { } textarea { - border: rem(1px) solid var-get($theme, 'focused-border-color'); + border: var(--border-width) solid var-get($theme, 'focused-border-color'); box-shadow: 0 0 0 rem(4px) var-get($theme, 'focused-secondary-color'); } } @@ -138,7 +141,7 @@ textarea { :host(:not(:disabled,[readonly]):state(ig-invalid)), :host(:not([disabled],[readonly]):state(ig-invalid)) { textarea { - border: rem(1px) solid var-get($theme, 'error-secondary-color'); + border: var(--border-width) solid var-get($theme, 'error-secondary-color'); } } @@ -159,7 +162,7 @@ textarea { textarea { background: var-get($theme, 'border-disabled-background'); - border: rem(1px) solid var-get($theme, 'disabled-border-color'); + border: var(--border-width) solid var-get($theme, 'disabled-border-color'); box-shadow: none; } diff --git a/src/components/textarea/themes/shared/textarea.fluent.scss b/src/components/textarea/themes/shared/textarea.fluent.scss index 465738df8..b85479024 100644 --- a/src/components/textarea/themes/shared/textarea.fluent.scss +++ b/src/components/textarea/themes/shared/textarea.fluent.scss @@ -10,6 +10,8 @@ $border-size: rem(1px); --component-size: var(--ig-size, #{var-get($theme, 'default-size')}); --textarea-border-size: #{rem(1px)}; --affix-padding: #{pad-inline(rem(8px), rem(10px), rem(14px))}; + --block-padding: #{sizable(rem(6px), rem(10px), rem(14px))}; + --textarea-height: calc((var(--ig-body-2-line-height) * 3) + var(--block-padding)); ::part(helper-text) { grid-auto-rows: minmax(rem(18px), auto); @@ -80,7 +82,7 @@ textarea { @include type-style('body-2'); padding-inline: pad-inline(rem(8px)); - padding-block: pad-block(rem(6px), rem(10px), rem(14px)) 0; + padding-block: pad-block(var(--block-padding)) 0; } :host([required]:not(:disabled)), diff --git a/src/components/textarea/themes/shared/textarea.indigo.scss b/src/components/textarea/themes/shared/textarea.indigo.scss index a2cb812a8..9ed9b9081 100644 --- a/src/components/textarea/themes/shared/textarea.indigo.scss +++ b/src/components/textarea/themes/shared/textarea.indigo.scss @@ -10,6 +10,8 @@ $theme: $indigo; --component-size: var(--ig-size, #{var-get($theme, 'default-size')}); --input-icon: #{sizable(rem(14px), rem(16px), rem(16px))}; --affix-padding: #{pad-inline(rem(2px), rem(4px), rem(6px))}; + --block-padding: #{sizable(rem(4px), rem(6px), rem(8px))}; + --textarea-height: calc((var(--ig-body-2-line-height) * 3) + var(--block-padding)); ::slotted(igc-icon) { --size: var(--input-icon) !important; @@ -88,7 +90,7 @@ $theme: $indigo; textarea { @include type-style('body-2'); - padding-block: pad-block(rem(4px), rem(6px), rem(8px)) 0; + padding-block: pad-block(var(--block-padding)) 0; padding-inline: pad-inline(rem(2px), rem(4px), rem(6px)); margin-block-end: pad-block(rem(1px)); diff --git a/src/components/textarea/themes/shared/textarea.material.scss b/src/components/textarea/themes/shared/textarea.material.scss index 4c6f01f46..7c34d6f33 100644 --- a/src/components/textarea/themes/shared/textarea.material.scss +++ b/src/components/textarea/themes/shared/textarea.material.scss @@ -3,7 +3,6 @@ @use 'igniteui-theming/sass/animations/easings' as *; $theme: $material; -$input-top-padding: pad-block(rem(8px), rem(12px), rem(16px)); $input-bottom-padding: rem(6px); :host { @@ -11,30 +10,37 @@ $input-bottom-padding: rem(6px); --component-size: var(--ig-size, #{var-get($theme, 'default-size')}); --affix-padding: #{pad-inline(rem(12px), rem(14px), rem(16px))}; + --outlined-top-padding: #{sizable(rem(8px), rem(12px), rem(16px))}; + --textarea-height: calc((var(--ig-subtitle-1-line-height) * 3) + var(--outlined-top-padding)); ::part(helper-text) { grid-auto-rows: minmax(rem(18px), auto); padding-inline: pad-inline(rem(12px), rem(14px), rem(16px)); } + + [part~='container'] { + --textarea-height: calc((var(--ig-subtitle-1-line-height) * 3)); + } } textarea { border: none; padding: 0; overflow: auto; - margin-block-start: $input-top-padding; + margin-block-start: pad-block(var(--outlined-top-padding)); grid-area: 1 / 2 / span 1 / span 2; flex-grow: 1; position: relative; max-width: inherit; + min-height: var(--textarea-height); padding-inline: pad-inline(rem(4px)); z-index: 1; } [part='label'] { - position: absolute; + position: relative; transform-origin: top left; - inset-block-start: calc($input-top-padding - #{rem(2px)}); + inset-block-start: calc((var(--outlined-top-padding)) - #{rem(2px)}); padding-inline-end: pad-inline(rem(4px)); transition: transform 150ms cubic-bezier(.4, 0, .2, 1), @@ -47,7 +53,7 @@ textarea { @include type-style('caption'); translate: 0; - inset-block-start: calc(#{$input-top-padding} / 4); + inset-block-start: calc((var(--outlined-top-padding)) / 4); } %label-outlined-filled { @@ -64,6 +70,8 @@ textarea { :host(:not([outlined])) { [part~='container'] { + --box-bottom-padding: #{rem(2px)}; + overflow: hidden; border-start-start-radius: var-get($theme, 'box-border-radius'); border-start-end-radius: var-get($theme, 'box-border-radius'); @@ -80,13 +88,27 @@ textarea { } textarea { - margin-block: pad-block(rem(8px), rem(12px), rem(16px)) rem(2px); + margin-block: pad-block(var(--box-top-padding)) var(--box-bottom-padding); + min-height: var(--textarea-height); + } + } + + [part~='container']:not([part~='labelled']) { + --box-top-padding: #{sizable(rem(8px), rem(12px), rem(16px))}; + --textarea-height: #{calc(rem(80px) + var(--box-top-padding))}; + + + textarea { + --textarea-height: #{calc(rem(80px) - var(--box-bottom-padding))}; } } [part~='labelled'] { + --box-top-padding: #{sizable(rem(16px), rem(20px), rem(24px))}; + --textarea-height: #{calc((var(--ig-subtitle-1-line-height) * 3) + var(--box-top-padding))}; + textarea { - margin-block: pad-block(rem(16px), rem(20px), rem(24px)) rem(2px); + --textarea-height: #{calc((var(--ig-subtitle-1-line-height) * 3) - var(--box-bottom-padding))}; } } @@ -379,7 +401,7 @@ textarea { :host([readonly][outlined]:focus-within) { [part='label'] { - inset-block-start: calc($input-top-padding - #{rem(3px)}); + inset-block-start: calc(var(--outlined-top-padding) - #{rem(3px)}); } [part='notch'] { diff --git a/src/components/textarea/themes/textarea.base.scss b/src/components/textarea/themes/textarea.base.scss index eea5f605e..479b53a47 100644 --- a/src/components/textarea/themes/textarea.base.scss +++ b/src/components/textarea/themes/textarea.base.scss @@ -3,18 +3,7 @@ @use 'styles/utilities' as *; @use 'igniteui-theming/sass/animations/easings' as *; -$base-scale-size: ( - 'large': rem(16px), - 'medium': rem(19px), - 'small': rem(22px) -); - :host { - --textarea-height: #{sizable( - rem(82px, map.get($base-scale-size, 'small')), - rem(82px, map.get($base-scale-size, 'medium')), - rem(82px, map.get($base-scale-size, 'large')) - )}; --component-size: var(--ig-size, var(--ig-size-large)); display: block; @@ -62,18 +51,10 @@ textarea { overflow: auto; text-overflow: ellipsis; - /* resets typography styles */ - line-height: normal; - &::placeholder { opacity: 1; line-height: normal; } - - &:not([type='*']) { - /* resets typography styles */ - line-height: normal; - } } %prefix, From 06f838989238227cbf1f30b8d08209bf9c9f1144 Mon Sep 17 00:00:00 2001 From: sivanova Date: Tue, 7 Oct 2025 12:14:24 +0300 Subject: [PATCH 03/12] refactor(textarea): remove min-height --- .../combo/themes/shared/combo.bootstrap.scss | 4 +- src/components/textarea/textarea.ts | 4 +- .../themes/shared/textarea.bootstrap.scss | 17 ++++----- .../themes/shared/textarea.fluent.scss | 5 +-- .../themes/shared/textarea.indigo.scss | 4 +- .../themes/shared/textarea.material.scss | 38 +++++-------------- .../textarea/themes/textarea.base.scss | 2 - 7 files changed, 24 insertions(+), 50 deletions(-) diff --git a/src/components/combo/themes/shared/combo.bootstrap.scss b/src/components/combo/themes/shared/combo.bootstrap.scss index f9f0aaef1..081c76f2a 100644 --- a/src/components/combo/themes/shared/combo.bootstrap.scss +++ b/src/components/combo/themes/shared/combo.bootstrap.scss @@ -79,8 +79,10 @@ $dropdown-theme: dropdown-theme.$bootstrap; &:focus, &:focus-within { + border-block-end: rem(2px) solid color(primary, 500); + [part~='case-icon'] { - border-block-end: rem(1px) solid color(primary, 500); + border: none; } } } diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts index 96f66ad64..14edec93a 100644 --- a/src/components/textarea/textarea.ts +++ b/src/components/textarea/textarea.ts @@ -216,12 +216,12 @@ export default class IgcTextareaComponent extends FormAssociatedRequiredMixin( /** * The number of visible text lines for the control. If it is specified, it must be a positive integer. - * If it is not specified, the default value is 2. + * If it is not specified, the default value is 3. * * @attr */ @property({ type: Number }) - public rows = 2; + public rows = 3; /* @tsTwoWayProperty(true, "igcChange", "detail", false) */ /** diff --git a/src/components/textarea/themes/shared/textarea.bootstrap.scss b/src/components/textarea/themes/shared/textarea.bootstrap.scss index 1e2e7f858..d301858d0 100644 --- a/src/components/textarea/themes/shared/textarea.bootstrap.scss +++ b/src/components/textarea/themes/shared/textarea.bootstrap.scss @@ -8,9 +8,6 @@ $theme: $bootstrap; --component-size: var(--ig-size, #{var-get($theme, 'default-size')}); --affix-padding: #{pad-inline(rem(8px), rem(10px), rem(14px))}; - --block-padding: #{sizable(rem(4px), rem(8px), rem(12px))}; - --border-width: #{rem(1px)}; - --textarea-height: calc((var(--ig-body-1-line-height) * 3) + var(--block-padding) + var(--border-width) * 2); ::part(helper-text) { @include type-style('body-2'); @@ -39,7 +36,7 @@ $theme: $bootstrap; [part~='prefixed'] { [part~='prefix'] { - border-block-width: var(--border-width); + border-block-width: rem(1px); border-style: solid; border-color: var-get($theme, 'border-color'); overflow: hidden; @@ -68,7 +65,7 @@ $theme: $bootstrap; [part~='suffixed'] { [part~='suffix'] { - border-block-width: var(--border-width); + border-block-width: rem(1px); border-style: solid; border-color: var-get($theme, 'border-color'); overflow: hidden; @@ -98,8 +95,8 @@ $theme: $bootstrap; textarea { @include type-style('body-1'); - border: var(--border-width) solid var-get($theme, 'border-color'); - padding-block: pad-block(var(--block-padding)) 0; + border: rem(1px) solid var-get($theme, 'border-color'); + padding-block: pad-block(rem(4px), rem(8px), rem(12px)) 0; padding-inline: pad-inline(rem(8px), rem(10px), rem(14px)); border-radius: var-get($theme, 'border-border-radius'); z-index: 1; @@ -120,7 +117,7 @@ textarea { } textarea { - border: var(--border-width) solid var-get($theme, 'focused-border-color'); + border: rem(1px) solid var-get($theme, 'focused-border-color'); box-shadow: 0 0 0 rem(4px) var-get($theme, 'focused-secondary-color'); } } @@ -141,7 +138,7 @@ textarea { :host(:not(:disabled,[readonly]):state(ig-invalid)), :host(:not([disabled],[readonly]):state(ig-invalid)) { textarea { - border: var(--border-width) solid var-get($theme, 'error-secondary-color'); + border: rem(1px) solid var-get($theme, 'error-secondary-color'); } } @@ -162,7 +159,7 @@ textarea { textarea { background: var-get($theme, 'border-disabled-background'); - border: var(--border-width) solid var-get($theme, 'disabled-border-color'); + border: rem(1px) solid var-get($theme, 'disabled-border-color'); box-shadow: none; } diff --git a/src/components/textarea/themes/shared/textarea.fluent.scss b/src/components/textarea/themes/shared/textarea.fluent.scss index b85479024..0acde272f 100644 --- a/src/components/textarea/themes/shared/textarea.fluent.scss +++ b/src/components/textarea/themes/shared/textarea.fluent.scss @@ -10,8 +10,6 @@ $border-size: rem(1px); --component-size: var(--ig-size, #{var-get($theme, 'default-size')}); --textarea-border-size: #{rem(1px)}; --affix-padding: #{pad-inline(rem(8px), rem(10px), rem(14px))}; - --block-padding: #{sizable(rem(6px), rem(10px), rem(14px))}; - --textarea-height: calc((var(--ig-body-2-line-height) * 3) + var(--block-padding)); ::part(helper-text) { grid-auto-rows: minmax(rem(18px), auto); @@ -82,7 +80,8 @@ textarea { @include type-style('body-2'); padding-inline: pad-inline(rem(8px)); - padding-block: pad-block(var(--block-padding)) 0; + padding-block: pad-block(rem(6px), rem(10px), rem(14px)) 0; + margin-block-end: rem(2px); } :host([required]:not(:disabled)), diff --git a/src/components/textarea/themes/shared/textarea.indigo.scss b/src/components/textarea/themes/shared/textarea.indigo.scss index 9ed9b9081..a2cb812a8 100644 --- a/src/components/textarea/themes/shared/textarea.indigo.scss +++ b/src/components/textarea/themes/shared/textarea.indigo.scss @@ -10,8 +10,6 @@ $theme: $indigo; --component-size: var(--ig-size, #{var-get($theme, 'default-size')}); --input-icon: #{sizable(rem(14px), rem(16px), rem(16px))}; --affix-padding: #{pad-inline(rem(2px), rem(4px), rem(6px))}; - --block-padding: #{sizable(rem(4px), rem(6px), rem(8px))}; - --textarea-height: calc((var(--ig-body-2-line-height) * 3) + var(--block-padding)); ::slotted(igc-icon) { --size: var(--input-icon) !important; @@ -90,7 +88,7 @@ $theme: $indigo; textarea { @include type-style('body-2'); - padding-block: pad-block(var(--block-padding)) 0; + padding-block: pad-block(rem(4px), rem(6px), rem(8px)) 0; padding-inline: pad-inline(rem(2px), rem(4px), rem(6px)); margin-block-end: pad-block(rem(1px)); diff --git a/src/components/textarea/themes/shared/textarea.material.scss b/src/components/textarea/themes/shared/textarea.material.scss index 7c34d6f33..753e2e9d3 100644 --- a/src/components/textarea/themes/shared/textarea.material.scss +++ b/src/components/textarea/themes/shared/textarea.material.scss @@ -11,16 +11,11 @@ $input-bottom-padding: rem(6px); --component-size: var(--ig-size, #{var-get($theme, 'default-size')}); --affix-padding: #{pad-inline(rem(12px), rem(14px), rem(16px))}; --outlined-top-padding: #{sizable(rem(8px), rem(12px), rem(16px))}; - --textarea-height: calc((var(--ig-subtitle-1-line-height) * 3) + var(--outlined-top-padding)); ::part(helper-text) { grid-auto-rows: minmax(rem(18px), auto); padding-inline: pad-inline(rem(12px), rem(14px), rem(16px)); } - - [part~='container'] { - --textarea-height: calc((var(--ig-subtitle-1-line-height) * 3)); - } } textarea { @@ -32,7 +27,6 @@ textarea { flex-grow: 1; position: relative; max-width: inherit; - min-height: var(--textarea-height); padding-inline: pad-inline(rem(4px)); z-index: 1; } @@ -69,9 +63,15 @@ textarea { } :host(:not([outlined])) { - [part~='container'] { - --box-bottom-padding: #{rem(2px)}; + [part~='container']:not([part~='labelled']) { + --box-top-padding: #{sizable(rem(8px), rem(12px), rem(16px))}; + } + [part~='labelled'] { + --box-top-padding: #{sizable(rem(16px), rem(20px), rem(24px))}; + } + + [part~='container'] { overflow: hidden; border-start-start-radius: var-get($theme, 'box-border-radius'); border-start-end-radius: var-get($theme, 'box-border-radius'); @@ -88,27 +88,7 @@ textarea { } textarea { - margin-block: pad-block(var(--box-top-padding)) var(--box-bottom-padding); - min-height: var(--textarea-height); - } - } - - [part~='container']:not([part~='labelled']) { - --box-top-padding: #{sizable(rem(8px), rem(12px), rem(16px))}; - --textarea-height: #{calc(rem(80px) + var(--box-top-padding))}; - - - textarea { - --textarea-height: #{calc(rem(80px) - var(--box-bottom-padding))}; - } - } - - [part~='labelled'] { - --box-top-padding: #{sizable(rem(16px), rem(20px), rem(24px))}; - --textarea-height: #{calc((var(--ig-subtitle-1-line-height) * 3) + var(--box-top-padding))}; - - textarea { - --textarea-height: #{calc((var(--ig-subtitle-1-line-height) * 3) - var(--box-bottom-padding))}; + margin-block: pad-block(var(--box-top-padding)) rem(2px); } } diff --git a/src/components/textarea/themes/textarea.base.scss b/src/components/textarea/themes/textarea.base.scss index 479b53a47..2c9ff74be 100644 --- a/src/components/textarea/themes/textarea.base.scss +++ b/src/components/textarea/themes/textarea.base.scss @@ -27,7 +27,6 @@ position: relative; max-width: 100%; font-size: rem(16px); - min-height: var(--textarea-height); &:hover { cursor: pointer; @@ -44,7 +43,6 @@ textarea { padding-inline-start: 0; width: 100%; min-width: 0; - min-height: var(--textarea-height); height: auto; outline-style: none; box-shadow: none; From c7deba5371d1c26bc190f260f2516f80f601ae0e Mon Sep 17 00:00:00 2001 From: sivanova Date: Tue, 7 Oct 2025 14:27:08 +0300 Subject: [PATCH 04/12] fix(combo): item & header ellipsis --- src/components/combo/themes/combo-header.base.scss | 11 +++++++++++ src/components/combo/themes/combo-item.base.scss | 8 ++++++++ src/components/combo/themes/combo.base.scss | 5 +++-- stories/combo.stories.ts | 6 +----- stories/textarea.stories.ts | 2 +- 5 files changed, 24 insertions(+), 8 deletions(-) diff --git a/src/components/combo/themes/combo-header.base.scss b/src/components/combo/themes/combo-header.base.scss index 3339d5466..652787c57 100644 --- a/src/components/combo/themes/combo-header.base.scss +++ b/src/components/combo/themes/combo-header.base.scss @@ -6,4 +6,15 @@ // Needed due to how styles are imported in combo-header.ts. --component-size: var(--ig-size, var(--default-size)); --default-size: var(--combo-size) !important; + + width: 100%; + white-space: nowrap; + + ::slotted(*) { + @include ellipsis(); + + display: block; + width: 100%; + align-items: center; + } } diff --git a/src/components/combo/themes/combo-item.base.scss b/src/components/combo/themes/combo-item.base.scss index e66f25c0b..89994ba43 100644 --- a/src/components/combo/themes/combo-item.base.scss +++ b/src/components/combo/themes/combo-item.base.scss @@ -8,6 +8,14 @@ --default-size: var(--combo-size) !important; gap: rem(8px); + + ::slotted(*) { + @include ellipsis(); + + display: block; + width: 100%; + align-items: center; + } } igc-checkbox { diff --git a/src/components/combo/themes/combo.base.scss b/src/components/combo/themes/combo.base.scss index 733e7c8b0..cad708474 100644 --- a/src/components/combo/themes/combo.base.scss +++ b/src/components/combo/themes/combo.base.scss @@ -15,8 +15,9 @@ --component-size: var(--combo-size) !important; } - > igc-input::part(input) { - text-overflow: ellipsis; + igc-input::part(input) { + @include ellipsis(); + cursor: pointer; } diff --git a/stories/combo.stories.ts b/stories/combo.stories.ts index 918f472e6..0061e1ed9 100644 --- a/stories/combo.stories.ts +++ b/stories/combo.stories.ts @@ -215,11 +215,7 @@ type Story = StoryObj; // endregion const itemTemplate: ComboItemTemplate = ({ item }) => { - return html` -
- ${item?.name ?? item} [${item?.zip}] -
- `; + return html`
${item?.name ?? item} [${item?.zip}]
`; }; const groupHeaderTemplate: ComboItemTemplate = ({ item }) => { diff --git a/stories/textarea.stories.ts b/stories/textarea.stories.ts index d6289a349..56e2fdd7d 100644 --- a/stories/textarea.stories.ts +++ b/stories/textarea.stories.ts @@ -155,7 +155,7 @@ const metadata: Meta = { outlined: false, readOnly: false, resize: 'vertical', - rows: 2, + rows: 3, spellcheck: true, wrap: 'soft', validateOnly: false, From a88227f2710272122e151abf2bfb036495bbd678 Mon Sep 17 00:00:00 2001 From: sivanova Date: Thu, 9 Oct 2025 10:39:23 +0300 Subject: [PATCH 05/12] deps(theming): bump to latest version --- package-lock.json | 95 ++++++++++++++++++++++++++++++----------------- package.json | 2 +- 2 files changed, 62 insertions(+), 35 deletions(-) diff --git a/package-lock.json b/package-lock.json index e59df60db..3e062c6e7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36,7 +36,7 @@ "globby": "^15.0.0", "husky": "^9.1.7", "ig-typedoc-theme": "^6.2.3", - "igniteui-theming": "^20.0.0", + "igniteui-theming": "^21.0.2", "keep-a-changelog": "^2.7.1", "lint-staged": "^16.2.3", "lit-analyzer": "^2.0.3", @@ -366,7 +366,6 @@ } ], "license": "MIT", - "peer": true, "engines": { "node": ">=18" }, @@ -390,7 +389,6 @@ } ], "license": "MIT", - "peer": true, "engines": { "node": ">=18" } @@ -2191,6 +2189,7 @@ "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-3.13.0.tgz", "integrity": "sha512-3P8rGsg2Eh2qIHekwuQjzWhKI4jV97PhvYjYUzGqjvJfqdQPz+nMlfWahU24GZAyW1FxFI1sYjyhfh5CoLmIUA==", "license": "MIT", + "peer": true, "dependencies": { "@shikijs/types": "3.13.0", "@shikijs/vscode-textmate": "^10.0.2", @@ -2203,6 +2202,7 @@ "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-3.13.0.tgz", "integrity": "sha512-Ty7xv32XCp8u0eQt8rItpMs6rU9Ki6LJ1dQOW3V/56PKDcpvfHPnYFbsx5FFUP2Yim34m/UkazidamMNVR4vKg==", "license": "MIT", + "peer": true, "dependencies": { "@shikijs/types": "3.13.0", "@shikijs/vscode-textmate": "^10.0.2", @@ -2214,6 +2214,7 @@ "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-3.13.0.tgz", "integrity": "sha512-O42rBGr4UDSlhT2ZFMxqM7QzIU+IcpoTMzb3W7AlziI1ZF7R8eS2M0yt5Ry35nnnTX/LTLXFPUjRFCIW+Operg==", "license": "MIT", + "peer": true, "dependencies": { "@shikijs/types": "3.13.0", "@shikijs/vscode-textmate": "^10.0.2" @@ -2224,6 +2225,7 @@ "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-3.13.0.tgz", "integrity": "sha512-672c3WAETDYHwrRP0yLy3W1QYB89Hbpj+pO4KhxK6FzIrDI2FoEXNiNCut6BQmEApYLfuYfpgOZaqbY+E9b8wQ==", "license": "MIT", + "peer": true, "dependencies": { "@shikijs/types": "3.13.0" } @@ -2233,6 +2235,7 @@ "resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-3.13.0.tgz", "integrity": "sha512-Vxw1Nm1/Od8jyA7QuAenaV78BG2nSr3/gCGdBkLpfLscddCkzkL36Q5b67SrLLfvAJTOUzW39x4FHVCFriPVgg==", "license": "MIT", + "peer": true, "dependencies": { "@shikijs/types": "3.13.0" } @@ -2242,6 +2245,7 @@ "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.13.0.tgz", "integrity": "sha512-oM9P+NCFri/mmQ8LoFGVfVyemm5Hi27330zuOBp0annwJdKH1kOLndw3zCtAVDehPLg9fKqoEx3Ht/wNZxolfw==", "license": "MIT", + "peer": true, "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" @@ -2669,7 +2673,8 @@ "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz", "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==", "dev": true, - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/@types/babel__code-frame": { "version": "7.0.6", @@ -2906,6 +2911,7 @@ "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz", "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==", "license": "MIT", + "peer": true, "dependencies": { "@types/unist": "*" } @@ -3244,7 +3250,8 @@ "version": "1.3.0", "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz", "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==", - "license": "ISC" + "license": "ISC", + "peer": true }, "node_modules/@vitest/expect": { "version": "3.2.4", @@ -4609,7 +4616,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.3", "caniuse-lite": "^1.0.30001741", @@ -4791,6 +4797,7 @@ "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz", "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==", "license": "MIT", + "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -4869,6 +4876,7 @@ "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz", "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==", "license": "MIT", + "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -4879,6 +4887,7 @@ "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz", "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==", "license": "MIT", + "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -5141,6 +5150,7 @@ "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz", "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==", "license": "MIT", + "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -5448,7 +5458,8 @@ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", "dev": true, - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/custom-element-jet-brains-integration": { "version": "1.7.0", @@ -5850,6 +5861,7 @@ "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz", "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==", "license": "MIT", + "peer": true, "dependencies": { "dequal": "^2.0.0" }, @@ -5863,8 +5875,7 @@ "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1495869.tgz", "integrity": "sha512-i+bkd9UYFis40RcnkW7XrOprCujXRAHg62IVh/Ah3G8MmNXpCGt1m0dTFhSdx/AVs8XEMbdOGRwdkR1Bcta8AA==", "dev": true, - "license": "BSD-3-Clause", - "peer": true + "license": "BSD-3-Clause" }, "node_modules/didyoumean2": { "version": "4.1.0", @@ -5919,7 +5930,8 @@ "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz", "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==", "dev": true, - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/dompurify": { "version": "3.2.7", @@ -6271,7 +6283,6 @@ "dev": true, "hasInstallScript": true, "license": "MIT", - "peer": true, "bin": { "esbuild": "bin/esbuild" }, @@ -7222,6 +7233,7 @@ "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.5.tgz", "integrity": "sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==", "license": "MIT", + "peer": true, "dependencies": { "@types/hast": "^3.0.0", "@types/unist": "^3.0.0", @@ -7245,6 +7257,7 @@ "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz", "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==", "license": "MIT", + "peer": true, "dependencies": { "@types/hast": "^3.0.0" }, @@ -7285,6 +7298,7 @@ "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz", "integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==", "license": "MIT", + "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -7509,9 +7523,9 @@ } }, "node_modules/igniteui-theming": { - "version": "20.0.0", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-20.0.0.tgz", - "integrity": "sha512-g+pxAskmX1g0wlwaO0MPcT8sMTbr3rzSEOJRWg26FBKcVE09cxPEbX2Vl9k7LdbBc5VdDoiAgsI9yvZhAUM0Xg==", + "version": "21.0.2", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-21.0.2.tgz", + "integrity": "sha512-RXs8b3PThVlS1FhLeUT9TlLMcPoNAiwJm/L+jHU7jrwsgZU7gGjipjEbQQRe97AURyTxgXKiC4M8CAuUilWQ2A==", "dev": true, "license": "MIT" }, @@ -8518,7 +8532,6 @@ "resolved": "https://registry.npmjs.org/lit/-/lit-3.3.1.tgz", "integrity": "sha512-Ksr/8L3PTapbdXJCk+EJVB78jDodUMaP54gD24W186zGRARvwrsPfS60wae/SSCTCNZVPd1chXqio1qHQmu4NA==", "license": "BSD-3-Clause", - "peer": true, "dependencies": { "@lit/reactive-element": "^2.1.0", "lit-element": "^4.2.0", @@ -8810,6 +8823,7 @@ "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==", "dev": true, "license": "MIT", + "peer": true, "bin": { "lz-string": "bin/bin.js" } @@ -8999,6 +9013,7 @@ "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.0.tgz", "integrity": "sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==", "license": "MIT", + "peer": true, "dependencies": { "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", @@ -9084,6 +9099,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" @@ -9103,7 +9119,8 @@ "url": "https://opencollective.com/unified" } ], - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/micromark-util-sanitize-uri": { "version": "2.0.1", @@ -9120,6 +9137,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "micromark-util-character": "^2.0.0", "micromark-util-encode": "^2.0.0", @@ -9140,7 +9158,8 @@ "url": "https://opencollective.com/unified" } ], - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/micromark-util-types": { "version": "2.0.2", @@ -9156,7 +9175,8 @@ "url": "https://opencollective.com/unified" } ], - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/micromatch": { "version": "4.0.8", @@ -9543,13 +9563,15 @@ "version": "0.12.1", "resolved": "https://registry.npmjs.org/oniguruma-parser/-/oniguruma-parser-0.12.1.tgz", "integrity": "sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w==", - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/oniguruma-to-es": { "version": "4.3.3", "resolved": "https://registry.npmjs.org/oniguruma-to-es/-/oniguruma-to-es-4.3.3.tgz", "integrity": "sha512-rPiZhzC3wXwE59YQMRDodUwwT9FZ9nNBwQQfsd1wfdtlKEyCdRV0avrTcSZ5xlIvGRVPd/cx6ZN45ECmS39xvg==", "license": "MIT", + "peer": true, "dependencies": { "oniguruma-parser": "^0.12.1", "regex": "^6.0.1", @@ -10049,7 +10071,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -10133,7 +10154,6 @@ "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -10213,7 +10233,6 @@ "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==", "dev": true, "license": "MIT", - "peer": true, "bin": { "prettier": "bin/prettier.cjs" }, @@ -10243,6 +10262,7 @@ "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "ansi-regex": "^5.0.1", "ansi-styles": "^5.0.0", @@ -10258,6 +10278,7 @@ "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=10" }, @@ -10296,6 +10317,7 @@ "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.1.0.tgz", "integrity": "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==", "license": "MIT", + "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -10579,7 +10601,6 @@ "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -10590,7 +10611,6 @@ "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "scheduler": "^0.26.0" }, @@ -10603,7 +10623,8 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "dev": true, - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/readable-stream": { "version": "3.6.2", @@ -10692,6 +10713,7 @@ "resolved": "https://registry.npmjs.org/regex/-/regex-6.0.1.tgz", "integrity": "sha512-uorlqlzAKjKQZ5P+kTJr3eeJGSVroLKoHmquUj4zHWuR+hEyNqlXsSKlYYF5F4NI6nl7tWCs0apKJ0lmfsXAPA==", "license": "MIT", + "peer": true, "dependencies": { "regex-utilities": "^2.3.0" } @@ -10701,6 +10723,7 @@ "resolved": "https://registry.npmjs.org/regex-recursion/-/regex-recursion-6.0.2.tgz", "integrity": "sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==", "license": "MIT", + "peer": true, "dependencies": { "regex-utilities": "^2.3.0" } @@ -10709,7 +10732,8 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/regex-utilities/-/regex-utilities-2.3.0.tgz", "integrity": "sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==", - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/require-directory": { "version": "2.1.1", @@ -10982,7 +11006,6 @@ "integrity": "sha512-BgLRGy7tNS9H66aIMASq1qSYbAAJV6Z6WR4QYTvj5FgF15rZ/ympT1uixHXwzbZUBDbkvqUI1KR0fH1FhMaQ9w==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@types/estree": "1.0.8" }, @@ -12269,6 +12292,7 @@ "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz", "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==", "license": "MIT", + "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -12290,7 +12314,6 @@ "integrity": "sha512-4+U7gF9hMpGilQmdVJwQaVZZEkD7XwC4ZDmBa51mobaPYelELEMoMfNM2hLyvB2x12gk1IJui1DnwOE4t+MXhw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@storybook/global": "^5.0.0", "@testing-library/jest-dom": "^6.6.3", @@ -12488,6 +12511,7 @@ "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz", "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==", "license": "MIT", + "peer": true, "dependencies": { "character-entities-html4": "^2.0.0", "character-entities-legacy": "^3.0.0" @@ -12598,7 +12622,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "@csstools/css-parser-algorithms": "^3.0.5", "@csstools/css-tokenizer": "^3.0.4", @@ -13165,7 +13188,6 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -13244,6 +13266,7 @@ "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz", "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==", "license": "MIT", + "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -13397,7 +13420,6 @@ "integrity": "sha512-/z585740YHURLl9DN2jCWe6OW7zKYm6VoQ93H0sxZ1cwHQEQrUn5BJrEnkWhfzUdyO+BLGjnKUZ9iz9hKloFDw==", "dev": true, "license": "Apache-2.0", - "peer": true, "dependencies": { "@gerrit0/mini-shiki": "^1.24.0", "lunr": "^2.3.9", @@ -13495,7 +13517,6 @@ "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==", "dev": true, "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -13573,6 +13594,7 @@ "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz", "integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==", "license": "MIT", + "peer": true, "dependencies": { "@types/unist": "^3.0.0" }, @@ -13586,6 +13608,7 @@ "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz", "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==", "license": "MIT", + "peer": true, "dependencies": { "@types/unist": "^3.0.0" }, @@ -13599,6 +13622,7 @@ "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz", "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==", "license": "MIT", + "peer": true, "dependencies": { "@types/unist": "^3.0.0" }, @@ -13612,6 +13636,7 @@ "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz", "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==", "license": "MIT", + "peer": true, "dependencies": { "@types/unist": "^3.0.0", "unist-util-is": "^6.0.0", @@ -13627,6 +13652,7 @@ "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz", "integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==", "license": "MIT", + "peer": true, "dependencies": { "@types/unist": "^3.0.0", "unist-util-is": "^6.0.0" @@ -13755,6 +13781,7 @@ "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz", "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==", "license": "MIT", + "peer": true, "dependencies": { "@types/unist": "^3.0.0", "vfile-message": "^4.0.0" @@ -13769,6 +13796,7 @@ "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.3.tgz", "integrity": "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==", "license": "MIT", + "peer": true, "dependencies": { "@types/unist": "^3.0.0", "unist-util-stringify-position": "^4.0.0" @@ -13784,7 +13812,6 @@ "integrity": "sha512-4nVGliEpxmhCL8DslSAUdxlB6+SMrhB0a1v5ijlh1xB1nEPuy1mxaHxysVucLHuWryAxLWg6a5ei+U4TLn/rFg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", @@ -13878,7 +13905,6 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -14362,6 +14388,7 @@ "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz", "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==", "license": "MIT", + "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" diff --git a/package.json b/package.json index 6be84127a..08aa20804 100644 --- a/package.json +++ b/package.json @@ -80,7 +80,7 @@ "globby": "^15.0.0", "husky": "^9.1.7", "ig-typedoc-theme": "^6.2.3", - "igniteui-theming": "^20.0.0", + "igniteui-theming": "^21.0.2", "keep-a-changelog": "^2.7.1", "lint-staged": "^16.2.3", "lit-analyzer": "^2.0.3", From 5bba8dfc92dc2c4a15de931b5506353d50e51599 Mon Sep 17 00:00:00 2001 From: sivanova Date: Mon, 13 Oct 2025 10:24:15 +0300 Subject: [PATCH 06/12] fix(input-group): address review comments --- src/components/textarea/themes/shared/textarea.material.scss | 1 - src/components/textarea/themes/textarea.base.scss | 2 ++ stories/datepicker.stories.ts | 5 +++++ 3 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/textarea/themes/shared/textarea.material.scss b/src/components/textarea/themes/shared/textarea.material.scss index 753e2e9d3..d3a397952 100644 --- a/src/components/textarea/themes/shared/textarea.material.scss +++ b/src/components/textarea/themes/shared/textarea.material.scss @@ -35,7 +35,6 @@ textarea { position: relative; transform-origin: top left; inset-block-start: calc((var(--outlined-top-padding)) - #{rem(2px)}); - padding-inline-end: pad-inline(rem(4px)); transition: transform 150ms cubic-bezier(.4, 0, .2, 1), color 150ms cubic-bezier(.4, 0, .2, 1), diff --git a/src/components/textarea/themes/textarea.base.scss b/src/components/textarea/themes/textarea.base.scss index 2c9ff74be..dc3866dbb 100644 --- a/src/components/textarea/themes/textarea.base.scss +++ b/src/components/textarea/themes/textarea.base.scss @@ -16,6 +16,8 @@ ::part(helper-text) { @include type-style('caption'); @include line-clamp(2, true, true); + + overflow-wrap: anywhere; } } diff --git a/stories/datepicker.stories.ts b/stories/datepicker.stories.ts index b90000d0d..d51f93455 100644 --- a/stories/datepicker.stories.ts +++ b/stories/datepicker.stories.ts @@ -448,6 +448,11 @@ export const Form: Story = { value: new Date(2024, 1, 29), }, render: (args) => html` +
Date: Tue, 14 Oct 2025 10:19:26 +0300 Subject: [PATCH 07/12] fix(input-group): review comments --- .../themes/shared/date-picker.bootstrap.scss | 1 + .../themes/shared/date-picker.fluent.scss | 2 + .../themes/shared/date-picker.indigo.scss | 2 + .../shared/date-range-picker.bootstrap.scss | 1 + .../input/themes/shared/input.bootstrap.scss | 1 + .../themes/shared/textarea.bootstrap.scss | 1 + stories/combo.stories.ts | 5 + stories/input.stories.ts | 326 +++++++++--------- stories/select.stories.ts | 5 + 9 files changed, 189 insertions(+), 155 deletions(-) diff --git a/src/components/date-picker/themes/shared/date-picker.bootstrap.scss b/src/components/date-picker/themes/shared/date-picker.bootstrap.scss index 36f7d1354..41f854fda 100644 --- a/src/components/date-picker/themes/shared/date-picker.bootstrap.scss +++ b/src/components/date-picker/themes/shared/date-picker.bootstrap.scss @@ -26,6 +26,7 @@ $theme: $bootstrap; @include type-style('body-2'); grid-auto-rows: minmax(rem(20px), auto); + margin-block-start: pad-block(rem(4px)); } } diff --git a/src/components/date-picker/themes/shared/date-picker.fluent.scss b/src/components/date-picker/themes/shared/date-picker.fluent.scss index 530a7c63e..dd9fceb84 100644 --- a/src/components/date-picker/themes/shared/date-picker.fluent.scss +++ b/src/components/date-picker/themes/shared/date-picker.fluent.scss @@ -12,6 +12,8 @@ $theme: $fluent; [part='label'] { @include type-style('subtitle-2'); + + margin-block-end: pad-block(rem(5px)); } ::part(helper-text) { diff --git a/src/components/date-picker/themes/shared/date-picker.indigo.scss b/src/components/date-picker/themes/shared/date-picker.indigo.scss index 8a750da4e..0bcf75d5f 100644 --- a/src/components/date-picker/themes/shared/date-picker.indigo.scss +++ b/src/components/date-picker/themes/shared/date-picker.indigo.scss @@ -22,6 +22,8 @@ $input-theme: input-theme.$indigo; [part~='label'] { @include type-style('caption'); + + margin-block-end: rem(4px); } ::part(helper-text) { diff --git a/src/components/date-range-picker/themes/shared/date-range-picker.bootstrap.scss b/src/components/date-range-picker/themes/shared/date-range-picker.bootstrap.scss index 87d072294..a8ce5e2d0 100644 --- a/src/components/date-range-picker/themes/shared/date-range-picker.bootstrap.scss +++ b/src/components/date-range-picker/themes/shared/date-range-picker.bootstrap.scss @@ -16,6 +16,7 @@ $theme: $bootstrap; @include type-style('body-2'); grid-auto-rows: minmax(rem(20px), auto); + margin-block-start: pad-block(rem(4px)); } } diff --git a/src/components/input/themes/shared/input.bootstrap.scss b/src/components/input/themes/shared/input.bootstrap.scss index 624ffe850..1bb352ae8 100644 --- a/src/components/input/themes/shared/input.bootstrap.scss +++ b/src/components/input/themes/shared/input.bootstrap.scss @@ -15,6 +15,7 @@ $theme: $bootstrap; @include type-style('body-2'); grid-auto-rows: minmax(rem(20px), auto); + margin-block-start: pad-block(rem(4px)); } [part='prefix'] { diff --git a/src/components/textarea/themes/shared/textarea.bootstrap.scss b/src/components/textarea/themes/shared/textarea.bootstrap.scss index d301858d0..405c77b4d 100644 --- a/src/components/textarea/themes/shared/textarea.bootstrap.scss +++ b/src/components/textarea/themes/shared/textarea.bootstrap.scss @@ -13,6 +13,7 @@ $theme: $bootstrap; @include type-style('body-2'); grid-auto-rows: minmax(rem(20px), auto); + margin-block-start: pad-block(rem(4px)); } ::slotted([slot="prefix"]), diff --git a/stories/combo.stories.ts b/stories/combo.stories.ts index 0061e1ed9..f1b786692 100644 --- a/stories/combo.stories.ts +++ b/stories/combo.stories.ts @@ -359,6 +359,11 @@ export const Form: Story = { argTypes: disableStoryControls(metadata), render: () => { return html` +
html` +
{ - return html` -
- -

- Default state with no initial value and no validation. -

- + return html` + + +
+ +

+ Default state with no initial value and no validation. +

+ - -

- With initial value and no validation. Resetting the form will - restore the initial value. -

- -
+ +

+ With initial value and no validation. Resetting the form will + restore the initial value. +

+ +
-
- -

- Read-only state. Does participate in form - submission. -

- -
+
+ +

+ Read-only state. Does participate in form + submission. +

+ +
-
- -

- Disabled state. Does not participate in form - submission. -

- -
+
+ +

+ Disabled state. Does not participate in form + submission. +

+ +
-
- - - -
+
+ + + +
-
- -

With required validator.

- -
+
+ +

With required validator.

+ +
-
- -

With minimum length validator.

- +
+ +

With minimum length validator.

+ - -

- With maximum length validator. Since validate-only is not applied, - typing in the input beyond the maximum length is not possible. -

- + +

+ With maximum length validator. Since validate-only is not applied, + typing in the input beyond the maximum length is not possible. +

+ - -

- With maximum length validator and validate-only applied. Typing in - the input beyond the maximum length is possible and will invalidate - the input. -

- -
+ +

+ With maximum length validator and validate-only applied. Typing in + the input beyond the maximum length is possible and will + invalidate the input. +

+ +
-
- -

- With minimum value validator. Since validate-only is not applied, - using the spin buttons to go below the minimum value is not - possible. -

- +
+ +

+ With minimum value validator. Since validate-only is not applied, + using the spin buttons to go below the minimum value is not + possible. +

+ - -

- With minimum value validator and validate-only applied. Using the - spin buttons to go below the minimum value is possible and will - invalidate the input. -

- + +

+ With minimum value validator and validate-only applied. Using the + spin buttons to go below the minimum value is possible and will + invalidate the input. +

+ - -

- With maximum value validator. Since validate-only is not applied, - using the spin buttons to go above the maximum value is not - possible. -

- + +

+ With maximum value validator. Since validate-only is not applied, + using the spin buttons to go above the maximum value is not + possible. +

+ - -

- With maximum value validator and validate-only applied. Using the - spin buttons to go above the maximum value is possible and will - invalidate the input. -

- -
+ +

+ With maximum value validator and validate-only applied. Using the + spin buttons to go above the maximum value is possible and will + invalidate the input. +

+ +
-
- -

With pattern validator.

- +
+ +

With pattern validator.

+ - -

With email validator.

 + +

With email validator.

 - -

With URL validator.

- -
- ${formControls()} - `; + +

With URL validator.

+ +
+ ${formControls()} + + `; }, }; diff --git a/stories/select.stories.ts b/stories/select.stories.ts index b390c2a74..4c359898f 100644 --- a/stories/select.stories.ts +++ b/stories/select.stories.ts @@ -479,6 +479,11 @@ export const Form: Story = { argTypes: disableStoryControls(metadata), render: () => { return html` +
Default select From 682a3fb633f9b487cc55b27110255f87ec12d45b Mon Sep 17 00:00:00 2001 From: sivanova Date: Wed, 15 Oct 2025 09:50:12 +0300 Subject: [PATCH 08/12] fix(input-group): validation text issue --- src/components/combo/themes/combo.base.scss | 4 ++++ src/components/date-picker/themes/date-picker.base.scss | 4 ++++ src/components/date-range-picker/date-range-picker.base.scss | 4 ++++ src/components/input/themes/input.base.scss | 4 ++++ src/components/select/themes/select.base.scss | 4 ++++ src/components/textarea/themes/textarea.base.scss | 4 ++++ 6 files changed, 24 insertions(+) diff --git a/src/components/combo/themes/combo.base.scss b/src/components/combo/themes/combo.base.scss index cad708474..1511b8fa1 100644 --- a/src/components/combo/themes/combo.base.scss +++ b/src/components/combo/themes/combo.base.scss @@ -25,6 +25,10 @@ @include type-style('caption'); @include line-clamp(2, true, true); } + + slot[name='value-missing'] { + @include line-clamp(2, true, true); + } } :host(:not([single-select])) { diff --git a/src/components/date-picker/themes/date-picker.base.scss b/src/components/date-picker/themes/date-picker.base.scss index 0001cf3b3..a42750649 100644 --- a/src/components/date-picker/themes/date-picker.base.scss +++ b/src/components/date-picker/themes/date-picker.base.scss @@ -27,6 +27,10 @@ @include type-style('caption'); @include line-clamp(2, true, true); } + + slot[name='value-missing'] { + @include line-clamp(2, true, true); + } } :host([required]) { diff --git a/src/components/date-range-picker/date-range-picker.base.scss b/src/components/date-range-picker/date-range-picker.base.scss index ccfe1eeb3..bddbce749 100644 --- a/src/components/date-range-picker/date-range-picker.base.scss +++ b/src/components/date-range-picker/date-range-picker.base.scss @@ -30,6 +30,10 @@ @include type-style('caption'); @include line-clamp(2, true, true); } + + slot[name='value-missing'] { + @include line-clamp(2, true, true); + } } :host([required]) { diff --git a/src/components/input/themes/input.base.scss b/src/components/input/themes/input.base.scss index f2ad930a2..22455cd35 100644 --- a/src/components/input/themes/input.base.scss +++ b/src/components/input/themes/input.base.scss @@ -16,6 +16,10 @@ @include type-style('caption'); @include line-clamp(2, true, true); } + + slot[name='value-missing'] { + @include line-clamp(2, true, true); + } } ::slotted(igc-icon) { diff --git a/src/components/select/themes/select.base.scss b/src/components/select/themes/select.base.scss index 9b9d75d69..28d4f1f7e 100644 --- a/src/components/select/themes/select.base.scss +++ b/src/components/select/themes/select.base.scss @@ -9,6 +9,10 @@ @include type-style('caption'); @include line-clamp(2, true, true); } + + slot[name='value-missing'] { + @include line-clamp(2, true, true); + } } [role='combobox'] { diff --git a/src/components/textarea/themes/textarea.base.scss b/src/components/textarea/themes/textarea.base.scss index dc3866dbb..291652806 100644 --- a/src/components/textarea/themes/textarea.base.scss +++ b/src/components/textarea/themes/textarea.base.scss @@ -19,6 +19,10 @@ overflow-wrap: anywhere; } + + slot[name='value-missing'] { + @include line-clamp(2, true, true); + } } [part~='container'] { From 09a504f2b8497b5b9646471f8f8886aa69f0212b Mon Sep 17 00:00:00 2001 From: sivanova Date: Wed, 15 Oct 2025 11:08:54 +0300 Subject: [PATCH 09/12] fix(input-group): line-height and helper text --- src/components/combo/themes/combo.base.scss | 2 ++ src/components/date-picker/themes/date-picker.base.scss | 2 ++ src/components/date-range-picker/date-range-picker.base.scss | 2 ++ src/components/input/themes/input.base.scss | 2 ++ src/components/input/themes/shared/input.fluent.scss | 2 -- src/components/select/themes/select.base.scss | 2 ++ src/components/textarea/themes/shared/textarea.fluent.scss | 2 -- 7 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/components/combo/themes/combo.base.scss b/src/components/combo/themes/combo.base.scss index 1511b8fa1..73ff4a6ba 100644 --- a/src/components/combo/themes/combo.base.scss +++ b/src/components/combo/themes/combo.base.scss @@ -24,6 +24,8 @@ ::part(helper-text) { @include type-style('caption'); @include line-clamp(2, true, true); + + overflow-wrap: anywhere; } slot[name='value-missing'] { diff --git a/src/components/date-picker/themes/date-picker.base.scss b/src/components/date-picker/themes/date-picker.base.scss index a42750649..bc5de54e2 100644 --- a/src/components/date-picker/themes/date-picker.base.scss +++ b/src/components/date-picker/themes/date-picker.base.scss @@ -26,6 +26,8 @@ ::part(helper-text) { @include type-style('caption'); @include line-clamp(2, true, true); + + overflow-wrap: anywhere; } slot[name='value-missing'] { diff --git a/src/components/date-range-picker/date-range-picker.base.scss b/src/components/date-range-picker/date-range-picker.base.scss index bddbce749..add0f835b 100644 --- a/src/components/date-range-picker/date-range-picker.base.scss +++ b/src/components/date-range-picker/date-range-picker.base.scss @@ -29,6 +29,8 @@ ::part(helper-text) { @include type-style('caption'); @include line-clamp(2, true, true); + + overflow-wrap: anywhere; } slot[name='value-missing'] { diff --git a/src/components/input/themes/input.base.scss b/src/components/input/themes/input.base.scss index 22455cd35..66644d711 100644 --- a/src/components/input/themes/input.base.scss +++ b/src/components/input/themes/input.base.scss @@ -15,6 +15,8 @@ ::part(helper-text) { @include type-style('caption'); @include line-clamp(2, true, true); + + overflow-wrap: anywhere; } slot[name='value-missing'] { diff --git a/src/components/input/themes/shared/input.fluent.scss b/src/components/input/themes/shared/input.fluent.scss index 4c996ea43..f2945564c 100644 --- a/src/components/input/themes/shared/input.fluent.scss +++ b/src/components/input/themes/shared/input.fluent.scss @@ -44,8 +44,6 @@ $theme: $fluent; [part='label'] { @include type-style('subtitle-2') { - --ig-subtitle-2-line-height: #{rem(16px)}; - margin-block: 0 rem(5px); }; diff --git a/src/components/select/themes/select.base.scss b/src/components/select/themes/select.base.scss index 28d4f1f7e..2070b6d06 100644 --- a/src/components/select/themes/select.base.scss +++ b/src/components/select/themes/select.base.scss @@ -8,6 +8,8 @@ ::part(helper-text) { @include type-style('caption'); @include line-clamp(2, true, true); + + overflow-wrap: anywhere; } slot[name='value-missing'] { diff --git a/src/components/textarea/themes/shared/textarea.fluent.scss b/src/components/textarea/themes/shared/textarea.fluent.scss index 0acde272f..326cb85fe 100644 --- a/src/components/textarea/themes/shared/textarea.fluent.scss +++ b/src/components/textarea/themes/shared/textarea.fluent.scss @@ -19,8 +19,6 @@ $border-size: rem(1px); [part~='label'] { @include type-style('subtitle-2') { - --ig-subtitle-2-line-height: #{rem(16px)}; - margin-block: 0 pad-block(rem(5px)); }; From 7d9980f70bbcfcf298a13fc5bf184275c7a036b7 Mon Sep 17 00:00:00 2001 From: sivanova Date: Wed, 15 Oct 2025 16:49:21 +0300 Subject: [PATCH 10/12] fix(textarea): material padding --- .../textarea/themes/shared/textarea.material.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/textarea/themes/shared/textarea.material.scss b/src/components/textarea/themes/shared/textarea.material.scss index d3a397952..5e6ef65df 100644 --- a/src/components/textarea/themes/shared/textarea.material.scss +++ b/src/components/textarea/themes/shared/textarea.material.scss @@ -12,6 +12,12 @@ $input-bottom-padding: rem(6px); --affix-padding: #{pad-inline(rem(12px), rem(14px), rem(16px))}; --outlined-top-padding: #{sizable(rem(8px), rem(12px), rem(16px))}; + [part~='container']:not([part~='suffixed']) { + textarea { + padding-inline-end: #{pad-inline(rem(12px), rem(14px), rem(16px))}; + } + } + ::part(helper-text) { grid-auto-rows: minmax(rem(18px), auto); padding-inline: pad-inline(rem(12px), rem(14px), rem(16px)); From 9876db14792a10d306274605b9f31a4156ab19c1 Mon Sep 17 00:00:00 2001 From: sivanova Date: Tue, 21 Oct 2025 17:26:15 +0300 Subject: [PATCH 11/12] fix(input-group): merge issues --- package-lock.json | 97 +++++++------------ .../themes/shared/date-picker.material.scss | 1 + 2 files changed, 36 insertions(+), 62 deletions(-) diff --git a/package-lock.json b/package-lock.json index 87c29ad31..7223c82bb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -37,8 +37,8 @@ "globby": "^15.0.0", "husky": "^9.1.7", "ig-typedoc-theme": "^6.2.3", + "igniteui-i18n-resources": "0.6.0-alpha.4", "igniteui-theming": "^21.0.2", - "igniteui-i18n-resources": "0.6.0-alpha.4" "keep-a-changelog": "^2.7.1", "lint-staged": "^16.2.5", "lit-analyzer": "^2.0.3", @@ -368,6 +368,7 @@ } ], "license": "MIT", + "peer": true, "engines": { "node": ">=18" }, @@ -391,6 +392,7 @@ } ], "license": "MIT", + "peer": true, "engines": { "node": ">=18" } @@ -2191,7 +2193,6 @@ "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-3.13.0.tgz", "integrity": "sha512-3P8rGsg2Eh2qIHekwuQjzWhKI4jV97PhvYjYUzGqjvJfqdQPz+nMlfWahU24GZAyW1FxFI1sYjyhfh5CoLmIUA==", "license": "MIT", - "peer": true, "dependencies": { "@shikijs/types": "3.13.0", "@shikijs/vscode-textmate": "^10.0.2", @@ -2204,7 +2205,6 @@ "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-3.13.0.tgz", "integrity": "sha512-Ty7xv32XCp8u0eQt8rItpMs6rU9Ki6LJ1dQOW3V/56PKDcpvfHPnYFbsx5FFUP2Yim34m/UkazidamMNVR4vKg==", "license": "MIT", - "peer": true, "dependencies": { "@shikijs/types": "3.13.0", "@shikijs/vscode-textmate": "^10.0.2", @@ -2216,7 +2216,6 @@ "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-3.13.0.tgz", "integrity": "sha512-O42rBGr4UDSlhT2ZFMxqM7QzIU+IcpoTMzb3W7AlziI1ZF7R8eS2M0yt5Ry35nnnTX/LTLXFPUjRFCIW+Operg==", "license": "MIT", - "peer": true, "dependencies": { "@shikijs/types": "3.13.0", "@shikijs/vscode-textmate": "^10.0.2" @@ -2227,7 +2226,6 @@ "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-3.13.0.tgz", "integrity": "sha512-672c3WAETDYHwrRP0yLy3W1QYB89Hbpj+pO4KhxK6FzIrDI2FoEXNiNCut6BQmEApYLfuYfpgOZaqbY+E9b8wQ==", "license": "MIT", - "peer": true, "dependencies": { "@shikijs/types": "3.13.0" } @@ -2237,7 +2235,6 @@ "resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-3.13.0.tgz", "integrity": "sha512-Vxw1Nm1/Od8jyA7QuAenaV78BG2nSr3/gCGdBkLpfLscddCkzkL36Q5b67SrLLfvAJTOUzW39x4FHVCFriPVgg==", "license": "MIT", - "peer": true, "dependencies": { "@shikijs/types": "3.13.0" } @@ -2247,7 +2244,6 @@ "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.13.0.tgz", "integrity": "sha512-oM9P+NCFri/mmQ8LoFGVfVyemm5Hi27330zuOBp0annwJdKH1kOLndw3zCtAVDehPLg9fKqoEx3Ht/wNZxolfw==", "license": "MIT", - "peer": true, "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" @@ -2675,8 +2671,7 @@ "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz", "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/@types/babel__code-frame": { "version": "7.0.6", @@ -2913,7 +2908,6 @@ "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz", "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==", "license": "MIT", - "peer": true, "dependencies": { "@types/unist": "*" } @@ -3252,8 +3246,7 @@ "version": "1.3.0", "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz", "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==", - "license": "ISC", - "peer": true + "license": "ISC" }, "node_modules/@vitest/expect": { "version": "3.2.4", @@ -4619,6 +4612,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.3", "caniuse-lite": "^1.0.30001741", @@ -4800,7 +4794,6 @@ "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz", "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==", "license": "MIT", - "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -4879,7 +4872,6 @@ "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz", "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==", "license": "MIT", - "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -4890,7 +4882,6 @@ "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz", "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==", "license": "MIT", - "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -5153,7 +5144,6 @@ "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz", "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==", "license": "MIT", - "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -5461,8 +5451,7 @@ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/custom-element-jet-brains-integration": { "version": "1.7.0", @@ -5864,7 +5853,6 @@ "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz", "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==", "license": "MIT", - "peer": true, "dependencies": { "dequal": "^2.0.0" }, @@ -5878,7 +5866,8 @@ "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1495869.tgz", "integrity": "sha512-i+bkd9UYFis40RcnkW7XrOprCujXRAHg62IVh/Ah3G8MmNXpCGt1m0dTFhSdx/AVs8XEMbdOGRwdkR1Bcta8AA==", "dev": true, - "license": "BSD-3-Clause" + "license": "BSD-3-Clause", + "peer": true }, "node_modules/didyoumean2": { "version": "4.1.0", @@ -5933,8 +5922,7 @@ "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz", "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/dompurify": { "version": "3.3.0", @@ -6286,6 +6274,7 @@ "dev": true, "hasInstallScript": true, "license": "MIT", + "peer": true, "bin": { "esbuild": "bin/esbuild" }, @@ -7246,7 +7235,6 @@ "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.5.tgz", "integrity": "sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==", "license": "MIT", - "peer": true, "dependencies": { "@types/hast": "^3.0.0", "@types/unist": "^3.0.0", @@ -7270,7 +7258,6 @@ "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz", "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==", "license": "MIT", - "peer": true, "dependencies": { "@types/hast": "^3.0.0" }, @@ -7311,7 +7298,6 @@ "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz", "integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==", "license": "MIT", - "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -7564,9 +7550,9 @@ } }, "node_modules/igniteui-theming": { - "version": "21.0.2", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-21.0.2.tgz", - "integrity": "sha512-RXs8b3PThVlS1FhLeUT9TlLMcPoNAiwJm/L+jHU7jrwsgZU7gGjipjEbQQRe97AURyTxgXKiC4M8CAuUilWQ2A==", + "version": "20.0.0", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-20.0.0.tgz", + "integrity": "sha512-g+pxAskmX1g0wlwaO0MPcT8sMTbr3rzSEOJRWg26FBKcVE09cxPEbX2Vl9k7LdbBc5VdDoiAgsI9yvZhAUM0Xg==", "dev": true, "license": "MIT" }, @@ -8573,6 +8559,7 @@ "resolved": "https://registry.npmjs.org/lit/-/lit-3.3.1.tgz", "integrity": "sha512-Ksr/8L3PTapbdXJCk+EJVB78jDodUMaP54gD24W186zGRARvwrsPfS60wae/SSCTCNZVPd1chXqio1qHQmu4NA==", "license": "BSD-3-Clause", + "peer": true, "dependencies": { "@lit/reactive-element": "^2.1.0", "lit-element": "^4.2.0", @@ -8864,7 +8851,6 @@ "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==", "dev": true, "license": "MIT", - "peer": true, "bin": { "lz-string": "bin/bin.js" } @@ -9054,7 +9040,6 @@ "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.0.tgz", "integrity": "sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==", "license": "MIT", - "peer": true, "dependencies": { "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", @@ -9140,7 +9125,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" @@ -9160,8 +9144,7 @@ "url": "https://opencollective.com/unified" } ], - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/micromark-util-sanitize-uri": { "version": "2.0.1", @@ -9178,7 +9161,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "micromark-util-character": "^2.0.0", "micromark-util-encode": "^2.0.0", @@ -9199,8 +9181,7 @@ "url": "https://opencollective.com/unified" } ], - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/micromark-util-types": { "version": "2.0.2", @@ -9216,8 +9197,7 @@ "url": "https://opencollective.com/unified" } ], - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/micromatch": { "version": "4.0.8", @@ -9604,15 +9584,13 @@ "version": "0.12.1", "resolved": "https://registry.npmjs.org/oniguruma-parser/-/oniguruma-parser-0.12.1.tgz", "integrity": "sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/oniguruma-to-es": { "version": "4.3.3", "resolved": "https://registry.npmjs.org/oniguruma-to-es/-/oniguruma-to-es-4.3.3.tgz", "integrity": "sha512-rPiZhzC3wXwE59YQMRDodUwwT9FZ9nNBwQQfsd1wfdtlKEyCdRV0avrTcSZ5xlIvGRVPd/cx6ZN45ECmS39xvg==", "license": "MIT", - "peer": true, "dependencies": { "oniguruma-parser": "^0.12.1", "regex": "^6.0.1", @@ -10112,6 +10090,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -10195,6 +10174,7 @@ "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -10274,6 +10254,7 @@ "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==", "dev": true, "license": "MIT", + "peer": true, "bin": { "prettier": "bin/prettier.cjs" }, @@ -10303,7 +10284,6 @@ "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "ansi-regex": "^5.0.1", "ansi-styles": "^5.0.0", @@ -10319,7 +10299,6 @@ "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=10" }, @@ -10358,7 +10337,6 @@ "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.1.0.tgz", "integrity": "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==", "license": "MIT", - "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -10642,6 +10620,7 @@ "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -10652,6 +10631,7 @@ "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "scheduler": "^0.26.0" }, @@ -10664,8 +10644,7 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/readable-stream": { "version": "3.6.2", @@ -10754,7 +10733,6 @@ "resolved": "https://registry.npmjs.org/regex/-/regex-6.0.1.tgz", "integrity": "sha512-uorlqlzAKjKQZ5P+kTJr3eeJGSVroLKoHmquUj4zHWuR+hEyNqlXsSKlYYF5F4NI6nl7tWCs0apKJ0lmfsXAPA==", "license": "MIT", - "peer": true, "dependencies": { "regex-utilities": "^2.3.0" } @@ -10764,7 +10742,6 @@ "resolved": "https://registry.npmjs.org/regex-recursion/-/regex-recursion-6.0.2.tgz", "integrity": "sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==", "license": "MIT", - "peer": true, "dependencies": { "regex-utilities": "^2.3.0" } @@ -10773,8 +10750,7 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/regex-utilities/-/regex-utilities-2.3.0.tgz", "integrity": "sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/require-directory": { "version": "2.1.1", @@ -11047,6 +11023,7 @@ "integrity": "sha512-BgLRGy7tNS9H66aIMASq1qSYbAAJV6Z6WR4QYTvj5FgF15rZ/ympT1uixHXwzbZUBDbkvqUI1KR0fH1FhMaQ9w==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@types/estree": "1.0.8" }, @@ -12333,7 +12310,6 @@ "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz", "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==", "license": "MIT", - "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -12355,6 +12331,7 @@ "integrity": "sha512-G3KZ36EVzXyHds72B/qtWiJnhUpM0xOUeYlDcO9DSHL1bDTv15cW4+upBl+mcBZrDvU838cn7Bv4GpF+O5MCfw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@storybook/global": "^5.0.0", "@testing-library/jest-dom": "^6.6.3", @@ -12552,7 +12529,6 @@ "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz", "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==", "license": "MIT", - "peer": true, "dependencies": { "character-entities-html4": "^2.0.0", "character-entities-legacy": "^3.0.0" @@ -12663,6 +12639,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "@csstools/css-parser-algorithms": "^3.0.5", "@csstools/css-tokenizer": "^3.0.4", @@ -13229,6 +13206,7 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -13307,7 +13285,6 @@ "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz", "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==", "license": "MIT", - "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -13461,6 +13438,7 @@ "integrity": "sha512-/z585740YHURLl9DN2jCWe6OW7zKYm6VoQ93H0sxZ1cwHQEQrUn5BJrEnkWhfzUdyO+BLGjnKUZ9iz9hKloFDw==", "dev": true, "license": "Apache-2.0", + "peer": true, "dependencies": { "@gerrit0/mini-shiki": "^1.24.0", "lunr": "^2.3.9", @@ -13558,6 +13536,7 @@ "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==", "dev": true, "license": "Apache-2.0", + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -13635,7 +13614,6 @@ "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz", "integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==", "license": "MIT", - "peer": true, "dependencies": { "@types/unist": "^3.0.0" }, @@ -13649,7 +13627,6 @@ "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz", "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==", "license": "MIT", - "peer": true, "dependencies": { "@types/unist": "^3.0.0" }, @@ -13663,7 +13640,6 @@ "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz", "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==", "license": "MIT", - "peer": true, "dependencies": { "@types/unist": "^3.0.0" }, @@ -13677,7 +13653,6 @@ "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz", "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==", "license": "MIT", - "peer": true, "dependencies": { "@types/unist": "^3.0.0", "unist-util-is": "^6.0.0", @@ -13693,7 +13668,6 @@ "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz", "integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==", "license": "MIT", - "peer": true, "dependencies": { "@types/unist": "^3.0.0", "unist-util-is": "^6.0.0" @@ -13822,7 +13796,6 @@ "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz", "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==", "license": "MIT", - "peer": true, "dependencies": { "@types/unist": "^3.0.0", "vfile-message": "^4.0.0" @@ -13837,7 +13810,6 @@ "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.3.tgz", "integrity": "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==", "license": "MIT", - "peer": true, "dependencies": { "@types/unist": "^3.0.0", "unist-util-stringify-position": "^4.0.0" @@ -13853,6 +13825,7 @@ "integrity": "sha512-uzcxnSDVjAopEUjljkWh8EIrg6tlzrjFUfMcR1EVsRDGwf/ccef0qQPRyOrROwhrTDaApueq+ja+KLPlzR/zdg==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", @@ -13946,6 +13919,7 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -14429,11 +14403,10 @@ "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz", "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==", "license": "MIT", - "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" } } } -} +} \ No newline at end of file diff --git a/src/components/date-picker/themes/shared/date-picker.material.scss b/src/components/date-picker/themes/shared/date-picker.material.scss index e108f5ffb..54c6d477c 100644 --- a/src/components/date-picker/themes/shared/date-picker.material.scss +++ b/src/components/date-picker/themes/shared/date-picker.material.scss @@ -6,6 +6,7 @@ $theme: $material; :host { ::part(helper-text) { padding-inline: pad-inline(rem(12px), rem(14px), rem(16px)); + } } :host([outlined]) { From ecacf3e93a7fa1c351a894f8983e0b16d304534c Mon Sep 17 00:00:00 2001 From: sivanova Date: Tue, 21 Oct 2025 17:35:31 +0300 Subject: [PATCH 12/12] fix(packages): theming version --- package-lock.json | 96 ++++++++++++++++++++++++++++++----------------- package.json | 6 +-- 2 files changed, 64 insertions(+), 38 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7223c82bb..653f4b456 100644 --- a/package-lock.json +++ b/package-lock.json @@ -368,7 +368,6 @@ } ], "license": "MIT", - "peer": true, "engines": { "node": ">=18" }, @@ -392,7 +391,6 @@ } ], "license": "MIT", - "peer": true, "engines": { "node": ">=18" } @@ -2193,6 +2191,7 @@ "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-3.13.0.tgz", "integrity": "sha512-3P8rGsg2Eh2qIHekwuQjzWhKI4jV97PhvYjYUzGqjvJfqdQPz+nMlfWahU24GZAyW1FxFI1sYjyhfh5CoLmIUA==", "license": "MIT", + "peer": true, "dependencies": { "@shikijs/types": "3.13.0", "@shikijs/vscode-textmate": "^10.0.2", @@ -2205,6 +2204,7 @@ "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-3.13.0.tgz", "integrity": "sha512-Ty7xv32XCp8u0eQt8rItpMs6rU9Ki6LJ1dQOW3V/56PKDcpvfHPnYFbsx5FFUP2Yim34m/UkazidamMNVR4vKg==", "license": "MIT", + "peer": true, "dependencies": { "@shikijs/types": "3.13.0", "@shikijs/vscode-textmate": "^10.0.2", @@ -2216,6 +2216,7 @@ "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-3.13.0.tgz", "integrity": "sha512-O42rBGr4UDSlhT2ZFMxqM7QzIU+IcpoTMzb3W7AlziI1ZF7R8eS2M0yt5Ry35nnnTX/LTLXFPUjRFCIW+Operg==", "license": "MIT", + "peer": true, "dependencies": { "@shikijs/types": "3.13.0", "@shikijs/vscode-textmate": "^10.0.2" @@ -2226,6 +2227,7 @@ "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-3.13.0.tgz", "integrity": "sha512-672c3WAETDYHwrRP0yLy3W1QYB89Hbpj+pO4KhxK6FzIrDI2FoEXNiNCut6BQmEApYLfuYfpgOZaqbY+E9b8wQ==", "license": "MIT", + "peer": true, "dependencies": { "@shikijs/types": "3.13.0" } @@ -2235,6 +2237,7 @@ "resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-3.13.0.tgz", "integrity": "sha512-Vxw1Nm1/Od8jyA7QuAenaV78BG2nSr3/gCGdBkLpfLscddCkzkL36Q5b67SrLLfvAJTOUzW39x4FHVCFriPVgg==", "license": "MIT", + "peer": true, "dependencies": { "@shikijs/types": "3.13.0" } @@ -2244,6 +2247,7 @@ "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.13.0.tgz", "integrity": "sha512-oM9P+NCFri/mmQ8LoFGVfVyemm5Hi27330zuOBp0annwJdKH1kOLndw3zCtAVDehPLg9fKqoEx3Ht/wNZxolfw==", "license": "MIT", + "peer": true, "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" @@ -2671,7 +2675,8 @@ "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz", "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==", "dev": true, - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/@types/babel__code-frame": { "version": "7.0.6", @@ -2908,6 +2913,7 @@ "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz", "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==", "license": "MIT", + "peer": true, "dependencies": { "@types/unist": "*" } @@ -3246,7 +3252,8 @@ "version": "1.3.0", "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz", "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==", - "license": "ISC" + "license": "ISC", + "peer": true }, "node_modules/@vitest/expect": { "version": "3.2.4", @@ -4612,7 +4619,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.3", "caniuse-lite": "^1.0.30001741", @@ -4794,6 +4800,7 @@ "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz", "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==", "license": "MIT", + "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -4872,6 +4879,7 @@ "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz", "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==", "license": "MIT", + "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -4882,6 +4890,7 @@ "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz", "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==", "license": "MIT", + "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -5144,6 +5153,7 @@ "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz", "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==", "license": "MIT", + "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -5451,7 +5461,8 @@ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", "dev": true, - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/custom-element-jet-brains-integration": { "version": "1.7.0", @@ -5853,6 +5864,7 @@ "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz", "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==", "license": "MIT", + "peer": true, "dependencies": { "dequal": "^2.0.0" }, @@ -5866,8 +5878,7 @@ "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1495869.tgz", "integrity": "sha512-i+bkd9UYFis40RcnkW7XrOprCujXRAHg62IVh/Ah3G8MmNXpCGt1m0dTFhSdx/AVs8XEMbdOGRwdkR1Bcta8AA==", "dev": true, - "license": "BSD-3-Clause", - "peer": true + "license": "BSD-3-Clause" }, "node_modules/didyoumean2": { "version": "4.1.0", @@ -5922,7 +5933,8 @@ "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz", "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==", "dev": true, - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/dompurify": { "version": "3.3.0", @@ -6274,7 +6286,6 @@ "dev": true, "hasInstallScript": true, "license": "MIT", - "peer": true, "bin": { "esbuild": "bin/esbuild" }, @@ -7235,6 +7246,7 @@ "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.5.tgz", "integrity": "sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==", "license": "MIT", + "peer": true, "dependencies": { "@types/hast": "^3.0.0", "@types/unist": "^3.0.0", @@ -7258,6 +7270,7 @@ "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz", "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==", "license": "MIT", + "peer": true, "dependencies": { "@types/hast": "^3.0.0" }, @@ -7298,6 +7311,7 @@ "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz", "integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==", "license": "MIT", + "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -7544,15 +7558,14 @@ "integrity": "sha512-QAF7pH/TDD7jkbDdNYEsQ/s5m9AED9l8Wtp2lkOLJCgGP6VbGULWeyRuAplK1IlIVWS0oUbkoi57NAnDc3nz8A==", "devOptional": true, "license": "MIT", - "peer": true, "dependencies": { "igniteui-i18n-core": "0.6.0-alpha.4" } }, "node_modules/igniteui-theming": { - "version": "20.0.0", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-20.0.0.tgz", - "integrity": "sha512-g+pxAskmX1g0wlwaO0MPcT8sMTbr3rzSEOJRWg26FBKcVE09cxPEbX2Vl9k7LdbBc5VdDoiAgsI9yvZhAUM0Xg==", + "version": "21.0.2", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-21.0.2.tgz", + "integrity": "sha512-RXs8b3PThVlS1FhLeUT9TlLMcPoNAiwJm/L+jHU7jrwsgZU7gGjipjEbQQRe97AURyTxgXKiC4M8CAuUilWQ2A==", "dev": true, "license": "MIT" }, @@ -8559,7 +8572,6 @@ "resolved": "https://registry.npmjs.org/lit/-/lit-3.3.1.tgz", "integrity": "sha512-Ksr/8L3PTapbdXJCk+EJVB78jDodUMaP54gD24W186zGRARvwrsPfS60wae/SSCTCNZVPd1chXqio1qHQmu4NA==", "license": "BSD-3-Clause", - "peer": true, "dependencies": { "@lit/reactive-element": "^2.1.0", "lit-element": "^4.2.0", @@ -8851,6 +8863,7 @@ "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==", "dev": true, "license": "MIT", + "peer": true, "bin": { "lz-string": "bin/bin.js" } @@ -9040,6 +9053,7 @@ "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.0.tgz", "integrity": "sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==", "license": "MIT", + "peer": true, "dependencies": { "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", @@ -9125,6 +9139,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" @@ -9144,7 +9159,8 @@ "url": "https://opencollective.com/unified" } ], - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/micromark-util-sanitize-uri": { "version": "2.0.1", @@ -9161,6 +9177,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "micromark-util-character": "^2.0.0", "micromark-util-encode": "^2.0.0", @@ -9181,7 +9198,8 @@ "url": "https://opencollective.com/unified" } ], - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/micromark-util-types": { "version": "2.0.2", @@ -9197,7 +9215,8 @@ "url": "https://opencollective.com/unified" } ], - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/micromatch": { "version": "4.0.8", @@ -9584,13 +9603,15 @@ "version": "0.12.1", "resolved": "https://registry.npmjs.org/oniguruma-parser/-/oniguruma-parser-0.12.1.tgz", "integrity": "sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w==", - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/oniguruma-to-es": { "version": "4.3.3", "resolved": "https://registry.npmjs.org/oniguruma-to-es/-/oniguruma-to-es-4.3.3.tgz", "integrity": "sha512-rPiZhzC3wXwE59YQMRDodUwwT9FZ9nNBwQQfsd1wfdtlKEyCdRV0avrTcSZ5xlIvGRVPd/cx6ZN45ECmS39xvg==", "license": "MIT", + "peer": true, "dependencies": { "oniguruma-parser": "^0.12.1", "regex": "^6.0.1", @@ -10090,7 +10111,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -10174,7 +10194,6 @@ "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -10254,7 +10273,6 @@ "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==", "dev": true, "license": "MIT", - "peer": true, "bin": { "prettier": "bin/prettier.cjs" }, @@ -10284,6 +10302,7 @@ "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "ansi-regex": "^5.0.1", "ansi-styles": "^5.0.0", @@ -10299,6 +10318,7 @@ "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=10" }, @@ -10337,6 +10357,7 @@ "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.1.0.tgz", "integrity": "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==", "license": "MIT", + "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -10620,7 +10641,6 @@ "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -10631,7 +10651,6 @@ "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "scheduler": "^0.26.0" }, @@ -10644,7 +10663,8 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "dev": true, - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/readable-stream": { "version": "3.6.2", @@ -10733,6 +10753,7 @@ "resolved": "https://registry.npmjs.org/regex/-/regex-6.0.1.tgz", "integrity": "sha512-uorlqlzAKjKQZ5P+kTJr3eeJGSVroLKoHmquUj4zHWuR+hEyNqlXsSKlYYF5F4NI6nl7tWCs0apKJ0lmfsXAPA==", "license": "MIT", + "peer": true, "dependencies": { "regex-utilities": "^2.3.0" } @@ -10742,6 +10763,7 @@ "resolved": "https://registry.npmjs.org/regex-recursion/-/regex-recursion-6.0.2.tgz", "integrity": "sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==", "license": "MIT", + "peer": true, "dependencies": { "regex-utilities": "^2.3.0" } @@ -10750,7 +10772,8 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/regex-utilities/-/regex-utilities-2.3.0.tgz", "integrity": "sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==", - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/require-directory": { "version": "2.1.1", @@ -11023,7 +11046,6 @@ "integrity": "sha512-BgLRGy7tNS9H66aIMASq1qSYbAAJV6Z6WR4QYTvj5FgF15rZ/ympT1uixHXwzbZUBDbkvqUI1KR0fH1FhMaQ9w==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@types/estree": "1.0.8" }, @@ -12310,6 +12332,7 @@ "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz", "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==", "license": "MIT", + "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -12331,7 +12354,6 @@ "integrity": "sha512-G3KZ36EVzXyHds72B/qtWiJnhUpM0xOUeYlDcO9DSHL1bDTv15cW4+upBl+mcBZrDvU838cn7Bv4GpF+O5MCfw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@storybook/global": "^5.0.0", "@testing-library/jest-dom": "^6.6.3", @@ -12529,6 +12551,7 @@ "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz", "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==", "license": "MIT", + "peer": true, "dependencies": { "character-entities-html4": "^2.0.0", "character-entities-legacy": "^3.0.0" @@ -12639,7 +12662,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "@csstools/css-parser-algorithms": "^3.0.5", "@csstools/css-tokenizer": "^3.0.4", @@ -13206,7 +13228,6 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -13285,6 +13306,7 @@ "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz", "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==", "license": "MIT", + "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -13438,7 +13460,6 @@ "integrity": "sha512-/z585740YHURLl9DN2jCWe6OW7zKYm6VoQ93H0sxZ1cwHQEQrUn5BJrEnkWhfzUdyO+BLGjnKUZ9iz9hKloFDw==", "dev": true, "license": "Apache-2.0", - "peer": true, "dependencies": { "@gerrit0/mini-shiki": "^1.24.0", "lunr": "^2.3.9", @@ -13536,7 +13557,6 @@ "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==", "dev": true, "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -13614,6 +13634,7 @@ "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz", "integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==", "license": "MIT", + "peer": true, "dependencies": { "@types/unist": "^3.0.0" }, @@ -13627,6 +13648,7 @@ "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz", "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==", "license": "MIT", + "peer": true, "dependencies": { "@types/unist": "^3.0.0" }, @@ -13640,6 +13662,7 @@ "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz", "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==", "license": "MIT", + "peer": true, "dependencies": { "@types/unist": "^3.0.0" }, @@ -13653,6 +13676,7 @@ "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz", "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==", "license": "MIT", + "peer": true, "dependencies": { "@types/unist": "^3.0.0", "unist-util-is": "^6.0.0", @@ -13668,6 +13692,7 @@ "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz", "integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==", "license": "MIT", + "peer": true, "dependencies": { "@types/unist": "^3.0.0", "unist-util-is": "^6.0.0" @@ -13796,6 +13821,7 @@ "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz", "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==", "license": "MIT", + "peer": true, "dependencies": { "@types/unist": "^3.0.0", "vfile-message": "^4.0.0" @@ -13810,6 +13836,7 @@ "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.3.tgz", "integrity": "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==", "license": "MIT", + "peer": true, "dependencies": { "@types/unist": "^3.0.0", "unist-util-stringify-position": "^4.0.0" @@ -13825,7 +13852,6 @@ "integrity": "sha512-uzcxnSDVjAopEUjljkWh8EIrg6tlzrjFUfMcR1EVsRDGwf/ccef0qQPRyOrROwhrTDaApueq+ja+KLPlzR/zdg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", @@ -13919,7 +13945,6 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -14403,10 +14428,11 @@ "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz", "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==", "license": "MIT", + "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" } } } -} \ No newline at end of file +} diff --git a/package.json b/package.json index 5984a3791..32e767e51 100644 --- a/package.json +++ b/package.json @@ -56,8 +56,8 @@ "@floating-ui/dom": "^1.7.4", "@lit-labs/virtualizer": "^2.1.1", "@lit/context": "^1.1.6", - "lit": "^3.3.1", - "igniteui-i18n-core": "0.6.0-alpha.4" + "igniteui-i18n-core": "0.6.0-alpha.4", + "lit": "^3.3.1" }, "devDependencies": { "@biomejs/biome": "~2.2.6", @@ -81,8 +81,8 @@ "globby": "^15.0.0", "husky": "^9.1.7", "ig-typedoc-theme": "^6.2.3", - "igniteui-theming": "^21.0.2", "igniteui-i18n-resources": "0.6.0-alpha.4", + "igniteui-theming": "^21.0.2", "keep-a-changelog": "^2.7.1", "lint-staged": "^16.2.5", "lit-analyzer": "^2.0.3",