@slotted/angular 0.1.0-beta.1 → 0.1.0-beta.10

package/fesm2022/slotted-angular-column-manager.mjs

@@ -1,3 +1,4 @@
+import { writeSelectorKey } from '@slotted/core/selector-key';
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, Injectable, input, ElementRef, afterNextRender, Directive, model, output, computed, signal, viewChild, effect, untracked, afterEveryRender, DestroyRef, ViewEncapsulation, ChangeDetectionStrategy, Component, Renderer2 } from '@angular/core';
@@ -86,7 +87,7 @@ class SlColumnManagerPart {
     part = input.required({ ...(ngDevMode ? { debugName: "part" } : /* istanbul ignore next */ {}), alias: 'slColumnManagerPart' });
     host = inject(ElementRef);
     constructor() {
-        afterNextRender(() => this.host.nativeElement.setAttribute('data-part', this.part()));
+        afterNextRender(() => writeSelectorKey(this.host.nativeElement, 'part', this.part()));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlColumnManagerPart, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlColumnManagerPart, isStandalone: true, selector: "[slColumnManagerPart]", inputs: { part: { classPropertyName: "part", publicName: "slColumnManagerPart", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
@@ -547,18 +548,20 @@ class SlColumnManager {
       <div
         #root
         data-ui="column-manager"
+        data-ui-column-manager=""
         data-part="root"
+        data-part-root=""
         role="group"
         [attr.id]="rootId"
         [attr.aria-labelledby]="titleId"
         [attr.data-presentation]="resolvedPresentation()"
         [attr.data-apply]="resolvedApply()"
       >
-        <div data-part="header">
-          <h2 data-part="title" [attr.id]="titleId">{{ t('title') }}</h2>
-          <span data-part="summary">{{ summary() }}</span>
+        <div data-part="header" data-part-header="">
+          <h2 data-part="title" data-part-title="" [attr.id]="titleId">{{ t('title') }}</h2>
+          <span data-part="summary" data-part-summary="">{{ summary() }}</span>
         </div>
-        <div data-part="search">
+        <div data-part="search" data-part-search="">
           <div slTextField size="sm" [clearable]="true">
             <span slTextFieldStart
               ><span slIcon><svg slGlyph name="search"></svg></span
@@ -573,13 +576,14 @@ class SlColumnManager {
             />
           </div>
         </div>
-        <div data-part="list">
+        <div data-part="list" data-part-list="">
           @if (sections().length === 0 && searching()) {
-            <div data-part="empty" role="status">{{ t('noResults') }}</div>
+            <div data-part="empty" data-part-empty="" role="status">{{ t('noResults') }}</div>
           }
           @for (section of sections(); track section.key) {
             <div
               data-part="section"
+              data-part-section=""
               role="group"
               [attr.data-zone]="section.key"
               [attr.aria-labelledby]="rootId + '-' + section.key"
@@ -588,15 +592,24 @@ class SlColumnManager {
                 drag().container === section.key && drag().index !== null ? '' : null
               "
             >
-              <div data-part="section-label" [attr.id]="rootId + '-' + section.key">
+              <div
+                data-part="section-label"
+                data-part-section-label=""
+                [attr.id]="rootId + '-' + section.key"
+              >
                 {{ section.label }}
               </div>
               @for (item of section.items; track item.id) {
                 @if (dropAt(section.key, item.index)) {
-                  <div data-part="drop-indicator" aria-hidden="true"></div>
+                  <div
+                    data-part="drop-indicator"
+                    data-part-drop-indicator=""
+                    aria-hidden="true"
+                  ></div>
                 }
                 <div
                   data-part="item"
+                  data-part-item=""
                   [attr.data-column]="item.id"
                   [attr.data-hidden]="item.hidden ? '' : null"
                   [attr.data-locked]="item.locked ? '' : null"
@@ -606,6 +619,7 @@ class SlColumnManager {
                 >
                   <button
                     data-part="handle"
+                    data-part-handle=""
                     type="button"
                     [attr.aria-label]="t('reorder', { column: item.column.label })"
                     [attr.aria-disabled]="item.handleDisabled ? 'true' : null"
@@ -614,7 +628,7 @@ class SlColumnManager {
                   >
                     <span slIcon size="sm"><svg slGlyph name="grip-vertical"></svg></span>
                   </button>
-                  <div data-part="visibility">
+                  <div data-part="visibility" data-part-visibility="">
                     <div
                       slCheckbox
                       [checked]="!item.hidden"
@@ -623,7 +637,7 @@ class SlColumnManager {
                     >
                       {{ item.column.label }}
                       @if (item.status) {
-                        <span data-part="status">{{ item.status }}</span>
+                        <span data-part="status" data-part-status="">{{ item.status }}</span>
                       }
                       @if (item.column.description) {
                         <p slCheckboxDescription>{{ item.column.description }}</p>
@@ -634,6 +648,7 @@ class SlColumnManager {
                     type="button"
                     slColumnManagerPart="pin"
                     data-part="pin"
+                    data-part-pin=""
                     [slMenuTriggerFor]="pinMenu"
                     [attr.aria-label]="t('pin', { column: item.column.label })"
                     [attr.data-pinned]="item.zone ? '' : null"
@@ -664,12 +679,16 @@ class SlColumnManager {
                 </div>
               }
               @if (section.dropAtEnd) {
-                <div data-part="drop-indicator" aria-hidden="true"></div>
+                <div
+                  data-part="drop-indicator"
+                  data-part-drop-indicator=""
+                  aria-hidden="true"
+                ></div>
               }
             </div>
           }
         </div>
-        <div data-part="footer">
+        <div data-part="footer" data-part-footer="">
           <button
             slButton
             slColumnManagerPart="show-all"
@@ -720,7 +739,7 @@ class SlColumnManager {
         </div>
       </div>
     </ng-template>
-  `, isInline: true, styles: ["@layer slotted.components{[data-ui=column-manager]{--_text: var(--slotted-text, CanvasText);--_muted: var(--slotted-text-muted, GrayText);--_rule: var(--slotted-border-subtle, ButtonBorder);--_hover: var(--slotted-tone-secondary-subtle-hover, ButtonFace);--_active: var(--slotted-tone-secondary-subtle-active, ButtonFace);--_inset: var(--slotted-control-padding-inline-md, 13px);--_row-block: var(--slotted-control-gap-sm, 6px);--_gap: var(--slotted-control-gap-md, 8px);--_font-size: var(--slotted-control-font-size-md, 13px);--_line-height: var(--slotted-line-height-md, 1.5);--_line: calc(var(--_font-size) * var(--_line-height));--_glyph: var(--slotted-control-icon-size-sm, 14px);--_control: min( calc(var(--_glyph) + 2 * var(--slotted-space-2, .25rem)), var(--slotted-control-inner-size-md, 24px) );--_radius: var(--slotted-radius-sm, 4px);--_duration: var(--slotted-control-transition-duration);--_easing: var(--slotted-control-transition-easing);--_inline-size: var(--slotted-column-manager-inline-size, 22rem);--_list-max: var(--slotted-column-manager-list-max-block-size, min(60vh, 28rem));box-sizing:border-box;color:var(--_text);display:grid;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);font-size:var(--_font-size);grid-template-rows:auto auto minmax(0,1fr) auto;line-height:var(--_line-height);max-block-size:100%;min-inline-size:0;text-align:start;container-name:column-manager;container-type:inline-size}[data-ui=column-manager][data-presentation=popover]{inline-size:min(var(--_inline-size),calc(var(--slotted-positioner-available-width, 100vw) - var(--slotted-space-8, 1.5rem)))}[data-ui=column-manager][data-presentation=drawer]{block-size:100%;inline-size:100%}[data-ui=column-manager][data-presentation=inline]{inline-size:100%}[data-ui=column-manager]>[data-part=header]{align-items:baseline;column-gap:var(--_gap);display:flex;flex-wrap:wrap;padding-block:var(--_inset) var(--slotted-space-4, .5rem);padding-inline:var(--_inset)}[data-ui=column-manager]>[data-part=header]>[data-part=title]{color:var(--_text);font-family:var( --slotted-font-family-heading, var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif) );font-size:var(--slotted-font-size-md, .875rem);font-weight:var(--slotted-font-weight-semibold, 600);line-height:var(--slotted-line-height-md, 1.5);margin:0;min-inline-size:0}[data-ui=column-manager]>[data-part=header]>[data-part=summary]{color:var(--_muted);font-size:var(--slotted-font-size-sm, .8125rem);font-variant-numeric:tabular-nums;line-height:var(--slotted-line-height-sm, 1.45);margin-inline-start:auto;white-space:nowrap}[data-ui=column-manager]>[data-part=search]{padding-block-end:var(--_gap);padding-inline:var(--_inset)}[data-ui=column-manager]>[data-part=search]>[data-ui=text-field]{inline-size:100%}[data-ui=column-manager]>[data-part=list]{border-block:var(--slotted-border-width-thin, 1px) solid var(--_rule);max-block-size:var(--_list-max);min-block-size:0;overflow-y:auto;overscroll-behavior:contain;padding-block:var(--slotted-space-2, .25rem)}[data-ui=column-manager][data-presentation=drawer]>[data-part=list]{max-block-size:none}[data-ui=column-manager]>[data-part=list]>[data-part=section]{padding-block:var(--slotted-space-2, .25rem);position:relative}[data-ui=column-manager]>[data-part=list]>[data-part=section]+[data-part=section]{border-block-start:var(--slotted-border-width-thin, 1px) solid var(--_rule)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=section-label]{color:var(--_muted);font-size:var(--slotted-font-size-xs, .75rem);font-weight:var(--slotted-font-weight-medium, 500);line-height:var(--slotted-line-height-xs, 1.4);padding-block:var(--slotted-space-3, .375rem) var(--slotted-space-2, .25rem);padding-inline:var(--_inset)}[data-ui=column-manager]>[data-part=list]>[data-part=section][data-sole]>[data-part=section-label]{block-size:1px;clip-path:inset(50%);inline-size:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]{align-items:start;column-gap:var(--slotted-space-2, .25rem);display:grid;grid-template-columns:auto minmax(0,1fr) auto;padding-block:var(--_row-block);padding-inline:calc(var(--_inset) - var(--slotted-space-2, .25rem));position:relative;transition:opacity var(--_duration) var(--_easing)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item][data-dragging]{opacity:.5}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>:is([data-part=handle],[data-part=pin]){align-items:center;background-color:transparent;block-size:var(--_control);border:0;border-radius:var(--_radius);color:var(--_muted);display:inline-flex;flex:none;inline-size:var(--_control);justify-content:center;margin:0;margin-block:calc((var(--_line) - var(--_control)) / 2);padding:0;transition:background-color var(--_duration) var(--_easing),color var(--_duration) var(--_easing)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>[data-part=handle]{cursor:grab;touch-action:none}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>[data-part=pin][data-pinned]{color:var(--slotted-tone-accent-text, LinkText)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>:is([data-part=handle],[data-part=pin]):not([data-disabled]):hover,[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>[data-part=pin][data-open]:not([data-disabled]){background-color:var(--_hover);color:var(--_text)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>:is([data-part=handle],[data-part=pin]):not([data-disabled]):active{background-color:var(--_active)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>:is([data-part=handle],[data-part=pin]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, currentColor);outline-offset:calc(var(--slotted-focus-ring-width, 2px) * -1)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>[data-part=handle][data-disabled]{color:var(--slotted-disabled-foreground, GrayText);cursor:default}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item][data-dragging]>[data-part=handle]{cursor:grabbing}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>[data-part=visibility]{display:block;min-inline-size:0;overflow-wrap:anywhere;padding-inline:var(--slotted-space-2, .25rem)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>[data-part=visibility] [data-part=description]{text-wrap:pretty}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>[data-part=visibility] [data-part=status]{color:var(--_muted);display:inline-block;font-size:var(--slotted-font-size-xs, .75rem)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item][data-space-hidden]>[data-part=visibility] [data-part=status]{color:var(--slotted-tone-warning-text, CanvasText)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=drop-indicator]{block-size:0;pointer-events:none;position:relative}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=drop-indicator]:before{background-color:var(--slotted-tone-accent-solid);block-size:var(--slotted-border-width-thick, 2px);border-radius:var(--slotted-radius-full, 9999px);content:\"\";inset-block-start:calc(var(--slotted-border-width-thick, 2px) / -2);inset-inline:var(--_inset);position:absolute}[data-ui=column-manager]>[data-part=list]>[data-part=section][data-drop-target]{background-color:var(--_hover)}[data-ui=column-manager]>[data-part=list]>[data-part=empty]{color:var(--_muted);padding-block:var(--slotted-space-8, 1.5rem);padding-inline:var(--_inset);text-align:center}[data-ui=column-manager]>[data-part=footer]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--_gap);padding:var(--_inset)}[data-ui=column-manager]>[data-part=footer]>:is([data-part=show-all],[data-part=reset]){flex:none}[data-ui=column-manager]>[data-part=footer]>[data-part=cancel]{margin-inline-start:auto}[data-ui=column-manager]>[data-part=footer]>[data-part=apply]{flex:none}@container column-manager (max-width: 20rem){[data-ui=column-manager]>[data-part=footer]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}[data-ui=column-manager]>[data-part=footer]>[data-part=cancel]{margin-inline-start:0}}[data-part=trigger][data-column-manager-trigger],[data-column-manager-trigger]{--_count-size: var(--slotted-font-size-xs, .75rem)}[data-column-manager-trigger] [data-part=count]{background-color:var(--slotted-tone-accent-surface, Canvas);border-radius:var(--slotted-radius-full, 9999px);box-sizing:border-box;color:var(--slotted-tone-accent-text, LinkText);display:inline-block;font-size:var(--_count-size);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-semibold, 600);line-height:calc(var(--_count-size) + 2 * var(--slotted-space-1, .125rem));margin-inline-start:var(--slotted-space-3, .375rem);min-inline-size:calc(var(--_count-size) + 2 * var(--slotted-space-2, .25rem));padding-inline:var(--slotted-space-2, .25rem);text-align:center}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlButton, selector: "button[slButton]", inputs: ["disabled", "focusableWhenDisabled", "fullWidth", "loading", "loadingDelay", "messages", "size", "tone", "type", "variant"], exportAs: ["slButton"] }, { kind: "component", type: SlCheckbox, selector: "[slCheckbox]", inputs: ["checked", "defaultChecked", "indeterminate", "parent", "value", "name", "size", "labelPlacement", "variant", "disabled", "readOnly", "invalid"], outputs: ["checkedChange"], exportAs: ["slCheckbox"] }, { kind: "directive", type: SlCheckboxDescription, selector: "[slCheckboxDescription]", exportAs: ["slCheckboxDescription"] }, { kind: "directive", type: SlColumnManagerPart, selector: "[slColumnManagerPart]", inputs: ["slColumnManagerPart"] }, { kind: "component", type: SlDrawer, selector: "sl-drawer", inputs: ["open", "extent", "mode", "side", "size", "mount", "escape", "outsidePress", "back", "modal", "loading", "messages", "drag", "scrimFrom", "minExtent", "maxExtent", "snapPoints", "container", "initialFocus", "finalFocus"], outputs: ["openChange", "extentChange", "openChangeRequest", "extentChangeRequest", "closed"], exportAs: ["slDrawer"] }, { kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }, { kind: "component", type: SlMenu, selector: "sl-menu", inputs: ["value", "aria-label", "aria-describedby", "open", "align", "side", "size", "mount", "strategy", "sideOffset", "alignOffset", "collisionPadding", "submenuOpenDelay", "submenuCloseDelay", "typeaheadTimeout", "disabled", "loop", "typeahead", "openOnHover", "closeOnSelect", "closeOnEscape", "closeOnOutsidePress", "flip", "shift", "hideWhenDetached", "portal", "loading"], outputs: ["openChange", "openChangeRequest"], exportAs: ["slMenu"] }, { kind: "component", type: SlMenuItem, selector: "button[slMenuItem], a[slMenuItem], button[slMenuCheckboxItem], button[slMenuRadioItem]", inputs: ["disabled", "textValue", "tone", "shortcut", "closeOnSelect", "value", "checked"], outputs: ["checkedChange", "checkedChangeRequest", "select"], exportAs: ["slMenuItem"] }, { kind: "directive", type: SlMenuTrigger, selector: "[slMenuTriggerFor]", inputs: ["slMenuTriggerFor"], exportAs: ["slMenuTrigger"] }, { kind: "directive", type: SlPopover, selector: "[slPopover]", inputs: ["open", "defaultOpen", "disabled", "size", "width", "side", "align", "mount", "strategy", "messages", "initialFocus", "finalFocus", "arrow", "autoFocus", "closeOnEscape", "closeOnOutsidePress", "flip", "shift", "hideWhenDetached", "portal", "sideOffset", "alignOffset", "collisionPadding", "arrowPadding"], outputs: ["openChange", "openChangeRequest"], exportAs: ["slPopover"] }, { kind: "component", type: SlPopoverContent, selector: "[slPopoverContent]", exportAs: ["slPopoverContent"] }, { kind: "directive", type: SlPopoverLayer, selector: "ng-template[slPopoverLayer]", exportAs: ["slPopoverLayer"] }, { kind: "component", type: SlTextField, selector: "[slTextField]", inputs: ["size", "variant", "mono", "clearable", "revealable", "copyable", "messages", "loading"], outputs: ["valueCopy"], exportAs: ["slTextField"] }, { kind: "directive", type: SlTextFieldInput, selector: "input[slTextFieldInput]", inputs: ["value", "defaultValue", "disabled", "readOnly", "invalid", "showCount", "countMax", "revealed", "defaultRevealed", "type"], outputs: ["valueChange", "revealedChange"], exportAs: ["slTextFieldInput"] }, { kind: "directive", type: SlTextFieldStart, selector: "[slTextFieldStart]", exportAs: ["slTextFieldStart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["@layer slotted.components{[data-ui-column-manager]{--_text: var(--slotted-text, CanvasText);--_muted: var(--slotted-text-muted, GrayText);--_rule: var(--slotted-border-subtle, ButtonBorder);--_hover: var(--slotted-tone-secondary-subtle-hover, ButtonFace);--_active: var(--slotted-tone-secondary-subtle-active, ButtonFace);--_inset: var(--slotted-control-padding-inline-md, 13px);--_row-block: var(--slotted-control-gap-sm, 6px);--_gap: var(--slotted-control-gap-md, 8px);--_font-size: var(--slotted-control-font-size-md, 13px);--_line-height: var(--slotted-line-height-md, 1.5);--_line: calc(var(--_font-size) * var(--_line-height));--_glyph: var(--slotted-control-icon-size-sm, 14px);--_control: min( calc(var(--_glyph) + 2 * var(--slotted-space-2, .25rem)), var(--slotted-control-inner-size-md, 24px) );--_radius: var(--slotted-radius-sm, 4px);--_duration: var(--slotted-control-transition-duration);--_easing: var(--slotted-control-transition-easing);--_inline-size: var(--slotted-column-manager-inline-size, 22rem);--_list-max: var(--slotted-column-manager-list-max-block-size, min(60vh, 28rem));box-sizing:border-box;color:var(--_text);display:grid;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);font-size:var(--_font-size);grid-template-rows:auto auto minmax(0,1fr) auto;line-height:var(--_line-height);max-block-size:100%;min-inline-size:0;text-align:start;container-name:column-manager;container-type:inline-size}[data-ui-column-manager][data-presentation=popover]{inline-size:min(var(--_inline-size),calc(var(--slotted-positioner-available-width, 100vw) - var(--slotted-space-8, 1.5rem)))}[data-ui-column-manager][data-presentation=drawer]{block-size:100%;inline-size:100%}[data-ui-column-manager][data-presentation=inline]{inline-size:100%}[data-ui-column-manager]>[data-part-header]{align-items:baseline;column-gap:var(--_gap);display:flex;flex-wrap:wrap;padding-block:var(--_inset) var(--slotted-space-4, .5rem);padding-inline:var(--_inset)}[data-ui-column-manager]>[data-part-header]>[data-part-title]{color:var(--_text);font-family:var( --slotted-font-family-heading, var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif) );font-size:var(--slotted-font-size-md, .875rem);font-weight:var(--slotted-font-weight-semibold, 600);line-height:var(--slotted-line-height-md, 1.5);margin:0;min-inline-size:0}[data-ui-column-manager]>[data-part-header]>[data-part-summary]{color:var(--_muted);font-size:var(--slotted-font-size-sm, .8125rem);font-variant-numeric:tabular-nums;line-height:var(--slotted-line-height-sm, 1.45);margin-inline-start:auto;white-space:nowrap}[data-ui-column-manager]>[data-part-search]{padding-block-end:var(--_gap);padding-inline:var(--_inset)}[data-ui-column-manager]>[data-part-search]>[data-ui-text-field]{inline-size:100%}[data-ui-column-manager]>[data-part-list]{border-block:var(--slotted-border-width-thin, 1px) solid var(--_rule);max-block-size:var(--_list-max);min-block-size:0;overflow-y:auto;overscroll-behavior:contain;padding-block:var(--slotted-space-2, .25rem)}[data-ui-column-manager][data-presentation=drawer]>[data-part-list]{max-block-size:none}[data-ui-column-manager]>[data-part-list]>[data-part-section]{padding-block:var(--slotted-space-2, .25rem);position:relative}[data-ui-column-manager]>[data-part-list]>[data-part-section]+[data-part-section]{border-block-start:var(--slotted-border-width-thin, 1px) solid var(--_rule)}[data-ui-column-manager]>[data-part-list]>[data-part-section]>[data-part-section-label]{color:var(--_muted);font-size:var(--slotted-font-size-xs, .75rem);font-weight:var(--slotted-font-weight-medium, 500);line-height:var(--slotted-line-height-xs, 1.4);padding-block:var(--slotted-space-3, .375rem) var(--slotted-space-2, .25rem);padding-inline:var(--_inset)}[data-ui-column-manager]>[data-part-list]>[data-part-section][data-sole]>[data-part-section-label]{block-size:1px;clip-path:inset(50%);inline-size:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}[data-ui-column-manager]>[data-part-list]>[data-part-section]>[data-part-item]{align-items:start;column-gap:var(--slotted-space-2, .25rem);display:grid;grid-template-columns:auto minmax(0,1fr) auto;padding-block:var(--_row-block);padding-inline:calc(var(--_inset) - var(--slotted-space-2, .25rem));position:relative;transition:opacity var(--_duration) var(--_easing)}[data-ui-column-manager]>[data-part-list]>[data-part-section]>[data-part-item][data-dragging]{opacity:.5}[data-ui-column-manager]>[data-part-list]>[data-part-section]>[data-part-item]>:is([data-part-handle],[data-part-pin]){align-items:center;background-color:transparent;block-size:var(--_control);border:0;border-radius:var(--_radius);color:var(--_muted);display:inline-flex;flex:none;inline-size:var(--_control);justify-content:center;margin:0;margin-block:calc((var(--_line) - var(--_control)) / 2);padding:0;transition:background-color var(--_duration) var(--_easing),color var(--_duration) var(--_easing)}[data-ui-column-manager]>[data-part-list]>[data-part-section]>[data-part-item]>[data-part-handle]{cursor:grab;touch-action:none}[data-ui-column-manager]>[data-part-list]>[data-part-section]>[data-part-item]>[data-part-pin][data-pinned]{color:var(--slotted-tone-accent-text, LinkText)}[data-ui-column-manager]>[data-part-list]>[data-part-section]>[data-part-item]>:is([data-part-handle],[data-part-pin]):not([data-disabled]):hover,[data-ui-column-manager]>[data-part-list]>[data-part-section]>[data-part-item]>[data-part-pin][data-open]:not([data-disabled]){background-color:var(--_hover);color:var(--_text)}[data-ui-column-manager]>[data-part-list]>[data-part-section]>[data-part-item]>:is([data-part-handle],[data-part-pin]):not([data-disabled]):active{background-color:var(--_active)}[data-ui-column-manager]>[data-part-list]>[data-part-section]>[data-part-item]>:is([data-part-handle],[data-part-pin]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, currentColor);outline-offset:calc(var(--slotted-focus-ring-width, 2px) * -1)}[data-ui-column-manager]>[data-part-list]>[data-part-section]>[data-part-item]>[data-part-handle][data-disabled]{color:var(--slotted-disabled-foreground, GrayText);cursor:default}[data-ui-column-manager]>[data-part-list]>[data-part-section]>[data-part-item][data-dragging]>[data-part-handle]{cursor:grabbing}[data-ui-column-manager]>[data-part-list]>[data-part-section]>[data-part-item]>[data-part-visibility]{display:block;min-inline-size:0;overflow-wrap:anywhere;padding-inline:var(--slotted-space-2, .25rem)}[data-ui-column-manager]>[data-part-list]>[data-part-section]>[data-part-item]>[data-part-visibility] [data-part-description]{text-wrap:pretty}[data-ui-column-manager]>[data-part-list]>[data-part-section]>[data-part-item]>[data-part-visibility] [data-part-status]{color:var(--_muted);display:inline-block;font-size:var(--slotted-font-size-xs, .75rem)}[data-ui-column-manager]>[data-part-list]>[data-part-section]>[data-part-item][data-space-hidden]>[data-part-visibility] [data-part-status]{color:var(--slotted-tone-warning-text, CanvasText)}[data-ui-column-manager]>[data-part-list]>[data-part-section]>[data-part-drop-indicator]{block-size:0;pointer-events:none;position:relative}[data-ui-column-manager]>[data-part-list]>[data-part-section]>[data-part-drop-indicator]:before{background-color:var(--slotted-tone-accent-solid);block-size:var(--slotted-border-width-thick, 2px);border-radius:var(--slotted-radius-full, 9999px);content:\"\";inset-block-start:calc(var(--slotted-border-width-thick, 2px) / -2);inset-inline:var(--_inset);position:absolute}[data-ui-column-manager]>[data-part-list]>[data-part-section][data-drop-target]{background-color:var(--_hover)}[data-ui-column-manager]>[data-part-list]>[data-part-empty]{color:var(--_muted);padding-block:var(--slotted-space-8, 1.5rem);padding-inline:var(--_inset);text-align:center}[data-ui-column-manager]>[data-part-footer]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--_gap);padding:var(--_inset)}[data-ui-column-manager]>[data-part-footer]>:is([data-part-show-all],[data-part-reset]){flex:none}[data-ui-column-manager]>[data-part-footer]>[data-part-cancel]{margin-inline-start:auto}[data-ui-column-manager]>[data-part-footer]>[data-part-apply]{flex:none}@container column-manager (max-width: 20rem){[data-ui-column-manager]>[data-part-footer]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}[data-ui-column-manager]>[data-part-footer]>[data-part-cancel]{margin-inline-start:0}}[data-part-trigger][data-column-manager-trigger],[data-column-manager-trigger]{--_count-size: var(--slotted-font-size-xs, .75rem)}[data-column-manager-trigger] [data-part-count]{background-color:var(--slotted-tone-accent-surface, Canvas);border-radius:var(--slotted-radius-full, 9999px);box-sizing:border-box;color:var(--slotted-tone-accent-text, LinkText);display:inline-block;font-size:var(--_count-size);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-semibold, 600);line-height:calc(var(--_count-size) + 2 * var(--slotted-space-1, .125rem));margin-inline-start:var(--slotted-space-3, .375rem);min-inline-size:calc(var(--_count-size) + 2 * var(--slotted-space-2, .25rem));padding-inline:var(--slotted-space-2, .25rem);text-align:center}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlButton, selector: "button[slButton]", inputs: ["disabled", "focusableWhenDisabled", "fullWidth", "justify", "loading", "loadingDelay", "messages", "size", "tone", "type", "variant"], exportAs: ["slButton"] }, { kind: "component", type: SlCheckbox, selector: "[slCheckbox]", inputs: ["checked", "defaultChecked", "indeterminate", "parent", "value", "name", "tabIndex", "size", "labelPlacement", "variant", "disabled", "readOnly", "invalid"], outputs: ["checkedChange"], exportAs: ["slCheckbox"] }, { kind: "directive", type: SlCheckboxDescription, selector: "[slCheckboxDescription]", exportAs: ["slCheckboxDescription"] }, { kind: "directive", type: SlColumnManagerPart, selector: "[slColumnManagerPart]", inputs: ["slColumnManagerPart"] }, { kind: "component", type: SlDrawer, selector: "sl-drawer", inputs: ["open", "extent", "mode", "side", "size", "mount", "escape", "outsidePress", "back", "modal", "loading", "messages", "drag", "scrimFrom", "minExtent", "maxExtent", "snapPoints", "container", "initialFocus", "finalFocus"], outputs: ["openChange", "extentChange", "openChangeRequest", "extentChangeRequest", "closed", "openChangeComplete"], exportAs: ["slDrawer"] }, { kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }, { kind: "component", type: SlMenu, selector: "sl-menu", inputs: ["value", "aria-label", "aria-describedby", "open", "align", "side", "size", "width", "mount", "strategy", "sideOffset", "alignOffset", "collisionPadding", "submenuOpenDelay", "submenuCloseDelay", "typeaheadTimeout", "disabled", "loop", "typeahead", "openOnHover", "closeOnSelect", "closeOnEscape", "closeOnOutsidePress", "flip", "shift", "hideWhenDetached", "portal", "loading"], outputs: ["openChange", "openChangeRequest"], exportAs: ["slMenu"] }, { kind: "component", type: SlMenuItem, selector: "button[slMenuItem], a[slMenuItem], button[slMenuCheckboxItem], button[slMenuRadioItem]", inputs: ["disabled", "textValue", "tone", "shortcut", "closeOnSelect", "value", "checked"], outputs: ["checkedChange", "checkedChangeRequest", "select"], exportAs: ["slMenuItem"] }, { kind: "directive", type: SlMenuTrigger, selector: "[slMenuTriggerFor]", inputs: ["slMenuTriggerFor"], exportAs: ["slMenuTrigger"] }, { kind: "directive", type: SlPopover, selector: "[slPopover]", inputs: ["open", "defaultOpen", "disabled", "size", "width", "side", "align", "mount", "strategy", "messages", "initialFocus", "finalFocus", "arrow", "autoFocus", "closeOnEscape", "closeOnOutsidePress", "flip", "shift", "hideWhenDetached", "portal", "sideOffset", "alignOffset", "collisionPadding", "arrowPadding"], outputs: ["openChange", "openChangeRequest"], exportAs: ["slPopover"] }, { kind: "component", type: SlPopoverContent, selector: "[slPopoverContent]", exportAs: ["slPopoverContent"] }, { kind: "directive", type: SlPopoverLayer, selector: "ng-template[slPopoverLayer]", exportAs: ["slPopoverLayer"] }, { kind: "component", type: SlTextField, selector: "[slTextField]", inputs: ["size", "variant", "mono", "clearable", "revealable", "copyable", "messages", "loading"], outputs: ["valueCopy"], exportAs: ["slTextField"] }, { kind: "directive", type: SlTextFieldInput, selector: "input[slTextFieldInput]", inputs: ["value", "defaultValue", "disabled", "readOnly", "invalid", "showCount", "countMax", "revealed", "defaultRevealed", "type"], outputs: ["valueChange", "revealedChange"], exportAs: ["slTextFieldInput"] }, { kind: "directive", type: SlTextFieldStart, selector: "[slTextFieldStart]", exportAs: ["slTextFieldStart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlColumnManager, decorators: [{
             type: Component,
@@ -781,18 +800,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
       <div
         #root
         data-ui="column-manager"
+        data-ui-column-manager=""
         data-part="root"
+        data-part-root=""
         role="group"
         [attr.id]="rootId"
         [attr.aria-labelledby]="titleId"
         [attr.data-presentation]="resolvedPresentation()"
         [attr.data-apply]="resolvedApply()"
       >
-        <div data-part="header">
-          <h2 data-part="title" [attr.id]="titleId">{{ t('title') }}</h2>
-          <span data-part="summary">{{ summary() }}</span>
+        <div data-part="header" data-part-header="">
+          <h2 data-part="title" data-part-title="" [attr.id]="titleId">{{ t('title') }}</h2>
+          <span data-part="summary" data-part-summary="">{{ summary() }}</span>
         </div>
-        <div data-part="search">
+        <div data-part="search" data-part-search="">
           <div slTextField size="sm" [clearable]="true">
             <span slTextFieldStart
               ><span slIcon><svg slGlyph name="search"></svg></span
@@ -807,13 +828,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
             />
           </div>
         </div>
-        <div data-part="list">
+        <div data-part="list" data-part-list="">
           @if (sections().length === 0 && searching()) {
-            <div data-part="empty" role="status">{{ t('noResults') }}</div>
+            <div data-part="empty" data-part-empty="" role="status">{{ t('noResults') }}</div>
           }
           @for (section of sections(); track section.key) {
             <div
               data-part="section"
+              data-part-section=""
               role="group"
               [attr.data-zone]="section.key"
               [attr.aria-labelledby]="rootId + '-' + section.key"
@@ -822,15 +844,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 drag().container === section.key && drag().index !== null ? '' : null
               "
             >
-              <div data-part="section-label" [attr.id]="rootId + '-' + section.key">
+              <div
+                data-part="section-label"
+                data-part-section-label=""
+                [attr.id]="rootId + '-' + section.key"
+              >
                 {{ section.label }}
               </div>
               @for (item of section.items; track item.id) {
                 @if (dropAt(section.key, item.index)) {
-                  <div data-part="drop-indicator" aria-hidden="true"></div>
+                  <div
+                    data-part="drop-indicator"
+                    data-part-drop-indicator=""
+                    aria-hidden="true"
+                  ></div>
                 }
                 <div
                   data-part="item"
+                  data-part-item=""
                   [attr.data-column]="item.id"
                   [attr.data-hidden]="item.hidden ? '' : null"
                   [attr.data-locked]="item.locked ? '' : null"
@@ -840,6 +871,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 >
                   <button
                     data-part="handle"
+                    data-part-handle=""
                     type="button"
                     [attr.aria-label]="t('reorder', { column: item.column.label })"
                     [attr.aria-disabled]="item.handleDisabled ? 'true' : null"
@@ -848,7 +880,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                   >
                     <span slIcon size="sm"><svg slGlyph name="grip-vertical"></svg></span>
                   </button>
-                  <div data-part="visibility">
+                  <div data-part="visibility" data-part-visibility="">
                     <div
                       slCheckbox
                       [checked]="!item.hidden"
@@ -857,7 +889,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     >
                       {{ item.column.label }}
                       @if (item.status) {
-                        <span data-part="status">{{ item.status }}</span>
+                        <span data-part="status" data-part-status="">{{ item.status }}</span>
                       }
                       @if (item.column.description) {
                         <p slCheckboxDescription>{{ item.column.description }}</p>
@@ -868,6 +900,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     type="button"
                     slColumnManagerPart="pin"
                     data-part="pin"
+                    data-part-pin=""
                     [slMenuTriggerFor]="pinMenu"
                     [attr.aria-label]="t('pin', { column: item.column.label })"
                     [attr.data-pinned]="item.zone ? '' : null"
@@ -898,12 +931,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 </div>
               }
               @if (section.dropAtEnd) {
-                <div data-part="drop-indicator" aria-hidden="true"></div>
+                <div
+                  data-part="drop-indicator"
+                  data-part-drop-indicator=""
+                  aria-hidden="true"
+                ></div>
               }
             </div>
           }
         </div>
-        <div data-part="footer">
+        <div data-part="footer" data-part-footer="">
           <button
             slButton
             slColumnManagerPart="show-all"
@@ -954,7 +991,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         </div>
       </div>
     </ng-template>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { '[style.display]': "'contents'" }, styles: ["@layer slotted.components{[data-ui=column-manager]{--_text: var(--slotted-text, CanvasText);--_muted: var(--slotted-text-muted, GrayText);--_rule: var(--slotted-border-subtle, ButtonBorder);--_hover: var(--slotted-tone-secondary-subtle-hover, ButtonFace);--_active: var(--slotted-tone-secondary-subtle-active, ButtonFace);--_inset: var(--slotted-control-padding-inline-md, 13px);--_row-block: var(--slotted-control-gap-sm, 6px);--_gap: var(--slotted-control-gap-md, 8px);--_font-size: var(--slotted-control-font-size-md, 13px);--_line-height: var(--slotted-line-height-md, 1.5);--_line: calc(var(--_font-size) * var(--_line-height));--_glyph: var(--slotted-control-icon-size-sm, 14px);--_control: min( calc(var(--_glyph) + 2 * var(--slotted-space-2, .25rem)), var(--slotted-control-inner-size-md, 24px) );--_radius: var(--slotted-radius-sm, 4px);--_duration: var(--slotted-control-transition-duration);--_easing: var(--slotted-control-transition-easing);--_inline-size: var(--slotted-column-manager-inline-size, 22rem);--_list-max: var(--slotted-column-manager-list-max-block-size, min(60vh, 28rem));box-sizing:border-box;color:var(--_text);display:grid;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);font-size:var(--_font-size);grid-template-rows:auto auto minmax(0,1fr) auto;line-height:var(--_line-height);max-block-size:100%;min-inline-size:0;text-align:start;container-name:column-manager;container-type:inline-size}[data-ui=column-manager][data-presentation=popover]{inline-size:min(var(--_inline-size),calc(var(--slotted-positioner-available-width, 100vw) - var(--slotted-space-8, 1.5rem)))}[data-ui=column-manager][data-presentation=drawer]{block-size:100%;inline-size:100%}[data-ui=column-manager][data-presentation=inline]{inline-size:100%}[data-ui=column-manager]>[data-part=header]{align-items:baseline;column-gap:var(--_gap);display:flex;flex-wrap:wrap;padding-block:var(--_inset) var(--slotted-space-4, .5rem);padding-inline:var(--_inset)}[data-ui=column-manager]>[data-part=header]>[data-part=title]{color:var(--_text);font-family:var( --slotted-font-family-heading, var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif) );font-size:var(--slotted-font-size-md, .875rem);font-weight:var(--slotted-font-weight-semibold, 600);line-height:var(--slotted-line-height-md, 1.5);margin:0;min-inline-size:0}[data-ui=column-manager]>[data-part=header]>[data-part=summary]{color:var(--_muted);font-size:var(--slotted-font-size-sm, .8125rem);font-variant-numeric:tabular-nums;line-height:var(--slotted-line-height-sm, 1.45);margin-inline-start:auto;white-space:nowrap}[data-ui=column-manager]>[data-part=search]{padding-block-end:var(--_gap);padding-inline:var(--_inset)}[data-ui=column-manager]>[data-part=search]>[data-ui=text-field]{inline-size:100%}[data-ui=column-manager]>[data-part=list]{border-block:var(--slotted-border-width-thin, 1px) solid var(--_rule);max-block-size:var(--_list-max);min-block-size:0;overflow-y:auto;overscroll-behavior:contain;padding-block:var(--slotted-space-2, .25rem)}[data-ui=column-manager][data-presentation=drawer]>[data-part=list]{max-block-size:none}[data-ui=column-manager]>[data-part=list]>[data-part=section]{padding-block:var(--slotted-space-2, .25rem);position:relative}[data-ui=column-manager]>[data-part=list]>[data-part=section]+[data-part=section]{border-block-start:var(--slotted-border-width-thin, 1px) solid var(--_rule)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=section-label]{color:var(--_muted);font-size:var(--slotted-font-size-xs, .75rem);font-weight:var(--slotted-font-weight-medium, 500);line-height:var(--slotted-line-height-xs, 1.4);padding-block:var(--slotted-space-3, .375rem) var(--slotted-space-2, .25rem);padding-inline:var(--_inset)}[data-ui=column-manager]>[data-part=list]>[data-part=section][data-sole]>[data-part=section-label]{block-size:1px;clip-path:inset(50%);inline-size:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]{align-items:start;column-gap:var(--slotted-space-2, .25rem);display:grid;grid-template-columns:auto minmax(0,1fr) auto;padding-block:var(--_row-block);padding-inline:calc(var(--_inset) - var(--slotted-space-2, .25rem));position:relative;transition:opacity var(--_duration) var(--_easing)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item][data-dragging]{opacity:.5}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>:is([data-part=handle],[data-part=pin]){align-items:center;background-color:transparent;block-size:var(--_control);border:0;border-radius:var(--_radius);color:var(--_muted);display:inline-flex;flex:none;inline-size:var(--_control);justify-content:center;margin:0;margin-block:calc((var(--_line) - var(--_control)) / 2);padding:0;transition:background-color var(--_duration) var(--_easing),color var(--_duration) var(--_easing)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>[data-part=handle]{cursor:grab;touch-action:none}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>[data-part=pin][data-pinned]{color:var(--slotted-tone-accent-text, LinkText)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>:is([data-part=handle],[data-part=pin]):not([data-disabled]):hover,[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>[data-part=pin][data-open]:not([data-disabled]){background-color:var(--_hover);color:var(--_text)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>:is([data-part=handle],[data-part=pin]):not([data-disabled]):active{background-color:var(--_active)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>:is([data-part=handle],[data-part=pin]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, currentColor);outline-offset:calc(var(--slotted-focus-ring-width, 2px) * -1)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>[data-part=handle][data-disabled]{color:var(--slotted-disabled-foreground, GrayText);cursor:default}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item][data-dragging]>[data-part=handle]{cursor:grabbing}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>[data-part=visibility]{display:block;min-inline-size:0;overflow-wrap:anywhere;padding-inline:var(--slotted-space-2, .25rem)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>[data-part=visibility] [data-part=description]{text-wrap:pretty}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>[data-part=visibility] [data-part=status]{color:var(--_muted);display:inline-block;font-size:var(--slotted-font-size-xs, .75rem)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item][data-space-hidden]>[data-part=visibility] [data-part=status]{color:var(--slotted-tone-warning-text, CanvasText)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=drop-indicator]{block-size:0;pointer-events:none;position:relative}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=drop-indicator]:before{background-color:var(--slotted-tone-accent-solid);block-size:var(--slotted-border-width-thick, 2px);border-radius:var(--slotted-radius-full, 9999px);content:\"\";inset-block-start:calc(var(--slotted-border-width-thick, 2px) / -2);inset-inline:var(--_inset);position:absolute}[data-ui=column-manager]>[data-part=list]>[data-part=section][data-drop-target]{background-color:var(--_hover)}[data-ui=column-manager]>[data-part=list]>[data-part=empty]{color:var(--_muted);padding-block:var(--slotted-space-8, 1.5rem);padding-inline:var(--_inset);text-align:center}[data-ui=column-manager]>[data-part=footer]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--_gap);padding:var(--_inset)}[data-ui=column-manager]>[data-part=footer]>:is([data-part=show-all],[data-part=reset]){flex:none}[data-ui=column-manager]>[data-part=footer]>[data-part=cancel]{margin-inline-start:auto}[data-ui=column-manager]>[data-part=footer]>[data-part=apply]{flex:none}@container column-manager (max-width: 20rem){[data-ui=column-manager]>[data-part=footer]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}[data-ui=column-manager]>[data-part=footer]>[data-part=cancel]{margin-inline-start:0}}[data-part=trigger][data-column-manager-trigger],[data-column-manager-trigger]{--_count-size: var(--slotted-font-size-xs, .75rem)}[data-column-manager-trigger] [data-part=count]{background-color:var(--slotted-tone-accent-surface, Canvas);border-radius:var(--slotted-radius-full, 9999px);box-sizing:border-box;color:var(--slotted-tone-accent-text, LinkText);display:inline-block;font-size:var(--_count-size);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-semibold, 600);line-height:calc(var(--_count-size) + 2 * var(--slotted-space-1, .125rem));margin-inline-start:var(--slotted-space-3, .375rem);min-inline-size:calc(var(--_count-size) + 2 * var(--slotted-space-2, .25rem));padding-inline:var(--slotted-space-2, .25rem);text-align:center}}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { '[style.display]': "'contents'" }, styles: ["@layer slotted.components{[data-ui-column-manager]{--_text: var(--slotted-text, CanvasText);--_muted: var(--slotted-text-muted, GrayText);--_rule: var(--slotted-border-subtle, ButtonBorder);--_hover: var(--slotted-tone-secondary-subtle-hover, ButtonFace);--_active: var(--slotted-tone-secondary-subtle-active, ButtonFace);--_inset: var(--slotted-control-padding-inline-md, 13px);--_row-block: var(--slotted-control-gap-sm, 6px);--_gap: var(--slotted-control-gap-md, 8px);--_font-size: var(--slotted-control-font-size-md, 13px);--_line-height: var(--slotted-line-height-md, 1.5);--_line: calc(var(--_font-size) * var(--_line-height));--_glyph: var(--slotted-control-icon-size-sm, 14px);--_control: min( calc(var(--_glyph) + 2 * var(--slotted-space-2, .25rem)), var(--slotted-control-inner-size-md, 24px) );--_radius: var(--slotted-radius-sm, 4px);--_duration: var(--slotted-control-transition-duration);--_easing: var(--slotted-control-transition-easing);--_inline-size: var(--slotted-column-manager-inline-size, 22rem);--_list-max: var(--slotted-column-manager-list-max-block-size, min(60vh, 28rem));box-sizing:border-box;color:var(--_text);display:grid;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);font-size:var(--_font-size);grid-template-rows:auto auto minmax(0,1fr) auto;line-height:var(--_line-height);max-block-size:100%;min-inline-size:0;text-align:start;container-name:column-manager;container-type:inline-size}[data-ui-column-manager][data-presentation=popover]{inline-size:min(var(--_inline-size),calc(var(--slotted-positioner-available-width, 100vw) - var(--slotted-space-8, 1.5rem)))}[data-ui-column-manager][data-presentation=drawer]{block-size:100%;inline-size:100%}[data-ui-column-manager][data-presentation=inline]{inline-size:100%}[data-ui-column-manager]>[data-part-header]{align-items:baseline;column-gap:var(--_gap);display:flex;flex-wrap:wrap;padding-block:var(--_inset) var(--slotted-space-4, .5rem);padding-inline:var(--_inset)}[data-ui-column-manager]>[data-part-header]>[data-part-title]{color:var(--_text);font-family:var( --slotted-font-family-heading, var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif) );font-size:var(--slotted-font-size-md, .875rem);font-weight:var(--slotted-font-weight-semibold, 600);line-height:var(--slotted-line-height-md, 1.5);margin:0;min-inline-size:0}[data-ui-column-manager]>[data-part-header]>[data-part-summary]{color:var(--_muted);font-size:var(--slotted-font-size-sm, .8125rem);font-variant-numeric:tabular-nums;line-height:var(--slotted-line-height-sm, 1.45);margin-inline-start:auto;white-space:nowrap}[data-ui-column-manager]>[data-part-search]{padding-block-end:var(--_gap);padding-inline:var(--_inset)}[data-ui-column-manager]>[data-part-search]>[data-ui-text-field]{inline-size:100%}[data-ui-column-manager]>[data-part-list]{border-block:var(--slotted-border-width-thin, 1px) solid var(--_rule);max-block-size:var(--_list-max);min-block-size:0;overflow-y:auto;overscroll-behavior:contain;padding-block:var(--slotted-space-2, .25rem)}[data-ui-column-manager][data-presentation=drawer]>[data-part-list]{max-block-size:none}[data-ui-column-manager]>[data-part-list]>[data-part-section]{padding-block:var(--slotted-space-2, .25rem);position:relative}[data-ui-column-manager]>[data-part-list]>[data-part-section]+[data-part-section]{border-block-start:var(--slotted-border-width-thin, 1px) solid var(--_rule)}[data-ui-column-manager]>[data-part-list]>[data-part-section]>[data-part-section-label]{color:var(--_muted);font-size:var(--slotted-font-size-xs, .75rem);font-weight:var(--slotted-font-weight-medium, 500);line-height:var(--slotted-line-height-xs, 1.4);padding-block:var(--slotted-space-3, .375rem) var(--slotted-space-2, .25rem);padding-inline:var(--_inset)}[data-ui-column-manager]>[data-part-list]>[data-part-section][data-sole]>[data-part-section-label]{block-size:1px;clip-path:inset(50%);inline-size:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}[data-ui-column-manager]>[data-part-list]>[data-part-section]>[data-part-item]{align-items:start;column-gap:var(--slotted-space-2, .25rem);display:grid;grid-template-columns:auto minmax(0,1fr) auto;padding-block:var(--_row-block);padding-inline:calc(var(--_inset) - var(--slotted-space-2, .25rem));position:relative;transition:opacity var(--_duration) var(--_easing)}[data-ui-column-manager]>[data-part-list]>[data-part-section]>[data-part-item][data-dragging]{opacity:.5}[data-ui-column-manager]>[data-part-list]>[data-part-section]>[data-part-item]>:is([data-part-handle],[data-part-pin]){align-items:center;background-color:transparent;block-size:var(--_control);border:0;border-radius:var(--_radius);color:var(--_muted);display:inline-flex;flex:none;inline-size:var(--_control);justify-content:center;margin:0;margin-block:calc((var(--_line) - var(--_control)) / 2);padding:0;transition:background-color var(--_duration) var(--_easing),color var(--_duration) var(--_easing)}[data-ui-column-manager]>[data-part-list]>[data-part-section]>[data-part-item]>[data-part-handle]{cursor:grab;touch-action:none}[data-ui-column-manager]>[data-part-list]>[data-part-section]>[data-part-item]>[data-part-pin][data-pinned]{color:var(--slotted-tone-accent-text, LinkText)}[data-ui-column-manager]>[data-part-list]>[data-part-section]>[data-part-item]>:is([data-part-handle],[data-part-pin]):not([data-disabled]):hover,[data-ui-column-manager]>[data-part-list]>[data-part-section]>[data-part-item]>[data-part-pin][data-open]:not([data-disabled]){background-color:var(--_hover);color:var(--_text)}[data-ui-column-manager]>[data-part-list]>[data-part-section]>[data-part-item]>:is([data-part-handle],[data-part-pin]):not([data-disabled]):active{background-color:var(--_active)}[data-ui-column-manager]>[data-part-list]>[data-part-section]>[data-part-item]>:is([data-part-handle],[data-part-pin]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, currentColor);outline-offset:calc(var(--slotted-focus-ring-width, 2px) * -1)}[data-ui-column-manager]>[data-part-list]>[data-part-section]>[data-part-item]>[data-part-handle][data-disabled]{color:var(--slotted-disabled-foreground, GrayText);cursor:default}[data-ui-column-manager]>[data-part-list]>[data-part-section]>[data-part-item][data-dragging]>[data-part-handle]{cursor:grabbing}[data-ui-column-manager]>[data-part-list]>[data-part-section]>[data-part-item]>[data-part-visibility]{display:block;min-inline-size:0;overflow-wrap:anywhere;padding-inline:var(--slotted-space-2, .25rem)}[data-ui-column-manager]>[data-part-list]>[data-part-section]>[data-part-item]>[data-part-visibility] [data-part-description]{text-wrap:pretty}[data-ui-column-manager]>[data-part-list]>[data-part-section]>[data-part-item]>[data-part-visibility] [data-part-status]{color:var(--_muted);display:inline-block;font-size:var(--slotted-font-size-xs, .75rem)}[data-ui-column-manager]>[data-part-list]>[data-part-section]>[data-part-item][data-space-hidden]>[data-part-visibility] [data-part-status]{color:var(--slotted-tone-warning-text, CanvasText)}[data-ui-column-manager]>[data-part-list]>[data-part-section]>[data-part-drop-indicator]{block-size:0;pointer-events:none;position:relative}[data-ui-column-manager]>[data-part-list]>[data-part-section]>[data-part-drop-indicator]:before{background-color:var(--slotted-tone-accent-solid);block-size:var(--slotted-border-width-thick, 2px);border-radius:var(--slotted-radius-full, 9999px);content:\"\";inset-block-start:calc(var(--slotted-border-width-thick, 2px) / -2);inset-inline:var(--_inset);position:absolute}[data-ui-column-manager]>[data-part-list]>[data-part-section][data-drop-target]{background-color:var(--_hover)}[data-ui-column-manager]>[data-part-list]>[data-part-empty]{color:var(--_muted);padding-block:var(--slotted-space-8, 1.5rem);padding-inline:var(--_inset);text-align:center}[data-ui-column-manager]>[data-part-footer]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--_gap);padding:var(--_inset)}[data-ui-column-manager]>[data-part-footer]>:is([data-part-show-all],[data-part-reset]){flex:none}[data-ui-column-manager]>[data-part-footer]>[data-part-cancel]{margin-inline-start:auto}[data-ui-column-manager]>[data-part-footer]>[data-part-apply]{flex:none}@container column-manager (max-width: 20rem){[data-ui-column-manager]>[data-part-footer]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}[data-ui-column-manager]>[data-part-footer]>[data-part-cancel]{margin-inline-start:0}}[data-part-trigger][data-column-manager-trigger],[data-column-manager-trigger]{--_count-size: var(--slotted-font-size-xs, .75rem)}[data-column-manager-trigger] [data-part-count]{background-color:var(--slotted-tone-accent-surface, Canvas);border-radius:var(--slotted-radius-full, 9999px);box-sizing:border-box;color:var(--slotted-tone-accent-text, LinkText);display:inline-block;font-size:var(--_count-size);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-semibold, 600);line-height:calc(var(--_count-size) + 2 * var(--slotted-space-1, .125rem));margin-inline-start:var(--slotted-space-3, .375rem);min-inline-size:calc(var(--_count-size) + 2 * var(--slotted-space-2, .25rem));padding-inline:var(--slotted-space-2, .25rem);text-align:center}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], columnState: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnState", required: false }] }, { type: i0.Output, args: ["columnStateChange"] }], defaultColumnState: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultColumnState", required: false }] }], outOfSpace: [{ type: i0.Input, args: [{ isSignal: true, alias: "outOfSpace", required: false }] }], presentation: [{ type: i0.Input, args: [{ isSignal: true, alias: "presentation", required: false }] }], apply: [{ type: i0.Input, args: [{ isSignal: true, alias: "apply", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], columnStateChangeRequest: [{ type: i0.Output, args: ["columnStateChangeRequest"] }], openChangeRequest: [{ type: i0.Output, args: ["openChangeRequest"] }], popover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SlPopover), { isSignal: true }] }], root: [{ type: i0.ViewChild, args: ['root', { isSignal: true }] }] } });
 /**
  * The consumer's button, wired to a manager: the popup it opens, whether it
@@ -977,13 +1014,13 @@ class SlColumnManagerTrigger {
         });
         /* `slButton` writes `data-part="root"` statically; the part is this family's. */
         afterNextRender(() => {
-            this.host.setAttribute('data-part', 'trigger');
+            writeSelectorKey(this.host, 'part', 'trigger');
             const chip = this.renderer.createElement('span');
-            chip.setAttribute('data-part', 'count');
+            writeSelectorKey(chip, 'part', 'count');
             chip.setAttribute('aria-hidden', 'true');
             const sentence = this.renderer.createElement('span');
-            sentence.setAttribute('data-ui', 'visually-hidden');
-            sentence.setAttribute('data-part', 'root');
+            writeSelectorKey(sentence, 'ui', 'visually-hidden');
+            writeSelectorKey(sentence, 'part', 'root');
             this.count.set({ chip, sentence });
         });
         effect(() => {