@rcarls/rc-scroller 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,64 @@
 # @rcarls/rc-scroller
 
+## 0.7.0
+
+### Patch Changes
+
+- 5c006de: Ship component CSS minified. Package builds now run the CSS in Lit `css` styles
+  and light-DOM structural styles through Lightning CSS, removing comments and
+  whitespace while keeping source maps that resolve to each template. Rendered
+  styles are unchanged.
+
+  `@rcarls/rc-common` adds `cssText`, an identity tag that marks a plain CSS
+  string for minification. `rc-chip`, `rc-disclosure`, and `rc-accordion` now
+  depend on `@rcarls/rc-common` for it.
+
+- a6553ff: Batch layout sampling into a shared animation-frame read phase so mounting a
+  large component route no longer alternates forced layout reads with component
+  writes. Closed anchored popups now skip placement work until they open, while
+  scroller boundaries, carousel positioning, flow state, and opted-in initial
+  scroll observation settle before the next paint.
+
+  Add `RafScheduler.schedulePhased()`, live `AnchorController.disabled` getters,
+  and the `ScrollObserverController.initialEvaluation` timing option.
+
+- 2abffd2: Compute the `at-block-*` and `at-inline-*` boundary attributes along logical
+  axes, so they are correct in vertical writing modes as well as RTL, and
+  recompute them at most once per animation frame instead of on every scroll
+  and resize callback.
+- Updated dependencies [e3dfa59]
+- Updated dependencies [50d5610]
+- Updated dependencies [9ee769c]
+- Updated dependencies [1179f24]
+- Updated dependencies [595fe37]
+- Updated dependencies [38cd00c]
+- Updated dependencies [5c006de]
+- Updated dependencies [a6553ff]
+- Updated dependencies [2205478]
+- Updated dependencies [4341311]
+- Updated dependencies [899bb5e]
+- Updated dependencies [25fcfe0]
+- Updated dependencies [51f6403]
+- Updated dependencies [9caca6b]
+- Updated dependencies [b764a3c]
+- Updated dependencies [54d9ead]
+- Updated dependencies [b9175e9]
+- Updated dependencies [c8b762b]
+- Updated dependencies [55e1e7f]
+- Updated dependencies [f1ca82d]
+- Updated dependencies [b87f27b]
+- Updated dependencies [32ebead]
+- Updated dependencies [bfefedd]
+- Updated dependencies [c130173]
+- Updated dependencies [11680b6]
+- Updated dependencies [223d36c]
+- Updated dependencies [7b91a44]
+- Updated dependencies [aa04ead]
+- Updated dependencies [ac65b5b]
+- Updated dependencies [afcfef8]
+- Updated dependencies [11ef1ad]
+  - @rcarls/rc-common@0.7.0
+
 ## 0.6.0
 
 ### Minor Changes

package/README.md

@@ -32,6 +32,11 @@ scrollable at all (nothing more to reveal counts as already at both of its
 edges). Style an edge affordance (a fade, a shadow, a border) from outside
 the shadow root by targeting the attribute directly:
 
