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

package/fesm2022/slotted-angular-description-list.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"slotted-angular-description-list.mjs","sources":["../../description-list/src/description-list.constants.ts","../../description-list/src/description-list.ts","../../description-list/src/slotted-angular-description-list.ts"],"sourcesContent":["import { inject, Injectable, InjectionToken } from '@angular/core';\nimport { writeToClipboard } from '@slotted/core/clipboard';\n\n/** The term beside its value, or above it. */\nexport type DescriptionListLayout = 'row' | 'stack';\n\n/** How many pairs stand side by side before the container narrows. */\nexport type DescriptionListColumns = 1 | 2 | 3;\n\n/** Nothing between pairs, a rule between them, or a framed table. */\nexport type DescriptionListVariant = 'plain' | 'ruled' | 'framed';\n\n/**\n * What happened when a value was copied. It is not a `ChangeRequest`: the\n * clipboard belongs to the platform, so there is no previous value, nothing to\n * cancel, and no state the family holds. The output reports, after the fact,\n * what a consumer may want to log or announce differently.\n */\nexport interface DescriptionListCopyRequest {\n  readonly value: string;\n  readonly reason: 'pointer' | 'keyboard';\n  /** `false` when the platform refused the write or offers no clipboard. */\n  readonly copied: boolean;\n  /**\n   * `true` when the write was refused and the value was selected instead, so\n   * the reader can copy it with the keyboard.\n   */\n  readonly selected: boolean;\n  readonly source?: Event;\n}\n\nexport interface DescriptionListDefaults {\n  columns?: DescriptionListColumns;\n  layout?: DescriptionListLayout;\n  /** The maximum width of the term column, as a CSS length. */\n  termWidth?: string;\n  variant?: DescriptionListVariant;\n}\n\nexport const DESCRIPTION_LIST_DEFAULT_LAYOUT: DescriptionListLayout = 'row';\nexport const DESCRIPTION_LIST_DEFAULT_COLUMNS: DescriptionListColumns = 1;\nexport const DESCRIPTION_LIST_DEFAULT_VARIANT: DescriptionListVariant = 'plain';\n\n/**\n * The mark a row shows where it has no value: an em dash, which is what a table\n * has used for a missing value since tables were set in lead. It is a character\n * and therefore content, which is why it is written in the template and not\n * generated by the stylesheet, and never a hyphen — that is a word joiner, half\n * the width, sitting at a different height (DL2).\n */\nexport const DESCRIPTION_LIST_EMPTY_VALUE_MARK = '\\u2014';\n\n/** How long the copy control says it succeeded before returning to rest. */\nexport const COPIED_FOR = 1500;\n\nexport const DESCRIPTION_LIST_DEFAULTS_TOKEN = new InjectionToken<DescriptionListDefaults>(\n  'slotted description list defaults',\n  { providedIn: 'root', factory: (): DescriptionListDefaults => ({}) },\n);\n\n/**\n * An application decides once how its details panels are arranged. A list\n * that states any of it itself still wins: an explicit input is never\n * overridden by the token. Its words come from the language in force\n * (`provideSlotted`).\n */\nexport function provideDescriptionListDefaults(defaults: DescriptionListDefaults) {\n  return { provide: DESCRIPTION_LIST_DEFAULTS_TOKEN, useValue: defaults };\n}\n\nexport function injectDescriptionListDefaults(): DescriptionListDefaults {\n  return inject(DESCRIPTION_LIST_DEFAULTS_TOKEN);\n}\n\n/**\n * A span is stated in columns and the list may have fewer, so a pair asking for\n * three columns of a two-column list takes two. Grid would otherwise invent the\n * tracks it was asked for and the list would quietly grow a column nobody\n * declared. Shared with the React binding through the tests that assert the\n * same table, and deliberately not through `@slotted/core`: it is three lines,\n * and a core module exists for arithmetic two bindings would otherwise get\n * *differently* wrong.\n */\nexport function spanWithin(span: number | undefined, columns: number): number | undefined {\n  if (span === undefined) return undefined;\n  const clamped = Math.min(Math.max(Math.trunc(span), 1), columns);\n  return clamped > 1 ? clamped : undefined;\n}\n\n/**\n * Whether a value wants more room than the lines it was given.\n *\n * It compares the height the text wants against the height the clamp allows,\n * rather than comparing the box to itself: `scrollHeight` reports the full\n * content either way, so the answer does not change when the clamp is released\n * and the control does not disappear under the hand that pressed it. A line\n * height CSS cannot resolve — `normal`, or an element with no layout — answers\n * no, which leaves the control absent rather than present and useless.\n *\n * Shared with the React binding through the tests that assert the same table.\n */\nexport function overflowsClamp(scrollHeight: number, lineHeight: number, lines: number): boolean {\n  if (!Number.isFinite(lineHeight) || lineHeight <= 0 || lines <= 0) return false;\n  return scrollHeight > lineHeight * lines + 1;\n}\n\n/**\n * Puts the value under the reader's own selection, which is the one thing left\n * to offer when the platform refuses the clipboard. It returns whether it\n * managed to, so the request can say what actually happened.\n */\nexport function selectValue(node: HTMLElement | null | undefined): boolean {\n  const selection = node?.ownerDocument.defaultView?.getSelection();\n  if (!node || !selection) return false;\n\n  try {\n    selection.removeAllRanges();\n    const range = node.ownerDocument.createRange();\n    range.selectNodeContents(node);\n    selection.addRange(range);\n    return true;\n  } catch {\n    return false;\n  }\n}\n\n/**\n * Putting a value on the clipboard, and saying whether it got there.\n *\n * The two ways and the order they are tried in belong to `@slotted/core`, which\n * is where behaviour the two bindings would otherwise get differently wrong\n * lives: a temporary selection that is not taken back destroys the reader's\n * own, and that is a bug a family would rediscover once per framework (DL1).\n *\n * What is left here is the family's own reading of the answer: the control says\n * it copied whichever way the text went, and says it could not only when both\n * ways were refused.\n */\nexport async function copyToClipboard(value: string): Promise<boolean> {\n  return (await writeToClipboard(value)) !== 'refused';\n}\n\n/**\n * Application-scoped rather than module-scoped, for the reason `field` records:\n * a module-level counter produces colliding sequences when two applications\n * render in one server process, and the server and the client sequences must\n * match for hydration.\n */\n@Injectable({ providedIn: 'root' })\nexport class SlDescriptionListIdFactory {\n  private count = 0;\n\n  next() {\n    this.count += 1;\n    return `slotted-description-list-${this.count}`;\n  }\n}\n","import {\n  afterNextRender,\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  Directive,\n  effect,\n  ElementRef,\n  HostAttributeToken,\n  inject,\n  input,\n  Injector,\n  numberAttribute,\n  output,\n  signal,\n  viewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { injectMessages } from '@slotted/angular/i18n';\nimport { SlGlyph, SlIcon } from '@slotted/angular/icon';\nimport {\n  descriptionListMessages,\n  type DescriptionListMessages,\n  type PartialMessages,\n} from '@slotted/core/i18n';\nimport { getLiveAnnouncer } from '@slotted/core/live-announcer';\nimport { createControllable } from '@slotted/core/state';\nimport type { ChangeRequest } from '@slotted/core/state';\n\nimport {\n  COPIED_FOR,\n  copyToClipboard,\n  DESCRIPTION_LIST_DEFAULT_COLUMNS,\n  DESCRIPTION_LIST_DEFAULT_LAYOUT,\n  DESCRIPTION_LIST_DEFAULT_VARIANT,\n  DESCRIPTION_LIST_EMPTY_VALUE_MARK,\n  injectDescriptionListDefaults,\n  overflowsClamp,\n  selectValue,\n  SlDescriptionListIdFactory,\n  spanWithin,\n  type DescriptionListColumns,\n  type DescriptionListCopyRequest,\n  type DescriptionListLayout,\n  type DescriptionListVariant,\n} from './description-list.constants';\n\n/**\n * Pairs of a term and its description, read rather than edited.\n *\n * **The semantics are the platform's.** `dl`, `dt` and `dd` already carry\n * `list`, `term` and `definition`, so the family writes no role: MDN records\n * that authoring the ARIA `term` and `definition` roles by hand changes how\n * VoiceOver announces the construct.\n *\n * **The `dl` is the component's and the element around it is the consumer's.**\n * An element with `container-type: inline-size` is a query container for its\n * descendants and not for itself, and what the container query changes here is\n * the grid — so the consumer's own element is the container, and the `dl` the\n * component draws inside it is the grid. Every pair a consumer writes is\n * projected into that `dl`.\n */\n@Component({\n  selector: 'div[slDescriptionList]',\n  standalone: true,\n  template: '<dl data-part=\"list\"><ng-content></ng-content></dl>',\n  styleUrls: [\n    '../../../styles/src/description-list/description-list.css',\n    '../../../styles/src/visually-hidden/visually-hidden.css',\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  exportAs: 'slDescriptionList',\n  host: {\n    'data-ui': 'description-list',\n    'data-part': 'root',\n    '[attr.data-layout]': 'layoutValue()',\n    '[attr.data-columns]': 'columnsValue()',\n    '[attr.data-variant]': 'variantValue()',\n    '[style.--slotted-description-list-term-width]': 'termWidthValue() ?? null',\n  },\n})\nexport class SlDescriptionList {\n  readonly layout = input<DescriptionListLayout | undefined>(undefined);\n  readonly columns = input(undefined, { transform: optionalColumns });\n  readonly variant = input<DescriptionListVariant | undefined>(undefined);\n  /** The maximum width of the term column, as a CSS length. */\n  readonly termWidth = input<string | undefined>(undefined);\n  /**\n   * Words laid over the catalog of the language in force, key by key: the\n   * copy control and its announcements, the reveal control, and the sentence\n   * read in place of a missing value.\n   */\n  readonly messages = input<PartialMessages<DescriptionListMessages> | undefined>(undefined);\n\n  private readonly defaults = injectDescriptionListDefaults();\n\n  readonly layoutValue = computed(\n    () => this.layout() ?? this.defaults.layout ?? DESCRIPTION_LIST_DEFAULT_LAYOUT,\n  );\n  readonly columnsValue = computed(\n    () => this.columns() ?? this.defaults.columns ?? DESCRIPTION_LIST_DEFAULT_COLUMNS,\n  );\n  readonly variantValue = computed(\n    () => this.variant() ?? this.defaults.variant ?? DESCRIPTION_LIST_DEFAULT_VARIANT,\n  );\n  readonly termWidthValue = computed(() => this.termWidth() ?? this.defaults.termWidth);\n\n  /** The family's words in the language in force, with this list's `messages` laid over them. */\n  readonly t = injectMessages(descriptionListMessages, this.messages);\n}\n\n/**\n * One name-value pair, and the `div` the HTML Standard permits inside a `dl`.\n *\n * It is the box a rule, a tint and a span apply to, and the only part that can\n * see both the term and the action — so it is where the identifier that ties\n * the two together is made.\n */\n@Directive({\n  selector: 'div[slDescriptionListItem]',\n  standalone: true,\n  exportAs: 'slDescriptionListItem',\n  host: {\n    'data-part': 'item',\n    '[attr.data-span]': 'spanValue()',\n  },\n})\nexport class SlDescriptionListItem {\n  readonly list = inject(SlDescriptionList);\n  readonly span = input(undefined, { transform: optionalColumns });\n\n  /** The `dt`'s identifier, which the row's action is described by. */\n  readonly termId = inject(SlDescriptionListIdFactory).next();\n\n  readonly spanValue = computed(() => spanWithin(this.span(), this.list.columnsValue()) ?? null);\n}\n\n/**\n * The name. It carries an identifier so the row's action can be described by\n * it; a static `id` the consumer wrote wins, because a page that already\n * references this term references it by the name it chose.\n */\n@Directive({\n  selector: 'dt[slDescriptionListTerm]',\n  standalone: true,\n  exportAs: 'slDescriptionListTerm',\n  host: {\n    'data-part': 'term',\n    '[attr.id]': 'identifier',\n  },\n})\nexport class SlDescriptionListTerm {\n  private readonly item = inject(SlDescriptionListItem, { optional: true });\n  private readonly ownId = inject(new HostAttributeToken('id'), { optional: true });\n\n  readonly identifier = this.ownId ?? this.item?.termId ?? null;\n}\n\n/**\n * One line explaining what the term means, inside the `dt` that names it. It is\n * part of the term's own text on purpose: a reader who reaches the term hears\n * the explanation with it, and the row's action — described by the same `dt` —\n * inherits the context rather than repeating it.\n */\n@Directive({\n  selector: '[slDescriptionListHint]',\n  standalone: true,\n  exportAs: 'slDescriptionListHint',\n  host: { 'data-part': 'hint' },\n})\nexport class SlDescriptionListHint {}\n\n/**\n * The value's cell: the value itself, and the controls that reach it.\n *\n * **Clamping is visual only.** Every character stays in the DOM, selectable,\n * copyable and readable by a screen reader, which is what section 10 of the\n * feature guide means by never truncating without access.\n *\n * **Empty is stated rather than inferred.** Angular cannot read projected\n * content without reading the DOM after a render, so the absence of a value is\n * an input here where React reads nullish children. Levelling the two down to\n * the input in both would remove the case that matters most in React — a value\n * missing because the data is missing — to make the two look alike.\n */\n@Component({\n  selector: 'dd[slDescriptionListDescription]',\n  standalone: true,\n  imports: [SlGlyph, SlIcon],\n  template: `\n    <span #value data-part=\"value\">\n      <ng-content></ng-content>\n      @if (empty()) {\n        @if (placeholder()) {\n          <span data-part=\"placeholder\">{{ placeholder() }}</span>\n        } @else {\n          <span aria-hidden=\"true\" data-part=\"placeholder\">{{ emptyMark }}</span>\n          <span data-ui=\"visually-hidden\">{{ placeholderText() }}</span>\n        }\n      }\n    </span>\n    @if (copy()) {\n      <button\n        [attr.aria-label]=\"list.t('copy')\"\n        [attr.data-complete]=\"copied() ? '' : null\"\n        data-part=\"copy\"\n        type=\"button\"\n        (click)=\"onCopy($event)\"\n        (keydown)=\"onKeydown($event)\"\n      >\n        <!-- A finished copy changes its mark as well as its colour. -->\n        <span slIcon><svg slGlyph [name]=\"copied() ? 'check' : 'copy'\"></svg></span>\n      </button>\n    }\n    @if (clampValue() > 0 && overflows()) {\n      <button\n        [attr.aria-expanded]=\"revealed()\"\n        data-part=\"toggle\"\n        type=\"button\"\n        (click)=\"onToggle($event)\"\n        (keydown)=\"onKeydown($event)\"\n      >\n        {{ revealed() ? list.t('collapse') : list.t('reveal') }}\n        <span slIcon><svg slGlyph name=\"chevron-down\"></svg></span>\n      </button>\n    }\n  `,\n  styleUrls: [\n    '../../../styles/src/description-list/description-list.css',\n    '../../../styles/src/visually-hidden/visually-hidden.css',\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  exportAs: 'slDescriptionListDescription',\n  host: {\n    'data-part': 'description',\n    '[attr.data-clamp]': 'clampValue() > 0 ? \"\" : null',\n    '[attr.data-revealed]': 'clampValue() > 0 && revealed() ? \"\" : null',\n    '[style.--slotted-description-list-clamp]': 'clampValue() > 0 ? clampValue() : null',\n  },\n})\nexport class SlDescriptionListDescription {\n  readonly list = inject(SlDescriptionList);\n\n  /** The character a row shows where it has no value. */\n  protected readonly emptyMark = DESCRIPTION_LIST_EMPTY_VALUE_MARK;\n\n  /** Lines the value is held to before it is revealed. `0` never clamps. */\n  readonly clamp = input(0, { transform: (value: number | string) => numberAttribute(value, 0) });\n  /** Draws the control that puts the value on the clipboard. */\n  readonly copy = input(false, { transform: booleanAttribute });\n  /**\n   * The text the control copies. Absent, the rendered text of the value is read\n   * at the moment of the press, which is what a formatted value needs.\n   */\n  readonly copyValue = input<string | undefined>(undefined);\n  /** Draws the placeholder in place of a value that is missing. */\n  readonly empty = input(false, { transform: booleanAttribute });\n  /** What is read in place of that value. */\n  readonly placeholder = input<string | undefined>(undefined);\n\n  /**\n   * Present means controlled, for the life of the component, which is why the\n   * unset value is `undefined` rather than `false`: a family that read `false`\n   * as a consumer's answer would never own its own state.\n   */\n  readonly revealedValue = input(undefined, {\n    alias: 'revealed',\n    transform: (value: boolean | string | undefined) =>\n      value === undefined ? undefined : booleanAttribute(value),\n  });\n  /** What an uncontrolled description starts from, read once. */\n  readonly defaultRevealed = input(false, { transform: booleanAttribute });\n\n  /**\n   * Emitted before the value is revealed, carrying the value it replaces, the\n   * reason and the event it came from. It is not the second half of a two-way\n   * binding: one slot can carry none of those.\n   */\n  readonly revealedChange = output<ChangeRequest<boolean>>();\n  /** Emitted after a copy, whether or not the platform accepted it. */\n  readonly copied$ = output<DescriptionListCopyRequest>({ alias: 'copied' });\n\n  private readonly own = signal(false);\n  private readonly done = signal(false);\n  private readonly overflowing = signal(false);\n  private readonly value = viewChild<ElementRef<HTMLElement>>('value');\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly injector = inject(Injector);\n  private timer: ReturnType<typeof setTimeout> | undefined;\n  private observer: ResizeObserver | undefined;\n  private keyed = false;\n\n  readonly revealed = computed(() => this.revealedValue() ?? this.own());\n  readonly clampValue = computed(() => Math.max(0, Math.trunc(this.clamp())));\n  readonly copied = computed(() => this.done());\n  /** Whether the value wants more room than the clamp gives it. */\n  readonly overflows = computed(() => this.overflowing());\n  readonly placeholderText = computed(() => this.placeholder() ?? this.list.t('placeholder'));\n\n  constructor() {\n    this.own.set(this.defaultRevealed());\n    this.destroyRef.onDestroy(() => {\n      clearTimeout(this.timer);\n      this.observer?.disconnect();\n    });\n\n    /**\n     * A control that reveals nothing is a control a reader presses once and\n     * learns to distrust. A clamp is a maximum rather than a promise: most\n     * values in a panel are shorter than it, and the toggle appears only for\n     * the ones that are not. The value is remeasured whenever its box changes,\n     * which is what the container query does to it at every breakpoint.\n     */\n    afterNextRender(\n      () => {\n        effect(\n          () => {\n            const lines = this.clampValue();\n            const node = this.value()?.nativeElement;\n            this.observer?.disconnect();\n            this.observer = undefined;\n\n            if (lines <= 0 || !node || typeof ResizeObserver === 'undefined') {\n              this.overflowing.set(false);\n              return;\n            }\n\n            const measure = () => {\n              const lineHeight = Number.parseFloat(getComputedStyle(node).lineHeight);\n              this.overflowing.set(overflowsClamp(node.scrollHeight, lineHeight, lines));\n            };\n\n            measure();\n            this.observer = new ResizeObserver(measure);\n            this.observer.observe(node);\n          },\n          { injector: this.injector },\n        );\n      },\n      { injector: this.injector },\n    );\n  }\n\n  /**\n   * `Enter` and `Space` both activate a button and the browser turns each into\n   * a click, so the reason a request carries is decided by whether a key came\n   * first. It is the difference between a press and a key, and a consumer that\n   * has to guess writes the wrong handler.\n   */\n  onKeydown(event: KeyboardEvent) {\n    if (event.key === 'Enter' || event.key === ' ') this.keyed = true;\n  }\n\n  onToggle(event: Event) {\n    const reason = this.takeReason();\n    const state = createControllable<boolean>({\n      controlled: this.revealedValue(),\n      initial: this.revealed(),\n      onRequest: (request) => this.revealedChange.emit(request),\n    });\n    if (state.request(!this.revealed(), reason, event)) this.own.set(!this.own());\n  }\n\n  async onCopy(event: Event) {\n    const reason = this.takeReason();\n    /* Read at the moment of the press rather than at render: a formatted value\n       is what the reader sees, and `copyValue` is for when it is not. */\n    const text = this.copyValue() ?? this.value()?.nativeElement.textContent?.trim() ?? '';\n    const copied = await copyToClipboard(text);\n    let selected = false;\n\n    if (copied) {\n      this.done.set(true);\n      clearTimeout(this.timer);\n      this.timer = setTimeout(() => this.done.set(false), COPIED_FOR);\n      /* Through the shared announcer rather than a region this family owns, so\n         two copies in one update are both heard. */\n      getLiveAnnouncer().announce(this.list.t('copied'));\n    } else {\n      /**\n       * A refused write used to leave the control at rest and the reader with\n       * nothing — which is indistinguishable from a broken button, and is\n       * exactly what a browser does when the document is not focused or the\n       * page is in an iframe carrying no `clipboard-write` permission. So the\n       * family does the part it still can: it selects the value, which the\n       * reader can see and copy with the keyboard, and says so.\n       */\n      selected = selectValue(this.value()?.nativeElement);\n      getLiveAnnouncer().announce(this.list.t('copyBlocked'));\n    }\n\n    this.copied$.emit({ copied, reason, selected, source: event, value: text });\n  }\n\n  private takeReason(): 'pointer' | 'keyboard' {\n    const reason = this.keyed ? 'keyboard' : 'pointer';\n    this.keyed = false;\n    return reason;\n  }\n}\n\n/**\n * The row's own action, in a second `dd` of the same group — which is what a\n * `dt` followed by more than one `dd` is for, and what GOV.UK's summary list\n * does.\n *\n * It is named by its own term through `aria-describedby`, so a reader who\n * reaches \"Change\" out of context hears which row it changes. GOV.UK repeats\n * the term as visually hidden text inside every action, which a template system\n * has to do; a reference says it once and cannot drift. A static\n * `aria-describedby` the consumer wrote is composed with rather than replaced.\n */\n@Directive({\n  selector: 'dd[slDescriptionListAction]',\n  standalone: true,\n  exportAs: 'slDescriptionListAction',\n  host: {\n    'data-part': 'action',\n    '[attr.aria-describedby]': 'describedBy',\n  },\n})\nexport class SlDescriptionListAction {\n  private readonly item = inject(SlDescriptionListItem, { optional: true });\n  private readonly own = inject(new HostAttributeToken('aria-describedby'), { optional: true });\n\n  readonly describedBy = [this.own, this.item?.termId].filter(Boolean).join(' ') || null;\n}\n\n/**\n * Absence has to survive the transform: `numberAttribute` maps an unset input\n * to `NaN`, and a family that read that would stop deferring to the provider.\n */\nfunction optionalColumns(value: DescriptionListColumns | string | undefined) {\n  if (value === undefined || value === null || value === '') return undefined;\n  const parsed = numberAttribute(value);\n  if (!Number.isFinite(parsed)) return undefined;\n  return Math.min(Math.max(Math.trunc(parsed), 1), 3) as DescriptionListColumns;\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-description-list.mjs","sources":["../../description-list/src/description-list.constants.ts","../../description-list/src/description-list.ts","../../description-list/src/slotted-angular-description-list.ts"],"sourcesContent":["import { inject, Injectable, InjectionToken } from '@angular/core';\nimport { writeToClipboard } from '@slotted/core/clipboard';\n\n/** The term beside its value, or above it. */\nexport type DescriptionListLayout = 'row' | 'stack';\n\n/** How many pairs stand side by side before the container narrows. */\nexport type DescriptionListColumns = 1 | 2 | 3;\n\n/** Nothing between pairs, a rule between them, or a framed table. */\nexport type DescriptionListVariant = 'plain' | 'ruled' | 'framed';\n\n/**\n * What happened when a value was copied. It is not a `ChangeRequest`: the\n * clipboard belongs to the platform, so there is no previous value, nothing to\n * cancel, and no state the family holds. The output reports, after the fact,\n * what a consumer may want to log or announce differently.\n */\nexport interface DescriptionListCopyRequest {\n  readonly value: string;\n  readonly reason: 'pointer' | 'keyboard';\n  /** `false` when the platform refused the write or offers no clipboard. */\n  readonly copied: boolean;\n  /**\n   * `true` when the write was refused and the value was selected instead, so\n   * the reader can copy it with the keyboard.\n   */\n  readonly selected: boolean;\n  readonly source?: Event;\n}\n\nexport interface DescriptionListDefaults {\n  columns?: DescriptionListColumns;\n  layout?: DescriptionListLayout;\n  /** The maximum width of the term column, as a CSS length. */\n  termWidth?: string;\n  variant?: DescriptionListVariant;\n}\n\nexport const DESCRIPTION_LIST_DEFAULT_LAYOUT: DescriptionListLayout = 'row';\nexport const DESCRIPTION_LIST_DEFAULT_COLUMNS: DescriptionListColumns = 1;\nexport const DESCRIPTION_LIST_DEFAULT_VARIANT: DescriptionListVariant = 'plain';\n\n/**\n * The mark a row shows where it has no value: an em dash, which is what a table\n * has used for a missing value since tables were set in lead. It is a character\n * and therefore content, which is why it is written in the template and not\n * generated by the stylesheet, and never a hyphen — that is a word joiner, half\n * the width, sitting at a different height (DL2).\n */\nexport const DESCRIPTION_LIST_EMPTY_VALUE_MARK = '\\u2014';\n\n/** How long the copy control says it succeeded before returning to rest. */\nexport const COPIED_FOR = 1500;\n\nexport const DESCRIPTION_LIST_DEFAULTS_TOKEN = new InjectionToken<DescriptionListDefaults>(\n  'slotted description list defaults',\n  { providedIn: 'root', factory: (): DescriptionListDefaults => ({}) },\n);\n\n/**\n * An application decides once how its details panels are arranged. A list\n * that states any of it itself still wins: an explicit input is never\n * overridden by the token. Its words come from the language in force\n * (`provideSlotted`).\n */\nexport function provideDescriptionListDefaults(defaults: DescriptionListDefaults) {\n  return { provide: DESCRIPTION_LIST_DEFAULTS_TOKEN, useValue: defaults };\n}\n\nexport function injectDescriptionListDefaults(): DescriptionListDefaults {\n  return inject(DESCRIPTION_LIST_DEFAULTS_TOKEN);\n}\n\n/**\n * A span is stated in columns and the list may have fewer, so a pair asking for\n * three columns of a two-column list takes two. Grid would otherwise invent the\n * tracks it was asked for and the list would quietly grow a column nobody\n * declared. Shared with the React binding through the tests that assert the\n * same table, and deliberately not through `@slotted/core`: it is three lines,\n * and a core module exists for arithmetic two bindings would otherwise get\n * *differently* wrong.\n */\nexport function spanWithin(span: number | undefined, columns: number): number | undefined {\n  if (span === undefined) return undefined;\n  const clamped = Math.min(Math.max(Math.trunc(span), 1), columns);\n  return clamped > 1 ? clamped : undefined;\n}\n\n/**\n * Whether a value wants more room than the lines it was given.\n *\n * It compares the height the text wants against the height the clamp allows,\n * rather than comparing the box to itself: `scrollHeight` reports the full\n * content either way, so the answer does not change when the clamp is released\n * and the control does not disappear under the hand that pressed it. A line\n * height CSS cannot resolve — `normal`, or an element with no layout — answers\n * no, which leaves the control absent rather than present and useless.\n *\n * Shared with the React binding through the tests that assert the same table.\n */\nexport function overflowsClamp(scrollHeight: number, lineHeight: number, lines: number): boolean {\n  if (!Number.isFinite(lineHeight) || lineHeight <= 0 || lines <= 0) return false;\n  return scrollHeight > lineHeight * lines + 1;\n}\n\n/**\n * Puts the value under the reader's own selection, which is the one thing left\n * to offer when the platform refuses the clipboard. It returns whether it\n * managed to, so the request can say what actually happened.\n */\nexport function selectValue(node: HTMLElement | null | undefined): boolean {\n  const selection = node?.ownerDocument.defaultView?.getSelection();\n  if (!node || !selection) return false;\n\n  try {\n    selection.removeAllRanges();\n    const range = node.ownerDocument.createRange();\n    range.selectNodeContents(node);\n    selection.addRange(range);\n    return true;\n  } catch {\n    return false;\n  }\n}\n\n/**\n * Putting a value on the clipboard, and saying whether it got there.\n *\n * The two ways and the order they are tried in belong to `@slotted/core`, which\n * is where behaviour the two bindings would otherwise get differently wrong\n * lives: a temporary selection that is not taken back destroys the reader's\n * own, and that is a bug a family would rediscover once per framework (DL1).\n *\n * What is left here is the family's own reading of the answer: the control says\n * it copied whichever way the text went, and says it could not only when both\n * ways were refused.\n */\nexport async function copyToClipboard(value: string): Promise<boolean> {\n  return (await writeToClipboard(value)) !== 'refused';\n}\n\n/**\n * Application-scoped rather than module-scoped, for the reason `field` records:\n * a module-level counter produces colliding sequences when two applications\n * render in one server process, and the server and the client sequences must\n * match for hydration.\n */\n@Injectable({ providedIn: 'root' })\nexport class SlDescriptionListIdFactory {\n  private count = 0;\n\n  next() {\n    this.count += 1;\n    return `slotted-description-list-${this.count}`;\n  }\n}\n","import {\n  afterNextRender,\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  Directive,\n  effect,\n  ElementRef,\n  HostAttributeToken,\n  inject,\n  input,\n  Injector,\n  numberAttribute,\n  output,\n  signal,\n  viewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { injectMessages } from '@slotted/angular/i18n';\nimport { SlGlyph, SlIcon } from '@slotted/angular/icon';\nimport {\n  descriptionListMessages,\n  type DescriptionListMessages,\n  type PartialMessages,\n} from '@slotted/core/i18n';\nimport { getLiveAnnouncer } from '@slotted/core/live-announcer';\nimport { createControllable } from '@slotted/core/state';\nimport type { ChangeRequest } from '@slotted/core/state';\n\nimport {\n  COPIED_FOR,\n  copyToClipboard,\n  DESCRIPTION_LIST_DEFAULT_COLUMNS,\n  DESCRIPTION_LIST_DEFAULT_LAYOUT,\n  DESCRIPTION_LIST_DEFAULT_VARIANT,\n  DESCRIPTION_LIST_EMPTY_VALUE_MARK,\n  injectDescriptionListDefaults,\n  overflowsClamp,\n  selectValue,\n  SlDescriptionListIdFactory,\n  spanWithin,\n  type DescriptionListColumns,\n  type DescriptionListCopyRequest,\n  type DescriptionListLayout,\n  type DescriptionListVariant,\n} from './description-list.constants';\n\n/**\n * Pairs of a term and its description, read rather than edited.\n *\n * **The semantics are the platform's.** `dl`, `dt` and `dd` already carry\n * `list`, `term` and `definition`, so the family writes no role: MDN records\n * that authoring the ARIA `term` and `definition` roles by hand changes how\n * VoiceOver announces the construct.\n *\n * **The `dl` is the component's and the element around it is the consumer's.**\n * An element with `container-type: inline-size` is a query container for its\n * descendants and not for itself, and what the container query changes here is\n * the grid — so the consumer's own element is the container, and the `dl` the\n * component draws inside it is the grid. Every pair a consumer writes is\n * projected into that `dl`.\n */\n@Component({\n  selector: 'div[slDescriptionList]',\n  standalone: true,\n  template: '<dl data-part=\"list\" data-part-list=\"\"><ng-content></ng-content></dl>',\n  styleUrls: [\n    '../../../styles/src/description-list/description-list.css',\n    '../../../styles/src/visually-hidden/visually-hidden.css',\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  exportAs: 'slDescriptionList',\n  host: {\n    'data-ui': 'description-list',\n    'data-ui-description-list': '',\n    'data-part': 'root',\n    'data-part-root': '',\n    '[attr.data-layout]': 'layoutValue()',\n    '[attr.data-columns]': 'columnsValue()',\n    '[attr.data-variant]': 'variantValue()',\n    '[style.--slotted-description-list-term-width]': 'termWidthValue() ?? null',\n  },\n})\nexport class SlDescriptionList {\n  readonly layout = input<DescriptionListLayout | undefined>(undefined);\n  readonly columns = input(undefined, { transform: optionalColumns });\n  readonly variant = input<DescriptionListVariant | undefined>(undefined);\n  /** The maximum width of the term column, as a CSS length. */\n  readonly termWidth = input<string | undefined>(undefined);\n  /**\n   * Words laid over the catalog of the language in force, key by key: the\n   * copy control and its announcements, the reveal control, and the sentence\n   * read in place of a missing value.\n   */\n  readonly messages = input<PartialMessages<DescriptionListMessages> | undefined>(undefined);\n\n  private readonly defaults = injectDescriptionListDefaults();\n\n  readonly layoutValue = computed(\n    () => this.layout() ?? this.defaults.layout ?? DESCRIPTION_LIST_DEFAULT_LAYOUT,\n  );\n  readonly columnsValue = computed(\n    () => this.columns() ?? this.defaults.columns ?? DESCRIPTION_LIST_DEFAULT_COLUMNS,\n  );\n  readonly variantValue = computed(\n    () => this.variant() ?? this.defaults.variant ?? DESCRIPTION_LIST_DEFAULT_VARIANT,\n  );\n  readonly termWidthValue = computed(() => this.termWidth() ?? this.defaults.termWidth);\n\n  /** The family's words in the language in force, with this list's `messages` laid over them. */\n  readonly t = injectMessages(descriptionListMessages, this.messages);\n}\n\n/**\n * One name-value pair, and the `div` the HTML Standard permits inside a `dl`.\n *\n * It is the box a rule, a tint and a span apply to, and the only part that can\n * see both the term and the action — so it is where the identifier that ties\n * the two together is made.\n */\n@Directive({\n  selector: 'div[slDescriptionListItem]',\n  standalone: true,\n  exportAs: 'slDescriptionListItem',\n  host: {\n    'data-part': 'item',\n    'data-part-item': '',\n    '[attr.data-span]': 'spanValue()',\n  },\n})\nexport class SlDescriptionListItem {\n  readonly list = inject(SlDescriptionList);\n  readonly span = input(undefined, { transform: optionalColumns });\n\n  /** The `dt`'s identifier, which the row's action is described by. */\n  readonly termId = inject(SlDescriptionListIdFactory).next();\n\n  readonly spanValue = computed(() => spanWithin(this.span(), this.list.columnsValue()) ?? null);\n}\n\n/**\n * The name. It carries an identifier so the row's action can be described by\n * it; a static `id` the consumer wrote wins, because a page that already\n * references this term references it by the name it chose.\n */\n@Directive({\n  selector: 'dt[slDescriptionListTerm]',\n  standalone: true,\n  exportAs: 'slDescriptionListTerm',\n  host: {\n    'data-part': 'term',\n    'data-part-term': '',\n    '[attr.id]': 'identifier',\n  },\n})\nexport class SlDescriptionListTerm {\n  private readonly item = inject(SlDescriptionListItem, { optional: true });\n  private readonly ownId = inject(new HostAttributeToken('id'), { optional: true });\n\n  readonly identifier = this.ownId ?? this.item?.termId ?? null;\n}\n\n/**\n * One line explaining what the term means, inside the `dt` that names it. It is\n * part of the term's own text on purpose: a reader who reaches the term hears\n * the explanation with it, and the row's action — described by the same `dt` —\n * inherits the context rather than repeating it.\n */\n@Directive({\n  selector: '[slDescriptionListHint]',\n  standalone: true,\n  exportAs: 'slDescriptionListHint',\n  host: { 'data-part': 'hint', 'data-part-hint': '' },\n})\nexport class SlDescriptionListHint {}\n\n/**\n * The value's cell: the value itself, and the controls that reach it.\n *\n * **Clamping is visual only.** Every character stays in the DOM, selectable,\n * copyable and readable by a screen reader, which is what section 10 of the\n * feature guide means by never truncating without access.\n *\n * **Empty is stated rather than inferred.** Angular cannot read projected\n * content without reading the DOM after a render, so the absence of a value is\n * an input here where React reads nullish children. Levelling the two down to\n * the input in both would remove the case that matters most in React — a value\n * missing because the data is missing — to make the two look alike.\n */\n@Component({\n  selector: 'dd[slDescriptionListDescription]',\n  standalone: true,\n  imports: [SlGlyph, SlIcon],\n  template: `\n    <span #value data-part=\"value\" data-part-value=\"\">\n      <ng-content></ng-content>\n      @if (empty()) {\n        @if (placeholder()) {\n          <span data-part=\"placeholder\" data-part-placeholder=\"\">{{ placeholder() }}</span>\n        } @else {\n          <span aria-hidden=\"true\" data-part=\"placeholder\" data-part-placeholder=\"\">{{\n            emptyMark\n          }}</span>\n          <span data-ui=\"visually-hidden\" data-ui-visually-hidden=\"\">{{ placeholderText() }}</span>\n        }\n      }\n    </span>\n    @if (copy()) {\n      <button\n        [attr.aria-label]=\"list.t('copy')\"\n        [attr.data-complete]=\"copied() ? '' : null\"\n        data-part=\"copy\"\n        data-part-copy=\"\"\n        type=\"button\"\n        (click)=\"onCopy($event)\"\n        (keydown)=\"onKeydown($event)\"\n      >\n        <!-- A finished copy changes its mark as well as its colour. -->\n        <span slIcon><svg slGlyph [name]=\"copied() ? 'check' : 'copy'\"></svg></span>\n      </button>\n    }\n    @if (clampValue() > 0 && overflows()) {\n      <button\n        [attr.aria-expanded]=\"revealed()\"\n        data-part=\"toggle\"\n        data-part-toggle=\"\"\n        type=\"button\"\n        (click)=\"onToggle($event)\"\n        (keydown)=\"onKeydown($event)\"\n      >\n        {{ revealed() ? list.t('collapse') : list.t('reveal') }}\n        <span slIcon><svg slGlyph name=\"chevron-down\"></svg></span>\n      </button>\n    }\n  `,\n  styleUrls: [\n    '../../../styles/src/description-list/description-list.css',\n    '../../../styles/src/visually-hidden/visually-hidden.css',\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  exportAs: 'slDescriptionListDescription',\n  host: {\n    'data-part': 'description',\n    'data-part-description': '',\n    '[attr.data-clamp]': 'clampValue() > 0 ? \"\" : null',\n    '[attr.data-revealed]': 'clampValue() > 0 && revealed() ? \"\" : null',\n    '[style.--slotted-description-list-clamp]': 'clampValue() > 0 ? clampValue() : null',\n  },\n})\nexport class SlDescriptionListDescription {\n  readonly list = inject(SlDescriptionList);\n\n  /** The character a row shows where it has no value. */\n  protected readonly emptyMark = DESCRIPTION_LIST_EMPTY_VALUE_MARK;\n\n  /** Lines the value is held to before it is revealed. `0` never clamps. */\n  readonly clamp = input(0, { transform: (value: number | string) => numberAttribute(value, 0) });\n  /** Draws the control that puts the value on the clipboard. */\n  readonly copy = input(false, { transform: booleanAttribute });\n  /**\n   * The text the control copies. Absent, the rendered text of the value is read\n   * at the moment of the press, which is what a formatted value needs.\n   */\n  readonly copyValue = input<string | undefined>(undefined);\n  /** Draws the placeholder in place of a value that is missing. */\n  readonly empty = input(false, { transform: booleanAttribute });\n  /** What is read in place of that value. */\n  readonly placeholder = input<string | undefined>(undefined);\n\n  /**\n   * Present means controlled, for the life of the component, which is why the\n   * unset value is `undefined` rather than `false`: a family that read `false`\n   * as a consumer's answer would never own its own state.\n   */\n  readonly revealedValue = input(undefined, {\n    alias: 'revealed',\n    transform: (value: boolean | string | undefined) =>\n      value === undefined ? undefined : booleanAttribute(value),\n  });\n  /** What an uncontrolled description starts from, read once. */\n  readonly defaultRevealed = input(false, { transform: booleanAttribute });\n\n  /**\n   * Emitted before the value is revealed, carrying the value it replaces, the\n   * reason and the event it came from. It is not the second half of a two-way\n   * binding: one slot can carry none of those.\n   */\n  readonly revealedChange = output<ChangeRequest<boolean>>();\n  /** Emitted after a copy, whether or not the platform accepted it. */\n  readonly copied$ = output<DescriptionListCopyRequest>({ alias: 'copied' });\n\n  private readonly own = signal(false);\n  private readonly done = signal(false);\n  private readonly overflowing = signal(false);\n  private readonly value = viewChild<ElementRef<HTMLElement>>('value');\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly injector = inject(Injector);\n  private timer: ReturnType<typeof setTimeout> | undefined;\n  private observer: ResizeObserver | undefined;\n  private keyed = false;\n\n  readonly revealed = computed(() => this.revealedValue() ?? this.own());\n  readonly clampValue = computed(() => Math.max(0, Math.trunc(this.clamp())));\n  readonly copied = computed(() => this.done());\n  /** Whether the value wants more room than the clamp gives it. */\n  readonly overflows = computed(() => this.overflowing());\n  readonly placeholderText = computed(() => this.placeholder() ?? this.list.t('placeholder'));\n\n  constructor() {\n    this.own.set(this.defaultRevealed());\n    this.destroyRef.onDestroy(() => {\n      clearTimeout(this.timer);\n      this.observer?.disconnect();\n    });\n\n    /**\n     * A control that reveals nothing is a control a reader presses once and\n     * learns to distrust. A clamp is a maximum rather than a promise: most\n     * values in a panel are shorter than it, and the toggle appears only for\n     * the ones that are not. The value is remeasured whenever its box changes,\n     * which is what the container query does to it at every breakpoint.\n     */\n    afterNextRender(\n      () => {\n        effect(\n          () => {\n            const lines = this.clampValue();\n            const node = this.value()?.nativeElement;\n            this.observer?.disconnect();\n            this.observer = undefined;\n\n            if (lines <= 0 || !node || typeof ResizeObserver === 'undefined') {\n              this.overflowing.set(false);\n              return;\n            }\n\n            const measure = () => {\n              const lineHeight = Number.parseFloat(getComputedStyle(node).lineHeight);\n              this.overflowing.set(overflowsClamp(node.scrollHeight, lineHeight, lines));\n            };\n\n            measure();\n            this.observer = new ResizeObserver(measure);\n            this.observer.observe(node);\n          },\n          { injector: this.injector },\n        );\n      },\n      { injector: this.injector },\n    );\n  }\n\n  /**\n   * `Enter` and `Space` both activate a button and the browser turns each into\n   * a click, so the reason a request carries is decided by whether a key came\n   * first. It is the difference between a press and a key, and a consumer that\n   * has to guess writes the wrong handler.\n   */\n  onKeydown(event: KeyboardEvent) {\n    if (event.key === 'Enter' || event.key === ' ') this.keyed = true;\n  }\n\n  onToggle(event: Event) {\n    const reason = this.takeReason();\n    const state = createControllable<boolean>({\n      controlled: this.revealedValue(),\n      initial: this.revealed(),\n      onRequest: (request) => this.revealedChange.emit(request),\n    });\n    if (state.request(!this.revealed(), reason, event)) this.own.set(!this.own());\n  }\n\n  async onCopy(event: Event) {\n    const reason = this.takeReason();\n    /* Read at the moment of the press rather than at render: a formatted value\n       is what the reader sees, and `copyValue` is for when it is not. */\n    const text = this.copyValue() ?? this.value()?.nativeElement.textContent?.trim() ?? '';\n    const copied = await copyToClipboard(text);\n    let selected = false;\n\n    if (copied) {\n      this.done.set(true);\n      clearTimeout(this.timer);\n      this.timer = setTimeout(() => this.done.set(false), COPIED_FOR);\n      /* Through the shared announcer rather than a region this family owns, so\n         two copies in one update are both heard. */\n      getLiveAnnouncer().announce(this.list.t('copied'));\n    } else {\n      /**\n       * A refused write used to leave the control at rest and the reader with\n       * nothing — which is indistinguishable from a broken button, and is\n       * exactly what a browser does when the document is not focused or the\n       * page is in an iframe carrying no `clipboard-write` permission. So the\n       * family does the part it still can: it selects the value, which the\n       * reader can see and copy with the keyboard, and says so.\n       */\n      selected = selectValue(this.value()?.nativeElement);\n      getLiveAnnouncer().announce(this.list.t('copyBlocked'));\n    }\n\n    this.copied$.emit({ copied, reason, selected, source: event, value: text });\n  }\n\n  private takeReason(): 'pointer' | 'keyboard' {\n    const reason = this.keyed ? 'keyboard' : 'pointer';\n    this.keyed = false;\n    return reason;\n  }\n}\n\n/**\n * The row's own action, in a second `dd` of the same group — which is what a\n * `dt` followed by more than one `dd` is for, and what GOV.UK's summary list\n * does.\n *\n * It is named by its own term through `aria-describedby`, so a reader who\n * reaches \"Change\" out of context hears which row it changes. GOV.UK repeats\n * the term as visually hidden text inside every action, which a template system\n * has to do; a reference says it once and cannot drift. A static\n * `aria-describedby` the consumer wrote is composed with rather than replaced.\n */\n@Directive({\n  selector: 'dd[slDescriptionListAction]',\n  standalone: true,\n  exportAs: 'slDescriptionListAction',\n  host: {\n    'data-part': 'action',\n    'data-part-action': '',\n    '[attr.aria-describedby]': 'describedBy',\n  },\n})\nexport class SlDescriptionListAction {\n  private readonly item = inject(SlDescriptionListItem, { optional: true });\n  private readonly own = inject(new HostAttributeToken('aria-describedby'), { optional: true });\n\n  readonly describedBy = [this.own, this.item?.termId].filter(Boolean).join(' ') || null;\n}\n\n/**\n * Absence has to survive the transform: `numberAttribute` maps an unset input\n * to `NaN`, and a family that read that would stop deferring to the provider.\n */\nfunction optionalColumns(value: DescriptionListColumns | string | undefined) {\n  if (value === undefined || value === null || value === '') return undefined;\n  const parsed = numberAttribute(value);\n  if (!Number.isFinite(parsed)) return undefined;\n  return Math.min(Math.max(Math.trunc(parsed), 1), 3) as DescriptionListColumns;\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-detail-panel.mjs

@@ -283,7 +283,7 @@ class SlDetailPanel {
         return this.resolvedScroll() === 'self' ? this.native : findScrollParent(this.native);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDetailPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.7", type: SlDetailPanel, isStandalone: true, selector: "[slDetailPanel]", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, aside: { classPropertyName: "aside", publicName: "aside", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, scroll: { classPropertyName: "scroll", publicName: "scroll", isSignal: true, isRequired: false, transformFunction: null }, mount: { classPropertyName: "mount", publicName: "mount", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, recordKey: { classPropertyName: "recordKey", publicName: "recordKey", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { section: "sectionChange", sectionRequest: "sectionRequest" }, host: { attributes: { "data-ui": "detail-panel", "data-part": "root" }, properties: { "attr.data-layout": "resolvedLayout()", "attr.data-aside": "resolvedAside()", "attr.data-level": "resolvedLevel()", "attr.data-size": "resolvedSize()", "attr.data-scroll": "resolvedScroll()", "attr.data-mount": "resolvedMount()", "attr.data-status": "status()", "attr.data-loading": "loading() ? '' : null", "attr.aria-busy": "loading() ? 'true' : null", "attr.data-key": "recordKey() ?? null", "attr.aria-labelledby": "labelledBy()", "attr.aria-label": "label()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.7", type: SlDetailPanel, isStandalone: true, selector: "[slDetailPanel]", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, aside: { classPropertyName: "aside", publicName: "aside", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, scroll: { classPropertyName: "scroll", publicName: "scroll", isSignal: true, isRequired: false, transformFunction: null }, mount: { classPropertyName: "mount", publicName: "mount", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, recordKey: { classPropertyName: "recordKey", publicName: "recordKey", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { section: "sectionChange", sectionRequest: "sectionRequest" }, host: { attributes: { "data-ui": "detail-panel", "data-ui-detail-panel": "", "data-part": "root", "data-part-root": "" }, properties: { "attr.data-layout": "resolvedLayout()", "attr.data-aside": "resolvedAside()", "attr.data-level": "resolvedLevel()", "attr.data-size": "resolvedSize()", "attr.data-scroll": "resolvedScroll()", "attr.data-mount": "resolvedMount()", "attr.data-status": "status()", "attr.data-loading": "loading() ? '' : null", "attr.aria-busy": "loading() ? 'true' : null", "attr.data-key": "recordKey() ?? null", "attr.aria-labelledby": "labelledBy()", "attr.aria-label": "label()" } }, providers: [
             {
                 provide: PAGE_HEADER_DEFAULTS,
                 useFactory: () => {
@@ -307,7 +307,7 @@ class SlDetailPanel {
                     };
                 },
             },
-        ], queries: [{ propertyName: "sections", predicate: SlDetailPanelSection, descendants: true, isSignal: true }], exportAs: ["slDetailPanel"], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@layer slotted.components{[data-ui=detail-panel]{--_text: var(--slotted-text, CanvasText);--_muted: var(--slotted-text-muted, GrayText);--_rule: var(--slotted-detail-panel-border, var(--slotted-border-subtle, ButtonBorder));--_ground: var(--slotted-page-ground, var(--slotted-surface, Canvas));--_aside-size: var(--slotted-detail-panel-aside-size-md, 16rem);--_gap: var(--slotted-detail-panel-gap-md, var(--slotted-space-8, 1.5rem));--_rhythm: var(--slotted-detail-panel-rhythm, var(--slotted-space-8, 1.5rem));--_inset-block: var(--slotted-detail-panel-inset-block-md, var(--slotted-space-8, 1.5rem));--_rule-size: var(--slotted-border-width-thin, 1px);color:var(--_text);container-name:detail-panel;container-type:inline-size;display:flex;flex-direction:column;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);min-inline-size:0;position:relative}[data-ui=detail-panel][data-size=sm]{--_aside-size: var(--slotted-detail-panel-aside-size-sm, 14rem);--_gap: var(--slotted-detail-panel-gap-sm, var(--slotted-space-7, 1.25rem));--_inset-block: var(--slotted-detail-panel-inset-block-sm, var(--slotted-space-7, 1.25rem))}[data-ui=detail-panel][data-size=lg]{--_aside-size: var(--slotted-detail-panel-aside-size-lg, 18rem);--_gap: var(--slotted-detail-panel-gap-lg, var(--slotted-space-9, 2rem));--_inset-block: var(--slotted-detail-panel-inset-block-lg, var(--slotted-space-9, 2rem))}[data-ui=detail-panel][data-scroll=self]{block-size:100%;min-block-size:0;overflow:auto;overscroll-behavior:contain}[data-ui=detail-panel]>[data-part=body]{display:flex;flex:1 0 auto;flex-direction:column;min-inline-size:0;padding-block:var(--_inset-block)}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]{row-gap:var(--_rhythm)}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=banner]{min-inline-size:0}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=columns]{display:grid;gap:var(--_gap);grid-template-columns:minmax(0,1fr);min-inline-size:0}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=columns]>[data-part=main]{display:flex;flex-direction:column;gap:var(--_rhythm);min-inline-size:0}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=columns]>[data-part=aside]{border-block-start:var(--_rule-size) solid var(--_rule);min-inline-size:0;overflow-wrap:anywhere;padding-block-start:var(--_gap)}@container detail-panel (min-width: 600px){[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=columns]{grid-template-columns:minmax(0,1fr) var(--_aside-size)}[data-ui=detail-panel][data-aside=start]>[data-part=body]>[data-ui=container]>[data-part=columns]{grid-template-columns:var(--_aside-size) minmax(0,1fr)}[data-ui=detail-panel][data-aside=none]>[data-part=body]>[data-ui=container]>[data-part=columns]{grid-template-columns:minmax(0,1fr)}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=columns]>[data-part=aside]{border-block-start:0;border-inline-start:var(--_rule-size) solid var(--_rule);padding-block-start:0;padding-inline-start:var(--_gap)}[data-ui=detail-panel][data-aside=start]>[data-part=body]>[data-ui=container]>[data-part=columns]>[data-part=aside]{border-inline-end:var(--_rule-size) solid var(--_rule);border-inline-start:0;order:-1;padding-inline-end:var(--_gap);padding-inline-start:0}}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=columns]>[data-part=main]>[data-part=section]{min-inline-size:0;scroll-margin-block-start:var(--slotted-page-sticky-top, 0px)}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=columns]>[data-part=main]>[data-part=section][hidden]{display:none}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=columns]>[data-part=main]>[data-part=section][role=tabpanel]: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=detail-panel][data-layout=tabs]>[data-part=body]>[data-ui=container]>[data-part=columns]>[data-part=main]>[data-part=section]:not([hidden]){animation:slotted-detail-panel-section-in var(--slotted-duration-short) var(--slotted-easing-enter)}@keyframes slotted-detail-panel-section-in{0%{opacity:0}}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=columns]>[data-part=main]>[data-part=section]>[data-part=section-actions]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--slotted-control-gap-md, 8px);justify-content:flex-end;margin-block-end:var(--slotted-space-5, .75rem)}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=message]{display:grid;min-block-size:calc(4 * var(--slotted-space-12, 4rem));min-inline-size:0;place-items:center}[data-ui=detail-panel]>[data-part=footer]{background-color:var(--_ground);border-block-start:var(--_rule-size) solid var(--_rule);inset-block-end:var(--slotted-page-sticky-bottom, 0px);margin-block-start:auto;padding-block:var(--slotted-space-4, .5rem);position:sticky;z-index:var(--slotted-z-index-sticky, 100)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "sections", predicate: SlDetailPanelSection, descendants: true, isSignal: true }], exportAs: ["slDetailPanel"], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@layer slotted.components{[data-ui-detail-panel]{--_text: var(--slotted-text, CanvasText);--_muted: var(--slotted-text-muted, GrayText);--_rule: var(--slotted-detail-panel-border, var(--slotted-border-subtle, ButtonBorder));--_ground: var(--slotted-page-ground, var(--slotted-surface, Canvas));--_aside-size: var(--slotted-detail-panel-aside-size-md, 16rem);--_gap: var(--slotted-detail-panel-gap-md, var(--slotted-space-8, 1.5rem));--_rhythm: var(--slotted-detail-panel-rhythm, var(--slotted-space-8, 1.5rem));--_inset-block: var(--slotted-detail-panel-inset-block-md, var(--slotted-space-8, 1.5rem));--_rule-size: var(--slotted-border-width-thin, 1px);color:var(--_text);container-name:detail-panel;container-type:inline-size;display:flex;flex-direction:column;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);min-inline-size:0;position:relative}[data-ui-detail-panel][data-size=sm]{--_aside-size: var(--slotted-detail-panel-aside-size-sm, 14rem);--_gap: var(--slotted-detail-panel-gap-sm, var(--slotted-space-7, 1.25rem));--_inset-block: var(--slotted-detail-panel-inset-block-sm, var(--slotted-space-7, 1.25rem))}[data-ui-detail-panel][data-size=lg]{--_aside-size: var(--slotted-detail-panel-aside-size-lg, 18rem);--_gap: var(--slotted-detail-panel-gap-lg, var(--slotted-space-9, 2rem));--_inset-block: var(--slotted-detail-panel-inset-block-lg, var(--slotted-space-9, 2rem))}[data-ui-detail-panel][data-scroll=self]{block-size:100%;min-block-size:0;overflow:auto;overscroll-behavior:contain}[data-ui-detail-panel]>[data-part-body]{display:flex;flex:1 0 auto;flex-direction:column;min-inline-size:0;padding-block:var(--_inset-block)}[data-ui-detail-panel]>[data-part-body]>[data-ui-container]{row-gap:var(--_rhythm)}[data-ui-detail-panel]>[data-part-body]>[data-ui-container]>[data-part-banner]{min-inline-size:0}[data-ui-detail-panel]>[data-part-body]>[data-ui-container]>[data-part-columns]{display:grid;gap:var(--_gap);grid-template-columns:minmax(0,1fr);min-inline-size:0}[data-ui-detail-panel]>[data-part-body]>[data-ui-container]>[data-part-columns]>[data-part-main]{display:flex;flex-direction:column;gap:var(--_rhythm);min-inline-size:0}[data-ui-detail-panel]>[data-part-body]>[data-ui-container]>[data-part-columns]>[data-part-aside]{border-block-start:var(--_rule-size) solid var(--_rule);min-inline-size:0;overflow-wrap:anywhere;padding-block-start:var(--_gap)}@container detail-panel (min-width: 600px){[data-ui-detail-panel]>[data-part-body]>[data-ui-container]>[data-part-columns]{grid-template-columns:minmax(0,1fr) var(--_aside-size)}[data-ui-detail-panel][data-aside=start]>[data-part-body]>[data-ui-container]>[data-part-columns]{grid-template-columns:var(--_aside-size) minmax(0,1fr)}[data-ui-detail-panel][data-aside=none]>[data-part-body]>[data-ui-container]>[data-part-columns]{grid-template-columns:minmax(0,1fr)}[data-ui-detail-panel]>[data-part-body]>[data-ui-container]>[data-part-columns]>[data-part-aside]{border-block-start:0;border-inline-start:var(--_rule-size) solid var(--_rule);padding-block-start:0;padding-inline-start:var(--_gap)}[data-ui-detail-panel][data-aside=start]>[data-part-body]>[data-ui-container]>[data-part-columns]>[data-part-aside]{border-inline-end:var(--_rule-size) solid var(--_rule);border-inline-start:0;order:-1;padding-inline-end:var(--_gap);padding-inline-start:0}}[data-ui-detail-panel]>[data-part-body]>[data-ui-container]>[data-part-columns]>[data-part-main]>[data-part-section]{min-inline-size:0;scroll-margin-block-start:var(--slotted-page-sticky-top, 0px)}[data-ui-detail-panel]>[data-part-body]>[data-ui-container]>[data-part-columns]>[data-part-main]>[data-part-section][hidden]{display:none}[data-ui-detail-panel]>[data-part-body]>[data-ui-container]>[data-part-columns]>[data-part-main]>[data-part-section][role=tabpanel]: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-detail-panel][data-layout=tabs]>[data-part-body]>[data-ui-container]>[data-part-columns]>[data-part-main]>[data-part-section]:not([hidden]){animation:slotted-detail-panel-section-in var(--slotted-duration-short) var(--slotted-easing-enter)}@keyframes slotted-detail-panel-section-in{0%{opacity:0}}[data-ui-detail-panel]>[data-part-body]>[data-ui-container]>[data-part-columns]>[data-part-main]>[data-part-section]>[data-part-section-actions]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--slotted-control-gap-md, 8px);justify-content:flex-end;margin-block-end:var(--slotted-space-5, .75rem)}[data-ui-detail-panel]>[data-part-body]>[data-ui-container]>[data-part-message]{display:grid;min-block-size:calc(4 * var(--slotted-space-12, 4rem));min-inline-size:0;place-items:center}[data-ui-detail-panel]>[data-part-footer]{background-color:var(--_ground);border-block-start:var(--_rule-size) solid var(--_rule);inset-block-end:var(--slotted-page-sticky-bottom, 0px);margin-block-start:auto;padding-block:var(--slotted-space-4, .5rem);position:sticky;z-index:var(--slotted-z-index-sticky, 100)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDetailPanel, decorators: [{
             type: Component,
@@ -337,7 +337,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         },
                     ], host: {
                         'data-ui': 'detail-panel',
+                        'data-ui-detail-panel': '',
                         'data-part': 'root',
+                        'data-part-root': '',
                         '[attr.data-layout]': 'resolvedLayout()',
                         '[attr.data-aside]': 'resolvedAside()',
                         '[attr.data-level]': 'resolvedLevel()',
@@ -350,7 +352,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         '[attr.data-key]': 'recordKey() ?? null',
                         '[attr.aria-labelledby]': 'labelledBy()',
                         '[attr.aria-label]': 'label()',
-                    }, styles: ["@layer slotted.components{[data-ui=detail-panel]{--_text: var(--slotted-text, CanvasText);--_muted: var(--slotted-text-muted, GrayText);--_rule: var(--slotted-detail-panel-border, var(--slotted-border-subtle, ButtonBorder));--_ground: var(--slotted-page-ground, var(--slotted-surface, Canvas));--_aside-size: var(--slotted-detail-panel-aside-size-md, 16rem);--_gap: var(--slotted-detail-panel-gap-md, var(--slotted-space-8, 1.5rem));--_rhythm: var(--slotted-detail-panel-rhythm, var(--slotted-space-8, 1.5rem));--_inset-block: var(--slotted-detail-panel-inset-block-md, var(--slotted-space-8, 1.5rem));--_rule-size: var(--slotted-border-width-thin, 1px);color:var(--_text);container-name:detail-panel;container-type:inline-size;display:flex;flex-direction:column;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);min-inline-size:0;position:relative}[data-ui=detail-panel][data-size=sm]{--_aside-size: var(--slotted-detail-panel-aside-size-sm, 14rem);--_gap: var(--slotted-detail-panel-gap-sm, var(--slotted-space-7, 1.25rem));--_inset-block: var(--slotted-detail-panel-inset-block-sm, var(--slotted-space-7, 1.25rem))}[data-ui=detail-panel][data-size=lg]{--_aside-size: var(--slotted-detail-panel-aside-size-lg, 18rem);--_gap: var(--slotted-detail-panel-gap-lg, var(--slotted-space-9, 2rem));--_inset-block: var(--slotted-detail-panel-inset-block-lg, var(--slotted-space-9, 2rem))}[data-ui=detail-panel][data-scroll=self]{block-size:100%;min-block-size:0;overflow:auto;overscroll-behavior:contain}[data-ui=detail-panel]>[data-part=body]{display:flex;flex:1 0 auto;flex-direction:column;min-inline-size:0;padding-block:var(--_inset-block)}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]{row-gap:var(--_rhythm)}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=banner]{min-inline-size:0}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=columns]{display:grid;gap:var(--_gap);grid-template-columns:minmax(0,1fr);min-inline-size:0}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=columns]>[data-part=main]{display:flex;flex-direction:column;gap:var(--_rhythm);min-inline-size:0}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=columns]>[data-part=aside]{border-block-start:var(--_rule-size) solid var(--_rule);min-inline-size:0;overflow-wrap:anywhere;padding-block-start:var(--_gap)}@container detail-panel (min-width: 600px){[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=columns]{grid-template-columns:minmax(0,1fr) var(--_aside-size)}[data-ui=detail-panel][data-aside=start]>[data-part=body]>[data-ui=container]>[data-part=columns]{grid-template-columns:var(--_aside-size) minmax(0,1fr)}[data-ui=detail-panel][data-aside=none]>[data-part=body]>[data-ui=container]>[data-part=columns]{grid-template-columns:minmax(0,1fr)}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=columns]>[data-part=aside]{border-block-start:0;border-inline-start:var(--_rule-size) solid var(--_rule);padding-block-start:0;padding-inline-start:var(--_gap)}[data-ui=detail-panel][data-aside=start]>[data-part=body]>[data-ui=container]>[data-part=columns]>[data-part=aside]{border-inline-end:var(--_rule-size) solid var(--_rule);border-inline-start:0;order:-1;padding-inline-end:var(--_gap);padding-inline-start:0}}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=columns]>[data-part=main]>[data-part=section]{min-inline-size:0;scroll-margin-block-start:var(--slotted-page-sticky-top, 0px)}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=columns]>[data-part=main]>[data-part=section][hidden]{display:none}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=columns]>[data-part=main]>[data-part=section][role=tabpanel]: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=detail-panel][data-layout=tabs]>[data-part=body]>[data-ui=container]>[data-part=columns]>[data-part=main]>[data-part=section]:not([hidden]){animation:slotted-detail-panel-section-in var(--slotted-duration-short) var(--slotted-easing-enter)}@keyframes slotted-detail-panel-section-in{0%{opacity:0}}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=columns]>[data-part=main]>[data-part=section]>[data-part=section-actions]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--slotted-control-gap-md, 8px);justify-content:flex-end;margin-block-end:var(--slotted-space-5, .75rem)}[data-ui=detail-panel]>[data-part=body]>[data-ui=container]>[data-part=message]{display:grid;min-block-size:calc(4 * var(--slotted-space-12, 4rem));min-inline-size:0;place-items:center}[data-ui=detail-panel]>[data-part=footer]{background-color:var(--_ground);border-block-start:var(--_rule-size) solid var(--_rule);inset-block-end:var(--slotted-page-sticky-bottom, 0px);margin-block-start:auto;padding-block:var(--slotted-space-4, .5rem);position:sticky;z-index:var(--slotted-z-index-sticky, 100)}}\n"] }]
+                    }, styles: ["@layer slotted.components{[data-ui-detail-panel]{--_text: var(--slotted-text, CanvasText);--_muted: var(--slotted-text-muted, GrayText);--_rule: var(--slotted-detail-panel-border, var(--slotted-border-subtle, ButtonBorder));--_ground: var(--slotted-page-ground, var(--slotted-surface, Canvas));--_aside-size: var(--slotted-detail-panel-aside-size-md, 16rem);--_gap: var(--slotted-detail-panel-gap-md, var(--slotted-space-8, 1.5rem));--_rhythm: var(--slotted-detail-panel-rhythm, var(--slotted-space-8, 1.5rem));--_inset-block: var(--slotted-detail-panel-inset-block-md, var(--slotted-space-8, 1.5rem));--_rule-size: var(--slotted-border-width-thin, 1px);color:var(--_text);container-name:detail-panel;container-type:inline-size;display:flex;flex-direction:column;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);min-inline-size:0;position:relative}[data-ui-detail-panel][data-size=sm]{--_aside-size: var(--slotted-detail-panel-aside-size-sm, 14rem);--_gap: var(--slotted-detail-panel-gap-sm, var(--slotted-space-7, 1.25rem));--_inset-block: var(--slotted-detail-panel-inset-block-sm, var(--slotted-space-7, 1.25rem))}[data-ui-detail-panel][data-size=lg]{--_aside-size: var(--slotted-detail-panel-aside-size-lg, 18rem);--_gap: var(--slotted-detail-panel-gap-lg, var(--slotted-space-9, 2rem));--_inset-block: var(--slotted-detail-panel-inset-block-lg, var(--slotted-space-9, 2rem))}[data-ui-detail-panel][data-scroll=self]{block-size:100%;min-block-size:0;overflow:auto;overscroll-behavior:contain}[data-ui-detail-panel]>[data-part-body]{display:flex;flex:1 0 auto;flex-direction:column;min-inline-size:0;padding-block:var(--_inset-block)}[data-ui-detail-panel]>[data-part-body]>[data-ui-container]{row-gap:var(--_rhythm)}[data-ui-detail-panel]>[data-part-body]>[data-ui-container]>[data-part-banner]{min-inline-size:0}[data-ui-detail-panel]>[data-part-body]>[data-ui-container]>[data-part-columns]{display:grid;gap:var(--_gap);grid-template-columns:minmax(0,1fr);min-inline-size:0}[data-ui-detail-panel]>[data-part-body]>[data-ui-container]>[data-part-columns]>[data-part-main]{display:flex;flex-direction:column;gap:var(--_rhythm);min-inline-size:0}[data-ui-detail-panel]>[data-part-body]>[data-ui-container]>[data-part-columns]>[data-part-aside]{border-block-start:var(--_rule-size) solid var(--_rule);min-inline-size:0;overflow-wrap:anywhere;padding-block-start:var(--_gap)}@container detail-panel (min-width: 600px){[data-ui-detail-panel]>[data-part-body]>[data-ui-container]>[data-part-columns]{grid-template-columns:minmax(0,1fr) var(--_aside-size)}[data-ui-detail-panel][data-aside=start]>[data-part-body]>[data-ui-container]>[data-part-columns]{grid-template-columns:var(--_aside-size) minmax(0,1fr)}[data-ui-detail-panel][data-aside=none]>[data-part-body]>[data-ui-container]>[data-part-columns]{grid-template-columns:minmax(0,1fr)}[data-ui-detail-panel]>[data-part-body]>[data-ui-container]>[data-part-columns]>[data-part-aside]{border-block-start:0;border-inline-start:var(--_rule-size) solid var(--_rule);padding-block-start:0;padding-inline-start:var(--_gap)}[data-ui-detail-panel][data-aside=start]>[data-part-body]>[data-ui-container]>[data-part-columns]>[data-part-aside]{border-inline-end:var(--_rule-size) solid var(--_rule);border-inline-start:0;order:-1;padding-inline-end:var(--_gap);padding-inline-start:0}}[data-ui-detail-panel]>[data-part-body]>[data-ui-container]>[data-part-columns]>[data-part-main]>[data-part-section]{min-inline-size:0;scroll-margin-block-start:var(--slotted-page-sticky-top, 0px)}[data-ui-detail-panel]>[data-part-body]>[data-ui-container]>[data-part-columns]>[data-part-main]>[data-part-section][hidden]{display:none}[data-ui-detail-panel]>[data-part-body]>[data-ui-container]>[data-part-columns]>[data-part-main]>[data-part-section][role=tabpanel]: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-detail-panel][data-layout=tabs]>[data-part-body]>[data-ui-container]>[data-part-columns]>[data-part-main]>[data-part-section]:not([hidden]){animation:slotted-detail-panel-section-in var(--slotted-duration-short) var(--slotted-easing-enter)}@keyframes slotted-detail-panel-section-in{0%{opacity:0}}[data-ui-detail-panel]>[data-part-body]>[data-ui-container]>[data-part-columns]>[data-part-main]>[data-part-section]>[data-part-section-actions]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--slotted-control-gap-md, 8px);justify-content:flex-end;margin-block-end:var(--slotted-space-5, .75rem)}[data-ui-detail-panel]>[data-part-body]>[data-ui-container]>[data-part-message]{display:grid;min-block-size:calc(4 * var(--slotted-space-12, 4rem));min-inline-size:0;place-items:center}[data-ui-detail-panel]>[data-part-footer]{background-color:var(--_ground);border-block-start:var(--_rule-size) solid var(--_rule);inset-block-end:var(--slotted-page-sticky-bottom, 0px);margin-block-start:auto;padding-block:var(--slotted-space-4, .5rem);position:sticky;z-index:var(--slotted-z-index-sticky, 100)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], aside: [{ type: i0.Input, args: [{ isSignal: true, alias: "aside", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], scroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroll", required: false }] }], mount: [{ type: i0.Input, args: [{ isSignal: true, alias: "mount", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], recordKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "recordKey", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], section: [{ type: i0.Input, args: [{ isSignal: true, alias: "section", required: false }] }, { type: i0.Output, args: ["sectionChange"] }], sectionRequest: [{ type: i0.Output, args: ["sectionRequest"] }], sections: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SlDetailPanelSection), { ...{ descendants: true }, isSignal: true }] }] } });
 
 /** How many placeholder lines a waiting section and a waiting aside draw. */
