@m3e/split-button 1.0.0-rc.2 → 1.0.0-rc.4

package/README.md

@@ -32,7 +32,7 @@ Alternately, you can explicitly reference the `html-custom-data.json` and `css-c
 }
 ```
 
-## 🚀 Browser Usage
+## 🚀 Native Module Support
 
 This package uses [JavaScript Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#module_specifiers). To use it directly in a browser without a bundler, use a module script similar to the following.
 

package/dist/custom-elements.json

@@ -1296,25 +1296,6 @@
           "kind": "mixin",
           "description": "Mixin that adds support for custom event attributes.",
           "name": "EventAttribute",
-          "members": [
-            {
-              "kind": "method",
-              "name": "dispatchEvent",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            }
-          ],
           "parameters": [
             {
               "name": "base",
@@ -1612,6 +1593,17 @@
           "description": "Mixin to augment an element with behavior used to submit a form.",
           "name": "FormSubmitter",
           "members": [
+            {
+              "kind": "field",
+              "name": "formAssociated",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "readonly": true,
+              "default": "true",
+              "description": "Indicates that this custom element participates in form submission, validation, and form state restoration."
+            },
             {
               "kind": "field",
               "name": "name",
@@ -2148,6 +2140,11 @@
       "kind": "javascript-module",
       "path": "../core/src/shared/mixins/Labelled.ts",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "updateLabels",
+          "description": "A symbol through which to update labels to reflect a control's current state."
+        },
         {
           "kind": "function",
           "name": "isLabelledMixin",
@@ -2197,16 +2194,6 @@
               },
               "description": "The label elements that the element is associated with.",
               "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "[_updateLabels]",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
             }
           ],
           "parameters": [
@@ -2221,6 +2208,14 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "updateLabels",
+          "declaration": {
+            "name": "updateLabels",
+            "module": "../core/src/shared/mixins/Labelled.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "isLabelledMixin",

package/dist/src/SplitButtonElement.d.ts

@@ -0,0 +1,106 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import { ButtonSize } from "@m3e/button";
+import { SplitButtonVariant } from "./SplitButtonVariant";
+declare const M3eSplitButtonElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof LitElement;
+/**
+ * A button used to show an action with a menu of related actions.
+ *
+ * @description
+ * The `m3e-split-button` component presents a primary action alongside a menu of related actions,
+ * uniting two buttons in a single expressive surface. Designed for Material 3, it supports `elevated`,
+ * `filled`, `tonal`, and `outlined` variants, and adapts to all button sizes. The leading button triggers
+ * the main action, while the trailing icon button reveals additional options, enabling efficient workflows
+ * and clear visual hierarchy. The split button ensures accessible, adaptive, and visually harmonious
+ * interactions, reflecting Material 3’s principles of clarity, flexibility, and expressive design.
+ *
+ * @example
+ * The following example illustrates use of the `m3e-split-button` to combine the `m3e-button`,
+ * `m3e-icon-button`, and `m3e-menu` components into a split button.
+ *
+ * ```html
+ * <m3e-split-button>
+ *  <m3e-button slot="leading-button">
+ *    <m3e-icon slot="icon" name="edit"></m3e-icon>Edit
+ *  </m3e-button>
+ *  <m3e-icon-button slot="trailing-button">
+ *  <m3e-icon name="keyboard_arrow_down"></m3e-icon>
+ *  <m3e-menu-trigger for="menu1"></m3e-menu-trigger>
+ * </m3e-icon-button>
+ * ```
+ *
+ * @tag m3e-split-button
+ *
+ * @slot leading-button - The leading button used to perform the primary action.
+ * @slot trailing-button - The trailing icon button used to open a menu of related actions.
+ *
+ * @attr variant - The appearance variant of the button.
+ * @attr size - The size of the button.
+ *
+ * @cssprop --m3e-split-button-extra-small-trailing-button-unselected-leading-space - Leading space for the trailing button (extra-small, unselected).
+ * @cssprop --m3e-split-button-extra-small-trailing-button-unselected-trailing-space - Trailing space for the trailing button (extra-small, unselected).
+ * @cssprop --m3e-split-button-small-trailing-button-unselected-leading-space - Leading space for the trailing button (small, unselected).
+ * @cssprop --m3e-split-button-small-trailing-button-unselected-trailing-space - Trailing space for the trailing button (small, unselected).
+ * @cssprop --m3e-split-button-medium-trailing-button-unselected-leading-space - Leading space for the trailing button (medium, unselected).
+ * @cssprop --m3e-split-button-medium-trailing-button-unselected-trailing-space - Trailing space for the trailing button (medium, unselected).
+ * @cssprop --m3e-split-button-large-trailing-button-unselected-leading-space - Leading space for the trailing button (large, unselected).
+ * @cssprop --m3e-split-button-large-trailing-button-unselected-trailing-space - Trailing space for the trailing button (large, unselected).
+ * @cssprop --m3e-split-button-extra-large-trailing-button-unselected-leading-space - Leading space for the trailing button (extra-large, unselected).
+ * @cssprop --m3e-split-button-extra-large-trailing-button-unselected-trailing-space - Trailing space for the trailing button (extra-large, unselected).
+ * @cssprop --m3e-split-button-extra-small-trailing-button-selected-leading-space - Leading space for the trailing button (extra-small, selected).
+ * @cssprop --m3e-split-button-extra-small-trailing-button-selected-trailing-space - Trailing space for the trailing button (extra-small, selected).
+ * @cssprop --m3e-split-button-small-trailing-button-selected-leading-space - Leading space for the trailing button (small, selected).
+ * @cssprop --m3e-split-button-small-trailing-button-selected-trailing-space - Trailing space for the trailing button (small, selected).
+ * @cssprop --m3e-split-button-medium-trailing-button-selected-leading-space - Leading space for the trailing button (medium, selected).
+ * @cssprop --m3e-split-button-medium-trailing-button-selected-trailing-space - Trailing space for the trailing button (medium, selected).
+ * @cssprop --m3e-split-button-large-trailing-button-selected-leading-space - Leading space for the trailing button (large, selected).
+ * @cssprop --m3e-split-button-large-trailing-button-selected-trailing-space - Trailing space for the trailing button (large, selected).
+ * @cssprop --m3e-split-button-extra-large-trailing-button-selected-leading-space - Leading space for the trailing button (extra-large, selected).
+ * @cssprop --m3e-split-button-extra-large-trailing-button-selected-trailing-space - Trailing space for the trailing button (extra-large, selected).
+ * @cssprop --m3e-split-button-extra-small-inner-corner-size - Inner corner size for the leading/trailing button (extra-small).
+ * @cssprop --m3e-split-button-small-inner-corner-size - Inner corner size for the leading/trailing button (small).
+ * @cssprop --m3e-split-button-medium-inner-corner-size - Inner corner size for the leading/trailing button (medium).
+ * @cssprop --m3e-split-button-large-inner-corner-size - Inner corner size for the leading/trailing button (large).
+ * @cssprop --m3e-split-button-extra-large-inner-corner-size - Inner corner size for the leading/trailing button (extra-large).
+ * @cssprop --m3e-split-button-extra-small-inner-corner-hover-size - Inner corner size on hover (extra-small).
+ * @cssprop --m3e-split-button-small-inner-corner-hover-size - Inner corner size on hover (small).
+ * @cssprop --m3e-split-button-medium-inner-corner-hover-size - Inner corner size on hover (medium).
+ * @cssprop --m3e-split-button-large-inner-corner-hover-size - Inner corner size on hover (large).
+ * @cssprop --m3e-split-button-extra-large-inner-corner-hover-size - Inner corner size on hover (extra-large).
+ * @cssprop --m3e-split-button-extra-small-inner-corner-pressed-size - Inner corner size on press (extra-small).
+ * @cssprop --m3e-split-button-small-inner-corner-pressed-size - Inner corner size on press (small).
+ * @cssprop --m3e-split-button-medium-inner-corner-pressed-size - Inner corner size on press (medium).
+ * @cssprop --m3e-split-button-large-inner-corner-pressed-size - Inner corner size on press (large).
+ * @cssprop --m3e-split-button-extra-large-inner-corner-pressed-size - Inner corner size on press (extra-large).
+ * @cssprop --m3e-split-button-extra-small-between-spacing - Spacing between leading and trailing buttons (extra-small).
+ * @cssprop --m3e-split-button-small-between-spacing - Spacing between leading and trailing buttons (small).
+ * @cssprop --m3e-split-button-medium-between-spacing - Spacing between leading and trailing buttons (medium).
+ * @cssprop --m3e-split-button-large-between-spacing - Spacing between leading and trailing buttons (large).
+ * @cssprop --m3e-split-button-extra-large-between-spacing - Spacing between leading and trailing buttons (extra-large).
+ */
+export declare class M3eSplitButtonElement extends M3eSplitButtonElement_base {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    private readonly _base?;
+    /**
+     * The appearance variant of the button.
+     * @default "filled"
+     */
+    variant: SplitButtonVariant;
+    /**
+     * The size of the button.
+     * @default "small"
+     */
+    size: ButtonSize;
+    /** @inheritdoc */
+    protected update(changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-split-button": M3eSplitButtonElement;
+    }
+}
+export {};
+//# sourceMappingURL=SplitButtonElement.d.ts.map

package/dist/src/SplitButtonElement.d.ts.map

@@ -0,0 +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"}

package/dist/src/SplitButtonVariant.d.ts

@@ -0,0 +1,3 @@
+/** Specifies the possible appearance variants of a split button. */
+export type SplitButtonVariant = "elevated" | "filled" | "tonal" | "outlined";
+//# sourceMappingURL=SplitButtonVariant.d.ts.map

package/dist/src/SplitButtonVariant.d.ts.map

@@ -0,0 +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"}

package/dist/src/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./SplitButtonElement";
+export * from "./SplitButtonVariant";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -0,0 +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

@@ -1,6 +1,6 @@
 {
   "name": "@m3e/split-button",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.4",
   "description": "Split Button for M3E",
   "author": "matraic <matraic@yahoo.com>",
   "license": "MIT",
@@ -27,10 +27,10 @@
     "clean": "rimraf dist"
   },
   "peerDependencies": {
-    "@m3e/core": "1.0.0-rc.2",
-    "@m3e/button": "1.0.0-rc.2",
-    "@m3e/icon-button": "1.0.0-rc.2",
-    "@m3e/button-group": "1.0.0-rc.2",
+    "@m3e/core": "1.0.0-rc.4",
+    "@m3e/button": "1.0.0-rc.4",
+    "@m3e/icon-button": "1.0.0-rc.4",
+    "@m3e/button-group": "1.0.0-rc.4",
     "lit": "^3.3.0"
   },
   "devDependencies": {