@m3e/segmented-button 1.0.0-rc.1

package/dist/custom-elements.json

@@ -0,0 +1,548 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/ButtonSegmentElement.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "M3eButtonSegmentElement",
+          "cssProperties": [
+            {
+              "description": "Total height of the segmented button.",
+              "name": "--m3e-segmented-button-height"
+            },
+            {
+              "description": "Thickness of the button’s border.",
+              "name": "--m3e-segmented-button-outline-thickness"
+            },
+            {
+              "description": "Color of the button’s border.",
+              "name": "--m3e-segmented-button-outline-color"
+            },
+            {
+              "description": "Padding on the leading edge of the button content.",
+              "name": "--m3e-segmented-button-padding-start"
+            },
+            {
+              "description": "Padding on the trailing edge of the button content.",
+              "name": "--m3e-segmented-button-padding-end"
+            },
+            {
+              "description": "Horizontal gap between icon and label.",
+              "name": "--m3e-segmented-button-spacing"
+            },
+            {
+              "description": "Font size of the label text.",
+              "name": "--m3e-segmented-button-font-size"
+            },
+            {
+              "description": "Font weight of the label text.",
+              "name": "--m3e-segmented-button-font-weight"
+            },
+            {
+              "description": "Line height of the label text.",
+              "name": "--m3e-segmented-button-line-height"
+            },
+            {
+              "description": "Letter spacing of the label text.",
+              "name": "--m3e-segmented-button-tracking"
+            },
+            {
+              "description": "Leading padding when an icon is present.",
+              "name": "--m3e-segmented-button-with-icon-padding-start"
+            },
+            {
+              "description": "Background color of a selected segment.",
+              "name": "--m3e-segmented-button-selected-container-color"
+            },
+            {
+              "description": "Hover state-layer color for selected segments.",
+              "name": "--m3e-segmented-button-selected-container-hover-color"
+            },
+            {
+              "description": "Focus state-layer color for selected segments.",
+              "name": "--m3e-segmented-button-selected-container-focus-color"
+            },
+            {
+              "description": "Ripple color for selected segments.",
+              "name": "--m3e-segmented-button-selected-ripple-color"
+            },
+            {
+              "description": "Label text color for selected segments.",
+              "name": "--m3e-segmented-button-selected-label-text-color"
+            },
+            {
+              "description": "Icon color for selected segments.",
+              "name": "--m3e-segmented-button-selected-icon-color"
+            },
+            {
+              "description": "Hover state-layer color for unselected segments.",
+              "name": "--m3e-segmented-button-unselected-container-hover-color"
+            },
+            {
+              "description": "Focus state-layer color for unselected segments.",
+              "name": "--m3e-segmented-button-unselected-container-focus-color"
+            },
+            {
+              "description": "Ripple color for unselected segments.",
+              "name": "--m3e-segmented-button-unselected-ripple-color"
+            },
+            {
+              "description": "Label text color for unselected segments.",
+              "name": "--m3e-segmented-button-unselected-label-text-color"
+            },
+            {
+              "description": "Icon color for unselected segments.",
+              "name": "--m3e-segmented-button-unselected-icon-color"
+            },
+            {
+              "description": "Font size of the icon.",
+              "name": "--m3e-segmented-button-icon-size"
+            },
+            {
+              "description": "Base color for disabled segment borders.",
+              "name": "--m3e-segmented-button-disabled-outline-color"
+            },
+            {
+              "description": "Opacity applied to disabled segment borders.",
+              "name": "--m3e-segmented-button-disabled-outline-opacity"
+            },
+            {
+              "description": "Base color for disabled label text.",
+              "name": "--m3e-segmented-button-disabled-label-text-color"
+            },
+            {
+              "description": "Opacity applied to disabled label text.",
+              "name": "--m3e-segmented-button-disabled-label-text-opacity"
+            },
+            {
+              "description": "Base color for disabled icons.",
+              "name": "--m3e-segmented-button-disabled-icon-color"
+            },
+            {
+              "description": "Opacity applied to disabled icons.",
+              "name": "--m3e-segmented-button-disabled-icon-opacity"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Renders the label of the option.",
+              "name": ""
+            },
+            {
+              "description": "Renders an icon before the option's label.",
+              "name": "icon"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "_focusRing",
+              "type": {
+                "text": "M3eFocusRingElement | undefined"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_stateLayer",
+              "type": {
+                "text": "M3eStateLayerElement | undefined"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_ripple",
+              "type": {
+                "text": "M3eRippleElement | undefined"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#clickHandler",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"on\"",
+              "description": "A string representing the value of the segment.",
+              "attribute": "value"
+            },
+            {
+              "kind": "method",
+              "name": "#handleIconSlotChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#handleClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "name": "input",
+              "type": {
+                "text": "Event"
+              },
+              "description": "Emitted when the checked state changes."
+            },
+            {
+              "name": "change",
+              "type": {
+                "text": "Event"
+              },
+              "description": "Emitted when the checked state changes."
+            }
+          ],
+          "attributes": [
+            {
+              "description": "Whether the element is checked.",
+              "name": "checked"
+            },
+            {
+              "description": "Whether the element is disabled.",
+              "name": "disabled"
+            },
+            {
+              "description": "A string representing the value of the segment.",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"on\"",
+              "fieldName": "value"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "Dirty",
+              "package": "@m3e/core"
+            },
+            {
+              "name": "Touched",
+              "package": "@m3e/core"
+            },
+            {
+              "name": "Checked",
+              "package": "@m3e/core"
+            },
+            {
+              "name": "Disabled",
+              "package": "@m3e/core"
+            },
+            {
+              "name": "AttachInternals",
+              "package": "@m3e/core"
+            },
+            {
+              "name": "Role",
+              "package": "@m3e/core"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "m3e-button-segment",
+          "customElement": true,
+          "summary": "A option that can be selected within a segmented button."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "M3eButtonSegmentElement",
+          "declaration": {
+            "name": "M3eButtonSegmentElement",
+            "module": "src/ButtonSegmentElement.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "m3e-button-segment",
+          "declaration": {
+            "name": "M3eButtonSegmentElement",
+            "module": "src/ButtonSegmentElement.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./ButtonSegmentElement\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./SegmentedButtonElement\""
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/SegmentedButtonElement.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "M3eSegmentedButtonElement",
+          "cssProperties": [
+            {
+              "description": "Border radius for the first segment in a segmented button.",
+              "name": "--m3e-segmented-button-start-shape"
+            },
+            {
+              "description": "Border radius for the last segment in a segmented button.",
+              "name": "--m3e-segmented-button-end-shape"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Renders the segments of the button.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "multi",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether multiple options can be selected.",
+              "attribute": "multi"
+            },
+            {
+              "kind": "field",
+              "name": "hideSelectionIndicator",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether to hide the selection indicator.",
+              "attribute": "hide-selection-indicator"
+            },
+            {
+              "kind": "field",
+              "name": "segments",
+              "type": {
+                "text": "readonly M3eButtonSegmentElement[]"
+              },
+              "description": "The segments of the button.",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "selected",
+              "type": {
+                "text": "readonly M3eButtonSegmentElement[]"
+              },
+              "description": "The selected segment(s) of the button.",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string | readonly string[] | null"
+              },
+              "description": "The selected value(s) of the button.",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "#handleSlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "#handleKeyDown",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#handleChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "type": {
+                "text": "Event"
+              },
+              "description": "Emitted when the checked state of a segment changes."
+            },
+            {
+              "description": "Emitted when the checked state of a segment changes.",
+              "name": "input"
+            }
+          ],
+          "attributes": [
+            {
+              "description": "Whether the element is disabled.",
+              "name": "disabled"
+            },
+            {
+              "description": "Whether to hide the selection indicator.",
+              "name": "hide-selection-indicator",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "hideSelectionIndicator"
+            },
+            {
+              "description": "Whether multiple options can be selected.",
+              "name": "multi",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "multi"
+            },
+            {
+              "description": "The name that identifies the element when submitting the associated form.",
+              "name": "name"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "Labelled",
+              "package": "@m3e/core"
+            },
+            {
+              "name": "Dirty",
+              "package": "@m3e/core"
+            },
+            {
+              "name": "Touched",
+              "package": "@m3e/core"
+            },
+            {
+              "name": "FormAssociated",
+              "package": "@m3e/core"
+            },
+            {
+              "name": "Disabled",
+              "package": "@m3e/core"
+            },
+            {
+              "name": "AttachInternals",
+              "package": "@m3e/core"
+            },
+            {
+              "name": "Role",
+              "package": "@m3e/core"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "m3e-segmented-button",
+          "customElement": true,
+          "summary": "A button that allows a user to select from a limited set of options."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "M3eSegmentedButtonElement",
+          "declaration": {
+            "name": "M3eSegmentedButtonElement",
+            "module": "src/SegmentedButtonElement.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "m3e-segmented-button",
+          "declaration": {
+            "name": "M3eSegmentedButtonElement",
+            "module": "src/SegmentedButtonElement.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/html-custom-data.json

@@ -0,0 +1,55 @@
+{
+  "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
+  "version": 1.1,
+  "tags": [
+    {
+      "name": "m3e-button-segment",
+      "description": "A option that can be selected within a segmented button.\n---\n\n\n### **Events:**\n - **input** - Emitted when the checked state changes.\n- **change** - Emitted when the checked state changes.\n\n### **Slots:**\n - _default_ - Renders the label of the option.\n- **icon** - Renders an icon before the option's label.\n\n### **CSS Properties:**\n - **--m3e-segmented-button-height** - Total height of the segmented button. _(default: undefined)_\n- **--m3e-segmented-button-outline-thickness** - Thickness of the button’s border. _(default: undefined)_\n- **--m3e-segmented-button-outline-color** - Color of the button’s border. _(default: undefined)_\n- **--m3e-segmented-button-padding-start** - Padding on the leading edge of the button content. _(default: undefined)_\n- **--m3e-segmented-button-padding-end** - Padding on the trailing edge of the button content. _(default: undefined)_\n- **--m3e-segmented-button-spacing** - Horizontal gap between icon and label. _(default: undefined)_\n- **--m3e-segmented-button-font-size** - Font size of the label text. _(default: undefined)_\n- **--m3e-segmented-button-font-weight** - Font weight of the label text. _(default: undefined)_\n- **--m3e-segmented-button-line-height** - Line height of the label text. _(default: undefined)_\n- **--m3e-segmented-button-tracking** - Letter spacing of the label text. _(default: undefined)_\n- **--m3e-segmented-button-with-icon-padding-start** - Leading padding when an icon is present. _(default: undefined)_\n- **--m3e-segmented-button-selected-container-color** - Background color of a selected segment. _(default: undefined)_\n- **--m3e-segmented-button-selected-container-hover-color** - Hover state-layer color for selected segments. _(default: undefined)_\n- **--m3e-segmented-button-selected-container-focus-color** - Focus state-layer color for selected segments. _(default: undefined)_\n- **--m3e-segmented-button-selected-ripple-color** - Ripple color for selected segments. _(default: undefined)_\n- **--m3e-segmented-button-selected-label-text-color** - Label text color for selected segments. _(default: undefined)_\n- **--m3e-segmented-button-selected-icon-color** - Icon color for selected segments. _(default: undefined)_\n- **--m3e-segmented-button-unselected-container-hover-color** - Hover state-layer color for unselected segments. _(default: undefined)_\n- **--m3e-segmented-button-unselected-container-focus-color** - Focus state-layer color for unselected segments. _(default: undefined)_\n- **--m3e-segmented-button-unselected-ripple-color** - Ripple color for unselected segments. _(default: undefined)_\n- **--m3e-segmented-button-unselected-label-text-color** - Label text color for unselected segments. _(default: undefined)_\n- **--m3e-segmented-button-unselected-icon-color** - Icon color for unselected segments. _(default: undefined)_\n- **--m3e-segmented-button-icon-size** - Font size of the icon. _(default: undefined)_\n- **--m3e-segmented-button-disabled-outline-color** - Base color for disabled segment borders. _(default: undefined)_\n- **--m3e-segmented-button-disabled-outline-opacity** - Opacity applied to disabled segment borders. _(default: undefined)_\n- **--m3e-segmented-button-disabled-label-text-color** - Base color for disabled label text. _(default: undefined)_\n- **--m3e-segmented-button-disabled-label-text-opacity** - Opacity applied to disabled label text. _(default: undefined)_\n- **--m3e-segmented-button-disabled-icon-color** - Base color for disabled icons. _(default: undefined)_\n- **--m3e-segmented-button-disabled-icon-opacity** - Opacity applied to disabled icons. _(default: undefined)_",
+      "attributes": [
+        {
+          "name": "checked",
+          "description": "Whether the element is checked.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Whether the element is disabled.",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "A string representing the value of the segment.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "m3e-segmented-button",
+      "description": "A button that allows a user to select from a limited set of options.\n---\n\n\n### **Events:**\n - **change** - Emitted when the checked state of a segment changes.\n- **input** - Emitted when the checked state of a segment changes.\n\n### **Slots:**\n - _default_ - Renders the segments of the button.\n\n### **CSS Properties:**\n - **--m3e-segmented-button-start-shape** - Border radius for the first segment in a segmented button. _(default: undefined)_\n- **--m3e-segmented-button-end-shape** - Border radius for the last segment in a segmented button. _(default: undefined)_",
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "Whether the element is disabled.",
+          "values": []
+        },
+        {
+          "name": "hide-selection-indicator",
+          "description": "Whether to hide the selection indicator.",
+          "values": []
+        },
+        {
+          "name": "multi",
+          "description": "Whether multiple options can be selected.",
+          "values": []
+        },
+        {
+          "name": "name",
+          "description": "The name that identifies the element when submitting the associated form.",
+          "values": []
+        }
+      ],
+      "references": []
+    }
+  ]
+}