@crowdstrike/glide-core 0.14.0 → 0.14.1

package/dist/drawer.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,s,o){var i,l=arguments.length,r=l<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,s):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,s,o);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(r=(l<3?i(r):l>3?i(t,s,r):i(t,s))||r);return l>3&&r&&Object.defineProperty(t,s,r),r};import{LitElement,html,nothing}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{owSlot}from"./library/ow.js";import styles from"./drawer.styles.js";let GlideCoreDrawer=class GlideCoreDrawer extends LitElement{constructor(){super(...arguments),this.label="",this.pinned=!1,this.#e=createRef(),this.#t=createRef(),this.#s=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get open(){return this.#s}set open(e){this.#s=e,this.#s?(this.#e?.value?.addEventListener("transitionend",(()=>{this.#e?.value?.focus()}),{once:!0}),this.#e?.value?.classList?.add("open")):(this.#e?.value?.addEventListener("transitionend",(()=>{this.#e?.value?.classList?.remove("open"),this.#e?.value?.classList?.remove("closing"),this.dispatchEvent(new Event("close",{bubbles:!0}))}),{once:!0}),this.#e?.value?.classList?.add("closing"))}close(){this.open=!1}firstUpdated(){owSlot(this.#t.value),this.#s&&this.#e?.value?.classList?.add("open")}render(){return html`<aside class="${classMap({component:!0,pinned:this.pinned})}" tabindex="-1" data-test="${this.#s?"open":"closed"}" @keydown="${this.#o}" ${ref(this.#e)} aria-label="${this.label||nothing}"><slot @slotchange="${this.#i}" ${ref(this.#t)}></slot></aside>`}show(){this.open=!0}#e;#t;#s;#i(){owSlot(this.#t.value)}#o(e){"Escape"===e.key&&(e.preventDefault(),this.close())}};__decorate([property()],GlideCoreDrawer.prototype,"label",void 0),__decorate([property({type:Boolean})],GlideCoreDrawer.prototype,"pinned",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDrawer.prototype,"open",null),GlideCoreDrawer=__decorate([customElement("glide-core-drawer")],GlideCoreDrawer);export default GlideCoreDrawer;
+var __decorate=this&&this.__decorate||function(e,t,i,s){var o,a=arguments.length,n=a<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,s);else for(var l=e.length-1;l>=0;l--)(o=e[l])&&(n=(a<3?o(n):a>3?o(t,i,n):o(t,i))||n);return a>3&&n&&Object.defineProperty(t,i,n),n};import{LitElement,html,nothing}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{owSlot}from"./library/ow.js";import styles from"./drawer.styles.js";let GlideCoreDrawer=class GlideCoreDrawer extends LitElement{constructor(){super(...arguments),this.label="",this.pinned=!1,this.#e=createRef(),this.#t=createRef(),this.#i=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get open(){return this.#i}set open(e){this.#i=e,this.#i?(async()=>{this.#s?.cancel(),this.#e?.value?.classList?.add("open"),this.#o=this.#e?.value?.animate({transform:["translateX(100%)","translateX(0)"]},{duration:300,fill:"forwards",easing:"cubic-bezier(0.33, 1, 0.68, 1)"}),this.#e?.value?.animate({opacity:[0,1]},{duration:300,fill:"forwards",easing:"ease-in",composite:"add"}),await(this.#o?.finished),this.#e?.value?.focus()})():(async()=>{this.#o?.cancel(),this.#s=this.#e?.value?.animate({transform:["translateX(0)","translateX(100%)"]},{duration:300,fill:"forwards",easing:"cubic-bezier(0.33, 1, 0.68, 1)"}),this.#e?.value?.animate({opacity:[1,0]},{duration:300,fill:"forwards",composite:"add"}),await(this.#s?.finished),this.#e?.value?.classList?.remove("open"),this.dispatchEvent(new Event("close",{bubbles:!0}))})()}close(){this.open=!1}firstUpdated(){owSlot(this.#t.value),this.#i&&this.#e?.value?.classList?.add("open")}render(){return html`<aside class="${classMap({component:!0,pinned:this.pinned})}" tabindex="-1" data-test="${this.#i?"open":"closed"}" @keydown="${this.#a}" ${ref(this.#e)} aria-label="${this.label||nothing}"><slot @slotchange="${this.#n}" ${ref(this.#t)}></slot></aside>`}show(){this.open=!0}#e;#s;#t;#i;#o;#n(){owSlot(this.#t.value)}#a(e){"Escape"===e.key&&(e.preventDefault(),this.close())}};__decorate([property()],GlideCoreDrawer.prototype,"label",void 0),__decorate([property({type:Boolean})],GlideCoreDrawer.prototype,"pinned",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDrawer.prototype,"open",null),GlideCoreDrawer=__decorate([customElement("glide-core-drawer")],GlideCoreDrawer);export default GlideCoreDrawer;

package/dist/drawer.styles.js

@@ -24,23 +24,12 @@ import{css}from"lit";export default[css`
     }
 
     .open {
-      /* prefix required for Safari */
       /* stylelint-disable-next-line property-no-vendor-prefix */
       -webkit-backdrop-filter: blur(25px);
       backdrop-filter: blur(25px);
       block-size: auto;
       inline-size: var(--width, 27.375rem);
       inset: 0 0 0 auto;
-      opacity: 1;
-      transform: none;
-      transition:
-        transform 0.3s cubic-bezier(0.33, 1, 0.68, 1),
-        opacity 0.3s ease-in;
       visibility: visible;
     }
-
-    .closing {
-      transform: translateX(100%);
-      transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
-    }
   `];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crowdstrike/glide-core",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "CrowdStrike's Glide Design System components package for providing web components",
   "author": "CrowdStrike UX Team",
   "license": "Apache-2.0",