@m3e/web 2.5.4 → 2.5.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (188) hide show
  1. package/dist/all.js +382 -313
  2. package/dist/all.js.map +1 -1
  3. package/dist/all.min.js +56 -56
  4. package/dist/all.min.js.map +1 -1
  5. package/dist/autocomplete.js +12 -12
  6. package/dist/autocomplete.js.map +1 -1
  7. package/dist/autocomplete.min.js +1 -1
  8. package/dist/autocomplete.min.js.map +1 -1
  9. package/dist/bottom-sheet.js +10 -13
  10. package/dist/bottom-sheet.js.map +1 -1
  11. package/dist/bottom-sheet.min.js +1 -1
  12. package/dist/bottom-sheet.min.js.map +1 -1
  13. package/dist/breadcrumb.js +4 -4
  14. package/dist/breadcrumb.js.map +1 -1
  15. package/dist/breadcrumb.min.js +1 -1
  16. package/dist/breadcrumb.min.js.map +1 -1
  17. package/dist/button-group.js +5 -5
  18. package/dist/button-group.js.map +1 -1
  19. package/dist/button-group.min.js +1 -1
  20. package/dist/button-group.min.js.map +1 -1
  21. package/dist/button.js +15 -15
  22. package/dist/button.js.map +1 -1
  23. package/dist/button.min.js +1 -1
  24. package/dist/button.min.js.map +1 -1
  25. package/dist/checkbox.js +1 -1
  26. package/dist/checkbox.js.map +1 -1
  27. package/dist/checkbox.min.js +1 -1
  28. package/dist/checkbox.min.js.map +1 -1
  29. package/dist/chips.js +9 -9
  30. package/dist/chips.js.map +1 -1
  31. package/dist/chips.min.js +1 -1
  32. package/dist/chips.min.js.map +1 -1
  33. package/dist/core-a11y.js +5 -3
  34. package/dist/core-a11y.js.map +1 -1
  35. package/dist/core-a11y.min.js +4 -4
  36. package/dist/core-a11y.min.js.map +1 -1
  37. package/dist/core-anchoring.js +4 -4
  38. package/dist/core-anchoring.js.map +1 -1
  39. package/dist/core-anchoring.min.js +1 -1
  40. package/dist/core-anchoring.min.js.map +1 -1
  41. package/dist/core.js +77 -40
  42. package/dist/core.js.map +1 -1
  43. package/dist/core.min.js +1 -1
  44. package/dist/core.min.js.map +1 -1
  45. package/dist/css-custom-data.json +355 -340
  46. package/dist/custom-elements.json +3644 -3481
  47. package/dist/datepicker.js +12 -12
  48. package/dist/datepicker.js.map +1 -1
  49. package/dist/datepicker.min.js +1 -1
  50. package/dist/datepicker.min.js.map +1 -1
  51. package/dist/dialog.js +2 -2
  52. package/dist/dialog.js.map +1 -1
  53. package/dist/dialog.min.js +1 -1
  54. package/dist/dialog.min.js.map +1 -1
  55. package/dist/drawer-container.js +14 -14
  56. package/dist/drawer-container.js.map +1 -1
  57. package/dist/drawer-container.min.js +1 -1
  58. package/dist/drawer-container.min.js.map +1 -1
  59. package/dist/expansion-panel.js +2 -2
  60. package/dist/expansion-panel.js.map +1 -1
  61. package/dist/expansion-panel.min.js +1 -1
  62. package/dist/expansion-panel.min.js.map +1 -1
  63. package/dist/fab-menu.js +4 -4
  64. package/dist/fab-menu.js.map +1 -1
  65. package/dist/fab-menu.min.js +1 -1
  66. package/dist/fab-menu.min.js.map +1 -1
  67. package/dist/fab.js +2 -2
  68. package/dist/fab.js.map +1 -1
  69. package/dist/fab.min.js +1 -1
  70. package/dist/fab.min.js.map +1 -1
  71. package/dist/form-field.js +19 -19
  72. package/dist/form-field.js.map +1 -1
  73. package/dist/form-field.min.js +2 -2
  74. package/dist/form-field.min.js.map +1 -1
  75. package/dist/html-custom-data.json +128 -118
  76. package/dist/icon-button.js +15 -15
  77. package/dist/icon-button.js.map +1 -1
  78. package/dist/icon-button.min.js +1 -1
  79. package/dist/icon-button.min.js.map +1 -1
  80. package/dist/list.js +16 -16
  81. package/dist/list.js.map +1 -1
  82. package/dist/list.min.js +1 -1
  83. package/dist/list.min.js.map +1 -1
  84. package/dist/menu.js +20 -20
  85. package/dist/menu.js.map +1 -1
  86. package/dist/menu.min.js +1 -1
  87. package/dist/menu.min.js.map +1 -1
  88. package/dist/nav-bar.js +40 -10
  89. package/dist/nav-bar.js.map +1 -1
  90. package/dist/nav-bar.min.js +1 -1
  91. package/dist/nav-bar.min.js.map +1 -1
  92. package/dist/nav-menu.js +8 -8
  93. package/dist/nav-menu.js.map +1 -1
  94. package/dist/nav-menu.min.js +1 -1
  95. package/dist/nav-menu.min.js.map +1 -1
  96. package/dist/nav-rail.js +15 -11
  97. package/dist/nav-rail.js.map +1 -1
  98. package/dist/nav-rail.min.js +1 -1
  99. package/dist/nav-rail.min.js.map +1 -1
  100. package/dist/option.js +13 -13
  101. package/dist/option.js.map +1 -1
  102. package/dist/option.min.js +1 -1
  103. package/dist/option.min.js.map +1 -1
  104. package/dist/radio-group.js +2 -2
  105. package/dist/radio-group.js.map +1 -1
  106. package/dist/radio-group.min.js +1 -1
  107. package/dist/radio-group.min.js.map +1 -1
  108. package/dist/search.js +12 -12
  109. package/dist/search.js.map +1 -1
  110. package/dist/search.min.js +1 -1
  111. package/dist/search.min.js.map +1 -1
  112. package/dist/segmented-button.js +7 -7
  113. package/dist/segmented-button.js.map +1 -1
  114. package/dist/segmented-button.min.js +1 -1
  115. package/dist/segmented-button.min.js.map +1 -1
  116. package/dist/select.js +6 -6
  117. package/dist/select.js.map +1 -1
  118. package/dist/select.min.js +1 -1
  119. package/dist/select.min.js.map +1 -1
  120. package/dist/slider.js +5 -5
  121. package/dist/slider.js.map +1 -1
  122. package/dist/slider.min.js +1 -1
  123. package/dist/slider.min.js.map +1 -1
  124. package/dist/split-pane.js +10 -10
  125. package/dist/split-pane.js.map +1 -1
  126. package/dist/split-pane.min.js +1 -1
  127. package/dist/split-pane.min.js.map +1 -1
  128. package/dist/src/bottom-sheet/BottomSheetElement.d.ts +1 -1
  129. package/dist/src/bottom-sheet/BottomSheetElement.d.ts.map +1 -1
  130. package/dist/src/button/styles/ButtonSizeStyle.d.ts.map +1 -1
  131. package/dist/src/button/styles/ButtonStyle.d.ts.map +1 -1
  132. package/dist/src/button/styles/ButtonVariantStyle.d.ts.map +1 -1
  133. package/dist/src/button-group/ButtonGroupElement.d.ts.map +1 -1
  134. package/dist/src/checkbox/CheckboxElement.d.ts.map +1 -1
  135. package/dist/src/core/a11y/InteractivityChecker.d.ts +2 -1
  136. package/dist/src/core/a11y/InteractivityChecker.d.ts.map +1 -1
  137. package/dist/src/core/anchoring/FloatingPanelElement.d.ts +1 -1
  138. package/dist/src/core/shared/mixins/SuppressInitialAnimation.d.ts +9 -2
  139. package/dist/src/core/shared/mixins/SuppressInitialAnimation.d.ts.map +1 -1
  140. package/dist/src/core/shared/primitives/CollapsibleElement.d.ts +13 -0
  141. package/dist/src/core/shared/primitives/CollapsibleElement.d.ts.map +1 -1
  142. package/dist/src/core/shared/primitives/CollapsibleOrientation.d.ts +3 -0
  143. package/dist/src/core/shared/primitives/CollapsibleOrientation.d.ts.map +1 -0
  144. package/dist/src/core/shared/primitives/index.d.ts +1 -0
  145. package/dist/src/core/shared/primitives/index.d.ts.map +1 -1
  146. package/dist/src/datepicker/DatepickerElement.d.ts +1 -1
  147. package/dist/src/drawer-container/styles/DrawerContainerStyle.d.ts.map +1 -1
  148. package/dist/src/fab/FabElement.d.ts.map +1 -1
  149. package/dist/src/fab/styles/FabStyle.d.ts.map +1 -1
  150. package/dist/src/fab-menu/FabMenuElement.d.ts +1 -1
  151. package/dist/src/form-field/FormFieldElement.d.ts.map +1 -1
  152. package/dist/src/icon-button/styles/IconButtonSizeStyle.d.ts.map +1 -1
  153. package/dist/src/icon-button/styles/IconButtonStyle.d.ts.map +1 -1
  154. package/dist/src/icon-button/styles/IconButtonVariantStyle.d.ts.map +1 -1
  155. package/dist/src/menu/MenuElement.d.ts +1 -1
  156. package/dist/src/nav-bar/NavItemElement.d.ts +7 -1
  157. package/dist/src/nav-bar/NavItemElement.d.ts.map +1 -1
  158. package/dist/src/nav-rail/NavRailElement.d.ts +10 -5
  159. package/dist/src/nav-rail/NavRailElement.d.ts.map +1 -1
  160. package/dist/src/search/styles/SearchBarStyle.d.ts.map +1 -1
  161. package/dist/src/split-pane/SplitPaneElement.d.ts.map +1 -1
  162. package/dist/src/stepper/StepperElement.d.ts.map +1 -1
  163. package/dist/src/toolbar/ToolbarElement.d.ts.map +1 -1
  164. package/dist/stepper.js +6 -6
  165. package/dist/stepper.js.map +1 -1
  166. package/dist/stepper.min.js +1 -1
  167. package/dist/stepper.min.js.map +1 -1
  168. package/dist/tabs.js +5 -5
  169. package/dist/tabs.js.map +1 -1
  170. package/dist/tabs.min.js +1 -1
  171. package/dist/tabs.min.js.map +1 -1
  172. package/dist/toc.js +7 -7
  173. package/dist/toc.js.map +1 -1
  174. package/dist/toc.min.js +1 -1
  175. package/dist/toc.min.js.map +1 -1
  176. package/dist/toolbar.js +2 -1
  177. package/dist/toolbar.js.map +1 -1
  178. package/dist/toolbar.min.js +1 -1
  179. package/dist/toolbar.min.js.map +1 -1
  180. package/dist/tooltip.js +3 -3
  181. package/dist/tooltip.js.map +1 -1
  182. package/dist/tooltip.min.js +1 -1
  183. package/dist/tooltip.min.js.map +1 -1
  184. package/dist/tree.js +7 -7
  185. package/dist/tree.js.map +1 -1
  186. package/dist/tree.min.js +1 -1
  187. package/dist/tree.min.js.map +1 -1
  188. package/package.json +1 -1
