@momentum-design/components 0.49.4 → 0.51.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -461,6 +461,67 @@
461
461
  }
462
462
  ]
463
463
  },
464
+ {
465
+ "kind": "javascript-module",
466
+ "path": "components/appheader/appheader.component.js",
467
+ "declarations": [
468
+ {
469
+ "kind": "class",
470
+ "description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
471
+ "name": "Appheader",
472
+ "cssParts": [
473
+ {
474
+ "description": "The main container for styling the header.",
475
+ "name": "container"
476
+ },
477
+ {
478
+ "description": "The leading section of the header.",
479
+ "name": "leading-section"
480
+ },
481
+ {
482
+ "description": "The center section of the header.",
483
+ "name": "center-section"
484
+ },
485
+ {
486
+ "description": "The trailing section of the header.",
487
+ "name": "trailing-section"
488
+ }
489
+ ],
490
+ "slots": [
491
+ {
492
+ "description": "Slot for the leading section (e.g., brand logo, brand name).",
493
+ "name": "leading"
494
+ },
495
+ {
496
+ "description": "Slot for the center section (e.g., search bar, icons).",
497
+ "name": "center"
498
+ },
499
+ {
500
+ "description": "Slot for the trailing section (e.g., profile avatar, icons).",
501
+ "name": "trailing"
502
+ }
503
+ ],
504
+ "members": [],
505
+ "superclass": {
506
+ "name": "Component",
507
+ "module": "/src/models"
508
+ },
509
+ "tagName": "mdc-appheader",
510
+ "jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
511
+ "customElement": true
512
+ }
513
+ ],
514
+ "exports": [
515
+ {
516
+ "kind": "js",
517
+ "name": "default",
518
+ "declaration": {
519
+ "name": "Appheader",
520
+ "module": "components/appheader/appheader.component.js"
521
+ }
522
+ }
523
+ ]
524
+ },
464
525
  {
465
526
  "kind": "javascript-module",
466
527
  "path": "components/avatar/avatar.component.js",
@@ -705,67 +766,6 @@
705
766
  }
706
767
  ]
707
768
  },
708
- {
709
- "kind": "javascript-module",
710
- "path": "components/appheader/appheader.component.js",
711
- "declarations": [
712
- {
713
- "kind": "class",
714
- "description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
715
- "name": "Appheader",
716
- "cssParts": [
717
- {
718
- "description": "The main container for styling the header.",
719
- "name": "container"
720
- },
721
- {
722
- "description": "The leading section of the header.",
723
- "name": "leading-section"
724
- },
725
- {
726
- "description": "The center section of the header.",
727
- "name": "center-section"
728
- },
729
- {
730
- "description": "The trailing section of the header.",
731
- "name": "trailing-section"
732
- }
733
- ],
734
- "slots": [
735
- {
736
- "description": "Slot for the leading section (e.g., brand logo, brand name).",
737
- "name": "leading"
738
- },
739
- {
740
- "description": "Slot for the center section (e.g., search bar, icons).",
741
- "name": "center"
742
- },
743
- {
744
- "description": "Slot for the trailing section (e.g., profile avatar, icons).",
745
- "name": "trailing"
746
- }
747
- ],
748
- "members": [],
749
- "superclass": {
750
- "name": "Component",
751
- "module": "/src/models"
752
- },
753
- "tagName": "mdc-appheader",
754
- "jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
755
- "customElement": true
756
- }
757
- ],
758
- "exports": [
759
- {
760
- "kind": "js",
761
- "name": "default",
762
- "declaration": {
763
- "name": "Appheader",
764
- "module": "components/appheader/appheader.component.js"
765
- }
766
- }
767
- ]
768
- },
769
769
  {
770
770
  "kind": "javascript-module",
771
771
  "path": "components/avatarbutton/avatarbutton.component.js",
@@ -15457,139 +15457,6 @@
15457
15457
  }
15458
15458
  ]
15459
15459
  },
