kemet-ui 4.0.2 → 5.0.0

package/dist/styles/elements/select.ts

@@ -1,113 +0,0 @@
-import { css } from 'lit';
-
-export const stylesSelect = css`
-  :host {
-    --kemet-select-padding: 1rem;
-    --kemet-select-border: 1px solid rgb(var(--kemet-color-foreground));
-    --kemet-select-border-color-error: 1px solid rgb(var(--kemet-color-error));
-    --kemet-select-border-color-success: 1px solid rgb(var(--kemet-color-success));
-    --kemet-select-border-color-warning: 1px solid rgb(var(--kemet-color-warning));
-    --kemet-select-border-radius-rounded: var(--kemet-border-radius-md);
-    --kemet-select-border-filled: none;
-    --kemet-select-color-filled: rgb(var(--kemet-color-white));
-    --kemet-select-background-color-filled: rgb(var(--kemet-color-primary));
-    --kemet-select-background-color-error: rgb(var(--kemet-color-error));
-    --kemet-select-background-color-success: rgb(var(--kemet-color-success));
-    --kemet-select-background-color-warning: rgb(var(--kemet-color-warning));
-    --kemet-select-icon-right: 1rem;
-    --kemet-select-border-radius-rounded: 0;
-
-    position: relative;
-    display: block;
-  }
-
-  select {
-    color: rgb(var(--kemet-color-text));
-    display: block;
-    font-size: 1rem;
-    width: 100%;
-    padding: var(--kemet-select-padding);
-    border: var(--kemet-select-border);
-    appearance: none;
-    box-sizing: border-box;
-    background-color: transparent;
-    border-radius: var(--kemet-select-border-radius-rounded);
-  }
-
-  option {
-    color: rgb(var(--kemet-color-black));
-  }
-
-  :host([status='error']) select {
-    border: var(--kemet-select-border-color-error);
-  }
-
-  :host([status='success']) select {
-    border: var(--kemet-select-border-color-success);
-  }
-
-  :host([status='warning']) select {
-    border: var(--kemet-select-border-color-warning);
-  }
-
-  :host([disabled]) select {
-    opacity: 0.5;
-  }
-
-  :host([rounded]) select {
-    --kemet-select-border-radius-rounded: var(--kemet-border-radius-md);
-  }
-
-  :host([rounded=sm]) select {
-    --kemet-select-border-radius-rounded: var(--kemet-border-radius-sm);
-  }
-
-  :host([rounded=md]) select {
-    --kemet-select-border-radius-rounded: var(--kemet-border-radius-md);
-  }
-
-  :host([rounded=lg]) select {
-    --kemet-select-border-radius-rounded: var(--kemet-border-radius-lg);
-  }
-
-  :host([rounded=xl]) select {
-    --kemet-select-border-radius-rounded: var(--kemet-border-radius-xl);
-  }
-
-  :host([rounded=circle]) select {
-    --kemet-select-border-radius-rounded: var(--kemet-border-radius-circle);
-  }
-
-  :host([rounded=pill]) select {
-    --kemet-select-border-radius-rounded: var(--kemet-border-radius-pill);
-  }
-
-  :host([filled]) select {
-    border: var(--kemet-select-border-filled);
-    color: var(--kemet-select-color-filled);
-    background-color: var(--kemet-select-background-color-filled);
-  }
-
-  :host([status='error'][filled]) select {
-    background-color: var(--kemet-select-background-color-error);
-  }
-
-  :host([status='success'][filled]) select {
-    background-color: var(--kemet-select-background-color-success);
-  }
-
-  :host([status='warning'][filled]) select {
-    background-color: var(--kemet-select-background-color-warning);
-  }
-
-  kemet-icon-bootstrap {
-    position: absolute;
-    right: var(--kemet-select-icon-right);
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  :host([filled]) kemet-icon-bootstrap {
-    color: var(--kemet-select-color-filled);
-  }
-`;

package/dist/styles/elements/sortable.ts

@@ -1,23 +0,0 @@
-import { css } from 'lit';
-
-export const stylesSortable = css`
-  :host {
-    display: flex;
-    gap: 1rem;
-    flex-direction: column;
-  }
-`;
-
-export const stylesSortableItem = css`
-  :host {
-    cursor: grab;
-    display: block;
-    padding: 1rem;
-    border: 1px solid rgb(var(--kemet-color-foreground));
-  }
-
-  :host([ghost]) {
-    opacity: 0.5;
-    border-style: dashed;
-  }
-`;

