@statistikzh/leu 0.25.0 → 0.26.0

package/dist/leu-chip-link.js

@@ -1,5 +1,5 @@
-import "./LeuElement-B7NJzWwP.js";
-import "./Chip-Ch09jjYi.js";
+import "./LeuElement-BeFrgKes.js";
+import "./Chip-XAQIIsXq.js";
 import { LeuChipLink } from "./ChipLink.js";
 //#region src/components/chip/leu-chip-link.ts
 LeuChipLink.define("leu-chip-link");

package/dist/leu-chip-removable.js

@@ -1,6 +1,6 @@
-import "./LeuElement-B7NJzWwP.js";
-import "./Icon-DhAvH0XM.js";
-import "./Chip-Ch09jjYi.js";
+import "./LeuElement-BeFrgKes.js";
+import "./Icon-C_yYuynf.js";
+import "./Chip-XAQIIsXq.js";
 import { LeuChipRemovable } from "./ChipRemovable.js";
 //#region src/components/chip/leu-chip-removable.ts
 LeuChipRemovable.define("leu-chip-removable");

package/dist/leu-chip-selectable.js

@@ -1,5 +1,5 @@
-import "./LeuElement-B7NJzWwP.js";
-import "./Chip-Ch09jjYi.js";
+import "./LeuElement-BeFrgKes.js";
+import "./Chip-XAQIIsXq.js";
 import { LeuChipSelectable } from "./ChipSelectable.js";
 //#region src/components/chip/leu-chip-selectable.ts
 LeuChipSelectable.define("leu-chip-selectable");

package/dist/leu-dialog.js

@@ -1,6 +1,6 @@
-import "./LeuElement-B7NJzWwP.js";
-import "./Icon-DhAvH0XM.js";
-import { t as LeuDialog } from "./Dialog-CV1JTkCn.js";
+import "./LeuElement-BeFrgKes.js";
+import "./Icon-C_yYuynf.js";
+import { t as LeuDialog } from "./Dialog-DHuXR_oo.js";
 //#region src/components/dialog/leu-dialog.ts
 LeuDialog.define("leu-dialog");
 //#endregion

package/dist/leu-dropdown.js

@@ -1,11 +1,12 @@
-import "./LeuElement-B7NJzWwP.js";
-import "./Icon-DhAvH0XM.js";
-import "./Button-EdS9xr2J.js";
-import "./FormAssociatedMixin-BbFlza53.js";
-import "./MenuItem-CZTqGg5R.js";
-import "./Menu-DpiheIPk.js";
-import "./Popup-JQjuj26v.js";
-import { t as LeuDropdown } from "./Dropdown-DpFdFbA1.js";
+import "./LeuElement-BeFrgKes.js";
+import "./Icon-C_yYuynf.js";
+import "./Spinner-DDTqijTO.js";
+import "./Button-BkhqVjug.js";
+import "./FormAssociatedMixin-DLPvFtbT.js";
+import "./MenuItem-DVg8-1Bq.js";
+import "./Menu-BeqqtCw6.js";
+import "./Popup-DNlm_9AA.js";
+import { t as LeuDropdown } from "./Dropdown-DtFTePbc.js";
 //#region src/components/dropdown/leu-dropdown.ts
 LeuDropdown.define("leu-dropdown");
 //#endregion

package/dist/leu-file-input.js

@@ -1,9 +1,10 @@
-import "./LeuElement-B7NJzWwP.js";
-import "./Icon-DhAvH0XM.js";
-import "./Button-EdS9xr2J.js";
-import "./FormAssociatedMixin-BbFlza53.js";
-import { t as LeuFileInput } from "./FileInput-5apX17JT.js";
-import "./VisuallyHidden-BkllVjlz.js";
+import "./LeuElement-BeFrgKes.js";
+import "./Icon-C_yYuynf.js";
+import "./Spinner-DDTqijTO.js";
+import "./Button-BkhqVjug.js";
+import "./FormAssociatedMixin-DLPvFtbT.js";
+import { t as LeuFileInput } from "./FileInput-b8sbLDPI.js";
+import "./VisuallyHidden-pll3amXE.js";
 //#region src/components/file-input/leu-file-input.ts
 LeuFileInput.define("leu-file-input");
 //#endregion

package/dist/leu-icon.js

