@momentum-design/components 0.95.8 → 0.96.0

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

@@ -1,5 +1,8 @@
 declare const TAG_NAME: "mdc-buttonsimple";
 declare const BUTTON_SIZES: {
+    readonly 12: 12;
+    readonly 14: 14;
+    readonly 16: 16;
     readonly 20: 20;
     readonly 24: 24;
     readonly 28: 28;

package/dist/components/buttonsimple/buttonsimple.constants.js

@@ -1,6 +1,9 @@
 import utils from '../../utils/tag-name';
 const TAG_NAME = utils.constructTagName('buttonsimple');
 const BUTTON_SIZES = {
+    12: 12,
+    14: 14,
+    16: 16,
     20: 20,
     24: 24,
     28: 28,

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

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

package/dist/components/linkbutton/index.js

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

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

@@ -0,0 +1,65 @@
+import { CSSResult, PropertyValues } from 'lit';
+import Buttonsimple from '../buttonsimple/buttonsimple.component';
+import type { LinkButtonSize } from './linkbutton.types';
+declare const LinkButton_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & typeof Buttonsimple;
+/**
+ * `mdc-linkbutton` visually mimics a hyperlink while functioning as a button. It blends the appearance of `mdc-link` with the accessibility and interaction capabilities of `mdc-button`.
+ *
+ * ### Features:
+ * - Looks like a link, behaves like a button.
+ * - Supports slots for a text label and an optional trailing icon.
+ * - Inherits accessibility and keyboard interaction behavior from `mdc-buttonsimple`.
+ *
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-linkbutton
+ *
+ * @slot - Text label of the linkbutton.
+ *
+ * @event click - (React: onClick) This event is dispatched when the linkbutton is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the linkbutton.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the linkbutton.
+ * @event focus - (React: onFocus) This event is dispatched when the linkbutton receives focus.
+ *
+ * @cssproperty --mdc-link-border-radius - Border radius of the linkbutton.
+ * @cssproperty --mdc-link-color-active - Color of the linkbutton’s child content in the active state.
+ * @cssproperty --mdc-link-color-disabled - Color of the linkbutton’s child content in the disabled state.
+ * @cssproperty --mdc-link-color-hover - Color of the linkbutton’s child content in the hover state.
+ * @cssproperty --mdc-link-color-normal - Color of the linkbutton’s child content in the normal state.
+ * @cssproperty --mdc-link-inverted-color-active - Color of the inverted linkbutton’s child content in the active state.
+ * @cssproperty --mdc-link-inverted-color-disabled - Color of the inverted linkbutton’s child content in the disabled state.
+ * @cssproperty --mdc-link-inverted-color-hover - Color of the inverted linkbutton’s child content in the hover state.
+ * @cssproperty --mdc-link-inverted-color-normal - Color of the inverted linkbutton’s child content in the normal state.
+ */
+declare class LinkButton extends LinkButton_base {
+    /**
+     * Sets the size of the linkbutton.
+     * Acceptable values:
+     * - 12
+     * - 14
+     * - 16
+     * @default 16
+     */
+    size: LinkButtonSize;
+    /**
+     * The linkbutton can be inline or standalone.
+     * @default false
+     */
+    inline: boolean;
+    /**
+     * The linkbutton color can be inverted by setting the inverted attribute to true.
+     * @default false
+     */
+    inverted: boolean;
+    connectedCallback(): void;
+    update(changedProperties: PropertyValues): void;
+    /**
+     * Sets the `size` attribute for the linkbutton, falling back to the default if the value is invalid.
+     *
+     * @param size - The desired link size.
+     */
+    private setSize;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default LinkButton;

package/dist/components/linkbutton/linkbutton.component.js

@@ -0,0 +1,111 @@
+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, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
+import Buttonsimple from '../buttonsimple/buttonsimple.component';
+import Link from '../link/link.component';
+import { DEFAULTS, LINKBUTTON_SIZES } from './linkbutton.constants';
+import { getIconSize } from './linkbutton.utils';
+import styles from './linkbutton.styles';
+/**
+ * `mdc-linkbutton` visually mimics a hyperlink while functioning as a button. It blends the appearance of `mdc-link` with the accessibility and interaction capabilities of `mdc-button`.
+ *
+ * ### Features:
+ * - Looks like a link, behaves like a button.
+ * - Supports slots for a text label and an optional trailing icon.
+ * - Inherits accessibility and keyboard interaction behavior from `mdc-buttonsimple`.
+ *
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-linkbutton
+ *
+ * @slot - Text label of the linkbutton.
+ *
+ * @event click - (React: onClick) This event is dispatched when the linkbutton is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the linkbutton.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the linkbutton.
+ * @event focus - (React: onFocus) This event is dispatched when the linkbutton receives focus.
+ *
+ * @cssproperty --mdc-link-border-radius - Border radius of the linkbutton.
+ * @cssproperty --mdc-link-color-active - Color of the linkbutton’s child content in the active state.
+ * @cssproperty --mdc-link-color-disabled - Color of the linkbutton’s child content in the disabled state.
+ * @cssproperty --mdc-link-color-hover - Color of the linkbutton’s child content in the hover state.
+ * @cssproperty --mdc-link-color-normal - Color of the linkbutton’s child content in the normal state.
+ * @cssproperty --mdc-link-inverted-color-active - Color of the inverted linkbutton’s child content in the active state.
+ * @cssproperty --mdc-link-inverted-color-disabled - Color of the inverted linkbutton’s child content in the disabled state.
+ * @cssproperty --mdc-link-inverted-color-hover - Color of the inverted linkbutton’s child content in the hover state.
+ * @cssproperty --mdc-link-inverted-color-normal - Color of the inverted linkbutton’s child content in the normal state.
+ */
+class LinkButton extends IconNameMixin(Buttonsimple) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Sets the size of the linkbutton.
+         * Acceptable values:
+         * - 12
+         * - 14
+         * - 16
+         * @default 16
+         */
+        this.size = DEFAULTS.SIZE;
+        /**
+         * The linkbutton can be inline or standalone.
+         * @default false
+         */
+        this.inline = DEFAULTS.INLINE;
+        /**
+         * The linkbutton color can be inverted by setting the inverted attribute to true.
+         * @default false
+         */
+        this.inverted = DEFAULTS.INVERTED;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.active = undefined;
+        this.role = DEFAULTS.ROLE;
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('size')) {
+            this.setSize(this.size);
+        }
+    }
+    /**
+     * Sets the `size` attribute for the linkbutton, falling back to the default if the value is invalid.
+     *
+     * @param size - The desired link size.
+     */
+    setSize(size) {
+        this.setAttribute('size', Object.values(LINKBUTTON_SIZES).includes(size) ? `${size}` : DEFAULTS.SIZE.toString());
+    }
+    render() {
+        return html `
+      <slot></slot>
+      ${this.iconName
+            ? html ` <mdc-icon name=${this.iconName} size=${getIconSize(this.size)} length-unit="rem"></mdc-icon> `
+            : nothing}
+    `;
+    }
+}
+LinkButton.styles = [...Link.styles, ...styles];
+__decorate([
+    property({ type: Number, reflect: true }),
+    __metadata("design:type", Number)
+], LinkButton.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], LinkButton.prototype, "inline", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], LinkButton.prototype, "inverted", void 0);
+export default LinkButton;

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

