kemet-ui 2.0.0 → 2.0.2

package/dist/styles/components/_config.scss

@@ -0,0 +1,4 @@
+$kemet-components: (
+  drawer-width: 280px,
+  drawer-height: 280px
+) !default;

package/dist/styles/components/accordion.scss

@@ -0,0 +1,9 @@
+@use 'config' as *;
+
+kemet-accordion-panel [icon='chevron-down'] {
+  transition: transform 300ms ease;
+}
+
+kemet-accordion-panel[opened] [icon='chevron-down'] {
+  transform: rotate(180deg);
+}

package/dist/styles/components/drawer.scss

@@ -0,0 +1,11 @@
+@use 'config' as *;
+
+kemet-drawer {
+  --kemet-drawer-width: #{map-get($kemet-components, drawer-width)};
+  --kemet-drawer-background-color: var(--kemet-color-primary);
+}
+
+kemet-drawer[side='top'],
+kemet-drawer[side='bottom'] {
+  --kemet-drawer-height: #{map-get($kemet-components, drawer-height)};
+}

package/dist/styles/components/modal.scss

@@ -0,0 +1,8 @@
+@use 'config' as *;
+
+kemet-modal[mobile] {
+  kemet-modal-close {
+    top: -0.9rem;
+    right: 0.5rem;
+  }
+}

package/dist/styles/components/scrollsnap.scss

@@ -0,0 +1,11 @@
+@use 'config' as *;
+
+kemet-scroll-snap[axis='horizontal'] [slot='slides'] {
+  scrollbar-width: none;
+}
+
+kemet-scroll-snap[axis='horizontal'] [slot='slides']::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  background: transparent;
+}

package/dist/styles/core/attributes.scss

@@ -0,0 +1,38 @@
+@use '../shared/config' as *;
+@use '../shared/helpers' as *;
+
+@include makeBreakpoints();
+@include makeGutters();
+
+@if $makeorder {
+  @include makeOrder();
+}
+
+@if $makevisibility {
+  @include makeVisibility();
+}
+
+@if $maketext {
+  @include makeTypeSizers();
+  @include makeTypeAlign();
+}
+
+@if $makespacers {
+  @include makeSpacers();
+}
+
+@if $makecolors {
+  @include makeColors();
+}
+
+@if $makeelevation {
+  @include makeElevation();
+}
+
+@if $makeborders {
+  @include makeBorders();
+}
+
+@if $makeborderradiuses {
+  @include makeBorderRadiuses();
+}

package/dist/styles/core/layout.scss

