kemet-ui 4.0.2 → 5.0.0

package/dist/styles/elements/popper.ts

@@ -1,349 +0,0 @@
-import { css } from 'lit';
-
-export const stylesPopper = css`
-  :host {
-    --kemet-popper-width: auto;
-    --kemet-popper-height: auto;
-    --kemet-popper-padding: 1rem;
-    --kemet-popper-border-color: rgb(var(--kemet-color-foreground));
-    --kemet-popper-background-color: rgb(var(--kemet-color-background));
-
-    display: inline-block;
-  }
-
-  #content {
-    visibility: hidden;
-    pointer-events: none;
-    width: var(--kemet-popper-width);
-    height: var(--kemet-popper-height);
-    position: absolute;
-    z-index: -1;
-    opacity: 0;
-    transition: all var(--kemet-popover-transition-speed, 0.3s);
-  }
-
-  :host([opened]) #content {
-    visibility: visible;
-    z-index: 9;
-    opacity: 1;
-    pointer-events: auto;
-  }
-
-  ::slotted([slot="content"]) {
-    padding: var(--kemet-popper-padding);
-    border: 1px solid var(--kemet-popper-border-color);
-    background-color: var(--kemet-popper-background-color);
-  }
-`;
-
-export const stylesPopperFade = css`
-  :host([effect="fade"]) #content {
-    opacity: 0;
-    transition: all var(--kemet-popover-transition-speed, 0.3s);
-  }
-
-  :host([effect="fade"][opened]) #content {
-    opacity: 1;
-  }
-`;
-
-export const stylesPopperScale = css`
-  :host([effect="scale"]) #content {
-    opacity: 0;
-    transition: all var(--kemet-popover-transition-speed, 0.3s);
-  }
-
-  :host([effect="scale"][opened]) #content {
-    opacity: 1;
-  }
-
-  :host([effect="scale"][position="top"]) #content,
-  :host([effect="scale"][position="bottom"]) #content {
-    transform: translateX(-50%) scale(0.7);
-  }
-
-  :host([effect="scale"][position="top"][opened]) #content,
-  :host([effect="scale"][position="bottom"][opened]) #content {
-    transform: translateX(-50%) scale(1);
-  }
-
-  :host([effect="scale"][position="left"]) #content,
-  :host([effect="scale"][position="right"]) #content {
-    transform: translateY(-50%) scale(0.7);
-  }
-
-  :host([effect="scale"][position="left"][opened]) #content,
-  :host([effect="scale"][position="right"][opened]) #content {
-    transform: translateY(-50%) scale(1);
-  }
-`;
-
-export const stylesPopperSlide = css`
-  :host([effect="slide"]) #content {
-    opacity: 0;
-    transition: all var(--kemet-popover-transition-speed, 0.3s) cubic-bezier(0.25, 0.5, 0.5, 0.9);
-  }
-
-  :host([effect="slide"][opened]) #content {
-    opacity: 1;
-  }
-
-  :host([effect="slide"][position="top"]) #content {
-    transform: translateX(-50%) translateY(20%);
-  }
-
-  :host([effect="slide"][position="top"][opened]) #content {
-    transform: translateX(-50%) translateY(0);
-  }
-
-  :host([effect="slide"][position="bottom"]) #content {
-    transform: translateX(-50%) translateY(-20%);
-  }
-
-  :host([effect="slide"][position="bottom"][opened]) #content {
-    transform: translateX(-50%) translateY(0);
-  }
-
-  :host([effect="slide"][position="right"]) #content {
-    transform: translateY(-50%) translateX(-20%);
-  }
-
-  :host([effect="slide"][position="right"][opened]) #content {
-    transform: translateY(-50%) translateX(0);
-  }
-
-  :host([effect="slide"][position="left"]) #content {
-    transform: translateY(-50%) translateX(20%);
-  }
-
-  :host([effect="slide"][position="left"][opened]) #content {
-    transform: translateY(-50%) translateX(0);
-  }
-`;
-
-export const stylesPopperFall = css`
-  :host([effect="fall"]) {
-    perspective: 1300px;
-  }
-
-  :host([effect="fall"]) #content {
-    transform-style: preserve-3d;
-    opacity: 0;
-  }
-
-  :host([effect="fall"][opened]) #content {
-    transition: all var(--kemet-popover-transition-speed, 0.3s) ease-in;
-    opacity: 1;
-  }
-
-  :host([effect="fall"][position="top"]) #content {
-    transform: translateX(-50%) translateZ(600px) rotateX(20deg);
-  }
-
-  :host([effect="fall"][position="top"][opened]) #content {
-    transform: translateX(-50%) translateZ(0px) rotateX(0deg);
-  }
-
-  :host([effect="fall"][position="bottom"]) #content {
-    transform: translateX(-50%) translateZ(600px) rotateX(20deg);
-  }
-
-  :host([effect="fall"][position="bottom"][opened]) #content {
-    transform: translateX(-50%) translateZ(0px) rotateX(0deg);
-  }
-
-  :host([effect="fall"][position="right"]) #content {
-    transform: translateY(-50%) translateZ(600px) rotateX(20deg);
-  }
-
-  :host([effect="fall"][position="right"][opened]) #content {
-    transform: translateY(-50%) translateZ(0px) rotateX(0deg);
-  }
-
-  :host([effect="fall"][position="left"]) #content {
-    transform: translateY(-50%) translateZ(600px) rotateX(20deg);
-  }
-
-  :host([effect="fall"][position="left"][opened]) #content {
-    transform: translateY(-50%) translateZ(0px) rotateX(0deg);
-  }
-`;
-
-export const stylesPopperFlipHorizontal = css`
-  :host([effect="flip-horizontal"]) {
-    perspective: 1300px;
-  }
-
-  :host([effect="flip-horizontal"]) #content {
-    transform-style: preserve-3d;
-    transition: all var(--kemet-popover-transition-speed, 0.3s);
-    opacity: 0;
-  }
-
-  :host([effect="flip-horizontal"][opened]) #content {
-    opacity: 1;
-  }
-
-  :host([effect="flip-horizontal"][position="top"]) #content {
-    transform: translateX(-50%) rotateY(-70deg);
-  }
-
-  :host([effect="flip-horizontal"][position="top"][opened]) #content {
-    transform: translateX(-50%) rotateY(0deg);
-  }
-
-  :host([effect="flip-horizontal"][position="bottom"]) #content {
-    transform: translateX(-50%) rotateY(-70deg);
-  }
-
-  :host([effect="flip-horizontal"][position="bottom"][opened]) #content {
-    transform: translateX(-50%) rotateY(0deg);
-  }
-
-  :host([effect="flip-horizontal"][position="right"]) #content {
-    transform: translateY(-50%) rotateY(-70deg);
-  }
-
-  :host([effect="flip-horizontal"][position="right"][opened]) #content {
-    transform: translateY(-50%) rotateY(0deg);
-  }
-
-  :host([effect="flip-horizontal"][position="left"]) #content {
-    transform: translateY(-50%) rotateY(-70deg);
-  }
-
-  :host([effect="flip-horizontal"][position="left"][opened]) #content {
-    transform: translateY(-50%) rotateY(0deg);
-  }
-`;
-
-export const stylesPopperFlipVertical = css`
-  :host([effect="flip-vertical"]) {
-    perspective: 1300px;
-  }
-
-  :host([effect="flip-vertical"]) #content {
-    transform-style: preserve-3d;
-    transition: all var(--kemet-popover-transition-speed, 0.3s);
-    opacity: 0;
-  }
-
-  :host([effect="flip-vertical"][opened]) #content {
-    opacity: 1;
-  }
-
-  :host([effect="flip-vertical"][position="top"]) #content {
-    transform: translateX(-50%) rotateX(-70deg);
-  }
-
-  :host([effect="flip-vertical"][position="top"][opened]) #content {
-    transform: translateX(-50%) rotateX(0deg);
-  }
-
-  :host([effect="flip-vertical"][position="bottom"]) #content {
-    transform: translateX(-50%) rotateX(-70deg);
-  }
-
-  :host([effect="flip-vertical"][position="bottom"][opened]) #content {
-    transform: translateX(-50%) rotateX(0deg);
-  }
-
-  :host([effect="flip-vertical"][position="right"]) #content {
-    transform: translateY(-50%) rotateX(-70deg);
-  }
-
-  :host([effect="flip-vertical"][position="right"][opened]) #content {
-    transform: translateY(-50%) rotateX(0deg);
-  }
-
-  :host([effect="flip-vertical"][position="left"]) #content {
-    transform: translateY(-50%) rotateX(-70deg);
-  }
-
-  :host([effect="flip-vertical"][position="left"][opened]) #content {
-    transform: translateY(-50%) rotateX(0deg);
-  }
-`;
-
-export const stylesPopperSign = css`
-  :host([effect="sign"]) {
-    perspective: 1300px;
-  }
-
-  :host([effect="sign"]) #content {
-    transform-style: preserve-3d;
-    transition: all var(--kemet-popover-transition-speed, 0.3s);
-    opacity: 0;
-  }
-
-  :host([effect="sign"][opened]) #content {
-    opacity: 1;
-  }
-
-  :host([effect="sign"][position="top"]) #content {
-    transform-origin: 0 100%;
-    transform: translateX(-50%) rotateX(90deg);
-  }
-
-  :host([effect="sign"][position="top"][opened]) #content {
-    transform: translateX(-50%) rotateX(0deg);
-  }
-
-  :host([effect="sign"][position="bottom"]) #content {
-    transform-origin: 100% 0;
-    transform: translateX(-50%) rotateX(90deg);
-  }
-
-  :host([effect="sign"][position="bottom"][opened]) #content {
-    transform: translateX(-50%) rotateX(0deg);
-  }
-
-  :host([effect="sign"][position="right"]) #content {
-    transform-origin: 0 100%;
-    transform: translateY(-50%) rotateY(90deg);
-  }
-
-  :host([effect="sign"][position="right"][opened]) #content {
-    transform: translateY(-50%) rotateY(0deg);
-  }
-
-  :host([effect="sign"][position="left"]) #content {
-    transform-origin: 100% 0;
-    transform: translateY(-50%) rotateY(90deg);
-  }
-
-  :host([effect="sign"][position="left"][opened]) #content {
-    transform: translateY(-50%) rotateY(0deg);
-  }
-`;
-
-export const stylesPopperSuperScaled = css`
-  :host([effect="super-scaled"]) #content {
-    opacity: 0;
-    transition: all var(--kemet-popover-transition-speed, 0.3s);
-  }
-
-  :host([effect="super-scaled"][opened]) #content {
-    opacity: 1;
-  }
-
-  :host([effect="super-scaled"][position="top"]) #content,
-  :host([effect="super-scaled"][position="bottom"]) #content {
-    transform: translateX(-50%) scale(2);
-  }
-
-  :host([effect="super-scaled"][position="top"][opened]) #content,
-  :host([effect="super-scaled"][position="bottom"][opened]) #content {
-    transform: translateX(-50%) scale(1);
-  }
-
-  :host([effect="super-scaled"][position="left"]) #content,
-  :host([effect="super-scaled"][position="right"]) #content {
-    transform: translateY(-50%) scale(2);
-  }
-
-  :host([effect="super-scaled"][position="left"][opened]) #content,
-  :host([effect="super-scaled"][position="right"][opened]) #content {
-    transform: translateY(-50%) scale(1);
-  }
-`;