15460
- {
15461
- "kind": "javascript-module",
15462
- "path": "components/spinner/spinner.component.js",
15463
- "declarations": [
15464
- {
15465
- "kind": "class",
15466
- "description": "`mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\nit's best for cases where the progress or duration of a process is variable or unknown.\n\nSpinner Variants:\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\nicon or label text.\n\nSpinner Sizes:\n- **Large (96px)**: Use when replacing entire regions or pages that are still loading\n- **MidSize (48px) (Default)**: Use for most use cases.\n- **Small (24px)**: Use for inline with loading text.\n\nCustomisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\nCSS property.\n\nSpinner Colors:\n- **Default**: Use for most use cases.\n- **Inverted**: Only to be used within inverted components, such as coachmarks.\n\nRegarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\nwill be unset\nand aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.",
15467
- "name": "Spinner",
15468
- "cssProperties": [
15469
- {
15470
- "description": "Allows customization of the default spinner color.",
15471
- "name": "--mdc-spinner-default-color"
15472
- },
15473
- {
15474
- "description": "Allows customization of the inverted spinner color.",
15475
- "name": "--mdc-spinner-inverted-color"
15476
- },
15477
- {
15478
- "description": "Allows customization of the spinner Button variant color.",
15479
- "name": "--mdc-spinner-button-variant-color"
15480
- },
15481
- {
15482
- "description": "Allows customization of the spinner size.",
15483
- "name": "--mdc-spinner-size"
15484
- }
15485
- ],
15486
- "cssParts": [
15487
- {
15488
- "description": "The svg which contains the circle spinner.",
15489
- "name": "container"
15490
- },
15491
- {
15492
- "description": "The circle of the spinner.",
15493
- "name": "circle"
15494
- }
15495
- ],
15496
- "members": [
15497
- {
15498
- "kind": "field",
15499
- "name": "inverted",
15500
- "description": "The spinner color can be inverted by setting the inverted attribute to true.",
15501
- "default": "false",
15502
- "attribute": "inverted",
15503
- "reflects": true
15504
- },
15505
- {
15506
- "kind": "field",
15507
- "name": "size",
15508
- "type": {
15509
- "text": "SpinnerSize | undefined"
15510
- },
15511
- "description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
15512
- "default": "midsize",
15513
- "attribute": "size",
15514
- "reflects": true
15515
- },
15516
- {
15517
- "kind": "field",
15518
- "name": "ariaLabel",
15519
- "type": {
15520
- "text": "string | null"
15521
- },
15522
- "default": "null",
15523
- "description": "Aria-label attribute to be set for accessibility",
15524
- "attribute": "aria-label"
15525
- },
15526
- {
15527
- "kind": "field",
15528
- "name": "variant",
15529
- "type": {
15530
- "text": "SpinnerVariant"
15531
- },
15532
- "description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
15533
- "default": "standalone",
15534
- "attribute": "variant",
15535
- "reflects": true
15536
- }
15537
- ],
15538
- "attributes": [
15539
- {
15540
- "name": "inverted",
15541
- "description": "The spinner color can be inverted by setting the inverted attribute to true.",
15542
- "default": "false",
15543
- "fieldName": "inverted"
15544
- },
15545
- {
15546
- "name": "size",
15547
- "type": {
15548
- "text": "SpinnerSize | undefined"
15549
- },
15550
- "description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
15551
- "default": "midsize",
15552
- "fieldName": "size"
15553
- },
15554
- {
15555
- "name": "aria-label",
15556
- "type": {
15557
- "text": "string | null"
15558
- },
15559
- "default": "null",
15560
- "description": "Aria-label attribute to be set for accessibility",
15561
- "fieldName": "ariaLabel"
15562
- },
15563
- {
15564
- "name": "variant",
15565
- "type": {
15566
- "text": "SpinnerVariant"
15567
- },
15568
- "description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
15569
- "default": "standalone",
15570
- "fieldName": "variant"
15571
- }
15572
- ],
15573
- "superclass": {
15574
- "name": "Component",
15575
- "module": "/src/models"
15576
- },
15577
- "tagName": "mdc-spinner",
15578
- "jsDoc": "/**\n * `mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\n * it's best for cases where the progress or duration of a process is variable or unknown.\n *\n * Spinner Variants:\n * - **Standalone (Default)**: Track has a blue color.\n * - **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\n * To ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\n * icon or label text.\n *\n * Spinner Sizes:\n * - **Large (96px)**: Use when replacing entire regions or pages that are still loading\n * - **MidSize (48px) (Default)**: Use for most use cases.\n * - **Small (24px)**: Use for inline with loading text.\n *\n * Customisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\n * CSS property.\n *\n * Spinner Colors:\n * - **Default**: Use for most use cases.\n * - **Inverted**: Only to be used within inverted components, such as coachmarks.\n *\n * Regarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\n * will be unset\n * and aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.\n *\n * @tagname mdc-spinner\n *\n * @cssproperty --mdc-spinner-default-color - Allows customization of the default spinner color.\n * @cssproperty --mdc-spinner-inverted-color - Allows customization of the inverted spinner color.\n * @cssproperty --mdc-spinner-button-variant-color - Allows customization of the spinner Button variant color.\n * @cssproperty --mdc-spinner-size - Allows customization of the spinner size.\n *\n * @csspart container - The svg which contains the circle spinner.\n * @csspart circle - The circle of the spinner.\n */",
15579
- "customElement": true
15580
- }
15581
- ],
15582
- "exports": [
15583
- {
15584
- "kind": "js",
15585
- "name": "default",
15586
- "declaration": {
15587
- "name": "Spinner",
15588
- "module": "components/spinner/spinner.component.js"
15589
- }
15590
- }
15591
- ]
15592
- },
15593
15460
  {
15594
15461
  "kind": "javascript-module",
15595
15462
  "path": "components/tab/tab.component.js",
@@ -16388,6 +16255,139 @@
16388
16255
  }
