@esri/calcite-components 1.0.0-next.472 → 1.0.0-next.473

package/dist/custom-elements/index.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.472
+ * v1.0.0-next.473
  */
 import { HTMLElement as HTMLElement$1, createEvent, h, Host, Build, forceUpdate, Fragment, getAssetPath, proxyCustomElement } from '@stencil/core/internal/client';
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
@@ -2077,7 +2077,7 @@ function throttle$1(func, wait, options) {
 }
 
 const observed = new Set();
-let mutationObserver;
+let mutationObserver$1;
 const observerOptions = { childList: true };
 /**
  * Helper to set up a conditional slot component on connectedCallback.
@@ -2085,10 +2085,10 @@ const observerOptions = { childList: true };
  * @param component
  */
 function connectConditionalSlotComponent(component) {
-  if (!mutationObserver) {
-    mutationObserver = createObserver("mutation", processMutations);
+  if (!mutationObserver$1) {
+    mutationObserver$1 = createObserver("mutation", processMutations$1);
   }
-  mutationObserver.observe(component.el, observerOptions);
+  mutationObserver$1.observe(component.el, observerOptions);
 }
 /**
  * Helper to tear down a conditional slot component on disconnectedCallback.
@@ -2100,13 +2100,13 @@ function disconnectConditionalSlotComponent(component) {
   // we explicitly process queued mutations and disconnect and reconnect
   // the observer until MutationObserver gets an `unobserve` method
   // see https://github.com/whatwg/dom/issues/126
-  processMutations(mutationObserver.takeRecords());
-  mutationObserver.disconnect();
+  processMutations$1(mutationObserver$1.takeRecords());
+  mutationObserver$1.disconnect();
   for (const [element] of observed.entries()) {
-    mutationObserver.observe(element, observerOptions);
+    mutationObserver$1.observe(element, observerOptions);
   }
 }
-function processMutations(mutations) {
+function processMutations$1(mutations) {
   mutations.forEach(({ target }) => {
     forceUpdate(target);
   });
@@ -16124,6 +16124,66 @@ const OptionGroup = class extends HTMLElement$1 {
   static get style() { return optionGroupCss; }
 };
 
+const allowedGlobalAttributes = ["lang"];
+const elementToComponentAndObserverOptionsMap = new Map();
+let mutationObserver;
+function updateGlobalAttributes(component, attributeFilter) {
+  const { el } = component;
+  const updatedAttributes = {};
+  attributeFilter
+    .filter((attr) => !!allowedGlobalAttributes.includes(attr) && !!el.hasAttribute(attr))
+    .forEach((attr) => {
+    const value = el.getAttribute(attr);
+    if (value !== null) {
+      updatedAttributes[attr] = value;
+    }
+  });
+  component.globalAttributes = updatedAttributes;
+}
+function processMutations(mutations) {
+  mutations.forEach(({ target }) => {
+    const [component, options] = elementToComponentAndObserverOptionsMap.get(target);
+    updateGlobalAttributes(component, options.attributeFilter);
+  });
+}
+/**
+ * Helper to set up listening for changes to global attributes.
+ *
+ * render(): VNode {
+ *   const lang = this.inheritedAttributes['lang'] ?? 'en';
+ *   return <div>My lang is {lang}</div>;
+ * }
+ *
+ * @param component
+ * @param attributeFilter
+ */
+function watchGlobalAttributes(component, attributeFilter) {
+  const { el } = component;
+  const observerOptions = { attributeFilter };
+  elementToComponentAndObserverOptionsMap.set(el, [component, observerOptions]);
+  updateGlobalAttributes(component, attributeFilter);
+  if (!mutationObserver) {
+    mutationObserver = createObserver("mutation", processMutations);
+  }
+  mutationObserver.observe(el, observerOptions);
+}
+/**
+ * Helper remove listening for changes to inherited attributes.
+ *
+ * @param component
+ */
+function unwatchGlobalAttributes(component) {
+  elementToComponentAndObserverOptionsMap.delete(component.el);
+  // we explicitly process queued mutations and disconnect and reconnect
+  // the observer until MutationObserver gets an `unobserve` method
+  // see https://github.com/whatwg/dom/issues/126
+  processMutations(mutationObserver.takeRecords());
+  mutationObserver.disconnect();
+  for (const [element, [, observerOptions]] of elementToComponentAndObserverOptionsMap.entries()) {
+    mutationObserver.observe(element, observerOptions);
+  }
+}
+
 const CSS$l = {
   page: "page",
   selected: "is-selected",
@@ -16174,6 +16234,12 @@ const Pagination = class extends HTMLElement$1 {
     this.textLabelPrevious = TEXT$9.previousLabel;
     /** The scale of the pagination */
     this.scale = "m";
+    //--------------------------------------------------------------------------
+    //
+    //  State
+    //
+    //--------------------------------------------------------------------------
+    this.globalAttributes = {};
     this.previousClicked = () => {
       this.previousPage().then();
       this.emitUpdate();
@@ -16185,6 +16251,17 @@ const Pagination = class extends HTMLElement$1 {
   }
   // --------------------------------------------------------------------------
   //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    watchGlobalAttributes(this, ["lang"]);
+  }
+  disconnectedCallback() {
+    unwatchGlobalAttributes(this);
+  }
+  // --------------------------------------------------------------------------
+  //
   //  Public Methods
   //
   // --------------------------------------------------------------------------
@@ -16261,6 +16338,7 @@ const Pagination = class extends HTMLElement$1 {
     return pages.map((page) => this.renderPage(page));
   }
   renderPage(start) {
+    const lang = this.globalAttributes["lang"] || document.documentElement.lang || "en";
     const page = Math.floor(start / this.num) + (this.num === 1 ? 0 : 1);
     return (h("button", { class: {
         [CSS$l.page]: true,
@@ -16268,7 +16346,7 @@ const Pagination = class extends HTMLElement$1 {
       }, onClick: () => {
         this.start = start;
         this.emitUpdate();
-      } }, page));
+      } }, localizeNumberString(page.toString(), lang, true)));
   }
   renderLeftEllipsis() {
     if (this.total / this.num > maxPagesDisplayed && this.showLeftEllipsis()) {
@@ -23285,7 +23363,7 @@ const Stepper = class extends HTMLElement$1 {
     if (content && item.active) {
       this.requestedContent = content;
     }
-    this.itemMap.set(item, position);
+    this.itemMap.set(item, { position, content });
     this.items = this.sortItems();
     this.enabledItems = this.filterItems();
     event.stopPropagation();
@@ -23311,7 +23389,7 @@ const Stepper = class extends HTMLElement$1 {
     if (typeof enabledStepIndex !== "number") {
       return;
     }
-    this.emitChangedItem(enabledStepIndex);
+    this.updateStep(enabledStepIndex);
   }
   /** set the previous step as active */
   async prevStep() {
@@ -23319,7 +23397,7 @@ const Stepper = class extends HTMLElement$1 {
     if (typeof enabledStepIndex !== "number") {
       return;
     }
-    this.emitChangedItem(enabledStepIndex);
+    this.updateStep(enabledStepIndex);
   }
   /**
    * set the requested step as active
@@ -23329,7 +23407,7 @@ const Stepper = class extends HTMLElement$1 {
   async goToStep(step) {
     const position = step - 1;
     if (this.currentPosition !== position) {
-      this.emitChangedItem(position);
+      this.updateStep(position);
     }
   }
   /** set the first step as active */
@@ -23338,7 +23416,7 @@ const Stepper = class extends HTMLElement$1 {
     if (typeof enabledStepIndex !== "number") {
       return;
     }
-    this.emitChangedItem(enabledStepIndex);
+    this.updateStep(enabledStepIndex);
   }
   /** set the last step as active */
   async endStep() {
@@ -23346,7 +23424,7 @@ const Stepper = class extends HTMLElement$1 {
     if (typeof enabledStepIndex !== "number") {
       return;
     }
-    this.emitChangedItem(enabledStepIndex);
+    this.updateStep(enabledStepIndex);
   }
   //--------------------------------------------------------------------------
   //
@@ -23369,8 +23447,14 @@ const Stepper = class extends HTMLElement$1 {
     this.stepperContentContainer.classList.add("calcite-stepper-content");
     this.el.insertAdjacentElement("beforeend", this.stepperContentContainer);
   }
-  emitChangedItem(position) {
+  updateStep(position) {
+    var _a;
+    const { itemMap, items } = this;
     this.currentPosition = position;
+    const content = (_a = itemMap.get(items[position])) === null || _a === void 0 ? void 0 : _a.content;
+    if (content) {
+      this.requestedContent = content;
+    }
     this.calciteInternalStepperItemChange.emit({
       position
     });
@@ -23401,7 +23485,7 @@ const Stepper = class extends HTMLElement$1 {
   }
   sortItems() {
     const { itemMap } = this;
-    return Array.from(itemMap.keys()).sort((a, b) => itemMap.get(a) - itemMap.get(b));
+    return Array.from(itemMap.keys()).sort((a, b) => itemMap.get(a).position - itemMap.get(b).position);
   }
   filterItems() {
     return this.items.filter((item) => !item.disabled);
@@ -26834,7 +26918,7 @@ const CalciteModal = /*@__PURE__*/proxyCustomElement(Modal, [1,"calcite-modal",{
 const CalciteNotice = /*@__PURE__*/proxyCustomElement(Notice, [1,"calcite-notice",{"active":[1540],"color":[513],"dismissible":[516],"icon":[520],"intlClose":[1,"intl-close"],"scale":[513],"width":[513]}]);
 const CalciteOption = /*@__PURE__*/proxyCustomElement(Option, [1,"calcite-option",{"disabled":[516],"label":[1025],"selected":[516],"value":[1032]}]);
 const CalciteOptionGroup = /*@__PURE__*/proxyCustomElement(OptionGroup, [1,"calcite-option-group",{"disabled":[516],"label":[1]}]);
-const CalcitePagination = /*@__PURE__*/proxyCustomElement(Pagination, [1,"calcite-pagination",{"num":[2],"start":[1026],"total":[2],"textLabelNext":[1,"text-label-next"],"textLabelPrevious":[1,"text-label-previous"],"scale":[513]}]);
+const CalcitePagination = /*@__PURE__*/proxyCustomElement(Pagination, [1,"calcite-pagination",{"num":[2],"start":[1026],"total":[2],"textLabelNext":[1,"text-label-next"],"textLabelPrevious":[1,"text-label-previous"],"scale":[513],"globalAttributes":[32]}]);
 const CalcitePanel = /*@__PURE__*/proxyCustomElement(Panel, [1,"calcite-panel",{"dismissed":[1540],"beforeBack":[16],"disabled":[516],"dismissible":[516],"headingLevel":[2,"heading-level"],"showBackButton":[516,"show-back-button"],"intlBack":[1,"intl-back"],"heightScale":[513,"height-scale"],"widthScale":[513,"width-scale"],"loading":[516],"intlClose":[1,"intl-close"],"intlOptions":[1,"intl-options"],"heading":[1],"summary":[1],"menuOpen":[516,"menu-open"]}]);
 const CalcitePickList = /*@__PURE__*/proxyCustomElement(PickList, [1,"calcite-pick-list",{"disabled":[516],"filterEnabled":[516,"filter-enabled"],"filterPlaceholder":[513,"filter-placeholder"],"headingLevel":[2,"heading-level"],"loading":[516],"multiple":[516],"selectionFollowsFocus":[4,"selection-follows-focus"],"selectedValues":[32],"dataForFilter":[32]},[[0,"calciteListItemRemove","calciteListItemRemoveHandler"],[0,"calciteListItemChange","calciteListItemChangeHandler"],[0,"calciteInternalListItemPropsChange","calciteInternalListItemPropsChangeHandler"],[0,"calciteInternalListItemValueChange","calciteInternalListItemValueChangeHandler"],[0,"focusout","calciteListFocusOutHandler"]]]);
 const CalcitePickListGroup = /*@__PURE__*/proxyCustomElement(PickListGroup, [1,"calcite-pick-list-group",{"groupTitle":[513,"group-title"],"headingLevel":[2,"heading-level"]}]);

package/dist/esm/{ExpandToggle-9e559485.js → ExpandToggle-a5abe18b.js}

@@ -1,12 +1,12 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.472
+ * v1.0.0-next.473
  */
-import { f as forceUpdate, h } from './index-b9b8e743.js';
-import { a as getElementDir } from './dom-41c9b953.js';
-import { S as SLOTS } from './resources-26815a07.js';
-import { S as SLOTS$1 } from './resources-9d3bd7c9.js';
+import { f as forceUpdate, h } from './index-92097d0f.js';
+import { a as getElementDir } from './dom-0a8986fb.js';
+import { S as SLOTS } from './resources-e3a9c575.js';
+import { S as SLOTS$1 } from './resources-d12ff2f7.js';
 
 const overflowActionsDebounceInMs = 150;
 const groupBufferHeight = 2;

package/dist/esm/{Heading-5f7ecc43.js → Heading-ac9074fa.js}

@@ -1,9 +1,9 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.472
+ * v1.0.0-next.473
  */
-import { h } from './index-b9b8e743.js';
+import { h } from './index-92097d0f.js';
 
 function constrainHeadingLevel(level) {
   return Math.min(Math.max(Math.ceil(level), 1), 6);

package/dist/esm/{array-b1c0a225.js → array-b6abe05a.js}

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.472
+ * v1.0.0-next.473
  */
 function getRoundRobinIndex(index, total) {
   return (index + total) % total;

package/dist/esm/calcite-accordion_2.entry.js

@@ -1,11 +1,11 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.472
+ * v1.0.0-next.473
  */
-import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-b9b8e743.js';
-import { d as getElementProp, a as getElementDir, C as CSS_UTILITY, t as toAriaBoolean } from './dom-41c9b953.js';
-import { g as guid } from './guid-32a8b958.js';
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-92097d0f.js';
+import { d as getElementProp, a as getElementDir, C as CSS_UTILITY, t as toAriaBoolean } from './dom-0a8986fb.js';
+import { g as guid } from './guid-541996c1.js';
 
 const accordionCss = "@-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-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-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:var(--calcite-animation-timing)}:host([hidden]){display:none}:host([scale=s]){--calcite-accordion-item-spacing-unit:0.25rem;--calcite-accordion-icon-margin:0.5rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){--calcite-accordion-item-spacing-unit:0.5rem;--calcite-accordion-icon-margin:0.75rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){--calcite-accordion-item-spacing-unit:0.75rem;--calcite-accordion-icon-margin:1rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host{position:relative;display:block;max-width:100%;line-height:1.5rem;--calcite-accordion-item-border:var(--calcite-ui-border-2);--calcite-accordion-item-background:var(--calcite-ui-foreground-1)}.accordion--transparent{--calcite-accordion-item-border:transparent;--calcite-accordion-item-background:transparent}.accordion--minimal{--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0}.accordion{border-width:1px;border-bottom-width:0px;border-style:solid;border-color:var(--calcite-ui-border-2)}";
 

package/dist/esm/calcite-action-bar.entry.js

@@ -1,17 +1,17 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.472
+ * v1.0.0-next.473
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b9b8e743.js';
-import { t as toggleChildActionText, o as overflowActionsDebounceInMs, q as queryActions, a as overflowActions, E as ExpandToggle, g as getOverflowCount } from './ExpandToggle-9e559485.js';
-import { f as focusElement, g as getSlotted } from './dom-41c9b953.js';
-import { c as createObserver } from './observers-7562cb71.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-0b09826e.js';
-import { d as debounce } from './debounce-e4f4d217.js';
-import './resources-26815a07.js';
-import './resources-9d3bd7c9.js';
-import './guid-32a8b958.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-92097d0f.js';
+import { t as toggleChildActionText, o as overflowActionsDebounceInMs, q as queryActions, a as overflowActions, E as ExpandToggle, g as getOverflowCount } from './ExpandToggle-a5abe18b.js';
+import { f as focusElement, g as getSlotted } from './dom-0a8986fb.js';
+import { c as createObserver } from './observers-9a07b466.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-f095bf91.js';
+import { d as debounce } from './debounce-dac3eee5.js';
+import './resources-e3a9c575.js';
+import './resources-d12ff2f7.js';
+import './guid-541996c1.js';
 
 const CSS = {
   actionGroupBottom: "action-group--bottom"

package/dist/esm/calcite-action-group.entry.js

@@ -1,15 +1,15 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.472
+ * v1.0.0-next.473
  */
-import { r as registerInstance, h, F as Fragment, g as getElement } from './index-b9b8e743.js';
-import { S as SLOTS, I as ICONS, T as TEXT } from './resources-9d3bd7c9.js';
-import { g as getSlotted } from './dom-41c9b953.js';
-import { S as SLOTS$1 } from './resources-26815a07.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-0b09826e.js';
-import './guid-32a8b958.js';
-import './observers-7562cb71.js';
+import { r as registerInstance, h, F as Fragment, g as getElement } from './index-92097d0f.js';
+import { S as SLOTS, I as ICONS, T as TEXT } from './resources-d12ff2f7.js';
+import { g as getSlotted } from './dom-0a8986fb.js';
+import { S as SLOTS$1 } from './resources-e3a9c575.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-f095bf91.js';
+import './guid-541996c1.js';
+import './observers-9a07b466.js';
 
 const actionGroupCss = "@-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-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-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}:host{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding:0px;--calcite-action-group-columns:3}:host([columns=\"1\"]){--calcite-action-group-columns:1}:host([columns=\"2\"]){--calcite-action-group-columns:2}:host([columns=\"3\"]){--calcite-action-group-columns:3}:host([columns=\"4\"]){--calcite-action-group-columns:4}:host([columns=\"5\"]){--calcite-action-group-columns:5}:host([columns=\"6\"]){--calcite-action-group-columns:6}:host(:first-child){padding-top:0px}:host([layout=horizontal]){-ms-flex-direction:row;flex-direction:row}:host([layout=grid]){display:grid;place-content:stretch;gap:1px;background-color:var(--calcite-ui-background);padding:1px;grid-template-columns:repeat(var(--calcite-action-group-columns), auto)}";
 

package/dist/esm/calcite-action-menu.entry.js

@@ -1,15 +1,15 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.472
+ * v1.0.0-next.473
  */
-import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-b9b8e743.js';
-import { C as CSS, I as ICONS, S as SLOTS } from './resources-26815a07.js';
-import { g as getSlotted, t as toAriaBoolean, f as focusElement } from './dom-41c9b953.js';
-import { g as getRoundRobinIndex } from './array-b1c0a225.js';
-import { g as guid } from './guid-32a8b958.js';
-import { c as createObserver } from './observers-7562cb71.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-0b09826e.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-92097d0f.js';
+import { C as CSS, I as ICONS, S as SLOTS } from './resources-e3a9c575.js';
+import { g as getSlotted, t as toAriaBoolean, f as focusElement } from './dom-0a8986fb.js';
+import { g as getRoundRobinIndex } from './array-b6abe05a.js';
+import { g as guid } from './guid-541996c1.js';
+import { c as createObserver } from './observers-9a07b466.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-f095bf91.js';
 
 const actionMenuCss = "@-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-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-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:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:var(--calcite-ui-foreground-1);font-size:var(--calcite-font-size-1);color:var(--calcite-ui-text-2)}.menu ::slotted(calcite-action){margin:0.125rem;display:-ms-flexbox;display:flex;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}::slotted(calcite-action[active]){outline:2px solid var(--calcite-ui-brand);outline-offset:0px}.default-trigger{position:relative;height:100%;-ms-flex:0 1 auto;flex:0 1 auto;-ms-flex-item-align:stretch;align-self:stretch}slot[name=trigger]::slotted(calcite-action),calcite-action::slotted([slot=trigger]){position:relative;height:100%;-ms-flex:0 1 auto;flex:0 1 auto;-ms-flex-item-align:stretch;align-self:stretch}.menu{-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;outline:2px solid transparent;outline-offset:2px}";
 

package/dist/esm/calcite-action-pad.entry.js

@@ -1,16 +1,16 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.472
+ * v1.0.0-next.473
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b9b8e743.js';
-import { t as toggleChildActionText, E as ExpandToggle } from './ExpandToggle-9e559485.js';
-import { f as focusElement, g as getSlotted } from './dom-41c9b953.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-0b09826e.js';
-import './resources-26815a07.js';
-import './resources-9d3bd7c9.js';
-import './guid-32a8b958.js';
-import './observers-7562cb71.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-92097d0f.js';
+import { t as toggleChildActionText, E as ExpandToggle } from './ExpandToggle-a5abe18b.js';
+import { f as focusElement, g as getSlotted } from './dom-0a8986fb.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-f095bf91.js';
+import './resources-e3a9c575.js';
+import './resources-d12ff2f7.js';
+import './guid-541996c1.js';
+import './observers-9a07b466.js';
 
 const CSS = {
   actionGroupBottom: "action-group--bottom",

package/dist/esm/calcite-action.entry.js

@@ -1,13 +1,13 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.472
+ * v1.0.0-next.473
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, f as forceUpdate } from './index-b9b8e743.js';
-import { c as createObserver } from './observers-7562cb71.js';
-import { u as updateHostInteraction } from './interactive-22774ddf.js';
-import { t as toAriaBoolean } from './dom-41c9b953.js';
-import './guid-32a8b958.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, f as forceUpdate } from './index-92097d0f.js';
+import { c as createObserver } from './observers-9a07b466.js';
+import { u as updateHostInteraction } from './interactive-15dfd4f0.js';
+import { t as toAriaBoolean } from './dom-0a8986fb.js';
+import './guid-541996c1.js';
 
 const CSS = {
   button: "button",

package/dist/esm/calcite-alert.entry.js

@@ -1,12 +1,12 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.472
+ * v1.0.0-next.473
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b9b8e743.js';
-import { s as setRequestedIcon, t as toAriaBoolean, g as getSlotted } from './dom-41c9b953.js';
-import { S as StatusIcons } from './interfaces-9a0a8213.js';
-import './guid-32a8b958.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-92097d0f.js';
+import { s as setRequestedIcon, t as toAriaBoolean, g as getSlotted } from './dom-0a8986fb.js';
+import { S as StatusIcons } from './interfaces-1ceccfb4.js';
+import './guid-541996c1.js';
 
 const TEXT = {
   intlClose: "Close"

package/dist/esm/calcite-avatar.entry.js

@@ -1,12 +1,12 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.472
+ * v1.0.0-next.473
  */
-import { r as registerInstance, h, g as getElement } from './index-b9b8e743.js';
-import { h as hexToRGB, i as isValidHex } from './utils-9d2c9c2c.js';
-import { b as getThemeName } from './dom-41c9b953.js';
-import './guid-32a8b958.js';
+import { r as registerInstance, h, g as getElement } from './index-92097d0f.js';
+import { h as hexToRGB, i as isValidHex } from './utils-ce5a2d55.js';
+import { b as getThemeName } from './dom-0a8986fb.js';
+import './guid-541996c1.js';
 
 /**
  * Convert a string to a valid hex by hashing its contents

package/dist/esm/calcite-block_2.entry.js

@@ -1,15 +1,15 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.472
+ * v1.0.0-next.473
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b9b8e743.js';
-import { g as getSlotted, t as toAriaBoolean, a as getElementDir } from './dom-41c9b953.js';
-import { H as Heading } from './Heading-5f7ecc43.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-0b09826e.js';
-import { u as updateHostInteraction } from './interactive-22774ddf.js';
-import { g as guid } from './guid-32a8b958.js';
-import './observers-7562cb71.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-92097d0f.js';
+import { g as getSlotted, t as toAriaBoolean, a as getElementDir } from './dom-0a8986fb.js';
+import { H as Heading } from './Heading-ac9074fa.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-f095bf91.js';
+import { u as updateHostInteraction } from './interactive-15dfd4f0.js';
+import { g as guid } from './guid-541996c1.js';
+import './observers-9a07b466.js';
 
 const CSS$1 = {
   article: "article",

package/dist/esm/calcite-button.entry.js

@@ -1,15 +1,15 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.472
+ * v1.0.0-next.473
  */
-import { r as registerInstance, h, g as getElement } from './index-b9b8e743.js';
-import { c as closestElementCrossShadowBoundary } from './dom-41c9b953.js';
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-2074cd4e.js';
-import { c as createObserver } from './observers-7562cb71.js';
-import { u as updateHostInteraction } from './interactive-22774ddf.js';
-import { s as submitForm, r as resetForm } from './form-38020e0a.js';
-import './guid-32a8b958.js';
+import { r as registerInstance, h, g as getElement } from './index-92097d0f.js';
+import { c as closestElementCrossShadowBoundary } from './dom-0a8986fb.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-cd72b313.js';
+import { c as createObserver } from './observers-9a07b466.js';
+import { u as updateHostInteraction } from './interactive-15dfd4f0.js';
+import { s as submitForm, r as resetForm } from './form-06a1c478.js';
+import './guid-541996c1.js';
 
 (function(prototype) {
   if (typeof prototype.requestSubmit == "function") return

package/dist/esm/calcite-card.entry.js

@@ -1,13 +1,13 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.472
+ * v1.0.0-next.473
  */
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-b9b8e743.js';
-import { t as toAriaBoolean, g as getSlotted } from './dom-41c9b953.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-0b09826e.js';
-import './guid-32a8b958.js';
-import './observers-7562cb71.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-92097d0f.js';
+import { t as toAriaBoolean, g as getSlotted } from './dom-0a8986fb.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-f095bf91.js';
+import './guid-541996c1.js';
+import './observers-9a07b466.js';
 
 const CSS = {
   container: "container",

package/dist/esm/calcite-checkbox.entry.js

@@ -1,14 +1,14 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.472
+ * v1.0.0-next.473
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b9b8e743.js';
-import { g as guid } from './guid-32a8b958.js';
-import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-38020e0a.js';
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-2074cd4e.js';
-import { u as updateHostInteraction } from './interactive-22774ddf.js';
-import { t as toAriaBoolean } from './dom-41c9b953.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-92097d0f.js';
+import { g as guid } from './guid-541996c1.js';
+import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-06a1c478.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-cd72b313.js';
+import { u as updateHostInteraction } from './interactive-15dfd4f0.js';
+import { t as toAriaBoolean } from './dom-0a8986fb.js';
 
 const checkboxCss = "@-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-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-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:var(--calcite-animation-timing)}:host([hidden]){display:none}:host([scale=s]){--calcite-checkbox-size:0.75rem}:host([scale=m]){--calcite-checkbox-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-checkbox-size:1rem}:host{position:relative;display:-ms-inline-flexbox;display:inline-flex;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host .check-svg{pointer-events:none;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;overflow:hidden;background-color:var(--calcite-ui-foreground-1);fill:currentColor;stroke:currentColor;stroke-width:1;-webkit-transition-property:all;transition-property:all;-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);width:var(--calcite-checkbox-size);height:var(--calcite-checkbox-size);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input);box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input);color:var(--calcite-ui-background)}:host([checked]) .check-svg,:host([indeterminate]) .check-svg{background-color:var(--calcite-ui-brand);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-brand);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand)}:host([hovered]) .toggle .check-svg,:host .toggle:hover .check-svg{-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-brand);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand)}:host .toggle:focus .check-svg,:host .toggle:active .check-svg{-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);-webkit-transition:var(--calcite-animation-timing);transition:var(--calcite-animation-timing)}.toggle:focus-visible{outline:none}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}::slotted(input[slot=hidden-form-input]){bottom:0 !important;left:0 !important;margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;right:0 !important;top:0 !important;-webkit-transform:none !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
 

package/dist/esm/calcite-chip.entry.js

@@ -1,13 +1,13 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.472
+ * v1.0.0-next.473
  */
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-b9b8e743.js';
-import { g as getSlotted } from './dom-41c9b953.js';
-import { g as guid } from './guid-32a8b958.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-0b09826e.js';
-import './observers-7562cb71.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-92097d0f.js';
+import { g as getSlotted } from './dom-0a8986fb.js';
+import { g as guid } from './guid-541996c1.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-f095bf91.js';
+import './observers-9a07b466.js';
 
 const CSS = {
   title: "title",