@taiga-ui/core 4.52.0-canary.6be767f → 4.52.0-canary.6de148b

package/fesm2022/taiga-ui-core-components-cell.mjs

@@ -8,11 +8,11 @@ const [TUI_CELL_OPTIONS, tuiCellOptionsProvider] = tuiCreateOptions({ height: 'n
 
 class Styles {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: Styles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: Styles, isStandalone: true, selector: "ng-component", host: { classAttribute: "tui-cell" }, ngImport: i0, template: '', isInline: true, styles: ["[tuiCell]{--t-padding: .125rem 1rem;--t-radius: var(--tui-radius-s);-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;position:relative;display:flex;align-items:center;box-sizing:content-box;isolation:isolate;color:var(--tui-text-primary);padding:var(--t-padding);min-block-size:var(--t-height);border-radius:var(--t-radius)}[tuiCell]:disabled,[tuiCell][data-state=disabled]{opacity:initial;pointer-events:none}[tuiCell]:disabled>*:not([tuiTooltip]),[tuiCell][data-state=disabled]>*:not([tuiTooltip]){opacity:var(--tui-disabled-opacity)}[tuiCell]:is(label):has(input:disabled){opacity:initial;pointer-events:none}[tuiCell]:is(label):has(input:disabled)>*:not([tuiTooltip]){opacity:var(--tui-disabled-opacity)}[tuiCell] [tuiAccessories]{position:relative;display:flex;max-block-size:var(--t-height);align-items:center;align-self:stretch}[tuiCell] [tuiCellActions][tuiCellActions]{position:absolute;right:0;z-index:1;padding-inline-end:inherit;--t-group-mask: none;--t-group-mask-end: none;--t-group-mask-start: none}[tuiCell] [tuiCellActions][tuiCellActions]~*{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out}[tuiCell] [tuiCellActions][tuiCellActions] button,[tuiCell] [tuiCellActions][tuiCellActions] a{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;opacity:0}[tuiCell] [tuiCellActions][tuiCellActions] button:focus-visible,[tuiCell] [tuiCellActions][tuiCellActions] a:focus-visible{opacity:1}[tuiCell] [tuiSubtitle]{display:flex;align-items:center;gap:.25rem;color:var(--tui-text-secondary)}[tuiCell] [tuiTitle]{flex-shrink:7;margin-inline-end:auto;align-items:normal;text-align:start}[tuiCell] [tuiTitle]~[tuiTitle]{flex-shrink:3;margin-inline-end:0;text-align:end;align-items:flex-end}[tuiCell] [tuiTitle]~[tuiTitle][tuiFade]{align-items:flex-start}[tuiCell] tui-badge-notification[data-size=xs]{position:absolute;top:50%;transform:translateY(-50%);left:-.625rem}[tuiCell][data-size=s]{--t-height: calc(var(--tui-height-s) - .125rem);--t-padding: .1875rem 1rem}[tuiCell][data-size=s][data-height=spacious]{--t-padding: .4375rem 1rem}[tuiCell][data-size=s][data-height=compact]{--t-height: calc(var(--tui-height-s) - .25rem);--t-padding: 0 1rem}[tuiCell][data-size=s] [tuiTitle]{max-block-size:100%;font:var(--tui-font-text-ui-s);gap:0}[tuiCell][data-size=s] [tuiSubtitle]{font:var(--tui-font-text-ui-xs)}[tuiCell][data-size=s]>*:not(:first-child),[tuiCell][data-size=s]>[tuiAccessories]>*:not(:first-child){margin-inline-start:.5rem}[tuiCell][data-size=s]>[tuiAvatar],[tuiCell][data-size=s]>tui-avatar-stack [tuiAvatar],[tuiCell][data-size=s]>[tuiAccessories] [tuiAvatar],[tuiCell][data-size=s]>[tuiAccessories] tui-avatar-stack [tuiAvatar]{--t-size: 1.5rem;font:var(--tui-font-text-m);font-size:.5625rem}[tuiCell][data-size=m]{--t-height: calc(var(--tui-height-m) - .75rem);--t-padding: .375rem 1rem}[tuiCell][data-size=m][data-height=spacious]{--t-padding: 1rem}[tuiCell][data-size=m][data-height=compact]{--t-height: calc(var(--tui-height-m) - .5rem);--t-padding: 0 1rem}[tuiCell][data-size=m] [tuiTitle]{font:var(--tui-font-text-ui-s);gap:.125rem}[tuiCell][data-size=m] [tuiSubtitle]{font:var(--tui-font-text-ui-xs)}[tuiCell][data-size=m]>*:not(:first-child),[tuiCell][data-size=m]>[tuiAccessories]>*:not(:first-child){margin-inline-start:.5rem}[tuiCell][data-size=m]>[tuiAvatar],[tuiCell][data-size=m]>tui-avatar-stack [tuiAvatar],[tuiCell][data-size=m]>[tuiAccessories] [tuiAvatar],[tuiCell][data-size=m]>[tuiAccessories] tui-avatar-stack [tuiAvatar]{--t-size: 2rem;align-self:flex-start}[tuiCell][data-size=l]{--t-height: calc(var(--tui-height-l) - 1rem);--t-padding: .5rem 1rem;--t-radius: var(--tui-radius-l)}[tuiCell][data-size=l][data-height=spacious]{--t-padding: 1.25rem 1rem}[tuiCell][data-size=l][data-height=compact]{--t-height: calc(var(--tui-height-l) - 1rem);--t-padding: 0 1rem}[tuiCell][data-size=l]>*:not(:first-child),[tuiCell][data-size=l]>[tuiAccessories]>*:not(:first-child){margin-inline-start:1rem}[tuiCell][data-size=l]>[tuiAvatar],[tuiCell][data-size=l]>tui-avatar-stack [tuiAvatar],[tuiCell][data-size=l]>[tuiAccessories] [tuiAvatar],[tuiCell][data-size=l]>[tuiAccessories] tui-avatar-stack [tuiAvatar]{--t-size: 2.5rem;font:var(--tui-font-text-m);font-weight:700;align-self:flex-start}[tuiCell]:hover [tuiCellActions]~*{opacity:0}[tuiCell]:hover [tuiCellActions] button,[tuiCell]:hover [tuiCellActions] a,[tuiCell]:hover [tuiCellActions] label{opacity:1}[tuiCell]:focus-visible{outline:.125rem solid var(--tui-border-focus);outline-offset:-.125rem}[tuiOption] [tuiCell],tui-primitive-textfield [tuiCell],tui-textfield [tuiCell]{padding:0;white-space:nowrap;overflow:hidden;border-radius:0}@media (hover: hover) and (pointer: fine){a[tuiCell]:hover:not(:disabled,[data-state=disabled]),button[tuiCell]:hover:not(:disabled,[data-state=disabled]),label[tuiCell]:hover:not(:disabled,[data-state=disabled]){background:var(--tui-background-neutral-1);cursor:pointer}label[tuiCell]:hover:not(:has(input:disabled)){background:var(--tui-background-neutral-1);cursor:pointer}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: Styles, isStandalone: true, selector: "ng-component", host: { classAttribute: "tui-cell" }, ngImport: i0, template: '', isInline: true, styles: ["[tuiCell]{--t-padding: .125rem 1rem;--t-radius: var(--tui-radius-s);-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;position:relative;display:flex;align-items:center;text-align:start;box-sizing:content-box;isolation:isolate;color:var(--tui-text-primary);padding:var(--t-padding);min-block-size:var(--t-height);border-radius:var(--t-radius)}[tuiCell]:disabled,[tuiCell][data-state=disabled]{opacity:initial;pointer-events:none}[tuiCell]:disabled>*:not([tuiTooltip]),[tuiCell][data-state=disabled]>*:not([tuiTooltip]){opacity:var(--tui-disabled-opacity)}[tuiCell]:is(label):has(input:disabled){opacity:initial;pointer-events:none}[tuiCell]:is(label):has(input:disabled)>*:not([tuiTooltip]){opacity:var(--tui-disabled-opacity)}[tuiCell] [tuiAccessories]{position:relative;display:flex;max-block-size:var(--t-height);align-items:center;align-self:stretch}[tuiCell] [tuiCellActions][tuiCellActions]{position:absolute;right:0;z-index:1;padding-inline-end:inherit;--t-group-mask: none;--t-group-mask-end: none;--t-group-mask-start: none}[tuiCell] [tuiCellActions][tuiCellActions]~*{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out}[tuiCell] [tuiCellActions][tuiCellActions] button,[tuiCell] [tuiCellActions][tuiCellActions] a{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;opacity:0}[tuiCell] [tuiCellActions][tuiCellActions] button:focus-visible,[tuiCell] [tuiCellActions][tuiCellActions] a:focus-visible{opacity:1}[tuiCell] [tuiSubtitle]{display:flex;align-items:center;gap:.25rem;color:var(--tui-text-secondary)}[tuiCell] [tuiTitle]{flex-shrink:7;margin-inline-end:auto;align-items:normal;text-align:start}[tuiCell] [tuiTitle]~[tuiTitle]{flex-shrink:3;margin-inline-end:0;text-align:end;align-items:flex-end}[tuiCell] [tuiTitle]~[tuiTitle][tuiFade]{align-items:flex-start}[tuiCell] tui-badge-notification[data-size=xs]{position:absolute;top:50%;transform:translateY(-50%);left:-.625rem}[tuiCell][data-size=s]{--t-height: calc(var(--tui-height-s) - .125rem);--t-padding: .1875rem 1rem;gap:.5rem}[tuiCell][data-size=s][data-height=spacious]{--t-padding: .4375rem 1rem}[tuiCell][data-size=s][data-height=compact]{--t-height: calc(var(--tui-height-s) - .25rem);--t-padding: 0 1rem}[tuiCell][data-size=s] [tuiTitle]{max-block-size:100%;font:var(--tui-font-text-ui-s);gap:0}[tuiCell][data-size=s] [tuiSubtitle]{font:var(--tui-font-text-ui-xs)}[tuiCell][data-size=s]>[tuiAvatar],[tuiCell][data-size=s]>tui-avatar-stack [tuiAvatar],[tuiCell][data-size=s]>[tuiAccessories] [tuiAvatar],[tuiCell][data-size=s]>[tuiAccessories] tui-avatar-stack [tuiAvatar]{--t-size: 1.5rem;font:var(--tui-font-text-m);font-size:.5625rem}[tuiCell][data-size=m]{--t-height: calc(var(--tui-height-m) - .75rem);--t-padding: .375rem 1rem;gap:.75rem}[tuiCell][data-size=m][data-height=spacious]{--t-padding: 1rem}[tuiCell][data-size=m][data-height=compact]{--t-height: calc(var(--tui-height-m) - .5rem);--t-padding: 0 1rem}[tuiCell][data-size=m] [tuiTitle]{font:var(--tui-font-text-ui-s);gap:.125rem}[tuiCell][data-size=m] [tuiSubtitle]{font:var(--tui-font-text-ui-xs)}[tuiCell][data-size=m]>[tuiAvatar],[tuiCell][data-size=m]>tui-avatar-stack [tuiAvatar],[tuiCell][data-size=m]>[tuiAccessories] [tuiAvatar],[tuiCell][data-size=m]>[tuiAccessories] tui-avatar-stack [tuiAvatar]{--t-size: 2rem;align-self:flex-start}[tuiCell][data-size=l]{--t-height: calc(var(--tui-height-l) - 1rem);--t-padding: .5rem 1rem;--t-radius: var(--tui-radius-l);gap:1rem}[tuiCell][data-size=l][data-height=spacious]{--t-padding: 1.25rem 1rem}[tuiCell][data-size=l][data-height=compact]{--t-height: calc(var(--tui-height-l) - 1rem);--t-padding: 0 1rem}[tuiCell][data-size=l]>[tuiAvatar],[tuiCell][data-size=l]>tui-avatar-stack [tuiAvatar],[tuiCell][data-size=l]>[tuiAccessories] [tuiAvatar],[tuiCell][data-size=l]>[tuiAccessories] tui-avatar-stack [tuiAvatar]{--t-size: 2.5rem;font:var(--tui-font-text-m);font-weight:700;align-self:flex-start}[tuiCell]:hover [tuiCellActions]~*{opacity:0}[tuiCell]:hover [tuiCellActions] button,[tuiCell]:hover [tuiCellActions] a,[tuiCell]:hover [tuiCellActions] label{opacity:1}[tuiCell]:focus-visible{outline:.125rem solid var(--tui-border-focus);outline-offset:-.125rem}[tuiOption] [tuiCell],tui-primitive-textfield [tuiCell],tui-textfield [tuiCell]{padding:0;white-space:nowrap;overflow:hidden;border-radius:0}@media (hover: hover) and (pointer: fine){a[tuiCell]:hover:not(:disabled,[data-state=disabled]),button[tuiCell]:hover:not(:disabled,[data-state=disabled]),label[tuiCell]:hover:not(:disabled,[data-state=disabled]){background:var(--tui-background-neutral-1);cursor:pointer}label[tuiCell]:hover:not(:has(input:disabled)){background:var(--tui-background-neutral-1);cursor:pointer}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: Styles, decorators: [{
             type: Component,
-            args: [{ template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'tui-cell' }, styles: ["[tuiCell]{--t-padding: .125rem 1rem;--t-radius: var(--tui-radius-s);-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;position:relative;display:flex;align-items:center;box-sizing:content-box;isolation:isolate;color:var(--tui-text-primary);padding:var(--t-padding);min-block-size:var(--t-height);border-radius:var(--t-radius)}[tuiCell]:disabled,[tuiCell][data-state=disabled]{opacity:initial;pointer-events:none}[tuiCell]:disabled>*:not([tuiTooltip]),[tuiCell][data-state=disabled]>*:not([tuiTooltip]){opacity:var(--tui-disabled-opacity)}[tuiCell]:is(label):has(input:disabled){opacity:initial;pointer-events:none}[tuiCell]:is(label):has(input:disabled)>*:not([tuiTooltip]){opacity:var(--tui-disabled-opacity)}[tuiCell] [tuiAccessories]{position:relative;display:flex;max-block-size:var(--t-height);align-items:center;align-self:stretch}[tuiCell] [tuiCellActions][tuiCellActions]{position:absolute;right:0;z-index:1;padding-inline-end:inherit;--t-group-mask: none;--t-group-mask-end: none;--t-group-mask-start: none}[tuiCell] [tuiCellActions][tuiCellActions]~*{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out}[tuiCell] [tuiCellActions][tuiCellActions] button,[tuiCell] [tuiCellActions][tuiCellActions] a{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;opacity:0}[tuiCell] [tuiCellActions][tuiCellActions] button:focus-visible,[tuiCell] [tuiCellActions][tuiCellActions] a:focus-visible{opacity:1}[tuiCell] [tuiSubtitle]{display:flex;align-items:center;gap:.25rem;color:var(--tui-text-secondary)}[tuiCell] [tuiTitle]{flex-shrink:7;margin-inline-end:auto;align-items:normal;text-align:start}[tuiCell] [tuiTitle]~[tuiTitle]{flex-shrink:3;margin-inline-end:0;text-align:end;align-items:flex-end}[tuiCell] [tuiTitle]~[tuiTitle][tuiFade]{align-items:flex-start}[tuiCell] tui-badge-notification[data-size=xs]{position:absolute;top:50%;transform:translateY(-50%);left:-.625rem}[tuiCell][data-size=s]{--t-height: calc(var(--tui-height-s) - .125rem);--t-padding: .1875rem 1rem}[tuiCell][data-size=s][data-height=spacious]{--t-padding: .4375rem 1rem}[tuiCell][data-size=s][data-height=compact]{--t-height: calc(var(--tui-height-s) - .25rem);--t-padding: 0 1rem}[tuiCell][data-size=s] [tuiTitle]{max-block-size:100%;font:var(--tui-font-text-ui-s);gap:0}[tuiCell][data-size=s] [tuiSubtitle]{font:var(--tui-font-text-ui-xs)}[tuiCell][data-size=s]>*:not(:first-child),[tuiCell][data-size=s]>[tuiAccessories]>*:not(:first-child){margin-inline-start:.5rem}[tuiCell][data-size=s]>[tuiAvatar],[tuiCell][data-size=s]>tui-avatar-stack [tuiAvatar],[tuiCell][data-size=s]>[tuiAccessories] [tuiAvatar],[tuiCell][data-size=s]>[tuiAccessories] tui-avatar-stack [tuiAvatar]{--t-size: 1.5rem;font:var(--tui-font-text-m);font-size:.5625rem}[tuiCell][data-size=m]{--t-height: calc(var(--tui-height-m) - .75rem);--t-padding: .375rem 1rem}[tuiCell][data-size=m][data-height=spacious]{--t-padding: 1rem}[tuiCell][data-size=m][data-height=compact]{--t-height: calc(var(--tui-height-m) - .5rem);--t-padding: 0 1rem}[tuiCell][data-size=m] [tuiTitle]{font:var(--tui-font-text-ui-s);gap:.125rem}[tuiCell][data-size=m] [tuiSubtitle]{font:var(--tui-font-text-ui-xs)}[tuiCell][data-size=m]>*:not(:first-child),[tuiCell][data-size=m]>[tuiAccessories]>*:not(:first-child){margin-inline-start:.5rem}[tuiCell][data-size=m]>[tuiAvatar],[tuiCell][data-size=m]>tui-avatar-stack [tuiAvatar],[tuiCell][data-size=m]>[tuiAccessories] [tuiAvatar],[tuiCell][data-size=m]>[tuiAccessories] tui-avatar-stack [tuiAvatar]{--t-size: 2rem;align-self:flex-start}[tuiCell][data-size=l]{--t-height: calc(var(--tui-height-l) - 1rem);--t-padding: .5rem 1rem;--t-radius: var(--tui-radius-l)}[tuiCell][data-size=l][data-height=spacious]{--t-padding: 1.25rem 1rem}[tuiCell][data-size=l][data-height=compact]{--t-height: calc(var(--tui-height-l) - 1rem);--t-padding: 0 1rem}[tuiCell][data-size=l]>*:not(:first-child),[tuiCell][data-size=l]>[tuiAccessories]>*:not(:first-child){margin-inline-start:1rem}[tuiCell][data-size=l]>[tuiAvatar],[tuiCell][data-size=l]>tui-avatar-stack [tuiAvatar],[tuiCell][data-size=l]>[tuiAccessories] [tuiAvatar],[tuiCell][data-size=l]>[tuiAccessories] tui-avatar-stack [tuiAvatar]{--t-size: 2.5rem;font:var(--tui-font-text-m);font-weight:700;align-self:flex-start}[tuiCell]:hover [tuiCellActions]~*{opacity:0}[tuiCell]:hover [tuiCellActions] button,[tuiCell]:hover [tuiCellActions] a,[tuiCell]:hover [tuiCellActions] label{opacity:1}[tuiCell]:focus-visible{outline:.125rem solid var(--tui-border-focus);outline-offset:-.125rem}[tuiOption] [tuiCell],tui-primitive-textfield [tuiCell],tui-textfield [tuiCell]{padding:0;white-space:nowrap;overflow:hidden;border-radius:0}@media (hover: hover) and (pointer: fine){a[tuiCell]:hover:not(:disabled,[data-state=disabled]),button[tuiCell]:hover:not(:disabled,[data-state=disabled]),label[tuiCell]:hover:not(:disabled,[data-state=disabled]){background:var(--tui-background-neutral-1);cursor:pointer}label[tuiCell]:hover:not(:has(input:disabled)){background:var(--tui-background-neutral-1);cursor:pointer}}\n"] }]
+            args: [{ template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'tui-cell' }, styles: ["[tuiCell]{--t-padding: .125rem 1rem;--t-radius: var(--tui-radius-s);-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;position:relative;display:flex;align-items:center;text-align:start;box-sizing:content-box;isolation:isolate;color:var(--tui-text-primary);padding:var(--t-padding);min-block-size:var(--t-height);border-radius:var(--t-radius)}[tuiCell]:disabled,[tuiCell][data-state=disabled]{opacity:initial;pointer-events:none}[tuiCell]:disabled>*:not([tuiTooltip]),[tuiCell][data-state=disabled]>*:not([tuiTooltip]){opacity:var(--tui-disabled-opacity)}[tuiCell]:is(label):has(input:disabled){opacity:initial;pointer-events:none}[tuiCell]:is(label):has(input:disabled)>*:not([tuiTooltip]){opacity:var(--tui-disabled-opacity)}[tuiCell] [tuiAccessories]{position:relative;display:flex;max-block-size:var(--t-height);align-items:center;align-self:stretch}[tuiCell] [tuiCellActions][tuiCellActions]{position:absolute;right:0;z-index:1;padding-inline-end:inherit;--t-group-mask: none;--t-group-mask-end: none;--t-group-mask-start: none}[tuiCell] [tuiCellActions][tuiCellActions]~*{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out}[tuiCell] [tuiCellActions][tuiCellActions] button,[tuiCell] [tuiCellActions][tuiCellActions] a{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;opacity:0}[tuiCell] [tuiCellActions][tuiCellActions] button:focus-visible,[tuiCell] [tuiCellActions][tuiCellActions] a:focus-visible{opacity:1}[tuiCell] [tuiSubtitle]{display:flex;align-items:center;gap:.25rem;color:var(--tui-text-secondary)}[tuiCell] [tuiTitle]{flex-shrink:7;margin-inline-end:auto;align-items:normal;text-align:start}[tuiCell] [tuiTitle]~[tuiTitle]{flex-shrink:3;margin-inline-end:0;text-align:end;align-items:flex-end}[tuiCell] [tuiTitle]~[tuiTitle][tuiFade]{align-items:flex-start}[tuiCell] tui-badge-notification[data-size=xs]{position:absolute;top:50%;transform:translateY(-50%);left:-.625rem}[tuiCell][data-size=s]{--t-height: calc(var(--tui-height-s) - .125rem);--t-padding: .1875rem 1rem;gap:.5rem}[tuiCell][data-size=s][data-height=spacious]{--t-padding: .4375rem 1rem}[tuiCell][data-size=s][data-height=compact]{--t-height: calc(var(--tui-height-s) - .25rem);--t-padding: 0 1rem}[tuiCell][data-size=s] [tuiTitle]{max-block-size:100%;font:var(--tui-font-text-ui-s);gap:0}[tuiCell][data-size=s] [tuiSubtitle]{font:var(--tui-font-text-ui-xs)}[tuiCell][data-size=s]>[tuiAvatar],[tuiCell][data-size=s]>tui-avatar-stack [tuiAvatar],[tuiCell][data-size=s]>[tuiAccessories] [tuiAvatar],[tuiCell][data-size=s]>[tuiAccessories] tui-avatar-stack [tuiAvatar]{--t-size: 1.5rem;font:var(--tui-font-text-m);font-size:.5625rem}[tuiCell][data-size=m]{--t-height: calc(var(--tui-height-m) - .75rem);--t-padding: .375rem 1rem;gap:.75rem}[tuiCell][data-size=m][data-height=spacious]{--t-padding: 1rem}[tuiCell][data-size=m][data-height=compact]{--t-height: calc(var(--tui-height-m) - .5rem);--t-padding: 0 1rem}[tuiCell][data-size=m] [tuiTitle]{font:var(--tui-font-text-ui-s);gap:.125rem}[tuiCell][data-size=m] [tuiSubtitle]{font:var(--tui-font-text-ui-xs)}[tuiCell][data-size=m]>[tuiAvatar],[tuiCell][data-size=m]>tui-avatar-stack [tuiAvatar],[tuiCell][data-size=m]>[tuiAccessories] [tuiAvatar],[tuiCell][data-size=m]>[tuiAccessories] tui-avatar-stack [tuiAvatar]{--t-size: 2rem;align-self:flex-start}[tuiCell][data-size=l]{--t-height: calc(var(--tui-height-l) - 1rem);--t-padding: .5rem 1rem;--t-radius: var(--tui-radius-l);gap:1rem}[tuiCell][data-size=l][data-height=spacious]{--t-padding: 1.25rem 1rem}[tuiCell][data-size=l][data-height=compact]{--t-height: calc(var(--tui-height-l) - 1rem);--t-padding: 0 1rem}[tuiCell][data-size=l]>[tuiAvatar],[tuiCell][data-size=l]>tui-avatar-stack [tuiAvatar],[tuiCell][data-size=l]>[tuiAccessories] [tuiAvatar],[tuiCell][data-size=l]>[tuiAccessories] tui-avatar-stack [tuiAvatar]{--t-size: 2.5rem;font:var(--tui-font-text-m);font-weight:700;align-self:flex-start}[tuiCell]:hover [tuiCellActions]~*{opacity:0}[tuiCell]:hover [tuiCellActions] button,[tuiCell]:hover [tuiCellActions] a,[tuiCell]:hover [tuiCellActions] label{opacity:1}[tuiCell]:focus-visible{outline:.125rem solid var(--tui-border-focus);outline-offset:-.125rem}[tuiOption] [tuiCell],tui-primitive-textfield [tuiCell],tui-textfield [tuiCell]{padding:0;white-space:nowrap;overflow:hidden;border-radius:0}@media (hover: hover) and (pointer: fine){a[tuiCell]:hover:not(:disabled,[data-state=disabled]),button[tuiCell]:hover:not(:disabled,[data-state=disabled]),label[tuiCell]:hover:not(:disabled,[data-state=disabled]){background:var(--tui-background-neutral-1);cursor:pointer}label[tuiCell]:hover:not(:has(input:disabled)){background:var(--tui-background-neutral-1);cursor:pointer}}\n"] }]
         }] });
 class TuiCell {
     constructor() {

package/fesm2022/taiga-ui-core-components-cell.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"taiga-ui-core-components-cell.mjs","sources":["../../../projects/core/components/cell/cell.options.ts","../../../projects/core/components/cell/cell.directive.ts","../../../projects/core/components/cell/taiga-ui-core-components-cell.ts"],"sourcesContent":["import {tuiCreateOptions} from '@taiga-ui/cdk/utils/di';\nimport {type TuiSizeL, type TuiSizeS} from '@taiga-ui/core/types';\n\nexport interface TuiCellOptions {\n    readonly height: 'compact' | 'normal' | 'spacious';\n    readonly size: TuiSizeL | TuiSizeS | '';\n}\n\nexport const [TUI_CELL_OPTIONS, tuiCellOptionsProvider] =\n    tuiCreateOptions<TuiCellOptions>({height: 'normal', size: 'l'});\n","import {\n    ChangeDetectionStrategy,\n    Component,\n    Directive,\n    inject,\n    input,\n    ViewEncapsulation,\n} from '@angular/core';\nimport {tuiWithStyles} from '@taiga-ui/cdk/utils/miscellaneous';\nimport {tuiButtonOptionsProvider} from '@taiga-ui/core/components/button';\n\nimport {TUI_CELL_OPTIONS} from './cell.options';\n\n@Component({\n    template: '',\n    styleUrls: ['./cell.styles.less'],\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {class: 'tui-cell'},\n})\nclass Styles {}\n\n@Directive({\n    selector: '[tuiCell]:not(ng-template)',\n    providers: [tuiButtonOptionsProvider({size: 's'})],\n    host: {\n        tuiCell: '',\n        '[attr.data-size]': 'size() || options.size || \"l\"',\n        '[attr.data-height]': 'height()',\n    },\n})\nexport class TuiCell {\n    protected readonly nothing = tuiWithStyles(Styles);\n    protected readonly options = inject(TUI_CELL_OPTIONS);\n\n    public readonly size = input(this.options.size, {alias: 'tuiCell'});\n    public readonly height = input(this.options.height, {alias: 'tuiCellHeight'});\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"taiga-ui-core-components-cell.mjs","sources":["../../../projects/core/components/cell/cell.options.ts","../../../projects/core/components/cell/cell.directive.ts","../../../projects/core/components/cell/taiga-ui-core-components-cell.ts"],"sourcesContent":["import {tuiCreateOptions} from '@taiga-ui/cdk/utils/di';\nimport {type TuiSizeL, type TuiSizeS} from '@taiga-ui/core/types';\n\nexport interface TuiCellOptions {\n    readonly height: 'compact' | 'normal' | 'spacious';\n    readonly size: TuiSizeL | TuiSizeS | '';\n}\n\nexport const [TUI_CELL_OPTIONS, tuiCellOptionsProvider] =\n    tuiCreateOptions<TuiCellOptions>({height: 'normal', size: 'l'});\n","import {\n    ChangeDetectionStrategy,\n    Component,\n    Directive,\n    inject,\n    input,\n    ViewEncapsulation,\n} from '@angular/core';\nimport {tuiWithStyles} from '@taiga-ui/cdk/utils/miscellaneous';\nimport {tuiButtonOptionsProvider} from '@taiga-ui/core/components/button';\n\nimport {TUI_CELL_OPTIONS} from './cell.options';\n\n@Component({\n    template: '',\n    styleUrl: './cell.styles.less',\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {class: 'tui-cell'},\n})\nclass Styles {}\n\n@Directive({\n    selector: '[tuiCell]:not(ng-template)',\n    providers: [tuiButtonOptionsProvider({size: 's'})],\n    host: {\n        tuiCell: '',\n        '[attr.data-size]': 'size() || options.size || \"l\"',\n        '[attr.data-height]': 'height()',\n    },\n})\nexport class TuiCell {\n    protected readonly nothing = tuiWithStyles(Styles);\n    protected readonly options = inject(TUI_CELL_OPTIONS);\n\n    public readonly size = input(this.options.size, {alias: 'tuiCell'});\n    public readonly height = input(this.options.height, {alias: 'tuiCellHeight'});\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/taiga-ui-core-components-data-list.mjs

@@ -1,29 +1,20 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ContentChild, Directive, ViewContainerRef, forwardRef, createComponent, INJECTOR, EnvironmentInjector, Input, signal, ChangeDetectionStrategy, Component, NgZone, DestroyRef, ChangeDetectorRef, isSignal, ContentChildren, ViewEncapsulation } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
-import { EMPTY_QUERY } from '@taiga-ui/cdk/constants';
-import { tuiQueryListChanges, tuiZonefree, tuiTakeUntilDestroyed } from '@taiga-ui/cdk/observables';
+import { InjectionToken, inject, ContentChild, Directive, input, NgZone, DestroyRef, ChangeDetectorRef, contentChildren, forwardRef, signal, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, ViewContainerRef, createComponent, INJECTOR, EnvironmentInjector } from '@angular/core';
+import { tuiZonefree, tuiTakeUntilDestroyed } from '@taiga-ui/cdk/observables';
 import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
-import { tuiIsFocused, tuiMoveFocus, tuiIsFocusedIn } from '@taiga-ui/cdk/utils/focus';
-import { tuiProvide, tuiIsPresent } from '@taiga-ui/cdk/utils/miscellaneous';
-import { tuiAsAuxiliary, TUI_NOTHING_FOUND_MESSAGE } from '@taiga-ui/core/tokens';
+import { tuiMoveFocus, tuiIsFocusedIn, tuiIsFocused } from '@taiga-ui/cdk/utils/focus';
+import { tuiIsPresent } from '@taiga-ui/cdk/utils/miscellaneous';
+import * as i2 from '@taiga-ui/core/components/cell';
+import { TuiCell, tuiCellOptionsProvider } from '@taiga-ui/core/components/cell';
+import { TUI_NOTHING_FOUND_MESSAGE, tuiAsAuxiliary } from '@taiga-ui/core/tokens';
 import { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
-import { ReplaySubject, switchMap, combineLatest, map, startWith, timer } from 'rxjs';
+import { timer } from 'rxjs';
+import { tuiProvide } from '@taiga-ui/cdk/utils/di';
 import { TUI_IS_MOBILE } from '@taiga-ui/cdk/tokens';
-import { TuiDropdownDirective } from '@taiga-ui/core/directives/dropdown';
 import * as i1 from '@taiga-ui/core/directives/icons';
 import { TuiWithIcons } from '@taiga-ui/core/directives/icons';
+import { TuiDropdownDirective } from '@taiga-ui/core/portals/dropdown';
 
-/**
- * Accessor for data-list options
- */
-const TUI_DATA_LIST_ACCESSOR = new InjectionToken(ngDevMode ? 'TUI_DATA_LIST_ACCESSOR' : '');
-function tuiAsDataListAccessor(accessor) {
-    return [tuiProvide(TUI_DATA_LIST_ACCESSOR, accessor), tuiAsAuxiliary(accessor)];
-}
-/**
- * DataList controller
- */
 const TUI_DATA_LIST_HOST = new InjectionToken(ngDevMode ? 'TUI_DATA_LIST_HOST' : '');
 function tuiAsDataListHost(host) {
     return tuiProvide(TUI_DATA_LIST_HOST, host);
@@ -34,205 +25,47 @@ function tuiAsDataListHost(host) {
  */
 const TUI_OPTION_CONTENT = new InjectionToken(ngDevMode ? 'TUI_OPTION_CONTENT' : '');
 function tuiAsOptionContent(useValue) {
-    return {
-        provide: TUI_OPTION_CONTENT,
-        useValue,
-    };
+    return { provide: TUI_OPTION_CONTENT, useValue };
 }
 class TuiWithOptionContent {
     constructor() {
-        this.localContent = null;
-        this.globalContent = inject(TUI_OPTION_CONTENT, {
-            optional: true,
-        });
+        this.local = null;
+        this.global = inject(TUI_OPTION_CONTENT, { optional: true });
     }
     get content() {
-        return this.globalContent ?? this.localContent;
+        return this.global ?? this.local;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiWithOptionContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiWithOptionContent, isStandalone: true, queries: [{ propertyName: "localContent", first: true, predicate: TUI_OPTION_CONTENT, descendants: true }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiWithOptionContent, isStandalone: true, queries: [{ propertyName: "local", first: true, predicate: TUI_OPTION_CONTENT, descendants: true }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiWithOptionContent, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                }]
-        }], propDecorators: { localContent: [{
+            type: Directive
+        }], propDecorators: { local: [{
                 type: ContentChild,
                 args: [TUI_OPTION_CONTENT, { descendants: true }]
             }] } });
 
-// TODO(v5): rename `TuiOptionNew` => `TuiOption` & remove [new] from selector
-// TODO: Consider all use cases for aria roles
-class TuiOptionNew {
-    constructor() {
-        this.vcr = inject(ViewContainerRef);
-        this.isMobile = inject(TUI_IS_MOBILE);
-        this.el = tuiInjectElement();
-        this.dataList = inject(forwardRef(() => TuiDataListComponent), { optional: true });
-        this.content = inject(TUI_OPTION_CONTENT, {
-            optional: true,
-        });
-        this.ref = this.content &&
-            createComponent(this.content, {
-                environmentInjector: inject(EnvironmentInjector),
-                elementInjector: inject(INJECTOR),
-                hostElement: tuiInjectElement(),
-            });
-        this.dropdown = inject(TuiDropdownDirective, {
-            self: true,
-            optional: true,
-        })?.ref;
-        this.disabled = false;
-        if (this.ref) {
-            this.vcr.insert(this.ref.hostView);
-            this.ref.changeDetectorRef.detectChanges();
-        }
-    }
-    // Preventing focus loss upon focused option removal
-    ngOnDestroy() {
-        this.dataList?.handleFocusLossIfNecessary(this.el);
-    }
-    onMouseMove() {
-        if (!this.isMobile &&
-            !tuiIsFocused(this.el) &&
-            this.dataList &&
-            this.el.closest('[tuiDataListDropdownManager]')) {
-            this.el.focus({ preventScroll: true });
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiOptionNew, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiOptionNew, isStandalone: true, selector: "button[tuiOption][new], a[tuiOption][new], label[tuiOption][new]", inputs: { disabled: "disabled" }, host: { attributes: { "type": "button", "role": "option" }, listeners: { "mousemove.zoneless": "onMouseMove()" }, properties: { "attr.disabled": "disabled || null", "class._with-dropdown": "dropdown?.()" } }, hostDirectives: [{ directive: i1.TuiWithIcons }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiOptionNew, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                    selector: 'button[tuiOption][new], a[tuiOption][new], label[tuiOption][new]',
-                    hostDirectives: [TuiWithIcons],
-                    host: {
-                        type: 'button',
-                        role: 'option',
-                        '[attr.disabled]': 'disabled || null',
-                        '[class._with-dropdown]': 'dropdown?.()',
-                        '(mousemove.zoneless)': 'onMouseMove()',
-                    },
-                }]
-        }], ctorParameters: () => [], propDecorators: { disabled: [{
-                type: Input
-            }] } });
-// TODO(v5): remove [new] from selector
 class TuiOptionWithValue {
     constructor() {
-        this.host = inject(TUI_DATA_LIST_HOST, {
-            optional: true,
-        });
-        this.disabled = false;
-        this.value = signal(undefined);
-    }
-    // TODO(v5): use `input.required<T>()` to remove `undefined` from `this.value()`
-    set valueSetter(x) {
-        this.value.set(x);
+        this.host = inject(TUI_DATA_LIST_HOST, { optional: true });
+        this.disabled = input(false);
+        this.value = input();
     }
     onClick(value = this.value()) {
-        if (this.host?.handleOption && value !== undefined) {
-            this.host.handleOption(value);
+        if (value !== undefined) {
+            this.host?.handleOption?.(value);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiOptionWithValue, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiOptionWithValue, isStandalone: true, selector: "button[tuiOption][value][new], a[tuiOption][value][new], label[tuiOption][value][new]", inputs: { disabled: "disabled", valueSetter: ["value", "valueSetter"] }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: TuiOptionWithValue, isStandalone: true, selector: "button[tuiOption][value], a[tuiOption][value], label[tuiOption][value]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiOptionWithValue, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
-                    selector: 'button[tuiOption][value][new], a[tuiOption][value][new], label[tuiOption][value][new]',
-                    host: {
-                        '(click)': 'onClick()',
-                    },
-                }]
-        }], propDecorators: { disabled: [{
-                type: Input
-            }], valueSetter: [{
-                type: Input,
-                args: [{ alias: 'value', required: true }]
-            }] } });
-
-/**
- * TODO(v5): delete
- * @deprecated use `<button tuiOption new />` / `<a tuiOption new /> / `<label tuiOption new /> instead
- */
-class TuiOption {
-    constructor() {
-        this.isMobile = inject(TUI_IS_MOBILE);
-        this.el = tuiInjectElement();
-        this.dataList = inject(forwardRef(() => TuiDataListComponent), { optional: true });
-        this.host = inject(TUI_DATA_LIST_HOST, {
-            optional: true,
-        });
-        this.content = inject(TUI_OPTION_CONTENT, { optional: true });
-        this.dropdown = inject(TuiDropdownDirective, {
-            self: true,
-            optional: true,
-        })?.ref;
-        this.disabled = false;
-    }
-    // Preventing focus loss upon focused option removal
-    ngOnDestroy() {
-        this.dataList?.handleFocusLossIfNecessary(this.el);
-    }
-    onClick() {
-        if (this.host?.handleOption && this.value !== undefined) {
-            this.host.handleOption(this.value);
-        }
-    }
-    onMouseMove() {
-        if (!this.isMobile &&
-            !tuiIsFocused(this.el) &&
-            this.dataList &&
-            this.el.closest('[tuiDataListDropdownManager]')) {
-            this.el.focus({ preventScroll: true });
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TuiOption, isStandalone: true, selector: "button[tuiOption]:not([new]), a[tuiOption]:not([new]), label[tuiOption]:not([new])", inputs: { disabled: "disabled", value: "value" }, host: { attributes: { "type": "button", "role": "option" }, listeners: { "click": "onClick()", "mousemove.zoneless": "onMouseMove()" }, properties: { "attr.disabled": "disabled || null", "class._with-dropdown": "dropdown?.()" } }, hostDirectives: [{ directive: i1.TuiWithIcons }], ngImport: i0, template: `
-        <ng-container *polymorpheusOutlet="content || t as text; context: {$implicit: t}">
-            {{ text }}
-        </ng-container>
-        <ng-template #t>
-            <ng-content />
-        </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiOption, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'button[tuiOption]:not([new]), a[tuiOption]:not([new]), label[tuiOption]:not([new])',
-                    imports: [PolymorpheusOutlet],
-                    template: `
-        <ng-container *polymorpheusOutlet="content || t as text; context: {$implicit: t}">
-            {{ text }}
-        </ng-container>
-        <ng-template #t>
-            <ng-content />
-        </ng-template>
-    `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    hostDirectives: [TuiWithIcons],
-                    host: {
-                        type: 'button',
-                        role: 'option',
-                        '[attr.disabled]': 'disabled || null',
-                        '[class._with-dropdown]': 'dropdown?.()',
-                        '(click)': 'onClick()',
-                        '(mousemove.zoneless)': 'onMouseMove()',
-                    },
+                    selector: 'button[tuiOption][value], a[tuiOption][value], label[tuiOption][value]',
+                    host: { '(click)': 'onClick()' },
                 }]
-        }], propDecorators: { disabled: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }] } });
+        }] });
 
 function tuiInjectDataListSize() {
     const sizes = ['s', 'm', 'l'];
@@ -242,25 +75,18 @@ function tuiInjectDataListSize() {
 // TODO: Consider aria-activedescendant for proper accessibility implementation
 class TuiDataListComponent {
     constructor() {
-        // TODO(v5): delete
-        this.legacyOptionsQuery = EMPTY_QUERY;
-        this.optionsQuery = EMPTY_QUERY;
         this.ngZone = inject(NgZone);
         this.destroyRef = inject(DestroyRef);
         this.el = tuiInjectElement();
         this.cdr = inject(ChangeDetectorRef);
-        this.contentReady$ = new ReplaySubject(1);
-        this.fallback = toSignal(inject(TUI_NOTHING_FOUND_MESSAGE));
+        this.optionsQuery = contentChildren(forwardRef(() => TuiOptionWithValue), { descendants: true });
+        this.fallback = inject(TUI_NOTHING_FOUND_MESSAGE);
         this.empty = signal(false);
-        this.size = tuiInjectDataListSize();
-        // TODO(v5): use signal `contentChildren`
-        this.options = toSignal(this.contentReady$.pipe(switchMap(() => combineLatest([
-            tuiQueryListChanges(this.legacyOptionsQuery),
-            tuiQueryListChanges(this.optionsQuery),
-        ])), map(([legacyOptions, options]) => [
-            ...legacyOptions.map(({ value }) => value),
-            ...options.map(({ value }) => value()),
-        ].filter(tuiIsPresent)), startWith([])), { requireSync: true });
+        this.emptyContent = input();
+        this.size = input(tuiInjectDataListSize());
+        this.options = computed(() => this.optionsQuery()
+            .map(({ value }) => value())
+            .filter(tuiIsPresent));
     }
     onKeyDownArrow(current, step) {
         const { elements } = this;
@@ -271,9 +97,6 @@ class TuiDataListComponent {
             this.origin?.focus({ preventScroll: true });
         }
     }
-    ngAfterContentInit() {
-        this.contentReady$.next(true);
-    }
     // TODO: Refactor to :has after Safari support bumped to 15
     ngAfterContentChecked() {
         timer(0)
@@ -283,58 +106,38 @@ class TuiDataListComponent {
             this.cdr.detectChanges();
         });
     }
-    // TODO(v5): delete
-    getOptions(includeDisabled = false) {
-        return [
-            ...this.legacyOptionsQuery, // TODO(v5): delete
-            ...this.optionsQuery,
-        ]
-            .filter(({ disabled }) => includeDisabled || !disabled)
-            .map(({ value }) => (isSignal(value) ? value() : value))
-            .filter(tuiIsPresent);
-    }
     onFocusIn(relatedTarget, currentTarget) {
         if (!currentTarget.contains(relatedTarget) && !this.origin) {
             this.origin = relatedTarget;
         }
     }
     get elements() {
-        return Array.from(this.el.querySelectorAll('[tuiOption]'));
+        return Array.from(this.el.querySelectorAll('[tuiOption]:not(.t-empty)'));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDataListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiDataListComponent, isStandalone: true, selector: "tui-data-list", inputs: { emptyContent: "emptyContent", size: "size" }, host: { attributes: { "role": "listbox" }, listeners: { "focusin": "onFocusIn($event.relatedTarget, $event.currentTarget)", "mousedown.prevent": "(0)", "wheel.zoneless.passive": "handleFocusLossIfNecessary()", "mouseleave": "handleFocusLossIfNecessary($event.target)", "keydown.tab": "handleFocusLossIfNecessary()", "keydown.shift.tab": "handleFocusLossIfNecessary()", "keydown.arrowDown.prevent": "onKeyDownArrow($event.target, 1)", "keydown.arrowUp.prevent": "onKeyDownArrow($event.target, -1)" }, properties: { "attr.data-size": "size" } }, providers: [
-            tuiAsDataListAccessor(TuiDataListComponent),
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiDataListComponent, isStandalone: true, selector: "tui-data-list", inputs: { emptyContent: { classPropertyName: "emptyContent", publicName: "emptyContent", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listbox" }, listeners: { "focusin": "onFocusIn($event.relatedTarget, $event.currentTarget)", "mousedown.prevent": "(0)", "wheel.zoneless.passive": "handleFocusLossIfNecessary()", "mouseleave": "handleFocusLossIfNecessary($event.target)", "keydown.tab": "handleFocusLossIfNecessary()", "keydown.shift.tab": "handleFocusLossIfNecessary()", "keydown.arrowDown.prevent": "onKeyDownArrow($event.target, 1)", "keydown.arrowUp.prevent": "onKeyDownArrow($event.target, -1)" }, properties: { "attr.data-size": "size()" } }, providers: [
+            tuiCellOptionsProvider(() => ({ size: inject(TuiDataListComponent).size() })),
+            tuiAsAuxiliary(TuiDataListComponent),
             {
                 provide: TUI_OPTION_CONTENT,
                 useFactory: () => inject(TuiWithOptionContent, { optional: true })?.content ??
-                    // TODO(v5): remove when all legacy controls are deleted
-                    inject(TUI_OPTION_CONTENT, {
-                        host: true,
-                        skipSelf: true,
-                        optional: true,
-                    }) ??
                     inject(TUI_OPTION_CONTENT, { skipSelf: true, optional: true }),
             },
-        ], queries: [{ propertyName: "legacyOptionsQuery", predicate: i0.forwardRef(() => TuiOption), descendants: true }, { propertyName: "optionsQuery", predicate: i0.forwardRef(() => TuiOptionWithValue), descendants: true }], ngImport: i0, template: "<ng-content />\n@if (empty()) {\n    <div class=\"t-empty\">\n        <ng-container *polymorpheusOutlet=\"emptyContent || fallback() as text\">\n            {{ text }}\n        </ng-container>\n    </div>\n}\n", styles: ["tui-data-list{--tui-data-list-padding: .25rem;--tui-data-list-margin: .0625rem;display:flex;font:var(--tui-font-text-m);flex-direction:column;padding:calc(var(--tui-data-list-padding) - var(--tui-data-list-margin)) var(--tui-data-list-padding);color:var(--tui-text-tertiary)}tui-data-list:focus-within .t-trap{display:none}tui-data-list:focus-within [tuiOption]._with-dropdown:not(:focus){background-color:transparent}tui-data-list[data-size=s]{--tui-data-list-margin: 0rem}tui-data-list[data-size=s] [tuiOption][new]:not([tuiCell]){gap:.5rem}tui-data-list[data-size=s]>.t-empty,tui-data-list[data-size=s] [tuiOption]{--t-option-padding-inline: .375rem;font:var(--tui-font-text-s);min-block-size:2rem;padding-block-start:.3125rem;padding-block-end:.3125rem}tui-data-list[data-size=s]>.t-empty:before,tui-data-list[data-size=s] [tuiOption]:before{font-size:1rem}tui-data-list[data-size=m] [tuiOption][new]:not([tuiCell]){gap:.75rem}tui-data-list[data-size=m]>.t-empty,tui-data-list[data-size=m] [tuiOption]{--t-option-padding-inline: .5rem;font:var(--tui-font-text-s);min-block-size:2.5rem;padding-block-start:.375rem;padding-block-end:.375rem}tui-data-list[data-size=l]{--tui-data-list-padding: .375rem;--tui-data-list-margin: .125rem}tui-data-list[data-size=l] [tuiOption][new]:not([tuiCell]){gap:1rem}tui-data-list[data-size=l]>.t-empty,tui-data-list[data-size=l] [tuiOption]{--t-option-padding-inline: .625rem;font:var(--tui-font-text-m);min-block-size:2.75rem;padding-block-start:.375rem;padding-block-end:.375rem}tui-data-list>.t-empty{display:flex;align-items:center;box-sizing:border-box;margin:var(--tui-data-list-margin) 0}tui-data-list [tuiOption]:not([new]){justify-content:space-between}tui-data-list [tuiOption]{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:flex;align-items:center;box-sizing:border-box;margin:var(--tui-data-list-margin) 0;text-align:start;color:var(--tui-text-primary);border-radius:var(--tui-radius-s);outline:none;cursor:pointer;word-break:break-word;background-clip:padding-box}tui-data-list [tuiOption]:disabled{opacity:var(--tui-disabled-opacity);cursor:default}@media (hover: hover) and (pointer: fine){tui-data-list [tuiOption]:hover:not(:disabled){background-color:var(--tui-background-neutral-1)}}tui-data-list [tuiOption]:active:not(:disabled),tui-data-list [tuiOption]:focus-within,tui-data-list [tuiOption]._with-dropdown{background-color:var(--tui-background-neutral-1)}tui-data-list [tuiOption]:not([new]):before{margin-inline-end:.5rem}tui-data-list [tuiOption]:after{font-size:1rem;margin:0 -.625rem 0 auto;border-inline-start:.5rem solid;border-inline-end:.5rem solid}tui-data-list>.t-empty,tui-data-list [tuiOption]{padding-inline-start:var(--t-option-padding-inline);padding-inline-end:var(--t-option-padding-inline)}tui-opt-group{position:relative;display:flex;font:var(--tui-font-text-xs);font-weight:700;color:var(--tui-text-primary);flex-direction:column;line-height:1rem}tui-data-list[data-size=l] tui-opt-group{font:var(--tui-font-text-m);font-weight:700;line-height:1.25rem}tui-data-list[data-size=l] tui-opt-group:before{padding-inline-start:.625rem;padding-inline-end:.625rem}tui-data-list[data-size=l] tui-opt-group:after{left:.625rem;right:.625rem}tui-opt-group:empty:before,tui-opt-group:empty:after{display:none}tui-opt-group:before{content:attr(data-label);padding:var(--tui-data-list-padding) .5rem var(--tui-data-list-padding);margin:var(--tui-data-list-margin) 0;white-space:normal;word-break:break-word}tui-opt-group:after{position:absolute;left:.5rem;right:.5rem;top:var(--tui-data-list-padding);block-size:1px;background:var(--tui-border-normal)}tui-opt-group:not(:empty)~tui-opt-group:before{padding-block-start:calc(.75rem + var(--tui-data-list-padding))}tui-opt-group:not(:empty)~tui-opt-group[data-label=\"\"]:before,tui-opt-group:not(:empty)~tui-opt-group:not([data-label]):before{padding:var(--tui-data-list-padding) 0}tui-opt-group:not(:empty)~tui-opt-group:after{content:\"\"}tui-opt-group[data-label=\"\"]:before,tui-opt-group:not([data-label]):before{content:\"\";padding:0;margin:0}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "optionsQuery", predicate: i0.forwardRef(() => TuiOptionWithValue), descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content />\n@if (empty()) {\n    <!-- tuiOption selector purely for cosmetics, do not import -->\n    <span\n        tuiCell\n        tuiOption\n        class=\"t-empty\"\n    >\n        <ng-container *polymorpheusOutlet=\"emptyContent() || fallback() as text\">\n            {{ text }}\n        </ng-container>\n    </span>\n}\n", styles: ["tui-data-list{display:flex;flex-direction:column;padding:calc(var(--tui-data-list-padding) - var(--tui-data-list-margin)) var(--tui-data-list-padding)}tui-data-list:focus-within [tuiOption]._with-dropdown:not(:focus){background:transparent}tui-data-list[data-size=s]{--tui-data-list-margin: 0rem;--tui-data-list-padding: .25rem}tui-data-list[data-size=s] [tuiOption]{font:var(--tui-font-text-s);min-block-size:2rem;padding:.3125rem .375rem}tui-data-list[data-size=s] [tuiOption]:before{font-size:1rem}tui-data-list[data-size=m]{--tui-data-list-margin: .0625rem;--tui-data-list-padding: .25rem}tui-data-list[data-size=m] [tuiOption]{font:var(--tui-font-text-s);min-block-size:2.5rem;padding:.375rem .5rem}tui-data-list[data-size=l]{--tui-data-list-margin: .125rem;--tui-data-list-padding: .375rem}tui-data-list[data-size=l] [tuiOption]{font:var(--tui-font-text-m);min-block-size:2.75rem;padding:.375rem .625rem}tui-data-list [tuiOption]{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;box-sizing:border-box;margin:var(--tui-data-list-margin) 0;border-radius:var(--tui-radius-s);outline:none!important;cursor:pointer;word-break:break-word}tui-data-list [tuiOption]:disabled{opacity:var(--tui-disabled-opacity);cursor:default}@media (hover: hover) and (pointer: fine){tui-data-list [tuiOption]:hover:not(:disabled){background:var(--tui-background-neutral-1)}}tui-data-list [tuiOption]:active:not(:disabled),tui-data-list [tuiOption]:focus-within,tui-data-list [tuiOption]._with-dropdown{background:var(--tui-background-neutral-1)}tui-data-list [tuiOption]:after{font-size:1rem;margin-inline:auto -.625rem;border-inline:.5rem solid}tui-data-list>.t-empty{pointer-events:none;color:var(--tui-text-tertiary)}tui-opt-group{position:relative;display:flex;font:var(--tui-font-text-xs);font-weight:700;color:var(--tui-text-primary);flex-direction:column;line-height:1rem}tui-data-list[data-size=s] tui-opt-group:before{padding-inline:.375rem}tui-data-list[data-size=l] tui-opt-group{font:var(--tui-font-text-m);font-weight:700;line-height:1.25rem}tui-data-list[data-size=l] tui-opt-group:before{padding-inline:.625rem}tui-data-list[data-size=l] tui-opt-group:after{inset-inline:.625rem}tui-opt-group:empty:before,tui-opt-group:empty:after{display:none}tui-opt-group:before{content:attr(data-label);padding:var(--tui-data-list-padding) .5rem;margin:var(--tui-data-list-margin) 0;white-space:normal;word-break:break-word}tui-sheet-dialog tui-opt-group:before{font:var(--tui-font-heading-6);padding:.5rem 0!important;margin:0}tui-opt-group:after{position:absolute;inset-inline:.5rem;top:var(--tui-data-list-padding);block-size:1px;background:var(--tui-border-normal)}tui-opt-group:not(:empty)~tui-opt-group:before{padding-block-start:calc(.75rem + var(--tui-data-list-padding))}tui-opt-group:not(:empty)~tui-opt-group[data-label=\"\"]:before{padding:var(--tui-data-list-padding) 0}tui-opt-group:not(:empty)~tui-opt-group:after{content:\"\"}tui-opt-group[data-label=\"\"]:before{content:\"\";padding:0;margin:0}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiCell, selector: "[tuiCell]:not(ng-template)", inputs: ["tuiCell", "tuiCellHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDataListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tui-data-list', imports: [PolymorpheusOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        tuiAsDataListAccessor(TuiDataListComponent),
+            args: [{ selector: 'tui-data-list', imports: [PolymorpheusOutlet, TuiCell], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        tuiCellOptionsProvider(() => ({ size: inject(TuiDataListComponent).size() })),
+                        tuiAsAuxiliary(TuiDataListComponent),
                         {
                             provide: TUI_OPTION_CONTENT,
                             useFactory: () => inject(TuiWithOptionContent, { optional: true })?.content ??
-                                // TODO(v5): remove when all legacy controls are deleted
-                                inject(TUI_OPTION_CONTENT, {
-                                    host: true,
-                                    skipSelf: true,
-                                    optional: true,
-                                }) ??
                                 inject(TUI_OPTION_CONTENT, { skipSelf: true, optional: true }),
                         },
                     ], host: {
                         role: 'listbox',
-                        '[attr.data-size]': 'size',
+                        '[attr.data-size]': 'size()',
                         '(focusin)': 'onFocusIn($event.relatedTarget, $event.currentTarget)',
                         '(mousedown.prevent)': '(0)',
                         '(wheel.zoneless.passive)': 'handleFocusLossIfNecessary()',
@@ -343,57 +146,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         '(keydown.shift.tab)': 'handleFocusLossIfNecessary()',
                         '(keydown.arrowDown.prevent)': 'onKeyDownArrow($event.target, 1)',
                         '(keydown.arrowUp.prevent)': 'onKeyDownArrow($event.target, -1)',
-                    }, template: "<ng-content />\n@if (empty()) {\n    <div class=\"t-empty\">\n        <ng-container *polymorpheusOutlet=\"emptyContent || fallback() as text\">\n            {{ text }}\n        </ng-container>\n    </div>\n}\n", styles: ["tui-data-list{--tui-data-list-padding: .25rem;--tui-data-list-margin: .0625rem;display:flex;font:var(--tui-font-text-m);flex-direction:column;padding:calc(var(--tui-data-list-padding) - var(--tui-data-list-margin)) var(--tui-data-list-padding);color:var(--tui-text-tertiary)}tui-data-list:focus-within .t-trap{display:none}tui-data-list:focus-within [tuiOption]._with-dropdown:not(:focus){background-color:transparent}tui-data-list[data-size=s]{--tui-data-list-margin: 0rem}tui-data-list[data-size=s] [tuiOption][new]:not([tuiCell]){gap:.5rem}tui-data-list[data-size=s]>.t-empty,tui-data-list[data-size=s] [tuiOption]{--t-option-padding-inline: .375rem;font:var(--tui-font-text-s);min-block-size:2rem;padding-block-start:.3125rem;padding-block-end:.3125rem}tui-data-list[data-size=s]>.t-empty:before,tui-data-list[data-size=s] [tuiOption]:before{font-size:1rem}tui-data-list[data-size=m] [tuiOption][new]:not([tuiCell]){gap:.75rem}tui-data-list[data-size=m]>.t-empty,tui-data-list[data-size=m] [tuiOption]{--t-option-padding-inline: .5rem;font:var(--tui-font-text-s);min-block-size:2.5rem;padding-block-start:.375rem;padding-block-end:.375rem}tui-data-list[data-size=l]{--tui-data-list-padding: .375rem;--tui-data-list-margin: .125rem}tui-data-list[data-size=l] [tuiOption][new]:not([tuiCell]){gap:1rem}tui-data-list[data-size=l]>.t-empty,tui-data-list[data-size=l] [tuiOption]{--t-option-padding-inline: .625rem;font:var(--tui-font-text-m);min-block-size:2.75rem;padding-block-start:.375rem;padding-block-end:.375rem}tui-data-list>.t-empty{display:flex;align-items:center;box-sizing:border-box;margin:var(--tui-data-list-margin) 0}tui-data-list [tuiOption]:not([new]){justify-content:space-between}tui-data-list [tuiOption]{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:flex;align-items:center;box-sizing:border-box;margin:var(--tui-data-list-margin) 0;text-align:start;color:var(--tui-text-primary);border-radius:var(--tui-radius-s);outline:none;cursor:pointer;word-break:break-word;background-clip:padding-box}tui-data-list [tuiOption]:disabled{opacity:var(--tui-disabled-opacity);cursor:default}@media (hover: hover) and (pointer: fine){tui-data-list [tuiOption]:hover:not(:disabled){background-color:var(--tui-background-neutral-1)}}tui-data-list [tuiOption]:active:not(:disabled),tui-data-list [tuiOption]:focus-within,tui-data-list [tuiOption]._with-dropdown{background-color:var(--tui-background-neutral-1)}tui-data-list [tuiOption]:not([new]):before{margin-inline-end:.5rem}tui-data-list [tuiOption]:after{font-size:1rem;margin:0 -.625rem 0 auto;border-inline-start:.5rem solid;border-inline-end:.5rem solid}tui-data-list>.t-empty,tui-data-list [tuiOption]{padding-inline-start:var(--t-option-padding-inline);padding-inline-end:var(--t-option-padding-inline)}tui-opt-group{position:relative;display:flex;font:var(--tui-font-text-xs);font-weight:700;color:var(--tui-text-primary);flex-direction:column;line-height:1rem}tui-data-list[data-size=l] tui-opt-group{font:var(--tui-font-text-m);font-weight:700;line-height:1.25rem}tui-data-list[data-size=l] tui-opt-group:before{padding-inline-start:.625rem;padding-inline-end:.625rem}tui-data-list[data-size=l] tui-opt-group:after{left:.625rem;right:.625rem}tui-opt-group:empty:before,tui-opt-group:empty:after{display:none}tui-opt-group:before{content:attr(data-label);padding:var(--tui-data-list-padding) .5rem var(--tui-data-list-padding);margin:var(--tui-data-list-margin) 0;white-space:normal;word-break:break-word}tui-opt-group:after{position:absolute;left:.5rem;right:.5rem;top:var(--tui-data-list-padding);block-size:1px;background:var(--tui-border-normal)}tui-opt-group:not(:empty)~tui-opt-group:before{padding-block-start:calc(.75rem + var(--tui-data-list-padding))}tui-opt-group:not(:empty)~tui-opt-group[data-label=\"\"]:before,tui-opt-group:not(:empty)~tui-opt-group:not([data-label]):before{padding:var(--tui-data-list-padding) 0}tui-opt-group:not(:empty)~tui-opt-group:after{content:\"\"}tui-opt-group[data-label=\"\"]:before,tui-opt-group:not([data-label]):before{content:\"\";padding:0;margin:0}\n"] }]
-        }], propDecorators: { legacyOptionsQuery: [{
-                type: ContentChildren,
-                args: [forwardRef(() => TuiOption), { descendants: true }]
-            }], optionsQuery: [{
-                type: ContentChildren,
-                args: [forwardRef(() => TuiOptionWithValue), { descendants: true }]
-            }], emptyContent: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }] } });
-
-class TuiDataListDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDataListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiDataListDirective, isStandalone: true, selector: "ng-template[tuiDataList]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDataListDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                    selector: 'ng-template[tuiDataList]',
-                }]
+                    }, template: "<ng-content />\n@if (empty()) {\n    <!-- tuiOption selector purely for cosmetics, do not import -->\n    <span\n        tuiCell\n        tuiOption\n        class=\"t-empty\"\n    >\n        <ng-container *polymorpheusOutlet=\"emptyContent() || fallback() as text\">\n            {{ text }}\n        </ng-container>\n    </span>\n}\n", styles: ["tui-data-list{display:flex;flex-direction:column;padding:calc(var(--tui-data-list-padding) - var(--tui-data-list-margin)) var(--tui-data-list-padding)}tui-data-list:focus-within [tuiOption]._with-dropdown:not(:focus){background:transparent}tui-data-list[data-size=s]{--tui-data-list-margin: 0rem;--tui-data-list-padding: .25rem}tui-data-list[data-size=s] [tuiOption]{font:var(--tui-font-text-s);min-block-size:2rem;padding:.3125rem .375rem}tui-data-list[data-size=s] [tuiOption]:before{font-size:1rem}tui-data-list[data-size=m]{--tui-data-list-margin: .0625rem;--tui-data-list-padding: .25rem}tui-data-list[data-size=m] [tuiOption]{font:var(--tui-font-text-s);min-block-size:2.5rem;padding:.375rem .5rem}tui-data-list[data-size=l]{--tui-data-list-margin: .125rem;--tui-data-list-padding: .375rem}tui-data-list[data-size=l] [tuiOption]{font:var(--tui-font-text-m);min-block-size:2.75rem;padding:.375rem .625rem}tui-data-list [tuiOption]{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;box-sizing:border-box;margin:var(--tui-data-list-margin) 0;border-radius:var(--tui-radius-s);outline:none!important;cursor:pointer;word-break:break-word}tui-data-list [tuiOption]:disabled{opacity:var(--tui-disabled-opacity);cursor:default}@media (hover: hover) and (pointer: fine){tui-data-list [tuiOption]:hover:not(:disabled){background:var(--tui-background-neutral-1)}}tui-data-list [tuiOption]:active:not(:disabled),tui-data-list [tuiOption]:focus-within,tui-data-list [tuiOption]._with-dropdown{background:var(--tui-background-neutral-1)}tui-data-list [tuiOption]:after{font-size:1rem;margin-inline:auto -.625rem;border-inline:.5rem solid}tui-data-list>.t-empty{pointer-events:none;color:var(--tui-text-tertiary)}tui-opt-group{position:relative;display:flex;font:var(--tui-font-text-xs);font-weight:700;color:var(--tui-text-primary);flex-direction:column;line-height:1rem}tui-data-list[data-size=s] tui-opt-group:before{padding-inline:.375rem}tui-data-list[data-size=l] tui-opt-group{font:var(--tui-font-text-m);font-weight:700;line-height:1.25rem}tui-data-list[data-size=l] tui-opt-group:before{padding-inline:.625rem}tui-data-list[data-size=l] tui-opt-group:after{inset-inline:.625rem}tui-opt-group:empty:before,tui-opt-group:empty:after{display:none}tui-opt-group:before{content:attr(data-label);padding:var(--tui-data-list-padding) .5rem;margin:var(--tui-data-list-margin) 0;white-space:normal;word-break:break-word}tui-sheet-dialog tui-opt-group:before{font:var(--tui-font-heading-6);padding:.5rem 0!important;margin:0}tui-opt-group:after{position:absolute;inset-inline:.5rem;top:var(--tui-data-list-padding);block-size:1px;background:var(--tui-border-normal)}tui-opt-group:not(:empty)~tui-opt-group:before{padding-block-start:calc(.75rem + var(--tui-data-list-padding))}tui-opt-group:not(:empty)~tui-opt-group[data-label=\"\"]:before{padding:var(--tui-data-list-padding) 0}tui-opt-group:not(:empty)~tui-opt-group:after{content:\"\"}tui-opt-group[data-label=\"\"]:before{content:\"\";padding:0;margin:0}\n"] }]
         }] });
-function tuiAsDataList(list) {
-    return tuiProvide(TuiDataListDirective, list);
-}
 
 class TuiOptGroup {
+    constructor() {
+        this.label = input();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiOptGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiOptGroup, isStandalone: true, selector: "tui-opt-group", inputs: { label: "label" }, host: { attributes: { "role": "group" }, properties: { "attr.data-label": "label" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: TuiOptGroup, isStandalone: true, selector: "tui-opt-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.data-label": "label() || \"\"" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiOptGroup, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     selector: 'tui-opt-group',
                     host: {
                         role: 'group',
-                        '[attr.data-label]': 'label',
+                        '[attr.data-label]': 'label() || ""',
                     },
                 }]
-        }], propDecorators: { label: [{
-                type: Input
-            }] } });
+        }] });
+
+class TuiOption {
+    constructor() {
+        this.vcr = inject(ViewContainerRef);
+        this.isMobile = inject(TUI_IS_MOBILE);
+        this.el = tuiInjectElement();
+        this.datalist = inject(forwardRef(() => TuiDataListComponent), { optional: true });
+        this.content = inject(TUI_OPTION_CONTENT, {
+            optional: true,
+        });
+        this.ref = this.content &&
+            createComponent(this.content, {
+                environmentInjector: inject(EnvironmentInjector),
+                elementInjector: inject(INJECTOR),
+                hostElement: tuiInjectElement(),
+            });
+        this.dropdown = inject(TuiDropdownDirective, {
+            self: true,
+            optional: true,
+        })?.ref;
+        this.disabled = input(false);
+        if (this.ref) {
+            this.vcr.insert(this.ref.hostView);
+            this.ref.changeDetectorRef.detectChanges();
+        }
+    }
+    // Preventing focus loss upon focused option removal
+    ngOnDestroy() {
+        this.datalist?.handleFocusLossIfNecessary(this.el);
+    }
+    onMouseMove() {
+        if (!this.isMobile &&
+            !tuiIsFocused(this.el) &&
+            this.datalist &&
+            this.el.closest('[tuiDataListDropdownManager]')) {
+            this.el.focus({ preventScroll: true });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiOption, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: TuiOption, isStandalone: true, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button", "role": "option" }, listeners: { "mousemove.zoneless": "onMouseMove()" }, properties: { "attr.disabled": "disabled() || null", "class._with-dropdown": "dropdown?.()" } }, hostDirectives: [{ directive: i1.TuiWithIcons }, { directive: i2.TuiCell }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiOption, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[tuiOption], a[tuiOption], label[tuiOption]',
+                    hostDirectives: [TuiWithIcons, TuiCell],
+                    host: {
+                        type: 'button',
+                        role: 'option',
+                        '[attr.disabled]': 'disabled() || null',
+                        '[class._with-dropdown]': 'dropdown?.()',
+                        '(mousemove.zoneless)': 'onMouseMove()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
 
 const TuiDataList = [
     TuiDataListComponent,
-    TuiDataListDirective,
     TuiOption,
-    TuiOptionNew,
     TuiOptionWithValue,
     TuiOptGroup,
 ];
@@ -402,5 +233,5 @@ const TuiDataList = [
  * Generated bundle index. Do not edit.
  */
 
-export { TUI_DATA_LIST_ACCESSOR, TUI_DATA_LIST_HOST, TUI_OPTION_CONTENT, TuiDataList, TuiDataListComponent, TuiDataListDirective, TuiOptGroup, TuiOption, TuiOptionNew, TuiOptionWithValue, TuiWithOptionContent, tuiAsDataList, tuiAsDataListAccessor, tuiAsDataListHost, tuiAsOptionContent, tuiInjectDataListSize };
+export { TUI_DATA_LIST_HOST, TUI_OPTION_CONTENT, TuiDataList, TuiDataListComponent, TuiOptGroup, TuiOption, TuiOptionWithValue, TuiWithOptionContent, tuiAsDataListHost, tuiAsOptionContent, tuiInjectDataListSize };
 //# sourceMappingURL=taiga-ui-core-components-data-list.mjs.map