kemet-ui 4.0.2 → 5.0.0

package/dist/styles/elements/card.ts

@@ -1,78 +0,0 @@
-import { css } from 'lit';
-
-export const stylesBase = css`
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  :host {
-    --kemet-card-padding: 1rem;
-    --kemet-card-border-color: rgb(var(--kemet-color-gray-300));
-    --kemet-card-color: rgb(var(--kemet-color-text));
-    --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-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);
-    --kemet-card-caption-color: rgb(var(--kemet-color-white));
-    --kemet-card-caption-padding: calc(var(--kemet-card-padding) / 2) var(--kemet-card-padding);
-    --kemet-card-caption-background-color: rgb(var(--kemet-color-black) / 35%);
-    --kemet-card-footer-padding: var(--kemet-card-padding);
-    --kemet-card-footer-border-top: 1px solid var(--kemet-card-border-color);
-
-    color: var(--kemet-card-color);
-    display: inline-flex;
-    flex-direction: column;
-    max-width: var(--kemet-card-max-width);
-    border: var(--kemet-card-border);
-    border-radius: var(--kemet-card-border-radius);
-    background-color: var(--kemet-card-background-color);
-  }
-
-  :host([center]) {
-    align-items: center;
-    text-align: center;
-  }
-
-  .body {
-    padding: var(--kemet-card-body-padding);
-  }
-
-  .media {
-    position: relative;
-  }
-
-  ::slotted(*) {
-    max-width: 100%;
-  }
-
-  ::slotted(img) {
-    display: flex;
-    max-width: 100%;
-  }
-
-  ::slotted([slot="header"]) {
-    width: 100%;
-    padding: var(--kemet-card-header-padding);
-    border-bottom: var(--kemet-card-header-border-bottom);
-  }
-
-  ::slotted([slot="caption"]) {
-    color: var(--kemet-card-caption-color);
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    padding: var(--kemet-card-caption-padding);
-    background-color: var(--kemet-card-caption-background-color);
-  }
-
-  ::slotted([slot="footer"]) {
-    width: 100%;
-    padding: var(--kemet-card-footer-padding);
-    border-top: var(--kemet-card-footer-border-top);
-  }
-`;

package/dist/styles/elements/carousel.ts

@@ -1,82 +0,0 @@
-import { css } from 'lit';
-
-export const stylesCarousel = css`
-  :host,
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  :host {
-    --kemet-carousel-width: 100%;
-    --kemet-carousel-height: auto;
-    --kemet-carousel-toolbar-gap: 1rem;
-    --kemet-carousel-toolbar-justify-content: center;
-    --kemet-carousel-toolbar-padding: 1rem;
-    --kemet-carousel-toolbar-inner-width: 100%;
-    --kemet-carousel-toolbar-inner-bottom: 0;
-    --kemet-carousel-toolbar-inner-top: auto;
-    --kemet-carousel-toolbar-inner-color: rgb(var(--kemet-color-white));
-    --kemet-carousel-toolbar-inner-background-color: rgb(var(--kemet-color-black) / 40%);
-    --kemet-carousel-slides-border: 1px solid rgb(var(--kemet-color-gray-50));
-    --kemet-carousel-transition-speed: 300ms;
-    --kemet-carousel-arrows-opacity: 0.25;
-    --kemet-carousel-arrows-transition-speed: 300ms;
-    --kemet-carousel-arrows-opacity-hover: 1;
-
-    position: relative;
-    display: grid;
-    grid-template-columns: minmax(0, 1fr);
-    align-items: center;
-    width: var(--kemet-carousel-width);
-    height: var(--kemet-carousel-height);
-    overflow: visible;
-  }
-
-  :host([arrows]) {
-    grid-template-columns: auto minmax(0, 1fr) auto;
-  }
-
-  .toolbar {
-    display: flex;
-    gap: var(--kemet-carousel-toolbar-gap);
-    align-items: center;
-    justify-content: var(--kemet-carousel-toolbar-justify-content);
-    line-height: 1;
-    padding: var(--kemet-carousel-toolbar-padding);
-  }
-
-  :host([inner]) .toolbar {
-    width: var(--kemet-carousel-toolbar-inner-width);
-    position: absolute;
-    bottom: var(--kemet-carousel-toolbar-inner-bottom);
-    top: var(--kemet-carousel-toolbar-inner-top);
-    color: var(--kemet-carousel-toolbar-inner-color);
-    background-color: var(--kemet-carousel-toolbar-inner-background-color);
-  }
-
-  .slides {
-    overflow: hidden;
-    position: relative;
-    padding: 1rem 0;
-    border: var(--kemet-carousel-slides-border);
-  }
-
-  .slider {
-    display: flex;
-    flex-wrap: nowrap;
-    transition: transform var(--kemet-carousel-transition-speed) ease;
-  }
-
-  ::slotted([slot='next']),
-  ::slotted([slot='prev']) {
-    opacity: var(--kemet-carousel-arrows-opacity);
-    transition: opacity var(--kemet-carousel-arrows-transition-speed) ease-in-out;
-  }
-
-  :host(:hover) ::slotted([slot='next']),
-  :host(:hover) ::slotted([slot='prev']) {
-    opacity: var(--kemet-carousel-arrows-opacity-hover);
-  }
-`;

