@momentum-design/components 0.91.2 → 0.92.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.
- package/dist/custom-elements.json +281 -281
- package/dist/react/index.d.ts +2 -2
- package/dist/react/index.js +2 -2
- package/package.json +1 -1
@@ -2190,6 +2190,77 @@
|
|
2190
2190
|
}
|
2191
2191
|
]
|
2192
2192
|
},
|
2193
|
+
{
|
2194
|
+
"kind": "javascript-module",
|
2195
|
+
"path": "components/bullet/bullet.component.js",
|
2196
|
+
"declarations": [
|
2197
|
+
{
|
2198
|
+
"kind": "class",
|
2199
|
+
"description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
|
2200
|
+
"name": "Bullet",
|
2201
|
+
"cssProperties": [
|
2202
|
+
{
|
2203
|
+
"description": "background color of the bullet",
|
2204
|
+
"name": "--mdc-bullet-background-color"
|
2205
|
+
},
|
2206
|
+
{
|
2207
|
+
"description": "small size value of the bullet",
|
2208
|
+
"name": "--mdc-bullet-size-small"
|
2209
|
+
},
|
2210
|
+
{
|
2211
|
+
"description": "medium size value of the bullet",
|
2212
|
+
"name": "--mdc-bullet-size-medium"
|
2213
|
+
},
|
2214
|
+
{
|
2215
|
+
"description": "large size value of the bullet",
|
2216
|
+
"name": "--mdc-bullet-size-large"
|
2217
|
+
}
|
2218
|
+
],
|
2219
|
+
"members": [
|
2220
|
+
{
|
2221
|
+
"kind": "field",
|
2222
|
+
"name": "size",
|
2223
|
+
"type": {
|
2224
|
+
"text": "Size"
|
2225
|
+
},
|
2226
|
+
"privacy": "public",
|
2227
|
+
"description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
|
2228
|
+
"default": "small",
|
2229
|
+
"attribute": "size",
|
2230
|
+
"reflects": true
|
2231
|
+
}
|
2232
|
+
],
|
2233
|
+
"attributes": [
|
2234
|
+
{
|
2235
|
+
"name": "size",
|
2236
|
+
"type": {
|
2237
|
+
"text": "Size"
|
2238
|
+
},
|
2239
|
+
"description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
|
2240
|
+
"default": "small",
|
2241
|
+
"fieldName": "size"
|
2242
|
+
}
|
2243
|
+
],
|
2244
|
+
"superclass": {
|
2245
|
+
"name": "Component",
|
2246
|
+
"module": "/src/models"
|
2247
|
+
},
|
2248
|
+
"tagName": "mdc-bullet",
|
2249
|
+
"jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n */",
|
2250
|
+
"customElement": true
|
2251
|
+
}
|
2252
|
+
],
|
2253
|
+
"exports": [
|
2254
|
+
{
|
2255
|
+
"kind": "js",
|
2256
|
+
"name": "default",
|
2257
|
+
"declaration": {
|
2258
|
+
"name": "Bullet",
|
2259
|
+
"module": "components/bullet/bullet.component.js"
|
2260
|
+
}
|
2261
|
+
}
|
2262
|
+
]
|
2263
|
+
},
|
2193
2264
|
{
|
2194
2265
|
"kind": "javascript-module",
|
2195
2266
|
"path": "components/button/button.component.js",
|
@@ -2885,77 +2956,6 @@
|
|
2885
2956
|
}
|
2886
2957
|
]
|
2887
2958
|
},
|
2888
|
-
{
|
2889
|
-
"kind": "javascript-module",
|
2890
|
-
"path": "components/bullet/bullet.component.js",
|
2891
|
-
"declarations": [
|
2892
|
-
{
|
2893
|
-
"kind": "class",
|
2894
|
-
"description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
|
2895
|
-
"name": "Bullet",
|
2896
|
-
"cssProperties": [
|
2897
|
-
{
|
2898
|
-
"description": "background color of the bullet",
|
2899
|
-
"name": "--mdc-bullet-background-color"
|
2900
|
-
},
|
2901
|
-
{
|
2902
|
-
"description": "small size value of the bullet",
|
2903
|
-
"name": "--mdc-bullet-size-small"
|
2904
|
-
},
|
2905
|
-
{
|
2906
|
-
"description": "medium size value of the bullet",
|
2907
|
-
"name": "--mdc-bullet-size-medium"
|
2908
|
-
},
|
2909
|
-
{
|
2910
|
-
"description": "large size value of the bullet",
|
2911
|
-
"name": "--mdc-bullet-size-large"
|
2912
|
-
}
|
2913
|
-
],
|
2914
|
-
"members": [
|
2915
|
-
{
|
2916
|
-
"kind": "field",
|
2917
|
-
"name": "size",
|
2918
|
-
"type": {
|
2919
|
-
"text": "Size"
|
2920
|
-
},
|
2921
|
-
"privacy": "public",
|
2922
|
-
"description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
|
2923
|
-
"default": "small",
|
2924
|
-
"attribute": "size",
|
2925
|
-
"reflects": true
|
2926
|
-
}
|
2927
|
-
],
|
2928
|
-
"attributes": [
|
2929
|
-
{
|
2930
|
-
"name": "size",
|
2931
|
-
"type": {
|
2932
|
-
"text": "Size"
|
2933
|
-
},
|
2934
|
-
"description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
|
2935
|
-
"default": "small",
|
2936
|
-
"fieldName": "size"
|
2937
|
-
}
|
2938
|
-
],
|
2939
|
-
"superclass": {
|
2940
|
-
"name": "Component",
|
2941
|
-
"module": "/src/models"
|
2942
|
-
},
|
2943
|
-
"tagName": "mdc-bullet",
|
2944
|
-
"jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n */",
|
2945
|
-
"customElement": true
|
2946
|
-
}
|
2947
|
-
],
|
2948
|
-
"exports": [
|
2949
|
-
{
|
2950
|
-
"kind": "js",
|
2951
|
-
"name": "default",
|
2952
|
-
"declaration": {
|
2953
|
-
"name": "Bullet",
|
2954
|
-
"module": "components/bullet/bullet.component.js"
|
2955
|
-
}
|
2956
|
-
}
|
2957
|
-
]
|
2958
|
-
},
|
2959
2959
|
{
|
2960
2960
|
"kind": "javascript-module",
|
2961
2961
|
"path": "components/buttongroup/buttongroup.component.js",
|
@@ -29955,61 +29955,248 @@
|
|
29955
29955
|
},
|
29956
29956
|
{
|
29957
29957
|
"kind": "javascript-module",
|
29958
|
-
"path": "components/
|
29958
|
+
"path": "components/sidenavigation/sidenavigation.component.js",
|
29959
29959
|
"declarations": [
|
29960
29960
|
{
|
29961
29961
|
"kind": "class",
|
29962
|
-
"description": "`mdc-
|
29963
|
-
"name": "
|
29962
|
+
"description": "The `mdc-sidenavigation` component provides a vertically stacked navigation experience,\ntypically used in layouts with persistent or collapsible sidebars.\n\n## Features:\n- Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`\n- Toggleable expand/collapse behavior\n- Displays brand logo and customer name\n- Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`\n\n### Usage:\nIn a sidenavigation, navmenuitems can be used in the following ways:\n\n1. **Simple navmenuitem** – No submenu or interaction beyond selection.\n\n2. **NavMenuItem with submenu**:\n - Provide an `id` on the `mdc-navmenuitem`\n - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navmenuitem's `id`\n - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item\n inside the nested menupopover is active, conveying which submenu item is currently selected\n\n3. **Actionable navmenuitem (no submenu)**:\n - Performs an action such as navigation or alert trigger\n - Set `disable-aria-current=\"true\"` to maintain visual active state without navigation behavior\n\n### Recommendations:\n- Use `mdc-text` for section headers\n- Use `mdc-divider` with the attribute `variant=\"gradient\"` for section dividers\n- For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`\n\n#### Accessibility Notes:\n- Always provide meaningful `aria-label` attributes for both `mdc-navmenuitem` and `mdc-menubar`\nto ensure screen reader support\n- Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button",
|
29963
|
+
"name": "SideNavigation",
|
29964
29964
|
"cssProperties": [
|
29965
29965
|
{
|
29966
|
-
"description": "
|
29967
|
-
"name": "--mdc-
|
29968
|
-
},
|
29969
|
-
{
|
29970
|
-
"description": "height of the skeleton",
|
29971
|
-
"name": "--mdc-skeleton-height"
|
29966
|
+
"description": "width of the sideNavigation when expanded",
|
29967
|
+
"name": "--mdc-sidenavigation-expanded-width"
|
29972
29968
|
},
|
29973
29969
|
{
|
29974
|
-
"description": "width of the
|
29975
|
-
"name": "--mdc-
|
29970
|
+
"description": "width of the sideNavigation when collpased",
|
29971
|
+
"name": "--mdc-sidenavigation-collapsed-width"
|
29976
29972
|
}
|
29977
29973
|
],
|
29978
29974
|
"slots": [
|
29979
29975
|
{
|
29980
|
-
"description": "
|
29981
|
-
"name": ""
|
29976
|
+
"description": "Slot for the scrollable content area of the side navigation.",
|
29977
|
+
"name": "scrollable-section"
|
29978
|
+
},
|
29979
|
+
{
|
29980
|
+
"description": "Slot for the fixed content area of the side navigation.",
|
29981
|
+
"name": "fixed-section"
|
29982
|
+
},
|
29983
|
+
{
|
29984
|
+
"description": "Slot for the brand logo (e.g., icon or img).",
|
29985
|
+
"name": "brand-logo"
|
29982
29986
|
}
|
29983
29987
|
],
|
29984
29988
|
"members": [
|
29989
|
+
{
|
29990
|
+
"kind": "field",
|
29991
|
+
"name": "Context",
|
29992
|
+
"privacy": "public",
|
29993
|
+
"static": true,
|
29994
|
+
"readonly": true
|
29995
|
+
},
|
29985
29996
|
{
|
29986
29997
|
"kind": "field",
|
29987
29998
|
"name": "variant",
|
29988
29999
|
"type": {
|
29989
|
-
"text": "
|
30000
|
+
"text": "SideNavigationVariant"
|
29990
30001
|
},
|
29991
|
-
"description": "
|
29992
|
-
"default": "
|
30002
|
+
"description": "Four variants of the sideNavigation\n- **fixed-collapsed**: Shows icons without labels and has fixed width, 4.5rem.\n- **fixed-expanded**: Shows icons with labels and has fixed width, 15rem.\n- **flexible**: Toggles between collapsed/expanded states.\n- **hidden**: Removes the sidenavigation from the DOM.",
|
30003
|
+
"default": "flexible",
|
29993
30004
|
"attribute": "variant",
|
29994
30005
|
"reflects": true
|
29995
30006
|
},
|
30007
|
+
{
|
30008
|
+
"kind": "field",
|
30009
|
+
"name": "footerText",
|
30010
|
+
"type": {
|
30011
|
+
"text": "string"
|
30012
|
+
},
|
30013
|
+
"default": "''",
|
30014
|
+
"description": "Displays footer text in the bottom section of the sidenavigation.",
|
30015
|
+
"attribute": "footer-text",
|
30016
|
+
"reflects": true
|
30017
|
+
},
|
30018
|
+
{
|
30019
|
+
"kind": "field",
|
30020
|
+
"name": "grabberBtnAriaLabel",
|
30021
|
+
"type": {
|
30022
|
+
"text": "string | undefined"
|
30023
|
+
},
|
30024
|
+
"description": "Provides an accessible label for the grabber button.\nThis value is used to set the `aria-label` attribute for the button.",
|
30025
|
+
"default": "''",
|
30026
|
+
"attribute": "grabber-btn-aria-label",
|
30027
|
+
"reflects": true
|
30028
|
+
},
|
30029
|
+
{
|
30030
|
+
"kind": "field",
|
30031
|
+
"name": "parentNavTooltipText",
|
30032
|
+
"type": {
|
30033
|
+
"text": "string | undefined"
|
30034
|
+
},
|
30035
|
+
"description": "Tooltip text shown on parent nav items when a child is active.",
|
30036
|
+
"attribute": "parent-nav-tooltip-text",
|
30037
|
+
"reflects": true
|
30038
|
+
},
|
29996
30039
|
{
|
29997
30040
|
"kind": "method",
|
29998
|
-
"name": "
|
30041
|
+
"name": "updateContext",
|
30042
|
+
"privacy": "protected",
|
30043
|
+
"return": {
|
30044
|
+
"type": {
|
30045
|
+
"text": "void"
|
30046
|
+
}
|
30047
|
+
},
|
30048
|
+
"description": "Update all observing components of this\nprovider to update the values\n\nIs called on every re-render, see Provider class"
|
30049
|
+
},
|
30050
|
+
{
|
30051
|
+
"kind": "field",
|
30052
|
+
"name": "navMenuItems",
|
30053
|
+
"type": {
|
30054
|
+
"text": "NavMenuItem[]"
|
30055
|
+
},
|
30056
|
+
"privacy": "private",
|
30057
|
+
"description": "Returns all nested, non-disabled mdc-navmenuitem elements inside this component.",
|
30058
|
+
"readonly": true
|
30059
|
+
},
|
30060
|
+
{
|
30061
|
+
"kind": "method",
|
30062
|
+
"name": "preventScrollOnSpace",
|
29999
30063
|
"privacy": "private",
|
30000
30064
|
"return": {
|
30001
30065
|
"type": {
|
30002
30066
|
"text": "void"
|
30003
30067
|
}
|
30004
|
-
}
|
30068
|
+
},
|
30069
|
+
"parameters": [
|
30070
|
+
{
|
30071
|
+
"name": "event",
|
30072
|
+
"type": {
|
30073
|
+
"text": "KeyboardEvent"
|
30074
|
+
}
|
30075
|
+
}
|
30076
|
+
]
|
30005
30077
|
}
|
30006
30078
|
],
|
30007
|
-
"
|
30079
|
+
"events": [
|
30008
30080
|
{
|
30009
|
-
"
|
30010
|
-
"
|
30011
|
-
|
30012
|
-
|
30081
|
+
"description": "(React: onActiveChange) Dispatched when the active state of the navmenuitem changes.",
|
30082
|
+
"name": "activechange",
|
30083
|
+
"reactName": "onActiveChange"
|
30084
|
+
}
|
30085
|
+
],
|
30086
|
+
"attributes": [
|
30087
|
+
{
|
30088
|
+
"name": "variant",
|
30089
|
+
"type": {
|
30090
|
+
"text": "SideNavigationVariant"
|
30091
|
+
},
|
30092
|
+
"description": "Four variants of the sideNavigation\n- **fixed-collapsed**: Shows icons without labels and has fixed width, 4.5rem.\n- **fixed-expanded**: Shows icons with labels and has fixed width, 15rem.\n- **flexible**: Toggles between collapsed/expanded states.\n- **hidden**: Removes the sidenavigation from the DOM.",
|
30093
|
+
"default": "flexible",
|
30094
|
+
"fieldName": "variant"
|
30095
|
+
},
|
30096
|
+
{
|
30097
|
+
"name": "footer-text",
|
30098
|
+
"type": {
|
30099
|
+
"text": "string"
|
30100
|
+
},
|
30101
|
+
"default": "''",
|
30102
|
+
"description": "Displays footer text in the bottom section of the sidenavigation.",
|
30103
|
+
"fieldName": "footerText"
|
30104
|
+
},
|
30105
|
+
{
|
30106
|
+
"name": "grabber-btn-aria-label",
|
30107
|
+
"type": {
|
30108
|
+
"text": "string | undefined"
|
30109
|
+
},
|
30110
|
+
"description": "Provides an accessible label for the grabber button.\nThis value is used to set the `aria-label` attribute for the button.",
|
30111
|
+
"default": "''",
|
30112
|
+
"fieldName": "grabberBtnAriaLabel"
|
30113
|
+
},
|
30114
|
+
{
|
30115
|
+
"name": "parent-nav-tooltip-text",
|
30116
|
+
"type": {
|
30117
|
+
"text": "string | undefined"
|
30118
|
+
},
|
30119
|
+
"description": "Tooltip text shown on parent nav items when a child is active.",
|
30120
|
+
"fieldName": "parentNavTooltipText"
|
30121
|
+
}
|
30122
|
+
],
|
30123
|
+
"superclass": {
|
30124
|
+
"name": "Provider",
|
30125
|
+
"module": "/src/models"
|
30126
|
+
},
|
30127
|
+
"tagName": "mdc-sidenavigation",
|
30128
|
+
"jsDoc": "/**\n * The `mdc-sidenavigation` component provides a vertically stacked navigation experience,\n * typically used in layouts with persistent or collapsible sidebars.\n *\n * ## Features:\n * - Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`\n * - Toggleable expand/collapse behavior\n * - Displays brand logo and customer name\n * - Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`\n *\n * ### Usage:\n * In a sidenavigation, navmenuitems can be used in the following ways:\n *\n * 1. **Simple navmenuitem** – No submenu or interaction beyond selection.\n *\n * 2. **NavMenuItem with submenu**:\n * - Provide an `id` on the `mdc-navmenuitem`\n * - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navmenuitem's `id`\n * - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item\n * inside the nested menupopover is active, conveying which submenu item is currently selected\n *\n * 3. **Actionable navmenuitem (no submenu)**:\n * - Performs an action such as navigation or alert trigger\n * - Set `disable-aria-current=\"true\"` to maintain visual active state without navigation behavior\n *\n * ### Recommendations:\n * - Use `mdc-text` for section headers\n * - Use `mdc-divider` with the attribute `variant=\"gradient\"` for section dividers\n * - For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`\n *\n * #### Accessibility Notes:\n * - Always provide meaningful `aria-label` attributes for both `mdc-navmenuitem` and `mdc-menubar`\n * to ensure screen reader support\n * - Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button\n *\n * @dependency mdc-text\n * @dependency mdc-button\n * @dependency mdc-divider\n * @dependency mdc-menubar\n *\n * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.\n *\n * @tagname mdc-sidenavigation\n *\n * @slot scrollable-section - Slot for the scrollable content area of the side navigation.\n * @slot fixed-section - Slot for the fixed content area of the side navigation.\n * @slot brand-logo - Slot for the brand logo (e.g., icon or img).\n *\n * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded\n * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collpased\n */",
|
30129
|
+
"customElement": true
|
30130
|
+
}
|
30131
|
+
],
|
30132
|
+
"exports": [
|
30133
|
+
{
|
30134
|
+
"kind": "js",
|
30135
|
+
"name": "default",
|
30136
|
+
"declaration": {
|
30137
|
+
"name": "SideNavigation",
|
30138
|
+
"module": "components/sidenavigation/sidenavigation.component.js"
|
30139
|
+
}
|
30140
|
+
}
|
30141
|
+
]
|
30142
|
+
},
|
30143
|
+
{
|
30144
|
+
"kind": "javascript-module",
|
30145
|
+
"path": "components/skeleton/skeleton.component.js",
|
30146
|
+
"declarations": [
|
30147
|
+
{
|
30148
|
+
"kind": "class",
|
30149
|
+
"description": "`mdc-skeleton` is a component that shows a grey placeholder area.\nIt provides visual feedback to users that content is being loaded.\n\n**Skeleton Variants:**\n- **rectangular**: Default variant with 0.25rem border radius\n- **rounded**: Has 0.5rem border radius\n- **circular**: Has 50% border radius for circular shapes\n- **button**: Optimized for button placeholders with 1.25rem border radius\n\n**Sizing Behavior:**\n1. If wrapping content, takes dimensions of wrapped content\n2. Otherwise grows to fill parent container",
|
30150
|
+
"name": "Skeleton",
|
30151
|
+
"cssProperties": [
|
30152
|
+
{
|
30153
|
+
"description": "background color of the skeleton",
|
30154
|
+
"name": "--mdc-skeleton-background-color"
|
30155
|
+
},
|
30156
|
+
{
|
30157
|
+
"description": "height of the skeleton",
|
30158
|
+
"name": "--mdc-skeleton-height"
|
30159
|
+
},
|
30160
|
+
{
|
30161
|
+
"description": "width of the skeleton",
|
30162
|
+
"name": "--mdc-skeleton-width"
|
30163
|
+
}
|
30164
|
+
],
|
30165
|
+
"slots": [
|
30166
|
+
{
|
30167
|
+
"description": "Content to wrap (optional). When provided, skeleton takes dimensions of this content.",
|
30168
|
+
"name": ""
|
30169
|
+
}
|
30170
|
+
],
|
30171
|
+
"members": [
|
30172
|
+
{
|
30173
|
+
"kind": "field",
|
30174
|
+
"name": "variant",
|
30175
|
+
"type": {
|
30176
|
+
"text": "SkeletonVariant"
|
30177
|
+
},
|
30178
|
+
"description": "The variant of skeleton to display\n- **rectangular**: Default rectangular shape with 0.25rem border radius\n- **rounded**: Rounded rectangle with 0.5rem border radius\n- **circular**: Circular shape with 50% border radius\n- **button**: Button placeholder with 1.25rem border radius",
|
30179
|
+
"default": "rectangular",
|
30180
|
+
"attribute": "variant",
|
30181
|
+
"reflects": true
|
30182
|
+
},
|
30183
|
+
{
|
30184
|
+
"kind": "method",
|
30185
|
+
"name": "checkSlotContent",
|
30186
|
+
"privacy": "private",
|
30187
|
+
"return": {
|
30188
|
+
"type": {
|
30189
|
+
"text": "void"
|
30190
|
+
}
|
30191
|
+
}
|
30192
|
+
}
|
30193
|
+
],
|
30194
|
+
"attributes": [
|
30195
|
+
{
|
30196
|
+
"name": "variant",
|
30197
|
+
"type": {
|
30198
|
+
"text": "SkeletonVariant"
|
30199
|
+
},
|
30013
30200
|
"description": "The variant of skeleton to display\n- **rectangular**: Default rectangular shape with 0.25rem border radius\n- **rounded**: Rounded rectangle with 0.5rem border radius\n- **circular**: Circular shape with 50% border radius\n- **button**: Button placeholder with 1.25rem border radius",
|
30014
30201
|
"default": "rectangular",
|
30015
30202
|
"fieldName": "variant"
|
@@ -30168,193 +30355,6 @@
|
|
30168
30355
|
}
|
30169
30356
|
]
|
30170
30357
|
},
|
30171
|
-
{
|
30172
|
-
"kind": "javascript-module",
|
30173
|
-
"path": "components/sidenavigation/sidenavigation.component.js",
|
30174
|
-
"declarations": [
|
30175
|
-
{
|
30176
|
-
"kind": "class",
|
30177
|
-
"description": "The `mdc-sidenavigation` component provides a vertically stacked navigation experience,\ntypically used in layouts with persistent or collapsible sidebars.\n\n## Features:\n- Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`\n- Toggleable expand/collapse behavior\n- Displays brand logo and customer name\n- Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`\n\n### Usage:\nIn a sidenavigation, navmenuitems can be used in the following ways:\n\n1. **Simple navmenuitem** – No submenu or interaction beyond selection.\n\n2. **NavMenuItem with submenu**:\n - Provide an `id` on the `mdc-navmenuitem`\n - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navmenuitem's `id`\n - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item\n inside the nested menupopover is active, conveying which submenu item is currently selected\n\n3. **Actionable navmenuitem (no submenu)**:\n - Performs an action such as navigation or alert trigger\n - Set `disable-aria-current=\"true\"` to maintain visual active state without navigation behavior\n\n### Recommendations:\n- Use `mdc-text` for section headers\n- Use `mdc-divider` with the attribute `variant=\"gradient\"` for section dividers\n- For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`\n\n#### Accessibility Notes:\n- Always provide meaningful `aria-label` attributes for both `mdc-navmenuitem` and `mdc-menubar`\nto ensure screen reader support\n- Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button",
|
30178
|
-
"name": "SideNavigation",
|
30179
|
-
"cssProperties": [
|
30180
|
-
{
|
30181
|
-
"description": "width of the sideNavigation when expanded",
|
30182
|
-
"name": "--mdc-sidenavigation-expanded-width"
|
30183
|
-
},
|
30184
|
-
{
|
30185
|
-
"description": "width of the sideNavigation when collpased",
|
30186
|
-
"name": "--mdc-sidenavigation-collapsed-width"
|
30187
|
-
}
|
30188
|
-
],
|
30189
|
-
"slots": [
|
30190
|
-
{
|
30191
|
-
"description": "Slot for the scrollable content area of the side navigation.",
|
30192
|
-
"name": "scrollable-section"
|
30193
|
-
},
|
30194
|
-
{
|
30195
|
-
"description": "Slot for the fixed content area of the side navigation.",
|
30196
|
-
"name": "fixed-section"
|
30197
|
-
},
|
30198
|
-
{
|
30199
|
-
"description": "Slot for the brand logo (e.g., icon or img).",
|
30200
|
-
"name": "brand-logo"
|
30201
|
-
}
|
30202
|
-
],
|
30203
|
-
"members": [
|
30204
|
-
{
|
30205
|
-
"kind": "field",
|
30206
|
-
"name": "Context",
|
30207
|
-
"privacy": "public",
|
30208
|
-
"static": true,
|
30209
|
-
"readonly": true
|
30210
|
-
},
|
30211
|
-
{
|
30212
|
-
"kind": "field",
|
30213
|
-
"name": "variant",
|
30214
|
-
"type": {
|
30215
|
-
"text": "SideNavigationVariant"
|
30216
|
-
},
|
30217
|
-
"description": "Four variants of the sideNavigation\n- **fixed-collapsed**: Shows icons without labels and has fixed width, 4.5rem.\n- **fixed-expanded**: Shows icons with labels and has fixed width, 15rem.\n- **flexible**: Toggles between collapsed/expanded states.\n- **hidden**: Removes the sidenavigation from the DOM.",
|
30218
|
-
"default": "flexible",
|
30219
|
-
"attribute": "variant",
|
30220
|
-
"reflects": true
|
30221
|
-
},
|
30222
|
-
{
|
30223
|
-
"kind": "field",
|
30224
|
-
"name": "footerText",
|
30225
|
-
"type": {
|
30226
|
-
"text": "string"
|
30227
|
-
},
|
30228
|
-
"default": "''",
|
30229
|
-
"description": "Displays footer text in the bottom section of the sidenavigation.",
|
30230
|
-
"attribute": "footer-text",
|
30231
|
-
"reflects": true
|
30232
|
-
},
|
30233
|
-
{
|
30234
|
-
"kind": "field",
|
30235
|
-
"name": "grabberBtnAriaLabel",
|
30236
|
-
"type": {
|
30237
|
-
"text": "string | undefined"
|
30238
|
-
},
|
30239
|
-
"description": "Provides an accessible label for the grabber button.\nThis value is used to set the `aria-label` attribute for the button.",
|
30240
|
-
"default": "''",
|
30241
|
-
"attribute": "grabber-btn-aria-label",
|
30242
|
-
"reflects": true
|
30243
|
-
},
|
30244
|
-
{
|
30245
|
-
"kind": "field",
|
30246
|
-
"name": "parentNavTooltipText",
|
30247
|
-
"type": {
|
30248
|
-
"text": "string | undefined"
|
30249
|
-
},
|
30250
|
-
"description": "Tooltip text shown on parent nav items when a child is active.",
|
30251
|
-
"attribute": "parent-nav-tooltip-text",
|
30252
|
-
"reflects": true
|
30253
|
-
},
|
30254
|
-
{
|
30255
|
-
"kind": "method",
|
30256
|
-
"name": "updateContext",
|
30257
|
-
"privacy": "protected",
|
30258
|
-
"return": {
|
30259
|
-
"type": {
|
30260
|
-
"text": "void"
|
30261
|
-
}
|
30262
|
-
},
|
30263
|
-
"description": "Update all observing components of this\nprovider to update the values\n\nIs called on every re-render, see Provider class"
|
30264
|
-
},
|
30265
|
-
{
|
30266
|
-
"kind": "field",
|
30267
|
-
"name": "navMenuItems",
|
30268
|
-
"type": {
|
30269
|
-
"text": "NavMenuItem[]"
|
30270
|
-
},
|
30271
|
-
"privacy": "private",
|
30272
|
-
"description": "Returns all nested, non-disabled mdc-navmenuitem elements inside this component.",
|
30273
|
-
"readonly": true
|
30274
|
-
},
|
30275
|
-
{
|
30276
|
-
"kind": "method",
|
30277
|
-
"name": "preventScrollOnSpace",
|
30278
|
-
"privacy": "private",
|
30279
|
-
"return": {
|
30280
|
-
"type": {
|
30281
|
-
"text": "void"
|
30282
|
-
}
|
30283
|
-
},
|
30284
|
-
"parameters": [
|
30285
|
-
{
|
30286
|
-
"name": "event",
|
30287
|
-
"type": {
|
30288
|
-
"text": "KeyboardEvent"
|
30289
|
-
}
|
30290
|
-
}
|
30291
|
-
]
|
30292
|
-
}
|
30293
|
-
],
|
30294
|
-
"events": [
|
30295
|
-
{
|
30296
|
-
"description": "(React: onActiveChange) Dispatched when the active state of the navmenuitem changes.",
|
30297
|
-
"name": "activechange",
|
30298
|
-
"reactName": "onActiveChange"
|
30299
|
-
}
|
30300
|
-
],
|
30301
|
-
"attributes": [
|
30302
|
-
{
|
30303
|
-
"name": "variant",
|
30304
|
-
"type": {
|
30305
|
-
"text": "SideNavigationVariant"
|
30306
|
-
},
|
30307
|
-
"description": "Four variants of the sideNavigation\n- **fixed-collapsed**: Shows icons without labels and has fixed width, 4.5rem.\n- **fixed-expanded**: Shows icons with labels and has fixed width, 15rem.\n- **flexible**: Toggles between collapsed/expanded states.\n- **hidden**: Removes the sidenavigation from the DOM.",
|
30308
|
-
"default": "flexible",
|
30309
|
-
"fieldName": "variant"
|
30310
|
-
},
|
30311
|
-
{
|
30312
|
-
"name": "footer-text",
|
30313
|
-
"type": {
|
30314
|
-
"text": "string"
|
30315
|
-
},
|
30316
|
-
"default": "''",
|
30317
|
-
"description": "Displays footer text in the bottom section of the sidenavigation.",
|
30318
|
-
"fieldName": "footerText"
|
30319
|
-
},
|
30320
|
-
{
|
30321
|
-
"name": "grabber-btn-aria-label",
|
30322
|
-
"type": {
|
30323
|
-
"text": "string | undefined"
|
30324
|
-
},
|
30325
|
-
"description": "Provides an accessible label for the grabber button.\nThis value is used to set the `aria-label` attribute for the button.",
|
30326
|
-
"default": "''",
|
30327
|
-
"fieldName": "grabberBtnAriaLabel"
|
30328
|
-
},
|
30329
|
-
{
|
30330
|
-
"name": "parent-nav-tooltip-text",
|
30331
|
-
"type": {
|
30332
|
-
"text": "string | undefined"
|
30333
|
-
},
|
30334
|
-
"description": "Tooltip text shown on parent nav items when a child is active.",
|
30335
|
-
"fieldName": "parentNavTooltipText"
|
30336
|
-
}
|
30337
|
-
],
|
30338
|
-
"superclass": {
|
30339
|
-
"name": "Provider",
|
30340
|
-
"module": "/src/models"
|
30341
|
-
},
|
30342
|
-
"tagName": "mdc-sidenavigation",
|
30343
|
-
"jsDoc": "/**\n * The `mdc-sidenavigation` component provides a vertically stacked navigation experience,\n * typically used in layouts with persistent or collapsible sidebars.\n *\n * ## Features:\n * - Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`\n * - Toggleable expand/collapse behavior\n * - Displays brand logo and customer name\n * - Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`\n *\n * ### Usage:\n * In a sidenavigation, navmenuitems can be used in the following ways:\n *\n * 1. **Simple navmenuitem** – No submenu or interaction beyond selection.\n *\n * 2. **NavMenuItem with submenu**:\n * - Provide an `id` on the `mdc-navmenuitem`\n * - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navmenuitem's `id`\n * - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item\n * inside the nested menupopover is active, conveying which submenu item is currently selected\n *\n * 3. **Actionable navmenuitem (no submenu)**:\n * - Performs an action such as navigation or alert trigger\n * - Set `disable-aria-current=\"true\"` to maintain visual active state without navigation behavior\n *\n * ### Recommendations:\n * - Use `mdc-text` for section headers\n * - Use `mdc-divider` with the attribute `variant=\"gradient\"` for section dividers\n * - For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`\n *\n * #### Accessibility Notes:\n * - Always provide meaningful `aria-label` attributes for both `mdc-navmenuitem` and `mdc-menubar`\n * to ensure screen reader support\n * - Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button\n *\n * @dependency mdc-text\n * @dependency mdc-button\n * @dependency mdc-divider\n * @dependency mdc-menubar\n *\n * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.\n *\n * @tagname mdc-sidenavigation\n *\n * @slot scrollable-section - Slot for the scrollable content area of the side navigation.\n * @slot fixed-section - Slot for the fixed content area of the side navigation.\n * @slot brand-logo - Slot for the brand logo (e.g., icon or img).\n *\n * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded\n * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collpased\n */",
|
30344
|
-
"customElement": true
|
30345
|
-
}
|
30346
|
-
],
|
30347
|
-
"exports": [
|
30348
|
-
{
|
30349
|
-
"kind": "js",
|
30350
|
-
"name": "default",
|
30351
|
-
"declaration": {
|
30352
|
-
"name": "SideNavigation",
|
30353
|
-
"module": "components/sidenavigation/sidenavigation.component.js"
|
30354
|
-
}
|
30355
|
-
}
|
30356
|
-
]
|
30357
|
-
},
|
30358
30358
|
{
|
30359
30359
|
"kind": "javascript-module",
|
30360
30360
|
"path": "components/staticcheckbox/staticcheckbox.component.js",
|
package/dist/react/index.d.ts
CHANGED
@@ -5,8 +5,8 @@ export { default as Avatar } from './avatar';
|
|
5
5
|
export { default as AvatarButton } from './avatarbutton';
|
6
6
|
export { default as Badge } from './badge';
|
7
7
|
export { default as Brandvisual } from './brandvisual';
|
8
|
-
export { default as Button } from './button';
|
9
8
|
export { default as Bullet } from './bullet';
|
9
|
+
export { default as Button } from './button';
|
10
10
|
export { default as ButtonGroup } from './buttongroup';
|
11
11
|
export { default as ButtonLink } from './buttonlink';
|
12
12
|
export { default as Buttonsimple } from './buttonsimple';
|
@@ -51,9 +51,9 @@ export { default as RadioGroup } from './radiogroup';
|
|
51
51
|
export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
|
52
52
|
export { default as Searchfield } from './searchfield';
|
53
53
|
export { default as Select } from './select';
|
54
|
+
export { default as SideNavigation } from './sidenavigation';
|
54
55
|
export { default as Skeleton } from './skeleton';
|
55
56
|
export { default as Spinner } from './spinner';
|
56
|
-
export { default as SideNavigation } from './sidenavigation';
|
57
57
|
export { default as StaticCheckbox } from './staticcheckbox';
|
58
58
|
export { default as StaticRadio } from './staticradio';
|
59
59
|
export { default as StaticToggle } from './statictoggle';
|
package/dist/react/index.js
CHANGED
@@ -5,8 +5,8 @@ export { default as Avatar } from './avatar';
|
|
5
5
|
export { default as AvatarButton } from './avatarbutton';
|
6
6
|
export { default as Badge } from './badge';
|
7
7
|
export { default as Brandvisual } from './brandvisual';
|
8
|
-
export { default as Button } from './button';
|
9
8
|
export { default as Bullet } from './bullet';
|
9
|
+
export { default as Button } from './button';
|
10
10
|
export { default as ButtonGroup } from './buttongroup';
|
11
11
|
export { default as ButtonLink } from './buttonlink';
|
12
12
|
export { default as Buttonsimple } from './buttonsimple';
|
@@ -51,9 +51,9 @@ export { default as RadioGroup } from './radiogroup';
|
|
51
51
|
export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
|
52
52
|
export { default as Searchfield } from './searchfield';
|
53
53
|
export { default as Select } from './select';
|
54
|
+
export { default as SideNavigation } from './sidenavigation';
|
54
55
|
export { default as Skeleton } from './skeleton';
|
55
56
|
export { default as Spinner } from './spinner';
|
56
|
-
export { default as SideNavigation } from './sidenavigation';
|
57
57
|
export { default as StaticCheckbox } from './staticcheckbox';
|
58
58
|
export { default as StaticRadio } from './staticradio';
|
59
59
|
export { default as StaticToggle } from './statictoggle';
|