@m3e/web 2.5.6 → 2.5.7

package/dist/slide-group.js

@@ -121,6 +121,7 @@ let M3eSlideGroupElement = class M3eSlideGroupElement extends ReconnectedCallbac
   }
   /** @private */
   _updatePaging() {
+    const canPage = this._canPage;
     if (this.disabled) {
       this._canPage = false;
     } else if (!this.vertical) {
@@ -139,6 +140,10 @@ let M3eSlideGroupElement = class M3eSlideGroupElement extends ReconnectedCallbac
     if (!this._canPage) {
       this._canPageStart = this._canPageEnd = false;
     }
+    if (canPage != this._canPage) {
+      // Emit internal (undocumented) event for use with tabs.
+      this.dispatchEvent(new CustomEvent("pagination-changed"));
+    }
   }
 };
 _M3eSlideGroupElement_directionalitySubscription = new WeakMap();
@@ -187,7 +192,7 @@ _M3eSlideGroupElement_pageEnd = function _M3eSlideGroupElement_pageEnd() {
   }
 };
 /** The styles of the element. */
-M3eSlideGroupElement.styles = css`:host { display: flex; flex-wrap: nowrap; overflow: hidden; } :host([vertical]) { flex-direction: column; } .prev-button, .next-button { flex: none; --m3e-icon-button-small-shape-round: 0px; --m3e-icon-button-small-shape-square: 0px; --m3e-icon-button-small-shape-pressed-morph: 0px; --m3e-focus-ring-visibility: hidden; } ::slotted(prev-icon), ::slotted(next-icon), .icon { width: 1em; font-size: var(--m3e-slide-group-button-icon-size, var(--m3e-icon-button-small-icon-size, 1.5rem)) !important; } :host(:not([vertical])) .prev-button, :host(:not([vertical])) .next-button { --m3e-icon-button-small-container-height: 100%; width: var(--m3e-slide-group-button-size, 2.5rem); } :host([vertical]) .prev-button, :host([vertical]) .next-button { width: unset; --m3e-icon-button-small-container-height: var(--m3e-slide-group-button-size, 2.5rem); } :host([vertical]) .prev-button .icon, :host([vertical]) .next-button .icon { transform: rotate(90deg); } .content { flex: 1 1 auto; display: inherit; flex-wrap: inherit; flex-direction: inherit; overflow: inherit; position: relative; border-top: var(--m3e-slide-group-divider-top); border-bottom: var(--m3e-slide-group-divider-bottom); }`;
+M3eSlideGroupElement.styles = css`:host { display: flex; flex-wrap: nowrap; } :host([vertical]) { flex-direction: column; } .prev-button, .next-button { flex: none; --m3e-icon-button-small-shape-round: 0px; --m3e-icon-button-small-shape-square: 0px; --m3e-icon-button-small-shape-pressed-morph: 0px; --m3e-focus-ring-visibility: hidden; } ::slotted(prev-icon), ::slotted(next-icon), .icon { width: 1em; font-size: var(--m3e-slide-group-button-icon-size, var(--m3e-icon-button-small-icon-size, 1.5rem)) !important; } :host(:not([vertical])) .prev-button, :host(:not([vertical])) .next-button { --m3e-icon-button-small-container-height: 100%; width: var(--m3e-slide-group-button-size, 2.5rem); } :host([vertical]) .prev-button, :host([vertical]) .next-button { width: unset; --m3e-icon-button-small-container-height: var(--m3e-slide-group-button-size, 2.5rem); } :host([vertical]) .prev-button .icon, :host([vertical]) .next-button .icon { transform: rotate(90deg); } .content { flex: 1 1 auto; display: inherit; flex-wrap: inherit; flex-direction: inherit; position: relative; border-top: var(--m3e-slide-group-divider-top); border-bottom: var(--m3e-slide-group-divider-bottom); scrollbar-width: none; } .content::-webkit-scrollbar { display: none; } :host([vertical]) .content { overflow-x: hidden; overflow-y: auto; } :host(:not([vertical])) .content { overflow-x: auto; overflow-y: hidden; }`;
 __decorate([query(".content")], M3eSlideGroupElement.prototype, "scrollContainer", void 0);
 __decorate([state()], M3eSlideGroupElement.prototype, "_canPage", void 0);
 __decorate([state()], M3eSlideGroupElement.prototype, "_canPageStart", void 0);

