voyager-ionic-core 8.0.0-rc.0 → 8.0.0

package/css/utils.bundle.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/themes/ionic.functions.font.scss","../src/themes/ionic.mixins.scss","../src/css/padding.scss","../src/css/float-elements.scss","../src/css/text-alignment.scss","../src/css/text-transformation.scss","../src/css/flex-utils.scss","../src/css/display.scss"],"names":[],"mappings":"AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AC9CA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAjBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACHA;EACE;EACA;EACA;EACA;EDsTE,cCpTe;EDqTf,eCrTe;EDyUjB,aCzUiB;ED0UjB,gBC1UiB;;;AAGnB;EACE;EACA;EACA;EACA;EDiTE,uBCpUM;EDqUN,sBCrUM;EDsUN,qBCtUM;EDuUN,oBCvUM;EDqVR,aCrVQ;EDsVR,gBCtVQ;;;AAwBV;EACE;ED4TA,aCrVQ;;;AA8BV;EACE;EDqSE,uBCpUM;EDqUN,sBCrUM;;;AAoCV;EACE;EDiSE,qBCtUM;EDuUN,oBCvUM;;;AA0CV;EACE;ED2SA,gBCtVQ;;;AAgDV;EACE;EACA;EDmSA,aCrVQ;EDsVR,gBCtVQ;;;AAuDV;EACE;EACA;ED2QE,uBCpUM;EDqUN,sBCrUM;EDsUN,qBCtUM;EDuUN,oBCvUM;;;AAkEV;EACE;EACA;EACA;EACA;ED0PE,aCxPc;EDyPd,cCzPc;ED6QhB,YC7QgB;ED8QhB,eC9QgB;;;AAGlB;EACE;EACA;EACA;EACA;EDqPE,sBCnUK;EDoUL,qBCpUK;EDqUL,oBCrUK;EDsUL,mBCtUK;EDoVP,YCpVO;EDqVP,eCrVO;;;AAmFT;EACE;EDgQA,YCpVO;;;AAyFT;EACE;EDyOE,sBCnUK;EDoUL,qBCpUK;;;AA+FT;EACE;EDqOE,oBCrUK;EDsUL,mBCtUK;;;AAqGT;EACE;ED+OA,eCrVO;;;AA2GT;EACE;EACA;EDuOA,YCpVO;EDqVP,eCrVO;;;AAkHT;EACE;EACA;ED+ME,sBCnUK;EDoUL,qBCpUK;EDqUL,oBCrUK;EDsUL,mBCtUK;;;AFLT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AC9CA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAjBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AELI;EF2dE;;;AEvdF;EFudE;;;AEndF;EFqcE;;AAzNO;EA4NP;;;AArNO;EAqNP;;;AA/MJ;EAcW;IAiMP;;;;AEpcF;EFwcE;;AAhOO;EAmOP;;;AA5NO;EA4NP;;;AAtNJ;EAcW;IAwMP;;;;AAnUF;EEpJA;IF2dE;;;EEvdF;IFudE;;;EEndF;IFqcE;;EAzNO;IA4NP;;;EArNO;IAqNP;;;EA/MJ;IAcW;MAiMP;;;;EEpcF;IFwcE;;EAhOO;IAmOP;;;EA5NO;IA4NP;;;EAtNJ;IAcW;MAwMP;;;;AAnUF;EEpJA;IF2dE;;;EEvdF;IFudE;;;EEndF;IFqcE;;EAzNO;IA4NP;;;EArNO;IAqNP;;;EA/MJ;IAcW;MAiMP;;;;EEpcF;IFwcE;;EAhOO;IAmOP;;;EA5NO;IA4NP;;;EAtNJ;IAcW;MAwMP;;;;AAnUF;EEpJA;IF2dE;;;EEvdF;IFudE;;;EEndF;IFqcE;;EAzNO;IA4NP;;;EArNO;IAqNP;;;EA/MJ;IAcW;MAiMP;;;;EEpcF;IFwcE;;EAhOO;IAmOP;;;EA5NO;IA4NP;;;EAtNJ;IAcW;MAwMP;;;;AAnUF;EEpJA;IF2dE;;;EEvdF;IFudE;;;EEndF;IFqcE;;EAzNO;IA4NP;;;EArNO;IAqNP;;;EA/MJ;IAcW;MAiMP;;;;EEpcF;IFwcE;;EAhOO;IAmOP;;;EA5NO;IA4NP;;;EAtNJ;IAcW;MAwMP;;;;AD/dN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AC9CA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAjBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AGLI;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AHuHF;EGpJA;IACE;;;EAGF;IACE;;;EAGF;IACE;;;EAGF;IACE;;;EAGF;IACE;;;EAGF;IACE;;;EAGF;IACE;;;EAGF;IACE;;;AHuHF;EGpJA;IACE;;;EAGF;IACE;;;EAGF;IACE;;;EAGF;IACE;;;EAGF;IACE;;;EAGF;IACE;;;EAGF;IACE;;;EAGF;IACE;;;AHuHF;EGpJA;IACE;;;EAGF;IACE;;;EAGF;IACE;;;EAGF;IACE;;;EAGF;IACE;;;EAGF;IACE;;;EAGF;IACE;;;EAGF;IACE;;;AHuHF;EGpJA;IACE;;;EAGF;IACE;;;EAGF;IACE;;;EAGF;IACE;;;EAGF;IACE;;;EAGF;IACE;;;EAGF;IACE;;;EAGF;IACE;;;AJrCN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AC9CA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAjBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AILI;AACE;EACA;;;AAGF;AACE;EACA;;;AAGF;AACE;EACA;;;AJwIF;EIpJA;AACE;IACA;;;EAGF;AACE;IACA;;;EAGF;AACE;IACA;;;AJwIF;EIpJA;AACE;IACA;;;EAGF;AACE;IACA;;;EAGF;AACE;IACA;;;AJwIF;EIpJA;AACE;IACA;;;EAGF;AACE;IACA;;;EAGF;AACE;IACA;;;AJwIF;EIpJA;AACE;IACA;;;EAGF;AACE;IACA;;;EAGF;AACE;IACA;;;ACjBN;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAOF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAOF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAOF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AN5FF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AC9CA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAjBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AMXA;EACE;;;AAUE;EACE;;;AAOF;EACE;;;ANsIF;EM/IA;IACE;;;ANuLF;EMhLA;IACE;;;ANsIF;EM/IA;IACE;;;ANuLF;EMhLA;IACE;;;ANsIF;EM/IA;IACE;;;ANuLF;EMhLA;IACE;;;ANsIF;EM/IA;IACE;;;ANuLF;EMhLA;IACE","file":"utils.bundle.css","sourcesContent":["@use \"sass:math\";\n\n$baselineSize: 16px !default;\n$baselineUnit: 1rem !default;\n\n/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n@function dynamic-font($size, $unit: $baselineUnit) {\n  @return (math.div($size, $baselineSize)) * $unit;\n}\n\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n@function dynamic-font-max($size, $maxScale, $unit: $baselineUnit) {\n  $baseScale: dynamic-font($size, $unit);\n  $maxScale: $size * $maxScale;\n\n  @return min($baseScale, $maxScale);\n}\n\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n@function dynamic-font-min($minScale, $size, $unit: $baselineUnit) {\n  $baseScale: dynamic-font($size, $unit);\n  $minScale: $size * $minScale;\n\n  @return max($minScale, $baseScale);\n}\n\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n@function dynamic-font-clamp($minScale, $baseSize, $maxScale, $unit: $baselineUnit) {\n  $baseScale: dynamic-font($baseSize, $unit);\n  $maxScale: $baseSize * $maxScale;\n  $minScale: $baseSize * $minScale;\n\n  @return clamp($minScale, $baseScale, $maxScale);\n}\n","\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n@mixin tablet-viewport() {\n  @media screen and (min-width: 768px) {\n    @content;\n  }\n}\n\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n@mixin mobile-viewport() {\n  @media screen and (max-width: 767px) {\n    @content;\n  }\n}\n\n@mixin input-cover() {\n  @include position(0, null, null, 0);\n  @include margin(0);\n\n  position: absolute;\n\n  width: 100%;\n  height: 100%;\n\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n\n  appearance: none;\n  outline: none;\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n}\n\n@mixin visually-hidden() {\n  position: absolute;\n\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n\n  width: 100%;\n  height: 100%;\n\n  margin: 0;\n  padding: 0;\n\n  border: 0;\n  outline: 0;\n  clip: rect(0 0 0 0);\n\n  opacity: 0;\n  overflow: hidden;\n\n  -webkit-appearance: none;\n  -moz-appearance: none;\n}\n\n@mixin text-inherit() {\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n}\n\n@mixin button-state() {\n  @include position(0, 0, 0, 0);\n\n  position: absolute;\n\n  content: \"\";\n\n  opacity: 0;\n}\n\n// Font smoothing\n// --------------------------------------------------\n\n@mixin font-smoothing() {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n}\n\n// Get the key from a map based on the index\n@function index-to-key($map, $index) {\n  $keys: map-keys($map);\n\n  @return nth($keys, $index);\n}\n\n\n// Breakpoint Mixins\n// ---------------------------------------------------------------------------------\n\n// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$screen-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// ---------------------------------------------------------------------------------\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    576px\n@function breakpoint-min($name, $breakpoints: $screen-breakpoints) {\n  $min: map-get($breakpoints, $name);\n\n  @return if($name != index-to-key($breakpoints, 1), $min, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.\n// Useful for making responsive utilities.\n//\n//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    \"\"  (Returns a blank string)\n//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $screen-breakpoints) {\n  @return if(breakpoint-min($name, $breakpoints) == null, \"\", \"-#{$name}\");\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $screen-breakpoints) {\n  $min: breakpoint-min($name, $breakpoints);\n  @if $min {\n    @media (min-width: $min) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n//    >> breakpoint-next(sm)\n//    md\n//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    md\n//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n//    md\n@function breakpoint-next($name, $breakpoints: $screen-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n  $n: index($breakpoint-names, $name);\n  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n}\n\n// Maximum breakpoint width. Null for the smallest (first) breakpoint.\n// The maximum value is reduced by 0.02px to work around the limitations of\n// `min-` and `max-` prefixes and viewports with fractional widths.\n//\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\t// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\t// See https://bugs.webkit.org/show_bug.cgi?id=178261\n//\n//    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    767.98px\n@function breakpoint-max($name, $breakpoints: $screen-breakpoints) {\n  $max: map-get($breakpoints, $name);\n  @return if($max and $max > 0, $max - .02, null);\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $screen-breakpoints) {\n  $max: breakpoint-max($name, $breakpoints);\n  @if $max {\n    @media (max-width: $max) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n\n// Text Direction - ltr / rtl\n//\n// CSS defaults to use the ltr css, and adds [dir=rtl] selectors\n// to override ltr defaults.\n// ----------------------------------------------------------\n\n@mixin multi-dir() {\n  @content;\n\n  // $root: #{&};\n  // @at-root [dir] {\n  //   #{$root} {\n  //     @content;\n  //   }\n  // }\n}\n\n@mixin rtl() {\n  $root: #{&};\n\n  $rootSplit: str-split($root, \",\");\n  $selectors: #{add-root-selector($root, \"[dir=rtl]\")};\n  $selectorsSplit: str-split($selectors, \",\");\n\n  $hostContextSelectors: ();\n  $restSelectors: ();\n  $dirSelectors: ();\n\n  // Selectors must be split into individual selectors in case the browser\n  // doesn't support a specific selector.\n  // For example, Firefox and Safari doesn't support `:host-context()`.\n  // If an invalid selector is used, then the entire group of selectors\n  // will be ignored.\n  // @link https://www.w3.org/TR/selectors-3/#grouping\n  @each $selector in $selectorsSplit {\n    // Group the selectors back into a single selector to optimize the output.\n    @if str-index($selector, \":host-context\") {\n      $hostContextSelectors: append($hostContextSelectors, $selector, comma);\n    } @else {\n      // Group the selectors back into a single selector to optimize the output.\n      $restSelectors: append($restSelectors, $selector, comma);\n    }\n  }\n\n  // Supported by Chrome.\n  @if length($hostContextSelectors) > 0 {\n    @at-root #{$hostContextSelectors} {\n      @content;\n    }\n  }\n\n  // Supported by all browsers.\n  @if length($restSelectors) > 0 {\n    @at-root #{$restSelectors} {\n      @content;\n    }\n  }\n\n  // If browser can support `:dir()`, then add the `:dir()` selectors.\n  @supports selector(:dir(rtl)) {\n    // Adding :dir() in case the browser doesn't support `:host-context()` and does support `:dir()`.\n    // `:host-context()` is added:\n    // - through the `add-root-selector()` function.\n    // - first so that it takes precedence over `:dir()`.\n    // For example,\n    // - Firefox doesn't support `:host-context()`, but does support `:dir()`.\n    // - Safari doesn't support `:host-context()`, but Safari 16.4+ supports `:dir()`\n    // @link https://webkit.org/blog/13966/webkit-features-in-safari-16-4/\n    // -- However, there is a Webkit bug on v16 that prevents `:dir()` from working when\n    // -- the app direction is changed dynamically. v17+ works fine.\n    // -- @link https://bugs.webkit.org/show_bug.cgi?id=257133\n\n    // Supported by Firefox.\n    @at-root #{add-root-selector($root, \":dir(rtl)\", false)} {\n      @content;\n    }\n  }\n}\n\n@mixin ltr() {\n  @content;\n}\n\n\n// SVG Background Image Mixin\n// @param {string} $svg\n// ----------------------------------------------------------\n@mixin svg-background-image($svg, $flip-rtl: false) {\n  $url: url-encode($svg);\n  $viewBox: str-split(str-extract($svg, \"viewBox='\", \"'\"), \" \");\n\n  @if $flip-rtl != true or $viewBox == null {\n    @include multi-dir() {\n      background-image: url(\"data:image/svg+xml;charset=utf-8,#{$url}\");\n    }\n  } @else {\n    $transform: \"transform='translate(#{nth($viewBox, 3)}, 0) scale(-1, 1)'\";\n    $flipped-url: $svg;\n    $flipped-url: str-replace($flipped-url, \"<path\", \"<path #{$transform}\");\n    $flipped-url: str-replace($flipped-url, \"<line\", \"<line #{$transform}\");\n    $flipped-url: str-replace($flipped-url, \"<polygon\", \"<polygon #{$transform}\");\n    $flipped-url: url-encode($flipped-url);\n\n    @include ltr () {\n      background-image: url(\"data:image/svg+xml;charset=utf-8,#{$url}\");\n    }\n    @include rtl() {\n      background-image: url(\"data:image/svg+xml;charset=utf-8,#{$flipped-url}\");\n    }\n  }\n}\n\n// Add property horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin property-horizontal($prop, $start, $end: $start) {\n  @if $start == 0 and $end == 0 {\n    #{$prop}-left: $start;\n    #{$prop}-right: $end;\n\n  } @else {\n    -webkit-#{$prop}-start: $start;\n    #{$prop}-inline-start: $start;\n    -webkit-#{$prop}-end: $end;\n    #{$prop}-inline-end: $end;\n  }\n}\n\n// Add property for all directions\n// @param {string} $prop\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// @param {boolean} $content include content or use default\n// ----------------------------------------------------------\n@mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end) {\n  @include property-horizontal($prop, $start, $end);\n  #{$prop}-top: $top;\n  #{$prop}-bottom: $bottom;\n}\n\n// Add padding horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin padding-horizontal($start, $end: $start) {\n  @include property-horizontal(padding, $start, $end);\n}\n\n// Add padding for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin padding($top, $end: $top, $bottom: $top, $start: $end) {\n  @include property(padding, $top, $end, $bottom, $start);\n}\n\n// Add margin horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin margin-horizontal($start, $end: $start) {\n  @include property-horizontal(margin, $start, $end);\n}\n\n// Add margin for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin margin($top, $end: $top, $bottom: $top, $start: $end) {\n  @include property(margin, $top, $end, $bottom, $start);\n}\n\n// Add position horizontal\n// @param {string} $start - amount to position start\n// @param {string} $end - amount to left: 0; end\n// ----------------------------------------------------------\n@mixin position-horizontal($start: null, $end: null) {\n  @if $start == $end {\n    @include multi-dir() {\n      left: $start;\n      right: $end;\n    }\n  } @else {\n    @at-root {\n      & {\n        inset-inline-start: $start;\n        inset-inline-end: $end;\n      }\n    }\n  }\n}\n\n// Add position for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin position($top: null, $end: null, $bottom: null, $start: null) {\n  @include position-horizontal($start, $end);\n  top: $top;\n  bottom: $bottom;\n}\n\n// Add border for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin border($top, $end: $top, $bottom: $top, $start: $end) {\n  @include property(border, $top, $end, $bottom, $start);\n}\n\n// Add border radius for all directions\n// @param {string} $top-start\n// @param {string} $top-end\n// @param {string} $bottom-end\n// @param {string} $bottom-start\n// ----------------------------------------------------------\n@mixin border-radius($top-start, $top-end: $top-start, $bottom-end: $top-start, $bottom-start: $top-end) {\n  @if $top-start == $top-end and $top-start == $bottom-end and $top-start == $bottom-start {\n    border-radius: $top-start;\n  } @else {\n    border-start-start-radius: $top-start;\n    border-start-end-radius: $top-end;\n    border-end-end-radius: $bottom-end;\n    border-end-start-radius: $bottom-start;\n  }\n}\n\n// Add direction for all directions\n// @param {string} $dir - Direction on LTR\n@mixin direction($dir) {\n  $other-dir: null;\n\n  @if $dir == ltr {\n    $other-dir: rtl;\n  } @else {\n    $other-dir: ltr;\n  }\n\n  @include ltr() {\n    direction: $dir;\n  }\n  @include rtl() {\n    direction: $other-dir;\n  }\n}\n\n// Add float for all directions\n// @param {string} $side\n// @param {string} $decorator - !important\n@mixin float($side, $decorator: null) {\n  @if $side == start {\n    @include ltr() {\n      float: left $decorator;\n    }\n    @include rtl() {\n      float: right $decorator;\n    }\n  } @else if $side == end {\n    @include ltr() {\n      float: right $decorator;\n    }\n    @include rtl() {\n      float: left $decorator;\n    }\n  } @else {\n    @include multi-dir() {\n      float: $side $decorator;\n    }\n  }\n}\n\n@mixin background-position($horizontal, $horizontal-amount: null, $vertical: null, $vertical-amount: null) {\n  @if $horizontal == start or $horizontal == end {\n    $horizontal-ltr: null;\n    $horizontal-rtl: null;\n    @if $horizontal == start {\n      $horizontal-ltr: left;\n      $horizontal-rtl: right;\n    } @else {\n      $horizontal-ltr: right;\n      $horizontal-rtl: left;\n    }\n\n    @include ltr() {\n      background-position: $horizontal-ltr $horizontal-amount $vertical $vertical-amount;\n    }\n    @include rtl() {\n      background-position: $horizontal-rtl $horizontal-amount $vertical $vertical-amount;\n    }\n  } @else {\n    @include multi-dir() {\n      background-position: $horizontal $horizontal-amount $vertical $vertical-amount;\n    }\n  }\n}\n\n@mixin transform-origin($x-axis, $y-axis: null) {\n  @if $x-axis == start {\n    @include ltr() {\n      transform-origin: left $y-axis;\n    }\n    @include rtl() {\n      transform-origin: right $y-axis;\n    }\n  } @else if $x-axis == end {\n    @include ltr() {\n      transform-origin: right $y-axis;\n    }\n    @include rtl() {\n      transform-origin: left $y-axis;\n    }\n  } @else if $x-axis == left or $x-axis == right {\n    @include multi-dir() {\n      transform-origin: $x-axis $y-axis;\n    }\n  } @else {\n    @include ltr() {\n      transform-origin: $x-axis $y-axis;\n    }\n    @include rtl() {\n      transform-origin: calc(100% - #{$x-axis}) $y-axis;\n    }\n  }\n}\n\n// Add transform for all directions\n// @param {string} $transforms - comma separated list of transforms\n@mixin transform($transforms...) {\n  $extra: null;\n\n  $x: null;\n  $ltr-translate: null;\n  $rtl-translate: null;\n\n  @each $transform in $transforms {\n    @if (str-index($transform, translate3d)) {\n      $transform: str-replace($transform, 'translate3d(');\n      $transform: str-replace($transform, ')');\n\n      $coordinates: str-split($transform, ',');\n\n      $x: nth($coordinates, 1);\n      $y: nth($coordinates, 2);\n      $z: nth($coordinates, 3);\n\n      $ltr-translate: translate3d($x, $y, $z);\n      $rtl-translate: translate3d(calc(-1 * #{$x}), $y, $z);\n    } @else {\n      @if $extra == null {\n        $extra: $transform;\n      } @else {\n        $extra: $extra $transform;\n      }\n    }\n  }\n\n  @if $x == '0' or $x == null {\n    @include multi-dir() {\n      transform: $ltr-translate $extra;\n    }\n  } @else {\n    @include ltr() {\n      transform: $ltr-translate $extra;\n    }\n\n    @include rtl() {\n      transform: $rtl-translate $extra;\n    }\n  }\n}\n","@import \"../themes/ionic.globals\";\n@import \"../themes/ionic.mixins\";\n\n\n// Element Space\n// --------------------------------------------------\n// Creates padding and margin attributes to be used on\n// any element\n\n$padding: var(--ion-padding, 16px);\n$margin: var(--ion-margin, 16px);\n\n// Padding\n// --------------------------------------------------\n\n.ion-no-padding {\n  --padding-start: 0;\n  --padding-end: 0;\n  --padding-top: 0;\n  --padding-bottom: 0;\n\n  @include padding(0);\n}\n\n.ion-padding {\n  --padding-start: #{$padding};\n  --padding-end: #{$padding};\n  --padding-top: #{$padding};\n  --padding-bottom: #{$padding};\n\n  @include padding($padding);\n}\n\n.ion-padding-top {\n  --padding-top: #{$padding};\n\n  @include padding($padding, null, null, null);\n}\n\n.ion-padding-start {\n  --padding-start: #{$padding};\n\n  @include padding-horizontal($padding, null);\n}\n\n.ion-padding-end {\n  --padding-end: #{$padding};\n\n  @include padding-horizontal(null, $padding);\n}\n\n.ion-padding-bottom {\n  --padding-bottom: #{$padding};\n\n  @include padding(null, null, $padding, null);\n}\n\n.ion-padding-vertical {\n  --padding-top: #{$padding};\n  --padding-bottom: #{$padding};\n\n  @include padding($padding, null, $padding, null);\n}\n\n.ion-padding-horizontal {\n  --padding-start: #{$padding};\n  --padding-end: #{$padding};\n\n  @include padding-horizontal($padding);\n}\n\n\n// Margin\n// --------------------------------------------------\n\n.ion-no-margin {\n  --margin-start: 0;\n  --margin-end: 0;\n  --margin-top: 0;\n  --margin-bottom: 0;\n\n  @include margin(0);\n}\n\n.ion-margin {\n  --margin-start: #{$margin};\n  --margin-end: #{$margin};\n  --margin-top: #{$margin};\n  --margin-bottom: #{$margin};\n\n  @include margin($margin);\n}\n\n.ion-margin-top {\n  --margin-top: #{$margin};\n\n  @include margin($margin, null, null, null);\n}\n\n.ion-margin-start {\n  --margin-start: #{$margin};\n\n  @include margin-horizontal($margin, null);\n}\n\n.ion-margin-end {\n  --margin-end: #{$margin};\n\n  @include margin-horizontal(null, $margin);\n}\n\n.ion-margin-bottom {\n  --margin-bottom: #{$margin};\n\n  @include margin(null, null, $margin, null);\n}\n\n.ion-margin-vertical {\n  --margin-top: #{$margin};\n  --margin-bottom: #{$margin};\n\n  @include margin($margin, null, $margin, null);\n}\n\n.ion-margin-horizontal {\n  --margin-start: #{$margin};\n  --margin-end: #{$margin};\n\n  @include margin-horizontal($margin);\n}\n","@import \"../themes/ionic.globals\";\n@import \"../themes/ionic.mixins\";\n\n// Float Elements\n// --------------------------------------------------\n// Creates float classes based on screen size\n\n@each $breakpoint in map-keys($screen-breakpoints) {\n  $infix: breakpoint-infix($breakpoint, $screen-breakpoints);\n\n  @include media-breakpoint-up($breakpoint, $screen-breakpoints) {\n    // Provide `.ion-float-{bp}-{side}` classes for floating the element based\n    // on the breakpoint and side\n    .ion-float#{$infix}-left {\n      @include float(left, !important);\n    }\n\n    .ion-float#{$infix}-right {\n      @include float(right, !important);\n    }\n\n    .ion-float#{$infix}-start {\n      @include float(start, !important);\n    }\n\n    .ion-float#{$infix}-end {\n      @include float(end, !important);\n    }\n  }\n}\n","@import \"../themes/ionic.globals\";\n@import \"../themes/ionic.mixins\";\n\n// Text Alignment\n// --------------------------------------------------\n// Creates text alignment attributes based on screen size\n\n@each $breakpoint in map-keys($screen-breakpoints) {\n  $infix: breakpoint-infix($breakpoint, $screen-breakpoints);\n\n  @include media-breakpoint-up($breakpoint, $screen-breakpoints) {\n    // Provide `.ion-text-{bp}` classes for aligning the text based\n    // on the breakpoint\n    .ion-text#{$infix}-center {\n      text-align: center !important;\n    }\n\n    .ion-text#{$infix}-justify {\n      text-align: justify !important;\n    }\n\n    .ion-text#{$infix}-start {\n      text-align: start !important;\n    }\n\n    .ion-text#{$infix}-end {\n      text-align: end !important;\n    }\n\n    .ion-text#{$infix}-left {\n      text-align: left !important;\n    }\n\n    .ion-text#{$infix}-right {\n      text-align: right !important;\n    }\n\n    .ion-text#{$infix}-nowrap {\n      white-space: nowrap !important;\n    }\n\n    .ion-text#{$infix}-wrap {\n      white-space: normal !important;\n    }\n  }\n}\n","@import \"../themes/ionic.globals\";\n@import \"../themes/ionic.mixins\";\n\n// Text Transformation\n// --------------------------------------------------\n// Creates text transform attributes based on screen size\n\n@each $breakpoint in map-keys($screen-breakpoints) {\n  $infix: breakpoint-infix($breakpoint, $screen-breakpoints);\n\n  @include media-breakpoint-up($breakpoint, $screen-breakpoints) {\n    // Provide `.ion-text-{bp}` classes for transforming the text based\n    // on the breakpoint\n    .ion-text#{$infix}-uppercase {\n      /* stylelint-disable-next-line declaration-no-important */\n      text-transform: uppercase !important;\n    }\n\n    .ion-text#{$infix}-lowercase {\n      /* stylelint-disable-next-line declaration-no-important */\n      text-transform: lowercase !important;\n    }\n\n    .ion-text#{$infix}-capitalize {\n      /* stylelint-disable-next-line declaration-no-important */\n      text-transform: capitalize !important;\n    }\n  }\n}\n","// Flex Utilities\n// --------------------------------------------------\n// Creates flex classes to align flex containers\n// and items\n\n// Align Self\n// --------------------------------------------------\n\n.ion-align-self-start {\n  align-self: flex-start !important;\n}\n\n.ion-align-self-end {\n  align-self: flex-end !important;\n}\n\n.ion-align-self-center {\n  align-self: center !important;\n}\n\n.ion-align-self-stretch {\n  align-self: stretch !important;\n}\n\n.ion-align-self-baseline {\n  align-self: baseline !important;\n}\n\n.ion-align-self-auto {\n  align-self: auto !important;\n}\n\n\n// Flex Wrap\n// --------------------------------------------------\n\n.ion-wrap {\n  flex-wrap: wrap !important;\n}\n\n.ion-nowrap {\n  flex-wrap: nowrap !important;\n}\n\n.ion-wrap-reverse {\n  flex-wrap: wrap-reverse !important;\n}\n\n\n// Justify Content\n// --------------------------------------------------\n\n.ion-justify-content-start {\n  justify-content: flex-start !important;\n}\n\n.ion-justify-content-center {\n  justify-content: center !important;\n}\n\n.ion-justify-content-end {\n  justify-content: flex-end !important;\n}\n\n.ion-justify-content-around {\n  justify-content: space-around !important;\n}\n\n.ion-justify-content-between {\n  justify-content: space-between !important;\n}\n\n.ion-justify-content-evenly {\n  justify-content: space-evenly !important;\n}\n\n\n// Align Items\n// --------------------------------------------------\n\n.ion-align-items-start {\n  align-items: flex-start !important;\n}\n\n.ion-align-items-center {\n  align-items: center !important;\n}\n\n.ion-align-items-end {\n  align-items: flex-end !important;\n}\n\n.ion-align-items-stretch {\n  align-items: stretch !important;\n}\n\n.ion-align-items-baseline {\n  align-items: baseline !important;\n}\n","@import \"../themes/ionic.globals\";\n@import \"../themes/ionic.mixins\";\n\n// Display\n// --------------------------------------------------\n// Modifies display of a particular element based on the given classes\n\n.ion-hide {\n  display: none !important;\n}\n\n// Adds hidden classes\n@each $breakpoint in map-keys($screen-breakpoints) {\n  $infix: breakpoint-infix($breakpoint, $screen-breakpoints);\n\n  @include media-breakpoint-up($breakpoint, $screen-breakpoints) {\n    // Provide `ion-hide-{bp}-up` classes for hiding the element based\n    // on the breakpoint\n    .ion-hide#{$infix}-up {\n      display: none !important;\n    }\n  }\n\n  @include media-breakpoint-down($breakpoint, $screen-breakpoints) {\n    // Provide `ion-hide-{bp}-down` classes for hiding the element based\n    // on the breakpoint\n    .ion-hide#{$infix}-down {\n      display: none !important;\n    }\n  }\n}\n"]}
+{"version":3,"sourceRoot":"","sources":["../src/css/padding.scss","../src/themes/ionic.mixins.scss","../src/css/float-elements.scss","../src/css/text-alignment.scss","../src/css/text-transformation.scss","../src/css/flex-utils.scss","../src/css/display.scss"],"names":[],"mappings":"AAeA,gBACE,mBACA,iBACA,iBACA,oBCsTE,aDpTe,ECqTf,cDrTe,ECyUjB,YDzUiB,EC0UjB,eD1UiB,EAGnB,aACE,0CACA,wCACA,wCACA,2CCiTE,sBDpUM,yBCqUN,qBDrUM,yBCsUN,oBDtUM,yBCuUN,mBDvUM,yBCqVR,YDrVQ,yBCsVR,eDtVQ,yBAwBV,iBACE,wCC4TA,YDrVQ,yBA8BV,mBACE,0CCqSE,sBDpUM,yBCqUN,qBDrUM,yBAoCV,iBACE,wCCiSE,oBDtUM,yBCuUN,mBDvUM,yBA0CV,oBACE,2CC2SA,eDtVQ,yBAgDV,sBACE,wCACA,2CCmSA,YDrVQ,yBCsVR,eDtVQ,yBAuDV,wBACE,0CACA,wCC2QE,sBDpUM,yBCqUN,qBDrUM,yBCsUN,oBDtUM,yBCuUN,mBDvUM,yBAkEV,eACE,kBACA,gBACA,gBACA,mBC0PE,YDxPc,ECyPd,aDzPc,EC6QhB,WD7QgB,EC8QhB,cD9QgB,EAGlB,YACE,wCACA,sCACA,sCACA,yCCqPE,qBDnUK,wBCoUL,oBDpUK,wBCqUL,mBDrUK,wBCsUL,kBDtUK,wBCoVP,WDpVO,wBCqVP,cDrVO,wBAmFT,gBACE,sCCgQA,WDpVO,wBAyFT,kBACE,wCCyOE,qBDnUK,wBCoUL,oBDpUK,wBA+FT,gBACE,sCCqOE,mBDrUK,wBCsUL,kBDtUK,wBAqGT,mBACE,yCC+OA,cDrVO,wBA2GT,qBACE,sCACA,yCCuOA,WDpVO,wBCqVP,cDrVO,wBAkHT,uBACE,wCACA,sCC+ME,qBDnUK,wBCoUL,oBDpUK,wBCqUL,mBDrUK,wBCsUL,kBDtUK,wBEGL,gBD2dE,sBCvdF,iBDudE,uBCndF,iBDqcE,sBAzNO,0CA4NP,uBArNO,2BAqNP,uBA/MJ,8BAcW,0BAiMP,wBCpcF,eDwcE,uBAhOO,wCAmOP,sBA5NO,yBA4NP,sBAtNJ,8BAcW,wBAwMP,uBAnUF,yBCpJA,mBD2dE,sBCvdF,oBDudE,uBCndF,oBDqcE,sBAzNO,6CA4NP,uBArNO,8BAqNP,uBA/MJ,8BAcW,6BAiMP,wBCpcF,kBDwcE,uBAhOO,2CAmOP,sBA5NO,4BA4NP,sBAtNJ,8BAcW,2BAwMP,wBAnUF,yBCpJA,mBD2dE,sBCvdF,oBDudE,uBCndF,oBDqcE,sBAzNO,6CA4NP,uBArNO,8BAqNP,uBA/MJ,8BAcW,6BAiMP,wBCpcF,kBDwcE,uBAhOO,2CAmOP,sBA5NO,4BA4NP,sBAtNJ,8BAcW,2BAwMP,wBAnUF,yBCpJA,mBD2dE,sBCvdF,oBDudE,uBCndF,oBDqcE,sBAzNO,6CA4NP,uBArNO,8BAqNP,uBA/MJ,8BAcW,6BAiMP,wBCpcF,kBDwcE,uBAhOO,2CAmOP,sBA5NO,4BA4NP,sBAtNJ,8BAcW,2BAwMP,wBAnUF,0BCpJA,mBD2dE,sBCvdF,oBDudE,uBCndF,oBDqcE,sBAzNO,6CA4NP,uBArNO,8BAqNP,uBA/MJ,8BAcW,6BAiMP,wBCpcF,kBDwcE,uBAhOO,2CAmOP,sBA5NO,4BA4NP,sBAtNJ,8BAcW,2BAwMP,wBEvdF,iBACE,6BAGF,kBACE,8BAGF,gBACE,4BAGF,cACE,0BAGF,eACE,2BAGF,gBACE,4BAGF,iBACE,8BAGF,eACE,8BFuHF,yBEpJA,oBACE,6BAGF,qBACE,8BAGF,mBACE,4BAGF,iBACE,0BAGF,kBACE,2BAGF,mBACE,4BAGF,oBACE,8BAGF,kBACE,+BFuHF,yBEpJA,oBACE,6BAGF,qBACE,8BAGF,mBACE,4BAGF,iBACE,0BAGF,kBACE,2BAGF,mBACE,4BAGF,oBACE,8BAGF,kBACE,+BFuHF,yBEpJA,oBACE,6BAGF,qBACE,8BAGF,mBACE,4BAGF,iBACE,0BAGF,kBACE,2BAGF,mBACE,4BAGF,oBACE,8BAGF,kBACE,+BFuHF,0BEpJA,oBACE,6BAGF,qBACE,8BAGF,mBACE,4BAGF,iBACE,0BAGF,kBACE,2BAGF,mBACE,4BAGF,oBACE,8BAGF,kBACE,+BC7BF,oBAEE,oCAGF,oBAEE,oCAGF,qBAEE,qCHwIF,yBGpJA,uBAEE,oCAGF,uBAEE,oCAGF,wBAEE,sCHwIF,yBGpJA,uBAEE,oCAGF,uBAEE,oCAGF,wBAEE,sCHwIF,yBGpJA,uBAEE,oCAGF,uBAEE,oCAGF,wBAEE,sCHwIF,0BGpJA,uBAEE,oCAGF,uBAEE,oCAGF,wBAEE,sCCjBN,sBACE,iCAGF,oBACE,+BAGF,uBACE,6BAGF,wBACE,8BAGF,yBACE,+BAGF,qBACE,2BAOF,UACE,0BAGF,YACE,4BAGF,kBACE,kCAOF,2BACE,sCAGF,4BACE,kCAGF,yBACE,oCAGF,4BACE,wCAGF,6BACE,yCAGF,4BACE,wCAOF,uBACE,kCAGF,wBACE,8BAGF,qBACE,gCAGF,yBACE,+BAGF,0BACE,gCC1FF,UACE,wBAUE,aACE,wBAOF,eACE,wBLsIF,yBK/IA,gBACE,yBLuLF,4BKhLA,kBACE,yBLsIF,yBK/IA,gBACE,yBLuLF,4BKhLA,kBACE,yBLsIF,yBK/IA,gBACE,yBLuLF,4BKhLA,kBACE,yBLsIF,0BK/IA,gBACE,yBLuLF,6BKhLA,kBACE","file":"utils.bundle.css","sourcesContent":["@import \"../themes/ionic.globals\";\n@import \"../themes/ionic.mixins\";\n\n\n// Element Space\n// --------------------------------------------------\n// Creates padding and margin attributes to be used on\n// any element\n\n$padding: var(--ion-padding, 16px);\n$margin: var(--ion-margin, 16px);\n\n// Padding\n// --------------------------------------------------\n\n.ion-no-padding {\n  --padding-start: 0;\n  --padding-end: 0;\n  --padding-top: 0;\n  --padding-bottom: 0;\n\n  @include padding(0);\n}\n\n.ion-padding {\n  --padding-start: #{$padding};\n  --padding-end: #{$padding};\n  --padding-top: #{$padding};\n  --padding-bottom: #{$padding};\n\n  @include padding($padding);\n}\n\n.ion-padding-top {\n  --padding-top: #{$padding};\n\n  @include padding($padding, null, null, null);\n}\n\n.ion-padding-start {\n  --padding-start: #{$padding};\n\n  @include padding-horizontal($padding, null);\n}\n\n.ion-padding-end {\n  --padding-end: #{$padding};\n\n  @include padding-horizontal(null, $padding);\n}\n\n.ion-padding-bottom {\n  --padding-bottom: #{$padding};\n\n  @include padding(null, null, $padding, null);\n}\n\n.ion-padding-vertical {\n  --padding-top: #{$padding};\n  --padding-bottom: #{$padding};\n\n  @include padding($padding, null, $padding, null);\n}\n\n.ion-padding-horizontal {\n  --padding-start: #{$padding};\n  --padding-end: #{$padding};\n\n  @include padding-horizontal($padding);\n}\n\n\n// Margin\n// --------------------------------------------------\n\n.ion-no-margin {\n  --margin-start: 0;\n  --margin-end: 0;\n  --margin-top: 0;\n  --margin-bottom: 0;\n\n  @include margin(0);\n}\n\n.ion-margin {\n  --margin-start: #{$margin};\n  --margin-end: #{$margin};\n  --margin-top: #{$margin};\n  --margin-bottom: #{$margin};\n\n  @include margin($margin);\n}\n\n.ion-margin-top {\n  --margin-top: #{$margin};\n\n  @include margin($margin, null, null, null);\n}\n\n.ion-margin-start {\n  --margin-start: #{$margin};\n\n  @include margin-horizontal($margin, null);\n}\n\n.ion-margin-end {\n  --margin-end: #{$margin};\n\n  @include margin-horizontal(null, $margin);\n}\n\n.ion-margin-bottom {\n  --margin-bottom: #{$margin};\n\n  @include margin(null, null, $margin, null);\n}\n\n.ion-margin-vertical {\n  --margin-top: #{$margin};\n  --margin-bottom: #{$margin};\n\n  @include margin($margin, null, $margin, null);\n}\n\n.ion-margin-horizontal {\n  --margin-start: #{$margin};\n  --margin-end: #{$margin};\n\n  @include margin-horizontal($margin);\n}\n","\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n@mixin tablet-viewport() {\n  @media screen and (min-width: 768px) {\n    @content;\n  }\n}\n\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n@mixin mobile-viewport() {\n  @media screen and (max-width: 767px) {\n    @content;\n  }\n}\n\n@mixin input-cover() {\n  @include position(0, null, null, 0);\n  @include margin(0);\n\n  position: absolute;\n\n  width: 100%;\n  height: 100%;\n\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n\n  appearance: none;\n  outline: none;\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n}\n\n@mixin visually-hidden() {\n  position: absolute;\n\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n\n  width: 100%;\n  height: 100%;\n\n  margin: 0;\n  padding: 0;\n\n  border: 0;\n  outline: 0;\n  clip: rect(0 0 0 0);\n\n  opacity: 0;\n  overflow: hidden;\n\n  -webkit-appearance: none;\n  -moz-appearance: none;\n}\n\n@mixin text-inherit() {\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n}\n\n@mixin button-state() {\n  @include position(0, 0, 0, 0);\n\n  position: absolute;\n\n  content: \"\";\n\n  opacity: 0;\n}\n\n// Font smoothing\n// --------------------------------------------------\n\n@mixin font-smoothing() {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n}\n\n// Get the key from a map based on the index\n@function index-to-key($map, $index) {\n  $keys: map-keys($map);\n\n  @return nth($keys, $index);\n}\n\n\n// Breakpoint Mixins\n// ---------------------------------------------------------------------------------\n\n// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$screen-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// ---------------------------------------------------------------------------------\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    576px\n@function breakpoint-min($name, $breakpoints: $screen-breakpoints) {\n  $min: map-get($breakpoints, $name);\n\n  @return if($name != index-to-key($breakpoints, 1), $min, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.\n// Useful for making responsive utilities.\n//\n//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    \"\"  (Returns a blank string)\n//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $screen-breakpoints) {\n  @return if(breakpoint-min($name, $breakpoints) == null, \"\", \"-#{$name}\");\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $screen-breakpoints) {\n  $min: breakpoint-min($name, $breakpoints);\n  @if $min {\n    @media (min-width: $min) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n//    >> breakpoint-next(sm)\n//    md\n//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    md\n//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n//    md\n@function breakpoint-next($name, $breakpoints: $screen-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n  $n: index($breakpoint-names, $name);\n  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n}\n\n// Maximum breakpoint width. Null for the smallest (first) breakpoint.\n// The maximum value is reduced by 0.02px to work around the limitations of\n// `min-` and `max-` prefixes and viewports with fractional widths.\n//\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\t// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\t// See https://bugs.webkit.org/show_bug.cgi?id=178261\n//\n//    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    767.98px\n@function breakpoint-max($name, $breakpoints: $screen-breakpoints) {\n  $max: map-get($breakpoints, $name);\n  @return if($max and $max > 0, $max - .02, null);\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $screen-breakpoints) {\n  $max: breakpoint-max($name, $breakpoints);\n  @if $max {\n    @media (max-width: $max) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n\n// Text Direction - ltr / rtl\n//\n// CSS defaults to use the ltr css, and adds [dir=rtl] selectors\n// to override ltr defaults.\n// ----------------------------------------------------------\n\n@mixin multi-dir() {\n  @content;\n\n  // $root: #{&};\n  // @at-root [dir] {\n  //   #{$root} {\n  //     @content;\n  //   }\n  // }\n}\n\n@mixin rtl() {\n  $root: #{&};\n\n  $rootSplit: str-split($root, \",\");\n  $selectors: #{add-root-selector($root, \"[dir=rtl]\")};\n  $selectorsSplit: str-split($selectors, \",\");\n\n  $hostContextSelectors: ();\n  $restSelectors: ();\n  $dirSelectors: ();\n\n  // Selectors must be split into individual selectors in case the browser\n  // doesn't support a specific selector.\n  // For example, Firefox and Safari doesn't support `:host-context()`.\n  // If an invalid selector is used, then the entire group of selectors\n  // will be ignored.\n  // @link https://www.w3.org/TR/selectors-3/#grouping\n  @each $selector in $selectorsSplit {\n    // Group the selectors back into a single selector to optimize the output.\n    @if str-index($selector, \":host-context\") {\n      $hostContextSelectors: append($hostContextSelectors, $selector, comma);\n    } @else {\n      // Group the selectors back into a single selector to optimize the output.\n      $restSelectors: append($restSelectors, $selector, comma);\n    }\n  }\n\n  // Supported by Chrome.\n  @if length($hostContextSelectors) > 0 {\n    @at-root #{$hostContextSelectors} {\n      @content;\n    }\n  }\n\n  // Supported by all browsers.\n  @if length($restSelectors) > 0 {\n    @at-root #{$restSelectors} {\n      @content;\n    }\n  }\n\n  // If browser can support `:dir()`, then add the `:dir()` selectors.\n  @supports selector(:dir(rtl)) {\n    // Adding :dir() in case the browser doesn't support `:host-context()` and does support `:dir()`.\n    // `:host-context()` is added:\n    // - through the `add-root-selector()` function.\n    // - first so that it takes precedence over `:dir()`.\n    // For example,\n    // - Firefox doesn't support `:host-context()`, but does support `:dir()`.\n    // - Safari doesn't support `:host-context()`, but Safari 16.4+ supports `:dir()`\n    // @link https://webkit.org/blog/13966/webkit-features-in-safari-16-4/\n    // -- However, there is a Webkit bug on v16 that prevents `:dir()` from working when\n    // -- the app direction is changed dynamically. v17+ works fine.\n    // -- @link https://bugs.webkit.org/show_bug.cgi?id=257133\n\n    // Supported by Firefox.\n    @at-root #{add-root-selector($root, \":dir(rtl)\", false)} {\n      @content;\n    }\n  }\n}\n\n@mixin ltr() {\n  @content;\n}\n\n\n// SVG Background Image Mixin\n// @param {string} $svg\n// ----------------------------------------------------------\n@mixin svg-background-image($svg, $flip-rtl: false) {\n  $url: url-encode($svg);\n  $viewBox: str-split(str-extract($svg, \"viewBox='\", \"'\"), \" \");\n\n  @if $flip-rtl != true or $viewBox == null {\n    @include multi-dir() {\n      background-image: url(\"data:image/svg+xml;charset=utf-8,#{$url}\");\n    }\n  } @else {\n    $transform: \"transform='translate(#{nth($viewBox, 3)}, 0) scale(-1, 1)'\";\n    $flipped-url: $svg;\n    $flipped-url: str-replace($flipped-url, \"<path\", \"<path #{$transform}\");\n    $flipped-url: str-replace($flipped-url, \"<line\", \"<line #{$transform}\");\n    $flipped-url: str-replace($flipped-url, \"<polygon\", \"<polygon #{$transform}\");\n    $flipped-url: url-encode($flipped-url);\n\n    @include ltr () {\n      background-image: url(\"data:image/svg+xml;charset=utf-8,#{$url}\");\n    }\n    @include rtl() {\n      background-image: url(\"data:image/svg+xml;charset=utf-8,#{$flipped-url}\");\n    }\n  }\n}\n\n// Add property horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin property-horizontal($prop, $start, $end: $start) {\n  @if $start == 0 and $end == 0 {\n    #{$prop}-left: $start;\n    #{$prop}-right: $end;\n\n  } @else {\n    -webkit-#{$prop}-start: $start;\n    #{$prop}-inline-start: $start;\n    -webkit-#{$prop}-end: $end;\n    #{$prop}-inline-end: $end;\n  }\n}\n\n// Add property for all directions\n// @param {string} $prop\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// @param {boolean} $content include content or use default\n// ----------------------------------------------------------\n@mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end) {\n  @include property-horizontal($prop, $start, $end);\n  #{$prop}-top: $top;\n  #{$prop}-bottom: $bottom;\n}\n\n// Add padding horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin padding-horizontal($start, $end: $start) {\n  @include property-horizontal(padding, $start, $end);\n}\n\n// Add padding for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin padding($top, $end: $top, $bottom: $top, $start: $end) {\n  @include property(padding, $top, $end, $bottom, $start);\n}\n\n// Add margin horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin margin-horizontal($start, $end: $start) {\n  @include property-horizontal(margin, $start, $end);\n}\n\n// Add margin for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin margin($top, $end: $top, $bottom: $top, $start: $end) {\n  @include property(margin, $top, $end, $bottom, $start);\n}\n\n// Add position horizontal\n// @param {string} $start - amount to position start\n// @param {string} $end - amount to left: 0; end\n// ----------------------------------------------------------\n@mixin position-horizontal($start: null, $end: null) {\n  @if $start == $end {\n    @include multi-dir() {\n      left: $start;\n      right: $end;\n    }\n  } @else {\n    @at-root {\n      & {\n        inset-inline-start: $start;\n        inset-inline-end: $end;\n      }\n    }\n  }\n}\n\n// Add position for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin position($top: null, $end: null, $bottom: null, $start: null) {\n  @include position-horizontal($start, $end);\n  top: $top;\n  bottom: $bottom;\n}\n\n// Add border for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin border($top, $end: $top, $bottom: $top, $start: $end) {\n  @include property(border, $top, $end, $bottom, $start);\n}\n\n// Add border radius for all directions\n// @param {string} $top-start\n// @param {string} $top-end\n// @param {string} $bottom-end\n// @param {string} $bottom-start\n// ----------------------------------------------------------\n@mixin border-radius($top-start, $top-end: $top-start, $bottom-end: $top-start, $bottom-start: $top-end) {\n  @if $top-start == $top-end and $top-start == $bottom-end and $top-start == $bottom-start {\n    border-radius: $top-start;\n  } @else {\n    border-start-start-radius: $top-start;\n    border-start-end-radius: $top-end;\n    border-end-end-radius: $bottom-end;\n    border-end-start-radius: $bottom-start;\n  }\n}\n\n// Add direction for all directions\n// @param {string} $dir - Direction on LTR\n@mixin direction($dir) {\n  $other-dir: null;\n\n  @if $dir == ltr {\n    $other-dir: rtl;\n  } @else {\n    $other-dir: ltr;\n  }\n\n  @include ltr() {\n    direction: $dir;\n  }\n  @include rtl() {\n    direction: $other-dir;\n  }\n}\n\n// Add float for all directions\n// @param {string} $side\n// @param {string} $decorator - !important\n@mixin float($side, $decorator: null) {\n  @if $side == start {\n    @include ltr() {\n      float: left $decorator;\n    }\n    @include rtl() {\n      float: right $decorator;\n    }\n  } @else if $side == end {\n    @include ltr() {\n      float: right $decorator;\n    }\n    @include rtl() {\n      float: left $decorator;\n    }\n  } @else {\n    @include multi-dir() {\n      float: $side $decorator;\n    }\n  }\n}\n\n@mixin background-position($horizontal, $horizontal-amount: null, $vertical: null, $vertical-amount: null) {\n  @if $horizontal == start or $horizontal == end {\n    $horizontal-ltr: null;\n    $horizontal-rtl: null;\n    @if $horizontal == start {\n      $horizontal-ltr: left;\n      $horizontal-rtl: right;\n    } @else {\n      $horizontal-ltr: right;\n      $horizontal-rtl: left;\n    }\n\n    @include ltr() {\n      background-position: $horizontal-ltr $horizontal-amount $vertical $vertical-amount;\n    }\n    @include rtl() {\n      background-position: $horizontal-rtl $horizontal-amount $vertical $vertical-amount;\n    }\n  } @else {\n    @include multi-dir() {\n      background-position: $horizontal $horizontal-amount $vertical $vertical-amount;\n    }\n  }\n}\n\n@mixin transform-origin($x-axis, $y-axis: null) {\n  @if $x-axis == start {\n    @include ltr() {\n      transform-origin: left $y-axis;\n    }\n    @include rtl() {\n      transform-origin: right $y-axis;\n    }\n  } @else if $x-axis == end {\n    @include ltr() {\n      transform-origin: right $y-axis;\n    }\n    @include rtl() {\n      transform-origin: left $y-axis;\n    }\n  } @else if $x-axis == left or $x-axis == right {\n    @include multi-dir() {\n      transform-origin: $x-axis $y-axis;\n    }\n  } @else {\n    @include ltr() {\n      transform-origin: $x-axis $y-axis;\n    }\n    @include rtl() {\n      transform-origin: calc(100% - #{$x-axis}) $y-axis;\n    }\n  }\n}\n\n// Add transform for all directions\n// @param {string} $transforms - comma separated list of transforms\n@mixin transform($transforms...) {\n  $extra: null;\n\n  $x: null;\n  $ltr-translate: null;\n  $rtl-translate: null;\n\n  @each $transform in $transforms {\n    @if (str-index($transform, translate3d)) {\n      $transform: str-replace($transform, 'translate3d(');\n      $transform: str-replace($transform, ')');\n\n      $coordinates: str-split($transform, ',');\n\n      $x: nth($coordinates, 1);\n      $y: nth($coordinates, 2);\n      $z: nth($coordinates, 3);\n\n      $ltr-translate: translate3d($x, $y, $z);\n      $rtl-translate: translate3d(calc(-1 * #{$x}), $y, $z);\n    } @else {\n      @if $extra == null {\n        $extra: $transform;\n      } @else {\n        $extra: $extra $transform;\n      }\n    }\n  }\n\n  @if $x == '0' or $x == null {\n    @include multi-dir() {\n      transform: $ltr-translate $extra;\n    }\n  } @else {\n    @include ltr() {\n      transform: $ltr-translate $extra;\n    }\n\n    @include rtl() {\n      transform: $rtl-translate $extra;\n    }\n  }\n}\n","@import \"../themes/ionic.globals\";\n@import \"../themes/ionic.mixins\";\n\n// Float Elements\n// --------------------------------------------------\n// Creates float classes based on screen size\n\n@each $breakpoint in map-keys($screen-breakpoints) {\n  $infix: breakpoint-infix($breakpoint, $screen-breakpoints);\n\n  @include media-breakpoint-up($breakpoint, $screen-breakpoints) {\n    // Provide `.ion-float-{bp}-{side}` classes for floating the element based\n    // on the breakpoint and side\n    .ion-float#{$infix}-left {\n      @include float(left, !important);\n    }\n\n    .ion-float#{$infix}-right {\n      @include float(right, !important);\n    }\n\n    .ion-float#{$infix}-start {\n      @include float(start, !important);\n    }\n\n    .ion-float#{$infix}-end {\n      @include float(end, !important);\n    }\n  }\n}\n","@import \"../themes/ionic.globals\";\n@import \"../themes/ionic.mixins\";\n\n// Text Alignment\n// --------------------------------------------------\n// Creates text alignment attributes based on screen size\n\n@each $breakpoint in map-keys($screen-breakpoints) {\n  $infix: breakpoint-infix($breakpoint, $screen-breakpoints);\n\n  @include media-breakpoint-up($breakpoint, $screen-breakpoints) {\n    // Provide `.ion-text-{bp}` classes for aligning the text based\n    // on the breakpoint\n    .ion-text#{$infix}-center {\n      text-align: center !important;\n    }\n\n    .ion-text#{$infix}-justify {\n      text-align: justify !important;\n    }\n\n    .ion-text#{$infix}-start {\n      text-align: start !important;\n    }\n\n    .ion-text#{$infix}-end {\n      text-align: end !important;\n    }\n\n    .ion-text#{$infix}-left {\n      text-align: left !important;\n    }\n\n    .ion-text#{$infix}-right {\n      text-align: right !important;\n    }\n\n    .ion-text#{$infix}-nowrap {\n      white-space: nowrap !important;\n    }\n\n    .ion-text#{$infix}-wrap {\n      white-space: normal !important;\n    }\n  }\n}\n","@import \"../themes/ionic.globals\";\n@import \"../themes/ionic.mixins\";\n\n// Text Transformation\n// --------------------------------------------------\n// Creates text transform attributes based on screen size\n\n@each $breakpoint in map-keys($screen-breakpoints) {\n  $infix: breakpoint-infix($breakpoint, $screen-breakpoints);\n\n  @include media-breakpoint-up($breakpoint, $screen-breakpoints) {\n    // Provide `.ion-text-{bp}` classes for transforming the text based\n    // on the breakpoint\n    .ion-text#{$infix}-uppercase {\n      /* stylelint-disable-next-line declaration-no-important */\n      text-transform: uppercase !important;\n    }\n\n    .ion-text#{$infix}-lowercase {\n      /* stylelint-disable-next-line declaration-no-important */\n      text-transform: lowercase !important;\n    }\n\n    .ion-text#{$infix}-capitalize {\n      /* stylelint-disable-next-line declaration-no-important */\n      text-transform: capitalize !important;\n    }\n  }\n}\n","// Flex Utilities\n// --------------------------------------------------\n// Creates flex classes to align flex containers\n// and items\n\n// Align Self\n// --------------------------------------------------\n\n.ion-align-self-start {\n  align-self: flex-start !important;\n}\n\n.ion-align-self-end {\n  align-self: flex-end !important;\n}\n\n.ion-align-self-center {\n  align-self: center !important;\n}\n\n.ion-align-self-stretch {\n  align-self: stretch !important;\n}\n\n.ion-align-self-baseline {\n  align-self: baseline !important;\n}\n\n.ion-align-self-auto {\n  align-self: auto !important;\n}\n\n\n// Flex Wrap\n// --------------------------------------------------\n\n.ion-wrap {\n  flex-wrap: wrap !important;\n}\n\n.ion-nowrap {\n  flex-wrap: nowrap !important;\n}\n\n.ion-wrap-reverse {\n  flex-wrap: wrap-reverse !important;\n}\n\n\n// Justify Content\n// --------------------------------------------------\n\n.ion-justify-content-start {\n  justify-content: flex-start !important;\n}\n\n.ion-justify-content-center {\n  justify-content: center !important;\n}\n\n.ion-justify-content-end {\n  justify-content: flex-end !important;\n}\n\n.ion-justify-content-around {\n  justify-content: space-around !important;\n}\n\n.ion-justify-content-between {\n  justify-content: space-between !important;\n}\n\n.ion-justify-content-evenly {\n  justify-content: space-evenly !important;\n}\n\n\n// Align Items\n// --------------------------------------------------\n\n.ion-align-items-start {\n  align-items: flex-start !important;\n}\n\n.ion-align-items-center {\n  align-items: center !important;\n}\n\n.ion-align-items-end {\n  align-items: flex-end !important;\n}\n\n.ion-align-items-stretch {\n  align-items: stretch !important;\n}\n\n.ion-align-items-baseline {\n  align-items: baseline !important;\n}\n","@import \"../themes/ionic.globals\";\n@import \"../themes/ionic.mixins\";\n\n// Display\n// --------------------------------------------------\n// Modifies display of a particular element based on the given classes\n\n.ion-hide {\n  display: none !important;\n}\n\n// Adds hidden classes\n@each $breakpoint in map-keys($screen-breakpoints) {\n  $infix: breakpoint-infix($breakpoint, $screen-breakpoints);\n\n  @include media-breakpoint-up($breakpoint, $screen-breakpoints) {\n    // Provide `ion-hide-{bp}-up` classes for hiding the element based\n    // on the breakpoint\n    .ion-hide#{$infix}-up {\n      display: none !important;\n    }\n  }\n\n  @include media-breakpoint-down($breakpoint, $screen-breakpoints) {\n    // Provide `ion-hide-{bp}-down` classes for hiding the element based\n    // on the breakpoint\n    .ion-hide#{$infix}-down {\n      display: none !important;\n    }\n  }\n}\n"]}