@@ -0,0 +1,169 @@
+@use '../shared/config' as *;
+@use '../shared/helpers' as *;
+
+%flexitem {
+  flex: 1;
+  display: block;
+  box-sizing: border-box;
+  word-wrap: break-word;
+  // text-align: left;
+}
+
+// row layout
+// ----------
+
+[kemet-layout='flexrow'] {
+  display: flex;
+}
+
+[kemet-layout='flexrow'] > * {
+  @extend %flexitem;
+}
+
+// flex items (force them to stretch)
+[kemet-layout*='flex'][kemet-flex-items] > * {
+  display: flex;
+}
+
+// kemet-autostack
+[kemet-layout*='flex'][kemet-autostack] {
+  flex-direction: column;
+}
+
+[kemet-layout*='flex'][kemet-autostack][kemet-align] > * {
+  align-self: initial;
+}
+
+@media screen and (min-width: $stackpoint) {
+  [kemet-layout*='flex'][kemet-autostack] {
+    flex-direction: row;
+  }
+}
+
+// align
+[kemet-layout*='flex'][kemet-align='top'] {
+  align-items: flex-start;
+}
+
+[kemet-layout*='flex'][kemet-align='middle'] {
+  align-items: center;
+}
+
+[kemet-layout*='flex'][kemet-align='stretch'] {
+  align-items: stretch;
+}
+
+[kemet-layout*='flex'][kemet-align='bottom'] {
+  align-items: flex-end;
+}
+
+[kemet-layout*='flex'][kemet-align-cross='left'] {
+  justify-content: left;
+}
+
+[kemet-layout*='flex'][kemet-align-cross='right'] {
+  justify-content: right;
+}
+
+[kemet-layout*='flex'][kemet-align-cross='center'] {
+  justify-content: center;
+}
+
+[kemet-layout*='flex'][kemet-align-cross='between'] {
+  justify-content: space-between;
+}
+
+[kemet-layout*='flex'][kemet-align-cross='around'] {
+  justify-content: space-around;
+}
+
+[kemet-layout*='flex'] > [kemet-align='top'] {
+  align-self: flex-start;
+}
+
+[kemet-layout*='flex'] > [kemet-align='middle'] {
+  align-self: center;
+}
+
+[kemet-layout*='flex'] > [kemet-align='stretch'] {
+  align-self: stretch;
+}
+
+[kemet-layout*='flex'] > [kemet-align='bottom'] {
+  align-self: flex-end;
+}
+
+
+// flexgrid
+// --------
+
+[kemet-layout='flexgrid'] {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+[kemet-layout='flexgrid'] > * {
+  @extend %flexitem;
+}
+
+@include makeFlexgridBasis();
+
+
+// flexcolumn
+// ----------
+
+[kemet-layout='flexcolumn'] {
+  display: flex;
+  flex-direction: column;
+}
+
+[kemet-layout='flexcolumn'] > * {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+[kemet-layout='flexcolumn'] > [kemet-fit-content] {
+  flex: 0 0 auto;
+}
+
+[kemet-layout='flexcolumn'][kemet-align='bottom'] {
+  justify-content: flex-end;
+}
+
+[kemet-layout='flexcolumn'][kemet-align='center'] {
+  justify-content: center;
+}
+
+[kemet-layout='flexcolumn'][kemet-align='between'] {
+  justify-content: space-between;
+}
+
+[kemet-layout='flexcolumn'][kemet-align='around'] {
+  justify-content: space-around;
+}
+
+[kemet-layout='flexcolumn'][kemet-align] > * {
+  flex: 0 0 auto;
+}
+
+
+// flexlist
+// ---------
+
+[kemet-layout='flexlist'] {
+  display: inline-flex;
+  flex-wrap: wrap;
+  width: auto;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+[kemet-layout='flexlist'] > * {
+  flex: 0 0 auto;
+}
+
+[kemet-layout='flexlist'][kemet-gutters] > * {
+  padding: unset;
+}

package/dist/styles/kemet.base.css

@@ -103,4 +103,5 @@ html {
   --kemet-elevation-layer6: none;
   --kemet-elevation-inner: none;
 }
+
 /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9zdHlsZXMva2VtZXQuYmFzZS5zY3NzIiwia2VtZXQuYmFzZS5jc3MiLCIuLi8uLi9zcmMvc3R5bGVzL3NoYXJlZC9faGVscGVycy5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVBOzs7RUFHRSw4QkFBQTtVQUFBLHNCQUFBO0FDREY7O0FDd2FFO0VBR0ksdUNBQUE7RUFBQSxnREFBQTtFQUFBLGdEQUFBO0VBQUEsZ0RBQUE7RUFBQSxnREFBQTtFQUFBLGdEQUFBO0VBQUEsZ0RBQUE7RUFBQSxnREFBQTtFQUFBLGdEQUFBO0VBQUEsZ0RBQUE7RUFBQSw0Q0FBQTtFQUFBLGlDQUFBO0VBQUEsMENBQUE7RUFBQSwwQ0FBQTtFQUFBLDBDQUFBO0VBQUEsMENBQUE7RUFBQSwwQ0FBQTtFQUFBLDBDQUFBO0VBQUEsMENBQUE7RUFBQSwwQ0FBQTtFQUFBLDBDQUFBO0VBQUEsNEJBQUE7RUFBQSw0QkFBQTtFQUFBLDRCQUFBO0VBQUEsNEJBQUE7RUFBQSw0QkFBQTtFQUFBLDRCQUFBO0VBQUEsNEJBQUE7RUFBQSw0QkFBQTtFQUFBLDRCQUFBO0VBQUEsNkJBQUE7RUFBQSx1Q0FBQTtFQUFBLGdEQUFBO0VBQUEsZ0RBQUE7RUFBQSxnREFBQTtFQUFBLGdEQUFBO0VBQUEsZ0RBQUE7RUFBQSxnREFBQTtFQUFBLGdEQUFBO0VBQUEsZ0RBQUE7RUFBQSxnREFBQTtFQUFBLHFDQUFBO0VBQUEsdUNBQUE7RUFBQSxzQ0FBQTtFQUFBLHVDQUFBO0VBQUEsNENBQUE7RUFBQSxrREFBQTtFQUFBLG9EQUFBO0VBR0Ysc0RBQUE7RUFDQSx3REFBQTtFQUNBLDREQUFBO0VBQ0EsZ0VBQUE7RUFJRSxnQ0FBQTtFQUFBLGlDQUFBO0VBQUEsaUNBQUE7RUFLQSw0Q0FBQTtFQUFBLHlEQUFBO0VBQUEsMkZBQUE7RUFBQSw4RkFBQTtFQUFBLGdHQUFBO0VBQUEsaUdBQUE7RUFBQSwrREFBQTtFQUFBLDhEQUFBO0VBS0Esc0JBQUE7RUFBQSx5QkFBQTtFQUFBLDRCQUFBO0VBQUEsNEJBQUE7RUFBQSwrQkFBQTtFQUFBLDJCQUFBO0VBQUEsNEJBQUE7RUFBQSwyQkFBQTtFQUFBLDhCQUFBO0VBSUYsMkJBQUE7QUR2WEo7O0FEdEVBO0VBQ0UsOEJBQUE7QUN5RUY7O0FEdEVBO0VBRUUsNENBQUE7RUFDQSxvREFBQTtFQUNBLGtEQUFBO0VBQ0Esc0RBQUE7RUFDQSwwREFBQTtFQUNBLCtDQUFBO0VBQ0EsaURBQUE7RUFFQSx3QkFBQTtFRWlVRSw0QkFBQTtFQUFBLDhCQUFBO0VBQUEsOEJBQUE7RUFBQSw4QkFBQTtFQUFBLDhCQUFBO0VBQUEsOEJBQUE7RUFBQSw4QkFBQTtFQUFBLDZCQUFBO0FEbFBKIiwiZmlsZSI6ImtlbWV0LmJhc2UuY3NzIn0= */

package/dist/styles/kemet.base.scss

@@ -0,0 +1,28 @@
+@use './shared/helpers' as *;
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+@include makeRoot;
+
+html {
+  color: var(--kemet-color-text);
+}
+
+[theme='dark'] {
+  // colors
+  --kemet-color-text: var(--kemet-color-white);
+  --kemet-color-foreground: var(--kemet-color-primary);
+  --kemet-color-background: var(--kemet-color-white);
+  --kemet-color-white-to-black: var(--kemet-color-black);
+  --kemet-color-white-to-primary: var(--kemet-color-primary);
+  --kemet-color-gray1-to-transparent: transparent;
+  --kemet-color-primary-to-transparent: transparent;
+  // component specific
+  --kemet-upload-margin: 0;
+
+  @include makeElevationDark;
+}

package/dist/styles/kemet.components.scss

@@ -0,0 +1,4 @@
+@use 'components/accordion';
+@use 'components/drawer';
+@use 'components/modal';
+@use 'components/scrollsnap';