package/dist/slide-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"slide-group.js","sources":["../../src/slide-group/SlideGroupElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\n\r\nimport { customElement, debounce, ReconnectedCallback, ResizeController } from \"@m3e/web/core\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport \"@m3e/web/icon-button\";\r\n\r\n/**\r\n * Presents pagination controls used to scroll overflowing content.\r\n *\r\n * @description\r\n * The `m3e-slide-group` component presents directional pagination controls for navigating overflowing content.\r\n * It orchestrates scrollable layouts with expressive slot-based icons and adaptive orientation, revealing navigation\r\n * affordances only when content exceeds a defined threshold.  It supports both horizontal and vertical flows, and\r\n * encodes accessibility through customizable labels and interaction states.\r\n *\r\n * @example\r\n * The following example illustrates a horizontally scrollable group of items with directional pagination buttons.\r\n * The scroll controls appear when content exceeds the `48px` threshold.\r\n * ```html\r\n * <m3e-slide-group threshold=\"48\">\r\n *  <div>Item 1</div>\r\n *  <div>Item 2</div>\r\n *  <div>Item 3</div>\r\n *  <div>Item 4</div>\r\n *  <div>Item 5</div>\r\n * </m3e-slide-group>\r\n * ```\r\n *\r\n * @tag m3e-slide-group\r\n *\r\n * @slot - Renders the content to paginate.\r\n * @slot next-icon - Renders the icon to present for the next button.\r\n * @slot prev-icon - Renders the icon to present for the previous button.\r\n *\r\n * @attr disabled - Whether scroll buttons are disabled.\r\n * @attr next-page-label - The accessible label given to the button used to move to the previous page.\r\n * @attr previous-page-label - The accessible label given to the button used to move to the next page.\r\n * @attr threshold - A value, in pixels, indicating the scroll threshold at which to begin showing pagination controls.\r\n * @attr vertical - Whether content is oriented vertically.\r\n *\r\n * @cssprop --m3e-slide-group-button-icon-size - Sets icon size for scroll buttons; overrides default small icon size.\r\n * @cssprop --m3e-slide-group-button-size - Defines scroll button size; used for width (horizontal) or height (vertical).\r\n * @cssprop --m3e-slide-group-divider-top - Adds top border to content container for visual separation.\r\n * @cssprop --m3e-slide-group-divider-bottom - Adds bottom border to content container for visual separation.\r\n */\r\n@customElement(\"m3e-slide-group\")\r\nexport class M3eSlideGroupElement extends ReconnectedCallback(LitElement) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: flex;\r\n      flex-wrap: nowrap;\r\n      overflow: hidden;\r\n    }\r\n    :host([vertical]) {\r\n      flex-direction: column;\r\n    }\r\n    .prev-button,\r\n    .next-button {\r\n      flex: none;\r\n      --m3e-icon-button-small-shape-round: 0px;\r\n      --m3e-icon-button-small-shape-square: 0px;\r\n      --m3e-icon-button-small-shape-pressed-morph: 0px;\r\n      --m3e-focus-ring-visibility: hidden;\r\n    }\r\n    ::slotted(prev-icon),\r\n    ::slotted(next-icon),\r\n    .icon {\r\n      width: 1em;\r\n      font-size: var(--m3e-slide-group-button-icon-size, var(--m3e-icon-button-small-icon-size, 1.5rem)) !important;\r\n    }\r\n    :host(:not([vertical])) .prev-button,\r\n    :host(:not([vertical])) .next-button {\r\n      --m3e-icon-button-small-container-height: 100%;\r\n      width: var(--m3e-slide-group-button-size, 2.5rem);\r\n    }\r\n    :host([vertical]) .prev-button,\r\n    :host([vertical]) .next-button {\r\n      width: unset;\r\n      --m3e-icon-button-small-container-height: var(--m3e-slide-group-button-size, 2.5rem);\r\n    }\r\n    :host([vertical]) .prev-button .icon,\r\n    :host([vertical]) .next-button .icon {\r\n      transform: rotate(90deg);\r\n    }\r\n    .content {\r\n      flex: 1 1 auto;\r\n      display: inherit;\r\n      flex-wrap: inherit;\r\n      flex-direction: inherit;\r\n      overflow: inherit;\r\n      position: relative;\r\n      border-top: var(--m3e-slide-group-divider-top);\r\n      border-bottom: var(--m3e-slide-group-divider-bottom);\r\n    }\r\n  `;\r\n\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n\r\n  /** @private */\r\n  readonly #resizeController = new ResizeController(this, {\r\n    target: null,\r\n    callback: () => this._updatePaging(),\r\n  });\r\n\r\n  /** @internal A reference to the container used to scroll content. */\r\n  @query(\".content\") scrollContainer!: HTMLElement;\r\n\r\n  /** @private */ @state() private _canPage = false;\r\n  /** @private */ @state() private _canPageStart = false;\r\n  /** @private */ @state() private _canPageEnd = false;\r\n\r\n  /**\r\n   * Whether scroll buttons are disabled.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) disabled = false;\r\n\r\n  /**\r\n   * Whether content is oriented vertically.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) vertical = false;\r\n\r\n  /**\r\n   * A value, in pixels, indicating the scroll threshold at which to begin showing pagination controls.\r\n   * @default 0\r\n   */\r\n  @property({ type: Number }) threshold = 0;\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the previous page.\r\n   * @default \"Previous page\"\r\n   */\r\n  @property({ attribute: \"previous-page-label\" }) previousPageLabel = \"Previous page\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the next page.\r\n   * @default \"Next page\"\r\n   */\r\n  @property({ attribute: \"next-page-label\" }) nextPageLabel = \"Next page\";\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.#directionalitySubscription = M3eDirectionality.observe(() => this.requestUpdate());\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.#directionalitySubscription?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n    this.#resizeController.observe(this.scrollContainer);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n    super.firstUpdated(_changedProperties);\r\n    this.#resizeController.observe(this.scrollContainer);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    const prevButton = html`<m3e-icon-button\r\n      class=\"prev-button\"\r\n      tabindex=\"-1\"\r\n      aria-label=\"${this.previousPageLabel}\"\r\n      ?disabled=\"${!this._canPageStart}\"\r\n      @click=\"${this.#pageStart}\"\r\n    >\r\n      <slot name=\"prev-icon\">\r\n        ${M3eDirectionality.current === \"ltr\" || this.vertical\r\n          ? html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z\" />\r\n            </svg>`\r\n          : html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z\" />\r\n            </svg>`}\r\n      </slot>\r\n    </m3e-icon-button>`;\r\n\r\n    const nextButton = html`<m3e-icon-button\r\n      class=\"next-button\"\r\n      tabindex=\"-1\"\r\n      aria-label=\"${this.nextPageLabel}\"\r\n      ?disabled=\"${!this._canPageEnd}\"\r\n      @click=\"${this.#pageEnd}\"\r\n    >\r\n      <slot name=\"next-icon\">\r\n        ${M3eDirectionality.current === \"ltr\" || this.vertical\r\n          ? html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z\" />\r\n            </svg>`\r\n          : html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z\" />\r\n            </svg>`}\r\n      </slot>\r\n    </m3e-icon-button>`;\r\n\r\n    return html`${this._canPage ? prevButton : nothing}\r\n      <div class=\"content\" @scroll=\"${this._updatePaging}\"><slot></slot></div>\r\n      ${this._canPage ? nextButton : nothing}`;\r\n  }\r\n\r\n  /** @private */\r\n  #pageStart(): void {\r\n    if (!this.vertical) {\r\n      let left = this.scrollContainer.scrollLeft - this.scrollContainer.clientWidth;\r\n      if (left <= this.threshold) {\r\n        left = 0;\r\n      }\r\n      this.scrollContainer.scrollTo({ left, behavior: \"smooth\" });\r\n    } else {\r\n      let top = this.scrollContainer.scrollTop - this.scrollContainer.clientHeight;\r\n      if (top <= this.threshold) {\r\n        top = 0;\r\n      }\r\n      this.scrollContainer.scrollTo({ top, behavior: \"smooth\" });\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #pageEnd(): void {\r\n    if (!this.vertical) {\r\n      let left = this.scrollContainer.scrollLeft + this.scrollContainer.clientWidth;\r\n      if (left >= this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth - this.threshold) {\r\n        left = this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth;\r\n      }\r\n      this.scrollContainer.scrollTo({ left, behavior: \"smooth\" });\r\n    } else {\r\n      let top = this.scrollContainer.scrollTop + this.scrollContainer.clientHeight;\r\n      if (top >= this.scrollContainer.scrollHeight - this.scrollContainer.clientHeight - this.threshold) {\r\n        top = this.scrollContainer.scrollHeight - this.scrollContainer.clientHeight;\r\n      }\r\n      this.scrollContainer.scrollTo({ top, behavior: \"smooth\" });\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  @debounce(40)\r\n  private _updatePaging(): void {\r\n    if (this.disabled) {\r\n      this._canPage = false;\r\n    } else if (!this.vertical) {\r\n      this._canPage =\r\n        Math.round(this.scrollContainer.scrollWidth) > Math.round(this.scrollContainer.clientWidth) + this.threshold;\r\n      if (this._canPage) {\r\n        this._canPageStart = Math.round(this.scrollContainer.scrollLeft) > this.threshold;\r\n        this._canPageEnd =\r\n          Math.round(this.scrollContainer.scrollLeft) + this.threshold <\r\n          Math.round(this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth);\r\n      }\r\n    } else {\r\n      this._canPage =\r\n        Math.round(this.scrollContainer.scrollHeight) > Math.round(this.scrollContainer.clientHeight) + this.threshold;\r\n      if (this._canPage) {\r\n        this._canPageStart = Math.round(this.scrollContainer.scrollTop) > this.threshold;\r\n        this._canPageEnd =\r\n          Math.round(this.scrollContainer.scrollTop) + +this.threshold <\r\n          Math.round(this.scrollContainer.scrollHeight - this.scrollContainer.clientHeight);\r\n      }\r\n    }\r\n\r\n    if (!this._canPage) {\r\n      this._canPageStart = this._canPageEnd = false;\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-slide-group\": M3eSlideGroupElement;\r\n  }\r\n}\r\n"],"names":["M3eSlideGroupElement","ReconnectedCallback","LitElement","constructor","_M3eSlideGroupElement_directionalitySubscription","set","_M3eSlideGroupElement_resizeController","ResizeController","target","callback","_updatePaging","_canPage","_canPageStart","_canPageEnd","disabled","vertical","threshold","previousPageLabel","nextPageLabel","connectedCallback","__classPrivateFieldSet","M3eDirectionality","observe","requestUpdate","disconnectedCallback","__classPrivateFieldGet","call","reconnectedCallback","scrollContainer","firstUpdated","_changedProperties","render","prevButton","html","_M3eSlideGroupElement_instances","_M3eSlideGroupElement_pageStart","current","nextButton","_M3eSlideGroupElement_pageEnd","nothing","Math","round","scrollWidth","clientWidth","scrollLeft","scrollHeight","clientHeight","scrollTop","left","scrollTo","behavior","top","styles","css","__decorate","query","prototype","state","property","type","Boolean","reflect","Number","attribute","debounce","customElement"],"mappings":";;;;;;;;;;;;;AAQA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCG;AAEI,IAAMA,oBAAoB,GAA1B,MAAMA,oBAAqB,SAAQC,mBAAmB,CAACC,UAAU,CAAC,CAAA;AAAlEC,EAAAA,WAAAA,GAAA;;;AAmDL;AAAgBC,IAAAA,gDAAA,CAAAC,GAAA,CAAA,IAAA,EAAA,MAAA,CAAA;AAEhB;IACSC,sCAAA,CAAAD,GAAA,CAAA,IAAA,EAAoB,IAAIE,gBAAgB,CAAC,IAAI,EAAE;AACtDC,MAAAA,MAAM,EAAE,IAAI;AACZC,MAAAA,QAAQ,EAAEA,MAAM,IAAI,CAACC,aAAa;AACnC,KAAA,CAAC,CAAA;AAKF;IAAiC,IAAA,CAAAC,QAAQ,GAAG,KAAK;AACjD;IAAiC,IAAA,CAAAC,aAAa,GAAG,KAAK;AACtD;IAAiC,IAAA,CAAAC,WAAW,GAAG,KAAK;AAEpD;;;AAGG;IACyC,IAAA,CAAAC,QAAQ,GAAG,KAAK;AAE5D;;;AAGG;IACyC,IAAA,CAAAC,QAAQ,GAAG,KAAK;AAE5D;;;AAGG;IACyB,IAAA,CAAAC,SAAS,GAAG,CAAC;AAEzC;;;AAGG;IAC6C,IAAA,CAAAC,iBAAiB,GAAG,eAAe;AAEnF;;;AAGG;IACyC,IAAA,CAAAC,aAAa,GAAG,WAAW;AAoIzE,EAAA;AAlIE;AACSC,EAAAA,iBAAiBA,GAAA;IACxB,KAAK,CAACA,iBAAiB,EAAE;AACzBC,IAAAA,sBAAA,CAAA,IAAI,EAAAhB,gDAAA,EAA+BiB,iBAAiB,CAACC,OAAO,CAAC,MAAM,IAAI,CAACC,aAAa,EAAE,CAAC,MAAA;AAC1F,EAAA;AAEA;AACSC,EAAAA,oBAAoBA,GAAA;IAC3B,KAAK,CAACA,oBAAoB,EAAE;IAC5BC,sBAAA,CAAA,IAAI,EAAArB,gDAAA,EAAA,GAAA,CAA4B,EAAEsB,IAAA,CAAlC,IAAI,CAAgC;AACtC,EAAA;AAEA;AACSC,EAAAA,mBAAmBA,GAAA;IAC1B,KAAK,CAACA,mBAAmB,EAAE;AAC3BF,IAAAA,sBAAA,CAAA,IAAI,8CAAkB,CAACH,OAAO,CAAC,IAAI,CAACM,eAAe,CAAC;AACtD,EAAA;AAEA;EACmBC,YAAYA,CAACC,kBAAkC,EAAA;AAChE,IAAA,KAAK,CAACD,YAAY,CAACC,kBAAkB,CAAC;AACtCL,IAAAA,sBAAA,CAAA,IAAI,8CAAkB,CAACH,OAAO,CAAC,IAAI,CAACM,eAAe,CAAC;AACtD,EAAA;AAEA;AACmBG,EAAAA,MAAMA,GAAA;AACvB,IAAA,MAAMC,UAAU,GAAGC,IAAI,CAAA,+DAAA,EAGP,IAAI,CAAChB,iBAAiB,CAAA,aAAA,EACvB,CAAC,IAAI,CAACL,aAAa,CAAA,UAAA,EACtBa,sBAAA,CAAA,IAAI,EAAAS,+BAAA,EAAA,GAAA,EAAAC,+BAAA,CAAW,CAAA,yBAAA,EAGrBd,iBAAiB,CAACe,OAAO,KAAK,KAAK,IAAI,IAAI,CAACrB,QAAQ,GAClDkB,IAAI,uIAEG,GACPA,IAAI,sIAEG,CAAA,yBAAA,CAEI;AAEnB,IAAA,MAAMI,UAAU,GAAGJ,IAAI,CAAA,+DAAA,EAGP,IAAI,CAACf,aAAa,CAAA,aAAA,EACnB,CAAC,IAAI,CAACL,WAAW,CAAA,UAAA,EACpBY,sBAAA,CAAA,IAAI,EAAAS,+BAAA,EAAA,GAAA,EAAAI,6BAAA,CAAS,CAAA,yBAAA,EAGnBjB,iBAAiB,CAACe,OAAO,KAAK,KAAK,IAAI,IAAI,CAACrB,QAAQ,GAClDkB,IAAI,sIAEG,GACPA,IAAI,uIAEG,CAAA,yBAAA,CAEI;IAEnB,OAAOA,IAAI,GAAG,IAAI,CAACtB,QAAQ,GAAGqB,UAAU,GAAGO,OAAO,CAAA,8BAAA,EAChB,IAAI,CAAC7B,aAAa,wBAChD,IAAI,CAACC,QAAQ,GAAG0B,UAAU,GAAGE,OAAO,CAAA,CAAE;AAC5C,EAAA;AAoCA;AAEQ7B,EAAAA,aAAaA,GAAA;IACnB,IAAI,IAAI,CAACI,QAAQ,EAAE;MACjB,IAAI,CAACH,QAAQ,GAAG,KAAK;AACvB,IAAA,CAAC,MAAM,IAAI,CAAC,IAAI,CAACI,QAAQ,EAAE;MACzB,IAAI,CAACJ,QAAQ,GACX6B,IAAI,CAACC,KAAK,CAAC,IAAI,CAACb,eAAe,CAACc,WAAW,CAAC,GAAGF,IAAI,CAACC,KAAK,CAAC,IAAI,CAACb,eAAe,CAACe,WAAW,CAAC,GAAG,IAAI,CAAC3B,SAAS;MAC9G,IAAI,IAAI,CAACL,QAAQ,EAAE;AACjB,QAAA,IAAI,CAACC,aAAa,GAAG4B,IAAI,CAACC,KAAK,CAAC,IAAI,CAACb,eAAe,CAACgB,UAAU,CAAC,GAAG,IAAI,CAAC5B,SAAS;AACjF,QAAA,IAAI,CAACH,WAAW,GACd2B,IAAI,CAACC,KAAK,CAAC,IAAI,CAACb,eAAe,CAACgB,UAAU,CAAC,GAAG,IAAI,CAAC5B,SAAS,GAC5DwB,IAAI,CAACC,KAAK,CAAC,IAAI,CAACb,eAAe,CAACc,WAAW,GAAG,IAAI,CAACd,eAAe,CAACe,WAAW,CAAC;AACnF,MAAA;AACF,IAAA,CAAC,MAAM;MACL,IAAI,CAAChC,QAAQ,GACX6B,IAAI,CAACC,KAAK,CAAC,IAAI,CAACb,eAAe,CAACiB,YAAY,CAAC,GAAGL,IAAI,CAACC,KAAK,CAAC,IAAI,CAACb,eAAe,CAACkB,YAAY,CAAC,GAAG,IAAI,CAAC9B,SAAS;MAChH,IAAI,IAAI,CAACL,QAAQ,EAAE;AACjB,QAAA,IAAI,CAACC,aAAa,GAAG4B,IAAI,CAACC,KAAK,CAAC,IAAI,CAACb,eAAe,CAACmB,SAAS,CAAC,GAAG,IAAI,CAAC/B,SAAS;AAChF,QAAA,IAAI,CAACH,WAAW,GACd2B,IAAI,CAACC,KAAK,CAAC,IAAI,CAACb,eAAe,CAACmB,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC/B,SAAS,GAC5DwB,IAAI,CAACC,KAAK,CAAC,IAAI,CAACb,eAAe,CAACiB,YAAY,GAAG,IAAI,CAACjB,eAAe,CAACkB,YAAY,CAAC;AACrF,MAAA;AACF,IAAA;AAEA,IAAA,IAAI,CAAC,IAAI,CAACnC,QAAQ,EAAE;AAClB,MAAA,IAAI,CAACC,aAAa,GAAG,IAAI,CAACC,WAAW,GAAG,KAAK;AAC/C,IAAA;AACF,EAAA;;;;;;AA5DE,EAAA,IAAI,CAAC,IAAI,CAACE,QAAQ,EAAE;AAClB,IAAA,IAAIiC,IAAI,GAAG,IAAI,CAACpB,eAAe,CAACgB,UAAU,GAAG,IAAI,CAAChB,eAAe,CAACe,WAAW;AAC7E,IAAA,IAAIK,IAAI,IAAI,IAAI,CAAChC,SAAS,EAAE;AAC1BgC,MAAAA,IAAI,GAAG,CAAC;AACV,IAAA;AACA,IAAA,IAAI,CAACpB,eAAe,CAACqB,QAAQ,CAAC;MAAED,IAAI;AAAEE,MAAAA,QAAQ,EAAE;AAAQ,KAAE,CAAC;AAC7D,EAAA,CAAC,MAAM;AACL,IAAA,IAAIC,GAAG,GAAG,IAAI,CAACvB,eAAe,CAACmB,SAAS,GAAG,IAAI,CAACnB,eAAe,CAACkB,YAAY;AAC5E,IAAA,IAAIK,GAAG,IAAI,IAAI,CAACnC,SAAS,EAAE;AACzBmC,MAAAA,GAAG,GAAG,CAAC;AACT,IAAA;AACA,IAAA,IAAI,CAACvB,eAAe,CAACqB,QAAQ,CAAC;MAAEE,GAAG;AAAED,MAAAA,QAAQ,EAAE;AAAQ,KAAE,CAAC;AAC5D,EAAA;AACF,CAAC;;AAIC,EAAA,IAAI,CAAC,IAAI,CAACnC,QAAQ,EAAE;AAClB,IAAA,IAAIiC,IAAI,GAAG,IAAI,CAACpB,eAAe,CAACgB,UAAU,GAAG,IAAI,CAAChB,eAAe,CAACe,WAAW;AAC7E,IAAA,IAAIK,IAAI,IAAI,IAAI,CAACpB,eAAe,CAACc,WAAW,GAAG,IAAI,CAACd,eAAe,CAACe,WAAW,GAAG,IAAI,CAAC3B,SAAS,EAAE;MAChGgC,IAAI,GAAG,IAAI,CAACpB,eAAe,CAACc,WAAW,GAAG,IAAI,CAACd,eAAe,CAACe,WAAW;AAC5E,IAAA;AACA,IAAA,IAAI,CAACf,eAAe,CAACqB,QAAQ,CAAC;MAAED,IAAI;AAAEE,MAAAA,QAAQ,EAAE;AAAQ,KAAE,CAAC;AAC7D,EAAA,CAAC,MAAM;AACL,IAAA,IAAIC,GAAG,GAAG,IAAI,CAACvB,eAAe,CAACmB,SAAS,GAAG,IAAI,CAACnB,eAAe,CAACkB,YAAY;AAC5E,IAAA,IAAIK,GAAG,IAAI,IAAI,CAACvB,eAAe,CAACiB,YAAY,GAAG,IAAI,CAACjB,eAAe,CAACkB,YAAY,GAAG,IAAI,CAAC9B,SAAS,EAAE;MACjGmC,GAAG,GAAG,IAAI,CAACvB,eAAe,CAACiB,YAAY,GAAG,IAAI,CAACjB,eAAe,CAACkB,YAAY;AAC7E,IAAA;AACA,IAAA,IAAI,CAAClB,eAAe,CAACqB,QAAQ,CAAC;MAAEE,GAAG;AAAED,MAAAA,QAAQ,EAAE;AAAQ,KAAE,CAAC;AAC5D,EAAA;AACF,CAAC;AAlMD;AACgBlD,oBAAA,CAAAoD,MAAM,GAAmBC,GAAG,CAAA,8pCAAA,CAAtB;AA0DHC,UAAA,CAAA,CAAlBC,KAAK,CAAC,UAAU,CAAC,CAA+B,EAAAvD,oBAAA,CAAAwD,SAAA,EAAA,iBAAA,EAAA,MAAA,CAAA;AAEhBF,UAAA,CAAA,CAAhBG,KAAK,EAAE,CAA0B,EAAAzD,oBAAA,CAAAwD,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AACjBF,UAAA,CAAA,CAAhBG,KAAK,EAAE,CAA+B,EAAAzD,oBAAA,CAAAwD,SAAA,EAAA,eAAA,EAAA,MAAA,CAAA;AACtBF,UAAA,CAAA,CAAhBG,KAAK,EAAE,CAA6B,EAAAzD,oBAAA,CAAAwD,SAAA,EAAA,aAAA,EAAA,MAAA,CAAA;AAMTF,UAAA,CAAA,CAA3CI,QAAQ,CAAC;AAAEC,EAAAA,IAAI,EAAEC,OAAO;AAAEC,EAAAA,OAAO,EAAE;AAAI,CAAE,CAAC,CAAkB,EAAA7D,oBAAA,CAAAwD,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAMjBF,UAAA,CAAA,CAA3CI,QAAQ,CAAC;AAAEC,EAAAA,IAAI,EAAEC,OAAO;AAAEC,EAAAA,OAAO,EAAE;AAAI,CAAE,CAAC,CAAkB,EAAA7D,oBAAA,CAAAwD,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAMjCF,UAAA,CAAA,CAA3BI,QAAQ,CAAC;AAAEC,EAAAA,IAAI,EAAEG;CAAQ,CAAC,CAAe,EAAA9D,oBAAA,CAAAwD,SAAA,EAAA,WAAA,EAAA,MAAA,CAAA;AAMMF,UAAA,CAAA,CAA/CI,QAAQ,CAAC;AAAEK,EAAAA,SAAS,EAAE;CAAuB,CAAC,CAAqC,EAAA/D,oBAAA,CAAAwD,SAAA,EAAA,mBAAA,EAAA,MAAA,CAAA;AAMxCF,UAAA,CAAA,CAA3CI,QAAQ,CAAC;AAAEK,EAAAA,SAAS,EAAE;CAAmB,CAAC,CAA6B,EAAA/D,oBAAA,CAAAwD,SAAA,EAAA,eAAA,EAAA,MAAA,CAAA;AAyGhEF,UAAA,CAAA,CADPU,QAAQ,CAAC,EAAE,CAAC,CA2BZ,EAAAhE,oBAAA,CAAAwD,SAAA,EAAA,eAAA,EAAA,IAAA,CAAA;AAjOUxD,oBAAoB,GAAAsD,UAAA,CAAA,CADhCW,aAAa,CAAC,iBAAiB,CAAC,CACpB,EAAAjE,oBAAoB,CAkOhC;;;;"}
+{"version":3,"file":"slide-group.js","sources":["../../src/slide-group/SlideGroupElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\n\r\nimport { customElement, debounce, ReconnectedCallback, ResizeController } from \"@m3e/web/core\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport \"@m3e/web/icon-button\";\r\n\r\n/**\r\n * Presents pagination controls used to scroll overflowing content.\r\n *\r\n * @description\r\n * The `m3e-slide-group` component presents directional pagination controls for navigating overflowing content.\r\n * It orchestrates scrollable layouts with expressive slot-based icons and adaptive orientation, revealing navigation\r\n * affordances only when content exceeds a defined threshold.  It supports both horizontal and vertical flows, and\r\n * encodes accessibility through customizable labels and interaction states.\r\n *\r\n * @example\r\n * The following example illustrates a horizontally scrollable group of items with directional pagination buttons.\r\n * The scroll controls appear when content exceeds the `48px` threshold.\r\n * ```html\r\n * <m3e-slide-group threshold=\"48\">\r\n *  <div>Item 1</div>\r\n *  <div>Item 2</div>\r\n *  <div>Item 3</div>\r\n *  <div>Item 4</div>\r\n *  <div>Item 5</div>\r\n * </m3e-slide-group>\r\n * ```\r\n *\r\n * @tag m3e-slide-group\r\n *\r\n * @slot - Renders the content to paginate.\r\n * @slot next-icon - Renders the icon to present for the next button.\r\n * @slot prev-icon - Renders the icon to present for the previous button.\r\n *\r\n * @attr disabled - Whether scroll buttons are disabled.\r\n * @attr next-page-label - The accessible label given to the button used to move to the previous page.\r\n * @attr previous-page-label - The accessible label given to the button used to move to the next page.\r\n * @attr threshold - A value, in pixels, indicating the scroll threshold at which to begin showing pagination controls.\r\n * @attr vertical - Whether content is oriented vertically.\r\n *\r\n * @cssprop --m3e-slide-group-button-icon-size - Sets icon size for scroll buttons; overrides default small icon size.\r\n * @cssprop --m3e-slide-group-button-size - Defines scroll button size; used for width (horizontal) or height (vertical).\r\n * @cssprop --m3e-slide-group-divider-top - Adds top border to content container for visual separation.\r\n * @cssprop --m3e-slide-group-divider-bottom - Adds bottom border to content container for visual separation.\r\n */\r\n@customElement(\"m3e-slide-group\")\r\nexport class M3eSlideGroupElement extends ReconnectedCallback(LitElement) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: flex;\r\n      flex-wrap: nowrap;\r\n    }\r\n    :host([vertical]) {\r\n      flex-direction: column;\r\n    }\r\n    .prev-button,\r\n    .next-button {\r\n      flex: none;\r\n      --m3e-icon-button-small-shape-round: 0px;\r\n      --m3e-icon-button-small-shape-square: 0px;\r\n      --m3e-icon-button-small-shape-pressed-morph: 0px;\r\n      --m3e-focus-ring-visibility: hidden;\r\n    }\r\n    ::slotted(prev-icon),\r\n    ::slotted(next-icon),\r\n    .icon {\r\n      width: 1em;\r\n      font-size: var(--m3e-slide-group-button-icon-size, var(--m3e-icon-button-small-icon-size, 1.5rem)) !important;\r\n    }\r\n    :host(:not([vertical])) .prev-button,\r\n    :host(:not([vertical])) .next-button {\r\n      --m3e-icon-button-small-container-height: 100%;\r\n      width: var(--m3e-slide-group-button-size, 2.5rem);\r\n    }\r\n    :host([vertical]) .prev-button,\r\n    :host([vertical]) .next-button {\r\n      width: unset;\r\n      --m3e-icon-button-small-container-height: var(--m3e-slide-group-button-size, 2.5rem);\r\n    }\r\n    :host([vertical]) .prev-button .icon,\r\n    :host([vertical]) .next-button .icon {\r\n      transform: rotate(90deg);\r\n    }\r\n    .content {\r\n      flex: 1 1 auto;\r\n      display: inherit;\r\n      flex-wrap: inherit;\r\n      flex-direction: inherit;\r\n      position: relative;\r\n      border-top: var(--m3e-slide-group-divider-top);\r\n      border-bottom: var(--m3e-slide-group-divider-bottom);\r\n      scrollbar-width: none;\r\n    }\r\n    .content::-webkit-scrollbar {\r\n      display: none;\r\n    }\r\n    :host([vertical]) .content {\r\n      overflow-x: hidden;\r\n      overflow-y: auto;\r\n    }\r\n    :host(:not([vertical])) .content {\r\n      overflow-x: auto;\r\n      overflow-y: hidden;\r\n    }\r\n  `;\r\n\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n\r\n  /** @private */\r\n  readonly #resizeController = new ResizeController(this, {\r\n    target: null,\r\n    callback: () => this._updatePaging(),\r\n  });\r\n\r\n  /** @internal A reference to the container used to scroll content. */\r\n  @query(\".content\") scrollContainer!: HTMLElement;\r\n\r\n  /** @private */ @state() private _canPage = false;\r\n  /** @private */ @state() private _canPageStart = false;\r\n  /** @private */ @state() private _canPageEnd = false;\r\n\r\n  /**\r\n   * Whether scroll buttons are disabled.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) disabled = false;\r\n\r\n  /**\r\n   * Whether content is oriented vertically.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) vertical = false;\r\n\r\n  /**\r\n   * A value, in pixels, indicating the scroll threshold at which to begin showing pagination controls.\r\n   * @default 0\r\n   */\r\n  @property({ type: Number }) threshold = 0;\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the previous page.\r\n   * @default \"Previous page\"\r\n   */\r\n  @property({ attribute: \"previous-page-label\" }) previousPageLabel = \"Previous page\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the next page.\r\n   * @default \"Next page\"\r\n   */\r\n  @property({ attribute: \"next-page-label\" }) nextPageLabel = \"Next page\";\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.#directionalitySubscription = M3eDirectionality.observe(() => this.requestUpdate());\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.#directionalitySubscription?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n    this.#resizeController.observe(this.scrollContainer);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n    super.firstUpdated(_changedProperties);\r\n    this.#resizeController.observe(this.scrollContainer);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    const prevButton = html`<m3e-icon-button\r\n      class=\"prev-button\"\r\n      tabindex=\"-1\"\r\n      aria-label=\"${this.previousPageLabel}\"\r\n      ?disabled=\"${!this._canPageStart}\"\r\n      @click=\"${this.#pageStart}\"\r\n    >\r\n      <slot name=\"prev-icon\">\r\n        ${M3eDirectionality.current === \"ltr\" || this.vertical\r\n          ? html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z\" />\r\n            </svg>`\r\n          : html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z\" />\r\n            </svg>`}\r\n      </slot>\r\n    </m3e-icon-button>`;\r\n\r\n    const nextButton = html`<m3e-icon-button\r\n      class=\"next-button\"\r\n      tabindex=\"-1\"\r\n      aria-label=\"${this.nextPageLabel}\"\r\n      ?disabled=\"${!this._canPageEnd}\"\r\n      @click=\"${this.#pageEnd}\"\r\n    >\r\n      <slot name=\"next-icon\">\r\n        ${M3eDirectionality.current === \"ltr\" || this.vertical\r\n          ? html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z\" />\r\n            </svg>`\r\n          : html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z\" />\r\n            </svg>`}\r\n      </slot>\r\n    </m3e-icon-button>`;\r\n\r\n    return html`${this._canPage ? prevButton : nothing}\r\n      <div class=\"content\" @scroll=\"${this._updatePaging}\"><slot></slot></div>\r\n      ${this._canPage ? nextButton : nothing}`;\r\n  }\r\n\r\n  /** @private */\r\n  #pageStart(): void {\r\n    if (!this.vertical) {\r\n      let left = this.scrollContainer.scrollLeft - this.scrollContainer.clientWidth;\r\n      if (left <= this.threshold) {\r\n        left = 0;\r\n      }\r\n      this.scrollContainer.scrollTo({ left, behavior: \"smooth\" });\r\n    } else {\r\n      let top = this.scrollContainer.scrollTop - this.scrollContainer.clientHeight;\r\n      if (top <= this.threshold) {\r\n        top = 0;\r\n      }\r\n      this.scrollContainer.scrollTo({ top, behavior: \"smooth\" });\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #pageEnd(): void {\r\n    if (!this.vertical) {\r\n      let left = this.scrollContainer.scrollLeft + this.scrollContainer.clientWidth;\r\n      if (left >= this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth - this.threshold) {\r\n        left = this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth;\r\n      }\r\n      this.scrollContainer.scrollTo({ left, behavior: \"smooth\" });\r\n    } else {\r\n      let top = this.scrollContainer.scrollTop + this.scrollContainer.clientHeight;\r\n      if (top >= this.scrollContainer.scrollHeight - this.scrollContainer.clientHeight - this.threshold) {\r\n        top = this.scrollContainer.scrollHeight - this.scrollContainer.clientHeight;\r\n      }\r\n      this.scrollContainer.scrollTo({ top, behavior: \"smooth\" });\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  @debounce(40)\r\n  private _updatePaging(): void {\r\n    const canPage = this._canPage;\r\n    if (this.disabled) {\r\n      this._canPage = false;\r\n    } else if (!this.vertical) {\r\n      this._canPage =\r\n        Math.round(this.scrollContainer.scrollWidth) > Math.round(this.scrollContainer.clientWidth) + this.threshold;\r\n      if (this._canPage) {\r\n        this._canPageStart = Math.round(this.scrollContainer.scrollLeft) > this.threshold;\r\n        this._canPageEnd =\r\n          Math.round(this.scrollContainer.scrollLeft) + this.threshold <\r\n          Math.round(this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth);\r\n      }\r\n    } else {\r\n      this._canPage =\r\n        Math.round(this.scrollContainer.scrollHeight) > Math.round(this.scrollContainer.clientHeight) + this.threshold;\r\n      if (this._canPage) {\r\n        this._canPageStart = Math.round(this.scrollContainer.scrollTop) > this.threshold;\r\n        this._canPageEnd =\r\n          Math.round(this.scrollContainer.scrollTop) + +this.threshold <\r\n          Math.round(this.scrollContainer.scrollHeight - this.scrollContainer.clientHeight);\r\n      }\r\n    }\r\n\r\n    if (!this._canPage) {\r\n      this._canPageStart = this._canPageEnd = false;\r\n    }\r\n\r\n    if (canPage != this._canPage) {\r\n      // Emit internal (undocumented) event for use with tabs.\r\n      this.dispatchEvent(new CustomEvent(\"pagination-changed\"));\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-slide-group\": M3eSlideGroupElement;\r\n  }\r\n}\r\n"],"names":["M3eSlideGroupElement","ReconnectedCallback","LitElement","constructor","_M3eSlideGroupElement_directionalitySubscription","set","_M3eSlideGroupElement_resizeController","ResizeController","target","callback","_updatePaging","_canPage","_canPageStart","_canPageEnd","disabled","vertical","threshold","previousPageLabel","nextPageLabel","connectedCallback","__classPrivateFieldSet","M3eDirectionality","observe","requestUpdate","disconnectedCallback","__classPrivateFieldGet","call","reconnectedCallback","scrollContainer","firstUpdated","_changedProperties","render","prevButton","html","_M3eSlideGroupElement_instances","_M3eSlideGroupElement_pageStart","current","nextButton","_M3eSlideGroupElement_pageEnd","nothing","canPage","Math","round","scrollWidth","clientWidth","scrollLeft","scrollHeight","clientHeight","scrollTop","dispatchEvent","CustomEvent","left","scrollTo","behavior","top","styles","css","__decorate","query","prototype","state","property","type","Boolean","reflect","Number","attribute","debounce","customElement"],"mappings":"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"}

