@slotted/angular 0.1.0-beta.7 → 0.1.0-beta.9

package/fesm2022/slotted-angular-toggle-group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"slotted-angular-toggle-group.mjs","sources":["../../toggle-group/src/toggle-group-defaults.ts","../../toggle-group/src/toggle-group.ts","../../toggle-group/src/toggle-group-parts.ts","../../toggle-group/src/slotted-angular-toggle-group.ts"],"sourcesContent":["import { inject, InjectionToken } from '@angular/core';\n\n/** The type step the group and every item inside it sit at. */\nexport type ToggleGroupSize = 'sm' | 'md' | 'lg';\n\n/**\n * Whether the items are framed or bare. `ghost` is the bar that sits inside\n * something already framed — a toolbar, a card header. `chips` are separate\n * rounded items that wrap, the pressed one in the neutral tone's ink, and\n * never join. There is no tone axis:\n * \"on\" is one colour across the system, and a bar that wants the whole palette\n * is `button-group` around toggle buttons.\n */\nexport type ToggleGroupVariant = 'outline' | 'ghost' | 'chips';\n\n/** How the items flow. The arrows follow the same axis. */\nexport type ToggleGroupOrientation = 'horizontal' | 'vertical';\n\nexport interface ToggleGroupDefaults {\n  attached: boolean;\n  deselectable: boolean;\n  loop: boolean;\n  orientation: ToggleGroupOrientation;\n  size: ToggleGroupSize;\n  variant: ToggleGroupVariant;\n}\n\nconst FALLBACK: ToggleGroupDefaults = {\n  attached: true,\n  deselectable: true,\n  loop: true,\n  orientation: 'horizontal',\n  size: 'md',\n  variant: 'outline',\n};\n\nexport const TOGGLE_GROUP_DEFAULTS = new InjectionToken<ToggleGroupDefaults>(\n  'slotted toggle group defaults',\n  { providedIn: 'root', factory: () => FALLBACK },\n);\n\n/**\n * An application decides once how its toggle bars are drawn and how they\n * behave, rather than repeating the same inputs on every one of them. A group\n * that states any of them itself still wins.\n */\nexport function provideToggleGroupDefaults(defaults: Partial<ToggleGroupDefaults>) {\n  return {\n    provide: TOGGLE_GROUP_DEFAULTS,\n    useFactory: (): ToggleGroupDefaults => ({ ...FALLBACK, ...defaults }),\n  };\n}\n\n/** What a toggle group renders as here, before it states anything of its own. */\nexport function injectToggleGroupDefaults(): ToggleGroupDefaults {\n  return inject(TOGGLE_GROUP_DEFAULTS);\n}\n","import { createRovingTabindex } from '@slotted/core/focus';\nimport type { RovingTabindexHandle } from '@slotted/core/focus';\nimport { createControllable } from '@slotted/core/state';\nimport type { ChangeRequest } from '@slotted/core/state';\nimport {\n  afterNextRender,\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  effect,\n  ElementRef,\n  HostAttributeToken,\n  inject,\n  input,\n  output,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport type { OnInit } from '@angular/core';\n\nimport { SlField } from '@slotted/angular/field';\n\nimport { injectToggleGroupDefaults } from './toggle-group-defaults';\nimport type {\n  ToggleGroupOrientation,\n  ToggleGroupSize,\n  ToggleGroupVariant,\n} from './toggle-group-defaults';\n\nexport type {\n  ToggleGroupDefaults,\n  ToggleGroupOrientation,\n  ToggleGroupSize,\n  ToggleGroupVariant,\n} from './toggle-group-defaults';\n\n/** Why the value moved. A toggle group can produce exactly these two. */\nexport type ToggleGroupSelectionReason = 'pointer' | 'keyboard';\n\n/** The items the arrows move between. */\nconst ITEM_SELECTOR = '[data-part=\"item\"]';\n\n/**\n * A set of two-state buttons that share one value.\n *\n * **The arrows move focus and never toggle.** Each item is the APG Button\n * pattern's toggle button, activated by `Space` and `Enter` alone; the\n * movement between them is the Toolbar pattern's roving tabindex. The family\n * whose arrows move the value is `segmented-control`, and it is a radio group\n * because that is the pattern describing that interaction.\n *\n * **Inside a `toolbar` the group stands down.** A bar is one tab stop with\n * arrow navigation across every control it holds, so a group running a second\n * ring inside it would put two tab stops where the APG asks for one. The bar is\n * found in the DOM by its public identifier rather than by injecting the other\n * family, so neither depends on the other; `rovingFocus` states it outright\n * for a bar this library did not write.\n *\n * **The value is always an array.** `multiple` caps it at one entry rather\n * than changing its type, so both bindings hold one shape and a `model()` can\n * hold it. A single-select consumer writes an array of one, which is the price.\n */\n@Component({\n  selector: '[slToggleGroup]',\n  standalone: true,\n  exportAs: 'slToggleGroup',\n  template: '<ng-content />',\n  styleUrl: '../../../styles/src/toggle-group/toggle-group.css',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-ui': 'toggle-group',\n    'data-part': 'root',\n    '[attr.role]': 'resolvedRole',\n    '[attr.data-size]': 'resolvedSize()',\n    '[attr.data-variant]': 'resolvedVariant()',\n    '[attr.data-orientation]': 'resolvedOrientation()',\n    '[attr.data-attached]': \"resolvedAttached() ? '' : null\",\n    '[attr.data-full-width]': \"fullWidth() ? '' : null\",\n    '[attr.aria-orientation]': 'ariaOrientation()',\n    '[attr.aria-labelledby]': 'labelledBy()',\n  },\n})\nexport class SlToggleGroup implements OnInit {\n  /** Present means the consumer owns the set. */\n  readonly value = input<readonly string[] | undefined>(undefined);\n  /** The value an uncontrolled group starts from, read once. */\n  readonly defaultValue = input<readonly string[] | undefined>(undefined);\n  /** Whether more than one item may be on at a time. */\n  readonly multiple = input(false, { transform: booleanAttribute });\n  /**\n   * Whether the last item on may be turned off. Ignored while `multiple` is\n   * true, where a set may always empty.\n   */\n  readonly deselectable = input<boolean | undefined, boolean | string | undefined>(undefined, {\n    transform: (value) => (value === undefined ? undefined : booleanAttribute(value)),\n  });\n  readonly size = input<ToggleGroupSize | undefined>(undefined);\n  readonly variant = input<ToggleGroupVariant | undefined>(undefined);\n  readonly orientation = input<ToggleGroupOrientation | undefined>(undefined);\n  readonly attached = input<boolean | undefined, boolean | string | undefined>(undefined, {\n    transform: (value) => (value === undefined ? undefined : booleanAttribute(value)),\n  });\n  readonly fullWidth = input(false, { transform: booleanAttribute });\n  readonly loop = input<boolean | undefined, boolean | string | undefined>(undefined, {\n    transform: (value) => (value === undefined ? undefined : booleanAttribute(value)),\n  });\n  /** Unstated rather than `false`, so an item may state its own. */\n  readonly disabled = input<boolean | undefined, boolean | string | undefined>(undefined, {\n    transform: (value) => (value === undefined ? undefined : booleanAttribute(value)),\n  });\n  /**\n   * Whether the group holds one tab stop of its own. Unstated, it is inferred\n   * from the bar it is in.\n   */\n  readonly rovingFocus = input<boolean | undefined, boolean | string | undefined>(undefined, {\n    transform: (value) => (value === undefined ? undefined : booleanAttribute(value)),\n  });\n\n  /** One output for one transition, carrying the reason and the event. */\n  readonly valueChange = output<ChangeRequest<readonly string[]>>();\n\n  private readonly host = inject(ElementRef<HTMLElement>);\n  private readonly defaults = injectToggleGroupDefaults();\n  private readonly writtenRole = inject(new HostAttributeToken('role'), { optional: true });\n  private readonly field = inject(SlField, { optional: true });\n  private readonly writtenLabel = inject(new HostAttributeToken('aria-label'), { optional: true });\n  private readonly writtenLabelledBy = inject(new HostAttributeToken('aria-labelledby'), {\n    optional: true,\n  });\n  /* A group has no element a label's for can reach, so inside a field the\n     field's label names it, unless the consumer named it themselves. */\n  protected readonly labelledBy = computed(\n    () =>\n      this.writtenLabelledBy ??\n      (this.writtenLabel === null ? (this.field?.ids().label ?? null) : null),\n  );\n  private readonly writtenOrientation = inject(new HostAttributeToken('aria-orientation'), {\n    optional: true,\n  });\n\n  private readonly own = signal<readonly string[]>([]);\n  private readonly insideToolbar = signal(false);\n  private handle: RovingTabindexHandle | undefined;\n\n  readonly selection = computed(() => this.value() ?? this.own());\n  readonly resolvedSize = computed(() => this.size() ?? this.defaults.size);\n  readonly resolvedVariant = computed(() => this.variant() ?? this.defaults.variant);\n  readonly resolvedOrientation = computed(() => this.orientation() ?? this.defaults.orientation);\n  /* Chips stand apart by definition: a joined row of them is a bar. */\n  readonly resolvedAttached = computed(\n    () => this.resolvedVariant() !== 'chips' && (this.attached() ?? this.defaults.attached),\n  );\n  readonly resolvedDeselectable = computed(() => this.deselectable() ?? this.defaults.deselectable);\n  readonly resolvedLoop = computed(() => this.loop() ?? this.defaults.loop);\n  readonly resolvedDisabled = computed(() => this.disabled());\n  readonly resolvedRovingFocus = computed(() => this.rovingFocus() ?? !this.insideToolbar());\n\n  /** A consumer's own wins. The family writes `group` and never `toolbar`. */\n  protected readonly resolvedRole = this.writtenRole ?? 'group';\n  /**\n   * Written only when the group flows the other way: `group` carries no\n   * implied orientation, so the attribute says something exactly when the\n   * arrows have moved to the block axis.\n   */\n  protected readonly ariaOrientation = computed(\n    () =>\n      this.writtenOrientation ?? (this.resolvedOrientation() === 'vertical' ? 'vertical' : null),\n  );\n\n  constructor() {\n    /**\n     * The bar is found in the DOM rather than injected, so neither family\n     * depends on the other and `data-ui` — which is public contract — is what\n     * answers. It runs after the first render, so a server-rendered group\n     * carries its own tab stop for one frame and the bar takes it over on\n     * hydration, before a reader can reach it with `Tab`.\n     */\n    afterNextRender(() => {\n      this.insideToolbar.set(\n        (this.host.nativeElement as HTMLElement).closest('[data-ui=\"toolbar\"]') !== null,\n      );\n    });\n\n    effect((onCleanup) => {\n      if (!this.resolvedRovingFocus()) return;\n      const loop = this.resolvedLoop();\n      const orientation = this.resolvedOrientation();\n\n      this.handle = createRovingTabindex(this.host.nativeElement as HTMLElement, {\n        itemSelector: ITEM_SELECTOR,\n        loop: () => loop,\n        orientation: () => orientation,\n      });\n      onCleanup(() => {\n        this.handle?.destroy();\n        this.handle = undefined;\n      });\n    });\n\n    inject(DestroyRef).onDestroy(() => this.handle?.destroy());\n  }\n\n  ngOnInit() {\n    if (this.value() === undefined) this.own.set(this.defaultValue() ?? []);\n  }\n\n  /** An item joined or left the set, so the ring re-reads what it moves between. */\n  refresh() {\n    this.handle?.refresh();\n  }\n\n  /** Whether one value is on. Read by every item in the set. */\n  holds(value: string): boolean {\n    return this.selection().includes(value);\n  }\n\n  /** Asks the group to turn one value on or off. */\n  toggle(value: string, reason: ToggleGroupSelectionReason, source: Event) {\n    const current = this.selection();\n    const on = current.includes(value);\n    let next: readonly string[];\n\n    if (this.multiple()) {\n      next = on ? current.filter((entry) => entry !== value) : [...current, value];\n    } else if (on) {\n      /* The last one on stays on unless the group was told it may empty. */\n      if (!this.resolvedDeselectable()) return;\n      next = [];\n    } else {\n      next = [value];\n    }\n\n    let cancelled = false;\n    const state = createControllable<readonly string[]>({\n      controlled: this.value(),\n      equals: (a, b) => a.length === b.length && a.every((entry, at) => entry === b[at]),\n      initial: current,\n      onRequest: (request) => {\n        this.valueChange.emit(request);\n        cancelled = request.cancelled;\n      },\n    });\n    const moved = state.request(next, reason, source);\n    if (!cancelled && moved) this.own.set(next);\n  }\n}\n","import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  Directive,\n  inject,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\n\nimport { SlToggleGroup } from './toggle-group';\nimport type { ToggleGroupSelectionReason } from './toggle-group';\n\n/**\n * The mark an item is drawn with, on the consumer's own element.\n *\n * A directive rather than a slot, so an `ng-icon`, an inline `svg` or a `span`\n * all work and none of them loses its own semantics. It is hidden from the\n * reading order, because the words beside it — or the `aria-label` on the\n * button — are what a reader hears.\n */\n@Directive({\n  selector: '[slToggleGroupIcon]',\n  standalone: true,\n  exportAs: 'slToggleGroupIcon',\n  host: {\n    'data-part': 'icon',\n    'aria-hidden': 'true',\n  },\n})\nexport class SlToggleGroupIcon {}\n\n/**\n * A click synthesised by the keyboard reports no detail; a real one reports\n * the click count. It is why `Space`, `Enter` and a pointer are told apart\n * without a key listener existing anywhere in the family.\n */\nfunction activationReason(event: Event): ToggleGroupSelectionReason {\n  return event instanceof MouseEvent && event.detail === 0 ? 'keyboard' : 'pointer';\n}\n\n/**\n * One two-state button of the set.\n *\n * `aria-pressed` is written in both states, so the item is announced as a\n * toggle rather than as a button that happens to be pressed — and its label\n * never changes with its state, which the APG Button pattern calls critical.\n *\n * It is a part of `toggle-group` and not an entry point of its own:\n * `SlToggleGroup` is injected without `optional`, so an item written outside a\n * group fails at construction rather than rendering a button that toggles\n * nothing.\n */\n@Component({\n  selector: 'button[slToggleGroupItem]',\n  standalone: true,\n  exportAs: 'slToggleGroupItem',\n  template: `<ng-content select=\"[slToggleGroupIcon]\" />\n    <span data-part=\"label\"><ng-content /></span>`,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    type: 'button',\n    'data-part': 'item',\n    '[attr.aria-pressed]': 'pressed()',\n    '[attr.data-pressed]': \"pressed() ? '' : null\",\n    '[attr.data-disabled]': \"resolvedDisabled() === true ? '' : null\",\n    '[attr.disabled]': 'disabledAttribute()',\n    '(click)': 'onClick($event)',\n  },\n})\nexport class SlToggleGroupItem {\n  /** What this item turns on. It is what the group's value holds. */\n  readonly value = input.required<string>();\n  /** Unstated rather than `false`, so the item defers to the group. */\n  readonly disabled = input<boolean | undefined, boolean | string | undefined>(undefined, {\n    transform: (value) => (value === undefined ? undefined : booleanAttribute(value)),\n  });\n\n  /**\n   * The group the item belongs to. Public, because a consumer reaching the\n   * item through `exportAs` may want the group's resolved step.\n   */\n  readonly group = inject(SlToggleGroup);\n\n  readonly pressed = computed(() => this.group.holds(this.value()));\n  readonly resolvedDisabled = computed(() => this.disabled() ?? this.group.resolvedDisabled());\n\n  protected readonly disabledAttribute = computed(() =>\n    this.resolvedDisabled() === true ? '' : null,\n  );\n\n  constructor() {\n    this.group.refresh();\n    inject(DestroyRef).onDestroy(() => this.group.refresh());\n  }\n\n  protected onClick(event: Event) {\n    this.group.toggle(this.value(), activationReason(event), event);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"slotted-angular-toggle-group.mjs","sources":["../../toggle-group/src/toggle-group-defaults.ts","../../toggle-group/src/toggle-group.ts","../../toggle-group/src/toggle-group-parts.ts","../../toggle-group/src/slotted-angular-toggle-group.ts"],"sourcesContent":["import { inject, InjectionToken } from '@angular/core';\n\n/** The type step the group and every item inside it sit at. */\nexport type ToggleGroupSize = 'sm' | 'md' | 'lg';\n\n/**\n * Whether the items are framed or bare. `ghost` is the bar that sits inside\n * something already framed — a toolbar, a card header. `chips` are separate\n * rounded items that wrap, the pressed one in the neutral tone's ink, and\n * never join. There is no tone axis:\n * \"on\" is one colour across the system, and a bar that wants the whole palette\n * is `button-group` around toggle buttons.\n */\nexport type ToggleGroupVariant = 'outline' | 'ghost' | 'chips';\n\n/** How the items flow. The arrows follow the same axis. */\nexport type ToggleGroupOrientation = 'horizontal' | 'vertical';\n\nexport interface ToggleGroupDefaults {\n  attached: boolean;\n  deselectable: boolean;\n  loop: boolean;\n  orientation: ToggleGroupOrientation;\n  size: ToggleGroupSize;\n  variant: ToggleGroupVariant;\n}\n\nconst FALLBACK: ToggleGroupDefaults = {\n  attached: true,\n  deselectable: true,\n  loop: true,\n  orientation: 'horizontal',\n  size: 'md',\n  variant: 'outline',\n};\n\nexport const TOGGLE_GROUP_DEFAULTS = new InjectionToken<ToggleGroupDefaults>(\n  'slotted toggle group defaults',\n  { providedIn: 'root', factory: () => FALLBACK },\n);\n\n/**\n * An application decides once how its toggle bars are drawn and how they\n * behave, rather than repeating the same inputs on every one of them. A group\n * that states any of them itself still wins.\n */\nexport function provideToggleGroupDefaults(defaults: Partial<ToggleGroupDefaults>) {\n  return {\n    provide: TOGGLE_GROUP_DEFAULTS,\n    useFactory: (): ToggleGroupDefaults => ({ ...FALLBACK, ...defaults }),\n  };\n}\n\n/** What a toggle group renders as here, before it states anything of its own. */\nexport function injectToggleGroupDefaults(): ToggleGroupDefaults {\n  return inject(TOGGLE_GROUP_DEFAULTS);\n}\n","import { createRovingTabindex } from '@slotted/core/focus';\nimport type { RovingTabindexHandle } from '@slotted/core/focus';\nimport { createControllable } from '@slotted/core/state';\nimport type { ChangeRequest } from '@slotted/core/state';\nimport {\n  afterNextRender,\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  effect,\n  ElementRef,\n  HostAttributeToken,\n  inject,\n  input,\n  output,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport type { OnInit } from '@angular/core';\n\nimport { SlField } from '@slotted/angular/field';\n\nimport { injectToggleGroupDefaults } from './toggle-group-defaults';\nimport type {\n  ToggleGroupOrientation,\n  ToggleGroupSize,\n  ToggleGroupVariant,\n} from './toggle-group-defaults';\n\nexport type {\n  ToggleGroupDefaults,\n  ToggleGroupOrientation,\n  ToggleGroupSize,\n  ToggleGroupVariant,\n} from './toggle-group-defaults';\n\n/** Why the value moved. A toggle group can produce exactly these two. */\nexport type ToggleGroupSelectionReason = 'pointer' | 'keyboard';\n\n/** The items the arrows move between. */\nconst ITEM_SELECTOR = '[data-part=\"item\"]';\n\n/**\n * A set of two-state buttons that share one value.\n *\n * **The arrows move focus and never toggle.** Each item is the APG Button\n * pattern's toggle button, activated by `Space` and `Enter` alone; the\n * movement between them is the Toolbar pattern's roving tabindex. The family\n * whose arrows move the value is `segmented-control`, and it is a radio group\n * because that is the pattern describing that interaction.\n *\n * **Inside a `toolbar` the group stands down.** A bar is one tab stop with\n * arrow navigation across every control it holds, so a group running a second\n * ring inside it would put two tab stops where the APG asks for one. The bar is\n * found in the DOM by its public identifier rather than by injecting the other\n * family, so neither depends on the other; `rovingFocus` states it outright\n * for a bar this library did not write.\n *\n * **The value is always an array.** `multiple` caps it at one entry rather\n * than changing its type, so both bindings hold one shape and a `model()` can\n * hold it. A single-select consumer writes an array of one, which is the price.\n */\n@Component({\n  selector: '[slToggleGroup]',\n  standalone: true,\n  exportAs: 'slToggleGroup',\n  template: '<ng-content />',\n  styleUrl: '../../../styles/src/toggle-group/toggle-group.css',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-ui': 'toggle-group',\n    'data-ui-toggle-group': '',\n    'data-part': 'root',\n    'data-part-root': '',\n    '[attr.role]': 'resolvedRole',\n    '[attr.data-size]': 'resolvedSize()',\n    '[attr.data-variant]': 'resolvedVariant()',\n    '[attr.data-orientation]': 'resolvedOrientation()',\n    '[attr.data-attached]': \"resolvedAttached() ? '' : null\",\n    '[attr.data-full-width]': \"fullWidth() ? '' : null\",\n    '[attr.aria-orientation]': 'ariaOrientation()',\n    '[attr.aria-labelledby]': 'labelledBy()',\n  },\n})\nexport class SlToggleGroup implements OnInit {\n  /** Present means the consumer owns the set. */\n  readonly value = input<readonly string[] | undefined>(undefined);\n  /** The value an uncontrolled group starts from, read once. */\n  readonly defaultValue = input<readonly string[] | undefined>(undefined);\n  /** Whether more than one item may be on at a time. */\n  readonly multiple = input(false, { transform: booleanAttribute });\n  /**\n   * Whether the last item on may be turned off. Ignored while `multiple` is\n   * true, where a set may always empty.\n   */\n  readonly deselectable = input<boolean | undefined, boolean | string | undefined>(undefined, {\n    transform: (value) => (value === undefined ? undefined : booleanAttribute(value)),\n  });\n  readonly size = input<ToggleGroupSize | undefined>(undefined);\n  readonly variant = input<ToggleGroupVariant | undefined>(undefined);\n  readonly orientation = input<ToggleGroupOrientation | undefined>(undefined);\n  readonly attached = input<boolean | undefined, boolean | string | undefined>(undefined, {\n    transform: (value) => (value === undefined ? undefined : booleanAttribute(value)),\n  });\n  readonly fullWidth = input(false, { transform: booleanAttribute });\n  readonly loop = input<boolean | undefined, boolean | string | undefined>(undefined, {\n    transform: (value) => (value === undefined ? undefined : booleanAttribute(value)),\n  });\n  /** Unstated rather than `false`, so an item may state its own. */\n  readonly disabled = input<boolean | undefined, boolean | string | undefined>(undefined, {\n    transform: (value) => (value === undefined ? undefined : booleanAttribute(value)),\n  });\n  /**\n   * Whether the group holds one tab stop of its own. Unstated, it is inferred\n   * from the bar it is in.\n   */\n  readonly rovingFocus = input<boolean | undefined, boolean | string | undefined>(undefined, {\n    transform: (value) => (value === undefined ? undefined : booleanAttribute(value)),\n  });\n\n  /** One output for one transition, carrying the reason and the event. */\n  readonly valueChange = output<ChangeRequest<readonly string[]>>();\n\n  private readonly host = inject(ElementRef<HTMLElement>);\n  private readonly defaults = injectToggleGroupDefaults();\n  private readonly writtenRole = inject(new HostAttributeToken('role'), { optional: true });\n  private readonly field = inject(SlField, { optional: true });\n  private readonly writtenLabel = inject(new HostAttributeToken('aria-label'), { optional: true });\n  private readonly writtenLabelledBy = inject(new HostAttributeToken('aria-labelledby'), {\n    optional: true,\n  });\n  /* A group has no element a label's for can reach, so inside a field the\n     field's label names it, unless the consumer named it themselves. */\n  protected readonly labelledBy = computed(\n    () =>\n      this.writtenLabelledBy ??\n      (this.writtenLabel === null ? (this.field?.ids().label ?? null) : null),\n  );\n  private readonly writtenOrientation = inject(new HostAttributeToken('aria-orientation'), {\n    optional: true,\n  });\n\n  private readonly own = signal<readonly string[]>([]);\n  private readonly insideToolbar = signal(false);\n  private handle: RovingTabindexHandle | undefined;\n\n  readonly selection = computed(() => this.value() ?? this.own());\n  readonly resolvedSize = computed(() => this.size() ?? this.defaults.size);\n  readonly resolvedVariant = computed(() => this.variant() ?? this.defaults.variant);\n  readonly resolvedOrientation = computed(() => this.orientation() ?? this.defaults.orientation);\n  /* Chips stand apart by definition: a joined row of them is a bar. */\n  readonly resolvedAttached = computed(\n    () => this.resolvedVariant() !== 'chips' && (this.attached() ?? this.defaults.attached),\n  );\n  readonly resolvedDeselectable = computed(() => this.deselectable() ?? this.defaults.deselectable);\n  readonly resolvedLoop = computed(() => this.loop() ?? this.defaults.loop);\n  readonly resolvedDisabled = computed(() => this.disabled());\n  readonly resolvedRovingFocus = computed(() => this.rovingFocus() ?? !this.insideToolbar());\n\n  /** A consumer's own wins. The family writes `group` and never `toolbar`. */\n  protected readonly resolvedRole = this.writtenRole ?? 'group';\n  /**\n   * Written only when the group flows the other way: `group` carries no\n   * implied orientation, so the attribute says something exactly when the\n   * arrows have moved to the block axis.\n   */\n  protected readonly ariaOrientation = computed(\n    () =>\n      this.writtenOrientation ?? (this.resolvedOrientation() === 'vertical' ? 'vertical' : null),\n  );\n\n  constructor() {\n    /**\n     * The bar is found in the DOM rather than injected, so neither family\n     * depends on the other and `data-ui` — which is public contract — is what\n     * answers. It runs after the first render, so a server-rendered group\n     * carries its own tab stop for one frame and the bar takes it over on\n     * hydration, before a reader can reach it with `Tab`.\n     */\n    afterNextRender(() => {\n      this.insideToolbar.set(\n        (this.host.nativeElement as HTMLElement).closest('[data-ui=\"toolbar\"]') !== null,\n      );\n    });\n\n    effect((onCleanup) => {\n      if (!this.resolvedRovingFocus()) return;\n      const loop = this.resolvedLoop();\n      const orientation = this.resolvedOrientation();\n\n      this.handle = createRovingTabindex(this.host.nativeElement as HTMLElement, {\n        itemSelector: ITEM_SELECTOR,\n        loop: () => loop,\n        orientation: () => orientation,\n      });\n      onCleanup(() => {\n        this.handle?.destroy();\n        this.handle = undefined;\n      });\n    });\n\n    inject(DestroyRef).onDestroy(() => this.handle?.destroy());\n  }\n\n  ngOnInit() {\n    if (this.value() === undefined) this.own.set(this.defaultValue() ?? []);\n  }\n\n  /** An item joined or left the set, so the ring re-reads what it moves between. */\n  refresh() {\n    this.handle?.refresh();\n  }\n\n  /** Whether one value is on. Read by every item in the set. */\n  holds(value: string): boolean {\n    return this.selection().includes(value);\n  }\n\n  /** Asks the group to turn one value on or off. */\n  toggle(value: string, reason: ToggleGroupSelectionReason, source: Event) {\n    const current = this.selection();\n    const on = current.includes(value);\n    let next: readonly string[];\n\n    if (this.multiple()) {\n      next = on ? current.filter((entry) => entry !== value) : [...current, value];\n    } else if (on) {\n      /* The last one on stays on unless the group was told it may empty. */\n      if (!this.resolvedDeselectable()) return;\n      next = [];\n    } else {\n      next = [value];\n    }\n\n    let cancelled = false;\n    const state = createControllable<readonly string[]>({\n      controlled: this.value(),\n      equals: (a, b) => a.length === b.length && a.every((entry, at) => entry === b[at]),\n      initial: current,\n      onRequest: (request) => {\n        this.valueChange.emit(request);\n        cancelled = request.cancelled;\n      },\n    });\n    const moved = state.request(next, reason, source);\n    if (!cancelled && moved) this.own.set(next);\n  }\n}\n","import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  Directive,\n  inject,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\n\nimport { SlToggleGroup } from './toggle-group';\nimport type { ToggleGroupSelectionReason } from './toggle-group';\n\n/**\n * The mark an item is drawn with, on the consumer's own element.\n *\n * A directive rather than a slot, so an `ng-icon`, an inline `svg` or a `span`\n * all work and none of them loses its own semantics. It is hidden from the\n * reading order, because the words beside it — or the `aria-label` on the\n * button — are what a reader hears.\n */\n@Directive({\n  selector: '[slToggleGroupIcon]',\n  standalone: true,\n  exportAs: 'slToggleGroupIcon',\n  host: {\n    'data-part': 'icon',\n    'data-part-icon': '',\n    'aria-hidden': 'true',\n  },\n})\nexport class SlToggleGroupIcon {}\n\n/**\n * A click synthesised by the keyboard reports no detail; a real one reports\n * the click count. It is why `Space`, `Enter` and a pointer are told apart\n * without a key listener existing anywhere in the family.\n */\nfunction activationReason(event: Event): ToggleGroupSelectionReason {\n  return event instanceof MouseEvent && event.detail === 0 ? 'keyboard' : 'pointer';\n}\n\n/**\n * One two-state button of the set.\n *\n * `aria-pressed` is written in both states, so the item is announced as a\n * toggle rather than as a button that happens to be pressed — and its label\n * never changes with its state, which the APG Button pattern calls critical.\n *\n * It is a part of `toggle-group` and not an entry point of its own:\n * `SlToggleGroup` is injected without `optional`, so an item written outside a\n * group fails at construction rather than rendering a button that toggles\n * nothing.\n */\n@Component({\n  selector: 'button[slToggleGroupItem]',\n  standalone: true,\n  exportAs: 'slToggleGroupItem',\n  template: `<ng-content select=\"[slToggleGroupIcon]\" />\n    <span data-part=\"label\" data-part-label=\"\"><ng-content /></span>`,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    type: 'button',\n    'data-part': 'item',\n    'data-part-item': '',\n    '[attr.aria-pressed]': 'pressed()',\n    '[attr.data-pressed]': \"pressed() ? '' : null\",\n    '[attr.data-disabled]': \"resolvedDisabled() === true ? '' : null\",\n    '[attr.disabled]': 'disabledAttribute()',\n    '(click)': 'onClick($event)',\n  },\n})\nexport class SlToggleGroupItem {\n  /** What this item turns on. It is what the group's value holds. */\n  readonly value = input.required<string>();\n  /** Unstated rather than `false`, so the item defers to the group. */\n  readonly disabled = input<boolean | undefined, boolean | string | undefined>(undefined, {\n    transform: (value) => (value === undefined ? undefined : booleanAttribute(value)),\n  });\n\n  /**\n   * The group the item belongs to. Public, because a consumer reaching the\n   * item through `exportAs` may want the group's resolved step.\n   */\n  readonly group = inject(SlToggleGroup);\n\n  readonly pressed = computed(() => this.group.holds(this.value()));\n  readonly resolvedDisabled = computed(() => this.disabled() ?? this.group.resolvedDisabled());\n\n  protected readonly disabledAttribute = computed(() =>\n    this.resolvedDisabled() === true ? '' : null,\n  );\n\n  constructor() {\n    this.group.refresh();\n    inject(DestroyRef).onDestroy(() => this.group.refresh());\n  }\n\n  protected onClick(event: Event) {\n    this.group.toggle(this.value(), activationReason(event), event);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/slotted-angular-toggle.mjs

@@ -35,7 +35,7 @@ function injectToggleDefaults() {
  */
 class SlToggleIcon {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlToggleIcon, isStandalone: true, selector: "[slToggleIcon]", host: { attributes: { "data-part": "icon", "aria-hidden": "true" } }, exportAs: ["slToggleIcon"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlToggleIcon, isStandalone: true, selector: "[slToggleIcon]", host: { attributes: { "data-part": "icon", "data-part-icon": "", "aria-hidden": "true" } }, exportAs: ["slToggleIcon"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToggleIcon, decorators: [{
             type: Directive,
@@ -45,6 +45,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     exportAs: 'slToggleIcon',
                     host: {
                         'data-part': 'icon',
+                        'data-part-icon': '',
                         'aria-hidden': 'true',
                     },
                 }]
@@ -137,13 +138,17 @@ class SlToggle {
             this.own.set(next);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlToggle, isStandalone: true, selector: "button[slToggle]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, defaultPressed: { classPropertyName: "defaultPressed", publicName: "defaultPressed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pressedChange: "pressedChange" }, host: { attributes: { "data-ui": "toggle", "data-part": "root" }, properties: { "attr.type": "type", "attr.aria-pressed": "isPressed()", "attr.data-pressed": "isPressed() ? '' : null", "attr.data-disabled": "disabled() ? '' : null", "attr.data-size": "resolvedSize()", "attr.data-variant": "resolvedVariant()", "disabled": "disabled()" } }, exportAs: ["slToggle"], ngImport: i0, template: `<ng-content select="[slToggleIcon]" /> <span data-part="label"><ng-content /></span>`, isInline: true, styles: ["@layer slotted.components{[data-ui=toggle][data-part=root]{--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_font-size: var(--slotted-control-font-size-md, 13px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_gap: var(--slotted-control-gap-md, 8px);--_radius: var(--slotted-toggle-radius, var(--slotted-control-radius, 4px));--_border-width: var(--slotted-control-border-width, 1px);--_border-color: var( --slotted-toggle-border-color, var(--slotted-control-border-color, ButtonBorder) );align-items:center;appearance:none;background:transparent;block-size:var(--_height);border:var(--_border-width) solid transparent;border-radius:var(--_radius);box-sizing:border-box;color:var(--slotted-toggle-color, var(--slotted-text, ButtonText));cursor:pointer;display:inline-flex;font-family:var(--slotted-control-font-family, ui-sans-serif, system-ui, sans-serif);font-size:var(--_font-size);font-weight:var(--slotted-control-font-weight, 600);gap:var(--_gap);justify-content:center;letter-spacing:var(--slotted-control-letter-spacing, 0);line-height:var(--slotted-control-line-height, 1);margin:0;max-inline-size:100%;min-inline-size:var(--_height);padding-block:0;padding-inline:var(--_padding-inline);position:relative;touch-action:manipulation;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-user-select:none;user-select:none;vertical-align:middle;-webkit-tap-highlight-color:transparent}[data-ui=toggle][data-part=root][data-size=sm]{--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_gap: var(--slotted-control-gap-sm, 6px)}[data-ui=toggle][data-part=root][data-size=lg]{--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_font-size: var(--slotted-control-font-size-lg, 14px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_gap: var(--slotted-control-gap-lg, 8px)}[data-ui=toggle][data-part=root]:not(:has([data-part=label]:not(:empty))){inline-size:var(--_height);padding-inline:0}[data-ui=toggle] [data-part=label]:empty{display:none}[data-ui=toggle] [data-part=icon]{--slotted-icon-size: var(--_icon-size);block-size:var(--_icon-size);display:inline-flex;flex:none;font-size:var(--_icon-size);inline-size:var(--_icon-size)}[data-ui=toggle] [data-part=icon]>*{block-size:100%;display:block;inline-size:100%}[data-ui=toggle] [data-part=label]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=toggle][data-part=root][data-variant=outline]{border-color:var(--_border-color);box-shadow:var(--slotted-toggle-shadow, var(--slotted-control-shadow, none))}[data-ui=toggle][data-part=root][data-pressed]:not(:disabled):not([data-disabled]){background:var( --slotted-toggle-pressed-background, var(--slotted-tone-accent-subtle-active, Highlight) );border-color:var( --slotted-toggle-pressed-border-color, var(--slotted-tone-accent-border, Highlight) );color:var(--slotted-toggle-pressed-color, var(--slotted-tone-accent-text, HighlightText))}[data-ui=toggle][data-part=root]:hover:not(:disabled):not([data-disabled]):not([data-pressed]){background:var( --slotted-toggle-hover-background, var(--slotted-tone-secondary-subtle-hover, ButtonFace) )}[data-ui=toggle][data-part=root]:active:not(:disabled):not([data-disabled]):not([data-pressed]){background:var( --slotted-toggle-active-background, var(--slotted-tone-secondary-subtle-active, ButtonFace) );transition-duration:var(--slotted-duration-instant)}[data-ui=toggle][data-part=root][data-pressed]:hover:not(:disabled):not([data-disabled]){background:var( --slotted-toggle-pressed-hover-background, var(--slotted-tone-accent-subtle-hover, Highlight) )}[data-ui=toggle][data-part=root][data-pressed]:active:not(:disabled):not([data-disabled]){background:var( --slotted-toggle-pressed-background, var(--slotted-tone-accent-subtle-active, Highlight) );transition-duration:var(--slotted-duration-instant)}[data-ui=toggle][data-part=root][data-variant=chips]{border-color:var(--_border-color);border-radius:var(--slotted-toggle-chips-radius, var(--slotted-radius-full, 9999px));font-weight:var(--slotted-font-weight-medium, 500)}[data-ui=toggle][data-part=root][data-variant=chips][data-pressed]:not(:disabled):not([data-disabled]),[data-ui=toggle][data-part=root][data-variant=chips][data-pressed]:active:not(:disabled):not([data-disabled]){background:var( --slotted-toggle-chips-pressed-background, var(--slotted-tone-neutral-solid, CanvasText) );border-color:var( --slotted-toggle-chips-pressed-background, var(--slotted-tone-neutral-solid, CanvasText) );color:var(--slotted-toggle-chips-pressed-color, var(--slotted-tone-neutral-on-solid, Canvas))}[data-ui=toggle][data-part=root][data-variant=chips][data-pressed]:hover:not(:disabled):not([data-disabled]){background:var(--slotted-tone-neutral-solid-hover, CanvasText);border-color:var(--slotted-tone-neutral-solid-hover, CanvasText)}[data-ui=toggle][data-part=root][data-variant=chips]:disabled,[data-ui=toggle][data-part=root][data-variant=chips][data-disabled]{border-color:var(--slotted-disabled-border, GrayText)}[data-ui=toggle][data-part=root]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=toggle][data-part=root]:disabled,[data-ui=toggle][data-part=root][data-disabled]{background:transparent;color:var(--slotted-toggle-disabled-color, var(--slotted-disabled-foreground, GrayText));cursor:not-allowed}[data-ui=toggle][data-part=root][data-variant=outline]:disabled,[data-ui=toggle][data-part=root][data-variant=outline][data-disabled]{border-color:var( --slotted-toggle-disabled-border-color, var(--slotted-disabled-border, GrayText) );box-shadow:none}[data-ui=toggle][data-part=root][data-pressed]:disabled,[data-ui=toggle][data-part=root][data-pressed][data-disabled]{background:var( --slotted-toggle-disabled-pressed-background, var(--slotted-disabled-background, ButtonFace) );border-color:var( --slotted-toggle-pressed-border-color, var(--slotted-tone-accent-border, Highlight) )}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlToggle, isStandalone: true, selector: "button[slToggle]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, defaultPressed: { classPropertyName: "defaultPressed", publicName: "defaultPressed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pressedChange: "pressedChange" }, host: { attributes: { "data-ui": "toggle", "data-ui-toggle": "", "data-part": "root", "data-part-root": "" }, properties: { "attr.type": "type", "attr.aria-pressed": "isPressed()", "attr.data-pressed": "isPressed() ? '' : null", "attr.data-disabled": "disabled() ? '' : null", "attr.data-size": "resolvedSize()", "attr.data-variant": "resolvedVariant()", "disabled": "disabled()" } }, exportAs: ["slToggle"], ngImport: i0, template: `<ng-content select="[slToggleIcon]" />
+    <span data-part="label" data-part-label=""><ng-content /></span>`, isInline: true, styles: ["@layer slotted.components{[data-ui-toggle][data-part-root]{--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_font-size: var(--slotted-control-font-size-md, 13px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_gap: var(--slotted-control-gap-md, 8px);--_radius: var(--slotted-toggle-radius, var(--slotted-control-radius, 4px));--_border-width: var(--slotted-control-border-width, 1px);--_border-color: var( --slotted-toggle-border-color, var(--slotted-control-border-color, ButtonBorder) );align-items:center;appearance:none;background:transparent;block-size:var(--_height);border:var(--_border-width) solid transparent;border-radius:var(--_radius);box-sizing:border-box;color:var(--slotted-toggle-color, var(--slotted-text, ButtonText));cursor:pointer;display:inline-flex;font-family:var(--slotted-control-font-family, ui-sans-serif, system-ui, sans-serif);font-size:var(--_font-size);font-weight:var(--slotted-control-font-weight, 600);gap:var(--_gap);justify-content:center;letter-spacing:var(--slotted-control-letter-spacing, 0);line-height:var(--slotted-control-line-height, 1);margin:0;max-inline-size:100%;min-inline-size:var(--_height);padding-block:0;padding-inline:var(--_padding-inline);position:relative;touch-action:manipulation;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-user-select:none;user-select:none;vertical-align:middle;-webkit-tap-highlight-color:transparent}[data-ui-toggle][data-part-root][data-size=sm]{--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_gap: var(--slotted-control-gap-sm, 6px)}[data-ui-toggle][data-part-root][data-size=lg]{--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_font-size: var(--slotted-control-font-size-lg, 14px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_gap: var(--slotted-control-gap-lg, 8px)}[data-ui-toggle][data-part-root]:not(:has([data-part-label]:not(:empty))){inline-size:var(--_height);padding-inline:0}[data-ui-toggle] [data-part-label]:empty{display:none}[data-ui-toggle] [data-part-icon]{--slotted-icon-size: var(--_icon-size);block-size:var(--_icon-size);display:inline-flex;flex:none;font-size:var(--_icon-size);inline-size:var(--_icon-size)}[data-ui-toggle] [data-part-icon]>*{block-size:100%;display:block;inline-size:100%}[data-ui-toggle] [data-part-label]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui-toggle][data-part-root][data-variant=outline]{border-color:var(--_border-color);box-shadow:var(--slotted-toggle-shadow, var(--slotted-control-shadow, none))}[data-ui-toggle][data-part-root][data-pressed]:not(:disabled):not([data-disabled]){background:var( --slotted-toggle-pressed-background, var(--slotted-tone-accent-subtle-active, Highlight) );border-color:var( --slotted-toggle-pressed-border-color, var(--slotted-tone-accent-border, Highlight) );color:var(--slotted-toggle-pressed-color, var(--slotted-tone-accent-text, HighlightText))}[data-ui-toggle][data-part-root]:hover:not(:disabled):not([data-disabled]):not([data-pressed]){background:var( --slotted-toggle-hover-background, var(--slotted-tone-secondary-subtle-hover, ButtonFace) )}[data-ui-toggle][data-part-root]:active:not(:disabled):not([data-disabled]):not([data-pressed]){background:var( --slotted-toggle-active-background, var(--slotted-tone-secondary-subtle-active, ButtonFace) );transition-duration:var(--slotted-duration-instant)}[data-ui-toggle][data-part-root][data-pressed]:hover:not(:disabled):not([data-disabled]){background:var( --slotted-toggle-pressed-hover-background, var(--slotted-tone-accent-subtle-hover, Highlight) )}[data-ui-toggle][data-part-root][data-pressed]:active:not(:disabled):not([data-disabled]){background:var( --slotted-toggle-pressed-background, var(--slotted-tone-accent-subtle-active, Highlight) );transition-duration:var(--slotted-duration-instant)}[data-ui-toggle][data-part-root][data-variant=chips]{border-color:var(--_border-color);border-radius:var(--slotted-toggle-chips-radius, var(--slotted-radius-full, 9999px));font-weight:var(--slotted-font-weight-medium, 500)}[data-ui-toggle][data-part-root][data-variant=chips][data-pressed]:not(:disabled):not([data-disabled]),[data-ui-toggle][data-part-root][data-variant=chips][data-pressed]:active:not(:disabled):not([data-disabled]){background:var( --slotted-toggle-chips-pressed-background, var(--slotted-tone-neutral-solid, CanvasText) );border-color:var( --slotted-toggle-chips-pressed-background, var(--slotted-tone-neutral-solid, CanvasText) );color:var(--slotted-toggle-chips-pressed-color, var(--slotted-tone-neutral-on-solid, Canvas))}[data-ui-toggle][data-part-root][data-variant=chips][data-pressed]:hover:not(:disabled):not([data-disabled]){background:var(--slotted-tone-neutral-solid-hover, CanvasText);border-color:var(--slotted-tone-neutral-solid-hover, CanvasText)}[data-ui-toggle][data-part-root][data-variant=chips]:disabled,[data-ui-toggle][data-part-root][data-variant=chips][data-disabled]{border-color:var(--slotted-disabled-border, GrayText)}[data-ui-toggle][data-part-root]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui-toggle][data-part-root]:disabled,[data-ui-toggle][data-part-root][data-disabled]{background:transparent;color:var(--slotted-toggle-disabled-color, var(--slotted-disabled-foreground, GrayText));cursor:not-allowed}[data-ui-toggle][data-part-root][data-variant=outline]:disabled,[data-ui-toggle][data-part-root][data-variant=outline][data-disabled]{border-color:var( --slotted-toggle-disabled-border-color, var(--slotted-disabled-border, GrayText) );box-shadow:none}[data-ui-toggle][data-part-root][data-pressed]:disabled,[data-ui-toggle][data-part-root][data-pressed][data-disabled]{background:var( --slotted-toggle-disabled-pressed-background, var(--slotted-disabled-background, ButtonFace) );border-color:var( --slotted-toggle-pressed-border-color, var(--slotted-tone-accent-border, Highlight) )}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToggle, decorators: [{
             type: Component,
-            args: [{ selector: 'button[slToggle]', standalone: true, exportAs: 'slToggle', template: `<ng-content select="[slToggleIcon]" /> <span data-part="label"><ng-content /></span>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'button[slToggle]', standalone: true, exportAs: 'slToggle', template: `<ng-content select="[slToggleIcon]" />
+    <span data-part="label" data-part-label=""><ng-content /></span>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         'data-ui': 'toggle',
+                        'data-ui-toggle': '',
                         'data-part': 'root',
+                        'data-part-root': '',
                         '[attr.type]': 'type',
                         '[attr.aria-pressed]': 'isPressed()',
                         '[attr.data-pressed]': "isPressed() ? '' : null",
@@ -151,7 +156,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         '[attr.data-size]': 'resolvedSize()',
                         '[attr.data-variant]': 'resolvedVariant()',
                         '[disabled]': 'disabled()',
-                    }, styles: ["@layer slotted.components{[data-ui=toggle][data-part=root]{--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_font-size: var(--slotted-control-font-size-md, 13px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_gap: var(--slotted-control-gap-md, 8px);--_radius: var(--slotted-toggle-radius, var(--slotted-control-radius, 4px));--_border-width: var(--slotted-control-border-width, 1px);--_border-color: var( --slotted-toggle-border-color, var(--slotted-control-border-color, ButtonBorder) );align-items:center;appearance:none;background:transparent;block-size:var(--_height);border:var(--_border-width) solid transparent;border-radius:var(--_radius);box-sizing:border-box;color:var(--slotted-toggle-color, var(--slotted-text, ButtonText));cursor:pointer;display:inline-flex;font-family:var(--slotted-control-font-family, ui-sans-serif, system-ui, sans-serif);font-size:var(--_font-size);font-weight:var(--slotted-control-font-weight, 600);gap:var(--_gap);justify-content:center;letter-spacing:var(--slotted-control-letter-spacing, 0);line-height:var(--slotted-control-line-height, 1);margin:0;max-inline-size:100%;min-inline-size:var(--_height);padding-block:0;padding-inline:var(--_padding-inline);position:relative;touch-action:manipulation;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-user-select:none;user-select:none;vertical-align:middle;-webkit-tap-highlight-color:transparent}[data-ui=toggle][data-part=root][data-size=sm]{--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_gap: var(--slotted-control-gap-sm, 6px)}[data-ui=toggle][data-part=root][data-size=lg]{--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_font-size: var(--slotted-control-font-size-lg, 14px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_gap: var(--slotted-control-gap-lg, 8px)}[data-ui=toggle][data-part=root]:not(:has([data-part=label]:not(:empty))){inline-size:var(--_height);padding-inline:0}[data-ui=toggle] [data-part=label]:empty{display:none}[data-ui=toggle] [data-part=icon]{--slotted-icon-size: var(--_icon-size);block-size:var(--_icon-size);display:inline-flex;flex:none;font-size:var(--_icon-size);inline-size:var(--_icon-size)}[data-ui=toggle] [data-part=icon]>*{block-size:100%;display:block;inline-size:100%}[data-ui=toggle] [data-part=label]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=toggle][data-part=root][data-variant=outline]{border-color:var(--_border-color);box-shadow:var(--slotted-toggle-shadow, var(--slotted-control-shadow, none))}[data-ui=toggle][data-part=root][data-pressed]:not(:disabled):not([data-disabled]){background:var( --slotted-toggle-pressed-background, var(--slotted-tone-accent-subtle-active, Highlight) );border-color:var( --slotted-toggle-pressed-border-color, var(--slotted-tone-accent-border, Highlight) );color:var(--slotted-toggle-pressed-color, var(--slotted-tone-accent-text, HighlightText))}[data-ui=toggle][data-part=root]:hover:not(:disabled):not([data-disabled]):not([data-pressed]){background:var( --slotted-toggle-hover-background, var(--slotted-tone-secondary-subtle-hover, ButtonFace) )}[data-ui=toggle][data-part=root]:active:not(:disabled):not([data-disabled]):not([data-pressed]){background:var( --slotted-toggle-active-background, var(--slotted-tone-secondary-subtle-active, ButtonFace) );transition-duration:var(--slotted-duration-instant)}[data-ui=toggle][data-part=root][data-pressed]:hover:not(:disabled):not([data-disabled]){background:var( --slotted-toggle-pressed-hover-background, var(--slotted-tone-accent-subtle-hover, Highlight) )}[data-ui=toggle][data-part=root][data-pressed]:active:not(:disabled):not([data-disabled]){background:var( --slotted-toggle-pressed-background, var(--slotted-tone-accent-subtle-active, Highlight) );transition-duration:var(--slotted-duration-instant)}[data-ui=toggle][data-part=root][data-variant=chips]{border-color:var(--_border-color);border-radius:var(--slotted-toggle-chips-radius, var(--slotted-radius-full, 9999px));font-weight:var(--slotted-font-weight-medium, 500)}[data-ui=toggle][data-part=root][data-variant=chips][data-pressed]:not(:disabled):not([data-disabled]),[data-ui=toggle][data-part=root][data-variant=chips][data-pressed]:active:not(:disabled):not([data-disabled]){background:var( --slotted-toggle-chips-pressed-background, var(--slotted-tone-neutral-solid, CanvasText) );border-color:var( --slotted-toggle-chips-pressed-background, var(--slotted-tone-neutral-solid, CanvasText) );color:var(--slotted-toggle-chips-pressed-color, var(--slotted-tone-neutral-on-solid, Canvas))}[data-ui=toggle][data-part=root][data-variant=chips][data-pressed]:hover:not(:disabled):not([data-disabled]){background:var(--slotted-tone-neutral-solid-hover, CanvasText);border-color:var(--slotted-tone-neutral-solid-hover, CanvasText)}[data-ui=toggle][data-part=root][data-variant=chips]:disabled,[data-ui=toggle][data-part=root][data-variant=chips][data-disabled]{border-color:var(--slotted-disabled-border, GrayText)}[data-ui=toggle][data-part=root]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=toggle][data-part=root]:disabled,[data-ui=toggle][data-part=root][data-disabled]{background:transparent;color:var(--slotted-toggle-disabled-color, var(--slotted-disabled-foreground, GrayText));cursor:not-allowed}[data-ui=toggle][data-part=root][data-variant=outline]:disabled,[data-ui=toggle][data-part=root][data-variant=outline][data-disabled]{border-color:var( --slotted-toggle-disabled-border-color, var(--slotted-disabled-border, GrayText) );box-shadow:none}[data-ui=toggle][data-part=root][data-pressed]:disabled,[data-ui=toggle][data-part=root][data-pressed][data-disabled]{background:var( --slotted-toggle-disabled-pressed-background, var(--slotted-disabled-background, ButtonFace) );border-color:var( --slotted-toggle-pressed-border-color, var(--slotted-tone-accent-border, Highlight) )}}\n"] }]
+                    }, styles: ["@layer slotted.components{[data-ui-toggle][data-part-root]{--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_font-size: var(--slotted-control-font-size-md, 13px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_gap: var(--slotted-control-gap-md, 8px);--_radius: var(--slotted-toggle-radius, var(--slotted-control-radius, 4px));--_border-width: var(--slotted-control-border-width, 1px);--_border-color: var( --slotted-toggle-border-color, var(--slotted-control-border-color, ButtonBorder) );align-items:center;appearance:none;background:transparent;block-size:var(--_height);border:var(--_border-width) solid transparent;border-radius:var(--_radius);box-sizing:border-box;color:var(--slotted-toggle-color, var(--slotted-text, ButtonText));cursor:pointer;display:inline-flex;font-family:var(--slotted-control-font-family, ui-sans-serif, system-ui, sans-serif);font-size:var(--_font-size);font-weight:var(--slotted-control-font-weight, 600);gap:var(--_gap);justify-content:center;letter-spacing:var(--slotted-control-letter-spacing, 0);line-height:var(--slotted-control-line-height, 1);margin:0;max-inline-size:100%;min-inline-size:var(--_height);padding-block:0;padding-inline:var(--_padding-inline);position:relative;touch-action:manipulation;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-user-select:none;user-select:none;vertical-align:middle;-webkit-tap-highlight-color:transparent}[data-ui-toggle][data-part-root][data-size=sm]{--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_gap: var(--slotted-control-gap-sm, 6px)}[data-ui-toggle][data-part-root][data-size=lg]{--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_font-size: var(--slotted-control-font-size-lg, 14px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_gap: var(--slotted-control-gap-lg, 8px)}[data-ui-toggle][data-part-root]:not(:has([data-part-label]:not(:empty))){inline-size:var(--_height);padding-inline:0}[data-ui-toggle] [data-part-label]:empty{display:none}[data-ui-toggle] [data-part-icon]{--slotted-icon-size: var(--_icon-size);block-size:var(--_icon-size);display:inline-flex;flex:none;font-size:var(--_icon-size);inline-size:var(--_icon-size)}[data-ui-toggle] [data-part-icon]>*{block-size:100%;display:block;inline-size:100%}[data-ui-toggle] [data-part-label]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui-toggle][data-part-root][data-variant=outline]{border-color:var(--_border-color);box-shadow:var(--slotted-toggle-shadow, var(--slotted-control-shadow, none))}[data-ui-toggle][data-part-root][data-pressed]:not(:disabled):not([data-disabled]){background:var( --slotted-toggle-pressed-background, var(--slotted-tone-accent-subtle-active, Highlight) );border-color:var( --slotted-toggle-pressed-border-color, var(--slotted-tone-accent-border, Highlight) );color:var(--slotted-toggle-pressed-color, var(--slotted-tone-accent-text, HighlightText))}[data-ui-toggle][data-part-root]:hover:not(:disabled):not([data-disabled]):not([data-pressed]){background:var( --slotted-toggle-hover-background, var(--slotted-tone-secondary-subtle-hover, ButtonFace) )}[data-ui-toggle][data-part-root]:active:not(:disabled):not([data-disabled]):not([data-pressed]){background:var( --slotted-toggle-active-background, var(--slotted-tone-secondary-subtle-active, ButtonFace) );transition-duration:var(--slotted-duration-instant)}[data-ui-toggle][data-part-root][data-pressed]:hover:not(:disabled):not([data-disabled]){background:var( --slotted-toggle-pressed-hover-background, var(--slotted-tone-accent-subtle-hover, Highlight) )}[data-ui-toggle][data-part-root][data-pressed]:active:not(:disabled):not([data-disabled]){background:var( --slotted-toggle-pressed-background, var(--slotted-tone-accent-subtle-active, Highlight) );transition-duration:var(--slotted-duration-instant)}[data-ui-toggle][data-part-root][data-variant=chips]{border-color:var(--_border-color);border-radius:var(--slotted-toggle-chips-radius, var(--slotted-radius-full, 9999px));font-weight:var(--slotted-font-weight-medium, 500)}[data-ui-toggle][data-part-root][data-variant=chips][data-pressed]:not(:disabled):not([data-disabled]),[data-ui-toggle][data-part-root][data-variant=chips][data-pressed]:active:not(:disabled):not([data-disabled]){background:var( --slotted-toggle-chips-pressed-background, var(--slotted-tone-neutral-solid, CanvasText) );border-color:var( --slotted-toggle-chips-pressed-background, var(--slotted-tone-neutral-solid, CanvasText) );color:var(--slotted-toggle-chips-pressed-color, var(--slotted-tone-neutral-on-solid, Canvas))}[data-ui-toggle][data-part-root][data-variant=chips][data-pressed]:hover:not(:disabled):not([data-disabled]){background:var(--slotted-tone-neutral-solid-hover, CanvasText);border-color:var(--slotted-tone-neutral-solid-hover, CanvasText)}[data-ui-toggle][data-part-root][data-variant=chips]:disabled,[data-ui-toggle][data-part-root][data-variant=chips][data-disabled]{border-color:var(--slotted-disabled-border, GrayText)}[data-ui-toggle][data-part-root]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui-toggle][data-part-root]:disabled,[data-ui-toggle][data-part-root][data-disabled]{background:transparent;color:var(--slotted-toggle-disabled-color, var(--slotted-disabled-foreground, GrayText));cursor:not-allowed}[data-ui-toggle][data-part-root][data-variant=outline]:disabled,[data-ui-toggle][data-part-root][data-variant=outline][data-disabled]{border-color:var( --slotted-toggle-disabled-border-color, var(--slotted-disabled-border, GrayText) );box-shadow:none}[data-ui-toggle][data-part-root][data-pressed]:disabled,[data-ui-toggle][data-part-root][data-pressed][data-disabled]{background:var( --slotted-toggle-disabled-pressed-background, var(--slotted-disabled-background, ButtonFace) );border-color:var( --slotted-toggle-pressed-border-color, var(--slotted-tone-accent-border, Highlight) )}}\n"] }]
         }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }], defaultPressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPressed", required: false }] }], pressedChange: [{ type: i0.Output, args: ["pressedChange"] }] } });
 
 /**

package/fesm2022/slotted-angular-toggle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"slotted-angular-toggle.mjs","sources":["../../toggle/src/toggle-defaults.ts","../../toggle/src/toggle.ts","../../toggle/src/slotted-angular-toggle.ts"],"sourcesContent":["import { inject, InjectionToken } from '@angular/core';\n\n/** The type step the control sits at. */\nexport type ToggleSize = 'sm' | 'md' | 'lg';\n\n/**\n * Whether the control is framed or bare. `ghost` is the toggle that sits\n * inside something already framed — a toolbar, a card header. There is no\n * tone axis: a mode is one colour when it is on, and an action that persists\n * in one of five tones is `SlToggleButton`.\n */\nexport type ToggleVariant = 'outline' | 'ghost' | 'chips';\n\nexport interface ToggleDefaults {\n  size: ToggleSize;\n  variant: ToggleVariant;\n}\n\nconst FALLBACK: ToggleDefaults = {\n  size: 'md',\n  variant: 'outline',\n};\n\nexport const TOGGLE_DEFAULTS = new InjectionToken<ToggleDefaults>('slotted toggle defaults', {\n  providedIn: 'root',\n  factory: () => FALLBACK,\n});\n\n/**\n * An application decides once how its toggles are drawn — a toolbar of ghost\n * modes, a form of framed ones — rather than repeating the two inputs on\n * every control. A toggle that states either itself still wins.\n */\nexport function provideToggleDefaults(defaults: Partial<ToggleDefaults>) {\n  return {\n    provide: TOGGLE_DEFAULTS,\n    useFactory: (): ToggleDefaults => ({ ...FALLBACK, ...defaults }),\n  };\n}\n\n/** What a toggle renders as here, before it states anything of its own. */\nexport function injectToggleDefaults(): ToggleDefaults {\n  return inject(TOGGLE_DEFAULTS);\n}\n","import {\n  AfterViewInit,\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  Directive,\n  ElementRef,\n  HostAttributeToken,\n  inject,\n  input,\n  output,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport type { WritableSignal } from '@angular/core';\nimport { createControllable } from '@slotted/core/state';\nimport type { ChangeRequest } from '@slotted/core/state';\n\nimport { injectToggleDefaults } from './toggle-defaults';\nimport type { ToggleSize, ToggleVariant } from './toggle-defaults';\n\n/** Why the state moved. A toggle can produce exactly these two. */\nexport type TogglePressedReason = 'pointer' | 'keyboard';\n\n/**\n * The mark beside the words, or the whole content of an icon-only toggle. A\n * marker on the consumer's own element rather than a wrapper, so an `svg`, an\n * `sl-icon` and a masked `span` all work and none loses its own semantics. It\n * is hidden from the reading order, because the words beside it — or the\n * `aria-label` on the button — are what a reader hears.\n */\n@Directive({\n  selector: '[slToggleIcon]',\n  standalone: true,\n  exportAs: 'slToggleIcon',\n  host: {\n    'data-part': 'icon',\n    'aria-hidden': 'true',\n  },\n})\nexport class SlToggleIcon {}\n\n/**\n * A click synthesised by the keyboard reports no detail; a real one reports\n * the click count. It is why `Space`, `Enter` and a pointer are told apart\n * without a key listener existing anywhere in the family.\n */\nfunction activationReason(event: Event): TogglePressedReason {\n  return event instanceof MouseEvent && event.detail === 0 ? 'keyboard' : 'pointer';\n}\n\n/**\n * A two-state button standing on its own: a mode — Bold, Wrap, Pin — that is\n * true the moment it is pressed. `aria-pressed` is written in both states, so\n * the control is announced as a toggle rather than as a button that happens\n * to be pressed, and its label never changes with its state, which the APG\n * Button pattern calls critical.\n *\n * `SlToggleButton` is the other member: an action that persists — Follow,\n * Subscribe — which reaches a server and waits, in one of five tones. The two\n * hold one state model and one output shape, so a consumer moving between\n * them changes no handler. Inside `slToolbar` the bar owns the tab stop and\n * the arrows, and this control writes no listener of its own.\n *\n * The component is a directive on the element the consumer wrote, so\n * substituting the element is writing a different one — and it has to stay a\n * `button`: `aria-pressed` on a link is a link announcing a state a link does\n * not hold.\n */\n@Component({\n  selector: 'button[slToggle]',\n  standalone: true,\n  exportAs: 'slToggle',\n  template: `<ng-content select=\"[slToggleIcon]\" /> <span data-part=\"label\"><ng-content /></span>`,\n  styleUrl: '../../../styles/src/toggle/toggle.css',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-ui': 'toggle',\n    'data-part': 'root',\n    '[attr.type]': 'type',\n    '[attr.aria-pressed]': 'isPressed()',\n    '[attr.data-pressed]': \"isPressed() ? '' : null\",\n    '[attr.data-disabled]': \"disabled() ? '' : null\",\n    '[attr.data-size]': 'resolvedSize()',\n    '[attr.data-variant]': 'resolvedVariant()',\n    '[disabled]': 'disabled()',\n  },\n})\nexport class SlToggle implements AfterViewInit {\n  readonly disabled = input(false, { transform: booleanAttribute });\n  readonly size = input<ToggleSize | undefined>(undefined);\n  readonly variant = input<ToggleVariant | undefined>(undefined);\n\n  /** Present means controlled, for the life of the component. */\n  readonly pressed = input<boolean | undefined, boolean | string | undefined>(undefined, {\n    transform: (value) => (value === undefined ? undefined : booleanAttribute(value)),\n  });\n  /** The value an uncontrolled toggle starts from, read once. */\n  readonly defaultPressed = input(false, { transform: booleanAttribute });\n  /**\n   * One output for one transition, carrying the value, the value it replaces,\n   * the reason, the originating event and `cancel()`. There is no\n   * `[(pressed)]` because a two-way binding has one slot and cannot carry any\n   * of those — the reason `SlToggleButton` records for the same choice.\n   */\n  readonly pressedChange = output<ChangeRequest<boolean>>();\n\n  private readonly defaults = injectToggleDefaults();\n  private readonly element = inject(ElementRef<HTMLButtonElement>).nativeElement;\n  private readonly destroyRef = inject(DestroyRef);\n  /**\n   * A `type` the consumer wrote survives: a toggle inside a form is a\n   * `button` unless the consumer says `submit`, and the attribute is read\n   * before the host binding writes it.\n   */\n  private readonly writtenType = inject(new HostAttributeToken('type'), { optional: true });\n  protected readonly type = this.writtenType ?? 'button';\n\n  private readonly own: WritableSignal<boolean | undefined> = signal(undefined);\n\n  readonly isPressed = computed(() => this.pressed() ?? this.own() ?? this.defaultPressed());\n  readonly resolvedSize = computed(() => this.size() ?? this.defaults.size);\n  readonly resolvedVariant = computed(() => this.variant() ?? this.defaults.variant);\n\n  /**\n   * After the view, not in the constructor. A `(click)` written on the same\n   * element is bound when the view is created, so a listener registered any\n   * earlier runs first and reads `defaultPrevented` before the consumer has\n   * had the chance to set it — and a refused activation would move the state\n   * anyway.\n   */\n  ngAfterViewInit() {\n    const listener = (event: Event) => {\n      if (this.disabled() || event.defaultPrevented) return;\n      this.request(event);\n    };\n    this.element.addEventListener('click', listener);\n    this.destroyRef.onDestroy(() => this.element.removeEventListener('click', listener));\n  }\n\n  private request(event: Event) {\n    const next = !this.isPressed();\n    const state = createControllable<boolean>({\n      controlled: this.pressed(),\n      initial: this.isPressed(),\n      onRequest: (request) => this.pressedChange.emit(request),\n    });\n    if (state.request(next, activationReason(event), event)) this.own.set(next);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"slotted-angular-toggle.mjs","sources":["../../toggle/src/toggle-defaults.ts","../../toggle/src/toggle.ts","../../toggle/src/slotted-angular-toggle.ts"],"sourcesContent":["import { inject, InjectionToken } from '@angular/core';\n\n/** The type step the control sits at. */\nexport type ToggleSize = 'sm' | 'md' | 'lg';\n\n/**\n * Whether the control is framed or bare. `ghost` is the toggle that sits\n * inside something already framed — a toolbar, a card header. There is no\n * tone axis: a mode is one colour when it is on, and an action that persists\n * in one of five tones is `SlToggleButton`.\n */\nexport type ToggleVariant = 'outline' | 'ghost' | 'chips';\n\nexport interface ToggleDefaults {\n  size: ToggleSize;\n  variant: ToggleVariant;\n}\n\nconst FALLBACK: ToggleDefaults = {\n  size: 'md',\n  variant: 'outline',\n};\n\nexport const TOGGLE_DEFAULTS = new InjectionToken<ToggleDefaults>('slotted toggle defaults', {\n  providedIn: 'root',\n  factory: () => FALLBACK,\n});\n\n/**\n * An application decides once how its toggles are drawn — a toolbar of ghost\n * modes, a form of framed ones — rather than repeating the two inputs on\n * every control. A toggle that states either itself still wins.\n */\nexport function provideToggleDefaults(defaults: Partial<ToggleDefaults>) {\n  return {\n    provide: TOGGLE_DEFAULTS,\n    useFactory: (): ToggleDefaults => ({ ...FALLBACK, ...defaults }),\n  };\n}\n\n/** What a toggle renders as here, before it states anything of its own. */\nexport function injectToggleDefaults(): ToggleDefaults {\n  return inject(TOGGLE_DEFAULTS);\n}\n","import {\n  AfterViewInit,\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  Directive,\n  ElementRef,\n  HostAttributeToken,\n  inject,\n  input,\n  output,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport type { WritableSignal } from '@angular/core';\nimport { createControllable } from '@slotted/core/state';\nimport type { ChangeRequest } from '@slotted/core/state';\n\nimport { injectToggleDefaults } from './toggle-defaults';\nimport type { ToggleSize, ToggleVariant } from './toggle-defaults';\n\n/** Why the state moved. A toggle can produce exactly these two. */\nexport type TogglePressedReason = 'pointer' | 'keyboard';\n\n/**\n * The mark beside the words, or the whole content of an icon-only toggle. A\n * marker on the consumer's own element rather than a wrapper, so an `svg`, an\n * `sl-icon` and a masked `span` all work and none loses its own semantics. It\n * is hidden from the reading order, because the words beside it — or the\n * `aria-label` on the button — are what a reader hears.\n */\n@Directive({\n  selector: '[slToggleIcon]',\n  standalone: true,\n  exportAs: 'slToggleIcon',\n  host: {\n    'data-part': 'icon',\n    'data-part-icon': '',\n    'aria-hidden': 'true',\n  },\n})\nexport class SlToggleIcon {}\n\n/**\n * A click synthesised by the keyboard reports no detail; a real one reports\n * the click count. It is why `Space`, `Enter` and a pointer are told apart\n * without a key listener existing anywhere in the family.\n */\nfunction activationReason(event: Event): TogglePressedReason {\n  return event instanceof MouseEvent && event.detail === 0 ? 'keyboard' : 'pointer';\n}\n\n/**\n * A two-state button standing on its own: a mode — Bold, Wrap, Pin — that is\n * true the moment it is pressed. `aria-pressed` is written in both states, so\n * the control is announced as a toggle rather than as a button that happens\n * to be pressed, and its label never changes with its state, which the APG\n * Button pattern calls critical.\n *\n * `SlToggleButton` is the other member: an action that persists — Follow,\n * Subscribe — which reaches a server and waits, in one of five tones. The two\n * hold one state model and one output shape, so a consumer moving between\n * them changes no handler. Inside `slToolbar` the bar owns the tab stop and\n * the arrows, and this control writes no listener of its own.\n *\n * The component is a directive on the element the consumer wrote, so\n * substituting the element is writing a different one — and it has to stay a\n * `button`: `aria-pressed` on a link is a link announcing a state a link does\n * not hold.\n */\n@Component({\n  selector: 'button[slToggle]',\n  standalone: true,\n  exportAs: 'slToggle',\n  template: `<ng-content select=\"[slToggleIcon]\" />\n    <span data-part=\"label\" data-part-label=\"\"><ng-content /></span>`,\n  styleUrl: '../../../styles/src/toggle/toggle.css',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-ui': 'toggle',\n    'data-ui-toggle': '',\n    'data-part': 'root',\n    'data-part-root': '',\n    '[attr.type]': 'type',\n    '[attr.aria-pressed]': 'isPressed()',\n    '[attr.data-pressed]': \"isPressed() ? '' : null\",\n    '[attr.data-disabled]': \"disabled() ? '' : null\",\n    '[attr.data-size]': 'resolvedSize()',\n    '[attr.data-variant]': 'resolvedVariant()',\n    '[disabled]': 'disabled()',\n  },\n})\nexport class SlToggle implements AfterViewInit {\n  readonly disabled = input(false, { transform: booleanAttribute });\n  readonly size = input<ToggleSize | undefined>(undefined);\n  readonly variant = input<ToggleVariant | undefined>(undefined);\n\n  /** Present means controlled, for the life of the component. */\n  readonly pressed = input<boolean | undefined, boolean | string | undefined>(undefined, {\n    transform: (value) => (value === undefined ? undefined : booleanAttribute(value)),\n  });\n  /** The value an uncontrolled toggle starts from, read once. */\n  readonly defaultPressed = input(false, { transform: booleanAttribute });\n  /**\n   * One output for one transition, carrying the value, the value it replaces,\n   * the reason, the originating event and `cancel()`. There is no\n   * `[(pressed)]` because a two-way binding has one slot and cannot carry any\n   * of those — the reason `SlToggleButton` records for the same choice.\n   */\n  readonly pressedChange = output<ChangeRequest<boolean>>();\n\n  private readonly defaults = injectToggleDefaults();\n  private readonly element = inject(ElementRef<HTMLButtonElement>).nativeElement;\n  private readonly destroyRef = inject(DestroyRef);\n  /**\n   * A `type` the consumer wrote survives: a toggle inside a form is a\n   * `button` unless the consumer says `submit`, and the attribute is read\n   * before the host binding writes it.\n   */\n  private readonly writtenType = inject(new HostAttributeToken('type'), { optional: true });\n  protected readonly type = this.writtenType ?? 'button';\n\n  private readonly own: WritableSignal<boolean | undefined> = signal(undefined);\n\n  readonly isPressed = computed(() => this.pressed() ?? this.own() ?? this.defaultPressed());\n  readonly resolvedSize = computed(() => this.size() ?? this.defaults.size);\n  readonly resolvedVariant = computed(() => this.variant() ?? this.defaults.variant);\n\n  /**\n   * After the view, not in the constructor. A `(click)` written on the same\n   * element is bound when the view is created, so a listener registered any\n   * earlier runs first and reads `defaultPrevented` before the consumer has\n   * had the chance to set it — and a refused activation would move the state\n   * anyway.\n   */\n  ngAfterViewInit() {\n    const listener = (event: Event) => {\n      if (this.disabled() || event.defaultPrevented) return;\n      this.request(event);\n    };\n    this.element.addEventListener('click', listener);\n    this.destroyRef.onDestroy(() => this.element.removeEventListener('click', listener));\n  }\n\n  private request(event: Event) {\n    const next = !this.isPressed();\n    const state = createControllable<boolean>({\n      controlled: this.pressed(),\n      initial: this.isPressed(),\n      onRequest: (request) => this.pressedChange.emit(request),\n    });\n    if (state.request(next, activationReason(event), event)) this.own.set(next);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAkBA,MAAM,QAAQ,GAAmB;AAC/B,IAAA,IAAI,EAAE,IAAI;AACV,IAAA,OAAO,EAAE,SAAS;CACnB;MAEY,eAAe,GAAG,IAAI,cAAc,CAAiB,yBAAyB,EAAE;AAC3F,IAAA,UAAU,EAAE,MAAM;AAClB,IAAA,OAAO,EAAE,MAAM,QAAQ;AACxB,CAAA;AAED;;;;AAIG;AACG,SAAU,qBAAqB,CAAC,QAAiC,EAAA;IACrE,OAAO;AACL,QAAA,OAAO,EAAE,eAAe;AACxB,QAAA,UAAU,EAAE,OAAuB,EAAE,GAAG,QAAQ,EAAE,GAAG,QAAQ,EAAE,CAAC;KACjE;AACH;AAEA;SACgB,oBAAoB,GAAA;AAClC,IAAA,OAAO,MAAM,CAAC,eAAe,CAAC;AAChC;;ACjBA;;;;;;AAMG;MAWU,YAAY,CAAA;uGAAZ,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAZ,YAAY,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,WAAA,EAAA,MAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,cAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAZ,YAAY,EAAA,UAAA,EAAA,CAAA;kBAVxB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,gBAAgB;AAC1B,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,QAAQ,EAAE,cAAc;AACxB,oBAAA,IAAI,EAAE;AACJ,wBAAA,WAAW,EAAE,MAAM;AACnB,wBAAA,gBAAgB,EAAE,EAAE;AACpB,wBAAA,aAAa,EAAE,MAAM;AACtB,qBAAA;AACF,iBAAA;;AAGD;;;;AAIG;AACH,SAAS,gBAAgB,CAAC,KAAY,EAAA;AACpC,IAAA,OAAO,KAAK,YAAY,UAAU,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,GAAG,UAAU,GAAG,SAAS;AACnF;AAEA;;;;;;;;;;;;;;;;;AAiBG;MAwBU,QAAQ,CAAA;IACV,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;IACxD,IAAI,GAAG,KAAK,CAAyB,SAAS;6EAAC;IAC/C,OAAO,GAAG,KAAK,CAA4B,SAAS;gFAAC;;AAGrD,IAAA,OAAO,GAAG,KAAK,CAAoD,SAAS,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,SAAA,EAAA,8BAAA,EAAA,CAAA,EACnF,SAAS,EAAE,CAAC,KAAK,MAAM,KAAK,KAAK,SAAS,GAAG,SAAS,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC,GACjF;;IAEO,cAAc,GAAG,KAAK,CAAC,KAAK,sFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AACvE;;;;;AAKG;IACM,aAAa,GAAG,MAAM,EAA0B;IAExC,QAAQ,GAAG,oBAAoB,EAAE;IACjC,OAAO,GAAG,MAAM,EAAC,UAA6B,EAAC,CAAC,aAAa;AAC7D,IAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;AAChD;;;;AAIG;AACc,IAAA,WAAW,GAAG,MAAM,CAAC,IAAI,kBAAkB,CAAC,MAAM,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AACtE,IAAA,IAAI,GAAG,IAAI,CAAC,WAAW,IAAI,QAAQ;IAErC,GAAG,GAAwC,MAAM,CAAC,SAAS;4EAAC;AAEpE,IAAA,SAAS,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,IAAI,IAAI,CAAC,GAAG,EAAE,IAAI,IAAI,CAAC,cAAc,EAAE;kFAAC;AACjF,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI;qFAAC;AAChE,IAAA,eAAe,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO;wFAAC;AAElF;;;;;;AAMG;IACH,eAAe,GAAA;AACb,QAAA,MAAM,QAAQ,GAAG,CAAC,KAAY,KAAI;AAChC,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,KAAK,CAAC,gBAAgB;gBAAE;AAC/C,YAAA,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;AACrB,QAAA,CAAC;QACD,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,QAAQ,CAAC;AAChD,QAAA,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;IACtF;AAEQ,IAAA,OAAO,CAAC,KAAY,EAAA;AAC1B,QAAA,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE;QAC9B,MAAM,KAAK,GAAG,kBAAkB,CAAU;AACxC,YAAA,UAAU,EAAE,IAAI,CAAC,OAAO,EAAE;AAC1B,YAAA,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE;AACzB,YAAA,SAAS,EAAE,CAAC,OAAO,KAAK,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC;AACzD,SAAA,CAAC;AACF,QAAA,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,gBAAgB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC;AAAE,YAAA,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC;IAC7E;uGA5DW,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAR,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,QAAQ,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,aAAA,EAAA,eAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,SAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,WAAA,EAAA,MAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,EAAA,UAAA,EAAA,EAAA,WAAA,EAAA,MAAA,EAAA,mBAAA,EAAA,aAAA,EAAA,mBAAA,EAAA,yBAAA,EAAA,oBAAA,EAAA,wBAAA,EAAA,gBAAA,EAAA,gBAAA,EAAA,mBAAA,EAAA,mBAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,UAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAnBT,CAAA;AACyD,oEAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,k4MAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAkBxD,QAAQ,EAAA,UAAA,EAAA,CAAA;kBAvBpB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,EAAA,UAAA,EAChB,IAAI,EAAA,QAAA,EACN,UAAU,EAAA,QAAA,EACV,CAAA;AACyD,oEAAA,CAAA,EAAA,eAAA,EAElD,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,SAAS,EAAE,QAAQ;AACnB,wBAAA,gBAAgB,EAAE,EAAE;AACpB,wBAAA,WAAW,EAAE,MAAM;AACnB,wBAAA,gBAAgB,EAAE,EAAE;AACpB,wBAAA,aAAa,EAAE,MAAM;AACrB,wBAAA,qBAAqB,EAAE,aAAa;AACpC,wBAAA,qBAAqB,EAAE,yBAAyB;AAChD,wBAAA,sBAAsB,EAAE,wBAAwB;AAChD,wBAAA,kBAAkB,EAAE,gBAAgB;AACpC,wBAAA,qBAAqB,EAAE,mBAAmB;AAC1C,wBAAA,YAAY,EAAE,YAAY;AAC3B,qBAAA,EAAA,MAAA,EAAA,CAAA,k4MAAA,CAAA,EAAA;;;AC7FH;;AAEG;;"}

package/fesm2022/slotted-angular-toolbar.mjs

@@ -2,6 +2,7 @@ import { createRovingTabindex, toolbarOwnedKeys, TOOLBAR_ITEM_SELECTOR } from '@
 import { createCollapse } from '@slotted/core/overflow';
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, input, booleanAttribute, output, ElementRef, signal, computed, DestroyRef, afterNextRender, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, Directive, HostAttributeToken, viewChild, Injector } from '@angular/core';
+import { writeSelectorKey } from '@slotted/core/selector-key';
 import { NgTemplateOutlet } from '@angular/common';
 import { SlGlyph, SlIcon } from '@slotted/angular/icon';
 import { SlMenu, SlMenuSeparator, SlMenuTrigger } from '@slotted/angular/menu';
@@ -214,13 +215,15 @@ class SlToolbar {
     }
     collapse = null;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlToolbar, isStandalone: true, selector: "[slToolbar]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, overflow: { classPropertyName: "overflow", publicName: "overflow", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { overflowChange: "overflowChange" }, host: { attributes: { "data-ui": "toolbar", "data-part": "root", "role": "toolbar" }, properties: { "attr.data-orientation": "resolvedOrientation()", "attr.data-size": "resolvedSize()", "attr.data-variant": "resolvedVariant()", "attr.data-overflow": "resolvedOverflow()", "attr.data-collapsed": "collapsedCount()", "attr.aria-orientation": "ariaOrientation()" } }, exportAs: ["slToolbar"], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@layer slotted.components{[data-ui=toolbar]{--_gap: var(--slotted-control-gap-md, .375rem);--_inset: var(--slotted-space-2, .25rem);--_height: var(--slotted-control-height-md, 34px);--_separator-inset: var(--slotted-space-2, .25rem);--_font-size: var(--slotted-control-font-size-md, .875rem);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_pad: var(--_inset);align-items:center;display:flex;flex-wrap:wrap;gap:var(--slotted-toolbar-gap, var(--_gap));min-inline-size:0;padding:var(--slotted-toolbar-inset, var(--_pad))}[data-ui=toolbar][data-size=sm]{--_gap: var(--slotted-control-gap-sm, .25rem);--_inset: var(--slotted-space-1, .125rem);--_height: var(--slotted-control-height-sm, 30px);--_separator-inset: var(--slotted-space-1, .125rem);--_font-size: var(--slotted-control-font-size-sm, .8125rem);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_inner-size: var(--slotted-control-inner-size-sm, 22px)}[data-ui=toolbar][data-size=lg]{--_gap: var(--slotted-control-gap-lg, .5rem);--_inset: var(--slotted-space-3, .375rem);--_height: var(--slotted-control-height-lg, 40px);--_separator-inset: var(--slotted-space-3, .375rem);--_font-size: var(--slotted-control-font-size-lg, .9375rem);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_inner-size: var(--slotted-control-inner-size-lg, 28px)}[data-ui=toolbar]:empty{display:none}[data-ui=toolbar][data-orientation=vertical]{align-items:stretch;flex-direction:column;inline-size:fit-content}[data-ui=toolbar][data-variant=outline]{--_pad: max( var(--_inset), calc(var(--slotted-focus-ring-offset, 2px) + var(--slotted-focus-ring-width, 2px)) );background-color:var(--slotted-toolbar-background, var(--slotted-surface-raised));border:var(--slotted-border-width-thin, 1px) solid var(--slotted-toolbar-border-color, var(--slotted-border-subtle, ButtonBorder));border-radius:var(--slotted-radius-md, 6px)}[data-ui=toolbar]:is([data-overflow=scroll],[data-overflow=menu]){--_pad: max( var(--_inset), calc(var(--slotted-focus-ring-offset, 2px) + var(--slotted-focus-ring-width, 2px)) );flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin}[data-ui=toolbar]:is([data-overflow=scroll],[data-overflow=menu])[data-orientation=vertical]{inline-size:auto;overflow-x:hidden;overflow-y:auto}[data-ui=toolbar]:is([data-overflow=scroll],[data-overflow=menu])>*{flex:none}[data-ui=toolbar] [data-part=item]{align-items:center;display:inline-flex;min-inline-size:0}[data-ui=toolbar][data-orientation=vertical] [data-part=item]{align-items:stretch;flex-direction:column}[data-ui=toolbar] :is([data-part=item],[data-part=group],[data-part=separator],[data-part=overflow])[hidden]{display:none}[data-ui=toolbar] [data-part=overflow]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;border:0;border-radius:var(--slotted-control-radius, 4px);color:var(--slotted-toolbar-overflow-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:none;font-family:var(--slotted-control-font-family, inherit);justify-content:center;line-height:1;min-block-size:var(--_height);min-inline-size:max(var(--slotted-target-min, 24px),min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)),var(--_inner-size)));padding:0;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=toolbar] [data-part=overflow]:not(:disabled):hover{background-color:var( --slotted-toolbar-overflow-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=toolbar] [data-part=overflow]:not(:disabled):active{background-color:var( --slotted-toolbar-overflow-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=toolbar] [data-part=overflow][data-open]{background-color:var( --slotted-toolbar-overflow-open-background, var(--slotted-tone-secondary-subtle-active) );color:var(--slotted-toolbar-overflow-hover-color, var(--slotted-text, CanvasText))}@media(pointer:coarse){[data-ui=toolbar] [data-part=overflow]{min-block-size:max(var(--slotted-target-comfortable, 44px),var(--_height));min-inline-size:max(var(--slotted-target-comfortable, 44px),var(--_height))}}[data-ui=toolbar] [data-part=overflow]:disabled{color:var(--slotted-disabled-foreground, GrayText);cursor:default}[data-ui=toolbar] [data-part=overflow]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-width, 2px))}[data-ui=toolbar] [data-part=group]{align-items:center;display:flex;flex-wrap:inherit;gap:calc(var(--_gap) / 2);min-inline-size:0}[data-ui=toolbar][data-orientation=vertical] [data-part=group]{align-items:stretch;flex-direction:column}[data-ui=toolbar] [data-part=group]:not(:first-child){margin-inline-start:calc(var(--_gap) / 2)}[data-ui=toolbar] [data-part=group]:not(:last-child){margin-inline-end:calc(var(--_gap) / 2)}[data-ui=toolbar][data-orientation=vertical] [data-part=group]:not(:first-child){margin-block-start:calc(var(--_gap) / 2);margin-inline-start:0}[data-ui=toolbar][data-orientation=vertical] [data-part=group]:not(:last-child){margin-block-end:calc(var(--_gap) / 2);margin-inline-end:0}[data-ui=toolbar] [data-part=separator]{align-self:stretch;background-color:var( --slotted-toolbar-separator-color, var(--slotted-control-border-color, ButtonBorder) );border:0;flex:none;inline-size:var(--slotted-border-width-thin, 1px);margin-block:var(--_separator-inset);margin-inline:calc(var(--_gap) / 2);min-block-size:calc(var(--_height) - 2 * var(--_separator-inset))}[data-ui=toolbar][data-orientation=vertical] [data-part=separator]{block-size:var(--slotted-border-width-thin, 1px);inline-size:auto;margin-block:calc(var(--_gap) / 2);margin-inline:var(--_separator-inset);min-block-size:0}@media(forced-colors:active){[data-ui=toolbar] [data-part=separator]{background-color:CanvasText;forced-color-adjust:none}}[data-ui=toolbar] [data-part=spacer]{flex:1 1 0;min-block-size:0;min-inline-size:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlToolbar, isStandalone: true, selector: "[slToolbar]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, overflow: { classPropertyName: "overflow", publicName: "overflow", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { overflowChange: "overflowChange" }, host: { attributes: { "data-ui": "toolbar", "data-ui-toolbar": "", "data-part": "root", "data-part-root": "", "role": "toolbar" }, properties: { "attr.data-orientation": "resolvedOrientation()", "attr.data-size": "resolvedSize()", "attr.data-variant": "resolvedVariant()", "attr.data-overflow": "resolvedOverflow()", "attr.data-collapsed": "collapsedCount()", "attr.aria-orientation": "ariaOrientation()" } }, exportAs: ["slToolbar"], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@layer slotted.components{[data-ui-toolbar]{--_gap: var(--slotted-control-gap-md, .375rem);--_inset: var(--slotted-space-2, .25rem);--_height: var(--slotted-control-height-md, 34px);--_separator-inset: var(--slotted-space-2, .25rem);--_font-size: var(--slotted-control-font-size-md, .875rem);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_pad: var(--_inset);align-items:center;display:flex;flex-wrap:wrap;gap:var(--slotted-toolbar-gap, var(--_gap));min-inline-size:0;padding:var(--slotted-toolbar-inset, var(--_pad))}[data-ui-toolbar][data-size=sm]{--_gap: var(--slotted-control-gap-sm, .25rem);--_inset: var(--slotted-space-1, .125rem);--_height: var(--slotted-control-height-sm, 30px);--_separator-inset: var(--slotted-space-1, .125rem);--_font-size: var(--slotted-control-font-size-sm, .8125rem);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_inner-size: var(--slotted-control-inner-size-sm, 22px)}[data-ui-toolbar][data-size=lg]{--_gap: var(--slotted-control-gap-lg, .5rem);--_inset: var(--slotted-space-3, .375rem);--_height: var(--slotted-control-height-lg, 40px);--_separator-inset: var(--slotted-space-3, .375rem);--_font-size: var(--slotted-control-font-size-lg, .9375rem);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_inner-size: var(--slotted-control-inner-size-lg, 28px)}[data-ui-toolbar]:empty{display:none}[data-ui-toolbar][data-orientation=vertical]{align-items:stretch;flex-direction:column;inline-size:fit-content}[data-ui-toolbar][data-variant=outline]{--_pad: max( var(--_inset), calc(var(--slotted-focus-ring-offset, 2px) + var(--slotted-focus-ring-width, 2px)) );background-color:var(--slotted-toolbar-background, var(--slotted-surface-raised));border:var(--slotted-border-width-thin, 1px) solid var(--slotted-toolbar-border-color, var(--slotted-border-subtle, ButtonBorder));border-radius:var(--slotted-radius-md, 6px)}[data-ui-toolbar]:is([data-overflow=scroll],[data-overflow=menu]){--_pad: max( var(--_inset), calc(var(--slotted-focus-ring-offset, 2px) + var(--slotted-focus-ring-width, 2px)) );flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin}[data-ui-toolbar]:is([data-overflow=scroll],[data-overflow=menu])[data-orientation=vertical]{inline-size:auto;overflow-x:hidden;overflow-y:auto}[data-ui-toolbar]:is([data-overflow=scroll],[data-overflow=menu])>*{flex:none}[data-ui-toolbar] [data-part-item]{align-items:center;display:inline-flex;min-inline-size:0}[data-ui-toolbar][data-orientation=vertical] [data-part-item]{align-items:stretch;flex-direction:column}[data-ui-toolbar] :is([data-part-item],[data-part-group],[data-part-separator],[data-part-overflow])[hidden]{display:none}[data-ui-toolbar] [data-part-overflow]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;border:0;border-radius:var(--slotted-control-radius, 4px);color:var(--slotted-toolbar-overflow-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:none;font-family:var(--slotted-control-font-family, inherit);justify-content:center;line-height:1;min-block-size:var(--_height);min-inline-size:max(var(--slotted-target-min, 24px),min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)),var(--_inner-size)));padding:0;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui-toolbar] [data-part-overflow]:not(:disabled):hover{background-color:var( --slotted-toolbar-overflow-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui-toolbar] [data-part-overflow]:not(:disabled):active{background-color:var( --slotted-toolbar-overflow-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui-toolbar] [data-part-overflow][data-open]{background-color:var( --slotted-toolbar-overflow-open-background, var(--slotted-tone-secondary-subtle-active) );color:var(--slotted-toolbar-overflow-hover-color, var(--slotted-text, CanvasText))}@media(pointer:coarse){[data-ui-toolbar] [data-part-overflow]{min-block-size:max(var(--slotted-target-comfortable, 44px),var(--_height));min-inline-size:max(var(--slotted-target-comfortable, 44px),var(--_height))}}[data-ui-toolbar] [data-part-overflow]:disabled{color:var(--slotted-disabled-foreground, GrayText);cursor:default}[data-ui-toolbar] [data-part-overflow]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-width, 2px))}[data-ui-toolbar] [data-part-group]{align-items:center;display:flex;flex-wrap:inherit;gap:calc(var(--_gap) / 2);min-inline-size:0}[data-ui-toolbar][data-orientation=vertical] [data-part-group]{align-items:stretch;flex-direction:column}[data-ui-toolbar] [data-part-group]:not(:first-child){margin-inline-start:calc(var(--_gap) / 2)}[data-ui-toolbar] [data-part-group]:not(:last-child){margin-inline-end:calc(var(--_gap) / 2)}[data-ui-toolbar][data-orientation=vertical] [data-part-group]:not(:first-child){margin-block-start:calc(var(--_gap) / 2);margin-inline-start:0}[data-ui-toolbar][data-orientation=vertical] [data-part-group]:not(:last-child){margin-block-end:calc(var(--_gap) / 2);margin-inline-end:0}[data-ui-toolbar] [data-part-separator]{align-self:stretch;background-color:var( --slotted-toolbar-separator-color, var(--slotted-control-border-color, ButtonBorder) );border:0;flex:none;inline-size:var(--slotted-border-width-thin, 1px);margin-block:var(--_separator-inset);margin-inline:calc(var(--_gap) / 2);min-block-size:calc(var(--_height) - 2 * var(--_separator-inset))}[data-ui-toolbar][data-orientation=vertical] [data-part-separator]{block-size:var(--slotted-border-width-thin, 1px);inline-size:auto;margin-block:calc(var(--_gap) / 2);margin-inline:var(--_separator-inset);min-block-size:0}@media(forced-colors:active){[data-ui-toolbar] [data-part-separator]{background-color:CanvasText;forced-color-adjust:none}}[data-ui-toolbar] [data-part-spacer]{flex:1 1 0;min-block-size:0;min-inline-size:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToolbar, decorators: [{
             type: Component,
             args: [{ selector: '[slToolbar]', standalone: true, exportAs: 'slToolbar', template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         'data-ui': 'toolbar',
+                        'data-ui-toolbar': '',
                         'data-part': 'root',
+                        'data-part-root': '',
                         role: 'toolbar',
                         '[attr.data-orientation]': 'resolvedOrientation()',
                         '[attr.data-size]': 'resolvedSize()',
@@ -228,7 +231,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         '[attr.data-overflow]': 'resolvedOverflow()',
                         '[attr.data-collapsed]': 'collapsedCount()',
                         '[attr.aria-orientation]': 'ariaOrientation()',
-                    }, styles: ["@layer slotted.components{[data-ui=toolbar]{--_gap: var(--slotted-control-gap-md, .375rem);--_inset: var(--slotted-space-2, .25rem);--_height: var(--slotted-control-height-md, 34px);--_separator-inset: var(--slotted-space-2, .25rem);--_font-size: var(--slotted-control-font-size-md, .875rem);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_pad: var(--_inset);align-items:center;display:flex;flex-wrap:wrap;gap:var(--slotted-toolbar-gap, var(--_gap));min-inline-size:0;padding:var(--slotted-toolbar-inset, var(--_pad))}[data-ui=toolbar][data-size=sm]{--_gap: var(--slotted-control-gap-sm, .25rem);--_inset: var(--slotted-space-1, .125rem);--_height: var(--slotted-control-height-sm, 30px);--_separator-inset: var(--slotted-space-1, .125rem);--_font-size: var(--slotted-control-font-size-sm, .8125rem);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_inner-size: var(--slotted-control-inner-size-sm, 22px)}[data-ui=toolbar][data-size=lg]{--_gap: var(--slotted-control-gap-lg, .5rem);--_inset: var(--slotted-space-3, .375rem);--_height: var(--slotted-control-height-lg, 40px);--_separator-inset: var(--slotted-space-3, .375rem);--_font-size: var(--slotted-control-font-size-lg, .9375rem);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_inner-size: var(--slotted-control-inner-size-lg, 28px)}[data-ui=toolbar]:empty{display:none}[data-ui=toolbar][data-orientation=vertical]{align-items:stretch;flex-direction:column;inline-size:fit-content}[data-ui=toolbar][data-variant=outline]{--_pad: max( var(--_inset), calc(var(--slotted-focus-ring-offset, 2px) + var(--slotted-focus-ring-width, 2px)) );background-color:var(--slotted-toolbar-background, var(--slotted-surface-raised));border:var(--slotted-border-width-thin, 1px) solid var(--slotted-toolbar-border-color, var(--slotted-border-subtle, ButtonBorder));border-radius:var(--slotted-radius-md, 6px)}[data-ui=toolbar]:is([data-overflow=scroll],[data-overflow=menu]){--_pad: max( var(--_inset), calc(var(--slotted-focus-ring-offset, 2px) + var(--slotted-focus-ring-width, 2px)) );flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin}[data-ui=toolbar]:is([data-overflow=scroll],[data-overflow=menu])[data-orientation=vertical]{inline-size:auto;overflow-x:hidden;overflow-y:auto}[data-ui=toolbar]:is([data-overflow=scroll],[data-overflow=menu])>*{flex:none}[data-ui=toolbar] [data-part=item]{align-items:center;display:inline-flex;min-inline-size:0}[data-ui=toolbar][data-orientation=vertical] [data-part=item]{align-items:stretch;flex-direction:column}[data-ui=toolbar] :is([data-part=item],[data-part=group],[data-part=separator],[data-part=overflow])[hidden]{display:none}[data-ui=toolbar] [data-part=overflow]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;border:0;border-radius:var(--slotted-control-radius, 4px);color:var(--slotted-toolbar-overflow-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:none;font-family:var(--slotted-control-font-family, inherit);justify-content:center;line-height:1;min-block-size:var(--_height);min-inline-size:max(var(--slotted-target-min, 24px),min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)),var(--_inner-size)));padding:0;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=toolbar] [data-part=overflow]:not(:disabled):hover{background-color:var( --slotted-toolbar-overflow-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=toolbar] [data-part=overflow]:not(:disabled):active{background-color:var( --slotted-toolbar-overflow-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=toolbar] [data-part=overflow][data-open]{background-color:var( --slotted-toolbar-overflow-open-background, var(--slotted-tone-secondary-subtle-active) );color:var(--slotted-toolbar-overflow-hover-color, var(--slotted-text, CanvasText))}@media(pointer:coarse){[data-ui=toolbar] [data-part=overflow]{min-block-size:max(var(--slotted-target-comfortable, 44px),var(--_height));min-inline-size:max(var(--slotted-target-comfortable, 44px),var(--_height))}}[data-ui=toolbar] [data-part=overflow]:disabled{color:var(--slotted-disabled-foreground, GrayText);cursor:default}[data-ui=toolbar] [data-part=overflow]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-width, 2px))}[data-ui=toolbar] [data-part=group]{align-items:center;display:flex;flex-wrap:inherit;gap:calc(var(--_gap) / 2);min-inline-size:0}[data-ui=toolbar][data-orientation=vertical] [data-part=group]{align-items:stretch;flex-direction:column}[data-ui=toolbar] [data-part=group]:not(:first-child){margin-inline-start:calc(var(--_gap) / 2)}[data-ui=toolbar] [data-part=group]:not(:last-child){margin-inline-end:calc(var(--_gap) / 2)}[data-ui=toolbar][data-orientation=vertical] [data-part=group]:not(:first-child){margin-block-start:calc(var(--_gap) / 2);margin-inline-start:0}[data-ui=toolbar][data-orientation=vertical] [data-part=group]:not(:last-child){margin-block-end:calc(var(--_gap) / 2);margin-inline-end:0}[data-ui=toolbar] [data-part=separator]{align-self:stretch;background-color:var( --slotted-toolbar-separator-color, var(--slotted-control-border-color, ButtonBorder) );border:0;flex:none;inline-size:var(--slotted-border-width-thin, 1px);margin-block:var(--_separator-inset);margin-inline:calc(var(--_gap) / 2);min-block-size:calc(var(--_height) - 2 * var(--_separator-inset))}[data-ui=toolbar][data-orientation=vertical] [data-part=separator]{block-size:var(--slotted-border-width-thin, 1px);inline-size:auto;margin-block:calc(var(--_gap) / 2);margin-inline:var(--_separator-inset);min-block-size:0}@media(forced-colors:active){[data-ui=toolbar] [data-part=separator]{background-color:CanvasText;forced-color-adjust:none}}[data-ui=toolbar] [data-part=spacer]{flex:1 1 0;min-block-size:0;min-inline-size:0}}\n"] }]
+                    }, styles: ["@layer slotted.components{[data-ui-toolbar]{--_gap: var(--slotted-control-gap-md, .375rem);--_inset: var(--slotted-space-2, .25rem);--_height: var(--slotted-control-height-md, 34px);--_separator-inset: var(--slotted-space-2, .25rem);--_font-size: var(--slotted-control-font-size-md, .875rem);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_pad: var(--_inset);align-items:center;display:flex;flex-wrap:wrap;gap:var(--slotted-toolbar-gap, var(--_gap));min-inline-size:0;padding:var(--slotted-toolbar-inset, var(--_pad))}[data-ui-toolbar][data-size=sm]{--_gap: var(--slotted-control-gap-sm, .25rem);--_inset: var(--slotted-space-1, .125rem);--_height: var(--slotted-control-height-sm, 30px);--_separator-inset: var(--slotted-space-1, .125rem);--_font-size: var(--slotted-control-font-size-sm, .8125rem);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_inner-size: var(--slotted-control-inner-size-sm, 22px)}[data-ui-toolbar][data-size=lg]{--_gap: var(--slotted-control-gap-lg, .5rem);--_inset: var(--slotted-space-3, .375rem);--_height: var(--slotted-control-height-lg, 40px);--_separator-inset: var(--slotted-space-3, .375rem);--_font-size: var(--slotted-control-font-size-lg, .9375rem);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_inner-size: var(--slotted-control-inner-size-lg, 28px)}[data-ui-toolbar]:empty{display:none}[data-ui-toolbar][data-orientation=vertical]{align-items:stretch;flex-direction:column;inline-size:fit-content}[data-ui-toolbar][data-variant=outline]{--_pad: max( var(--_inset), calc(var(--slotted-focus-ring-offset, 2px) + var(--slotted-focus-ring-width, 2px)) );background-color:var(--slotted-toolbar-background, var(--slotted-surface-raised));border:var(--slotted-border-width-thin, 1px) solid var(--slotted-toolbar-border-color, var(--slotted-border-subtle, ButtonBorder));border-radius:var(--slotted-radius-md, 6px)}[data-ui-toolbar]:is([data-overflow=scroll],[data-overflow=menu]){--_pad: max( var(--_inset), calc(var(--slotted-focus-ring-offset, 2px) + var(--slotted-focus-ring-width, 2px)) );flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin}[data-ui-toolbar]:is([data-overflow=scroll],[data-overflow=menu])[data-orientation=vertical]{inline-size:auto;overflow-x:hidden;overflow-y:auto}[data-ui-toolbar]:is([data-overflow=scroll],[data-overflow=menu])>*{flex:none}[data-ui-toolbar] [data-part-item]{align-items:center;display:inline-flex;min-inline-size:0}[data-ui-toolbar][data-orientation=vertical] [data-part-item]{align-items:stretch;flex-direction:column}[data-ui-toolbar] :is([data-part-item],[data-part-group],[data-part-separator],[data-part-overflow])[hidden]{display:none}[data-ui-toolbar] [data-part-overflow]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;border:0;border-radius:var(--slotted-control-radius, 4px);color:var(--slotted-toolbar-overflow-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:none;font-family:var(--slotted-control-font-family, inherit);justify-content:center;line-height:1;min-block-size:var(--_height);min-inline-size:max(var(--slotted-target-min, 24px),min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)),var(--_inner-size)));padding:0;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui-toolbar] [data-part-overflow]:not(:disabled):hover{background-color:var( --slotted-toolbar-overflow-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui-toolbar] [data-part-overflow]:not(:disabled):active{background-color:var( --slotted-toolbar-overflow-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui-toolbar] [data-part-overflow][data-open]{background-color:var( --slotted-toolbar-overflow-open-background, var(--slotted-tone-secondary-subtle-active) );color:var(--slotted-toolbar-overflow-hover-color, var(--slotted-text, CanvasText))}@media(pointer:coarse){[data-ui-toolbar] [data-part-overflow]{min-block-size:max(var(--slotted-target-comfortable, 44px),var(--_height));min-inline-size:max(var(--slotted-target-comfortable, 44px),var(--_height))}}[data-ui-toolbar] [data-part-overflow]:disabled{color:var(--slotted-disabled-foreground, GrayText);cursor:default}[data-ui-toolbar] [data-part-overflow]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-width, 2px))}[data-ui-toolbar] [data-part-group]{align-items:center;display:flex;flex-wrap:inherit;gap:calc(var(--_gap) / 2);min-inline-size:0}[data-ui-toolbar][data-orientation=vertical] [data-part-group]{align-items:stretch;flex-direction:column}[data-ui-toolbar] [data-part-group]:not(:first-child){margin-inline-start:calc(var(--_gap) / 2)}[data-ui-toolbar] [data-part-group]:not(:last-child){margin-inline-end:calc(var(--_gap) / 2)}[data-ui-toolbar][data-orientation=vertical] [data-part-group]:not(:first-child){margin-block-start:calc(var(--_gap) / 2);margin-inline-start:0}[data-ui-toolbar][data-orientation=vertical] [data-part-group]:not(:last-child){margin-block-end:calc(var(--_gap) / 2);margin-inline-end:0}[data-ui-toolbar] [data-part-separator]{align-self:stretch;background-color:var( --slotted-toolbar-separator-color, var(--slotted-control-border-color, ButtonBorder) );border:0;flex:none;inline-size:var(--slotted-border-width-thin, 1px);margin-block:var(--_separator-inset);margin-inline:calc(var(--_gap) / 2);min-block-size:calc(var(--_height) - 2 * var(--_separator-inset))}[data-ui-toolbar][data-orientation=vertical] [data-part-separator]{block-size:var(--slotted-border-width-thin, 1px);inline-size:auto;margin-block:calc(var(--_gap) / 2);margin-inline:var(--_separator-inset);min-block-size:0}@media(forced-colors:active){[data-ui-toolbar] [data-part-separator]{background-color:CanvasText;forced-color-adjust:none}}[data-ui-toolbar] [data-part-spacer]{flex:1 1 0;min-block-size:0;min-inline-size:0}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], overflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflow", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], overflowChange: [{ type: i0.Output, args: ["overflowChange"] }] } });
 /**
  * A run of related controls, announced as a group.
@@ -249,7 +252,7 @@ class SlToolbarGroup {
     counterpart = input(undefined, { ...(ngDevMode ? { debugName: "counterpart" } : /* istanbul ignore next */ {}), alias: 'slToolbarGroupCounterpart' });
     unit = declareUnit(() => this.counterpart());
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToolbarGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlToolbarGroup, isStandalone: true, selector: "[slToolbarGroup]", inputs: { counterpart: { classPropertyName: "counterpart", publicName: "slToolbarGroupCounterpart", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "group", "role": "group" }, properties: { "attr.data-unit": "unit.id()" } }, exportAs: ["slToolbarGroup"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlToolbarGroup, isStandalone: true, selector: "[slToolbarGroup]", inputs: { counterpart: { classPropertyName: "counterpart", publicName: "slToolbarGroupCounterpart", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "group", "data-part-group": "", "role": "group" }, properties: { "attr.data-unit": "unit.id()" } }, exportAs: ["slToolbarGroup"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToolbarGroup, decorators: [{
             type: Directive,
@@ -257,7 +260,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     selector: '[slToolbarGroup]',
                     standalone: true,
                     exportAs: 'slToolbarGroup',
-                    host: { 'data-part': 'group', role: 'group', '[attr.data-unit]': 'unit.id()' },
+                    host: {
+                        'data-part': 'group',
+                        'data-part-group': '',
+                        role: 'group',
+                        '[attr.data-unit]': 'unit.id()',
+                    },
                 }]
         }], propDecorators: { counterpart: [{ type: i0.Input, args: [{ isSignal: true, alias: "slToolbarGroupCounterpart", required: false }] }] } });
 /**
@@ -281,7 +289,7 @@ class SlToolbarItem {
     counterpart = input(undefined, { ...(ngDevMode ? { debugName: "counterpart" } : /* istanbul ignore next */ {}), alias: 'slToolbarItemCounterpart' });
     unit = declareUnit(() => this.counterpart());
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToolbarItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlToolbarItem, isStandalone: true, selector: "[slToolbarItem]", inputs: { counterpart: { classPropertyName: "counterpart", publicName: "slToolbarItemCounterpart", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "item" }, properties: { "attr.data-unit": "unit.id()" } }, exportAs: ["slToolbarItem"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlToolbarItem, isStandalone: true, selector: "[slToolbarItem]", inputs: { counterpart: { classPropertyName: "counterpart", publicName: "slToolbarItemCounterpart", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "item", "data-part-item": "" }, properties: { "attr.data-unit": "unit.id()" } }, exportAs: ["slToolbarItem"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToolbarItem, decorators: [{
             type: Directive,
@@ -289,7 +297,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     selector: '[slToolbarItem]',
                     standalone: true,
                     exportAs: 'slToolbarItem',
-                    host: { 'data-part': 'item', '[attr.data-unit]': 'unit.id()' },
+                    host: { 'data-part': 'item', 'data-part-item': '', '[attr.data-unit]': 'unit.id()' },
                 }]
         }], propDecorators: { counterpart: [{ type: i0.Input, args: [{ isSignal: true, alias: "slToolbarItemCounterpart", required: false }] }] } });
 /**
@@ -332,7 +340,7 @@ class SlToolbarSeparator {
     ariaOrientation = computed(() => this.toolbar.resolvedOrientation() === 'vertical' ? 'horizontal' : 'vertical', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaOrientation" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToolbarSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlToolbarSeparator, isStandalone: true, selector: "[slToolbarSeparator]", host: { attributes: { "data-part": "separator", "role": "separator" }, properties: { "attr.aria-orientation": "ariaOrientation()" } }, exportAs: ["slToolbarSeparator"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlToolbarSeparator, isStandalone: true, selector: "[slToolbarSeparator]", host: { attributes: { "data-part": "separator", "data-part-separator": "", "role": "separator" }, properties: { "attr.aria-orientation": "ariaOrientation()" } }, exportAs: ["slToolbarSeparator"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToolbarSeparator, decorators: [{
             type: Directive,
@@ -342,6 +350,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     exportAs: 'slToolbarSeparator',
                     host: {
                         'data-part': 'separator',
+                        'data-part-separator': '',
                         role: 'separator',
                         '[attr.aria-orientation]': 'ariaOrientation()',
                     },
@@ -356,7 +365,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  */
 class SlToolbarSpacer {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToolbarSpacer, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlToolbarSpacer, isStandalone: true, selector: "[slToolbarSpacer]", host: { attributes: { "data-part": "spacer", "aria-hidden": "true" } }, exportAs: ["slToolbarSpacer"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlToolbarSpacer, isStandalone: true, selector: "[slToolbarSpacer]", host: { attributes: { "data-part": "spacer", "data-part-spacer": "", "aria-hidden": "true" } }, exportAs: ["slToolbarSpacer"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToolbarSpacer, decorators: [{
             type: Directive,
@@ -364,7 +373,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     selector: '[slToolbarSpacer]',
                     standalone: true,
                     exportAs: 'slToolbarSpacer',
-                    host: { 'data-part': 'spacer', 'aria-hidden': 'true' },
+                    host: { 'data-part': 'spacer', 'data-part-spacer': '', 'aria-hidden': 'true' },
                 }]
         }] });
 
@@ -465,7 +474,7 @@ class SlToolbarOverflow {
              * spread after the menu's; here the two writers are directives on one
              * element and the last one wins.
              */
-            element.setAttribute('data-part', 'overflow');
+            writeSelectorKey(element, 'part', 'overflow');
             /* The bar measures the control, so it has to hold it. */
             this.toolbar.registerTrigger(element);
         });
@@ -476,6 +485,7 @@ class SlToolbarOverflow {
     <button
       #trigger
       data-part="overflow"
+      data-part-overflow=""
       type="button"
       [slMenuTriggerFor]="surface"
       [attr.aria-label]="name()"
@@ -508,6 +518,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
     <button
       #trigger
       data-part="overflow"
+      data-part-overflow=""
       type="button"
       [slMenuTriggerFor]="surface"
       [attr.aria-label]="name()"