package/dist/core.js CHANGED
@@ -2018,7 +2018,7 @@ function Dirty(base) {
2018
2018
  }
2019
2019
  /** Whether the user has modified the value of the element. */
2020
2020
  get dirty() {
2021
- return hasCustomState(this, "-dirty");
2021
+ return hasCustomState(this, "--dirty");
2022
2022
  }
2023
2023
  /** Whether the user has not modified the value of the element. */
2024
2024
  get pristine() {
@@ -2037,11 +2037,11 @@ function Dirty(base) {
2037
2037
  }
2038
2038
  /** Marks the element as pristine. */
2039
2039
  markAsPristine() {
2040
- deleteCustomState(this, "-dirty");
2040
+ deleteCustomState(this, "--dirty");
2041
2041
  }
2042
2042
  /** Marks the element as dirty. */
2043
2043
  markAsDirty() {
2044
- addCustomState(this, "-dirty");
2044
+ addCustomState(this, "--dirty");
2045
2045
  }
2046
2046
  }
2047
2047
  _a = _eventHandler$2;
@@ -2073,7 +2073,7 @@ function Touched(base) {
2073
2073
  }
2074
2074
  /** Whether the user has interacted when the element. */
2075
2075
  get touched() {
2076
- return hasCustomState(this, "-touched");
2076
+ return hasCustomState(this, "--touched");
2077
2077
  }