package/dist/slide-group.min.js

@@ -3,5 +3,5 @@
  * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
-import{__classPrivateFieldSet as t,__classPrivateFieldGet as e,__decorate as o}from"tslib";import{LitElement as i,html as l,nothing as s,css as r}from"lit";import{query as n,state as a,property as c}from"lit/decorators.js";import{ReconnectedCallback as h,ResizeController as d,debounce as p,customElement as u}from"@m3e/web/core";import{M3eDirectionality as v}from"@m3e/web/core/bidi";import"@m3e/web/icon-button";var g,b,m,C,f;let P=class extends(h(i)){constructor(){super(...arguments),g.add(this),b.set(this,void 0),m.set(this,new d(this,{target:null,callback:()=>this._updatePaging()})),this._canPage=!1,this._canPageStart=!1,this._canPageEnd=!1,this.disabled=!1,this.vertical=!1,this.threshold=0,this.previousPageLabel="Previous page",this.nextPageLabel="Next page"}connectedCallback(){super.connectedCallback(),t(this,b,v.observe(()=>this.requestUpdate()),"f")}disconnectedCallback(){super.disconnectedCallback(),e(this,b,"f")?.call(this)}reconnectedCallback(){super.reconnectedCallback(),e(this,m,"f").observe(this.scrollContainer)}firstUpdated(t){super.firstUpdated(t),e(this,m,"f").observe(this.scrollContainer)}render(){const t=l`<m3e-icon-button class="prev-button" tabindex="-1" aria-label="${this.previousPageLabel}" ?disabled="${!this._canPageStart}" @click="${e(this,g,"m",C)}"><slot name="prev-icon">${"ltr"===v.current||this.vertical?l`<svg class="icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z"/></svg>`:l`<svg class="icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z"/></svg>`}</slot></m3e-icon-button>`,o=l`<m3e-icon-button class="next-button" tabindex="-1" aria-label="${this.nextPageLabel}" ?disabled="${!this._canPageEnd}" @click="${e(this,g,"m",f)}"><slot name="next-icon">${"ltr"===v.current||this.vertical?l`<svg class="icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z"/></svg>`:l`<svg class="icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z"/></svg>`}</slot></m3e-icon-button>`;return l`${this._canPage?t:s}<div class="content" @scroll="${this._updatePaging}"><slot></slot></div>${this._canPage?o:s}`}_updatePaging(){this.disabled?this._canPage=!1:this.vertical?(this._canPage=Math.round(this.scrollContainer.scrollHeight)>Math.round(this.scrollContainer.clientHeight)+this.threshold,this._canPage&&(this._canPageStart=Math.round(this.scrollContainer.scrollTop)>this.threshold,this._canPageEnd=Math.round(this.scrollContainer.scrollTop)+ +this.threshold<Math.round(this.scrollContainer.scrollHeight-this.scrollContainer.clientHeight))):(this._canPage=Math.round(this.scrollContainer.scrollWidth)>Math.round(this.scrollContainer.clientWidth)+this.threshold,this._canPage&&(this._canPageStart=Math.round(this.scrollContainer.scrollLeft)>this.threshold,this._canPageEnd=Math.round(this.scrollContainer.scrollLeft)+this.threshold<Math.round(this.scrollContainer.scrollWidth-this.scrollContainer.clientWidth))),this._canPage||(this._canPageStart=this._canPageEnd=!1)}};b=new WeakMap,m=new WeakMap,g=new WeakSet,C=function(){if(this.vertical){let t=this.scrollContainer.scrollTop-this.scrollContainer.clientHeight;t<=this.threshold&&(t=0),this.scrollContainer.scrollTo({top:t,behavior:"smooth"})}else{let t=this.scrollContainer.scrollLeft-this.scrollContainer.clientWidth;t<=this.threshold&&(t=0),this.scrollContainer.scrollTo({left:t,behavior:"smooth"})}},f=function(){if(this.vertical){let t=this.scrollContainer.scrollTop+this.scrollContainer.clientHeight;t>=this.scrollContainer.scrollHeight-this.scrollContainer.clientHeight-this.threshold&&(t=this.scrollContainer.scrollHeight-this.scrollContainer.clientHeight),this.scrollContainer.scrollTo({top:t,behavior:"smooth"})}else{let t=this.scrollContainer.scrollLeft+this.scrollContainer.clientWidth;t>=this.scrollContainer.scrollWidth-this.scrollContainer.clientWidth-this.threshold&&(t=this.scrollContainer.scrollWidth-this.scrollContainer.clientWidth),this.scrollContainer.scrollTo({left:t,behavior:"smooth"})}},P.styles=r`:host { display: flex; flex-wrap: nowrap; overflow: hidden; } :host([vertical]) { flex-direction: column; } .prev-button, .next-button { flex: none; --m3e-icon-button-small-shape-round: 0px; --m3e-icon-button-small-shape-square: 0px; --m3e-icon-button-small-shape-pressed-morph: 0px; --m3e-focus-ring-visibility: hidden; } ::slotted(prev-icon), ::slotted(next-icon), .icon { width: 1em; font-size: var(--m3e-slide-group-button-icon-size, var(--m3e-icon-button-small-icon-size, 1.5rem)) !important; } :host(:not([vertical])) .prev-button, :host(:not([vertical])) .next-button { --m3e-icon-button-small-container-height: 100%; width: var(--m3e-slide-group-button-size, 2.5rem); } :host([vertical]) .prev-button, :host([vertical]) .next-button { width: unset; --m3e-icon-button-small-container-height: var(--m3e-slide-group-button-size, 2.5rem); } :host([vertical]) .prev-button .icon, :host([vertical]) .next-button .icon { transform: rotate(90deg); } .content { flex: 1 1 auto; display: inherit; flex-wrap: inherit; flex-direction: inherit; overflow: inherit; position: relative; border-top: var(--m3e-slide-group-divider-top); border-bottom: var(--m3e-slide-group-divider-bottom); }`,o([n(".content")],P.prototype,"scrollContainer",void 0),o([a()],P.prototype,"_canPage",void 0),o([a()],P.prototype,"_canPageStart",void 0),o([a()],P.prototype,"_canPageEnd",void 0),o([c({type:Boolean,reflect:!0})],P.prototype,"disabled",void 0),o([c({type:Boolean,reflect:!0})],P.prototype,"vertical",void 0),o([c({type:Number})],P.prototype,"threshold",void 0),o([c({attribute:"previous-page-label"})],P.prototype,"previousPageLabel",void 0),o([c({attribute:"next-page-label"})],P.prototype,"nextPageLabel",void 0),o([p(40)],P.prototype,"_updatePaging",null),P=o([u("m3e-slide-group")],P);export{P as M3eSlideGroupElement};
+import{__classPrivateFieldSet as t,__classPrivateFieldGet as e,__decorate as o}from"tslib";import{LitElement as i,html as l,nothing as s,css as n}from"lit";import{query as r,state as a,property as c}from"lit/decorators.js";import{ReconnectedCallback as h,ResizeController as d,debounce as p,customElement as u}from"@m3e/web/core";import{M3eDirectionality as v}from"@m3e/web/core/bidi";import"@m3e/web/icon-button";var g,b,m,C,f;let P=class extends(h(i)){constructor(){super(...arguments),g.add(this),b.set(this,void 0),m.set(this,new d(this,{target:null,callback:()=>this._updatePaging()})),this._canPage=!1,this._canPageStart=!1,this._canPageEnd=!1,this.disabled=!1,this.vertical=!1,this.threshold=0,this.previousPageLabel="Previous page",this.nextPageLabel="Next page"}connectedCallback(){super.connectedCallback(),t(this,b,v.observe(()=>this.requestUpdate()),"f")}disconnectedCallback(){super.disconnectedCallback(),e(this,b,"f")?.call(this)}reconnectedCallback(){super.reconnectedCallback(),e(this,m,"f").observe(this.scrollContainer)}firstUpdated(t){super.firstUpdated(t),e(this,m,"f").observe(this.scrollContainer)}render(){const t=l`<m3e-icon-button class="prev-button" tabindex="-1" aria-label="${this.previousPageLabel}" ?disabled="${!this._canPageStart}" @click="${e(this,g,"m",C)}"><slot name="prev-icon">${"ltr"===v.current||this.vertical?l`<svg class="icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z"/></svg>`:l`<svg class="icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z"/></svg>`}</slot></m3e-icon-button>`,o=l`<m3e-icon-button class="next-button" tabindex="-1" aria-label="${this.nextPageLabel}" ?disabled="${!this._canPageEnd}" @click="${e(this,g,"m",f)}"><slot name="next-icon">${"ltr"===v.current||this.vertical?l`<svg class="icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z"/></svg>`:l`<svg class="icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z"/></svg>`}</slot></m3e-icon-button>`;return l`${this._canPage?t:s}<div class="content" @scroll="${this._updatePaging}"><slot></slot></div>${this._canPage?o:s}`}_updatePaging(){const t=this._canPage;this.disabled?this._canPage=!1:this.vertical?(this._canPage=Math.round(this.scrollContainer.scrollHeight)>Math.round(this.scrollContainer.clientHeight)+this.threshold,this._canPage&&(this._canPageStart=Math.round(this.scrollContainer.scrollTop)>this.threshold,this._canPageEnd=Math.round(this.scrollContainer.scrollTop)+ +this.threshold<Math.round(this.scrollContainer.scrollHeight-this.scrollContainer.clientHeight))):(this._canPage=Math.round(this.scrollContainer.scrollWidth)>Math.round(this.scrollContainer.clientWidth)+this.threshold,this._canPage&&(this._canPageStart=Math.round(this.scrollContainer.scrollLeft)>this.threshold,this._canPageEnd=Math.round(this.scrollContainer.scrollLeft)+this.threshold<Math.round(this.scrollContainer.scrollWidth-this.scrollContainer.clientWidth))),this._canPage||(this._canPageStart=this._canPageEnd=!1),t!=this._canPage&&this.dispatchEvent(new CustomEvent("pagination-changed"))}};b=new WeakMap,m=new WeakMap,g=new WeakSet,C=function(){if(this.vertical){let t=this.scrollContainer.scrollTop-this.scrollContainer.clientHeight;t<=this.threshold&&(t=0),this.scrollContainer.scrollTo({top:t,behavior:"smooth"})}else{let t=this.scrollContainer.scrollLeft-this.scrollContainer.clientWidth;t<=this.threshold&&(t=0),this.scrollContainer.scrollTo({left:t,behavior:"smooth"})}},f=function(){if(this.vertical){let t=this.scrollContainer.scrollTop+this.scrollContainer.clientHeight;t>=this.scrollContainer.scrollHeight-this.scrollContainer.clientHeight-this.threshold&&(t=this.scrollContainer.scrollHeight-this.scrollContainer.clientHeight),this.scrollContainer.scrollTo({top:t,behavior:"smooth"})}else{let t=this.scrollContainer.scrollLeft+this.scrollContainer.clientWidth;t>=this.scrollContainer.scrollWidth-this.scrollContainer.clientWidth-this.threshold&&(t=this.scrollContainer.scrollWidth-this.scrollContainer.clientWidth),this.scrollContainer.scrollTo({left:t,behavior:"smooth"})}},P.styles=n`:host { display: flex; flex-wrap: nowrap; } :host([vertical]) { flex-direction: column; } .prev-button, .next-button { flex: none; --m3e-icon-button-small-shape-round: 0px; --m3e-icon-button-small-shape-square: 0px; --m3e-icon-button-small-shape-pressed-morph: 0px; --m3e-focus-ring-visibility: hidden; } ::slotted(prev-icon), ::slotted(next-icon), .icon { width: 1em; font-size: var(--m3e-slide-group-button-icon-size, var(--m3e-icon-button-small-icon-size, 1.5rem)) !important; } :host(:not([vertical])) .prev-button, :host(:not([vertical])) .next-button { --m3e-icon-button-small-container-height: 100%; width: var(--m3e-slide-group-button-size, 2.5rem); } :host([vertical]) .prev-button, :host([vertical]) .next-button { width: unset; --m3e-icon-button-small-container-height: var(--m3e-slide-group-button-size, 2.5rem); } :host([vertical]) .prev-button .icon, :host([vertical]) .next-button .icon { transform: rotate(90deg); } .content { flex: 1 1 auto; display: inherit; flex-wrap: inherit; flex-direction: inherit; position: relative; border-top: var(--m3e-slide-group-divider-top); border-bottom: var(--m3e-slide-group-divider-bottom); scrollbar-width: none; } .content::-webkit-scrollbar { display: none; } :host([vertical]) .content { overflow-x: hidden; overflow-y: auto; } :host(:not([vertical])) .content { overflow-x: auto; overflow-y: hidden; }`,o([r(".content")],P.prototype,"scrollContainer",void 0),o([a()],P.prototype,"_canPage",void 0),o([a()],P.prototype,"_canPageStart",void 0),o([a()],P.prototype,"_canPageEnd",void 0),o([c({type:Boolean,reflect:!0})],P.prototype,"disabled",void 0),o([c({type:Boolean,reflect:!0})],P.prototype,"vertical",void 0),o([c({type:Number})],P.prototype,"threshold",void 0),o([c({attribute:"previous-page-label"})],P.prototype,"previousPageLabel",void 0),o([c({attribute:"next-page-label"})],P.prototype,"nextPageLabel",void 0),o([p(40)],P.prototype,"_updatePaging",null),P=o([u("m3e-slide-group")],P);export{P as M3eSlideGroupElement};
 //# sourceMappingURL=slide-group.min.js.map