@@ -0,0 +1,13 @@
+declare const TAG_NAME: "mdc-linkbutton";
+declare const LINKBUTTON_SIZES: {
+    readonly 12: 12;
+    readonly 14: 14;
+    readonly 16: 16;
+};
+declare const DEFAULTS: {
+    SIZE: 16;
+    ROLE: "button";
+    INLINE: boolean;
+    INVERTED: boolean;
+};
+export { TAG_NAME, LINKBUTTON_SIZES, DEFAULTS };

package/dist/components/linkbutton/linkbutton.constants.js

@@ -0,0 +1,16 @@
+import { ROLE } from '../../utils/roles';
+import utils from '../../utils/tag-name';
+import { DEFAULTS as LINKSIMPLE_DEFAULTS } from '../linksimple/linksimple.constants';
+const TAG_NAME = utils.constructTagName('linkbutton');
+const LINKBUTTON_SIZES = {
+    12: 12,
+    14: 14,
+    16: 16,
+};
+const DEFAULTS = {
+    SIZE: LINKBUTTON_SIZES[16],
+    ROLE: ROLE.BUTTON,
+    INLINE: LINKSIMPLE_DEFAULTS.INLINE,
+    INVERTED: LINKSIMPLE_DEFAULTS.INVERTED,
+};
+export { TAG_NAME, LINKBUTTON_SIZES, DEFAULTS };

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

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

package/dist/components/linkbutton/linkbutton.styles.js

