@bliss-design-system/button - npm Package Compare versions

Comparing version 1.4.1 to 1.5.0

dist/index.js

@@ -1,25 +0,9 @@
-import{ifDefined as t}from"lit/directives/if-defined.js";import{state as o,property as r}from"lit/decorators.js";import{css as n,LitElement as a,html as e}from"lit";function i(t,o,r,n){var a,e=arguments.length,i=e<3?o:null===n?n=Object.getOwnPropertyDescriptor(o,r):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(t,o,r,n);else for(var s=t.length-1;s>=0;s--)(a=t[s])&&(i=(e<3?a(i):e>3?a(o,r,i):a(o,r))||i);return e>3&&i&&Object.defineProperty(o,r,i),i}const s=n`:host[hidden]{display:none}:host{display:inline-block;outline:0}:host [part=button]{display:inline-flex;align-items:center;justify-content:center;appearance:none;box-sizing:border-box;border:1px solid transparent;border-radius:2px;cursor:pointer;font-weight:600;font-family:inherit;height:auto;margin:0;position:relative;text-decoration:none;user-select:none;white-space:nowrap;font-size:1rem;line-height:1.2;min-height:40px;padding:0 12px}:host [part=button] span{margin:0 4px}:host [part=button] [part=loading],:host [part=button] [part=icon]{display:block;margin:0 4px 0 0}:host [part=button]:disabled{cursor:default;opacity:.5;pointer-events:none}:host [part=button]:not(:disabled):focus-visible,:host [part=button]:not(:disabled):hover:focus-visible,:host [part=button]:not(:disabled):active:focus-visible{outline:2px solid #186bf2;outline-offset:1px}@supports not selector(:focus-visible){:host [part=button]:focus,:host [part=button]:hover:focus,:host [part=button]:active:focus{outline:2px solid #186bf2;outline-offset:1px}}:host([size=small]) [part=button]{font-size:.875rem;min-height:32px;padding:0 8px}:host([size=small]) [part=button] [part=loading],:host([size=small]) [part=button] [part=icon]{display:block;margin:0 0 0 0}:host([full-width]),:host([full-width]) [part=button]{width:100%}:host([icon-only]) [part=button],:host([icon-only][loading]) [part=button],:host([icon-only][icon-trailing]) [part=button]{padding:0 8px}:host([icon-only]) [part=button] [part=loading],:host([icon-only]) [part=button] [part=icon],:host([icon-only][loading]) [part=button] [part=loading],:host([icon-only][loading]) [part=button] [part=icon],:host([icon-only][icon-trailing]) [part=button] [part=loading],:host([icon-only][icon-trailing]) [part=button] [part=icon]{display:block;margin:0}:host([size=small][icon-only]) [part=button],:host([size=small][icon-only][icon-trailing]) [part=button]{padding:0 4px}:host([icon-trailing]) [part=button] [part=icon]{display:block;margin:0 0 0 4px}:host([loading]) [part=button]{opacity:1}:host([loading]) [part=button] [part=loading]{display:inherit;position:absolute}:host([loading]) [part=button] [part=icon],:host([loading]) [part=button] [part=content]{visibility:hidden}:host([icon-only][loading]) [part=button] [part=loading]{display:inherit;position:relative}:host([icon-only][loading]) [part=button] [part=icon]{display:none}:host([size=small][icon-trailing]) [part=button] [part=icon]{display:block;margin:0 0 0 0}:host [part=button]{background-color:#186bf2;border-color:#186bf2;color:#fff}:host(:hover) [part=button]:not(:disabled){background-color:#004ac2;border-color:#004ac2}:host([loading]) [part=button]:disabled,:host(:active) [part=button]:not(:disabled){background-color:#003fa3;border-color:#003fa3}:host([theme=neutral]) [part=button]{background-color:#6c7789;border-color:#6c7789;color:#fff}:host([theme=neutral]:hover) [part=button]:not(:disabled){background-color:#444a55;border-color:#444a55}:host([theme=neutral][loading]) [part=button]:disabled,:host([theme=neutral]:active) [part=button]:not(:disabled){background-color:#32363e;border-color:#32363e}:host([theme=critical]) [part=button]{background-color:#df2033;border-color:#df2033;color:#fff}:host([theme=critical]:hover) [part=button]:not(:disabled){background-color:#8a0a17;border-color:#8a0a17}:host([theme=critical][loading]) [part=button]:disabled,:host([theme=critical]:active) [part=button]:not(:disabled){background-color:#780712;border-color:#780712}:host([variant=secondary]) [part=button]{background-color:#fff;border-color:#186bf2;color:#186bf2}:host([variant=secondary]:hover) [part=button]:not(:disabled){background-color:#f5f8ff;border-color:#004ac2;color:#004ac2}:host([variant=secondary][transparent]) [part=button]{background-color:transparent}:host([variant=secondary][loading]) [part=button]:disabled,:host([variant=secondary]:active) [part=button]:not(:disabled){background-color:#d6e7ff;border-color:#003fa3;color:#003fa3}:host([variant=secondary][theme=neutral]) [part=button]{background-color:#fff;border-color:#6c7789;color:#6c7789}:host([variant=secondary][theme=neutral]:hover) [part=button]:not(:disabled){background-color:#f4f4f6;border-color:#444a55;color:#444a55}:host([variant=secondary][theme=neutral][transparent]) [part=button]{background-color:transparent}:host([variant=secondary][theme=neutral][loading]) [part=button]:disabled,:host([variant=secondary][theme=neutral]:active) [part=button]:not(:disabled){background-color:#e2e5e9;border-color:#32363e;color:#32363e}:host([variant=secondary][theme=critical]) [part=button]{background-color:#fff;border-color:#df2033;color:#df2033}:host([variant=secondary][theme=critical]:hover) [part=button]:not(:disabled){background-color:#fff0f1;border-color:#8a0a17;color:#8a0a17}:host([variant=secondary][theme=critical][transparent]) [part=button]{background-color:transparent}:host([variant=secondary][theme=critical][loading]) [part=button]:disabled,:host([variant=secondary][theme=critical]:active) [part=button]:not(:disabled){background-color:#fed2d6;border-color:#780712;color:#780712}:host([variant=ghost]) [part=button]{background-color:#fff;border-color:#fff;color:#186bf2}:host([variant=ghost]:hover) [part=button]:not(:disabled){background-color:#f5f8ff;border-color:#f5f8ff;color:#004ac2}:host([variant=ghost][transparent]) [part=button]{background-color:transparent;border-color:transparent}:host([variant=ghost][loading]) [part=button]:disabled,:host([variant=ghost]:active) [part=button]:not(:disabled){background-color:#d6e7ff;border-color:#d6e7ff;color:#003fa3}:host([variant=ghost][theme=neutral]) [part=button]{background-color:#fff;border-color:#fff;color:#6c7789}:host([variant=ghost][theme=neutral]:hover) [part=button]:not(:disabled){background-color:#f4f4f6;border-color:#f4f4f6;color:#444a55}:host([variant=ghost][theme=neutral][transparent]) [part=button]{background-color:transparent;border-color:transparent}:host([variant=ghost][theme=neutral][loading]) [part=button]:disabled,:host([variant=ghost][theme=neutral]:active) [part=button]:not(:disabled){background-color:#e2e5e9;border-color:#e2e5e9;color:#32363e}:host([variant=ghost][theme=critical]) [part=button]{background-color:#fff;border-color:#fff;color:#df2033}:host([variant=ghost][theme=critical]:hover) [part=button]:not(:disabled){background-color:#fff0f1;border-color:#fff0f1;color:#8a0a17}:host([variant=ghost][theme=critical][transparent]) [part=button]{background-color:transparent;border-color:transparent}:host([variant=ghost][theme=critical][loading]) [part=button]:disabled,:host([variant=ghost][theme=critical]:active) [part=button]:not(:disabled){background-color:#fed2d6;border-color:#fed2d6;color:#780712}`;var l;const c=Symbol("observer");class d extends a{constructor(){super(),this.iconTrailing=!1,this.iconOnly=!1,this.loading=!1,this.disabled=!1,this.type="button",this.addEventListener("click",this.handleClick,{capture:!0})}static get styles(){return[s]}handleClick(t){if(this.disabled&&!this.href)return t.preventDefault(),t.stopImmediatePropagation(),t.stopPropagation(),!1}setAriaLabel(t){(null==t?void 0:t.trim())||console.warn("%c[Bliss Warn]:","font-weight: 600;","<bliss-button> requires text content."),this.content=(null==t?void 0:t.trim())||""}slotObserver(){if(!this[c]){const t=t=>{t.forEach((t=>{switch(t.type){case"characterData":this.setAriaLabel(t.target.textContent);break;case"attributes":this.renderIcon()}}))};this[c]=new MutationObserver(t)}}observe(){return this.slotObserver(),this[c].observe(this,{attributeFilter:["icon"],characterData:!0,subtree:!0})}connectedCallback(){super.connectedCallback(),this.renderIcon(),this.setAriaLabel(this.textContent),this.observe()}disconnectedCallback(){this[c].disconnect(),super.disconnectedCallback()}get contentTemplate(){const t=e` <slot part="icon" name="icon" aria-hidden></slot> `,o=e` <bliss-loading part="loading"></bliss-loading> `,r=[e`
-        <span part="content" ?hidden=${this.iconOnly}>
-          <slot></slot>
-        </span>
-      `];return this.loading&&r.push(o),this.icon?(this.iconTrailing?r.push(t):r.unshift(t),r):r}renderIcon(){const t=this.querySelector("bliss-icon");if(this.icon)if(t)t.setAttribute("name",this.icon);else{const t=document.createElement("bliss-icon");t.slot="icon",t.setAttribute("name",this.icon),this.append(t)}}renderAnchor(){return e`
-      <a
-        href="${this.href}"
-        target="${t(this.target)}"
-        rel="${t(this.target)}"
-        download="${t(this.download)}"
-        part="button"
-      >
-        ${this.contentTemplate}
-      </a>
-    `}renderButton(){return e`
-      <button
-        ?disabled="${this.disabled||this.loading}"
-        ?aria-disabled="${this.disabled}"
-        aria-label="${this.content}"
-        type="${this.type}"
-        part="button"
-      >
-        ${this.contentTemplate}
-      </button>
-    `}render(){return this.href?this.renderAnchor():this.renderButton()}}l=c,i([o()],d.prototype,l,void 0),i([o()],d.prototype,"content",void 0),i([r({type:String})],d.prototype,"icon",void 0),i([r({type:Boolean,reflect:!0,attribute:"icon-trailing"})],d.prototype,"iconTrailing",void 0),i([r({type:Boolean,reflect:!0,attribute:"icon-only"})],d.prototype,"iconOnly",void 0),i([r({type:Boolean})],d.prototype,"loading",void 0),i([r({type:Boolean})],d.prototype,"disabled",void 0),i([r({type:String})],d.prototype,"type",void 0),i([r({type:String,reflect:!0})],d.prototype,"href",void 0),i([r({reflect:!0})],d.prototype,"target",void 0),i([r({reflect:!0})],d.prototype,"rel",void 0),i([r({reflect:!0})],d.prototype,"download",void 0);const b=()=>{window.customElements.get("bliss-button")?console.info("%c[Bliss Info]:","font-weight: 600;","<bliss-button> has already been registered."):window.customElements.define("bliss-button",d)};export{d as BlissButton,b as blissRegisterButton};
+import { BlissButton } from './BlissButton.js';
+const blissRegisterButton = () => {
+    if (window.customElements.get('bliss-button')) {
+        console.info('%c[Bliss Info]:', 'font-weight: 600;', '<bliss-button> has already been registered.');
+        return;
+    }
+    window.customElements.define('bliss-button', BlissButton);
+};
+export { BlissButton, blissRegisterButton };

package.json

 {
   "name": "@bliss-design-system/button",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "Button component, or an anchor element styled as a button.",
@@ -41,3 +41,3 @@ "repository": {
   "dependencies": {
-    "lit": "^2.0.0"
+    "lit": "2.0.0-rc.2"
   },
@@ -48,4 +48,4 @@ "devDependencies": {
   "peerDependencies": {
-    "@bliss-design-system/icon": "^2.2.0",
-    "@bliss/iconset": "^1.0.2",
+    "@bliss-design-system/icon": "^2.1.1",
+    "@bliss/iconset": "^1.0.5",
     "@bliss-design-system/loading": "^1.2.1"
@@ -52,0 +52,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

240343

increased by1.82%

Number of package files

10

increased by42.86%

Lines of code

690

increased by166.41%

Number of medium supply chain risk alerts

1

decreased by-50%

Dependency changes

• - Removedlit@2.8.0(transitive)

• Updatedlit@2.0.0-rc.2