@m3e/web 2.5.0 → 2.5.2

package/dist/content-pane.js.map

@@ -1 +1 @@
-{"version":3,"file":"content-pane.js","sources":["../../src/content-pane/ContentPaneElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\n\r\nimport { customElement, DesignToken, getScrollbarWidth, ReconnectedCallback } from \"@m3e/web/core\";\r\n\r\n/**\r\n * A shaped surface for vertically scrollable content.\r\n *\r\n * @description\r\n * The `m3e-content-pane` component renders a shaped surface with padding and vertical\r\n * scrolling for document‑like content.\r\n *\r\n * @example\r\n * The following example illustrates basic usage of the content pane.\r\n * ```html\r\n * <m3e-content-pane>\r\n *   <p>This is some scrollable content.</p>\r\n *   <p>More content here...</p>\r\n * </m3e-content-pane>\r\n * ```\r\n *\r\n * @tag m3e-content-pane\r\n *\r\n * @slot - Renders the content of the pane.\r\n *\r\n * @cssprop --m3e-content-pane-container-shape - Corner radius applied to the pane’s outer surface.\r\n * @cssprop --m3e-content-pane-container-color - Background color of the pane’s surface.\r\n * @cssprop --m3e-content-pane-container-padding - Internal padding applied to all sides of the scrollable content.\r\n */\r\n@customElement(\"m3e-content-pane\")\r\nexport class M3eContentPaneElement extends ReconnectedCallback(LitElement) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n    }\r\n    .base {\r\n      width: 100%;\r\n      height: 100%;\r\n      overflow: hidden;\r\n      border-radius: var(--m3e-content-pane-container-shape, ${DesignToken.shape.corner.extraLarge});\r\n      background-color: var(--m3e-content-pane-container-color, ${DesignToken.color.surface});\r\n    }\r\n    .scroll-container {\r\n      width: inherit;\r\n      height: inherit;\r\n      border-radius: inherit;\r\n      box-sizing: border-box;\r\n      overflow-y: auto;\r\n      outline: none;\r\n      padding-block: var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge});\r\n      padding-inline-start: var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge});\r\n      padding-inline-end: calc(\r\n        var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge}) - var(\r\n            --_scrollbar-width,\r\n            0px\r\n          )\r\n      );\r\n      scrollbar-color: ${DesignToken.scrollbar.color};\r\n      scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n    }\r\n  `;\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n    this.#updateScrollbarWidth();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n    super.firstUpdated(_changedProperties);\r\n    this.#updateScrollbarWidth();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <div class=\"scroll-container\"><slot></slot></div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #updateScrollbarWidth(): void {\r\n    const base = this.shadowRoot?.querySelector<HTMLElement>(\".base\");\r\n    if (!base) return;\r\n\r\n    const style = getComputedStyle(base);\r\n    const scrollbarThinWidth = style.getPropertyValue(\"--m3e-scrollbar-thin-width\");\r\n    const scrollbarWidth = scrollbarThinWidth.endsWith(\"px\")\r\n      ? parseFloat(scrollbarThinWidth)\r\n      : getScrollbarWidth(!scrollbarThinWidth || scrollbarThinWidth === \"thin\");\r\n\r\n    base.style.setProperty(\"--_scrollbar-width\", `${scrollbarWidth}px`);\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-content-pane\": M3eContentPaneElement;\r\n  }\r\n}\r\n"],"names":["M3eContentPaneElement","ReconnectedCallback","LitElement","constructor","reconnectedCallback","__classPrivateFieldGet","_M3eContentPaneElement_instances","_M3eContentPaneElement_updateScrollbarWidth","call","firstUpdated","_changedProperties","render","html","base","shadowRoot","querySelector","style","getComputedStyle","scrollbarThinWidth","getPropertyValue","scrollbarWidth","endsWith","parseFloat","getScrollbarWidth","setProperty","styles","css","DesignToken","shape","corner","extraLarge","color","surface","value","scrollbar","thinWidth","__decorate","customElement"],"mappings":";;;;;;;;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;AAEI,IAAMA,qBAAqB,GAA3B,MAAMA,qBAAsB,SAAQC,mBAAmB,CAACC,UAAU,CAAC,CAAA;AAAnEC,EAAAA,WAAAA,GAAA;;;AAiEP,EAAA;AAhCE;AACSC,EAAAA,mBAAmBA,GAAA;IAC1B,KAAK,CAACA,mBAAmB,EAAE;AAC3BC,IAAAA,sBAAA,CAAA,IAAI,EAAAC,gCAAA,EAAA,GAAA,EAAAC,2CAAA,CAAsB,CAAAC,IAAA,CAA1B,IAAI,CAAwB;AAC9B,EAAA;AAEA;EACmBC,YAAYA,CAACC,kBAAkC,EAAA;AAChE,IAAA,KAAK,CAACD,YAAY,CAACC,kBAAkB,CAAC;AACtCL,IAAAA,sBAAA,CAAA,IAAI,EAAAC,gCAAA,EAAA,GAAA,EAAAC,2CAAA,CAAsB,CAAAC,IAAA,CAA1B,IAAI,CAAwB;AAC9B,EAAA;AAEA;AACmBG,EAAAA,MAAMA,GAAA;AACvB,IAAA,OAAOC,IAAI,CAAA,yEAAA,CAEJ;AACT,EAAA;;;;EAIE,MAAMC,IAAI,GAAG,IAAI,CAACC,UAAU,EAAEC,aAAa,CAAc,OAAO,CAAC;EACjE,IAAI,CAACF,IAAI,EAAE;AAEX,EAAA,MAAMG,KAAK,GAAGC,gBAAgB,CAACJ,IAAI,CAAC;AACpC,EAAA,MAAMK,kBAAkB,GAAGF,KAAK,CAACG,gBAAgB,CAAC,4BAA4B,CAAC;EAC/E,MAAMC,cAAc,GAAGF,kBAAkB,CAACG,QAAQ,CAAC,IAAI,CAAC,GACpDC,UAAU,CAACJ,kBAAkB,CAAC,GAC9BK,iBAAiB,CAAC,CAACL,kBAAkB,IAAIA,kBAAkB,KAAK,MAAM,CAAC;EAE3EL,IAAI,CAACG,KAAK,CAACQ,WAAW,CAAC,oBAAoB,EAAE,CAAA,EAAGJ,cAAc,CAAA,EAAA,CAAI,CAAC;AACrE,CAAC;AA/DD;AACgBpB,qBAAA,CAAAyB,MAAM,GAAmBC,GAAG,CAAA,sIAAA,EAQiBC,WAAW,CAACC,KAAK,CAACC,MAAM,CAACC,UAAU,CAAA,6DAAA,EAChCH,WAAW,CAACI,KAAK,CAACC,OAAO,CAAA,oMAAA,EAS1BL,WAAW,CAACC,KAAK,CAACC,MAAM,CAACI,KAAK,CAACH,UAAU,CAAA,mEAAA,EAClCH,WAAW,CAACC,KAAK,CAACC,MAAM,CAACI,KAAK,CAACH,UAAU,CAAA,uEAAA,EAE7DH,WAAW,CAACC,KAAK,CAACC,MAAM,CAACI,KAAK,CAACH,UAAU,CAAA,uDAAA,EAKpEH,WAAW,CAACO,SAAS,CAACH,KAAK,CAAA,mBAAA,EAC3BJ,WAAW,CAACO,SAAS,CAACC,SAAS,CAAA,GAAA,CA3BhC;AAFXnC,qBAAqB,GAAAoC,UAAA,CAAA,CADjCC,aAAa,CAAC,kBAAkB,CAAC,CACrB,EAAArC,qBAAqB,CAiEjC;;;;"}
+{"version":3,"file":"content-pane.js","sources":["../../src/content-pane/ContentPaneElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\n\r\nimport { customElement, DesignToken, getScrollbarWidth, ReconnectedCallback } from \"@m3e/web/core\";\r\n\r\n/**\r\n * A shaped surface for vertically scrollable content.\r\n *\r\n * @description\r\n * The `m3e-content-pane` component renders a shaped surface with padding and vertical\r\n * scrolling for document‑like content.\r\n *\r\n * @example\r\n * The following example illustrates basic usage of the content pane.\r\n * ```html\r\n * <m3e-content-pane>\r\n *   <p>This is some scrollable content.</p>\r\n *   <p>More content here...</p>\r\n * </m3e-content-pane>\r\n * ```\r\n *\r\n * @tag m3e-content-pane\r\n *\r\n * @slot - Renders the content of the pane.\r\n *\r\n * @cssprop --m3e-content-pane-container-shape - Corner radius applied to the pane’s outer surface.\r\n * @cssprop --m3e-content-pane-container-color - Background color of the pane’s surface.\r\n * @cssprop --m3e-content-pane-container-padding - Internal padding applied to all sides of the scrollable content.\r\n */\r\n@customElement(\"m3e-content-pane\")\r\nexport class M3eContentPaneElement extends ReconnectedCallback(LitElement) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n    }\r\n    .base {\r\n      width: 100%;\r\n      height: 100%;\r\n      overflow: hidden;\r\n      border-radius: var(--m3e-content-pane-container-shape, ${DesignToken.shape.corner.extraLarge});\r\n      background-color: var(--m3e-content-pane-container-color, ${DesignToken.color.surface});\r\n      transition: ${unsafeCSS(\r\n        `border-radius ${DesignToken.motion.duration.medium2} ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n    }\r\n    .scroll-container {\r\n      width: inherit;\r\n      height: inherit;\r\n      border-radius: inherit;\r\n      box-sizing: border-box;\r\n      overflow-y: auto;\r\n      outline: none;\r\n      padding-block: var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge});\r\n      padding-inline-start: var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge});\r\n      padding-inline-end: calc(\r\n        var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge}) - var(\r\n            --_scrollbar-width,\r\n            0px\r\n          )\r\n      );\r\n      scrollbar-color: ${DesignToken.scrollbar.color};\r\n      scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base {\r\n        transition: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n    this.#updateScrollbarWidth();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n    super.firstUpdated(_changedProperties);\r\n    this.#updateScrollbarWidth();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <div class=\"scroll-container\"><slot></slot></div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #updateScrollbarWidth(): void {\r\n    const base = this.shadowRoot?.querySelector<HTMLElement>(\".base\");\r\n    if (!base) return;\r\n\r\n    const style = getComputedStyle(base);\r\n    const scrollbarThinWidth = style.getPropertyValue(\"--m3e-scrollbar-thin-width\");\r\n    const scrollbarWidth = scrollbarThinWidth.endsWith(\"px\")\r\n      ? parseFloat(scrollbarThinWidth)\r\n      : getScrollbarWidth(!scrollbarThinWidth || scrollbarThinWidth === \"thin\");\r\n\r\n    base.style.setProperty(\"--_scrollbar-width\", `${scrollbarWidth}px`);\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-content-pane\": M3eContentPaneElement;\r\n  }\r\n}\r\n"],"names":["M3eContentPaneElement","ReconnectedCallback","LitElement","constructor","reconnectedCallback","__classPrivateFieldGet","_M3eContentPaneElement_instances","_M3eContentPaneElement_updateScrollbarWidth","call","firstUpdated","_changedProperties","render","html","base","shadowRoot","querySelector","style","getComputedStyle","scrollbarThinWidth","getPropertyValue","scrollbarWidth","endsWith","parseFloat","getScrollbarWidth","setProperty","styles","css","DesignToken","shape","corner","extraLarge","color","surface","unsafeCSS","motion","duration","medium2","easing","standard","value","scrollbar","thinWidth","__decorate","customElement"],"mappings":";;;;;;;;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;AAEI,IAAMA,qBAAqB,GAA3B,MAAMA,qBAAsB,SAAQC,mBAAmB,CAACC,UAAU,CAAC,CAAA;AAAnEC,EAAAA,WAAAA,GAAA;;;AAyEP,EAAA;AAhCE;AACSC,EAAAA,mBAAmBA,GAAA;IAC1B,KAAK,CAACA,mBAAmB,EAAE;AAC3BC,IAAAA,sBAAA,CAAA,IAAI,EAAAC,gCAAA,EAAA,GAAA,EAAAC,2CAAA,CAAsB,CAAAC,IAAA,CAA1B,IAAI,CAAwB;AAC9B,EAAA;AAEA;EACmBC,YAAYA,CAACC,kBAAkC,EAAA;AAChE,IAAA,KAAK,CAACD,YAAY,CAACC,kBAAkB,CAAC;AACtCL,IAAAA,sBAAA,CAAA,IAAI,EAAAC,gCAAA,EAAA,GAAA,EAAAC,2CAAA,CAAsB,CAAAC,IAAA,CAA1B,IAAI,CAAwB;AAC9B,EAAA;AAEA;AACmBG,EAAAA,MAAMA,GAAA;AACvB,IAAA,OAAOC,IAAI,CAAA,yEAAA,CAEJ;AACT,EAAA;;;;EAIE,MAAMC,IAAI,GAAG,IAAI,CAACC,UAAU,EAAEC,aAAa,CAAc,OAAO,CAAC;EACjE,IAAI,CAACF,IAAI,EAAE;AAEX,EAAA,MAAMG,KAAK,GAAGC,gBAAgB,CAACJ,IAAI,CAAC;AACpC,EAAA,MAAMK,kBAAkB,GAAGF,KAAK,CAACG,gBAAgB,CAAC,4BAA4B,CAAC;EAC/E,MAAMC,cAAc,GAAGF,kBAAkB,CAACG,QAAQ,CAAC,IAAI,CAAC,GACpDC,UAAU,CAACJ,kBAAkB,CAAC,GAC9BK,iBAAiB,CAAC,CAACL,kBAAkB,IAAIA,kBAAkB,KAAK,MAAM,CAAC;EAE3EL,IAAI,CAACG,KAAK,CAACQ,WAAW,CAAC,oBAAoB,EAAE,CAAA,EAAGJ,cAAc,CAAA,EAAA,CAAI,CAAC;AACrE,CAAC;AAvED;AACgBpB,qBAAA,CAAAyB,MAAM,GAAmBC,GAAG,CAAA,sIAAA,EAQiBC,WAAW,CAACC,KAAK,CAACC,MAAM,CAACC,UAAU,CAAA,6DAAA,EAChCH,WAAW,CAACI,KAAK,CAACC,OAAO,CAAA,eAAA,EACvEC,SAAS,CACrB,iBAAiBN,WAAW,CAACO,MAAM,CAACC,QAAQ,CAACC,OAAO,CAAA,CAAA,EAAIT,WAAW,CAACO,MAAM,CAACG,MAAM,CAACC,QAAQ,EAAE,CAC7F,CAAA,mMAAA,EAS0DX,WAAW,CAACC,KAAK,CAACC,MAAM,CAACU,KAAK,CAACT,UAAU,CAAA,mEAAA,EAClCH,WAAW,CAACC,KAAK,CAACC,MAAM,CAACU,KAAK,CAACT,UAAU,CAAA,uEAAA,EAE7DH,WAAW,CAACC,KAAK,CAACC,MAAM,CAACU,KAAK,CAACT,UAAU,0DAKpEH,WAAW,CAACa,SAAS,CAACT,KAAK,CAAA,mBAAA,EAC3BJ,WAAW,CAACa,SAAS,CAACC,SAAS,CAAA,mEAAA,CA9BhC;AAFXzC,qBAAqB,GAAA0C,UAAA,CAAA,CADjCC,aAAa,CAAC,kBAAkB,CAAC,CACrB,EAAA3C,qBAAqB,CAyEjC;;;;"}