package/dist/styles/elements/tabs.ts

@@ -1,277 +0,0 @@
-import { css } from 'lit';
-
-export const stylesKemetTabs = css`
-  :host {
-    --kemet-tabs-ink-size: 6px;
-    --kemet-tabs-ink-radius: 6px;
-    --kemet-tabs-divider-size: 1px;
-    --kemet-tabs-spacer: 1rem;
-    --kemet-tabs-transition-speed: 0.5s;
-    --kemet-tabs-divider-color: rgb(var(--kemet-color-gray-300));
-    --kemet-tabs-ink-color: rgb(var(--kemet-color-foreground));
-
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    position: relative;
-  }
-
-  :host([placement='bottom']) {
-    flex-direction: column-reverse;
-  }
-
-  :host([placement='left']) {
-    flex-direction: row;
-  }
-
-  :host([placement='right']) {
-    flex-direction: row-reverse;
-  }
-
-  :host([placement='left']),
-  :host([placement='right']) {
-    overflow: unset;
-  }
-
-  /* panels */
-
-  [part='panels'] > div {
-    display: flex;
-  }
-
-  :host([panel-effect='slide']) [part='panels'] {
-    transition: transform var(--kemet-tabs-transition-speed) linear;
-  }
-
-  :host([panel-effect='fade']) [part='panels'] {
-    transform: none !important;
-  }
-
-  :host([panel-effect='fade']) [part='panels'] > div {
-    flex-flow: row nowrap;
-  }
-
-  :host([placement='left']) [part='panels'],
-  :host([placement='right']) [part='panels'] {
-    transform: none !important;
-    position: relative;
-    width: 100%;
-  }
-
-  :host([placement='top']) [part='panels'] > div {
-    margin-top: var(--kemet-tabs-spacer);
-  }
-
-  :host([placement='right']) [part='panels'] > div {
-    margin-right: var(--kemet-tabs-spacer);
-  }
-
-  :host([placement='bottom']) [part='panels'] > div {
-    margin-bottom: var(--kemet-tabs-spacer);
-  }
-
-  :host([placement='left']) [part='panels'] > div {
-    margin-left: var(--kemet-tabs-spacer);
-  }
-
-  /* tablist */
-
-  [part='tablist'] {
-    display: flex;
-  }
-
-  :host([placement='left']) [part='tablist'],
-  :host([placement='right']) [part='tablist'] {
-    display: flex;
-    flex-direction: column;
-    align-items: start;
-  }
-
-  :host([tabs-align='center']) [part='tablist'] {
-    justify-content: center;
-  }
-
-  :host([tabs-align='between']) [part='tablist'] {
-    justify-content: space-between;
-  }
-
-  :host([tabs-align='evenly']) [part='tablist'] {
-    justify-content: space-evenly;
-  }
-
-  :host([tabs-align='around']) [part='tablist'] {
-    justify-content: space-around
-  }
-
-  :host([tabs-align='start']) [part='tablist'] {
-    justify-content: flex-start;
-  }
-
-  :host([tabs-align='end']) [part='tablist'] {
-    justify-content: flex-end;
-  }
-
-  :host([overflow]) [part='tablist'] {
-    justify-content: start;
-  }
-
-  /* divider */
-
-  [part='divider'] {
-    height: var(--kemet-tabs-divider-size);
-    background-color: var(--kemet-tabs-divider-color);
-  }
-
-  :host([placement='left']) [part='divider'],
-  :host([placement='right']) [part='divider'] {
-    width: var(--kemet-tabs-divider-size);
-    height: auto;
-  }
-
-  /* ink */
-
-  [part='ink'] {
-    height: var(--kemet-tabs-ink-size);
-    border-top-left-radius: var(--kemet-tabs-ink-radius);
-    border-top-right-radius: var(--kemet-tabs-ink-radius);
-    transition: all 300ms ease;
-    background-color: var(--kemet-tabs-ink-color);
-  }
-
-  :host([placement='right']) [part='ink'] {
-    width: var(--kemet-tabs-ink-size);
-    border-top-right-radius: var(--kemet-tabs-ink-radius);
-    border-bottom-right-radius: var(--kemet-tabs-ink-radius);
-    border-top-left-radius: 0px;
-    border-bottom-left-radius: 0px;
-  }
-
-  :host([placement='left']) [part='ink'] {
-    width: var(--kemet-tabs-ink-size);
-    border-top-right-radius: 0px;
-    border-bottom-right-radius: 0px;
-    border-top-left-radius: var(--kemet-tabs-ink-radius);
-    border-bottom-left-radius: var(--kemet-tabs-ink-radius);
-  }
-
-  :host([placement='bottom']) [part='ink'] {
-    border-top-right-radius: 0px;
-    border-bottom-right-radius: var(--kemet-tabs-ink-radius);
-    border-top-left-radius: 0px;
-    border-bottom-left-radius: var(--kemet-tabs-ink-radius);
-  }
-
-  /* links */
-
-  :host([overflow]) [part='links'] {
-    overflow-x: auto;
-    margin: 0 2rem;
-    scroll-behavior: smooth;
-  }
-
-  :host([overflow]) [part='links']::-webkit-scrollbar {
-    display: none;
-    width: 0;
-    background: transparent;
-  }
-
-  :host([placement='bottom']) [part='links'] {
-    display: flex;
-    flex-direction: column-reverse;
-  }
-
-  /* icon */
-
-  [icon*='chevron'] {
-    cursor: pointer;
-    position: absolute;
-    top: 1rem;
-  }
-
-  [icon='chevron-left'] {
-    left: 0;
-  }
-
-  [icon='chevron-right'] {
-    right: 0;
-  }
-
-  :host([placement='bottom']) [icon*='chevron'] {
-    top: auto;
-    bottom: 1rem;
-  }
-`;
-
-export const stylesKemetTab = css`
-  :host {
-    --kemet-tab-color: rgb(var(--kemet-color-foreground));
-
-    cursor: pointer;
-    display: inline-flex;
-    flex: 0 0 auto;
-    align-items: center;
-    justify-content: center;
-    white-space: nowrap;
-    padding: var(--kemet-tab-padding, 1rem);
-  }
-
-  :host([selected]) {
-    cursor: auto;
-    color: var(--kemet-tab-color);
-  }
-
-  kemet-icon-bootstrap {
-    cursor: pointer;
-    margin-left: 0.5rem;
-  }
-`;
-
-export const stylesKemetTabPanel = css`
-  :host {
-    --kemet-tab-panel-fade-speed: 0.5s;
-
-    width: 100%;
-    flex: 0 0 auto;
-  }
-
-  ::slotted(img) {
-    max-width: 100%;
-  }
-
-  :host(.fade) {
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity var(--kemet-tab-panel-fade-speed) ease;
-  }
-
-  :host(.fade[selected]) {
-    opacity: 1;
-    pointer-events: auto;
-  }
-
-  :host(.fade.push) {
-    margin-left: -100%;
-  }
-
-  :host(.vertical) {
-    display: none;
-  }
-
-  :host(.vertical[selected]) {
-    display: block;
-  }
-
-  :host(.stacked) {
-    position: absolute;
-    z-index: -1;
-    opacity: 0;
-    visibility: hidden;
-  }
-
-  :host(.stacked[selected]) {
-    position: relative;
-    z-index: 1;
-    opacity: 1;
-    visibility: visible;
-  }
-`;

