@tmorrow/cre8-wc 1.0.26 → 1.1.2

package/lib/components/button-group/button-group.js

@@ -1,279 +1,28 @@
-import { css as l, html as d } from "lit";
-import { property as u } from "lit/decorators.js";
+import { css as o, html as l } from "lit";
+import { property as p } from "lit/decorators.js";
 import { Cre8Element as h } from "../cre8-element.js";
-const p = l`/**
- * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
- */
-*,
-::slotted(*),
-*:before,
-*:after {
-  box-sizing: border-box;
-}
-
-:root {
-  --size-base-unit: 0.5rem;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
-/**
- * Visually hidden from display
- */
-/*
-=======
-Animations
-=======
-*/
-:host {
-  --cre8-z-index-1: 1;
-  --cre8-z-index-50: 50;
-  --cre8-z-index-100: 100;
-  --cre8-z-index-200: 200;
-  --cre8-z-index-1030: 1030;
-  --cre8-anim-fade-quick: 0.35s;
-  --cre8-anim-ease: ease;
-}
-
-@keyframes fadeIn {
-  100% {
-    opacity: 1;
-  }
-}
-@keyframes slideIn {
-  100% {
-    transform: translateX(0);
-  }
-}
-@keyframes slideInFwd {
-  100% {
-    width: 272px;
-    height: 272px;
-  }
-}
-@keyframes slideOutRight {
-  100% {
-    width: 272px;
-    height: 272px;
-  }
-}
-@keyframes slideUp {
-  100% {
-    transform: translateY(0);
-  }
-}
-@media (width >= 481px) {
-  @keyframes slideInFwd {
-    100% {
-      width: 417px;
-      height: 417px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 417px;
-      height: 417px;
-    }
-  }
-}
-@media (width >= 48rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 330px;
-      height: 330px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 330px;
-      height: 330px;
-      transform: translateX(calc(100vw - 45px));
-    }
-  }
-}
-@media (width >= 60rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 460px;
-      height: 460px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 460px;
-      height: 460px;
-      transform: translateX(calc(100vw - 45px));
-    }
-  }
-}
-@media (width >= 75rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 592px;
-      height: 591px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 45px));
-    }
-  }
-}
-@media (width >= 87.5rem) {
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 120px));
-    }
-  }
-}
-@media (width >= 2200px) {
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 592px));
-    }
-  }
-}
-span.ripple {
-  position: absolute;
-  border-radius: 50%;
-  transform: scale(0);
-  animation: ripple 600ms linear;
-  background-color: var(--ripple-bg-color);
-}
-
-@keyframes ripple {
-  to {
-    transform: scale(4);
-    opacity: 1;
-  }
-}
-:root {
-  --size-base-unit: 0.5rem;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
-/**
- * Visually hidden from display
- */
-/*------------------------------------*\
- #BUTTON-GROUP
-\*------------------------------------*/
-:host {
-  display: inline-flex;
-}
-
-/**
- * 1) Button Group
- */
-.cre8-c-button-group {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-}
-
-/**
-  * Button group for Modals
-  */
-.cre8-c-button-group--responsive-full-width {
-  flex-direction: column;
-  --cre8-button-width: 100%;
-}
-@media all and (min-width: 768px) {
-  .cre8-c-button-group--responsive-full-width {
-    flex-direction: row;
-    --cre8-button-width: auto;
-  }
-}
-  /* sourceMappingURL=button-group.module.css.map */
-`;
-var c = Object.defineProperty, f = (o, t, a, m) => {
-  for (var e = void 0, i = o.length - 1, n; i >= 0; i--)
-    (n = o[i]) && (e = n(t, a, e) || e);
-  return e && c(t, a, e), e;
+const m = o`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex}.cre8-c-button-group{display:flex;flex-wrap:wrap;gap:1rem}.cre8-c-button-group--responsive-full-width{flex-direction:column;--cre8-button-width: 100%}@media all and (min-width: 768px){.cre8-c-button-group--responsive-full-width{flex-direction:row;--cre8-button-width: auto}}`;
+var c = Object.defineProperty, f = (a, t, d, x) => {
+  for (var e = void 0, i = a.length - 1, n; i >= 0; i--)
+    (n = a[i]) && (e = n(t, d, e) || e);
+  return e && c(t, d, e), e;
 };
 const s = class s extends h {
   render() {
     const t = this.componentClassNames("cre8-c-button-group", {
       "cre8-c-button-group--responsive-full-width": this.orientation === "responsive-full-width"
     });
-    return d`
+    return l`
       <div class="${t}">
         <slot></slot>
       </div>
     `;
   }
 };
-s.styles = [p];
+s.styles = [m];
 let r = s;
 f([
-  u()
+  p()
 ], r.prototype, "orientation");
 customElements.get("cre8-button-group") === void 0 && customElements.define("cre8-button-group", r);
 export {

package/lib/components/button-group/button-group.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.styles.d.ts","sourceRoot":"","sources":["../../../components/button-group/button-group.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBA2PX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"button-group.styles.d.ts","sourceRoot":"","sources":["../../../components/button-group/button-group.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAA4jE,CAAC;AACzkE,eAAe,MAAM,CAAC"}

package/lib/components/card/card.js

@@ -1,126 +1,13 @@
-import { css as h, html as o } from "lit";
-import { property as l } from "lit/decorators.js";
+import { css as h, html as i } from "lit";
+import { property as n } from "lit/decorators.js";
 import { Cre8Element as p } from "../cre8-element.js";
-const f = h`@import '../../design-tokens/core/scss/theming/component';
-
-// #CARD
-
-:host {
-  display: block;
-}
-
-/**
- * 1) A card is an organized block that typically contains a title, image,
- * text, and/or calls to action. It is made up of an optional header slot, required
- * body slot, and optional footer slot to place other Components and content within.
- */
-.cre8-c-card {
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-  padding: calc(8px * 3);
-  gap: calc(8px * 2);
-  border-color: var(--cre8-color-border-default);
-  border-style: var(--cre8-border-style-default);
-  border-width: var(--cre8-border-width-default);
-  border-radius: var(--cre8-border-radius-default);
-  background: var(--cre8-color-bg-default);
-}
-/**
- * Horizontal card
- * 1) Organized block with flex-direction set to row so that header => footer appears
- * from left to right rather than top to bottom
- */
-.cre8-c-card--horizontal{
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-}
-/**
- * Bare card
- * 1) Organized block without a border, background, or padding
- */
-.cre8-c-card--bare {
-  border: 0;
-  padding: 0;
-  gap: 0;
-  box-shadow: none;
-}
-/**
- * Horizontal-bare card
- * 1) Organized block with flex-direction set to row so that header => footer appears
- * from left to right rather than top to bottom without a border, background, or padding
- */
-.cre8-c-card--horizontal-bare{
-  flex-direction: row;
-  border: 0;
-  padding: 0;
-  gap: 0;
-  box-shadow: none;
-  align-items: center;
-  justify-content: center;
-}
-/**
- * Center aligned card
- * 1) Center content and text within the card
- */
-.cre8-c-card--align-center {
-  text-align: center; /* 1 */
-  align-items: center; /* 1 */
-  justify-content: center; /* 1 */
-}
-
-/**
- * Slotted image within a card
- * 1) Make the image full width
- */
-::slotted(img) {
-  width: 100%;
-}
-
-/**
- * Card header
- * 1) Remove flex so that body always takes up remaining space
- */
-.cre8-c-card__header {
-  display: block;
-  flex: none; /* 1 */
-}
-
-/**
- * Card body
- * 1) Flex applied to always fill the remaining space of the card
- */
-.cre8-c-card__body {
-  display: block;
-  flex: 1 1 auto; /* 1 */
-
-}
-
-/**
- * Card footer
- * 1) Remove flex so that body always takes up remaining space
- */
-.cre8-c-card__footer {
-  display: block;
-  flex: none; /* 1 */
-
-  .cre8-c-card--bare & {
-    padding: 0;
-  }
-  .cre8-c-card--horizontal-bare & {
-    padding: 0;
-  }
-}
-`;
-var b = Object.defineProperty, s = (d, t, i, m) => {
-  for (var e = void 0, a = d.length - 1, n; a >= 0; a--)
-    (n = d[a]) && (e = n(t, i, e) || e);
-  return e && b(t, i, e), e;
+const m = h`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:block}.cre8-c-card{overflow:hidden;display:flex;flex-direction:column;height:100%;width:100%;padding:1.5rem;gap:1rem;border-color:var(--cre8-color-border-default);border-style:var(--cre8-border-style-default);border-width:var(--cre8-border-width-default);border-radius:var(--cre8-border-radius-default);background:var(--cre8-color-bg-default)}.cre8-c-card--horizontal{flex-direction:row;align-items:center;justify-content:center}.cre8-c-card--bare{border:0;padding:0;gap:0;box-shadow:none}.cre8-c-card--horizontal-bare{flex-direction:row;border:0;padding:0;gap:0;box-shadow:none;align-items:center;justify-content:center}.cre8-c-card--align-center{text-align:center;align-items:center;justify-content:center}::slotted(img){width:100%}.cre8-c-card__header{display:block;flex:none}.cre8-c-card__body{display:block;flex:1 1 auto}.cre8-c-card__footer{display:block;flex:none}.cre8-c-card--bare .cre8-c-card__footer{padding:0}.cre8-c-card--horizontal-bare .cre8-c-card__footer{padding:0}`;
+var f = Object.defineProperty, l = (o, t, s, x) => {
+  for (var e = void 0, a = o.length - 1, c; a >= 0; a--)
+    (c = o[a]) && (e = c(t, s, e) || e);
+  return e && f(t, s, e), e;
 };
-const c = class c extends p {
+const d = class d extends p {
   render() {
     const t = this.componentClassNames("cre8-c-card", {
       "cre8-c-card--bare": this.variant === "bare",
@@ -128,24 +15,24 @@ const c = class c extends p {
       "cre8-c-card--horizontal-bare": this.variant === "horizontal-bare",
       "cre8-c-card--align-center": this.align === "center"
     });
-    return o`
+    return i`
       <div class="${t}" part="card">
-        ${this.slotNotEmpty("header") && o`<div class="cre8-c-card__header" part="header"><slot name="header"></slot></div>`}
+        ${this.slotNotEmpty("header") && i`<div class="cre8-c-card__header" part="header"><slot name="header"></slot></div>`}
         <div class="cre8-c-card__body" part="body">
           <slot></slot>
         </div>
-        ${this.slotNotEmpty("footer") && o`<div class="cre8-c-card__footer" part="footer"><slot name="footer"></slot></div>`}
+        ${this.slotNotEmpty("footer") && i`<div class="cre8-c-card__footer" part="footer"><slot name="footer"></slot></div>`}
       </div>
     `;
   }
 };
-c.styles = [f];
-let r = c;
-s([
-  l()
+d.styles = [m];
+let r = d;
+l([
+  n()
 ], r.prototype, "variant");
-s([
-  l()
+l([
+  n()
 ], r.prototype, "align");
 customElements.get("cre8-card") === void 0 && customElements.define("cre8-card", r);
 export {

package/lib/components/card/card.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.styles.d.ts","sourceRoot":"","sources":["../../../components/card/card.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAiHX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"card.styles.d.ts","sourceRoot":"","sources":["../../../components/card/card.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAovF,CAAC;AACjwF,eAAe,MAAM,CAAC"}