package/dist/content-pane.min.js

@@ -3,5 +3,5 @@
  * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
-import{__classPrivateFieldGet as e,__decorate as r}from"tslib";import{LitElement as t,html as a,css as o}from"lit";import{ReconnectedCallback as n,getScrollbarWidth as i,DesignToken as l,customElement as c}from"@m3e/web/core";var s,d;let p=class extends(n(t)){constructor(){super(...arguments),s.add(this)}reconnectedCallback(){super.reconnectedCallback(),e(this,s,"m",d).call(this)}firstUpdated(r){super.firstUpdated(r),e(this,s,"m",d).call(this)}render(){return a`<div class="base"><div class="scroll-container"><slot></slot></div></div>`}};s=new WeakSet,d=function(){const e=this.shadowRoot?.querySelector(".base");if(!e)return;const r=getComputedStyle(e).getPropertyValue("--m3e-scrollbar-thin-width"),t=r.endsWith("px")?parseFloat(r):i(!r||"thin"===r);e.style.setProperty("--_scrollbar-width",`${t}px`)},p.styles=o`:host { display: block; } .base { width: 100%; height: 100%; overflow: hidden; border-radius: var(--m3e-content-pane-container-shape, ${l.shape.corner.extraLarge}); background-color: var(--m3e-content-pane-container-color, ${l.color.surface}); } .scroll-container { width: inherit; height: inherit; border-radius: inherit; box-sizing: border-box; overflow-y: auto; outline: none; padding-block: var(--m3e-content-pane-container-padding, ${l.shape.corner.value.extraLarge}); padding-inline-start: var(--m3e-content-pane-container-padding, ${l.shape.corner.value.extraLarge}); padding-inline-end: calc( var(--m3e-content-pane-container-padding, ${l.shape.corner.value.extraLarge}) - var( --_scrollbar-width, 0px ) ); scrollbar-color: ${l.scrollbar.color}; scrollbar-width: ${l.scrollbar.thinWidth}; }`,p=r([c("m3e-content-pane")],p);export{p as M3eContentPaneElement};
+import{__classPrivateFieldGet as e,__decorate as r}from"tslib";import{LitElement as t,html as o,unsafeCSS as a,css as n}from"lit";import{ReconnectedCallback as i,getScrollbarWidth as s,DesignToken as l,customElement as c}from"@m3e/web/core";var d,p;let h=class extends(i(t)){constructor(){super(...arguments),d.add(this)}reconnectedCallback(){super.reconnectedCallback(),e(this,d,"m",p).call(this)}firstUpdated(r){super.firstUpdated(r),e(this,d,"m",p).call(this)}render(){return o`<div class="base"><div class="scroll-container"><slot></slot></div></div>`}};d=new WeakSet,p=function(){const e=this.shadowRoot?.querySelector(".base");if(!e)return;const r=getComputedStyle(e).getPropertyValue("--m3e-scrollbar-thin-width"),t=r.endsWith("px")?parseFloat(r):s(!r||"thin"===r);e.style.setProperty("--_scrollbar-width",`${t}px`)},h.styles=n`:host { display: block; } .base { width: 100%; height: 100%; overflow: hidden; border-radius: var(--m3e-content-pane-container-shape, ${l.shape.corner.extraLarge}); background-color: var(--m3e-content-pane-container-color, ${l.color.surface}); transition: ${a(`border-radius ${l.motion.duration.medium2} ${l.motion.easing.standard}`)}; } .scroll-container { width: inherit; height: inherit; border-radius: inherit; box-sizing: border-box; overflow-y: auto; outline: none; padding-block: var(--m3e-content-pane-container-padding, ${l.shape.corner.value.extraLarge}); padding-inline-start: var(--m3e-content-pane-container-padding, ${l.shape.corner.value.extraLarge}); padding-inline-end: calc( var(--m3e-content-pane-container-padding, ${l.shape.corner.value.extraLarge}) - var( --_scrollbar-width, 0px ) ); scrollbar-color: ${l.scrollbar.color}; scrollbar-width: ${l.scrollbar.thinWidth}; } @media (prefers-reduced-motion) { .base { transition: none; } }`,h=r([c("m3e-content-pane")],h);export{h as M3eContentPaneElement};
 //# sourceMappingURL=content-pane.min.js.map

