@3mo/button-group - npm Package Compare versions

Comparing version 0.1.11 to 0.2.0

dist/ButtonGroup.d.ts

@@ -20,3 +20,3 @@ import { Component } from '@a11d/lit';
     direction: Flex['direction'];
-    type: ButtonType;
+    type: Exclude<ButtonType, ButtonType.Elevated>;
     static get styles(): import("@a11d/lit").CSSResult;
@@ -23,0 +23,0 @@ protected readonly slotController: SlotController;

dist/ButtonGroup.js

 import { __decorate } from "tslib";
-import { component, css, Component, html, property } from '@a11d/lit';
+import { component, css, Component, html, property, unsafeCSS } from '@a11d/lit';
 import { SlotController } from '@3mo/slot-controller';
@@ -22,6 +22,9 @@ import { Button, ButtonType } from '@3mo/button';
         this.direction = 'horizontal';
-        this.type = ButtonType.Normal;
+        this.type = ButtonType.Text;
         this.slotController = new SlotController(this);
     }
     static get styles() {
+        const text = unsafeCSS(ButtonType.Text);
+        const outlined = unsafeCSS(ButtonType.Outlined);
+        const filled = unsafeCSS(ButtonType.Filled);
         return css `
@@ -36,47 +39,54 @@ :host {
 				border-radius: 0px;
-				--mdc-button-raised-box-shadow: none;
 			}
 
-			:host([direction=vertical]) ::slotted([instanceof*=mo-button][data-mo-button-group-first]) {
-				border-start-start-radius: var(--mo-button-group-border-radius, var(--mo-border-radius));
-				border-start-end-radius: var(--mo-button-group-border-radius, var(--mo-border-radius));
-			}
+			:host([direction=vertical]) {
+				::slotted([instanceof*=mo-button][data-mo-button-group-first]) {
+					border-start-start-radius: var(--mo-button-group-border-radius, var(--mo-border-radius));
+					border-start-end-radius: var(--mo-button-group-border-radius, var(--mo-border-radius));
+				}
 
-			:host([direction=vertical]) ::slotted([instanceof*=mo-button][data-mo-button-group-last]) {
-				border-end-end-radius: var(--mo-button-group-border-radius, var(--mo-border-radius));
-				border-end-start-radius: var(--mo-button-group-border-radius, var(--mo-border-radius));
+				::slotted([instanceof*=mo-button][data-mo-button-group-last]) {
+					border-end-end-radius: var(--mo-button-group-border-radius, var(--mo-border-radius));
+					border-end-start-radius: var(--mo-button-group-border-radius, var(--mo-border-radius));
+				}
 			}
 
-			:host([direction=vertical-reversed]) ::slotted([instanceof*=mo-button][data-mo-button-group-first]) {
-				border-end-end-radius: var(--mo-button-group-border-radius, var(--mo-border-radius));
-				border-end-start-radius: var(--mo-button-group-border-radius, var(--mo-border-radius));
-			}
+			:host([direction=vertical-reversed]) {
+				::slotted([instanceof*=mo-button][data-mo-button-group-first]) {
+					border-end-end-radius: var(--mo-button-group-border-radius, var(--mo-border-radius));
+					border-end-start-radius: var(--mo-button-group-border-radius, var(--mo-border-radius));
+				}
 
-			:host([direction=vertical-reversed]) ::slotted([instanceof*=mo-button][data-mo-button-group-last]) {
-				border-start-start-radius: var(--mo-button-group-border-radius, var(--mo-border-radius));
-				border-start-end-radius: var(--mo-button-group-border-radius, var(--mo-border-radius));
+				::slotted([instanceof*=mo-button][data-mo-button-group-last]) {
+					border-start-start-radius: var(--mo-button-group-border-radius, var(--mo-border-radius));
+					border-start-end-radius: var(--mo-button-group-border-radius, var(--mo-border-radius));
+				}
 			}
 
-			:host([direction=horizontal]) ::slotted([instanceof*=mo-button][data-mo-button-group-first]) {
-				border-start-start-radius: var(--mo-button-group-border-radius, var(--mo-border-radius));
-				border-end-start-radius: var(--mo-button-group-border-radius, var(--mo-border-radius));
-			}
+			:host([direction=horizontal]) {
+				::slotted([instanceof*=mo-button][data-mo-button-group-first]) {
+					border-start-start-radius: var(--mo-button-group-border-radius, var(--mo-border-radius));
+					border-end-start-radius: var(--mo-button-group-border-radius, var(--mo-border-radius));
+				}
 
-			:host([direction=horizontal]) ::slotted([instanceof*=mo-button][data-mo-button-group-last]) {
-				border-start-end-radius: var(--mo-button-group-border-radius, var(--mo-border-radius));
-				border-end-end-radius: var(--mo-button-group-border-radius, var(--mo-border-radius));
+				::slotted([instanceof*=mo-button][data-mo-button-group-last]) {
+					border-start-end-radius: var(--mo-button-group-border-radius, var(--mo-border-radius));
+					border-end-end-radius: var(--mo-button-group-border-radius, var(--mo-border-radius));
+				}
 			}
 
-			:host([direction=horizontal-reversed]) ::slotted([instanceof*=mo-button][data-mo-button-group-first]) {
-				border-start-end-radius: var(--mo-button-group-border-radius, var(--mo-border-radius));
-				border-end-end-radius: var(--mo-button-group-border-radius, var(--mo-border-radius));
-			}
+			:host([direction=horizontal-reversed]) {
+				::slotted([instanceof*=mo-button][data-mo-button-group-first]) {
+					border-start-end-radius: var(--mo-button-group-border-radius, var(--mo-border-radius));
+					border-end-end-radius: var(--mo-button-group-border-radius, var(--mo-border-radius));
+				}
 
-			:host([direction=horizontal-reversed]) ::slotted([instanceof*=mo-button][data-mo-button-group-last]) {
-				border-start-start-radius: var(--mo-button-group-border-radius, var(--mo-border-radius));
-				border-end-start-radius: var(--mo-button-group-border-radius, var(--mo-border-radius));
+				::slotted([instanceof*=mo-button][data-mo-button-group-last]) {
+					border-start-start-radius: var(--mo-button-group-border-radius, var(--mo-border-radius));
+					border-end-start-radius: var(--mo-button-group-border-radius, var(--mo-border-radius));
+				}
 			}
 
 			/* Separator */
-			:host(:not([type=outlined])) ::slotted([instanceof*=mo-button]:not([data-mo-button-group-last]))::after {
+			:host(:not([type=${outlined}])) ::slotted([instanceof*=mo-button]:not([data-mo-button-group-last]))::after {
 				content: '';
@@ -86,40 +96,43 @@ position: absolute;
 
-			:host([type=normal]) ::slotted([instanceof*=mo-button]:not([data-mo-button-group-last]))::after {
-				background: var(--mo-button-group-separator-color, color-mix(in srgb, var(--mo-color-foreground), transparent 70%));
+			:host([type=${text}]) ::slotted([instanceof*=mo-button]:not([data-mo-button-group-last]))::after {
+				background: var(--mo-button-group-separator-color, color-mix(in srgb, currentColor, transparent 70%));
 			}
 
-			:host([type=unelevated]) ::slotted([instanceof*=mo-button]:not([data-mo-button-group-last]))::after,
-			:host([type=raised]) ::slotted([instanceof*=mo-button]:not([data-mo-button-group-last]))::after {
-				background: var(--mo-button-group-separator-color, color-mix(in srgb, var(--mo-color-on-accent), transparent 70%));
+			:host([type=${filled}]) {
+				::slotted([instanceof*=mo-button]:not([data-mo-button-group-last]))::after {
+					background: var(--mo-button-group-separator-color, color-mix(in srgb, var(--mo-color-on-accent), transparent 70%));
+				}
 			}
 
-			:host([direction=vertical]:not([type=outlined])) ::slotted([instanceof*=mo-button]:not([data-mo-button-group-last]))::after,
-			:host([direction=vertical-reversed]:not([type=outlined])) ::slotted([instanceof*=mo-button]:not([data-mo-button-group-last]))::after {
-				inset-inline-end: 15%;
-				inset-inline-start: 15%;
-				width: 70%;
-				height: 1px;
+			:host([direction=vertical]:not([type=${outlined}])), :host([direction=vertical-reversed]:not([type=${filled}])) {
+				::slotted([instanceof*=mo-button]:not([data-mo-button-group-last]))::after {
+					inset-inline-end: 15%;
+					inset-inline-start: 15%;
+					width: 70%;
+					height: 1px;
+				}
 			}
 
-			:host([direction=vertical]:not([type=outlined])) ::slotted([instanceof*=mo-button]:not([data-mo-button-group-last]))::after {
+			:host([direction=vertical]:not([type=${outlined}])) ::slotted([instanceof*=mo-button]:not([data-mo-button-group-last]))::after {
 				bottom: 0px;
 			}
 
-			:host([direction=vertical-reversed]:not([type=outlined])) ::slotted([instanceof*=mo-button]:not([data-mo-button-group-last]))::after {
+			:host([direction=vertical-reversed]:not([type=${outlined}])) ::slotted([instanceof*=mo-button]:not([data-mo-button-group-last]))::after {
 				top: 0px;
 			}
 
-			:host([direction=horizontal]:not([type=outlined])) ::slotted([instanceof*=mo-button]:not([data-mo-button-group-last]))::after,
-			:host([direction=horizontal-reversed]:not([type=outlined])) ::slotted([instanceof*=mo-button]:not([data-mo-button-group-last]))::after {
-				top: 15%;
-				bottom: 15%;
-				height: 70%;
-				width: 1px;
+			:host([direction=horizontal]:not([type=${outlined}])), :host([direction=horizontal-reversed]:not([type=${outlined}])) {
+				::slotted([instanceof*=mo-button]:not([data-mo-button-group-last]))::after {
+					top: 15%;
+					bottom: 15%;
+					height: 70%;
+					width: 1px;
+				}
 			}
 
-			:host([direction=horizontal]:not([type=outlined])) ::slotted([instanceof*=mo-button]:not([data-mo-button-group-last]))::after {
+			:host([direction=horizontal]:not([type=${outlined}])) ::slotted([instanceof*=mo-button]:not([data-mo-button-group-last]))::after {
 				inset-inline-end: 0px;
 			}
 
-			:host([direction=horizontal-reversed]:not([type=outlined])) ::slotted([instanceof*=mo-button]:not([data-mo-button-group-last]))::after {
+			:host([direction=horizontal-reversed]:not([type=${outlined}])) ::slotted([instanceof*=mo-button]:not([data-mo-button-group-last]))::after {
 				inset-inline-start: 0px;
@@ -129,15 +142,15 @@ }
 			/* The following 4 rules won't work due to ::part selector and ::slotted selectors cannot be used together. https://github.com/w3c/csswg-drafts/issues/3896 */
-			:host([direction=vertical][type=outlined]) ::slotted([instanceof*=mo-button]:not([data-mo-button-group-last]))::part(button) {
-				border-bottom-width: 0px;
+			:host([direction=vertical][type=${outlined}]) ::slotted([instanceof*=mo-button]:not([data-mo-button-group-last]))::part(button) {
+				border-block-end-width: 0px;
 			}
 
-			:host([direction=vertical-reversed][type=outlined]) ::slotted([instanceof*=mo-button]:not([data-mo-button-group-last]))::part(button) {
-				border-top-width: 0px;
+			:host([direction=vertical-reversed][type=${outlined}]) ::slotted([instanceof*=mo-button]:not([data-mo-button-group-last]))::part(button) {
+				border-block-start-width: 0px;
 			}
 
-			:host([direction=horizontal][type=outlined]) ::slotted([instanceof*=mo-button]:not([data-mo-button-group-last]))::part(button) {
+			:host([direction=horizontal][type=${outlined}]) ::slotted([instanceof*=mo-button]:not([data-mo-button-group-last]))::part(button) {
 				border-inline-end-width: 0px;
 			}
 
-			:host([direction=horizontal-reversed][type=outlined]) ::slotted([instanceof*=mo-button]:not([data-mo-button-group-last]))::part(button) {
+			:host([direction=horizontal-reversed][type=${outlined}]) ::slotted([instanceof*=mo-button]:not([data-mo-button-group-last]))::part(button) {
 				border-inline-start-width: 0px;
@@ -144,0 +157,0 @@ }

dist/custom-elements.json

@@ -17,4 +17,4 @@ {
 					"description": "The type of the buttons which will be passed down to all buttons.",
-					"type": "ButtonType",
-					"default": "\"normal\""
+					"type": "ButtonType.Text | ButtonType.Outlined | ButtonType.Filled",
+					"default": "\"text\""
 				}
@@ -34,4 +34,4 @@ ],
 					"description": "The type of the buttons which will be passed down to all buttons.",
-					"type": "ButtonType",
-					"default": "\"normal\""
+					"type": "ButtonType.Text | ButtonType.Outlined | ButtonType.Filled",
+					"default": "\"text\""
 				}
@@ -68,3 +68,3 @@ ],
 					"description": "The type of the buttons which will be passed down to all buttons.",
-					"type": "ButtonType"
+					"type": "ButtonType.Text | ButtonType.Outlined | ButtonType.Filled"
 				}
@@ -83,3 +83,3 @@ ],
 					"description": "The type of the buttons which will be passed down to all buttons.",
-					"type": "ButtonType"
+					"type": "ButtonType.Text | ButtonType.Outlined | ButtonType.Filled"
 				}
@@ -86,0 +86,0 @@ ],

package.json

 {
 	"name": "@3mo/button-group",
-	"version": "0.1.11",
+	"version": "0.2.0",
 	"description": "A button-group web-component.",
@@ -5,0 +5,0 @@ "repository": {

No alert changes

Improved metrics

Lines of code

301

increased by4.51%

Worsened metrics

Total package byte prevSize

78998

decreased by-8.2%

No dependency changes