@momentum-design/components 0.80.5 → 0.81.0

package/dist/index.d.ts

@@ -50,6 +50,7 @@ import ScreenreaderAnnouncer from './components/screenreaderannouncer';
 import Searchfield from './components/searchfield';
 import Select from './components/select';
 import SideNavigation from './components/sidenavigation';
+import Skeleton from './components/skeleton';
 import Spinner from './components/spinner';
 import StaticCheckbox from './components/staticcheckbox';
 import StaticRadio from './components/staticradio';
@@ -66,10 +67,12 @@ import VirtualizedList from './components/virtualizedlist';
 import type { BadgeType } from './components/badge/badge.types';
 import type { ButtonColor, ButtonVariant, IconButtonSize, PillButtonSize } from './components/button/button.types';
 import type { PopoverPlacement } from './components/popover/popover.types';
+import type { SkeletonVariant } from './components/skeleton/skeleton.types';
 import type { SpinnerSize, SpinnerVariant } from './components/spinner/spinner.types';
 import type { TextType } from './components/text/text.types';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
-export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonLink, ButtonGroup, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, Menu, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, NavItem, NavItemList, OptGroup, Option, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, MenuSection, VirtualizedList, };
-export type { TextType, SpinnerSize, SpinnerVariant, PopoverPlacement, BadgeType, IconButtonSize, PillButtonSize, ButtonVariant, ButtonColor, };
-export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };
+import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
+export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonLink, ButtonGroup, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, Menu, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, NavItem, NavItemList, OptGroup, Option, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, MenuSection, VirtualizedList, };
+export type { TextType, SpinnerSize, SpinnerVariant, SkeletonVariant, PopoverPlacement, BadgeType, IconButtonSize, PillButtonSize, ButtonVariant, ButtonColor, };
+export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, SKELETON_VARIANTS, };

package/dist/index.js

@@ -51,6 +51,7 @@ import ScreenreaderAnnouncer from './components/screenreaderannouncer';
 import Searchfield from './components/searchfield';
 import Select from './components/select';
 import SideNavigation from './components/sidenavigation';
+import Skeleton from './components/skeleton';
 import Spinner from './components/spinner';
 import StaticCheckbox from './components/staticcheckbox';
 import StaticRadio from './components/staticradio';
@@ -67,7 +68,8 @@ import VirtualizedList from './components/virtualizedlist';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 // Constants / Utils Imports
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from './components/button/button.constants';
+import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
 // Components Exports
-export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonLink, ButtonGroup, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, Menu, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, NavItem, NavItemList, OptGroup, Option, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, MenuSection, VirtualizedList, };
+export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonLink, ButtonGroup, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, Menu, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, NavItem, NavItemList, OptGroup, Option, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, MenuSection, VirtualizedList, };
 // Constants / Utils Exports
-export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };
+export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, SKELETON_VARIANTS, };

package/dist/react/index.d.ts

@@ -1,6 +1,6 @@
+export { default as Appheader } from './appheader';
 export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
-export { default as Appheader } from './appheader';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
@@ -12,17 +12,16 @@ export { default as ButtonLink } from './buttonlink';
 export { default as Buttonsimple } from './buttonsimple';
 export { default as Card } from './card';
 export { default as CardButton } from './cardbutton';
-export { default as CardCheckbox } from './cardcheckbox';
 export { default as CardRadio } from './cardradio';
 export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
+export { default as CardCheckbox } from './cardcheckbox';
 export { default as Coachmark } from './coachmark';
 export { default as Dialog } from './dialog';
 export { default as Divider } from './divider';
 export { default as FilterChip } from './filterchip';
-export { default as FormfieldGroup } from './formfieldgroup';
-export { default as Icon } from './icon';
 export { default as FormfieldWrapper } from './formfieldwrapper';
+export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
 export { default as Input } from './input';
 export { default as InputChip } from './inputchip';
@@ -30,6 +29,7 @@ export { default as Link } from './link';
 export { default as Linksimple } from './linksimple';
 export { default as List } from './list';
 export { default as ListItem } from './listitem';
+export { default as FormfieldGroup } from './formfieldgroup';
 export { default as Marker } from './marker';
 export { default as Menu } from './menu';
 export { default as MenuBar } from './menubar';
@@ -52,6 +52,7 @@ export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
 export { default as Searchfield } from './searchfield';
 export { default as Select } from './select';
 export { default as SideNavigation } from './sidenavigation';
+export { default as Skeleton } from './skeleton';
 export { default as Spinner } from './spinner';
 export { default as StaticCheckbox } from './staticcheckbox';
 export { default as StaticRadio } from './staticradio';

package/dist/react/index.js

@@ -1,6 +1,6 @@
+export { default as Appheader } from './appheader';
 export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
-export { default as Appheader } from './appheader';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
@@ -12,17 +12,16 @@ export { default as ButtonLink } from './buttonlink';
 export { default as Buttonsimple } from './buttonsimple';
 export { default as Card } from './card';
 export { default as CardButton } from './cardbutton';
-export { default as CardCheckbox } from './cardcheckbox';
 export { default as CardRadio } from './cardradio';
 export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
+export { default as CardCheckbox } from './cardcheckbox';
 export { default as Coachmark } from './coachmark';
 export { default as Dialog } from './dialog';
 export { default as Divider } from './divider';
 export { default as FilterChip } from './filterchip';
-export { default as FormfieldGroup } from './formfieldgroup';
-export { default as Icon } from './icon';
 export { default as FormfieldWrapper } from './formfieldwrapper';
+export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
 export { default as Input } from './input';
 export { default as InputChip } from './inputchip';
@@ -30,6 +29,7 @@ export { default as Link } from './link';
 export { default as Linksimple } from './linksimple';
 export { default as List } from './list';
 export { default as ListItem } from './listitem';
+export { default as FormfieldGroup } from './formfieldgroup';
 export { default as Marker } from './marker';
 export { default as Menu } from './menu';
 export { default as MenuBar } from './menubar';
@@ -52,6 +52,7 @@ export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
 export { default as Searchfield } from './searchfield';
 export { default as Select } from './select';
 export { default as SideNavigation } from './sidenavigation';
+export { default as Skeleton } from './skeleton';
 export { default as Spinner } from './spinner';
 export { default as StaticCheckbox } from './staticcheckbox';
 export { default as StaticRadio } from './staticradio';

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

@@ -0,0 +1,25 @@
+import Component from '../../components/skeleton';
+/**
+ * `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 const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/skeleton/index.js

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/skeleton';
+import { TAG_NAME } from '../../components/skeleton/skeleton.constants';
+/**
+ * `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
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'Skeleton',
+});
+export default reactWrapper;

package/package.json

@@ -41,5 +41,5 @@
     "lottie-web": "^5.12.2",
     "uuid": "^11.0.5"
   },
-  "version": "0.80.5"
+  "version": "0.81.0"
 }