overflowed 0.0.0-experimental-20230103160007 → 0.0.0-experimental-005

package/README.md

@@ -1,50 +1,16 @@
-# Overflowed
+TODO:
 
-Overflowed is a small library allowing you to make your websites more responsive with collapsible
-lists. It's currently in it's alpha stage and the APIs are potentially unstable, but I aim to
-satisfy the following goals before a stable version.
+infinite scroll interactive scroll arrow
 
-- ⚛️ Works across all major frameworks
-- 🌳 Lightweight and dependency-free, tree-shakable
-- 🏗️ Includes strongly typed TypeScript declarations
-- 🎨 Infinitely customizable, sensible defaults
-- ⚡ Highly optimized and performant
-- 📚 Clean API and comprehensive documentation
-- ♿ Encourages accessible practices
-- ↩️ Supports right-to-left writing modes
-- 🦄 Ponyfills can be provided
-- ⚙️ Supports SSR and environments without JS
-- 🧩 Ships with ESM and CJS bundles
+overflow container:
 
-## Installation
+- mutation observer to automatically register the items and overflow
+- add index to the items? mirror item style fully?
+- trigger event when overflow count changes
+- todo: ensure it doesn't fully collapse when no overflow element exists
+- make it work with column-reverse and row-reverse
 
-```
-npm install overflowed
-yarn add overflowed
-pnpm add overflowed
-```
+probably should wait a while before shipping this:
 
-## Progress
-
-- [ ] Documentation
-  - [ ] Getting started
-    - [ ] React
-    - [ ] Vue.js
-    - [ ] Svelte
-    - [ ] Preact
-    - [ ] SolidJS
-  - [ ] Examples
-  - [ ] Playground
-- [ ] `overflowed/core`
-- [ ] `overflowed/react`
-  - [ ] `useOverflowedItems`
-- [ ] `overflowed/vue`
-- [ ] `overflowed/svelte`
-  - [ ] `overflowedItems`
-- [ ] `overflowed/preact`
-- [ ] `overflowed/solid`
-
-## Usage
-
-Check out the [examples](https://overflowed.aht.cx/examples) to see the library being used in
-various scenarios and it's implementations.
+- use css anchor positioning instead of mirror element thingy? releases in firefox 147
+- @container scroll-state

package/box-mirror/HTMLBoxMirror.css

@@ -0,0 +1,15 @@
+:host {
+	visibility: hidden;
+	max-inline-size: 100%;
+	max-block-size: 100%;
+}
+
+:host([box-sizing="content-box"]) {
+	inline-size: var(--content-box-inline-size);
+	block-size: var(--content-box-block-size);
+}
+
+:host([box-sizing="border-box"]) {
+	inline-size: var(--border-box-inline-size);
+	block-size: var(--border-box-block-size);
+}

package/box-mirror/HTMLBoxMirror.ts

@@ -0,0 +1,99 @@
+import styles from "./HTMLBoxMirror.css?raw" with { type: "text" };
+
+export class HTMLBoxMirror extends HTMLElement {
+	private readonly rootStyleSheet = new CSSStyleSheet();
+	private readonly variableStyleSheet = new CSSStyleSheet();
+
+	private readonly resizeObserver = new ResizeObserver(this.handleResize.bind(this));
+
+	public connectedCallback() {
+		this.rootStyleSheet.replaceSync(styles);
+
+		const shadowRoot = this.attachShadow({ mode: "open" });
+		shadowRoot.adoptedStyleSheets = [this.rootStyleSheet, this.variableStyleSheet];
+
+		shadowRoot.appendChild(this.ownerDocument.createElement("slot"));
+	}
+
+	public disconnectedCallback() {
+		this.resizeObserver.disconnect();
+	}
+
+	private handleResize(entries: ResizeObserverEntry[]) {
+		const [entry, ...remainingEntries] = entries;
+		if (!entry) throw 1;
+		if (remainingEntries.length > 0) throw 1;
+
+		const [borderBox, ...borderBoxRest] = entry.borderBoxSize;
+		if (!borderBox || borderBoxRest.length > 0) throw 1;
+
+		const [contentBox, ...contentBoxRest] = entry.contentBoxSize;
+		if (!contentBox || contentBoxRest.length > 0) throw 1;
+
+		if (
+			this.behavior === "ignore-hidden" &&
+			entry.target instanceof HTMLElement &&
+			entry.target.hidden &&
+			borderBox.blockSize === 0 && borderBox.inlineSize === 0 &&
+			contentBox.blockSize === 0 && contentBox.inlineSize === 0
+		) {
+			return;
+		}
+
+		this.variableStyleSheet.replaceSync(`
+			:host {
+				--border-box-block-size: ${borderBox.blockSize}px;
+				--border-box-inline-size: ${borderBox.inlineSize}px;
+				--content-box-block-size: ${contentBox.blockSize}px;
+				--content-box-inline-size: ${contentBox.inlineSize}px;
+			}
+		`);
+	}
+
+	#target?: Element | null;
+	get target() {
+		return this.#target ?? null;
+	}
+	set target(value) {
+		this.resizeObserver.disconnect();
+		if (value) this.resizeObserver.observe(value);
+
+		this.#target = value;
+	}
+
+	static #BOX_SIZING_ATTRIBUTE = "box-sizing" as const;
+	get boxSizing() {
+		return this.getAttribute(HTMLBoxMirror.#BOX_SIZING_ATTRIBUTE) as "border-box" | "content-box" | null;
+	}
+	set boxSizing(value) {
+		if (value) {
+			this.setAttribute(HTMLBoxMirror.#BOX_SIZING_ATTRIBUTE, value);
+		} else {
+			this.removeAttribute(HTMLBoxMirror.#BOX_SIZING_ATTRIBUTE);
+		}
+	}
+
+	static #BEHAVIOR_ATTRIBUTE = "behavior" as const;
+	get behavior() {
+		return this.getAttribute(HTMLBoxMirror.#BEHAVIOR_ATTRIBUTE) as "ignore-hidden" | null;
+	}
+	set behavior(value) {
+		if (value) {
+			this.setAttribute(HTMLBoxMirror.#BEHAVIOR_ATTRIBUTE, value);
+		} else {
+			this.removeAttribute(HTMLBoxMirror.#BEHAVIOR_ATTRIBUTE);
+		}
+	}
+
+	static isHTMLBoxMirror(value: unknown) {
+		return value instanceof HTMLBoxMirror;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"box-mirror": HTMLBoxMirror;
+	}
+}
+
+globalThis.customElements.define("box-mirror", HTMLBoxMirror);

package/content-mirror/HTMLContentMirror.css

@@ -0,0 +1,3 @@
+:host {
+	display: contents;
+}

package/content-mirror/HTMLContentMirror.ts

@@ -0,0 +1,43 @@
+import styles from "./HTMLContentMirror.css?raw" with { type: "text" };
+
+export class HTMLContentMirror extends HTMLElement {
+	private readonly styleSheet = new CSSStyleSheet();
+
+	readonly #mutationObserver = new MutationObserver(this.#cloneTargetToShadowRoot.bind(this));
+
+	connectedCallback() {
+		this.styleSheet.replaceSync(styles);
+
+		const shadowRoot = this.attachShadow({ mode: "open" });
+		shadowRoot.adoptedStyleSheets = [this.styleSheet];
+	}
+
+	#target?: Element;
+	get target() {
+		return this.#target;
+	}
+	set target(value: Element | undefined) {
+		this.#target = value;
+
+		this.#mutationObserver.disconnect();
+		if (value) {
+			this.#mutationObserver.observe(value, {
+				childList: true,
+				attributes: true,
+				characterData: true,
+				subtree: true,
+			});
+		}
+
+		this.#cloneTargetToShadowRoot();
+	}
+
+	#cloneTargetToShadowRoot() {
+		if (!this.shadowRoot) throw 0;
+		if (!this.#target) throw 1;
+
+		this.shadowRoot.replaceChildren(this.#target.cloneNode(true));
+	}
+}
+
+globalThis.customElements.define("content-mirror", HTMLContentMirror);

package/dist/mod.d.ts

@@ -0,0 +1,54 @@
+//#region box-mirror/HTMLBoxMirror.d.ts
+declare class HTMLBoxMirror extends HTMLElement {
+  #private;
+  private readonly rootStyleSheet;
+  private readonly variableStyleSheet;
+  private readonly resizeObserver;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  private handleResize;
+  get target(): Element;
+  set target(value: Element);
+  get boxSizing(): "border-box" | "content-box" | null;
+  set boxSizing(value: "border-box" | "content-box" | null);
+  get behavior(): "ignore-hidden" | null;
+  set behavior(value: "ignore-hidden" | null);
+  static isHTMLBoxMirror(value: unknown): value is HTMLBoxMirror;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "box-mirror": HTMLBoxMirror;
+  }
+} //# sourceMappingURL=HTMLBoxMirror.d.ts.map
+//#endregion
+//#region overflow-container/HTMLOverflowContainerElement.d.ts
+declare class HTMLOverflowContainerElement extends HTMLElement {
+  private readonly rootStyleSheet;
+  private readonly variableStyleSheet;
+  private readonly overflowStyleSheet;
+  private readonly childrenSlot;
+  private readonly overflowSlot;
+  private readonly containerMirror;
+  private readonly overflowResizeObserver;
+  private readonly elementIsIntersectingMap;
+  private readonly intersectionObserver;
+  constructor();
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  private registerItemElement;
+  private registerOverflowElement;
+  private handleIntersection;
+  private updateInlineGap;
+  private handleResize;
+  private getItemElements;
+  private getOverflowElements;
+  private static isHTMLElement;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "overflow-container": HTMLOverflowContainerElement;
+  }
+} //# sourceMappingURL=HTMLOverflowContainerElement.d.ts.map
+//#endregion
+export { HTMLBoxMirror, HTMLOverflowContainerElement };
+//# sourceMappingURL=mod.d.ts.map

package/dist/mod.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mod.d.ts","names":[],"sources":["../box-mirror/HTMLBoxMirror.ts","../overflow-container/HTMLOverflowContainerElement.ts"],"mappings":";cAEa,aAAA,SAAsB,WAAA;EAAA;mBACjB,cAAA;EAAA,iBACA,kBAAA;EAAA,iBAEA,cAAA;EAEV,iBAAA,CAAA;EASA,oBAAA,CAAA;EAAA,QAIC,YAAA;EAAA,IAgCJ,MAAA,CAAA,GAAM,OAAA;EAAA,IAGN,MAAA,CAAO,KAAA,EAAK,OAAA;EAAA,IAQZ,SAAA,CAAA;EAAA,IAGA,SAAA,CAAU,KAAA;EAAA,IASV,QAAA,CAAA;EAAA,IAGA,QAAA,CAAS,KAAA;EAAA,OAQN,eAAA,CAAgB,KAAA,YAAc,KAAA,IAAA,aAAA;AAAA;AAAA,QAK9B,MAAA;EAAA,UACG,qBAAA;IACT,YAAA,EAAc,aAAA;EAAA;AAAA;;;cCzFH,4BAAA,SAAqC,WAAA;EAAA,iBAChC,cAAA;EAAA,iBACA,kBAAA;EAAA,iBACA,kBAAA;EAAA,iBAEA,YAAA;EAAA,iBACA,YAAA;EAAA,iBAEA,eAAA;EAAA,iBAEA,sBAAA;EAAA,iBAEA,wBAAA;EAAA,iBACA,oBAAA;;EAuBjB,iBAAA,CAAA;EAaO,oBAAA,CAAA;EAAA,QAKC,mBAAA;EAAA,QAaA,uBAAA;EAAA,QAYA,kBAAA;EAAA,QAgCA,eAAA;EAAA,QAYA,YAAA;EAAA,QAmBA,eAAA;EAAA,QAMA,mBAAA;EAAA,eAMO,aAAA;AAAA;AAAA,QAKR,MAAA;EAAA,UACG,qBAAA;IACT,oBAAA,EAAsB,4BAAA;EAAA;AAAA"}

package/dist/mod.js

@@ -0,0 +1,189 @@
+//#region box-mirror/HTMLBoxMirror.css?raw
+var HTMLBoxMirror_default = ":host {\n	visibility: hidden;\n	max-inline-size: 100%;\n	max-block-size: 100%;\n}\n\n:host([box-sizing=\"content-box\"]) {\n	inline-size: var(--content-box-inline-size);\n	block-size: var(--content-box-block-size);\n}\n\n:host([box-sizing=\"border-box\"]) {\n	inline-size: var(--border-box-inline-size);\n	block-size: var(--border-box-block-size);\n}\n";
+
+//#endregion
+//#region box-mirror/HTMLBoxMirror.ts
+var HTMLBoxMirror = class HTMLBoxMirror extends HTMLElement {
+	constructor(..._args) {
+		super(..._args);
+		this.rootStyleSheet = new CSSStyleSheet();
+		this.variableStyleSheet = new CSSStyleSheet();
+		this.resizeObserver = new ResizeObserver(this.handleResize.bind(this));
+	}
+	connectedCallback() {
+		this.rootStyleSheet.replaceSync(HTMLBoxMirror_default);
+		const shadowRoot = this.attachShadow({ mode: "open" });
+		shadowRoot.adoptedStyleSheets = [this.rootStyleSheet, this.variableStyleSheet];
+		shadowRoot.appendChild(this.ownerDocument.createElement("slot"));
+	}
+	disconnectedCallback() {
+		this.resizeObserver.disconnect();
+	}
+	handleResize(entries) {
+		const [entry, ...remainingEntries] = entries;
+		if (!entry) throw 1;
+		if (remainingEntries.length > 0) throw 1;
+		const [borderBox, ...borderBoxRest] = entry.borderBoxSize;
+		if (!borderBox || borderBoxRest.length > 0) throw 1;
+		const [contentBox, ...contentBoxRest] = entry.contentBoxSize;
+		if (!contentBox || contentBoxRest.length > 0) throw 1;
+		if (this.behavior === "ignore-hidden" && entry.target instanceof HTMLElement && entry.target.hidden && borderBox.blockSize === 0 && borderBox.inlineSize === 0 && contentBox.blockSize === 0 && contentBox.inlineSize === 0) return;
+		this.variableStyleSheet.replaceSync(`
+			:host {
+				--border-box-block-size: ${borderBox.blockSize}px;
+				--border-box-inline-size: ${borderBox.inlineSize}px;
+				--content-box-block-size: ${contentBox.blockSize}px;
+				--content-box-inline-size: ${contentBox.inlineSize}px;
+			}
+		`);
+	}
+	#target;
+	get target() {
+		return this.#target ?? null;
+	}
+	set target(value) {
+		this.resizeObserver.disconnect();
+		if (value) this.resizeObserver.observe(value);
+		this.#target = value;
+	}
+	static #BOX_SIZING_ATTRIBUTE = "box-sizing";
+	get boxSizing() {
+		return this.getAttribute(HTMLBoxMirror.#BOX_SIZING_ATTRIBUTE);
+	}
+	set boxSizing(value) {
+		if (value) this.setAttribute(HTMLBoxMirror.#BOX_SIZING_ATTRIBUTE, value);
+		else this.removeAttribute(HTMLBoxMirror.#BOX_SIZING_ATTRIBUTE);
+	}
+	static #BEHAVIOR_ATTRIBUTE = "behavior";
+	get behavior() {
+		return this.getAttribute(HTMLBoxMirror.#BEHAVIOR_ATTRIBUTE);
+	}
+	set behavior(value) {
+		if (value) this.setAttribute(HTMLBoxMirror.#BEHAVIOR_ATTRIBUTE, value);
+		else this.removeAttribute(HTMLBoxMirror.#BEHAVIOR_ATTRIBUTE);
+	}
+	static isHTMLBoxMirror(value) {
+		return value instanceof HTMLBoxMirror;
+	}
+};
+globalThis.customElements.define("box-mirror", HTMLBoxMirror);
+
+//#endregion
+//#region overflow-container/HTMLOverflowContainerElement.css?raw
+var HTMLOverflowContainerElement_default = ":host {\n	display: flex;\n	position: relative;\n	box-sizing: border-box;\n	overflow: clip;\n\n	& > *::slotted(*) {\n		flex-shrink: 0;\n	}\n\n	& > slot[name=\"overflow\"]::slotted([hidden]) {\n		display: block;\n		visibility: hidden;\n		position: absolute;\n	}\n}\n\n#container-mirror {\n	position: absolute;\n	display: flex;\n	flex-direction: inherit;\n	gap: inherit;\n	box-sizing: border-box;\n\n	& > * {\n		flex-shrink: 0;\n	}\n\n	& > *:last-of-type {\n		position: relative;\n		inset-inline-end: clamp(\n			0%,\n			calc(var(--overflow-inline-size) + var(--inline-gap)),\n			calc(100% - var(--border-box-inline-size))\n		);\n		inset-block-end: clamp(\n			0%,\n			calc(var(--overflow-block-size) + var(--block-gap)),\n			calc(100% - var(--border-box-block-size))\n		);\n	}\n}\n";
+
+//#endregion
+//#region overflow-container/HTMLOverflowContainerElement.ts
+var HTMLOverflowContainerElement = class HTMLOverflowContainerElement extends HTMLElement {
+	constructor() {
+		super();
+		this.rootStyleSheet = new CSSStyleSheet();
+		this.variableStyleSheet = new CSSStyleSheet();
+		this.overflowStyleSheet = new CSSStyleSheet();
+		this.childrenSlot = this.ownerDocument.createElement("slot");
+		this.overflowSlot = this.ownerDocument.createElement("slot");
+		this.containerMirror = this.ownerDocument.createElement("box-mirror");
+		this.overflowResizeObserver = new ResizeObserver(this.handleResize.bind(this));
+		this.elementIsIntersectingMap = /* @__PURE__ */ new WeakMap();
+		this.intersectionObserver = new IntersectionObserver(this.handleIntersection.bind(this), {
+			root: this.containerMirror,
+			threshold: 1
+		});
+		this.overflowSlot.name = "overflow";
+		this.containerMirror.id = "container-mirror";
+		this.containerMirror.boxSizing = "content-box";
+		this.containerMirror.target = this;
+		const shadowRoot = this.attachShadow({ mode: "open" });
+		shadowRoot.adoptedStyleSheets = [
+			this.rootStyleSheet,
+			this.variableStyleSheet,
+			this.overflowStyleSheet
+		];
+		shadowRoot.appendChild(this.childrenSlot);
+		shadowRoot.appendChild(this.overflowSlot);
+		shadowRoot.appendChild(this.containerMirror);
+	}
+	connectedCallback() {
+		this.rootStyleSheet.replaceSync(HTMLOverflowContainerElement_default);
+		this.updateInlineGap();
+		for (const overflowElement of this.getOverflowElements()) this.registerOverflowElement(overflowElement);
+		for (const itemElement of this.getItemElements()) this.registerItemElement(itemElement);
+	}
+	disconnectedCallback() {
+		this.intersectionObserver.disconnect();
+		this.overflowResizeObserver.disconnect();
+	}
+	registerItemElement(element) {
+		if (!this.contains(element)) throw new Error("Container must contain item element", { cause: element });
+		const mirrorElement = globalThis.document.createElement("box-mirror");
+		mirrorElement.boxSizing = "border-box";
+		mirrorElement.behavior = "ignore-hidden";
+		this.containerMirror.appendChild(mirrorElement);
+		this.intersectionObserver.observe(mirrorElement);
+		mirrorElement.target = element;
+	}
+	registerOverflowElement(element) {
+		this.overflowResizeObserver.observe(element);
+		const mirrorElement = globalThis.document.createElement("box-mirror");
+		mirrorElement.boxSizing = "border-box";
+		this.containerMirror.appendChild(mirrorElement);
+		this.intersectionObserver.observe(mirrorElement);
+		mirrorElement.target = element;
+	}
+	handleIntersection(entries) {
+		this.updateInlineGap();
+		for (const entry of entries) {
+			if (!HTMLBoxMirror.isHTMLBoxMirror(entry.target)) throw 78324;
+			const mirrorElement = entry.target.target;
+			if (!mirrorElement) throw 1129342;
+			this.elementIsIntersectingMap.set(mirrorElement, entry.isIntersecting);
+		}
+		const itemElements = this.getItemElements();
+		const lastItemElement = itemElements.at(-1);
+		const isOverflowing = lastItemElement ? !this.elementIsIntersectingMap.get(lastItemElement) : true;
+		for (const overflowElement of this.getOverflowElements()) overflowElement.hidden = !isOverflowing;
+		for (const itemElement of itemElements) if (isOverflowing) itemElement.hidden = !this.elementIsIntersectingMap.get(itemElement);
+		else itemElement.hidden = false;
+		this.setAttribute("overflowing", String(isOverflowing));
+	}
+	updateInlineGap() {
+		const blockGap = globalThis.getComputedStyle(this).rowGap;
+		const inlineGap = globalThis.getComputedStyle(this).columnGap;
+		this.variableStyleSheet.replaceSync(`
+			:host {
+				--block-gap: ${isNaN(parseFloat(blockGap)) ? "0px" : blockGap};
+				--inline-gap: ${isNaN(parseFloat(inlineGap)) ? "0px" : inlineGap};
+			}
+		`);
+	}
+	handleResize(entries) {
+		for (const entry of entries) {
+			const [borderBoxSize, ...rest] = entry.borderBoxSize;
+			if (!borderBoxSize) throw 1;
+			if (rest.length > 0) throw 1;
+			if (entry.target.slot === "overflow") {
+				if (borderBoxSize.blockSize === 0 || borderBoxSize.inlineSize === 0) continue;
+				this.overflowStyleSheet.replaceSync(`
+					:host {
+						--overflow-inline-size: ${borderBoxSize.inlineSize}px;
+						--overflow-block-size: ${borderBoxSize.blockSize}px;
+					}
+				`);
+			}
+		}
+	}
+	getItemElements() {
+		return this.childrenSlot.assignedElements().filter(HTMLOverflowContainerElement.isHTMLElement);
+	}
+	getOverflowElements() {
+		return this.overflowSlot.assignedElements().filter(HTMLOverflowContainerElement.isHTMLElement);
+	}
+	static isHTMLElement(element) {
+		return element instanceof HTMLElement;
+	}
+};
+globalThis.customElements.define("overflow-container", HTMLOverflowContainerElement);
+
+//#endregion
+export { HTMLBoxMirror, HTMLOverflowContainerElement };
+//# sourceMappingURL=mod.js.map

package/dist/mod.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mod.js","names":["styles","#target","#BOX_SIZING_ATTRIBUTE","#BEHAVIOR_ATTRIBUTE","styles"],"sources":["../box-mirror/HTMLBoxMirror.css?raw","../box-mirror/HTMLBoxMirror.ts","../overflow-container/HTMLOverflowContainerElement.css?raw","../overflow-container/HTMLOverflowContainerElement.ts"],"sourcesContent":["export default \":host {\\n\\tvisibility: hidden;\\n\\tmax-inline-size: 100%;\\n\\tmax-block-size: 100%;\\n}\\n\\n:host([box-sizing=\\\"content-box\\\"]) {\\n\\tinline-size: var(--content-box-inline-size);\\n\\tblock-size: var(--content-box-block-size);\\n}\\n\\n:host([box-sizing=\\\"border-box\\\"]) {\\n\\tinline-size: var(--border-box-inline-size);\\n\\tblock-size: var(--border-box-block-size);\\n}\\n\"","import styles from \"./HTMLBoxMirror.css?raw\" with { type: \"text\" };\n\nexport class HTMLBoxMirror extends HTMLElement {\n\tprivate readonly rootStyleSheet = new CSSStyleSheet();\n\tprivate readonly variableStyleSheet = new CSSStyleSheet();\n\n\tprivate readonly resizeObserver = new ResizeObserver(this.handleResize.bind(this));\n\n\tpublic connectedCallback() {\n\t\tthis.rootStyleSheet.replaceSync(styles);\n\n\t\tconst shadowRoot = this.attachShadow({ mode: \"open\" });\n\t\tshadowRoot.adoptedStyleSheets = [this.rootStyleSheet, this.variableStyleSheet];\n\n\t\tshadowRoot.appendChild(this.ownerDocument.createElement(\"slot\"));\n\t}\n\n\tpublic disconnectedCallback() {\n\t\tthis.resizeObserver.disconnect();\n\t}\n\n\tprivate handleResize(entries: ResizeObserverEntry[]) {\n\t\tconst [entry, ...remainingEntries] = entries;\n\t\tif (!entry) throw 1;\n\t\tif (remainingEntries.length > 0) throw 1;\n\n\t\tconst [borderBox, ...borderBoxRest] = entry.borderBoxSize;\n\t\tif (!borderBox || borderBoxRest.length > 0) throw 1;\n\n\t\tconst [contentBox, ...contentBoxRest] = entry.contentBoxSize;\n\t\tif (!contentBox || contentBoxRest.length > 0) throw 1;\n\n\t\tif (\n\t\t\tthis.behavior === \"ignore-hidden\" &&\n\t\t\tentry.target instanceof HTMLElement &&\n\t\t\tentry.target.hidden &&\n\t\t\tborderBox.blockSize === 0 && borderBox.inlineSize === 0 &&\n\t\t\tcontentBox.blockSize === 0 && contentBox.inlineSize === 0\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.variableStyleSheet.replaceSync(`\n\t\t\t:host {\n\t\t\t\t--border-box-block-size: ${borderBox.blockSize}px;\n\t\t\t\t--border-box-inline-size: ${borderBox.inlineSize}px;\n\t\t\t\t--content-box-block-size: ${contentBox.blockSize}px;\n\t\t\t\t--content-box-inline-size: ${contentBox.inlineSize}px;\n\t\t\t}\n\t\t`);\n\t}\n\n\t#target?: Element | null;\n\tget target() {\n\t\treturn this.#target ?? null;\n\t}\n\tset target(value) {\n\t\tthis.resizeObserver.disconnect();\n\t\tif (value) this.resizeObserver.observe(value);\n\n\t\tthis.#target = value;\n\t}\n\n\tstatic #BOX_SIZING_ATTRIBUTE = \"box-sizing\" as const;\n\tget boxSizing() {\n\t\treturn this.getAttribute(HTMLBoxMirror.#BOX_SIZING_ATTRIBUTE) as \"border-box\" | \"content-box\" | null;\n\t}\n\tset boxSizing(value) {\n\t\tif (value) {\n\t\t\tthis.setAttribute(HTMLBoxMirror.#BOX_SIZING_ATTRIBUTE, value);\n\t\t} else {\n\t\t\tthis.removeAttribute(HTMLBoxMirror.#BOX_SIZING_ATTRIBUTE);\n\t\t}\n\t}\n\n\tstatic #BEHAVIOR_ATTRIBUTE = \"behavior\" as const;\n\tget behavior() {\n\t\treturn this.getAttribute(HTMLBoxMirror.#BEHAVIOR_ATTRIBUTE) as \"ignore-hidden\" | null;\n\t}\n\tset behavior(value) {\n\t\tif (value) {\n\t\t\tthis.setAttribute(HTMLBoxMirror.#BEHAVIOR_ATTRIBUTE, value);\n\t\t} else {\n\t\t\tthis.removeAttribute(HTMLBoxMirror.#BEHAVIOR_ATTRIBUTE);\n\t\t}\n\t}\n\n\tstatic isHTMLBoxMirror(value: unknown) {\n\t\treturn value instanceof HTMLBoxMirror;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t\"box-mirror\": HTMLBoxMirror;\n\t}\n}\n\nglobalThis.customElements.define(\"box-mirror\", HTMLBoxMirror);\n","export default \":host {\\n\\tdisplay: flex;\\n\\tposition: relative;\\n\\tbox-sizing: border-box;\\n\\toverflow: clip;\\n\\n\\t& > *::slotted(*) {\\n\\t\\tflex-shrink: 0;\\n\\t}\\n\\n\\t& > slot[name=\\\"overflow\\\"]::slotted([hidden]) {\\n\\t\\tdisplay: block;\\n\\t\\tvisibility: hidden;\\n\\t\\tposition: absolute;\\n\\t}\\n}\\n\\n#container-mirror {\\n\\tposition: absolute;\\n\\tdisplay: flex;\\n\\tflex-direction: inherit;\\n\\tgap: inherit;\\n\\tbox-sizing: border-box;\\n\\n\\t& > * {\\n\\t\\tflex-shrink: 0;\\n\\t}\\n\\n\\t& > *:last-of-type {\\n\\t\\tposition: relative;\\n\\t\\tinset-inline-end: clamp(\\n\\t\\t\\t0%,\\n\\t\\t\\tcalc(var(--overflow-inline-size) + var(--inline-gap)),\\n\\t\\t\\tcalc(100% - var(--border-box-inline-size))\\n\\t\\t);\\n\\t\\tinset-block-end: clamp(\\n\\t\\t\\t0%,\\n\\t\\t\\tcalc(var(--overflow-block-size) + var(--block-gap)),\\n\\t\\t\\tcalc(100% - var(--border-box-block-size))\\n\\t\\t);\\n\\t}\\n}\\n\"","import \"../box-mirror/HTMLBoxMirror.ts\";\nimport { HTMLBoxMirror } from \"../box-mirror/HTMLBoxMirror.ts\";\n\nimport styles from \"./HTMLOverflowContainerElement.css?raw\" with { type: \"text\" };\n\nexport class HTMLOverflowContainerElement extends HTMLElement {\n\tprivate readonly rootStyleSheet = new CSSStyleSheet();\n\tprivate readonly variableStyleSheet = new CSSStyleSheet();\n\tprivate readonly overflowStyleSheet = new CSSStyleSheet();\n\n\tprivate readonly childrenSlot = this.ownerDocument.createElement(\"slot\");\n\tprivate readonly overflowSlot = this.ownerDocument.createElement(\"slot\");\n\n\tprivate readonly containerMirror = this.ownerDocument.createElement(\"box-mirror\");\n\n\tprivate readonly overflowResizeObserver = new ResizeObserver(this.handleResize.bind(this));\n\n\tprivate readonly elementIsIntersectingMap = new WeakMap<Element, boolean>();\n\tprivate readonly intersectionObserver = new IntersectionObserver(this.handleIntersection.bind(this), {\n\t\troot: this.containerMirror,\n\t\tthreshold: 1,\n\t});\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis.overflowSlot.name = \"overflow\";\n\n\t\tthis.containerMirror.id = \"container-mirror\";\n\t\tthis.containerMirror.boxSizing = \"content-box\";\n\t\tthis.containerMirror.target = this;\n\n\t\tconst shadowRoot = this.attachShadow({ mode: \"open\" });\n\t\tshadowRoot.adoptedStyleSheets = [this.rootStyleSheet, this.variableStyleSheet, this.overflowStyleSheet];\n\n\t\tshadowRoot.appendChild(this.childrenSlot);\n\t\tshadowRoot.appendChild(this.overflowSlot);\n\n\t\tshadowRoot.appendChild(this.containerMirror);\n\t}\n\n\tconnectedCallback() {\n\t\tthis.rootStyleSheet.replaceSync(styles);\n\t\tthis.updateInlineGap();\n\n\t\tfor (const overflowElement of this.getOverflowElements()) {\n\t\t\tthis.registerOverflowElement(overflowElement);\n\t\t}\n\n\t\tfor (const itemElement of this.getItemElements()) {\n\t\t\tthis.registerItemElement(itemElement);\n\t\t}\n\t}\n\n\tpublic disconnectedCallback() {\n\t\tthis.intersectionObserver.disconnect();\n\t\tthis.overflowResizeObserver.disconnect();\n\t}\n\n\tprivate registerItemElement(element: HTMLElement) {\n\t\tif (!this.contains(element)) throw new Error(\"Container must contain item element\", { cause: element });\n\n\t\tconst mirrorElement = globalThis.document.createElement(\"box-mirror\");\n\t\tmirrorElement.boxSizing = \"border-box\";\n\t\tmirrorElement.behavior = \"ignore-hidden\";\n\n\t\tthis.containerMirror.appendChild(mirrorElement);\n\n\t\tthis.intersectionObserver.observe(mirrorElement);\n\t\tmirrorElement.target = element;\n\t}\n\n\tprivate registerOverflowElement(element: HTMLElement) {\n\t\tthis.overflowResizeObserver.observe(element);\n\n\t\tconst mirrorElement = globalThis.document.createElement(\"box-mirror\");\n\t\tmirrorElement.boxSizing = \"border-box\";\n\n\t\tthis.containerMirror.appendChild(mirrorElement);\n\n\t\tthis.intersectionObserver.observe(mirrorElement);\n\t\tmirrorElement.target = element;\n\t}\n\n\tprivate handleIntersection(entries: IntersectionObserverEntry[]) {\n\t\tthis.updateInlineGap();\n\n\t\tfor (const entry of entries) {\n\t\t\tif (!HTMLBoxMirror.isHTMLBoxMirror(entry.target)) throw 78324;\n\n\t\t\tconst mirrorElement = entry.target.target;\n\t\t\tif (!mirrorElement) throw 1129342;\n\n\t\t\tthis.elementIsIntersectingMap.set(mirrorElement, entry.isIntersecting);\n\t\t}\n\n\t\tconst itemElements = this.getItemElements();\n\t\tconst lastItemElement = itemElements.at(-1);\n\n\t\tconst isOverflowing = lastItemElement ? !this.elementIsIntersectingMap.get(lastItemElement) : true;\n\n\t\tfor (const overflowElement of this.getOverflowElements()) {\n\t\t\toverflowElement.hidden = !isOverflowing;\n\t\t}\n\n\t\tfor (const itemElement of itemElements) {\n\t\t\tif (isOverflowing) {\n\t\t\t\titemElement.hidden = !this.elementIsIntersectingMap.get(itemElement);\n\t\t\t} else {\n\t\t\t\titemElement.hidden = false;\n\t\t\t}\n\t\t}\n\n\t\tthis.setAttribute(\"overflowing\", String(isOverflowing));\n\t}\n\n\tprivate updateInlineGap() {\n\t\tconst blockGap = globalThis.getComputedStyle(this).rowGap;\n\t\tconst inlineGap = globalThis.getComputedStyle(this).columnGap;\n\n\t\tthis.variableStyleSheet.replaceSync(`\n\t\t\t:host {\n\t\t\t\t--block-gap: ${isNaN(parseFloat(blockGap)) ? \"0px\" : blockGap};\n\t\t\t\t--inline-gap: ${isNaN(parseFloat(inlineGap)) ? \"0px\" : inlineGap};\n\t\t\t}\n\t\t`);\n\t}\n\n\tprivate handleResize(entries: ResizeObserverEntry[]) {\n\t\tfor (const entry of entries) {\n\t\t\tconst [borderBoxSize, ...rest] = entry.borderBoxSize;\n\t\t\tif (!borderBoxSize) throw 1;\n\t\t\tif (rest.length > 0) throw 1;\n\n\t\t\tif (entry.target.slot === \"overflow\") {\n\t\t\t\tif (borderBoxSize.blockSize === 0 || borderBoxSize.inlineSize === 0) continue;\n\n\t\t\t\tthis.overflowStyleSheet.replaceSync(`\n\t\t\t\t\t:host {\n\t\t\t\t\t\t--overflow-inline-size: ${borderBoxSize.inlineSize}px;\n\t\t\t\t\t\t--overflow-block-size: ${borderBoxSize.blockSize}px;\n\t\t\t\t\t}\n\t\t\t\t`);\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate getItemElements() {\n\t\treturn this.childrenSlot\n\t\t\t.assignedElements()\n\t\t\t.filter(HTMLOverflowContainerElement.isHTMLElement);\n\t}\n\n\tprivate getOverflowElements() {\n\t\treturn this.overflowSlot\n\t\t\t.assignedElements()\n\t\t\t.filter(HTMLOverflowContainerElement.isHTMLElement);\n\t}\n\n\tprivate static isHTMLElement(element: unknown) {\n\t\treturn element instanceof HTMLElement;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t\"overflow-container\": HTMLOverflowContainerElement;\n\t}\n}\n\nglobalThis.customElements.define(\"overflow-container\", HTMLOverflowContainerElement);\n"],"mappings":"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"}

package/mod.ts

@@ -0,0 +1,2 @@
+export * from "./box-mirror/HTMLBoxMirror.ts";
+export * from "./overflow-container/HTMLOverflowContainerElement.ts";

package/overflow-container/HTMLOverflowContainerElement.css

@@ -0,0 +1,42 @@
+:host {
+	display: flex;
+	position: relative;
+	box-sizing: border-box;
+	overflow: clip;
+
+	& > *::slotted(*) {
+		flex-shrink: 0;
+	}
+
+	& > slot[name="overflow"]::slotted([hidden]) {
+		display: block;
+		visibility: hidden;
+		position: absolute;
+	}
+}
+
+#container-mirror {
+	position: absolute;
+	display: flex;
+	flex-direction: inherit;
+	gap: inherit;
+	box-sizing: border-box;
+
+	& > * {
+		flex-shrink: 0;
+	}
+
+	& > *:last-of-type {
+		position: relative;
+		inset-inline-end: clamp(
+			0%,
+			calc(var(--overflow-inline-size) + var(--inline-gap)),
+			calc(100% - var(--border-box-inline-size))
+		);
+		inset-block-end: clamp(
+			0%,
+			calc(var(--overflow-block-size) + var(--block-gap)),
+			calc(100% - var(--border-box-block-size))
+		);
+	}
+}