@slotted/angular 0.1.0-beta.3 → 0.1.0-beta.5

package/fesm2022/slotted-angular-scroll-area.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"slotted-angular-scroll-area.mjs","sources":["../../scroll-area/src/scroll-area-defaults.ts","../../scroll-area/src/scroll-area.ts","../../scroll-area/src/slotted-angular-scroll-area.ts"],"sourcesContent":["import { inject, InjectionToken } from '@angular/core';\n\n/** Which axes scroll. Logical, so a vertical writing mode needs no second vocabulary. */\nexport type ScrollAreaAxis = 'block' | 'inline' | 'both';\n\n/**\n * What the scrollbar does. `auto` is `overflow: auto`; `always` is\n * `overflow: scroll`; `hover` paints the bar transparent until a pointer or the\n * keyboard is inside; `none` removes the bar and leaves the scrolling.\n *\n * `scroll` — visible only while scrolling, which Radix and Mantine both ship —\n * is folded into `hover`, because it is what a platform overlay scrollbar\n * already does on its own.\n */\nexport type ScrollAreaScrollbars = 'auto' | 'always' | 'hover' | 'none';\n\n/** `scrollbar-gutter`, and `stable` is the default because content that shifts is the defect. */\nexport type ScrollAreaGutter = 'auto' | 'stable' | 'both-edges';\n\n/**\n * Where the veil is drawn. `both` dims what the reader has passed as well as\n * what is ahead; `end` only what is ahead; `none` leaves the scrollbar to say\n * there is more.\n */\nexport type ScrollAreaFade = 'both' | 'end' | 'none';\n\n/** `overscroll-behavior`, and `contain` is the default. */\nexport type ScrollAreaOverscroll = 'contain' | 'auto' | 'none';\n\nexport interface ScrollAreaDefaults {\n  axis: ScrollAreaAxis;\n  scrollbars: ScrollAreaScrollbars;\n  gutter: ScrollAreaGutter;\n  fade: ScrollAreaFade;\n  overscroll: ScrollAreaOverscroll;\n}\n\nconst FALLBACK: ScrollAreaDefaults = {\n  axis: 'block',\n  fade: 'both',\n  gutter: 'stable',\n  overscroll: 'contain',\n  scrollbars: 'auto',\n};\n\nexport const SCROLL_AREA_DEFAULTS = new InjectionToken<ScrollAreaDefaults>(\n  'slotted scroll-area defaults',\n  { providedIn: 'root', factory: () => FALLBACK },\n);\n\n/**\n * An application decides once what its scroll areas look like — whether the\n * bar waits for a hand, whether the veil dims both ends — rather than repeating\n * it on fifty of them. A region's name comes from the language in force\n * (`provideSlotted`).\n *\n * None of the five surveyed implementations has an equivalent: each takes its\n * policy per instance, and Mantine's `type` in particular is written on every\n * call site of every product that uses it.\n */\nexport function provideScrollAreaDefaults(defaults: Partial<ScrollAreaDefaults>) {\n  return {\n    provide: SCROLL_AREA_DEFAULTS,\n    useFactory: (): ScrollAreaDefaults => ({ ...FALLBACK, ...defaults }),\n  };\n}\n\n/** What a scroll area is here, before it states anything of its own. */\nexport function injectScrollAreaDefaults(): ScrollAreaDefaults {\n  return inject(SCROLL_AREA_DEFAULTS);\n}\n","import {\n  createScrollEdges,\n  NO_SCROLL_EDGES,\n  scrollEdgeAttributes,\n  type LogicalEdge,\n  type ScrollEdgesHandle,\n  type ScrollEdgesState,\n  type ScrollPosition,\n} from '@slotted/core/overflow';\nimport {\n  afterNextRender,\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  Directive,\n  ElementRef,\n  inject,\n  input,\n  output,\n  signal,\n  viewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { injectMessages } from '@slotted/angular/i18n';\nimport {\n  scrollAreaMessages,\n  type PartialMessages,\n  type ScrollAreaMessages,\n} from '@slotted/core/i18n';\n\nimport { injectScrollAreaDefaults } from './scroll-area-defaults';\nimport type {\n  ScrollAreaAxis,\n  ScrollAreaFade,\n  ScrollAreaGutter,\n  ScrollAreaOverscroll,\n  ScrollAreaScrollbars,\n} from './scroll-area-defaults';\n\n/** What `scrollChange` carries: where the scroller is, and the event that moved it. */\nexport interface ScrollAreaScrollEvent {\n  readonly position: ScrollPosition;\n  readonly source: Event;\n}\n\n/**\n * A scrollport, and the box that frames it.\n *\n * The scrollbar is the platform's, themed by the stylesheet through\n * `scrollbar-color`; the keyboard is the platform's too. What this component\n * adds is the measurement of whether the content overflows and which of its\n * ends show, published on the frame for CSS and emitted to the consumer, and\n * the tab stop a scrolling region owes a keyboard together with the name that\n * tab stop owes a screen reader — both written only while the content actually\n * overflows, which is the pattern `prose` shipped first for one block inside a\n * document.\n *\n * The frame is the consumer's own element — `<div slScrollArea>` — and the\n * scrollport is the component's, projected into: the frame is where a border,\n * a radius and a ground go, and the scrollport is the element the veil is on.\n * A consumer's own attributes on the host are never written over, because the\n * family writes its role, its tab stop and its name on an element it owns.\n *\n * The scroll position is never held. The browser moves it on a wheel, a\n * fling, a `Tab` into a child, an anchor navigation and a printed page, and a\n * consumer holding the value would have to accept every one of those or fight\n * the platform. It is emitted, and the instance moves it.\n */\n@Component({\n  selector: '[slScrollArea]',\n  standalone: true,\n  exportAs: 'slScrollArea',\n  template: `\n    <div\n      #viewport\n      data-part=\"viewport\"\n      [attr.role]=\"wired() ? 'region' : null\"\n      [attr.tabindex]=\"wired() ? '0' : null\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-labelledby]=\"ariaLabelledBy()\"\n      (scroll)=\"onScroll($event)\"\n    >\n      <ng-content />\n    </div>\n  `,\n  styleUrl: '../../../styles/src/scroll-area/scroll-area.css',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-ui': 'scroll-area',\n    'data-part': 'root',\n    '[attr.data-axis]': 'resolvedAxis()',\n    '[attr.data-scrollbars]': 'resolvedScrollbars()',\n    '[attr.data-gutter]': 'resolvedGutter()',\n    '[attr.data-fade]': 'resolvedFade()',\n    '[attr.data-overscroll]': 'resolvedOverscroll()',\n    '[attr.data-overflowing]': \"edgeAttributes()['data-overflowing'] ?? null\",\n    '[attr.data-at-block-start]': \"edgeAttributes()['data-at-block-start'] ?? null\",\n    '[attr.data-at-block-end]': \"edgeAttributes()['data-at-block-end'] ?? null\",\n    '[attr.data-at-inline-start]': \"edgeAttributes()['data-at-inline-start'] ?? null\",\n    '[attr.data-at-inline-end]': \"edgeAttributes()['data-at-inline-end'] ?? null\",\n    '[attr.data-sideways]': \"sideways() ? '' : null\",\n    '[style.max-block-size]': 'maxBlockSize() ?? null',\n    '[style.max-inline-size]': 'maxInlineSize() ?? null',\n  },\n})\nexport class SlScrollArea {\n  readonly axis = input<ScrollAreaAxis | undefined>(undefined);\n  readonly scrollbars = input<ScrollAreaScrollbars | undefined>(undefined);\n  readonly gutter = input<ScrollAreaGutter | undefined>(undefined);\n  readonly fade = input<ScrollAreaFade | undefined>(undefined);\n  readonly overscroll = input<ScrollAreaOverscroll | undefined>(undefined);\n\n  /**\n   * Scroll only past this size, as any CSS length. It is Mantine's\n   * `ScrollArea.Autosize` as one binding rather than a second component.\n   */\n  readonly maxBlockSize = input<string | undefined>(undefined);\n  readonly maxInlineSize = input<string | undefined>(undefined);\n\n  /**\n   * Whether the scrollport joins the tab sequence while it overflows.\n   *\n   * On by default, because content that scrolls has to be scrollable by\n   * keyboard and a scrollport with no tab stop is not — unless a child of it\n   * already takes focus. A consumer who knows the content is reachable another\n   * way turns it off and carries the reason.\n   */\n  readonly tabbable = input(true, { transform: booleanAttribute });\n\n  /**\n   * The name the region is announced by. Resolved in one order: `labelledBy`,\n   * then `messages.label`, then the catalog of the language in force.\n   */\n  readonly labelledBy = input<string | undefined>(undefined);\n  /** Words laid over the catalog of the language in force: the region's name (`label`). */\n  readonly messages = input<PartialMessages<ScrollAreaMessages> | undefined>(undefined);\n\n  /**\n   * The position, as a distance from each logical start, on every scroll. It\n   * is a report and not a request: the browser moves the position on a wheel,\n   * a fling, a `Tab` into a child and a printed page, and a consumer holding it\n   * would have to accept every one of those.\n   */\n  readonly scrollChange = output<ScrollAreaScrollEvent>();\n\n  /** The measurement, and only a new one: which axes overflow, and which ends show. */\n  readonly overflowChange = output<ScrollEdgesState>();\n\n  private readonly defaults = injectScrollAreaDefaults();\n  /** The family's words in the language in force, with this area's `messages` laid over them. */\n  readonly t = injectMessages(scrollAreaMessages, this.messages);\n  private readonly element = inject(ElementRef<HTMLElement>).nativeElement as HTMLElement;\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly viewportRef = viewChild.required<ElementRef<HTMLElement>>('viewport');\n\n  /**\n   * The measurement, as a signal, so the attributes it becomes are rendered.\n   * Before the first render it is the state of content that fits — four ends\n   * showing and nothing overflowing — which paints no veil and writes no tab\n   * stop, so a server render and its hydration agree and the veil does not\n   * flash on before the browser has said whether there is anything behind it.\n   */\n  private readonly measured = signal<ScrollEdgesState>(NO_SCROLL_EDGES);\n  protected readonly sideways = signal(false);\n  private edges: ScrollEdgesHandle | null = null;\n\n  protected readonly resolvedAxis = computed(() => this.axis() ?? this.defaults.axis);\n  protected readonly resolvedScrollbars = computed(\n    () => this.scrollbars() ?? this.defaults.scrollbars,\n  );\n  protected readonly resolvedGutter = computed(() => this.gutter() ?? this.defaults.gutter);\n  protected readonly resolvedFade = computed(() => this.fade() ?? this.defaults.fade);\n  protected readonly resolvedOverscroll = computed(\n    () => this.overscroll() ?? this.defaults.overscroll,\n  );\n\n  protected readonly edgeAttributes = computed(() => scrollEdgeAttributes(this.measured()));\n\n  protected readonly overflowing = computed(() => {\n    const state = this.measured();\n    return state.block.overflowing || state.inline.overflowing;\n  });\n  protected readonly wired = computed(() => this.overflowing() && this.tabbable());\n  protected readonly ariaLabelledBy = computed(() =>\n    this.wired() ? (this.labelledBy() ?? null) : null,\n  );\n  protected readonly ariaLabel = computed(() => {\n    if (!this.wired() || this.labelledBy() !== undefined) return null;\n    return this.t('label');\n  });\n\n  constructor() {\n    /**\n     * After the first render and only in a browser: Angular builds the\n     * component during a server render too, and there is nothing to measure\n     * there. The wiring appears at the first moment a browser can say whether\n     * the content overflows at all.\n     */\n    afterNextRender(() => {\n      const viewport = this.viewportRef().nativeElement;\n      const handle = createScrollEdges(viewport, {\n        onChange: (next) => {\n          this.measured.set(next);\n          if (this.edges !== null) this.sideways.set(this.edges.sideways());\n          this.overflowChange.emit(next);\n        },\n      });\n      this.edges = handle;\n      this.measured.set(handle.state());\n      this.sideways.set(handle.sideways());\n    });\n\n    this.destroyRef.onDestroy(() => {\n      this.edges?.destroy();\n      this.edges = null;\n    });\n  }\n\n  /** The frame: the consumer's own element. */\n  get root(): HTMLElement {\n    return this.element;\n  }\n\n  /** The scrollport: the element that scrolls and takes focus. */\n  get viewport(): HTMLElement {\n    return this.viewportRef().nativeElement;\n  }\n\n  /** The last measurement: whether each axis overflows, and which of its ends show. */\n  state(): ScrollEdgesState {\n    return this.edges?.state() ?? NO_SCROLL_EDGES;\n  }\n\n  /** The distance from each logical start, read now. */\n  position(): ScrollPosition {\n    return this.edges?.position() ?? { block: 0, inline: 0 };\n  }\n\n  /** Moves to a logical position. An axis left out is an axis left alone. */\n  scrollTo(target: Partial<ScrollPosition>): void {\n    this.edges?.scrollTo(target);\n  }\n\n  /** Moves to one end of one axis. */\n  scrollToEdge(edge: LogicalEdge): void {\n    this.edges?.scrollToEdge(edge);\n  }\n\n  /** Brings one element into view by the shortest movement that does it, without moving anything else. */\n  reveal(element: Element): void {\n    this.edges?.reveal(element);\n  }\n\n  /** Measures again, after content the observer could not see changed. */\n  refresh(): void {\n    this.edges?.refresh();\n  }\n\n  /** Moves focus to the scrollport. */\n  focus(): void {\n    this.viewport.focus();\n  }\n\n  protected onScroll(event: Event) {\n    if (this.edges === null) return;\n    this.scrollChange.emit({ position: this.edges.position(), source: event });\n  }\n}\n\n/**\n * The inset that scrolls with the content.\n *\n * Padding on a scrollport is not applied at the end edge of its scrollable\n * overflow in every engine, so an inset that has to survive a scroll to the\n * end goes on an element inside it. The family states no inset of its own: the\n * directive exists to give the consumer's one a place to live, on the\n * consumer's own element, and an area whose content already carries its own\n * inset uses no `slScrollAreaContent` at all.\n */\n@Directive({\n  selector: '[slScrollAreaContent]',\n  standalone: true,\n  exportAs: 'slScrollAreaContent',\n  host: { 'data-part': 'content' },\n})\nexport class SlScrollAreaContent {}\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-scroll-area.mjs","sources":["../../scroll-area/src/scroll-area-defaults.ts","../../scroll-area/src/scroll-area.ts","../../scroll-area/src/slotted-angular-scroll-area.ts"],"sourcesContent":["import { inject, InjectionToken } from '@angular/core';\n\n/** Which axes scroll. Logical, so a vertical writing mode needs no second vocabulary. */\nexport type ScrollAreaAxis = 'block' | 'inline' | 'both';\n\n/**\n * What the scrollbar does. `auto` is `overflow: auto`; `always` is\n * `overflow: scroll`; `hover` paints the bar transparent until a pointer or the\n * keyboard is inside; `none` removes the bar and leaves the scrolling.\n *\n * `scroll` — visible only while scrolling, which Radix and Mantine both ship —\n * is folded into `hover`, because it is what a platform overlay scrollbar\n * already does on its own.\n */\nexport type ScrollAreaScrollbars = 'auto' | 'always' | 'hover' | 'none';\n\n/** `scrollbar-gutter`, and `stable` is the default because content that shifts is the defect. */\nexport type ScrollAreaGutter = 'auto' | 'stable' | 'both-edges';\n\n/**\n * Where the veil is drawn. `both` dims what the reader has passed as well as\n * what is ahead; `end` only what is ahead; `none` leaves the scrollbar to say\n * there is more.\n */\nexport type ScrollAreaFade = 'both' | 'end' | 'none';\n\n/** `overscroll-behavior`, and `contain` is the default. */\nexport type ScrollAreaOverscroll = 'contain' | 'auto' | 'none';\n\nexport interface ScrollAreaDefaults {\n  axis: ScrollAreaAxis;\n  scrollbars: ScrollAreaScrollbars;\n  gutter: ScrollAreaGutter;\n  fade: ScrollAreaFade;\n  overscroll: ScrollAreaOverscroll;\n}\n\nconst FALLBACK: ScrollAreaDefaults = {\n  axis: 'block',\n  fade: 'both',\n  gutter: 'stable',\n  overscroll: 'contain',\n  scrollbars: 'auto',\n};\n\nexport const SCROLL_AREA_DEFAULTS = new InjectionToken<ScrollAreaDefaults>(\n  'slotted scroll-area defaults',\n  { providedIn: 'root', factory: () => FALLBACK },\n);\n\n/**\n * An application decides once what its scroll areas look like — whether the\n * bar waits for a hand, whether the veil dims both ends — rather than repeating\n * it on fifty of them. A region's name comes from the language in force\n * (`provideSlotted`).\n *\n * None of the five surveyed implementations has an equivalent: each takes its\n * policy per instance, and Mantine's `type` in particular is written on every\n * call site of every product that uses it.\n */\nexport function provideScrollAreaDefaults(defaults: Partial<ScrollAreaDefaults>) {\n  return {\n    provide: SCROLL_AREA_DEFAULTS,\n    useFactory: (): ScrollAreaDefaults => ({ ...FALLBACK, ...defaults }),\n  };\n}\n\n/** What a scroll area is here, before it states anything of its own. */\nexport function injectScrollAreaDefaults(): ScrollAreaDefaults {\n  return inject(SCROLL_AREA_DEFAULTS);\n}\n","import { createFocusOrigin } from '@slotted/core/focus';\nimport {\n  createScrollEdges,\n  NO_SCROLL_EDGES,\n  scrollEdgeAttributes,\n  type LogicalEdge,\n  type ScrollEdgesHandle,\n  type ScrollEdgesState,\n  type ScrollPosition,\n} from '@slotted/core/overflow';\nimport {\n  afterNextRender,\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  Directive,\n  ElementRef,\n  inject,\n  input,\n  output,\n  signal,\n  viewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { injectMessages } from '@slotted/angular/i18n';\nimport {\n  scrollAreaMessages,\n  type PartialMessages,\n  type ScrollAreaMessages,\n} from '@slotted/core/i18n';\n\nimport { injectScrollAreaDefaults } from './scroll-area-defaults';\nimport type {\n  ScrollAreaAxis,\n  ScrollAreaFade,\n  ScrollAreaGutter,\n  ScrollAreaOverscroll,\n  ScrollAreaScrollbars,\n} from './scroll-area-defaults';\n\n/** What `scrollChange` carries: where the scroller is, and the event that moved it. */\nexport interface ScrollAreaScrollEvent {\n  readonly position: ScrollPosition;\n  readonly source: Event;\n}\n\n/**\n * A scrollport, and the box that frames it.\n *\n * The scrollbar is the platform's, themed by the stylesheet through\n * `scrollbar-color`; the keyboard is the platform's too. What this component\n * adds is the measurement of whether the content overflows and which of its\n * ends show, published on the frame for CSS and emitted to the consumer, and\n * the tab stop a scrolling region owes a keyboard together with the name that\n * tab stop owes a screen reader — both written only while the content actually\n * overflows, which is the pattern `prose` shipped first for one block inside a\n * document.\n *\n * The frame is the consumer's own element — `<div slScrollArea>` — and the\n * scrollport is the component's, projected into: the frame is where a border,\n * a radius and a ground go, and the scrollport is the element the veil is on.\n * A consumer's own attributes on the host are never written over, because the\n * family writes its role, its tab stop and its name on an element it owns.\n *\n * The scroll position is never held. The browser moves it on a wheel, a\n * fling, a `Tab` into a child, an anchor navigation and a printed page, and a\n * consumer holding the value would have to accept every one of those or fight\n * the platform. It is emitted, and the instance moves it.\n */\n@Component({\n  selector: '[slScrollArea]',\n  standalone: true,\n  exportAs: 'slScrollArea',\n  template: `\n    <div\n      #viewport\n      data-part=\"viewport\"\n      [attr.role]=\"wired() ? 'region' : null\"\n      [attr.tabindex]=\"wired() ? '0' : null\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-labelledby]=\"ariaLabelledBy()\"\n      (scroll)=\"onScroll($event)\"\n    >\n      <ng-content />\n    </div>\n  `,\n  styleUrl: '../../../styles/src/scroll-area/scroll-area.css',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-ui': 'scroll-area',\n    'data-part': 'root',\n    '[attr.data-axis]': 'resolvedAxis()',\n    '[attr.data-scrollbars]': 'resolvedScrollbars()',\n    '[attr.data-gutter]': 'resolvedGutter()',\n    '[attr.data-fade]': 'resolvedFade()',\n    '[attr.data-overscroll]': 'resolvedOverscroll()',\n    '[attr.data-overflowing]': \"edgeAttributes()['data-overflowing'] ?? null\",\n    '[attr.data-at-block-start]': \"edgeAttributes()['data-at-block-start'] ?? null\",\n    '[attr.data-at-block-end]': \"edgeAttributes()['data-at-block-end'] ?? null\",\n    '[attr.data-at-inline-start]': \"edgeAttributes()['data-at-inline-start'] ?? null\",\n    '[attr.data-at-inline-end]': \"edgeAttributes()['data-at-inline-end'] ?? null\",\n    '[attr.data-sideways]': \"sideways() ? '' : null\",\n    '[style.max-block-size]': 'maxBlockSize() ?? null',\n    '[style.max-inline-size]': 'maxInlineSize() ?? null',\n  },\n})\nexport class SlScrollArea {\n  readonly axis = input<ScrollAreaAxis | undefined>(undefined);\n  readonly scrollbars = input<ScrollAreaScrollbars | undefined>(undefined);\n  readonly gutter = input<ScrollAreaGutter | undefined>(undefined);\n  readonly fade = input<ScrollAreaFade | undefined>(undefined);\n  readonly overscroll = input<ScrollAreaOverscroll | undefined>(undefined);\n\n  /**\n   * Scroll only past this size, as any CSS length. It is Mantine's\n   * `ScrollArea.Autosize` as one binding rather than a second component.\n   */\n  readonly maxBlockSize = input<string | undefined>(undefined);\n  readonly maxInlineSize = input<string | undefined>(undefined);\n\n  /**\n   * Whether the scrollport joins the tab sequence while it overflows.\n   *\n   * On by default, because content that scrolls has to be scrollable by\n   * keyboard and a scrollport with no tab stop is not — unless a child of it\n   * already takes focus. A consumer who knows the content is reachable another\n   * way turns it off and carries the reason.\n   */\n  readonly tabbable = input(true, { transform: booleanAttribute });\n\n  /**\n   * The name the region is announced by. Resolved in one order: `labelledBy`,\n   * then `messages.label`, then the catalog of the language in force.\n   */\n  readonly labelledBy = input<string | undefined>(undefined);\n  /** Words laid over the catalog of the language in force: the region's name (`label`). */\n  readonly messages = input<PartialMessages<ScrollAreaMessages> | undefined>(undefined);\n\n  /**\n   * The position, as a distance from each logical start, on every scroll. It\n   * is a report and not a request: the browser moves the position on a wheel,\n   * a fling, a `Tab` into a child and a printed page, and a consumer holding it\n   * would have to accept every one of those.\n   */\n  readonly scrollChange = output<ScrollAreaScrollEvent>();\n\n  /** The measurement, and only a new one: which axes overflow, and which ends show. */\n  readonly overflowChange = output<ScrollEdgesState>();\n\n  private readonly defaults = injectScrollAreaDefaults();\n  /** The family's words in the language in force, with this area's `messages` laid over them. */\n  readonly t = injectMessages(scrollAreaMessages, this.messages);\n  private readonly element = inject(ElementRef<HTMLElement>).nativeElement as HTMLElement;\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly viewportRef = viewChild.required<ElementRef<HTMLElement>>('viewport');\n\n  /**\n   * The measurement, as a signal, so the attributes it becomes are rendered.\n   * Before the first render it is the state of content that fits — four ends\n   * showing and nothing overflowing — which paints no veil and writes no tab\n   * stop, so a server render and its hydration agree and the veil does not\n   * flash on before the browser has said whether there is anything behind it.\n   */\n  private readonly measured = signal<ScrollEdgesState>(NO_SCROLL_EDGES);\n  protected readonly sideways = signal(false);\n  private edges: ScrollEdgesHandle | null = null;\n\n  protected readonly resolvedAxis = computed(() => this.axis() ?? this.defaults.axis);\n  protected readonly resolvedScrollbars = computed(\n    () => this.scrollbars() ?? this.defaults.scrollbars,\n  );\n  protected readonly resolvedGutter = computed(() => this.gutter() ?? this.defaults.gutter);\n  protected readonly resolvedFade = computed(() => this.fade() ?? this.defaults.fade);\n  protected readonly resolvedOverscroll = computed(\n    () => this.overscroll() ?? this.defaults.overscroll,\n  );\n\n  protected readonly edgeAttributes = computed(() => scrollEdgeAttributes(this.measured()));\n\n  protected readonly overflowing = computed(() => {\n    const state = this.measured();\n    return state.block.overflowing || state.inline.overflowing;\n  });\n  protected readonly wired = computed(() => this.overflowing() && this.tabbable());\n  protected readonly ariaLabelledBy = computed(() =>\n    this.wired() ? (this.labelledBy() ?? null) : null,\n  );\n  protected readonly ariaLabel = computed(() => {\n    if (!this.wired() || this.labelledBy() !== undefined) return null;\n    return this.t('label');\n  });\n\n  constructor() {\n    /**\n     * After the first render and only in a browser: Angular builds the\n     * component during a server render too, and there is nothing to measure\n     * there. The wiring appears at the first moment a browser can say whether\n     * the content overflows at all.\n     */\n    afterNextRender(() => {\n      const viewport = this.viewportRef().nativeElement;\n      const handle = createScrollEdges(viewport, {\n        onChange: (next) => {\n          this.measured.set(next);\n          if (this.edges !== null) this.sideways.set(this.edges.sideways());\n          this.overflowChange.emit(next);\n        },\n      });\n      this.edges = handle;\n      this.measured.set(handle.state());\n      this.sideways.set(handle.sideways());\n\n      /** A click on the content focuses the scrollport; its ring is for the keyboard (`createFocusOrigin`). */\n      const origin = createFocusOrigin(viewport);\n      this.destroyRef.onDestroy(origin.destroy);\n    });\n\n    this.destroyRef.onDestroy(() => {\n      this.edges?.destroy();\n      this.edges = null;\n    });\n  }\n\n  /** The frame: the consumer's own element. */\n  get root(): HTMLElement {\n    return this.element;\n  }\n\n  /** The scrollport: the element that scrolls and takes focus. */\n  get viewport(): HTMLElement {\n    return this.viewportRef().nativeElement;\n  }\n\n  /** The last measurement: whether each axis overflows, and which of its ends show. */\n  state(): ScrollEdgesState {\n    return this.edges?.state() ?? NO_SCROLL_EDGES;\n  }\n\n  /** The distance from each logical start, read now. */\n  position(): ScrollPosition {\n    return this.edges?.position() ?? { block: 0, inline: 0 };\n  }\n\n  /** Moves to a logical position. An axis left out is an axis left alone. */\n  scrollTo(target: Partial<ScrollPosition>): void {\n    this.edges?.scrollTo(target);\n  }\n\n  /** Moves to one end of one axis. */\n  scrollToEdge(edge: LogicalEdge): void {\n    this.edges?.scrollToEdge(edge);\n  }\n\n  /** Brings one element into view by the shortest movement that does it, without moving anything else. */\n  reveal(element: Element): void {\n    this.edges?.reveal(element);\n  }\n\n  /** Measures again, after content the observer could not see changed. */\n  refresh(): void {\n    this.edges?.refresh();\n  }\n\n  /** Moves focus to the scrollport. */\n  focus(): void {\n    this.viewport.focus();\n  }\n\n  protected onScroll(event: Event) {\n    if (this.edges === null) return;\n    this.scrollChange.emit({ position: this.edges.position(), source: event });\n  }\n}\n\n/**\n * The inset that scrolls with the content.\n *\n * Padding on a scrollport is not applied at the end edge of its scrollable\n * overflow in every engine, so an inset that has to survive a scroll to the\n * end goes on an element inside it. The family states no inset of its own: the\n * directive exists to give the consumer's one a place to live, on the\n * consumer's own element, and an area whose content already carries its own\n * inset uses no `slScrollAreaContent` at all.\n */\n@Directive({\n  selector: '[slScrollAreaContent]',\n  standalone: true,\n  exportAs: 'slScrollAreaContent',\n  host: { 'data-part': 'content' },\n})\nexport class SlScrollAreaContent {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;AAqCA,MAAM,QAAQ,GAAuB;AACnC,IAAA,IAAI,EAAE,OAAO;AACb,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,UAAU,EAAE,SAAS;AACrB,IAAA,UAAU,EAAE,MAAM;CACnB;MAEY,oBAAoB,GAAG,IAAI,cAAc,CACpD,8BAA8B,EAC9B,EAAE,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,QAAQ,EAAE;AAGjD;;;;;;;;;AASG;AACG,SAAU,yBAAyB,CAAC,QAAqC,EAAA;IAC7E,OAAO;AACL,QAAA,OAAO,EAAE,oBAAoB;AAC7B,QAAA,UAAU,EAAE,OAA2B,EAAE,GAAG,QAAQ,EAAE,GAAG,QAAQ,EAAE,CAAC;KACrE;AACH;AAEA;SACgB,wBAAwB,GAAA;AACtC,IAAA,OAAO,MAAM,CAAC,oBAAoB,CAAC;AACrC;;ACtBA;;;;;;;;;;;;;;;;;;;;;;AAsBG;MAuCU,YAAY,CAAA;IACd,IAAI,GAAG,KAAK,CAA6B,SAAS;6EAAC;IACnD,UAAU,GAAG,KAAK,CAAmC,SAAS;mFAAC;IAC/D,MAAM,GAAG,KAAK,CAA+B,SAAS;+EAAC;IACvD,IAAI,GAAG,KAAK,CAA6B,SAAS;6EAAC;IACnD,UAAU,GAAG,KAAK,CAAmC,SAAS;mFAAC;AAExE;;;AAGG;IACM,YAAY,GAAG,KAAK,CAAqB,SAAS;qFAAC;IACnD,aAAa,GAAG,KAAK,CAAqB,SAAS;sFAAC;AAE7D;;;;;;;AAOG;IACM,QAAQ,GAAG,KAAK,CAAC,IAAI,gFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAEhE;;;AAGG;IACM,UAAU,GAAG,KAAK,CAAqB,SAAS;mFAAC;;IAEjD,QAAQ,GAAG,KAAK,CAAkD,SAAS;iFAAC;AAErF;;;;;AAKG;IACM,YAAY,GAAG,MAAM,EAAyB;;IAG9C,cAAc,GAAG,MAAM,EAAoB;IAEnC,QAAQ,GAAG,wBAAwB,EAAE;;IAE7C,CAAC,GAAG,cAAc,CAAC,kBAAkB,EAAE,IAAI,CAAC,QAAQ,CAAC;IAC7C,OAAO,GAAG,MAAM,EAAC,UAAuB,EAAC,CAAC,aAA4B;AACtE,IAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;AAC/B,IAAA,WAAW,GAAG,SAAS,CAAC,QAAQ,CAA0B,UAAU;oFAAC;AAEtF;;;;;;AAMG;IACc,QAAQ,GAAG,MAAM,CAAmB,eAAe;iFAAC;IAClD,QAAQ,GAAG,MAAM,CAAC,KAAK;iFAAC;IACnC,KAAK,GAA6B,IAAI;AAE3B,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI;qFAAC;AAChE,IAAA,kBAAkB,GAAG,QAAQ,CAC9C,MAAM,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU;2FACpD;AACkB,IAAA,cAAc,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM;uFAAC;AACtE,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI;qFAAC;AAChE,IAAA,kBAAkB,GAAG,QAAQ,CAC9C,MAAM,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU;2FACpD;AAEkB,IAAA,cAAc,GAAG,QAAQ,CAAC,MAAM,oBAAoB,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;uFAAC;AAEtE,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAK;AAC7C,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE;QAC7B,OAAO,KAAK,CAAC,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,MAAM,CAAC,WAAW;IAC5D,CAAC;oFAAC;AACiB,IAAA,KAAK,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,QAAQ,EAAE;8EAAC;IAC7D,cAAc,GAAG,QAAQ,CAAC,MAC3C,IAAI,CAAC,KAAK,EAAE,IAAI,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,IAAI,IAAI;uFAClD;AACkB,IAAA,SAAS,GAAG,QAAQ,CAAC,MAAK;QAC3C,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,IAAI,CAAC,UAAU,EAAE,KAAK,SAAS;AAAE,YAAA,OAAO,IAAI;AACjE,QAAA,OAAO,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC;IACxB,CAAC;kFAAC;AAEF,IAAA,WAAA,GAAA;AACE;;;;;AAKG;QACH,eAAe,CAAC,MAAK;YACnB,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,aAAa;AACjD,YAAA,MAAM,MAAM,GAAG,iBAAiB,CAAC,QAAQ,EAAE;AACzC,gBAAA,QAAQ,EAAE,CAAC,IAAI,KAAI;AACjB,oBAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC;AACvB,oBAAA,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI;AAAE,wBAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;AACjE,oBAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC;gBAChC,CAAC;AACF,aAAA,CAAC;AACF,YAAA,IAAI,CAAC,KAAK,GAAG,MAAM;YACnB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;YACjC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;;AAGpC,YAAA,MAAM,MAAM,GAAG,iBAAiB,CAAC,QAAQ,CAAC;YAC1C,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC;AAC3C,QAAA,CAAC,CAAC;AAEF,QAAA,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,MAAK;AAC7B,YAAA,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE;AACrB,YAAA,IAAI,CAAC,KAAK,GAAG,IAAI;AACnB,QAAA,CAAC,CAAC;IACJ;;AAGA,IAAA,IAAI,IAAI,GAAA;QACN,OAAO,IAAI,CAAC,OAAO;IACrB;;AAGA,IAAA,IAAI,QAAQ,GAAA;AACV,QAAA,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC,aAAa;IACzC;;IAGA,KAAK,GAAA;QACH,OAAO,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,eAAe;IAC/C;;IAGA,QAAQ,GAAA;AACN,QAAA,OAAO,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;IAC1D;;AAGA,IAAA,QAAQ,CAAC,MAA+B,EAAA;AACtC,QAAA,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC;IAC9B;;AAGA,IAAA,YAAY,CAAC,IAAiB,EAAA;AAC5B,QAAA,IAAI,CAAC,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC;IAChC;;AAGA,IAAA,MAAM,CAAC,OAAgB,EAAA;AACrB,QAAA,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC;IAC7B;;IAGA,OAAO,GAAA;AACL,QAAA,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE;IACvB;;IAGA,KAAK,GAAA;AACH,QAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE;IACvB;AAEU,IAAA,QAAQ,CAAC,KAAY,EAAA;AAC7B,QAAA,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI;YAAE;QACzB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC;IAC5E;uGArKW,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAZ,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAY,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,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,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,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,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,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,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,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,EAAA,OAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,SAAA,EAAA,aAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,UAAA,EAAA,EAAA,gBAAA,EAAA,gBAAA,EAAA,sBAAA,EAAA,sBAAA,EAAA,kBAAA,EAAA,kBAAA,EAAA,gBAAA,EAAA,gBAAA,EAAA,sBAAA,EAAA,sBAAA,EAAA,uBAAA,EAAA,8CAAA,EAAA,0BAAA,EAAA,iDAAA,EAAA,wBAAA,EAAA,+CAAA,EAAA,2BAAA,EAAA,kDAAA,EAAA,yBAAA,EAAA,gDAAA,EAAA,oBAAA,EAAA,wBAAA,EAAA,sBAAA,EAAA,wBAAA,EAAA,uBAAA,EAAA,yBAAA,EAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,aAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,cAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAlCb;;;;;;;;;;;;AAYT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,kkMAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAsBU,YAAY,EAAA,UAAA,EAAA,CAAA;kBAtCxB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EAAA,UAAA,EACd,IAAI,EAAA,QAAA,EACN,cAAc,EAAA,QAAA,EACd;;;;;;;;;;;;AAYT,EAAA,CAAA,EAAA,eAAA,EAEgB,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,SAAS,EAAE,aAAa;AACxB,wBAAA,WAAW,EAAE,MAAM;AACnB,wBAAA,kBAAkB,EAAE,gBAAgB;AACpC,wBAAA,wBAAwB,EAAE,sBAAsB;AAChD,wBAAA,oBAAoB,EAAE,kBAAkB;AACxC,wBAAA,kBAAkB,EAAE,gBAAgB;AACpC,wBAAA,wBAAwB,EAAE,sBAAsB;AAChD,wBAAA,yBAAyB,EAAE,8CAA8C;AACzE,wBAAA,4BAA4B,EAAE,iDAAiD;AAC/E,wBAAA,0BAA0B,EAAE,+CAA+C;AAC3E,wBAAA,6BAA6B,EAAE,kDAAkD;AACjF,wBAAA,2BAA2B,EAAE,gDAAgD;AAC7E,wBAAA,sBAAsB,EAAE,wBAAwB;AAChD,wBAAA,wBAAwB,EAAE,wBAAwB;AAClD,wBAAA,yBAAyB,EAAE,yBAAyB;AACrD,qBAAA,EAAA,MAAA,EAAA,CAAA,kkMAAA,CAAA,EAAA;2qCAkD0E,UAAU,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;AAwHvF;;;;;;;;;AASG;MAOU,mBAAmB,CAAA;uGAAnB,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAnB,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,WAAA,EAAA,SAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAnB,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAN/B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,uBAAuB;AACjC,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,QAAQ,EAAE,qBAAqB;AAC/B,oBAAA,IAAI,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE;AACjC,iBAAA;;;ACpSD;;AAEG;;"}

package/fesm2022/slotted-angular-select.mjs

@@ -422,6 +422,11 @@ class SlSelect {
     constructor() {
         const destroyRef = inject(DestroyRef);
         const host = inject((ElementRef));
+        /* Every press resets the record in the capture phase; one on the frame sets it after. */
+        const doc = host.nativeElement.ownerDocument;
+        const resetPress = () => (this.pressedFrame = false);
+        doc.addEventListener('pointerdown', resetPress, true);
+        destroyRef.onDestroy(() => doc.removeEventListener('pointerdown', resetPress, true));
         effect(() => {
             const row = this.tags()?.nativeElement ?? null;
             const trigger = this.chipOverflow()?.nativeElement ?? null;
@@ -516,10 +521,26 @@ class SlSelect {
      * Whether a click landed on the control's frame. A click a `label` elsewhere
      * forwards to the button carries the label's coordinates, which lie outside it.
      */
-    pressedOnFrame(x, y) {
-        const button = this.triggerRef().nativeElement;
-        const box = (button.parentElement ?? button).getBoundingClientRect();
-        return x >= box.left && x <= box.right && y >= box.top && y <= box.bottom;
+    /** The last press went down on the frame; see `onTriggerClick`. */
+    pressedFrame = false;
+    onFramePointerDown() {
+        this.pressedFrame = true;
+        this.prepare();
+    }
+    /**
+     * The reader is about to open the popup: the control took focus or a press.
+     * The portal's layer is made then, because making it reads the trigger's
+     * computed style, and a read in the open's own task is a style recalculation
+     * the first frame waits for. A press focuses before it clicks, in a task of
+     * its own.
+     */
+    prepare() {
+        if (this.portalRoot !== null)
+            return;
+        this.portalRoot = createPortalRoot({
+            origin: this.triggerRef().nativeElement,
+            disabled: this.portal() === false,
+        });
     }
     scrollToKey(value) {
         const option = this.options().find((candidate) => candidate.dataset['value'] === value);
@@ -613,11 +634,16 @@ class SlSelect {
     }
     onTriggerClick(event) {
         /* A press on the field's label arrives here as the click the label
-           forwards: a pointer click at the label's coordinates, outside the frame.
-           It focuses the control and does not open the list — the select-only
-           example's label only focuses, and so does a native select's. A keyboard
-           or assistive-technology click carries detail 0 and opens. */
-        if (event.detail > 0 && !this.pressedOnFrame(event.clientX, event.clientY)) {
+           forwards: a pointer click whose press went down on the label, not on
+           the frame. It focuses the control and does not open the list — the
+           select-only example's label only focuses, and so does a native
+           select's. A keyboard or assistive-technology click carries detail 0 and
+           opens. The press is recorded rather than the click's coordinates
+           compared with the frame's box: that box is a layout read in the click's
+           own task, after the release changed the frame's style. */
+        const fromFrame = this.pressedFrame;
+        this.pressedFrame = false;
+        if (event.detail > 0 && !fromFrame) {
             this.focus();
             return;
         }
@@ -856,17 +882,14 @@ class SlSelect {
             this.view.detectChanges();
             return;
         }
-        this.portalRoot = createPortalRoot({
-            origin: this.triggerRef().nativeElement,
-            disabled: this.portal() === false,
-        });
+        this.prepare();
         this.view = this.viewContainer.createEmbeddedView(this.template());
         this.view.detectChanges();
         this.layerNode = this.view.rootNodes.find((node) => node instanceof HTMLElement);
         this.surfaceNode = this.layerNode?.querySelector("[data-part='content']") ?? null;
         if (this.layerNode === null)
             return;
-        this.portalRoot.container?.append(this.layerNode);
+        this.portalRoot?.container?.append(this.layerNode);
         this.presence = createPresence({ present: this.isOpen() });
         this.presence.setNode(this.layerNode);
         this.recount();
@@ -892,8 +915,15 @@ class SlSelect {
             strategy: this.strategy() ?? this.defaults.strategy,
         });
         /* The height that bounds the list arrives with the position, after the
-           highlight has landed, so the highlighted row is revealed again. */
-        void this.positioner.update().then(() => this.reveal(this.highlightedValue()));
+           highlight has landed, so the highlighted row is revealed again — in the
+           next frame, whose layout the browser computes anyway, rather than by a
+           read here after the position's writes. */
+        void this.positioner.update().then(() => {
+            const view = this.layerNode?.ownerDocument.defaultView;
+            if (view === null || view === undefined)
+                return;
+            view.requestAnimationFrame(() => this.reveal(this.highlightedValue()));
+        });
     }
     bind() {
         if (this.layerNode === null)
@@ -1020,7 +1050,7 @@ class SlSelect {
         return this.selection().length === 0 ? { required: true } : null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlSelect, isStandalone: true, selector: "sl-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, highlightedValue: { classPropertyName: "highlightedValue", publicName: "highlightedValue", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", 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 }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, mount: { classPropertyName: "mount", publicName: "mount", isSignal: true, isRequired: false, transformFunction: null }, strategy: { classPropertyName: "strategy", publicName: "strategy", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, alignOffset: { classPropertyName: "alignOffset", publicName: "alignOffset", isSignal: true, isRequired: false, transformFunction: null }, collisionPadding: { classPropertyName: "collisionPadding", publicName: "collisionPadding", isSignal: true, isRequired: false, transformFunction: null }, typeaheadTimeout: { classPropertyName: "typeaheadTimeout", publicName: "typeaheadTimeout", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, highlightMatch: { classPropertyName: "highlightMatch", publicName: "highlightMatch", isSignal: true, isRequired: false, transformFunction: null }, typeahead: { classPropertyName: "typeahead", publicName: "typeahead", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsidePress: { classPropertyName: "closeOnOutsidePress", publicName: "closeOnOutsidePress", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "flip", isSignal: true, isRequired: false, transformFunction: null }, shift: { classPropertyName: "shift", publicName: "shift", isSignal: true, isRequired: false, transformFunction: null }, hideWhenDetached: { classPropertyName: "hideWhenDetached", publicName: "hideWhenDetached", isSignal: true, isRequired: false, transformFunction: null }, portal: { classPropertyName: "portal", publicName: "portal", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChangeRequest: "valueChangeRequest", open: "openChange", openChangeRequest: "openChangeRequest", highlightedValue: "highlightedValueChange", highlightedValueChangeRequest: "highlightedValueChangeRequest", searchValue: "searchValueChange", searchValueChangeRequest: "searchValueChangeRequest" }, host: { attributes: { "data-ui": "select", "data-part": "root" }, properties: { "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.data-size": "resolvedSize()", "attr.data-variant": "resolvedVariant()", "attr.data-full-width": "resolvedFullWidth() ? '' : null", "attr.data-multiple": "resolvedMultiple() ? '' : null", "attr.data-open": "isOpen() ? '' : null", "attr.data-disabled": "resolvedDisabled() ? '' : null", "attr.data-readonly": "resolvedReadOnly() ? '' : null", "attr.data-invalid": "resolvedInvalid() ? '' : null", "attr.data-required": "resolvedRequired() ? '' : null", "attr.data-loading": "loading() ? '' : null", "attr.data-narrow": "narrow() ? '' : null" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlSelect, isStandalone: true, selector: "sl-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, highlightedValue: { classPropertyName: "highlightedValue", publicName: "highlightedValue", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", 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 }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, mount: { classPropertyName: "mount", publicName: "mount", isSignal: true, isRequired: false, transformFunction: null }, strategy: { classPropertyName: "strategy", publicName: "strategy", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, alignOffset: { classPropertyName: "alignOffset", publicName: "alignOffset", isSignal: true, isRequired: false, transformFunction: null }, collisionPadding: { classPropertyName: "collisionPadding", publicName: "collisionPadding", isSignal: true, isRequired: false, transformFunction: null }, typeaheadTimeout: { classPropertyName: "typeaheadTimeout", publicName: "typeaheadTimeout", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, highlightMatch: { classPropertyName: "highlightMatch", publicName: "highlightMatch", isSignal: true, isRequired: false, transformFunction: null }, typeahead: { classPropertyName: "typeahead", publicName: "typeahead", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsidePress: { classPropertyName: "closeOnOutsidePress", publicName: "closeOnOutsidePress", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "flip", isSignal: true, isRequired: false, transformFunction: null }, shift: { classPropertyName: "shift", publicName: "shift", isSignal: true, isRequired: false, transformFunction: null }, hideWhenDetached: { classPropertyName: "hideWhenDetached", publicName: "hideWhenDetached", isSignal: true, isRequired: false, transformFunction: null }, portal: { classPropertyName: "portal", publicName: "portal", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChangeRequest: "valueChangeRequest", open: "openChange", openChangeRequest: "openChangeRequest", highlightedValue: "highlightedValueChange", highlightedValueChangeRequest: "highlightedValueChangeRequest", searchValue: "searchValueChange", searchValueChangeRequest: "searchValueChangeRequest" }, host: { attributes: { "data-ui": "select", "data-part": "root" }, listeners: { "pointerdown": "onFramePointerDown()", "focusin": "prepare()" }, properties: { "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.data-size": "resolvedSize()", "attr.data-variant": "resolvedVariant()", "attr.data-full-width": "resolvedFullWidth() ? '' : null", "attr.data-multiple": "resolvedMultiple() ? '' : null", "attr.data-open": "isOpen() ? '' : null", "attr.data-disabled": "resolvedDisabled() ? '' : null", "attr.data-readonly": "resolvedReadOnly() ? '' : null", "attr.data-invalid": "resolvedInvalid() ? '' : null", "attr.data-required": "resolvedRequired() ? '' : null", "attr.data-loading": "loading() ? '' : null", "attr.data-narrow": "narrow() ? '' : null" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlSelect), multi: true },
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => SlSelect), multi: true },
         ], queries: [{ propertyName: "summaryTemplate", first: true, predicate: SlSelectValue, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "template", first: true, predicate: ["layer"], descendants: true, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "tags", first: true, predicate: ["tags"], descendants: true, isSignal: true }, { propertyName: "chipOverflow", first: true, predicate: ["chipOverflow"], descendants: true, isSignal: true }], exportAs: ["slSelect"], ngImport: i0, template: `
@@ -1305,6 +1335,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         '[attr.data-full-width]': "resolvedFullWidth() ? '' : null",
                         '[attr.data-multiple]': "resolvedMultiple() ? '' : null",
                         '[attr.data-open]': "isOpen() ? '' : null",
+                        '(pointerdown)': 'onFramePointerDown()',
+                        '(focusin)': 'prepare()',
                         '[attr.data-disabled]': "resolvedDisabled() ? '' : null",
                         '[attr.data-readonly]': "resolvedReadOnly() ? '' : null",
                         '[attr.data-invalid]': "resolvedInvalid() ? '' : null",