2078
2078
  /** Whether the user has not interacted when the element. */
2079
2079
  get untouched() {
@@ -2096,11 +2096,11 @@ function Touched(base) {
2096
2096
  }
2097
2097
  /** Marks the element as touched. */
2098
2098
  markAsTouched() {
2099
- addCustomState(this, "-touched");
2099
+ addCustomState(this, "--touched");
2100
2100
  }
2101
2101
  /** Marks the element as untouched. */
2102
2102
  markAsUntouched() {
2103
- deleteCustomState(this, "-touched");
2103
+ deleteCustomState(this, "--touched");
2104
2104
  }
2105
2105
  }
2106
2106
  _a = _eventHandler$1;
@@ -2819,7 +2819,7 @@ function Labelled(base) {
2819
2819
  [(_a = _eventHandler, updateLabels)]() {
2820
2820
  const focusable = this.hasAttribute("tabindex");
2821
2821
  const disabled = isDisabledMixin(this) && this.disabled || isDisabledInteractiveMixin(this) && this.disabledInteractive;
2822
- const invalid = isTouchedMixin(this) && this.touched && (this.ariaInvalid || hasCustomState(this, "-invalid"));
2822
+ const invalid = isTouchedMixin(this) && this.touched && (this.ariaInvalid || hasCustomState(this, "--invalid"));
2823
2823
  for (const label of this.labels ?? []) {
2824
2824
  label.style.userSelect = focusable ? "none" : "";
2825
2825
  label.style.cursor = !disabled && focusable ? "pointer" : "";
@@ -3059,7 +3059,7 @@ function ConstraintValidation(base) {
3059
3059
  }
3060
3060
  this[internals].setValidity(validity, validityMessage);
3061
3061
  this.ariaInvalid = invalid ? "true" : null;
3062
- setCustomState(this, "-invalid", invalid === true);
3062
+ setCustomState(this, "--invalid", invalid === true);
3063
3063
  if (isLabelledMixin(this)) {
3064
3064
  this[updateLabels]?.();
3065
3065
  }
@@ -3731,18 +3731,24 @@ function Role(base, role) {
3731
3731
  return _RoleMixin;
3732
3732
  }
3733
3733
 
3734
+ /** A symbol used to define the function called to resume animation. */
3735
+ const resumeAnimation = Symbol("resumeAnimation");
3734
3736
  /**
3735
3737
  * Mixin to augment an element with behavior that suppresses initial animations.
3736
3738
  * @template T The type of the base class.
3737
3739
  * @param {T} base The base class.
3738
- * @returns {T} A constructor that implements initial animation suppression.
3740
+ * @returns {Constructor<SuppressInitialAnimationMixin> & T} A constructor that implements initial animation suppression.
3739
3741
  */
3740
3742
  function SuppressInitialAnimation(base) {
3741
3743
  class _SuppressInitialAnimation extends base {
3742
3744
  connectedCallback() {
3743
3745
  super.connectedCallback();
3744
- addCustomState(this, "-no-animate");
3745
- requestAnimationFrame(() => deleteCustomState(this, "-no-animate"));
3746
+ addCustomState(this, "--no-animate");
3747
+ this[resumeAnimation]();
3748
+ }
3749
+ /** @internal */
3750
+ [resumeAnimation]() {
3751
+ requestAnimationFrame(() => deleteCustomState(this, "--no-animate"));
3746
3752
  }
3747
3753
  }
3748
3754
  return _SuppressInitialAnimation;
@@ -3838,6 +3844,8 @@ var _M3eCollapsibleElement_instances, _M3eCollapsibleElement_slotChanged, _M3eCo
3838
3844
  * @slot - Renders the collapsible content.
3839
3845
  *
3840
3846
  * @attr open - Whether content is visible.
3847
+ * @attr orientation - Orientation of collapsible content.
3848
+ * @attr no-animate - Whether to disable animation.
3841
3849
  *
3842
3850
  * @fires opening - Emitted when the collapsible begins to open.
3843
3851
  * @fires opened - Emitted when the collapsible has opened.
@@ -3859,11 +3867,21 @@ let M3eCollapsibleElement = class M3eCollapsibleElement extends AttachInternals(
3859
3867
  * @default false
3860
3868
  */
3861
3869
  this.open = false;
3870
+ /**
3871
+ * Orientation of collapsible content.
3872
+ * @default "vertical"
3873
+ */
3874
+ this.orientation = "vertical";
3875
+ /**
3876
+ * Whether to disable animation.
3877
+ * @default false
3878
+ */
3879
+ this.noAnimate = false;
3862
3880
  }
3863
3881
  /** @inheritdoc */
3864
3882
  update(changedProperties) {
3865
3883
  super.update(changedProperties);
3866
- addCustomState(this, "-no-animate");
3884
+ addCustomState(this, "--no-animate");
3867
3885
  if (!__classPrivateFieldGet(this, _M3eCollapsibleElement_slotChanged, "f")) {
3868
3886
  if (this.open) {
3869
3887
  __classPrivateFieldSet(this, _M3eCollapsibleElement_hasOpened, true, "f");
@@ -3875,26 +3893,26 @@ let M3eCollapsibleElement = class M3eCollapsibleElement extends AttachInternals(
3875
3893
  this.toggleAttribute("inert", !this.open);
3876
3894
  if (this.open) {
3877
3895
  __classPrivateFieldSet(this, _M3eCollapsibleElement_hasOpened, true, "f");
3878
- if (!prefersReducedMotion()) {
3896
+ if (!(prefersReducedMotion() || this.noAnimate)) {
3879
3897
  __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_autoSize).call(this);
3880
- setCustomState(this, "-overflows", this.clientHeight < this.scrollHeight);
3898
+ setCustomState(this, "--overflows", this.orientation === "vertical" ? this.clientHeight < this.scrollHeight : this.clientWidth < this.scrollWidth);
3881
3899
  __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_clearSize).call(this);
3882
3900
  }
3883
- deleteCustomState(this, "-closing");
3884
- addCustomState(this, "-opening");
3901
+ deleteCustomState(this, "--closing");
3902
+ addCustomState(this, "--opening");
3885
3903
  this.dispatchEvent(new Event("opening"));
3886
3904
  __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_clearSize).call(this);
3887
- deleteCustomState(this, "-no-animate");
3905
+ deleteCustomState(this, "--no-animate");
3888
3906
  __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_actualSize).call(this);
3889
- if (prefersReducedMotion()) {
3907
+ if (prefersReducedMotion() || this.noAnimate) {
3890
3908
  __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_autoSize).call(this);
3891
- deleteCustomState(this, "-opening");
3909
+ deleteCustomState(this, "--opening");
3892
3910
  this.dispatchEvent(new Event("opened"));
3893
3911
  } else {
3894
3912
  this.addEventListener("transitionend", () => {
3895
3913
  if (this.open) {
3896
3914
  __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_autoSize).call(this);
3897
- deleteCustomState(this, "-opening");
3915
+ deleteCustomState(this, "--opening");
3898
3916
  this.dispatchEvent(new Event("opened"));
3899
3917
  }
3900
3918
  }, {
@@ -3902,23 +3920,23 @@ let M3eCollapsibleElement = class M3eCollapsibleElement extends AttachInternals(
3902
3920
  });
3903
3921
  }
3904
3922
  } else {
3905
- deleteCustomState(this, "-opening");
3906
- addCustomState(this, "-closing");
3923
+ deleteCustomState(this, "--opening");
3924
+ addCustomState(this, "--closing");
3907
3925
  this.dispatchEvent(new Event("closing"));
3908
3926
  __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_actualSize).call(this);
3909
3927
  if (__classPrivateFieldGet(this, _M3eCollapsibleElement_hasOpened, "f")) {
3910
- deleteCustomState(this, "-no-animate");
3928
+ deleteCustomState(this, "--no-animate");
3911
3929
  }
3912
- if (prefersReducedMotion()) {
3930
+ if (prefersReducedMotion() || this.noAnimate) {
3913
3931
  __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_clearSize).call(this);
3914
- deleteCustomState(this, "-closing");
3932
+ deleteCustomState(this, "--closing");
3915
3933
  this.dispatchEvent(new Event("closed"));
3916
3934
  } else {
3917
3935
  requestAnimationFrame(() => {
3918
3936
  __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_clearSize).call(this);
3919
3937
  this.addEventListener("transitionend", () => {
3920
3938
  if (!this.open) {
3921
- deleteCustomState(this, "-closing");
3939
+ deleteCustomState(this, "--closing");
3922
3940
  this.dispatchEvent(new Event("closed"));
3923
3941
  }
3924
3942
  }, {
@@ -3940,27 +3958,46 @@ _M3eCollapsibleElement_handleSlotChange = function _M3eCollapsibleElement_handle
3940
3958
  __classPrivateFieldSet(this, _M3eCollapsibleElement_slotChanged, true, "f");
3941
3959
  };
3942
3960
  _M3eCollapsibleElement_autoSize = function _M3eCollapsibleElement_autoSize() {
3943
- this.style.height = "auto";
3961
+ this.style[this.orientation === "vertical" ? "height" : "width"] = "auto";
3944
3962
  };
3945
3963
  _M3eCollapsibleElement_clearSize = function _M3eCollapsibleElement_clearSize() {
3946
- this.style.height = "";
3964
+ this.style[this.orientation === "vertical" ? "height" : "width"] = "";
3947
3965
  };
3948
3966
  _M3eCollapsibleElement_actualSize = function _M3eCollapsibleElement_actualSize() {
3949
- this.style.height = `${this.scrollHeight}px`;
3967
+ if (this.orientation === "vertical") {
3968
+ this.style.height = `${this.scrollHeight}px`;
3969
+ } else {
3970
+ this.style.width = `${this.scrollWidth}px`;
3971
+ }
3950
3972
  };
3951
3973
  /** The styles of the element. */
3952
- M3eCollapsibleElement.styles = css`:host { display: block; height: 0px; overflow: hidden; transition: ${unsafeCSS(`visibility var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
3974
+ M3eCollapsibleElement.styles = css`:host { display: block; overflow: hidden; } :host([orientation="vertical"]) { height: 0px; transition: ${unsafeCSS(`visibility var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
3953
3975
  ${DesignToken.motion.easing.standard},
3954
3976
  height var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
3955
3977
  ${DesignToken.motion.easing.standard},
3956
3978
  padding-top var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
3957
3979
  ${DesignToken.motion.easing.standard},
3958
3980
  padding-bottom var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
3959
- ${DesignToken.motion.easing.standard}`)}; } :host(:not(:state(-closing)):not([open])) { visibility: hidden; } :host(:not([open])) { min-height: unset !important; padding-top: 0px !important; padding-bottom: 0px !important; } :host(:state(-no-animate)) { transition-duration: 0ms; } :host(:state(-opening)), :host(:state(-closing)) { overflow-y: hidden !important; } :host(:state(-overflows)) { scrollbar-gutter: stable; } ::slotted(*) { --m3e-collapsible-animation-duration: initial; } @media (prefers-reduced-motion) { :host { transition: none; } }`;
3981
+ ${DesignToken.motion.easing.standard}`)}; } :host([orientation="horizontal"]) { width: 0px; transition: ${unsafeCSS(`visibility var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
3982
+ ${DesignToken.motion.easing.standard},
3983
+ width var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
3984
+ ${DesignToken.motion.easing.standard},
3985
+ padding-left var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
3986
+ ${DesignToken.motion.easing.standard},
3987
+ padding-right var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
3988
+ ${DesignToken.motion.easing.standard}`)}; } :host(:not(:is(:state(--closing), :--closing)):not([open])) { visibility: hidden; } :host([orientation="vertical"]:not([open])) { min-height: unset !important; padding-top: 0px !important; padding-bottom: 0px !important; } :host([orientation="horizontal"]:not([open])) { min-width: unset !important; padding-left: 0px !important; padding-right: 0px !important; } :host([no-animate]), :host(:is(:state(--no-animate), :--no-animate)) { transition-duration: 0ms; } :host([orientation="vertical"]:is(:state(--opening), :--opening)), :host([orientation="vertical"]:is(:state(--closing), :--closing)) { overflow-y: hidden !important; } :host([orientation="horizontal"]:is(:state(--opening), :--opening)), :host([orientation="horizontal"]:is(:state(--closing), :--closing)) { overflow-x: hidden !important; } :host(:is(:state(--overflows), :--overflows)) { scrollbar-gutter: stable; } ::slotted(*) { --m3e-collapsible-animation-duration: initial; } @media (prefers-reduced-motion) { :host { transition: none; } }`;
3960
3989
  __decorate([property({
3961
3990
  type: Boolean,
3962
3991
  reflect: true
3963
3992
  })], M3eCollapsibleElement.prototype, "open", void 0);
3993
+ __decorate([property({
3994
+ reflect: true
3995
+ })], M3eCollapsibleElement.prototype, "orientation", void 0);
3996
+ __decorate([property({
3997
+ attribute: "no-animate",
3998
+ type: Boolean,
3999
+ reflect: true
4000
+ })], M3eCollapsibleElement.prototype, "noAnimate", void 0);
3964
4001
  M3eCollapsibleElement = __decorate([customElement("m3e-collapsible")], M3eCollapsibleElement);
3965
4002
 
3966
4003
  /**
@@ -4654,13 +4691,13 @@ let M3eScrollContainerElement = class M3eScrollContainerElement extends AttachIn
4654
4691
  _updateScroll() {
4655
4692
  const before = (this.dividers === "above" || this.dividers === "above-below") && this.scrollTop > 0;
4656
4693
  const after = (this.dividers === "below" || this.dividers === "above-below") && this.scrollHeight - this.scrollTop - this.clientHeight > 1;
4657
- setCustomState(this, "-above", before);
4658
- setCustomState(this, "-below", after);
4694
+ setCustomState(this, "--above", before);
4695
+ setCustomState(this, "--below", after);
4659
4696
  }
4660
4697
  };
4661
4698
  _M3eScrollContainerElement_scrollHandler = new WeakMap();
4662
4699
  /** The styles of the element. */
4663
- M3eScrollContainerElement.styles = css`:host { display: block; overflow-y: auto; position: relative; box-sizing: border-box; scrollbar-color: ${DesignToken.scrollbar.color}; border-top: var(--m3e-divider-thickness, 1px) solid transparent; border-bottom: var(--m3e-divider-thickness, 1px) solid transparent; outline-color: ${FocusRingToken.color}; outline-width: ${FocusRingToken.thickness}; outline-offset: ${FocusRingToken.outwardOffset}; } :host([thin]) { scrollbar-width: ${DesignToken.scrollbar.thinWidth}; } :host(:not([thin])) { scrollbar-width: ${DesignToken.scrollbar.width}; } :host(:not(:focus-visible):state(-above)) { border-top-color: var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host(:not(:focus-visible):state(-below)) { border-bottom-color: var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host(:focus-visible) { outline-style: solid; animation: grow-shrink ${FocusRingToken.duration}; } @keyframes grow-shrink { 50% { outline-width: calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor}); } } @media (forced-colors: active) { :host { border-top: var(--m3e-divider-thickness, 1px) solid Canvas; border-bottom: var(--m3e-divider-thickness, 1px) solid Canvas; } :host(:not(:focus-visible):state(-above)) { border-top-color: GrayText; } :host(:not(:focus-visible):state(-below)) { border-bottom-color: GrayText; } } @media (prefers-reduced-motion) { :host(:focus-visible) { animation: none; } }`;
4700
+ M3eScrollContainerElement.styles = css`:host { display: block; overflow-y: auto; position: relative; box-sizing: border-box; scrollbar-color: ${DesignToken.scrollbar.color}; border-top: var(--m3e-divider-thickness, 1px) solid transparent; border-bottom: var(--m3e-divider-thickness, 1px) solid transparent; outline-color: ${FocusRingToken.color}; outline-width: ${FocusRingToken.thickness}; outline-offset: ${FocusRingToken.outwardOffset}; } :host([thin]) { scrollbar-width: ${DesignToken.scrollbar.thinWidth}; } :host(:not([thin])) { scrollbar-width: ${DesignToken.scrollbar.width}; } :host(:not(:focus-visible):is(:state(--above), :--above)) { border-top-color: var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host(:not(:focus-visible):is(:state(--below), :--below)) { border-bottom-color: var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host(:focus-visible) { outline-style: solid; animation: grow-shrink ${FocusRingToken.duration}; } @keyframes grow-shrink { 50% { outline-width: calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor}); } } @media (forced-colors: active) { :host { border-top: var(--m3e-divider-thickness, 1px) solid Canvas; border-bottom: var(--m3e-divider-thickness, 1px) solid Canvas; } :host(:not(:focus-visible):is(:state(--above), :--above)) { border-top-color: GrayText; } :host(:not(:focus-visible):is(:state(--below), :--below)) { border-bottom-color: GrayText; } } @media (prefers-reduced-motion) { :host(:focus-visible) { animation: none; } }`;
4664
4701
  __decorate([property()], M3eScrollContainerElement.prototype, "dividers", void 0);
4665
4702
  __decorate([property({
4666
4703
  type: Boolean,
@@ -4709,20 +4746,20 @@ let M3eSlideElement = class M3eSlideElement extends AttachInternals(LitElement)
4709
4746
  /** @inheritdoc */
4710
4747
  connectedCallback() {
4711
4748
  super.connectedCallback();
4712
- addCustomState(this, "-no-animate");
4749
+ addCustomState(this, "--no-animate");
4713
4750
  }
4714
4751
  /** @inheritdoc */
4715
4752
  update(changedProperties) {
4716
4753
  super.update(changedProperties);
4717
4754
  if (changedProperties.has("selectedIndex")) {
4718
4755
  if (this.selectedIndex === null) {
4719
- addCustomState(this, "-no-animate");
4756
+ addCustomState(this, "--no-animate");
4720
4757
  }
4721
4758
  __classPrivateFieldGet(this, _M3eSlideElement_instances, "m", _M3eSlideElement_updateItems).call(this);
4722
- if (this.selectedIndex !== null && hasCustomState(this, "-no-animate")) {
4759
+ if (this.selectedIndex !== null && hasCustomState(this, "--no-animate")) {
4723
4760
  requestAnimationFrame(() => {
4724
4761
  if (this.selectedIndex !== null) {
4725
- deleteCustomState(this, "-no-animate");
4762
+ deleteCustomState(this, "--no-animate");
4726
4763
  }
4727
4764
  });
4728
4765
  }
@@ -4758,7 +4795,7 @@ _M3eSlideElement_updateItems = function _M3eSlideElement_updateItems() {
4758
4795
  };
4759
4796
  /** The styles of the element. */
4760
4797
  M3eSlideElement.styles = css`:host { display: flex; position: relative; overflow: hidden; } ::slotted(*) { width: 100%; top: 0; transition: ${unsafeCSS(`inset-inline-start var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard},
4761
- visibility var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard} allow-discrete`)}; } ::slotted(.-before), ::slotted(.-after) { visibility: hidden; position: absolute; } ::slotted(.-before) { inset-inline-start: -100%; } ::slotted(.-after) { inset-inline-start: 100%; } ::slotted(:not(.-before):not(.-after)) { position: relative; inset-inline-start: 0; } :host(:state(-no-animate)) ::slotted(*) { transition: none; } @media (prefers-reduced-motion) { ::slotted(*) { transition: none; } }`;
4798
+ visibility var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard} allow-discrete`)}; } ::slotted(.-before), ::slotted(.-after) { visibility: hidden; position: absolute; } ::slotted(.-before) { inset-inline-start: -100%; } ::slotted(.-after) { inset-inline-start: 100%; } ::slotted(:not(.-before):not(.-after)) { position: relative; inset-inline-start: 0; } :host(:is(:state(--no-animate), :--no-animate)) ::slotted(*) { transition: none; } @media (prefers-reduced-motion) { ::slotted(*) { transition: none; } }`;
4762
4799
  __decorate([property({
4763
4800
  attribute: "selected-index",
4764
4801
  type: Number,
@@ -5198,5 +5235,5 @@ let M3eTextOverflowElement = class M3eTextOverflowElement extends LitElement {
5198
5235
  M3eTextOverflowElement.styles = css`:host { flex: 1 1 auto; display: inline-flex; align-items: center; flex-wrap: nowrap; min-width: 0; } .base { flex: 1 1 auto; display: inline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }`;
5199
5236
  M3eTextOverflowElement = __decorate([customElement("m3e-text-overflow")], M3eTextOverflowElement);
5200
5237
 
5201
- export { ActionElementBase, AnimationLoopController, AttachInternals, Checked, CheckedIndeterminate, ConstraintValidation, DesignToken, Dirty, Disabled, DisabledInteractive, FocusController, Focusable, FormAssociated, FormSubmitter, HoverController, HtmlFor, InertController, IntersectionController, KeyboardClick, Labelled, LinkButton, LongPressController, M3eCollapsibleElement, M3eElevationElement, M3eFocusRingElement, M3ePseudoCheckboxElement, M3ePseudoRadioElement, M3eRippleElement, M3eScrollContainerElement, M3eSlideElement, M3eStateLayerElement, M3eTextHighlightElement, M3eTextOverflowElement, MutationController, PressedController, ReadOnly, ReconnectedCallback, Required, RequiredConstraintValidation, ResizeController, Role, ScrollController, ScrollLockController, Selected, SuppressInitialAnimation, Touched, VelocityTracker, Vertical, addCustomState, checkOrSelect, computeCssSize, computeLineCount, customElement, dateConverter, debounce, defaultValue, deleteCustomState, focusWhenReady, forcedColorsActive, formValue, generateClipPaths, getScrollbarWidth, getTextContent, guid, hasAssignedNodes, hasCustomState, hasKeys, interceptProperty, internals, isAttachInternalsMixin, isCheckedIndeterminateMixin, isCheckedMixin, isCheckedOrSelected, isCheckedOrSelectedMixin, isConstraintValidationMixin, isDirtyMixin, isDisabledInteractiveMixin, isDisabledMixin, isFormAssociatedMixin, isFormSubmitterMixin, isHtmlForMixin, isLabelledMixin, isLinkButtonMixin, isReadOnlyMixin, isRequiredConstraintValidationMixin, isRequiredMixin, isSelectedMixin, isTouchedMixin, isVerticalMixin, prefersReducedMotion, registerStyleSheet, renderPseudoLink, resolveElementById, resolveFragmentUrl, safeStyleMap, scrollIntoViewIfNeeded, setCustomState, spaceSeparatedStringConverter, updateLabels, validate, waitForUpgrade };
5238
+ export { ActionElementBase, AnimationLoopController, AttachInternals, Checked, CheckedIndeterminate, ConstraintValidation, DesignToken, Dirty, Disabled, DisabledInteractive, FocusController, Focusable, FormAssociated, FormSubmitter, HoverController, HtmlFor, InertController, IntersectionController, KeyboardClick, Labelled, LinkButton, LongPressController, M3eCollapsibleElement, M3eElevationElement, M3eFocusRingElement, M3ePseudoCheckboxElement, M3ePseudoRadioElement, M3eRippleElement, M3eScrollContainerElement, M3eSlideElement, M3eStateLayerElement, M3eTextHighlightElement, M3eTextOverflowElement, MutationController, PressedController, ReadOnly, ReconnectedCallback, Required, RequiredConstraintValidation, ResizeController, Role, ScrollController, ScrollLockController, Selected, SuppressInitialAnimation, Touched, VelocityTracker, Vertical, addCustomState, checkOrSelect, computeCssSize, computeLineCount, customElement, dateConverter, debounce, defaultValue, deleteCustomState, focusWhenReady, forcedColorsActive, formValue, generateClipPaths, getScrollbarWidth, getTextContent, guid, hasAssignedNodes, hasCustomState, hasKeys, interceptProperty, internals, isAttachInternalsMixin, isCheckedIndeterminateMixin, isCheckedMixin, isCheckedOrSelected, isCheckedOrSelectedMixin, isConstraintValidationMixin, isDirtyMixin, isDisabledInteractiveMixin, isDisabledMixin, isFormAssociatedMixin, isFormSubmitterMixin, isHtmlForMixin, isLabelledMixin, isLinkButtonMixin, isReadOnlyMixin, isRequiredConstraintValidationMixin, isRequiredMixin, isSelectedMixin, isTouchedMixin, isVerticalMixin, prefersReducedMotion, registerStyleSheet, renderPseudoLink, resolveElementById, resolveFragmentUrl, resumeAnimation, safeStyleMap, scrollIntoViewIfNeeded, setCustomState, spaceSeparatedStringConverter, updateLabels, validate, waitForUpgrade };
5202
5239
  //# sourceMappingURL=core.js.map