kemet-ui 3.1.0 → 4.0.1

package/dist/styles/elements/select.ts

@@ -0,0 +1,113 @@
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,277 @@
+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

@@ -0,0 +1,109 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,90 @@
+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

@@ -0,0 +1,61 @@
+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);
+  }
+`;