@rcarls/rc-scroller 0.5.0

package/README.md

@@ -0,0 +1,59 @@
+# @rcarls/rc-scroller
+
+Design-system-neutral native scroll region with an optional centered content
+layout and fullbleed track.
+
+```html
+<rc-scroller layout="content" role="region" aria-label="Recipes">
+  <header data-rc-scroller-span="fullbleed">Recipes</header>
+  <article>Apple pie</article>
+</rc-scroller>
+```
+
+The custom element host is the native scrollport, so `scrollTop`, `scrollTo()`,
+the `scroll` event, scroll restoration, and scroll observers work directly on
+`<rc-scroller>`. Give the host a definite block size when it should scroll.
+
+`axis` accepts `block` (the default), `inline`, or `both`. `layout` accepts
+`none` (the default) or `content`. In content layout, direct children use the
+centered content track; a direct child with
+`data-rc-scroller-span="fullbleed"` spans the available inline size.
+
+The component intentionally adds no landmark role, accessible name, or
+`tabindex`. Add native semantics to the host when the surrounding document
+requires them.
+
+## Scroll-boundary state
+
+`at-block-start`, `at-block-end`, `at-inline-start`, and `at-inline-end` are
+reflected, read-only attributes: present when the host is scrolled to (within
+a few pixels of) that edge on an enabled axis, or when that axis isn't
+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:
+
+```css
+rc-scroller[axis='inline'] {
+  mask-image: linear-gradient(
+    to right,
+    transparent,
+    black 24px,
+    black calc(100% - 24px),
+    transparent
+  );
+}
+
+rc-scroller[axis='inline'][at-inline-start] {
+  mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
+}
+
+rc-scroller[axis='inline'][at-inline-end] {
+  mask-image: linear-gradient(to right, transparent, black 24px);
+}
+```
+
+The component only tracks and reflects this state: it makes no visual
+decision of its own about how (or whether) to show it.
+
+Import `@rcarls/rc-scroller` to use the class without registering it, or import
+`@rcarls/rc-scroller/define` to register `<rc-scroller>`.

package/dist/custom-elements.json

