diff --git a/src/lib/chip-field/chip-field.test.ts b/src/lib/chip-field/chip-field.test.ts index 4a64c2062..473fb20e3 100644 --- a/src/lib/chip-field/chip-field.test.ts +++ b/src/lib/chip-field/chip-field.test.ts @@ -11,6 +11,7 @@ import './chip-field'; import { CHIP_FIELD_CONSTANTS } from './chip-field-constants'; import { IChipComponent } from '../chips'; import { LABEL_CONSTANTS } from '../label/label-constants'; +import { timer } from '@tylertech/forge-testing'; describe('Chip Field', () => { it('should use shadow DOM', async () => { @@ -27,7 +28,7 @@ describe('Chip Field', () => { it('should be accessible with chips', async () => { const harness = await createFixture({ hasChips: true }); - + await timer(200); // Wait for the field animation to complete await expect(harness.chipField).to.be.accessible(); }); diff --git a/src/lib/field/_core.layout.scss b/src/lib/field/_core.layout.scss index 2f53c61ff..c40872360 100644 --- a/src/lib/field/_core.layout.scss +++ b/src/lib/field/_core.layout.scss @@ -100,6 +100,8 @@ @include typography.style(body2); @include item-padding(start, outer); @include item-padding(end, outer); + + z-index: 999; } // diff --git a/src/lib/field/_core.scss b/src/lib/field/_core.scss index eac361a66..64c7dfa2e 100644 --- a/src/lib/field/_core.scss +++ b/src/lib/field/_core.scss @@ -85,6 +85,7 @@ position: relative; display: grid; + isolation: isolate; grid-area: main; grid-template-areas: 'start center end popover-icon accessory'; diff --git a/src/lib/field/_core.slotted.scss b/src/lib/field/_core.slotted.scss index 86030b977..1bcd27817 100644 --- a/src/lib/field/_core.slotted.scss +++ b/src/lib/field/_core.slotted.scss @@ -24,6 +24,14 @@ resize: none; } +@mixin default-slot-floating-in { + position: absolute; + inset-block-start: calc(#{token(height)} * -0.5); + + block-size: 100%; + padding-block: #{token(height)}; +} + @mixin slotted-inset-label { max-inline-size: 100%; overflow: hidden; diff --git a/src/lib/field/field.scss b/src/lib/field/field.scss index 7491381e5..068a0b3ea 100644 --- a/src/lib/field/field.scss +++ b/src/lib/field/field.scss @@ -421,7 +421,7 @@ $variants: ( // Floating label // -:host(#{map.get($label-positions, inset)}[float-label]:not(:is([dense], [density=extra-small]))) { +:host(#{map.get($label-positions, inset)}[float-label]:not(#{map.get($densities, extra-small)})) { .has-label { .label { @include core.floating-label; @@ -438,6 +438,10 @@ $variants: ( .input { @include core.float-in-input; + + ::slotted(:is(input, [data-forge-field-input], [data-forge-multi-input-separator])) { + @include core.default-slot-floating-in; + } } }