package/dist/slide-group.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"slide-group.min.js","sources":["../../src/slide-group/SlideGroupElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\n\r\nimport { customElement, debounce, ReconnectedCallback, ResizeController } from \"@m3e/web/core\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport \"@m3e/web/icon-button\";\r\n\r\n/**\r\n * Presents pagination controls used to scroll overflowing content.\r\n *\r\n * @description\r\n * The `m3e-slide-group` component presents directional pagination controls for navigating overflowing content.\r\n * It orchestrates scrollable layouts with expressive slot-based icons and adaptive orientation, revealing navigation\r\n * affordances only when content exceeds a defined threshold.  It supports both horizontal and vertical flows, and\r\n * encodes accessibility through customizable labels and interaction states.\r\n *\r\n * @example\r\n * The following example illustrates a horizontally scrollable group of items with directional pagination buttons.\r\n * The scroll controls appear when content exceeds the `48px` threshold.\r\n * ```html\r\n * <m3e-slide-group threshold=\"48\">\r\n *  <div>Item 1</div>\r\n *  <div>Item 2</div>\r\n *  <div>Item 3</div>\r\n *  <div>Item 4</div>\r\n *  <div>Item 5</div>\r\n * </m3e-slide-group>\r\n * ```\r\n *\r\n * @tag m3e-slide-group\r\n *\r\n * @slot - Renders the content to paginate.\r\n * @slot next-icon - Renders the icon to present for the next button.\r\n * @slot prev-icon - Renders the icon to present for the previous button.\r\n *\r\n * @attr disabled - Whether scroll buttons are disabled.\r\n * @attr next-page-label - The accessible label given to the button used to move to the previous page.\r\n * @attr previous-page-label - The accessible label given to the button used to move to the next page.\r\n * @attr threshold - A value, in pixels, indicating the scroll threshold at which to begin showing pagination controls.\r\n * @attr vertical - Whether content is oriented vertically.\r\n *\r\n * @cssprop --m3e-slide-group-button-icon-size - Sets icon size for scroll buttons; overrides default small icon size.\r\n * @cssprop --m3e-slide-group-button-size - Defines scroll button size; used for width (horizontal) or height (vertical).\r\n * @cssprop --m3e-slide-group-divider-top - Adds top border to content container for visual separation.\r\n * @cssprop --m3e-slide-group-divider-bottom - Adds bottom border to content container for visual separation.\r\n */\r\n@customElement(\"m3e-slide-group\")\r\nexport class M3eSlideGroupElement extends ReconnectedCallback(LitElement) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: flex;\r\n      flex-wrap: nowrap;\r\n      overflow: hidden;\r\n    }\r\n    :host([vertical]) {\r\n      flex-direction: column;\r\n    }\r\n    .prev-button,\r\n    .next-button {\r\n      flex: none;\r\n      --m3e-icon-button-small-shape-round: 0px;\r\n      --m3e-icon-button-small-shape-square: 0px;\r\n      --m3e-icon-button-small-shape-pressed-morph: 0px;\r\n      --m3e-focus-ring-visibility: hidden;\r\n    }\r\n    ::slotted(prev-icon),\r\n    ::slotted(next-icon),\r\n    .icon {\r\n      width: 1em;\r\n      font-size: var(--m3e-slide-group-button-icon-size, var(--m3e-icon-button-small-icon-size, 1.5rem)) !important;\r\n    }\r\n    :host(:not([vertical])) .prev-button,\r\n    :host(:not([vertical])) .next-button {\r\n      --m3e-icon-button-small-container-height: 100%;\r\n      width: var(--m3e-slide-group-button-size, 2.5rem);\r\n    }\r\n    :host([vertical]) .prev-button,\r\n    :host([vertical]) .next-button {\r\n      width: unset;\r\n      --m3e-icon-button-small-container-height: var(--m3e-slide-group-button-size, 2.5rem);\r\n    }\r\n    :host([vertical]) .prev-button .icon,\r\n    :host([vertical]) .next-button .icon {\r\n      transform: rotate(90deg);\r\n    }\r\n    .content {\r\n      flex: 1 1 auto;\r\n      display: inherit;\r\n      flex-wrap: inherit;\r\n      flex-direction: inherit;\r\n      overflow: inherit;\r\n      position: relative;\r\n      border-top: var(--m3e-slide-group-divider-top);\r\n      border-bottom: var(--m3e-slide-group-divider-bottom);\r\n    }\r\n  `;\r\n\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n\r\n  /** @private */\r\n  readonly #resizeController = new ResizeController(this, {\r\n    target: null,\r\n    callback: () => this._updatePaging(),\r\n  });\r\n\r\n  /** @internal A reference to the container used to scroll content. */\r\n  @query(\".content\") scrollContainer!: HTMLElement;\r\n\r\n  /** @private */ @state() private _canPage = false;\r\n  /** @private */ @state() private _canPageStart = false;\r\n  /** @private */ @state() private _canPageEnd = false;\r\n\r\n  /**\r\n   * Whether scroll buttons are disabled.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) disabled = false;\r\n\r\n  /**\r\n   * Whether content is oriented vertically.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) vertical = false;\r\n\r\n  /**\r\n   * A value, in pixels, indicating the scroll threshold at which to begin showing pagination controls.\r\n   * @default 0\r\n   */\r\n  @property({ type: Number }) threshold = 0;\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the previous page.\r\n   * @default \"Previous page\"\r\n   */\r\n  @property({ attribute: \"previous-page-label\" }) previousPageLabel = \"Previous page\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the next page.\r\n   * @default \"Next page\"\r\n   */\r\n  @property({ attribute: \"next-page-label\" }) nextPageLabel = \"Next page\";\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.#directionalitySubscription = M3eDirectionality.observe(() => this.requestUpdate());\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.#directionalitySubscription?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n    this.#resizeController.observe(this.scrollContainer);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n    super.firstUpdated(_changedProperties);\r\n    this.#resizeController.observe(this.scrollContainer);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    const prevButton = html`<m3e-icon-button\r\n      class=\"prev-button\"\r\n      tabindex=\"-1\"\r\n      aria-label=\"${this.previousPageLabel}\"\r\n      ?disabled=\"${!this._canPageStart}\"\r\n      @click=\"${this.#pageStart}\"\r\n    >\r\n      <slot name=\"prev-icon\">\r\n        ${M3eDirectionality.current === \"ltr\" || this.vertical\r\n          ? html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z\" />\r\n            </svg>`\r\n          : html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z\" />\r\n            </svg>`}\r\n      </slot>\r\n    </m3e-icon-button>`;\r\n\r\n    const nextButton = html`<m3e-icon-button\r\n      class=\"next-button\"\r\n      tabindex=\"-1\"\r\n      aria-label=\"${this.nextPageLabel}\"\r\n      ?disabled=\"${!this._canPageEnd}\"\r\n      @click=\"${this.#pageEnd}\"\r\n    >\r\n      <slot name=\"next-icon\">\r\n        ${M3eDirectionality.current === \"ltr\" || this.vertical\r\n          ? html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z\" />\r\n            </svg>`\r\n          : html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z\" />\r\n            </svg>`}\r\n      </slot>\r\n    </m3e-icon-button>`;\r\n\r\n    return html`${this._canPage ? prevButton : nothing}\r\n      <div class=\"content\" @scroll=\"${this._updatePaging}\"><slot></slot></div>\r\n      ${this._canPage ? nextButton : nothing}`;\r\n  }\r\n\r\n  /** @private */\r\n  #pageStart(): void {\r\n    if (!this.vertical) {\r\n      let left = this.scrollContainer.scrollLeft - this.scrollContainer.clientWidth;\r\n      if (left <= this.threshold) {\r\n        left = 0;\r\n      }\r\n      this.scrollContainer.scrollTo({ left, behavior: \"smooth\" });\r\n    } else {\r\n      let top = this.scrollContainer.scrollTop - this.scrollContainer.clientHeight;\r\n      if (top <= this.threshold) {\r\n        top = 0;\r\n      }\r\n      this.scrollContainer.scrollTo({ top, behavior: \"smooth\" });\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #pageEnd(): void {\r\n    if (!this.vertical) {\r\n      let left = this.scrollContainer.scrollLeft + this.scrollContainer.clientWidth;\r\n      if (left >= this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth - this.threshold) {\r\n        left = this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth;\r\n      }\r\n      this.scrollContainer.scrollTo({ left, behavior: \"smooth\" });\r\n    } else {\r\n      let top = this.scrollContainer.scrollTop + this.scrollContainer.clientHeight;\r\n      if (top >= this.scrollContainer.scrollHeight - this.scrollContainer.clientHeight - this.threshold) {\r\n        top = this.scrollContainer.scrollHeight - this.scrollContainer.clientHeight;\r\n      }\r\n      this.scrollContainer.scrollTo({ top, behavior: \"smooth\" });\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  @debounce(40)\r\n  private _updatePaging(): void {\r\n    if (this.disabled) {\r\n      this._canPage = false;\r\n    } else if (!this.vertical) {\r\n      this._canPage =\r\n        Math.round(this.scrollContainer.scrollWidth) > Math.round(this.scrollContainer.clientWidth) + this.threshold;\r\n      if (this._canPage) {\r\n        this._canPageStart = Math.round(this.scrollContainer.scrollLeft) > this.threshold;\r\n        this._canPageEnd =\r\n          Math.round(this.scrollContainer.scrollLeft) + this.threshold <\r\n          Math.round(this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth);\r\n      }\r\n    } else {\r\n      this._canPage =\r\n        Math.round(this.scrollContainer.scrollHeight) > Math.round(this.scrollContainer.clientHeight) + this.threshold;\r\n      if (this._canPage) {\r\n        this._canPageStart = Math.round(this.scrollContainer.scrollTop) > this.threshold;\r\n        this._canPageEnd =\r\n          Math.round(this.scrollContainer.scrollTop) + +this.threshold <\r\n          Math.round(this.scrollContainer.scrollHeight - this.scrollContainer.clientHeight);\r\n      }\r\n    }\r\n\r\n    if (!this._canPage) {\r\n      this._canPageStart = this._canPageEnd = false;\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-slide-group\": M3eSlideGroupElement;\r\n  }\r\n}\r\n"],"names":["M3eSlideGroupElement","ReconnectedCallback","LitElement","constructor","_M3eSlideGroupElement_directionalitySubscription","set","this","_M3eSlideGroupElement_resizeController","ResizeController","target","callback","_updatePaging","_canPage","_canPageStart","_canPageEnd","disabled","vertical","threshold","previousPageLabel","nextPageLabel","connectedCallback","super","__classPrivateFieldSet","M3eDirectionality","observe","requestUpdate","disconnectedCallback","__classPrivateFieldGet","call","reconnectedCallback","scrollContainer","firstUpdated","_changedProperties","render","prevButton","html","_M3eSlideGroupElement_instances","_M3eSlideGroupElement_pageStart","current","nextButton","_M3eSlideGroupElement_pageEnd","nothing","Math","round","scrollHeight","clientHeight","scrollTop","scrollWidth","clientWidth","scrollLeft","top","scrollTo","behavior","left","styles","css","__decorate","query","prototype","state","property","type","Boolean","reflect","Number","attribute","debounce","customElement"],"mappings":"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"}
+{"version":3,"file":"slide-group.min.js","sources":["../../src/slide-group/SlideGroupElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\n\r\nimport { customElement, debounce, ReconnectedCallback, ResizeController } from \"@m3e/web/core\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport \"@m3e/web/icon-button\";\r\n\r\n/**\r\n * Presents pagination controls used to scroll overflowing content.\r\n *\r\n * @description\r\n * The `m3e-slide-group` component presents directional pagination controls for navigating overflowing content.\r\n * It orchestrates scrollable layouts with expressive slot-based icons and adaptive orientation, revealing navigation\r\n * affordances only when content exceeds a defined threshold.  It supports both horizontal and vertical flows, and\r\n * encodes accessibility through customizable labels and interaction states.\r\n *\r\n * @example\r\n * The following example illustrates a horizontally scrollable group of items with directional pagination buttons.\r\n * The scroll controls appear when content exceeds the `48px` threshold.\r\n * ```html\r\n * <m3e-slide-group threshold=\"48\">\r\n *  <div>Item 1</div>\r\n *  <div>Item 2</div>\r\n *  <div>Item 3</div>\r\n *  <div>Item 4</div>\r\n *  <div>Item 5</div>\r\n * </m3e-slide-group>\r\n * ```\r\n *\r\n * @tag m3e-slide-group\r\n *\r\n * @slot - Renders the content to paginate.\r\n * @slot next-icon - Renders the icon to present for the next button.\r\n * @slot prev-icon - Renders the icon to present for the previous button.\r\n *\r\n * @attr disabled - Whether scroll buttons are disabled.\r\n * @attr next-page-label - The accessible label given to the button used to move to the previous page.\r\n * @attr previous-page-label - The accessible label given to the button used to move to the next page.\r\n * @attr threshold - A value, in pixels, indicating the scroll threshold at which to begin showing pagination controls.\r\n * @attr vertical - Whether content is oriented vertically.\r\n *\r\n * @cssprop --m3e-slide-group-button-icon-size - Sets icon size for scroll buttons; overrides default small icon size.\r\n * @cssprop --m3e-slide-group-button-size - Defines scroll button size; used for width (horizontal) or height (vertical).\r\n * @cssprop --m3e-slide-group-divider-top - Adds top border to content container for visual separation.\r\n * @cssprop --m3e-slide-group-divider-bottom - Adds bottom border to content container for visual separation.\r\n */\r\n@customElement(\"m3e-slide-group\")\r\nexport class M3eSlideGroupElement extends ReconnectedCallback(LitElement) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: flex;\r\n      flex-wrap: nowrap;\r\n    }\r\n    :host([vertical]) {\r\n      flex-direction: column;\r\n    }\r\n    .prev-button,\r\n    .next-button {\r\n      flex: none;\r\n      --m3e-icon-button-small-shape-round: 0px;\r\n      --m3e-icon-button-small-shape-square: 0px;\r\n      --m3e-icon-button-small-shape-pressed-morph: 0px;\r\n      --m3e-focus-ring-visibility: hidden;\r\n    }\r\n    ::slotted(prev-icon),\r\n    ::slotted(next-icon),\r\n    .icon {\r\n      width: 1em;\r\n      font-size: var(--m3e-slide-group-button-icon-size, var(--m3e-icon-button-small-icon-size, 1.5rem)) !important;\r\n    }\r\n    :host(:not([vertical])) .prev-button,\r\n    :host(:not([vertical])) .next-button {\r\n      --m3e-icon-button-small-container-height: 100%;\r\n      width: var(--m3e-slide-group-button-size, 2.5rem);\r\n    }\r\n    :host([vertical]) .prev-button,\r\n    :host([vertical]) .next-button {\r\n      width: unset;\r\n      --m3e-icon-button-small-container-height: var(--m3e-slide-group-button-size, 2.5rem);\r\n    }\r\n    :host([vertical]) .prev-button .icon,\r\n    :host([vertical]) .next-button .icon {\r\n      transform: rotate(90deg);\r\n    }\r\n    .content {\r\n      flex: 1 1 auto;\r\n      display: inherit;\r\n      flex-wrap: inherit;\r\n      flex-direction: inherit;\r\n      position: relative;\r\n      border-top: var(--m3e-slide-group-divider-top);\r\n      border-bottom: var(--m3e-slide-group-divider-bottom);\r\n      scrollbar-width: none;\r\n    }\r\n    .content::-webkit-scrollbar {\r\n      display: none;\r\n    }\r\n    :host([vertical]) .content {\r\n      overflow-x: hidden;\r\n      overflow-y: auto;\r\n    }\r\n    :host(:not([vertical])) .content {\r\n      overflow-x: auto;\r\n      overflow-y: hidden;\r\n    }\r\n  `;\r\n\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n\r\n  /** @private */\r\n  readonly #resizeController = new ResizeController(this, {\r\n    target: null,\r\n    callback: () => this._updatePaging(),\r\n  });\r\n\r\n  /** @internal A reference to the container used to scroll content. */\r\n  @query(\".content\") scrollContainer!: HTMLElement;\r\n\r\n  /** @private */ @state() private _canPage = false;\r\n  /** @private */ @state() private _canPageStart = false;\r\n  /** @private */ @state() private _canPageEnd = false;\r\n\r\n  /**\r\n   * Whether scroll buttons are disabled.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) disabled = false;\r\n\r\n  /**\r\n   * Whether content is oriented vertically.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) vertical = false;\r\n\r\n  /**\r\n   * A value, in pixels, indicating the scroll threshold at which to begin showing pagination controls.\r\n   * @default 0\r\n   */\r\n  @property({ type: Number }) threshold = 0;\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the previous page.\r\n   * @default \"Previous page\"\r\n   */\r\n  @property({ attribute: \"previous-page-label\" }) previousPageLabel = \"Previous page\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the next page.\r\n   * @default \"Next page\"\r\n   */\r\n  @property({ attribute: \"next-page-label\" }) nextPageLabel = \"Next page\";\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.#directionalitySubscription = M3eDirectionality.observe(() => this.requestUpdate());\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.#directionalitySubscription?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n    this.#resizeController.observe(this.scrollContainer);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n    super.firstUpdated(_changedProperties);\r\n    this.#resizeController.observe(this.scrollContainer);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    const prevButton = html`<m3e-icon-button\r\n      class=\"prev-button\"\r\n      tabindex=\"-1\"\r\n      aria-label=\"${this.previousPageLabel}\"\r\n      ?disabled=\"${!this._canPageStart}\"\r\n      @click=\"${this.#pageStart}\"\r\n    >\r\n      <slot name=\"prev-icon\">\r\n        ${M3eDirectionality.current === \"ltr\" || this.vertical\r\n          ? html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z\" />\r\n            </svg>`\r\n          : html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z\" />\r\n            </svg>`}\r\n      </slot>\r\n    </m3e-icon-button>`;\r\n\r\n    const nextButton = html`<m3e-icon-button\r\n      class=\"next-button\"\r\n      tabindex=\"-1\"\r\n      aria-label=\"${this.nextPageLabel}\"\r\n      ?disabled=\"${!this._canPageEnd}\"\r\n      @click=\"${this.#pageEnd}\"\r\n    >\r\n      <slot name=\"next-icon\">\r\n        ${M3eDirectionality.current === \"ltr\" || this.vertical\r\n          ? html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z\" />\r\n            </svg>`\r\n          : html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z\" />\r\n            </svg>`}\r\n      </slot>\r\n    </m3e-icon-button>`;\r\n\r\n    return html`${this._canPage ? prevButton : nothing}\r\n      <div class=\"content\" @scroll=\"${this._updatePaging}\"><slot></slot></div>\r\n      ${this._canPage ? nextButton : nothing}`;\r\n  }\r\n\r\n  /** @private */\r\n  #pageStart(): void {\r\n    if (!this.vertical) {\r\n      let left = this.scrollContainer.scrollLeft - this.scrollContainer.clientWidth;\r\n      if (left <= this.threshold) {\r\n        left = 0;\r\n      }\r\n      this.scrollContainer.scrollTo({ left, behavior: \"smooth\" });\r\n    } else {\r\n      let top = this.scrollContainer.scrollTop - this.scrollContainer.clientHeight;\r\n      if (top <= this.threshold) {\r\n        top = 0;\r\n      }\r\n      this.scrollContainer.scrollTo({ top, behavior: \"smooth\" });\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #pageEnd(): void {\r\n    if (!this.vertical) {\r\n      let left = this.scrollContainer.scrollLeft + this.scrollContainer.clientWidth;\r\n      if (left >= this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth - this.threshold) {\r\n        left = this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth;\r\n      }\r\n      this.scrollContainer.scrollTo({ left, behavior: \"smooth\" });\r\n    } else {\r\n      let top = this.scrollContainer.scrollTop + this.scrollContainer.clientHeight;\r\n      if (top >= this.scrollContainer.scrollHeight - this.scrollContainer.clientHeight - this.threshold) {\r\n        top = this.scrollContainer.scrollHeight - this.scrollContainer.clientHeight;\r\n      }\r\n      this.scrollContainer.scrollTo({ top, behavior: \"smooth\" });\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  @debounce(40)\r\n  private _updatePaging(): void {\r\n    const canPage = this._canPage;\r\n    if (this.disabled) {\r\n      this._canPage = false;\r\n    } else if (!this.vertical) {\r\n      this._canPage =\r\n        Math.round(this.scrollContainer.scrollWidth) > Math.round(this.scrollContainer.clientWidth) + this.threshold;\r\n      if (this._canPage) {\r\n        this._canPageStart = Math.round(this.scrollContainer.scrollLeft) > this.threshold;\r\n        this._canPageEnd =\r\n          Math.round(this.scrollContainer.scrollLeft) + this.threshold <\r\n          Math.round(this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth);\r\n      }\r\n    } else {\r\n      this._canPage =\r\n        Math.round(this.scrollContainer.scrollHeight) > Math.round(this.scrollContainer.clientHeight) + this.threshold;\r\n      if (this._canPage) {\r\n        this._canPageStart = Math.round(this.scrollContainer.scrollTop) > this.threshold;\r\n        this._canPageEnd =\r\n          Math.round(this.scrollContainer.scrollTop) + +this.threshold <\r\n          Math.round(this.scrollContainer.scrollHeight - this.scrollContainer.clientHeight);\r\n      }\r\n    }\r\n\r\n    if (!this._canPage) {\r\n      this._canPageStart = this._canPageEnd = false;\r\n    }\r\n\r\n    if (canPage != this._canPage) {\r\n      // Emit internal (undocumented) event for use with tabs.\r\n      this.dispatchEvent(new CustomEvent(\"pagination-changed\"));\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-slide-group\": M3eSlideGroupElement;\r\n  }\r\n}\r\n"],"names":["M3eSlideGroupElement","ReconnectedCallback","LitElement","constructor","_M3eSlideGroupElement_directionalitySubscription","set","this","_M3eSlideGroupElement_resizeController","ResizeController","target","callback","_updatePaging","_canPage","_canPageStart","_canPageEnd","disabled","vertical","threshold","previousPageLabel","nextPageLabel","connectedCallback","super","__classPrivateFieldSet","M3eDirectionality","observe","requestUpdate","disconnectedCallback","__classPrivateFieldGet","call","reconnectedCallback","scrollContainer","firstUpdated","_changedProperties","render","prevButton","html","_M3eSlideGroupElement_instances","_M3eSlideGroupElement_pageStart","current","nextButton","_M3eSlideGroupElement_pageEnd","nothing","canPage","Math","round","scrollHeight","clientHeight","scrollTop","scrollWidth","clientWidth","scrollLeft","dispatchEvent","CustomEvent","top","scrollTo","behavior","left","styles","css","__decorate","query","prototype","state","property","type","Boolean","reflect","Number","attribute","debounce","customElement"],"mappings":"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"}