+Initial boundary state settles in the first animation frame after mount.
+This lets component batches complete their layout reads before any instance
+reflect state; read the properties after that frame when coordinating
+imperative startup work.
+
 ```css
 rc-scroller[axis='inline'] {
   mask-image: linear-gradient(

package/dist/custom-elements.json

@@ -178,21 +178,81 @@
               "privacy": "private",
               "default": "null"
             },
+            {
+              "kind": "field",
+              "name": "_frame",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new RafScheduler(this)"
+            },
             {
               "kind": "field",
               "name": "_onScroll",
               "privacy": "private",
-              "readonly": true
+              "readonly": true,
+              "description": "Scroll and resize can fire several times per frame, and every evaluation\nreads layout, so boundary state is recomputed at most once per frame."
+            },
+            {
+              "kind": "method",
+              "name": "_edges",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "[start: boolean, end: boolean]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "axis",
+                  "type": {
+                    "text": "LogicalAxis"
+                  }
+                },
+                {
+                  "name": "flow",
+                  "type": {
+                    "text": "Flow"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "_evaluateBoundaries",
+              "name": "_queueBoundaryEvaluation",
               "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
               }
+            },
+            {
+              "kind": "method",
+              "name": "_sampleBoundaries",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "BoundaryState"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_applyBoundaries",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "state",
+                  "type": {
+                    "text": "BoundaryState"
+                  }
+                }
+              ]
             }
           ],
           "attributes": [

package/dist/rc-scroller-DY2mhq-F.js

@@ -0,0 +1,74 @@
+import { css as b, LitElement as u, html as v } from "lit";
+import { property as n } from "lit/decorators.js";
+import { RafScheduler as p, getScrollOffset as f, scrollSize as m, clientSize as y, resolveFlow as k } from "@rcarls/rc-common";
+const _ = b`:host{overflow-inline:hidden;overflow-block:auto;overscroll-behavior-block:var(--rc-scroller-overscroll-behavior,contain);overflow-anchor:var(--rc-scroller-overflow-anchor,auto);scrollbar-width:var(--rc-scroller-scrollbar-width,auto);scrollbar-color:var(--rc-scroller-scrollbar-color,auto);box-sizing:border-box;min-block-size:0;min-inline-size:0;display:block}:host([hidden]){display:none}:host([axis=inline]){overflow-inline:auto;overflow-block:hidden;overscroll-behavior-inline:var(--rc-scroller-overscroll-behavior,contain);overscroll-behavior-block:auto}:host([axis=both]){overflow-inline:auto;overflow-block:auto;overscroll-behavior:var(--rc-scroller-overscroll-behavior,contain)}[part=content]{box-sizing:border-box;min-block-size:0;min-inline-size:0;display:block}:host([layout=content]) [part=content]{grid-template-columns:[fullbleed-start] minmax(var(--rc-scroller-content-padding-inline,1rem), 1fr) [content-start] minmax(0, var(--rc-scroller-content-max-inline-size,100%)) [content-end] minmax(var(--rc-scroller-content-padding-inline,1rem), 1fr) [fullbleed-end];row-gap:var(--rc-scroller-content-row-gap,0);grid-auto-rows:min-content;display:grid}:host([layout=content]) ::slotted(*){grid-column:content;min-inline-size:0}:host([layout=content]) ::slotted([data-rc-scroller-span=fullbleed]){grid-column:fullbleed;inline-size:100%}`;
+var B = Object.defineProperty, l = (c, e, r, i) => {
+  for (var t = void 0, s = c.length - 1, d; s >= 0; s--)
+    (d = c[s]) && (t = d(e, r, t) || t);
+  return t && B(e, r, t), t;
+};
+const h = 4, a = class a extends u {
+  constructor() {
+    super(...arguments), this.axis = "block", this.layout = "none", this.atBlockStart = !0, this.atBlockEnd = !0, this.atInlineStart = !0, this.atInlineEnd = !0, this._resizeObserver = null, this._frame = new p(this), this._onScroll = () => {
+      this._queueBoundaryEvaluation();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("scroll", this._onScroll, { passive: !0 }), typeof ResizeObserver == "function" && (this._resizeObserver = new ResizeObserver(this._onScroll), this._resizeObserver.observe(this));
+  }
+  firstUpdated() {
+    this._queueBoundaryEvaluation();
+  }
+  disconnectedCallback() {
+    this.removeEventListener("scroll", this._onScroll), this._resizeObserver?.disconnect(), this._resizeObserver = null, super.disconnectedCallback();
+  }
+  render() {
+    return v`<div part="content"><slot></slot></div>`;
+  }
+  updated(e) {
+    (e.has("axis") || e.has("layout")) && this._queueBoundaryEvaluation();
+  }
+  _edges(e, r) {
+    const i = f(this, e, r), t = m(this, e, r) - y(this, e, r);
+    return [i <= h, i >= t - h];
+  }
+  _queueBoundaryEvaluation() {
+    this._frame.schedulePhased(
+      () => this._sampleBoundaries(),
+      (e) => this._applyBoundaries(e)
+    );
+  }
+  _sampleBoundaries() {
+    const e = k(this), [r, i] = this.axis !== "inline" ? this._edges("block", e) : [!0, !0], [t, s] = this.axis !== "block" ? this._edges("inline", e) : [!0, !0];
+    return { blockStart: r, blockEnd: i, inlineStart: t, inlineEnd: s };
+  }
+  _applyBoundaries(e) {
+    this.atBlockStart = e.blockStart, this.atBlockEnd = e.blockEnd, this.atInlineStart = e.inlineStart, this.atInlineEnd = e.inlineEnd;
+  }
+};
+a.styles = _, a.enabledWarnings = (u.enabledWarnings ?? []).filter(
+  (e) => e !== "change-in-update"
+);
+let o = a;
+l([
+  n({ reflect: !0 })
+], o.prototype, "axis");
+l([
+  n({ reflect: !0 })
+], o.prototype, "layout");
+l([
+  n({ type: Boolean, reflect: !0, attribute: "at-block-start" })
+], o.prototype, "atBlockStart");
+l([
+  n({ type: Boolean, reflect: !0, attribute: "at-block-end" })
+], o.prototype, "atBlockEnd");
+l([
+  n({ type: Boolean, reflect: !0, attribute: "at-inline-start" })
+], o.prototype, "atInlineStart");
+l([
+  n({ type: Boolean, reflect: !0, attribute: "at-inline-end" })
+], o.prototype, "atInlineEnd");
+export {
+  o as R
+};
+//# sourceMappingURL=rc-scroller-DY2mhq-F.js.map

package/dist/rc-scroller-DY2mhq-F.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-scroller-DY2mhq-F.js","sources":["../src/rc-scroller.styles.ts","../src/rc-scroller.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const scrollerStyles = css`\n  :host {\n    display: block;\n    min-inline-size: 0;\n    min-block-size: 0;\n    overflow-inline: hidden;\n    overflow-block: auto;\n    overscroll-behavior-block: var(--rc-scroller-overscroll-behavior, contain);\n    overflow-anchor: var(--rc-scroller-overflow-anchor, auto);\n    scrollbar-width: var(--rc-scroller-scrollbar-width, auto);\n    scrollbar-color: var(--rc-scroller-scrollbar-color, auto);\n    box-sizing: border-box;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host([axis='inline']) {\n    overflow-inline: auto;\n    overflow-block: hidden;\n    overscroll-behavior-inline: var(--rc-scroller-overscroll-behavior, contain);\n    overscroll-behavior-block: auto;\n  }\n\n  :host([axis='both']) {\n    overflow-inline: auto;\n    overflow-block: auto;\n    overscroll-behavior: var(--rc-scroller-overscroll-behavior, contain);\n  }\n\n  [part='content'] {\n    display: block;\n    min-inline-size: 0;\n    min-block-size: 0;\n    box-sizing: border-box;\n  }\n\n  :host([layout='content']) [part='content'] {\n    display: grid;\n    grid-template-columns:\n      [fullbleed-start] minmax(var(--rc-scroller-content-padding-inline, 1rem), 1fr)\n      [content-start] minmax(0, var(--rc-scroller-content-max-inline-size, 100%))\n      [content-end] minmax(var(--rc-scroller-content-padding-inline, 1rem), 1fr)\n      [fullbleed-end];\n    grid-auto-rows: min-content;\n    row-gap: var(--rc-scroller-content-row-gap, 0);\n  }\n\n  :host([layout='content']) ::slotted(*) {\n    grid-column: content;\n    min-inline-size: 0;\n  }\n\n  :host([layout='content']) ::slotted([data-rc-scroller-span='fullbleed']) {\n    grid-column: fullbleed;\n    inline-size: 100%;\n  }\n`;\n\nexport default scrollerStyles;\n","import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport {\n  RafScheduler,\n  clientSize,\n  getScrollOffset,\n  resolveFlow,\n  scrollSize,\n  type Flow,\n  type LogicalAxis,\n} from '@rcarls/rc-common';\n\nimport scrollerStyles from './rc-scroller.styles.js';\n\nexport type RCScrollerAxis = 'block' | 'inline' | 'both';\nexport type RCScrollerLayout = 'none' | 'content';\n\n/** Pixels of remaining scroll distance below which an edge counts as reached. */\nconst BOUNDARY_THRESHOLD = 4;\n\ninterface BoundaryState {\n  blockStart: boolean;\n  blockEnd: boolean;\n  inlineStart: boolean;\n  inlineEnd: boolean;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'rc-scroller': RCScroller;\n  }\n}\n\n/**\n * Design-system-neutral native scroll region with optional content and\n * fullbleed layout tracks. The custom element host is the scroll container,\n * so native scrolling APIs and events work directly on `<rc-scroller>`.\n *\n * With `layout=\"content\"`, direct children use the centered content track.\n * Add `data-rc-scroller-span=\"fullbleed\"` to a direct child to span the full\n * available inline size. This child attribute is a layout convention rather\n * than component state.\n *\n * The author owns the accessible name and landmark semantics when the region\n * needs them. The component does not add `role` or `tabindex` automatically.\n *\n * @slot - Scrollable content.\n *\n * @csspart content - Wrapper for the default slot and optional layout grid.\n *\n * @attr axis - Scroll axis: `block`, `inline`, or `both`.\n * @attr layout - Layout mode: `none` or `content`.\n * @attr [at-block-start] - Reflected, computed. Present when scrolled to (within a few\n *   pixels of) the block-start edge, or when the block axis isn't scrollable\n *   (`axis=\"inline\"`) — nothing more to reveal counts as already at both edges.\n *   Edges are logical: in RTL the inline start is the right edge, and in\n *   vertical writing modes the block axis runs horizontally.\n * @attr [at-block-end] - Reflected, computed. The block-end equivalent of `at-block-start`.\n * @attr [at-inline-start] - Reflected, computed. The inline-start equivalent, always\n *   present when the inline axis isn't scrollable (`axis=\"block\"`).\n * @attr [at-inline-end] - Reflected, computed. The inline-end equivalent of `at-inline-start`.\n *   Initial boundary attributes settle in the first animation frame after\n *   mount so multiple scrollers can share one layout sampling phase.\n *\n * @cssprop [--rc-scroller-overscroll-behavior=contain] - Overscroll behavior on enabled axes.\n * @cssprop [--rc-scroller-overflow-anchor=auto] - Browser scroll anchoring behavior.\n * @cssprop [--rc-scroller-scrollbar-width=auto] - Scrollbar width.\n * @cssprop [--rc-scroller-scrollbar-color=auto] - Scrollbar thumb and track colors.\n * @cssprop [--rc-scroller-content-padding-inline=1rem] - Minimum inline gutter in content layout.\n * @cssprop [--rc-scroller-content-max-inline-size=100%] - Maximum width of the content track.\n * @cssprop [--rc-scroller-content-row-gap=0] - Gap between rows in content layout.\n */\nexport class RCScroller extends LitElement {\n  static override styles = scrollerStyles;\n\n  // Boundary state can only be measured after render, so the reflected edge\n  // properties intentionally schedule one follow-up update.\n  static override enabledWarnings = (LitElement.enabledWarnings ?? []).filter(\n    (warning) => warning !== 'change-in-update',\n  );\n\n  /** Scroll axis. */\n  @property({ reflect: true })\n  axis: RCScrollerAxis = 'block';\n\n  /** Optional child layout. */\n  @property({ reflect: true })\n  layout: RCScrollerLayout = 'none';\n\n  /** Reflected, computed. See the class doc comment. */\n  @property({ type: Boolean, reflect: true, attribute: 'at-block-start' })\n  atBlockStart = true;\n\n  /** Reflected, computed. See the class doc comment. */\n  @property({ type: Boolean, reflect: true, attribute: 'at-block-end' })\n  atBlockEnd = true;\n\n  /** Reflected, computed. See the class doc comment. */\n  @property({ type: Boolean, reflect: true, attribute: 'at-inline-start' })\n  atInlineStart = true;\n\n  /** Reflected, computed. See the class doc comment. */\n  @property({ type: Boolean, reflect: true, attribute: 'at-inline-end' })\n  atInlineEnd = true;\n\n  private _resizeObserver: ResizeObserver | null = null;\n\n  private readonly _frame = new RafScheduler(this);\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    this.addEventListener('scroll', this._onScroll, { passive: true });\n\n    if (typeof ResizeObserver === 'function') {\n      this._resizeObserver = new ResizeObserver(this._onScroll);\n      this._resizeObserver.observe(this);\n    }\n  }\n\n  override firstUpdated(): void {\n    // Only accurate once the shadow DOM (and slotted content) has actually\n    // rendered — connectedCallback runs before Lit's first render, when\n    // scrollWidth/clientHeight etc. don't yet reflect real layout. Also\n    // covers connecting already scrolled (bfcache restore, fragment nav)\n    // rather than waiting for the first scroll/resize event.\n    this._queueBoundaryEvaluation();\n  }\n\n  override disconnectedCallback(): void {\n    this.removeEventListener('scroll', this._onScroll);\n    this._resizeObserver?.disconnect();\n    this._resizeObserver = null;\n\n    super.disconnectedCallback();\n  }\n\n  protected override render() {\n    return html`<div part=\"content\"><slot></slot></div>`;\n  }\n\n  protected override updated(changed: Map<PropertyKey, unknown>): void {\n    if (changed.has('axis') || changed.has('layout')) {\n      this._queueBoundaryEvaluation();\n    }\n  }\n\n  /**\n   * Scroll and resize can fire several times per frame, and every evaluation\n   * reads layout, so boundary state is recomputed at most once per frame.\n   */\n  private readonly _onScroll = (): void => {\n    this._queueBoundaryEvaluation();\n  };\n\n  private _edges(axis: LogicalAxis, flow: Flow): [start: boolean, end: boolean] {\n    const offset = getScrollOffset(this, axis, flow);\n    const max = scrollSize(this, axis, flow) - clientSize(this, axis, flow);\n\n    return [offset <= BOUNDARY_THRESHOLD, offset >= max - BOUNDARY_THRESHOLD];\n  }\n\n  private _queueBoundaryEvaluation(): void {\n    this._frame.schedulePhased(\n      () => this._sampleBoundaries(),\n      (state) => this._applyBoundaries(state),\n    );\n  }\n\n  private _sampleBoundaries(): BoundaryState {\n    // Read at measure time: a dir or writing-mode change on an ancestor fires\n    // no event of its own.\n    const flow = resolveFlow(this);\n    const [blockStart, blockEnd] =\n      this.axis !== 'inline' ? this._edges('block', flow) : [true, true];\n    const [inlineStart, inlineEnd] =\n      this.axis !== 'block' ? this._edges('inline', flow) : [true, true];\n\n    return { blockStart, blockEnd, inlineStart, inlineEnd };\n  }\n\n  private _applyBoundaries(state: BoundaryState): void {\n    this.atBlockStart = state.blockStart;\n    this.atBlockEnd = state.blockEnd;\n    this.atInlineStart = state.inlineStart;\n    this.atInlineEnd = state.inlineEnd;\n  }\n}\n"],"names":["scrollerStyles","css","BOUNDARY_THRESHOLD","_RCScroller","LitElement","RafScheduler","html","changed","axis","flow","offset","getScrollOffset","max","scrollSize","clientSize","state","resolveFlow","blockStart","blockEnd","inlineStart","inlineEnd","warning","RCScroller","__decorateClass","property"],"mappings":"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"}