@@ -0,0 +1,66 @@
+import { css } from 'lit';
+const styles = css `
+  :host {
+    --mdc-link-color-disabled: var(--mds-color-theme-text-primary-disabled);
+    gap: 0.25rem;
+  }
+
+  :host([size='16']) {
+    font-size: var(--mds-font-apps-body-large-regular-font-size);
+    font-weight: var(--mds-font-apps-body-large-regular-font-weight);
+    line-height: var(--mds-font-apps-body-large-regular-line-height);
+    text-decoration: var(--mds-font-apps-body-large-regular-text-decoration);
+    text-transform: var(--mds-font-apps-body-large-regular-text-case);
+  }
+
+  :host([size='14']) {
+    font-size: var(--mds-font-apps-body-midsize-regular-font-size);
+    font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
+    line-height: var(--mds-font-apps-body-midsize-regular-line-height);
+    text-decoration: var(--mds-font-apps-body-midsize-regular-text-decoration);
+    text-transform: var(--mds-font-apps-body-midsize-regular-text-case);
+  }
+
+  :host([size='12']) {
+    font-size: var(--mds-font-apps-body-small-regular-font-size);
+    font-weight: var(--mds-font-apps-body-small-regular-font-weight);
+    line-height: var(--mds-font-apps-body-small-regular-line-height);
+    text-decoration: var(--mds-font-apps-body-small-regular-text-decoration);
+    text-transform: var(--mds-font-apps-body-small-regular-text-case);
+  }
+
+  :host([size='16']:hover),
+  :host([size='16']:active),
+  :host([size='16'][inline]) {
+    font-size: var(--mds-font-apps-body-large-regular-underline-font-size);
+    font-weight: var(--mds-font-apps-body-large-regular-underline-font-weight);
+    line-height: var(--mds-font-apps-body-large-regular-underline-line-height);
+    text-decoration: var(--mds-font-apps-body-large-regular-underline-text-decoration);
+    text-transform: var(--mds-font-apps-body-large-regular-underline-text-case);
+  }
+
+  :host([size='14']:hover),
+  :host([size='14']:active),
+  :host([size='14'][inline]) {
+    font-size: var(--mds-font-apps-body-midsize-regular-underline-font-size);
+    font-weight: var(--mds-font-apps-body-midsize-regular-underline-font-weight);
+    line-height: var(--mds-font-apps-body-midsize-regular-underline-line-height);
+    text-decoration: var(--mds-font-apps-body-midsize-regular-underline-text-decoration);
+    text-transform: var(--mds-font-apps-body-midsize-regular-underline-text-case);
+  }
+
+  :host([size='12']:hover),
+  :host([size='12']:active),
+  :host([size='12'][inline]) {
+    font-size: var(--mds-font-apps-body-small-regular-underline-font-size);
+    font-weight: var(--mds-font-apps-body-small-regular-underline-font-weight);
+    line-height: var(--mds-font-apps-body-small-regular-underline-line-height);
+    text-decoration: var(--mds-font-apps-body-small-regular-underline-text-decoration);
+    text-transform: var(--mds-font-apps-body-small-regular-underline-text-case);
+  }
+
+  :host([soft-disabled]) {
+    color: var(--mdc-link-color-disabled);
+  }
+`;
+export default [styles];

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

@@ -0,0 +1,10 @@
+import type { ValueOf } from '../../utils/types';
+import { LINKBUTTON_SIZES } from './linkbutton.constants';
+type LinkButtonSize = ValueOf<typeof LINKBUTTON_SIZES>;
+interface Events {
+    onClickEvent: MouseEvent;
+    onKeyDownEvent: KeyboardEvent;
+    onFocusEvent: FocusEvent;
+    onBlurEvent: Event;
+}
+export type { Events, LinkButtonSize };

package/dist/components/linkbutton/linkbutton.types.js

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

package/dist/components/linkbutton/linkbutton.utils.d.ts

@@ -0,0 +1,3 @@
+import type { LinkButtonSize } from "./linkbutton.types";
+declare const getIconSize: (size: LinkButtonSize) => number;
+export { getIconSize };

package/dist/components/linkbutton/linkbutton.utils.js

@@ -0,0 +1,12 @@
+import { LINKBUTTON_SIZES } from "./linkbutton.constants";
+const getIconSize = (size) => {
+    switch (size) {
+        case LINKBUTTON_SIZES[12]:
+            return 0.75;
+        case LINKBUTTON_SIZES[14]:
+            return 0.875;
+        default:
+            return 1;
+    }
+};
+export { getIconSize };