@ionic/core 8.8.7-dev.11779400352.127ba526 → 8.8.7-dev.11779921691.1777274a

package/dist/collection/components/item-divider/item-divider.css

@@ -0,0 +1,351 @@
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+:host {
+  /**
+   * @prop --ion-item-divider-background: Background of the item divider
+   * @prop --ion-item-divider-color: Color of the item divider
+   * @prop --ion-item-divider-min-height: Minimum height of the item divider
+   * @prop --ion-item-divider-border-bottom: Border bottom of the item divider
+   * @prop --ion-item-divider-font-size: Font size of the item divider
+   * @prop --ion-item-divider-font-weight: Font weight of the item divider
+   *
+   * @prop --ion-item-divider-padding-top: Top padding of the item divider
+   * @prop --ion-item-divider-padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item divider
+   * @prop --ion-item-divider-padding-bottom: Bottom padding of the item divider
+   * @prop --ion-item-divider-padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item divider
+   *
+   * @prop --ion-item-divider-inner-padding-top: Top inner padding of the item divider
+   * @prop --ion-item-divider-inner-padding-end: Right inner padding if direction is left-to-right, and left inner padding if direction is right-to-left of the item divider
+   * @prop --ion-item-divider-inner-padding-bottom: Bottom inner padding of the item divider
+   * @prop --ion-item-divider-inner-padding-start: Left inner padding if direction is left-to-right, and right inner padding if direction is right-to-left of the item divider
+   *
+   * ::slotted([slot="start"])
+   * @prop --ion-item-divider-start-slotted-margin-start: Left margin if direction is left-to-right, and right margin if direction is right-to-left of the slotted element when it is in the start slot of the item divider
+   * @prop --ion-item-divider-start-slotted-margin-end: Right margin if direction is left-to-right, and left margin if direction is right-to-left of the slotted element when it is in the start slot of the item divider
+   *
+   * ::slotted([slot="end"])
+   * @prop --ion-item-divider-end-slotted-margin-start: Left margin if direction is left-to-right, and right margin if direction is right-to-left of the slotted element when it is in the end slot of the item divider
+   * @prop --ion-item-divider-end-slotted-margin-end: Right margin if direction is left-to-right, and left margin if direction is right-to-left of the slotted element when it is in the end slot of the item divider
+   *
+   * Slotted Label
+   * @prop --ion-item-divider-label-margin-top: Top margin of the slotted ion-label
+   * @prop --ion-item-divider-label-margin-end: Right margin if direction is left-to-right, and left margin if direction is right-to-left of the slotted ion-label
+   * @prop --ion-item-divider-label-margin-bottom: Bottom margin of the slotted ion-label
+   * @prop --ion-item-divider-label-margin-start: Left margin if direction is left-to-right, and right margin if direction is right-to-left of the slotted ion-label
+   *
+   * Slotted Icon
+   * @prop --ion-item-divider-icon-default-color: Color of the slotted ion-icon
+   * @prop --ion-item-divider-icon-semantic-default-color: Color of the slotted ion-icon when the item divider has a semantic color applied
+   * @prop --ion-item-divider-icon-font-size: Font size of the slotted ion-icon
+   * @prop --ion-item-divider-icon-start-slotted-margin-top: Top margin of the slotted ion-icon when it is in the start slot of the item divider
+   * @prop --ion-item-divider-icon-start-slotted-margin-end: Right margin if direction is left-to-right, and left margin if direction is right-to-left of the slotted ion-icon when it is in the start slot of the item divider
+   * @prop --ion-item-divider-icon-start-slotted-margin-bottom: Bottom margin of the slotted ion-icon when it is in the start slot of the item divider
+   * @prop --ion-item-divider-icon-start-slotted-margin-start: Left margin if direction is left-to-right, and right margin if direction is right-to-left of the slotted ion-icon when it is in the start slot of the item divider
+   * @prop --ion-item-divider-icon-end-slotted-margin-top: Top margin of the slotted ion-icon when it is in the end slot of the item divider
+   * @prop --ion-item-divider-icon-end-slotted-margin-end: Right margin if direction is left-to-right, and left margin if direction is right-to-left of the slotted ion-icon when it is in the end slot of the item divider
+   * @prop --ion-item-divider-icon-end-slotted-margin-bottom: Bottom margin of the slotted ion-icon when it is in the end slot of the item divider
+   * @prop --ion-item-divider-icon-end-slotted-margin-start: Left margin if direction is left-to-right, and right margin if direction is right-to-left of the slotted ion-icon when it is in the end slot of the item divider
+   *
+   * Slotted Note
+   * @prop --ion-item-divider-note-margin-top: Top margin of the slotted ion-note
+   * @prop --ion-item-divider-note-margin-end: Right margin if direction is left-to-right, and left margin if direction is right-to-left of the slotted ion-note
+   * @prop --ion-item-divider-note-margin-bottom: Bottom margin of the slotted ion-note
+   * @prop --ion-item-divider-note-margin-start: Left margin if direction is left-to-right, and right margin if direction is right-to-left of the slotted ion-note
+   * @prop --ion-item-divider-note-align-self: Align self of the slotted ion-note
+   * @prop --ion-item-divider-note-font-size: Font size of the slotted ion-note
+   * @prop --ion-item-divider-note-padding-top: Top padding of the slotted ion-note when it has a slot
+   * @prop --ion-item-divider-note-padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the slotted ion-note when it has a slot
+   * @prop --ion-item-divider-note-padding-bottom: Bottom padding of the slotted ion-note when it has a slot
+   * @prop --ion-item-divider-note-padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the slotted ion-note when it has a slot
+   *
+   * Slotted Avatar
+   * @prop --ion-item-divider-avatar-margin-top: Top margin of the slotted ion-avatar
+   * @prop --ion-item-divider-avatar-margin-end: Right margin if direction is left-to-right, and left margin if direction is right-to-left of the slotted ion-avatar
+   * @prop --ion-item-divider-avatar-margin-bottom: Bottom margin of the slotted ion-avatar
+   * @prop --ion-item-divider-avatar-margin-start: Left margin if direction is left-to-right, and right margin if direction is right-to-left of the slotted ion-avatar
+   * @prop --ion-item-divider-avatar-width: Width of the slotted ion-avatar
+   * @prop --ion-item-divider-avatar-height: Height of the slotted ion-avatar
+   * @prop --ion-item-divider-avatar-start-slotted-margin-start: Left margin if direction is left-to-right, and right margin if direction is right-to-left of the slotted ion-avatar when it is in the start slot of the item divider
+   * @prop --ion-item-divider-avatar-start-slotted-margin-end: Right margin if direction is left-to-right, and left margin if direction is right-to-left of the slotted ion-avatar when it is in the start slot of the item divider
+   * @prop --ion-item-divider-avatar-end-slotted-margin-start: Left margin if direction is left-to-right, and right margin if direction is right-to-left of the slotted ion-avatar when it is in the end slot of the item divider
+   * @prop --ion-item-divider-avatar-end-slotted-margin-end: Right margin if direction is left-to-right, and left margin if direction is right-to-left of the slotted ion-avatar when it is in the end slot of the item divider
+   *
+   * Slotted Thumbnail
+   * @prop --ion-item-divider-thumbnail-margin-top: Top margin of the slotted ion-thumbnail
+   * @prop --ion-item-divider-thumbnail-margin-end: Right margin if direction is left-to-right, and left margin if direction is right-to-left of the slotted ion-thumbnail
+   * @prop --ion-item-divider-thumbnail-margin-bottom: Bottom margin of the slotted ion-thumbnail
+   * @prop --ion-item-divider-thumbnail-margin-start: Left margin if direction is left-to-right, and right margin if direction is right-to-left of the slotted ion-thumbnail
+   * @prop --ion-item-divider-thumbnail-width: Width of the slotted ion-thumbnail
+   * @prop --ion-item-divider-thumbnail-height: Height of the slotted ion-thumbnail
+   * @prop --ion-item-divider-thumbnail-start-slotted-margin-start: Left margin if direction is left-to-right, and right margin if direction is right-to-left of the slotted ion-thumbnail when it is in the start slot of the item divider
+   * @prop --ion-item-divider-thumbnail-start-slotted-margin-end: Right margin if direction is left-to-right, and left margin if direction is right-to-left of the slotted ion-thumbnail when it is in the start slot of the item divider
+   * @prop --ion-item-divider-thumbnail-end-slotted-margin-start: Left margin if direction is left-to-right, and right margin if direction is right-to-left of the slotted ion-thumbnail when it is in the end slot of the item divider
+   * @prop --ion-item-divider-thumbnail-end-slotted-margin-end: Right margin if direction is left-to-right, and left margin if direction is right-to-left of the slotted ion-thumbnail when it is in the end slot of the item divider
+   *
+   * Slotted Paragraph
+   * @prop --ion-item-divider-paragraph-margin-top: Top margin of the slotted p
+   * @prop --ion-item-divider-paragraph-margin-end: Right margin if direction is left-to-right, and left margin if direction is right-to-left of the slotted p
+   * @prop --ion-item-divider-paragraph-margin-bottom: Bottom margin of the slotted p
+   * @prop --ion-item-divider-paragraph-margin-start: Left margin if direction is left-to-right, and right margin if direction is right-to-left of the slotted p
+   * @prop --ion-item-divider-paragraph-color: Color of the slotted p
+   * @prop --ion-item-divider-paragraph-font-size: Font size of the slotted p
+   * @prop --ion-item-divider-paragraph-text-overflow: Text overflow of the slotted p
+   * @prop --ion-item-divider-paragraph-overflow: Overflow of the slotted p
+   * @prop --ion-item-divider-paragraph-trailing-margin-top: Top margin of the slotted p when it is the last child
+   * @prop --ion-item-divider-paragraph-trailing-margin-end: Right margin if direction is left-to-right, and left margin if direction is right-to-left of the slotted p when it is the last child
+   * @prop --ion-item-divider-paragraph-trailing-margin-bottom: Bottom margin of the slotted p when it is the last child
+   * @prop --ion-item-divider-paragraph-trailing-margin-start: Left margin if direction is left-to-right, and right margin if direction is right-to-left of the slotted p when it is the last child
+   */
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  padding-top: var(--ion-item-divider-padding-top);
+  padding-bottom: var(--ion-item-divider-padding-bottom);
+  /* stylelint-disable */
+  padding-right: var(--ion-item-divider-padding-end);
+  padding-left: calc(var(--ion-item-divider-padding-start) + var(--ion-safe-area-left, 0px));
+  /* stylelint-enable */
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: var(--ion-item-divider-min-height);
+  border-bottom: var(--ion-item-divider-border-bottom);
+  background: var(--ion-item-divider-background);
+  color: var(--ion-item-divider-color);
+  font-family: var(--ion-font-family, inherit);
+  font-size: var(--ion-item-divider-font-size);
+  font-weight: var(--ion-item-divider-font-weight);
+  overflow: hidden;
+  z-index: 100;
+  box-sizing: border-box;
+}
+:host-context([dir=rtl]) {
+  padding-right: calc(var(--ion-item-divider-padding-start) + var(--ion-safe-area-right, 0px));
+  padding-left: var(--ion-item-divider-padding-end);
+}
+
+@supports selector(:dir(rtl)) {
+  :host(:dir(rtl)) {
+    padding-right: calc(var(--ion-item-divider-padding-start) + var(--ion-safe-area-right, 0px));
+    padding-left: var(--ion-item-divider-padding-end);
+  }
+}
+
+:host(.ion-color) {
+  background: var(--ion-color-base);
+  color: var(--ion-color-contrast);
+}
+
+:host(.item-divider-sticky) {
+  position: sticky;
+  top: 0;
+}
+
+.item-divider-inner {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-top: var(--ion-item-divider-inner-padding-top);
+  padding-bottom: var(--ion-item-divider-inner-padding-bottom);
+  /* stylelint-disable */
+  padding-right: calc(var(--ion-safe-area-right, 0px) + var(--ion-item-divider-inner-padding-end));
+  padding-left: var(--ion-item-divider-inner-padding-start);
+  /* stylelint-enable */
+  display: flex;
+  flex: 1;
+  flex-direction: inherit;
+  align-items: inherit;
+  align-self: stretch;
+  min-height: inherit;
+  border: 0;
+  overflow: hidden;
+}
+:host-context([dir=rtl]) .item-divider-inner {
+  padding-right: var(--ion-item-divider-inner-padding-start);
+  padding-left: calc(var(--ion-safe-area-left, 0px) + var(--ion-item-divider-inner-padding-end));
+}
+
+[dir=rtl] .item-divider-inner {
+  padding-right: var(--ion-item-divider-inner-padding-start);
+  padding-left: calc(var(--ion-safe-area-left, 0px) + var(--ion-item-divider-inner-padding-end));
+}
+
+@supports selector(:dir(rtl)) {
+  .item-divider-inner:dir(rtl) {
+    padding-right: var(--ion-item-divider-inner-padding-start);
+    padding-left: calc(var(--ion-safe-area-left, 0px) + var(--ion-item-divider-inner-padding-end));
+  }
+}
+
+.item-divider-wrapper {
+  display: flex;
+  flex: 1;
+  flex-direction: inherit;
+  align-items: inherit;
+  align-self: stretch;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+::slotted([slot=start]) {
+  -webkit-margin-start: var(--ion-item-divider-start-slotted-margin-start, revert-layer);
+  margin-inline-start: var(--ion-item-divider-start-slotted-margin-start, revert-layer);
+  -webkit-margin-end: var(--ion-item-divider-start-slotted-margin-end, revert-layer);
+  margin-inline-end: var(--ion-item-divider-start-slotted-margin-end, revert-layer);
+}
+
+::slotted([slot=end]) {
+  -webkit-margin-start: var(--ion-item-end-slotted-margin-start, revert-layer);
+  margin-inline-start: var(--ion-item-end-slotted-margin-start, revert-layer);
+  -webkit-margin-end: var(--ion-item-end-slotted-margin-end, revert-layer);
+  margin-inline-end: var(--ion-item-end-slotted-margin-end, revert-layer);
+}
+
+::slotted(ion-label) {
+  -webkit-margin-start: var(--ion-item-divider-label-margin-start);
+  margin-inline-start: var(--ion-item-divider-label-margin-start);
+  -webkit-margin-end: var(--ion-item-divider-label-margin-end);
+  margin-inline-end: var(--ion-item-divider-label-margin-end);
+  margin-top: var(--ion-item-divider-label-margin-top);
+  margin-bottom: var(--ion-item-divider-label-margin-bottom);
+}
+
+::slotted(ion-icon) {
+  color: var(--ion-item-divider-icon-default-color);
+  font-size: var(--ion-item-divider-icon-font-size);
+}
+
+:host(.ion-color) ::slotted(ion-icon) {
+  color: var(--ion-item-divider-icon-semantic-default-color);
+}
+
+::slotted(ion-icon[slot=start]) {
+  -webkit-margin-start: var(--ion-item-divider-icon-start-slotted-margin-start, revert-layer);
+  margin-inline-start: var(--ion-item-divider-icon-start-slotted-margin-start, revert-layer);
+  -webkit-margin-end: var(--ion-item-divider-icon-start-slotted-margin-end, revert-layer);
+  margin-inline-end: var(--ion-item-divider-icon-start-slotted-margin-end, revert-layer);
+  margin-top: var(--ion-item-divider-icon-start-slotted-margin-top, revert-layer);
+  margin-bottom: var(--ion-item-divider-icon-start-slotted-margin-bottom, revert-layer);
+}
+
+::slotted(ion-icon[slot=end]) {
+  -webkit-margin-start: var(--ion-item-divider-icon-end-slotted-margin-start, revert-layer);
+  margin-inline-start: var(--ion-item-divider-icon-end-slotted-margin-start, revert-layer);
+  -webkit-margin-end: var(--ion-item-divider-icon-end-slotted-margin-end, revert-layer);
+  margin-inline-end: var(--ion-item-divider-icon-end-slotted-margin-end, revert-layer);
+  margin-top: var(--ion-item-divider-icon-end-slotted-margin-top, revert-layer);
+  margin-bottom: var(--ion-item-divider-icon-end-slotted-margin-bottom, revert-layer);
+}
+
+::slotted(ion-note) {
+  -webkit-margin-start: var(--ion-item-divider-note-margin-start);
+  margin-inline-start: var(--ion-item-divider-note-margin-start);
+  -webkit-margin-end: var(--ion-item-divider-note-margin-end);
+  margin-inline-end: var(--ion-item-divider-note-margin-end);
+  margin-top: var(--ion-item-divider-note-margin-top);
+  margin-bottom: var(--ion-item-divider-note-margin-bottom);
+  align-self: var(--ion-item-divider-note-align-self);
+  font-size: var(--ion-item-divider-note-font-size, revert-layer);
+}
+
+::slotted(ion-note[slot]) {
+  -webkit-padding-start: var(--ion-item-divider-note-padding-start);
+  padding-inline-start: var(--ion-item-divider-note-padding-start);
+  -webkit-padding-end: var(--ion-item-divider-note-padding-end);
+  padding-inline-end: var(--ion-item-divider-note-padding-end);
+  padding-top: var(--ion-item-divider-note-padding-top);
+  padding-bottom: var(--ion-item-divider-note-padding-bottom);
+}
+
+::slotted(ion-avatar) {
+  -webkit-margin-start: var(--ion-item-divider-avatar-margin-start);
+  margin-inline-start: var(--ion-item-divider-avatar-margin-start);
+  -webkit-margin-end: var(--ion-item-divider-avatar-margin-end);
+  margin-inline-end: var(--ion-item-divider-avatar-margin-end);
+  margin-top: var(--ion-item-divider-avatar-margin-top);
+  margin-bottom: var(--ion-item-divider-avatar-margin-bottom);
+  width: var(--ion-item-divider-avatar-width, revert-layer);
+  height: var(--ion-item-divider-avatar-height, revert-layer);
+}
+
+::slotted(ion-avatar[slot=start]) {
+  -webkit-margin-start: var(--ion-item-divider-avatar-start-slotted-margin-start);
+  margin-inline-start: var(--ion-item-divider-avatar-start-slotted-margin-start);
+  -webkit-margin-end: var(--ion-item-divider-avatar-start-slotted-margin-end);
+  margin-inline-end: var(--ion-item-divider-avatar-start-slotted-margin-end);
+}
+
+::slotted(ion-avatar[slot=end]) {
+  -webkit-margin-start: var(--ion-item-divider-avatar-end-slotted-margin-start);
+  margin-inline-start: var(--ion-item-divider-avatar-end-slotted-margin-start);
+  -webkit-margin-end: var(--ion-item-divider-avatar-end-slotted-margin-end);
+  margin-inline-end: var(--ion-item-divider-avatar-end-slotted-margin-end);
+}
+
+::slotted(ion-thumbnail) {
+  --size: var(--ion-item-divider-thumbnail-width);
+  -webkit-margin-start: var(--ion-item-divider-thumbnail-margin-start);
+  margin-inline-start: var(--ion-item-divider-thumbnail-margin-start);
+  -webkit-margin-end: var(--ion-item-divider-thumbnail-margin-end);
+  margin-inline-end: var(--ion-item-divider-thumbnail-margin-end);
+  margin-top: var(--ion-item-divider-thumbnail-margin-top);
+  margin-bottom: var(--ion-item-divider-thumbnail-margin-bottom);
+}
+
+::slotted(ion-thumbnail[slot=start]) {
+  -webkit-margin-start: var(--ion-item-divider-thumbnail-start-slotted-margin-start);
+  margin-inline-start: var(--ion-item-divider-thumbnail-start-slotted-margin-start);
+  -webkit-margin-end: var(--ion-item-divider-thumbnail-start-slotted-margin-end);
+  margin-inline-end: var(--ion-item-divider-thumbnail-start-slotted-margin-end);
+}
+
+::slotted(ion-thumbnail[slot=end]) {
+  -webkit-margin-start: var(--ion-item-divider-thumbnail-end-slotted-margin-start);
+  margin-inline-start: var(--ion-item-divider-thumbnail-end-slotted-margin-start);
+  -webkit-margin-end: var(--ion-item-divider-thumbnail-end-slotted-margin-end);
+  margin-inline-end: var(--ion-item-divider-thumbnail-end-slotted-margin-end);
+}
+
+::slotted(p) {
+  -webkit-margin-start: var(--ion-item-divider-paragraph-margin-start);
+  margin-inline-start: var(--ion-item-divider-paragraph-margin-start);
+  -webkit-margin-end: var(--ion-item-divider-paragraph-margin-end);
+  margin-inline-end: var(--ion-item-divider-paragraph-margin-end);
+  margin-top: var(--ion-item-divider-paragraph-margin-top);
+  margin-bottom: var(--ion-item-divider-paragraph-margin-bottom);
+  color: var(--ion-item-divider-paragraph-color);
+  font-size: var(--ion-item-divider-paragraph-font-size);
+  line-height: normal;
+  text-overflow: var(--ion-item-divider-paragraph-text-overflow);
+  overflow: var(--ion-item-divider-paragraph-overflow);
+}
+
+::slotted(p:last-child) {
+  -webkit-margin-start: var(--ion-item-divider-paragraph-trailing-margin-start);
+  margin-inline-start: var(--ion-item-divider-paragraph-trailing-margin-start);
+  -webkit-margin-end: var(--ion-item-divider-paragraph-trailing-margin-end);
+  margin-inline-end: var(--ion-item-divider-paragraph-trailing-margin-end);
+  margin-top: var(--ion-item-divider-paragraph-trailing-margin-top);
+  margin-bottom: var(--ion-item-divider-paragraph-trailing-margin-bottom, 0);
+}

package/dist/collection/components/item-divider/item-divider.js

@@ -3,10 +3,8 @@
  */
 import { Host, h } from "@stencil/core";
 import { createColorClasses } from "../../utils/theme";
-import { getIonTheme } from "../../global/ionic-global";
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  *
  * @slot - Content is placed between the named slots if provided without a slot.
  * @slot start - Content is placed to the left of the divider text in LTR, and to the right in RTL.
@@ -27,27 +25,22 @@ export class ItemDivider {
         this.sticky = false;
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: 'dc73f348b5376faa40ba4bc6bba3d5c9e5ec5ab2', class: createColorClasses(this.color, {
-                [theme]: true,
-                'item-divider-sticky': this.sticky,
+        const { color, sticky } = this;
+        return (h(Host, { key: '7994a96b76ca9d950c9d880538f03ad1bc07b7f7', class: createColorClasses(color, {
+                'item-divider-sticky': sticky,
                 item: true,
-            }) }, h("slot", { key: '0f535b2cf91f2ec042aa59a89498cfa0e4d541a0', name: "start" }), h("div", { key: '867c8c1a1bd273a5f5018f77785f11d58152e8b9', class: "item-divider-inner", part: "inner" }, h("div", { key: 'c32b2a5658d27cf5d8cd8ffbfa476c02755e1afd', class: "item-divider-wrapper", part: "container" }, h("slot", { key: 'f8b0fea29a910cd2e36301586532be3a8348c31e' })), h("slot", { key: '418750f630c851cf04b6a278c1666c6cf33c113c', name: "end" }))));
+            }) }, h("slot", { key: 'a7ed7f3f068bbb0ff307352bc57dc9385f87faf0', name: "start" }), h("div", { key: '925b608636476a261d6713fe2ab49e6fd1672ffb', class: "item-divider-inner", part: "inner" }, h("div", { key: 'd6a6a2ec63e9bef850e581db58099114c86f1eec', class: "item-divider-wrapper", part: "container" }, h("slot", { key: '09b0780db4fbb0803e2e8cf0df664616fb68ae4c' })), h("slot", { key: 'd12ec6563c4b400c1d201a73412925489f43f974', name: "end" }))));
     }
     static get is() { return "ion-item-divider"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "ios": ["item-divider.ios.scss"],
-            "md": ["item-divider.md.scss"],
-            "ionic": ["item-divider.md.scss"]
+            "$": ["item-divider.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "ios": ["item-divider.ios.css"],
-            "md": ["item-divider.md.css"],
-            "ionic": ["item-divider.md.css"]
+            "$": ["item-divider.css"]
         };
     }
     static get properties() {

package/dist/collection/components/item-group/item-group.js

@@ -10,7 +10,7 @@ import { getIonTheme } from "../../global/ionic-global";
 export class ItemGroup {
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '017c8f7cd0258e1864423337ddd1b1cb522f64ed', role: "group", class: {
+        return (h(Host, { key: '3fb0784b321736344604e259cfb05c6307159bed', role: "group", class: {
                 [theme]: true,
                 // Used internally for styling
                 [`item-group-${theme}`]: true,

package/dist/collection/components/item-option/item-option.ionic.css

@@ -252,9 +252,9 @@
 }
 
 :host(.item-option-subtle) {
-  --background: var(--ion-color-primary-subtle, var(--token-bg-primary-subtle-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #e9ecfc))));
-  --background-activated: var(--ion-color-primary-subtle-shade, var(--token-bg-primary-subtle-press, var(--token-semantics-primary-300, var(--token-primitives-blue-300, #d0d7fa))));
-  --color: var(--ion-color-primary-subtle-contrast, var(--token-text-primary, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3))));
+  --background: var(--ion-color-primary-subtle);
+  --background-activated: var(--ion-color-primary-subtle-shade);
+  --color: var(--ion-color-primary-subtle-contrast);
 }
 
 :host(.item-option-subtle.ion-color) {
@@ -263,9 +263,9 @@
 }
 
 :host(.item-option-bold) {
-  --background: var(--ion-color-primary, var(--token-bg-primary-base-default, var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))));
-  --background-activated: var(--ion-color-primary-shade, var(--token-bg-primary-base-press, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3))));
-  --color: var(--ion-color-primary-contrast, var(--token-text-inverse, var(--token-primitives-base-white, #ffffff)));
+  --background: var(--ion-color-primary, var(--ion-color-primary-bold));
+  --background-activated: var(--ion-color-primary-shade, var(--ion-color-primary-bold-shade));
+  --color: var(--ion-color-primary-contrast, var(--ion-color-primary-bold-contrast));
 }
 
 :host(.item-option-bold.ion-color) {
@@ -273,6 +273,6 @@
   color: var(--ion-color-contrast);
 }
 
-:host(.item-option-expand-threshold) {
-  filter: brightness(0.92);
+:host(.item-option-expandable) {
+  transition-timing-function: var(--token-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1));
 }

package/dist/collection/components/item-option/item-option.ios.css

@@ -215,8 +215,8 @@
 }
 
 :host {
-  --background: var(--ion-color-primary, #0054e9);
-  --color: var(--ion-color-primary-contrast, #fff);
+  --background: var(--ion-color-primary, var(--ion-color-primary-bold));
+  --color: var(--ion-color-primary-contrast, var(--ion-color-primary-bold-contrast));
   font-family: var(--ion-font-family, inherit);
 }
 
@@ -341,7 +341,7 @@
 }
 
 :host(.ion-activated) {
-  background: var(--ion-color-primary-shade, #004acd);
+  background: var(--ion-color-primary-shade, var(--ion-color-primary-bold-shade));
 }
 
 :host(.ion-color.ion-activated) {

package/dist/collection/components/item-option/item-option.js

@@ -71,14 +71,14 @@ export class ItemOption {
                 href: this.href,
                 target: this.target,
             };
-        return (h(Host, { key: '8f1bad23fd3ccbb9d54d57765e6731cd2ee07306', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '810fe351aa83d6e88cb0e2ebee307b3050e65b45', onClick: this.onClick, class: createColorClasses(this.color, {
                 [theme]: true,
                 [`item-option-${shape}`]: shape !== undefined,
                 [`item-option-${hue}`]: hue !== undefined,
                 'item-option-disabled': disabled,
                 'item-option-expandable': expandable,
                 'ion-activatable': true,
-            }) }, h(TagType, Object.assign({ key: '2baf904e356a87ed463ee5f517e0e95f90b2ef30' }, attrs, { class: "button-native", part: "native", disabled: disabled }), h("span", { key: '49b627f72dffd1b150ccd808b1b1f63bbe78e2de', class: "button-inner", part: "inner" }, h("slot", { key: 'cdb52f76f1d7e5df411215f17eb76ad25e36241a', name: "top" }), h("div", { key: '864204667c6e3ba6f989b24e96c131b67e55d408', class: "horizontal-wrapper", part: "container" }, h("slot", { key: '474f4aab708842bb7ef74cb6f1fbe601ceff82cf', name: "start" }), h("slot", { key: '2bd726c5ba3ee079a623f1f6229d1ac2afd3e291', name: "icon-only" }), h("slot", { key: '2d1a673c447ebf82c92f944ec9e83a5b38698307' }), h("slot", { key: '8d0f9337cd84c725190cffd25d74044075e85ab0', name: "end" })), h("slot", { key: 'a674039b26d9cbb886e88ea721bbc210484aba9f', name: "bottom" })), theme === 'md' && h("ion-ripple-effect", { key: '3e45bf18b7992943c47ece47e9358f4da0b8e865' }))));
+            }) }, h(TagType, Object.assign({ key: '6eb95c4f815e774d1b579a1fb2ddcad891966ca0' }, attrs, { class: "button-native", part: "native", disabled: disabled }), h("span", { key: '5630c1bd31910f46b0a08017a98f7935f17385bf', class: "button-inner", part: "inner" }, h("slot", { key: '081375e3b9683347008d08817ded21c61a374d93', name: "top" }), h("div", { key: '99d7dff311268ab4677397ab5a29b068f1cdf79b', class: "horizontal-wrapper", part: "container" }, h("slot", { key: 'b88858db83d847e3d49a84b75eb277500cb66fb3', name: "start" }), h("slot", { key: '8ca5149591a5e3285eff5078e1eb03554fb0713b', name: "icon-only" }), h("slot", { key: 'a8229a5e11bf41926745ab71f6dcd2d2ca63806c' }), h("slot", { key: '9a497c0cb92fe14ad6b9063fa0946fcd75fb8c08', name: "end" })), h("slot", { key: 'cae262fd2b7fad9e4bc9c02541fa17a6480ecf7f', name: "bottom" })), theme === 'md' && h("ion-ripple-effect", { key: '7114b927480e6a9261c7568e036ecf38ec1680ab' }))));
     }
     static get is() { return "ion-item-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/item-option/item-option.md.css

@@ -215,8 +215,8 @@
 }
 
 :host {
-  --background: var(--ion-color-primary, #0054e9);
-  --color: var(--ion-color-primary-contrast, #fff);
+  --background: var(--ion-color-primary, var(--ion-color-primary-bold));
+  --color: var(--ion-color-primary-contrast, var(--ion-color-primary-bold-contrast));
   font-family: var(--ion-font-family, inherit);
 }
 

package/dist/collection/components/item-options/item-options.ios.css

@@ -314,7 +314,7 @@ ion-item-options {
 .item-options-ios {
   border-bottom-width: 0;
   border-bottom-style: solid;
-  border-bottom-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));
+  border-bottom-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-background-color-step-250, #c8c7cc)));
 }
 .item-options-ios.item-options-end {
   border-bottom-width: 0.55px;

package/dist/collection/components/item-options/item-options.js

@@ -25,7 +25,7 @@ export class ItemOptions {
     render() {
         const theme = getIonTheme(this);
         const isEnd = isEndSide(this.side);
-        return (h(Host, { key: 'ed05ceebf2cda943ac9efea2f91b71f7e8fc55e8', class: {
+        return (h(Host, { key: 'cc55282505679d51fb90ebf30869e930c71afbd4', class: {
                 [theme]: true,
                 // Used internally for styling
                 [`item-options-${theme}`]: true,

package/dist/collection/components/item-options/item-options.md.css

@@ -314,7 +314,7 @@ ion-item-options {
 .item-options-md {
   border-bottom-width: 0;
   border-bottom-style: solid;
-  border-bottom-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));
+  border-bottom-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13))));
 }
 
 .list-md-lines-none .item-options-md {

package/dist/collection/components/item-sliding/{item-sliding.native.css → item-sliding.css}

@@ -71,6 +71,15 @@ ion-item-sliding .item {
   user-select: none;
 }
 
+.item-sliding-active-slide .item {
+  position: relative;
+  transition: transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);
+  opacity: 1;
+  z-index: 2;
+  pointer-events: none;
+  will-change: transform;
+}
+
 .item-sliding-closing ion-item-options {
   pointer-events: none;
 }
@@ -115,82 +124,4 @@ ion-item-sliding .item {
   .item-sliding-active-swipe-start .item-options-start .item-option-expandable:dir(rtl) {
     order: 1;
   }
-}
-
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
-/**
- * Convert a font size to a dynamic font size.
- * Fonts that participate in Dynamic Type should use
- * dynamic font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param unit (optional) - The unit to convert to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a maximum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a minimum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * maximum and minimum font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * A heuristic that applies CSS to tablet
- * viewports.
- *
- * Usage:
- * @include tablet-viewport() {
- *   :host {
- *     background-color: green;
- *   }
- * }
- */
-/**
- * A heuristic that applies CSS to mobile
- * viewports (i.e. phones, not tablets).
- *
- * Usage:
- * @include mobile-viewport() {
- *   :host {
- *     background-color: blue;
- *   }
- * }
- */
-.item-sliding-active-slide .item {
-  position: relative;
-  transition: transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);
-  opacity: 1;
-  z-index: 2;
-  pointer-events: none;
-  will-change: transform;
-}
-
-.item-sliding-active-slide.item-sliding-full-swipe-transition .item {
-  transition: transform 250ms ease-out;
-}
-
-.item-sliding-active-slide.item-sliding-dragging .item {
-  transition: none;
 }