@ionic/core 8.8.0 → 8.8.1-dev.11772789669.186f42ce

package/dist/collection/components/radio-group/radio-group.md.css

@@ -1,3 +1,9 @@
+/**
+ * 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
@@ -53,6 +59,36 @@
  *   }
  * }
  */
+:host {
+  display: block;
+}
+
+/**
+ * Error text should only be shown when .ion-invalid is present
+ * on the radio group. Otherwise the helper text should be shown.
+ */
+.radio-group-top .error-text {
+  display: none;
+}
+
+.radio-group-top .helper-text {
+  display: block;
+}
+
+:host(.ion-touched.ion-invalid) .radio-group-top .error-text {
+  display: block;
+}
+
+:host(.ion-touched.ion-invalid) .radio-group-top .helper-text {
+  display: none;
+}
+
+/**
+ * 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
@@ -108,36 +144,24 @@
  *   }
  * }
  */
-ion-radio-group {
-  vertical-align: top;
-}
-
 .radio-group-top {
   line-height: 1.5;
 }
 
-/**
- * Error text should only be shown when .ion-invalid is present
- * on the radio group. Otherwise the helper text should be shown.
- */
 .radio-group-top .error-text {
-  display: none;
   color: var(--ion-color-danger, #c5000f);
 }
 
 .radio-group-top .helper-text {
-  display: block;
   color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
 }
 
-.ion-touched.ion-invalid .radio-group-top .error-text {
-  display: block;
-}
-
-.ion-touched.ion-invalid .radio-group-top .helper-text {
-  display: none;
-}
-
+/**
+ * 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
@@ -193,7 +217,7 @@ ion-radio-group {
  *   }
  * }
  */
-ion-list .radio-group-top {
+:host(.in-list) .radio-group-top {
   -webkit-padding-start: 16px;
   padding-inline-start: 16px;
   -webkit-padding-end: 16px;

package/dist/collection/components/range/range.ionic.css

@@ -0,0 +1,563 @@
+/**
+ * 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;
+ *   }
+ * }
+ */
+/**
+ * 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;
+ *   }
+ * }
+ */
+:host {
+  /**
+   * @prop --bar-background: Background of the range bar
+   * @prop --bar-background-active: Background of the active range bar
+   * @prop --bar-height: Height of the range bar
+   * @prop --bar-border-radius: Border radius of the range bar
+   * @prop --height: Height of the range
+   * @prop --knob-background: Background of the range knob
+   * @prop --knob-border-radius: Border radius of the range knob
+   * @prop --knob-box-shadow: Box shadow of the range knob
+   * @prop --knob-size: Size of the range knob
+   * @prop --pin-background: Background of the range pin (only available in MD mode)
+   * @prop --pin-color: Color of the range pin (only available in MD mode)
+   */
+  display: flex;
+  position: relative;
+  flex: 3;
+  align-items: center;
+  user-select: none;
+}
+
+:host(.range-disabled) {
+  pointer-events: none;
+}
+
+::slotted(ion-label) {
+  flex: initial;
+}
+
+.range-slider {
+  position: relative;
+  flex: 1;
+  width: 100%;
+  height: var(--height);
+  contain: size layout style;
+  cursor: grab;
+  touch-action: pan-y;
+}
+
+:host(.range-pressed) .range-slider {
+  cursor: grabbing;
+}
+
+.range-pin {
+  position: absolute;
+  background: current-color(base);
+  color: current-color(contrast);
+  text-align: center;
+  box-sizing: border-box;
+}
+
+.range-knob-handle {
+  top: calc((var(--height) - var(--knob-handle-size)) / 2);
+  -webkit-margin-start: calc(0px - var(--knob-handle-size) / 2);
+  margin-inline-start: calc(0px - var(--knob-handle-size) / 2);
+  display: flex;
+  position: absolute;
+  justify-content: center;
+  width: var(--knob-handle-size);
+  height: var(--knob-handle-size);
+  text-align: center;
+}
+.range-knob-handle {
+  inset-inline-start: 0;
+}
+
+:host-context([dir=rtl]) .range-knob-handle {
+  /* stylelint-disable-next-line property-disallowed-list */
+  left: unset;
+}
+
+[dir=rtl] .range-knob-handle {
+  /* stylelint-disable-next-line property-disallowed-list */
+  left: unset;
+}
+
+@supports selector(:dir(rtl)) {
+  .range-knob-handle:dir(rtl) {
+    /* stylelint-disable-next-line property-disallowed-list */
+    left: unset;
+  }
+}
+.range-knob-handle:active, .range-knob-handle:focus {
+  outline: none;
+}
+
+.range-bar-container {
+  border-radius: var(--bar-border-radius);
+  top: calc((var(--height) - var(--bar-height)) / 2);
+  position: absolute;
+  width: 100%;
+  height: var(--bar-height);
+}
+.range-bar-container {
+  inset-inline-start: 0;
+}
+
+:host-context([dir=rtl]) .range-bar-container {
+  /* stylelint-disable-next-line property-disallowed-list */
+  left: unset;
+}
+
+[dir=rtl] .range-bar-container {
+  /* stylelint-disable-next-line property-disallowed-list */
+  left: unset;
+}
+
+@supports selector(:dir(rtl)) {
+  .range-bar-container:dir(rtl) {
+    /* stylelint-disable-next-line property-disallowed-list */
+    left: unset;
+  }
+}
+
+.range-bar {
+  border-radius: var(--bar-border-radius);
+  position: absolute;
+  width: 100%;
+  height: var(--bar-height);
+  background: var(--bar-background);
+  pointer-events: none;
+}
+
+.range-knob {
+  border-radius: var(--knob-border-radius);
+  top: calc(50% - var(--knob-size) / 2);
+  position: absolute;
+  width: var(--knob-size);
+  height: var(--knob-size);
+  background: var(--knob-background);
+  box-shadow: var(--knob-box-shadow);
+  z-index: 2;
+  pointer-events: none;
+}
+.range-knob {
+  inset-inline-start: calc(50% - var(--knob-size) / 2);
+}
+
+:host-context([dir=rtl]) .range-knob {
+  /* stylelint-disable-next-line property-disallowed-list */
+  left: unset;
+}
+
+[dir=rtl] .range-knob {
+  /* stylelint-disable-next-line property-disallowed-list */
+  left: unset;
+}
+
+@supports selector(:dir(rtl)) {
+  .range-knob:dir(rtl) {
+    /* stylelint-disable-next-line property-disallowed-list */
+    left: unset;
+  }
+}
+
+:host(.range-pressed) .range-bar-active {
+  will-change: left, right;
+}
+
+:host(.in-item) {
+  width: 100%;
+}
+
+/**
+ * Range can be slotted
+ * in components such as item and
+ * toolbar which is why we do not
+ * limit the below behavior to just ion-item.
+ */
+:host([slot=start]),
+:host([slot=end]) {
+  width: auto;
+}
+
+:host(.in-item) ::slotted(ion-label) {
+  align-self: center;
+}
+
+.range-wrapper {
+  display: flex;
+  position: relative;
+  flex-grow: 1;
+  align-items: center;
+  height: inherit;
+}
+
+::slotted([slot=label]) {
+  /**
+   * Label text should not extend
+   * beyond the bounds of the range.
+   * However, we do not set the max
+   * width to 100% because then
+   * only the label would show and users
+   * would not be able to see the range.
+   */
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+/**
+ * If no label text is placed into the slot
+ * then the element should be hidden otherwise
+ * there will be additional margins added.
+ */
+.label-text-wrapper-hidden {
+  display: none;
+}
+
+.native-wrapper {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+}
+
+/**
+ * Label is on the left of the range in LTR and
+ * on the right in RTL.
+ */
+:host(.range-label-placement-start) .range-wrapper {
+  flex-direction: row;
+}
+
+/**
+ * Label is on the right of the range in LTR and
+ * on the left in RTL.
+ */
+:host(.range-label-placement-end) .range-wrapper {
+  flex-direction: row-reverse;
+}
+
+/**
+ * Label is on the left of the range in LTR and
+ * on the right in RTL. Label also has a fixed width.
+ */
+:host(.range-label-placement-fixed) .label-text-wrapper {
+  flex: 0 0 100px;
+  width: 100px;
+  min-width: 100px;
+  max-width: 200px;
+}
+
+/**
+ * Label is on top of the range.
+ */
+:host(.range-label-placement-stacked) .range-wrapper {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+:host(.range-label-placement-stacked) .label-text-wrapper {
+  transform-origin: left top;
+}
+:host-context([dir=rtl]):host(.range-label-placement-stacked) .label-text-wrapper, :host-context([dir=rtl]).range-label-placement-stacked .label-text-wrapper {
+  transform-origin: right top;
+}
+
+@supports selector(:dir(rtl)) {
+  :host(.range-label-placement-stacked:dir(rtl)) .label-text-wrapper {
+    transform-origin: right top;
+  }
+}
+
+:host {
+  --knob-border-radius: var(--token-border-radius-full, 999px);
+  --knob-background: var(--token-bg-input-default, var(--token-primitives-base-white, #ffffff));
+  --knob-box-shadow: none;
+  --knob-size: var(--token-scale-600, 24px);
+  --knob-handle-size: var(--token-scale-1100, 44px);
+  --bar-height: var(--token-scale-200, 8px);
+  --bar-background: var(--token-bg-neutral-subtle-default, var(--token-primitives-neutral-200, #eae9e9));
+  --bar-background-active: 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)))));
+  --bar-border-radius: var(--token-border-radius-400, var(--token-scale-400, 16px));
+  --height: var(--token-scale-1100, 44px);
+  font-size: var(--token-font-size-350, 14px);
+  font-weight: var(--token-font-weight-regular, 400);
+  letter-spacing: var(--token-font-letter-spacing-0, 0%);
+  line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
+  text-decoration: none;
+  text-transform: none;
+  z-index: var(--token-z-index-100, 100);
+}
+
+:host(.range-item-start-adjustment) {
+  -webkit-padding-start: var(--token-space-600, var(--token-scale-600, 24px));
+  padding-inline-start: var(--token-space-600, var(--token-scale-600, 24px));
+}
+
+:host(.range-item-end-adjustment) {
+  -webkit-padding-end: var(--token-space-600, var(--token-scale-600, 24px));
+  padding-inline-end: var(--token-space-600, var(--token-scale-600, 24px));
+}
+
+:host(.ion-color) .range-bar-active,
+:host(.ion-color) .range-tick-active {
+  background: var(--ion-color-base);
+}
+
+::slotted(ion-icon[slot]) {
+  font-size: var(--token-font-size-600, 24px);
+}
+
+::slotted([slot=start]) {
+  -webkit-margin-start: 0;
+  margin-inline-start: 0;
+  -webkit-margin-end: var(--token-space-400, var(--token-scale-400, 16px));
+  margin-inline-end: var(--token-space-400, var(--token-scale-400, 16px));
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+::slotted([slot=end]) {
+  -webkit-margin-start: var(--token-space-400, var(--token-scale-400, 16px));
+  margin-inline-start: var(--token-space-400, var(--token-scale-400, 16px));
+  -webkit-margin-end: 0;
+  margin-inline-end: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+::slotted([slot=label]) {
+  max-width: var(--token-scale-5000, 200px);
+}
+
+:host(.range-has-pin:not(.range-label-placement-stacked)) {
+  /**
+  * The pin should not overlap any elements that are
+  * above the range. By adding padding to the top of the
+  * range, it provides a buffer for the pin to move into
+  * when it is pressed.
+  *
+  * The padding is not included when the label is stacked
+  * because the pin is below the label.
+  * It still requires a buffer to prevent the pin from
+  * overlapping the range. The buffer is added to the
+  * bottom of the range label instead of the host.
+  */
+  padding-top: calc(var(--token-space-100, var(--token-scale-100, 4px)) + var(--token-scale-600, 24px));
+}
+
+:host(.range-has-pin.range-label-placement-stacked) .label-text-wrapper {
+  /**
+  * The pin should not overlap the stacked label. By adding
+  * margin to the bottom of the label, it provides a buffer
+  * for the pin to move into when it is pressed.
+  */
+  margin-bottom: calc(var(--token-space-200, var(--token-scale-200, 8px)) + var(--token-font-size-300, 12px));
+}
+
+.range-bar.range-bar-active {
+  bottom: 0;
+  width: auto;
+  background: var(--bar-background-active);
+}
+.range-bar.range-bar-active.has-ticks {
+  border-radius: 0;
+  -webkit-margin-start: calc(-1 * var(--token-scale-100, 4px) * 0.5);
+  margin-inline-start: calc(-1 * var(--token-scale-100, 4px) * 0.5);
+  -webkit-margin-end: calc(-1 * var(--token-scale-100, 4px) * 0.5);
+  margin-inline-end: calc(-1 * var(--token-scale-100, 4px) * 0.5);
+}
+
+.range-tick {
+  -webkit-margin-start: calc(var(--token-scale-100, 4px) * -0.5);
+  margin-inline-start: calc(var(--token-scale-100, 4px) * -0.5);
+  border-radius: var(--token-border-radius-0, var(--token-scale-0, 0px));
+  position: absolute;
+  top: calc(var(--height) * 0.5 - var(--token-scale-300, 12px) * 0.5);
+  width: var(--token-scale-100, 4px);
+  height: var(--token-scale-300, 12px);
+  background: var(--token-primitives-neutral-100, #f3f3f3);
+  pointer-events: none;
+}
+
+.range-tick-active {
+  background: var(--bar-background-active);
+}
+
+.range-pin {
+  padding-bottom: var(--token-space-100, var(--token-scale-100, 4px));
+  min-width: var(--token-scale-700, 28px);
+  transform: translate3d(0, -100%, 0);
+  background: transparent;
+  color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
+  font-size: var(--token-font-size-300, 12px);
+  text-align: center;
+}
+
+.range-knob {
+  border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
+  border-style: var(--token-border-style-solid, solid);
+  border-color: var(--token-border-primary, var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef))));
+  box-sizing: border-box;
+}
+
+:host(.range-disabled) {
+  --bar-background: var(--token-bg-neutral-subtle-default, var(--token-primitives-neutral-200, #eae9e9));
+}
+:host(.range-disabled) .range-knob {
+  border-color: var(--token-border-input-default, var(--token-primitives-neutral-600, #8c8c8c));
+  background: var(--token-bg-input-disabled, var(--token-primitives-neutral-100, #f3f3f3));
+}
+
+:host(.range-label-placement-start) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the range should be on the end
+   * when the label sits at the start.
+   */
+  -webkit-margin-start: 0;
+  margin-inline-start: 0;
+  -webkit-margin-end: var(--token-space-400, var(--token-scale-400, 16px));
+  margin-inline-end: var(--token-space-400, var(--token-scale-400, 16px));
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+:host(.range-label-placement-end) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the range should be on the start
+   * when the label sits at the end.
+   */
+  -webkit-margin-start: var(--token-space-400, var(--token-scale-400, 16px));
+  margin-inline-start: var(--token-space-400, var(--token-scale-400, 16px));
+  -webkit-margin-end: 0;
+  margin-inline-end: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+:host(.range-label-placement-fixed) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the range should be on the end
+   * when the label sits at the start.
+   */
+  -webkit-margin-start: 0;
+  margin-inline-start: 0;
+  -webkit-margin-end: var(--token-space-400, var(--token-scale-400, 16px));
+  margin-inline-end: var(--token-space-400, var(--token-scale-400, 16px));
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+:host(.range-label-placement-stacked) .label-text-wrapper {
+  transform: scale(0.75);
+  /**
+  * The margin between the label and
+  * the range should be on the bottom
+  * when the label sits on top.
+  */
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: var(--token-space-400, var(--token-scale-400, 16px));
+  /**
+   * Label text should not extend
+   * beyond the bounds of the range.
+   */
+  max-width: 133.3333333333%;
+}
+
+:host(.in-item.range-label-placement-stacked) .label-text-wrapper {
+  margin-top: var(--token-space-250, var(--token-scale-250, 10px));
+  margin-bottom: var(--token-space-400, var(--token-scale-400, 16px));
+}
+
+:host(.in-item.range-label-placement-stacked) .native-wrapper {
+  margin-bottom: var(--token-space-0, var(--token-scale-0, 0px));
+}
+
+.range-knob-handle.ion-focused .range-knob {
+  outline-offset: var(--token-border-size-050, var(--token-scale-050, 2px));
+  outline: var(--token-border-size-050, var(--token-scale-050, 2px)) var(--token-border-style-solid, solid) var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
+}
+
+.range-knob-handle.ion-activated .range-knob,
+.range-knob-handle.range-knob-pressed .range-knob {
+  background: var(--token-bg-input-press, var(--token-primitives-neutral-200, #eae9e9));
+}