@moni-labs/moni-ui 0.4.1 → 0.4.3

package/dist/cdn/components/moni-tooltip.js

@@ -0,0 +1,161 @@
+import{d as e,i as t,m as n,o as r,r as i,s as a,t as o}from"../chunks/decorate-D4jKxi6H.js";var s=class extends t{constructor(...e){super(...e),this.text=``,this.position=`top`,this.size=``,this.rich=!1,this._target=null,this._tooltipEl=null,this._docKeydown=e=>this._handleDocKeydown(e),this._anchorName=null,this._show=()=>{this._tooltipEl||=this.shadowRoot?.querySelector(`.tooltip`),this._tooltipEl&&this._tooltipEl.classList.add(`visible`)},this._hide=()=>{this._tooltipEl||=this.shadowRoot?.querySelector(`.tooltip`),this._tooltipEl&&this._tooltipEl.classList.remove(`visible`)}}connectedCallback(){if(super.connectedCallback(),this._target=this.parentElement,this._target){getComputedStyle(this._target).position===`static`&&(this._target.style.position=`relative`),this._target.addEventListener(`mouseenter`,this._show),this._target.addEventListener(`focusin`,this._show),this._target.addEventListener(`mouseleave`,this._hide),this._target.addEventListener(`focusout`,this._hide);let e=globalThis.CSS?.supports;if(e&&e.call(window.CSS,`anchor-name: --x`)&&!this._target.hasAttribute(`data-no-anchor`)){let e=globalThis.crypto?.randomUUID?.()??`tt-${Math.random().toString(36).slice(2,10)}`;this._anchorName=`--moni-tooltip-anchor-${e}`,this._target.style.setProperty(`anchor-name`,this._anchorName)}}document.addEventListener(`keydown`,this._docKeydown)}disconnectedCallback(){this._target&&(this._target.removeEventListener(`mouseenter`,this._show),this._target.removeEventListener(`focusin`,this._show),this._target.removeEventListener(`mouseleave`,this._hide),this._target.removeEventListener(`focusout`,this._hide),this._anchorName&&=(this._target.style.removeProperty(`anchor-name`),null)),document.removeEventListener(`keydown`,this._docKeydown),super.disconnectedCallback()}_handleDocKeydown(e){e.key===`Escape`&&this._tooltipEl?.classList.contains(`visible`)&&this._hide()}get tooltipId(){return this._tooltipEl?.id||``}static{this.styles=[i,n`
+			:host {
+				display: contents;
+				font-family: var(--font);
+			}
+
+			/* M3 CSS anchor positioning (Baseline 2024, Chrome 125+, Edge 125+).
+			   When the parent has a registered anchor-name and this tooltip
+			   uses position-anchor, the browser positions the tooltip relative
+			   to the trigger natively — no JS needed for placement.
+			   Fallbacks to absolute positioning for older browsers. */
+			.tooltip {
+				position-anchor: var(--_anchor-name);
+			}
+			.tooltip.top,
+			.tooltip.top-start,
+			.tooltip.top-end {
+				position-area: block-start;
+			}
+			.tooltip.bottom,
+			.tooltip.bottom-start,
+			.tooltip.bottom-end {
+				position-area: block-end;
+			}
+			.tooltip.left {
+				position-area: inline-start;
+			}
+			.tooltip.right {
+				position-area: inline-end;
+			}
+			.tooltip.top-start,
+			.tooltip.bottom-start {
+				position-try-fallbacks: start;
+			}
+			.tooltip.top-end,
+			.tooltip.bottom-end {
+				position-try-fallbacks: end;
+			}
+
+			/* BeerCSS .tooltip — faithful port */
+			.tooltip {
+				--_space: -0.5rem;
+				visibility: hidden;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				gap: 0.5rem;
+				background-color: var(--inverse-surface);
+				color: var(--inverse-on-surface);
+				font-size: 0.75rem;
+				text-align: center;
+				border-radius: 0.25rem;
+				padding: 0.5rem;
+				position: absolute;
+				z-index: 200;
+				/* BeerCSS default: top center */
+				inset: 0 auto auto 50%;
+				inline-size: auto;
+				white-space: nowrap;
+				font-weight: 500;
+				opacity: 0;
+				transition: all var(--speed2);
+				line-height: normal;
+				transform: translate(-50%, -100%) scale(0.9);
+				margin-block-start: var(--_space);
+				pointer-events: none;
+				max-inline-size: 20rem;
+			}
+
+			/* M3 6 placements — derived from BeerCSS's 4 + start/end variants. */
+			.tooltip.top,
+			.tooltip.top-start,
+			.tooltip.top-end {
+				inset: 0 auto auto 50%;
+				transform: translate(-50%, -100%) scale(0.9);
+				margin-block-start: var(--_space);
+			}
+			.tooltip.top-start {
+				inset-inline-start: 0;
+				transform: translate(0, -100%) scale(0.9);
+			}
+			.tooltip.top-end {
+				inset-inline-start: auto;
+				inset-inline-end: 0;
+				transform: translate(0, -100%) scale(0.9);
+			}
+
+			.tooltip.bottom,
+			.tooltip.bottom-start,
+			.tooltip.bottom-end {
+				inset: auto auto 0 50%;
+				transform: translate(-50%, 100%) scale(0.9);
+				margin-block-end: var(--_space);
+				margin-block-start: 0;
+			}
+			.tooltip.bottom-start {
+				inset-inline-start: 0;
+				transform: translate(0, 100%) scale(0.9);
+			}
+			.tooltip.bottom-end {
+				inset-inline-start: auto;
+				inset-inline-end: 0;
+				transform: translate(0, 100%) scale(0.9);
+			}
+
+			/* Legacy positions (left/right) — preserved for backward compat. */
+			.tooltip.left {
+				inset: 50% auto auto 0;
+				transform: translate(-100%, -50%) scale(0.9);
+				margin-inline: var(--_space);
+				margin-block-start: 0;
+			}
+			.tooltip.right {
+				inset: 50% 0 auto auto;
+				transform: translate(100%, -50%) scale(0.9);
+				margin-inline: var(--_space);
+				margin-block-start: 0;
+			}
+
+			/* Size variants */
+			.tooltip.small  { inline-size: 8rem;  white-space: normal; }
+			.tooltip.medium { inline-size: 12rem; white-space: normal; }
+			.tooltip.large  { inline-size: 16rem; white-space: normal; }
+
+			/* Rich content — allow flex column for stacked content. */
+			:host([rich]) .tooltip {
+				flex-direction: column;
+				align-items: flex-start;
+				white-space: normal;
+				text-align: start;
+				padding: 0.75rem;
+			}
+			:host([rich]) .tooltip ::slotted(*) {
+				display: block;
+			}
+
+			/* Show state (triggered by JS class toggle) */
+			.tooltip.visible {
+				visibility: visible;
+				opacity: 1;
+			}
+			.tooltip.visible.top,
+			.tooltip.visible:not(.left, .right, .bottom, [class*='start'], [class*='end']) {
+				transform: translate(-50%, -100%) scale(1);
+			}
+			.tooltip.visible.top-start { transform: translate(0, -100%) scale(1); }
+			.tooltip.visible.top-end { transform: translate(0, -100%) scale(1); }
+			.tooltip.visible.bottom { transform: translate(-50%, 100%) scale(1); }
+			.tooltip.visible.bottom-start { transform: translate(0, 100%) scale(1); }
+			.tooltip.visible.bottom-end { transform: translate(0, 100%) scale(1); }
+			.tooltip.visible.left { transform: translate(-100%, -50%) scale(1); }
+			.tooltip.visible.right { transform: translate(100%, -50%) scale(1); }
+		`]}render(){let t=[`tooltip`,this.position,this.size].filter(Boolean).join(` `);return e`<div
+			class=${t}
+			role="tooltip"
+			id=${this.id||``}
+			part="tooltip"
+			style=${this._anchorName?`--_anchor-name: ${this._anchorName}`:``}
+		>
+			<slot>${this.text}</slot>
+		</div>`}};o([r({reflect:!0})],s.prototype,`text`,void 0),o([r({reflect:!0})],s.prototype,`position`,void 0),o([r({reflect:!0})],s.prototype,`size`,void 0),o([r({type:Boolean,reflect:!0})],s.prototype,`rich`,void 0),s=o([a(`moni-tooltip`)],s);