package/dist/styles/elements/textarea.ts

@@ -1,109 +0,0 @@
-import { css } from 'lit';
-
-export const stylesTextarea = css`
-  :host {
-    --kemet-textarea-padding: 1rem;
-    --kemet-textarea-border: 1px solid rgb(var(--kemet-color-foreground));
-    --kemet-textarea-border-color-error: 1px solid rgb(var(--kemet-color-error));
-    --kemet-textarea-border-color-success: 1px solid rgb(var(--kemet-color-success));
-    --kemet-textarea-border-color-warning: 1px solid rgb(var(--kemet-color-warning));
-    --kemet-textarea-icon-left-padding: 3rem;
-    --kemet-textarea-icon-right-padding: 3rem;
-    --kemet-textarea-border-filled: none;
-    --kemet-textarea-color-filled: rgb(var(--kemet-color-white));
-    --kemet-textarea-background-color-filled: rgb(var(--kemet-color-primary));
-    --kemet-textarea-background-color-error: rgb(var(--kemet-color-error));
-    --kemet-textarea-background-color-success: rgb(var(--kemet-color-success));
-    --kemet-textarea-background-color-warning: rgb(var(--kemet-color-warning));
-    --kemet-textarea-border-radius-rounded: 0;
-
-    position: relative;
-    display: block;
-  }
-
-  textarea {
-    color: rgb(var(--kemet-color-text));
-    display: block;
-    width: 100%;
-    padding: var(--kemet-textarea-padding);
-    border: var(--kemet-textarea-border);
-    appearance: none;
-    box-sizing: border-box;
-    background: transparent;
-    border-radius: var(--kemet-textarea-border-radius-rounded);
-  }
-
-  :host([status='error']) textarea {
-    border: var(--kemet-textarea-border-color-error);
-  }
-
-  :host([status='success']) textarea {
-    border: var(--kemet-textarea-border-color-success);
-  }
-
-  :host([status='warning']) textarea {
-    border: var(--kemet-textarea-border-color-warning);
-  }
-
-  :host([disabled]) textarea {
-    opacity: 0.5;
-  }
-
-  :host([icon-left]) textarea {
-    padding-left: var(--kemet-textarea-icon-left-padding);
-  }
-
-  :host([icon-right]) textarea {
-    padding-right: var(--kemet-textarea-icon-right-padding);
-  }
-
-  :host([rounded]) textarea {
-    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-md);
-  }
-
-  :host([rounded=sm]) textarea {
-    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-sm);
-  }
-
-  :host([rounded=md]) textarea {
-    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-md);
-  }
-
-  :host([rounded=lg]) textarea {
-    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-lg);
-  }
-
-  :host([rounded=xl]) textarea {
-    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-xl);
-  }
-
-  :host([rounded=circle]) textarea {
-    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-circle);
-  }
-
-  :host([rounded=pill]) textarea {
-    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-pill);
-  }
-
-  :host([filled]) textarea {
-    border: var(--kemet-textarea-border-filled);
-    color: var(--kemet-textarea-color-filled);
-    background-color: var(--kemet-textarea-background-color-filled);
-  }
-
-  :host([filled]) textarea::placeholder {
-    color: var(--kemet-textarea-color-filled);
-  }
-
-  :host([status='error'][filled]) textarea {
-    background-color: var(--kemet-textarea-background-color-error);
-  }
-
-  :host([status='success'][filled]) textarea {
-    background-color: var(--kemet-textarea-background-color-success);
-  }
-
-  :host([status='warning'][filled]) textarea {
-    background-color: var(--kemet-textarea-background-color-warning);
-  }
-`;

