@esri/calcite-components 1.0.0-next.281 → 1.0.0-next.285

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

@@ -2,6 +2,7 @@ import { Component, Element, Event, Method, Prop, State, Watch, h } from "@stenc
 import { CSS, ICONS, TEXT, HEADING_LEVEL } from "./resources";
 import { getElementDir } from "../../utils/dom";
 import { CalciteHeading } from "../functional/CalciteHeading";
+import { createObserver } from "../../utils/observers";
 /**
  * @slot - A slot for adding `calcite-tip`s.
  */
@@ -16,7 +17,7 @@ export class CalciteTipManager {
      * Alternate text for closing the `calcite-tip-manager`.
      */
     this.closed = false;
-    this.observer = new MutationObserver(() => this.setUpTips());
+    this.mutationObserver = createObserver("mutation", () => this.setUpTips());
     this.hideTipManager = () => {
       this.closed = true;
       this.calciteTipManagerToggle.emit();
@@ -68,22 +69,26 @@ export class CalciteTipManager {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
+    var _a;
     this.setUpTips();
-    this.observer.observe(this.el, { childList: true, subtree: true });
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
   }
   disconnectedCallback() {
-    this.observer.disconnect();
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   // --------------------------------------------------------------------------
   //
   //  Public Methods
   //
   // --------------------------------------------------------------------------
+  /** Selects the next tip to display */
   async nextTip() {
     this.direction = "advancing";
     const nextIndex = this.selectedIndex + 1;
     this.selectedIndex = (nextIndex + this.total) % this.total;
   }
+  /** Selects the previous tip to display */
   async previousTip() {
     this.direction = "retreating";
     const previousIndex = this.selectedIndex - 1;
@@ -133,9 +138,9 @@ export class CalciteTipManager {
     const previousLabel = intlPrevious || TEXT.previous;
     const paginationLabel = intlPaginationLabel || TEXT.defaultPaginationLabel;
     return tips.length > 1 ? (h("footer", { class: CSS.pagination },
-      h("calcite-action", { class: CSS.pagePrevious, icon: dir === "ltr" ? ICONS.chevronLeft : ICONS.chevronRight, onClick: this.previousClicked, text: previousLabel }),
+      h("calcite-action", { class: CSS.pagePrevious, icon: dir === "ltr" ? ICONS.chevronLeft : ICONS.chevronRight, onClick: this.previousClicked, scale: "m", text: previousLabel }),
       h("span", { class: CSS.pagePosition }, `${paginationLabel} ${selectedIndex + 1}/${total}`),
-      h("calcite-action", { class: CSS.pageNext, icon: dir === "ltr" ? ICONS.chevronRight : ICONS.chevronLeft, onClick: this.nextClicked, text: nextLabel }))) : null;
+      h("calcite-action", { class: CSS.pageNext, icon: dir === "ltr" ? ICONS.chevronRight : ICONS.chevronLeft, onClick: this.nextClicked, scale: "m", text: nextLabel }))) : null;
   }
   render() {
     const { closed, direction, headingLevel, groupTitle, selectedIndex, intlClose, total } = this;
@@ -146,7 +151,8 @@ export class CalciteTipManager {
     return (h("section", { "aria-hidden": closed.toString(), class: CSS.container, hidden: closed, onKeyUp: this.tipManagerKeyUpHandler, ref: this.storeContainerRef, tabIndex: 0 },
       h("header", { class: CSS.header },
         h(CalciteHeading, { class: CSS.heading, level: headingLevel || HEADING_LEVEL }, groupTitle),
-        h("calcite-action", { class: CSS.close, icon: ICONS.close, onClick: this.hideTipManager, text: closeLabel })),
+        h("calcite-action", { class: CSS.close, onClick: this.hideTipManager, scale: "m", text: closeLabel },
+          h("calcite-icon", { icon: ICONS.close, scale: "m" }))),
       h("div", { class: {
           [CSS.tipContainer]: true,
           [CSS.tipContainerAdvancing]: !closed && direction === "advancing",
@@ -326,7 +332,7 @@ export class CalciteTipManager {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Selects the next tip to display",
         "tags": []
       }
     },
@@ -342,7 +348,7 @@ export class CalciteTipManager {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Selects the previous tip to display",
         "tags": []
       }
     }

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

@@ -3,6 +3,9 @@ import { CSS, TOOLTIP_REFERENCE, ARIA_DESCRIBED_BY } from "./resources";
 import { guid } from "../../utils/guid";
 import { defaultOffsetDistance, createPopper, updatePopper, CSS as PopperCSS } from "../../utils/popper";
 import { queryElementRoots } from "../../utils/dom";
+/**
+ * @slot - A slot for adding text.
+ */
 export class CalciteTooltip {
   constructor() {
     /**
@@ -105,6 +108,7 @@ export class CalciteTooltip {
   //  Public Methods
   //
   // --------------------------------------------------------------------------
+  /** Updates the position of the component. */
   async reposition() {
     const { popper, el, placement } = this;
     const modifiers = this.getModifiers();
@@ -348,7 +352,7 @@ export class CalciteTooltip {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Updates the position of the component.",
         "tags": []
       }
     }

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

@@ -2,7 +2,7 @@ import { Component, Element, Prop, Host, Event, Listen, h } from "@stencil/core"
 import { focusElement, nodeListToArray } from "../../utils/dom";
 import { TreeSelectionMode } from "./interfaces";
 /**
- * @slot children - a slot for adding child components, commonly calcite-tree-item
+ * @slot - A slot for `calcite-tree-item` elements.
  */
 export class CalciteTree {
   constructor() {
@@ -13,7 +13,9 @@ export class CalciteTree {
     //--------------------------------------------------------------------------
     /** Display indentation guide lines */
     this.lines = false;
-    /** Display input */
+    /** Display input
+     * @deprecated use "ancestors" selection-mode for checkbox input
+     */
     this.inputEnabled = false;
     /** Specify the scale of the tree, defaults to m */
     this.scale = "m";
@@ -32,13 +34,12 @@ export class CalciteTree {
     const parent = this.el.parentElement.closest("calcite-tree");
     this.lines = parent ? parent.lines : this.lines;
     this.scale = parent ? parent.scale : this.scale;
-    this.inputEnabled = parent ? parent.inputEnabled : this.inputEnabled;
     this.selectionMode = parent ? parent.selectionMode : this.selectionMode;
     this.child = !!parent;
   }
   render() {
-    return (h(Host, { "aria-multiselectable": this.selectionMode === TreeSelectionMode.Multi ||
-        this.selectionMode === TreeSelectionMode.MultiChildren, role: !this.child ? "tree" : undefined, tabIndex: this.getRootTabIndex() },
+    return (h(Host, { "aria-multiselectable": (this.selectionMode === TreeSelectionMode.Multi ||
+        this.selectionMode === TreeSelectionMode.MultiChildren).toString(), role: !this.child ? "tree" : undefined, tabIndex: this.getRootTabIndex() },
       h("slot", null)));
   }
   //--------------------------------------------------------------------------
@@ -209,7 +210,7 @@ export class CalciteTree {
     },
     "inputEnabled": {
       "type": "boolean",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -218,7 +219,10 @@ export class CalciteTree {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "use \"ancestors\" selection-mode for checkbox input",
+            "name": "deprecated"
+          }],
         "text": "Display input"
       },
       "attribute": "input-enabled",

package/dist/collection/components/calcite-tree-item/calcite-tree-item.css

@@ -1,5 +1,3 @@
-@charset "UTF-8";
-
 /* mixins & extensions */
 
 @keyframes in {
@@ -87,41 +85,16 @@
 }
 
 :host {
+  --calcite-tree-indicator: var(--calcite-ui-border-1);
+  --calcite-tree-indicator-active: var(--calcite-ui-brand);
+  --calcite-tree-text: var(--calcite-ui-text-3);
+  --calcite-tree-text-active: var(--calcite-ui-text-1);
   display: block;
-  color: var(--calcite-tree-text);
   cursor: pointer;
-  outline: none;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
   max-width: 100%;
-  --calcite-tree-text: var(--calcite-ui-text-2);
-  --calcite-tree-text: var(--calcite-ui-text-1);
-  --calcite-tree-text: var(--calcite-ui-text-1);
-  --calcite-tree-chevron: var(--calcite-ui-border-1);
-  --calcite-tree-chevron-hover: var(--calcite-ui-text-3);
-  --calcite-tree-vertical-padding: 0.375rem;
-  --calcite-tree-indicator: var(--calcite-ui-border-1);
-  --calcite-tree-indicator-active: var(--calcite-ui-brand);
-  --calcite-tree-indicator-first-start: 0.1rem;
-  --calcite-tree-indicator-first-end: auto;
-  --calcite-tree-indicator-distance-start: 0.15rem;
-  --calcite-tree-indicator-distance-end: auto;
-  --calcite-tree-icon-edge-distance-start: -0.2rem;
-  --calcite-tree-icon-edge-distance-end: 0;
-  --calcite-tree-icon-content-distance-start: 0.375rem;
-  --calcite-tree-icon-content-distance-end: 0;
-  --calcite-tree-indent-start: 1.4rem;
-  --calcite-tree-indent-end: 0;
-  --calcite-tree-children-indent-start: 0.25rem;
-  --calcite-tree-children-indent-end: 0;
-  --calcite-tree-children-padding-start: 1rem;
-  --calcite-tree-children-padding-end: 0;
-  --calcite-tree-checkbox-padding-start: 0;
-  --calcite-tree-checkbox-padding-end: 0.5rem;
-  --calcite-tree-line-position-start: 0.05rem;
-  --calcite-tree-line-position-end: 0;
-  --calcite-tree-parent-line-position-start: -0.95rem;
-  --calcite-tree-parent-line-position-end: 0;
-  --calcite-tree-line-width: 1px;
-  --calcite-tree-hover-line-width: 3px;
+  color: var(--calcite-tree-text);
 }
 
 :host([scale=s]) {
@@ -130,77 +103,46 @@
   --calcite-tree-padding-y: 0.25rem;
 }
 
+:host([scale=s]) .node-container .checkbox {
+  margin-inline-start: 1.5rem;
+}
+
 :host([scale=m]) {
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
   --calcite-tree-padding-y: 0.5rem;
 }
 
+:host([scale=m]) .node-container .checkbox {
+  margin-inline-start: 2rem;
+}
+
 :host([scale=l]) {
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
   --calcite-tree-padding-y: 0.75rem;
 }
 
-:host([lines]) {
-  --calcite-tree-line: var(--calcite-ui-border-3);
-  --calcite-tree-line-hover: var(--calcite-ui-border-1);
+:host([scale=l]) .node-container .checkbox {
+  margin-inline-start: 2.5rem;
 }
 
-:host([lines]) .calcite-tree-node:before {
-  display: none;
+:host([lines]) {
+  --calcite-tree-line: var(--calcite-ui-border-2);
+  --calcite-tree-line-hover: var(--calcite-ui-border-1);
 }
 
-:host(:not([lines])) .calcite-tree-node:after {
+:host(:not([lines])) .node-container:after {
   display: none;
 }
 
-:host([scale=s]) {
-  --calcite-tree-hover-line-width: 2px;
-  --calcite-tree-vertical-padding: 0.1875rem;
-  --calcite-tree-children-indent-start: 0rem;
-  --calcite-tree-children-padding-start: 0.8rem;
-  --calcite-tree-line-position-start: 0.3rem;
-  --calcite-tree-parent-line-position-start: -0.5rem;
-}
-
-:host .calcite--rtl {
-  --calcite-tree-indicator-first-start: 0;
-  --calcite-tree-indicator-first-end: 0.1rem;
-  --calcite-tree-indicator-distance-start: auto;
-  --calcite-tree-indicator-distance-end: 0.15rem;
-  --calcite-tree-icon-edge-distance-start: auto;
-  --calcite-tree-icon-edge-distance-end: -0.2rem;
-  --calcite-tree-icon-content-distance-start: 0;
-  --calcite-tree-icon-content-distance-end: 0.375rem;
-  --calcite-tree-indent-start: 0;
-  --calcite-tree-indent-end: 1.4rem;
-  --calcite-tree-children-indent-start: 0;
-  --calcite-tree-children-indent-end: 0.25rem;
-  --calcite-tree-children-padding-start: 0;
-  --calcite-tree-children-padding-end: 1rem;
-  --calcite-tree-checkbox-padding-start: 0.5rem;
-  --calcite-tree-checkbox-padding-end: 0;
-  --calcite-tree-line-position-start: 0;
-  --calcite-tree-line-position-end: 0.05rem;
-  --calcite-tree-parent-line-position-start: 0;
-  --calcite-tree-parent-line-position-end: -0.95rem;
-}
-
-:host .calcite--rtl[scale=s] {
-  --calcite-tree-children-indent-end: 0rem;
-  --calcite-tree-children-padding-end: 0.8rem;
-  --calcite-tree-line-position-end: 0.3rem;
-  --calcite-tree-parent-line-position-end: -0.5rem;
-}
-
 ::slotted(*) {
-  color: inherit;
-  text-decoration: none !important;
   word-wrap: break-word;
   overflow-wrap: break-word;
   min-width: 0;
   max-width: 100%;
+  color: inherit;
+  text-decoration: none !important;
 }
 
 ::slotted(*):hover {
@@ -223,217 +165,172 @@
   outline-offset: -2px;
 }
 
-.calcite-tree-checkbox {
+.checkbox {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
   line-height: 0;
-  padding-left: var(--calcite-tree-checkbox-padding-start);
-  padding-right: var(--calcite-tree-checkbox-padding-end);
-  outline: none;
 }
 
-.calcite-tree-label {
+.checkbox-label {
   display: flex;
   align-items: center;
   pointer-events: none;
 }
 
-.calcite-tree-children {
-  z-index: 1;
-  margin-left: var(--calcite-tree-children-indent-start);
-  margin-right: var(--calcite-tree-children-indent-end);
-  padding-left: var(--calcite-tree-children-padding-start);
-  padding-right: var(--calcite-tree-children-padding-end);
+.children-container {
   position: relative;
+  overflow: hidden;
+  height: 0;
+  margin-inline-start: 1.25rem;
+  margin-inline-end: 1.25rem;
   transform: scaleY(0);
   opacity: 0;
-  overflow: hidden;
   transition: 0.15s cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity 0.15s cubic-bezier(0.215, 0.44, 0.42, 0.88), all 0.15s ease-in-out;
-  height: 0;
   transform-origin: top;
 }
 
-.calcite-tree-children:after {
-  transition: all 150ms ease-in-out;
-  content: "";
-  height: 100%;
-  width: var(--calcite-tree-line-width);
-  background: var(--calcite-tree-line);
-  left: var(--calcite-tree-line-position-start);
-  right: var(--calcite-tree-line-position-end);
+.children-container:after {
+  transition-property: all;
+  transition-duration: 150ms;
+  transition-timing-function: ease-in-out;
+  transition-delay: 0s;
+  transition-property: background-color, border-color, color, fill, stroke;
   top: 0;
   position: absolute;
+  width: 1px;
+  height: 96%;
+  content: "";
+  background-color: var(--calcite-tree-line);
+  z-index: -1;
 }
 
-:host([expanded]) > .calcite-tree-children {
+:host([expanded]) > .children-container {
   transform: scaleY(1);
   opacity: 1;
   height: auto;
 }
 
-:host([has-children]) .calcite-tree-children:hover:after,
-:host([has-children]) .calcite-tree-children:focus:after {
-  background: var(--calcite-tree-line-hover);
-}
-
-.calcite-tree-node {
+.node-container {
   display: flex;
   align-items: center;
-  padding: var(--calcite-tree-padding-y) 0;
-  padding-left: var(--calcite-tree-indent-start);
-  padding-right: var(--calcite-tree-indent-end);
   position: relative;
+  padding: var(--calcite-tree-padding-y) 0;
 }
 
-.calcite-tree-node:before {
-  content: "•";
-  position: absolute;
-  left: var(--calcite-tree-indicator-distance-start);
-  right: var(--calcite-tree-indicator-distance-end);
-  opacity: 0;
-  color: var(--calcite-tree-indicator);
-  transition: all 150ms ease-in-out;
-}
-
-.calcite-tree-node:after {
-  transition: all 150ms ease-in-out;
-  content: "";
-  height: 100%;
-  width: var(--calcite-tree-line-width);
-  background: var(--calcite-tree-line);
-  left: var(--calcite-tree-parent-line-position-start);
-  right: var(--calcite-tree-parent-line-position-end);
-  top: 0;
-  position: absolute;
-}
-
-:host([depth="1"]) > .calcite-tree-node:after {
-  display: none;
-}
-
-:host([input-enabled]) .calcite-tree-node:before {
-  display: none;
-}
-
-:host([has-children]) > .calcite-tree-node {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-:host([has-children]) > .calcite-tree-node:before {
-  display: none;
-}
-
-:host([depth="1"]) > .calcite-tree-node:before,
-:host([depth="1"]) > .calcite-tree-children:before {
-  left: var(--calcite-tree-indicator-first-start);
-  right: var(--calcite-tree-indicator-first-end);
+.node-container .checkmark,
+.node-container .bullet-point {
+  margin-inline-start: var(--calcite-tree-padding-y);
+  margin-inline-end: var(--calcite-tree-padding-y);
 }
 
-.calcite-tree-node:hover:before,
-:host([selected]) .calcite-tree-node:hover:before,
-:host(:focus) .calcite-tree-node:before {
-  opacity: 1;
+.node-container .checkbox {
+  margin-inline-end: var(--calcite-tree-padding-y);
 }
 
-.calcite-tree-node:hover:after,
-:host([selected]) .calcite-tree-node:hover:after,
-:host(:focus) .calcite-tree-node:after {
-  width: var(--calcite-tree-hover-line-width);
-  background: var(--calcite-tree-line-hover);
-  z-index: 2;
+.node-container .checkmark,
+.node-container .bullet-point {
+  transition-property: all;
+  transition-duration: 150ms;
+  transition-timing-function: ease-in-out;
+  transition-delay: 0s;
+  opacity: 0;
+  color: var(--calcite-tree-indicator);
 }
 
-.calcite-tree-node:hover ::slotted(*),
-:host([selected]) .calcite-tree-node:hover ::slotted(*),
-:host(:focus) .calcite-tree-node ::slotted(*) {
+.node-container:hover ::slotted(*),
+:host([selected]) .node-container:hover ::slotted(*),
+:host(:focus) .node-container ::slotted(*) {
   color: var(--calcite-tree-text-hover);
 }
 
-.calcite-tree-node:hover .calcite-tree-chevron,
-:host([selected]) .calcite-tree-node:hover .calcite-tree-chevron,
-:host(:focus) .calcite-tree-node .calcite-tree-chevron {
-  fill: var(--calcite-tree-chevron-hover);
-}
-
-.calcite-tree-node:hover .calcite-tree-indicator,
-:host([selected]) .calcite-tree-node:hover .calcite-tree-indicator,
-:host(:focus) .calcite-tree-node .calcite-tree-indicator {
-  fill: var(--calcite-tree-indicator-hover);
+.node-container:hover .checkmark,
+.node-container:hover .bullet-point,
+:host([selected]) .node-container:hover .checkmark,
+:host([selected]) .node-container:hover .bullet-point,
+:host(:focus) .node-container .checkmark,
+:host(:focus) .node-container .bullet-point {
+  opacity: 1;
 }
 
-:host([selected]) > .calcite-tree-node,
-:host([selected]) > .calcite-tree-node:hover {
+:host([selected]) > .node-container,
+:host([selected]) > .node-container:hover {
   color: var(--calcite-tree-text-active);
-  font-weight: 500;
+  font-weight: var(--calcite-font-weight-medium);
 }
 
-:host([selected]) > .calcite-tree-node:before,
-:host([selected]) > .calcite-tree-node:hover:before {
+:host([selected]) > .node-container .bullet-point,
+:host([selected]) > .node-container .checkmark,
+:host([selected]) > .node-container:hover .bullet-point,
+:host([selected]) > .node-container:hover .checkmark {
   opacity: 1;
-  color: var(--calcite-tree-indicator-active);
+  color: var(--calcite-ui-brand);
 }
 
-:host([selected]) > .calcite-tree-node:after,
-:host([selected]) > .calcite-tree-node:hover:after {
-  background: var(--calcite-ui-brand);
-  width: var(--calcite-tree-hover-line-width);
-  z-index: 2;
+:host(:not([has-children]))[scale=s] > .node-container[data-selection-mode=ancestors] .checkbox {
+  padding-inline-start: 1.25rem;
 }
 
-:host([selected]) > .calcite-tree-node ::slotted(*),
-:host([selected]) > .calcite-tree-node:hover ::slotted(*) {
-  color: var(--calcite-tree-text-active);
+:host(:not([has-children]))[scale=m] > .node-container[data-selection-mode=ancestors] .checkbox {
+  padding-inline-start: 1.5rem;
 }
 
-:host([has-children][expanded]) > .calcite-tree-node {
-  color: var(--calcite-tree-text-active);
-  font-weight: 500;
+:host(:not([has-children]))[scale=l] > .node-container[data-selection-mode=ancestors] .checkbox {
+  padding-inline-start: 1.75rem;
 }
 
-:host([has-children][expanded]) > .calcite-tree-node:after {
-  background: var(--calcite-ui-brand);
+:host([has-children]) > .node-container[data-selection-mode=ancestors] .checkbox {
+  margin-inline-start: 0;
 }
 
-:host([has-children][expanded]) > .calcite-tree-node:before {
-  opacity: 1;
-  color: var(--calcite-tree-indicator-active);
+:host([has-children]) > .node-container .bullet-point,
+:host([has-children]) > .node-container .checkmark {
+  display: none;
 }
 
-:host([has-children][expanded]) > .calcite-tree-node ::slotted(*) {
+:host([has-children][expanded]:not([selected])) > .node-container ::slotted(*) {
+  font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-tree-text-active);
 }
 
-:host([has-children][expanded][selected]) > .calcite-tree-node:after {
-  background: var(--calcite-ui-brand);
-  width: var(--calcite-tree-hover-line-width);
-  z-index: 2;
+:host([has-children][selected]) > .node-container[data-selection-mode=children], :host([has-children][selected]) > .node-container[data-selection-mode=multi-children] {
+  color: var(--calcite-tree-indicator-active);
 }
 
-.calcite-tree-chevron {
-  transition: all 150ms ease-in-out;
-  flex: 0 0 auto;
+.chevron {
+  transition-property: all;
+  transition-duration: 150ms;
+  transition-timing-function: ease-in-out;
+  transition-delay: 0s;
   position: relative;
   align-self: center;
-  left: var(--calcite-tree-icon-edge-distance-start);
-  right: var(--calcite-tree-icon-edge-distance-end);
-  margin-right: var(--calcite-tree-icon-content-distance-start);
-  margin-left: var(--calcite-tree-icon-content-distance-end);
+  flex: 0 0 auto;
+  margin-inline-start: var(--calcite-tree-padding-y);
+  margin-inline-end: var(--calcite-tree-padding-y);
   transform: rotate(0deg);
-  fill: var(--calcite-tree-chevron);
+  color: var(--calcite-tree-text);
 }
 
-.calcite--rtl .calcite-tree-chevron {
+.calcite--rtl .chevron {
   transform: rotate(180deg);
 }
 
-:host(:hover) .calcite-tree-chevron, :host(:focus) .calcite-tree-chevron {
-  fill: var(--calcite-tree-chevron-hover);
-  stroke: var(--calcite-tree-chevron-hover);
-  stroke-width: 0.75;
+:host([expanded]) > .node-container > .chevron {
+  transform: rotate(90deg);
 }
 
-:host([expanded]) > .calcite-tree-node > .calcite-tree-chevron {
-  transform: rotate(90deg);
-  fill: var(--calcite-ui-brand);
-  stroke-width: 0.75;
-  stroke: var(--calcite-ui-brand);
+:host([scale=s]) > .node-container .checkbox {
+  margin-inline-end: 0.5rem;
+}
+
+:host([scale=m]) > .node-container .checkbox {
+  margin-inline-end: 0.75rem;
+}
+
+:host([scale=l]) > .node-container .checkbox {
+  margin-inline-end: 1rem;
+}
+
+:host([selected]) .checkmark,
+:host([selected]) .bullet-point {
+  color: var(--calcite-tree-indicator-active);
 }