@statistikzh/leu 0.13.0 → 0.13.1

package/dist/RadioGroup.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-874a297c.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-b670d77c.js';
 import { css, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 

package/dist/Range.d.ts

@@ -56,5 +56,5 @@ export class LeuRange extends LeuElement {
     }): void;
     render(): import("lit-html").TemplateResult<1>;
 }
-import { L as LeuElement } from './LeuElement-874a297c.js';
+import { L as LeuElement } from './LeuElement-b670d77c.js';
 //# sourceMappingURL=Range.d.ts.map

package/dist/Range.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-874a297c.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-b670d77c.js';
 import { css, html } from 'lit';
 
 var css_248z = css`:host {

package/dist/ScrollTop.d.ts

@@ -15,5 +15,5 @@ export class LeuScrollTop extends LeuElement {
     _scrollListener: Function;
     render(): import("lit-html").TemplateResult<1>;
 }
-import { L as LeuElement } from './LeuElement-874a297c.js';
+import { L as LeuElement } from './LeuElement-b670d77c.js';
 //# sourceMappingURL=ScrollTop.d.ts.map

package/dist/ScrollTop.js

@@ -1,11 +1,11 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-874a297c.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-b670d77c.js';
 import { css, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { LeuButton } from './Button.js';
 import { LeuIcon } from './Icon.js';
 import { t as throttle } from './utils-65469421.js';
 import 'lit/directives/if-defined.js';
-import './hasSlotController-dbcac394.js';
+import './hasSlotController-c09741c5.js';
 
 var css_248z = css`.scroll-top {
   overflow: hidden;

package/dist/Select.d.ts

@@ -131,6 +131,6 @@ export class LeuSelect extends LeuElement {
     _renderToggleButton(): import("lit-html").TemplateResult<1>;
     render(): import("lit-html").TemplateResult<1>;
 }
-import { L as LeuElement } from './LeuElement-874a297c.js';
+import { L as LeuElement } from './LeuElement-b670d77c.js';
 import { nothing } from 'lit';
 //# sourceMappingURL=Select.d.ts.map

package/dist/Select.js

@@ -1,9 +1,9 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-874a297c.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-b670d77c.js';
 import { css, nothing, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { H as HasSlotController } from './hasSlotController-dbcac394.js';
+import { H as HasSlotController } from './hasSlotController-c09741c5.js';
 import { LeuButton } from './Button.js';
 import { LeuMenu } from './Menu.js';
 import { LeuMenuItem } from './MenuItem.js';
@@ -79,7 +79,7 @@ var css_248z = css`:host {
   line-height: 1.5;
   padding: 1.375rem 3rem 1.375rem 1rem;
 
-  background: none;
+  background: var(--leu-color-black-0);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

package/dist/Spinner.d.ts

@@ -5,5 +5,5 @@
 export class LeuSpinner extends LeuElement {
     render(): import("lit-html").TemplateResult<1>;
 }
-import { L as LeuElement } from './LeuElement-874a297c.js';
+import { L as LeuElement } from './LeuElement-b670d77c.js';
 //# sourceMappingURL=Spinner.d.ts.map

package/dist/Spinner.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-874a297c.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-b670d77c.js';
 import { css, html } from 'lit';
 
 var css_248z = css`@keyframes leu-spinner-rotate {

package/dist/Table.d.ts

@@ -38,5 +38,5 @@ export class LeuTable extends LeuElement {
     get _data(): any[];
     render(): import("lit-html").TemplateResult<1>;
 }
-import { L as LeuElement } from './LeuElement-874a297c.js';
+import { L as LeuElement } from './LeuElement-b670d77c.js';
 //# sourceMappingURL=Table.d.ts.map

package/dist/Table.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-874a297c.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-b670d77c.js';
 import { css, html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -8,7 +8,7 @@ import { LeuPagination } from './Pagination.js';
 import 'lit/directives/live.js';
 import './Button.js';
 import 'lit/directives/if-defined.js';
-import './hasSlotController-dbcac394.js';
+import './hasSlotController-c09741c5.js';
 import './VisuallyHidden.js';
 
 var css_248z = css`:host {

package/dist/VisuallyHidden.d.ts

@@ -4,5 +4,5 @@
 export class LeuVisuallyHidden extends LeuElement {
     render(): import("lit-html").TemplateResult<1>;
 }
-import { L as LeuElement } from './LeuElement-874a297c.js';
+import { L as LeuElement } from './LeuElement-b670d77c.js';
 //# sourceMappingURL=VisuallyHidden.d.ts.map

package/dist/VisuallyHidden.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-874a297c.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-b670d77c.js';
 import { css, html } from 'lit';
 
 var css_248z = css`:host {

package/dist/{hasSlotController-dbcac394.d.ts → hasSlotController-c09741c5.d.ts}

@@ -35,4 +35,4 @@ declare class HasSlotController implements ReactiveController {
     hostConnected(): void;
     hostDisconnected(): void;
 }
-//# sourceMappingURL=hasSlotController-dbcac394.d.ts.map
+//# sourceMappingURL=hasSlotController-c09741c5.d.ts.map

package/dist/{hasSlotController-dbcac394.d.ts.map → hasSlotController-c09741c5.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"hasSlotController-dbcac394.d.ts","sourceRoot":"","sources":["hasSlotController-dbcac394.js"],"names":[],"mappings":";;;;iCASa,OAAO,KAAK,EAAE,kBAAkB;AAP7C;;;GAGG;AAEH;;;;GAIG;AACH;IACE,uCAcC;IAHC,UAAgB;IAEhB,eAA0B;IAG5B;;;OAGG;IACH,uBAeC;IAED;;;;OAIG;IACH,qBAEC;IAED;;;OAGG;IACH,gCAEC;IACD,sBAEC;IACD,yBAEC;CACF"}
+{"version":3,"file":"hasSlotController-c09741c5.d.ts","sourceRoot":"","sources":["hasSlotController-c09741c5.js"],"names":[],"mappings":";;;;iCASa,OAAO,KAAK,EAAE,kBAAkB;AAP7C;;;GAGG;AAEH;;;;GAIG;AACH;IACE,uCAcC;IAHC,UAAgB;IAEhB,eAA0B;IAG5B;;;OAGG;IACH,uBAeC;IAED;;;;OAIG;IACH,qBAEC;IAED;;;OAGG;IACH,gCAEC;IACD,sBAEC;IACD,yBAEC;CACF"}

package/dist/{hasSlotController-dbcac394.js → hasSlotController-c09741c5.js}

@@ -1,4 +1,4 @@
-import { _ as _defineProperty } from './LeuElement-874a297c.js';
+import { _ as _defineProperty } from './LeuElement-b670d77c.js';
 
 /**
  * Thanks Shoelace!

package/dist/index.d.ts

@@ -16,6 +16,7 @@ export { LeuRadio } from "./Radio.js";
 export { LeuRadioGroup } from "./RadioGroup.js";
 export { LeuSelect } from "./Select.js";
 export { LeuTable } from "./Table.js";
+export { L as LeuElement } from "./LeuElement-b670d77c.js";
 export { BUTTON_EXPANDED_OPTIONS, BUTTON_SIZES, BUTTON_TYPES, BUTTON_VARIANTS, LeuButton } from "./Button.js";
 export { LeuInput, SIZES } from "./Input.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -18,7 +18,7 @@ export { LeuRadio } from './Radio.js';
 export { LeuRadioGroup } from './RadioGroup.js';
 export { LeuSelect } from './Select.js';
 export { LeuTable } from './Table.js';
-import './LeuElement-874a297c.js';
+export { L as LeuElement } from './LeuElement-b670d77c.js';
 import 'lit';
 import 'lit/static-html.js';
 import 'lit/directives/ref.js';
@@ -27,7 +27,7 @@ import './utils-65469421.js';
 import './Icon.js';
 import './VisuallyHidden.js';
 import 'lit/directives/if-defined.js';
-import './hasSlotController-dbcac394.js';
+import './hasSlotController-c09741c5.js';
 import './Chip.js';
 import 'lit/directives/live.js';
 import '@floating-ui/dom';

package/dist/leu-accordion.js

@@ -1,5 +1,5 @@
 import { LeuAccordion } from './Accordion.js';
-import './LeuElement-874a297c.js';
+import './LeuElement-b670d77c.js';
 import 'lit';
 import 'lit/static-html.js';
 

package/dist/leu-breadcrumb.js

@@ -1,5 +1,5 @@
 import { LeuBreadcrumb } from './Breadcrumb.js';
-import './LeuElement-874a297c.js';
+import './LeuElement-b670d77c.js';
 import 'lit';
 import 'lit/directives/ref.js';
 import 'lit/directives/class-map.js';

package/dist/leu-button-group.js

@@ -1,5 +1,5 @@
 import { LeuButtonGroup } from './ButtonGroup.js';
-import './LeuElement-874a297c.js';
+import './LeuElement-b670d77c.js';
 import 'lit';
 
 LeuButtonGroup.define("leu-button-group");

package/dist/leu-button.js

@@ -1,10 +1,10 @@
 import { LeuButton } from './Button.js';
-import './LeuElement-874a297c.js';
+import './LeuElement-b670d77c.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/directives/if-defined.js';
 import './Icon.js';
-import './hasSlotController-dbcac394.js';
+import './hasSlotController-c09741c5.js';
 
 LeuButton.define("leu-button");
 

package/dist/leu-checkbox-group.js

@@ -1,5 +1,5 @@
 import { LeuCheckboxGroup } from './CheckboxGroup.js';
-import './LeuElement-874a297c.js';
+import './LeuElement-b670d77c.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 

package/dist/leu-checkbox.js

@@ -1,5 +1,5 @@
 import { LeuCheckbox } from './Checkbox.js';
-import './LeuElement-874a297c.js';
+import './LeuElement-b670d77c.js';
 import 'lit';
 import './Icon.js';
 

package/dist/leu-chip-group.js

@@ -1,5 +1,5 @@
 import { LeuChipGroup } from './ChipGroup.js';
-import './LeuElement-874a297c.js';
+import './LeuElement-b670d77c.js';
 import 'lit';
 import 'lit/static-html.js';
 

package/dist/leu-chip-link.js

@@ -1,5 +1,5 @@
 import { LeuChipLink } from './ChipLink.js';
-import './LeuElement-874a297c.js';
+import './LeuElement-b670d77c.js';
 import 'lit';
 import './Chip.js';
 

package/dist/leu-chip-removable.js

@@ -1,5 +1,5 @@
 import { LeuChipRemovable } from './ChipRemovable.js';
-import './LeuElement-874a297c.js';
+import './LeuElement-b670d77c.js';
 import 'lit';
 import './Chip.js';
 import './Icon.js';

package/dist/leu-chip-selectable.js

@@ -1,5 +1,5 @@
 import { LeuChipSelectable } from './ChipSelectable.js';
-import './LeuElement-874a297c.js';
+import './LeuElement-b670d77c.js';
 import 'lit';
 import './Chip.js';
 

package/dist/leu-dialog.js

@@ -1,9 +1,9 @@
 import { LeuDialog } from './Dialog.js';
-import './LeuElement-874a297c.js';
+import './LeuElement-b670d77c.js';
 import 'lit';
 import 'lit/directives/ref.js';
 import 'lit/directives/class-map.js';
-import './hasSlotController-dbcac394.js';
+import './hasSlotController-c09741c5.js';
 import './Icon.js';
 
 LeuDialog.define("leu-dialog");

package/dist/leu-dropdown.js

@@ -1,8 +1,8 @@
 import { LeuDropdown } from './Dropdown.js';
-import './LeuElement-874a297c.js';
+import './LeuElement-b670d77c.js';
 import 'lit';
 import 'lit/directives/ref.js';
-import './hasSlotController-dbcac394.js';
+import './hasSlotController-c09741c5.js';
 import './Button.js';
 import 'lit/directives/class-map.js';
 import 'lit/directives/if-defined.js';

package/dist/leu-icon.js

@@ -1,5 +1,5 @@
 import { LeuIcon } from './Icon.js';
-import './LeuElement-874a297c.js';
+import './LeuElement-b670d77c.js';
 import 'lit';
 
 LeuIcon.define("leu-icon");

package/dist/leu-input.js

@@ -1,5 +1,5 @@
 import { LeuInput } from './Input.js';
-import './LeuElement-874a297c.js';
+import './LeuElement-b670d77c.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/directives/if-defined.js';

package/dist/leu-menu-item.js

@@ -1,5 +1,5 @@
 import { LeuMenuItem } from './MenuItem.js';
-import './LeuElement-874a297c.js';
+import './LeuElement-b670d77c.js';
 import 'lit';
 import 'lit/directives/if-defined.js';
 import './Icon.js';

package/dist/leu-menu.js

@@ -1,5 +1,5 @@
 import { LeuMenu } from './Menu.js';
-import './LeuElement-874a297c.js';
+import './LeuElement-b670d77c.js';
 import 'lit';
 import './MenuItem.js';
 import 'lit/directives/if-defined.js';

package/dist/leu-pagination.js

@@ -1,12 +1,12 @@
 import { LeuPagination } from './Pagination.js';
-import './LeuElement-874a297c.js';
+import './LeuElement-b670d77c.js';
 import 'lit';
 import 'lit/directives/live.js';
 import './Button.js';
 import 'lit/directives/class-map.js';
 import 'lit/directives/if-defined.js';
 import './Icon.js';
-import './hasSlotController-dbcac394.js';
+import './hasSlotController-c09741c5.js';
 import './VisuallyHidden.js';
 
 LeuPagination.define("leu-pagination");

package/dist/leu-popup.js

@@ -1,5 +1,5 @@
 import { LeuPopup } from './Popup.js';
-import './LeuElement-874a297c.js';
+import './LeuElement-b670d77c.js';
 import 'lit';
 import '@floating-ui/dom';
 

package/dist/leu-radio-group.js

@@ -1,5 +1,5 @@
 import { LeuRadioGroup } from './RadioGroup.js';
-import './LeuElement-874a297c.js';
+import './LeuElement-b670d77c.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 

package/dist/leu-radio.js

@@ -1,5 +1,5 @@
 import { LeuRadio } from './Radio.js';
-import './LeuElement-874a297c.js';
+import './LeuElement-b670d77c.js';
 import 'lit';
 
 LeuRadio.define("leu-radio");

package/dist/leu-range.js

@@ -1,5 +1,5 @@
 import { LeuRange } from './Range.js';
-import './LeuElement-874a297c.js';
+import './LeuElement-b670d77c.js';
 import 'lit';
 
 LeuRange.define("leu-range");

package/dist/leu-scroll-top.js

@@ -1,11 +1,11 @@
 import { LeuScrollTop } from './ScrollTop.js';
-import './LeuElement-874a297c.js';
+import './LeuElement-b670d77c.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import './Button.js';
 import 'lit/directives/if-defined.js';
 import './Icon.js';
-import './hasSlotController-dbcac394.js';
+import './hasSlotController-c09741c5.js';
 import './utils-65469421.js';
 
 LeuScrollTop.define("leu-scroll-top");

package/dist/leu-select.js

@@ -1,10 +1,10 @@
 import { LeuSelect } from './Select.js';
-import './LeuElement-874a297c.js';
+import './LeuElement-b670d77c.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/directives/ref.js';
 import 'lit/directives/if-defined.js';
-import './hasSlotController-dbcac394.js';
+import './hasSlotController-c09741c5.js';
 import './Button.js';
 import './Icon.js';
 import './Menu.js';

package/dist/leu-spinner.js

@@ -1,5 +1,5 @@
 import { LeuSpinner } from './Spinner.js';
-import './LeuElement-874a297c.js';
+import './LeuElement-b670d77c.js';
 import 'lit';
 
 LeuSpinner.define("leu-spinner");

package/dist/leu-table.js

@@ -1,5 +1,5 @@
 import { LeuTable } from './Table.js';
-import './LeuElement-874a297c.js';
+import './LeuElement-b670d77c.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/directives/style-map.js';
@@ -9,7 +9,7 @@ import './Pagination.js';
 import 'lit/directives/live.js';
 import './Button.js';
 import 'lit/directives/if-defined.js';
-import './hasSlotController-dbcac394.js';
+import './hasSlotController-c09741c5.js';
 import './VisuallyHidden.js';
 
 LeuTable.define("leu-table");

package/dist/leu-visually-hidden.js

@@ -1,5 +1,5 @@
 import { LeuVisuallyHidden } from './VisuallyHidden.js';
-import './LeuElement-874a297c.js';
+import './LeuElement-b670d77c.js';
 import 'lit';
 
 LeuVisuallyHidden.define("leu-visually-hidden");

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.13.0",
+  "version": "0.13.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/index.js

@@ -15,3 +15,4 @@ export * from "./src/components/radio/Radio.js"
 export * from "./src/components/radio/RadioGroup.js"
 export * from "./src/components/select/Select.js"
 export * from "./src/components/table/Table.js"
+export * from "./src/lib/LeuElement.js"

package/package.json

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

package/src/components/button/Button.js

@@ -110,7 +110,7 @@ export class LeuButton extends LeuElement {
 
   renderExpandingIcon() {
     if (typeof this.expanded !== "undefined" && this.variant === "ghost") {
-      return html`<div class="icon-wrapper icon-wrapper--expanded">
+      return html`<div class="icon-expanded">
         <leu-icon name="angleDropDown" size="24"></leu-icon>
       </div>`
     }
@@ -170,9 +170,14 @@ export class LeuButton extends LeuElement {
         ?disabled=${this.disabled}
         type=${this.type}
       >
-        <slot name="before" class="icon-wrapper icon-wrapper--before"></slot>
+        <div class="icon-wrapper icon-wrapper--before">
+          <slot name="before" class="icon-wrapper__slot"></slot>
+        </div>
         <span class="content"><slot></slot></span>
-        <slot name="after" class="icon-wrapper icon-wrapper--after"></slot>
+        <div class="icon-wrapper icon-wrapper--after">
+          <slot name="after" class="icon-wrapper__slot"></slot>
+        </div>
+
         ${this.renderExpandingIcon()}
       </button>
     `

package/src/components/button/button.css

@@ -128,6 +128,7 @@ button.ghost {
   padding: 0 0.5rem;
   color: var(--leu-color-black-60);
   font-family: var(--leu-font-family-regular);
+  height: 2rem;
 }
 
 button.ghost:hover {
@@ -206,49 +207,82 @@ button.ghost.inverted:disabled {
   display: block;
 }
 
-.ghost.icon-before .icon-wrapper--before,
-.ghost.icon-after .icon-wrapper--after {
+.icon-wrapper {
+  display: none;
+}
+
+.icon-before .icon-wrapper--before,
+.icon-after .icon-wrapper--after {
   display: block;
-  padding: 0.5rem;
+}
+
+.ghost .icon-wrapper {
+  position: relative;
+  width: 2rem;
+  padding: 0 0.5rem;
+  --_bg: var(--leu-color-black-transp-10);
+  --_color: currentcolor;
+}
+
+.ghost .icon-wrapper__slot {
+  display: block;
+  position: relative;
+  z-index: 1;
+  color: var(--_color);
+}
+
+.ghost .icon-wrapper::before {
+  content: "";
+  position: absolute;
+  z-index: 0;
+  left: 0;
+  top: -0.5rem;
+
+  width: 2rem;
+  aspect-ratio: 1;
   border-radius: 50%;
-  background: var(--leu-color-black-transp-10);
+  background: var(--_bg);
 }
 
-.ghost.active :is(.icon-wrapper--before, .icon-wrapper--after) {
-  background: var(--leu-color-black-100);
-  color: var(--leu-color-black-0);
+.ghost.active .icon-wrapper {
+  --_bg: var(--leu-color-black-100);
+  --_color: var(--leu-color-black-0);
 }
 
-.ghost:disabled :is(.icon-wrapper--before, .icon-wrapper--after) {
-  background: var(--leu-color-black-transp-5);
+.ghost:disabled .icon-wrapper {
+  --_bg: var(--leu-color-black-transp-5);
 }
 
 /* inverted */
 
-.ghost.inverted :is(.icon-wrapper--before, .icon-wrapper--after) {
-  background: var(--leu-color-black-transp-20);
+.ghost.inverted .icon-wrapper {
+  --_bg: var(--leu-color-black-transp-20);
 }
 
-.ghost.inverted:hover :is(.icon-wrapper--before, .icon-wrapper--after) {
-  background: var(--leu-color-black-transp-40);
-  color: var(--leu-color-black-0);
+.ghost.inverted:hover .icon-wrapper {
+  --_bg: var(--leu-color-black-transp-40);
+  --_color: var(--leu-color-black-0);
 }
 
-.ghost.inverted:disabled :is(.icon-wrapper--before, .icon-wrapper--after) {
-  background: var(--leu-color-black-transp-20);
-  color: var(--leu-color-white-transp-70);
+.ghost.inverted:disabled .icon-wrapper {
+  --_bg: var(--leu-color-black-transp-20);
+  --_color: var(--leu-color-white-transp-70);
 }
 
-.ghost.active.inverted :is(.icon-wrapper--before, .icon-wrapper--after) {
-  background: var(--leu-color-black-0);
-  color: var(--leu-color-black-100);
+.ghost.active.inverted .icon-wrapper {
+  --_bg: var(--leu-color-black-0);
+  --_color: var(--leu-color-black-100);
 }
 
 /* Expanded icon */
-.icon-wrapper--expanded {
+.icon-expanded leu-icon {
+  display: block;
+}
+
+.icon-expanded {
   transition: transform 0.1s ease;
 }
 
-:host([expanded="open"]) .icon-wrapper--expanded {
+:host([expanded="true"]) .icon-expanded {
   transform: rotate(180deg);
 }

package/src/components/button/stories/button.stories.js

@@ -87,6 +87,7 @@ Regular.argTypes = {
   expanded: { control: "radio", options: BUTTON_EXPANDED_OPTIONS },
   disabled: { control: "boolean" },
   round: { control: "boolean" },
+  active: { control: "boolean" },
 }
 Regular.args = {
   content: "Click Mich...",