package/dist/styles/elements/radio.ts

@@ -1,113 +0,0 @@
-import { css } from 'lit';
-
-export const stylesRadio = css`
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  :host {
-    --kemet-radio-size: 18px;
-    --kemet-radio-border: 1px solid rgb(var(--kemet-color-foreground));
-    --kemet-radio-dot-color: rgb(var(--kemet-color-primary));
-    --kemet-radio-dot-border: 1px solid rgb(var(--kemet-color-primary));
-    --kemet-radio-dot-border-width: 3px;
-    --kemet-radio-dot-ring-color: rgb(var(--kemet-color-white));
-    --kemet-radio-dot-color-filled: rgb(var(--kemet-color-white));
-    --kemet-radio-dot-border-width: 4px;
-    --kemet-radio-dot-border-color: rgb(var(--kemet-color-primary));
-
-    display: inline-block;
-  }
-
-  :host([disabled]) {
-    opacity: 0.5;
-  }
-
-  label {
-    cursor: pointer;
-    display: inline-flex;
-    gap: 0.5rem;
-    align-items: center;
-    margin-right: 0.5rem;
-  }
-
-  input {
-    cursor: pointer;
-    margin: 0;
-    padding: 0;
-    width: var(--kemet-radio-size);
-    height: var(--kemet-radio-size);
-    position: absolute;
-    opacity: 0;
-  }
-
-  button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--kemet-radio-size);
-    height: var(--kemet-radio-size);
-    padding: 0;
-    border-radius: var(--kemet-border-radius-circle);
-    background: none;
-    border: var(--kemet-radio-border);
-  }
-
-  [part='dot'] {
-    display: inline-flex;
-    border-radius: var(--kemet-border-radius-circle);
-    width: var(--kemet-radio-size);
-    height: var(--kemet-radio-size);
-    background: var(--kemet-radio-dot-color);
-    border: var(--kemet-radio-dot-border);
-    box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width) var(--kemet-radio-dot-ring-color);
-  }
-
-  :host([filled]) [part='dot'] {
-    background: var(--kemet-radio-dot-color-filled);
-    box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width) var(--kemet-radio-dot-border-color);
-  }
-`;
-
-export const stylesRadios = css`
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  :host {
-    display: block;
-  }
-
-  fieldset {
-    border: 0;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    gap: 0.5rem;
-  }
-
-  legend {
-    margin-bottom: 1rem;
-  }
-
-  :host([axis='vertical']) fieldset {
-    flex-direction: column;
-  }
-
-  [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/rotator.ts

@@ -1,74 +0,0 @@
-import { css } from 'lit';
-
-export const stylesRotator = css`
-  :host {
-    --kemet-rotator-transition-speed: 500ms;
-
-    display: flex;
-  }
-
-  .rotator__slide {
-    pointer-events: none;
-  }
-
-  .rotator__slide--active {
-    pointer-events: auto;
-  }
-
-  /* fade effect */
-  :host([effect="fade"]) .rotator {
-    display: inline-flex;
-    flex-wrap: nowrap;
-    flex-direction: row;
-  }
-
-  :host([effect="fade"]) .rotator__slide {
-    width: 100%;
-    flex: none;
-    opacity: 0;
-    box-sizing: border-box;
-    transition: all var(--kemet-rotator-transition-speed) ease;
-  }
-
-  :host([effect="fade"]) .rotator__slide:not(:first-child) {
-    margin-left: -100%; /* this is the bulk of the overlay trick */
-  }
-
-  :host([effect="fade"]) .rotator__slide--active {
-    opacity: 1;
-  }
-
-  /* flip effect */
-  :host([effect="flip"]) .rotator {
-    display: flex;
-    position: relative;
-
-    perspective: 500;
-  }
-
-  :host([effect="flip"]) .rotator__slide {
-    display: block;
-    width: auto;
-    position: absolute;
-    top: -20px;
-    left: 0;
-
-    opacity: 0;
-
-    transform: rotateX(90deg);
-    transform-origin: 0% 0%;
-    transition: all var(--kemet-rotator-transition-speed) ease;
-  }
-
-  :host([effect="flip"]) .rotator__slide--active {
-    top: 0;
-    opacity: 1;
-
-    transform: rotateX(0deg);
-  }
-
-  :host([effect="flip"]) .rotator__slide--prev {
-    top: 40px;;
-    transform: rotateX(-90deg);
-  }
-`;

package/dist/styles/elements/scroll-nav.ts

@@ -1,33 +0,0 @@
-import { css } from 'lit';
-
-export const stylesScrollNav = css`
-  :host {
-    --kemet-scroll-nav-padding: 1rem 2rem;
-    --kemet-scroll-nav-background: rgb(var(--kemet-color-gray-50));
-    --kemet-scroll-nav-transition: 300ms;
-    --kemet-scroll-nav-resize-height: 400px;
-    --kemet-scroll-nav-resize-height-transformed: 100px;
-
-    display: block;
-    box-sizing: border-box;
-    padding: var(--kemet-scroll-nav-padding);
-    background-color: var(--kemet-scroll-nav-background);
-    transition: all var(--kemet-scroll-nav-transition, 300ms) ease;
-  }
-
-  :host([transform]),
-  :host([effect="resize"]) {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-  }
-
-  :host([effect="resize"]) {
-    height: var(--kemet-scroll-nav-resize-height);
-  }
-
-  :host([transform][effect="resize"]) {
-    height: var(--kemet-scroll-nav-resize-height-transformed);
-  }
-`;

package/dist/styles/elements/scroll-snap.ts

@@ -1,83 +0,0 @@
-import { css } from 'lit';
-
-export const stylesScrollSnap = css`
-  *,
-  *::after,
-  *::before {
-    box-sizing: border-box;
-  }
-
-  :host {
-    --kemet-scroll-snap-horizontal-max-width: 1024px;
-    --kemet-scroll-snap-vertical-height: 100vh;
-    --kemet-scroll-snap-slides-vertical-padding: 0 2rem;
-
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-  }
-
-  :host([axis='horizontal']) {
-    margin: auto;
-    max-width: var(--kemet-scroll-snap-horizontal-max-width);
-  }
-
-  :host([pagination="left"]),
-  :host([pagination="right"]) {
-    flex-direction: row;
-  }
-
-  :host([pagination="none"]) ::slotted([slot="pagination"]) {
-    display: none;
-  }
-
-  :host([pagination="top"]) ::slotted([slot="pagination"]),
-  :host([pagination="left"]) ::slotted([slot="pagination"]) {
-    order: -1;
-  }
-
-
-  ::slotted([slot="slides"]) {
-    display: flex;
-    gap: var(--kemet-scroll-snap-gap, 1.5rem);
-    scroll-snap-type: x mandatory;
-    overflow-x: scroll;
-  }
-
-  /* vertical */
-  :host([axis="vertical"]) {
-    height: var(--kemet-scroll-snap-vertical-height);
-  }
-
-  :host([axis="vertical"]) ::slotted([slot="slides"]) {
-    flex-direction: column;
-    overflow-x: hidden;
-    scroll-snap-type: y mandatory;
-    padding: var(--kemet-scroll-snap-slides-vertical-padding);
-  }
-`;
-
-export const stylesScrollSnapPaginator = css`
-  :host {
-    --kemet-scroll-snap-paginator-padding: 1rem 0;
-    --kemet-scroll-snap-paginator-gap: 0.5rem;
-    --kemet-scroll-snap-paginator-link-color: rgb(var(--kemet-color-primary));
-
-    margin: auto;
-    padding: var(--kemet-scroll-snap-paginator-padding);
-  }
-
-  nav {
-    display: flex;
-    gap: var(--kemet-scroll-snap-paginator-gap);
-  }
-
-  :host([center]) nav {
-    justify-content: center;
-  }
-
-  .link {
-    cursor: pointer;
-    color: var(--kemet-scroll-snap-paginator-link-color);
-  }
-`;