@momentum-design/components 0.80.5 → 0.81.0

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

@@ -0,0 +1,7 @@
+import Skeleton from './skeleton.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-skeleton']: Skeleton;
+    }
+}
+export default Skeleton;

package/dist/components/skeleton/index.js

@@ -0,0 +1,4 @@
+import Skeleton from './skeleton.component';
+import { TAG_NAME } from './skeleton.constants';
+Skeleton.register(TAG_NAME);
+export default Skeleton;

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

@@ -0,0 +1,46 @@
+import type { PropertyValues } from 'lit';
+import { CSSResult } from 'lit';
+import { Component } from '../../models';
+import type { SkeletonVariant } from './skeleton.types';
+/**
+ * `mdc-skeleton` is a component that shows a grey placeholder area.
+ * It provides visual feedback to users that content is being loaded.
+ *
+ * **Skeleton Variants:**
+ * - **rectangular**: Default variant with 0.25rem border radius
+ * - **rounded**: Has 0.5rem border radius
+ * - **circular**: Has 50% border radius for circular shapes
+ * - **button**: Optimized for button placeholders with 1.25rem border radius
+ *
+ * **Sizing Behavior:**
+ * 1. If wrapping content, takes dimensions of wrapped content
+ * 2. Otherwise grows to fill parent container
+ *
+ * @tagname mdc-skeleton
+ *
+ * @slot - Content to wrap (optional). When provided, skeleton takes dimensions of this content.
+ *
+ * @cssproperty --mdc-skeleton-background-color - background color of the skeleton
+ * @cssproperty --mdc-skeleton-height - height of the skeleton
+ * @cssproperty --mdc-skeleton-width - width of the skeleton
+ */
+declare class Skeleton extends Component {
+    /**
+     * The variant of skeleton to display
+     * - **rectangular**: Default rectangular shape with 0.25rem border radius
+     * - **rounded**: Rounded rectangle with 0.5rem border radius
+     * - **circular**: Circular shape with 50% border radius
+     * - **button**: Button placeholder with 1.25rem border radius
+     * @default rectangular
+     */
+    variant: SkeletonVariant;
+    /**
+     * Styles associated with this component.
+     */
+    static styles: Array<CSSResult>;
+    connectedCallback(): void;
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    private checkSlotContent;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+export default Skeleton;

package/dist/components/skeleton/skeleton.component.js

@@ -0,0 +1,86 @@
+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 { DEFAULTS } from './skeleton.constants';
+import styles from './skeleton.styles';
+/**
+ * `mdc-skeleton` is a component that shows a grey placeholder area.
+ * It provides visual feedback to users that content is being loaded.
+ *
+ * **Skeleton Variants:**
+ * - **rectangular**: Default variant with 0.25rem border radius
+ * - **rounded**: Has 0.5rem border radius
+ * - **circular**: Has 50% border radius for circular shapes
+ * - **button**: Optimized for button placeholders with 1.25rem border radius
+ *
+ * **Sizing Behavior:**
+ * 1. If wrapping content, takes dimensions of wrapped content
+ * 2. Otherwise grows to fill parent container
+ *
+ * @tagname mdc-skeleton
+ *
+ * @slot - Content to wrap (optional). When provided, skeleton takes dimensions of this content.
+ *
+ * @cssproperty --mdc-skeleton-background-color - background color of the skeleton
+ * @cssproperty --mdc-skeleton-height - height of the skeleton
+ * @cssproperty --mdc-skeleton-width - width of the skeleton
+ */
+class Skeleton extends Component {
+    constructor() {
+        super(...arguments);
+        /**
+         * The variant of skeleton to display
+         * - **rectangular**: Default rectangular shape with 0.25rem border radius
+         * - **rounded**: Rounded rectangle with 0.5rem border radius
+         * - **circular**: Circular shape with 50% border radius
+         * - **button**: Button placeholder with 1.25rem border radius
+         * @default rectangular
+         */
+        this.variant = DEFAULTS.VARIANT;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('aria-hidden', 'true');
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.checkSlotContent();
+    }
+    checkSlotContent() {
+        var _a;
+        const slot = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+        if (slot) {
+            const hasContent = slot.assignedNodes().length > 0;
+            if (hasContent) {
+                this.setAttribute('has-content', '');
+            }
+            else {
+                this.removeAttribute('has-content');
+            }
+        }
+    }
+    render() {
+        return html `<slot @slotchange=${this.checkSlotContent}></slot>`;
+    }
+}
+/**
+ * Styles associated with this component.
+ */
+Skeleton.styles = [
+    ...Component.styles,
+    styles,
+];
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Skeleton.prototype, "variant", void 0);
+export default Skeleton;

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

@@ -0,0 +1,11 @@
+declare const TAG_NAME: "mdc-skeleton";
+declare const SKELETON_VARIANTS: {
+    readonly BUTTON: "button";
+    readonly CIRCULAR: "circular";
+    readonly RECTANGULAR: "rectangular";
+    readonly ROUNDED: "rounded";
+};
+declare const DEFAULTS: {
+    VARIANT: "rectangular";
+};
+export { TAG_NAME, SKELETON_VARIANTS, DEFAULTS, };

package/dist/components/skeleton/skeleton.constants.js

@@ -0,0 +1,12 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('skeleton');
+const SKELETON_VARIANTS = {
+    BUTTON: 'button',
+    CIRCULAR: 'circular',
+    RECTANGULAR: 'rectangular',
+    ROUNDED: 'rounded',
+};
+const DEFAULTS = {
+    VARIANT: SKELETON_VARIANTS.RECTANGULAR,
+};
+export { TAG_NAME, SKELETON_VARIANTS, DEFAULTS, };

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

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

package/dist/components/skeleton/skeleton.styles.js

@@ -0,0 +1,40 @@
+import { css } from 'lit';
+const styles = css `
+  :host {
+    --mdc-skeleton-background-color: var(--mds-color-theme-background-skeleton-normal);
+    --mdc-skeleton-height: 100%;
+    --mdc-skeleton-width: 100%;
+    display: block;
+    overflow: hidden;
+    background-color: var(--mdc-skeleton-background-color);
+    height: var(--mdc-skeleton-height);
+    width: var(--mdc-skeleton-width);
+  }
+
+  :host([variant="rectangular"]) {
+    border-radius: 0.25rem;
+  }
+
+  :host([variant="rounded"]) {
+    border-radius: 0.5rem;
+  }
+
+  :host([variant="circular"]) {
+    border-radius: 50%;
+  }
+
+  :host([variant="button"]) {
+    border-radius: 1.25rem;
+  }
+
+  /* When there's slotted content, fit to content size */
+  :host([has-content]) {
+    width: fit-content;
+    height: fit-content;
+  }
+
+  ::slotted(*) {
+    visibility: hidden;
+  }
+`;
+export default styles;

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

@@ -0,0 +1,4 @@
+import type { ValueOf } from '../../utils/types';
+import { SKELETON_VARIANTS } from './skeleton.constants';
+type SkeletonVariant = ValueOf<typeof SKELETON_VARIANTS>;
+export type { SkeletonVariant };

package/dist/components/skeleton/skeleton.types.js

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