@esri/calcite-components 1.0.0-beta.63 → 1.0.0-beta.67

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

@@ -2,6 +2,7 @@ import { Component, Element, Event, Host, Method, Prop, h, forceUpdate } from "@
 import { CSS, TEXT } from "./resources";
 import { CSS_UTILITY } from "../../utils/resources";
 import { getElementDir } from "../../utils/dom";
+import { createObserver } from "../../utils/observers";
 /**
  * @slot - A slot for adding a `calcite-icon`.
  */
@@ -46,7 +47,7 @@ export class CalciteAction {
      * Indicates whether the text is displayed.
      */
     this.textEnabled = false;
-    this.observer = new MutationObserver(() => forceUpdate(this));
+    this.mutationObserver = createObserver("mutation", () => forceUpdate(this));
     // --------------------------------------------------------------------------
     //
     //  Private Methods
@@ -64,16 +65,19 @@ export class CalciteAction {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
-    this.observer.observe(this.el, { childList: true, subtree: true });
+    var _a;
+    (_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();
   }
   // --------------------------------------------------------------------------
   //
   //  Methods
   //
   // --------------------------------------------------------------------------
+  /** Sets focus on the component. */
   async setFocus() {
     this.buttonEl.focus();
   }
@@ -189,7 +193,7 @@ export class CalciteAction {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Indicates the alignment when text-enabled is false."
+        "text": "Optionally specify the horizontal alignment of button elements with text content."
       },
       "attribute": "alignment",
       "reflect": true
@@ -412,7 +416,7 @@ export class CalciteAction {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }

package/dist/collection/components/calcite-action-bar/calcite-action-bar.js

@@ -2,7 +2,9 @@ import { Component, Element, Event, Host, Prop, Watch, h, Method } from "@stenci
 import { CalciteExpandToggle, toggleChildActionText } from "../functional/CalciteExpandToggle";
 import { CSS, SLOTS, TEXT } from "./resources";
 import { getSlotted, focusElement } from "../../utils/dom";
-import { getOverflowCount, overflowActions, queryActions } from "./utils";
+import { getOverflowCount, overflowActions, queryActions, overflowActionsDebounceInMs } from "./utils";
+import { createObserver } from "../../utils/observers";
+import { debounce } from "lodash-es";
 /**
  * @slot - A slot for adding `calcite-action`s that will appear at the top of the action bar.
  * @slot bottom-actions - A slot for adding `calcite-action`s that will appear at the bottom of the action bar, above the collapse/expand button.
@@ -23,12 +25,16 @@ export class CalciteActionBar {
      * Indicates whether widget is expanded.
      */
     this.expanded = false;
-    this.mutationObserver = new MutationObserver(() => {
+    /**
+     * Disables automatically overflowing actions that won't fit into menus.
+     */
+    this.overflowActionsDisabled = false;
+    this.mutationObserver = createObserver("mutation", () => {
       const { el, expanded } = this;
       toggleChildActionText({ parent: el, expanded });
-      this.resize(el.clientHeight);
+      this.conditionallyOverflowActions();
     });
-    this.resizeObserver = new ResizeObserver((entries) => this.resizeHandlerEntries(entries));
+    this.resizeObserver = createObserver("resize", (entries) => this.resizeHandlerEntries(entries));
     // --------------------------------------------------------------------------
     //
     //  Private Methods
@@ -51,10 +57,10 @@ export class CalciteActionBar {
       const { height } = entry.contentRect;
       this.resize(height);
     };
-    this.resize = (height) => {
+    this.resize = debounce((height) => {
       var _a;
-      const { el, expanded, expandDisabled, lastActionCount, lastGroupCount, lastResizeHeight, overflowActionsDisabled } = this;
-      if (typeof height !== "number" || overflowActionsDisabled) {
+      const { el, expanded, expandDisabled } = this;
+      if (!height) {
         return;
       }
       const actions = queryActions(el);
@@ -63,14 +69,6 @@ export class CalciteActionBar {
       const groupCount = getSlotted(el, SLOTS.bottomActions) || !expandDisabled
         ? actionGroups.length + 1
         : actionGroups.length;
-      if (lastResizeHeight === height &&
-        lastActionCount === actionCount &&
-        lastGroupCount === groupCount) {
-        return;
-      }
-      this.lastActionCount = actionCount;
-      this.lastGroupCount = groupCount;
-      this.lastResizeHeight = height;
       const overflowCount = getOverflowCount({
         actionCount,
         actionHeight: (_a = actions[0]) === null || _a === void 0 ? void 0 : _a.clientHeight,
@@ -82,6 +80,11 @@ export class CalciteActionBar {
         expanded,
         overflowCount
       });
+    }, overflowActionsDebounceInMs);
+    this.conditionallyOverflowActions = () => {
+      if (!this.overflowActionsDisabled) {
+        this.overflowActions();
+      }
     };
     this.toggleExpand = () => {
       this.expanded = !this.expanded;
@@ -94,7 +97,7 @@ export class CalciteActionBar {
     if (!expandDisabled) {
       toggleChildActionText({ parent: this.el, expanded: this.expanded });
     }
-    this.resize(this.el.clientHeight);
+    this.conditionallyOverflowActions();
   }
   expandedHandler(expanded) {
     if (!this.expandDisabled) {
@@ -112,28 +115,39 @@ export class CalciteActionBar {
   //  Lifecycle
   //
   // --------------------------------------------------------------------------
-  componentWillLoad() {
+  componentDidLoad() {
+    this.conditionallyOverflowActions();
+  }
+  connectedCallback() {
+    var _a, _b;
     const { el, expandDisabled, expanded } = this;
     if (!expandDisabled) {
       toggleChildActionText({ parent: el, expanded });
     }
-    this.mutationObserver.observe(el, { childList: true });
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(el, { childList: true, subtree: true });
     if (!this.overflowActionsDisabled) {
-      this.resizeObserver.observe(el);
+      (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.observe(el);
     }
-  }
-  componentDidLoad() {
-    this.resize(this.el.clientHeight);
+    this.conditionallyOverflowActions();
   }
   disconnectedCallback() {
-    this.mutationObserver.disconnect();
-    this.resizeObserver.disconnect();
+    var _a, _b;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
   }
   // --------------------------------------------------------------------------
   //
   //  Methods
   //
   // --------------------------------------------------------------------------
+  /**
+   * Overflows actions that won't fit into menus.
+   * @internal
+   */
+  async overflowActions() {
+    this.resize(this.el.clientHeight);
+  }
+  /** Sets focus on the component. */
   async setFocus(focusId) {
     if (focusId === "expand-toggle") {
       await focusElement(this.expandToggleEl);
@@ -250,13 +264,14 @@ export class CalciteActionBar {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "Disables automatically overflowing actions that won't fit into menus."
       },
       "attribute": "overflow-actions-disabled",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "false"
     },
     "position": {
       "type": "string",
@@ -320,6 +335,25 @@ export class CalciteActionBar {
       }
     }]; }
   static get methods() { return {
+    "overflowActions": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Overflows actions that won't fit into menus.",
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }]
+      }
+    },
     "setFocus": {
       "complexType": {
         "signature": "(focusId?: \"expand-toggle\") => Promise<void>",
@@ -335,7 +369,7 @@ export class CalciteActionBar {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }

package/dist/collection/components/calcite-action-bar/utils.js

@@ -1,6 +1,7 @@
 import { forceUpdate } from "@stencil/core";
 import { SLOTS as ACTION_MENU_SLOTS } from "../calcite-action-menu/resources";
 import { SLOTS as ACTION_GROUP_SLOTS } from "../calcite-action-group/resources";
+export const overflowActionsDebounceInMs = 150;
 const groupBufferHeight = 2;
 const getMaxActionCount = ({ height, actionHeight, groupCount }) => {
   return Math.floor((height - groupCount * groupBufferHeight) / actionHeight);

package/dist/collection/components/calcite-action-menu/calcite-action-menu.js

@@ -4,6 +4,7 @@ import { focusElement, getSlotted } from "../../utils/dom";
 import { Fragment } from "@stencil/core/internal";
 import { getRoundRobinIndex } from "../../utils/array";
 import { guid } from "../../utils/guid";
+import { createObserver } from "../../utils/observers";
 const SUPPORTED_BUTTON_NAV_KEYS = ["ArrowUp", "ArrowDown"];
 const SUPPORTED_MENU_NAV_KEYS = ["ArrowUp", "ArrowDown", "End", "Home"];
 /**
@@ -34,7 +35,7 @@ export class CalciteActionMenu {
      */
     this.placement = "auto";
     this.actionElements = [];
-    this.mutationObserver = new MutationObserver(() => this.getActions());
+    this.mutationObserver = createObserver("mutation", () => this.getActions());
     this.guid = `calcite-action-menu-${guid()}`;
     this.menuId = `${this.guid}-menu`;
     this.menuButtonId = `${this.guid}-menu-button`;
@@ -245,6 +246,7 @@ export class CalciteActionMenu {
   //  Methods
   //
   // --------------------------------------------------------------------------
+  /** Sets focus on the component. */
   async setFocus() {
     focusElement(this.open ? this.menuEl : this.menuButtonEl);
   }
@@ -462,7 +464,7 @@ export class CalciteActionMenu {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }

package/dist/collection/components/calcite-action-pad/calcite-action-pad.js

@@ -75,6 +75,7 @@ export class CalciteActionPad {
   //  Methods
   //
   // --------------------------------------------------------------------------
+  /** Sets focus on the component. */
   async setFocus(focusId) {
     if (focusId === "expand-toggle") {
       await focusElement(this.expandToggleEl);
@@ -287,7 +288,7 @@ export class CalciteActionPad {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }

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

@@ -133,7 +133,7 @@ export class CalciteAlert {
   //  Public Methods
   //
   //--------------------------------------------------------------------------
-  /** focus either the slotted link or the close button */
+  /** Sets focus on the component. */
   async setFocus() {
     if (!this.closeButton && !this.alertLinkEl) {
       return;
@@ -429,7 +429,7 @@ export class CalciteAlert {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "focus either the slotted link or the close button",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }

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

@@ -134,38 +134,41 @@
   margin: 0;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  align-content: space-between;
   color: var(--calcite-ui-text-2);
-  fill: var(--calcite-ui-text-2);
+  fill: ;
 }
 
 .heading {
-  padding: 0;
-  margin: 0;
   font-weight: var(--calcite-font-weight-medium);
-  line-height: 1.5;
+  margin: 0;
+  padding: 0;
 }
 
 .header .heading {
-  flex: 1 0 auto;
-  padding: var(--calcite-spacing-half) var(--calcite-spacing-half);
+  flex: 1 1 auto;
+  padding: 0.5rem;
 }
 
 h1.heading {
   font-size: var(--calcite-font-size-2);
+  line-height: 1.5rem;
 }
 
 h2.heading {
   font-size: var(--calcite-font-size-1);
+  line-height: 1.5rem;
 }
 
 h3.heading {
   font-size: var(--calcite-font-size-0);
+  line-height: 1.25rem;
 }
 
 h4.heading,
 h5.heading {
   font-size: var(--calcite-font-size--1);
+  line-height: 1rem;
 }
 
 .header {
@@ -257,6 +260,7 @@ calcite-handle {
   padding: 0;
   font-size: var(--calcite-font-size--2);
   color: var(--calcite-ui-text-3);
+  margin-top: 0.125rem;
   word-wrap: break-word;
   word-break: break-word;
 }

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

@@ -4,10 +4,10 @@ import { CSS_UTILITY } from "../../utils/resources";
 import { getElementDir, getSlotted } from "../../utils/dom";
 import { CalciteHeading } from "../functional/CalciteHeading";
 /**
+ * @slot - A slot for adding content to the block.
  * @slot icon - A slot for adding a leading header icon.
  * @slot control - A slot for adding a single HTML input element in a header.
  * @slot header-menu-actions - a slot for adding an overflow menu with actions inside a dropdown.
- * @slot - A slot for adding content to the block.
  */
 export class CalciteBlock {
   constructor() {
@@ -176,7 +176,7 @@ export class CalciteBlock {
         "resolved": "string",
         "references": {}
       },
-      "required": false,
+      "required": true,
       "optional": false,
       "docs": {
         "tags": [],

package/dist/collection/components/calcite-block-section/calcite-block-section.css

@@ -108,7 +108,7 @@
   border-width: 0;
   color: var(--calcite-ui-text-2);
   font-family: var(--calcite-sans-family);
-  font-weight: var(--calcite-font-weight-normal);
+  font-weight: var(--calcite-font-weight-medium);
   width: 100%;
 }
 
@@ -122,7 +122,7 @@
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
   padding-left: 0;
-  padding-right: 0.25rem;
+  padding-right: 0;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   -webkit-user-select: none;
@@ -160,12 +160,10 @@
 .toggle--switch calcite-switch {
   pointer-events: none;
   margin-left: 0.25rem;
-  margin-right: 0.25rem;
 }
 
 .toggle--switch .status-icon {
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
+  margin-left: 0.5rem;
 }
 
 .toggle--switch__content {
@@ -182,17 +180,12 @@
   color: var(--calcite-ui-danger);
 }
 
-.calcite--rtl .toggle--switch {
-  padding-right: 0;
-  padding-left: 0.5rem;
-}
-
 .calcite--rtl .toggle--switch calcite-switch {
   margin-left: 0;
-  margin-right: 0.5rem;
+  margin-right: 0.25rem;
 }
 
-.calcite--rtl .section-header {
-  padding-right: 0;
-  padding-left: 0.25rem;
+.calcite--rtl .toggle--switch .status-icon {
+  margin-left: 0;
+  margin-right: 0.5rem;
 }

package/dist/collection/components/calcite-block-section/calcite-block-section.js

@@ -15,10 +15,20 @@ export class CalciteBlockSection {
      * This property determines the look of the section toggle.
      * If the value is "switch", a toggle-switch will be displayed.
      * If the value is "button", a clickable header is displayed.
-     *
-     * @todo revisit doc
      */
     this.toggleDisplay = "button";
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.handleHeaderKeyDown = (event) => {
+      if (event.key === " " || event.key === "Enter") {
+        this.toggleSection();
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    };
     this.toggleSection = () => {
       this.open = !this.open;
       this.calciteBlockSectionToggle.emit();
@@ -26,18 +36,6 @@ export class CalciteBlockSection {
   }
   // --------------------------------------------------------------------------
   //
-  //  Private Methods
-  //
-  // --------------------------------------------------------------------------
-  handleHeaderLabelKeyDown(event) {
-    if (event.key === " " || event.key === "Enter") {
-      event.preventDefault();
-      event.stopPropagation();
-      this.click();
-    }
-  }
-  // --------------------------------------------------------------------------
-  //
   //  Render Methods
   //
   // --------------------------------------------------------------------------
@@ -61,17 +59,17 @@ export class CalciteBlockSection {
         ? ICONS.menuClosedLeft
         : ICONS.menuClosedRight;
     const toggleLabel = open ? intlCollapse || TEXT.collapse : intlExpand || TEXT.expand;
-    const headerNode = toggleDisplay === "switch" ? (h("label", { "aria-label": toggleLabel, class: {
+    const headerNode = toggleDisplay === "switch" ? (h("div", { "aria-label": toggleLabel, class: {
         [CSS.toggle]: true,
         [CSS.toggleSwitch]: true
-      }, onKeyDown: this.handleHeaderLabelKeyDown, tabIndex: 0, title: toggleLabel },
+      }, onClick: this.toggleSection, onKeyDown: this.handleHeaderKeyDown, tabIndex: 0, title: toggleLabel },
       h("div", { class: CSS.toggleSwitchContent },
         h("span", { class: CSS.toggleSwitchText }, text)),
-      h("calcite-switch", { onCalciteSwitchChange: this.toggleSection, scale: "s", switched: open, tabIndex: -1 }),
+      h("calcite-switch", { checked: open, label: toggleLabel, scale: "s", tabIndex: -1 }),
       this.renderStatusIcon())) : (h("button", { "aria-label": toggleLabel, class: {
         [CSS.sectionHeader]: true,
         [CSS.toggle]: true
-      }, name: toggleLabel, onClick: this.toggleSection, onKeyDown: this.handleHeaderLabelKeyDown },
+      }, name: toggleLabel, onClick: this.toggleSection },
       h("calcite-icon", { icon: arrowIcon, scale: "s" }),
       h("span", { class: CSS.sectionHeaderText }, text),
       this.renderStatusIcon()));
@@ -196,10 +194,7 @@ export class CalciteBlockSection {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [{
-            "text": "revisit doc",
-            "name": "todo"
-          }],
+        "tags": [],
         "text": "This property determines the look of the section toggle.\nIf the value is \"switch\", a toggle-switch will be displayed.\nIf the value is \"button\", a clickable header is displayed."
       },
       "attribute": "toggle-display",

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

@@ -2,9 +2,11 @@ import { Component, Element, h, Method, Prop, Build, State, Watch } from "@stenc
 import { CSS, TEXT } from "./resources";
 import { getElementDir, queryElementRoots, closestElementCrossShadowBoundary } from "../../utils/dom";
 import { CSS_UTILITY } from "../../utils/resources";
-/** @slot default text slot for button text */
+import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
+import { createObserver } from "../../utils/observers";
 /** Passing a 'href' will render an anchor link, instead of a button. Role will be set to link, or button, depending on this. */
 /** It is the consumers responsibility to add aria information, rel, target, for links, and any button attributes for form submission */
+/** @slot - A slot for adding text. */
 export class CalciteButton {
   constructor() {
     //--------------------------------------------------------------------------
@@ -18,6 +20,8 @@ export class CalciteButton {
     this.appearance = "solid";
     /** specify the color of the button, defaults to blue */
     this.color = "blue";
+    /** is the button disabled  */
+    this.disabled = false;
     /** string to override English loading text
      * @default "Loading"
      */
@@ -32,6 +36,8 @@ export class CalciteButton {
     this.splitChild = false;
     /** specify the width of the button, defaults to auto */
     this.width = "auto";
+    /** watches for changing text content **/
+    this.mutationObserver = createObserver("mutation", () => this.updateHasContent());
     /** the node type of the rendered child element */
     this.childElType = "button";
     /** determine if there is slotted content for styling purposes */
@@ -43,6 +49,10 @@ export class CalciteButton {
     //  Private Methods
     //
     //--------------------------------------------------------------------------
+    this.onLabelClick = (event) => {
+      this.handleClick(event);
+      this.setFocus();
+    };
     // act on a requested or nearby form based on type
     this.handleClick = (e) => {
       const { childElType, form, el, type } = this;
@@ -93,9 +103,12 @@ export class CalciteButton {
     this.childElType = this.href ? "a" : "button";
     this.hasLoader = this.loading;
     this.setupTextContentObserver();
+    connectLabel(this);
   }
   disconnectedCallback() {
-    this.observer.disconnect();
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    disconnectLabel(this);
   }
   componentWillLoad() {
     if (Build.isBrowser) {
@@ -113,7 +126,7 @@ export class CalciteButton {
     const iconEndEl = (h("calcite-icon", { class: { [CSS.icon]: true, [CSS.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
     const contentEl = (h("span", { class: CSS.content },
       h("slot", null)));
-    return (h(Tag, { "aria-label": this.label, class: { [CSS_UTILITY.rtl]: dir === "rtl", [CSS.contentSlotted]: this.hasContent }, disabled: this.disabled || this.loading, href: this.childElType === "a" && this.href, name: this.childElType === "button" && this.name, onClick: this.handleClick, ref: (el) => (this.childEl = el), rel: this.childElType === "a" && this.rel, tabIndex: this.disabled || this.loading ? -1 : null, target: this.childElType === "a" && this.target, type: this.childElType === "button" && this.type },
+    return (h(Tag, { "aria-label": getLabelText(this), class: { [CSS_UTILITY.rtl]: dir === "rtl", [CSS.contentSlotted]: this.hasContent }, disabled: this.disabled || this.loading, href: this.childElType === "a" && this.href, name: this.childElType === "button" && this.name, onClick: this.handleClick, ref: (el) => (this.childEl = el), rel: this.childElType === "a" && this.rel, tabIndex: this.disabled || this.loading ? -1 : null, target: this.childElType === "a" && this.target, type: this.childElType === "button" && this.type },
       loader,
       this.iconStart ? iconStartEl : null,
       this.hasContent ? contentEl : null,
@@ -124,6 +137,7 @@ export class CalciteButton {
   //  Public Methods
   //
   //--------------------------------------------------------------------------
+  /** Sets focus on the component. */
   async setFocus() {
     this.childEl.focus();
   }
@@ -136,12 +150,8 @@ export class CalciteButton {
         : slottedContent;
   }
   setupTextContentObserver() {
-    if (Build.isBrowser) {
-      this.observer = new MutationObserver(() => {
-        this.updateHasContent();
-      });
-      this.observer.observe(this.el, { childList: true, subtree: true });
-    }
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
   }
   static get is() { return "calcite-button"; }
   static get encapsulation() { return "shadow"; }
@@ -247,13 +257,14 @@ export class CalciteButton {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "is the button disabled"
       },
       "attribute": "disabled",
-      "reflect": true
+      "reflect": true,
+      "defaultValue": "false"
     },
     "href": {
       "type": "string",
@@ -358,7 +369,7 @@ export class CalciteButton {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "optionally add a calcite-loader component to the button, disabling interaction."
@@ -427,7 +438,7 @@ export class CalciteButton {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "optionally add a round style to the button"
@@ -552,7 +563,7 @@ export class CalciteButton {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }

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

@@ -7,8 +7,8 @@ import { CSS_UTILITY } from "../../utils/resources";
  * - cards will expand to fit the width of their container
  */
 /**
- * @slot thumbnail - A slot for adding a thumbnail to the card.
  * @slot - A slot for adding subheader/description content.
+ * @slot thumbnail - A slot for adding a thumbnail to the card.
  * @slot title - A slot for adding a card title.
  * @slot subtitle - A slot for adding a card subtitle or short summary.
  * @slot footer-leading - A slot for adding a leading footer.

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

@@ -141,7 +141,7 @@
 :host([checked]) .check-svg,
 :host([indeterminate]) .check-svg {
   background-color: var(--calcite-ui-brand);
-  box-shadow: 0 0 0 1px var(--calcite-ui-brand);
+  box-shadow: inset 0 0 0 1px var(--calcite-ui-brand);
 }
 
 :host .focused .check-svg {