package/dist/styles/elements/timer.ts

@@ -1,13 +0,0 @@
-import { css } from 'lit';
-
-export const stylesBase = css`
-  :host {
-    display: block;
-  }
-`;
-
-export const stylesDisplay = css`
-  :host {
-    display: inline-block;
-  }
-`;

package/dist/styles/elements/toggle.ts

@@ -1,90 +0,0 @@
-import { css } from 'lit';
-
-export const stylesToggle = css`
-  :host {
-    --kemet-toggle-width: 3.5rem;
-    --kemet-toggle-height: 2rem;
-    --kemet-toggle-handle-diameter: 1.6rem;
-    --kemet-toggle-handle-margin: calc((var(--kemet-toggle-height) - var(--kemet-toggle-handle-diameter)) / 2);
-    --kemet-toggle-track-border: none;
-    --kemet-toggle-track-color: rgb(var(--kemet-color-white));
-    --kemet-toggle-track-shadow: inset 0 0.4rem 0.7rem 0 rgb(var(--kemet-color-gray-800) / 35%), inset 0 -0.2rem 0.4rem 0 rgb(var(--kemet-color-gray-50));
-    --kemet-toggle-handle-border: none;
-    --kemet-toggle-handle-color: rgb(var(--kemet-color-primary));
-    --kemet-toggle-handle-shadow: 0 0.5rem 0.5rem 0 rgb(var(--kemet-color-black) / 10%), 0 0.5rem 0.5rem 0 rgb(var(--kemet-color-black) / 20%);
-
-    display: flex;
-    align-items: center;
-  }
-
-  :host([disabled]) {
-    opacity: 0.5;
-  }
-
-  label {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    font-size: inherit;
-    color: inherit;
-  }
-
-  :host([disabled]) label {
-    cursor: not-allowed;
-  }
-
-  input {
-    display: none;
-  }
-
-  [part='control'] {
-    position: relative;
-    display: inline-flex;
-    margin: 0;
-    width: var(--kemet-toggle-width);
-    height: var(--kemet-toggle-height);
-  }
-
-  [part='control'] > span {
-    transition: 300ms ease-in-out;
-  }
-
-  [part='track'] {
-    width: var(--kemet-toggle-width);
-    height: var(--kemet-toggle-height);
-    border: var(--kemet-toggle-track-border);
-    border-radius: var(--kemet-toggle-height);
-    background-color: var(--kemet-toggle-track-color);
-    box-shadow: var(--kemet-toggle-track-shadow);
-  }
-
-  :host([squared]) [part='track'] {
-    border-radius: 0;
-  }
-
-  [part='handle'] {
-    position: absolute;
-    top: var(--kemet-toggle-handle-margin);
-    left: var(--kemet-toggle-handle-margin);
-    width: var(--kemet-toggle-handle-diameter);
-    height: var(--kemet-toggle-handle-diameter);
-    transform: translateX(0);
-    border: var(--kemet-toggle-handle-border);
-    border-radius: var(--kemet-toggle-handle-diameter);
-    background-color: var(--kemet-toggle-handle-color);
-    box-shadow: var(--kemet-toggle-handle-shadow);
-  }
-
-  :host([squared]) [part='handle'] {
-    border-radius: 0;
-  }
-
-  :host([checked]) [part='handle'] {
-    transform: translateX(calc(var(--kemet-toggle-width) - var(--kemet-toggle-handle-diameter) - var(--kemet-toggle-handle-margin) * 2));
-  }
-
-  .option {
-    font-size: 90%;
-  }
-`;

