@warp-ds/elements 2.2.0-next.3 → 2.2.0-next.4

package/dist/packages/button/button.test.d.ts

@@ -1 +1 @@
-import "./index.js";
+import './index.js';

package/dist/packages/button/index.d.ts

@@ -1,6 +1,6 @@
-import { PropertyValues } from "lit";
-type ButtonVariant = "primary" | "secondary" | "negative" | "utility" | "pill" | "link";
-type ButtonType = "button" | "submit" | "reset";
+import { PropertyValues } from 'lit';
+type ButtonVariant = 'primary' | 'secondary' | 'negative' | 'utility' | 'pill' | 'link';
+type ButtonType = 'button' | 'submit' | 'reset';
 declare const WarpButton_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & {
     new (): {
         [x: string]: any;

package/dist/packages/card/card.test.d.ts

@@ -0,0 +1 @@
+import './index.js';

package/dist/packages/card/index.d.ts

@@ -1,25 +1,15 @@
-export class WarpCard extends WarpElement {
-    static properties: {
-        selected: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        flat: {
-            type: BooleanConstructor;
-        };
-        clickable: {
-            type: BooleanConstructor;
-        };
-    };
-    static styles: (import("lit").CSSResult | (import("lit").CSSResult | CSSStyleSheet | import("lit").CSSResultArray)[])[];
+import { LitElement } from 'lit';
+declare class WarpCard extends LitElement {
+    static styles: import("lit").CSSResult[];
     selected: boolean;
     flat: boolean;
     clickable: boolean;
     buttonText: string;
+    constructor();
     get _containerClasses(): string;
     get _outlineClasses(): string;
     get _interactiveElement(): import("lit").TemplateResult<1> | "";
-    keypressed(e: any): void;
+    keypressed(e: KeyboardEvent): void;
     render(): import("lit").TemplateResult<1>;
 }
-import WarpElement from '@warp-ds/elements-core';
+export { WarpCard };

package/dist/packages/expandable/expandable.test.d.ts

@@ -0,0 +1 @@
+import './index.js';

package/dist/packages/expandable/index.d.ts

@@ -1,61 +1,23 @@
-declare const WarpExpandable_base: {
-    new (): {
-        [x: string]: any;
-    };
-    [x: string]: any;
-    createProperty(name: any, options: any): void;
-};
-export class WarpExpandable extends WarpExpandable_base {
-    static properties: {
-        expanded: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        title: {
-            type: StringConstructor;
-        };
-        box: {
-            type: BooleanConstructor;
-        };
-        bleed: {
-            type: BooleanConstructor;
-        };
-        buttonClass: {
-            type: StringConstructor;
-        };
-        contentClass: {
-            type: StringConstructor;
-        };
-        noChevron: {
-            type: BooleanConstructor;
-        };
-        animated: {
-            type: BooleanConstructor;
-        };
-        headingLevel: {
-            type: NumberConstructor;
-        };
-        _hasTitle: {
-            type: BooleanConstructor;
-            state: boolean;
-        };
-        _showChevronUp: {
-            type: BooleanConstructor;
-            state: boolean;
-        };
-    };
-    static styles: (import("lit").CSSResult | (import("lit").CSSResult | CSSStyleSheet | import("lit").CSSResultArray)[])[];
+import { LitElement, PropertyValues } from 'lit';
+import '@warp-ds/icons/elements/chevron-down-16';
+import '@warp-ds/icons/elements/chevron-up-16';
+declare class WarpExpandable extends LitElement {
+    #private;
     expanded: boolean;
-    animated: boolean;
+    title: string;
     box: boolean;
     bleed: boolean;
+    buttonClass: string;
+    contentClass: string;
     noChevron: boolean;
+    animated: boolean;
+    headingLevel: number;
     _hasTitle: boolean;
     _showChevronUp: boolean;
-    updated(changedProperties: any): void;
+    static styles: import("lit").CSSResult[];
+    updated(changedProperties: PropertyValues<this>): void;
     firstUpdated(): void;
     get _expandableSlot(): import("lit").TemplateResult<1>;
     render(): import("lit").TemplateResult<1>;
-    #private;
 }
-export {};
+export { WarpExpandable };

package/dist/packages/modal/index.js

@@ -1061,17 +1061,17 @@ var ModalFooter = class extends CanCloseMixin(ProvidesCanCloseToSlotsMixin(LitEl
 };
 ModalFooter.styles = css`
     .footer {
-      display:flex;
-      flex-shrink:0;
-      justify-content:flex-end;
-      padding-left:1.6rem;
-      padding-right:1.6rem;
-      padding-top:2.4rem;
+      display: flex;
+      flex-shrink: 0;
+      justify-content: flex-end;
+      padding-left: 1.6rem;
+      padding-right: 1.6rem;
+      padding-top: 2.4rem;
     }
-    @media (min-width: 480px){
+    @media (min-width: 480px) {
       .footer {
-        padding-left:3.2rem;
-        padding-right:3.2rem;
+        padding-left: 3.2rem;
+        padding-right: 3.2rem;
       }
     }
   `;
@@ -2076,9 +2076,7 @@ if (!customElements.get("w-icon-close-16")) {
 var supportedLocales3 = ["en", "nb", "fi", "da", "sv"];
 var defaultLocale4 = "en";
 var getSupportedLocale3 = (usedLocale) => {
-  return supportedLocales3.find(
-    (locale) => usedLocale === locale || usedLocale.toLowerCase().includes(locale)
-  ) || defaultLocale4;
+  return supportedLocales3.find((locale) => usedLocale === locale || usedLocale.toLowerCase().includes(locale)) || defaultLocale4;
 };
 function detectLocale3() {
   if (typeof window === "undefined") {
@@ -2197,109 +2195,111 @@ ModalHeader.styles = css2`
       padding-bottom: 0.8rem;
     }
     .header-title-bar {
-      display:grid;
-      flex-shrink:0 !important;
-      gap:1.2rem;
-      grid-template-columns:auto 1fr auto;
-      align-items:flex-start;
-      padding-left:1.6rem;
-      padding-right:1.6rem;
-      padding-top:1.6rem;
+      display: grid;
+      flex-shrink: 0 !important;
+      gap: 1.2rem;
+      grid-template-columns: auto 1fr auto;
+      align-items: flex-start;
+      padding-left: 1.6rem;
+      padding-right: 1.6rem;
+      padding-top: 1.6rem;
     }
     .header-title {
-      font-weight:700;
-      font-size:var(--w-font-size-l);
-      line-height:var(--w-line-height-l);
-      align-self:center;
+      font-weight: 700;
+      font-size: var(--w-font-size-l);
+      line-height: var(--w-line-height-l);
+      align-self: center;
       margin: 0;
     }
     .header-title-with-back-button {
-      justify-self:center;
+      justify-self: center;
     }
     .header-title-without-back-button {
-      grid-column:span 2/span 2;
+      grid-column: span 2 / span 2;
     }
     .header-title-with-top-area {
-      padding-left:1.6rem;
-      padding-right:1.6rem;
-      padding-top:1.6rem;
+      padding-left: 1.6rem;
+      padding-right: 1.6rem;
+      padding-top: 1.6rem;
     }
     .header-button:hover {
-      -webkit-background-clip:padding-box;
-      background-clip:padding-box;
+      -webkit-background-clip: padding-box;
+      background-clip: padding-box;
     }
-    .header-button:focus, .header-button:focus-visible {
-      outline:2px solid var(--w-s-color-border-focus);
-      outline-offset:var(--w-outline-offset, 1px);
+    .header-button:focus,
+    .header-button:focus-visible {
+      outline: 2px solid var(--w-s-color-border-focus);
+      outline-offset: var(--w-outline-offset, 1px);
     }
-    .header-button:not(:focus-visible){
-      outline:none;
+    .header-button:not(:focus-visible) {
+      outline: none;
     }
     .header-button {
-      border-width:0;
-      border-radius:9999px;
-      display:inline-flex;
-      align-items:center;
-      justify-content:center;
-      min-height:40px;
-      min-width:40px;
-      padding:0.4rem;
-      font-weight:700;
-      transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;
-      transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
-      transition-duration:150ms;
-      font-size:var(--w-font-size-m);line-height:var(--w-line-height-m);
-      line-height:2.4rem;
+      border-width: 0;
+      border-radius: 9999px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 40px;
+      min-width: 40px;
+      padding: 0.4rem;
+      font-weight: 700;
+      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 150ms;
+      font-size: var(--w-font-size-m);
+      line-height: var(--w-line-height-m);
+      line-height: 2.4rem;
     }
     .header-button-left {
-      background-color:transparent;
-      color:var(--w-s-color-icon);
-      margin-left:-0.8rem;
+      background-color: transparent;
+      color: var(--w-s-color-icon);
+      margin-left: -0.8rem;
     }
     .header-button-left:hover {
-      background-color:var(--w-color-button-pill-background-hover);
+      background-color: var(--w-color-button-pill-background-hover);
     }
     .header-button-left:active {
-      background-color:var(--w-color-button-pill-background-active);
+      background-color: var(--w-color-button-pill-background-active);
     }
     .header-close-button {
-      background-color:transparent;
-      color:var(--w-s-color-icon);
-      margin-right:-0.8rem;
+      background-color: transparent;
+      color: var(--w-s-color-icon);
+      margin-right: -0.8rem;
     }
     .header-close-button:hover {
-      background-color:var(--w-color-button-pill-background-hover);
+      background-color: var(--w-color-button-pill-background-hover);
     }
     .header-close-button:active {
-      background-color:var(--w-color-button-pill-background-active);
+      background-color: var(--w-color-button-pill-background-active);
     }
     .header-close-button-on-image {
-      background-color:rgba(var(--w-rgb-black),0.7);
-      right:0.8rem;
-      top:0.8rem;
-      position:absolute;
-      z-index:10;
-      color:var(--w-s-color-text-inverted);
+      background-color: rgba(var(--w-rgb-black), 0.7);
+      right: 0.8rem;
+      top: 0.8rem;
+      position: absolute;
+      z-index: 10;
+      color: var(--w-s-color-text-inverted);
     }
     .header-close-button-on-image:hover {
-      background-color:rgba(var(--w-rgb-black),0.85);
+      background-color: rgba(var(--w-rgb-black), 0.85);
     }
     .header-close-button-on-image:active {
-      background-color:var(--w-black);
+      background-color: var(--w-black);
     }
-    @media (min-width: 480px){
+    @media (min-width: 480px) {
       .header-title-bar {
-        padding-left:3.2rem;
-        padding-right:3.2rem;
-        padding-top:2.4rem;
+        padding-left: 3.2rem;
+        padding-right: 3.2rem;
+        padding-top: 2.4rem;
       }
       .header-title-with-top-area {
-        padding-left:3.2rem;
-        padding-right:3.2rem;
+        padding-left: 3.2rem;
+        padding-right: 3.2rem;
       }
       .header-button {
-        min-height:32px;
-        min-width:32px;
+        min-height: 32px;
+        min-width: 32px;
       }
     }
   `;
@@ -2321,6 +2321,7 @@ __decorateClass([
 
 // packages/modal/modal-main.ts
 import { css as css3, html as html5, LitElement as LitElement5 } from "lit";
+import { property as property2, query as query2 } from "lit/decorators.js";
 
 // node_modules/.pnpm/scroll-doctor@2.0.2/node_modules/scroll-doctor/dist/scroll-doctor.js
 var n = [];
@@ -2381,7 +2382,6 @@ function T() {
 }
 
 // packages/modal/modal-main.ts
-import { property as property2, query as query2 } from "lit/decorators.js";
 var ModalMain = class extends ProvidesCanCloseToSlotsMixin(LitElement5) {
   constructor() {
     super();
@@ -2456,77 +2456,77 @@ ModalMain.styles = [
   css3`
       .dialog-el {
         --w-modal-translate-distance: 100%;
-        --w-modal-max-height:80%;
-        --w-modal-width:640px;
-        background-color:transparent;
-        border-width:0;
-        align-items:flex-end;
-        inset:0rem;
-        height:unset;
-        max-height:unset;
-        max-width:unset;
-        width:unset;
-        margin:auto;
-        padding:0rem;
-        backface-visibility:hidden;
+        --w-modal-max-height: 80%;
+        --w-modal-width: 640px;
+        background-color: transparent;
+        border-width: 0;
+        align-items: flex-end;
+        inset: 0rem;
+        height: unset;
+        max-height: unset;
+        max-width: unset;
+        width: unset;
+        margin: auto;
+        padding: 0rem;
+        backface-visibility: hidden;
       }
       .dialog-inner-el {
-        will-change:height;
-        border-radius:8px;
-        display:flex;
-        flex-direction:column;
-        overflow:hidden;
-        position:relative;
-        background-color:var(--w-s-color-background);
-        box-shadow:var(--w-shadow-m);
-        height:var(--w-modal-height);
-        max-height:var(--w-modal-max-height);
-        min-height:var(--w-modal-min-height);
-        width:var(--w-modal-width);
-        backface-visibility:hidden;
-        padding-bottom:calc(32px + env(safe-area-inset-bottom, 0px));
-        transition-property:all;
-        transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration:150ms;
-        transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
+        will-change: height;
+        border-radius: 8px;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        position: relative;
+        background-color: var(--w-s-color-background);
+        box-shadow: var(--w-shadow-m);
+        height: var(--w-modal-height);
+        max-height: var(--w-modal-max-height);
+        min-height: var(--w-modal-min-height);
+        width: var(--w-modal-width);
+        backface-visibility: hidden;
+        padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
       }
       .content-el {
-        display:block;
-        flex-shrink:1;
-        flex-grow:1;
-        overflow-x:hidden;
-        overflow-y:auto;
-        position:relative;
-        margin-bottom:0rem;
-        padding-left:1.6rem;
-        padding-right:1.6rem;
+        display: block;
+        flex-shrink: 1;
+        flex-grow: 1;
+        overflow-x: hidden;
+        overflow-y: auto;
+        position: relative;
+        margin-bottom: 0rem;
+        padding-left: 1.6rem;
+        padding-right: 1.6rem;
       }
       @media (min-width: 480px) {
         .dialog-el {
           --w-modal-translate-distance: 50%;
-          place-content:center;
-          place-items:center;
+          place-content: center;
+          place-items: center;
         }
         .dialog-inner-el {
-          margin-left:1.6rem;
-          margin-right:1.6rem;
-          padding-bottom:3.2rem;
+          margin-left: 1.6rem;
+          margin-right: 1.6rem;
+          padding-bottom: 3.2rem;
         }
         .content-el {
-          padding-left:3.2rem;
-          padding-right:3.2rem;
+          padding-left: 3.2rem;
+          padding-right: 3.2rem;
         }
       }
-      @media (max-width: 479.9px){
+      @media (max-width: 479.9px) {
         .dialog-inner-el {
-          border-bottom-left-radius:0;
-          border-bottom-right-radius:0;
+          border-bottom-left-radius: 0;
+          border-bottom-right-radius: 0;
         }
       }
       .dialog-el[open] {
         animation: w-modal-in 0.3s ease-in-out forwards;
-        display:flex;
-        position:fixed;
+        display: flex;
+        position: fixed;
       }
       .dialog-el.close {
         animation: w-modal-out 0.3s ease-in-out forwards;