@esri/calcite-components 1.0.0-next.323 → 1.0.0-next.327

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

@@ -90,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;
 }
@@ -97,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]) {
@@ -111,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;
@@ -151,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 {
@@ -180,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);
 }
 
@@ -206,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,
@@ -327,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);
 }
 
@@ -347,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 {
@@ -371,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);
 }
 
@@ -415,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]) {

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

@@ -45,6 +45,10 @@ export class CalciteSlider {
     this.step = 1;
     /** Currently selected number (if single select) */
     this.value = null;
+    /**
+     * Specify the scale of the slider, defaults to m
+     */
+    this.scale = "m";
     this.guid = `calcite-slider-${guid()}`;
     this.isRange = false;
     this.activeProp = "value";
@@ -259,7 +263,11 @@ export class CalciteSlider {
       h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue static" }, this.minValue && this.minValue.toLocaleString()),
       h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue transformed" }, this.minValue && this.minValue.toLocaleString())));
     return (h(Host, { id: id, onTouchStart: this.handleTouchStart },
-      h("div", { class: { container: true, "container--range": this.isRange } },
+      h("div", { class: {
+          ["container"]: true,
+          ["container--range"]: this.isRange,
+          [`scale--${this.scale}`]: true
+        } },
         this.renderGraph(),
         h("div", { class: "track", ref: this.storeTrackRef },
           h("div", { class: "track__range", onPointerDown: () => this.dragStart("minMaxValue"), style: {
@@ -280,27 +288,31 @@ export class CalciteSlider {
                 right: mirror ? tickOffset : ""
               } }, this.renderTickLabel(tick)));
           }))),
-        !this.precise && !this.labelHandles && this.isRange && minHandle,
-        !this.hasHistogram &&
-          !this.precise &&
-          this.labelHandles &&
-          this.isRange &&
-          minLabeledHandle,
-        this.precise && !this.labelHandles && this.isRange && minPreciseHandle,
-        this.precise && this.labelHandles && this.isRange && minLabeledPreciseHandle,
-        this.hasHistogram &&
-          !this.precise &&
-          this.labelHandles &&
-          this.isRange &&
-          minHistogramLabeledHandle,
-        !this.precise && !this.labelHandles && handle,
-        !this.hasHistogram && !this.precise && this.labelHandles && labeledHandle,
-        !this.hasHistogram && this.precise && !this.labelHandles && preciseHandle,
-        this.hasHistogram && this.precise && !this.labelHandles && histogramPreciseHandle,
-        !this.hasHistogram && this.precise && this.labelHandles && labeledPreciseHandle,
-        this.hasHistogram && !this.precise && this.labelHandles && histogramLabeledHandle,
-        this.hasHistogram && this.precise && this.labelHandles && histogramLabeledPreciseHandle,
-        h(HiddenFormInputSlot, { component: this }))));
+        h("div", { class: "thumb-container" },
+          !this.precise && !this.labelHandles && this.isRange && minHandle,
+          !this.hasHistogram &&
+            !this.precise &&
+            this.labelHandles &&
+            this.isRange &&
+            minLabeledHandle,
+          this.precise && !this.labelHandles && this.isRange && minPreciseHandle,
+          this.precise && this.labelHandles && this.isRange && minLabeledPreciseHandle,
+          this.hasHistogram &&
+            !this.precise &&
+            this.labelHandles &&
+            this.isRange &&
+            minHistogramLabeledHandle,
+          !this.precise && !this.labelHandles && handle,
+          !this.hasHistogram && !this.precise && this.labelHandles && labeledHandle,
+          !this.hasHistogram && this.precise && !this.labelHandles && preciseHandle,
+          this.hasHistogram && this.precise && !this.labelHandles && histogramPreciseHandle,
+          !this.hasHistogram && this.precise && this.labelHandles && labeledPreciseHandle,
+          this.hasHistogram && !this.precise && this.labelHandles && histogramLabeledHandle,
+          this.hasHistogram &&
+            this.precise &&
+            this.labelHandles &&
+            histogramLabeledPreciseHandle,
+          h(HiddenFormInputSlot, { component: this })))));
   }
   renderGraph() {
     return this.histogram ? (h("div", { class: "graph" },
@@ -1143,6 +1155,29 @@ export class CalciteSlider {
       "attribute": "value",
       "reflect": true,
       "defaultValue": "null"
+    },
+    "scale": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Scale",
+        "resolved": "\"l\" | \"m\" | \"s\"",
+        "references": {
+          "Scale": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specify the scale of the slider, defaults to m"
+      },
+      "attribute": "scale",
+      "reflect": false,
+      "defaultValue": "\"m\""
     }
   }; }
   static get states() { return {

package/dist/collection/components/calcite-split-button/calcite-split-button.css

@@ -179,7 +179,10 @@
   width: 1px;
   display: flex;
   align-items: stretch;
-  transition: 0.15s ease-in-out;
+  transition-property: all;
+  transition-duration: var(--calcite-internal-animation-timing);
+  transition-timing-function: ease-in-out;
+  transition-delay: 0s;
   background-color: var(--calcite-split-button-background);
 }
 

package/dist/collection/components/calcite-tip-manager/calcite-tip-manager.css

@@ -202,7 +202,7 @@ h5.heading {
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
   margin-top: 1px;
   animation-name: none;
-  animation-duration: 150ms;
+  animation-duration: var(--calcite-internal-animation-timing);
   height: var(--calcite-tip-manager-height);
 }
 

package/dist/components/calcite-date-picker2.js

@@ -285,6 +285,12 @@ let CalciteDatePicker = class extends HTMLElement {
     this.activeEndDate = endDate;
     this.activeStartDate = startDate;
   }
+  onMinChanged(min) {
+    this.minAsDate = dateFromISO(min);
+  }
+  onMaxChanged(max) {
+    this.maxAsDate = dateFromISO(max);
+  }
   // --------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -314,6 +320,8 @@ let CalciteDatePicker = class extends HTMLElement {
   }
   async componentWillLoad() {
     await this.loadLocaleData();
+    this.onMinChanged(this.min);
+    this.onMaxChanged(this.max);
   }
   render() {
     var _a;
@@ -434,6 +442,8 @@ let CalciteDatePicker = class extends HTMLElement {
     "valueAsDate": ["handleValueAsDate"],
     "startAsDate": ["handleRangeChange"],
     "endAsDate": ["handleRangeChange"],
+    "min": ["onMinChanged"],
+    "max": ["onMaxChanged"],
     "value": ["valueHandler"],
     "start": ["startWatcher"],
     "end": ["endWatcher"],
@@ -450,8 +460,8 @@ CalciteDatePicker = /*@__PURE__*/ proxyCustomElement(CalciteDatePicker, [1, "cal
     "endAsDate": [1040],
     "minAsDate": [1040],
     "maxAsDate": [1040],
-    "min": [1],
-    "max": [1],
+    "min": [1025],
+    "max": [1025],
     "intlPrevMonth": [1, "intl-prev-month"],
     "intlNextMonth": [1, "intl-next-month"],
     "locale": [1],

package/dist/components/calcite-dropdown-item.js

@@ -16,7 +16,7 @@ const CSS = {
   containerNone: "container--none-selection"
 };
 
-const calciteDropdownItemCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--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;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-internal-animation-timing);animation-duration:var(--calcite-internal-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}.container--s{font-size:var(--calcite-font-size--2);line-height:1rem;padding-top:0.25rem;padding-bottom:0.25rem;-webkit-padding-end:0.5rem;padding-inline-end:0.5rem;-webkit-padding-start:1.5rem;padding-inline-start:1.5rem}.container--m{font-size:var(--calcite-font-size--1);line-height:1rem;padding-top:0.5rem;padding-bottom:0.5rem;-webkit-padding-end:0.75rem;padding-inline-end:0.75rem;-webkit-padding-start:2rem;padding-inline-start:2rem}.container--l{font-size:var(--calcite-font-size-0);line-height:1.25rem;padding-top:0.75rem;padding-bottom:0.75rem;-webkit-padding-end:1rem;padding-inline-end:1rem;-webkit-padding-start:2.5rem;padding-inline-start:2.5rem}:host{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;position:relative}.container{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;color:var(--calcite-ui-text-3);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);cursor:pointer;text-decoration:none;outline:2px solid transparent;outline-offset:2px;position:relative}.dropdown-item-content{-webkit-padding-end:auto;padding-inline-end:auto;-webkit-padding-start:0.25rem;padding-inline-start:0.25rem}:host,.container--link a{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}:host(:focus){outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.container--link{padding:0}.container--link a{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;color:var(--calcite-ui-text-3);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);cursor:pointer;text-decoration:none;outline:2px solid transparent;outline-offset:2px;position:relative}.container--s .dropdown-link{font-size:var(--calcite-font-size--2);line-height:1rem;padding-top:0.25rem;padding-bottom:0.25rem;-webkit-padding-end:0.5rem;padding-inline-end:0.5rem;-webkit-padding-start:1.5rem;padding-inline-start:1.5rem}.container--m .dropdown-link{font-size:var(--calcite-font-size--1);line-height:1rem;padding-top:0.5rem;padding-bottom:0.5rem;-webkit-padding-end:0.75rem;padding-inline-end:0.75rem;-webkit-padding-start:2rem;padding-inline-start:2rem}.container--l .dropdown-link{font-size:var(--calcite-font-size-0);line-height:1.25rem;padding-top:0.75rem;padding-bottom:0.75rem;-webkit-padding-end:1rem;padding-inline-end:1rem;-webkit-padding-start:2.5rem;padding-inline-start:2.5rem}:host(:hover) .container,:host(:active) .container{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1);text-decoration:none}:host(:hover) .container--link .dropdown-link,:host(:active) .container--link .dropdown-link{color:var(--calcite-ui-text-1)}:host(:focus) .container{color:var(--calcite-ui-text-1);text-decoration:none}:host(:active) .container{background-color:var(--calcite-ui-foreground-3)}:host(:hover) .container:before,:host(:active) .container:before,:host(:focus) .container:before{opacity:1}:host([active]) .container:not(.container--none-selection),:host([active]) .container--link .dropdown-link{color:var(--calcite-ui-text-1);font-weight:var(--calcite-font-weight-medium)}:host([active]) .container:not(.container--none-selection):before,:host([active]) .container--link .dropdown-link:before{opacity:1;color:var(--calcite-ui-brand)}:host([active]) .container:not(.container--none-selection) calcite-icon,:host([active]) .container--link .dropdown-link calcite-icon{color:var(--calcite-ui-brand)}.container--multi-selection:before,.container--none-selection:before{display:none}.container--s:before{inset-inline-start:0.5rem}.container--m:before{inset-inline-start:0.75rem}.container--l:before{inset-inline-start:1rem}.dropdown-item-icon{position:absolute;opacity:0;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transform:scale(0.9);transform:scale(0.9)}.container--s .dropdown-item-icon{inset-inline-start:0.25rem}.container--m .dropdown-item-icon{inset-inline-start:0.5rem}.container--l .dropdown-item-icon{inset-inline-start:0.75rem}:host(:hover) .dropdown-item-icon{color:var(--calcite-ui-border-1);opacity:1}:host([active]) .dropdown-item-icon{color:var(--calcite-ui-brand);opacity:1}.container--s .dropdown-item-icon-start{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem;-webkit-margin-start:0.25rem;margin-inline-start:0.25rem}.container--s .dropdown-item-icon-end{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}.container--m .dropdown-item-icon-start{-webkit-margin-end:0.75rem;margin-inline-end:0.75rem;-webkit-margin-start:0.25rem;margin-inline-start:0.25rem}.container--m .dropdown-item-icon-end{-webkit-margin-start:0.75rem;margin-inline-start:0.75rem}.container--l .dropdown-item-icon-start{-webkit-margin-end:1rem;margin-inline-end:1rem;-webkit-margin-start:0.25rem;margin-inline-start:0.25rem}.container--l .dropdown-item-icon-end{-webkit-margin-start:1rem;margin-inline-start:1rem}";
+const calciteDropdownItemCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--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;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-internal-animation-timing);animation-duration:var(--calcite-internal-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}.container--s{font-size:var(--calcite-font-size--2);line-height:1rem;padding-top:0.25rem;padding-bottom:0.25rem;-webkit-padding-end:0.5rem;padding-inline-end:0.5rem;-webkit-padding-start:1.5rem;padding-inline-start:1.5rem}.container--m{font-size:var(--calcite-font-size--1);line-height:1rem;padding-top:0.5rem;padding-bottom:0.5rem;-webkit-padding-end:0.75rem;padding-inline-end:0.75rem;-webkit-padding-start:2rem;padding-inline-start:2rem}.container--l{font-size:var(--calcite-font-size-0);line-height:1.25rem;padding-top:0.75rem;padding-bottom:0.75rem;-webkit-padding-end:1rem;padding-inline-end:1rem;-webkit-padding-start:2.5rem;padding-inline-start:2.5rem}.container--s.container--none-selection{-webkit-padding-start:0.25rem;padding-inline-start:0.25rem}.container--m.container--none-selection{-webkit-padding-start:0.5rem;padding-inline-start:0.5rem}.container--l.container--none-selection{-webkit-padding-start:0.75rem;padding-inline-start:0.75rem}:host{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;position:relative}.container{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;color:var(--calcite-ui-text-3);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);cursor:pointer;text-decoration:none;outline:2px solid transparent;outline-offset:2px;position:relative}.dropdown-item-content{-webkit-padding-end:auto;padding-inline-end:auto;-webkit-padding-start:0.25rem;padding-inline-start:0.25rem}:host,.container--link a{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}:host(:focus){outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.container--link{padding:0}.container--link a{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;color:var(--calcite-ui-text-3);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);cursor:pointer;text-decoration:none;outline:2px solid transparent;outline-offset:2px;position:relative}.container--s .dropdown-link{font-size:var(--calcite-font-size--2);line-height:1rem;padding-top:0.25rem;padding-bottom:0.25rem;-webkit-padding-end:0.5rem;padding-inline-end:0.5rem;-webkit-padding-start:1.5rem;padding-inline-start:1.5rem}.container--m .dropdown-link{font-size:var(--calcite-font-size--1);line-height:1rem;padding-top:0.5rem;padding-bottom:0.5rem;-webkit-padding-end:0.75rem;padding-inline-end:0.75rem;-webkit-padding-start:2rem;padding-inline-start:2rem}.container--l .dropdown-link{font-size:var(--calcite-font-size-0);line-height:1.25rem;padding-top:0.75rem;padding-bottom:0.75rem;-webkit-padding-end:1rem;padding-inline-end:1rem;-webkit-padding-start:2.5rem;padding-inline-start:2.5rem}:host(:hover) .container,:host(:active) .container{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1);text-decoration:none}:host(:hover) .container--link .dropdown-link,:host(:active) .container--link .dropdown-link{color:var(--calcite-ui-text-1)}:host(:focus) .container{color:var(--calcite-ui-text-1);text-decoration:none}:host(:active) .container{background-color:var(--calcite-ui-foreground-3)}:host(:hover) .container:before,:host(:active) .container:before,:host(:focus) .container:before{opacity:1}:host([active]) .container:not(.container--none-selection),:host([active]) .container--link .dropdown-link{color:var(--calcite-ui-text-1);font-weight:var(--calcite-font-weight-medium)}:host([active]) .container:not(.container--none-selection):before,:host([active]) .container--link .dropdown-link:before{opacity:1;color:var(--calcite-ui-brand)}:host([active]) .container:not(.container--none-selection) calcite-icon,:host([active]) .container--link .dropdown-link calcite-icon{color:var(--calcite-ui-brand)}.container--multi-selection:before,.container--none-selection:before{display:none}.container--s:before{inset-inline-start:0.5rem}.container--m:before{inset-inline-start:0.75rem}.container--l:before{inset-inline-start:1rem}.dropdown-item-icon{position:absolute;opacity:0;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transform:scale(0.9);transform:scale(0.9)}.container--s .dropdown-item-icon{inset-inline-start:0.25rem}.container--m .dropdown-item-icon{inset-inline-start:0.5rem}.container--l .dropdown-item-icon{inset-inline-start:0.75rem}:host(:hover) .dropdown-item-icon{color:var(--calcite-ui-border-1);opacity:1}:host([active]) .dropdown-item-icon{color:var(--calcite-ui-brand);opacity:1}.container--s .dropdown-item-icon-start{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem;-webkit-margin-start:0.25rem;margin-inline-start:0.25rem}.container--s .dropdown-item-icon-end{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}.container--m .dropdown-item-icon-start{-webkit-margin-end:0.75rem;margin-inline-end:0.75rem;-webkit-margin-start:0.25rem;margin-inline-start:0.25rem}.container--m .dropdown-item-icon-end{-webkit-margin-start:0.75rem;margin-inline-start:0.75rem}.container--l .dropdown-item-icon-start{-webkit-margin-end:1rem;margin-inline-end:1rem;-webkit-margin-start:0.25rem;margin-inline-start:0.25rem}.container--l .dropdown-item-icon-end{-webkit-margin-start:1rem;margin-inline-start:1rem}";
 
 let CalciteDropdownItem$1 = class extends HTMLElement {
   constructor() {