package/dist/src/slide-group/SlideGroupElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SlideGroupElement.d.ts","sourceRoot":"","sources":["../../../src/slide-group/SlideGroupElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAW,cAAc,EAAE,MAAM,KAAK,CAAC;AAMrF,OAAO,sBAAsB,CAAC;;AAE9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,qBACa,oBAAqB,SAAQ,yBAA+B;;IACvE,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CA+CpC;IAUF,qEAAqE;IAClD,eAAe,EAAG,WAAW,CAAC;IAEjD,eAAe,CAAU,OAAO,CAAC,QAAQ,CAAS;IAClD,eAAe,CAAU,OAAO,CAAC,aAAa,CAAS;IACvD,eAAe,CAAU,OAAO,CAAC,WAAW,CAAS;IAErD;;;OAGG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IACyB,SAAS,SAAK;IAE1C;;;OAGG;IAC6C,iBAAiB,SAAmB;IAEpF;;;OAGG;IACyC,aAAa,SAAe;IAExE,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAKrC,kBAAkB;IACT,mBAAmB,IAAI,IAAI;IAKpC,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAKzE,kBAAkB;cACC,MAAM,IAAI,OAAO;IA4EpC,eAAe;IAEf,OAAO,CAAC,aAAa;CA2BtB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}
+{"version":3,"file":"SlideGroupElement.d.ts","sourceRoot":"","sources":["../../../src/slide-group/SlideGroupElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAW,cAAc,EAAE,MAAM,KAAK,CAAC;AAMrF,OAAO,sBAAsB,CAAC;;AAE9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,qBACa,oBAAqB,SAAQ,yBAA+B;;IACvE,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAyDpC;IAUF,qEAAqE;IAClD,eAAe,EAAG,WAAW,CAAC;IAEjD,eAAe,CAAU,OAAO,CAAC,QAAQ,CAAS;IAClD,eAAe,CAAU,OAAO,CAAC,aAAa,CAAS;IACvD,eAAe,CAAU,OAAO,CAAC,WAAW,CAAS;IAErD;;;OAGG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IACyB,SAAS,SAAK;IAE1C;;;OAGG;IAC6C,iBAAiB,SAAmB;IAEpF;;;OAGG;IACyC,aAAa,SAAe;IAExE,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAKrC,kBAAkB;IACT,mBAAmB,IAAI,IAAI;IAKpC,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAKzE,kBAAkB;cACC,MAAM,IAAI,OAAO;IA4EpC,eAAe;IAEf,OAAO,CAAC,aAAa;CAiCtB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}

package/dist/src/tabs/TabsElement.d.ts

@@ -70,7 +70,8 @@ export declare class M3eTabsElement extends M3eTabsElement_base {
      * Whether scroll buttons are disabled.
      * @default false
      */
-    disablePagination: boolean;
+    get disablePagination(): boolean | "auto";
+    set disablePagination(value: boolean | "auto");
     /**
      * The position of the tab headers.
      * @default "before"

package/dist/src/tabs/TabsElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabsElement.d.ts","sourceRoot":"","sources":["../../../src/tabs/TabsElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAW,cAAc,EAAa,MAAM,KAAK,CAAC;AAchG,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGxE,OAAO,sBAAsB,CAAC;AAE9B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;;AAIxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,qBACa,cAAe,SAAQ,mBAA2B;;IAC7D,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CA8GpC;IAGF,eAAe,CAAoB,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAe;IAC3E,eAAe,CAAU,cAAc,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE9D,gBAAgB;IAChB,QAAQ,CAAC,CAAC,gBAAgB,CAAC,kCAIsB;;IAajD;;;OAGG;IAC2D,iBAAiB,UAAS;IAExF;;;OAGG;IACwD,cAAc,EAAE,iBAAiB,CAAY;IAExG;;;OAGG;IAC0B,OAAO,EAAE,UAAU,CAAe;IAE/D;;;OAGG;IACyC,OAAO,UAAS;IAE5D;;;OAGG;IAC6C,iBAAiB,SAAmB;IAEpF;;;OAGG;IACyC,aAAa,SAAe;IAExE,gBAAgB;IAChB,IAAI,IAAI,IAAI,SAAS,aAAa,EAAE,CAEnC;IAED,wBAAwB;IACxB,IAAI,WAAW,IAAI,aAAa,GAAG,IAAI,CAEtC;IAED,gDAAgD;IAChD,IAAI,aAAa,IAAI,MAAM,CAE1B;IACD,IAAI,aAAa,CAAC,KAAK,EAAE,MAAM,EAS9B;IAED,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAUlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAMrC,kBAAkB;cACC,OAAO,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQ1E,kBAAkB;cACC,MAAM,IAAI,OAAO;CAmHrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}
+{"version":3,"file":"TabsElement.d.ts","sourceRoot":"","sources":["../../../src/tabs/TabsElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAW,cAAc,EAAa,MAAM,KAAK,CAAC;AAgBhG,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAIxE,OAAO,sBAAsB,CAAC;AAE9B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;;AAIxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,qBACa,cAAe,SAAQ,mBAA2B;;IAC7D,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CA+HpC;IAGF,eAAe,CAAoB,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAwB;IACpF,eAAe,CAAU,cAAc,EAAE,MAAM,GAAG,IAAI,CAAQ;IAI9D,gBAAgB;IAChB,QAAQ,CAAC,CAAC,gBAAgB,CAAC,kCAKsB;;IAkBjD;;;OAGG;IACH,IAAoC,iBAAiB,IAAI,OAAO,GAAG,MAAM,CAUxE;IACD,IAAI,iBAAiB,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,EAY5C;IAED;;;OAGG;IACwD,cAAc,EAAE,iBAAiB,CAAY;IAExG;;;OAGG;IAC0B,OAAO,EAAE,UAAU,CAAe;IAE/D;;;OAGG;IACyC,OAAO,UAAS;IAE5D;;;OAGG;IAC6C,iBAAiB,SAAmB;IAEpF;;;OAGG;IACyC,aAAa,SAAe;IAExE,gBAAgB;IAChB,IAAI,IAAI,IAAI,SAAS,aAAa,EAAE,CAEnC;IAED,wBAAwB;IACxB,IAAI,WAAW,IAAI,aAAa,GAAG,IAAI,CAEtC;IAED,gDAAgD;IAChD,IAAI,aAAa,IAAI,MAAM,CAE1B;IACD,IAAI,aAAa,CAAC,KAAK,EAAE,MAAM,EAS9B;IAED,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAUlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAMrC,kBAAkB;cACC,OAAO,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQ1E,kBAAkB;cACC,MAAM,IAAI,OAAO;CA2SrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}

package/dist/src/theme/ThemeElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeElement.d.ts","sourceRoot":"","sources":["../../../src/theme/ThemeElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAc5E,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,qBACa,eAAgB,SAAQ,UAAU;;IAC7C,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAQpC;IAUF;;;OAGG;IACS,KAAK,SAAa;IAE9B;;;OAGG;IACS,MAAM,EAAE,WAAW,CAAU;IAEzC;;;OAGG;IACS,QAAQ,EAAE,aAAa,CAAc;IAEjD;;;OAGG;IACqD,WAAW,UAAS;IAE5E;;;OAGG;IACyB,OAAO,SAAK;IAExC;;OAEG;IACS,MAAM,EAAE,YAAY,CAAc;IAE9C,uCAAuC;IACvC,IAAI,MAAM,IAAI,OAAO,CAiBpB;IAED,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAgBlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IASrC,kBAAkB;cACC,OAAO,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQ1E,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAKzE,kBAAkB;cACC,MAAM,IAAI,OAAO;CAyGrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}
+{"version":3,"file":"ThemeElement.d.ts","sourceRoot":"","sources":["../../../src/theme/ThemeElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAc5E,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,qBACa,eAAgB,SAAQ,UAAU;;IAC7C,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAIpC;IAUF;;;OAGG;IACS,KAAK,SAAa;IAE9B;;;OAGG;IACS,MAAM,EAAE,WAAW,CAAU;IAEzC;;;OAGG;IACS,QAAQ,EAAE,aAAa,CAAc;IAEjD;;;OAGG;IACqD,WAAW,UAAS;IAE5E;;;OAGG;IACyB,OAAO,SAAK;IAExC;;OAEG;IACS,MAAM,EAAE,YAAY,CAAc;IAE9C,uCAAuC;IACvC,IAAI,MAAM,IAAI,OAAO,CAiBpB;IAED,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IA4BlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAarC,kBAAkB;cACC,OAAO,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQ1E,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAKzE,kBAAkB;cACC,MAAM,IAAI,OAAO;CAqGrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}

package/dist/tabs.js

@@ -6,7 +6,7 @@
 import { __classPrivateFieldGet, __decorate, __classPrivateFieldSet } from 'tslib';
 import { LitElement, html, css, nothing, unsafeCSS } from 'lit';
 import { query, state, property } from 'lit/decorators.js';
-import { Selected, HtmlFor, KeyboardClick, Focusable, Disabled, AttachInternals, Role, DesignToken, customElement, ResizeController, addCustomState, hasCustomState, deleteCustomState } from '@m3e/web/core';
+import { Selected, HtmlFor, KeyboardClick, Focusable, Disabled, AttachInternals, Role, DesignToken, customElement, VelocityTracker, ResizeController, addCustomState, hasCustomState, prefersReducedMotion, deleteCustomState } from '@m3e/web/core';
 import { addAriaReferencedId, removeAriaReferencedId, selectionManager, SelectionManager } from '@m3e/web/core/a11y';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { M3eDirectionality } from '@m3e/web/core/bidi';
@@ -193,7 +193,7 @@ let M3eTabPanelElement = class M3eTabPanelElement extends Role(LitElement, "tabp
 M3eTabPanelElement.styles = css`:host { display: block; overflow-y: auto; scrollbar-width: ${DesignToken.scrollbar.width}; scrollbar-color: ${DesignToken.scrollbar.color}; }`;
 M3eTabPanelElement = __decorate([customElement("m3e-tab-panel")], M3eTabPanelElement);
 
-var _M3eTabsElement_instances, _M3eTabsElement_directionalitySubscription, _M3eTabsElement_renderHeader, _M3eTabsElement_handleSlotChange, _M3eTabsElement_handleKeyDown, _M3eTabsElement_handleChange, _M3eTabsElement_handleSelectedChange, _M3eTabsElement_updateInkBar, _a;
+var _M3eTabsElement_instances, _M3eTabsElement_directionalitySubscription, _M3eTabsElement_swipe, _M3eTabsElement_velocityTracker, _M3eTabsElement_renderHeader, _M3eTabsElement_handleSlotChange, _M3eTabsElement_handleKeyDown, _M3eTabsElement_handleChange, _M3eTabsElement_handleSelectedChange, _M3eTabsElement_handleActiveItemChange, _M3eTabsElement_handleTabsPaginationChange, _M3eTabsElement_handleTabsPointerDown, _M3eTabsElement_handleTabsPointerMove, _M3eTabsElement_handleTabsPointerUp, _M3eTabsElement_handleTabsPointerCancel, _M3eTabsElement_handleTabsLostPointerCapture, _M3eTabsElement_endSwipeGesture, _M3eTabsElement_scrollTabIntoView, _M3eTabsElement_updateInkBar, _a;
 const MIN_PRIMARY_TAB_WIDTH = 24;
 /**
  * Organizes content into separate views where only one view can be visible at a time.
@@ -255,13 +255,12 @@ let M3eTabsElement = class M3eTabsElement extends AttachInternals(LitElement) {
     _M3eTabsElement_directionalitySubscription.set(this, void 0);
     /** @private */
     this._selectedIndex = null;
+    /** @private */
+    _M3eTabsElement_swipe.set(this, void 0);
+    /** @private */
+    _M3eTabsElement_velocityTracker.set(this, new VelocityTracker());
     /** @internal */
-    this[_a] = new SelectionManager().onSelectedItemsChange(() => __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleSelectedChange).call(this)).withHomeAndEnd().withWrap().withDirectionality(M3eDirectionality.current);
-    /**
-     * Whether scroll buttons are disabled.
-     * @default false
-     */
-    this.disablePagination = false;
+    this[_a] = new SelectionManager().onSelectedItemsChange(() => __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleSelectedChange).call(this)).onActiveItemChange(() => __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleActiveItemChange).call(this)).withHomeAndEnd().withWrap().withDirectionality(M3eDirectionality.current);
     /**
      * The position of the tab headers.
      * @default "before"
@@ -291,10 +290,43 @@ let M3eTabsElement = class M3eTabsElement extends AttachInternals(LitElement) {
       skipInitial: true,
       callback: () => {
         addCustomState(this, "--no-animate");
-        __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_updateInkBar).call(this);
+        const activeTab = this[selectionManager].activeItem ?? this.selectedTab;
+        if (activeTab) {
+          __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_scrollTabIntoView).call(this, activeTab, true);
+        } else {
+          __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_updateInkBar).call(this);
+        }
       }
     });
   }
+  /**
+   * Whether scroll buttons are disabled.
+   * @default false
+   */
+  get disablePagination() {
+    switch (this.getAttribute("disable-pagination")) {
+      case "auto":
+        return "auto";
+      case "":
+      case "true":
+        return true;
+      default:
+        return false;
+    }
+  }
+  set disablePagination(value) {
+    switch (value) {
+      case false:
+        this.removeAttribute("disable-pagination");
+        break;
+      case true:
+        this.toggleAttribute("disable-pagination", true);
+        break;
+      case "auto":
+        this.setAttribute("disable-pagination", "auto");
+        break;
+    }
+  }
   /** The tabs. */
   get tabs() {
     return this[selectionManager]?.items ?? [];
@@ -347,14 +379,16 @@ let M3eTabsElement = class M3eTabsElement extends AttachInternals(LitElement) {
         panelIndex = undefined;
       }
     }