package/dist/content-pane.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"content-pane.min.js","sources":["../../src/content-pane/ContentPaneElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\n\r\nimport { customElement, DesignToken, getScrollbarWidth, ReconnectedCallback } from \"@m3e/web/core\";\r\n\r\n/**\r\n * A shaped surface for vertically scrollable content.\r\n *\r\n * @description\r\n * The `m3e-content-pane` component renders a shaped surface with padding and vertical\r\n * scrolling for document‑like content.\r\n *\r\n * @example\r\n * The following example illustrates basic usage of the content pane.\r\n * ```html\r\n * <m3e-content-pane>\r\n *   <p>This is some scrollable content.</p>\r\n *   <p>More content here...</p>\r\n * </m3e-content-pane>\r\n * ```\r\n *\r\n * @tag m3e-content-pane\r\n *\r\n * @slot - Renders the content of the pane.\r\n *\r\n * @cssprop --m3e-content-pane-container-shape - Corner radius applied to the pane’s outer surface.\r\n * @cssprop --m3e-content-pane-container-color - Background color of the pane’s surface.\r\n * @cssprop --m3e-content-pane-container-padding - Internal padding applied to all sides of the scrollable content.\r\n */\r\n@customElement(\"m3e-content-pane\")\r\nexport class M3eContentPaneElement extends ReconnectedCallback(LitElement) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n    }\r\n    .base {\r\n      width: 100%;\r\n      height: 100%;\r\n      overflow: hidden;\r\n      border-radius: var(--m3e-content-pane-container-shape, ${DesignToken.shape.corner.extraLarge});\r\n      background-color: var(--m3e-content-pane-container-color, ${DesignToken.color.surface});\r\n    }\r\n    .scroll-container {\r\n      width: inherit;\r\n      height: inherit;\r\n      border-radius: inherit;\r\n      box-sizing: border-box;\r\n      overflow-y: auto;\r\n      outline: none;\r\n      padding-block: var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge});\r\n      padding-inline-start: var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge});\r\n      padding-inline-end: calc(\r\n        var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge}) - var(\r\n            --_scrollbar-width,\r\n            0px\r\n          )\r\n      );\r\n      scrollbar-color: ${DesignToken.scrollbar.color};\r\n      scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n    }\r\n  `;\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n    this.#updateScrollbarWidth();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n    super.firstUpdated(_changedProperties);\r\n    this.#updateScrollbarWidth();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <div class=\"scroll-container\"><slot></slot></div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #updateScrollbarWidth(): void {\r\n    const base = this.shadowRoot?.querySelector<HTMLElement>(\".base\");\r\n    if (!base) return;\r\n\r\n    const style = getComputedStyle(base);\r\n    const scrollbarThinWidth = style.getPropertyValue(\"--m3e-scrollbar-thin-width\");\r\n    const scrollbarWidth = scrollbarThinWidth.endsWith(\"px\")\r\n      ? parseFloat(scrollbarThinWidth)\r\n      : getScrollbarWidth(!scrollbarThinWidth || scrollbarThinWidth === \"thin\");\r\n\r\n    base.style.setProperty(\"--_scrollbar-width\", `${scrollbarWidth}px`);\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-content-pane\": M3eContentPaneElement;\r\n  }\r\n}\r\n"],"names":["M3eContentPaneElement","ReconnectedCallback","LitElement","constructor","reconnectedCallback","super","__classPrivateFieldGet","this","_M3eContentPaneElement_instances","_M3eContentPaneElement_updateScrollbarWidth","call","firstUpdated","_changedProperties","render","html","base","shadowRoot","querySelector","scrollbarThinWidth","getComputedStyle","getPropertyValue","scrollbarWidth","endsWith","parseFloat","getScrollbarWidth","style","setProperty","styles","css","DesignToken","shape","corner","extraLarge","color","surface","value","scrollbar","thinWidth","__decorate","customElement"],"mappings":";;;;;0OA6BO,IAAMA,EAAN,cAAoCC,EAAoBC,IAAxDC,WAAAA,kCAiEP,CA/BWC,mBAAAA,GACPC,MAAMD,sBACNE,EAAAC,KAAIC,EAAA,IAAAC,GAAsBC,KAA1BH,KACF,CAGmBI,YAAAA,CAAaC,GAC9BP,MAAMM,aAAaC,GACnBN,EAAAC,KAAIC,EAAA,IAAAC,GAAsBC,KAA1BH,KACF,CAGmBM,MAAAA,GACjB,OAAOC,CAAI,2EAGb,8BAIE,MAAMC,EAAOR,KAAKS,YAAYC,cAA2B,SACzD,IAAKF,EAAM,OAEX,MACMG,EADQC,iBAAiBJ,GACEK,iBAAiB,8BAC5CC,EAAiBH,EAAmBI,SAAS,MAC/CC,WAAWL,GACXM,GAAmBN,GAA6C,SAAvBA,GAE7CH,EAAKU,MAAMC,YAAY,qBAAsB,GAAGL,MAClD,EA9DgBrB,EAAA2B,OAAyBC,CAAG,yIAQiBC,EAAYC,MAAMC,OAAOC,0EACtBH,EAAYI,MAAMC,8MASnBL,EAAYC,MAAMC,OAAOI,MAAMH,gFACxBH,EAAYC,MAAMC,OAAOI,MAAMH,oFAEnDH,EAAYC,MAAMC,OAAOI,MAAMH,oEAK1DH,EAAYO,UAAUH,2BACtBJ,EAAYO,UAAUC,eA7BlCrC,EAAqBsC,EAAA,CADjCC,EAAc,qBACFvC"}
+{"version":3,"file":"content-pane.min.js","sources":["../../src/content-pane/ContentPaneElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\n\r\nimport { customElement, DesignToken, getScrollbarWidth, ReconnectedCallback } from \"@m3e/web/core\";\r\n\r\n/**\r\n * A shaped surface for vertically scrollable content.\r\n *\r\n * @description\r\n * The `m3e-content-pane` component renders a shaped surface with padding and vertical\r\n * scrolling for document‑like content.\r\n *\r\n * @example\r\n * The following example illustrates basic usage of the content pane.\r\n * ```html\r\n * <m3e-content-pane>\r\n *   <p>This is some scrollable content.</p>\r\n *   <p>More content here...</p>\r\n * </m3e-content-pane>\r\n * ```\r\n *\r\n * @tag m3e-content-pane\r\n *\r\n * @slot - Renders the content of the pane.\r\n *\r\n * @cssprop --m3e-content-pane-container-shape - Corner radius applied to the pane’s outer surface.\r\n * @cssprop --m3e-content-pane-container-color - Background color of the pane’s surface.\r\n * @cssprop --m3e-content-pane-container-padding - Internal padding applied to all sides of the scrollable content.\r\n */\r\n@customElement(\"m3e-content-pane\")\r\nexport class M3eContentPaneElement extends ReconnectedCallback(LitElement) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n    }\r\n    .base {\r\n      width: 100%;\r\n      height: 100%;\r\n      overflow: hidden;\r\n      border-radius: var(--m3e-content-pane-container-shape, ${DesignToken.shape.corner.extraLarge});\r\n      background-color: var(--m3e-content-pane-container-color, ${DesignToken.color.surface});\r\n      transition: ${unsafeCSS(\r\n        `border-radius ${DesignToken.motion.duration.medium2} ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n    }\r\n    .scroll-container {\r\n      width: inherit;\r\n      height: inherit;\r\n      border-radius: inherit;\r\n      box-sizing: border-box;\r\n      overflow-y: auto;\r\n      outline: none;\r\n      padding-block: var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge});\r\n      padding-inline-start: var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge});\r\n      padding-inline-end: calc(\r\n        var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge}) - var(\r\n            --_scrollbar-width,\r\n            0px\r\n          )\r\n      );\r\n      scrollbar-color: ${DesignToken.scrollbar.color};\r\n      scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base {\r\n        transition: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n    this.#updateScrollbarWidth();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n    super.firstUpdated(_changedProperties);\r\n    this.#updateScrollbarWidth();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <div class=\"scroll-container\"><slot></slot></div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #updateScrollbarWidth(): void {\r\n    const base = this.shadowRoot?.querySelector<HTMLElement>(\".base\");\r\n    if (!base) return;\r\n\r\n    const style = getComputedStyle(base);\r\n    const scrollbarThinWidth = style.getPropertyValue(\"--m3e-scrollbar-thin-width\");\r\n    const scrollbarWidth = scrollbarThinWidth.endsWith(\"px\")\r\n      ? parseFloat(scrollbarThinWidth)\r\n      : getScrollbarWidth(!scrollbarThinWidth || scrollbarThinWidth === \"thin\");\r\n\r\n    base.style.setProperty(\"--_scrollbar-width\", `${scrollbarWidth}px`);\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-content-pane\": M3eContentPaneElement;\r\n  }\r\n}\r\n"],"names":["M3eContentPaneElement","ReconnectedCallback","LitElement","constructor","reconnectedCallback","super","__classPrivateFieldGet","this","_M3eContentPaneElement_instances","_M3eContentPaneElement_updateScrollbarWidth","call","firstUpdated","_changedProperties","render","html","base","shadowRoot","querySelector","scrollbarThinWidth","getComputedStyle","getPropertyValue","scrollbarWidth","endsWith","parseFloat","getScrollbarWidth","style","setProperty","styles","css","DesignToken","shape","corner","extraLarge","color","surface","unsafeCSS","motion","duration","medium2","easing","standard","value","scrollbar","thinWidth","__decorate","customElement"],"mappings":";;;;;yPA6BO,IAAMA,EAAN,cAAoCC,EAAoBC,IAAxDC,WAAAA,kCAyEP,CA/BWC,mBAAAA,GACPC,MAAMD,sBACNE,EAAAC,KAAIC,EAAA,IAAAC,GAAsBC,KAA1BH,KACF,CAGmBI,YAAAA,CAAaC,GAC9BP,MAAMM,aAAaC,GACnBN,EAAAC,KAAIC,EAAA,IAAAC,GAAsBC,KAA1BH,KACF,CAGmBM,MAAAA,GACjB,OAAOC,CAAI,2EAGb,8BAIE,MAAMC,EAAOR,KAAKS,YAAYC,cAA2B,SACzD,IAAKF,EAAM,OAEX,MACMG,EADQC,iBAAiBJ,GACEK,iBAAiB,8BAC5CC,EAAiBH,EAAmBI,SAAS,MAC/CC,WAAWL,GACXM,GAAmBN,GAA6C,SAAvBA,GAE7CH,EAAKU,MAAMC,YAAY,qBAAsB,GAAGL,MAClD,EAtEgBrB,EAAA2B,OAAyBC,CAAG,yIAQiBC,EAAYC,MAAMC,OAAOC,0EACtBH,EAAYI,MAAMC,yBAChEC,EACZ,iBAAiBN,EAAYO,OAAOC,SAASC,WAAWT,EAAYO,OAAOG,OAAOC,iNAUzBX,EAAYC,MAAMC,OAAOU,MAAMT,gFACxBH,EAAYC,MAAMC,OAAOU,MAAMT,oFAEnDH,EAAYC,MAAMC,OAAOU,MAAMT,oEAK1DH,EAAYa,UAAUT,2BACtBJ,EAAYa,UAAUC,+EAhClC3C,EAAqB4C,EAAA,CADjCC,EAAc,qBACF7C"}

package/dist/core.js

@@ -4711,6 +4711,8 @@ var _M3eSlideElement_instances, _M3eSlideElement_items, _M3eSlideElement_handleS
  *
  * @tag m3e-slide
  *
+ * @slot - Renders the items through which to cycle.
+ *
  * @attr selected-index - The zero-based index of the visible item.
  *
  * @cssprop --m3e-slide-animation-duration - The duration of transitions between slotted items.