package/dist/styles/elements/checkbox.ts

@@ -1,90 +0,0 @@
-import { css } from 'lit';
-
-export const stylesBase = css`
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  :host {
-    --kemet-checkbox-size: 18px;
-    --kemet-checkbox-color: rgb(var(--kemet-color-foreground));
-    --kemet-checkbox-border: 1px solid rgb(var(--kemet-color-foreground));
-    --kemet-checkbox-border-radius: var(--kemet-border-radius-md);
-    --kemet-checkbox-filled-background-color: rgb(var(--kemet-color-primary));
-    --kemet-checkbox-filled-color: rgb(var(--kemet-color-white));
-
-    display: inline-block;
-  }
-
-  :host([disabled]) {
-    opacity: 0.5;
-  }
-
-  label {
-    display: inline-flex;
-    gap: 0.5rem;
-    align-items: center;
-  }
-
-  input {
-    cursor: pointer;
-    margin: 0;
-    padding: 0;
-    width: var(--kemet-checkbox-size);
-    height: var(--kemet-checkbox-size);
-    position: absolute;
-    opacity: 0;
-  }
-
-  button {
-    margin: 0;
-    border: none;
-    background: none;
-  }
-
-  [part='checkbox'] {
-    color: var(--kemet-checkbox-color);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--kemet-checkbox-size);
-    height: var(--kemet-checkbox-size);
-    border: var(--kemet-checkbox-border);
-  }
-
-  :host([rounded]) [part='checkbox'] {
-    border-radius: var(--kemet-checkbox-border-radius);
-  }
-
-  :host([filled][checked]) [part='checkbox'],
-  :host([filled][indeterminate]) [part='checkbox'] {
-    border: none;
-    background-color: var(--kemet-checkbox-filled-background-color);
-  }
-
-  [part='mark'] {
-    display: flex;
-    width: calc(var(--kemet-checkbox-size) - 4px);
-    height: calc(var(--kemet-checkbox-size) - 4px);
-  }
-
-  :host([filled][checked]) [part='mark'],
-  :host([filled][indeterminate]) [part='mark'] {
-    color: var(--kemet-checkbox-filled-color);
-  }
-
-  [part='message'] {
-    display: block;
-    margin-top: 0.5rem;
-  }
-
-  :host([status='error']) [part='message'] {
-    color: rgb(var(--kemet-color-error));
-  }
-
-  :host([status='warning']) [part='message'] {
-    color: rgb(var(--kemet-color-error));
-  }
-`;

package/dist/styles/elements/combo.ts

@@ -1,56 +0,0 @@
-import { css } from 'lit';
-
-export const stylesBase = css`
-  :host {
-    --kemet-combo-width: calc(100% - 2px);
-    --kemet-combo-margin: 1rem auto;
-    --kemet-combo-max-height: calc(5 * 3rem);
-    --kemet-combo-border: 1px solid rgb(var(--kemet-color-foreground));
-    --kemet-combo-border-radius: var(--kemet-border-radius-md);
-    --kemet-combo-background-color: rgb(var(--kemet-color-white-to-black));
-    --kemet-combo-shadow: var(--kemet-elevation-layer-5);
-    --kemet-combo-hover-color: rgb(var(--kemet-color-white));
-    --kemet-combo-hover-background-color: rgb(var(--kemet-color-primary));
-
-    opacity: 0;
-    width: var(--kemet-combo-width);
-    margin: var(--kemet-combo-margin);
-    pointer-events: none;
-    display: block;
-    position: relative;
-    transition: opacity 0.3s ease-in-out;
-  }
-
-  :host([show]) {
-    opacity: 1;
-    pointer-events: auto;
-  }
-
-  ul {
-    width: 100%;
-    max-height: var(--kemet-combo-max-height);
-    position: absolute;
-    z-index: 1;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    overflow-y: scroll;
-    border: var(--kemet-combo-border);
-    border-radius: var(--kemet-combo-border-radius);
-    background-color: var(--kemet-combo-background-color);
-    box-shadow: var(--kemet-combo-shadow);
-  }
-
-  li {
-    line-height: 3rem;
-    padding: 0 1.5rem;
-    cursor: pointer;
-  }
-
-  li:hover,
-  li:focus {
-    color: var(--kemet-combo-hover-color);
-    outline: none;
-    background-color: var(--kemet-combo-hover-background-color);
-  }
-`;

