@esri/calcite-components 1.0.0-next.320 → 1.0.0-next.324

package/dist/collection/components/calcite-select/calcite-select.js

@@ -3,11 +3,10 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Event, Fragment, h, Listen, Method, Prop, Watch } from "@stencil/core";
-import { focusElement, getElementDir } from "../../utils/dom";
+import { focusElement } from "../../utils/dom";
 import { connectLabel, disconnectLabel } from "../../utils/label";
 import { afterConnectDefaultValueSet, connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 import { CSS } from "./resources";
-import { CSS_UTILITY } from "../../utils/resources";
 import { createObserver } from "../../utils/observers";
 function isOption(optionOrGroup) {
   return optionOrGroup.tagName === "CALCITE-OPTION";
@@ -194,16 +193,15 @@ export class CalciteSelect {
   //  Render Methods
   //
   //--------------------------------------------------------------------------
-  renderChevron(dir) {
-    return (h("div", { class: { [CSS.iconContainer]: true, [CSS_UTILITY.rtl]: dir === "rtl" } },
+  renderChevron() {
+    return (h("div", { class: CSS.iconContainer },
       h("calcite-icon", { class: CSS.icon, icon: "chevron-down", scale: "s" })));
   }
   render() {
-    const dir = getElementDir(this.el);
     return (h(Fragment, null,
-      h("select", { "aria-label": this.label, class: { [CSS.select]: true, [CSS_UTILITY.rtl]: dir === "rtl" }, disabled: this.disabled, onChange: this.handleInternalSelectChange, ref: this.storeSelectRef },
+      h("select", { "aria-label": this.label, class: CSS.select, disabled: this.disabled, onChange: this.handleInternalSelectChange, ref: this.storeSelectRef },
         h("slot", null)),
-      this.renderChevron(dir),
+      this.renderChevron(),
       h(HiddenFormInputSlot, { component: this })));
   }
   static get is() { return "calcite-select"; }

package/dist/collection/components/calcite-shell/calcite-shell.css

@@ -47,13 +47,17 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-internal-animation-timing-factor: var(--calcite-animation-timing-factor, 1);
+  --calcite-internal-animation-timing: calc(150ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-quick: calc(100ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-animation-timing-factor));
 }
 
 .calcite-animate {
   opacity: 0;
   animation-fill-mode: both;
-  animation-duration: var(--calcite-animation-timing);
+  animation-duration: var(--calcite-internal-animation-timing);
 }
 
 .calcite-animate__in {
@@ -196,7 +200,7 @@ slot[name=center-row]::slotted(calcite-shell-center-row:not([detached])) {
   border-radius: 0.25rem;
   box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);
   position: absolute;
-  animation: in-up var(--calcite-animation-timing) ease-in-out;
+  animation: in-up var(--calcite-internal-animation-timing-slow) ease-in-out;
   box-sizing: border-box;
   bottom: 0.5rem;
   left: var(--calcite-shell-tip-spacing);

package/dist/collection/components/calcite-shell-center-row/calcite-shell-center-row.css

@@ -47,13 +47,17 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-internal-animation-timing-factor: var(--calcite-animation-timing-factor, 1);
+  --calcite-internal-animation-timing: calc(150ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-quick: calc(100ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-animation-timing-factor));
 }
 
 .calcite-animate {
   opacity: 0;
   animation-fill-mode: both;
-  animation-duration: var(--calcite-animation-timing);
+  animation-duration: var(--calcite-internal-animation-timing);
 }
 
 .calcite-animate__in {
@@ -124,7 +128,7 @@
   margin-bottom: 1.5rem;
   margin-left: 0.5rem;
   margin-right: 0.5rem;
-  animation: in-up var(--calcite-animation-timing) ease-in-out;
+  animation: in-up var(--calcite-internal-animation-timing-slow) ease-in-out;
 }
 
 :host([position=end]) {
@@ -157,28 +161,13 @@
 }
 
 ::slotted(calcite-action-bar) {
-  border-right-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-3);
+  border-inline-end-width: 1px;
 }
 
 ::slotted(calcite-action-bar[position=end]) {
-  border-left-width: 0;
-  border-right-width: 1px;
-  border-style: solid;
-  border-color: var(--calcite-ui-border-3);
-}
-
-.calcite--rtl ::slotted(calcite-action-bar) {
-  border-right-width: 0;
-  border-left-width: 1px;
-  border-style: solid;
-  border-color: var(--calcite-ui-border-3);
-}
-
-.calcite--rtl ::slotted(calcite-action-bar[position=end]) {
-  border-left-width: 0;
-  border-right-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-3);
+  border-inline-width: 0 1px;
 }

package/dist/collection/components/calcite-shell-center-row/calcite-shell-center-row.js

@@ -4,8 +4,7 @@
  */
 import { Component, Element, Prop, h, Fragment } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";
-import { getElementDir, getSlotted } from "../../utils/dom";
-import { CSS_UTILITY } from "../../utils/resources";
+import { getSlotted } from "../../utils/dom";
 /**
  * @slot - A slot for adding content to the shell panel.
  * @slot action-bar - A slot for adding a `calcite-action-bar` to the panel.
@@ -37,11 +36,10 @@ export class CalciteShellCenterRow {
   // --------------------------------------------------------------------------
   render() {
     const { el } = this;
-    const rtl = getElementDir(el) === "rtl";
-    const contentNode = (h("div", { class: { [CSS.content]: true, [CSS_UTILITY.rtl]: rtl } },
+    const contentNode = (h("div", { class: CSS.content },
       h("slot", null)));
     const actionBar = getSlotted(el, SLOTS.actionBar);
-    const actionBarNode = actionBar ? (h("div", { class: { [CSS.actionBarContainer]: true, [CSS_UTILITY.rtl]: rtl } },
+    const actionBarNode = actionBar ? (h("div", { class: CSS.actionBarContainer },
       h("slot", { name: SLOTS.actionBar }))) : null;
     const children = [actionBarNode, contentNode];
     if ((actionBar === null || actionBar === void 0 ? void 0 : actionBar.position) === "end") {

package/dist/collection/components/calcite-shell-panel/calcite-shell-panel.css

@@ -47,13 +47,17 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-internal-animation-timing-factor: var(--calcite-animation-timing-factor, 1);
+  --calcite-internal-animation-timing: calc(150ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-quick: calc(100ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-animation-timing-factor));
 }
 
 .calcite-animate {
   opacity: 0;
   animation-fill-mode: both;
-  animation-duration: var(--calcite-animation-timing);
+  animation-duration: var(--calcite-internal-animation-timing);
 }
 
 .calcite-animate__in {
@@ -123,7 +127,7 @@
   pointer-events: auto;
   top: 0;
   transition-property: all;
-  transition-duration: 150ms;
+  transition-duration: var(--calcite-internal-animation-timing);
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
   width: 0.125rem;

package/dist/collection/components/calcite-shell-panel/calcite-shell-panel.js

@@ -4,7 +4,7 @@
  */
 import { Component, Element, Event, Prop, Watch, h, State, forceUpdate } from "@stencil/core";
 import { CSS, SLOTS, TEXT } from "./resources";
-import { getSlotted, getElementStyleDir } from "../../utils/dom";
+import { getSlotted, getElementDir } from "../../utils/dom";
 import { clamp } from "../../utils/math";
 /**
  * @slot - A slot for adding content to the shell panel.
@@ -69,7 +69,7 @@ export class CalciteShellPanel {
       if (MOVEMENT_KEYS.indexOf(key) > -1) {
         event.preventDefault();
       }
-      const dir = getElementStyleDir(el);
+      const dir = getElementDir(el);
       const directionKeys = ["ArrowLeft", "ArrowRight"];
       const directionFactor = dir === "rtl" && directionKeys.includes(key) ? -1 : 1;
       const increaseKeys = key === "ArrowUp" ||
@@ -109,7 +109,7 @@ export class CalciteShellPanel {
       event.preventDefault();
       const { el, initialContentWidth, position, initialClientX } = this;
       const offset = event.clientX - initialClientX;
-      const dir = getElementStyleDir(el);
+      const dir = getElementDir(el);
       const adjustmentDirection = dir === "rtl" ? -1 : 1;
       const adjustedOffset = position === "end" ? -adjustmentDirection * offset : adjustmentDirection * offset;
       const width = initialContentWidth + adjustedOffset;

package/dist/collection/components/calcite-slider/calcite-slider.css

@@ -49,13 +49,17 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-internal-animation-timing-factor: var(--calcite-animation-timing-factor, 1);
+  --calcite-internal-animation-timing: calc(150ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-quick: calc(100ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-animation-timing-factor));
 }
 
 .calcite-animate {
   opacity: 0;
   animation-fill-mode: both;
-  animation-duration: var(--calcite-animation-timing);
+  animation-duration: var(--calcite-internal-animation-timing);
 }
 
 .calcite-animate__in {
@@ -86,6 +90,46 @@
   display: none;
 }
 
+.scale--s {
+  --calcite-slider-handle-size: 10px;
+  --calcite-slider-handle-extension-height: 6.5px;
+  --calcite-slider-container-font-size: var(--calcite-font-size--3);
+}
+
+.scale--s .handle__label,
+.scale--s .tick__label {
+  line-height: .75rem;
+}
+
+.scale--m {
+  --calcite-slider-handle-size: 14px;
+  --calcite-slider-handle-extension-height: 8px;
+  --calcite-slider-container-font-size: var(--calcite-font-size--2);
+}
+
+.scale--m .handle__label,
+.scale--m .tick__label {
+  line-height: 1rem;
+}
+
+.scale--l {
+  --calcite-slider-handle-size: 16px;
+  --calcite-slider-handle-extension-height: 10.5px;
+  --calcite-slider-container-font-size: var(--calcite-font-size--1);
+}
+
+.scale--l .handle__label,
+.scale--l .tick__label {
+  line-height: 1rem;
+}
+
+.handle__label,
+.tick__label {
+  font-weight: var(--calcite-font-weight-medium);
+  color: var(--calcite-ui-text-2);
+  font-size: var(--calcite-slider-container-font-size);
+}
+
 :host {
   display: block;
 }
@@ -93,8 +137,11 @@
 .container {
   display: block;
   position: relative;
-  padding: 7px 0;
-  margin: 7px 0.5rem;
+  padding: calc(var(--calcite-slider-handle-size) * 0.5);
+  margin: calc(var(--calcite-slider-handle-size) * 0.5) 0;
+  --calcite-slider-full-handle-height: calc(
+    var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height)
+  );
 }
 
 :host([disabled]) {
@@ -107,34 +154,29 @@
   background-color: var(--calcite-ui-text-3);
 }
 
-:host([disabled]) .graph .graph-path--highlight {
-  fill: var(--calcite-ui-text-3);
+.scale--s .thumb:not(.thumb--precise) {
+  --calcite-slider-thumb-y-offset: -6px;
 }
 
-/*
- * Ensure we have enough space on variants
- * with text elements to prevent overlap
- */
-
-:host([label-handles]) .container,
-:host([precise]:not([precise=false])) .container {
-  margin-top: 21px;
+.scale--m .thumb:not(.thumb--precise) {
+  --calcite-slider-thumb-y-offset: -8px;
 }
 
-:host([label-ticks]),
-:host([precise]:not([precise=false])) .container--range {
-  margin-bottom: 21px;
+.scale--l .thumb:not(.thumb--precise) {
+  --calcite-slider-thumb-y-offset: -9px;
 }
 
-:host([precise]:not([precise=false])[label-handles]) .container {
-  margin-top: 35px;
+:host([precise]:not([has-histogram])) .container .thumb--value {
+  --calcite-slider-thumb-y-offset: calc(var(--calcite-slider-full-handle-height) * -1);
 }
 
-:host([precise]:not([precise=false])[label-handles]) .container--range {
-  margin-bottom: 35px;
+.thumb-container {
+  max-width: 100%;
+  position: relative;
 }
 
 .thumb {
+  --calcite-slider-thumb-x-offset: calc(var(--calcite-slider-handle-size) * 0.5);
   position: absolute;
   border-style: none;
   background-color: transparent;
@@ -147,16 +189,7 @@
   flex-direction: column;
   align-items: center;
   font-family: inherit;
-  z-index: 2;
-  transform: translate(7px, -8px);
-}
-
-.thumb .handle__label {
-  font-size: var(--calcite-font-size--2);
-  font-weight: 500;
-  line-height: 1;
-  color: var(--calcite-ui-text-2);
-  margin-bottom: 5px;
+  transform: translate(var(--calcite-slider-thumb-x-offset), var(--calcite-slider-thumb-y-offset));
 }
 
 .thumb .handle__label.static, .thumb .handle__label.transformed {
@@ -176,18 +209,18 @@
   outline-offset: 0;
   outline-color: transparent;
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
-  height: 14px;
-  width: 14px;
   box-sizing: border-box;
-  border-radius: 100%;
+  border-radius: 9999px;
   background-color: var(--calcite-ui-foreground-1);
+  height: var(--calcite-slider-handle-size);
+  width: var(--calcite-slider-handle-size);
   box-shadow: 0 0 0 2px var(--calcite-ui-text-3) inset;
   transition: border 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
 }
 
 .thumb .handle-extension {
-  width: 2px;
-  height: 7px;
+  width: 0.125rem;
+  height: var(--calcite-slider-handle-extension-height);
   background-color: var(--calcite-ui-text-3);
 }
 
@@ -202,112 +235,56 @@
 .thumb:focus .handle {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: 2px;
-  outline-offset: 2px;
 }
 
 .thumb:focus .handle-extension {
   background-color: var(--calcite-ui-brand);
 }
 
-.thumb--minValue {
-  transform: translate(-7px, -8px);
-}
-
-/* uncomment for helpful debugging UI */
-
-:host([label-handles]) .thumb {
-  transform: translate(50%, -25px);
-}
-
-:host([label-handles]) .thumb--minValue {
-  transform: translate(-50%, -25px);
-}
-
-:host([has-histogram][label-handles]) .thumb {
-  transform: translate(50%, -8px);
-}
-
-:host([has-histogram][label-handles]) .thumb .handle__label {
-  margin-bottom: unset;
-  margin-top: 5px;
-}
-
-:host([has-histogram][label-handles]) .thumb--minValue {
-  transform: translate(-50%, -8px);
-}
-
-:host([precise]:not([precise=false])) .thumb {
-  transform: translate(7px, -21px);
-}
-
-:host([precise]:not([precise=false])) .thumb--minValue {
-  transform: translate(-7px, -2px);
+.thumb.thumb--minValue {
+  transform: translate(calc(var(--calcite-slider-thumb-x-offset) * -1), var(--calcite-slider-thumb-y-offset));
 }
 
-:host([precise]:not([precise=false])) .thumb--minValue .handle__label {
-  margin-bottom: unset;
-  margin-top: 5px;
+.thumb.thumb--precise {
+  --calcite-slider-thumb-y-offset: -2px;
 }
 
-:host([has-histogram][precise]:not([precise=false])) .thumb {
-  transform: translate(7px, -2px);
-}
-
-:host([has-histogram][precise]:not([precise=false])) .thumb--minValue {
-  transform: translate(-50%, -2px);
-}
-
-:host([ticks][precise]:not([precise=false])) .thumb {
-  transform: translate(7px, -20px);
-}
-
-:host([ticks][precise]:not([precise=false])) .thumb--minValue {
-  transform: translate(-7px, -3px);
-}
-
-:host([has-histogram][ticks][precise]:not([precise=false])) .thumb {
-  transform: translate(7px, -3px);
-}
-
-:host([has-histogram][ticks][precise]:not([precise=false])) .thumb--minValue {
-  transform: translate(-50%, -3px);
-}
-
-:host([label-handles][precise]:not([precise=false])) .thumb {
-  transform: translate(50%, -38px);
+:host([label-handles]) .thumb {
+  --calcite-slider-thumb-x-offset: 50%;
 }
 
-:host([label-handles][precise]:not([precise=false])) .thumb--minValue {
-  transform: translate(-50%, -2px);
+:host([label-handles]):host(:not([has-histogram])) .scale--s .thumb:not(.thumb--precise) {
+  --calcite-slider-thumb-y-offset: -23px;
 }
 
-:host([has-histogram][label-handles][precise]:not([precise=false])) .thumb {
-  transform: translate(50%, -2px);
+:host([label-handles]):host(:not([has-histogram])) .scale--m .thumb:not(.thumb--precise) {
+  --calcite-slider-thumb-y-offset: -30px;
 }
 
-:host([has-histogram][label-handles][precise]:not([precise=false])) .thumb--minValue {
-  transform: translate(-50%, -2px);
+:host([label-handles]):host(:not([has-histogram])) .scale--l .thumb:not(.thumb--precise) {
+  --calcite-slider-thumb-y-offset: -32px;
 }
 
-:host([ticks][label-handles][precise]:not([precise=false])) .thumb {
-  transform: translate(50%, -37px);
+:host([has-histogram][label-handles]) .handle__label,
+:host([label-handles]:not([has-histogram])) .thumb--minValue.thumb--precise .handle__label {
+  margin-top: 0.5em;
 }
 
-:host([ticks][label-handles][precise]:not([precise=false])) .thumb--minValue {
-  transform: translate(-50%, -3px);
+:host(:not([has-histogram]):not([precise])) .handle__label,
+:host([label-handles]:not([has-histogram])) .thumb--value .handle__label {
+  margin-bottom: 0.5em;
 }
 
-:host([has-histogram][ticks][label-handles][precise]:not([precise=false])) .thumb {
-  transform: translate(50%, -3px);
+:host([label-handles][precise]):host(:not([has-histogram])) .scale--s .thumb--value {
+  --calcite-slider-thumb-y-offset: -33px;
 }
 
-:host([has-histogram][ticks][label-handles][precise]:not([precise=false])) .thumb--minValue {
-  transform: translate(-50%, -3px);
+:host([label-handles][precise]):host(:not([has-histogram])) .scale--m .thumb--value {
+  --calcite-slider-thumb-y-offset: -44px;
 }
 
-.thumb:focus,
-.thumb--active {
-  z-index: 3;
+:host([label-handles][precise]):host(:not([has-histogram])) .scale--l .thumb--value {
+  --calcite-slider-thumb-y-offset: -49px;
 }
 
 .thumb:focus .handle,
@@ -323,18 +300,17 @@
 }
 
 .track {
-  height: 2px;
+  height: 0.125rem;
   border-radius: 0;
-  z-index: 1;
+  position: relative;
   background-color: var(--calcite-ui-border-2);
   transition: all 250ms ease-in;
-  position: relative;
 }
 
 .track__range {
   position: absolute;
   top: 0;
-  height: 2px;
+  height: 0.125rem;
   background-color: var(--calcite-ui-brand);
 }
 
@@ -343,23 +319,24 @@
 }
 
 .container--range .track__range:after {
-  content: "";
   position: absolute;
-  top: -5px;
   width: 100%;
-  height: 14px;
+  content: "";
+  top: calc(var(--calcite-slider-full-handle-height) * 0.5 * -1);
+  height: calc(var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height));
 }
 
 .tick {
   position: absolute;
+  width: 0.125rem;
+  height: 0.25rem;
+  border-width: 1px;
+  border-style: solid;
+  background-color: var(--calcite-ui-border-input);
+  border-color: var(--calcite-ui-foreground-1);
   top: -2px;
-  width: 2px;
-  height: 4px;
-  left: var(--calcite-ui-border-1-offset);
-  margin-left: -2px;
-  border: 1px solid var(--calcite-ui-foreground-1);
-  background-color: var(--calcite-ui-border-1);
   pointer-events: none;
+  margin-inline-start: calc(-1 * 0.125rem);
 }
 
 .tick--active {
@@ -367,43 +344,25 @@
 }
 
 .tick__label {
-  position: absolute;
-  font-size: var(--calcite-font-size--2);
-  font-weight: 500;
-  color: var(--calcite-ui-text-2);
-  width: 4em;
-  margin: 14px -2em;
-  text-align: center;
-  display: block;
+  display: flex;
+  justify-content: center;
   pointer-events: none;
+  margin-top: 0.875rem;
 }
 
 .tick__label--min {
-  left: 0;
-  margin: 14px -3px;
-  text-align: left;
   transition: opacity 150ms;
 }
 
 .tick__label--max {
-  left: unset;
-  right: 0;
-  margin: 14px -3px;
-  text-align: right;
   transition: opacity 50ms;
 }
 
 :host([has-histogram][label-handles]) .tick__label--min,
-:host([has-histogram][label-handles]) .tick__label--max {
-  margin: 6px -3px;
-  font-weight: 300;
-  color: var(--calcite-ui-text-3);
-}
-
-:host([has-histogram][precise]:not([precise=false])) .tick__label--min,
-:host([has-histogram][precise]:not([precise=false])) .tick__label--max {
-  margin: 6px -3px;
-  font-weight: 300;
+:host([has-histogram][label-handles]) .tick__label--max,
+:host([has-histogram][precise]) .tick__label--min,
+:host([has-histogram][precise]) .tick__label--max {
+  font-weight: var(--calcite-font-weight-normal);
   color: var(--calcite-ui-text-3);
 }
 
@@ -411,16 +370,40 @@
   color: var(--calcite-ui-foreground-3);
 }
 
-:host([mirrored]:not([has-histogram])) .tick__label--min {
-  right: 0;
-  left: unset;
-  text-align: right;
+:host([label-ticks][ticks]) .container {
+  padding-bottom: calc(0.875rem + var(--calcite-slider-container-font-size));
+}
+
+:host([has-histogram]):host([precise][label-handles]) .container {
+  padding-bottom: calc(var(--calcite-slider-full-handle-height) + 1em);
+}
+
+:host([has-histogram]):host([label-handles]:not([precise])) .container {
+  padding-bottom: calc(var(--calcite-slider-handle-size) * 0.5 + 1em);
+}
+
+:host([has-histogram]):host([precise]:not([label-handles])) .container {
+  padding-bottom: var(--calcite-slider-full-handle-height);
+}
+
+:host(:not([has-histogram])):host([precise]:not([label-handles])) .container {
+  padding-top: var(--calcite-slider-full-handle-height);
+}
+
+:host(:not([has-histogram])):host([precise]:not([label-handles])) .container--range {
+  padding-bottom: var(--calcite-slider-full-handle-height);
+}
+
+:host(:not([has-histogram])):host([label-handles]:not([precise])) .container {
+  padding-top: calc(var(--calcite-slider-full-handle-height) + 4px);
+}
+
+:host(:not([has-histogram])):host([label-handles][precise]) .container {
+  padding-top: calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px);
 }
 
-:host([mirrored]:not([has-histogram])) .tick__label--max {
-  right: unset;
-  left: 0;
-  text-align: left;
+:host(:not([has-histogram])):host([label-handles][precise]) .container--range {
+  padding-bottom: calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px);
 }
 
 ::slotted(input[slot=hidden-form-input]) {