package/dist/styles/elements/tooltip.ts

@@ -1,61 +0,0 @@
-import { css } from 'lit';
-
-export const stylesTooltip = css`
-  :host {
-    --kemet-tooltip-deg: -45deg;
-    --kemet-tooltip-size: 22px;
-    --kemet-tooltip-border-size: 1px;
-    --kemet-tooltip-rounded-tip: 4px;
-    --kemet-tooltip-background-color: rgb(var(--kemet-color-background));
-    --kemet-tooltip-border-color: rgb(var(--kemet-color-foreground));
-    --kemet-tooltip-placement-offset: calc(calc(var(--kemet-tooltip-size) / 2) * -1);
-  }
-
-  #arrow {
-    content: '';
-    width: var(--kemet-tooltip-size);
-    height: var(--kemet-tooltip-size);
-    position: relative;
-    display: inline-block;
-    background: linear-gradient(
-        var(--kemet-tooltip-deg),
-        transparent calc(var(--kemet-tooltip-size) / 1.5),
-        var(--kemet-tooltip-background-color) 0
-      )
-      no-repeat;
-    background-repeat: no-repeat;
-    transform-origin: center center;
-    border-top-left-radius: var(--kemet-tooltip-rounded-tip);
-    border-left: var(--kemet-tooltip-border-size) solid var(--kemet-tooltip-border-color);
-    border-top: var(--kemet-tooltip-border-size) solid var(--kemet-tooltip-border-color);
-  }
-
-  [data-popper-placement^="top"] #arrow {
-    top: var(--kemet-tooltip-placement-offset);
-    transform: rotate(225deg);
-
-  }
-
-  [data-popper-placement^="bottom"] #arrow-container {
-    top: 0px;
-  }
-
-  [data-popper-placement^="bottom"] #arrow {
-    top: var(--kemet-tooltip-placement-offset);
-    transform: rotate(45deg);
-  }
-
-  [data-popper-placement^="right"] #arrow {
-    left: var(--kemet-tooltip-placement-offset);
-    transform: rotate(-45deg);
-  }
-
-  [data-popper-placement^="left"] #arrow-container {
-    right: 0;
-  }
-
-  [data-popper-placement^="left"] #arrow {
-    right: var(--kemet-tooltip-placement-offset);
-    transform: rotate(135deg);
-  }
-`;