package/dist/cdn/components/moni-typography.js

@@ -0,0 +1,117 @@
+import{c as e,d as t,i as n,m as r,o as i,r as a,s as o,t as s}from"../chunks/decorate-D4jKxi6H.js";var c=Symbol.for(``),l=e=>{if(e?.r===c)return e?._$litStatic$},u=e=>({_$litStatic$:e,r:c}),d=new Map,f=(e=>(t,...n)=>{let r=n.length,i,a,o=[],s=[],c,u=0,f=!1;for(;u<r;){for(c=t[u];u<r&&(a=n[u],(i=l(a))!==void 0);)c+=i+t[++u],f=!0;u!==r&&s.push(a),o.push(c),u++}if(u===r&&o.push(t[r]),f){let e=o.join(`$$lit$$`);(t=d.get(e))===void 0&&(o.raw=o,d.set(e,t=o)),n=s}return e(t,...n)})(t),p,m=class extends n{static{p=this}constructor(...e){super(...e),this.variant=`body`,this.size=`medium`,this.as=null,this.text=``}static _tagFor(e){switch(e){case`display`:return`h1`;case`headline`:return`h2`;case`title`:return`h3`;case`body`:return`p`;case`label`:return`label`}}render(){let t=`${this.variant} ${this.size}`,n=u(this.as??p._tagFor(this.variant));return f`<${n}
+			class=${t}
+			part="text"
+		>
+			<slot>${this.text||e}</slot>
+		</${n}>`}static{this.styles=[a,r`
+			:host {
+				display: block;
+				font-family: var(--font);
+				color: inherit;
+				margin: 0;
+				padding: 0;
+			}
+			:host([variant='label']) {
+				display: inline-block;
+			}
+
+			/* ─── M3 Display (largest) ─── */
+			.display.large {
+				font-size: 3.5625rem;
+				line-height: 4rem;
+				font-weight: 400;
+				letter-spacing: -0.015625em;
+			}
+			.display.medium {
+				font-size: 2.8125rem;
+				line-height: 3.25rem;
+				font-weight: 400;
+				letter-spacing: 0;
+			}
+			.display.small {
+				font-size: 2.25rem;
+				line-height: 2.75rem;
+				font-weight: 400;
+				letter-spacing: 0;
+			}
+
+			/* ─── M3 Headline ─── */
+			.headline.large {
+				font-size: 2rem;
+				line-height: 2.5rem;
+				font-weight: 400;
+				letter-spacing: 0;
+			}
+			.headline.medium {
+				font-size: 1.75rem;
+				line-height: 2.25rem;
+				font-weight: 400;
+				letter-spacing: 0;
+			}
+			.headline.small {
+				font-size: 1.5rem;
+				line-height: 2rem;
+				font-weight: 400;
+				letter-spacing: 0;
+			}
+
+			/* ─── M3 Title ─── */
+			.title.large {
+				font-size: 1.375rem;
+				line-height: 1.75rem;
+				font-weight: 400;
+				letter-spacing: 0;
+			}
+			.title.medium {
+				font-size: 1rem;
+				line-height: 1.5rem;
+				font-weight: 500;
+				letter-spacing: 0.009375em;
+			}
+			.title.small {
+				font-size: 0.875rem;
+				line-height: 1.25rem;
+				font-weight: 500;
+				letter-spacing: 0.00714em;
+			}
+
+			/* ─── M3 Body ─── */
+			.body.large {
+				font-size: 1rem;
+				line-height: 1.5rem;
+				font-weight: 400;
+				letter-spacing: 0.03125em;
+			}
+			.body.medium {
+				font-size: 0.875rem;
+				line-height: 1.25rem;
+				font-weight: 400;
+				letter-spacing: 0.01786em;
+			}
+			.body.small {
+				font-size: 0.75rem;
+				line-height: 1rem;
+				font-weight: 400;
+				letter-spacing: 0.03333em;
+			}
+
+			/* ─── M3 Label ─── */
+			.label.large {
+				font-size: 0.875rem;
+				line-height: 1.25rem;
+				font-weight: 500;
+				letter-spacing: 0.00714em;
+			}
+			.label.medium {
+				font-size: 0.75rem;
+				line-height: 1rem;
+				font-weight: 500;
+				letter-spacing: 0.04545em;
+			}
+			.label.small {
+				font-size: 0.6875rem;
+				line-height: 1rem;
+				font-weight: 500;
+				letter-spacing: 0.04545em;
+			}
+		`]}};s([i({reflect:!0})],m.prototype,`variant`,void 0),s([i({reflect:!0})],m.prototype,`size`,void 0),s([i({reflect:!0})],m.prototype,`as`,void 0),s([i({reflect:!0})],m.prototype,`text`,void 0),m=p=s([o(`moni-typography`)],m);

