kemet-ui 3.0.1 → 4.0.0

package/dist/{components/kemet-accordion/styles.js → styles/elements/accordion.ts}

@@ -1,10 +1,12 @@
 import { css } from 'lit';
-export const stylesBase = css `
+
+export const stylesBase =  css`
   :host {
     display: block;
   }
 `;
-export const stylesPanel = css `
+
+export const stylesPanel = css`
   *,
   *::before,
   *::after {
@@ -39,4 +41,3 @@ export const stylesPanel = css `
     padding: 1rem 0;
   }
 `;
-//# sourceMappingURL=styles.js.map

package/dist/{components/kemet-alert/styles.js → styles/elements/alert.ts}

@@ -1,12 +1,17 @@
 import { css } from 'lit';
-export const stylesBase = css `
+
+export const stylesBase = css`
   :host {
     --kemet-alert-padding: 1rem;
     --kemet-alert-border-thickness: 4px;
     --kemet-alert-status-color: inherit;
     --kemet-alert-align-items: center;
     --kemet-alert-border: 1px solid rgb(var(--kemet-alert-status-color));
+    --kemet-alert-radius: 0;
+    --kemet-alert-color: inherit;
+    --kemet-alert-background-color: transparent;
 
+    color: var(--kemet-alert-color);
     display: flex;
     grid-template-columns: auto 1fr auto;
     gap: var(--kemet-alert-padding);
@@ -15,12 +20,24 @@ export const stylesBase = css `
     padding: var(--kemet-alert-padding);
     border: var(--kemet-alert-border);
     transition: opacity 300ms ease;
+    border-radius: var(--kemet-alert-radius);
+    background-color: var(--kemet-alert-background-color);
   }
 
   :host([opened]) {
     opacity: 1;
   }
 
+  :host([filled]) {
+    --kemet-alert-border: 2px solid rgb(var(--kemet-color-white));
+    --kemet-alert-color: rgb(var(--kemet-color-white));
+    --kemet-alert-background-color: rgb(var(--kemet-alert-status-color));
+  }
+
+  :host([filled][status=standard]) {
+    --kemet-alert-color: rgb(var(--kemet-color-background));
+  }
+
   :host([border-status="top"]) {
     border-top: var(--kemet-alert-border-thickness) solid rgb(var(--kemet-alert-status-color));
   }
@@ -89,12 +106,46 @@ export const stylesBase = css `
     right: 0;
   }
 
+  :host([rounded]) {
+    --kemet-alert-radius: var(--kemet-border-radius-md);
+  }
+
+  :host([rounded="sm"]) {
+    --kemet-alert-radius: var(--kemet-border-radius-sm);
+  }
+
+  :host([rounded="md"]) {
+    --kemet-alert-radius: var(--kemet-border-radius-md);
+  }
+
+  :host([rounded="lg"]) {
+    --kemet-alert-radius: var(--kemet-border-radius-lg);
+  }
+
+  :host([rounded="xl"]) {
+    --kemet-alert-radius: var(--kemet-border-radius-xl);
+  }
+
+  :host([rounded="circle"]) {
+    --kemet-alert-radius: var(--kemet-border-radius-circle);
+  }
+
+  :host([rounded="pill"]) {
+    --kemet-alert-radius: var(--kemet-border-radius-pill);
+  }
+
+  [part=message] {
+    display: flex;
+    gap: 0.75rem;
+    align-items: center;
+  }
+
   .close {
     cursor: pointer;
     margin-left: auto;
   }
 
-  ::slotted(kemet-icon) {
+  :host(:not([filled])) ::slotted(kemet-icon-bootstrap) {
     color: rgb(var(--kemet-alert-status-color));
   }
 
@@ -103,4 +154,3 @@ export const stylesBase = css `
     to { opacity: 1; }
   }
 `;
-//# sourceMappingURL=styles.js.map

package/dist/{components/kemet-avatar/styles.js → styles/elements/avatar.ts}

@@ -1,5 +1,6 @@
 import { css } from 'lit';
-export const stylesBase = css `
+
+export const stylesBase = css`
   *,
   *::before,
   *::after {
@@ -9,29 +10,42 @@ export const stylesBase = css `
   :host {
     --kemet-avatar-color: rgb(var(--kemet-color-white));
     --kemet-avatar-background-color: rgb(var(--kemet-color-gray-300));
-    --kemet-avatar-rounded-radius: 1rem;
+    --kemet-avatar-rounded: 0;
     --kemet-avatar-initials-margin: 1rem;
 
     display: inline-flex;
     color: var(--kemet-color-white);
     position: relative;
+    border-radius: var(--kemet-avatar-rounded);
     background-color: var(--kemet-avatar-background-color);
   }
 