16389
16256
  ]
16390
16257
  },
16258
+ {
16259
+ "kind": "javascript-module",
16260
+ "path": "components/spinner/spinner.component.js",
16261
+ "declarations": [
16262
+ {
16263
+ "kind": "class",
16264
+ "description": "`mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\nit's best for cases where the progress or duration of a process is variable or unknown.\n\nSpinner Variants:\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\nicon or label text.\n\nSpinner Sizes:\n- **Large (96px)**: Use when replacing entire regions or pages that are still loading\n- **MidSize (48px) (Default)**: Use for most use cases.\n- **Small (24px)**: Use for inline with loading text.\n\nCustomisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\nCSS property.\n\nSpinner Colors:\n- **Default**: Use for most use cases.\n- **Inverted**: Only to be used within inverted components, such as coachmarks.\n\nRegarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\nwill be unset\nand aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.",
16265
+ "name": "Spinner",
16266
+ "cssProperties": [
16267
+ {
16268
+ "description": "Allows customization of the default spinner color.",
16269
+ "name": "--mdc-spinner-default-color"
16270
+ },
16271
+ {
16272
+ "description": "Allows customization of the inverted spinner color.",
16273
+ "name": "--mdc-spinner-inverted-color"
16274
+ },
16275
+ {
16276
+ "description": "Allows customization of the spinner Button variant color.",
16277
+ "name": "--mdc-spinner-button-variant-color"
16278
+ },
16279
+ {
16280
+ "description": "Allows customization of the spinner size.",
16281
+ "name": "--mdc-spinner-size"
16282
+ }
16283
+ ],
16284
+ "cssParts": [
16285
+ {
16286
+ "description": "The svg which contains the circle spinner.",
16287
+ "name": "container"
16288
+ },
16289
+ {
16290
+ "description": "The circle of the spinner.",
16291
+ "name": "circle"
16292
+ }
16293
+ ],
16294
+ "members": [
16295
+ {
16296
+ "kind": "field",
16297
+ "name": "inverted",
16298
+ "description": "The spinner color can be inverted by setting the inverted attribute to true.",
16299
+ "default": "false",
16300
+ "attribute": "inverted",
16301
+ "reflects": true
16302
+ },
16303
+ {
16304
+ "kind": "field",
16305
+ "name": "size",
16306
+ "type": {
16307
+ "text": "SpinnerSize | undefined"
16308
+ },
16309
+ "description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
16310
+ "default": "midsize",
16311
+ "attribute": "size",
16312
+ "reflects": true
16313
+ },
16314
+ {
16315
+ "kind": "field",
16316
+ "name": "ariaLabel",
16317
+ "type": {
16318
+ "text": "string | null"
16319
+ },
16320
+ "default": "null",
16321
+ "description": "Aria-label attribute to be set for accessibility",
16322
+ "attribute": "aria-label"
16323
+ },
16324
+ {
16325
+ "kind": "field",
16326
+ "name": "variant",
16327
+ "type": {
16328
+ "text": "SpinnerVariant"
16329
+ },
16330
+ "description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
16331
+ "default": "standalone",
16332
+ "attribute": "variant",
16333
+ "reflects": true
16334
+ }
16335
+ ],
16336
+ "attributes": [
16337
+ {
16338
+ "name": "inverted",
16339
+ "description": "The spinner color can be inverted by setting the inverted attribute to true.",
16340
+ "default": "false",
16341
+ "fieldName": "inverted"
16342
+ },
16343
+ {
16344
+ "name": "size",
16345
+ "type": {
16346
+ "text": "SpinnerSize | undefined"
16347
+ },
16348
+ "description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
16349
+ "default": "midsize",
16350
+ "fieldName": "size"
16351
+ },
16352
+ {
16353
+ "name": "aria-label",
16354
+ "type": {
16355
+ "text": "string | null"
16356
+ },
16357
+ "default": "null",
16358
+ "description": "Aria-label attribute to be set for accessibility",
16359
+ "fieldName": "ariaLabel"
16360
+ },
16361
+ {
16362
+ "name": "variant",
16363
+ "type": {
16364
+ "text": "SpinnerVariant"
16365
+ },
16366
+ "description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
16367
+ "default": "standalone",
16368
+ "fieldName": "variant"
16369
+ }
16370
+ ],
16371
+ "superclass": {
16372
+ "name": "Component",
16373
+ "module": "/src/models"
16374
+ },
16375
+ "tagName": "mdc-spinner",
16376
+ "jsDoc": "/**\n * `mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\n * it's best for cases where the progress or duration of a process is variable or unknown.\n *\n * Spinner Variants:\n * - **Standalone (Default)**: Track has a blue color.\n * - **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\n * To ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\n * icon or label text.\n *\n * Spinner Sizes:\n * - **Large (96px)**: Use when replacing entire regions or pages that are still loading\n * - **MidSize (48px) (Default)**: Use for most use cases.\n * - **Small (24px)**: Use for inline with loading text.\n *\n * Customisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\n * CSS property.\n *\n * Spinner Colors:\n * - **Default**: Use for most use cases.\n * - **Inverted**: Only to be used within inverted components, such as coachmarks.\n *\n * Regarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\n * will be unset\n * and aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.\n *\n * @tagname mdc-spinner\n *\n * @cssproperty --mdc-spinner-default-color - Allows customization of the default spinner color.\n * @cssproperty --mdc-spinner-inverted-color - Allows customization of the inverted spinner color.\n * @cssproperty --mdc-spinner-button-variant-color - Allows customization of the spinner Button variant color.\n * @cssproperty --mdc-spinner-size - Allows customization of the spinner size.\n *\n * @csspart container - The svg which contains the circle spinner.\n * @csspart circle - The circle of the spinner.\n */",
16377
+ "customElement": true
16378
+ }
16379
+ ],
16380
+ "exports": [
16381
+ {
16382
+ "kind": "js",
16383
+ "name": "default",
16384
+ "declaration": {
16385
+ "name": "Spinner",
16386
+ "module": "components/spinner/spinner.component.js"
16387
+ }
16388
+ }
16389
+ ]
16390
+ },
16391
16391
  {
16392
16392
  "kind": "javascript-module",
16393
16393
  "path": "components/textarea/textarea.component.js",
@@ -1,6 +1,6 @@
1
1
  export { default as AlertChip } from './alertchip';
2
- export { default as Avatar } from './avatar';
3
2
  export { default as Appheader } from './appheader';
3
+ export { default as Avatar } from './avatar';
4
4
  export { default as AvatarButton } from './avatarbutton';
5
5
  export { default as Badge } from './badge';
6
6
  export { default as Brandvisual } from './brandvisual';
@@ -32,9 +32,9 @@ export { default as RadioGroup } from './radiogroup';
32
32
  export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
33
33
  export { default as Searchfield } from './searchfield';
34
34
  export { default as Select } from './select';
35
- export { default as Spinner } from './spinner';
36
35
  export { default as Tab } from './tab';
37
36
  export { default as Text } from './text';
37
+ export { default as Spinner } from './spinner';
38
38
  export { default as Textarea } from './textarea';
39
39
  export { default as ThemeProvider } from './themeprovider';
40
40
  export { default as Toggle } from './toggle';
@@ -1,6 +1,6 @@
1
1
  export { default as AlertChip } from './alertchip';
2
- export { default as Avatar } from './avatar';
3
2
  export { default as Appheader } from './appheader';
3
+ export { default as Avatar } from './avatar';
4
4
  export { default as AvatarButton } from './avatarbutton';
5
5
  export { default as Badge } from './badge';
6
6
  export { default as Brandvisual } from './brandvisual';
@@ -32,9 +32,9 @@ export { default as RadioGroup } from './radiogroup';
32
32
  export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
33
33
  export { default as Searchfield } from './searchfield';
34
34
  export { default as Select } from './select';
35
- export { default as Spinner } from './spinner';
36
35
  export { default as Tab } from './tab';
37
36
  export { default as Text } from './text';
37
+ export { default as Spinner } from './spinner';
38
38
  export { default as Textarea } from './textarea';
39
39
  export { default as ThemeProvider } from './themeprovider';
40
40
  export { default as Toggle } from './toggle';
package/package.json CHANGED
@@ -39,5 +39,5 @@
39
39
  "lit": "^3.2.0",
40
40
  "uuid": "^11.0.5"
41
41
  },
42
- "version": "0.49.4"
42
+ "version": "0.51.0"
43
43
  }