-    return html`${this.headerPosition === "before" ? __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_renderHeader).call(this) : nothing}<m3e-slide class="tabs" selected-index="${ifDefined(panelIndex)}"><slot name="panel"></slot></m3e-slide>${this.headerPosition === "after" ? __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_renderHeader).call(this) : nothing}`;
+    return html`${this.headerPosition === "before" ? __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_renderHeader).call(this) : nothing}<m3e-slide class="tabs" selected-index="${ifDefined(panelIndex)}" @pointerdown="${__classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleTabsPointerDown)}" @pointermove="${__classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleTabsPointerMove)}" @pointerup="${__classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleTabsPointerUp)}" @pointercancel="${__classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleTabsPointerCancel)}" @lostpointercapture="${__classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleTabsLostPointerCapture)}"><slot name="panel"></slot></m3e-slide>${this.headerPosition === "after" ? __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_renderHeader).call(this) : nothing}`;
   }
 };
 _M3eTabsElement_directionalitySubscription = new WeakMap();
+_M3eTabsElement_swipe = new WeakMap();
+_M3eTabsElement_velocityTracker = new WeakMap();
 _M3eTabsElement_instances = new WeakSet();
 _a = selectionManager;
 _M3eTabsElement_renderHeader = function _M3eTabsElement_renderHeader() {
-  return html`<m3e-slide-group class="tablist" threshold="8" previous-page-label="${this.previousPageLabel}" next-page-label="${this.nextPageLabel}" ?disabled="${this.disablePagination}"><slot name="prev-icon" slot="prev-icon">${M3eDirectionality.current === "ltr" ? html`<svg class="prev icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z"/></svg>` : html`<svg class="next icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z"/></svg>`}</slot><slot name="next-icon" slot="next-icon">${M3eDirectionality.current === "ltr" ? html`<svg class="next icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z"/></svg>` : html`<svg class="prev icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z"/></svg>`}</slot><div class="header" role="tablist"><div class="tabs"><slot @slotchange="${__classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleSlotChange)}" @keydown="${__classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleKeyDown)}" @change="${__classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleChange)}"></slot></div><div class="ink-bar" aria-hidden="true"><div class="active-indicator"></div></div></div></m3e-slide-group>`;
+  return html`<m3e-slide-group class="tablist" threshold="8" previous-page-label="${this.previousPageLabel}" next-page-label="${this.nextPageLabel}" ?disabled="${this.disablePagination === "auto" ? matchMedia("(hover: none) and (pointer: coarse)").matches : this.disablePagination}" @pagination-changed="${__classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleTabsPaginationChange)}"><slot name="prev-icon" slot="prev-icon">${M3eDirectionality.current === "ltr" ? html`<svg class="prev icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z"/></svg>` : html`<svg class="next icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z"/></svg>`}</slot><slot name="next-icon" slot="next-icon">${M3eDirectionality.current === "ltr" ? html`<svg class="next icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z"/></svg>` : html`<svg class="prev icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z"/></svg>`}</slot><div class="header" role="tablist"><div class="tabs"><slot @slotchange="${__classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleSlotChange)}" @keydown="${__classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleKeyDown)}" @change="${__classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_handleChange)}"></slot></div><div class="ink-bar" aria-hidden="true"><div class="active-indicator"></div></div></div></m3e-slide-group>`;
 };
 _M3eTabsElement_handleSlotChange = function _M3eTabsElement_handleSlotChange() {
   this[selectionManager].setItems([...this.querySelectorAll("m3e-tab")]);
@@ -375,6 +409,142 @@ _M3eTabsElement_handleSelectedChange = function _M3eTabsElement_handleSelectedCh
     selectedIndex = null;
   }
   this._selectedIndex = selectedIndex;