package/dist/styles/elements/drawer.ts

@@ -1,323 +0,0 @@
-import { css, unsafeCSS } from 'lit';
-
-const documentHeight = `${document.documentElement.scrollHeight}px`;
-
-export const stylesBase = css`
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  :host {
-    --kemet-drawer-overlay-color: rgb(var(--kemet-color-black) / 20%);
-    --kemet-drawer-width: 300px;
-    --kemet-drawer-height: 100%;
-    --kemet-drawer-color: rgb(var(--kemet-color-gray-50));
-    --kemet-drawer-background-color: rgb(var(--kemet-color-gray-950));
-
-    width: 100%;
-  }
-
-  .off-canvas {
-    position: relative;
-    overflow: hidden;
-  }
-
-  .off-canvas__nav {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 100;
-    visibility: hidden;
-    height: 100%;
-    overflow: auto;
-    transition: all 0.5s;
-  }
-
-  .off-canvas__nav::after {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.2);
-    content: '';
-    opacity: 1;
-    transition: opacity 0.5s;
-  }
-
-  :host([opened]) .off-canvas__nav::after {
-    width: 0;
-    height: 0;
-    opacity: 0;
-    transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
-  }
-
-  .off-canvas__pusher {
-    position: relative;
-    left: 0;
-    z-index: 99;
-    height: 100%;
-    transition: transform 0.5s;
-  }
-
-  :host([overlay]) .off-canvas__pusher::after {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 0;
-    height: 0;
-    background: var(--kemet-drawer-overlay-color);
-    content: '';
-    opacity: 0;
-    transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
-  }
-
-  :host([opened]) .off-canvas__pusher::after {
-    width: 100%;
-    height: 100%;
-    opacity: 1;
-    transition: opacity 0.5s;
-    transform: scale(2);
-  }
-
-  .off-canvas__content {
-    position: relative;
-    /* overflow-y: scroll; */
-    min-height: 100vh;
-  }
-
-  .off-canvas__wrapper {
-    position: relative;
-  }
-
-  ::slotted([slot="content"]) {
-    min-height: 100vh;
-  }
-
-  /* -------------------------------------- */
-  /* custom properties */
-  /* -------------------------------------- */
-
-  .off-canvas__nav {
-    width: var(--kemet-drawer-width);
-    height: var(--kemet-drawer-height);
-    color: var(--kemet-drawer-color);
-    background: var(--kemet-drawer-background-color);
-  }
-`;
-
-export const stylesEffects = css`
-  /* slide */
-  :host([effect='slide']) .off-canvas__nav {
-    visibility: visible;
-    transform: translate3d(-100%, 0, 0);
-  }
-
-  :host([effect='slide'][opened]) .off-canvas__nav {
-    visibility: visible;
-    transform: translate3d(0, 0, 0);
-  }
-
-  :host([effect='slide']) .off-canvas__nav:after {
-    display: none;
-  }
-
-  :host([effect='slide'][side='right']) .off-canvas__nav {
-    transform: translate3d(100vw, 0, 0);
-  }
-
-  :host([effect='slide'][side='right'][opened]) .off-canvas__nav {
-    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);
-  }
-
-  :host([effect='slide'][side='top']) .off-canvas__nav {
-    width: 100vw;
-    height: var(--kemet-drawer-height, 100vh);
-    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);
-  }
-
-  :host([effect='slide'][side='top'][opened]) .off-canvas__nav {
-    transform: translate3d(0, 0, 0);
-  }
-
-  :host([effect='slide'][side='bottom']) .off-canvas__nav {
-    width: 100vw;
-    height: var(--kemet-drawer-height, 100vh);
-    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);
-  }
-
-  :host([effect='slide'][side='bottom'][opened]) .off-canvas__nav {
-    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);
-  }
-
-  /* reveal */
-  :host([effect='reveal'][opened]) .off-canvas__pusher {
-    transform: translate3d(var(--kemet-drawer-width), 0, 0);
-  }
-
-  :host([effect='reveal']) .off-canvas__nav {
-    z-index: 1;
-  }
-
-  :host([effect='reveal'][opened]) .off-canvas__nav {
-    visibility: visible;
-    transition: transform 0.5s;
-  }
-
-  :host([effect='reveal']) .off-canvas__nav::after {
-    display: none;
-  }
-
-  :host([effect='reveal'][side='right'][opened]) .off-canvas__pusher {
-    transform: translate3d(0, 0, 0);
-  }
-
-  :host([effect='reveal'][side='right']) .off-canvas__nav {
-    transform: translate3d(100vw, 0, 0);
-  }
-
-  :host([effect='reveal'][side='right'][opened]) .off-canvas__nav {
-    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);
-  }
-
-  :host([effect='reveal'][side='top']) .off-canvas__nav {
-    width: 100vw;
-    height: var(--kemet-drawer-height, 100vh);
-    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);
-  }
-
-  :host([effect='reveal'][side='top'][opened]) .off-canvas__nav {
-    transform: translate3d(0, 0, 0);
-  }
-
-  :host([effect='reveal'][side='top'][opened]) .off-canvas__pusher {
-    transform: translate3d(0, var(--kemet-drawer-height), 0);
-  }
-
-  :host([effect='reveal'][side='bottom']) .off-canvas__nav {
-    width: 100vw;
-    height: var(--kemet-drawer-height, 100vh);
-    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);
-  }
-
-  :host([effect='reveal'][side='bottom'][opened]) .off-canvas__nav {
-    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);
-  }
-
-  :host([effect='reveal'][side='bottom'][opened]) .off-canvas__pusher {
-    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);
-  }
-
-  /* push */
-  :host([effect='push'][opened]) .off-canvas__pusher {
-    transform: translate3d(var(--kemet-drawer-width), 0, 0);
-  }
-
-  :host([effect='push']) .off-canvas__nav {
-    transform: translate3d(-100%, 0, 0);
-  }
-
-  :host([effect='push'][opened]) .off-canvas__nav {
-    visibility: visible;
-    transition: transform 0.5s;
-    transform: translate3d(0, 0, 0);
-  }
-
-  :host([effect='push']) .off-canvas__nav::after {
-    display: none;
-  }
-
-  :host([effect='push'][side='right'][opened]) .off-canvas__pusher {
-    transform: translate3d(calc(var(--kemet-drawer-width) * -1), 0, 0);
-  }
-
-  :host([effect='push'][side='right']) .off-canvas__nav {
-    transform: translate3d(100vw, 0, 0);
-  }
-
-  :host([effect='push'][side='right'][opened]) .off-canvas__nav {
-    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);
-  }
-
-  :host([effect='push'][side='top']) .off-canvas__nav {
-    width: 100vw;
-    height: var(--kemet-drawer-height, 100vh);
-    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);
-  }
-
-  :host([effect='push'][side='top'][opened]) .off-canvas__nav {
-    transform: translate3d(0, 0, 0);
-  }
-
-  :host([effect='push'][side='top'][opened]) .off-canvas__pusher {
-    transform: translate3d(0, var(--kemet-drawer-height), 0);
-  }
-
-  :host([effect='push'][side='bottom']) .off-canvas__nav {
-    width: 100vw;
-    height: var(--kemet-drawer-height);
-    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);
-  }
-
-  :host([effect='push'][side='bottom'][opened]) .off-canvas__nav {
-    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);
-  }
-
-  :host([effect='push'][side='bottom'][opened]) .off-canvas__pusher {
-    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);
-  }
-
-  /* scale */
-  :host([effect='scale']) .off-canvas__pusher {
-    transform-style: preserve-3d;
-  }
-
-  :host([effect='scale'][opened]) .off-canvas__pusher {
-    transform: translate3d(0, 0, 0) scale(0.95);
-  }
-
-  :host([effect='scale']) .off-canvas__nav {
-    opacity: 1;
-    transform: translate3d(-100%, 0, 0);
-  }
-
-  :host([effect='scale'][opened]) .off-canvas__nav {
-    visibility: visible;
-    transition: transform 0.5s;
-    transform: translate3d(0, 0, 0);
-  }
-
-  :host([effect='scale']) .off-canvas__nav::after {
-    display: none;
-  }
-
-  :host([effect='scale'][side='right']) .off-canvas__nav {
-    transform: translate3d(100vw, 0, 0);
-  }
-
-  :host([effect='scale'][side='right'][opened]) .off-canvas__nav {
-    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);
-  }
-
-  :host([effect='scale'][side='top']) .off-canvas__nav {
-    width: 100vw;
-    height: var(--kemet-drawer-height, 100vh);
-    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);
-  }
-
-  :host([effect='scale'][side='top'][opened]) .off-canvas__nav {
-    transform: translate3d(0, 0, 0);
-  }
-
-  :host([effect='scale'][side='bottom']) .off-canvas__nav {
-    width: 100vw;
-    height: var(--kemet-drawer-height, 100vh);
-    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);
-  }
-
-  :host([effect='scale'][side='bottom'][opened]) .off-canvas__nav {
-    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);
-  }
-`;