package/dist/cdn/importmap.json

@@ -0,0 +1,102 @@
+{
+  "imports": {
+    "@moni-ui/app-bar": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-app-bar.js",
+    "@moni-labs/moni-ui/app-bar": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-app-bar.js",
+    "@moni-ui/badge": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-badge.js",
+    "@moni-labs/moni-ui/badge": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-badge.js",
+    "@moni-ui/bottom-sheet": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-bottom-sheet.js",
+    "@moni-labs/moni-ui/bottom-sheet": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-bottom-sheet.js",
+    "@moni-ui/button-group": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-button-group.js",
+    "@moni-labs/moni-ui/button-group": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-button-group.js",
+    "@moni-ui/button-segment": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-button-segment.js",
+    "@moni-labs/moni-ui/button-segment": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-button-segment.js",
+    "@moni-ui/button": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-button.js",
+    "@moni-labs/moni-ui/button": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-button.js",
+    "@moni-ui/card": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-card.js",
+    "@moni-labs/moni-ui/card": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-card.js",
+    "@moni-ui/carousel": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-carousel.js",
+    "@moni-labs/moni-ui/carousel": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-carousel.js",
+    "@moni-ui/checkbox": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-checkbox.js",
+    "@moni-labs/moni-ui/checkbox": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-checkbox.js",
+    "@moni-ui/chip": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-chip.js",
+    "@moni-labs/moni-ui/chip": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-chip.js",
+    "@moni-ui/color-field": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-color-field.js",
+    "@moni-labs/moni-ui/color-field": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-color-field.js",
+    "@moni-ui/context-menu": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-context-menu.js",
+    "@moni-labs/moni-ui/context-menu": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-context-menu.js",
+    "@moni-ui/dialog": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-dialog.js",
+    "@moni-labs/moni-ui/dialog": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-dialog.js",
+    "@moni-ui/divider": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-divider.js",
+    "@moni-labs/moni-ui/divider": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-divider.js",
+    "@moni-ui/expansion": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-expansion.js",
+    "@moni-labs/moni-ui/expansion": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-expansion.js",
+    "@moni-ui/fab-menu": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-fab-menu.js",
+    "@moni-labs/moni-ui/fab-menu": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-fab-menu.js",
+    "@moni-ui/fab": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-fab.js",
+    "@moni-labs/moni-ui/fab": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-fab.js",
+    "@moni-ui/file-field": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-file-field.js",
+    "@moni-labs/moni-ui/file-field": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-file-field.js",
+    "@moni-ui/icon": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-icon.js",
+    "@moni-labs/moni-ui/icon": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-icon.js",
+    "@moni-ui/list-item": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-list-item.js",
+    "@moni-labs/moni-ui/list-item": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-list-item.js",
+    "@moni-ui/list": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-list.js",
+    "@moni-labs/moni-ui/list": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-list.js",
+    "@moni-ui/loading-indicator": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-loading-indicator.js",
+    "@moni-labs/moni-ui/loading-indicator": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-loading-indicator.js",
+    "@moni-ui/menu-item": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-menu-item.js",
+    "@moni-labs/moni-ui/menu-item": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-menu-item.js",
+    "@moni-ui/menu": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-menu.js",
+    "@moni-labs/moni-ui/menu": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-menu.js",
+    "@moni-ui/morph-modal": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-morph-modal.js",
+    "@moni-labs/moni-ui/morph-modal": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-morph-modal.js",
+    "@moni-ui/nav-item": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-nav-item.js",
+    "@moni-labs/moni-ui/nav-item": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-nav-item.js",
+    "@moni-ui/nav": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-nav.js",
+    "@moni-labs/moni-ui/nav": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-nav.js",
+    "@moni-ui/progress": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-progress.js",
+    "@moni-labs/moni-ui/progress": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-progress.js",
+    "@moni-ui/radio": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-radio.js",
+    "@moni-labs/moni-ui/radio": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-radio.js",
+    "@moni-ui/ripple": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-ripple.js",
+    "@moni-labs/moni-ui/ripple": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-ripple.js",
+    "@moni-ui/segmented-button": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-segmented-button.js",
+    "@moni-labs/moni-ui/segmented-button": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-segmented-button.js",
+    "@moni-ui/select-option": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-select-option.js",
+    "@moni-labs/moni-ui/select-option": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-select-option.js",
+    "@moni-ui/select": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-select.js",
+    "@moni-labs/moni-ui/select": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-select.js",
+    "@moni-ui/shape": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-shape.js",
+    "@moni-labs/moni-ui/shape": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-shape.js",
+    "@moni-ui/side-sheet": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-side-sheet.js",
+    "@moni-labs/moni-ui/side-sheet": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-side-sheet.js",
+    "@moni-ui/slider": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-slider.js",
+    "@moni-labs/moni-ui/slider": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-slider.js",
+    "@moni-ui/snackbar": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-snackbar.js",
+    "@moni-labs/moni-ui/snackbar": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-snackbar.js",
+    "@moni-ui/split-button": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-split-button.js",
+    "@moni-labs/moni-ui/split-button": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-split-button.js",
+    "@moni-ui/step": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-step.js",
+    "@moni-labs/moni-ui/step": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-step.js",
+    "@moni-ui/stepper": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-stepper.js",
+    "@moni-labs/moni-ui/stepper": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-stepper.js",
+    "@moni-ui/switch": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-switch.js",
+    "@moni-labs/moni-ui/switch": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-switch.js",
+    "@moni-ui/tab": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-tab.js",
+    "@moni-labs/moni-ui/tab": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-tab.js",
+    "@moni-ui/tabs": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-tabs.js",
+    "@moni-labs/moni-ui/tabs": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-tabs.js",
+    "@moni-ui/text-field": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-text-field.js",
+    "@moni-labs/moni-ui/text-field": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-text-field.js",
+    "@moni-ui/textarea": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-textarea.js",
+    "@moni-labs/moni-ui/textarea": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-textarea.js",
+    "@moni-ui/time-picker": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-time-picker.js",
+    "@moni-labs/moni-ui/time-picker": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-time-picker.js",
+    "@moni-ui/toolbar": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-toolbar.js",
+    "@moni-labs/moni-ui/toolbar": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-toolbar.js",
+    "@moni-ui/tooltip": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-tooltip.js",
+    "@moni-labs/moni-ui/tooltip": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-tooltip.js",
+    "@moni-ui/typography": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-typography.js",
+    "@moni-labs/moni-ui/typography": "https://cdn.jsdelivr.net/npm/@moni-labs/moni-ui@0.4.3/dist/cdn/components/moni-typography.js"
+  }
+}