-  :host([circle]) {
-    border-radius: var(--kemet-border-radius-circle);
+  :host > * {
+    border-radius: var(--kemet-avatar-rounded);
   }
 
-  :host([circle]) > * {
-    border-radius: var(--kemet-border-radius-circle);
+  :host([rounded]) {
+    --kemet-avatar-rounded: var(--kemet-border-radius-md);
   }
 
-  :host([rounded]) {
-    border-radius: var(--kemet-avatar-rounded-radius);
+  :host([rounded=sm]) {
+    --kemet-avatar-rounded: var(--kemet-border-radius-sm);
+  }
+
+  :host([rounded=lg]) {
+    --kemet-avatar-rounded: var(--kemet-border-radius-lg);
+  }
+
+  :host([rounded=xl]) {
+    --kemet-avatar-rounded: var(--kemet-border-radius-xl);
   }
 
-  :host([rounded]) > * {
-    border-radius: var(--kemet-avatar-rounded-radius);
+  :host([rounded=circle]) {
+    --kemet-avatar-rounded: var(--kemet-border-radius-circle);
+  }
+
+  :host([rounded=pill]) {
+    --kemet-avatar-rounded: var(--kemet-border-radius-pill);
   }
 
   .initials {
@@ -45,7 +59,8 @@ export const stylesBase = css `
     border-radius: var(--kemet-border-radius-circle);
   }
 `;
-export const stylesAvatars = css `
+
+export const stylesAvatars = css`
   *,
   *::before,
   *::after {
@@ -62,4 +77,3 @@ export const stylesAvatars = css `
     margin-left: var(--kemet-avatars-squeeze);
   }
 `;
-//# sourceMappingURL=styles.js.map

package/dist/styles/elements/badge.ts

@@ -0,0 +1,92 @@
+import { css } from 'lit';
+
+export const stylesBase = css`
+  :host {
+    --kemet-badge-padding: 10px;
+    --kemet-badge-color: rgb(var(--kemet-color-white));
+    --kemet-badge-background-color: rgb(var(--kemet-color-primary));
+    --kemet-badge-border: 0;
+    --kemet-badge-border-width: 1px;
+    --kemet-badge-border-style: solid;
+    --kemet-badge-border-color: rgb(var(--kemet-color-primary));
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--kemet-badge-padding);
+    line-height: 1;
+    color: var(--kemet-badge-color);
+    background-color: var(--kemet-badge-background-color);
+    border: var(--kemet-badge-border);
+  }
+
+  :host([status='primary']) {
+    --kemet-badge-background-color: rgb(var(--kemet-color-primary));
+  }
+
+  :host([status='success']) {
+    --kemet-badge-background-color: rgb(var(--kemet-color-success));
+  }
+
+  :host([status='standard']) {
+    --kemet-badge-background-color: rgb(var(--kemet-color-gray-500));
+  }
+
+  :host([status='warning']) {
+    --kemet-badge-background-color: rgb(var(--kemet-color-warning));
+  }
+
+  :host([status='error']) {
+    --kemet-badge-background-color: rgb(var(--kemet-color-error));
+  }
+
+  :host([rounded]) {
+    border-radius: var(--kemet-border-radius-md);
+  }
+
+  :host([rounded=sm]) {
+    border-radius: var(--kemet-border-radius-sm);
+  }
+
+  :host([rounded=md]) {
+    border-radius: var(--kemet-border-radius-md);
+  }
+
+  :host([rounded=lg]) {
+    border-radius: var(--kemet-border-radius-lg);
+  }
+
+  :host([rounded=xl]) {
+    border-radius: var(--kemet-border-radius-xl);
+  }
+
+  :host([rounded=circle]) {
+    border-radius: var(--kemet-border-radius-circle);
+  }
+
+  :host([rounded=pill]) {
+    border-radius: var(--kemet-border-radius-pill);
+  }
+
+  :host([outlined]) {
+    --kemet-badge-color: rgb(var(--kemet-color-foreground));
+    --kemet-badge-background-color: transparent;
+    --kemet-badge-border: var(--kemet-badge-border-width) var(--kemet-badge-border-style) var(--kemet-badge-border-color);
+  }
+
+  :host([outlined][status=primary]) {
+    --kemet-badge-border-color: rgb(var(--kemet-color-primary));
+  }
+
+  :host([outlined][status=success]) {
+    --kemet-badge-border-color: rgb(var(--kemet-color-success));
+  }
+
+  :host([outlined][status=warning]) {
+    --kemet-badge-border-color: rgb(var(--kemet-color-warning));
+  }
+
+  :host([outlined][status=error]) {
+    --kemet-badge-border-color: rgb(var(--kemet-color-error));
+  }
+`;

package/dist/{components/kemet-button/styles.js → styles/elements/button.ts}

@@ -1,5 +1,6 @@
 import { css } from 'lit';
-export const stylesBase = css `
+
+export const stylesBase = css`
   :host {
     --kemet-button-font-size: inherit;
     --kemet-button-color: rgb(var(--kemet-color-background));
@@ -15,7 +16,6 @@ export const stylesBase = css `
     --kemet-button-padding: 1rem 1.25rem;
     --kemet-button-hover-decoration: underline;
     --kemet-button-circle-size: 50px;
-    --kemet-button-rounded-amount: 6px;
     --kemet-button-border-width: 1.5px;
     --kemet-button-border-style: solid;
     --kemet-button-border-color: rgb(var(--kemet-color-foreground));
@@ -61,33 +61,52 @@ export const stylesBase = css `
     cursor: not-allowed;
   }
 
-  :host([variant='text']) {
+  :host([variant=text]) {
     --kemet-button-color: rgb(var(--kemet-color-text));
     --kemet-button-background-color: none;
   }
 
-  :host([variant='text']:hover) {
+  :host([variant=text]:hover) {
     text-decoration: var(--kemet-button-hover-decoration);
   }
 
-  :host([variant='circle']) {
+  :host([rounded]) {
+    --kemet-button-border-radius: var(--kemet-border-radius-md);
+  }
+
+  :host([rounded=sm]) {
+    --kemet-button-border-radius: var(--kemet-border-radius-sm);
+  }
+
+  :host([rounded=lg]) {
+    --kemet-button-border-radius: var(--kemet-border-radius-lg);
+  }
+
+  :host([rounded=xl]) {
+    --kemet-button-border-radius: var(--kemet-border-radius-xl);
+  }
+
+  :host([rounded=circle]) {
     --kemet-button-border-radius: var(--kemet-border-radius-circle);
     --kemet-button-width: var(--kemet-button-circle-size);
     --kemet-button-height: var(--kemet-button-circle-size);
   }
 
-  :host([variant='rounded']) {
-    --kemet-button-border-radius: var(--kemet-button-rounded-amount);
-  }
-
-  :host([variant='pill']) {
+  :host([rounded=pill]) {
     --kemet-button-border-radius: var(--kemet-border-radius-pill);
   }
 
-  :host([outlined]) {
+  :host([variant=outlined]) {
     --kemet-button-color: rgb(var(--kemet-color-foreground));
     --kemet-button-background-color: transparent;
     --kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--kemet-button-border-color);
   }
-`;
-//# sourceMappingURL=styles.js.map
+
+  :host([icon-left]) {
+    --kemet-button-padding: 1rem 1.25rem 1rem .75rem;
+  }
+
+  :host([icon-right]) {
+    --kemet-button-padding:  1rem .75rem 1rem 1.25rem;
+  }
+`

package/dist/{components/kemet-card/styles.js → styles/elements/card.ts}

@@ -1,5 +1,6 @@
 import { css } from 'lit';
-export const stylesBase = css `
+
+export const stylesBase = css`
   *,
   *::before,
   *::after {
@@ -13,7 +14,7 @@ export const stylesBase = css `
     --kemet-card-max-width: 600px;
     --kemet-card-border: 1px solid var(--kemet-card-border-color);
     --kemet-card-border-radius: 0;
-    --kemet-card-background-color: rgb(var(--kemet-color-white));
+    --kemet-card-background-color: rgb(var(--kemet-color-background));
     --kemet-card-body-padding: var(--kemet-card-padding);
     --kemet-card-header-padding: var(--kemet-card-padding);
     --kemet-card-header-border-bottom: 1px solid var(--kemet-card-border-color);
@@ -75,4 +76,3 @@ export const stylesBase = css `
     border-top: var(--kemet-card-footer-border-top);
   }
 `;
-//# sourceMappingURL=styles.js.map

package/dist/{components/kemet-carousel/styles.js → styles/elements/carousel.ts}

@@ -1,5 +1,6 @@
 import { css } from 'lit';
-export const stylesCarousel = css `
+
+export const stylesCarousel = css`
   :host,
   *,
   *::before,
@@ -79,4 +80,3 @@ export const stylesCarousel = css `
     opacity: var(--kemet-carousel-arrows-opacity-hover);
   }
 `;
-//# sourceMappingURL=styles.js.map

package/dist/{components/kemet-checkbox/styles.js → styles/elements/checkbox.ts}

@@ -1,5 +1,6 @@
 import { css } from 'lit';
-export const stylesBase = css `
+
+export const stylesBase = css`
   *,
   *::before,
   *::after {
@@ -87,4 +88,3 @@ export const stylesBase = css `
     color: rgb(var(--kemet-color-error));
   }
 `;
-//# sourceMappingURL=styles.js.map

package/dist/{components/kemet-combo/styles.js → styles/elements/combo.ts}

@@ -1,5 +1,6 @@
 import { css } from 'lit';
-export const stylesBase = css `
+
+export const stylesBase = css`
   :host {
     --kemet-combo-width: calc(100% - 2px);
     --kemet-combo-margin: 1rem auto;
@@ -53,4 +54,3 @@ export const stylesBase = css `
     background-color: var(--kemet-combo-hover-background-color);
   }
 `;
-//# sourceMappingURL=styles.js.map

package/dist/{components/kemet-drawer/styles.js → styles/elements/drawer.ts}

@@ -1,6 +1,8 @@
 import { css, unsafeCSS } from 'lit';
+
 const documentHeight = `${document.documentElement.scrollHeight}px`;
-export const stylesBase = css `
+
+export const stylesBase = css`
   *,
   *::before,
   *::after {
@@ -105,7 +107,8 @@ export const stylesBase = css `
     background: var(--kemet-drawer-background-color);
   }
 `;
-export const stylesEffects = css `
+
+export const stylesEffects = css`
   /* slide */
   :host([effect='slide']) .off-canvas__nav {
     visibility: visible;
@@ -318,4 +321,3 @@ export const stylesEffects = css `
     transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);
   }
 `;
-//# sourceMappingURL=styles.js.map

package/dist/{components/kemet-fab/styles.js → styles/elements/fab.ts}

@@ -1,5 +1,6 @@
 import { css } from 'lit';
-export const stylesBase = css `
+
+export const stylesBase = css`
   :host {
     --kemet-fab-size: 50px;
     --kemet-fab-color: rgb(var(--kemet-color-white));
@@ -101,4 +102,3 @@ export const stylesBase = css `
     opacity: 1;
   }
 `;
-//# sourceMappingURL=styles.js.map

package/dist/{components/kemet-field/styles.js → styles/elements/field.ts}

@@ -1,5 +1,6 @@
 import { css } from 'lit';
-export const stylesBase = css `
+
+export const stylesBase = css`
   *,
   *::before,
   *::after {
@@ -27,18 +28,6 @@ export const stylesBase = css `
     margin-bottom: 0.8rem;
   }
 
-  :host([status='error']) kemet-icon {
-    color: rgb(var(--kemet-color-error));
-  }
-
-  :host([status='success']) kemet-icon {
-    color: rgb(var(--kemet-color-success));
-  }
-
-  :host([status='warning']) kemet-icon {
-    color: rgb(var(--kemet-color-warning));
-  }
-
   .message {
     font-size: 0.9rem;
     line-height: 1;
@@ -58,4 +47,3 @@ export const stylesBase = css `
     color: rgb(var(--kemet-color-warning));
   }
 `;
-//# sourceMappingURL=styles.js.map

package/dist/{components/kemet-flipcard/styles.js → styles/elements/flipcard.ts}

@@ -1,5 +1,6 @@
 import { css } from 'lit';
-export const stylesBase = css `
+
+export const stylesBase = css`
   *,
   ::after,
   ::before {
@@ -92,4 +93,3 @@ export const stylesBase = css `
     height: 100%;
   }
 `;
-//# sourceMappingURL=styles.js.map

package/dist/styles/elements/icon-lucide.ts

@@ -0,0 +1,7 @@
+import { css } from "lit";
+
+export const stylesBase = css`
+  :host {
+    display: inline-flex;
+  }
+`;

package/dist/{components/kemet-input/styles.js → styles/elements/input.ts}

@@ -1,5 +1,6 @@
 import { css } from 'lit';
-export const stylesBase = css `
+
+export const stylesBase = css`
   :host {
     --kemet-input-height: 50px;
     --kemet-input-padding: 0.5rem 1rem;
@@ -9,7 +10,7 @@ export const stylesBase = css `
     --kemet-input-border-color-warning: 1px solid rgb(var(--kemet-color-warning));
     --kemet-input-icon-left-padding: 3rem;
     --kemet-input-icon-right-padding: 3rem;
-    --kemet-input-border-radius-rounded: var(--kemet-border-radius-md);
+    --kemet-input-border-radius-rounded: 0;
     --kemet-input-border-filled: none;
     --kemet-input-color-filled: rgb(var(--kemet-color-white));
     --kemet-input-background-color-filled: rgb(var(--kemet-color-primary));
@@ -33,6 +34,7 @@ export const stylesBase = css `
     appearance: none;
     box-sizing: border-box;
     background-color: transparent;
+    border-radius: var(--kemet-input-border-radius-rounded);
   }
 
   input[type='color'] {
@@ -71,7 +73,27 @@ export const stylesBase = css `
   }
 
   :host([rounded]) input {
-    border-radius: var(--kemet-input-border-radius-rounded);
+    --kemet-input-border-radius-rounded: var(--kemet-border-radius-md);
+  }
+
+  :host([rounded='sm']) input {
+    --kemet-input-border-radius-rounded: var(--kemet-border-radius-sm);
+  }
+
+  :host([rounded='lg']) input {
+    --kemet-input-border-radius-rounded: var(--kemet-border-radius-lg);
+  }
+
+  :host([rounded='xl']) input {
+    --kemet-input-border-radius-rounded: var(--kemet-border-radius-xl);
+  }
+
+  :host([rounded='circle']) input {
+    --kemet-input-border-radius-rounded: var(--kemet-border-radius-circle);
+  }
+
+  :host([rounded='pill']) input {
+    --kemet-input-border-radius-rounded: var(--kemet-border-radius-pill);
   }
 
   :host([filled]) input {
@@ -97,36 +119,38 @@ export const stylesBase = css `
     background-color: var(--kemet-input-background-color-warning);
   }
 
-  kemet-icon {
+  kemet-icon-bootstrap,
+  ::slotted(kemet-icon-bootstrap) {
     color: rgb(var(--kemet-color-text));
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
   }
 
-  kemet-icon.left {
+  kemet-icon-bootstrap.left,
+  :host([icon-left]) ::slotted(kemet-icon-bootstrap) {
     left: 1rem;
   }
 
-  kemet-icon.right {
+  kemet-icon-bootstrap.right,
+  :host([icon-right]) ::slotted(kemet-icon-bootstrap) {
     right: 1rem;
   }
 
-  kemet-icon.eye,
-  kemet-icon.search {
+  kemet-icon-bootstrap.eye,
+  kemet-icon-bootstrap.search {
     cursor: pointer;
   }
 
-  :host([status='error']) kemet-icon {
+  :host([status='error']) ::slotted(kemet-icon-bootstrap) {
     color: rgb(var(--kemet-color-error));
   }
 
-  :host([status='warning']) kemet-icon {
+  :host([status='warning']) ::slotted(kemet-icon-bootstrap) {
     color: rgb(var(--kemet-color-error));
   }
 
-  :host([status='success']) kemet-icon {
+  :host([status='success']) ::slotted(kemet-icon-bootstrap) {
     color: rgb(var(--kemet-color-success));
   }
 `;
-//# sourceMappingURL=styles.js.map

package/dist/{components/kemet-modal/styles.js → styles/elements/modal.ts}

@@ -1,5 +1,6 @@
 import { css } from 'lit';
-export const stylesBase = css `
+
+export const stylesBase = css`
   *,
   *::before,
   *::after {
@@ -16,6 +17,7 @@ export const stylesBase = css `
     --kemet-modal-dialog-mobile-padding: 1rem;
     --kemet-modal-dialog-background-color: rgb(var(--kemet-color-white));
     --kemet-modal-overlay-background-color: rgb(var(--kemet-color-black) / 20%);
+    --kemet-modal-radius: 0;
 
     position: fixed;
     display: flex;
@@ -34,12 +36,12 @@ export const stylesBase = css `
 
   dialog {
     display: block;
-    position: relative;
     z-index: 3;
     margin: auto;
     min-width: var(--kemet-modal-dialog-min-width);
     max-width: var(--kemet-modal-dialog-max-width);
     border: 0;
+    border-radius: var(--kemet-modal-radius);
     background: var(--kemet-modal-dialog-background-color);
   }
 
@@ -55,7 +57,27 @@ export const stylesBase = css `
   }
 
   :host([rounded]) dialog {
-    border-radius: var(--kemet-modal-radius);
+    --kemet-modal-radius: var(--kemet-border-radius-md);
+  }
+
+  :host([rounded=sm]) dialog {
+    --kemet-modal-radius: var(--kemet-border-radius-sm);
+  }
+
+  :host([rounded=lg]) dialog {
+    --kemet-modal-radius: var(--kemet-border-radius-lg);
+  }
+
+  :host([rounded=xl]) dialog {
+    --kemet-modal-radius: var(--kemet-border-radius-xl);
+  }
+
+  :host([rounded=circle]) dialog {
+    --kemet-modal-radius: var(--kemet-border-radius-circle);
+  }
+
+  :host([rounded=pill]) dialog {
+    --kemet-modal-radius: var(--kemet-border-radius-pill);
   }
 
   :host([rounded][mobile]) dialog {
@@ -65,7 +87,6 @@ export const stylesBase = css `
     border-bottom-right-radius: 0;
   }
 
-
   .overlay {
     position: fixed;
     width: 100%;
@@ -84,7 +105,8 @@ export const stylesBase = css `
     visibility: visible;
   }
 `;
-export const stylesEffects = css `
+
+export const stylesEffects = css`
   /* fadein-scaleup */
   :host([effect="fadein-scaleup"]) dialog {
     transform: scale(0.7);
@@ -293,4 +315,3 @@ export const stylesEffects = css `
     opacity: 1;
   }
 `;
-//# sourceMappingURL=styles.js.map