@@ -359,23 +361,27 @@ const ASIDE_SKELETON_LINES = 4;
 /** An alert about the record, above the columns. */
 class SlDetailPanelBanner {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDetailPanelBanner, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDetailPanelBanner, isStandalone: true, selector: "[slDetailPanelBanner]", host: { attributes: { "data-part": "banner" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDetailPanelBanner, isStandalone: true, selector: "[slDetailPanelBanner]", host: { attributes: { "data-part": "banner", "data-part-banner": "" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDetailPanelBanner, decorators: [{
             type: Directive,
-            args: [{ selector: '[slDetailPanelBanner]', standalone: true, host: { 'data-part': 'banner' } }]
+            args: [{
+                    selector: '[slDetailPanelBanner]',
+                    standalone: true,
+                    host: { 'data-part': 'banner', 'data-part-banner': '' },
+                }]
         }] });
 /** What stands in place of the columns when the record is not there: a result-state. */
 class SlDetailPanelMessage {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDetailPanelMessage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDetailPanelMessage, isStandalone: true, selector: "[slDetailPanelMessage]", host: { attributes: { "data-part": "message" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDetailPanelMessage, isStandalone: true, selector: "[slDetailPanelMessage]", host: { attributes: { "data-part": "message", "data-part-message": "" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDetailPanelMessage, decorators: [{
             type: Directive,
             args: [{
                     selector: '[slDetailPanelMessage]',
                     standalone: true,
-                    host: { 'data-part': 'message' },
+                    host: { 'data-part': 'message', 'data-part-message': '' },
                 }]
         }] });
 /**
@@ -390,7 +396,7 @@ class SlDetailPanelAside {
     name = computed(() => this.written ?? this.panel.t('aside'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDetailPanelAside, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlDetailPanelAside, isStandalone: true, selector: "aside[slDetailPanelAside]", host: { attributes: { "data-part": "aside" }, properties: { "attr.aria-label": "name()" } }, exportAs: ["slDetailPanelAside"], ngImport: i0, template: `@if (panel.loading()) {
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlDetailPanelAside, isStandalone: true, selector: "aside[slDetailPanelAside]", host: { attributes: { "data-part": "aside", "data-part-aside": "" }, properties: { "attr.aria-label": "name()" } }, exportAs: ["slDetailPanelAside"], ngImport: i0, template: `@if (panel.loading()) {
       <span slSkeletonText [lines]="lines" inlineSize="60%"></span>
     } @else {
       <ng-content />
@@ -412,6 +418,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     host: {
                         'data-part': 'aside',
+                        'data-part-aside': '',
                         '[attr.aria-label]': 'name()',
                     },
                 }]
@@ -423,7 +430,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
 class SlDetailPanelFooter {
     page = inject(SlPage, { optional: true });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDetailPanelFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlDetailPanelFooter, isStandalone: true, selector: "footer[slDetailPanelFooter]", host: { attributes: { "data-part": "footer" } }, exportAs: ["slDetailPanelFooter"], ngImport: i0, template: `<div slContainer [size]="page?.resolvedWidth()" [inset]="page?.resolvedInset()">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlDetailPanelFooter, isStandalone: true, selector: "footer[slDetailPanelFooter]", host: { attributes: { "data-part": "footer", "data-part-footer": "" } }, exportAs: ["slDetailPanelFooter"], ngImport: i0, template: `<div slContainer [size]="page?.resolvedWidth()" [inset]="page?.resolvedInset()">
     <ng-content />
   </div>`, isInline: true, dependencies: [{ kind: "component", type: SlContainer, selector: "[slContainer]", inputs: ["size", "inset", "align"], exportAs: ["slContainer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
@@ -439,7 +446,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
   </div>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    host: { 'data-part': 'footer' },
+                    host: { 'data-part': 'footer', 'data-part-footer': '' },
                 }]
         }] });
 /**
@@ -476,15 +483,16 @@ class SlDetailPanelBody {
         return mount === 'lazy' && this.panel.hasSeen(name);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDetailPanelBody, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlDetailPanelBody, isStandalone: true, selector: "[slDetailPanelBody]", host: { attributes: { "data-part": "body" } }, queries: [{ propertyName: "aside", first: true, predicate: SlDetailPanelAside, descendants: true, isSignal: true }], exportAs: ["slDetailPanelBody"], ngImport: i0, template: `<div slContainer [size]="page?.resolvedWidth()" [inset]="page?.resolvedInset()">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlDetailPanelBody, isStandalone: true, selector: "[slDetailPanelBody]", host: { attributes: { "data-part": "body", "data-part-body": "" } }, queries: [{ propertyName: "aside", first: true, predicate: SlDetailPanelAside, descendants: true, isSignal: true }], exportAs: ["slDetailPanelBody"], ngImport: i0, template: `<div slContainer [size]="page?.resolvedWidth()" [inset]="page?.resolvedInset()">
     <ng-content select="[slDetailPanelBanner]" />
     @if (panel.status() === 'ready') {
-      <div data-part="columns">
-        <div data-part="main">
+      <div data-part="columns" data-part-columns="">
+        <div data-part="main" data-part-main="">
           @for (section of panel.sections(); track section.name()) {
             @if (tabbed()) {
               <div
                 data-part="section"
+                data-part-section=""
                 role="tabpanel"
                 tabindex="0"
                 [attr.id]="identity(section.name())?.panelId"
@@ -494,7 +502,7 @@ class SlDetailPanelBody {
                 [hidden]="panel.current() !== section.name()"
               >
                 @if (section.actions(); as actions) {
-                  <div data-part="section-actions">
+                  <div data-part="section-actions" data-part-section-actions="">
                     <ng-container *ngTemplateOutlet="actions" />
                   </div>
                 }
@@ -509,6 +517,7 @@ class SlDetailPanelBody {
             } @else {
               <div
                 data-part="section"
+                data-part-section=""
                 [attr.data-name]="section.name()"
                 [attr.data-current]="panel.current() === section.name() ? '' : null"
               >
@@ -577,12 +586,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     template: `<div slContainer [size]="page?.resolvedWidth()" [inset]="page?.resolvedInset()">
     <ng-content select="[slDetailPanelBanner]" />
     @if (panel.status() === 'ready') {
-      <div data-part="columns">
-        <div data-part="main">
+      <div data-part="columns" data-part-columns="">
+        <div data-part="main" data-part-main="">
           @for (section of panel.sections(); track section.name()) {
             @if (tabbed()) {
               <div
                 data-part="section"
+                data-part-section=""
                 role="tabpanel"
                 tabindex="0"
                 [attr.id]="identity(section.name())?.panelId"
@@ -592,7 +602,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 [hidden]="panel.current() !== section.name()"
               >
                 @if (section.actions(); as actions) {
-                  <div data-part="section-actions">
+                  <div data-part="section-actions" data-part-section-actions="">
                     <ng-container *ngTemplateOutlet="actions" />
                   </div>
                 }
@@ -607,6 +617,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
             } @else {
               <div
                 data-part="section"
+                data-part-section=""
                 [attr.data-name]="section.name()"
                 [attr.data-current]="panel.current() === section.name() ? '' : null"
               >
@@ -655,7 +666,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
   </div>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    host: { 'data-part': 'body' },
+                    host: { 'data-part': 'body', 'data-part-body': '' },
                 }]
         }], propDecorators: { aside: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlDetailPanelAside), { isSignal: true }] }] } });
 /**