package/dist/cdn/moni-ui.min.css

@@ -0,0 +1 @@
+:root{--moni-primary:var(--md-sys-color-primary,#6750a4);--moni-on-primary:var(--md-sys-color-on-primary,#fff);--moni-primary-container:var(--md-sys-color-primary-container,#eaddff);--moni-on-primary-container:var(--md-sys-color-on-primary-container,#21005d);--moni-secondary:var(--md-sys-color-secondary,#625b71);--moni-on-secondary:var(--md-sys-color-on-secondary,#fff);--moni-secondary-container:var(--md-sys-color-secondary-container,#e8def8);--moni-on-secondary-container:var(--md-sys-color-on-secondary-container,#1d192b);--moni-tertiary:var(--md-sys-color-tertiary,#7d5260);--moni-on-tertiary:var(--md-sys-color-on-tertiary,#fff);--moni-tertiary-container:var(--md-sys-color-tertiary-container,#ffd8e4);--moni-on-tertiary-container:var(--md-sys-color-on-tertiary-container,#31111d);--moni-error:var(--md-sys-color-error,#b3261e);--moni-on-error:var(--md-sys-color-on-error,#fff);--moni-error-container:var(--md-sys-color-error-container,#f9dedc);--moni-on-error-container:var(--md-sys-color-on-error-container,#410e0b);--moni-background:var(--md-sys-color-background,#fef7ff);--moni-on-background:var(--md-sys-color-on-background,#1d1b20);--moni-surface:var(--md-sys-color-surface,#fef7ff);--moni-on-surface:var(--md-sys-color-on-surface,#1d1b20);--moni-surface-variant:var(--md-sys-color-surface-variant,#e7e0ec);--moni-on-surface-variant:var(--md-sys-color-on-surface-variant,#49454f);--moni-outline:var(--md-sys-color-outline,#79747e);--moni-outline-variant:var(--md-sys-color-outline-variant,#cac4d0);--moni-surface-container-lowest:var(--md-sys-color-surface-container-lowest,#fff);--moni-surface-container-low:var(--md-sys-color-surface-container-low,#f7f2fa);--moni-surface-container:var(--md-sys-color-surface-container,#f3edf7);--moni-surface-container-high:var(--md-sys-color-surface-container-high,#ece6f0);--moni-surface-container-highest:var(--md-sys-color-surface-container-highest,#e6e1e5);--moni-inverse-surface:var(--md-sys-color-inverse-surface,#313033);--moni-inverse-on-surface:var(--md-sys-color-inverse-on-surface,#f4f0f4);--moni-inverse-primary:var(--md-sys-color-inverse-primary,#d0bcff);--color-success:#16a34a;--color-on-success:#fff;--color-success-container:#dcfce7;--color-on-success-container:#14532d;--color-warning:#f59e0b;--color-on-warning:#000;--color-warning-container:#fef3c7;--color-on-warning-container:#78350f;--color-danger:#dc2626;--color-on-danger:#fff;--color-danger-container:#fee2e2;--color-on-danger-container:#7f1d1d;--color-info:#0284c7;--color-on-info:#fff;--color-info-container:#e0f2fe;--color-on-info-container:#0c4a6e;--font-sans:var(--moni-font-sans,"Geist", system-ui, -apple-system, sans-serif);--font-serif:var(--moni-font-title,"Instrument Serif", Georgia, serif);--font-mono:"Geist Mono", "Fira Code", monospace;--font-brand:var(--moni-font-sans,"Geist", system-ui, sans-serif);--font-title:var(--moni-font-title,"Instrument Serif", Georgia, serif);--font-icon:var(--moni-font-icon,"Material Symbols Rounded");--spacing-density:var(--moni-spacing-density,1);--spacing-xs:calc(.25rem * var(--moni-spacing-density,1));--spacing-sm:calc(.5rem * var(--moni-spacing-density,1));--spacing-md:calc(1rem * var(--moni-spacing-density,1));--spacing-lg:calc(1.5rem * var(--moni-spacing-density,1));--spacing-xl:calc(2rem * var(--moni-spacing-density,1));--spacing-2xl:calc(3rem * var(--moni-spacing-density,1));--radius-base:var(--moni-radius-base,12px);--radius-sm:calc(var(--moni-radius-base,12px) * .5);--radius-md:var(--moni-radius-base,12px);--radius-lg:calc(var(--moni-radius-base,12px) * 1.5);--radius-xl:calc(var(--moni-radius-base,12px) * 2);--radius-full:9999px;--radius-card:var(--moni-radius-card,1.5rem);--moni-list-divider:var(--moni-list-divider-fallback,0);--moni-progress-color:var(--color-primary);--moni-button-shape-radius:1.25rem;--ease-emphasized:cubic-bezier(.2, 0, 0, 1);--ease-emphasized-decelerate:cubic-bezier(.05, .7, .1, 1);--ease-emphasized-accelerate:cubic-bezier(.3, 0, .8, .15);--ease-standard:cubic-bezier(.2, 0, 0, 1);--ease-standard-decelerate:cubic-bezier(0, 0, 0, 1);--ease-standard-accelerate:cubic-bezier(.3, 0, 1, 1);--duration-instant:0s;--duration-fast:.1s;--duration-normal:.2s;--duration-medium:.3s;--duration-emphasized:.5s;--duration-long:.8s;--shadow-1:0 1px 2px 0 #0000000a;--shadow-2:0 2px 4px -1px #0000000a, 0 1px 2px -1px #00000005;--shadow-3:0 4px 8px -2px #0000000a, 0 2px 4px -2px #00000005;--shadow-4:0 8px 16px -4px #0000000a, 0 4px 8px -4px #00000005;--shadow-5:0 12px 24px -8px #0000000d, 0 8px 16px -8px #00000008;--moni-grain-opacity:var(--moni-grain-opacity,.03);--color-brand-bg:var(--moni-background);--color-brand-surface:var(--moni-surface);--color-brand-primary:var(--moni-on-surface);--color-brand-muted:var(--moni-on-surface-variant);--color-brand-border:var(--moni-outline-variant);--color-brand-accent:var(--moni-primary);--color-admin-bg:var(--moni-background);--color-admin-surface:var(--moni-surface);--color-admin-sidebar:var(--moni-inverse-surface);--color-admin-sidebar-fg:var(--moni-inverse-on-surface);--color-admin-sidebar-muted:var(--moni-inverse-on-surface);--color-admin-accent:var(--moni-primary);--color-admin-accent-soft:var(--moni-primary-container);--color-admin-text:var(--moni-on-surface);--color-admin-success:var(--color-success);--color-admin-warn:var(--color-warning);--color-admin-danger:var(--color-danger);--color-admin-info:var(--color-info);--color-primary:var(--moni-primary);--color-on-primary:var(--moni-on-primary);--color-primary-container:var(--moni-primary-container);--color-on-primary-container:var(--moni-on-primary-container);--color-secondary:var(--moni-secondary);--color-on-secondary:var(--moni-on-secondary);--color-secondary-container:var(--moni-secondary-container);--color-on-secondary-container:var(--moni-on-secondary-container);--color-tertiary:var(--moni-tertiary);--color-on-tertiary:var(--moni-on-tertiary);--color-tertiary-container:var(--moni-tertiary-container);--color-on-tertiary-container:var(--moni-on-tertiary-container);--color-error:var(--moni-error);--color-on-error:var(--moni-on-error);--color-error-container:var(--moni-error-container);--color-on-error-container:var(--moni-on-error-container);--color-background:var(--moni-background);--color-on-background:var(--moni-on-background);--color-surface:var(--moni-surface);--color-on-surface:var(--moni-on-surface);--color-surface-variant:var(--moni-surface-variant);--color-on-surface-variant:var(--moni-on-surface-variant);--color-outline:var(--moni-outline);--color-outline-variant:var(--moni-outline-variant);--color-surface-container-lowest:var(--moni-surface-container-lowest);--color-surface-container-low:var(--moni-surface-container-low);--color-surface-container:var(--moni-surface-container);--color-surface-container-high:var(--moni-surface-container-high);--color-surface-container-highest:var(--moni-surface-container-highest);--color-inverse-surface:var(--moni-inverse-surface);--color-inverse-on-surface:var(--moni-inverse-on-surface);--color-inverse-primary:var(--moni-inverse-primary);--primary:var(--moni-primary);--on-primary:var(--moni-on-primary);--background:var(--moni-background);--surface:var(--moni-surface);--on-surface:var(--moni-on-surface);--outline:var(--moni-outline)}@keyframes to-page{0%{opacity:0;transform:var(--_transform)}to{opacity:1;transform:translate(0)}}@keyframes to-indeterminate-progress{0%{inset-inline-start:-50%}to{inset-inline-start:100%}}@keyframes to-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes to-ripple{to{opacity:0;transform:scale(4)}}@font-face{font-family:Material Symbols Rounded;font-style:normal;font-weight:100 700;font-display:swap;src:url(../assets/material-symbols-rounded.woff2)format("woff2")}html,body{background-color:var(--color-background);color:var(--color-on-background);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal}body{min-height:100vh}*{font-style:normal}i,em,cite,dfn,b,strong,span,a,code,kbd,samp,var,mark,time,del,ins,sub,sup,label,legend,small,address,p,h1,h2,h3,h4,h5,h6,[part~=icon],[part~=label],[part~=message],[part~=content],[part~=title]{font-style:normal!important}:where(moni-button,moni-icon,moni-chip,moni-tab,moni-fab,moni-menu-item,moni-list-item,moni-checkbox,moni-radio,moni-switch,moni-slider,moni-step,moni-badge,moni-tooltip,moni-toolbar) i{font-family:var(--font-icon,"Material Symbols Rounded");letter-spacing:normal;text-transform:none;font-feature-settings:"liga";-webkit-font-smoothing:antialiased;vertical-align:middle;direction:ltr;justify-content:center;align-items:center;font-size:1.5rem;font-style:normal;font-weight:400;line-height:1;display:inline-flex}button,input,select,textarea,optgroup{font-family:var(--font-sans)}h1,h2,h3,h4,h5,h6,.moni-font-title{font-family:var(--font-title)}.moni-grain:before{content:"";z-index:9999;pointer-events:none;opacity:var(--moni-grain-opacity,.03);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");background-repeat:repeat;background-size:200px 200px;position:fixed;inset:0}*{scrollbar-width:thin;scrollbar-color:var(--moni-scrollbar-thumb,color-mix(in srgb, var(--moni-on-surface-variant,#49454f) 38%, transparent)) var(--moni-scrollbar-track,transparent)}::-webkit-scrollbar{width:var(--moni-scrollbar-size,.625rem);height:var(--moni-scrollbar-size,.625rem)}::-webkit-scrollbar-track{background:var(--moni-scrollbar-track,transparent);border-radius:999px}::-webkit-scrollbar-thumb{background:var(--moni-scrollbar-thumb,color-mix(in srgb, var(--moni-on-surface-variant,#49454f) 38%, transparent));background-clip:padding-box;border:.1875rem solid #0000;border-radius:999px;min-height:2.5rem}::-webkit-scrollbar-thumb:hover{background:var(--moni-scrollbar-thumb-hover,color-mix(in srgb, var(--moni-on-surface-variant,#49454f) 62%, transparent));background-clip:padding-box;border-width:.125rem}::-webkit-scrollbar-thumb:active{background:var(--moni-scrollbar-thumb-active,color-mix(in srgb, var(--moni-primary,#6750a4) 76%, transparent));background-clip:padding-box}::-webkit-scrollbar-corner{background:0 0}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:4px}.moni-touch-target{min-width:48px;min-height:48px}.moni-safe-bottom{padding-bottom:env(safe-area-inset-bottom,0px)}.moni-safe-top{padding-top:env(safe-area-inset-top,0px)}moni-list{color:inherit;flex-direction:column;flex:1;gap:0;margin:0;padding:0;display:flex}moni-list-item{min-block-size:var(--moni-list-item-min-block-size,3.5rem);cursor:pointer;border-block-end:var(--moni-list-divider,0);text-align:start;align-items:center;gap:1rem;padding:.5rem 1rem;display:flex;position:relative;font-style:normal!important}moni-list-item[active]{background-color:var(--color-secondary-container);color:var(--color-on-secondary-container);border-radius:var(--moni-list-radius,0)}moni-list-item[disabled]{opacity:.5;pointer-events:none}moni-list-item:last-of-type{border-block-end:0}moni-list-item i{font-family:var(--font-icon,"Material Symbols Rounded");justify-content:center;align-items:center;block-size:1.5rem;inline-size:1.5rem;font-size:1.5rem;font-weight:400;display:inline-flex;font-style:normal!important}:is(moni-icon,moni-button,moni-chip,moni-tab,moni-fab,moni-fab-menu,moni-menu-item,moni-menu,moni-context-menu,moni-checkbox,moni-radio,moni-switch,moni-slider,moni-step,moni-stepper,moni-badge,moni-tooltip,moni-toolbar,moni-list,moni-list-item,moni-nav,moni-nav-item,moni-tabs,moni-divider,moni-progress,moni-ripple,moni-card,moni-app-bar,moni-expansion,moni-snackbar,moni-text-field,moni-textarea,moni-select,moni-color-field,moni-file-field,.no-select){-webkit-user-select:none;-ms-user-select:none;user-select:none}:is(moni-button,moni-chip,moni-fab,moni-tab,moni-menu-item,moni-list-item,moni-checkbox,moni-radio,moni-switch,moni-step,moni-tooltip) *{-webkit-user-select:none;user-select:none}:is(input,textarea,pre,code,kbd,samp,[contenteditable]){-webkit-user-select:text!important;user-select:text!important}[data-anchor]{anchor-name:--moni-anchor}:is(button,summary,[role=button],[role=tab],[role=menuitem],a[href]){cursor:pointer}

package/dist/components/_base/shared-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shared-styles.d.ts","sourceRoot":"","sources":["../../../src/components/_base/shared-styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,YAAY,yBAgMxB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"shared-styles.d.ts","sourceRoot":"","sources":["../../../src/components/_base/shared-styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,YAAY,yBAwPxB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/_base/shared-styles.js

@@ -204,6 +204,62 @@ export const sharedStyles = css `
 		--ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
 		--duration-fast: 150ms;
 		--duration-normal: 250ms;
+
+		/* ─── Material 3 scrollbar ─── */
+		--_scrollbar-size: var(--moni-scrollbar-size, 0.625rem);
+		--_scrollbar-track: var(--moni-scrollbar-track, transparent);
+		--_scrollbar-thumb: var(
+			--moni-scrollbar-thumb,
+			color-mix(in srgb, var(--on-surface-variant) 38%, transparent)
+		);
+		--_scrollbar-thumb-hover: var(
+			--moni-scrollbar-thumb-hover,
+			color-mix(in srgb, var(--on-surface-variant) 62%, transparent)
+		);
+		--_scrollbar-thumb-active: var(
+			--moni-scrollbar-thumb-active,
+			color-mix(in srgb, var(--primary) 76%, transparent)
+		);
+	}
+
+	/* Firefox uses its native thin geometry and the same Material color roles. */
+	* {
+		scrollbar-width: thin;
+		scrollbar-color: var(--_scrollbar-thumb) var(--_scrollbar-track);
+	}
+
+	/* Chromium, Safari and Edge: 4px pill inside a 10px interaction gutter. */
+	*::-webkit-scrollbar {
+		inline-size: var(--_scrollbar-size);
+		block-size: var(--_scrollbar-size);
+	}
+
+	*::-webkit-scrollbar-track {
+		background: var(--_scrollbar-track);
+		border-radius: 999px;
+	}
+
+	*::-webkit-scrollbar-thumb {
+		min-block-size: 2.5rem;
+		background: var(--_scrollbar-thumb);
+		background-clip: padding-box;
+		border: 0.1875rem solid transparent;
+		border-radius: 999px;
+	}
+
+	*::-webkit-scrollbar-thumb:hover {
+		background: var(--_scrollbar-thumb-hover);
+		background-clip: padding-box;
+		border-width: 0.125rem;
+	}
+
+	*::-webkit-scrollbar-thumb:active {
+		background: var(--_scrollbar-thumb-active);
+		background-clip: padding-box;
+	}
+
+	*::-webkit-scrollbar-corner {
+		background: transparent;
 	}
 
 	/* ─── 4. Utility classes ─────────────────────────────────────────────── */

package/dist/styles/base.css

@@ -118,25 +118,45 @@ h6,
 	background-size: 200px 200px;
 }
 
-/* Scrollbar discreto */
+/* Material 3 scrollbar for document-level scroll containers. */
+* {
+	scrollbar-width: thin;
+	scrollbar-color:
+		var(--moni-scrollbar-thumb, color-mix(in srgb, var(--moni-on-surface-variant, #49454f) 38%, transparent))
+		var(--moni-scrollbar-track, transparent);
+}
+
 *::-webkit-scrollbar {
-	width: 8px;
-	height: 8px;
+	width: var(--moni-scrollbar-size, 0.625rem);
+	height: var(--moni-scrollbar-size, 0.625rem);
 }
 
 *::-webkit-scrollbar-track {
-	background: transparent;
+	background: var(--moni-scrollbar-track, transparent);
+	border-radius: 999px;
 }
 
 *::-webkit-scrollbar-thumb {
-	background: var(--color-outline-variant);
-	border-radius: 4px;
+	min-height: 2.5rem;
+	background: var(--moni-scrollbar-thumb, color-mix(in srgb, var(--moni-on-surface-variant, #49454f) 38%, transparent));
+	background-clip: padding-box;
+	border: 0.1875rem solid transparent;
+	border-radius: 999px;
 }
 
 *::-webkit-scrollbar-thumb:hover {
-	background: var(--color-outline);
+	background: var(--moni-scrollbar-thumb-hover, color-mix(in srgb, var(--moni-on-surface-variant, #49454f) 62%, transparent));
+	background-clip: padding-box;
+	border-width: 0.125rem;
 }
 
+*::-webkit-scrollbar-thumb:active {
+	background: var(--moni-scrollbar-thumb-active, color-mix(in srgb, var(--moni-primary, #6750a4) 76%, transparent));
+	background-clip: padding-box;
+}
+
+*::-webkit-scrollbar-corner { background: transparent; }
+
 /* Focus visible */
 :focus-visible {
 	outline: 2px solid var(--color-primary);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moni-labs/moni-ui",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "private": false,
   "type": "module",
   "description": "Design system unificado para Moni — Material Design 3 Expressive, mobile-first.",
@@ -18,6 +18,8 @@
     },
     "./browser": "./dist/browser/moni-ui.min.js",
     "./browser.css": "./dist/browser/moni-ui.min.css",
+    "./cdn/importmap": "./dist/cdn/importmap.json",
+    "./cdn/*": "./dist/cdn/components/moni-*.js",
     "./styles": "./dist/styles/index.css",
     "./styles/*": "./dist/styles/*",
     "./components/*.ts": "./src/components/*.ts",

package/src/components/_base/shared-styles.test.ts

@@ -0,0 +1,15 @@
+import { describe, expect, it } from 'vitest';
+import { sharedStyles } from './shared-styles.js';
+
+describe('sharedStyles Material scrollbar', () => {
+	it('styles scroll containers inside every component shadow root', () => {
+		const styles = sharedStyles.cssText;
+
+		expect(styles).toContain('--moni-scrollbar-size');
+		expect(styles).toContain('scrollbar-width: thin');
+		expect(styles).toContain('*::-webkit-scrollbar-thumb');
+		expect(styles).toContain('*::-webkit-scrollbar-thumb:hover');
+		expect(styles).toContain('*::-webkit-scrollbar-thumb:active');
+		expect(styles).toContain('border-radius: 999px');
+	});
+});

package/src/components/_base/shared-styles.ts

@@ -206,6 +206,62 @@ export const sharedStyles = css`
 		--ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
 		--duration-fast: 150ms;
 		--duration-normal: 250ms;
+
+		/* ─── Material 3 scrollbar ─── */
+		--_scrollbar-size: var(--moni-scrollbar-size, 0.625rem);
+		--_scrollbar-track: var(--moni-scrollbar-track, transparent);
+		--_scrollbar-thumb: var(
+			--moni-scrollbar-thumb,
+			color-mix(in srgb, var(--on-surface-variant) 38%, transparent)
+		);
+		--_scrollbar-thumb-hover: var(
+			--moni-scrollbar-thumb-hover,
+			color-mix(in srgb, var(--on-surface-variant) 62%, transparent)
+		);
+		--_scrollbar-thumb-active: var(
+			--moni-scrollbar-thumb-active,
+			color-mix(in srgb, var(--primary) 76%, transparent)
+		);
+	}
+
+	/* Firefox uses its native thin geometry and the same Material color roles. */
+	* {
+		scrollbar-width: thin;
+		scrollbar-color: var(--_scrollbar-thumb) var(--_scrollbar-track);
+	}
+
+	/* Chromium, Safari and Edge: 4px pill inside a 10px interaction gutter. */
+	*::-webkit-scrollbar {
+		inline-size: var(--_scrollbar-size);
+		block-size: var(--_scrollbar-size);
+	}
+
+	*::-webkit-scrollbar-track {
+		background: var(--_scrollbar-track);
+		border-radius: 999px;
+	}
+
+	*::-webkit-scrollbar-thumb {
+		min-block-size: 2.5rem;
+		background: var(--_scrollbar-thumb);
+		background-clip: padding-box;
+		border: 0.1875rem solid transparent;
+		border-radius: 999px;
+	}
+
+	*::-webkit-scrollbar-thumb:hover {
+		background: var(--_scrollbar-thumb-hover);
+		background-clip: padding-box;
+		border-width: 0.125rem;
+	}
+
+	*::-webkit-scrollbar-thumb:active {
+		background: var(--_scrollbar-thumb-active);
+		background-clip: padding-box;
+	}
+
+	*::-webkit-scrollbar-corner {
+		background: transparent;
 	}
 
 	/* ─── 4. Utility classes ─────────────────────────────────────────────── */