+  if (selected) {
+    __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_scrollTabIntoView).call(this, selected, hasCustomState(this, "--no-animate"));
+  } else {
+    __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_updateInkBar).call(this);
+  }
+};
+_M3eTabsElement_handleActiveItemChange = function _M3eTabsElement_handleActiveItemChange() {
+  if (this[selectionManager].activeItem) {
+    __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_scrollTabIntoView).call(this, this[selectionManager].activeItem, hasCustomState(this, "--no-animate"));
+  }
+};
+_M3eTabsElement_handleTabsPaginationChange = function _M3eTabsElement_handleTabsPaginationChange() {
+  if (this.disablePagination) return;
+  const activeTab = this[selectionManager].activeItem ?? this.selectedTab;
+  if (activeTab) {
+    __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_scrollTabIntoView).call(this, activeTab, true);
+  }
+};
+_M3eTabsElement_handleTabsPointerDown = function _M3eTabsElement_handleTabsPointerDown(e) {
+  if (e.pointerType !== "touch") {
+    return; // swipe only supported for touch
+  }
+  e.currentTarget.setPointerCapture(e.pointerId);
+  __classPrivateFieldSet(this, _M3eTabsElement_swipe, {
+    x: e.clientX,
+    y: e.clientY
+  }, "f");
+  __classPrivateFieldGet(this, _M3eTabsElement_velocityTracker, "f").reset();
+  __classPrivateFieldGet(this, _M3eTabsElement_velocityTracker, "f").add(e.clientX);
+};
+_M3eTabsElement_handleTabsPointerMove = function _M3eTabsElement_handleTabsPointerMove(e) {
+  if (!__classPrivateFieldGet(this, _M3eTabsElement_swipe, "f") || !e.currentTarget.hasPointerCapture(e.pointerId)) {
+    return;
+  }
+  let dx = e.clientX - __classPrivateFieldGet(this, _M3eTabsElement_swipe, "f").x;
+  const dy = e.clientY - __classPrivateFieldGet(this, _M3eTabsElement_swipe, "f").y;
+  if (this.selectedIndex === 0 && dx > 0) {
+    dx = 0;
+  }
+  if (this.selectedIndex === this.tabs.length - 1 && dx < 0) {
+    dx = 0;
+  }
+  if (!__classPrivateFieldGet(this, _M3eTabsElement_swipe, "f").dir) {
+    if (Math.abs(dx) > 10) {
+      __classPrivateFieldGet(this, _M3eTabsElement_swipe, "f").dir = "horizontal";
+    } else if (Math.abs(dy) > 10) {
+      __classPrivateFieldGet(this, _M3eTabsElement_swipe, "f").dir = "vertical";
+    } else {
+      return;
+    }
+  }
+  if (__classPrivateFieldGet(this, _M3eTabsElement_swipe, "f").dir === "vertical") {
+    return;
+  }
+  __classPrivateFieldGet(this, _M3eTabsElement_velocityTracker, "f").add(e.clientX);
+  __classPrivateFieldGet(this, _M3eTabsElement_swipe, "f").currentX = dx;
+  this.shadowRoot?.querySelector("m3e-slide")?.classList.add("sliding");
+  this.selectedTab?.control?.style.setProperty("--_tabs-slide-offset-x", `${dx}px`);
+  const nextTab = this.tabs[dx > 0 ? this.selectedIndex - 1 : this.selectedIndex + 1];
+  nextTab?.control?.style.setProperty("--_tabs-slide-offset-x", `${dx}px`);
+  nextTab?.control?.style.setProperty("--_tabs-slide-visibility", "visible");
+  const prevTab = this.tabs[dx > 0 ? this.selectedIndex + 1 : this.selectedIndex - 1];
+  prevTab?.control?.style.removeProperty("--_tabs-slide-offset-x");
+  prevTab?.control?.style.removeProperty("--_tabs-slide-visibility");
+};
+_M3eTabsElement_handleTabsPointerUp = function _M3eTabsElement_handleTabsPointerUp(e) {
+  if (!e.currentTarget.hasPointerCapture(e.pointerId)) {
+    return;
+  }
+  e.currentTarget.releasePointerCapture(e.pointerId);
+  if (__classPrivateFieldGet(this, _M3eTabsElement_swipe, "f") && __classPrivateFieldGet(this, _M3eTabsElement_swipe, "f").dir === "horizontal" && __classPrivateFieldGet(this, _M3eTabsElement_swipe, "f").currentX !== undefined) {
+    const dx = __classPrivateFieldGet(this, _M3eTabsElement_swipe, "f").currentX;
+    const threshold = this.clientWidth * 0.33;
+    const velocity = __classPrivateFieldGet(this, _M3eTabsElement_velocityTracker, "f").getVelocity();
+    const significantVelocityThreshold = e.pointerType === "touch" ? 1200 : 500;
+    __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_endSwipeGesture).call(this);
+    if (Math.abs(dx) > threshold || Math.abs(velocity) > significantVelocityThreshold) {
+      if (dx > threshold) {
+        // go to the previous tab only if its not disabled.
+        if (this.selectedIndex > 0 && this.tabs.length > 1 && !this.tabs[this.selectedIndex - 1].disabled) {
+          this.selectedIndex--;
+        }
+      } else if (dx < -threshold) {
+        // go to the next tab only if its not disabled.
+        if (this.selectedIndex < this.tabs.length - 1 && !this.tabs[this.selectedIndex + 1].disabled) {
+          this.selectedIndex++;
+        }
+      }
+    }
+  } else {
+    __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_endSwipeGesture).call(this);
+  }
+};
+_M3eTabsElement_handleTabsPointerCancel = function _M3eTabsElement_handleTabsPointerCancel(e) {
+  if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+    e.currentTarget.releasePointerCapture(e.pointerId);
+    __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_endSwipeGesture).call(this);
+  }
+};
+_M3eTabsElement_handleTabsLostPointerCapture = function _M3eTabsElement_handleTabsLostPointerCapture() {
+  __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_endSwipeGesture).call(this);
+};
+_M3eTabsElement_endSwipeGesture = function _M3eTabsElement_endSwipeGesture() {
+  __classPrivateFieldSet(this, _M3eTabsElement_swipe, undefined, "f");
+  __classPrivateFieldGet(this, _M3eTabsElement_velocityTracker, "f").reset();
+  const slide = this.shadowRoot?.querySelector("m3e-slide");
+  if (!slide || !slide.classList.contains("sliding")) {
+    return;
+  }
+  slide.classList.add("snap");
+  if (!prefersReducedMotion()) {
+    slide.addEventListener("transitionend", () => slide.classList.remove("snap"), {
+      once: true
+    });
+  }
+  slide.classList.remove("sliding");
+  this.tabs.forEach(x => {
+    x.control?.style.removeProperty("--_tabs-slide-offset-x");
+    x.control?.style.removeProperty("--_tabs-slide-visibility");
+  });
+};
+_M3eTabsElement_scrollTabIntoView = /** @private */
+async function _M3eTabsElement_scrollTabIntoView(tab, instant) {
+  await this.updateComplete;
+  for (const tab of this.tabs) {
+    await tab.updateComplete;
+  }
+  await this._tablist?.updateComplete;
+  const scrollMargin = 48;
+  const scrollContainer = this._tablist?.scrollContainer;
+  if (!scrollContainer) return;
+  scrollContainer?.scrollTo({
+    behavior: instant ? "instant" : "smooth",
+    top: 0,
+    left: Math.min(tab.offsetLeft - scrollContainer.offsetLeft - scrollMargin, Math.max(tab.offsetLeft + tab.offsetWidth - scrollContainer.offsetWidth - scrollContainer.offsetLeft + scrollMargin, scrollContainer.scrollLeft))
+  });
   __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_updateInkBar).call(this);
 };
 _M3eTabsElement_updateInkBar = function _M3eTabsElement_updateInkBar() {
@@ -404,13 +574,14 @@ _M3eTabsElement_updateInkBar = function _M3eTabsElement_updateInkBar() {
 };
 /** The styles of the element. */
 M3eTabsElement.styles = css`:host { display: flex; flex-direction: column; position: relative; } .tablist { position: relative; box-sizing: border-box; flex: none; } ::slotted(prev-icon), ::slotted(next-icon), .icon { width: 1em; font-size: var(--m3e-tabs-paginator-button-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) !important; } .header { display: flex; flex-direction: column; } .tabs { display: flex; flex-wrap: nowrap; align-items: center; } .ink-bar { box-sizing: border-box; height: var(--_tabs-active-indicator-thickness); } .active-indicator { position: relative; height: var(--_tabs-active-indicator-thickness); left: calc(var(--_tabs-active-tab-position) + var(--_tabs-activate-indicator-inset, 0px)); width: calc(var(--_tabs-active-tab-size) - calc(var(--_tabs-activate-indicator-inset, 0px) * 2)); background-color: var(--m3e-tabs-active-indicator-color, ${DesignToken.color.primary}); transition: ${unsafeCSS(`left var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard},
