@momentum-design/components 0.57.0 → 0.58.1

package/dist/components/button/button.component.d.ts

@@ -1,8 +1,8 @@
 import type { PropertyValues } from 'lit';
 import { CSSResult } from 'lit';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
-import type { IconNames } from '../icon/icon.types';
-import type { ButtonColor, ButtonVariant, IconButtonSize, PillButtonSize } from './button.types';
+import type { IconButtonSize, PillButtonSize } from './button.types';
+declare const Button_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/ButtonComponentMixin").ButtonComponentMixinInterface> & typeof Buttonsimple;
 /**
  * `mdc-button` is a component that can be configured in various ways to suit different use cases.
  *
@@ -35,25 +35,7 @@ import type { ButtonColor, ButtonVariant, IconButtonSize, PillButtonSize } from
  *
  * @slot - Text label of the button.
  */
-declare class Button extends Buttonsimple {
-    /**
-     * The name of the icon to display as a prefix.
-     * The icon is displayed on the left side of the button.
-     */
-    prefixIcon?: IconNames;
-    /**
-     * The name of the icon to display as a postfix.
-     * The icon is displayed on the right side of the button.
-     */
-    postfixIcon?: IconNames;
-    /**
-     * There are 3 variants of button: primary, secondary, tertiary. They are styled differently.
-     * - **Primary**: Solid background color.
-     * - **Secondary**: Transparent background with a solid border.
-     * - **Tertiary**: No background or border, appears as plain text but retains all button functionalities.
-     * @default primary
-     */
-    variant: ButtonVariant;
+declare class Button extends Button_base {
     /**
      * Button sizing is based on the button type.
      * - **Pill button**: 40, 32, 28, 24.
@@ -62,11 +44,6 @@ declare class Button extends Buttonsimple {
      * @default 32
      */
     size: PillButtonSize | IconButtonSize;
-    /**
-     * There are 5 colors for button: positive, negative, accent, promotional, default.
-     * @default default
-     */
-    color: ButtonColor;
     /**
      * This property defines the ARIA role for the element. By default, it is set to 'button'.
      * Consumers should override this role when:
@@ -75,8 +52,6 @@ declare class Button extends Buttonsimple {
      * @default button
      */
     role: string;
-    /** @internal */
-    private typeInternal;
     /**
      * @internal
      */
@@ -95,34 +70,6 @@ declare class Button extends Buttonsimple {
      * @param active - The active state.
      */
     private inferFilledIconName;
-    /**
-     * Sets the variant attribute for the button component.
-     * If the provided variant is not included in the BUTTON_VARIANTS,
-     * it defaults to the value specified in DEFAULTS.VARIANT.
-     *
-     * @param variant - The variant to set.
-     */
-    private setVariant;
-    /**
-     * Sets the size attribute for the button component.
-     * Validates the size based on the button type (icon, pill, or tertiary).
-     * Defaults to DEFAULTS.SIZE if invalid.
-     *
-     * @param size - The size to set.
-     */
-    private setSize;
-    /**
-     * Sets the color attribute for the button.
-     * Defaults to DEFAULTS.COLOR if invalid or for tertiary buttons.
-     *
-     * @param color - The color to set.
-     */
-    private setColor;
-    /**
-     * Infers the type of button based on the presence of slot and/or prefix and postfix icons.
-     * @param slot - default slot of button
-     */
-    private inferButtonType;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

package/dist/components/button/button.component.js

@@ -9,8 +9,9 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { ButtonComponentMixin } from '../../utils/mixins/ButtonComponentMixin';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
-import { BUTTON_COLORS, BUTTON_TYPE_INTERNAL, BUTTON_VARIANTS, DEFAULTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from './button.constants';
+import { DEFAULTS } from './button.constants';
 import styles from './button.styles';
 import { getIconNameWithoutStyle } from './button.utils';
 /**
@@ -45,17 +46,9 @@ import { getIconNameWithoutStyle } from './button.utils';
  *
  * @slot - Text label of the button.
  */
-class Button extends Buttonsimple {
+class Button extends ButtonComponentMixin(Buttonsimple) {
     constructor() {
         super(...arguments);
-        /**
-         * There are 3 variants of button: primary, secondary, tertiary. They are styled differently.
-         * - **Primary**: Solid background color.
-         * - **Secondary**: Transparent background with a solid border.
-         * - **Tertiary**: No background or border, appears as plain text but retains all button functionalities.
-         * @default primary
-         */
-        this.variant = DEFAULTS.VARIANT;
         /**
          * Button sizing is based on the button type.
          * - **Pill button**: 40, 32, 28, 24.
@@ -64,11 +57,6 @@ class Button extends Buttonsimple {
          * @default 32
          */
         this.size = DEFAULTS.SIZE;
-        /**
-         * There are 5 colors for button: positive, negative, accent, promotional, default.
-         * @default default
-         */
-        this.color = DEFAULTS.COLOR;
         /**
          * This property defines the ARIA role for the element. By default, it is set to 'button'.
          * Consumers should override this role when:
@@ -77,8 +65,6 @@ class Button extends Buttonsimple {
          * @default button
          */
         this.role = 'button';
-        /** @internal */
-        this.typeInternal = DEFAULTS.TYPE_INTERNAL;
     }
     update(changedProperties) {
         super.update(changedProperties);
@@ -125,65 +111,6 @@ class Button extends Buttonsimple {
             this.postfixFilledIconName = this.postfixIcon;
         }
     }
-    /**
-     * Sets the variant attribute for the button component.
-     * If the provided variant is not included in the BUTTON_VARIANTS,
-     * it defaults to the value specified in DEFAULTS.VARIANT.
-     *
-     * @param variant - The variant to set.
-     */
-    setVariant(variant) {
-        this.setAttribute('variant', Object.values(BUTTON_VARIANTS).includes(variant) ? variant : DEFAULTS.VARIANT);
-    }
-    /**
-     * Sets the size attribute for the button component.
-     * Validates the size based on the button type (icon, pill, or tertiary).
-     * Defaults to DEFAULTS.SIZE if invalid.
-     *
-     * @param size - The size to set.
-     */
-    setSize(size) {
-        const isIconType = this.typeInternal === BUTTON_TYPE_INTERNAL.ICON;
-        const isValidSize = isIconType
-            ? Object.values(ICON_BUTTON_SIZES).includes(size)
-                && !(size === ICON_BUTTON_SIZES[20] && this.variant !== BUTTON_VARIANTS.TERTIARY)
-            : Object.values(PILL_BUTTON_SIZES).includes(size);
-        this.setAttribute('size', isValidSize ? `${size}` : `${DEFAULTS.SIZE}`);
-    }
-    /**
-     * Sets the color attribute for the button.
-     * Defaults to DEFAULTS.COLOR if invalid or for tertiary buttons.
-     *
-     * @param color - The color to set.
-     */
-    setColor(color) {
-        if (!Object.values(BUTTON_COLORS).includes(color) || this.variant === BUTTON_VARIANTS.TERTIARY) {
-            this.setAttribute('color', `${DEFAULTS.COLOR}`);
-        }
-        else {
-            this.setAttribute('color', color);
-        }
-    }
-    /**
-     * Infers the type of button based on the presence of slot and/or prefix and postfix icons.
-     * @param slot - default slot of button
-     */
-    inferButtonType() {
-        var _a, _b;
-        const slot = (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot')) === null || _b === void 0 ? void 0 : _b.assignedNodes().filter((node) => { var _a; return node.nodeType !== Node.TEXT_NODE || ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()); }).length;
-        if (slot && (this.prefixIcon || this.postfixIcon)) {
-            this.typeInternal = BUTTON_TYPE_INTERNAL.PILL_WITH_ICON;
-            this.setAttribute('data-btn-type', 'pill-with-icon');
-        }
-        else if (!slot && (this.prefixIcon || this.postfixIcon)) {
-            this.typeInternal = BUTTON_TYPE_INTERNAL.ICON;
-            this.setAttribute('data-btn-type', 'icon');
-        }
-        else {
-            this.typeInternal = BUTTON_TYPE_INTERNAL.PILL;
-            this.setAttribute('data-btn-type', 'pill');
-        }
-    }
     render() {
         return html `
       ${this.prefixFilledIconName
@@ -197,34 +124,14 @@ class Button extends Buttonsimple {
     }
 }
 Button.styles = [...Buttonsimple.styles, ...styles];
-__decorate([
-    property({ type: String, attribute: 'prefix-icon', reflect: true }),
-    __metadata("design:type", String)
-], Button.prototype, "prefixIcon", void 0);
-__decorate([
-    property({ type: String, attribute: 'postfix-icon', reflect: true }),
-    __metadata("design:type", String)
-], Button.prototype, "postfixIcon", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], Button.prototype, "variant", void 0);
 __decorate([
     property({ type: Number }),
     __metadata("design:type", Number)
 ], Button.prototype, "size", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], Button.prototype, "color", void 0);
 __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", Object)
 ], Button.prototype, "role", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", String)
-], Button.prototype, "typeInternal", void 0);
 __decorate([
     state(),
     __metadata("design:type", String)

package/dist/components/buttonlink/buttonlink.component.d.ts

@@ -0,0 +1,59 @@
+import { CSSResult, PropertyValues } from 'lit';
+import Linksimple from '../linksimple/linksimple.component';
+import type { IconButtonSize, PillButtonSize } from '../button/button.types';
+declare const ButtonLink_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/ButtonComponentMixin").ButtonComponentMixinInterface> & typeof Linksimple;
+/**
+ * `mdc-buttonlink` combines the functional behavior of `mdc-linksimple` with the visual and structural
+ * features of `mdc-button`. This includes support for variants, sizing, and optional
+ * prefix and postfix icons via slots.
+ *
+ * ### Features:
+ * - Behaves like an link while visually resembling a button.
+ * - Supports slots for `prefix-icon` and `postfix-icon`.
+ * - Customizable size, color, and variant through attributes.
+ * - Inherits accessibility and keyboard interaction support from `mdc-linksimple`.
+ *
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-buttonlink
+ *
+ * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.
+ * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.
+ * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.
+ * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.
+ *
+ */
+declare class ButtonLink extends ButtonLink_base {
+    /**
+     * ButtonLink sizing is based on the buttonlink type.
+      * - **Pill buttonlink**: 40, 32, 28, 24.
+      * - **Icon buttonlink**: 64, 52, 40, 32, 28, 24.
+      * - Tertiary icon buttonlink can also be 20.
+      * @default 32
+      */
+    size: PillButtonSize | IconButtonSize;
+    /**
+     * Indicates whether the buttonlink is soft disabled.
+     * When set to `true`, the buttonlink appears visually disabled but still allows
+     * focus, click, and keyboard actions to be passed through.
+     *
+     * **Important:** When using soft disabled, consumers must ensure that
+     * the buttonlink behaves like a disabled buttonlink, allowing only focus and
+     * preventing any interactions (clicks or keyboard actions) from triggering unintended actions.
+     * @default undefined
+     */
+    softDisabled?: boolean;
+    /**
+     * Sets the soft-disabled attribute for the buttonlink.
+     * When soft-disabled, the buttonlink looks to be disabled but remains focusable and clickable.
+     * Also sets/removes aria-disabled attribute.
+     *
+     * @param element - The buttonlink element.
+     * @param softDisabled - The soft-disabled state.
+     */
+    private setSoftDisabled;
+    update(changedProperties: PropertyValues): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default ButtonLink;

package/dist/components/buttonlink/buttonlink.component.js

@@ -0,0 +1,106 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import Button from '../button/button.component';
+import { ButtonComponentMixin } from '../../utils/mixins/ButtonComponentMixin';
+import { DEFAULTS } from '../button/button.constants';
+import Linksimple from '../linksimple/linksimple.component';
+/**
+ * `mdc-buttonlink` combines the functional behavior of `mdc-linksimple` with the visual and structural
+ * features of `mdc-button`. This includes support for variants, sizing, and optional
+ * prefix and postfix icons via slots.
+ *
+ * ### Features:
+ * - Behaves like an link while visually resembling a button.
+ * - Supports slots for `prefix-icon` and `postfix-icon`.
+ * - Customizable size, color, and variant through attributes.
+ * - Inherits accessibility and keyboard interaction support from `mdc-linksimple`.
+ *
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-buttonlink
+ *
+ * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.
+ * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.
+ * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.
+ * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.
+ *
+ */
+class ButtonLink extends ButtonComponentMixin(Linksimple) {
+    constructor() {
+        super(...arguments);
+        /**
+         * ButtonLink sizing is based on the buttonlink type.
+          * - **Pill buttonlink**: 40, 32, 28, 24.
+          * - **Icon buttonlink**: 64, 52, 40, 32, 28, 24.
+          * - Tertiary icon buttonlink can also be 20.
+          * @default 32
+          */
+        this.size = DEFAULTS.SIZE;
+    }
+    /**
+     * Sets the soft-disabled attribute for the buttonlink.
+     * When soft-disabled, the buttonlink looks to be disabled but remains focusable and clickable.
+     * Also sets/removes aria-disabled attribute.
+     *
+     * @param element - The buttonlink element.
+     * @param softDisabled - The soft-disabled state.
+     */
+    setSoftDisabled(element, softDisabled) {
+        if (softDisabled) {
+            element.setAttribute('aria-disabled', 'true');
+        }
+        else {
+            element.removeAttribute('aria-disabled');
+        }
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('softDisabled')) {
+            this.setSoftDisabled(this, this.softDisabled);
+        }
+        if (changedProperties.has('size')) {
+            this.setSize(this.size);
+        }
+        if (changedProperties.has('variant')) {
+            this.setVariant(this.variant);
+            this.setSize(this.size);
+        }
+        if (changedProperties.has('color')) {
+            this.setColor(this.color);
+        }
+        if (changedProperties.has('typeInternal')) {
+            this.setSize(this.size);
+        }
+        if (changedProperties.has('prefixIcon') || changedProperties.has('postfixIcon')) {
+            this.inferButtonType();
+        }
+    }
+    render() {
+        return html `
+      ${this.prefixIcon ? html ` <mdc-icon name="${this.prefixIcon}" part="prefix-icon"></mdc-icon>` : ''}
+      <slot @slotchange=${this.inferButtonType}></slot>
+      ${this.postfixIcon
+            ? html ` <mdc-icon name="${this.postfixIcon}" part="postfix-icon"></mdc-icon>`
+            : ''}
+    `;
+    }
+}
+ButtonLink.styles = [...Button.styles];
+__decorate([
+    property({ type: Number, reflect: true }),
+    __metadata("design:type", Number)
+], ButtonLink.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'soft-disabled', reflect: true }),
+    __metadata("design:type", Boolean)
+], ButtonLink.prototype, "softDisabled", void 0);
+export default ButtonLink;

package/dist/components/buttonlink/buttonlink.constants.d.ts

@@ -0,0 +1,2 @@
+declare const TAG_NAME: "mdc-buttonlink";
+export { TAG_NAME };

package/dist/components/buttonlink/buttonlink.constants.js

@@ -0,0 +1,3 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('buttonlink');
+export { TAG_NAME };

package/dist/components/buttonlink/buttonlink.types.d.ts

@@ -0,0 +1,7 @@
+interface Events {
+    onClickEvent: MouseEvent;
+    onKeyDownEvent: KeyboardEvent;
+    onFocusEvent: FocusEvent;
+    onBlurEvent: Event;
+}
+export type { Events };

package/dist/components/buttonlink/buttonlink.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/buttonlink/index.d.ts

@@ -0,0 +1,8 @@
+import ButtonLink from './buttonlink.component';
+import '../icon';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-buttonlink']: ButtonLink;
+    }
+}
+export default ButtonLink;

package/dist/components/buttonlink/index.js

@@ -0,0 +1,5 @@
+import ButtonLink from './buttonlink.component';
+import { TAG_NAME } from './buttonlink.constants';
+import '../icon';
+ButtonLink.register(TAG_NAME);
+export default ButtonLink;

package/dist/components/statictoggle/index.d.ts

@@ -0,0 +1,8 @@
+import '../icon';
+import StaticToggle from './statictoggle.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-statictoggle']: StaticToggle;
+    }
+}
+export default StaticToggle;

package/dist/components/statictoggle/index.js

@@ -0,0 +1,5 @@
+import '../icon';
+import StaticToggle from './statictoggle.component';
+import { TAG_NAME } from './statictoggle.constants';
+StaticToggle.register(TAG_NAME);
+export default StaticToggle;

package/dist/components/statictoggle/statictoggle.component.d.ts

@@ -0,0 +1,48 @@
+import type { CSSResult } from 'lit';
+import { Component } from '../../models';
+import type { ToggleSize } from './statictoggle.types';
+declare const StaticToggle_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & typeof Component;
+/**
+ * This is a decorative component that is styled to look as a toggle. <br/>
+ * It has 3 properties - checked, size and disabled. <br/>
+ * We are using the same styling that has been created for the `mdc-toggle` component.
+ *
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-statictoggle
+ *
+ * @slot default - This is a default/unnamed slot
+ *
+ * @cssproperty --mdc-statictoggle-width - Width of the toggle
+ * @cssproperty --mdc-statictoggle-height - Height of the toggle
+ * @cssproperty --mdc-statictoggle-width-compact - Width of the toggle when it's size is compact
+ * @cssproperty --mdc-statictoggle-height-compact - Height of the toggle when it's size is compact
+ * @cssproperty --mdc-statictoggle-border-radius - Border radius of the toggle
+ * @cssproperty --mdc-statictoggle-border-radius-compact - Border radius of the toggle when it's size is compact
+ * @cssproperty --mdc-statictoggle-border - Border of the toggle
+ * @cssproperty --mdc-statictoggle-inactive-rest-color - Background color of the inactive toggle in rest state
+ * @cssproperty --mdc-statictoggle-inactive-disabled-color - Background color of the inactive toggle in disabled state
+ * @cssproperty --mdc-statictoggle-active-rest-color - Background color of the active toggle in rest state
+ * @cssproperty --mdc-statictoggle-active-disabled-color - Background color of the active toggle in disabled state
+ * @cssproperty --mdc-statictoggle-icon-color-normal - Color of the icon in normal state
+ * @cssproperty --mdc-statictoggle-icon-color-disabled - Color of the icon in disabled state
+ * @cssproperty --mdc-statictoggle-icon-background-color-normal - Background color of the icon in normal state
+ * @cssproperty --mdc-statictoggle-icon-background-color-disabled - Background color of the icon in disabled state
+ */
+declare class StaticToggle extends StaticToggle_base {
+    /**
+    * Determines whether the toggle is active or inactive.
+    * @default false
+    */
+    checked: boolean;
+    /**
+     * Determines toggle size in rem (height is specified here).
+     * - **Default**: 1.5
+     * - **Compact**: 1
+     * @default default
+     */
+    size: ToggleSize;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default StaticToggle;

package/dist/components/statictoggle/statictoggle.component.js

@@ -0,0 +1,82 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Component } from '../../models';
+import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
+import { DEFAULTS, ICON_NAME, ICON_SIZE_IN_REM } from './statictoggle.constants';
+import styles from './statictoggle.styles';
+/**
+ * This is a decorative component that is styled to look as a toggle. <br/>
+ * It has 3 properties - checked, size and disabled. <br/>
+ * We are using the same styling that has been created for the `mdc-toggle` component.
+ *
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-statictoggle
+ *
+ * @slot default - This is a default/unnamed slot
+ *
+ * @cssproperty --mdc-statictoggle-width - Width of the toggle
+ * @cssproperty --mdc-statictoggle-height - Height of the toggle
+ * @cssproperty --mdc-statictoggle-width-compact - Width of the toggle when it's size is compact
+ * @cssproperty --mdc-statictoggle-height-compact - Height of the toggle when it's size is compact
+ * @cssproperty --mdc-statictoggle-border-radius - Border radius of the toggle
+ * @cssproperty --mdc-statictoggle-border-radius-compact - Border radius of the toggle when it's size is compact
+ * @cssproperty --mdc-statictoggle-border - Border of the toggle
+ * @cssproperty --mdc-statictoggle-inactive-rest-color - Background color of the inactive toggle in rest state
+ * @cssproperty --mdc-statictoggle-inactive-disabled-color - Background color of the inactive toggle in disabled state
+ * @cssproperty --mdc-statictoggle-active-rest-color - Background color of the active toggle in rest state
+ * @cssproperty --mdc-statictoggle-active-disabled-color - Background color of the active toggle in disabled state
+ * @cssproperty --mdc-statictoggle-icon-color-normal - Color of the icon in normal state
+ * @cssproperty --mdc-statictoggle-icon-color-disabled - Color of the icon in disabled state
+ * @cssproperty --mdc-statictoggle-icon-background-color-normal - Background color of the icon in normal state
+ * @cssproperty --mdc-statictoggle-icon-background-color-disabled - Background color of the icon in disabled state
+ */
+class StaticToggle extends DisabledMixin(Component) {
+    constructor() {
+        super(...arguments);
+        /**
+        * Determines whether the toggle is active or inactive.
+        * @default false
+        */
+        this.checked = false;
+        /**
+         * Determines toggle size in rem (height is specified here).
+         * - **Default**: 1.5
+         * - **Compact**: 1
+         * @default default
+         */
+        this.size = DEFAULTS.SIZE;
+    }
+    render() {
+        return html `
+      <slot></slot>
+      <div part="slider">
+        <mdc-icon
+          name="${this.checked ? ICON_NAME.CHECKED : ICON_NAME.UNCHECKED}"
+          class="icon"
+          length-unit="rem"
+          size="${ICON_SIZE_IN_REM[this.size]}"
+        ></mdc-icon>
+      </div>
+    `;
+    }
+}
+StaticToggle.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], StaticToggle.prototype, "checked", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], StaticToggle.prototype, "size", void 0);
+export default StaticToggle;

package/dist/components/statictoggle/statictoggle.constants.d.ts

@@ -0,0 +1,17 @@
+declare const TAG_NAME: "mdc-statictoggle";
+declare const TOGGLE_SIZE: {
+    readonly DEFAULT: "default";
+    readonly COMPACT: "compact";
+};
+declare const ICON_NAME: {
+    readonly CHECKED: "check-bold";
+    readonly UNCHECKED: "cancel-bold";
+};
+declare const ICON_SIZE_IN_REM: {
+    readonly compact: 0.75;
+    readonly default: 1.25;
+};
+declare const DEFAULTS: {
+    SIZE: "default";
+};
+export { TAG_NAME, ICON_SIZE_IN_REM, DEFAULTS, TOGGLE_SIZE, ICON_NAME };

package/dist/components/statictoggle/statictoggle.constants.js

@@ -0,0 +1,18 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('statictoggle');
+const TOGGLE_SIZE = {
+    DEFAULT: 'default',
+    COMPACT: 'compact',
+};
+const ICON_NAME = {
+    CHECKED: 'check-bold',
+    UNCHECKED: 'cancel-bold',
+};
+const ICON_SIZE_IN_REM = {
+    compact: 0.75,
+    default: 1.25,
+};
+const DEFAULTS = {
+    SIZE: TOGGLE_SIZE.DEFAULT,
+};
+export { TAG_NAME, ICON_SIZE_IN_REM, DEFAULTS, TOGGLE_SIZE, ICON_NAME };

package/dist/components/statictoggle/statictoggle.styles.d.ts

@@ -0,0 +1,2 @@
+declare const styles: import("lit").CSSResult[];
+export default styles;