@shortfuse/materialdesignweb 0.9.3 → 0.10.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/README.md +51 -37
- package/api/README.md +5 -0
- package/api/css.css-data.json +23 -0
- package/api/custom-elements.json +116343 -0
- package/api/html.html-data.json +2994 -0
- package/bin/mdw-css.js +8 -8
- package/components/BottomSheet.js +2 -2
- package/components/Box.js +2 -2
- package/components/NavItem.js +4 -1
- package/components/Page.js +3 -0
- package/components/Pane.js +0 -2
- package/components/SideSheet.js +2 -2
- package/components/Surface.js +2 -2
- package/core/Composition.js +57 -16
- package/core/CompositionAdapter.js +55 -12
- package/core/CustomElement.js +177 -34
- package/core/customTypes.js +66 -0
- package/core/jsonMergePatch.js +203 -20
- package/core/observe.js +256 -10
- package/dist/CustomElement.min.js +1 -1
- package/dist/CustomElement.min.js.map +3 -3
- package/dist/index.min.js +171 -158
- package/dist/index.min.js.map +4 -4
- package/dist/meta.json +1 -1
- package/loaders/theme.js +4 -1
- package/mixins/{FlexableMixin.js → FlexboxMixin.js} +5 -3
- package/package.json +32 -10
- package/services/theme.js +115 -97
- package/types/components/NavBarItem.d.ts +1 -0
- package/types/components/NavDrawerItem.d.ts +1 -0
- package/types/components/NavItem.d.ts +1 -0
- package/types/components/NavItem.d.ts.map +1 -1
- package/types/components/NavRailItem.d.ts +1 -0
- package/types/components/Page.d.ts.map +1 -1
- package/types/core/Composition.d.ts +5 -1
- package/types/core/Composition.d.ts.map +1 -1
- package/types/core/CompositionAdapter.d.ts +0 -25
- package/types/core/CompositionAdapter.d.ts.map +1 -1
- package/types/core/CustomElement.d.ts +122 -19
- package/types/core/CustomElement.d.ts.map +1 -1
- package/types/core/customTypes.d.ts +8 -0
- package/types/core/customTypes.d.ts.map +1 -1
- package/types/core/jsonMergePatch.d.ts +58 -4
- package/types/core/jsonMergePatch.d.ts.map +1 -1
- package/types/core/observe.d.ts +21 -2
- package/types/core/observe.d.ts.map +1 -1
- package/types/index.d.ts +1 -1
- package/types/mixins/FlexboxMixin.d.ts +14 -0
- package/types/mixins/FlexboxMixin.d.ts.map +1 -0
- package/types/services/theme.d.ts +6 -0
- package/types/services/theme.d.ts.map +1 -1
- package/types/mixins/FlexableMixin.d.ts +0 -14
- package/types/mixins/FlexableMixin.d.ts.map +0 -1
|
@@ -0,0 +1,2994 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
|
|
3
|
+
"version": 1.1,
|
|
4
|
+
"tags": [
|
|
5
|
+
{
|
|
6
|
+
"name": "mdw-badge",
|
|
7
|
+
"description": "Badges show notifications, counts, or status information on\nnavigation items and icons.\n@see https://m3.material.io/components/badges/specs\n---\n\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\"></slot>",
|
|
8
|
+
"attributes": [
|
|
9
|
+
{ "name": "color", "values": [] },
|
|
10
|
+
{ "name": "ink", "values": [] },
|
|
11
|
+
{ "name": "type-style", "values": [] },
|
|
12
|
+
{ "name": "density", "values": [] },
|
|
13
|
+
{ "name": "shape-top", "values": [] },
|
|
14
|
+
{ "name": "shape-bottom", "values": [] },
|
|
15
|
+
{ "name": "shape-start", "values": [] },
|
|
16
|
+
{ "name": "shape-end", "values": [] },
|
|
17
|
+
{ "name": "shape-style", "values": [] },
|
|
18
|
+
{ "name": "outlined", "values": [] }
|
|
19
|
+
],
|
|
20
|
+
"references": []
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"name": "mdw-body",
|
|
24
|
+
"description": "Material Design Type scale: Body.\n@see https://m3.material.io/styles/typography/type-scale-tokens\n---\n\n\n### **Slots:**\n - _default_ - <slot id=\"slot\"></slot>",
|
|
25
|
+
"attributes": [
|
|
26
|
+
{ "name": "color", "values": [] },
|
|
27
|
+
{ "name": "ink", "values": [] },
|
|
28
|
+
{ "name": "type-style", "values": [] },
|
|
29
|
+
{ "name": "block", "values": [] },
|
|
30
|
+
{ "name": "inline", "values": [] },
|
|
31
|
+
{ "name": "row", "values": [] },
|
|
32
|
+
{ "name": "x", "values": [] },
|
|
33
|
+
{ "name": "y", "values": [] },
|
|
34
|
+
{ "name": "gap", "values": [] },
|
|
35
|
+
{ "name": "padding", "values": [] },
|
|
36
|
+
{ "name": "text-padding", "values": [] },
|
|
37
|
+
{ "name": "text-padding-top", "values": [] },
|
|
38
|
+
{ "name": "text-leading", "values": [] },
|
|
39
|
+
{ "name": "text-padding-bottom", "values": [] }
|
|
40
|
+
],
|
|
41
|
+
"references": []
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"name": "mdw-bottom-app-bar",
|
|
45
|
+
"description": "Note: FAB does not exist inside because FABs can appear outside.\nSpace will be maintained for the FAB to slide into position. FAB should be\nnext on the DOM, so users can logically tab to it.\n---\n\n\n### **Slots:**\n - _default_ - <slot id=\"slot\"></slot>",
|
|
46
|
+
"attributes": [
|
|
47
|
+
{ "name": "color", "values": [] },
|
|
48
|
+
{ "name": "ink", "values": [] },
|
|
49
|
+
{ "name": "type-style", "values": [] },
|
|
50
|
+
{ "name": "block", "values": [] },
|
|
51
|
+
{ "name": "inline", "values": [] },
|
|
52
|
+
{ "name": "row", "values": [] },
|
|
53
|
+
{ "name": "x", "values": [] },
|
|
54
|
+
{ "name": "y", "values": [] },
|
|
55
|
+
{ "name": "gap", "values": [] },
|
|
56
|
+
{ "name": "padding", "values": [] },
|
|
57
|
+
{ "name": "shape-top", "values": [] },
|
|
58
|
+
{ "name": "shape-bottom", "values": [] },
|
|
59
|
+
{ "name": "shape-start", "values": [] },
|
|
60
|
+
{ "name": "shape-end", "values": [] },
|
|
61
|
+
{ "name": "shape-style", "values": [] },
|
|
62
|
+
{ "name": "outlined", "values": [] },
|
|
63
|
+
{ "name": "kbd-nav", "values": [] }
|
|
64
|
+
],
|
|
65
|
+
"references": []
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"name": "mdw-bottom-sheet",
|
|
69
|
+
"description": "Bottom sheets show secondary content anchored to the bottom of the screen\n@see https://m3.material.io/components/bottom-sheets/specs\n---\n\n\n### **Events:**\n - **open**\n- **drag-handle-active**\n- **drag-handle-inactive**\n- **pointer-or-touch-move**\n\n### **Methods:**\n - **checkForScrim(): _(animate?: boolean) => void_** - Ensure a scrim is present when the sheet is modal and open.\n- **checkDragFinished(): _() => void_** - Evaluate drag state and settle the sheet (close or snap open).\n- **onDragHandleActive(): _(event: PointerEvent) => void_** - Pointer active on the drag handle; registers the pointer for dragging.\n- **onDragHandleInactive(): _(event: PointerEvent) => void_** - Pointer inactive on the drag handle; finalizes potential drag.\n- **onPointerOrTouchMove(): _(event: PointerEvent | TouchEvent) => void_** - Handle pointer or touch move events during dragging.\n- **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\"></slot>",
|
|
70
|
+
"attributes": [
|
|
71
|
+
{ "name": "color", "values": [] },
|
|
72
|
+
{ "name": "ink", "values": [] },
|
|
73
|
+
{ "name": "type-style", "values": [] },
|
|
74
|
+
{ "name": "block", "values": [] },
|
|
75
|
+
{ "name": "inline", "values": [] },
|
|
76
|
+
{ "name": "row", "values": [] },
|
|
77
|
+
{ "name": "x", "values": [] },
|
|
78
|
+
{ "name": "y", "values": [] },
|
|
79
|
+
{ "name": "gap", "values": [] },
|
|
80
|
+
{ "name": "padding", "values": [] },
|
|
81
|
+
{
|
|
82
|
+
"name": "shape-top",
|
|
83
|
+
"description": "Overrides default of shape top to be true",
|
|
84
|
+
"values": []
|
|
85
|
+
},
|
|
86
|
+
{ "name": "shape-bottom", "values": [] },
|
|
87
|
+
{ "name": "shape-start", "values": [] },
|
|
88
|
+
{ "name": "shape-end", "values": [] },
|
|
89
|
+
{ "name": "shape-style", "values": [] },
|
|
90
|
+
{ "name": "outlined", "values": [] },
|
|
91
|
+
{
|
|
92
|
+
"name": "modal",
|
|
93
|
+
"description": "Whether the bottom sheet displays as a modal and shows a scrim.",
|
|
94
|
+
"values": []
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
"name": "fixed",
|
|
98
|
+
"description": "If true, the sheet is fixed (not translated) and anchors to layout.",
|
|
99
|
+
"values": []
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
"name": "open",
|
|
103
|
+
"description": "Whether the bottom sheet is currently open.",
|
|
104
|
+
"values": []
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"name": "expanded",
|
|
108
|
+
"description": "Whether the bottom sheet is expanded to show full content.",
|
|
109
|
+
"values": []
|
|
110
|
+
},
|
|
111
|
+
{ "name": "drag-handle", "values": [] },
|
|
112
|
+
{
|
|
113
|
+
"name": "onopen",
|
|
114
|
+
"description": "Event handler: called when the sheet opens.",
|
|
115
|
+
"values": [{ "name": "function" }]
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
"name": "onclose",
|
|
119
|
+
"description": "Event handler: called when the sheet closes.",
|
|
120
|
+
"values": [{ "name": "function" }]
|
|
121
|
+
}
|
|
122
|
+
],
|
|
123
|
+
"references": []
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
"name": "mdw-box",
|
|
127
|
+
"description": "Boxes are stateless elements that may have a color and ink.\nThey should have simple geometry for rendering and layout.\n---\n\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\"></slot>",
|
|
128
|
+
"attributes": [
|
|
129
|
+
{ "name": "color", "values": [] },
|
|
130
|
+
{ "name": "ink", "values": [] },
|
|
131
|
+
{ "name": "type-style", "values": [] },
|
|
132
|
+
{ "name": "block", "values": [] },
|
|
133
|
+
{ "name": "inline", "values": [] },
|
|
134
|
+
{ "name": "row", "values": [] },
|
|
135
|
+
{ "name": "x", "values": [] },
|
|
136
|
+
{ "name": "y", "values": [] },
|
|
137
|
+
{ "name": "gap", "values": [] },
|
|
138
|
+
{ "name": "padding", "values": [] }
|
|
139
|
+
],
|
|
140
|
+
"references": []
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
"name": "mdw-button",
|
|
144
|
+
"description": "Buttons prompt most actions in a UI.\n@see https://m3.material.io/components/buttons/specs\n---\n\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\" disabled=\"{disabledState}\" aria-hidden=\"true\">{_defaultValue}</slot>\n\n### **CSS Parts:**\n - **control** - undefined",
|
|
145
|
+
"attributes": [
|
|
146
|
+
{ "name": "color", "values": [] },
|
|
147
|
+
{ "name": "ink", "values": [] },
|
|
148
|
+
{ "name": "type-style", "values": [] },
|
|
149
|
+
{ "name": "density", "values": [] },
|
|
150
|
+
{ "name": "disabled", "values": [] },
|
|
151
|
+
{ "name": "focused", "values": [] },
|
|
152
|
+
{ "name": "hovered", "values": [] },
|
|
153
|
+
{ "name": "pressed", "values": [] },
|
|
154
|
+
{ "name": "shape-top", "values": [] },
|
|
155
|
+
{ "name": "shape-bottom", "values": [] },
|
|
156
|
+
{ "name": "shape-start", "values": [] },
|
|
157
|
+
{ "name": "shape-end", "values": [] },
|
|
158
|
+
{ "name": "shape-style", "values": [] },
|
|
159
|
+
{
|
|
160
|
+
"name": "outlined",
|
|
161
|
+
"description": "Whether the button should render an outline.",
|
|
162
|
+
"values": []
|
|
163
|
+
},
|
|
164
|
+
{ "name": "aria-controls", "values": [] },
|
|
165
|
+
{ "name": "autocomplete", "values": [] },
|
|
166
|
+
{ "name": "name", "values": [] },
|
|
167
|
+
{ "name": "readonly", "values": [] },
|
|
168
|
+
{ "name": "formnovalidate", "values": [] },
|
|
169
|
+
{ "name": "checked", "values": [] },
|
|
170
|
+
{ "name": "required", "values": [] },
|
|
171
|
+
{
|
|
172
|
+
"name": "type",
|
|
173
|
+
"description": "The underlying control `type` (button, submit, reset, file).",
|
|
174
|
+
"values": []
|
|
175
|
+
},
|
|
176
|
+
{ "name": "value", "values": [] },
|
|
177
|
+
{ "name": "aria-label", "values": [] },
|
|
178
|
+
{ "name": "accept", "values": [] },
|
|
179
|
+
{ "name": "alt", "values": [] },
|
|
180
|
+
{ "name": "dirname", "values": [] },
|
|
181
|
+
{ "name": "formenctype", "values": [] },
|
|
182
|
+
{ "name": "formmethod", "values": [] },
|
|
183
|
+
{ "name": "formtarget", "values": [] },
|
|
184
|
+
{ "name": "max", "values": [] },
|
|
185
|
+
{ "name": "maxlength", "values": [] },
|
|
186
|
+
{ "name": "min", "values": [] },
|
|
187
|
+
{ "name": "minlength", "values": [] },
|
|
188
|
+
{ "name": "multiple", "values": [] },
|
|
189
|
+
{ "name": "pattern", "values": [] },
|
|
190
|
+
{ "name": "placeholder", "values": [] },
|
|
191
|
+
{ "name": "size", "values": [] },
|
|
192
|
+
{
|
|
193
|
+
"name": "src",
|
|
194
|
+
"description": "Image source URL for an icon.",
|
|
195
|
+
"values": []
|
|
196
|
+
},
|
|
197
|
+
{ "name": "step", "values": [] },
|
|
198
|
+
{ "name": "indeterminate", "values": [] },
|
|
199
|
+
{ "name": "href", "values": [] },
|
|
200
|
+
{ "name": "target", "values": [] },
|
|
201
|
+
{ "name": "download", "values": [] },
|
|
202
|
+
{ "name": "ping", "values": [] },
|
|
203
|
+
{ "name": "rel", "values": [] },
|
|
204
|
+
{ "name": "hreflang", "values": [] },
|
|
205
|
+
{ "name": "referrerpolicy", "values": [] },
|
|
206
|
+
{
|
|
207
|
+
"name": "elevated",
|
|
208
|
+
"description": "Bound to [elevated] specifying whether the element should be elevated.",
|
|
209
|
+
"values": []
|
|
210
|
+
},
|
|
211
|
+
{
|
|
212
|
+
"name": "filled",
|
|
213
|
+
"description": "Visual filled variant; may be \"tonal\" or boolean-filled token.",
|
|
214
|
+
"values": []
|
|
215
|
+
},
|
|
216
|
+
{
|
|
217
|
+
"name": "icon",
|
|
218
|
+
"description": "Icon name (uses internal `mdw-icon` when set).",
|
|
219
|
+
"values": []
|
|
220
|
+
},
|
|
221
|
+
{
|
|
222
|
+
"name": "icon-ink",
|
|
223
|
+
"description": "Ink color override for the icon.",
|
|
224
|
+
"values": []
|
|
225
|
+
},
|
|
226
|
+
{
|
|
227
|
+
"name": "svg",
|
|
228
|
+
"description": "Inline SVG markup to render as icon.",
|
|
229
|
+
"values": []
|
|
230
|
+
},
|
|
231
|
+
{
|
|
232
|
+
"name": "view-box",
|
|
233
|
+
"description": "SVG `viewBox` attribute for inline SVG icons.",
|
|
234
|
+
"values": []
|
|
235
|
+
},
|
|
236
|
+
{
|
|
237
|
+
"name": "svg-path",
|
|
238
|
+
"description": "Path data for an inline SVG icon.",
|
|
239
|
+
"values": []
|
|
240
|
+
},
|
|
241
|
+
{
|
|
242
|
+
"name": "state-layer",
|
|
243
|
+
"description": "Show the visual state layer element when true",
|
|
244
|
+
"values": []
|
|
245
|
+
}
|
|
246
|
+
],
|
|
247
|
+
"references": []
|
|
248
|
+
},
|
|
249
|
+
{
|
|
250
|
+
"name": "mdw-card",
|
|
251
|
+
"description": "Cards display content and actions about a single subject.\n@see https://m3.material.io/components/cards/specs\n---\n\n\n### **Events:**\n - **action**\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\" disabled=\"{disabledState}\" inert=\"{disabledState}\"></slot>",
|
|
252
|
+
"attributes": [
|
|
253
|
+
{ "name": "color", "values": [] },
|
|
254
|
+
{ "name": "ink", "values": [] },
|
|
255
|
+
{ "name": "type-style", "values": [] },
|
|
256
|
+
{ "name": "block", "values": [] },
|
|
257
|
+
{ "name": "inline", "values": [] },
|
|
258
|
+
{ "name": "row", "values": [] },
|
|
259
|
+
{ "name": "x", "values": [] },
|
|
260
|
+
{ "name": "y", "values": [] },
|
|
261
|
+
{ "name": "gap", "values": [] },
|
|
262
|
+
{ "name": "padding", "values": [] },
|
|
263
|
+
{ "name": "disabled", "values": [] },
|
|
264
|
+
{ "name": "focused", "values": [] },
|
|
265
|
+
{ "name": "hovered", "values": [] },
|
|
266
|
+
{ "name": "pressed", "values": [] },
|
|
267
|
+
{ "name": "state-layer", "values": [] },
|
|
268
|
+
{ "name": "shape-top", "values": [] },
|
|
269
|
+
{ "name": "shape-bottom", "values": [] },
|
|
270
|
+
{ "name": "shape-start", "values": [] },
|
|
271
|
+
{ "name": "shape-end", "values": [] },
|
|
272
|
+
{ "name": "shape-style", "values": [] },
|
|
273
|
+
{ "name": "outlined", "values": [] },
|
|
274
|
+
{ "name": "aria-controls", "values": [] },
|
|
275
|
+
{ "name": "autocomplete", "values": [] },
|
|
276
|
+
{ "name": "name", "values": [] },
|
|
277
|
+
{ "name": "readonly", "values": [] },
|
|
278
|
+
{ "name": "formnovalidate", "values": [] },
|
|
279
|
+
{ "name": "checked", "values": [] },
|
|
280
|
+
{ "name": "required", "values": [] },
|
|
281
|
+
{ "name": "type", "values": [] },
|
|
282
|
+
{ "name": "value", "values": [] },
|
|
283
|
+
{ "name": "href", "values": [] },
|
|
284
|
+
{ "name": "target", "values": [] },
|
|
285
|
+
{ "name": "download", "values": [] },
|
|
286
|
+
{ "name": "ping", "values": [] },
|
|
287
|
+
{ "name": "rel", "values": [] },
|
|
288
|
+
{ "name": "hreflang", "values": [] },
|
|
289
|
+
{ "name": "referrerpolicy", "values": [] },
|
|
290
|
+
{
|
|
291
|
+
"name": "elevated",
|
|
292
|
+
"description": "Whether the card displays an elevated surface.",
|
|
293
|
+
"values": []
|
|
294
|
+
},
|
|
295
|
+
{
|
|
296
|
+
"name": "filled",
|
|
297
|
+
"description": "Whether the card uses a filled surface style.",
|
|
298
|
+
"values": []
|
|
299
|
+
},
|
|
300
|
+
{
|
|
301
|
+
"name": "actionable",
|
|
302
|
+
"description": "When true, card renders an actionable control (clickable).",
|
|
303
|
+
"values": []
|
|
304
|
+
},
|
|
305
|
+
{
|
|
306
|
+
"name": "action-label",
|
|
307
|
+
"description": "Label for the action control used for accessibility.",
|
|
308
|
+
"values": []
|
|
309
|
+
},
|
|
310
|
+
{
|
|
311
|
+
"name": "onaction",
|
|
312
|
+
"description": "Event handler called when the card action is triggered.",
|
|
313
|
+
"values": [{ "name": "function" }]
|
|
314
|
+
}
|
|
315
|
+
],
|
|
316
|
+
"references": []
|
|
317
|
+
},
|
|
318
|
+
{
|
|
319
|
+
"name": "mdw-checkbox",
|
|
320
|
+
"description": "Checkboxes let users select one or more items from a list, or turn an item on or off.\n@see https://m3.material.io/components/checkbox/specs\n---\n\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\"></slot>\n\n### **CSS Parts:**\n - **control** - undefined",
|
|
321
|
+
"attributes": [
|
|
322
|
+
{ "name": "color", "values": [] },
|
|
323
|
+
{ "name": "ink", "values": [] },
|
|
324
|
+
{ "name": "type-style", "values": [] },
|
|
325
|
+
{ "name": "disabled", "values": [] },
|
|
326
|
+
{ "name": "focused", "values": [] },
|
|
327
|
+
{ "name": "hovered", "values": [] },
|
|
328
|
+
{ "name": "pressed", "values": [] },
|
|
329
|
+
{ "name": "aria-controls", "values": [] },
|
|
330
|
+
{ "name": "autocomplete", "values": [] },
|
|
331
|
+
{ "name": "name", "values": [] },
|
|
332
|
+
{ "name": "readonly", "values": [] },
|
|
333
|
+
{ "name": "formnovalidate", "values": [] },
|
|
334
|
+
{ "name": "checked", "values": [] },
|
|
335
|
+
{ "name": "required", "values": [] },
|
|
336
|
+
{ "name": "value", "values": [] },
|
|
337
|
+
{ "name": "aria-label", "values": [] },
|
|
338
|
+
{ "name": "accept", "values": [] },
|
|
339
|
+
{ "name": "alt", "values": [] },
|
|
340
|
+
{ "name": "dirname", "values": [] },
|
|
341
|
+
{ "name": "formenctype", "values": [] },
|
|
342
|
+
{ "name": "formmethod", "values": [] },
|
|
343
|
+
{ "name": "formtarget", "values": [] },
|
|
344
|
+
{ "name": "max", "values": [] },
|
|
345
|
+
{ "name": "maxlength", "values": [] },
|
|
346
|
+
{ "name": "min", "values": [] },
|
|
347
|
+
{ "name": "minlength", "values": [] },
|
|
348
|
+
{ "name": "multiple", "values": [] },
|
|
349
|
+
{ "name": "pattern", "values": [] },
|
|
350
|
+
{ "name": "placeholder", "values": [] },
|
|
351
|
+
{ "name": "size", "values": [] },
|
|
352
|
+
{ "name": "src", "values": [] },
|
|
353
|
+
{ "name": "step", "values": [] },
|
|
354
|
+
{ "name": "indeterminate", "values": [] },
|
|
355
|
+
{
|
|
356
|
+
"name": "icon",
|
|
357
|
+
"description": "Icon name to show for the checked state.",
|
|
358
|
+
"values": []
|
|
359
|
+
},
|
|
360
|
+
{
|
|
361
|
+
"name": "indeterminate-icon",
|
|
362
|
+
"description": "Icon name to show when the control is indeterminate.",
|
|
363
|
+
"values": []
|
|
364
|
+
},
|
|
365
|
+
{
|
|
366
|
+
"name": "state-layer",
|
|
367
|
+
"description": "Show the visual state layer element when true",
|
|
368
|
+
"values": []
|
|
369
|
+
},
|
|
370
|
+
{ "name": "type", "values": [] }
|
|
371
|
+
],
|
|
372
|
+
"references": []
|
|
373
|
+
},
|
|
374
|
+
{
|
|
375
|
+
"name": "mdw-checkbox-icon",
|
|
376
|
+
"description": "CheckboxIcon is a visual helper for checkboxes, rendering the box and checkmark.\n@see https://m3.material.io/components/checkbox/specs\n---\n\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````",
|
|
377
|
+
"attributes": [
|
|
378
|
+
{ "name": "color", "values": [] },
|
|
379
|
+
{ "name": "ink", "values": [] },
|
|
380
|
+
{ "name": "type-style", "values": [] },
|
|
381
|
+
{ "name": "shape-top", "values": [] },
|
|
382
|
+
{ "name": "shape-bottom", "values": [] },
|
|
383
|
+
{ "name": "shape-start", "values": [] },
|
|
384
|
+
{ "name": "shape-end", "values": [] },
|
|
385
|
+
{ "name": "shape-style", "values": [] },
|
|
386
|
+
{ "name": "outlined", "values": [] },
|
|
387
|
+
{
|
|
388
|
+
"name": "selected",
|
|
389
|
+
"description": "Whether the icon is selected (checked).",
|
|
390
|
+
"values": []
|
|
391
|
+
},
|
|
392
|
+
{
|
|
393
|
+
"name": "icon",
|
|
394
|
+
"description": "Icon name to render inside the checkbox icon.",
|
|
395
|
+
"values": []
|
|
396
|
+
},
|
|
397
|
+
{
|
|
398
|
+
"name": "errored",
|
|
399
|
+
"description": "Whether the associated control is in an error state.",
|
|
400
|
+
"values": []
|
|
401
|
+
},
|
|
402
|
+
{
|
|
403
|
+
"name": "disabled",
|
|
404
|
+
"description": "Whether the associated control is disabled.",
|
|
405
|
+
"values": []
|
|
406
|
+
}
|
|
407
|
+
],
|
|
408
|
+
"references": []
|
|
409
|
+
},
|
|
410
|
+
{
|
|
411
|
+
"name": "mdw-chip",
|
|
412
|
+
"description": "Chips help people enter information, make selections, filter content, or trigger actions.\n@see https://m3.material.io/components/chips/specs\n---\n\n\n### **Events:**\n - **value-changing-content-attribute**\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\" disabled=\"{disabledState}\" aria-hidden=\"true\">{_defaultValue}</slot>\n\n### **CSS Parts:**\n - **control** - undefined",
|
|
413
|
+
"attributes": [
|
|
414
|
+
{ "name": "color", "values": [] },
|
|
415
|
+
{ "name": "ink", "values": [] },
|
|
416
|
+
{ "name": "type-style", "values": [] },
|
|
417
|
+
{ "name": "density", "values": [] },
|
|
418
|
+
{ "name": "disabled", "values": [] },
|
|
419
|
+
{ "name": "focused", "values": [] },
|
|
420
|
+
{ "name": "hovered", "values": [] },
|
|
421
|
+
{ "name": "pressed", "values": [] },
|
|
422
|
+
{ "name": "shape-top", "values": [] },
|
|
423
|
+
{ "name": "shape-bottom", "values": [] },
|
|
424
|
+
{ "name": "shape-start", "values": [] },
|
|
425
|
+
{ "name": "shape-end", "values": [] },
|
|
426
|
+
{ "name": "shape-style", "values": [] },
|
|
427
|
+
{ "name": "outlined", "values": [] },
|
|
428
|
+
{ "name": "aria-controls", "values": [] },
|
|
429
|
+
{ "name": "autocomplete", "values": [] },
|
|
430
|
+
{ "name": "name", "values": [] },
|
|
431
|
+
{ "name": "readonly", "values": [] },
|
|
432
|
+
{ "name": "formnovalidate", "values": [] },
|
|
433
|
+
{ "name": "checked", "values": [] },
|
|
434
|
+
{ "name": "required", "values": [] },
|
|
435
|
+
{ "name": "type", "values": [] },
|
|
436
|
+
{ "name": "value", "values": [] },
|
|
437
|
+
{ "name": "aria-label", "values": [] },
|
|
438
|
+
{ "name": "accept", "values": [] },
|
|
439
|
+
{ "name": "alt", "values": [] },
|
|
440
|
+
{ "name": "dirname", "values": [] },
|
|
441
|
+
{ "name": "formenctype", "values": [] },
|
|
442
|
+
{ "name": "formmethod", "values": [] },
|
|
443
|
+
{ "name": "formtarget", "values": [] },
|
|
444
|
+
{ "name": "max", "values": [] },
|
|
445
|
+
{ "name": "maxlength", "values": [] },
|
|
446
|
+
{ "name": "min", "values": [] },
|
|
447
|
+
{ "name": "minlength", "values": [] },
|
|
448
|
+
{ "name": "multiple", "values": [] },
|
|
449
|
+
{ "name": "pattern", "values": [] },
|
|
450
|
+
{ "name": "placeholder", "values": [] },
|
|
451
|
+
{ "name": "size", "values": [] },
|
|
452
|
+
{ "name": "src", "values": [] },
|
|
453
|
+
{ "name": "step", "values": [] },
|
|
454
|
+
{ "name": "indeterminate", "values": [] },
|
|
455
|
+
{ "name": "href", "values": [] },
|
|
456
|
+
{ "name": "target", "values": [] },
|
|
457
|
+
{ "name": "download", "values": [] },
|
|
458
|
+
{ "name": "ping", "values": [] },
|
|
459
|
+
{ "name": "rel", "values": [] },
|
|
460
|
+
{ "name": "hreflang", "values": [] },
|
|
461
|
+
{ "name": "referrerpolicy", "values": [] },
|
|
462
|
+
{ "name": "elevated", "values": [] },
|
|
463
|
+
{ "name": "filled", "values": [] },
|
|
464
|
+
{ "name": "icon", "values": [] },
|
|
465
|
+
{ "name": "icon-ink", "values": [] },
|
|
466
|
+
{ "name": "svg", "values": [] },
|
|
467
|
+
{ "name": "view-box", "values": [] },
|
|
468
|
+
{ "name": "svg-path", "values": [] },
|
|
469
|
+
{
|
|
470
|
+
"name": "suggestion",
|
|
471
|
+
"description": "When true, renders the chip as a suggestion variant.",
|
|
472
|
+
"values": []
|
|
473
|
+
},
|
|
474
|
+
{
|
|
475
|
+
"name": "state-layer",
|
|
476
|
+
"description": "Show the visual state layer element when true",
|
|
477
|
+
"values": []
|
|
478
|
+
}
|
|
479
|
+
],
|
|
480
|
+
"references": []
|
|
481
|
+
},
|
|
482
|
+
{
|
|
483
|
+
"name": "mdw-dialog",
|
|
484
|
+
"description": "Returns array of elements that *may* be focusable over tab\n@param {Node} root\n@return {Element[]}\n---\n\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - **headline** - <slot id=\"headline\" name=\"headline\" on-slotchange=\"{onSlotChange}\" role=\"header\">{headline}</slot>\n- **fixed** - <slot id=\"fixed\" name=\"fixed\" class=\"content\" on-slotchange=\"{onSlotChange}\"></slot>\n- **content** - <slot id=\"content\" name=\"content\"><slot id=\"slot\" on-slotchange=\"{onSlotChange}\" class=\"content\"></slot></slot>\n- _default_ - <slot id=\"slot\" on-slotchange=\"{onSlotChange}\" class=\"content\"></slot>\n- **actions** - <slot id=\"actions\" name=\"actions\">\n <form method=\"dialog\" role=\"none\">\n <mdw-button id=\"cancel\" type=\"submit\" value=\"cancel\" autofocus=\"{cancelAutoFocus}\" formnovalidate=\"\">{cancel}</mdw-button>\n <mdw-button id=\"confirm\" type=\"submit\" value=\"confirm\" autofocus=\"{confirmAutoFocus}\">{confirm}</mdw-button>\n </form>\n </slot>",
|
|
485
|
+
"attributes": [
|
|
486
|
+
{ "name": "color", "values": [] },
|
|
487
|
+
{ "name": "ink", "values": [] },
|
|
488
|
+
{ "name": "type-style", "values": [] },
|
|
489
|
+
{ "name": "shape-top", "values": [] },
|
|
490
|
+
{ "name": "shape-bottom", "values": [] },
|
|
491
|
+
{ "name": "shape-start", "values": [] },
|
|
492
|
+
{ "name": "shape-end", "values": [] },
|
|
493
|
+
{ "name": "shape-style", "values": [] },
|
|
494
|
+
{ "name": "outlined", "values": [] },
|
|
495
|
+
{ "name": "open", "values": [] },
|
|
496
|
+
{ "name": "modal", "values": [] },
|
|
497
|
+
{ "name": "native", "values": [] },
|
|
498
|
+
{ "name": "scrollable", "values": [] },
|
|
499
|
+
{ "name": "match-source-width", "values": [] },
|
|
500
|
+
{ "name": "popup-margin", "values": [] },
|
|
501
|
+
{
|
|
502
|
+
"name": "dividers",
|
|
503
|
+
"description": "Divider style for the dialog: 'full', 'inset', or empty.",
|
|
504
|
+
"values": []
|
|
505
|
+
},
|
|
506
|
+
{
|
|
507
|
+
"name": "headline",
|
|
508
|
+
"description": "Headline text displayed in the dialog header.",
|
|
509
|
+
"values": []
|
|
510
|
+
},
|
|
511
|
+
{
|
|
512
|
+
"name": "icon",
|
|
513
|
+
"description": "Optional icon name shown in the dialog header.",
|
|
514
|
+
"values": []
|
|
515
|
+
},
|
|
516
|
+
{
|
|
517
|
+
"name": "default",
|
|
518
|
+
"description": "Default action (value) for the dialog when submitting.",
|
|
519
|
+
"values": []
|
|
520
|
+
},
|
|
521
|
+
{
|
|
522
|
+
"name": "cancel",
|
|
523
|
+
"description": "Label for the cancel action button.",
|
|
524
|
+
"values": []
|
|
525
|
+
},
|
|
526
|
+
{
|
|
527
|
+
"name": "confirm",
|
|
528
|
+
"description": "Label for the confirm action button.",
|
|
529
|
+
"values": []
|
|
530
|
+
},
|
|
531
|
+
{ "name": "flow", "values": [] }
|
|
532
|
+
],
|
|
533
|
+
"references": []
|
|
534
|
+
},
|
|
535
|
+
{
|
|
536
|
+
"name": "mdw-dialog-actions",
|
|
537
|
+
"description": "Dialog action regions contain primary and secondary actions for dialogs.\n@see https://m3.material.io/components/dialogs/specs\n---\n\n\n### **Slots:**\n - _default_ - <slot id=\"slot\"></slot>",
|
|
538
|
+
"attributes": [],
|
|
539
|
+
"references": []
|
|
540
|
+
},
|
|
541
|
+
{
|
|
542
|
+
"name": "mdw-display",
|
|
543
|
+
"description": "Material Design Type scale: Display\n@see https://m3.material.io/styles/typography/type-scale-tokens\n---\n\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\"></slot>",
|
|
544
|
+
"attributes": [
|
|
545
|
+
{ "name": "color", "values": [] },
|
|
546
|
+
{ "name": "ink", "values": [] },
|
|
547
|
+
{ "name": "type-style", "values": [] },
|
|
548
|
+
{ "name": "block", "values": [] },
|
|
549
|
+
{ "name": "inline", "values": [] },
|
|
550
|
+
{ "name": "row", "values": [] },
|
|
551
|
+
{ "name": "x", "values": [] },
|
|
552
|
+
{ "name": "y", "values": [] },
|
|
553
|
+
{ "name": "gap", "values": [] },
|
|
554
|
+
{ "name": "padding", "values": [] },
|
|
555
|
+
{ "name": "text-padding", "values": [] },
|
|
556
|
+
{ "name": "text-padding-top", "values": [] },
|
|
557
|
+
{ "name": "text-leading", "values": [] },
|
|
558
|
+
{ "name": "text-padding-bottom", "values": [] },
|
|
559
|
+
{
|
|
560
|
+
"name": "aria-level",
|
|
561
|
+
"description": "Explicit aria-level; if set, overrides the computed level.",
|
|
562
|
+
"values": []
|
|
563
|
+
},
|
|
564
|
+
{
|
|
565
|
+
"name": "size",
|
|
566
|
+
"description": "Display size controlling typographic scale: 'large'|'medium'|'small'.",
|
|
567
|
+
"values": []
|
|
568
|
+
}
|
|
569
|
+
],
|
|
570
|
+
"references": []
|
|
571
|
+
},
|
|
572
|
+
{
|
|
573
|
+
"name": "mdw-divider",
|
|
574
|
+
"description": "Dividers are thin lines that group content in lists or other containers\n@see https://m3.material.io/components/divider/specs\n---\n\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````",
|
|
575
|
+
"attributes": [
|
|
576
|
+
{ "name": "color", "values": [] },
|
|
577
|
+
{ "name": "ink", "values": [] },
|
|
578
|
+
{ "name": "type-style", "values": [] },
|
|
579
|
+
{
|
|
580
|
+
"name": "vertical",
|
|
581
|
+
"description": "When true, render the divider vertically instead of horizontally.",
|
|
582
|
+
"values": []
|
|
583
|
+
}
|
|
584
|
+
],
|
|
585
|
+
"references": []
|
|
586
|
+
},
|
|
587
|
+
{
|
|
588
|
+
"name": "mdw-fab",
|
|
589
|
+
"description": "Floating action buttons (FABs) help people take primary actions.\n@see https://m3.material.io/components/floating-action-button/specs\n@see https://m3.material.io/components/extended-fab/specs\n---\n\n\n### **Events:**\n - **value-changing-content-attribute**\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\" disabled=\"{disabledState}\" aria-hidden=\"true\" extended=\"{extended}\" icon=\"{icon}\">{_defaultValue}</slot>\n\n### **CSS Parts:**\n - **control** - undefined",
|
|
590
|
+
"attributes": [
|
|
591
|
+
{ "name": "color", "values": [] },
|
|
592
|
+
{ "name": "ink", "values": [] },
|
|
593
|
+
{ "name": "type-style", "values": [] },
|
|
594
|
+
{ "name": "density", "values": [] },
|
|
595
|
+
{ "name": "disabled", "values": [] },
|
|
596
|
+
{ "name": "focused", "values": [] },
|
|
597
|
+
{ "name": "hovered", "values": [] },
|
|
598
|
+
{ "name": "pressed", "values": [] },
|
|
599
|
+
{ "name": "shape-top", "values": [] },
|
|
600
|
+
{ "name": "shape-bottom", "values": [] },
|
|
601
|
+
{ "name": "shape-start", "values": [] },
|
|
602
|
+
{ "name": "shape-end", "values": [] },
|
|
603
|
+
{ "name": "shape-style", "values": [] },
|
|
604
|
+
{ "name": "outlined", "values": [] },
|
|
605
|
+
{ "name": "aria-controls", "values": [] },
|
|
606
|
+
{ "name": "autocomplete", "values": [] },
|
|
607
|
+
{ "name": "name", "values": [] },
|
|
608
|
+
{ "name": "readonly", "values": [] },
|
|
609
|
+
{ "name": "formnovalidate", "values": [] },
|
|
610
|
+
{ "name": "checked", "values": [] },
|
|
611
|
+
{ "name": "required", "values": [] },
|
|
612
|
+
{ "name": "type", "values": [] },
|
|
613
|
+
{ "name": "value", "values": [] },
|
|
614
|
+
{ "name": "aria-label", "values": [] },
|
|
615
|
+
{ "name": "accept", "values": [] },
|
|
616
|
+
{ "name": "alt", "values": [] },
|
|
617
|
+
{ "name": "dirname", "values": [] },
|
|
618
|
+
{ "name": "formenctype", "values": [] },
|
|
619
|
+
{ "name": "formmethod", "values": [] },
|
|
620
|
+
{ "name": "formtarget", "values": [] },
|
|
621
|
+
{ "name": "max", "values": [] },
|
|
622
|
+
{ "name": "maxlength", "values": [] },
|
|
623
|
+
{ "name": "min", "values": [] },
|
|
624
|
+
{ "name": "minlength", "values": [] },
|
|
625
|
+
{ "name": "multiple", "values": [] },
|
|
626
|
+
{ "name": "pattern", "values": [] },
|
|
627
|
+
{ "name": "placeholder", "values": [] },
|
|
628
|
+
{ "name": "size", "values": [] },
|
|
629
|
+
{ "name": "src", "values": [] },
|
|
630
|
+
{ "name": "step", "values": [] },
|
|
631
|
+
{ "name": "indeterminate", "values": [] },
|
|
632
|
+
{ "name": "href", "values": [] },
|
|
633
|
+
{ "name": "target", "values": [] },
|
|
634
|
+
{ "name": "download", "values": [] },
|
|
635
|
+
{ "name": "ping", "values": [] },
|
|
636
|
+
{ "name": "rel", "values": [] },
|
|
637
|
+
{ "name": "hreflang", "values": [] },
|
|
638
|
+
{ "name": "referrerpolicy", "values": [] },
|
|
639
|
+
{
|
|
640
|
+
"name": "elevated",
|
|
641
|
+
"description": "Whether the FAB uses elevated styling.",
|
|
642
|
+
"values": []
|
|
643
|
+
},
|
|
644
|
+
{
|
|
645
|
+
"name": "filled",
|
|
646
|
+
"description": "Filled variant; default is 'tonal' when omitted.",
|
|
647
|
+
"values": []
|
|
648
|
+
},
|
|
649
|
+
{ "name": "icon", "values": [] },
|
|
650
|
+
{ "name": "icon-ink", "values": [] },
|
|
651
|
+
{ "name": "svg", "values": [] },
|
|
652
|
+
{ "name": "view-box", "values": [] },
|
|
653
|
+
{ "name": "svg-path", "values": [] },
|
|
654
|
+
{ "name": "tooltip", "values": [] },
|
|
655
|
+
{ "name": "auto-tooltip", "values": [] },
|
|
656
|
+
{
|
|
657
|
+
"name": "lowered",
|
|
658
|
+
"description": "When true, render the lowered FAB variant (reduced elevation).",
|
|
659
|
+
"values": []
|
|
660
|
+
},
|
|
661
|
+
{
|
|
662
|
+
"name": "extended",
|
|
663
|
+
"description": "When true, the FAB is extended and shows a text label.",
|
|
664
|
+
"values": []
|
|
665
|
+
},
|
|
666
|
+
{
|
|
667
|
+
"name": "fab-size",
|
|
668
|
+
"description": "FAB size: `null` (default), 'small' or 'large'.",
|
|
669
|
+
"values": []
|
|
670
|
+
},
|
|
671
|
+
{
|
|
672
|
+
"name": "state-layer",
|
|
673
|
+
"description": "Show the visual state layer element when true",
|
|
674
|
+
"values": []
|
|
675
|
+
}
|
|
676
|
+
],
|
|
677
|
+
"references": []
|
|
678
|
+
},
|
|
679
|
+
{
|
|
680
|
+
"name": "mdw-fab-container",
|
|
681
|
+
"description": "Container for Floating Action Buttons (FAB) used to position FABs.\n@see https://m3.material.io/components/floating-action-button/specs\n---\n\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\"></slot>",
|
|
682
|
+
"attributes": [
|
|
683
|
+
{
|
|
684
|
+
"name": "hide-breakpoint",
|
|
685
|
+
"description": "Hide the FAB container at this min-width (pixels).",
|
|
686
|
+
"values": []
|
|
687
|
+
}
|
|
688
|
+
],
|
|
689
|
+
"references": []
|
|
690
|
+
},
|
|
691
|
+
{
|
|
692
|
+
"name": "mdw-filter-chip",
|
|
693
|
+
"description": "Filter chips use tags or descriptive words to filter content.\nThey can be a good alternative to toggle buttons or checkboxes.\n@see https://m3.material.io/components/chips/specs\n---\n\n\n### **Events:**\n - **value-changing-content-attribute**\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\" disabled=\"{disabledState}\" aria-hidden=\"true\">{_defaultValue}</slot>\n\n### **CSS Parts:**\n - **control** - undefined",
|
|
694
|
+
"attributes": [
|
|
695
|
+
{ "name": "color", "values": [] },
|
|
696
|
+
{ "name": "ink", "values": [] },
|
|
697
|
+
{ "name": "type-style", "values": [] },
|
|
698
|
+
{ "name": "density", "values": [] },
|
|
699
|
+
{ "name": "disabled", "values": [] },
|
|
700
|
+
{ "name": "focused", "values": [] },
|
|
701
|
+
{ "name": "hovered", "values": [] },
|
|
702
|
+
{ "name": "pressed", "values": [] },
|
|
703
|
+
{ "name": "shape-top", "values": [] },
|
|
704
|
+
{ "name": "shape-bottom", "values": [] },
|
|
705
|
+
{ "name": "shape-start", "values": [] },
|
|
706
|
+
{ "name": "shape-end", "values": [] },
|
|
707
|
+
{ "name": "shape-style", "values": [] },
|
|
708
|
+
{ "name": "outlined", "values": [] },
|
|
709
|
+
{ "name": "aria-controls", "values": [] },
|
|
710
|
+
{ "name": "autocomplete", "values": [] },
|
|
711
|
+
{ "name": "name", "values": [] },
|
|
712
|
+
{ "name": "readonly", "values": [] },
|
|
713
|
+
{ "name": "formnovalidate", "values": [] },
|
|
714
|
+
{ "name": "checked", "values": [] },
|
|
715
|
+
{ "name": "required", "values": [] },
|
|
716
|
+
{
|
|
717
|
+
"name": "type",
|
|
718
|
+
"description": "Type of the chip; defaults to 'checkbox' for filter behavior.",
|
|
719
|
+
"values": []
|
|
720
|
+
},
|
|
721
|
+
{ "name": "value", "values": [] },
|
|
722
|
+
{ "name": "aria-label", "values": [] },
|
|
723
|
+
{ "name": "accept", "values": [] },
|
|
724
|
+
{ "name": "alt", "values": [] },
|
|
725
|
+
{ "name": "dirname", "values": [] },
|
|
726
|
+
{ "name": "formenctype", "values": [] },
|
|
727
|
+
{ "name": "formmethod", "values": [] },
|
|
728
|
+
{ "name": "formtarget", "values": [] },
|
|
729
|
+
{ "name": "max", "values": [] },
|
|
730
|
+
{ "name": "maxlength", "values": [] },
|
|
731
|
+
{ "name": "min", "values": [] },
|
|
732
|
+
{ "name": "minlength", "values": [] },
|
|
733
|
+
{ "name": "multiple", "values": [] },
|
|
734
|
+
{ "name": "pattern", "values": [] },
|
|
735
|
+
{ "name": "placeholder", "values": [] },
|
|
736
|
+
{ "name": "size", "values": [] },
|
|
737
|
+
{ "name": "src", "values": [] },
|
|
738
|
+
{ "name": "step", "values": [] },
|
|
739
|
+
{ "name": "indeterminate", "values": [] },
|
|
740
|
+
{ "name": "href", "values": [] },
|
|
741
|
+
{ "name": "target", "values": [] },
|
|
742
|
+
{ "name": "download", "values": [] },
|
|
743
|
+
{ "name": "ping", "values": [] },
|
|
744
|
+
{ "name": "rel", "values": [] },
|
|
745
|
+
{ "name": "hreflang", "values": [] },
|
|
746
|
+
{ "name": "referrerpolicy", "values": [] },
|
|
747
|
+
{ "name": "elevated", "values": [] },
|
|
748
|
+
{ "name": "filled", "values": [] },
|
|
749
|
+
{ "name": "icon", "values": [] },
|
|
750
|
+
{ "name": "icon-ink", "values": [] },
|
|
751
|
+
{ "name": "svg", "values": [] },
|
|
752
|
+
{ "name": "view-box", "values": [] },
|
|
753
|
+
{ "name": "svg-path", "values": [] },
|
|
754
|
+
{ "name": "suggestion", "values": [] },
|
|
755
|
+
{
|
|
756
|
+
"name": "dropdown",
|
|
757
|
+
"description": "When true, shows a dropdown caret as the trailing icon.",
|
|
758
|
+
"values": []
|
|
759
|
+
},
|
|
760
|
+
{
|
|
761
|
+
"name": "trailing-src",
|
|
762
|
+
"description": "Source URL for a trailing image/icon.",
|
|
763
|
+
"values": []
|
|
764
|
+
},
|
|
765
|
+
{
|
|
766
|
+
"name": "trailing-icon",
|
|
767
|
+
"description": "Name of the trailing icon to show.",
|
|
768
|
+
"values": []
|
|
769
|
+
},
|
|
770
|
+
{
|
|
771
|
+
"name": "state-layer",
|
|
772
|
+
"description": "Show the visual state layer element when true",
|
|
773
|
+
"values": []
|
|
774
|
+
}
|
|
775
|
+
],
|
|
776
|
+
"references": []
|
|
777
|
+
},
|
|
778
|
+
{
|
|
779
|
+
"name": "mdw-grid",
|
|
780
|
+
"description": "Grid layout for arranging content into responsive columns.\n@see https://m3.material.io/foundations/layout/understanding-layout/parts-of-layout\n---\n\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\" grid=\"{grid}\" flex=\"{_isFlex}\" columns=\"{_computedColumns}\"></slot>",
|
|
781
|
+
"attributes": [
|
|
782
|
+
{ "name": "color", "values": [] },
|
|
783
|
+
{ "name": "ink", "values": [] },
|
|
784
|
+
{ "name": "type-style", "values": [] },
|
|
785
|
+
{ "name": "block", "values": [] },
|
|
786
|
+
{ "name": "inline", "values": [] },
|
|
787
|
+
{ "name": "row", "values": [] },
|
|
788
|
+
{ "name": "x", "values": [] },
|
|
789
|
+
{ "name": "y", "values": [] },
|
|
790
|
+
{ "name": "gap", "values": [] },
|
|
791
|
+
{ "name": "padding", "values": [] },
|
|
792
|
+
{
|
|
793
|
+
"name": "grid",
|
|
794
|
+
"description": "Enable CSS grid layout for children.",
|
|
795
|
+
"values": []
|
|
796
|
+
},
|
|
797
|
+
{
|
|
798
|
+
"name": "columns",
|
|
799
|
+
"description": "Explicit number of columns; when set, disables auto column calculation.",
|
|
800
|
+
"values": []
|
|
801
|
+
}
|
|
802
|
+
],
|
|
803
|
+
"references": []
|
|
804
|
+
},
|
|
805
|
+
{
|
|
806
|
+
"name": "mdw-headline",
|
|
807
|
+
"description": "Material Design Type scale: Headline.\n@see https://m3.material.io/styles/typography/type-scale-tokens\n---\n\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\"></slot>",
|
|
808
|
+
"attributes": [
|
|
809
|
+
{ "name": "color", "values": [] },
|
|
810
|
+
{ "name": "ink", "values": [] },
|
|
811
|
+
{ "name": "type-style", "values": [] },
|
|
812
|
+
{ "name": "block", "values": [] },
|
|
813
|
+
{ "name": "inline", "values": [] },
|
|
814
|
+
{ "name": "row", "values": [] },
|
|
815
|
+
{ "name": "x", "values": [] },
|
|
816
|
+
{ "name": "y", "values": [] },
|
|
817
|
+
{ "name": "gap", "values": [] },
|
|
818
|
+
{ "name": "padding", "values": [] },
|
|
819
|
+
{ "name": "text-padding", "values": [] },
|
|
820
|
+
{ "name": "text-padding-top", "values": [] },
|
|
821
|
+
{ "name": "text-leading", "values": [] },
|
|
822
|
+
{ "name": "text-padding-bottom", "values": [] },
|
|
823
|
+
{ "name": "aria-level", "values": [] },
|
|
824
|
+
{ "name": "size", "values": [] }
|
|
825
|
+
],
|
|
826
|
+
"references": []
|
|
827
|
+
},
|
|
828
|
+
{
|
|
829
|
+
"name": "mdw-icon",
|
|
830
|
+
"description": "@typedef {'align'|'border'|'hspace'|'longDesc'|'lowsrc'|'name'|'vspace'} DeprecatedHTMLImageElementProperties\n---\n\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````",
|
|
831
|
+
"attributes": [
|
|
832
|
+
{ "name": "color", "values": [] },
|
|
833
|
+
{ "name": "ink", "values": [] },
|
|
834
|
+
{ "name": "type-style", "values": [] },
|
|
835
|
+
{
|
|
836
|
+
"name": "icon",
|
|
837
|
+
"description": "Icon name used with SVG aliases or font glyphs.",
|
|
838
|
+
"values": []
|
|
839
|
+
},
|
|
840
|
+
{
|
|
841
|
+
"name": "disabled",
|
|
842
|
+
"description": "Whether the icon is disabled; affects image appearance.",
|
|
843
|
+
"values": []
|
|
844
|
+
},
|
|
845
|
+
{
|
|
846
|
+
"name": "alt",
|
|
847
|
+
"description": "Alternative text for image-backed icons.",
|
|
848
|
+
"values": []
|
|
849
|
+
},
|
|
850
|
+
{
|
|
851
|
+
"name": "src",
|
|
852
|
+
"description": "Image source URL for an icon.",
|
|
853
|
+
"values": []
|
|
854
|
+
},
|
|
855
|
+
{
|
|
856
|
+
"name": "svg",
|
|
857
|
+
"description": "URL to an external SVG resource.",
|
|
858
|
+
"values": []
|
|
859
|
+
},
|
|
860
|
+
{
|
|
861
|
+
"name": "svg-path",
|
|
862
|
+
"description": "Inline SVG path data to render as the icon.",
|
|
863
|
+
"values": []
|
|
864
|
+
},
|
|
865
|
+
{
|
|
866
|
+
"name": "srcset",
|
|
867
|
+
"description": "Image `srcset` attribute for responsive icon images.",
|
|
868
|
+
"values": []
|
|
869
|
+
},
|
|
870
|
+
{
|
|
871
|
+
"name": "sizes",
|
|
872
|
+
"description": "Image `sizes` attribute for responsive icon images.",
|
|
873
|
+
"values": []
|
|
874
|
+
},
|
|
875
|
+
{
|
|
876
|
+
"name": "variation",
|
|
877
|
+
"description": "Variation suffix used when resolving icon aliases (e.g., 'filled').",
|
|
878
|
+
"values": []
|
|
879
|
+
},
|
|
880
|
+
{
|
|
881
|
+
"name": "crossorigin",
|
|
882
|
+
"description": "`crossorigin` attribute for image requests.",
|
|
883
|
+
"values": []
|
|
884
|
+
},
|
|
885
|
+
{
|
|
886
|
+
"name": "usemap",
|
|
887
|
+
"description": "`usemap` attribute for image maps.",
|
|
888
|
+
"values": []
|
|
889
|
+
},
|
|
890
|
+
{
|
|
891
|
+
"name": "ismap",
|
|
892
|
+
"description": "`ismap` boolean attribute for image maps.",
|
|
893
|
+
"values": []
|
|
894
|
+
},
|
|
895
|
+
{
|
|
896
|
+
"name": "referrerpolicy",
|
|
897
|
+
"description": "`referrerpolicy` attribute for image requests.",
|
|
898
|
+
"values": []
|
|
899
|
+
},
|
|
900
|
+
{
|
|
901
|
+
"name": "decoding",
|
|
902
|
+
"description": "Preferred image decoding mode: 'async' | 'sync' | 'auto'.",
|
|
903
|
+
"values": []
|
|
904
|
+
},
|
|
905
|
+
{
|
|
906
|
+
"name": "loading",
|
|
907
|
+
"description": "Image loading hint: 'eager' | 'lazy'.",
|
|
908
|
+
"values": []
|
|
909
|
+
},
|
|
910
|
+
{
|
|
911
|
+
"name": "width",
|
|
912
|
+
"description": "Rendered width in CSS pixels.",
|
|
913
|
+
"values": []
|
|
914
|
+
},
|
|
915
|
+
{
|
|
916
|
+
"name": "height",
|
|
917
|
+
"description": "Rendered height in CSS pixels.",
|
|
918
|
+
"values": []
|
|
919
|
+
},
|
|
920
|
+
{
|
|
921
|
+
"name": "force-font",
|
|
922
|
+
"description": "Force using font glyphs instead of SVG when true.",
|
|
923
|
+
"values": []
|
|
924
|
+
},
|
|
925
|
+
{
|
|
926
|
+
"name": "view-box",
|
|
927
|
+
"description": "viewBox used for SVG rendering.",
|
|
928
|
+
"values": []
|
|
929
|
+
},
|
|
930
|
+
{
|
|
931
|
+
"name": "font-class",
|
|
932
|
+
"description": "CSS class applied to font-based icons.",
|
|
933
|
+
"values": []
|
|
934
|
+
},
|
|
935
|
+
{
|
|
936
|
+
"name": "font-library",
|
|
937
|
+
"description": "URL to Material Symbols CSS when using font-based icons.",
|
|
938
|
+
"values": []
|
|
939
|
+
}
|
|
940
|
+
],
|
|
941
|
+
"references": []
|
|
942
|
+
},
|
|
943
|
+
{
|
|
944
|
+
"name": "mdw-icon-button",
|
|
945
|
+
"description": "Icon buttons are compact buttons that use an icon to represent an action.\n@see https://m3.material.io/components/icon-buttons/specs\n---\n\n\n### **Events:**\n - **value-changing-content-attribute**\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\" disabled=\"{disabledState}\" aria-hidden=\"true\">{_defaultValue}</slot>\n\n### **CSS Parts:**\n - **control** - undefined",
|
|
946
|
+
"attributes": [
|
|
947
|
+
{ "name": "color", "values": [] },
|
|
948
|
+
{ "name": "ink", "values": [] },
|
|
949
|
+
{ "name": "type-style", "values": [] },
|
|
950
|
+
{ "name": "density", "values": [] },
|
|
951
|
+
{ "name": "disabled", "values": [] },
|
|
952
|
+
{ "name": "focused", "values": [] },
|
|
953
|
+
{ "name": "hovered", "values": [] },
|
|
954
|
+
{ "name": "pressed", "values": [] },
|
|
955
|
+
{ "name": "shape-top", "values": [] },
|
|
956
|
+
{ "name": "shape-bottom", "values": [] },
|
|
957
|
+
{ "name": "shape-start", "values": [] },
|
|
958
|
+
{ "name": "shape-end", "values": [] },
|
|
959
|
+
{ "name": "shape-style", "values": [] },
|
|
960
|
+
{ "name": "outlined", "values": [] },
|
|
961
|
+
{ "name": "aria-controls", "values": [] },
|
|
962
|
+
{ "name": "autocomplete", "values": [] },
|
|
963
|
+
{ "name": "name", "values": [] },
|
|
964
|
+
{ "name": "readonly", "values": [] },
|
|
965
|
+
{ "name": "formnovalidate", "values": [] },
|
|
966
|
+
{ "name": "checked", "values": [] },
|
|
967
|
+
{ "name": "required", "values": [] },
|
|
968
|
+
{ "name": "type", "values": [] },
|
|
969
|
+
{ "name": "value", "values": [] },
|
|
970
|
+
{ "name": "aria-label", "values": [] },
|
|
971
|
+
{ "name": "accept", "values": [] },
|
|
972
|
+
{ "name": "alt", "values": [] },
|
|
973
|
+
{ "name": "dirname", "values": [] },
|
|
974
|
+
{ "name": "formenctype", "values": [] },
|
|
975
|
+
{ "name": "formmethod", "values": [] },
|
|
976
|
+
{ "name": "formtarget", "values": [] },
|
|
977
|
+
{ "name": "max", "values": [] },
|
|
978
|
+
{ "name": "maxlength", "values": [] },
|
|
979
|
+
{ "name": "min", "values": [] },
|
|
980
|
+
{ "name": "minlength", "values": [] },
|
|
981
|
+
{ "name": "multiple", "values": [] },
|
|
982
|
+
{ "name": "pattern", "values": [] },
|
|
983
|
+
{ "name": "placeholder", "values": [] },
|
|
984
|
+
{ "name": "size", "values": [] },
|
|
985
|
+
{ "name": "src", "values": [] },
|
|
986
|
+
{ "name": "step", "values": [] },
|
|
987
|
+
{ "name": "indeterminate", "values": [] },
|
|
988
|
+
{ "name": "href", "values": [] },
|
|
989
|
+
{ "name": "target", "values": [] },
|
|
990
|
+
{ "name": "download", "values": [] },
|
|
991
|
+
{ "name": "ping", "values": [] },
|
|
992
|
+
{ "name": "rel", "values": [] },
|
|
993
|
+
{ "name": "hreflang", "values": [] },
|
|
994
|
+
{ "name": "referrerpolicy", "values": [] },
|
|
995
|
+
{ "name": "elevated", "values": [] },
|
|
996
|
+
{ "name": "filled", "values": [] },
|
|
997
|
+
{ "name": "icon", "values": [] },
|
|
998
|
+
{ "name": "icon-ink", "values": [] },
|
|
999
|
+
{ "name": "svg", "values": [] },
|
|
1000
|
+
{ "name": "view-box", "values": [] },
|
|
1001
|
+
{ "name": "svg-path", "values": [] },
|
|
1002
|
+
{ "name": "tooltip", "values": [] },
|
|
1003
|
+
{
|
|
1004
|
+
"name": "auto-tooltip",
|
|
1005
|
+
"description": "When present, enables automatic tooltip behavior from the mixin.",
|
|
1006
|
+
"values": []
|
|
1007
|
+
},
|
|
1008
|
+
{
|
|
1009
|
+
"name": "state-layer",
|
|
1010
|
+
"description": "Show the visual state layer element when true",
|
|
1011
|
+
"values": []
|
|
1012
|
+
}
|
|
1013
|
+
],
|
|
1014
|
+
"references": []
|
|
1015
|
+
},
|
|
1016
|
+
{
|
|
1017
|
+
"name": "mdw-input",
|
|
1018
|
+
"description": "@typedef {import('./Listbox.js').default} Listbox\n---\n\n\n### **Events:**\n - **resize-observed**\n- **value-changing-content-attribute**\n- **listbox-click**\n- **listbox-change**\n- **popup-focusout**\n- **chip-close**\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - **supporting** - <slot id=\"supporting-slot\" name=\"supporting\"></slot>\n- _default_ - <slot id=\"slot\"></slot>\n\n### **CSS Parts:**\n - **control** - undefined",
|
|
1019
|
+
"attributes": [
|
|
1020
|
+
{ "name": "color", "values": [] },
|
|
1021
|
+
{ "name": "ink", "values": [] },
|
|
1022
|
+
{ "name": "type-style", "values": [] },
|
|
1023
|
+
{ "name": "disabled", "values": [] },
|
|
1024
|
+
{ "name": "focused", "values": [] },
|
|
1025
|
+
{ "name": "hovered", "values": [] },
|
|
1026
|
+
{ "name": "pressed", "values": [] },
|
|
1027
|
+
{ "name": "aria-controls", "values": [] },
|
|
1028
|
+
{ "name": "autocomplete", "values": [] },
|
|
1029
|
+
{ "name": "name", "values": [] },
|
|
1030
|
+
{ "name": "readonly", "values": [] },
|
|
1031
|
+
{ "name": "formnovalidate", "values": [] },
|
|
1032
|
+
{ "name": "checked", "values": [] },
|
|
1033
|
+
{ "name": "required", "values": [] },
|
|
1034
|
+
{ "name": "type", "values": [{ "name": "array" }] },
|
|
1035
|
+
{ "name": "value", "values": [] },
|
|
1036
|
+
{ "name": "aria-label", "values": [] },
|
|
1037
|
+
{ "name": "accept", "values": [] },
|
|
1038
|
+
{ "name": "alt", "values": [] },
|
|
1039
|
+
{ "name": "dirname", "values": [] },
|
|
1040
|
+
{ "name": "formenctype", "values": [] },
|
|
1041
|
+
{ "name": "formmethod", "values": [] },
|
|
1042
|
+
{ "name": "formtarget", "values": [] },
|
|
1043
|
+
{ "name": "max", "values": [] },
|
|
1044
|
+
{ "name": "maxlength", "values": [] },
|
|
1045
|
+
{ "name": "min", "values": [] },
|
|
1046
|
+
{ "name": "minlength", "values": [] },
|
|
1047
|
+
{ "name": "multiple", "values": [] },
|
|
1048
|
+
{ "name": "pattern", "values": [] },
|
|
1049
|
+
{ "name": "placeholder", "values": [] },
|
|
1050
|
+
{ "name": "size", "values": [] },
|
|
1051
|
+
{ "name": "src", "values": [] },
|
|
1052
|
+
{ "name": "step", "values": [] },
|
|
1053
|
+
{ "name": "indeterminate", "values": [] },
|
|
1054
|
+
{ "name": "density", "values": [] },
|
|
1055
|
+
{ "name": "shape-top", "values": [] },
|
|
1056
|
+
{ "name": "shape-bottom", "values": [] },
|
|
1057
|
+
{ "name": "shape-start", "values": [] },
|
|
1058
|
+
{ "name": "shape-end", "values": [] },
|
|
1059
|
+
{ "name": "shape-style", "values": [] },
|
|
1060
|
+
{ "name": "outlined", "values": [] },
|
|
1061
|
+
{ "name": "icon", "values": [] },
|
|
1062
|
+
{ "name": "icon-variation", "values": [] },
|
|
1063
|
+
{ "name": "label", "values": [] },
|
|
1064
|
+
{ "name": "filled", "values": [] },
|
|
1065
|
+
{ "name": "input-prefix", "values": [] },
|
|
1066
|
+
{ "name": "input-suffix", "values": [] },
|
|
1067
|
+
{ "name": "trailing-icon", "values": [] },
|
|
1068
|
+
{ "name": "trailing-icon-ink", "values": [] },
|
|
1069
|
+
{ "name": "trailing-icon-label", "values": [] },
|
|
1070
|
+
{ "name": "supporting", "values": [] },
|
|
1071
|
+
{ "name": "error", "values": [] },
|
|
1072
|
+
{
|
|
1073
|
+
"name": "autocomplete-inline",
|
|
1074
|
+
"description": "When true, the component inserts the best suggestion into the input field\nas inline text. The appended portion of the suggestion is selected so the\nuser can accept it (e.g. press Enter) or continue typing to replace it.\nTypically combined with `autosuggestInline` to display candidates while\ntyping.",
|
|
1075
|
+
"values": []
|
|
1076
|
+
},
|
|
1077
|
+
{
|
|
1078
|
+
"name": "autocomplete-list",
|
|
1079
|
+
"description": "When set and not `'custom'`, `applyAutocompleteList()` filters the\nlistbox options to items that start * with the typed text. This controls\ndropdown filtering but does not itself cause inline insertion.",
|
|
1080
|
+
"values": []
|
|
1081
|
+
},
|
|
1082
|
+
{
|
|
1083
|
+
"name": "autosuggest-inline",
|
|
1084
|
+
"description": "When true, the component advances/searches suggestion candidates as the\nuser types (calls `changeSuggestion({ startsWith })`). If\n`autosuggestInline` is true and `autocompleteInline` is also true the\ncurrent candidate will be shown inline; if `autocompleteInline` is false\nonly the candidate selection changes (no inline text insertion).",
|
|
1085
|
+
"values": []
|
|
1086
|
+
},
|
|
1087
|
+
{
|
|
1088
|
+
"name": "auto-select",
|
|
1089
|
+
"description": "If true, when listbox is open, arrow navigation will automatically select options.",
|
|
1090
|
+
"values": []
|
|
1091
|
+
},
|
|
1092
|
+
{
|
|
1093
|
+
"name": "accept-on-escape",
|
|
1094
|
+
"description": "If true, when listbox is open, <Esc> accepts current suggestion (same as Enter).",
|
|
1095
|
+
"values": []
|
|
1096
|
+
},
|
|
1097
|
+
{
|
|
1098
|
+
"name": "state-layer",
|
|
1099
|
+
"description": "Show the visual state layer element when true",
|
|
1100
|
+
"values": []
|
|
1101
|
+
}
|
|
1102
|
+
],
|
|
1103
|
+
"references": []
|
|
1104
|
+
},
|
|
1105
|
+
{
|
|
1106
|
+
"name": "mdw-input-chip",
|
|
1107
|
+
"description": "Input chips allow users to enter or edit information as a chip (tag-like).\n@see https://m3.material.io/components/chips/specs\n---\n\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\" disabled=\"{disabled}\"></slot>",
|
|
1108
|
+
"attributes": [
|
|
1109
|
+
{ "name": "color", "values": [] },
|
|
1110
|
+
{ "name": "ink", "values": [] },
|
|
1111
|
+
{ "name": "type-style", "values": [] },
|
|
1112
|
+
{ "name": "block", "values": [] },
|
|
1113
|
+
{ "name": "inline", "values": [] },
|
|
1114
|
+
{ "name": "row", "values": [] },
|
|
1115
|
+
{ "name": "x", "values": [] },
|
|
1116
|
+
{ "name": "y", "values": [] },
|
|
1117
|
+
{ "name": "gap", "values": [] },
|
|
1118
|
+
{ "name": "padding", "values": [] },
|
|
1119
|
+
{ "name": "shape-top", "values": [] },
|
|
1120
|
+
{ "name": "shape-bottom", "values": [] },
|
|
1121
|
+
{ "name": "shape-start", "values": [] },
|
|
1122
|
+
{ "name": "shape-end", "values": [] },
|
|
1123
|
+
{ "name": "shape-style", "values": [] },
|
|
1124
|
+
{ "name": "href", "values": [] },
|
|
1125
|
+
{ "name": "target", "values": [] },
|
|
1126
|
+
{ "name": "download", "values": [] },
|
|
1127
|
+
{ "name": "ping", "values": [] },
|
|
1128
|
+
{ "name": "rel", "values": [] },
|
|
1129
|
+
{ "name": "hreflang", "values": [] },
|
|
1130
|
+
{ "name": "referrerpolicy", "values": [] },
|
|
1131
|
+
{
|
|
1132
|
+
"name": "avatar",
|
|
1133
|
+
"description": "Render the chip in avatar (larger) style.",
|
|
1134
|
+
"values": []
|
|
1135
|
+
},
|
|
1136
|
+
{
|
|
1137
|
+
"name": "close-button",
|
|
1138
|
+
"description": "Show a close action button inside the chip.",
|
|
1139
|
+
"values": []
|
|
1140
|
+
},
|
|
1141
|
+
{
|
|
1142
|
+
"name": "close-icon",
|
|
1143
|
+
"description": "Icon name to use for the close button (default: 'close').",
|
|
1144
|
+
"values": []
|
|
1145
|
+
},
|
|
1146
|
+
{
|
|
1147
|
+
"name": "close-ink",
|
|
1148
|
+
"description": "Ink color used for the close icon (default: inherit).",
|
|
1149
|
+
"values": []
|
|
1150
|
+
},
|
|
1151
|
+
{
|
|
1152
|
+
"name": "readonly",
|
|
1153
|
+
"description": "Reflects the `readonly` attribute; prevents editing/closing when true.",
|
|
1154
|
+
"values": []
|
|
1155
|
+
},
|
|
1156
|
+
{
|
|
1157
|
+
"name": "disabled",
|
|
1158
|
+
"description": "Whether the chip is disabled.",
|
|
1159
|
+
"values": []
|
|
1160
|
+
},
|
|
1161
|
+
{
|
|
1162
|
+
"name": "icon",
|
|
1163
|
+
"description": "Leading icon name for the chip.",
|
|
1164
|
+
"values": []
|
|
1165
|
+
},
|
|
1166
|
+
{
|
|
1167
|
+
"name": "icon-ink",
|
|
1168
|
+
"description": "Ink color for the leading icon.",
|
|
1169
|
+
"values": []
|
|
1170
|
+
},
|
|
1171
|
+
{
|
|
1172
|
+
"name": "src",
|
|
1173
|
+
"description": "Image `src` for an avatar or image-backed icon.",
|
|
1174
|
+
"values": []
|
|
1175
|
+
},
|
|
1176
|
+
{
|
|
1177
|
+
"name": "svg",
|
|
1178
|
+
"description": "External SVG URL to render as the icon.",
|
|
1179
|
+
"values": []
|
|
1180
|
+
},
|
|
1181
|
+
{
|
|
1182
|
+
"name": "view-box",
|
|
1183
|
+
"description": "SVG `viewBox` used for inline SVG rendering.",
|
|
1184
|
+
"values": []
|
|
1185
|
+
},
|
|
1186
|
+
{
|
|
1187
|
+
"name": "svg-path",
|
|
1188
|
+
"description": "SVG path data to render as the icon.",
|
|
1189
|
+
"values": []
|
|
1190
|
+
},
|
|
1191
|
+
{
|
|
1192
|
+
"name": "onclose",
|
|
1193
|
+
"description": "Event handler/callback for the `close` event.",
|
|
1194
|
+
"values": [{ "name": "function" }]
|
|
1195
|
+
},
|
|
1196
|
+
{
|
|
1197
|
+
"name": "selected",
|
|
1198
|
+
"description": "Selection state used by chip-selection patterns.",
|
|
1199
|
+
"values": []
|
|
1200
|
+
},
|
|
1201
|
+
{
|
|
1202
|
+
"name": "outlined",
|
|
1203
|
+
"description": "When true, an outline is rendered around the element",
|
|
1204
|
+
"values": []
|
|
1205
|
+
}
|
|
1206
|
+
],
|
|
1207
|
+
"references": []
|
|
1208
|
+
},
|
|
1209
|
+
{
|
|
1210
|
+
"name": "mdw-label",
|
|
1211
|
+
"description": "Material Design Type scale: Label.\n@see https://m3.material.io/styles/typography/type-scale-tokens\n---\n\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\"></slot>",
|
|
1212
|
+
"attributes": [
|
|
1213
|
+
{ "name": "color", "values": [] },
|
|
1214
|
+
{ "name": "ink", "values": [] },
|
|
1215
|
+
{ "name": "type-style", "values": [] },
|
|
1216
|
+
{ "name": "block", "values": [] },
|
|
1217
|
+
{ "name": "inline", "values": [] },
|
|
1218
|
+
{ "name": "row", "values": [] },
|
|
1219
|
+
{ "name": "x", "values": [] },
|
|
1220
|
+
{ "name": "y", "values": [] },
|
|
1221
|
+
{ "name": "gap", "values": [] },
|
|
1222
|
+
{ "name": "padding", "values": [] },
|
|
1223
|
+
{ "name": "text-padding", "values": [] },
|
|
1224
|
+
{ "name": "text-padding-top", "values": [] },
|
|
1225
|
+
{ "name": "text-leading", "values": [] },
|
|
1226
|
+
{ "name": "text-padding-bottom", "values": [] }
|
|
1227
|
+
],
|
|
1228
|
+
"references": []
|
|
1229
|
+
},
|
|
1230
|
+
{
|
|
1231
|
+
"name": "mdw-list",
|
|
1232
|
+
"description": "@typedef {'compact'} DeprecatedHTMLMenuElementProperties\n---\n\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\"></slot>",
|
|
1233
|
+
"attributes": [
|
|
1234
|
+
{ "name": "ink", "values": [] },
|
|
1235
|
+
{ "name": "type-style", "values": [] },
|
|
1236
|
+
{ "name": "block", "values": [] },
|
|
1237
|
+
{ "name": "inline", "values": [] },
|
|
1238
|
+
{ "name": "row", "values": [] },
|
|
1239
|
+
{ "name": "x", "values": [] },
|
|
1240
|
+
{ "name": "y", "values": [] },
|
|
1241
|
+
{ "name": "gap", "values": [] },
|
|
1242
|
+
{ "name": "padding", "values": [] },
|
|
1243
|
+
{ "name": "density", "values": [] },
|
|
1244
|
+
{ "name": "color", "values": [] }
|
|
1245
|
+
],
|
|
1246
|
+
"references": []
|
|
1247
|
+
},
|
|
1248
|
+
{
|
|
1249
|
+
"name": "mdw-list-item",
|
|
1250
|
+
"description": "List item representing a single row in a list; supports leading/trailing\ncontent, selection, and accessibility features.\n@see https://m3.material.io/components/lists/specs\n---\n\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - **leading** - <slot name=\"leading\">{leading}</slot>\n- _default_ - <slot id=\"slot\"></slot>\n- **supporting** - <slot id=\"supporting\" name=\"supporting\" class=\"text\" lines=\"{lines}\">{supporting}</slot>\n- **trailing** - <slot id=\"trailing\" name=\"trailing\" role=\"note\">{trailing}</slot>",
|
|
1251
|
+
"attributes": [
|
|
1252
|
+
{ "name": "color", "values": [] },
|
|
1253
|
+
{ "name": "ink", "values": [] },
|
|
1254
|
+
{ "name": "type-style", "values": [] },
|
|
1255
|
+
{ "name": "disabled", "values": [] },
|
|
1256
|
+
{ "name": "focused", "values": [] },
|
|
1257
|
+
{ "name": "hovered", "values": [] },
|
|
1258
|
+
{ "name": "pressed", "values": [] },
|
|
1259
|
+
{ "name": "href", "values": [] },
|
|
1260
|
+
{ "name": "target", "values": [] },
|
|
1261
|
+
{ "name": "download", "values": [] },
|
|
1262
|
+
{ "name": "ping", "values": [] },
|
|
1263
|
+
{ "name": "rel", "values": [] },
|
|
1264
|
+
{ "name": "hreflang", "values": [] },
|
|
1265
|
+
{ "name": "referrerpolicy", "values": [] },
|
|
1266
|
+
{
|
|
1267
|
+
"name": "leading",
|
|
1268
|
+
"description": "Leading slot content or shorthand string.",
|
|
1269
|
+
"values": []
|
|
1270
|
+
},
|
|
1271
|
+
{
|
|
1272
|
+
"name": "avatar",
|
|
1273
|
+
"description": "Avatar label or shorthand content for a leading avatar.",
|
|
1274
|
+
"values": []
|
|
1275
|
+
},
|
|
1276
|
+
{
|
|
1277
|
+
"name": "avatar-color",
|
|
1278
|
+
"description": "Color token used for the avatar container (default: primary-container).",
|
|
1279
|
+
"values": []
|
|
1280
|
+
},
|
|
1281
|
+
{
|
|
1282
|
+
"name": "avatar-src",
|
|
1283
|
+
"description": "Image source for the avatar.",
|
|
1284
|
+
"values": []
|
|
1285
|
+
},
|
|
1286
|
+
{
|
|
1287
|
+
"name": "src",
|
|
1288
|
+
"description": "Image source URL for a leading image in the list item.",
|
|
1289
|
+
"values": []
|
|
1290
|
+
},
|
|
1291
|
+
{
|
|
1292
|
+
"name": "alt",
|
|
1293
|
+
"description": "Alt text for the leading image.",
|
|
1294
|
+
"values": []
|
|
1295
|
+
},
|
|
1296
|
+
{
|
|
1297
|
+
"name": "icon",
|
|
1298
|
+
"description": "Icon name for a leading icon.",
|
|
1299
|
+
"values": []
|
|
1300
|
+
},
|
|
1301
|
+
{
|
|
1302
|
+
"name": "icon-ink",
|
|
1303
|
+
"description": "Ink/color token used for the leading icon.",
|
|
1304
|
+
"values": []
|
|
1305
|
+
},
|
|
1306
|
+
{
|
|
1307
|
+
"name": "icon-src",
|
|
1308
|
+
"description": "External image/SVG source for the leading icon.",
|
|
1309
|
+
"values": []
|
|
1310
|
+
},
|
|
1311
|
+
{
|
|
1312
|
+
"name": "icon-variation",
|
|
1313
|
+
"description": "Icon variation (e.g., 'filled').",
|
|
1314
|
+
"values": []
|
|
1315
|
+
},
|
|
1316
|
+
{
|
|
1317
|
+
"name": "checkbox",
|
|
1318
|
+
"description": "Checkbox shorthand name or placement class for a selectable leading checkbox.",
|
|
1319
|
+
"values": []
|
|
1320
|
+
},
|
|
1321
|
+
{
|
|
1322
|
+
"name": "radio",
|
|
1323
|
+
"description": "Radio shorthand name or placement class for a selectable leading radio.",
|
|
1324
|
+
"values": []
|
|
1325
|
+
},
|
|
1326
|
+
{
|
|
1327
|
+
"name": "selection-color",
|
|
1328
|
+
"description": "Selection color token used when item is selected (default: primary).",
|
|
1329
|
+
"values": []
|
|
1330
|
+
},
|
|
1331
|
+
{
|
|
1332
|
+
"name": "selected",
|
|
1333
|
+
"description": "Selection state for the item.",
|
|
1334
|
+
"values": []
|
|
1335
|
+
},
|
|
1336
|
+
{ "name": "supporting", "values": [] },
|
|
1337
|
+
{
|
|
1338
|
+
"name": "trailing",
|
|
1339
|
+
"description": "Trailing text slot or shorthand.",
|
|
1340
|
+
"values": []
|
|
1341
|
+
},
|
|
1342
|
+
{
|
|
1343
|
+
"name": "trailing-icon",
|
|
1344
|
+
"description": "Trailing icon name.",
|
|
1345
|
+
"values": []
|
|
1346
|
+
},
|
|
1347
|
+
{
|
|
1348
|
+
"name": "trailing-icon-ink",
|
|
1349
|
+
"description": "Ink/color token for the trailing icon.",
|
|
1350
|
+
"values": []
|
|
1351
|
+
},
|
|
1352
|
+
{
|
|
1353
|
+
"name": "trailing-icon-src",
|
|
1354
|
+
"description": "External image/SVG source for the trailing icon.",
|
|
1355
|
+
"values": []
|
|
1356
|
+
},
|
|
1357
|
+
{
|
|
1358
|
+
"name": "divider",
|
|
1359
|
+
"description": "Divider style identifier (e.g., 'inset').",
|
|
1360
|
+
"values": []
|
|
1361
|
+
},
|
|
1362
|
+
{
|
|
1363
|
+
"name": "video",
|
|
1364
|
+
"description": "If true, indicates the list item contains video content and adjusts layout.",
|
|
1365
|
+
"values": []
|
|
1366
|
+
},
|
|
1367
|
+
{
|
|
1368
|
+
"name": "lines",
|
|
1369
|
+
"description": "Number of text lines the item should reserve for content (integer).",
|
|
1370
|
+
"values": []
|
|
1371
|
+
},
|
|
1372
|
+
{
|
|
1373
|
+
"name": "state-layer",
|
|
1374
|
+
"description": "Show the visual state layer element when true",
|
|
1375
|
+
"values": []
|
|
1376
|
+
}
|
|
1377
|
+
],
|
|
1378
|
+
"references": []
|
|
1379
|
+
},
|
|
1380
|
+
{
|
|
1381
|
+
"name": "mdw-list-option",
|
|
1382
|
+
"description": "List options represent selectable choices within a `mdw-listbox` or list.\n@see https://m3.material.io/components/lists/specs\n---\n\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - **leading** - <slot name=\"leading\">{leading}</slot>\n- _default_ - <slot id=\"slot\"></slot>\n- **supporting** - <slot id=\"supporting\" name=\"supporting\" class=\"text\" lines=\"{lines}\">{supporting}</slot>\n- **trailing** - <slot id=\"trailing\" name=\"trailing\" role=\"note\">{trailing}</slot>",
|
|
1383
|
+
"attributes": [
|
|
1384
|
+
{ "name": "color", "values": [] },
|
|
1385
|
+
{ "name": "ink", "values": [] },
|
|
1386
|
+
{ "name": "type-style", "values": [] },
|
|
1387
|
+
{ "name": "disabled", "values": [] },
|
|
1388
|
+
{ "name": "focused", "values": [] },
|
|
1389
|
+
{ "name": "hovered", "values": [] },
|
|
1390
|
+
{ "name": "pressed", "values": [] },
|
|
1391
|
+
{ "name": "href", "values": [] },
|
|
1392
|
+
{ "name": "target", "values": [] },
|
|
1393
|
+
{ "name": "download", "values": [] },
|
|
1394
|
+
{ "name": "ping", "values": [] },
|
|
1395
|
+
{ "name": "rel", "values": [] },
|
|
1396
|
+
{ "name": "hreflang", "values": [] },
|
|
1397
|
+
{ "name": "referrerpolicy", "values": [] },
|
|
1398
|
+
{ "name": "leading", "values": [] },
|
|
1399
|
+
{ "name": "avatar", "values": [] },
|
|
1400
|
+
{ "name": "avatar-color", "values": [] },
|
|
1401
|
+
{ "name": "avatar-src", "values": [] },
|
|
1402
|
+
{ "name": "src", "values": [] },
|
|
1403
|
+
{ "name": "alt", "values": [] },
|
|
1404
|
+
{ "name": "icon", "values": [] },
|
|
1405
|
+
{ "name": "icon-ink", "values": [] },
|
|
1406
|
+
{ "name": "icon-src", "values": [] },
|
|
1407
|
+
{ "name": "icon-variation", "values": [] },
|
|
1408
|
+
{ "name": "checkbox", "values": [] },
|
|
1409
|
+
{ "name": "radio", "values": [] },
|
|
1410
|
+
{ "name": "selection-color", "values": [] },
|
|
1411
|
+
{
|
|
1412
|
+
"name": "selected",
|
|
1413
|
+
"description": "Initial/default selection state (reflected to `selected` attribute).\nUse `selected` property to control runtime selection.",
|
|
1414
|
+
"values": []
|
|
1415
|
+
},
|
|
1416
|
+
{ "name": "supporting", "values": [] },
|
|
1417
|
+
{ "name": "trailing", "values": [] },
|
|
1418
|
+
{ "name": "trailing-icon", "values": [] },
|
|
1419
|
+
{ "name": "trailing-icon-ink", "values": [] },
|
|
1420
|
+
{ "name": "trailing-icon-src", "values": [] },
|
|
1421
|
+
{ "name": "divider", "values": [] },
|
|
1422
|
+
{ "name": "video", "values": [] },
|
|
1423
|
+
{ "name": "lines", "values": [{ "name": "integer" }] },
|
|
1424
|
+
{
|
|
1425
|
+
"name": "label",
|
|
1426
|
+
"description": "Explicit label for accessibility. Reflected to attribute `label`.\nFalls back to `textContent` when not provided.",
|
|
1427
|
+
"values": []
|
|
1428
|
+
},
|
|
1429
|
+
{
|
|
1430
|
+
"name": "text",
|
|
1431
|
+
"description": "Explicit text content for the option. Reflected to attribute `text`.",
|
|
1432
|
+
"values": []
|
|
1433
|
+
},
|
|
1434
|
+
{
|
|
1435
|
+
"name": "value",
|
|
1436
|
+
"description": "Underlying option value (reflected to `value` attribute). Defaults to\nthe option's text content when not provided.",
|
|
1437
|
+
"values": []
|
|
1438
|
+
},
|
|
1439
|
+
{
|
|
1440
|
+
"name": "state-layer",
|
|
1441
|
+
"description": "Show the visual state layer element when true",
|
|
1442
|
+
"values": []
|
|
1443
|
+
}
|
|
1444
|
+
],
|
|
1445
|
+
"references": []
|
|
1446
|
+
},
|
|
1447
|
+
{
|
|
1448
|
+
"name": "mdw-listbox",
|
|
1449
|
+
"description": "Listbox: a selectable list of options, used for autocompletes and selects.\nimplements {HTMLSelectElement}\n@see https://m3.material.io/components/lists/specs\n---\n\n\n### **Events:**\n - **listbox-click**\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\"></slot>",
|
|
1450
|
+
"attributes": [
|
|
1451
|
+
{ "name": "ink", "values": [] },
|
|
1452
|
+
{ "name": "type-style", "values": [] },
|
|
1453
|
+
{ "name": "block", "values": [] },
|
|
1454
|
+
{ "name": "inline", "values": [] },
|
|
1455
|
+
{ "name": "row", "values": [] },
|
|
1456
|
+
{ "name": "x", "values": [] },
|
|
1457
|
+
{ "name": "y", "values": [] },
|
|
1458
|
+
{ "name": "gap", "values": [] },
|
|
1459
|
+
{ "name": "padding", "values": [] },
|
|
1460
|
+
{ "name": "density", "values": [] },
|
|
1461
|
+
{ "name": "disabled", "values": [] },
|
|
1462
|
+
{ "name": "focused", "values": [] },
|
|
1463
|
+
{ "name": "hovered", "values": [] },
|
|
1464
|
+
{ "name": "pressed", "values": [] },
|
|
1465
|
+
{ "name": "state-layer", "values": [] },
|
|
1466
|
+
{ "name": "aria-controls", "values": [] },
|
|
1467
|
+
{ "name": "autocomplete", "values": [] },
|
|
1468
|
+
{ "name": "name", "values": [] },
|
|
1469
|
+
{ "name": "readonly", "values": [] },
|
|
1470
|
+
{ "name": "formnovalidate", "values": [] },
|
|
1471
|
+
{ "name": "checked", "values": [] },
|
|
1472
|
+
{ "name": "required", "values": [] },
|
|
1473
|
+
{ "name": "value", "values": [] },
|
|
1474
|
+
{ "name": "kbd-nav", "values": [] },
|
|
1475
|
+
{
|
|
1476
|
+
"name": "multiple",
|
|
1477
|
+
"description": "When true, multiple options may be selected (select-multiple semantics).",
|
|
1478
|
+
"values": []
|
|
1479
|
+
},
|
|
1480
|
+
{
|
|
1481
|
+
"name": "size",
|
|
1482
|
+
"description": "Visible size (number of rows) for the listbox; 0 means auto.",
|
|
1483
|
+
"values": []
|
|
1484
|
+
},
|
|
1485
|
+
{ "name": "type", "values": [] },
|
|
1486
|
+
{ "name": "color", "values": [] }
|
|
1487
|
+
],
|
|
1488
|
+
"references": []
|
|
1489
|
+
},
|
|
1490
|
+
{
|
|
1491
|
+
"name": "mdw-menu",
|
|
1492
|
+
"description": "Menus provide a list of choices or actions in a temporary surface.\n@see https://m3.material.io/components/menus/specs\n@see https://www.w3.org/TR/wai-aria-practices/#menu\n---\n\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\" on-slotchange=\"{onSlotChange}\"></slot>",
|
|
1493
|
+
"attributes": [
|
|
1494
|
+
{ "name": "color", "values": [] },
|
|
1495
|
+
{ "name": "ink", "values": [] },
|
|
1496
|
+
{ "name": "type-style", "values": [] },
|
|
1497
|
+
{ "name": "shape-top", "values": [] },
|
|
1498
|
+
{ "name": "shape-bottom", "values": [] },
|
|
1499
|
+
{ "name": "shape-start", "values": [] },
|
|
1500
|
+
{ "name": "shape-end", "values": [] },
|
|
1501
|
+
{ "name": "shape-style", "values": [] },
|
|
1502
|
+
{ "name": "outlined", "values": [] },
|
|
1503
|
+
{ "name": "open", "values": [] },
|
|
1504
|
+
{ "name": "modal", "values": [] },
|
|
1505
|
+
{ "name": "native", "values": [] },
|
|
1506
|
+
{ "name": "scrollable", "values": [] },
|
|
1507
|
+
{ "name": "match-source-width", "values": [] },
|
|
1508
|
+
{ "name": "popup-margin", "values": [] },
|
|
1509
|
+
{ "name": "density", "values": [] },
|
|
1510
|
+
{ "name": "kbd-nav", "values": [] },
|
|
1511
|
+
{ "name": "flow", "values": [] }
|
|
1512
|
+
],
|
|
1513
|
+
"references": []
|
|
1514
|
+
},
|
|
1515
|
+
{
|
|
1516
|
+
"name": "mdw-menu-item",
|
|
1517
|
+
"description": "Menu items represent selectable options within a menu. They can trigger\nactions, toggle state, or open nested submenus.\n@see https://m3.material.io/components/menus/specs\n---\n\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - **leading** - <slot name=\"leading\">{leading}</slot>\n- _default_ - <slot id=\"slot\"></slot>\n- **supporting** - <slot id=\"supporting\" name=\"supporting\" class=\"text\" lines=\"{lines}\">{supporting}</slot>\n- **trailing** - <slot id=\"trailing\" name=\"trailing\" role=\"note\" type-style=\"label-large\">{trailing}</slot>",
|
|
1518
|
+
"attributes": [
|
|
1519
|
+
{ "name": "color", "values": [] },
|
|
1520
|
+
{ "name": "ink", "values": [] },
|
|
1521
|
+
{ "name": "type-style", "values": [] },
|
|
1522
|
+
{ "name": "disabled", "values": [] },
|
|
1523
|
+
{ "name": "focused", "values": [] },
|
|
1524
|
+
{ "name": "hovered", "values": [] },
|
|
1525
|
+
{ "name": "pressed", "values": [] },
|
|
1526
|
+
{ "name": "href", "values": [] },
|
|
1527
|
+
{ "name": "target", "values": [] },
|
|
1528
|
+
{ "name": "download", "values": [] },
|
|
1529
|
+
{ "name": "ping", "values": [] },
|
|
1530
|
+
{ "name": "rel", "values": [] },
|
|
1531
|
+
{ "name": "hreflang", "values": [] },
|
|
1532
|
+
{ "name": "referrerpolicy", "values": [] },
|
|
1533
|
+
{ "name": "leading", "values": [] },
|
|
1534
|
+
{ "name": "avatar", "values": [] },
|
|
1535
|
+
{ "name": "avatar-color", "values": [] },
|
|
1536
|
+
{ "name": "avatar-src", "values": [] },
|
|
1537
|
+
{ "name": "src", "values": [] },
|
|
1538
|
+
{ "name": "alt", "values": [] },
|
|
1539
|
+
{ "name": "icon", "values": [] },
|
|
1540
|
+
{ "name": "icon-ink", "values": [] },
|
|
1541
|
+
{ "name": "icon-src", "values": [] },
|
|
1542
|
+
{ "name": "icon-variation", "values": [] },
|
|
1543
|
+
{ "name": "checkbox", "values": [] },
|
|
1544
|
+
{ "name": "radio", "values": [] },
|
|
1545
|
+
{ "name": "selection-color", "values": [] },
|
|
1546
|
+
{ "name": "selected", "values": [] },
|
|
1547
|
+
{ "name": "supporting", "values": [] },
|
|
1548
|
+
{ "name": "trailing", "values": [] },
|
|
1549
|
+
{ "name": "trailing-icon", "values": [] },
|
|
1550
|
+
{ "name": "trailing-icon-ink", "values": [] },
|
|
1551
|
+
{ "name": "trailing-icon-src", "values": [] },
|
|
1552
|
+
{ "name": "divider", "values": [] },
|
|
1553
|
+
{ "name": "video", "values": [] },
|
|
1554
|
+
{ "name": "lines", "values": [] },
|
|
1555
|
+
{ "name": "label", "values": [] },
|
|
1556
|
+
{ "name": "text", "values": [] },
|
|
1557
|
+
{
|
|
1558
|
+
"name": "value",
|
|
1559
|
+
"description": "Backing field for the menu item's value attribute. Can be `null` to\nindicate no explicit value; reflected to the `value` attribute.",
|
|
1560
|
+
"values": []
|
|
1561
|
+
},
|
|
1562
|
+
{ "name": "aria-controls", "values": [] },
|
|
1563
|
+
{ "name": "autocomplete", "values": [] },
|
|
1564
|
+
{ "name": "name", "values": [] },
|
|
1565
|
+
{ "name": "readonly", "values": [] },
|
|
1566
|
+
{ "name": "formnovalidate", "values": [] },
|
|
1567
|
+
{ "name": "checked", "values": [] },
|
|
1568
|
+
{ "name": "required", "values": [] },
|
|
1569
|
+
{
|
|
1570
|
+
"name": "cascades",
|
|
1571
|
+
"description": "ID of the submenu to open when this item cascades.",
|
|
1572
|
+
"values": []
|
|
1573
|
+
},
|
|
1574
|
+
{ "name": "type", "values": [] },
|
|
1575
|
+
{
|
|
1576
|
+
"name": "state-layer",
|
|
1577
|
+
"description": "Show the visual state layer element when true",
|
|
1578
|
+
"values": []
|
|
1579
|
+
}
|
|
1580
|
+
],
|
|
1581
|
+
"references": []
|
|
1582
|
+
},
|
|
1583
|
+
{
|
|
1584
|
+
"name": "mdw-nav-bar",
|
|
1585
|
+
"description": "Navigation bars let people switch between UI views on smaller devices\n@see https://m3.material.io/components/navigation-bar/specs\n---\n\n\n### **Events:**\n - **window-resize**\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\"></slot>",
|
|
1586
|
+
"attributes": [
|
|
1587
|
+
{ "name": "ink", "values": [] },
|
|
1588
|
+
{ "name": "type-style", "values": [] },
|
|
1589
|
+
{
|
|
1590
|
+
"name": "open",
|
|
1591
|
+
"description": "When true, the navigation bar is expanded and visible on small viewports.",
|
|
1592
|
+
"values": []
|
|
1593
|
+
},
|
|
1594
|
+
{
|
|
1595
|
+
"name": "auto-close",
|
|
1596
|
+
"description": "Pixel threshold for auto-closing the nav bar based on viewport width.\nA value of `-1` disables auto-close. Default: 728.",
|
|
1597
|
+
"values": []
|
|
1598
|
+
},
|
|
1599
|
+
{
|
|
1600
|
+
"name": "color",
|
|
1601
|
+
"description": "Palette or surface token used to select background/ink tokens.\nExamples: 'primary', 'background', 'surface-container-low'.",
|
|
1602
|
+
"values": []
|
|
1603
|
+
}
|
|
1604
|
+
],
|
|
1605
|
+
"references": []
|
|
1606
|
+
},
|
|
1607
|
+
{
|
|
1608
|
+
"name": "mdw-nav-bar-item",
|
|
1609
|
+
"description": "A navigation bar item represents a destination within a navigation bar,\nproviding an icon and optional label to help users move between app sections.\n@see https://m3.material.io/components/navigation-bar/specs\n---\n\n\n### **Slots:**\n - _default_ - <slot id=\"slot\" active=\"{active}\" show-label=\"{showLabel}\" aria-hidden=\"true\"></slot>\n\n### **CSS Parts:**\n - **badge** - undefined",
|
|
1610
|
+
"attributes": [
|
|
1611
|
+
{ "name": "color", "values": [] },
|
|
1612
|
+
{ "name": "ink", "values": [] },
|
|
1613
|
+
{ "name": "type-style", "values": [] },
|
|
1614
|
+
{ "name": "disabled", "values": [] },
|
|
1615
|
+
{ "name": "focused", "values": [] },
|
|
1616
|
+
{ "name": "hovered", "values": [] },
|
|
1617
|
+
{ "name": "pressed", "values": [] },
|
|
1618
|
+
{ "name": "href", "values": [] },
|
|
1619
|
+
{ "name": "target", "values": [] },
|
|
1620
|
+
{ "name": "download", "values": [] },
|
|
1621
|
+
{ "name": "ping", "values": [] },
|
|
1622
|
+
{ "name": "rel", "values": [] },
|
|
1623
|
+
{ "name": "hreflang", "values": [] },
|
|
1624
|
+
{ "name": "referrerpolicy", "values": [] },
|
|
1625
|
+
{ "name": "show-label", "values": [] },
|
|
1626
|
+
{ "name": "active", "values": [] },
|
|
1627
|
+
{ "name": "icon", "values": [] },
|
|
1628
|
+
{ "name": "src", "values": [] },
|
|
1629
|
+
{ "name": "badge", "values": [] },
|
|
1630
|
+
{ "name": "aria-label", "values": [] },
|
|
1631
|
+
{
|
|
1632
|
+
"name": "state-layer",
|
|
1633
|
+
"description": "Show the visual state layer element when true",
|
|
1634
|
+
"values": []
|
|
1635
|
+
}
|
|
1636
|
+
],
|
|
1637
|
+
"references": []
|
|
1638
|
+
},
|
|
1639
|
+
{
|
|
1640
|
+
"name": "mdw-nav-drawer",
|
|
1641
|
+
"description": "Navigation drawers provide access to destinations and app-level navigation\nin a side panel. They can be modal, dismissible, or permanent depending on\nviewport and application needs.\n@see https://m3.material.io/components/navigation-drawer/specs\n---\n\n\n### **Methods:**\n - **checkForScrim(): _(animate?: boolean) => void_** - Ensure a scrim is present when the sheet is modal (open && !fixed).\nWhen `animate` is true, keep the scrim around to run its fade-out.\n- **checkDragFinished(): _() => void_** - Evaluate drag state and decide whether to close or snap open.\n- **onWindowResize(): _() => void_** - Recompute `fixed`/`open` state based on the window width and breakpoints.\n\n### **Slots:**\n - _default_ - <slot id=\"slot\"></slot>",
|
|
1642
|
+
"attributes": [
|
|
1643
|
+
{ "name": "color", "values": [] },
|
|
1644
|
+
{ "name": "ink", "values": [] },
|
|
1645
|
+
{ "name": "type-style", "values": [] },
|
|
1646
|
+
{ "name": "block", "values": [] },
|
|
1647
|
+
{ "name": "inline", "values": [] },
|
|
1648
|
+
{ "name": "row", "values": [] },
|
|
1649
|
+
{ "name": "x", "values": [] },
|
|
1650
|
+
{ "name": "y", "values": [] },
|
|
1651
|
+
{ "name": "gap", "values": [] },
|
|
1652
|
+
{ "name": "padding", "values": [] },
|
|
1653
|
+
{ "name": "shape-top", "values": [] },
|
|
1654
|
+
{ "name": "shape-bottom", "values": [] },
|
|
1655
|
+
{ "name": "shape-start", "values": [] },
|
|
1656
|
+
{
|
|
1657
|
+
"name": "shape-end",
|
|
1658
|
+
"description": "When true, apply drawer shape at the end edge (RTL-aware).",
|
|
1659
|
+
"values": []
|
|
1660
|
+
},
|
|
1661
|
+
{ "name": "shape-style", "values": [] },
|
|
1662
|
+
{ "name": "outlined", "values": [] },
|
|
1663
|
+
{ "name": "fixed", "values": [] },
|
|
1664
|
+
{ "name": "open", "values": [] },
|
|
1665
|
+
{ "name": "inline-end", "values": [] },
|
|
1666
|
+
{ "name": "ontoggle", "values": [{ "name": "function" }] },
|
|
1667
|
+
{ "name": "onclose", "values": [{ "name": "function" }] },
|
|
1668
|
+
{
|
|
1669
|
+
"name": "auto-open",
|
|
1670
|
+
"description": "Viewport width in pixels at or above which the drawer auto-opens.\nUse `-1` to disable auto-open. Default: 1248.",
|
|
1671
|
+
"values": []
|
|
1672
|
+
},
|
|
1673
|
+
{ "name": "auto-close", "values": [{ "name": "float" }] },
|
|
1674
|
+
{
|
|
1675
|
+
"name": "fixed-breakpoint",
|
|
1676
|
+
"description": "Fixed layout breakpoint in pixels for permanent/dismissible drawer modes.\nDefault: 1248.",
|
|
1677
|
+
"values": []
|
|
1678
|
+
},
|
|
1679
|
+
{ "name": "fixed-color", "values": [] }
|
|
1680
|
+
],
|
|
1681
|
+
"references": []
|
|
1682
|
+
},
|
|
1683
|
+
{
|
|
1684
|
+
"name": "mdw-nav-drawer-item",
|
|
1685
|
+
"description": "A navigation drawer item represents a destination inside a navigation drawer,\nshowing an icon, label, and optional badge to help users navigate app sections.\n@see https://m3.material.io/components/navigation-drawer/specs\n---\n\n\n### **Slots:**\n - _default_ - <slot id=\"slot\" active=\"{active}\" show-label=\"{showLabel}\" aria-hidden=\"true\"></slot>",
|
|
1686
|
+
"attributes": [
|
|
1687
|
+
{ "name": "color", "values": [] },
|
|
1688
|
+
{ "name": "ink", "values": [] },
|
|
1689
|
+
{ "name": "type-style", "values": [] },
|
|
1690
|
+
{ "name": "disabled", "values": [] },
|
|
1691
|
+
{ "name": "focused", "values": [] },
|
|
1692
|
+
{ "name": "hovered", "values": [] },
|
|
1693
|
+
{ "name": "pressed", "values": [] },
|
|
1694
|
+
{ "name": "href", "values": [] },
|
|
1695
|
+
{ "name": "target", "values": [] },
|
|
1696
|
+
{ "name": "download", "values": [] },
|
|
1697
|
+
{ "name": "ping", "values": [] },
|
|
1698
|
+
{ "name": "rel", "values": [] },
|
|
1699
|
+
{ "name": "hreflang", "values": [] },
|
|
1700
|
+
{ "name": "referrerpolicy", "values": [] },
|
|
1701
|
+
{ "name": "show-label", "values": [] },
|
|
1702
|
+
{ "name": "active", "values": [] },
|
|
1703
|
+
{ "name": "icon", "values": [] },
|
|
1704
|
+
{ "name": "src", "values": [] },
|
|
1705
|
+
{ "name": "badge", "values": [] },
|
|
1706
|
+
{ "name": "aria-label", "values": [] },
|
|
1707
|
+
{
|
|
1708
|
+
"name": "state-layer",
|
|
1709
|
+
"description": "Show the visual state layer element when true",
|
|
1710
|
+
"values": []
|
|
1711
|
+
}
|
|
1712
|
+
],
|
|
1713
|
+
"references": []
|
|
1714
|
+
},
|
|
1715
|
+
{
|
|
1716
|
+
"name": "mdw-nav-item",
|
|
1717
|
+
"description": "@typedef {'charset'|'coords'|'name'|'shape'} DeprecatedHTMLAnchorElementProperties\n---\n\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\" active=\"{active}\" show-label=\"{showLabel}\" aria-hidden=\"true\"></slot>\n\n### **CSS Parts:**\n - **badge** - undefined",
|
|
1718
|
+
"attributes": [
|
|
1719
|
+
{ "name": "color", "values": [] },
|
|
1720
|
+
{ "name": "ink", "values": [] },
|
|
1721
|
+
{ "name": "type-style", "values": [] },
|
|
1722
|
+
{ "name": "disabled", "values": [] },
|
|
1723
|
+
{ "name": "focused", "values": [] },
|
|
1724
|
+
{ "name": "hovered", "values": [] },
|
|
1725
|
+
{ "name": "pressed", "values": [] },
|
|
1726
|
+
{ "name": "href", "values": [] },
|
|
1727
|
+
{ "name": "target", "values": [] },
|
|
1728
|
+
{ "name": "download", "values": [] },
|
|
1729
|
+
{ "name": "ping", "values": [] },
|
|
1730
|
+
{ "name": "rel", "values": [] },
|
|
1731
|
+
{ "name": "hreflang", "values": [] },
|
|
1732
|
+
{ "name": "referrerpolicy", "values": [] },
|
|
1733
|
+
{
|
|
1734
|
+
"name": "show-label",
|
|
1735
|
+
"description": "Whether the label slot is visible. When true the label is shown.",
|
|
1736
|
+
"values": []
|
|
1737
|
+
},
|
|
1738
|
+
{
|
|
1739
|
+
"name": "active",
|
|
1740
|
+
"description": "Whether the item is active/selected; affects styling and aria-current.",
|
|
1741
|
+
"values": []
|
|
1742
|
+
},
|
|
1743
|
+
{
|
|
1744
|
+
"name": "icon",
|
|
1745
|
+
"description": "Name of the icon to display (e.g. 'home'); ignored when `src` is provided.",
|
|
1746
|
+
"values": []
|
|
1747
|
+
},
|
|
1748
|
+
{
|
|
1749
|
+
"name": "src",
|
|
1750
|
+
"description": "URL of an icon image; takes precedence over `icon` when present.",
|
|
1751
|
+
"values": []
|
|
1752
|
+
},
|
|
1753
|
+
{
|
|
1754
|
+
"name": "badge",
|
|
1755
|
+
"description": "Badge content to display on the item (e.g. notification count).",
|
|
1756
|
+
"values": []
|
|
1757
|
+
},
|
|
1758
|
+
{
|
|
1759
|
+
"name": "aria-label",
|
|
1760
|
+
"description": "Accessible label for the anchor; when present it is used instead of the slot text.",
|
|
1761
|
+
"values": []
|
|
1762
|
+
},
|
|
1763
|
+
{
|
|
1764
|
+
"name": "state-layer",
|
|
1765
|
+
"description": "Show the visual state layer element when true",
|
|
1766
|
+
"values": []
|
|
1767
|
+
}
|
|
1768
|
+
],
|
|
1769
|
+
"references": []
|
|
1770
|
+
},
|
|
1771
|
+
{
|
|
1772
|
+
"name": "mdw-nav-rail",
|
|
1773
|
+
"description": "Navigation rails provide access to app destinations and destinations-level\nnavigation in a vertical rail, suited for larger screens and desktop layouts.\n@see https://m3.material.io/components/navigation-rail/specs\n---\n\n\n### **Methods:**\n - **checkForScrim(): _(animate?: boolean) => void_** - Ensure a scrim is present when the sheet is modal (open && !fixed).\nWhen `animate` is true, keep the scrim around to run its fade-out.\n- **checkDragFinished(): _() => void_** - Evaluate drag state and decide whether to close or snap open.\n- **onWindowResize(): _() => void_** - Recompute `fixed`/`open` state based on the window width and breakpoints.\n\n### **Slots:**\n - **start** - <slot id=\"start\" name=\"start\"></slot>\n- _default_ - <slot id=\"slot\" align=\"{align}\"></slot>",
|
|
1774
|
+
"attributes": [
|
|
1775
|
+
{ "name": "color", "values": [] },
|
|
1776
|
+
{ "name": "ink", "values": [] },
|
|
1777
|
+
{ "name": "type-style", "values": [] },
|
|
1778
|
+
{ "name": "block", "values": [] },
|
|
1779
|
+
{ "name": "inline", "values": [] },
|
|
1780
|
+
{ "name": "row", "values": [] },
|
|
1781
|
+
{ "name": "x", "values": [] },
|
|
1782
|
+
{ "name": "y", "values": [] },
|
|
1783
|
+
{ "name": "gap", "values": [] },
|
|
1784
|
+
{ "name": "padding", "values": [] },
|
|
1785
|
+
{ "name": "shape-top", "values": [] },
|
|
1786
|
+
{ "name": "shape-bottom", "values": [] },
|
|
1787
|
+
{ "name": "shape-start", "values": [] },
|
|
1788
|
+
{ "name": "shape-end", "values": [] },
|
|
1789
|
+
{ "name": "shape-style", "values": [] },
|
|
1790
|
+
{ "name": "outlined", "values": [] },
|
|
1791
|
+
{ "name": "fixed", "values": [] },
|
|
1792
|
+
{ "name": "open", "values": [] },
|
|
1793
|
+
{ "name": "inline-end", "values": [] },
|
|
1794
|
+
{ "name": "ontoggle", "values": [{ "name": "function" }] },
|
|
1795
|
+
{ "name": "onclose", "values": [{ "name": "function" }] },
|
|
1796
|
+
{
|
|
1797
|
+
"name": "auto-open",
|
|
1798
|
+
"description": "Viewport width (pixels) threshold at or above which the rail will auto-open.",
|
|
1799
|
+
"values": []
|
|
1800
|
+
},
|
|
1801
|
+
{
|
|
1802
|
+
"name": "auto-close",
|
|
1803
|
+
"description": "Viewport width (pixels) threshold at or below which the rail will auto-close.",
|
|
1804
|
+
"values": []
|
|
1805
|
+
},
|
|
1806
|
+
{
|
|
1807
|
+
"name": "fixed-breakpoint",
|
|
1808
|
+
"description": "Viewport width (pixels) at which the rail becomes fixed (non-collapsible).",
|
|
1809
|
+
"values": []
|
|
1810
|
+
},
|
|
1811
|
+
{ "name": "fixed-color", "values": [] },
|
|
1812
|
+
{
|
|
1813
|
+
"name": "align",
|
|
1814
|
+
"description": "Horizontal alignment for rail content: 'start', 'center', or 'end'.",
|
|
1815
|
+
"values": []
|
|
1816
|
+
}
|
|
1817
|
+
],
|
|
1818
|
+
"references": []
|
|
1819
|
+
},
|
|
1820
|
+
{
|
|
1821
|
+
"name": "mdw-nav-rail-item",
|
|
1822
|
+
"description": "A navigation rail item represents a destination within a navigation rail,\nshowing an icon and optional label for vertical navigation on larger screens.\n@see https://m3.material.io/components/navigation-rail/specs\n---\n\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\" active=\"{active}\" show-label=\"{showLabel}\" aria-hidden=\"true\"></slot>\n\n### **CSS Parts:**\n - **badge** - undefined",
|
|
1823
|
+
"attributes": [
|
|
1824
|
+
{ "name": "color", "values": [] },
|
|
1825
|
+
{ "name": "ink", "values": [] },
|
|
1826
|
+
{ "name": "type-style", "values": [] },
|
|
1827
|
+
{ "name": "disabled", "values": [] },
|
|
1828
|
+
{ "name": "focused", "values": [] },
|
|
1829
|
+
{ "name": "hovered", "values": [] },
|
|
1830
|
+
{ "name": "pressed", "values": [] },
|
|
1831
|
+
{ "name": "href", "values": [] },
|
|
1832
|
+
{ "name": "target", "values": [] },
|
|
1833
|
+
{ "name": "download", "values": [] },
|
|
1834
|
+
{ "name": "ping", "values": [] },
|
|
1835
|
+
{ "name": "rel", "values": [] },
|
|
1836
|
+
{ "name": "hreflang", "values": [] },
|
|
1837
|
+
{ "name": "referrerpolicy", "values": [] },
|
|
1838
|
+
{ "name": "show-label", "values": [] },
|
|
1839
|
+
{ "name": "active", "values": [] },
|
|
1840
|
+
{ "name": "icon", "values": [] },
|
|
1841
|
+
{ "name": "src", "values": [] },
|
|
1842
|
+
{ "name": "badge", "values": [] },
|
|
1843
|
+
{ "name": "aria-label", "values": [] },
|
|
1844
|
+
{
|
|
1845
|
+
"name": "state-layer",
|
|
1846
|
+
"description": "Show the visual state layer element when true",
|
|
1847
|
+
"values": []
|
|
1848
|
+
}
|
|
1849
|
+
],
|
|
1850
|
+
"references": []
|
|
1851
|
+
},
|
|
1852
|
+
{
|
|
1853
|
+
"name": "mdw-page",
|
|
1854
|
+
"description": "Page is a top-level layout container that manages single or multi-pane\napplication layouts, adapting to viewport size to show one or two panes.\n@see https://m3.material.io/foundations/layout/applying-layout/window-size-classes\n---\n\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\" mutli-pane=\"{_isMultipane}\"></slot>\n- **two** - <slot id=\"two\" name=\"two\" mutli-pane=\"{_isMultipane}\"></slot>",
|
|
1855
|
+
"attributes": [
|
|
1856
|
+
{
|
|
1857
|
+
"name": "pane-one",
|
|
1858
|
+
"description": "Layout behavior for the first pane: 'fixed' keeps a fixed width, 'flexible' grows.",
|
|
1859
|
+
"values": []
|
|
1860
|
+
},
|
|
1861
|
+
{
|
|
1862
|
+
"name": "pane-two",
|
|
1863
|
+
"description": "Layout behavior for the second pane; null disables the second pane.",
|
|
1864
|
+
"values": []
|
|
1865
|
+
},
|
|
1866
|
+
{
|
|
1867
|
+
"name": "pane-two-active",
|
|
1868
|
+
"description": "Whether the second pane is currently active/visible.",
|
|
1869
|
+
"values": []
|
|
1870
|
+
},
|
|
1871
|
+
{
|
|
1872
|
+
"name": "pane-two-breakpoint",
|
|
1873
|
+
"description": "Inline-size breakpoint (px) at which the second pane becomes visible.",
|
|
1874
|
+
"values": []
|
|
1875
|
+
}
|
|
1876
|
+
],
|
|
1877
|
+
"references": []
|
|
1878
|
+
},
|
|
1879
|
+
{
|
|
1880
|
+
"name": "mdw-pane",
|
|
1881
|
+
"description": "Pane is a layout surface used within `mdw-page` to provide shaped,\npadded content columns for app content. It is intended to be placed\nas a child of `mdw-page` to create consistent, shaped panes with the\nsame padding and background surface used across the layout system.\n@see https://m3.material.io/foundations/layout/applying-layout/window-size-classes\n---\n\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\"></slot>",
|
|
1882
|
+
"attributes": [
|
|
1883
|
+
{ "name": "color", "values": [] },
|
|
1884
|
+
{ "name": "ink", "values": [] },
|
|
1885
|
+
{ "name": "type-style", "values": [] },
|
|
1886
|
+
{ "name": "block", "values": [] },
|
|
1887
|
+
{ "name": "inline", "values": [] },
|
|
1888
|
+
{ "name": "row", "values": [] },
|
|
1889
|
+
{ "name": "x", "values": [] },
|
|
1890
|
+
{ "name": "y", "values": [] },
|
|
1891
|
+
{ "name": "gap", "values": [] },
|
|
1892
|
+
{ "name": "padding", "values": [] },
|
|
1893
|
+
{ "name": "shape-top", "values": [] },
|
|
1894
|
+
{ "name": "shape-bottom", "values": [] },
|
|
1895
|
+
{ "name": "shape-start", "values": [] },
|
|
1896
|
+
{ "name": "shape-end", "values": [] },
|
|
1897
|
+
{ "name": "shape-style", "values": [] },
|
|
1898
|
+
{ "name": "outlined", "values": [] }
|
|
1899
|
+
],
|
|
1900
|
+
"references": []
|
|
1901
|
+
},
|
|
1902
|
+
{
|
|
1903
|
+
"name": "mdw-popup",
|
|
1904
|
+
"description": "Popup displays transient content such as menus or popovers and provides\nelevation, shape, and theming control for floating surfaces.\n@see https://m3.material.io/styles/elevation/overview\n---\n\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\" on-slotchange=\"{onSlotChange}\"></slot>",
|
|
1905
|
+
"attributes": [
|
|
1906
|
+
{ "name": "color", "values": [] },
|
|
1907
|
+
{ "name": "ink", "values": [] },
|
|
1908
|
+
{ "name": "type-style", "values": [] },
|
|
1909
|
+
{ "name": "shape-top", "values": [] },
|
|
1910
|
+
{ "name": "shape-bottom", "values": [] },
|
|
1911
|
+
{ "name": "shape-start", "values": [] },
|
|
1912
|
+
{ "name": "shape-end", "values": [] },
|
|
1913
|
+
{ "name": "shape-style", "values": [] },
|
|
1914
|
+
{ "name": "outlined", "values": [] },
|
|
1915
|
+
{ "name": "open", "values": [] },
|
|
1916
|
+
{ "name": "modal", "values": [] },
|
|
1917
|
+
{ "name": "native", "values": [] },
|
|
1918
|
+
{ "name": "scrollable", "values": [] },
|
|
1919
|
+
{ "name": "match-source-width", "values": [] },
|
|
1920
|
+
{ "name": "flow", "values": [] },
|
|
1921
|
+
{ "name": "popup-margin", "values": [] },
|
|
1922
|
+
{
|
|
1923
|
+
"name": "elevation",
|
|
1924
|
+
"description": "Elevation level (0–5) controlling the drop-shadow depth of the popup.",
|
|
1925
|
+
"values": []
|
|
1926
|
+
}
|
|
1927
|
+
],
|
|
1928
|
+
"references": []
|
|
1929
|
+
},
|
|
1930
|
+
{
|
|
1931
|
+
"name": "mdw-progress",
|
|
1932
|
+
"description": "Progress indicators display the progress of an operation as a determinate\nbar or an indeterminate animation.\n@see https://m3.material.io/components/progress-indicators/specs\n@see https://html.spec.whatwg.org/multipage/form-elements.html#the-progress-element\n---\n\n\n### **Methods:**\n - **isDeterminate(): _() => boolean_** - True when `value` is provided, indicating a determinate progress state.\n- **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````",
|
|
1933
|
+
"attributes": [
|
|
1934
|
+
{ "name": "color", "values": [] },
|
|
1935
|
+
{ "name": "ink", "values": [] },
|
|
1936
|
+
{ "name": "type-style", "values": [] },
|
|
1937
|
+
{
|
|
1938
|
+
"name": "circle",
|
|
1939
|
+
"description": "Render the circular variant when true; otherwise render a linear bar.",
|
|
1940
|
+
"values": []
|
|
1941
|
+
},
|
|
1942
|
+
{
|
|
1943
|
+
"name": "value",
|
|
1944
|
+
"description": "Current progress value. When present the indicator is determinate.",
|
|
1945
|
+
"values": []
|
|
1946
|
+
},
|
|
1947
|
+
{
|
|
1948
|
+
"name": "max",
|
|
1949
|
+
"description": "Maximum progress value (defaults to 100 when not set).",
|
|
1950
|
+
"values": []
|
|
1951
|
+
},
|
|
1952
|
+
{
|
|
1953
|
+
"name": "auto-hide",
|
|
1954
|
+
"description": "When true, the progress will auto-hide when complete.",
|
|
1955
|
+
"values": []
|
|
1956
|
+
}
|
|
1957
|
+
],
|
|
1958
|
+
"references": []
|
|
1959
|
+
},
|
|
1960
|
+
{
|
|
1961
|
+
"name": "mdw-radio",
|
|
1962
|
+
"description": "Radio buttons allow selection of a single option within a set.\n@see https://m3.material.io/components/radio-button/overview\n---\n\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\"></slot>\n\n### **CSS Parts:**\n - **control** - undefined",
|
|
1963
|
+
"attributes": [
|
|
1964
|
+
{ "name": "color", "values": [] },
|
|
1965
|
+
{ "name": "ink", "values": [] },
|
|
1966
|
+
{ "name": "type-style", "values": [] },
|
|
1967
|
+
{ "name": "disabled", "values": [] },
|
|
1968
|
+
{ "name": "focused", "values": [] },
|
|
1969
|
+
{ "name": "hovered", "values": [] },
|
|
1970
|
+
{ "name": "pressed", "values": [] },
|
|
1971
|
+
{ "name": "aria-controls", "values": [] },
|
|
1972
|
+
{ "name": "autocomplete", "values": [] },
|
|
1973
|
+
{ "name": "name", "values": [] },
|
|
1974
|
+
{ "name": "readonly", "values": [] },
|
|
1975
|
+
{ "name": "formnovalidate", "values": [] },
|
|
1976
|
+
{ "name": "checked", "values": [] },
|
|
1977
|
+
{ "name": "required", "values": [] },
|
|
1978
|
+
{ "name": "value", "values": [] },
|
|
1979
|
+
{ "name": "aria-label", "values": [] },
|
|
1980
|
+
{ "name": "accept", "values": [] },
|
|
1981
|
+
{ "name": "alt", "values": [] },
|
|
1982
|
+
{ "name": "dirname", "values": [] },
|
|
1983
|
+
{ "name": "formenctype", "values": [] },
|
|
1984
|
+
{ "name": "formmethod", "values": [] },
|
|
1985
|
+
{ "name": "formtarget", "values": [] },
|
|
1986
|
+
{ "name": "max", "values": [] },
|
|
1987
|
+
{ "name": "maxlength", "values": [] },
|
|
1988
|
+
{ "name": "min", "values": [] },
|
|
1989
|
+
{ "name": "minlength", "values": [] },
|
|
1990
|
+
{ "name": "multiple", "values": [] },
|
|
1991
|
+
{ "name": "pattern", "values": [] },
|
|
1992
|
+
{ "name": "placeholder", "values": [] },
|
|
1993
|
+
{ "name": "size", "values": [] },
|
|
1994
|
+
{ "name": "src", "values": [] },
|
|
1995
|
+
{ "name": "step", "values": [] },
|
|
1996
|
+
{ "name": "indeterminate", "values": [] },
|
|
1997
|
+
{
|
|
1998
|
+
"name": "state-layer",
|
|
1999
|
+
"description": "Show the visual state layer element when true",
|
|
2000
|
+
"values": []
|
|
2001
|
+
},
|
|
2002
|
+
{ "name": "type", "values": [] }
|
|
2003
|
+
],
|
|
2004
|
+
"references": []
|
|
2005
|
+
},
|
|
2006
|
+
{
|
|
2007
|
+
"name": "mdw-radio-icon",
|
|
2008
|
+
"description": "Visual helper for radio buttons, rendering the outer and inner rings.\n@see https://m3.material.io/components/radio-button/overview\n---\n\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````",
|
|
2009
|
+
"attributes": [
|
|
2010
|
+
{ "name": "color", "values": [] },
|
|
2011
|
+
{ "name": "ink", "values": [] },
|
|
2012
|
+
{ "name": "type-style", "values": [] },
|
|
2013
|
+
{ "name": "shape-top", "values": [] },
|
|
2014
|
+
{ "name": "shape-bottom", "values": [] },
|
|
2015
|
+
{ "name": "shape-start", "values": [] },
|
|
2016
|
+
{ "name": "shape-end", "values": [] },
|
|
2017
|
+
{ "name": "shape-style", "values": [] },
|
|
2018
|
+
{ "name": "outlined", "values": [] },
|
|
2019
|
+
{
|
|
2020
|
+
"name": "selected",
|
|
2021
|
+
"description": "Whether the radio icon is selected (checked).",
|
|
2022
|
+
"values": []
|
|
2023
|
+
},
|
|
2024
|
+
{
|
|
2025
|
+
"name": "icon",
|
|
2026
|
+
"description": "Optional icon name to render inside the control (not normally used).",
|
|
2027
|
+
"values": []
|
|
2028
|
+
},
|
|
2029
|
+
{
|
|
2030
|
+
"name": "errored",
|
|
2031
|
+
"description": "When true the control is shown in an error state.",
|
|
2032
|
+
"values": []
|
|
2033
|
+
},
|
|
2034
|
+
{
|
|
2035
|
+
"name": "disabled",
|
|
2036
|
+
"description": "When true the control is disabled.",
|
|
2037
|
+
"values": []
|
|
2038
|
+
},
|
|
2039
|
+
{
|
|
2040
|
+
"name": "hovered",
|
|
2041
|
+
"description": "Hover state used for styling.",
|
|
2042
|
+
"values": []
|
|
2043
|
+
},
|
|
2044
|
+
{
|
|
2045
|
+
"name": "focused",
|
|
2046
|
+
"description": "Focus state used for styling.",
|
|
2047
|
+
"values": []
|
|
2048
|
+
}
|
|
2049
|
+
],
|
|
2050
|
+
"references": []
|
|
2051
|
+
},
|
|
2052
|
+
{
|
|
2053
|
+
"name": "mdw-ripple",
|
|
2054
|
+
"description": "Ripple is a visual touch feedback effect used by controls to indicate\npointer/touch interaction. It renders and animates a circular ink ripple\nand exposes properties to control its position, size, and lifecycle.\n@see https://m3.material.io/foundations/interaction/states/applying-states\n---\n\n\n### **Methods:**\n - **handleRippleComplete(): _() => void_** - Complete the ripple lifecycle: either mark complete or remove.\n- **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````",
|
|
2055
|
+
"attributes": [
|
|
2056
|
+
{
|
|
2057
|
+
"name": "ripple-state",
|
|
2058
|
+
"description": "Current lifecycle state for the ripple (e.g. 'filled', 'complete').",
|
|
2059
|
+
"values": []
|
|
2060
|
+
},
|
|
2061
|
+
{
|
|
2062
|
+
"name": "keep-alive",
|
|
2063
|
+
"description": "When true, keep the ripple in the DOM after animation ends.",
|
|
2064
|
+
"values": []
|
|
2065
|
+
},
|
|
2066
|
+
{
|
|
2067
|
+
"name": "hold-ripple",
|
|
2068
|
+
"description": "Hold the ripple (e.g. for long-press); triggers hold/release tracking.",
|
|
2069
|
+
"values": []
|
|
2070
|
+
}
|
|
2071
|
+
],
|
|
2072
|
+
"references": []
|
|
2073
|
+
},
|
|
2074
|
+
{
|
|
2075
|
+
"name": "mdw-root",
|
|
2076
|
+
"description": "Root is the application's top-level container that manages layout regions and\nshared floating areas such as bottom bars.\n@see https://m3.material.io/foundations/layout/applying-layout/window-size-classes\n---\n\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - **start** - <slot id=\"start\" name=\"start\"></slot>\n- **bottom** - <slot id=\"bottom-slot\" name=\"bottom\"></slot>\n- **bottom-fixed** - <slot id=\"bottom-fixed-slot\" name=\"bottom-fixed\"></slot>\n- _default_ - <slot id=\"slot\"></slot>\n- **end** - <slot id=\"end\" name=\"end\"></slot>",
|
|
2077
|
+
"attributes": [],
|
|
2078
|
+
"references": []
|
|
2079
|
+
},
|
|
2080
|
+
{
|
|
2081
|
+
"name": "mdw-scrim",
|
|
2082
|
+
"description": "A scrim can bring focus to specific elements by increasing the visual contrast of a large layered surface.\nUse the scrim beneath elements like modals and expanded navigation menus.\n@see https://m3.material.io/styles/elevation/applying-elevation\n---\n\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````",
|
|
2083
|
+
"attributes": [
|
|
2084
|
+
{
|
|
2085
|
+
"name": "hidden",
|
|
2086
|
+
"description": "When true the scrim is hidden and will be removed after its fade-out animation.",
|
|
2087
|
+
"values": []
|
|
2088
|
+
}
|
|
2089
|
+
],
|
|
2090
|
+
"references": []
|
|
2091
|
+
},
|
|
2092
|
+
{
|
|
2093
|
+
"name": "mdw-search",
|
|
2094
|
+
"description": "Search provides an app bar integrated search field for querying content.\nimplements {HTMLSelectElement}\n@see https://m3.material.io/components/search/overview\n---\n\n\n### **Events:**\n - **slot-change**\n\n### **Slots:**\n - **leading** - <slot id=\"leading\" name=\"leading\" on-slotchange=\"{refreshTabIndexes}\"></slot>\n- **trailing** - <slot id=\"trailing\" name=\"trailing\" on-slotchange=\"{refreshTabIndexes}\"></slot>",
|
|
2095
|
+
"attributes": [
|
|
2096
|
+
{
|
|
2097
|
+
"name": "color",
|
|
2098
|
+
"description": "Visual color token to apply to the search surface.",
|
|
2099
|
+
"values": []
|
|
2100
|
+
},
|
|
2101
|
+
{ "name": "ink", "values": [] },
|
|
2102
|
+
{ "name": "type-style", "values": [] },
|
|
2103
|
+
{ "name": "shape-top", "values": [] },
|
|
2104
|
+
{ "name": "shape-bottom", "values": [] },
|
|
2105
|
+
{ "name": "shape-start", "values": [] },
|
|
2106
|
+
{ "name": "shape-end", "values": [] },
|
|
2107
|
+
{
|
|
2108
|
+
"name": "shape-style",
|
|
2109
|
+
"description": "Shape style token to apply (e.g. 'full', 'none').",
|
|
2110
|
+
"values": []
|
|
2111
|
+
},
|
|
2112
|
+
{ "name": "outlined", "values": [] },
|
|
2113
|
+
{
|
|
2114
|
+
"name": "kbd-nav",
|
|
2115
|
+
"description": "Enable keyboard navigation mode for search results when true.",
|
|
2116
|
+
"values": []
|
|
2117
|
+
},
|
|
2118
|
+
{ "name": "sticky-always", "values": [] },
|
|
2119
|
+
{ "name": "sticky-parent", "values": [] },
|
|
2120
|
+
{ "name": "raised-color", "values": [] },
|
|
2121
|
+
{
|
|
2122
|
+
"name": "placeholder",
|
|
2123
|
+
"description": "Placeholder text shown in the search input.",
|
|
2124
|
+
"values": []
|
|
2125
|
+
},
|
|
2126
|
+
{
|
|
2127
|
+
"name": "headline",
|
|
2128
|
+
"description": "Headline text displayed in the center area.",
|
|
2129
|
+
"values": []
|
|
2130
|
+
},
|
|
2131
|
+
{
|
|
2132
|
+
"name": "size",
|
|
2133
|
+
"description": "Size variant: 'small' | 'medium' | 'large' or `null` to auto-select.",
|
|
2134
|
+
"values": []
|
|
2135
|
+
}
|
|
2136
|
+
],
|
|
2137
|
+
"references": []
|
|
2138
|
+
},
|
|
2139
|
+
{
|
|
2140
|
+
"name": "mdw-segmented-button",
|
|
2141
|
+
"description": "Segmented buttons group individual related actions or options where\nmultiple choices are presented inline; each segment acts like a toggle\nor option within a set.\n@see https://m3.material.io/components/segmented-buttons/specs\n---\n\n\n### **Events:**\n - **value-changing-content-attribute**\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\" disabled=\"{disabledState}\" aria-hidden=\"true\">{_defaultValue}</slot>\n\n### **CSS Parts:**\n - **control** - undefined",
|
|
2142
|
+
"attributes": [
|
|
2143
|
+
{ "name": "color", "values": [] },
|
|
2144
|
+
{ "name": "ink", "values": [] },
|
|
2145
|
+
{ "name": "type-style", "values": [] },
|
|
2146
|
+
{ "name": "density", "values": [] },
|
|
2147
|
+
{ "name": "disabled", "values": [] },
|
|
2148
|
+
{ "name": "focused", "values": [] },
|
|
2149
|
+
{ "name": "hovered", "values": [] },
|
|
2150
|
+
{ "name": "pressed", "values": [] },
|
|
2151
|
+
{ "name": "shape-top", "values": [] },
|
|
2152
|
+
{ "name": "shape-bottom", "values": [] },
|
|
2153
|
+
{ "name": "shape-start", "values": [] },
|
|
2154
|
+
{ "name": "shape-end", "values": [] },
|
|
2155
|
+
{ "name": "shape-style", "values": [] },
|
|
2156
|
+
{ "name": "aria-controls", "values": [] },
|
|
2157
|
+
{ "name": "autocomplete", "values": [] },
|
|
2158
|
+
{ "name": "name", "values": [] },
|
|
2159
|
+
{ "name": "readonly", "values": [] },
|
|
2160
|
+
{ "name": "formnovalidate", "values": [] },
|
|
2161
|
+
{ "name": "checked", "values": [] },
|
|
2162
|
+
{ "name": "required", "values": [] },
|
|
2163
|
+
{
|
|
2164
|
+
"name": "type",
|
|
2165
|
+
"description": "Interaction model for the segment: 'radio' (single select) or 'checkbox' (multi-select).",
|
|
2166
|
+
"values": []
|
|
2167
|
+
},
|
|
2168
|
+
{ "name": "value", "values": [] },
|
|
2169
|
+
{ "name": "aria-label", "values": [] },
|
|
2170
|
+
{ "name": "accept", "values": [] },
|
|
2171
|
+
{ "name": "alt", "values": [] },
|
|
2172
|
+
{ "name": "dirname", "values": [] },
|
|
2173
|
+
{ "name": "formenctype", "values": [] },
|
|
2174
|
+
{ "name": "formmethod", "values": [] },
|
|
2175
|
+
{ "name": "formtarget", "values": [] },
|
|
2176
|
+
{ "name": "max", "values": [] },
|
|
2177
|
+
{ "name": "maxlength", "values": [] },
|
|
2178
|
+
{ "name": "min", "values": [] },
|
|
2179
|
+
{ "name": "minlength", "values": [] },
|
|
2180
|
+
{ "name": "multiple", "values": [] },
|
|
2181
|
+
{ "name": "pattern", "values": [] },
|
|
2182
|
+
{ "name": "placeholder", "values": [] },
|
|
2183
|
+
{ "name": "size", "values": [] },
|
|
2184
|
+
{ "name": "src", "values": [] },
|
|
2185
|
+
{ "name": "step", "values": [] },
|
|
2186
|
+
{ "name": "indeterminate", "values": [] },
|
|
2187
|
+
{ "name": "href", "values": [] },
|
|
2188
|
+
{ "name": "target", "values": [] },
|
|
2189
|
+
{ "name": "download", "values": [] },
|
|
2190
|
+
{ "name": "ping", "values": [] },
|
|
2191
|
+
{ "name": "rel", "values": [] },
|
|
2192
|
+
{ "name": "hreflang", "values": [] },
|
|
2193
|
+
{ "name": "referrerpolicy", "values": [] },
|
|
2194
|
+
{ "name": "elevated", "values": [] },
|
|
2195
|
+
{ "name": "filled", "values": [] },
|
|
2196
|
+
{ "name": "icon", "values": [] },
|
|
2197
|
+
{ "name": "icon-ink", "values": [] },
|
|
2198
|
+
{ "name": "svg", "values": [] },
|
|
2199
|
+
{ "name": "view-box", "values": [] },
|
|
2200
|
+
{ "name": "svg-path", "values": [] },
|
|
2201
|
+
{
|
|
2202
|
+
"name": "inner-segmented-button",
|
|
2203
|
+
"description": "When true this segment is rendered as an inner segment inside a segmented group.",
|
|
2204
|
+
"values": []
|
|
2205
|
+
},
|
|
2206
|
+
{
|
|
2207
|
+
"name": "outlined",
|
|
2208
|
+
"description": "Whether the button should render an outline.",
|
|
2209
|
+
"values": []
|
|
2210
|
+
},
|
|
2211
|
+
{
|
|
2212
|
+
"name": "state-layer",
|
|
2213
|
+
"description": "Show the visual state layer element when true",
|
|
2214
|
+
"values": []
|
|
2215
|
+
}
|
|
2216
|
+
],
|
|
2217
|
+
"references": []
|
|
2218
|
+
},
|
|
2219
|
+
{
|
|
2220
|
+
"name": "mdw-segmented-button-group",
|
|
2221
|
+
"description": "@typedef {'compact'} DeprecatedHTMLMenuElementProperties\n---\n\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\"></slot>",
|
|
2222
|
+
"attributes": [
|
|
2223
|
+
{ "name": "color", "values": [] },
|
|
2224
|
+
{ "name": "ink", "values": [] },
|
|
2225
|
+
{ "name": "type-style", "values": [] },
|
|
2226
|
+
{ "name": "block", "values": [] },
|
|
2227
|
+
{ "name": "inline", "values": [] },
|
|
2228
|
+
{ "name": "row", "values": [] },
|
|
2229
|
+
{ "name": "x", "values": [] },
|
|
2230
|
+
{ "name": "y", "values": [] },
|
|
2231
|
+
{ "name": "gap", "values": [] },
|
|
2232
|
+
{ "name": "padding", "values": [] },
|
|
2233
|
+
{ "name": "kbd-nav", "values": [] }
|
|
2234
|
+
],
|
|
2235
|
+
"references": []
|
|
2236
|
+
},
|
|
2237
|
+
{
|
|
2238
|
+
"name": "mdw-select",
|
|
2239
|
+
"description": "Select provides a control for choosing an option from a list of options.\nimplements {HTMLSelectElement}\n@see https://m3.material.io/components/text-fields/overview\n---\n\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - **supporting** - <slot id=\"supporting-slot\" name=\"supporting\"></slot>\n- _default_ - <slot id=\"slot\"></slot>\n\n### **CSS Parts:**\n - **control** - undefined",
|
|
2240
|
+
"attributes": [
|
|
2241
|
+
{ "name": "color", "values": [] },
|
|
2242
|
+
{ "name": "ink", "values": [] },
|
|
2243
|
+
{ "name": "type-style", "values": [] },
|
|
2244
|
+
{ "name": "disabled", "values": [] },
|
|
2245
|
+
{ "name": "focused", "values": [] },
|
|
2246
|
+
{ "name": "hovered", "values": [] },
|
|
2247
|
+
{ "name": "pressed", "values": [] },
|
|
2248
|
+
{ "name": "aria-controls", "values": [] },
|
|
2249
|
+
{ "name": "autocomplete", "values": [] },
|
|
2250
|
+
{ "name": "name", "values": [] },
|
|
2251
|
+
{ "name": "readonly", "values": [] },
|
|
2252
|
+
{ "name": "formnovalidate", "values": [] },
|
|
2253
|
+
{ "name": "checked", "values": [] },
|
|
2254
|
+
{ "name": "required", "values": [] },
|
|
2255
|
+
{ "name": "value", "values": [] },
|
|
2256
|
+
{ "name": "aria-label", "values": [] },
|
|
2257
|
+
{ "name": "density", "values": [] },
|
|
2258
|
+
{ "name": "shape-top", "values": [] },
|
|
2259
|
+
{ "name": "shape-bottom", "values": [] },
|
|
2260
|
+
{ "name": "shape-start", "values": [] },
|
|
2261
|
+
{ "name": "shape-end", "values": [] },
|
|
2262
|
+
{ "name": "shape-style", "values": [] },
|
|
2263
|
+
{ "name": "outlined", "values": [] },
|
|
2264
|
+
{ "name": "icon", "values": [] },
|
|
2265
|
+
{ "name": "icon-variation", "values": [] },
|
|
2266
|
+
{ "name": "label", "values": [] },
|
|
2267
|
+
{ "name": "filled", "values": [] },
|
|
2268
|
+
{ "name": "input-prefix", "values": [] },
|
|
2269
|
+
{ "name": "input-suffix", "values": [] },
|
|
2270
|
+
{
|
|
2271
|
+
"name": "trailing-icon",
|
|
2272
|
+
"description": "Name of the trailing icon to render (defaults to the dropdown arrow).",
|
|
2273
|
+
"values": []
|
|
2274
|
+
},
|
|
2275
|
+
{ "name": "trailing-icon-ink", "values": [] },
|
|
2276
|
+
{ "name": "trailing-icon-label", "values": [] },
|
|
2277
|
+
{ "name": "supporting", "values": [] },
|
|
2278
|
+
{ "name": "error", "values": [] },
|
|
2279
|
+
{ "name": "placeholder", "values": [] },
|
|
2280
|
+
{
|
|
2281
|
+
"name": "state-layer",
|
|
2282
|
+
"description": "Show the visual state layer element when true",
|
|
2283
|
+
"values": []
|
|
2284
|
+
},
|
|
2285
|
+
{ "name": "type", "values": [] }
|
|
2286
|
+
],
|
|
2287
|
+
"references": []
|
|
2288
|
+
},
|
|
2289
|
+
{
|
|
2290
|
+
"name": "mdw-shape",
|
|
2291
|
+
"description": "Shape applies shape tokens (corner radius) to elements and surfaces.\n@see https://m3.material.io/styles/shape/overview-principles\n---\n\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\"></slot>",
|
|
2292
|
+
"attributes": [
|
|
2293
|
+
{ "name": "shape-top", "values": [] },
|
|
2294
|
+
{ "name": "shape-bottom", "values": [] },
|
|
2295
|
+
{ "name": "shape-start", "values": [] },
|
|
2296
|
+
{ "name": "shape-end", "values": [] },
|
|
2297
|
+
{ "name": "shape-style", "values": [] }
|
|
2298
|
+
],
|
|
2299
|
+
"references": []
|
|
2300
|
+
},
|
|
2301
|
+
{
|
|
2302
|
+
"name": "mdw-side-sheet",
|
|
2303
|
+
"description": "Side sheets may be static.\nSide sheets may be modal while retaining their own position.\nSide sheets can have different modal and static max-sizes.\nSide sheets can be themed with background color and ink.\nSide sheets can be shaped.\nSide sheets do not have states\nSide sheets can have roles\nSide sheets delegate focus\nStatic side sheets push in and out content.\nModal side sheets slide in and out over content.\nModal side sheets anchor position does not need to match static position.\nModal side sheets must become \"dialog-like\", blocking access to all other elements on the screen.\nModal side sheets can display elevation\n---\n\n\n### **Events:**\n - **window-resize**\n\n### **Methods:**\n - **checkForScrim(): _(animate?: boolean) => void_** - Ensure a scrim is present when the sheet is modal (open && !fixed).\nWhen `animate` is true, keep the scrim around to run its fade-out.\n- **checkDragFinished(): _() => void_** - Evaluate drag state and decide whether to close or snap open.\n- **onWindowResize(): _() => void_** - Recompute `fixed`/`open` state based on the window width and breakpoints.\n- **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\"></slot>",
|
|
2304
|
+
"attributes": [
|
|
2305
|
+
{
|
|
2306
|
+
"name": "color",
|
|
2307
|
+
"description": "The theme color token used for the sheet background.",
|
|
2308
|
+
"values": []
|
|
2309
|
+
},
|
|
2310
|
+
{ "name": "ink", "values": [] },
|
|
2311
|
+
{ "name": "type-style", "values": [] },
|
|
2312
|
+
{ "name": "block", "values": [] },
|
|
2313
|
+
{ "name": "inline", "values": [] },
|
|
2314
|
+
{ "name": "row", "values": [] },
|
|
2315
|
+
{ "name": "x", "values": [] },
|
|
2316
|
+
{ "name": "y", "values": [] },
|
|
2317
|
+
{ "name": "gap", "values": [] },
|
|
2318
|
+
{ "name": "padding", "values": [] },
|
|
2319
|
+
{ "name": "shape-top", "values": [] },
|
|
2320
|
+
{ "name": "shape-bottom", "values": [] },
|
|
2321
|
+
{ "name": "shape-start", "values": [] },
|
|
2322
|
+
{ "name": "shape-end", "values": [] },
|
|
2323
|
+
{ "name": "shape-style", "values": [] },
|
|
2324
|
+
{ "name": "outlined", "values": [] },
|
|
2325
|
+
{
|
|
2326
|
+
"name": "fixed",
|
|
2327
|
+
"description": "When true the side sheet is fixed (non-modal/static), occupying layout space.",
|
|
2328
|
+
"values": []
|
|
2329
|
+
},
|
|
2330
|
+
{
|
|
2331
|
+
"name": "open",
|
|
2332
|
+
"description": "Whether the sheet is currently open (visible).",
|
|
2333
|
+
"values": []
|
|
2334
|
+
},
|
|
2335
|
+
{
|
|
2336
|
+
"name": "inline-end",
|
|
2337
|
+
"description": "When true, position the sheet at the inline end edge.",
|
|
2338
|
+
"values": []
|
|
2339
|
+
},
|
|
2340
|
+
{
|
|
2341
|
+
"name": "ontoggle",
|
|
2342
|
+
"description": "Event handler invoked when the sheet toggles.",
|
|
2343
|
+
"values": [{ "name": "function" }]
|
|
2344
|
+
},
|
|
2345
|
+
{
|
|
2346
|
+
"name": "onclose",
|
|
2347
|
+
"description": "Event handler invoked when the sheet closes.",
|
|
2348
|
+
"values": [{ "name": "function" }]
|
|
2349
|
+
},
|
|
2350
|
+
{
|
|
2351
|
+
"name": "auto-open",
|
|
2352
|
+
"description": "Optional auto-open minimum viewport inline-size (px); -1 disables.",
|
|
2353
|
+
"values": []
|
|
2354
|
+
},
|
|
2355
|
+
{
|
|
2356
|
+
"name": "auto-close",
|
|
2357
|
+
"description": "Optional auto-close maximum viewport inline-size (px); -1 disables.",
|
|
2358
|
+
"values": []
|
|
2359
|
+
},
|
|
2360
|
+
{
|
|
2361
|
+
"name": "fixed-breakpoint",
|
|
2362
|
+
"description": "Inline-size breakpoint (px) at which the sheet becomes `fixed`.",
|
|
2363
|
+
"values": []
|
|
2364
|
+
},
|
|
2365
|
+
{
|
|
2366
|
+
"name": "fixed-color",
|
|
2367
|
+
"description": "Optional fixed-mode color token applied when sheet is fixed.",
|
|
2368
|
+
"values": []
|
|
2369
|
+
}
|
|
2370
|
+
],
|
|
2371
|
+
"references": []
|
|
2372
|
+
},
|
|
2373
|
+
{
|
|
2374
|
+
"name": "mdw-slider",
|
|
2375
|
+
"description": "@param {string} value\n@param {number} onNaN\n@return {number}\n---\n\n\n### **Events:**\n - **control-mouse-or-touch**\n- **leave-event**\n- **control-finish**\n\n### **Methods:**\n - **onControlMouseOrTouch(): _(event: (MouseEvent | TouchEvent) & { currentTarget: HTMLInputElement; }) => void_** - Handle pointer or touch interactions on the native control to compute\nposition and update the intermediate rounded value while dragging.\n- **onLeaveEvent(): _({ currentTarget }: Event) => void_** - Pointer leave/blur handler for the control; hides the thumb label when focus is lost.\n- **onControlFinish(): _(event: (MouseEvent | TouchEvent) & { currentTarget: HTMLInputElement; }) => void_** - Finalize interaction with the control: commit the rounded value to the\nnative input and dispatch a `change` event if the value changed.\n- **computeTrackStyle(): _() => string_** - Compute inline style variables for the track, including ticks and value fraction.\n- **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **CSS Parts:**\n - **control** - undefined",
|
|
2376
|
+
"attributes": [
|
|
2377
|
+
{ "name": "color", "values": [] },
|
|
2378
|
+
{ "name": "ink", "values": [] },
|
|
2379
|
+
{ "name": "type-style", "values": [] },
|
|
2380
|
+
{ "name": "disabled", "values": [] },
|
|
2381
|
+
{ "name": "focused", "values": [] },
|
|
2382
|
+
{ "name": "hovered", "values": [] },
|
|
2383
|
+
{ "name": "pressed", "values": [] },
|
|
2384
|
+
{ "name": "aria-controls", "values": [] },
|
|
2385
|
+
{ "name": "autocomplete", "values": [] },
|
|
2386
|
+
{ "name": "name", "values": [] },
|
|
2387
|
+
{ "name": "readonly", "values": [] },
|
|
2388
|
+
{ "name": "formnovalidate", "values": [] },
|
|
2389
|
+
{ "name": "checked", "values": [] },
|
|
2390
|
+
{ "name": "required", "values": [] },
|
|
2391
|
+
{ "name": "value", "values": [] },
|
|
2392
|
+
{ "name": "aria-label", "values": [] },
|
|
2393
|
+
{ "name": "accept", "values": [] },
|
|
2394
|
+
{ "name": "alt", "values": [] },
|
|
2395
|
+
{ "name": "dirname", "values": [] },
|
|
2396
|
+
{ "name": "formenctype", "values": [] },
|
|
2397
|
+
{ "name": "formmethod", "values": [] },
|
|
2398
|
+
{ "name": "formtarget", "values": [] },
|
|
2399
|
+
{ "name": "max", "values": [] },
|
|
2400
|
+
{ "name": "maxlength", "values": [] },
|
|
2401
|
+
{ "name": "min", "values": [] },
|
|
2402
|
+
{ "name": "minlength", "values": [] },
|
|
2403
|
+
{ "name": "multiple", "values": [] },
|
|
2404
|
+
{ "name": "pattern", "values": [] },
|
|
2405
|
+
{ "name": "placeholder", "values": [] },
|
|
2406
|
+
{ "name": "size", "values": [] },
|
|
2407
|
+
{ "name": "src", "values": [] },
|
|
2408
|
+
{ "name": "step", "values": [] },
|
|
2409
|
+
{ "name": "indeterminate", "values": [] },
|
|
2410
|
+
{
|
|
2411
|
+
"name": "ticks",
|
|
2412
|
+
"description": "Number of tick marks to show along the track (integer).",
|
|
2413
|
+
"values": []
|
|
2414
|
+
},
|
|
2415
|
+
{
|
|
2416
|
+
"name": "thumb-label",
|
|
2417
|
+
"description": "Text to show in the thumb label; when null the numeric value is shown.",
|
|
2418
|
+
"values": []
|
|
2419
|
+
},
|
|
2420
|
+
{
|
|
2421
|
+
"name": "state-layer",
|
|
2422
|
+
"description": "Show the visual state layer element when true",
|
|
2423
|
+
"values": []
|
|
2424
|
+
},
|
|
2425
|
+
{ "name": "type", "values": [] }
|
|
2426
|
+
],
|
|
2427
|
+
"references": []
|
|
2428
|
+
},
|
|
2429
|
+
{
|
|
2430
|
+
"name": "mdw-snackbar",
|
|
2431
|
+
"description": "Snackbars provide brief messages about app processes and optional actions.\n@see https://m3.material.io/components/snackbar/specs\n---\n\n\n### **Events:**\n - **action**\n\n### **Methods:**\n - **close(): _() => Promise<void>_** - Close the snackbar. Dispatches a cancelable `close` event; if not\nprevented the snackbar will hide and await the closing transition.\n- **show(): _() => void_** - Show the snackbar (set `open` true).\n- **update(): _(text: string) => void_** - Update the snackbar text content.\n- **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\"></slot>",
|
|
2432
|
+
"attributes": [
|
|
2433
|
+
{ "name": "color", "values": [] },
|
|
2434
|
+
{ "name": "ink", "values": [] },
|
|
2435
|
+
{ "name": "type-style", "values": [] },
|
|
2436
|
+
{ "name": "shape-top", "values": [] },
|
|
2437
|
+
{ "name": "shape-bottom", "values": [] },
|
|
2438
|
+
{ "name": "shape-start", "values": [] },
|
|
2439
|
+
{ "name": "shape-end", "values": [] },
|
|
2440
|
+
{ "name": "shape-style", "values": [] },
|
|
2441
|
+
{ "name": "outlined", "values": [] },
|
|
2442
|
+
{ "name": "density", "values": [] },
|
|
2443
|
+
{
|
|
2444
|
+
"name": "open",
|
|
2445
|
+
"description": "Whether the snackbar is visible.",
|
|
2446
|
+
"values": []
|
|
2447
|
+
},
|
|
2448
|
+
{
|
|
2449
|
+
"name": "persistent",
|
|
2450
|
+
"description": "When true the snackbar does not auto-dismiss.",
|
|
2451
|
+
"values": []
|
|
2452
|
+
},
|
|
2453
|
+
{ "name": "action", "values": [] },
|
|
2454
|
+
{
|
|
2455
|
+
"name": "action-ink",
|
|
2456
|
+
"description": "Ink token used for the action button (defaults to inverse-primary).",
|
|
2457
|
+
"values": []
|
|
2458
|
+
},
|
|
2459
|
+
{
|
|
2460
|
+
"name": "action-type-style",
|
|
2461
|
+
"description": "Typographic style used for the action (e.g. 'label-large').",
|
|
2462
|
+
"values": []
|
|
2463
|
+
},
|
|
2464
|
+
{
|
|
2465
|
+
"name": "close-button",
|
|
2466
|
+
"description": "Render a close icon button when true.",
|
|
2467
|
+
"values": []
|
|
2468
|
+
},
|
|
2469
|
+
{
|
|
2470
|
+
"name": "close-icon",
|
|
2471
|
+
"description": "Icon name used for the close button.",
|
|
2472
|
+
"values": []
|
|
2473
|
+
},
|
|
2474
|
+
{
|
|
2475
|
+
"name": "close-ink",
|
|
2476
|
+
"description": "Ink token used for the close icon.",
|
|
2477
|
+
"values": []
|
|
2478
|
+
},
|
|
2479
|
+
{
|
|
2480
|
+
"name": "onaction",
|
|
2481
|
+
"description": "Event handler invoked when the action is triggered.",
|
|
2482
|
+
"values": [{ "name": "function" }]
|
|
2483
|
+
},
|
|
2484
|
+
{
|
|
2485
|
+
"name": "ontoggle",
|
|
2486
|
+
"description": "Event handler invoked when the snackbar toggles open/closed.",
|
|
2487
|
+
"values": [{ "name": "function" }]
|
|
2488
|
+
}
|
|
2489
|
+
],
|
|
2490
|
+
"references": []
|
|
2491
|
+
},
|
|
2492
|
+
{
|
|
2493
|
+
"name": "mdw-snackbar-container",
|
|
2494
|
+
"description": "Snackbar container positions snackbars within the app window and manages\nlayout and pointer-events for stacked snackbars.\n@see https://m3.material.io/components/snackbar/specs\n---\n\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\"></slot>",
|
|
2495
|
+
"attributes": [],
|
|
2496
|
+
"references": []
|
|
2497
|
+
},
|
|
2498
|
+
{
|
|
2499
|
+
"name": "mdw-surface",
|
|
2500
|
+
"description": "Surface represents a themed elevated surface used to display content with\nelevation, shape, and color tokens applied.\n@see https://m3.material.io/styles/elevation/overview\n---\n\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\"></slot>",
|
|
2501
|
+
"attributes": [
|
|
2502
|
+
{ "name": "color", "values": [] },
|
|
2503
|
+
{ "name": "ink", "values": [] },
|
|
2504
|
+
{ "name": "type-style", "values": [] },
|
|
2505
|
+
{ "name": "block", "values": [] },
|
|
2506
|
+
{ "name": "inline", "values": [] },
|
|
2507
|
+
{ "name": "row", "values": [] },
|
|
2508
|
+
{ "name": "x", "values": [] },
|
|
2509
|
+
{ "name": "y", "values": [] },
|
|
2510
|
+
{ "name": "gap", "values": [] },
|
|
2511
|
+
{ "name": "padding", "values": [] },
|
|
2512
|
+
{ "name": "shape-top", "values": [] },
|
|
2513
|
+
{ "name": "shape-bottom", "values": [] },
|
|
2514
|
+
{ "name": "shape-start", "values": [] },
|
|
2515
|
+
{ "name": "shape-end", "values": [] },
|
|
2516
|
+
{ "name": "shape-style", "values": [] },
|
|
2517
|
+
{ "name": "outlined", "values": [] }
|
|
2518
|
+
],
|
|
2519
|
+
"references": []
|
|
2520
|
+
},
|
|
2521
|
+
{
|
|
2522
|
+
"name": "mdw-switch",
|
|
2523
|
+
"description": "Switch is a binary control that toggles between on and off states.\n@see https://m3.material.io/components/switch/specs\n---\n\n\n### **Events:**\n - **control-mouse-or-touch**\n\n### **Methods:**\n - **onControlMouseOrTouch(): _(event: (MouseEvent | TouchEvent) & { currentTarget: HTMLInputElement; }) => void_** - Handle pointer/touch input on the native control to compute dragging\nposition and update the thumb drag state.\n- **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\"></slot>\n\n### **CSS Parts:**\n - **control** - undefined",
|
|
2524
|
+
"attributes": [
|
|
2525
|
+
{ "name": "color", "values": [] },
|
|
2526
|
+
{ "name": "ink", "values": [] },
|
|
2527
|
+
{ "name": "type-style", "values": [] },
|
|
2528
|
+
{ "name": "aria-controls", "values": [] },
|
|
2529
|
+
{ "name": "autocomplete", "values": [] },
|
|
2530
|
+
{ "name": "name", "values": [] },
|
|
2531
|
+
{ "name": "readonly", "values": [] },
|
|
2532
|
+
{ "name": "formnovalidate", "values": [] },
|
|
2533
|
+
{ "name": "checked", "values": [] },
|
|
2534
|
+
{ "name": "required", "values": [] },
|
|
2535
|
+
{ "name": "value", "values": [] },
|
|
2536
|
+
{ "name": "aria-label", "values": [] },
|
|
2537
|
+
{ "name": "accept", "values": [] },
|
|
2538
|
+
{ "name": "alt", "values": [] },
|
|
2539
|
+
{ "name": "dirname", "values": [] },
|
|
2540
|
+
{ "name": "formenctype", "values": [] },
|
|
2541
|
+
{ "name": "formmethod", "values": [] },
|
|
2542
|
+
{ "name": "formtarget", "values": [] },
|
|
2543
|
+
{ "name": "max", "values": [] },
|
|
2544
|
+
{ "name": "maxlength", "values": [] },
|
|
2545
|
+
{ "name": "min", "values": [] },
|
|
2546
|
+
{ "name": "minlength", "values": [] },
|
|
2547
|
+
{ "name": "multiple", "values": [] },
|
|
2548
|
+
{ "name": "pattern", "values": [] },
|
|
2549
|
+
{ "name": "placeholder", "values": [] },
|
|
2550
|
+
{ "name": "size", "values": [] },
|
|
2551
|
+
{
|
|
2552
|
+
"name": "src",
|
|
2553
|
+
"description": "The image `src` to show inside the thumb when provided.",
|
|
2554
|
+
"values": []
|
|
2555
|
+
},
|
|
2556
|
+
{ "name": "step", "values": [] },
|
|
2557
|
+
{ "name": "indeterminate", "values": [] },
|
|
2558
|
+
{ "name": "disabled", "values": [] },
|
|
2559
|
+
{ "name": "focused", "values": [] },
|
|
2560
|
+
{ "name": "hovered", "values": [] },
|
|
2561
|
+
{ "name": "pressed", "values": [] },
|
|
2562
|
+
{
|
|
2563
|
+
"name": "icon",
|
|
2564
|
+
"description": "The icon name to show inside the thumb when provided.",
|
|
2565
|
+
"values": []
|
|
2566
|
+
},
|
|
2567
|
+
{
|
|
2568
|
+
"name": "selected-icon",
|
|
2569
|
+
"description": "The icon name to show when the switch is selected/on.",
|
|
2570
|
+
"values": []
|
|
2571
|
+
},
|
|
2572
|
+
{
|
|
2573
|
+
"name": "unselected-icon",
|
|
2574
|
+
"description": "The icon name to show when the switch is unselected/off.",
|
|
2575
|
+
"values": []
|
|
2576
|
+
},
|
|
2577
|
+
{
|
|
2578
|
+
"name": "selected-src",
|
|
2579
|
+
"description": "The image `src` to show when the switch is selected/on.",
|
|
2580
|
+
"values": []
|
|
2581
|
+
},
|
|
2582
|
+
{
|
|
2583
|
+
"name": "unselected-src",
|
|
2584
|
+
"description": "The image `src` to show when the switch is unselected/off.",
|
|
2585
|
+
"values": []
|
|
2586
|
+
},
|
|
2587
|
+
{ "name": "type", "values": [] },
|
|
2588
|
+
{
|
|
2589
|
+
"name": "state-layer",
|
|
2590
|
+
"description": "Show the visual state layer element when true",
|
|
2591
|
+
"values": []
|
|
2592
|
+
}
|
|
2593
|
+
],
|
|
2594
|
+
"references": []
|
|
2595
|
+
},
|
|
2596
|
+
{
|
|
2597
|
+
"name": "mdw-switch-icon",
|
|
2598
|
+
"description": "Visual helper that renders the switch thumb and related visual states.\n@see https://m3.material.io/components/switch/specs\n---\n\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\" selected=\"{checked}\"></slot>",
|
|
2599
|
+
"attributes": [
|
|
2600
|
+
{
|
|
2601
|
+
"name": "color",
|
|
2602
|
+
"description": "Color token to use for the thumb (defaults to primary).",
|
|
2603
|
+
"values": []
|
|
2604
|
+
},
|
|
2605
|
+
{ "name": "ink", "values": [] },
|
|
2606
|
+
{ "name": "type-style", "values": [] },
|
|
2607
|
+
{ "name": "shape-top", "values": [] },
|
|
2608
|
+
{ "name": "shape-bottom", "values": [] },
|
|
2609
|
+
{ "name": "shape-start", "values": [] },
|
|
2610
|
+
{ "name": "shape-end", "values": [] },
|
|
2611
|
+
{ "name": "shape-style", "values": [] },
|
|
2612
|
+
{ "name": "outlined", "values": [] },
|
|
2613
|
+
{
|
|
2614
|
+
"name": "selected",
|
|
2615
|
+
"description": "Whether the switch is selected/on.",
|
|
2616
|
+
"values": []
|
|
2617
|
+
},
|
|
2618
|
+
{
|
|
2619
|
+
"name": "icon",
|
|
2620
|
+
"description": "Named icon to render inside the thumb.",
|
|
2621
|
+
"values": []
|
|
2622
|
+
},
|
|
2623
|
+
{
|
|
2624
|
+
"name": "errored",
|
|
2625
|
+
"description": "Whether the control is visually in an errored state.",
|
|
2626
|
+
"values": []
|
|
2627
|
+
},
|
|
2628
|
+
{
|
|
2629
|
+
"name": "disabled",
|
|
2630
|
+
"description": "Whether the control is disabled.",
|
|
2631
|
+
"values": []
|
|
2632
|
+
},
|
|
2633
|
+
{
|
|
2634
|
+
"name": "selected-icon",
|
|
2635
|
+
"description": "Icon name to show when selected/on.",
|
|
2636
|
+
"values": []
|
|
2637
|
+
},
|
|
2638
|
+
{
|
|
2639
|
+
"name": "unselected-icon",
|
|
2640
|
+
"description": "Icon name to show when unselected/off.",
|
|
2641
|
+
"values": []
|
|
2642
|
+
},
|
|
2643
|
+
{
|
|
2644
|
+
"name": "src",
|
|
2645
|
+
"description": "Image `src` to render inside the thumb.",
|
|
2646
|
+
"values": []
|
|
2647
|
+
},
|
|
2648
|
+
{
|
|
2649
|
+
"name": "selected-src",
|
|
2650
|
+
"description": "Image `src` to render when selected/on.",
|
|
2651
|
+
"values": []
|
|
2652
|
+
},
|
|
2653
|
+
{
|
|
2654
|
+
"name": "unselected-src",
|
|
2655
|
+
"description": "Image `src` to render when unselected/off.",
|
|
2656
|
+
"values": []
|
|
2657
|
+
},
|
|
2658
|
+
{
|
|
2659
|
+
"name": "hovered",
|
|
2660
|
+
"description": "Hover state for the thumb.",
|
|
2661
|
+
"values": []
|
|
2662
|
+
},
|
|
2663
|
+
{
|
|
2664
|
+
"name": "pressed",
|
|
2665
|
+
"description": "Pressed state for the thumb.",
|
|
2666
|
+
"values": []
|
|
2667
|
+
},
|
|
2668
|
+
{
|
|
2669
|
+
"name": "focused",
|
|
2670
|
+
"description": "Focused state for the thumb.",
|
|
2671
|
+
"values": []
|
|
2672
|
+
},
|
|
2673
|
+
{
|
|
2674
|
+
"name": "drag-value",
|
|
2675
|
+
"description": "Temporary drag position value (0..1) while the thumb is being dragged.",
|
|
2676
|
+
"values": []
|
|
2677
|
+
},
|
|
2678
|
+
{
|
|
2679
|
+
"name": "checked",
|
|
2680
|
+
"description": "Alias for `selected` to match common control naming.",
|
|
2681
|
+
"values": []
|
|
2682
|
+
}
|
|
2683
|
+
],
|
|
2684
|
+
"references": []
|
|
2685
|
+
},
|
|
2686
|
+
{
|
|
2687
|
+
"name": "mdw-tab",
|
|
2688
|
+
"description": "Tabs organize content into separate views where only one view is visible\nat a time; tabs provide navigation between those views.\n@see https://m3.material.io/components/tabs/specs\n---\n\n\n### **Methods:**\n - **computeLabelMetrics(): _() => { width: number; left: number; }_** - Compute the label metrics used for indicator alignment.\nReturns an object with `width` and `left` in pixels.\n- **anchorAriaControls(): _() => string_** - Derive the `aria-controls` value from `href` if it references an id.\n- **anchorAriaSelected(): _() => string_** - Stringified `aria-selected` for the anchor.\n- **anchorAriaDisabled(): _() => string_** - Stringified `aria-disabled` for the anchor.\n- **anchorHref(): _() => string_** - Ensure anchor `href` defaults to `#` when unset.\n- **iconIf(): _() => string_** - True when an icon or src is provided and should render.\n- **iconVariation(): _() => string_** - Icon variation to use when active.\n- **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\"></slot>",
|
|
2689
|
+
"attributes": [
|
|
2690
|
+
{ "name": "shape-top", "values": [] },
|
|
2691
|
+
{ "name": "shape-bottom", "values": [] },
|
|
2692
|
+
{ "name": "shape-start", "values": [] },
|
|
2693
|
+
{ "name": "shape-end", "values": [] },
|
|
2694
|
+
{ "name": "shape-style", "values": [] },
|
|
2695
|
+
{ "name": "outlined", "values": [] },
|
|
2696
|
+
{ "name": "disabled", "values": [] },
|
|
2697
|
+
{ "name": "focused", "values": [] },
|
|
2698
|
+
{ "name": "hovered", "values": [] },
|
|
2699
|
+
{ "name": "pressed", "values": [] },
|
|
2700
|
+
{ "name": "href", "values": [] },
|
|
2701
|
+
{ "name": "target", "values": [] },
|
|
2702
|
+
{ "name": "download", "values": [] },
|
|
2703
|
+
{ "name": "ping", "values": [] },
|
|
2704
|
+
{ "name": "rel", "values": [] },
|
|
2705
|
+
{ "name": "hreflang", "values": [] },
|
|
2706
|
+
{ "name": "referrerpolicy", "values": [] },
|
|
2707
|
+
{
|
|
2708
|
+
"name": "active",
|
|
2709
|
+
"description": "Whether this tab is currently active/selected.",
|
|
2710
|
+
"values": []
|
|
2711
|
+
},
|
|
2712
|
+
{
|
|
2713
|
+
"name": "icon",
|
|
2714
|
+
"description": "Named icon to display above the label.",
|
|
2715
|
+
"values": []
|
|
2716
|
+
},
|
|
2717
|
+
{
|
|
2718
|
+
"name": "src",
|
|
2719
|
+
"description": "Image `src` for the icon when used instead of a named icon.",
|
|
2720
|
+
"values": []
|
|
2721
|
+
},
|
|
2722
|
+
{
|
|
2723
|
+
"name": "aria-label",
|
|
2724
|
+
"description": "Optional aria-label for the tab's anchor element.",
|
|
2725
|
+
"values": []
|
|
2726
|
+
},
|
|
2727
|
+
{
|
|
2728
|
+
"name": "state-layer",
|
|
2729
|
+
"description": "Show the visual state layer element when true",
|
|
2730
|
+
"values": []
|
|
2731
|
+
}
|
|
2732
|
+
],
|
|
2733
|
+
"references": []
|
|
2734
|
+
},
|
|
2735
|
+
{
|
|
2736
|
+
"name": "mdw-tab-content",
|
|
2737
|
+
"description": "Tab content hosts tab panels and manages which panel is visible based on\nscroll position or selected tab.\n@see https://m3.material.io/components/tabs/specs\n---\n\n\n### **Methods:**\n - **updatePanels(): _() => void_** - Recompute which panels are visible based on scroll position and\nactivate the panel whose visible percentage is >= 50%.\n- **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\"></slot>",
|
|
2738
|
+
"attributes": [],
|
|
2739
|
+
"references": []
|
|
2740
|
+
},
|
|
2741
|
+
{
|
|
2742
|
+
"name": "mdw-tab-list",
|
|
2743
|
+
"description": "Tab list is the container for `mdw-tab` elements and renders the active\nindicator and keyboard navigation behavior.\n@see https://m3.material.io/components/tabs/specs\n---\n\n\n### **Methods:**\n - **clearCache(): _() => void_** - Clear cached tab metrics (widths/positions).\n- **searchForTabContent(): _() => void_** - Find and bind to the external `TabContent` element by id.\n- **updateIndicator(): _(animate?: boolean) => void_** - Recompute and apply indicator; optionally disable animation when `animate` is false.\n- **updateIndicatorByPosition(): _(percentage: number) => void_** - Update the indicator position by a floating `percentage` between 0..1\nrepresenting the scroll progress across tab panels.\n- **observeTabContent(): _() => void_** - Observe the bound TabContent scroll and update indicator accordingly.\n- **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\" ink=\"{ink}\" type-style=\"{typeStyle}\" scrollable=\"{scrollable}\"></slot>",
|
|
2744
|
+
"attributes": [
|
|
2745
|
+
{
|
|
2746
|
+
"name": "color",
|
|
2747
|
+
"description": "Color token used for the tab ink.",
|
|
2748
|
+
"values": []
|
|
2749
|
+
},
|
|
2750
|
+
{ "name": "ink", "values": [] },
|
|
2751
|
+
{ "name": "type-style", "values": [] },
|
|
2752
|
+
{ "name": "kbd-nav", "values": [] },
|
|
2753
|
+
{ "name": "page-is-r-t-l", "values": [] },
|
|
2754
|
+
{ "name": "shape-top", "values": [] },
|
|
2755
|
+
{ "name": "shape-bottom", "values": [] },
|
|
2756
|
+
{ "name": "shape-start", "values": [] },
|
|
2757
|
+
{ "name": "shape-end", "values": [] },
|
|
2758
|
+
{ "name": "shape-style", "values": [] },
|
|
2759
|
+
{ "name": "outlined", "values": [] },
|
|
2760
|
+
{ "name": "sticky-always", "values": [] },
|
|
2761
|
+
{ "name": "sticky-parent", "values": [] },
|
|
2762
|
+
{
|
|
2763
|
+
"name": "scrollable",
|
|
2764
|
+
"description": "When true the tablist is scrollable (renders differently).",
|
|
2765
|
+
"values": []
|
|
2766
|
+
},
|
|
2767
|
+
{
|
|
2768
|
+
"name": "tab-content-id",
|
|
2769
|
+
"description": "Id of an external `TabContent` element to bind and observe.",
|
|
2770
|
+
"values": []
|
|
2771
|
+
},
|
|
2772
|
+
{
|
|
2773
|
+
"name": "active",
|
|
2774
|
+
"description": "Whether the tablist is visually active (has a selected tab).",
|
|
2775
|
+
"values": []
|
|
2776
|
+
},
|
|
2777
|
+
{
|
|
2778
|
+
"name": "secondary",
|
|
2779
|
+
"description": "Render the secondary (label-width) indicator style when true.",
|
|
2780
|
+
"values": []
|
|
2781
|
+
}
|
|
2782
|
+
],
|
|
2783
|
+
"references": []
|
|
2784
|
+
},
|
|
2785
|
+
{
|
|
2786
|
+
"name": "mdw-tab-panel",
|
|
2787
|
+
"description": "TabPanel represents the content area for a single tab and updates ARIA\nwhen activated.\n@see https://m3.material.io/components/tabs/specs\n---\n\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\"></slot>",
|
|
2788
|
+
"attributes": [
|
|
2789
|
+
{ "name": "color", "values": [] },
|
|
2790
|
+
{ "name": "ink", "values": [] },
|
|
2791
|
+
{ "name": "type-style", "values": [] },
|
|
2792
|
+
{ "name": "block", "values": [] },
|
|
2793
|
+
{ "name": "inline", "values": [] },
|
|
2794
|
+
{ "name": "row", "values": [] },
|
|
2795
|
+
{ "name": "x", "values": [] },
|
|
2796
|
+
{ "name": "y", "values": [] },
|
|
2797
|
+
{ "name": "gap", "values": [] },
|
|
2798
|
+
{ "name": "padding", "values": [] },
|
|
2799
|
+
{
|
|
2800
|
+
"name": "active",
|
|
2801
|
+
"description": "Whether this panel is active/visible; updates ARIA `aria-hidden`.",
|
|
2802
|
+
"values": []
|
|
2803
|
+
},
|
|
2804
|
+
{
|
|
2805
|
+
"name": "peeking",
|
|
2806
|
+
"description": "True when the panel is partially visible (peeking).",
|
|
2807
|
+
"values": []
|
|
2808
|
+
}
|
|
2809
|
+
],
|
|
2810
|
+
"references": []
|
|
2811
|
+
},
|
|
2812
|
+
{
|
|
2813
|
+
"name": "mdw-table",
|
|
2814
|
+
"description": "@param {Element} parent\n@param {string} tagName\n@return {Element?}\n---\n\n\n### **Methods:**\n - **createCaption(): _() => Element_** - Create and return a `mdw-caption` element, appending when necessary.\n- **deleteCaption(): _() => void_** - Remove the table's caption element when present.\n- **createTHead(): _() => Element_** - Create and return a `mdw-thead` element for the table.\n- **deleteTHead(): _() => void_** - Remove the table's `mdw-thead` element when present.\n- **createTFoot(): _() => Element_** - Create and return a `mdw-tfoot` element for the table.\n- **deleteTFoot(): _() => void_** - Remove the table's `mdw-tfoot` element when present.\n- **createTBody(): _() => Element_** - Insert and return a new `mdw-tbody` element before the tFoot (if any).\n- **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\"></slot>",
|
|
2815
|
+
"attributes": [],
|
|
2816
|
+
"references": []
|
|
2817
|
+
},
|
|
2818
|
+
{
|
|
2819
|
+
"name": "mdw-textarea",
|
|
2820
|
+
"description": "TextArea is a multi-line text input that auto-resizes and integrates with\ntext-field patterns for labels and validation.\nimplements {HTMLTextAreaElement}\n@see https://m3.material.io/components/text-fields/specs\n@see https://html.spec.whatwg.org/multipage/form-elements.html#the-textarea-element\n---\n\n\n### **Methods:**\n - **resize(): _() => void_** - Resize the textarea to fit content up to `maxRows` and not below\n`minRows`. This updates the `rows` property and internal layout state.\n- **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - **supporting** - <slot id=\"supporting-slot\" name=\"supporting\"></slot>\n\n### **CSS Parts:**\n - **control** - undefined",
|
|
2821
|
+
"attributes": [
|
|
2822
|
+
{ "name": "color", "values": [] },
|
|
2823
|
+
{ "name": "ink", "values": [] },
|
|
2824
|
+
{ "name": "type-style", "values": [] },
|
|
2825
|
+
{ "name": "disabled", "values": [] },
|
|
2826
|
+
{ "name": "focused", "values": [] },
|
|
2827
|
+
{ "name": "hovered", "values": [] },
|
|
2828
|
+
{ "name": "pressed", "values": [] },
|
|
2829
|
+
{ "name": "aria-controls", "values": [] },
|
|
2830
|
+
{ "name": "autocomplete", "values": [] },
|
|
2831
|
+
{ "name": "name", "values": [] },
|
|
2832
|
+
{ "name": "readonly", "values": [] },
|
|
2833
|
+
{ "name": "formnovalidate", "values": [] },
|
|
2834
|
+
{ "name": "checked", "values": [] },
|
|
2835
|
+
{ "name": "required", "values": [] },
|
|
2836
|
+
{
|
|
2837
|
+
"name": "value",
|
|
2838
|
+
"description": "Forwards a `value` attribute to the internal `defaultValue`.",
|
|
2839
|
+
"values": []
|
|
2840
|
+
},
|
|
2841
|
+
{ "name": "aria-label", "values": [] },
|
|
2842
|
+
{ "name": "density", "values": [] },
|
|
2843
|
+
{ "name": "shape-top", "values": [] },
|
|
2844
|
+
{ "name": "shape-bottom", "values": [] },
|
|
2845
|
+
{ "name": "shape-start", "values": [] },
|
|
2846
|
+
{ "name": "shape-end", "values": [] },
|
|
2847
|
+
{ "name": "shape-style", "values": [] },
|
|
2848
|
+
{ "name": "outlined", "values": [] },
|
|
2849
|
+
{ "name": "icon", "values": [] },
|
|
2850
|
+
{ "name": "icon-variation", "values": [] },
|
|
2851
|
+
{ "name": "label", "values": [] },
|
|
2852
|
+
{ "name": "filled", "values": [] },
|
|
2853
|
+
{ "name": "input-prefix", "values": [] },
|
|
2854
|
+
{ "name": "input-suffix", "values": [] },
|
|
2855
|
+
{ "name": "trailing-icon", "values": [] },
|
|
2856
|
+
{ "name": "trailing-icon-ink", "values": [] },
|
|
2857
|
+
{ "name": "trailing-icon-label", "values": [] },
|
|
2858
|
+
{ "name": "supporting", "values": [] },
|
|
2859
|
+
{ "name": "error", "values": [] },
|
|
2860
|
+
{ "name": "placeholder", "values": [] },
|
|
2861
|
+
{
|
|
2862
|
+
"name": "fixed",
|
|
2863
|
+
"description": "When true the textarea is fixed-size and will not auto-resize.",
|
|
2864
|
+
"values": []
|
|
2865
|
+
},
|
|
2866
|
+
{
|
|
2867
|
+
"name": "minrows",
|
|
2868
|
+
"description": "Minimum number of rows to display. Mirrors the `minrows` attribute.",
|
|
2869
|
+
"values": []
|
|
2870
|
+
},
|
|
2871
|
+
{
|
|
2872
|
+
"name": "maxrows",
|
|
2873
|
+
"description": "Maximum number of rows to allow when auto-resizing.",
|
|
2874
|
+
"values": []
|
|
2875
|
+
},
|
|
2876
|
+
{ "name": "cols", "values": [] },
|
|
2877
|
+
{
|
|
2878
|
+
"name": "dirname",
|
|
2879
|
+
"description": "The `dirname` attribute value forwarded to the native control.",
|
|
2880
|
+
"values": []
|
|
2881
|
+
},
|
|
2882
|
+
{
|
|
2883
|
+
"name": "maxlength",
|
|
2884
|
+
"description": "Maximum allowed characters for the control.",
|
|
2885
|
+
"values": []
|
|
2886
|
+
},
|
|
2887
|
+
{
|
|
2888
|
+
"name": "minlength",
|
|
2889
|
+
"description": "Minimum required characters for the control.",
|
|
2890
|
+
"values": []
|
|
2891
|
+
},
|
|
2892
|
+
{
|
|
2893
|
+
"name": "rows",
|
|
2894
|
+
"description": "Number of rows to render; updated when resizing.",
|
|
2895
|
+
"values": []
|
|
2896
|
+
},
|
|
2897
|
+
{
|
|
2898
|
+
"name": "wrap",
|
|
2899
|
+
"description": "Wrapping behavior token forwarded to the native control.",
|
|
2900
|
+
"values": []
|
|
2901
|
+
},
|
|
2902
|
+
{
|
|
2903
|
+
"name": "state-layer",
|
|
2904
|
+
"description": "Show the visual state layer element when true",
|
|
2905
|
+
"values": []
|
|
2906
|
+
},
|
|
2907
|
+
{ "name": "type", "values": [] }
|
|
2908
|
+
],
|
|
2909
|
+
"references": []
|
|
2910
|
+
},
|
|
2911
|
+
{
|
|
2912
|
+
"name": "mdw-title",
|
|
2913
|
+
"description": "Material Design Type scale: Title.\n@see https://m3.material.io/styles/typography/type-scale-tokens\n---\n\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\"></slot>",
|
|
2914
|
+
"attributes": [
|
|
2915
|
+
{ "name": "color", "values": [] },
|
|
2916
|
+
{ "name": "ink", "values": [] },
|
|
2917
|
+
{ "name": "type-style", "values": [] },
|
|
2918
|
+
{ "name": "block", "values": [] },
|
|
2919
|
+
{ "name": "inline", "values": [] },
|
|
2920
|
+
{ "name": "row", "values": [] },
|
|
2921
|
+
{ "name": "x", "values": [] },
|
|
2922
|
+
{ "name": "y", "values": [] },
|
|
2923
|
+
{ "name": "gap", "values": [] },
|
|
2924
|
+
{ "name": "padding", "values": [] },
|
|
2925
|
+
{ "name": "text-padding", "values": [] },
|
|
2926
|
+
{ "name": "text-padding-top", "values": [] },
|
|
2927
|
+
{ "name": "text-leading", "values": [] },
|
|
2928
|
+
{ "name": "text-padding-bottom", "values": [] },
|
|
2929
|
+
{ "name": "aria-level", "values": [] },
|
|
2930
|
+
{ "name": "size", "values": [] }
|
|
2931
|
+
],
|
|
2932
|
+
"references": []
|
|
2933
|
+
},
|
|
2934
|
+
{
|
|
2935
|
+
"name": "mdw-tooltip",
|
|
2936
|
+
"description": "Tooltip displays brief helper text when hovering or focusing an element.\n@see https://m3.material.io/components/tooltips/specs\n---\n\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - _default_ - <slot id=\"slot\"></slot>",
|
|
2937
|
+
"attributes": [
|
|
2938
|
+
{ "name": "color", "values": [] },
|
|
2939
|
+
{ "name": "ink", "values": [] },
|
|
2940
|
+
{ "name": "type-style", "values": [] },
|
|
2941
|
+
{ "name": "shape-top", "values": [] },
|
|
2942
|
+
{ "name": "shape-bottom", "values": [] },
|
|
2943
|
+
{ "name": "shape-start", "values": [] },
|
|
2944
|
+
{ "name": "shape-end", "values": [] },
|
|
2945
|
+
{ "name": "shape-style", "values": [] },
|
|
2946
|
+
{ "name": "outlined", "values": [] },
|
|
2947
|
+
{
|
|
2948
|
+
"name": "open",
|
|
2949
|
+
"description": "When true the tooltip is visible/open. This also updates ARIA\n`aria-hidden` for accessibility.",
|
|
2950
|
+
"values": []
|
|
2951
|
+
}
|
|
2952
|
+
],
|
|
2953
|
+
"references": []
|
|
2954
|
+
},
|
|
2955
|
+
{
|
|
2956
|
+
"name": "mdw-top-app-bar",
|
|
2957
|
+
"description": "Top App Bars should have a background-color that is identical to\n`transparent`, though an explicit value allows updating the environment's\nto match the app bar (eg: color system bar).\n\nTop corners are shaped when not scrolling to allow matching with pane, but\nremoved when raised\n---\n\n\n### **Methods:**\n - **expressions(): _<CLASS extends typeof CustomElement, ARGS extends ConstructorParameters<CLASS>, INSTANCE extends InstanceType<CLASS>, PROPS extends { [K in keyof any]: K extends `_${any}` ? ((data: INSTANCE, state?: Record<string, any>) => string | boolean | null) : ((data?: INSTANCE, state?: Record<string, any>) => string | boolean | null); } & ThisType<INSTANCE>>(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>) => CLASS & Class<{ [K in keyof PROPS]: K extends `_${any}` ? never : () => ReturnType<PROPS[K]>; }, ARGS>_** - Expressions are idempotent functions that are selectively called whenever\na render is requested.\nExpressions are constructed exactly as methods though differ in expected\narguments. The first argument should be destructured to ensure each used\nproperty is accessed at least once in order to inspect used properties.\n\nThe Composition API will inspect this function with a proxy for `this` to\ncatalog what observables are used by the expression. This allows the\nComposition API to build a cache as well as selective invoke the expression\nonly when needed.\n\nWhen used with in element templates, the element itself will be passed as\nits first argument.\n````js\n Button\n .prop('filled', 'boolean')\n .prop('outlined', 'boolean')\n .expresssions({\n _isFilledOrOutlined({filled, outlined}) {\n return (filled || outlined)\n },\n })\n .html`<div custom={_isFilledOrOutlined}></div>`;\n````\n\nWhen used with external data source, that data source\nwill be passed to the expression with all properties being `null` at first\ninspection.\n````js\n const externalData = {first: 'John', last: 'Doe'};\n ContactCard\n .expresssions({\n _fullName({first, last}) {\n return [first, last].filter(Boolean).join(' ');\n },\n })\n myButton.render(externalData);\n````\n\nExpressions may be support argumentless calls by using default\nparameters with `this`.\n````js\n Button\n .expresssions({\n isFilledOrOutlined({filled, outlined} = this) {\n return (filled || outlined)\n },\n });\n myButton.isFilledorOutlined();\n````\n\n### **Slots:**\n - **leading** - <slot id=\"leading\" name=\"leading\" on-slotchange=\"{refreshTabIndexes}\"></slot>\n- _default_ - <slot id=\"headline-slot\"></slot>\n- **trailing** - <slot id=\"trailing\" name=\"trailing\" on-slotchange=\"{refreshTabIndexes}\"></slot>\n- **companion** - <slot id=\"companion-slot\" name=\"companion\" size=\"{size}\">{headline}\n </slot>",
|
|
2958
|
+
"attributes": [
|
|
2959
|
+
{
|
|
2960
|
+
"name": "color",
|
|
2961
|
+
"description": "Color token name used for ink/background.",
|
|
2962
|
+
"values": []
|
|
2963
|
+
},
|
|
2964
|
+
{ "name": "ink", "values": [] },
|
|
2965
|
+
{ "name": "type-style", "values": [] },
|
|
2966
|
+
{ "name": "shape-top", "values": [] },
|
|
2967
|
+
{ "name": "shape-bottom", "values": [] },
|
|
2968
|
+
{ "name": "shape-start", "values": [] },
|
|
2969
|
+
{ "name": "shape-end", "values": [] },
|
|
2970
|
+
{ "name": "shape-style", "values": [] },
|
|
2971
|
+
{ "name": "outlined", "values": [] },
|
|
2972
|
+
{ "name": "kbd-nav", "values": [] },
|
|
2973
|
+
{ "name": "sticky-always", "values": [] },
|
|
2974
|
+
{ "name": "sticky-parent", "values": [] },
|
|
2975
|
+
{
|
|
2976
|
+
"name": "headline",
|
|
2977
|
+
"description": "Headline text displayed in the center area.",
|
|
2978
|
+
"values": []
|
|
2979
|
+
},
|
|
2980
|
+
{
|
|
2981
|
+
"name": "size",
|
|
2982
|
+
"description": "Size variant: 'small' | 'medium' | 'large' or `null` to auto-select.",
|
|
2983
|
+
"values": []
|
|
2984
|
+
},
|
|
2985
|
+
{
|
|
2986
|
+
"name": "raised-color",
|
|
2987
|
+
"description": "Color token to use when the bar is raised.",
|
|
2988
|
+
"values": []
|
|
2989
|
+
}
|
|
2990
|
+
],
|
|
2991
|
+
"references": []
|
|
2992
|
+
}
|
|
2993
|
+
]
|
|
2994
|
+
}
|