@@ -1,5 +1,5 @@
-import "./LeuElement-B7NJzWwP.js";
-import { t as LeuIcon } from "./Icon-DhAvH0XM.js";
+import "./LeuElement-BeFrgKes.js";
+import { t as LeuIcon } from "./Icon-C_yYuynf.js";
 //#region src/components/icon/leu-icon.ts
 LeuIcon.define("leu-icon");
 //#endregion

package/dist/leu-input.js

@@ -1,7 +1,7 @@
-import "./LeuElement-B7NJzWwP.js";
-import "./Icon-DhAvH0XM.js";
-import "./FormAssociatedMixin-BbFlza53.js";
-import { t as LeuInput } from "./Input-CnEz-2dK.js";
+import "./LeuElement-BeFrgKes.js";
+import "./Icon-C_yYuynf.js";
+import "./FormAssociatedMixin-DLPvFtbT.js";
+import { t as LeuInput } from "./Input-DEOVocTa.js";
 //#region src/components/input/leu-input.ts
 LeuInput.define("leu-input");
 //#endregion

package/dist/leu-menu-item.js

@@ -1,6 +1,6 @@
-import "./LeuElement-B7NJzWwP.js";
-import "./Icon-DhAvH0XM.js";
-import { t as LeuMenuItem } from "./MenuItem-CZTqGg5R.js";
+import "./LeuElement-BeFrgKes.js";
+import "./Icon-C_yYuynf.js";
+import { t as LeuMenuItem } from "./MenuItem-DVg8-1Bq.js";
 //#region src/components/menu/leu-menu-item.ts
 LeuMenuItem.define("leu-menu-item");
 //#endregion

package/dist/leu-menu.js

@@ -1,7 +1,7 @@
-import "./LeuElement-B7NJzWwP.js";
-import "./Icon-DhAvH0XM.js";
-import "./MenuItem-CZTqGg5R.js";
-import { t as LeuMenu } from "./Menu-DpiheIPk.js";
+import "./LeuElement-BeFrgKes.js";
+import "./Icon-C_yYuynf.js";
+import "./MenuItem-DVg8-1Bq.js";
+import { t as LeuMenu } from "./Menu-BeqqtCw6.js";
 //#region src/components/menu/leu-menu.ts
 LeuMenu.define("leu-menu");
 //#endregion

package/dist/leu-message.js

@@ -1,6 +1,6 @@
-import "./LeuElement-B7NJzWwP.js";
-import "./Icon-DhAvH0XM.js";
-import { t as LeuMessage } from "./Message-J4Kj7yHE.js";
+import "./LeuElement-BeFrgKes.js";
+import "./Icon-C_yYuynf.js";
+import { t as LeuMessage } from "./Message-BhknWvAF.js";
 //#region src/components/message/leu-message.ts
 LeuMessage.define("leu-message");
 //#endregion

package/dist/leu-pagination.d.ts