@@ -0,0 +1,274 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/define.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "rc-scroller",
+          "declaration": {
+            "name": "RCScroller",
+            "module": "/src/index.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/index.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/rc-scroller.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/rc-scroller.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Design-system-neutral native scroll region with optional content and\nfullbleed layout tracks. The custom element host is the scroll container,\nso native scrolling APIs and events work directly on `<rc-scroller>`.\n\nWith `layout=\"content\"`, direct children use the centered content track.\nAdd `data-rc-scroller-span=\"fullbleed\"` to a direct child to span the full\navailable inline size. This child attribute is a layout convention rather\nthan component state.\n\nThe author owns the accessible name and landmark semantics when the region\nneeds them. The component does not add `role` or `tabindex` automatically.",
+          "name": "RCScroller",
+          "cssProperties": [
+            {
+              "description": "Overscroll behavior on enabled axes.",
+              "name": "--rc-scroller-overscroll-behavior",
+              "default": "contain"
+            },
+            {
+              "description": "Browser scroll anchoring behavior.",
+              "name": "--rc-scroller-overflow-anchor",
+              "default": "auto"
+            },
+            {
+              "description": "Scrollbar width.",
+              "name": "--rc-scroller-scrollbar-width",
+              "default": "auto"
+            },
+            {
+              "description": "Scrollbar thumb and track colors.",
+              "name": "--rc-scroller-scrollbar-color",
+              "default": "auto"
+            },
+            {
+              "description": "Minimum inline gutter in content layout.",
+              "name": "--rc-scroller-content-padding-inline",
+              "default": "1rem"
+            },
+            {
+              "description": "Maximum width of the content track.",
+              "name": "--rc-scroller-content-max-inline-size",
+              "default": "100%"
+            },
+            {
+              "description": "Gap between rows in content layout.",
+              "name": "--rc-scroller-content-row-gap",
+              "default": "0"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "Wrapper for the default slot and optional layout grid.",
+              "name": "content"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Scrollable content.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "enabledWarnings",
+              "static": true
+            },
+            {
+              "kind": "field",
+              "name": "axis",
+              "type": {
+                "text": "RCScrollerAxis"
+              },
+              "default": "'block'",
+              "description": "Scroll axis.",
+              "attribute": "axis",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "layout",
+              "type": {
+                "text": "RCScrollerLayout"
+              },
+              "default": "'none'",
+              "description": "Optional child layout.",
+              "attribute": "layout",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "atBlockStart",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Reflected, computed. See the class doc comment.",
+              "attribute": "at-block-start",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "atBlockEnd",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Reflected, computed. See the class doc comment.",
+              "attribute": "at-block-end",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "atInlineStart",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Reflected, computed. See the class doc comment.",
+              "attribute": "at-inline-start",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "atInlineEnd",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Reflected, computed. See the class doc comment.",
+              "attribute": "at-inline-end",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "_resizeObserver",
+              "type": {
+                "text": "ResizeObserver | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "_onScroll",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "_evaluateBoundaries",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "description": "Scroll axis.",
+              "name": "axis",
+              "type": {
+                "text": "RCScrollerAxis"
+              },
+              "default": "'block'",
+              "fieldName": "axis"
+            },
+            {
+              "description": "Optional child layout.",
+              "name": "layout",
+              "type": {
+                "text": "RCScrollerLayout"
+              },
+              "default": "'none'",
+              "fieldName": "layout"
+            },
+            {
+              "description": "Reflected, computed. See the class doc comment.",
+              "name": "at-block-start",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "fieldName": "atBlockStart"
+            },
+            {
+              "description": "Reflected, computed. See the class doc comment.",
+              "name": "at-block-end",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "fieldName": "atBlockEnd"
+            },
+            {
+              "description": "Reflected, computed. See the class doc comment.",
+              "name": "at-inline-start",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "fieldName": "atInlineStart"
+            },
+            {
+              "description": "Reflected, computed. See the class doc comment.",
+              "name": "at-inline-end",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "fieldName": "atInlineEnd"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "rc-scroller",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "RCScroller",
+          "declaration": {
+            "name": "RCScroller",
+            "module": "src/rc-scroller.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/rc-scroller-BvfVYwVD.js

@@ -0,0 +1,125 @@
+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

@@ -0,0 +1 @@
+{"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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"}

package/dist/rc-scroller-define.js

@@ -0,0 +1,6 @@
+import { R as e } from "./rc-scroller-BvfVYwVD.js";
+customElements.get("rc-scroller") || customElements.define("rc-scroller", e);
+export {
+  e as RCScroller
+};
+//# sourceMappingURL=rc-scroller-define.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rc-scroller-define.js","sources":["../src/define.ts"],"sourcesContent":["import { RCScroller } from './index.js';\n\ncustomElements.get('rc-scroller') || customElements.define('rc-scroller', RCScroller);\n\nexport * from './index.js';\n"],"names":["RCScroller"],"mappings":";AAEA,eAAe,IAAI,aAAa,KAAK,eAAe,OAAO,eAAeA,CAAU;"}

package/dist/rc-scroller.js

@@ -0,0 +1,5 @@
+import { R as e } from "./rc-scroller-BvfVYwVD.js";
+export {
+  e as RCScroller
+};
+//# sourceMappingURL=rc-scroller.js.map

package/dist/rc-scroller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-scroller.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -0,0 +1 @@
+export * from './index.js';

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

@@ -0,0 +1 @@
+export * from './rc-scroller.js';

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

@@ -0,0 +1,67 @@
+import { LitElement } from 'lit';
+export type RCScrollerAxis = 'block' | 'inline' | 'both';
+export type RCScrollerLayout = 'none' | 'content';
+declare global {
+    interface HTMLElementTagNameMap {
+        'rc-scroller': RCScroller;
+    }
+}
+/**
+ * Design-system-neutral native scroll region with optional content and
+ * fullbleed layout tracks. The custom element host is the scroll container,
+ * so native scrolling APIs and events work directly on `<rc-scroller>`.
+ *
+ * With `layout="content"`, direct children use the centered content track.
+ * Add `data-rc-scroller-span="fullbleed"` to a direct child to span the full
+ * available inline size. This child attribute is a layout convention rather
+ * than component state.
+ *
+ * The author owns the accessible name and landmark semantics when the region
+ * needs them. The component does not add `role` or `tabindex` automatically.
+ *
+ * @slot - Scrollable content.
+ *
+ * @csspart content - Wrapper for the default slot and optional layout grid.
+ *
+ * @attr axis - Scroll axis: `block`, `inline`, or `both`.
+ * @attr layout - Layout mode: `none` or `content`.
+ * @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.
+ * @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`.
+ *
+ * @cssprop [--rc-scroller-overscroll-behavior=contain] - Overscroll behavior on enabled axes.
+ * @cssprop [--rc-scroller-overflow-anchor=auto] - Browser scroll anchoring behavior.
+ * @cssprop [--rc-scroller-scrollbar-width=auto] - Scrollbar width.
+ * @cssprop [--rc-scroller-scrollbar-color=auto] - Scrollbar thumb and track colors.
+ * @cssprop [--rc-scroller-content-padding-inline=1rem] - Minimum inline gutter in content layout.
+ * @cssprop [--rc-scroller-content-max-inline-size=100%] - Maximum width of the content track.
+ * @cssprop [--rc-scroller-content-row-gap=0] - Gap between rows in content layout.
+ */
+export declare class RCScroller extends LitElement {
+    static styles: import('lit').CSSResult;
+    static enabledWarnings: ("migration" | "async-perform-update")[];
+    /** Scroll axis. */
+    axis: RCScrollerAxis;
+    /** Optional child layout. */
+    layout: RCScrollerLayout;
+    /** Reflected, computed. See the class doc comment. */
+    atBlockStart: boolean;
+    /** Reflected, computed. See the class doc comment. */
+    atBlockEnd: boolean;
+    /** Reflected, computed. See the class doc comment. */
+    atInlineStart: boolean;
+    /** Reflected, computed. See the class doc comment. */
+    atInlineEnd: boolean;
+    private _resizeObserver;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    protected render(): import('lit').TemplateResult<1>;
+    protected updated(changed: Map<PropertyKey, unknown>): void;
+    private readonly _onScroll;
+    private _evaluateBoundaries;
+}

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

@@ -0,0 +1,2 @@
+export declare const scrollerStyles: import('lit').CSSResult;
+export default scrollerStyles;

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@rcarls/rc-scroller",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.5.0",
+  "description": "Design-system-neutral native scroll region with optional content and fullbleed layout tracks.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/richardcarls/rc-webcomponents.git",
+    "directory": "packages/rc-scroller"
+  },
+  "homepage": "https://richardcarls.github.io/rc-webcomponents/components/rc-scroller",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/rc-scroller.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types/packages/rc-scroller/src/index.d.ts",
+        "default": "./dist/rc-scroller.js"
+      }
+    },
+    "./define": {
+      "import": {
+        "types": "./dist/types/packages/rc-scroller/src/define.d.ts",
+        "default": "./dist/rc-scroller-define.js"
+      }
+    }
+  },
+  "types": "./dist/types/packages/rc-scroller/src/index.d.ts",
+  "sideEffects": [
+    "./dist/rc-scroller-define.js"
+  ],
+  "customElements": "dist/custom-elements.json",
+  "scripts": {
+    "build": "tsc && vite build && cem analyze",
+    "cem:analyze": "cem analyze",
+    "preview": "vite preview",
+    "test:browser": "vitest --run",
+    "test:browser:chrome": "vitest --run --project=chromium",
+    "test:browser:firefox": "vitest --run --project=firefox"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "0.11.0",
+    "@vitest/browser-playwright": "4.1.5",
+    "lit": "^3.0.0",
+    "playwright": "^1.56.0",
+    "rollup": "^4.60.2",
+    "typescript": "~5.9.3",
+    "vite": "^7.1.7",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.6",
+    "vitest-browser-lit": "^1.0.1"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0"
+  }
+}