@hybridui/button - npm Package Compare versions

Comparing version 0.0.34 to 0.0.35

hy-button.component.d.ts

 /**
  * @license
- * Copyright 2023 Google Laabidi Aymen
+ * Copyright 2023 HybridUI, Laabidi Aymen
  * SPDX-License-Identifier: MIT
@@ -9,5 +9,6 @@ */
 /**
- * An Button element.
+ * `hy-button` is a LitElement that provides a customizable button.
+ * @customElement 'hy-button'
  *
- * @fires onClick - Indicates when the count changes
+ * Attributes
  * @slot - This element has a slot
@@ -25,2 +26,4 @@ * @csspart button - The button
  * @attr danger
+ * Events
+ * @fires onClick - Indicates when the count changes
  */
@@ -27,0 +30,0 @@ export declare class HyButtonElement extends LitElement {

hy-button.component.js

 /**
  * @license
- * Copyright 2023 Google Laabidi Aymen
+ * Copyright 2023 HybridUI, Laabidi Aymen
  * SPDX-License-Identifier: MIT
@@ -17,5 +17,6 @@ */
 /**
- * An Button element.
+ * `hy-button` is a LitElement that provides a customizable button.
+ * @customElement 'hy-button'
  *
- * @fires onClick - Indicates when the count changes
+ * Attributes
  * @slot - This element has a slot
@@ -33,2 +34,4 @@ * @csspart button - The button
  * @attr danger
+ * Events
+ * @fires onClick - Indicates when the count changes
  */
@@ -56,5 +59,5 @@ let HyButtonElement = class HyButtonElement extends LitElement {
         var _a;
-        const slott = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#slot');
-        const slt = slott === null || slott === void 0 ? void 0 : slott.assignedNodes();
-        if (slt.length !== 0) {
+        const slot = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#slot');
+        const assignedNodes = slot === null || slot === void 0 ? void 0 : slot.assignedNodes();
+        if (assignedNodes.length !== 0) {
             requestAnimationFrame(() => {
@@ -61,0 +64,0 @@ this.hasSlot = true;

hy-button.style.js

@@ -11,3 +11,11 @@ import { css, html } from 'lit';
     border-radius: var(--hybrid-button-border-radius, 0.25rem);
+    border-top-left-radius: var(--hybrid-button-border-top-left-radius, 0.25rem);
+    border-top-right-radius: var(--hybrid-button-border-top-right-radius, 0.25rem);
+    border-bottom-left-radius: var(--hybrid-button-border-bottom-left-radius, 0.25rem);
+    border-bottom-right-radius: var(--hybrid-button-border-bottom-right-radius, 0.25rem);
+
     border-width: var(--hybrid-button-border-width, 1px);
+    border-right-width: var(--hybrid-button-border-right-width, var(--hybrid-button-border-width, 1px));
+    border-left-width: var(--hybrid-button-border-left-width, var(--hybrid-button-border-width, 1px));
+
     border-color: var(--hybrid-button-border-color, #d0d0d0);
@@ -87,6 +95,3 @@ background-color: var(--hybrid-button-background-color, #f9f9f9);
     color: var(--hybrid-button-danger-text-color, #ffffff);
-    background-color: var(
-      --hybrid-primary-button-danger-background-color,
-      #ff4a00
-    );
+    background-color: var(--hybrid-primary-button-danger-background-color, #ff4a00);
     border-color: var(--hybrid-primary-button-danger-border-color, #ff4a00);
@@ -97,10 +102,4 @@ }
     color: var(--hybrid-button-danger-text-color, #ffffff);
-    background-color: var(
-      --hybrid-primary-button-danger-hover-background-color,
-      #ff4a00
-    );
-    border-color: var(
-      --hybrid-primary-button-danger-hover-border-color,
-      #ff4a00
-    );
+    background-color: var(--hybrid-primary-button-danger-hover-background-color, #ff4a00);
+    border-color: var(--hybrid-primary-button-danger-hover-border-color, #ff4a00);
     opacity: 0.9;
@@ -111,10 +110,4 @@ }
     color: var(--hybrid-button-danger-text-color, #ffffff);
-    background-color: var(
-      --hybrid-primary-button-danger-hover-background-color,
-      #ff4a00
-    );
-    border-color: var(
-      --hybrid-primary-button-danger-hover-border-color,
-      #ff4a00
-    );
+    background-color: var(--hybrid-primary-button-danger-hover-background-color, #ff4a00);
+    border-color: var(--hybrid-primary-button-danger-hover-border-color, #ff4a00);
     opacity: 1;
@@ -153,6 +146,3 @@ }
     cursor: pointer;
-    background-color: var(
-      --hybrid-button-primary-hover-background-color,
-      #0a70ff
-    );
+    background-color: var(--hybrid-button-primary-hover-background-color, #0a70ff);
     border-color: var(--hybrid-button-primary-hover-border-color, #1677ff);
@@ -163,6 +153,3 @@ color: var(--hybrid-button-primary-text-color, #ffffff);
     cursor: pointer;
-    background-color: var(
-      --hybrid-button-primary-active-background-color,
-      #0559cf
-    );
+    background-color: var(--hybrid-button-primary-active-background-color, #0559cf);
     border-color: var(--hybrid-button-primary-active-border-color, #1677ff);
@@ -198,6 +185,3 @@ }
     cursor: pointer;
-    background-color: var(
-      --hybrid-button-text-active-background-color,
-      #c1c1c1
-    );
+    background-color: var(--hybrid-button-text-active-background-color, #c1c1c1);
   }
@@ -243,13 +227,7 @@ button[data-type='text'] {
   button[data-usedas='post'] {
-    border-radius: var(
-      --hybrid-button-usedas-post-border-radius,
-      0 0.3rem 0.3rem 0
-    );
+    border-radius: var(--hybrid-button-usedas-post-border-radius, 0 0.3rem 0.3rem 0);
     height: 100%;
   }
   button[data-usedas='pre'] {
-    border-radius: var(
-      --hybrid-button-usedas-post-border-radius,
-      0.3rem 0 0 0.3rem
-    );
+    border-radius: var(--hybrid-button-usedas-post-border-radius, 0.3rem 0 0 0.3rem);
     height: 100%;
@@ -256,0 +234,0 @@ }

package.json

 {
     "name": "@hybridui/button",
-    "version": "0.0.34",
+    "version": "0.0.35",
     "description": "",
     "main": "index.js",
+    "type": "module",
     "scripts": {
@@ -7,0 +8,0 @@ "test": "echo \"Error: no test specified\" && exit 1"

No alert changes

Improved metrics

Total package byte prevSize

54374

increased by2.02%

Is type module

Yes

Worsened metrics

Lines of code

615

decreased by-2.84%

No dependency changes