@@ -1,4 +1,4 @@
-import { t as LeuPagination } from "./Pagination-Be8TcBoC.js";
+import { t as LeuPagination } from "./Pagination-CqkHh-Vd.js";
 
 //#region src/components/pagination/leu-pagination.d.ts
 declare global {

package/dist/leu-pagination.js

@@ -1,9 +1,10 @@
-import "./LeuElement-B7NJzWwP.js";
-import "./Icon-DhAvH0XM.js";
-import "./Button-EdS9xr2J.js";
-import "./FormAssociatedMixin-BbFlza53.js";
-import "./VisuallyHidden-BkllVjlz.js";
-import { t as LeuPagination } from "./Pagination-CWqgusWZ.js";
+import "./LeuElement-BeFrgKes.js";
+import "./Icon-C_yYuynf.js";
+import "./Spinner-DDTqijTO.js";
+import "./Button-BkhqVjug.js";
+import "./FormAssociatedMixin-DLPvFtbT.js";
+import "./VisuallyHidden-pll3amXE.js";
+import { t as LeuPagination } from "./Pagination-DJI5MIi_.js";
 //#region src/components/pagination/leu-pagination.ts
 LeuPagination.define("leu-pagination");
 //#endregion

package/dist/leu-placeholder.js

@@ -1,5 +1,5 @@
-import "./LeuElement-B7NJzWwP.js";
-import { t as LeuPlaceholder } from "./Placeholder-DMN6sMbp.js";
+import "./LeuElement-BeFrgKes.js";
+import { t as LeuPlaceholder } from "./Placeholder-BJybFwSg.js";
 //#region src/components/placeholder/leu-placeholder.ts
 LeuPlaceholder.define("leu-placeholder");
 //#endregion

package/dist/leu-popup.js

@@ -1,5 +1,5 @@
-import "./LeuElement-B7NJzWwP.js";
-import { t as LeuPopup } from "./Popup-JQjuj26v.js";
+import "./LeuElement-BeFrgKes.js";
+import { t as LeuPopup } from "./Popup-DNlm_9AA.js";
 //#region src/components/popup/leu-popup.ts
 LeuPopup.define("leu-popup");
 //#endregion

package/dist/leu-progress-bar.js

@@ -1,5 +1,5 @@
-import "./LeuElement-B7NJzWwP.js";
-import { t as LeuProgressBar } from "./ProgressBar-CzN3fqiH.js";
+import "./LeuElement-BeFrgKes.js";
+import { t as LeuProgressBar } from "./ProgressBar-B0wYj1KF.js";
 //#region src/components/progress-bar/leu-progress-bar.ts
 LeuProgressBar.define("leu-progress-bar");
 //#endregion

package/dist/leu-radio-group.js

@@ -1,6 +1,6 @@
-import "./LeuElement-B7NJzWwP.js";
-import "./Radio-CX8aCsff.js";
-import { t as LeuRadioGroup } from "./RadioGroup-CgEWQnC4.js";
+import "./LeuElement-BeFrgKes.js";
+import "./Radio-DMCL8c4D.js";
+import { t as LeuRadioGroup } from "./RadioGroup-CM6IyBlq.js";
 //#region src/components/radio/leu-radio-group.ts
 LeuRadioGroup.define("leu-radio-group");
 //#endregion

package/dist/leu-radio.js

@@ -1,5 +1,5 @@
-import "./LeuElement-B7NJzWwP.js";
-import { t as LeuRadio } from "./Radio-CX8aCsff.js";
+import "./LeuElement-BeFrgKes.js";
+import { t as LeuRadio } from "./Radio-DMCL8c4D.js";
 //#region src/components/radio/leu-radio.ts
 LeuRadio.define("leu-radio");
 //#endregion

package/dist/leu-range.js

@@ -1,5 +1,5 @@
-import "./LeuElement-B7NJzWwP.js";
-import { t as LeuRange } from "./Range-DoW_ZdKm.js";
+import "./LeuElement-BeFrgKes.js";
+import { t as LeuRange } from "./Range-B72rtfln.js";
 //#region src/components/range/leu-range.ts
 LeuRange.define("leu-range");
 //#endregion

package/dist/leu-scroll-top.js

@@ -1,8 +1,9 @@
-import "./LeuElement-B7NJzWwP.js";
-import "./Icon-DhAvH0XM.js";
-import "./Button-EdS9xr2J.js";
-import "./FormAssociatedMixin-BbFlza53.js";
-import { t as LeuScrollTop } from "./ScrollTop-DxChetWq.js";
+import "./LeuElement-BeFrgKes.js";
+import "./Icon-C_yYuynf.js";
+import "./Spinner-DDTqijTO.js";
+import "./Button-BkhqVjug.js";
+import "./FormAssociatedMixin-DLPvFtbT.js";
+import { t as LeuScrollTop } from "./ScrollTop-BFAqBVDR.js";
 //#region src/components/scroll-top/leu-scroll-top.ts
 LeuScrollTop.define("leu-scroll-top");
 //#endregion

package/dist/leu-select.js

@@ -1,12 +1,13 @@
-import "./LeuElement-B7NJzWwP.js";
-import "./Icon-DhAvH0XM.js";
-import "./Button-EdS9xr2J.js";
-import "./FormAssociatedMixin-BbFlza53.js";
-import "./MenuItem-CZTqGg5R.js";
-import "./Menu-DpiheIPk.js";
-import "./Popup-JQjuj26v.js";
-import "./Input-CnEz-2dK.js";
-import { t as LeuSelect } from "./Select-BCx79gOH.js";
+import "./LeuElement-BeFrgKes.js";
+import "./Icon-C_yYuynf.js";
+import "./Spinner-DDTqijTO.js";
+import "./Button-BkhqVjug.js";
+import "./FormAssociatedMixin-DLPvFtbT.js";
+import "./MenuItem-DVg8-1Bq.js";
+import "./Menu-BeqqtCw6.js";
+import "./Popup-DNlm_9AA.js";
+import "./Input-DEOVocTa.js";
+import { t as LeuSelect } from "./Select-vxl3BvD4.js";
 //#region src/components/select/leu-select.ts
 LeuSelect.define("leu-select");
 //#endregion

package/dist/leu-spinner.d.ts

@@ -1,4 +1,4 @@
-import { t as LeuSpinner } from "./Spinner-CMo_o6Fy.js";
+import { t as LeuSpinner } from "./Spinner-CrM1enM0.js";
 
 //#region src/components/spinner/leu-spinner.d.ts
 declare global {

package/dist/leu-spinner.js

@@ -1,5 +1,5 @@
-import "./LeuElement-B7NJzWwP.js";
-import { t as LeuSpinner } from "./Spinner-DJR4gv3Y.js";
+import "./LeuElement-BeFrgKes.js";
+import { t as LeuSpinner } from "./Spinner-DDTqijTO.js";
 //#region src/components/spinner/leu-spinner.ts
 LeuSpinner.define("leu-spinner");
 //#endregion

package/dist/leu-table.js

@@ -1,10 +1,11 @@
-import "./LeuElement-B7NJzWwP.js";
-import "./Icon-DhAvH0XM.js";
-import "./Button-EdS9xr2J.js";
-import "./FormAssociatedMixin-BbFlza53.js";
-import "./VisuallyHidden-BkllVjlz.js";
-import "./Pagination-CWqgusWZ.js";
-import { t as LeuTable } from "./Table-DZz1ic3j.js";
+import "./LeuElement-BeFrgKes.js";
+import "./Icon-C_yYuynf.js";
+import "./Spinner-DDTqijTO.js";
+import "./Button-BkhqVjug.js";
+import "./FormAssociatedMixin-DLPvFtbT.js";
+import "./VisuallyHidden-pll3amXE.js";
+import "./Pagination-DJI5MIi_.js";
+import { t as LeuTable } from "./Table-BgCxfBcm.js";
 //#region src/components/table/leu-table.ts
 LeuTable.define("leu-table");
 //#endregion

package/dist/leu-tag.js

@@ -1,5 +1,5 @@
-import "./LeuElement-B7NJzWwP.js";
-import { t as LeuTag } from "./Tag-DsZS_8pl.js";
+import "./LeuElement-BeFrgKes.js";
+import { t as LeuTag } from "./Tag-DK2KkPIQ.js";
 //#region src/components/tag/leu-tag.ts
 LeuTag.define("leu-tag");
 //#endregion

package/dist/leu-visually-hidden.js

@@ -1,5 +1,5 @@
-import "./LeuElement-B7NJzWwP.js";
-import { t as LeuVisuallyHidden } from "./VisuallyHidden-BkllVjlz.js";
+import "./LeuElement-BeFrgKes.js";
+import { t as LeuVisuallyHidden } from "./VisuallyHidden-pll3amXE.js";
 //#region src/components/visually-hidden/leu-visually-hidden.ts
 LeuVisuallyHidden.define("leu-visually-hidden");
 //#endregion

package/dist/vscode.html-custom-data.json

@@ -100,6 +100,11 @@
           "name": "fluid",
           "description": "Alters the shape of the button to be full width of its parent container",
           "values": []
+        },
+        {
+          "name": "loading",
+          "description": "Replaces the content with a spinner",
+          "values": []
         }
       ],
       "references": [

package/dist/vue/index.d.ts

@@ -72,6 +72,8 @@ If it is set, the icon will either show an expanded or collapsed state. */
   expanded?: LeuButton["expanded"];
   /** Alters the shape of the button to be full width of its parent container */
   fluid?: LeuButton["fluid"];
+  /** Replaces the content with a spinner */
+  loading?: LeuButton["loading"];
 };
 
 type LeuButtonGroupProps = {

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@statistikzh/leu",
-  "version": "0.25.0",
+  "version": "0.26.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -133,6 +133,11 @@
               "name": "fluid",
               "description": "Alters the shape of the button to be full width of its parent container",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "loading",
+              "description": "Replaces the content with a spinner",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
@@ -206,6 +211,11 @@
                 "name": "fluid",
                 "description": "Alters the shape of the button to be full width of its parent container",
                 "type": "boolean"
+              },
+              {
+                "name": "loading",
+                "description": "Replaces the content with a spinner",
+                "type": "boolean"
               }
             ],
             "events": []

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI component library of the canton of zurich",
   "license": "MIT",
   "author": "statistikzh",