package/dist/rc-scroller-define.js

@@ -1,4 +1,4 @@
-import { R as e } from "./rc-scroller-BvfVYwVD.js";
+import { R as e } from "./rc-scroller-DY2mhq-F.js";
 customElements.get("rc-scroller") || customElements.define("rc-scroller", e);
 export {
   e as RCScroller

package/dist/rc-scroller.js

@@ -1,4 +1,4 @@
-import { R as e } from "./rc-scroller-BvfVYwVD.js";
+import { R as e } from "./rc-scroller-DY2mhq-F.js";
 export {
   e as RCScroller
 };

package/dist/types/packages/rc-scroller/src/rc-scroller.d.ts

@@ -28,10 +28,14 @@ declare global {
  * @attr [at-block-start] - Reflected, computed. Present when scrolled to (within a few
  *   pixels of) the block-start edge, or when the block axis isn't scrollable
  *   (`axis="inline"`) — nothing more to reveal counts as already at both edges.
+ *   Edges are logical: in RTL the inline start is the right edge, and in
+ *   vertical writing modes the block axis runs horizontally.
  * @attr [at-block-end] - Reflected, computed. The block-end equivalent of `at-block-start`.
  * @attr [at-inline-start] - Reflected, computed. The inline-start equivalent, always
  *   present when the inline axis isn't scrollable (`axis="block"`).
  * @attr [at-inline-end] - Reflected, computed. The inline-end equivalent of `at-inline-start`.
+ *   Initial boundary attributes settle in the first animation frame after
+ *   mount so multiple scrollers can share one layout sampling phase.
  *
  * @cssprop [--rc-scroller-overscroll-behavior=contain] - Overscroll behavior on enabled axes.
  * @cssprop [--rc-scroller-overflow-anchor=auto] - Browser scroll anchoring behavior.
@@ -57,11 +61,19 @@ export declare class RCScroller extends LitElement {
     /** Reflected, computed. See the class doc comment. */
     atInlineEnd: boolean;
     private _resizeObserver;
+    private readonly _frame;
     connectedCallback(): void;
     firstUpdated(): void;
     disconnectedCallback(): void;
-    protected render(): import('lit').TemplateResult<1>;
+    protected render(): import('lit-html').TemplateResult<1>;
     protected updated(changed: Map<PropertyKey, unknown>): void;
+    /**
+     * Scroll and resize can fire several times per frame, and every evaluation
+     * reads layout, so boundary state is recomputed at most once per frame.
+     */
     private readonly _onScroll;
-    private _evaluateBoundaries;
+    private _edges;
+    private _queueBoundaryEvaluation;
+    private _sampleBoundaries;
+    private _applyBoundaries;
 }

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Design-system-neutral native scroll region with optional content and fullbleed layout tracks.",
   "repository": {
     "type": "git",
@@ -44,6 +44,9 @@
     "test:browser:chrome": "vitest --run --project=chromium",
     "test:browser:firefox": "vitest --run --project=firefox"
   },
+  "dependencies": {
+    "@rcarls/rc-common": "0.7.0"
+  },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.11.0",
     "@vitest/browser-playwright": "4.1.5",

package/dist/rc-scroller-BvfVYwVD.js

@@ -1,125 +0,0 @@
-import { css as b, LitElement as u, html as v } from "lit";
-import { property as o } from "lit/decorators.js";
-const p = b`
-  :host {
-    display: block;
-    min-inline-size: 0;
-    min-block-size: 0;
-    overflow-inline: hidden;
-    overflow-block: auto;
-    overscroll-behavior-block: var(--rc-scroller-overscroll-behavior, contain);
-    overflow-anchor: var(--rc-scroller-overflow-anchor, auto);
-    scrollbar-width: var(--rc-scroller-scrollbar-width, auto);
-    scrollbar-color: var(--rc-scroller-scrollbar-color, auto);
-    box-sizing: border-box;
-  }
-
-  :host([hidden]) {
-    display: none;
-  }
-
-  :host([axis='inline']) {
-    overflow-inline: auto;
-    overflow-block: hidden;
-    overscroll-behavior-inline: var(--rc-scroller-overscroll-behavior, contain);
-    overscroll-behavior-block: auto;
-  }
-
-  :host([axis='both']) {
-    overflow-inline: auto;
-    overflow-block: auto;
-    overscroll-behavior: var(--rc-scroller-overscroll-behavior, contain);
-  }
-
-  [part='content'] {
-    display: block;
-    min-inline-size: 0;
-    min-block-size: 0;
-    box-sizing: border-box;
-  }
-
-  :host([layout='content']) [part='content'] {
-    display: grid;
-    grid-template-columns:
-      [fullbleed-start] minmax(var(--rc-scroller-content-padding-inline, 1rem), 1fr)
-      [content-start] minmax(0, var(--rc-scroller-content-max-inline-size, 100%))
-      [content-end] minmax(var(--rc-scroller-content-padding-inline, 1rem), 1fr)
-      [fullbleed-end];
-    grid-auto-rows: min-content;
-    row-gap: var(--rc-scroller-content-row-gap, 0);
-  }
-
-  :host([layout='content']) ::slotted(*) {
-    grid-column: content;
-    min-inline-size: 0;
-  }
-
-  :host([layout='content']) ::slotted([data-rc-scroller-span='fullbleed']) {
-    grid-column: fullbleed;
-    inline-size: 100%;
-  }
-`;
-var f = Object.defineProperty, l = (h, t, i, n) => {
-  for (var e = void 0, c = h.length - 1, d; c >= 0; c--)
-    (d = h[c]) && (e = d(t, i, e) || e);
-  return e && f(t, i, e), e;
-};
-const s = 4, a = class a extends u {
-  constructor() {
-    super(...arguments), this.axis = "block", this.layout = "none", this.atBlockStart = !0, this.atBlockEnd = !0, this.atInlineStart = !0, this.atInlineEnd = !0, this._resizeObserver = null, this._onScroll = () => this._evaluateBoundaries();
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.addEventListener("scroll", this._onScroll, { passive: !0 }), typeof ResizeObserver == "function" && (this._resizeObserver = new ResizeObserver(this._onScroll), this._resizeObserver.observe(this));
-  }
-  firstUpdated() {
-    this._evaluateBoundaries();
-  }
-  disconnectedCallback() {
-    this.removeEventListener("scroll", this._onScroll), this._resizeObserver?.disconnect(), this._resizeObserver = null, super.disconnectedCallback();
-  }
-  render() {
-    return v`<div part="content"><slot></slot></div>`;
-  }
-  updated(t) {
-    (t.has("axis") || t.has("layout")) && this._evaluateBoundaries();
-  }
-  _evaluateBoundaries() {
-    const t = this.axis !== "inline", i = this.axis !== "block";
-    if (t) {
-      const n = this.scrollHeight - this.clientHeight;
-      this.atBlockStart = this.scrollTop <= s, this.atBlockEnd = this.scrollTop >= n - s;
-    } else
-      this.atBlockStart = !0, this.atBlockEnd = !0;
-    if (i) {
-      const n = this.scrollWidth - this.clientWidth, e = getComputedStyle(this).direction === "rtl" ? Math.abs(this.scrollLeft) : this.scrollLeft;
-      this.atInlineStart = e <= s, this.atInlineEnd = e >= n - s;
-    } else
-      this.atInlineStart = !0, this.atInlineEnd = !0;
-  }
-};
-a.styles = p, a.enabledWarnings = (u.enabledWarnings ?? []).filter(
-  (t) => t !== "change-in-update"
-);
-let r = a;
-l([
-  o({ reflect: !0 })
-], r.prototype, "axis");
-l([
-  o({ reflect: !0 })
-], r.prototype, "layout");
-l([
-  o({ type: Boolean, reflect: !0, attribute: "at-block-start" })
-], r.prototype, "atBlockStart");
-l([
-  o({ type: Boolean, reflect: !0, attribute: "at-block-end" })
-], r.prototype, "atBlockEnd");
-l([
-  o({ type: Boolean, reflect: !0, attribute: "at-inline-start" })
-], r.prototype, "atInlineStart");
-l([
-  o({ type: Boolean, reflect: !0, attribute: "at-inline-end" })
-], r.prototype, "atInlineEnd");
-export {
-  r as R
-};
-//# sourceMappingURL=rc-scroller-BvfVYwVD.js.map

package/dist/rc-scroller-BvfVYwVD.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"rc-scroller-BvfVYwVD.js","sources":["../src/rc-scroller.styles.ts","../src/rc-scroller.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const scrollerStyles = css`\n  :host {\n    display: block;\n    min-inline-size: 0;\n    min-block-size: 0;\n    overflow-inline: hidden;\n    overflow-block: auto;\n    overscroll-behavior-block: var(--rc-scroller-overscroll-behavior, contain);\n    overflow-anchor: var(--rc-scroller-overflow-anchor, auto);\n    scrollbar-width: var(--rc-scroller-scrollbar-width, auto);\n    scrollbar-color: var(--rc-scroller-scrollbar-color, auto);\n    box-sizing: border-box;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host([axis='inline']) {\n    overflow-inline: auto;\n    overflow-block: hidden;\n    overscroll-behavior-inline: var(--rc-scroller-overscroll-behavior, contain);\n    overscroll-behavior-block: auto;\n  }\n\n  :host([axis='both']) {\n    overflow-inline: auto;\n    overflow-block: auto;\n    overscroll-behavior: var(--rc-scroller-overscroll-behavior, contain);\n  }\n\n  [part='content'] {\n    display: block;\n    min-inline-size: 0;\n    min-block-size: 0;\n    box-sizing: border-box;\n  }\n\n  :host([layout='content']) [part='content'] {\n    display: grid;\n    grid-template-columns:\n      [fullbleed-start] minmax(var(--rc-scroller-content-padding-inline, 1rem), 1fr)\n      [content-start] minmax(0, var(--rc-scroller-content-max-inline-size, 100%))\n      [content-end] minmax(var(--rc-scroller-content-padding-inline, 1rem), 1fr)\n      [fullbleed-end];\n    grid-auto-rows: min-content;\n    row-gap: var(--rc-scroller-content-row-gap, 0);\n  }\n\n  :host([layout='content']) ::slotted(*) {\n    grid-column: content;\n    min-inline-size: 0;\n  }\n\n  :host([layout='content']) ::slotted([data-rc-scroller-span='fullbleed']) {\n    grid-column: fullbleed;\n    inline-size: 100%;\n  }\n`;\n\nexport default scrollerStyles;\n","import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport scrollerStyles from './rc-scroller.styles.js';\n\nexport type RCScrollerAxis = 'block' | 'inline' | 'both';\nexport type RCScrollerLayout = 'none' | 'content';\n\n/** Pixels of remaining scroll distance below which an edge counts as reached. */\nconst BOUNDARY_THRESHOLD = 4;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'rc-scroller': RCScroller;\n  }\n}\n\n/**\n * Design-system-neutral native scroll region with optional content and\n * fullbleed layout tracks. The custom element host is the scroll container,\n * so native scrolling APIs and events work directly on `<rc-scroller>`.\n *\n * With `layout=\"content\"`, direct children use the centered content track.\n * Add `data-rc-scroller-span=\"fullbleed\"` to a direct child to span the full\n * available inline size. This child attribute is a layout convention rather\n * than component state.\n *\n * The author owns the accessible name and landmark semantics when the region\n * needs them. The component does not add `role` or `tabindex` automatically.\n *\n * @slot - Scrollable content.\n *\n * @csspart content - Wrapper for the default slot and optional layout grid.\n *\n * @attr axis - Scroll axis: `block`, `inline`, or `both`.\n * @attr layout - Layout mode: `none` or `content`.\n * @attr [at-block-start] - Reflected, computed. Present when scrolled to (within a few\n *   pixels of) the block-start edge, or when the block axis isn't scrollable\n *   (`axis=\"inline\"`) — nothing more to reveal counts as already at both edges.\n * @attr [at-block-end] - Reflected, computed. The block-end equivalent of `at-block-start`.\n * @attr [at-inline-start] - Reflected, computed. The inline-start equivalent, always\n *   present when the inline axis isn't scrollable (`axis=\"block\"`).\n * @attr [at-inline-end] - Reflected, computed. The inline-end equivalent of `at-inline-start`.\n *\n * @cssprop [--rc-scroller-overscroll-behavior=contain] - Overscroll behavior on enabled axes.\n * @cssprop [--rc-scroller-overflow-anchor=auto] - Browser scroll anchoring behavior.\n * @cssprop [--rc-scroller-scrollbar-width=auto] - Scrollbar width.\n * @cssprop [--rc-scroller-scrollbar-color=auto] - Scrollbar thumb and track colors.\n * @cssprop [--rc-scroller-content-padding-inline=1rem] - Minimum inline gutter in content layout.\n * @cssprop [--rc-scroller-content-max-inline-size=100%] - Maximum width of the content track.\n * @cssprop [--rc-scroller-content-row-gap=0] - Gap between rows in content layout.\n */\nexport class RCScroller extends LitElement {\n  static override styles = scrollerStyles;\n\n  // Boundary state can only be measured after render, so the reflected edge\n  // properties intentionally schedule one follow-up update.\n  static override enabledWarnings = (LitElement.enabledWarnings ?? []).filter(\n    (warning) => warning !== 'change-in-update',\n  );\n\n  /** Scroll axis. */\n  @property({ reflect: true })\n  axis: RCScrollerAxis = 'block';\n\n  /** Optional child layout. */\n  @property({ reflect: true })\n  layout: RCScrollerLayout = 'none';\n\n  /** Reflected, computed. See the class doc comment. */\n  @property({ type: Boolean, reflect: true, attribute: 'at-block-start' })\n  atBlockStart = true;\n\n  /** Reflected, computed. See the class doc comment. */\n  @property({ type: Boolean, reflect: true, attribute: 'at-block-end' })\n  atBlockEnd = true;\n\n  /** Reflected, computed. See the class doc comment. */\n  @property({ type: Boolean, reflect: true, attribute: 'at-inline-start' })\n  atInlineStart = true;\n\n  /** Reflected, computed. See the class doc comment. */\n  @property({ type: Boolean, reflect: true, attribute: 'at-inline-end' })\n  atInlineEnd = true;\n\n  private _resizeObserver: ResizeObserver | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    this.addEventListener('scroll', this._onScroll, { passive: true });\n\n    if (typeof ResizeObserver === 'function') {\n      this._resizeObserver = new ResizeObserver(this._onScroll);\n      this._resizeObserver.observe(this);\n    }\n  }\n\n  override firstUpdated(): void {\n    // Only accurate once the shadow DOM (and slotted content) has actually\n    // rendered — connectedCallback runs before Lit's first render, when\n    // scrollWidth/clientHeight etc. don't yet reflect real layout. Also\n    // covers connecting already scrolled (bfcache restore, fragment nav)\n    // rather than waiting for the first scroll/resize event.\n    this._evaluateBoundaries();\n  }\n\n  override disconnectedCallback(): void {\n    this.removeEventListener('scroll', this._onScroll);\n    this._resizeObserver?.disconnect();\n    this._resizeObserver = null;\n\n    super.disconnectedCallback();\n  }\n\n  protected override render() {\n    return html`<div part=\"content\"><slot></slot></div>`;\n  }\n\n  protected override updated(changed: Map<PropertyKey, unknown>): void {\n    if (changed.has('axis') || changed.has('layout')) {\n      this._evaluateBoundaries();\n    }\n  }\n\n  private readonly _onScroll = (): void => this._evaluateBoundaries();\n\n  private _evaluateBoundaries(): void {\n    const blockScrollable = this.axis !== 'inline';\n    const inlineScrollable = this.axis !== 'block';\n\n    if (blockScrollable) {\n      const maxScrollTop = this.scrollHeight - this.clientHeight;\n\n      this.atBlockStart = this.scrollTop <= BOUNDARY_THRESHOLD;\n      this.atBlockEnd = this.scrollTop >= maxScrollTop - BOUNDARY_THRESHOLD;\n    } else {\n      this.atBlockStart = true;\n      this.atBlockEnd = true;\n    }\n\n    if (inlineScrollable) {\n      const maxScrollLeft = this.scrollWidth - this.clientWidth;\n      const inlineOffset =\n        getComputedStyle(this).direction === 'rtl' ? Math.abs(this.scrollLeft) : this.scrollLeft;\n\n      this.atInlineStart = inlineOffset <= BOUNDARY_THRESHOLD;\n      this.atInlineEnd = inlineOffset >= maxScrollLeft - BOUNDARY_THRESHOLD;\n    } else {\n      this.atInlineStart = true;\n      this.atInlineEnd = true;\n    }\n  }\n}\n"],"names":["scrollerStyles","css","BOUNDARY_THRESHOLD","_RCScroller","LitElement","html","changed","blockScrollable","inlineScrollable","maxScrollTop","maxScrollLeft","inlineOffset","warning","RCScroller","__decorateClass","property"],"mappings":"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"}