-        width var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard}`)}; } :host([header-position="after"]) .header { flex-direction: column-reverse; } :host([header-position="before"]) .ink-bar { margin-top: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="before"]) .tablist { --m3e-slide-group-divider-bottom: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host([header-position="after"]) .ink-bar { margin-bottom: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="after"]) .tablist { --m3e-slide-group-divider-top: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host([header-position="before"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-before-active-indicator-shape, ${DesignToken.shape.corner.extraSmallTop}); } :host([header-position="after"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-after-active-indicator-shape, ${DesignToken.shape.corner.extraSmallBottom}); } .tabs { flex: 1 1 auto; } :host([variant="primary"]) .tablist { --_tabs-activate-indicator-inset: var(--m3e-tabs-primary-active-indicator-inset, 0.125rem); --_tabs-active-indicator-thickness: var(--m3e-tabs-primary-active-indicator-thickness, 3px); --_tab-height: 4rem; } :host([header-position="before"]) .tablist { --_tab-focus-ring-bottom-offset: calc(var(--_tabs-active-indicator-thickness) + 1px); } :host([header-position="after"]) .tablist { --_tab-focus-ring-top-offset: calc(var(--_tabs-active-indicator-thickness) + 2px); } :host([header-position="before"][variant="primary"]) .tablist { --_tab-direction: column; } :host([header-position="after"][variant="primary"]) .tablist { --_tab-direction: column-reverse; } :host([variant="secondary"]) .tablist { --_tabs-active-indicator-thickness: var(--m3e-tabs-secondary-active-indicator-thickness, 2px); --_tab-height: 3rem; --_tab-selected-color: ${DesignToken.color.onSurface}; --_tab-selected-container-hover-color: ${DesignToken.color.onSurface}; --_tab-selected-container-focus-color: ${DesignToken.color.onSurface}; --_tab-selected-ripple-color: ${DesignToken.color.onSurface}; } :host([stretch]) .header { width: 100%; --_tab-grow: 1; } :host(:is(:state(--no-animate), :--no-animate)) .active-indicator { transition: none; } @media (prefers-reduced-motion) { .active-indicator { transition: none; } } @media (forced-colors: active) { .active-indicator { background-color: ButtonText; --m3e-divider-color: GrayText; } }`;
+        width var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard}`)}; } :host([header-position="after"]) .header { flex-direction: column-reverse; } :host([header-position="before"]) .ink-bar { margin-top: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="before"]) .tablist { --m3e-slide-group-divider-bottom: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host([header-position="after"]) .ink-bar { margin-bottom: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="after"]) .tablist { --m3e-slide-group-divider-top: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host([header-position="before"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-before-active-indicator-shape, ${DesignToken.shape.corner.extraSmallTop}); } :host([header-position="after"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-after-active-indicator-shape, ${DesignToken.shape.corner.extraSmallBottom}); } .tabs { flex: 1 1 auto; } :host([variant="primary"]) .tablist { --_tabs-activate-indicator-inset: var(--m3e-tabs-primary-active-indicator-inset, 0.125rem); --_tabs-active-indicator-thickness: var(--m3e-tabs-primary-active-indicator-thickness, 3px); --_tab-height: 4rem; } :host([header-position="before"]) .tablist { --_tab-focus-ring-bottom-offset: calc(var(--_tabs-active-indicator-thickness) + 1px); } :host([header-position="after"]) .tablist { --_tab-focus-ring-top-offset: calc(var(--_tabs-active-indicator-thickness) + 2px); } :host([header-position="before"][variant="primary"]) .tablist { --_tab-direction: column; } :host([header-position="after"][variant="primary"]) .tablist { --_tab-direction: column-reverse; } :host([variant="secondary"]) .tablist { --_tabs-active-indicator-thickness: var(--m3e-tabs-secondary-active-indicator-thickness, 2px); --_tab-height: 3rem; --_tab-selected-color: ${DesignToken.color.onSurface}; --_tab-selected-container-hover-color: ${DesignToken.color.onSurface}; --_tab-selected-container-focus-color: ${DesignToken.color.onSurface}; --_tab-selected-ripple-color: ${DesignToken.color.onSurface}; } :host([stretch]) .header { width: 100%; --_tab-grow: 1; } .tabs.sliding ::slotted([slot="panel"]) { transform: translateX(var(--_tabs-slide-offset-x)); visibility: var(--_tabs-slide-visibility, "hidden"); } .tabs.snap ::slotted([slot="panel"]) { transition: ${unsafeCSS(`inset-inline-start var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard},
+        transform var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard},
+        visibility var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard} allow-discrete`)}; } .tabs:not(.sliding) ::slotted([slot="panel"]) { transform: translateX(0); } :host(:is(:state(--no-animate), :--no-animate)) .active-indicator { transition: none; } @media (prefers-reduced-motion) { .active-indicator { transition: none; } .tabs.snap ::slotted([slot="panel"]) { transition: none; } } @media (forced-colors: active) { .active-indicator { background-color: ButtonText; --m3e-divider-color: GrayText; } }`;
 __decorate([query(".tablist")], M3eTabsElement.prototype, "_tablist", void 0);
 __decorate([state()], M3eTabsElement.prototype, "_selectedIndex", void 0);
 __decorate([property({
-  attribute: "disable-pagination",
-  type: Boolean
-})], M3eTabsElement.prototype, "disablePagination", void 0);
+  attribute: false
+})], M3eTabsElement.prototype, "disablePagination", null);
 __decorate([property({
   attribute: "header-position",
   reflect: true