-  "version": "0.25.0",
+  "version": "0.26.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/components/button/Button.ts

@@ -4,6 +4,7 @@ import { ifDefined } from "lit/directives/if-defined.js"
 import { property, query } from "lit/decorators.js"
 
 import { LeuIcon } from "../icon/Icon.js"
+import { LeuSpinner } from "../spinner/Spinner.js"
 import { LeuElement } from "../../lib/LeuElement.js"
 import { HasSlotController } from "../../lib/hasSlotController.js"
 import { ARIA_CHECKED_ROLES, ARIA_SELECTED_ROLES } from "../../lib/a11y.js"
@@ -21,6 +22,7 @@ import { FormAssociatedMixin } from "../../lib/mixins/FormAssociatedMixin.js"
 export class LeuButton extends FormAssociatedMixin(LeuElement) {
   static dependencies = {
     "leu-icon": LeuIcon,
+    "leu-spinner": LeuSpinner,
   }
 
   static styles = [LeuElement.styles, styles]
@@ -110,6 +112,12 @@ export class LeuButton extends FormAssociatedMixin(LeuElement) {
   @property({ type: Boolean, reflect: true })
   fluid: boolean = false
 
+  /**
+   * Replaces the content with a spinner
+   */
+  @property({ type: Boolean, reflect: true })
+  loading: boolean = false
+
   @query(".button")
   private button!: HTMLButtonElement
 
@@ -166,7 +174,7 @@ export class LeuButton extends FormAssociatedMixin(LeuElement) {
   setFormValue() {}
 
   protected handleClick(e: PointerEvent) {
-    if (this.disabled) {
+    if (this.disabled || this.loading) {
       e.preventDefault()
       e.stopImmediatePropagation()
       return
@@ -228,7 +236,9 @@ export class LeuButton extends FormAssociatedMixin(LeuElement) {
       "icon-after": hasIconAfter,
       round: this.round,
       active: this.active,
+      disabled: this.disabled,
       inverted: this.inverted,
+      loading: this.loading,
       [this.variant]: true,
       [this.size]: true,
     }
@@ -241,7 +251,7 @@ export class LeuButton extends FormAssociatedMixin(LeuElement) {
         aria-expanded=${ifDefined(this.expanded)}
         role=${ifDefined(aria.role)}
         class=${classMap(cssClasses)}
-        ?disabled=${this.disabled}
+        ?disabled=${this.disabled || this.loading}
         type=${this.type}
       >
         <div class="icon-wrapper icon-wrapper--before">
@@ -251,7 +261,9 @@ export class LeuButton extends FormAssociatedMixin(LeuElement) {
         <div class="icon-wrapper icon-wrapper--after">
           <slot name="after" class="icon-wrapper__slot"></slot>
         </div>
-
+        ${this.loading
+          ? html`<leu-spinner class="spinner"></leu-spinner>`
+          : nothing}
         ${this.renderExpandingIcon()}
       </button>
     `

package/src/components/button/button.css

@@ -2,7 +2,12 @@
   display: inline-block;
 }
 
+/*
+ * @todo : Disable hover styles for loading state
+ */
 button {
+  position: relative;
+
   font-family: var(--leu-font-family-black);
   text-align: center;
   appearance: none;
@@ -28,10 +33,14 @@ button.round {
   border-radius: 50%;
 }
 
-button:disabled {
+button.disabled {
   cursor: not-allowed;
 }
 
+button.loading {
+  cursor: wait;
+}
+
 button:focus-visible {
   outline: 2px solid var(--leu-color-func-cyan);
   outline-offset: 2px;
@@ -46,6 +55,10 @@ button.inverted:focus-visible {
   justify-content: center;
 }
 
+button.loading :where(.content, .icon-wrapper) {
+  visibility: hidden;
+}
+
 /* size - regular */
 button.regular {
   padding: 12px 24px;
@@ -90,7 +103,7 @@ button.primary.active:hover {
   background: var(--leu-color-black-transp-80);
 }
 
-button.primary:disabled {
+button.primary.disabled {
   color: var(--leu-color-black-0);
   background: var(--leu-color-black-transp-20);
 }
@@ -115,7 +128,7 @@ button.secondary.active:hover {
   background: var(--leu-color-black-transp-80);
 }
 
-button.secondary:disabled {
+button.secondary.disabled {
   color: var(--leu-color-black-transp-20);
   background: var(--leu-color-black-transp-5);
 }
@@ -139,7 +152,7 @@ button.ghost.active {
   color: var(--leu-color-black-100);
 }
 
-button.ghost:disabled {
+button.ghost.disabled {
   color: var(--leu-color-black-20);
 }
 
@@ -159,7 +172,7 @@ button.primary.inverted.active {
   background: var(--leu-color-black-100);
 }
 
-button.primary.inverted:disabled {
+button.primary.inverted.disabled {
   color: var(--leu-color-black-40);
   background: var(--leu-color-white-transp-70);
 }
@@ -180,7 +193,7 @@ button.secondary.inverted.active {
   background: var(--leu-color-black-0);
 }
 
-button.secondary.inverted:disabled {
+button.secondary.inverted.disabled {
   color: var(--leu-color-white-transp-70);
   background: var(--leu-color-black-transp-10);
 }
@@ -198,7 +211,7 @@ button.ghost.inverted.active {
   color: var(--leu-color-black-0);
 }
 
-button.ghost.inverted:disabled {
+button.ghost.inverted.disabled {
   color: var(--leu-color-black-20);
 }
 
@@ -249,7 +262,7 @@ button.ghost.inverted:disabled {
   --_color: var(--leu-color-black-0);
 }
 
-.ghost:disabled .icon-wrapper {
+.ghost.disabled .icon-wrapper {
   --_bg: var(--leu-color-black-transp-5);
 }
 
@@ -264,7 +277,7 @@ button.ghost.inverted:disabled {
   --_color: var(--leu-color-black-0);
 }
 
-.ghost.inverted:disabled .icon-wrapper {
+.ghost.inverted.disabled .icon-wrapper {
   --_bg: var(--leu-color-black-transp-20);
   --_color: var(--leu-color-white-transp-70);
 }
@@ -286,3 +299,18 @@ button.ghost.inverted:disabled {
 :host([expanded="true"]) .icon-expanded {
   transform: rotate(180deg);
 }
+
+.spinner {
+  --leu-spinner-size: 1.75rem;
+  padding: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: currentcolor;
+  display: block;
+}
+
+button.small .spinner {
+  --leu-spinner-size: 1.25rem;
+}

package/src/components/button/stories/button.stories.ts

@@ -41,6 +41,7 @@ function Template(args = {}) {
         ?active=${args.active}
         ?inverted=${args.inverted}
         ?disabled=${args.disabled}
+        ?loading=${args.loading}
         @click=${copyContent}
       >
         ${args.icon
@@ -87,6 +88,7 @@ Regular.argTypes = {
   disabled: { control: "boolean" },
   round: { control: "boolean" },
   active: { control: "boolean" },
+  loading: { control: "boolean" },
 }
 Regular.args = {
   content: "Click Mich...",
@@ -125,6 +127,22 @@ const items = [
     disabled: true,
   },
 
+  { content: "Normal", icon: "calendar", iconPosition: "after", loading: true },
+  {
+    content: "Active",
+    icon: "calendar",
+    iconPosition: "after",
+    active: true,
+    loading: true,
+  },
+  {
+    content: "Disabled",
+    icon: "calendar",
+    iconPosition: "after",
+    disabled: true,
+    loading: true,
+  },
+
   { icon: "calendar" },
   { icon: "calendar", active: true },
   { icon: "calendar", disabled: true },
@@ -132,6 +150,10 @@ const items = [
   { icon: "calendar", round: true },
   { icon: "calendar", round: true, active: true },
   { icon: "calendar", round: true, disabled: true },
+
+  { icon: "calendar", round: true, loading: true },
+  { icon: "calendar", round: true, active: true, loading: true },
+  { icon: "calendar", round: true, disabled: true, loading: true },
 ]
 
 const ghostItems = [
@@ -309,6 +331,7 @@ function TemplateOverview() {
                         ?active=${item.active}
                         ?disabled=${item.disabled}
                         ?inverted=${group.inverted}
+                        ?loading=${item.loading}
                         @click=${copyContent}
                       >
                         ${item.icon