@esri/calcite-components 1.0.0-beta.81 → 1.0.0-beta.84

package/dist/collection/components/accordion/accordion.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-beta.81
+ * v1.0.0-beta.84
  */
 import { Component, Element, Event, h, Listen, Prop } from "@stencil/core";
 /**
- * @slot - A slot for adding `calcite-accordion-item`s. `calcite-accordion` cannot be nested, however calcite-accordion-item`s can.
+ * @slot - A slot for adding `calcite-accordion-item`s. `calcite-accordion` cannot be nested, however `calcite-accordion-item`s can.
  */
 export class Accordion {
   constructor() {
@@ -14,16 +14,18 @@ export class Accordion {
     //  Public Properties
     //
     //--------------------------------------------------------------------------
-    /** specify the appearance - default (containing border), or minimal (no containing border), defaults to default */
+    /** Specifies the appearance of the component. */
     this.appearance = "default";
-    /** specify the placement of the icon in the header, defaults to end */
+    /** Specifies the placement of the icon in the header. */
     this.iconPosition = "end";
-    /** specify the type of the icon in the header, defaults to chevron */
+    /** Specifies the type of the icon in the header. */
     this.iconType = "chevron";
-    /** specify the scale of accordion, defaults to m */
+    /** Specifies the size of the component. */
     this.scale = "m";
-    /** specify the selection mode - multi (allow any number of open items), single (allow one open item),
-     * or single-persist (allow and require one open item), defaults to multi */
+    /**
+     * Specifies the selection mode - "multi" (allow any number of open items), "single" (allow one open item),
+     * or "single-persist" (allow and require one open item).
+     */
     this.selectionMode = "multi";
     //--------------------------------------------------------------------------
     //
@@ -60,7 +62,7 @@ export class Accordion {
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
-  calciteAccordionItemKeyEvent(e) {
+  calciteInternalAccordionItemKeyEvent(e) {
     const item = e.detail.item;
     const parent = e.detail.parent;
     if (this.el === parent) {
@@ -93,6 +95,7 @@ export class Accordion {
           break;
       }
     }
+    e.stopPropagation();
   }
   registerCalciteAccordionItem(e) {
     const item = {
@@ -103,12 +106,14 @@ export class Accordion {
     if (this.el === item.parent) {
       this.items.push(item);
     }
+    e.stopPropagation();
   }
   updateActiveItemOnChange(event) {
     this.requestedAccordionItem = event.detail.requestedAccordionItem;
-    this.calciteAccordionChange.emit({
+    this.calciteInternalAccordionChange.emit({
       requestedAccordionItem: this.requestedAccordionItem
     });
+    event.stopPropagation();
   }
   //--------------------------------------------------------------------------
   //
@@ -138,7 +143,7 @@ export class Accordion {
   }
   focusElement(item) {
     const target = item;
-    target.focus();
+    target === null || target === void 0 ? void 0 : target.focus();
   }
   static get is() { return "calcite-accordion"; }
   static get encapsulation() { return "shadow"; }
@@ -166,7 +171,7 @@ export class Accordion {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "specify the appearance - default (containing border), or minimal (no containing border), defaults to default"
+        "text": "Specifies the appearance of the component."
       },
       "attribute": "appearance",
       "reflect": true,
@@ -189,7 +194,7 @@ export class Accordion {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "specify the placement of the icon in the header, defaults to end"
+        "text": "Specifies the placement of the icon in the header."
       },
       "attribute": "icon-position",
       "reflect": true,
@@ -207,7 +212,7 @@ export class Accordion {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "specify the type of the icon in the header, defaults to chevron"
+        "text": "Specifies the type of the icon in the header."
       },
       "attribute": "icon-type",
       "reflect": true,
@@ -230,7 +235,7 @@ export class Accordion {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "specify the scale of accordion, defaults to m"
+        "text": "Specifies the size of the component."
       },
       "attribute": "scale",
       "reflect": true,
@@ -248,7 +253,7 @@ export class Accordion {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "specify the selection mode - multi (allow any number of open items), single (allow one open item),\nor single-persist (allow and require one open item), defaults to multi"
+        "text": "Specifies the selection mode - \"multi\" (allow any number of open items), \"single\" (allow one open item),\nor \"single-persist\" (allow and require one open item)."
       },
       "attribute": "selection-mode",
       "reflect": true,
@@ -256,8 +261,8 @@ export class Accordion {
     }
   }; }
   static get events() { return [{
-      "method": "calciteAccordionChange",
-      "name": "calciteAccordionChange",
+      "method": "calciteInternalAccordionChange",
+      "name": "calciteInternalAccordionChange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -276,19 +281,19 @@ export class Accordion {
     }]; }
   static get elementRef() { return "el"; }
   static get listeners() { return [{
-      "name": "calciteAccordionItemKeyEvent",
-      "method": "calciteAccordionItemKeyEvent",
+      "name": "calciteInternalAccordionItemKeyEvent",
+      "method": "calciteInternalAccordionItemKeyEvent",
       "target": undefined,
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteAccordionItemRegister",
+      "name": "calciteInternalAccordionItemRegister",
       "method": "registerCalciteAccordionItem",
       "target": undefined,
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteAccordionItemSelect",
+      "name": "calciteInternalAccordionItemSelect",
       "method": "updateActiveItemOnChange",
       "target": undefined,
       "capture": false,

package/dist/collection/components/accordion/interfaces.js

@@ -1,6 +1,6 @@
 /*!
  * 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-beta.81
+ * v1.0.0-beta.84
  */
 export {};

package/dist/collection/components/accordion-item/accordion-item.css

@@ -118,9 +118,7 @@
 }
 
 :host .accordion-item-header {
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
 
 :host(:focus) .accordion-item-header {
@@ -128,14 +126,17 @@
   outline-offset: -2px;
 }
 
-:host([active]) {
+:host([active]), 
+:host([expanded]) {
   color: var(--calcite-ui-text-1);
 }
-:host([active]) .accordion-item-content {
+:host([active]) .accordion-item-content, 
+:host([expanded]) .accordion-item-content {
   display: block;
   color: var(--calcite-ui-text-1);
 }
-:host([active]) .accordion-item-header {
+:host([active]) .accordion-item-header,
+:host([expanded]) .accordion-item-header {
   border-bottom-color: transparent;
 }
 
@@ -188,12 +189,14 @@
   transform: rotate(var(--calcite-accordion-item-icon-rotation-rtl));
 }
 
-:host([active]) .accordion-item-expand-icon {
+:host([active]) .accordion-item-expand-icon, 
+:host([expanded]) .accordion-item-expand-icon {
   color: var(--calcite-ui-text-1);
   transform: rotate(var(--calcite-accordion-item-active-icon-rotation));
 }
 
-:host([active]) .calcite--rtl .accordion-item-expand-icon {
+:host([active]) .calcite--rtl .accordion-item-expand-icon,
+:host([expanded]) .calcite--rtl .accordion-item-expand-icon {
   transform: rotate(var(--calcite-accordion-item-active-icon-rotation-rtl));
 }
 
@@ -208,43 +211,60 @@
   margin-inline-end: auto;
 }
 
-:host .accordion-item-title, :host .accordion-item-subtitle {
+:host .accordion-item-heading, 
+:host .accordion-item-description {
   display: flex;
   width: 100%;
 }
 
-:host .accordion-item-title {
+:host .accordion-item-heading {
   font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-ui-text-2);
 }
 
-:host .accordion-item-subtitle {
+:host .accordion-item-description {
   margin-top: 0.25rem;
   color: var(--calcite-ui-text-3);
 }
 
-:host(:focus) .accordion-item-title, :host(:hover) .accordion-item-title {
+:host(:focus) .accordion-item-heading, 
+:host(:hover) .accordion-item-heading {
   color: var(--calcite-ui-text-1);
 }
-:host(:focus) .accordion-item-icon, :host(:hover) .accordion-item-icon {
+:host(:focus) .accordion-item-icon, 
+:host(:hover) .accordion-item-icon {
   color: var(--calcite-ui-text-1);
 }
-:host(:focus) .accordion-item-expand-icon, :host(:hover) .accordion-item-expand-icon {
+:host(:focus) .accordion-item-expand-icon, 
+:host(:hover) .accordion-item-expand-icon {
   color: var(--calcite-ui-text-1);
 }
-:host(:focus) .accordion-item-subtitle, :host(:hover) .accordion-item-subtitle {
+:host(:focus) .accordion-item-description, 
+:host(:hover) .accordion-item-description {
   color: var(--calcite-ui-text-2);
 }
 
-:host(:focus) .accordion-item-title, :host(:active) .accordion-item-title, :host([active]) .accordion-item-title {
+:host(:focus) .accordion-item-heading, 
+:host(:active) .accordion-item-heading, 
+:host([active]) .accordion-item-heading, 
+:host([expanded]) .accordion-item-heading {
   color: var(--calcite-ui-text-1);
 }
-:host(:focus) .accordion-item-icon, :host(:active) .accordion-item-icon, :host([active]) .accordion-item-icon {
+:host(:focus) .accordion-item-icon, 
+:host(:active) .accordion-item-icon, 
+:host([active]) .accordion-item-icon, 
+:host([expanded]) .accordion-item-icon {
   color: var(--calcite-ui-text-1);
 }
-:host(:focus) .accordion-item-expand-icon, :host(:active) .accordion-item-expand-icon, :host([active]) .accordion-item-expand-icon {
+:host(:focus) .accordion-item-expand-icon, 
+:host(:active) .accordion-item-expand-icon, 
+:host([active]) .accordion-item-expand-icon, 
+:host([expanded]) .accordion-item-expand-icon {
   color: var(--calcite-ui-text-1);
 }
-:host(:focus) .accordion-item-subtitle, :host(:active) .accordion-item-subtitle, :host([active]) .accordion-item-subtitle {
+:host(:focus) .accordion-item-description, 
+:host(:active) .accordion-item-description, 
+:host([active]) .accordion-item-description, 
+:host([expanded]) .accordion-item-description {
   color: var(--calcite-ui-text-2);
 }

package/dist/collection/components/accordion-item/accordion-item.js

@@ -1,10 +1,10 @@
 /*!
  * 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-beta.81
+ * v1.0.0-beta.84
  */
 import { Component, Element, Event, h, Host, Listen, Prop } from "@stencil/core";
-import { getElementDir, getElementProp } from "../../utils/dom";
+import { getElementDir, getElementProp, toAriaBoolean } from "../../utils/dom";
 import { CSS_UTILITY } from "../../utils/resources";
 import { guid } from "../../utils/guid";
 /**
@@ -17,8 +17,14 @@ export class AccordionItem {
     //  Public Properties
     //
     //--------------------------------------------------------------------------
-    /** Indicates whether the item is active. */
+    /**
+     * When true, the component is active.
+     *
+     * @deprecated use expanded instead
+     */
     this.active = false;
+    /** When true, item is expanded */
+    this.expanded = false;
     //--------------------------------------------------------------------------
     //
     //  Private State/Props
@@ -43,7 +49,7 @@ export class AccordionItem {
   }
   componentDidLoad() {
     this.itemPosition = this.getItemPosition();
-    this.calciteAccordionItemRegister.emit({
+    this.calciteInternalAccordionItemRegister.emit({
       parent: this.parent,
       position: this.itemPosition
     });
@@ -59,19 +65,19 @@ export class AccordionItem {
           [`icon-position--${this.iconPosition}`]: true,
           [`icon-type--${this.iconType}`]: true
         } },
-        h("div", { "aria-controls": regionId, class: { "accordion-item-header": true, [CSS_UTILITY.rtl]: dir === "rtl" }, id: buttonId, onClick: this.itemHeaderClickHandler, role: "button" },
+        h("div", { "aria-controls": regionId, "aria-expanded": toAriaBoolean(this.active), class: { "accordion-item-header": true, [CSS_UTILITY.rtl]: dir === "rtl" }, id: buttonId, onClick: this.itemHeaderClickHandler, role: "button" },
           this.icon ? iconEl : null,
           h("div", { class: "accordion-item-header-text" },
-            h("span", { class: "accordion-item-title" }, this.itemTitle),
-            this.itemSubtitle ? (h("span", { class: "accordion-item-subtitle" }, this.itemSubtitle)) : null),
+            h("span", { class: "accordion-item-heading" }, this.heading || this.itemTitle),
+            this.itemSubtitle ? (h("span", { class: "accordion-item-description" }, this.description || this.itemSubtitle)) : null),
           h("calcite-icon", { class: "accordion-item-expand-icon", icon: this.iconType === "chevron"
               ? "chevronDown"
               : this.iconType === "caret"
                 ? "caretDown"
-                : this.active
+                : this.expanded || this.active
                   ? "minus"
                   : "plus", scale: "s" })),
-        h("div", { "aria-expanded": this.active.toString(), "aria-labelledby": buttonId, class: "accordion-item-content", id: regionId, role: "region" },
+        h("div", { "aria-expanded": toAriaBoolean(this.expanded || this.active), "aria-labelledby": buttonId, class: "accordion-item-content", id: regionId, role: "region" },
           h("slot", null)))));
   }
   //--------------------------------------------------------------------------
@@ -91,7 +97,7 @@ export class AccordionItem {
         case "ArrowDown":
         case "Home":
         case "End":
-          this.calciteAccordionItemKeyEvent.emit({
+          this.calciteInternalAccordionItemKeyEvent.emit({
             parent: this.parent,
             item: e
           });
@@ -107,6 +113,7 @@ export class AccordionItem {
       return;
     }
     this.determineActiveItem();
+    event.stopPropagation();
   }
   //--------------------------------------------------------------------------
   //
@@ -118,18 +125,21 @@ export class AccordionItem {
       case "multi":
         if (this.el === this.requestedAccordionItem) {
           this.active = !this.active;
+          this.expanded = !this.expanded;
         }
         break;
       case "single":
         this.active = this.el === this.requestedAccordionItem ? !this.active : false;
+        this.expanded = this.el === this.requestedAccordionItem ? !this.expanded : false;
         break;
       case "single-persist":
         this.active = this.el === this.requestedAccordionItem;
+        this.expanded = this.el === this.requestedAccordionItem;
         break;
     }
   }
   emitRequestedItem() {
-    this.calciteAccordionItemSelect.emit({
+    this.calciteInternalAccordionItemSelect.emit({
       requestedAccordionItem: this.el
     });
   }
@@ -156,13 +166,34 @@ export class AccordionItem {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
-        "text": "Indicates whether the item is active."
+        "tags": [{
+            "name": "deprecated",
+            "text": "use expanded instead"
+          }],
+        "text": "When true, the component is active."
       },
       "attribute": "active",
       "reflect": true,
       "defaultValue": "false"
     },
+    "expanded": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, item is expanded"
+      },
+      "attribute": "expanded",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "itemTitle": {
       "type": "string",
       "mutable": false,
@@ -174,8 +205,11 @@ export class AccordionItem {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [],
-        "text": "pass a title for the accordion item"
+        "tags": [{
+            "name": "deprecated",
+            "text": "Use `heading` instead."
+          }],
+        "text": "Specifies a title for the component."
       },
       "attribute": "item-title",
       "reflect": false
@@ -191,12 +225,49 @@ export class AccordionItem {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [],
-        "text": "pass a title for the accordion item"
+        "tags": [{
+            "name": "deprecated",
+            "text": "Use `description` instead."
+          }],
+        "text": "Specifies a subtitle for the component."
       },
       "attribute": "item-subtitle",
       "reflect": false
     },
+    "heading": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Specifies heading text for the component."
+      },
+      "attribute": "heading",
+      "reflect": false
+    },
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies a description for the component."
+      },
+      "attribute": "description",
+      "reflect": false
+    },
     "icon": {
       "type": "string",
       "mutable": false,
@@ -209,15 +280,15 @@ export class AccordionItem {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "optionally pass an icon to display - accepts Calcite UI icon names"
+        "text": "Specifies an icon to display - accepts Calcite UI icon names."
       },
       "attribute": "icon",
       "reflect": true
     }
   }; }
   static get events() { return [{
-      "method": "calciteAccordionItemKeyEvent",
-      "name": "calciteAccordionItemKeyEvent",
+      "method": "calciteInternalAccordionItemKeyEvent",
+      "name": "calciteInternalAccordionItemKeyEvent",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -234,8 +305,8 @@ export class AccordionItem {
         "references": {}
       }
     }, {
-      "method": "calciteAccordionItemSelect",
-      "name": "calciteAccordionItemSelect",
+      "method": "calciteInternalAccordionItemSelect",
+      "name": "calciteInternalAccordionItemSelect",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -252,8 +323,8 @@ export class AccordionItem {
         "references": {}
       }
     }, {
-      "method": "calciteAccordionItemClose",
-      "name": "calciteAccordionItemClose",
+      "method": "calciteInternalAccordionItemClose",
+      "name": "calciteInternalAccordionItemClose",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -270,8 +341,8 @@ export class AccordionItem {
         "references": {}
       }
     }, {
-      "method": "calciteAccordionItemRegister",
-      "name": "calciteAccordionItemRegister",
+      "method": "calciteInternalAccordionItemRegister",
+      "name": "calciteInternalAccordionItemRegister",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -296,7 +367,7 @@ export class AccordionItem {
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteAccordionChange",
+      "name": "calciteInternalAccordionChange",
       "method": "updateActiveItemOnChange",
       "target": "body",
       "capture": false,

package/dist/collection/components/action/action.css

@@ -89,9 +89,17 @@
   display: none;
 }
 
+/**
+* CSS Custom Properties
+*
+* These properties can be overridden using the component's tag as selector.
+*
+* @prop --calcite-action-indicator-color: optionally specify the color of the action indicator
+*/
 :host {
   display: flex;
   background-color: transparent;
+  --calcite-action-indicator-color: var(--calcite-ui-brand);
 }
 
 :host([disabled]) {
@@ -123,9 +131,7 @@
   line-height: 1rem;
   font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-ui-text-3);
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
   text-align: unset;
   flex: 1 0 auto;
 }
@@ -211,11 +217,14 @@
   justify-content: flex-end;
 }
 
-:host([alignment=center]) .button .text-container--visible, :host([alignment=end]) .button .text-container--visible {
+:host([alignment=center]) .button .text-container--visible, 
+:host([alignment=end]) .button .text-container--visible {
   flex: 0 1 auto;
 }
 
-:host([scale=s][compact]) .button, :host([scale=m][compact]) .button, :host([scale=l][compact]) .button {
+:host([scale=s][compact]) .button, 
+:host([scale=m][compact]) .button, 
+:host([scale=l][compact]) .button {
   padding-left: 0px;
   padding-right: 0px;
 }
@@ -232,7 +241,10 @@
   width: 100%;
 }
 
-:host([active]) .button, :host([active]) .button:hover, :host([active]) .button:focus, :host([active][loading]) .button {
+:host([active]) .button, 
+:host([active]) .button:hover, 
+:host([active]) .button:focus, 
+:host([active][loading]) .button {
   background-color: var(--calcite-ui-foreground-3);
   fill: var(--calcite-ui-text-1);
   color: var(--calcite-ui-text-1);
@@ -249,40 +261,52 @@
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-:host([appearance=clear]) .button:hover, :host([appearance=clear]) .button:focus {
+:host([appearance=clear]) .button:hover, 
+:host([appearance=clear]) .button:focus {
   background-color: transparent;
   box-shadow: 0 0 0 2px var(--calcite-ui-border-1) inset;
 }
 
-:host([active][appearance=clear]) .button, :host([active][appearance=clear]) .button:hover, :host([active][appearance=clear]) .button:focus {
+:host([active][appearance=clear]) .button, 
+:host([active][appearance=clear]) .button:hover, 
+:host([active][appearance=clear]) .button:focus {
   background-color: var(--calcite-ui-foreground-3);
   fill: var(--calcite-ui-text-1);
   color: var(--calcite-ui-text-1);
 }
 
-:host([appearance=clear][loading]) .button, :host([appearance=clear][disabled]) .button {
+:host([appearance=clear][loading]) .button, 
+:host([appearance=clear][disabled]) .button {
   background-color: transparent;
 }
 
-:host([loading]) .button, :host([loading]) .button:hover, :host([loading]) .button:focus {
+:host([loading]) .button, 
+:host([loading]) .button:hover, 
+:host([loading]) .button:focus {
   background-color: var(--calcite-ui-foreground-1);
 }
-:host([loading]) .button .text-container, :host([loading]) .button:hover .text-container, :host([loading]) .button:focus .text-container {
+:host([loading]) .button .text-container, 
+:host([loading]) .button:hover .text-container, 
+:host([loading]) .button:focus .text-container {
   opacity: var(--calcite-ui-opacity-disabled);
 }
 
 :host([loading]) calcite-loader[inline] {
-  margin-right: 0px;
   color: var(--calcite-ui-text-3);
+  margin-inline-end: 0px;
 }
 
-:host([disabled]) .button, :host([disabled]) .button:hover, :host([disabled]) .button:focus {
+:host([disabled]) .button, 
+:host([disabled]) .button:hover, 
+:host([disabled]) .button:focus {
   cursor: default;
   background-color: var(--calcite-ui-foreground-1);
   opacity: var(--calcite-ui-opacity-disabled);
 }
 
-:host([disabled][active]) .button, :host([disabled][active]) .button:hover, :host([disabled][active]) .button:focus {
+:host([disabled][active]) .button, 
+:host([disabled][active]) .button:hover, 
+:host([disabled][active]) .button:focus {
   background-color: var(--calcite-ui-foreground-3);
   opacity: var(--calcite-ui-opacity-disabled);
 }
@@ -295,7 +319,7 @@
   width: 0.5rem;
   border-radius: 9999px;
   border-width: 2px;
-  background-color: var(--calcite-ui-brand);
+  background-color: var(--calcite-action-indicator-color);
   border-color: var(--calcite-ui-foreground-1);
   inset-block-end: 0.75rem;
   inset-inline-end: 0.75rem;