package/dist/cjs/{app-globals-63aebf89.js → app-globals-5bfa2d7f.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const ionicGlobal = require('./ionic-global-1adf9bc4.js');
+const ionicGlobal = require('./ionic-global-62487d02.js');
 
 const globalScripts = ionicGlobal.initialize;
 

package/dist/cjs/{button-active-bd13859e.js → button-active-564be49f.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const index$1 = require('./index-af6d0fbb.js');
+const index$1 = require('./index-bbc6c29f.js');
 const haptic = require('./haptic-f6b37aa3.js');
 const index = require('./index-ee07ed59.js');
 

package/dist/cjs/{hardware-back-button-ad9299b4.js → hardware-back-button-44e7c052.js}

@@ -4,8 +4,8 @@
 'use strict';
 
 const index = require('./index-c8d52405.js');
-const ionicGlobal = require('./ionic-global-1adf9bc4.js');
-require('./index-af6d0fbb.js');
+const ionicGlobal = require('./ionic-global-62487d02.js');
+require('./index-bbc6c29f.js');
 
 /**
  * CloseWatcher is a newer API that lets

package/dist/cjs/{index-ff66cc7c.js → index-6d6ac424.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const index = require('./index-af6d0fbb.js');
+const index = require('./index-bbc6c29f.js');
 const helpers = require('./helpers-afaa9001.js');
 
 const LIFECYCLE_WILL_ENTER = 'ionViewWillEnter';
@@ -12,8 +12,8 @@ const LIFECYCLE_WILL_LEAVE = 'ionViewWillLeave';
 const LIFECYCLE_DID_LEAVE = 'ionViewDidLeave';
 const LIFECYCLE_WILL_UNLOAD = 'ionViewWillUnload';
 
-const iosTransitionAnimation = () => Promise.resolve().then(function () { return require('./ios.transition-06673f18.js'); });
-const mdTransitionAnimation = () => Promise.resolve().then(function () { return require('./md.transition-4d7bb4b1.js'); });
+const iosTransitionAnimation = () => Promise.resolve().then(function () { return require('./ios.transition-d4f0ca4e.js'); });
+const mdTransitionAnimation = () => Promise.resolve().then(function () { return require('./md.transition-857328f3.js'); });
 // TODO(FW-2832): types
 const transition = (opts) => {
     return new Promise((resolve, reject) => {

package/dist/cjs/{index-af6d0fbb.js → index-bbc6c29f.js}

@@ -886,17 +886,35 @@ const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
     const newVnodeAttrs = newVnode.$attrs$ || EMPTY_OBJ;
     {
         // remove attributes no longer present on the vnode by setting them to undefined
-        for (memberName in oldVnodeAttrs) {
+        for (memberName of sortedAttrNames(Object.keys(oldVnodeAttrs))) {
             if (!(memberName in newVnodeAttrs)) {
                 setAccessor(elm, memberName, oldVnodeAttrs[memberName], undefined, isSvgMode, newVnode.$flags$);
             }
         }
     }
     // add new & update changed attributes
-    for (memberName in newVnodeAttrs) {
+    for (memberName of sortedAttrNames(Object.keys(newVnodeAttrs))) {
         setAccessor(elm, memberName, oldVnodeAttrs[memberName], newVnodeAttrs[memberName], isSvgMode, newVnode.$flags$);
     }
 };
+/**
+ * Sort a list of attribute names to ensure that all the attribute names which
+ * are _not_ `"ref"` come before `"ref"`. Preserve the order of the non-ref
+ * attributes.
+ *
+ * **Note**: if the supplied attributes do not include `'ref'` then the same
+ * (by reference) array will be returned without modification.
+ *
+ * @param attrNames attribute names to sort
+ * @returns a list of attribute names, sorted if they include `"ref"`
+ */
+function sortedAttrNames(attrNames) {
+    return attrNames.includes('ref')
+        ? // we need to sort these to ensure that `'ref'` is the last attr
+            [...attrNames.filter((attr) => attr !== 'ref'), 'ref']
+        : // no need to sort, return the original array
+            attrNames;
+}
 /**
  * Create a DOM Node corresponding to one of the children of a given VNode.
  *
@@ -1792,6 +1810,11 @@ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
                             let refNode = (_b = orgLocationNode['s-nr']) !== null && _b !== void 0 ? _b : null;
                             if (refNode && refNode['s-sn'] === nodeToRelocate['s-sn'] && parentNodeRef === refNode.parentNode) {
                                 refNode = refNode.nextSibling;
+                                // If the refNode is the same node to be relocated or another element's slot reference, keep searching to find the
+                                // correct relocation target
+                                while (refNode === nodeToRelocate || (refNode === null || refNode === void 0 ? void 0 : refNode['s-sr'])) {
+                                    refNode = refNode === null || refNode === void 0 ? void 0 : refNode.nextSibling;
+                                }
                                 if (!refNode || !refNode['s-nr']) {
                                     insertBeforeNode = refNode;
                                     break;
@@ -2618,7 +2641,7 @@ const patchSlotAppendChild = (HostElementPrototype) => {
     HostElementPrototype.__appendChild = HostElementPrototype.appendChild;
     HostElementPrototype.appendChild = function (newChild) {
         const slotName = (newChild['s-sn'] = getSlotName(newChild));
-        const slotNode = getHostSlotNode(this.childNodes, slotName);
+        const slotNode = getHostSlotNode(this.childNodes, slotName, this.tagName);
         if (slotNode) {
             const slotChildNodes = getHostSlotChildNodes(slotNode, slotName);
             const appendAfter = slotChildNodes[slotChildNodes.length - 1];
@@ -2641,7 +2664,7 @@ const patchSlotRemoveChild = (ElementPrototype) => {
     ElementPrototype.__removeChild = ElementPrototype.removeChild;
     ElementPrototype.removeChild = function (toRemove) {
         if (toRemove && typeof toRemove['s-sn'] !== 'undefined') {
-            const slotNode = getHostSlotNode(this.childNodes, toRemove['s-sn']);
+            const slotNode = getHostSlotNode(this.childNodes, toRemove['s-sn'], this.tagName);
             if (slotNode) {
                 // Get all slot content
                 const slotChildNodes = getHostSlotChildNodes(slotNode, toRemove['s-sn']);
@@ -2672,7 +2695,7 @@ const patchSlotPrepend = (HostElementPrototype) => {
                 newChild = this.ownerDocument.createTextNode(newChild);
             }
             const slotName = (newChild['s-sn'] = getSlotName(newChild));
-            const slotNode = getHostSlotNode(this.childNodes, slotName);
+            const slotNode = getHostSlotNode(this.childNodes, slotName, this.tagName);
             if (slotNode) {
                 const slotPlaceholder = document.createTextNode('');
                 slotPlaceholder['s-nr'] = newChild;
@@ -2889,17 +2912,18 @@ const getSlotName = (node) => node['s-sn'] || (node.nodeType === 1 && node.getAt
  * Recursively searches a series of child nodes for a slot with the provided name.
  * @param childNodes the nodes to search for a slot with a specific name.
  * @param slotName the name of the slot to match on.
+ * @param hostName the host name of the slot to match on.
  * @returns a reference to the slot node that matches the provided name, `null` otherwise
  */
-const getHostSlotNode = (childNodes, slotName) => {
+const getHostSlotNode = (childNodes, slotName, hostName) => {
     let i = 0;
     let childNode;
     for (; i < childNodes.length; i++) {
         childNode = childNodes[i];
-        if (childNode['s-sr'] && childNode['s-sn'] === slotName) {
+        if (childNode['s-sr'] && childNode['s-sn'] === slotName && childNode['s-hn'] === hostName) {
             return childNode;
         }
-        childNode = getHostSlotNode(childNode.childNodes, slotName);
+        childNode = getHostSlotNode(childNode.childNodes, slotName, hostName);
         if (childNode) {
             return childNode;
         }

package/dist/cjs/{index-5cf05f94.js → index-defd575f.js}

@@ -4,10 +4,10 @@
 'use strict';
 
 const index$1 = require('./index-c8d52405.js');
-const hardwareBackButton = require('./hardware-back-button-ad9299b4.js');
+const hardwareBackButton = require('./hardware-back-button-44e7c052.js');
 const index = require('./index-5915f9b3.js');
 const helpers = require('./helpers-afaa9001.js');
-const ionicGlobal = require('./ionic-global-1adf9bc4.js');
+const ionicGlobal = require('./ionic-global-62487d02.js');
 const animation = require('./animation-b4fdf128.js');
 
 /**

package/dist/cjs/index.cjs.js

@@ -6,21 +6,21 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const animation = require('./animation-b4fdf128.js');
-const index = require('./index-ff66cc7c.js');
-const ios_transition = require('./ios.transition-06673f18.js');
-const md_transition = require('./md.transition-4d7bb4b1.js');
+const index = require('./index-6d6ac424.js');
+const ios_transition = require('./ios.transition-d4f0ca4e.js');
+const md_transition = require('./md.transition-857328f3.js');
 const cubicBezier = require('./cubic-bezier-f2dccc53.js');
 const index$1 = require('./index-ee07ed59.js');
-const ionicGlobal = require('./ionic-global-1adf9bc4.js');
+const ionicGlobal = require('./ionic-global-62487d02.js');
 const helpers = require('./helpers-afaa9001.js');
 const config = require('./config-4f60b98a.js');
 const theme = require('./theme-d1c573d2.js');
-const index$2 = require('./index-5cf05f94.js');
-const overlays = require('./overlays-6487955a.js');
+const index$2 = require('./index-defd575f.js');
+const overlays = require('./overlays-10c452b2.js');
 require('./index-c8d52405.js');
-require('./index-af6d0fbb.js');
+require('./index-bbc6c29f.js');
 require('./gesture-controller-9436f482.js');
-require('./hardware-back-button-ad9299b4.js');
+require('./hardware-back-button-44e7c052.js');
 require('./index-5915f9b3.js');
 require('./framework-delegate-55f5683a.js');
 

package/dist/cjs/ion-accordion_2.cjs.entry.js

@@ -5,10 +5,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-af6d0fbb.js');
+const index = require('./index-bbc6c29f.js');
 const helpers = require('./helpers-afaa9001.js');
 const index$1 = require('./index-073c7cdc.js');
-const ionicGlobal = require('./ionic-global-1adf9bc4.js');
+const ionicGlobal = require('./ionic-global-62487d02.js');
 const index$2 = require('./index-5915f9b3.js');
 
 const accordionIosCss = ":host{display:block;position:relative;width:100%;background-color:var(--ion-background-color, #ffffff);overflow:hidden;z-index:0}:host(.accordion-expanding) ::slotted(ion-item[slot=header]),:host(.accordion-expanded) ::slotted(ion-item[slot=header]){--border-width:0px}:host(.accordion-animated){-webkit-transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-animated) #content{-webkit-transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}#content{overflow:hidden;will-change:max-height}:host(.accordion-collapsing) #content{max-height:0 !important}:host(.accordion-collapsed) #content{display:none}:host(.accordion-expanding) #content{max-height:0}:host(.accordion-expanding) #content-wrapper{overflow:auto}:host(.accordion-disabled) #header,:host(.accordion-readonly) #header,:host(.accordion-disabled) #content,:host(.accordion-readonly) #content{pointer-events:none}:host(.accordion-disabled) #header,:host(.accordion-disabled) #content{opacity:0.4}@media (prefers-reduced-motion: reduce){:host,#content{-webkit-transition:none !important;transition:none !important}}:host(.accordion-next) ::slotted(ion-item[slot=header]){--border-width:0.55px 0px 0.55px 0px}";

package/dist/cjs/ion-action-sheet.cjs.entry.js

@@ -5,20 +5,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-af6d0fbb.js');
-const buttonActive = require('./button-active-bd13859e.js');
+const index = require('./index-bbc6c29f.js');
+const buttonActive = require('./button-active-564be49f.js');
 const helpers = require('./helpers-afaa9001.js');
 const lockController = require('./lock-controller-6585a42a.js');
-const overlays = require('./overlays-6487955a.js');
+const overlays = require('./overlays-10c452b2.js');
 const theme = require('./theme-d1c573d2.js');
-const ionicGlobal = require('./ionic-global-1adf9bc4.js');
+const ionicGlobal = require('./ionic-global-62487d02.js');
 const animation = require('./animation-b4fdf128.js');
 require('./haptic-f6b37aa3.js');
 require('./capacitor-c04564bf.js');
 require('./index-c8d52405.js');
 require('./index-ee07ed59.js');
 require('./gesture-controller-9436f482.js');
-require('./hardware-back-button-ad9299b4.js');
+require('./hardware-back-button-44e7c052.js');
 require('./framework-delegate-55f5683a.js');
 require('./index-5915f9b3.js');
 
@@ -297,12 +297,12 @@ const ActionSheet = class {
         const cancelButton = allButtons.find((b) => b.role === 'cancel');
         const buttons = allButtons.filter((b) => b.role !== 'cancel');
         const headerID = `action-sheet-${overlayIndex}-header`;
-        return (index.h(index.Host, Object.assign({ key: 'b81b5301c2544d6474561047fa8f3cf1b27882fb', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
+        return (index.h(index.Host, Object.assign({ key: 'b640e9730af4bd9ec569884cf203c63102e0ea59', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({ [mode]: true }, theme.getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), index.h("ion-backdrop", { key: 'b98bfa2ed6b6c8f5648f5fe52968c7f79fd3557b', tappable: this.backdropDismiss }), index.h("div", { key: '15354a41ab7eb1014bb65638dad9daa7c8bf8167', tabindex: "0" }), index.h("div", { key: 'dff2e93f5f44b5f6488cf2a7da55563ce9a9cfdb', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, index.h("div", { key: '25981afc3a174fb44a6d97b4118b3a39792211c8', class: "action-sheet-container" }, index.h("div", { key: '5a9d5174b3fe7b59e08f8022df8ead909650da53', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (index.h("div", { id: headerID, class: {
+            }, class: Object.assign(Object.assign({ [mode]: true }, theme.getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), index.h("ion-backdrop", { key: 'bcfa5b7ffb5c265ef54caa114e697ada11f20c12', tappable: this.backdropDismiss }), index.h("div", { key: '207ae95b5365ce1d76170a05bdf8c83c3ba5de42', tabindex: "0" }), index.h("div", { key: 'bf2b4e8d57c822a4ea2bbe6c34b1b2f2067e4c02', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, index.h("div", { key: '9c4841eb03ca1378c5abc1e3aafbbcfaaa43c345', class: "action-sheet-container" }, index.h("div", { key: 'fa438b8663f5d30852e5967da0471489efa783b2', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (index.h("div", { key: '2c600f1cd8314d65137fb1bfa180312b4791121a', id: headerID, class: {
                 'action-sheet-title': true,
                 'action-sheet-has-sub-title': this.subHeader !== undefined,
-            } }, header, this.subHeader && index.h("div", { class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (index.h("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), index.h("span", { class: "action-sheet-button-inner" }, b.icon && index.h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && index.h("ion-ripple-effect", null))))), cancelButton && (index.h("div", { class: "action-sheet-group action-sheet-group-cancel" }, index.h("button", Object.assign({}, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), index.h("span", { class: "action-sheet-button-inner" }, cancelButton.icon && (index.h("ion-icon", { icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && index.h("ion-ripple-effect", null)))))), index.h("div", { key: 'b1891248a8269c9077f48cd4af210072daf7c119', tabindex: "0" })));
+            } }, header, this.subHeader && index.h("div", { key: 'a98d6a3f7948733de22a07432e56255f11243b7b', class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (index.h("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), index.h("span", { class: "action-sheet-button-inner" }, b.icon && index.h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && index.h("ion-ripple-effect", null))))), cancelButton && (index.h("div", { key: '5c5abd0e0b3d486ba2bfe437e28a23b2c7c4c955', class: "action-sheet-group action-sheet-group-cancel" }, index.h("button", Object.assign({ key: '520a23bbbe6c7436f5bc58bad162d7894b870e54' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), index.h("span", { key: '28c90f66786ee82316adc6cfd68d322d2038357d', class: "action-sheet-button-inner" }, cancelButton.icon && (index.h("ion-icon", { key: 'fd49fcea260c7addc9b07718eeb02d4fa6e4d900', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && index.h("ion-ripple-effect", { key: 'c83f636e171fe77635a4fce2b97161447e10546a' })))))), index.h("div", { key: 'd304920fc7cb006b87542183a3224a7e460abd3d', tabindex: "0" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ion-alert.cjs.entry.js

@@ -5,21 +5,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-af6d0fbb.js');
+const index = require('./index-bbc6c29f.js');
 const config = require('./config-4f60b98a.js');
-const buttonActive = require('./button-active-bd13859e.js');
+const buttonActive = require('./button-active-564be49f.js');
 const helpers = require('./helpers-afaa9001.js');
 const lockController = require('./lock-controller-6585a42a.js');
-const overlays = require('./overlays-6487955a.js');
+const overlays = require('./overlays-10c452b2.js');
 const theme = require('./theme-d1c573d2.js');
-const ionicGlobal = require('./ionic-global-1adf9bc4.js');
+const ionicGlobal = require('./ionic-global-62487d02.js');
 const animation = require('./animation-b4fdf128.js');
 require('./haptic-f6b37aa3.js');
 require('./capacitor-c04564bf.js');
 require('./index-c8d52405.js');
 require('./index-ee07ed59.js');
 require('./gesture-controller-9436f482.js');
-require('./hardware-back-button-ad9299b4.js');
+require('./hardware-back-button-44e7c052.js');
 require('./framework-delegate-55f5683a.js');
 require('./index-5915f9b3.js');
 
@@ -495,9 +495,9 @@ const Alert = class {
          * If neither is defined, don't set aria-labelledby.
          */
         const ariaLabelledBy = header ? hdrId : subHeader ? subHdrId : null;
-        return (index.h(index.Host, Object.assign({ key: 'fe991967332781c792690760d63857f28e20e928', role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "-1" }, htmlAttributes, { style: {
+        return (index.h(index.Host, Object.assign({ key: 'b1875ea565c40a25915e26e61864f8c61d840ccc', role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), index.h("ion-backdrop", { key: 'd2cf69281264c779cd583acc6466b67bbeffff77', tappable: this.backdropDismiss }), index.h("div", { key: 'cf1613444b085bf41326703a8ee39a0e7da4fbbd', tabindex: "0" }), index.h("div", { key: 'da4106c5da97987844b9404d968e895d3399d09b', class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, index.h("div", { key: '0880f30325c25f08a27f5feaf44c497c64318819', class: "alert-head" }, header && (index.h("h2", { id: hdrId, class: "alert-title" }, header)), subHeader && (index.h("h2", { id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), index.h("div", { key: '20c5e7f555e64750e5043aa62a511f2b56cc9e42', tabindex: "0" })));
+            }, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), index.h("ion-backdrop", { key: '37d9d7d1a47bfa23c3bb8d8d9805f52a5bbedf61', tappable: this.backdropDismiss }), index.h("div", { key: '0134cc90b7f02dcdd13dfdc39a72f2259182de90', tabindex: "0" }), index.h("div", { key: 'ed054b063ec2d1847b3234d5bdf3e66054784ed7', class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, index.h("div", { key: 'fb81befae081424f03c64b434ffdd79bb1b00d0c', class: "alert-head" }, header && (index.h("h2", { key: '92596dfdd92c4f63c82ed86b4a2473b3110daae3', id: hdrId, class: "alert-title" }, header)), subHeader && (index.h("h2", { key: 'ba7a0734cf818224f453604ec638770ca61bfef6', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), index.h("div", { key: '41a2619836a4af5d158216ef14b49985c7941b78', tabindex: "0" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {