@evermade/overflow-slider 1.0.0

package/dist/index.min.js

@@ -0,0 +1,2 @@
+/*!  @evermade/overflow-slider 1.0.0 */
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).OverflowSlider={})}(this,(function(t){"use strict";function e(t,n=1){const o=`${t}-${n}`;return document.getElementById(o)?e(t,n+1):o}function n(t,n,o){let r,i={};function s(t=!1){const e=r.details,n=function(t){let e,n=!1,o=0,r=0,i=0,s=0,a=1;return t.container.scrollWidth>t.container.clientWidth&&(n=!0),o=Array.from(t.container.querySelectorAll(":scope > *")).length,r=t.container.offsetWidth,i=t.container.scrollWidth,s=Math.ceil(i/r),t.container.scrollLeft>=0&&(a=Math.floor(t.container.scrollLeft/r),t.container.scrollLeft+r===i&&(a=s-1)),e={hasOverflow:n,slideCount:o,containerWidth:r,scrollableAreaWidth:i,amountOfPages:s,currentPage:a},e}(r);r.details=n,t||function(t,e){const n=Object.keys(t),o=Object.keys(e);if(n.length!==o.length)return!1;for(let o of n)if(!1===e.hasOwnProperty(o)||t[o]!==e[o])return!1;return!0}(e,n)?t&&r.emit("detailsChanged"):r.emit("detailsChanged")}function a(){r.container.style.setProperty("--slider-container-width",`${r.details.containerWidth}px`),r.container.style.setProperty("--slider-scrollable-width",`${r.details.scrollableAreaWidth}px`),r.container.style.setProperty("--slider-slides-count",`${r.details.slideCount}`)}function l(){r.container.setAttribute("data-has-overflow",r.details.hasOverflow?"true":"false")}return r={emit:function(t){var e;i&&i[t]&&i[t].forEach((t=>{t(r)}));const n=null===(e=null==r?void 0:r.options)||void 0===e?void 0:e[t];"function"==typeof n&&n(r)},moveToDirection:function(t="prev"){const e=r.options.scrollStrategy,n=r.container.scrollLeft,o=r.container.getBoundingClientRect(),i=r.container.offsetWidth;let s=n;if("prev"===t?s=Math.max(0,n-r.container.offsetWidth):"next"===t&&(s=Math.min(r.container.scrollWidth,n+r.container.offsetWidth)),"fullSlide"===e){let e=null;const a=Array.from(r.container.querySelectorAll(":scope > *"));let l=0;if(a.length>1){const t=a[0].getBoundingClientRect();l=a[1].getBoundingClientRect().left-t.right}if(e="prev"===t?Math.max(0,s-l):Math.min(r.container.scrollWidth,s+l),"next"===t){let t=!1;for(let r of a){const i=r.getBoundingClientRect(),a=i.left-o.left+n,l=a+i.width;if(a<s&&l>s){e=a,t=!0;break}}t||(e=Math.min(s,r.container.scrollWidth-r.container.offsetWidth)),e&&e>n&&(s=e)}else{let t=!1;for(let r of a){const s=r.getBoundingClientRect(),a=s.left-o.left+n,l=a+s.width;if(a<n&&l>n){e=l-i,t=!0;break}}t||(e=Math.max(0,n-i)),e&&e<n&&(s=e)}}r.container.style.scrollBehavior="smooth",r.container.scrollLeft=s,setTimeout((()=>r.container.style.scrollBehavior=""),50)},on:function(t,e){i[t]||(i[t]=[]),i[t].push(e)},options:n},function(){r.container=t;let n=t.getAttribute("id");null===n&&(n=e("overflow-slider"),t.setAttribute("id",n)),s(!0),r.on("contentsChanged",(()=>s())),r.on("containerSizeChanged",(()=>s()));let i=0;if(r.on("scroll",(()=>{i&&window.cancelAnimationFrame(i),i=window.requestAnimationFrame((()=>{s()}))})),function(){new MutationObserver((()=>r.emit("contentsChanged"))).observe(r.container,{childList:!0});new ResizeObserver((()=>r.emit("containerSizeChanged"))).observe(r.container),r.container.addEventListener("scroll",(()=>r.emit("scroll")));let t=!1;r.container.addEventListener("mousedown",(()=>{t=!0})),r.container.addEventListener("touchstart",(()=>{t=!0}),{passive:!0}),r.container.addEventListener("focusin",(e=>{if(!t){let t=e.target;for(;t.parentElement!==r.container&&t.parentElement;)t=t.parentElement;!function(t){const e=t.getBoundingClientRect(),n=r.container.getBoundingClientRect(),o=r.container.offsetWidth,i=r.container.scrollLeft,s=e.left-n.left+i,a=s+e.width;let l=null;s<i?l=s:a>i+o&&(l=a-o);l&&(r.container.style.scrollSnapType="none",r.container.scrollLeft=l)}(t)}t=!1}))}(),l(),a(),o)for(const t of o)t(r);r.on("detailsChanged",(()=>{l(),a()})),r.emit("created")}(),r}const o={skipList:"Skip list"},r={skipLink:"screen-reader-text",skipLinkTarget:"overflow-slider__skip-link-target"};const i={buttonPrevious:"Previous items",buttonNext:"Next items"},s={prev:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.6 3.4l-7.6 7.6 7.6 7.6 1.4-1.4-5-5h12.6v-2h-12.6l5-5z"/></svg>',next:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.4 3.4l-1.4 1.4 5 5h-12.6v2h12.6l-5 5 1.4 1.4 7.6-7.6z"/></svg>'},a={navContainer:"overflow-slider__arrows",prevButton:"overflow-slider__arrows-button overflow-slider__arrows-button--prev",nextButton:"overflow-slider__arrows-button overflow-slider__arrows-button--next"};const l={scrollIndicator:"overflow-slider__scroll-indicator",scrollIndicatorBar:"overflow-slider__scroll-indicator-bar",scrollIndicatorButton:"overflow-slider__scroll-indicator-button"};const c={dotDescription:"Page %d of %d"},d={dotsContainer:"overflow-slider__dots",dotsItem:"overflow-slider__dot-item"};t.ArrowsPlugin=function(t){return e=>{var n,o,r,l;const c={texts:Object.assign(Object.assign({},i),(null==t?void 0:t.texts)||[]),icons:Object.assign(Object.assign({},s),(null==t?void 0:t.icons)||[]),classNames:Object.assign(Object.assign({},a),(null==t?void 0:t.classNames)||[]),container:null!==(n=null==t?void 0:t.container)&&void 0!==n?n:null},d=document.createElement("div");d.classList.add(c.classNames.navContainer);const u=document.createElement("button");u.setAttribute("class",c.classNames.prevButton),u.setAttribute("type","button"),u.setAttribute("aria-label",c.texts.buttonPrevious),u.setAttribute("aria-controls",null!==(o=e.container.getAttribute("id"))&&void 0!==o?o:""),u.setAttribute("data-type","prev"),u.innerHTML=c.icons.prev,u.addEventListener("click",(()=>e.moveToDirection("prev")));const f=document.createElement("button");f.setAttribute("class",c.classNames.nextButton),f.setAttribute("type","button"),f.setAttribute("aria-label",c.texts.buttonNext),f.setAttribute("aria-controls",null!==(r=e.container.getAttribute("id"))&&void 0!==r?r:""),f.setAttribute("data-type","next"),f.innerHTML=c.icons.next,f.addEventListener("click",(()=>e.moveToDirection("next"))),d.appendChild(u),d.appendChild(f);const v=()=>{const t=e.container.scrollLeft,n=e.container.scrollWidth,o=e.container.clientWidth;0===t?u.setAttribute("data-has-content","false"):u.setAttribute("data-has-content","true"),t+o>=n?f.setAttribute("data-has-content","false"):f.setAttribute("data-has-content","true")};c.container?c.container.appendChild(d):null===(l=e.container.parentNode)||void 0===l||l.insertBefore(d,e.container.nextSibling),v(),e.on("scroll",v),e.on("contentsChanged",v),e.on("containerSizeChanged",v)}},t.DotsPlugin=function(t){return e=>{var n,o;const r={texts:Object.assign(Object.assign({},c),(null==t?void 0:t.texts)||[]),classNames:Object.assign(Object.assign({},d),(null==t?void 0:t.classNames)||[]),container:null!==(n=null==t?void 0:t.container)&&void 0!==n?n:null},i=document.createElement("div");i.classList.add(r.classNames.dotsContainer);let s=null;const a=()=>{i.setAttribute("data-has-content",e.details.hasOverflow.toString()),i.innerHTML="";const t=document.createElement("ul"),n=e.details.amountOfPages,o=e.details.currentPage;if(!(n<=1)){for(let e=0;e<n;e++){const a=document.createElement("li"),c=document.createElement("button");c.setAttribute("type","button"),c.setAttribute("class",r.classNames.dotsItem),c.setAttribute("aria-label",r.texts.dotDescription.replace("%d",(e+1).toString()).replace("%d",n.toString())),c.setAttribute("aria-pressed",(e===o).toString()),c.setAttribute("data-page",(e+1).toString()),a.appendChild(c),t.appendChild(a),c.addEventListener("click",(()=>l(e+1))),c.addEventListener("focus",(()=>s=e+1)),c.addEventListener("keydown",(t=>{var e;const o=i.querySelector('[aria-pressed="true"]');if(!o)return;const r=parseInt(null!==(e=o.getAttribute("data-page"))&&void 0!==e?e:"1");if("ArrowLeft"===t.key){const t=r-1;if(t>0){const e=i.querySelector(`[data-page="${t}"]`);e&&e.focus(),l(t)}}if("ArrowRight"===t.key){const t=r+1;if(t<=n){const e=i.querySelector(`[data-page="${t}"]`);e&&e.focus(),l(t)}}}))}if(i.appendChild(t),s){const t=i.querySelector(`[data-page="${s}"]`);t&&t.focus()}}},l=t=>{const n=e.details.containerWidth*(t-1);e.container.style.scrollBehavior=e.options.scrollBehavior,e.container.style.scrollSnapType="none",e.container.scrollLeft=n,e.container.style.scrollBehavior="",e.container.style.scrollSnapType=""};a(),r.container?r.container.appendChild(i):null===(o=e.container.parentNode)||void 0===o||o.insertBefore(i,e.container.nextSibling),e.on("detailsChanged",(()=>{a()}))}},t.DragScrollingPlugin=function(t){var e;const n=null!==(e=null==t?void 0:t.draggedDistanceThatPreventsClick)&&void 0!==e?e:20;return t=>{let e=!1,o=0,r=0;const i=()=>t.details.hasOverflow;t.container.addEventListener("mousedown",(n=>{i()&&(e=!0,o=n.pageX-t.container.offsetLeft,r=t.container.scrollLeft,t.container.style.cursor="grabbing",t.container.style.scrollSnapType="none")})),window.addEventListener("mouseup",(()=>{i()&&(e=!1,t.container.style.cursor="",t.container.style.scrollSnapType="",setTimeout((()=>{t.container.querySelectorAll(":scope > *").forEach((t=>{t.style.pointerEvents=""}))}),50))})),window.addEventListener("mousemove",(s=>{if(!i())return;if(!e)return;s.preventDefault();const a=s.pageX-t.container.offsetLeft-o;t.container.scrollLeft=r-a;const l=Math.abs(a),c=t.container.querySelectorAll(":scope > *"),d=l>n?"none":"";c.forEach((t=>{t.style.pointerEvents=d}))}))}},t.OverflowSlider=function(t,e,o){try{if(!(t instanceof Element))throw new Error("Container must be HTML element, found "+typeof t);const r={scrollBehavior:"smooth",scrollStrategy:"fullSlide"},i=Object.assign(Object.assign({},r),e);return window.matchMedia("(prefers-reduced-motion: reduce)").matches&&(i.scrollBehavior="auto"),n(t,i,o)}catch(t){console.error(t)}},t.ScrollIndicatorPlugin=function(t){return e=>{var n,o,r;const i={classNames:Object.assign(Object.assign({},l),(null==t?void 0:t.classNames)||[]),container:null!==(n=null==t?void 0:t.container)&&void 0!==n?n:null},s=document.createElement("div");s.setAttribute("class",i.classNames.scrollIndicator),s.setAttribute("tabindex","0"),s.setAttribute("role","scrollbar"),s.setAttribute("aria-controls",null!==(o=e.container.getAttribute("id"))&&void 0!==o?o:""),s.setAttribute("aria-orientation","horizontal"),s.setAttribute("aria-valuemax","100"),s.setAttribute("aria-valuemin","0"),s.setAttribute("aria-valuenow","0");const a=document.createElement("div");a.setAttribute("class",i.classNames.scrollIndicatorBar);const c=document.createElement("div");c.setAttribute("class",i.classNames.scrollIndicatorButton),c.setAttribute("data-is-grabbed","false"),a.appendChild(c),s.appendChild(a);const d=()=>{s.setAttribute("data-has-overflow",e.details.hasOverflow.toString())};d();const u=()=>{const t=e.container.offsetWidth/e.container.scrollWidth;return e.container.scrollLeft*t};let f=0;const v=()=>{f&&window.cancelAnimationFrame(f),f=window.requestAnimationFrame((()=>{const t=e.container.offsetWidth/e.container.scrollWidth*100,n=u();c.style.width=`${t}%`,c.style.transform=`translateX(${n}px)`;const o=e.container.scrollLeft/(e.container.scrollWidth-e.container.offsetWidth)*100;s.setAttribute("aria-valuenow",Math.round(Number.isNaN(o)?0:o).toString())}))};i.container?i.container.appendChild(s):null===(r=e.container.parentNode)||void 0===r||r.insertBefore(s,e.container.nextSibling),v(),e.on("scroll",v),e.on("contentsChanged",v),e.on("containerSizeChanged",v),e.on("detailsChanged",d),s.addEventListener("keydown",(t=>{"ArrowLeft"===t.key?e.moveToDirection("prev"):"ArrowRight"===t.key&&e.moveToDirection("next")})),s.addEventListener("click",(t=>{const n=c.offsetWidth,o=u(),r=o+n,i=t.pageX-s.offsetLeft;i<o?e.moveToDirection("prev"):i>r&&e.moveToDirection("next")}));let p=!1,h=0,b=0;c.addEventListener("mousedown",(t=>{p=!0,h=t.pageX-s.offsetLeft,b=e.container.scrollLeft,c.style.cursor="grabbing",e.container.style.scrollSnapType="none",c.setAttribute("data-is-grabbed","true"),t.preventDefault(),t.stopPropagation()})),window.addEventListener("mouseup",(()=>{p=!1,c.style.cursor="",e.container.style.scrollSnapType="",c.setAttribute("data-is-grabbed","false")})),window.addEventListener("mousemove",(t=>{if(!p)return;t.preventDefault();const n=t.pageX-s.offsetLeft,o=e.container.scrollWidth/s.offsetWidth,r=(n-h)*o;e.container.scrollLeft=b+r}))}},t.SkipLinksPlugin=function(t){return n=>{var i,s,a,l,c,d;const u={texts:Object.assign(Object.assign({},o),(null==t?void 0:t.texts)||[]),classNames:Object.assign(Object.assign({},r),(null==t?void 0:t.classNames)||[]),containerBefore:null!==(i=null==t?void 0:t.containerAfter)&&void 0!==i?i:null,containerAfter:null!==(s=null==t?void 0:t.containerAfter)&&void 0!==s?s:null},f=e("overflow-slider-skip"),v=document.createElement("a");v.setAttribute("href",`#${f}`),v.textContent=u.texts.skipList,v.classList.add(u.classNames.skipLink);const p=document.createElement("div");p.setAttribute("id",f),p.setAttribute("tabindex","-1"),u.containerBefore?null===(a=u.containerBefore.parentNode)||void 0===a||a.insertBefore(v,u.containerBefore):null===(l=n.container.parentNode)||void 0===l||l.insertBefore(v,n.container),u.containerAfter?null===(c=u.containerAfter.parentNode)||void 0===c||c.insertBefore(p,u.containerAfter.nextSibling):null===(d=n.container.parentNode)||void 0===d||d.insertBefore(p,n.container.nextSibling)}},Object.defineProperty(t,"__esModule",{value:!0})}));

package/dist/overflow-slider.css

@@ -0,0 +1 @@
+.overflow-slider{display:grid;grid-auto-flow:column;grid-template-columns:max-content;max-width:-moz-max-content;max-width:max-content;overflow:auto;width:100%}.overflow-slider::-webkit-scrollbar{display:none}.overflow-slider>*{outline-offset:-2px;scroll-snap-align:start}:root{--overflow-slider-arrows-size:1.5rem;--overflow-slider-arrows-gap:.5rem;--overflow-slider-arrows-inactive-opacity:0.5}.overflow-slider__arrows{display:flex;gap:var(--overflow-slider-arrows-gap)}.overflow-slider__arrows-button{align-items:center;cursor:pointer;display:flex;outline-offset:-2px}.overflow-slider__arrows-button svg{height:var(--overflow-slider-arrows-size);width:var(--overflow-slider-arrows-size)}.overflow-slider__arrows-button[data-has-content=false]{opacity:var(--overflow-slider-arrows-inactive-opacity)}:root{--overflow-slider-dots-gap:0.5rem;--overflow-slider-dot-size:0.75rem;--overflow-slider-dot-inactive-color:rgba(0,0,0,.1);--overflow-slider-dot-active-color:rgba(0,0,0,.8)}.overflow-slider__dots{align-items:center;display:flex;justify-content:center}.overflow-slider__dots ul{display:flex;flex-wrap:wrap;gap:var(--overflow-slider-dots-gap);list-style:none;margin:0;padding:0}.overflow-slider__dots li{line-height:0;margin:0;padding:0}.overflow-slider__dot-item{background:var(--overflow-slider-dot-inactive-color);border-radius:50%;cursor:pointer;height:var(--overflow-slider-dot-size);margin:0;outline-offset:2px;padding:0;position:relative;width:var(--overflow-slider-dot-size)}.overflow-slider__dot-item:after{bottom:calc(var(--overflow-slider-dots-gap)*-1);content:"";display:block;left:calc(var(--overflow-slider-dots-gap)*-1);position:absolute;right:calc(var(--overflow-slider-dots-gap)*-1);top:calc(var(--overflow-slider-dots-gap)*-1)}.overflow-slider__dot-item:focus,.overflow-slider__dot-item:hover,.overflow-slider__dot-item[aria-pressed=true]{background:var(--overflow-slider-dot-active-color)}:root{--overflow-slider-scroll-indicator-button-height:4px;--overflow-slider-scroll-indicator-padding:1rem;--overflow-slider-scroll-indicator-button-color:rgba(0,0,0,.75);--overflow-slider-scroll-indicator-bar-color:rgba(0,0,0,.25)}.overflow-slider__scroll-indicator{cursor:pointer;outline:0;padding-block:var(--overflow-slider-scroll-indicator-padding);position:relative;width:100%}.overflow-slider__scroll-indicator[data-has-overflow=false]{display:none}.overflow-slider__scroll-indicator:focus-visible .overflow-slider__scroll-indicator-button{outline:2px solid;outline-offset:2px}.overflow-slider__scroll-indicator-bar{background:var(--overflow-slider-scroll-indicator-bar-color);border-radius:3px;height:2px;left:0;position:absolute;top:50%;transform:translateY(-50%);width:100%}.overflow-slider__scroll-indicator-button{background:var(--overflow-slider-scroll-indicator-button-color);border-radius:3px;cursor:grab;height:var(--overflow-slider-scroll-indicator-button-height);left:0;position:absolute;top:calc(50% - var(--overflow-slider-scroll-indicator-button-height)/2)}.overflow-slider__scroll-indicator-button:hover,.overflow-slider__scroll-indicator-button[data-is-grabbed=true]{--overflow-slider-scroll-indicator-button-height:6px}.overflow-slider__scroll-indicator-button:after{bottom:calc(var(--overflow-slider-scroll-indicator-padding)*-1);content:"";display:block;position:absolute;top:calc(var(--overflow-slider-scroll-indicator-padding)*-1);width:100%}

package/docs/assets/demo.css

@@ -0,0 +1,513 @@
+/* ===========================================================================
+   Base
+=========================================================================== */
+
+:root {
+	--slide-gap: 1rem;
+
+	--color-primary: #f04d37;
+	--color-primary-dark: #d13c26;
+
+	--color-grey-50: hsla(0, 0%, 0%, 0.05);
+	--color-grey-100: hsla(0, 0%, 0%, 0.1);
+	--color-grey-600: hsla(0, 0%, 0%, 0.6);
+	--color-grey-700: hsla(0, 0%, 0%, 0.7);
+	--color-grey-800: hsla(0, 0%, 0%, 0.8);
+
+	--color-white: #fff;
+	--color-black: #000;
+
+	--font-family-sans: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+	--font-family-mono: "Monaco", "Consolas", "Andale Mono", "DejaVu Sans Mono", monospace;
+
+	--font-size-sm: 0.875rem;
+	--font-size-md: 1rem;
+	--font-size-lg: 1.125rem;
+	--font-size-xl: 1.25rem;
+
+	--font-size-body: var(--font-size-lg);
+
+	--line-height-sm: 1.25;
+	--line-height-md: 1.5;
+
+	--max-width-md: 42rem;
+	--max-width-lg: 60rem;
+	--max-width-xl: 72rem;
+
+	--transition-duration-md: 0.25s;
+}
+
+/* Reset */
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+li,
+figure,
+figcaption,
+blockquote,
+dl,
+dd {
+	margin: 0;
+}
+
+[hidden] {
+	display: none !important;
+}
+
+/* Box sizing */
+html {
+	box-sizing: border-box;
+}
+
+/**
+  * Inherit box-sizing to make it easier to change the property
+  * for components that leverage other behavior.
+  */
+
+*,
+*::before,
+*::after {
+	box-sizing: inherit;
+}
+
+/* Base styles */
+html {
+	font-size: 100%;
+}
+
+body,
+button,
+input,
+optgroup,
+select,
+textarea {
+	color: var(--color-grey-800);
+	font-family: var(--font-family-sans);
+	font-size: var(--font-size-body);
+	line-height: var(--line-height-md);
+	word-wrap: break-word;
+}
+
+body {
+	background-color: #f7f7f7;
+}
+
+a {
+	color: var(--color-primary-dark);
+
+	/* transition: all var(--transition-duration-md) ease-in-out; */
+}
+
+a:hover,
+a:focus-visible,
+a:active {
+	color: var(--color-primary);
+}
+
+:focus-visible {
+	outline: 2px solid var(--color-primary);
+}
+
+a:hover,
+a:active {
+	outline: 0;
+}
+
+button,
+.button {
+	background: var(--color-primary);
+	border: 0;
+	border-radius: 0;
+	color: var(--color-white);
+	display: inline-block;
+	font-weight: 500;
+	padding: 0.5rem 1rem;
+	text-decoration: none;
+}
+
+button:hover,
+.button:hover,
+button:active,
+.button:active,
+button:focus,
+.button:focus {
+	background-color: var(--color-primary-dark);
+	color: var(--color-white);
+}
+
+.actions {
+	margin-block: 2rem;
+	display: flex;
+	flex-wrap: wrap;
+	gap: .5rem;
+}
+
+.code-example {
+	display: block;
+	background: var(--color-grey-800);
+	font-family: var(--font-family-mono);
+	color: var(--color-white);
+	padding: 1.5rem;
+	font-size: 0.9375rem;
+	line-height: 1.5;
+	overflow-x: auto;
+	border-radius: 3px;
+	margin-top: 2rem;
+
+	&:not(:last-child) {
+		margin-bottom: 1rem;
+	}
+
+	/* Keep original line breaks */
+	white-space: pre-wrap;
+
+	/* Set tab size */
+	tab-size: 4;
+}
+
+/* Animations */
+@keyframes fancy-animate-in {
+	0% {
+		opacity: 0;
+		transform: translateY(1rem) scale(0.85);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translateY(0) scale(1);
+	}
+}
+
+@keyframes fancy-animate-out {
+	0% {
+		opacity: 1;
+		transform: translateY(0) scale(1);
+	}
+
+	100% {
+		opacity: 0;
+		transform: translateY(1rem) scale(0.85);
+	}
+}
+
+
+/* Icons */
+.icon {
+	fill: currentcolor;
+	display: inline-block;
+	height: 1em;
+	pointer-events: none;
+	position: relative;
+	top: -0.0625em;
+	vertical-align: middle;
+	width: 1em;
+}
+
+/* Components */
+.site-main,
+.site-footer {
+	margin-left: auto;
+	margin-right: auto;
+	max-width: var(--max-width-lg);
+	padding: 0 1.5rem 3rem;
+}
+
+.site-footer {
+	padding-top: 0;
+	font-size: 0.9375rem;
+}
+
+.entry__content > * {
+	margin-left: 0;
+	margin-right: auto;
+	max-width: var(--max-width-lg);
+	margin-top: 1rem;
+}
+
+.entry__content h1 + * {
+	margin-top: 1.5rem;
+}
+
+.entry__content > *:first-child {
+	margin-top: 0;
+}
+
+.entry__content > *:last-child {
+	margin-bottom: 0;
+}
+
+.entry__section + .entry__section {
+	margin-top: 3rem;
+}
+
+.entry__section h2 {
+	margin-bottom: 1.5rem;
+}
+
+.entry__item + .entry__item {
+	margin-top: 3rem;
+}
+
+.entry__item h3 {
+	margin-bottom: .25rem;
+}
+
+body {
+	counter-reset: section; /* Initialize the main counter */
+}
+
+h2 {
+	counter-reset: subsection; /* Reset the subsection counter for each new h2 */
+	counter-increment: section; /* Increment the main counter for each h2 */
+}
+
+h2:before {
+	content: counter(section) ". "; /* Display the counter before the h2 content */
+}
+
+h3 {
+	counter-increment: subsection; /* Increment the subsection counter for each h3 */
+}
+
+h3:before {
+	content: counter(section) "." counter(subsection) " "; /* Display the combined counters before the h3 content */
+}
+
+/* Utilities */
+.screen-reader-text {
+	border: 0;
+	clip: rect(1px, 1px, 1px, 1px);
+	clip-path: inset(50%);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+	word-wrap: normal !important;
+}
+
+.screen-reader-text:focus {
+	background-color: var(--color-primary);
+	clip: auto !important;
+	clip-path: none;
+	color: var(--color-white);
+	display: block;
+	font-size: var(--font-size-md);
+	font-weight: 700;
+	height: auto;
+	outline-offset: -2px;
+	padding: 1rem 1.5rem;
+	text-decoration: none;
+	width: fit-content;
+	z-index: 100000;
+	position: relative;
+	margin-top: 1rem;
+	margin-bottom: 1rem;
+}
+
+.overflow-hidden {
+	overflow: hidden;
+}
+
+/* ===========================================================================
+   Menu
+=========================================================================== */
+
+.site-header__inner {
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+	align-items: flex-start;
+	gap: 1rem;
+	flex-wrap: wrap;
+	margin-left: auto;
+	margin-right: auto;
+	max-width: var(--max-width-lg);
+	padding: 1.5rem 1.5rem;
+}
+
+@media (min-width: 768px) {
+	.site-header__inner {
+		gap: 1.5rem;
+	}
+}
+
+.site-branding,
+.site-branding * {
+	line-height: 0;
+	display: block;
+}
+
+.site-branding .site-logo {
+	display: flex;
+	align-items: center;
+	gap: .75rem;
+	text-decoration: none;
+}
+
+.site-logo svg {
+	width: 32px;
+	height: 32px;
+}
+
+.site-logo span {
+	font-size: 14px;
+	text-decoration: none;
+	color: var(--color-grey-800);
+}
+
+/* ===========================================================================
+   Content
+=========================================================================== */
+
+.example-container {
+	gap: var(--slide-gap);
+	margin-top: 1.5rem;
+}
+
+.example-item {
+	aspect-ratio: 3/4;
+	width: 240px;
+	max-width: 90vw;
+	background: var(--color-grey-100);
+	border-radius: 3px;
+	outline-offset: -2px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 3rem;
+	font-weight: 700;
+	color: #fff;
+	text-decoration: none;
+}
+
+.example-item:hover,
+.example-item:focus {
+	color: #fff;
+}
+
+.example-item--1 {
+	background: hsla(0, 0%, 0%, 0.1);
+}
+
+.example-item--2 {
+	background: hsla(0, 0%, 0%, 0.125);
+}
+
+.example-item--3 {
+	background: hsla(0, 0%, 0%, 0.15);
+}
+
+.example-item--4 {
+	background: hsla(0, 0%, 0%, 0.175);
+}
+
+.example-item--5 {
+	background: hsla(0, 0%, 0%, 0.2);
+}
+
+.example-item--6 {
+	background: hsla(0, 0%, 0%, 0.225);
+}
+
+.example-item--7 {
+	background: hsla(0, 0%, 0%, 0.25);
+}
+
+.example-item--8 {
+	background: hsla(0, 0%, 0%, 0.275);
+}
+
+.example-item--9 {
+	background: hsla(0, 0%, 0%, 0.3);
+}
+
+.example-item--10 {
+	background: hsla(0, 0%, 0%, 0.325);
+}
+
+.example-item--11 {
+	background: hsla(0, 0%, 0%, 0.35);
+}
+
+.example-item--12 {
+	background: hsla(0, 0%, 0%, 0.375);
+}
+
+.example-item--13 {
+	background: hsla(0, 0%, 0%, 0.4);
+}
+
+.example-container-2-perfect-fit {
+	grid-template-columns: repeat(var(--slider-slides-count, 1), calc( ( var(--slider-container-width, 900px) / 3 ) - 2/3 * var(--slide-gap, 1rem)));
+}
+.example-container-2-perfect-fit .example-item {
+	aspect-ratio: 1/1;
+	width: 100%;
+}
+
+.example-container-2-varying-widths .example-item {
+	aspect-ratio: unset;
+	height: 300px;
+}
+
+.example-container-2-varying-widths .example-item--1 {
+	width: 120px;
+}
+.example-container-2-varying-widths .example-item--2 {
+	width: 200px;
+}
+.example-container-2-varying-widths .example-item--3 {
+	width: 90px;
+}
+.example-container-2-varying-widths .example-item--4 {
+	width: 4800px;
+}
+.example-container-2-varying-widths .example-item--5 {
+	width: 170px;
+}
+.example-container-2-varying-widths .example-item--6 {
+	width: 100px;
+}
+.example-container-2-varying-widths .example-item--8 {
+	width: 280px;
+}
+
+.example-container-3-scroll-snapping-mandatory {
+	scroll-snap-type: x mandatory;
+}
+.example-container-3-scroll-snapping-proximity {
+	scroll-snap-type: x proximity;
+}
+
+.overflow-slider__dots {
+	margin-top: 1.5rem;
+}
+
+.overflow-slider__arrows {
+	margin-top: 1.5rem;
+}
+
+.overflow-slider__scroll-indicator {
+	margin-top: 1rem;
+}
+
+.overflow-slider__arrows-button {
+	background: transparent;
+	padding: 0;
+}
+.overflow-slider__arrows-button:hover,
+.overflow-slider__arrows-button:focus {
+	background: transparent !important;
+}
+.overflow-slider__arrows-button svg {
+	fill: var(--color-grey-800);
+	width: 1.625rem !important;
+	height: 1.625rem !important;
+}

package/docs/assets/demo.js

@@ -0,0 +1,113 @@
+import {
+	OverflowSlider,
+	DragScrollingPlugin,
+	SkipLinksPlugin,
+	ArrowsPlugin,
+	ScrollIndicatorPlugin,
+	DotsPlugin
+} from '../dist/overflow-slider.esm.js';
+
+(function () {
+	const init = () => {
+
+		const example1CSS = new OverflowSlider(
+			document.querySelector( '.example-container-1-css' ),
+		);
+		console.log( '1-css', example1CSS );
+
+		const example1DragScrolling = new OverflowSlider(
+			document.querySelector( '.example-container-1-drag-scrolling' ),
+			{},
+			[
+				DragScrollingPlugin(),
+				SkipLinksPlugin(),
+			]
+		);
+		console.log( '1-drag-scrolling', example1DragScrolling );
+
+		const example1Arrows = new OverflowSlider(
+			document.querySelector( '.example-container-1-arrows' ),
+			{},
+			[
+				DragScrollingPlugin(),
+				SkipLinksPlugin(),
+				ArrowsPlugin(),
+			]
+		);
+		console.log( '1-arrows', example1Arrows );
+
+		const example1ScrollIndicator = new OverflowSlider(
+			document.querySelector( '.example-container-1-scroll-indicator' ),
+			{},
+			[
+				DragScrollingPlugin(),
+				SkipLinksPlugin(),
+				ScrollIndicatorPlugin(),
+			]
+		);
+		console.log( '1-scroll-indicator', example1ScrollIndicator );
+
+		const example1Dots = new OverflowSlider(
+			document.querySelector( '.example-container-1-dots' ),
+			{},
+			[
+				DragScrollingPlugin(),
+				SkipLinksPlugin(),
+				DotsPlugin(),
+			]
+		);
+		console.log( '1-dots', example1Dots );
+
+		const example2PerfectFit = new OverflowSlider(
+			document.querySelector( '.example-container-2-perfect-fit' ),
+			{},
+			[
+				DragScrollingPlugin(),
+				ScrollIndicatorPlugin(),
+			]
+		);
+		console.log( '2-perfect-fit', example2PerfectFit );
+
+		const example2VaryingWidths = new OverflowSlider(
+			document.querySelector( '.example-container-2-varying-widths' ),
+			{},
+			[
+				DragScrollingPlugin(),
+				ScrollIndicatorPlugin(),
+			]
+		);
+		console.log( '2-varying-widths', example2VaryingWidths );
+
+		const example2OnlyFewSlides = new OverflowSlider(
+			document.querySelector( '.example-container-2-only-few-slides' ),
+			{},
+			[
+				DragScrollingPlugin(),
+				ScrollIndicatorPlugin(),
+			]
+		);
+		console.log( '2-only-few-slides', example2OnlyFewSlides );
+
+		const example3ScrollSnappingMandatory = new OverflowSlider(
+			document.querySelector( '.example-container-3-scroll-snapping-mandatory' ),
+			{},
+			[
+				DragScrollingPlugin(),
+				ScrollIndicatorPlugin(),
+			]
+		);
+		console.log( '3-scroll-snapping-mandatory', example3ScrollSnappingMandatory );
+
+		const example3ScrollSnappingProximity = new OverflowSlider(
+			document.querySelector( '.example-container-3-scroll-snapping-proximity' ),
+			{},
+			[
+				DragScrollingPlugin(),
+				ScrollIndicatorPlugin(),
+			]
+		);
+		console.log( '3-scroll-snapping-proximity', example3ScrollSnappingProximity );
+	};
+
+	init();
+})();

package/docs/dist/overflow-slider.css

@@ -0,0 +1 @@
+.overflow-slider{display:grid;grid-auto-flow:column;grid-template-columns:max-content;max-width:-moz-max-content;max-width:max-content;overflow:auto;width:100%}.overflow-slider::-webkit-scrollbar{display:none}.overflow-slider>*{outline-offset:-2px;scroll-snap-align:start}:root{--overflow-slider-arrows-size:1.5rem;--overflow-slider-arrows-gap:.5rem;--overflow-slider-arrows-inactive-opacity:0.5}.overflow-slider__arrows{display:flex;gap:var(--overflow-slider-arrows-gap)}.overflow-slider__arrows-button{align-items:center;cursor:pointer;display:flex;outline-offset:-2px}.overflow-slider__arrows-button svg{height:var(--overflow-slider-arrows-size);width:var(--overflow-slider-arrows-size)}.overflow-slider__arrows-button[data-has-content=false]{opacity:var(--overflow-slider-arrows-inactive-opacity)}:root{--overflow-slider-dots-gap:0.5rem;--overflow-slider-dot-size:0.75rem;--overflow-slider-dot-inactive-color:rgba(0,0,0,.1);--overflow-slider-dot-active-color:rgba(0,0,0,.8)}.overflow-slider__dots{align-items:center;display:flex;justify-content:center}.overflow-slider__dots ul{display:flex;flex-wrap:wrap;gap:var(--overflow-slider-dots-gap);list-style:none;margin:0;padding:0}.overflow-slider__dots li{line-height:0;margin:0;padding:0}.overflow-slider__dot-item{background:var(--overflow-slider-dot-inactive-color);border-radius:50%;cursor:pointer;height:var(--overflow-slider-dot-size);margin:0;outline-offset:2px;padding:0;position:relative;width:var(--overflow-slider-dot-size)}.overflow-slider__dot-item:after{bottom:calc(var(--overflow-slider-dots-gap)*-1);content:"";display:block;left:calc(var(--overflow-slider-dots-gap)*-1);position:absolute;right:calc(var(--overflow-slider-dots-gap)*-1);top:calc(var(--overflow-slider-dots-gap)*-1)}.overflow-slider__dot-item:focus,.overflow-slider__dot-item:hover,.overflow-slider__dot-item[aria-pressed=true]{background:var(--overflow-slider-dot-active-color)}:root{--overflow-slider-scroll-indicator-button-height:4px;--overflow-slider-scroll-indicator-padding:1rem;--overflow-slider-scroll-indicator-button-color:rgba(0,0,0,.75);--overflow-slider-scroll-indicator-bar-color:rgba(0,0,0,.25)}.overflow-slider__scroll-indicator{cursor:pointer;outline:0;padding-block:var(--overflow-slider-scroll-indicator-padding);position:relative;width:100%}.overflow-slider__scroll-indicator[data-has-overflow=false]{display:none}.overflow-slider__scroll-indicator:focus-visible .overflow-slider__scroll-indicator-button{outline:2px solid;outline-offset:2px}.overflow-slider__scroll-indicator-bar{background:var(--overflow-slider-scroll-indicator-bar-color);border-radius:3px;height:2px;left:0;position:absolute;top:50%;transform:translateY(-50%);width:100%}.overflow-slider__scroll-indicator-button{background:var(--overflow-slider-scroll-indicator-button-color);border-radius:3px;cursor:grab;height:var(--overflow-slider-scroll-indicator-button-height);left:0;position:absolute;top:calc(50% - var(--overflow-slider-scroll-indicator-button-height)/2)}.overflow-slider__scroll-indicator-button:hover,.overflow-slider__scroll-indicator-button[data-is-grabbed=true]{--overflow-slider-scroll-indicator-button-height:6px}.overflow-slider__scroll-indicator-button:after{bottom:calc(var(--overflow-slider-scroll-indicator-padding)*-1);content:"";display:block;position:absolute;top:calc(var(--overflow-slider-scroll-indicator-padding)*-1);width:100%}