@m3e/split-button 1.0.0-rc.2 → 1.0.0-rc.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/custom-elements.json +11 -19
- package/dist/src/SplitButtonElement.d.ts +106 -0
- package/dist/src/SplitButtonElement.d.ts.map +1 -0
- package/dist/src/SplitButtonVariant.d.ts +3 -0
- package/dist/src/SplitButtonVariant.d.ts.map +1 -0
- package/dist/src/index.d.ts +3 -0
- package/dist/src/index.d.ts.map +1 -0
- package/package.json +5 -5
|
@@ -1296,25 +1296,6 @@
|
|
|
1296
1296
|
"kind": "mixin",
|
|
1297
1297
|
"description": "Mixin that adds support for custom event attributes.",
|
|
1298
1298
|
"name": "EventAttribute",
|
|
1299
|
-
"members": [
|
|
1300
|
-
{
|
|
1301
|
-
"kind": "method",
|
|
1302
|
-
"name": "dispatchEvent",
|
|
1303
|
-
"return": {
|
|
1304
|
-
"type": {
|
|
1305
|
-
"text": "boolean"
|
|
1306
|
-
}
|
|
1307
|
-
},
|
|
1308
|
-
"parameters": [
|
|
1309
|
-
{
|
|
1310
|
-
"name": "event",
|
|
1311
|
-
"type": {
|
|
1312
|
-
"text": "Event"
|
|
1313
|
-
}
|
|
1314
|
-
}
|
|
1315
|
-
]
|
|
1316
|
-
}
|
|
1317
|
-
],
|
|
1318
1299
|
"parameters": [
|
|
1319
1300
|
{
|
|
1320
1301
|
"name": "base",
|
|
@@ -1612,6 +1593,17 @@
|
|
|
1612
1593
|
"description": "Mixin to augment an element with behavior used to submit a form.",
|
|
1613
1594
|
"name": "FormSubmitter",
|
|
1614
1595
|
"members": [
|
|
1596
|
+
{
|
|
1597
|
+
"kind": "field",
|
|
1598
|
+
"name": "formAssociated",
|
|
1599
|
+
"type": {
|
|
1600
|
+
"text": "boolean"
|
|
1601
|
+
},
|
|
1602
|
+
"static": true,
|
|
1603
|
+
"readonly": true,
|
|
1604
|
+
"default": "true",
|
|
1605
|
+
"description": "Indicates that this custom element participates in form submission, validation, and form state restoration."
|
|
1606
|
+
},
|
|
1615
1607
|
{
|
|
1616
1608
|
"kind": "field",
|
|
1617
1609
|
"name": "name",
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
import { CSSResultGroup, LitElement, PropertyValues } from "lit";
|
|
2
|
+
import { ButtonSize } from "@m3e/button";
|
|
3
|
+
import { SplitButtonVariant } from "./SplitButtonVariant";
|
|
4
|
+
declare const M3eSplitButtonElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof LitElement;
|
|
5
|
+
/**
|
|
6
|
+
* A button used to show an action with a menu of related actions.
|
|
7
|
+
*
|
|
8
|
+
* @description
|
|
9
|
+
* The `m3e-split-button` component presents a primary action alongside a menu of related actions,
|
|
10
|
+
* uniting two buttons in a single expressive surface. Designed for Material 3, it supports `elevated`,
|
|
11
|
+
* `filled`, `tonal`, and `outlined` variants, and adapts to all button sizes. The leading button triggers
|
|
12
|
+
* the main action, while the trailing icon button reveals additional options, enabling efficient workflows
|
|
13
|
+
* and clear visual hierarchy. The split button ensures accessible, adaptive, and visually harmonious
|
|
14
|
+
* interactions, reflecting Material 3’s principles of clarity, flexibility, and expressive design.
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* The following example illustrates use of the `m3e-split-button` to combine the `m3e-button`,
|
|
18
|
+
* `m3e-icon-button`, and `m3e-menu` components into a split button.
|
|
19
|
+
*
|
|
20
|
+
* ```html
|
|
21
|
+
* <m3e-split-button>
|
|
22
|
+
* <m3e-button slot="leading-button">
|
|
23
|
+
* <m3e-icon slot="icon" name="edit"></m3e-icon>Edit
|
|
24
|
+
* </m3e-button>
|
|
25
|
+
* <m3e-icon-button slot="trailing-button">
|
|
26
|
+
* <m3e-icon name="keyboard_arrow_down"></m3e-icon>
|
|
27
|
+
* <m3e-menu-trigger for="menu1"></m3e-menu-trigger>
|
|
28
|
+
* </m3e-icon-button>
|
|
29
|
+
* ```
|
|
30
|
+
*
|
|
31
|
+
* @tag m3e-split-button
|
|
32
|
+
*
|
|
33
|
+
* @slot leading-button - The leading button used to perform the primary action.
|
|
34
|
+
* @slot trailing-button - The trailing icon button used to open a menu of related actions.
|
|
35
|
+
*
|
|
36
|
+
* @attr variant - The appearance variant of the button.
|
|
37
|
+
* @attr size - The size of the button.
|
|
38
|
+
*
|
|
39
|
+
* @cssprop --m3e-split-button-extra-small-trailing-button-unselected-leading-space - Leading space for the trailing button (extra-small, unselected).
|
|
40
|
+
* @cssprop --m3e-split-button-extra-small-trailing-button-unselected-trailing-space - Trailing space for the trailing button (extra-small, unselected).
|
|
41
|
+
* @cssprop --m3e-split-button-small-trailing-button-unselected-leading-space - Leading space for the trailing button (small, unselected).
|
|
42
|
+
* @cssprop --m3e-split-button-small-trailing-button-unselected-trailing-space - Trailing space for the trailing button (small, unselected).
|
|
43
|
+
* @cssprop --m3e-split-button-medium-trailing-button-unselected-leading-space - Leading space for the trailing button (medium, unselected).
|
|
44
|
+
* @cssprop --m3e-split-button-medium-trailing-button-unselected-trailing-space - Trailing space for the trailing button (medium, unselected).
|
|
45
|
+
* @cssprop --m3e-split-button-large-trailing-button-unselected-leading-space - Leading space for the trailing button (large, unselected).
|
|
46
|
+
* @cssprop --m3e-split-button-large-trailing-button-unselected-trailing-space - Trailing space for the trailing button (large, unselected).
|
|
47
|
+
* @cssprop --m3e-split-button-extra-large-trailing-button-unselected-leading-space - Leading space for the trailing button (extra-large, unselected).
|
|
48
|
+
* @cssprop --m3e-split-button-extra-large-trailing-button-unselected-trailing-space - Trailing space for the trailing button (extra-large, unselected).
|
|
49
|
+
* @cssprop --m3e-split-button-extra-small-trailing-button-selected-leading-space - Leading space for the trailing button (extra-small, selected).
|
|
50
|
+
* @cssprop --m3e-split-button-extra-small-trailing-button-selected-trailing-space - Trailing space for the trailing button (extra-small, selected).
|
|
51
|
+
* @cssprop --m3e-split-button-small-trailing-button-selected-leading-space - Leading space for the trailing button (small, selected).
|
|
52
|
+
* @cssprop --m3e-split-button-small-trailing-button-selected-trailing-space - Trailing space for the trailing button (small, selected).
|
|
53
|
+
* @cssprop --m3e-split-button-medium-trailing-button-selected-leading-space - Leading space for the trailing button (medium, selected).
|
|
54
|
+
* @cssprop --m3e-split-button-medium-trailing-button-selected-trailing-space - Trailing space for the trailing button (medium, selected).
|
|
55
|
+
* @cssprop --m3e-split-button-large-trailing-button-selected-leading-space - Leading space for the trailing button (large, selected).
|
|
56
|
+
* @cssprop --m3e-split-button-large-trailing-button-selected-trailing-space - Trailing space for the trailing button (large, selected).
|
|
57
|
+
* @cssprop --m3e-split-button-extra-large-trailing-button-selected-leading-space - Leading space for the trailing button (extra-large, selected).
|
|
58
|
+
* @cssprop --m3e-split-button-extra-large-trailing-button-selected-trailing-space - Trailing space for the trailing button (extra-large, selected).
|
|
59
|
+
* @cssprop --m3e-split-button-extra-small-inner-corner-size - Inner corner size for the leading/trailing button (extra-small).
|
|
60
|
+
* @cssprop --m3e-split-button-small-inner-corner-size - Inner corner size for the leading/trailing button (small).
|
|
61
|
+
* @cssprop --m3e-split-button-medium-inner-corner-size - Inner corner size for the leading/trailing button (medium).
|
|
62
|
+
* @cssprop --m3e-split-button-large-inner-corner-size - Inner corner size for the leading/trailing button (large).
|
|
63
|
+
* @cssprop --m3e-split-button-extra-large-inner-corner-size - Inner corner size for the leading/trailing button (extra-large).
|
|
64
|
+
* @cssprop --m3e-split-button-extra-small-inner-corner-hover-size - Inner corner size on hover (extra-small).
|
|
65
|
+
* @cssprop --m3e-split-button-small-inner-corner-hover-size - Inner corner size on hover (small).
|
|
66
|
+
* @cssprop --m3e-split-button-medium-inner-corner-hover-size - Inner corner size on hover (medium).
|
|
67
|
+
* @cssprop --m3e-split-button-large-inner-corner-hover-size - Inner corner size on hover (large).
|
|
68
|
+
* @cssprop --m3e-split-button-extra-large-inner-corner-hover-size - Inner corner size on hover (extra-large).
|
|
69
|
+
* @cssprop --m3e-split-button-extra-small-inner-corner-pressed-size - Inner corner size on press (extra-small).
|
|
70
|
+
* @cssprop --m3e-split-button-small-inner-corner-pressed-size - Inner corner size on press (small).
|
|
71
|
+
* @cssprop --m3e-split-button-medium-inner-corner-pressed-size - Inner corner size on press (medium).
|
|
72
|
+
* @cssprop --m3e-split-button-large-inner-corner-pressed-size - Inner corner size on press (large).
|
|
73
|
+
* @cssprop --m3e-split-button-extra-large-inner-corner-pressed-size - Inner corner size on press (extra-large).
|
|
74
|
+
* @cssprop --m3e-split-button-extra-small-between-spacing - Spacing between leading and trailing buttons (extra-small).
|
|
75
|
+
* @cssprop --m3e-split-button-small-between-spacing - Spacing between leading and trailing buttons (small).
|
|
76
|
+
* @cssprop --m3e-split-button-medium-between-spacing - Spacing between leading and trailing buttons (medium).
|
|
77
|
+
* @cssprop --m3e-split-button-large-between-spacing - Spacing between leading and trailing buttons (large).
|
|
78
|
+
* @cssprop --m3e-split-button-extra-large-between-spacing - Spacing between leading and trailing buttons (extra-large).
|
|
79
|
+
*/
|
|
80
|
+
export declare class M3eSplitButtonElement extends M3eSplitButtonElement_base {
|
|
81
|
+
#private;
|
|
82
|
+
/** The styles of the element. */
|
|
83
|
+
static styles: CSSResultGroup;
|
|
84
|
+
private readonly _base?;
|
|
85
|
+
/**
|
|
86
|
+
* The appearance variant of the button.
|
|
87
|
+
* @default "filled"
|
|
88
|
+
*/
|
|
89
|
+
variant: SplitButtonVariant;
|
|
90
|
+
/**
|
|
91
|
+
* The size of the button.
|
|
92
|
+
* @default "small"
|
|
93
|
+
*/
|
|
94
|
+
size: ButtonSize;
|
|
95
|
+
/** @inheritdoc */
|
|
96
|
+
protected update(changedProperties: PropertyValues<this>): void;
|
|
97
|
+
/** @inheritdoc */
|
|
98
|
+
protected render(): unknown;
|
|
99
|
+
}
|
|
100
|
+
declare global {
|
|
101
|
+
interface HTMLElementTagNameMap {
|
|
102
|
+
"m3e-split-button": M3eSplitButtonElement;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
export {};
|
|
106
|
+
//# sourceMappingURL=SplitButtonElement.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SplitButtonElement.d.ts","sourceRoot":"","sources":["../../src/SplitButtonElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI5E,OAAO,EAAoB,UAAU,EAAE,MAAM,aAAa,CAAC;AAG3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0EG;AACH,qBACa,qBAAsB,SAAQ,0BAAyB;;IAClE,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAyPpC;IAEc,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAc;IAoCrD;;;OAGG;IAC0B,OAAO,EAAE,kBAAkB,CAAY;IAEpE;;;OAGG;IAC0B,IAAI,EAAE,UAAU,CAAW;IAExD,kBAAkB;cACC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQxE,kBAAkB;cACC,MAAM,IAAI,OAAO;CAoFrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,qBAAqB,CAAC;KAC3C;CACF"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SplitButtonVariant.d.ts","sourceRoot":"","sources":["../../src/SplitButtonVariant.ts"],"names":[],"mappings":"AAAA,oEAAoE;AACpE,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@m3e/split-button",
|
|
3
|
-
"version": "1.0.0-rc.
|
|
3
|
+
"version": "1.0.0-rc.3",
|
|
4
4
|
"description": "Split Button for M3E",
|
|
5
5
|
"author": "matraic <matraic@yahoo.com>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -27,10 +27,10 @@
|
|
|
27
27
|
"clean": "rimraf dist"
|
|
28
28
|
},
|
|
29
29
|
"peerDependencies": {
|
|
30
|
-
"@m3e/core": "1.0.0-rc.
|
|
31
|
-
"@m3e/button": "1.0.0-rc.
|
|
32
|
-
"@m3e/icon-button": "1.0.0-rc.
|
|
33
|
-
"@m3e/button-group": "1.0.0-rc.
|
|
30
|
+
"@m3e/core": "1.0.0-rc.3",
|
|
31
|
+
"@m3e/button": "1.0.0-rc.3",
|
|
32
|
+
"@m3e/icon-button": "1.0.0-rc.3",
|
|
33
|
+
"@m3e/button-group": "1.0.0-rc.3",
|
|
34
34
|
"lit": "^3.3.0"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|