kemet-ui 4.0.2 → 5.0.0

package/dist/styles/shared/_helpers.scss

@@ -1,531 +0,0 @@
-@use 'sass:math';
-@use 'sass:string';
-@use 'sass:map';
-@use 'sass:list';
-@use 'config' as *;
-
-
-@function getListFirst($list) {
-  @return list.nth($list, 1);
-}
-
-@function getListLast($list) {
-  $max: list.length($list);
-  @return list.nth($list, $max);
-}
-
-
-@mixin makeBreakpoints() {
-  @each $breakpoint, $pixel in $breakpoints {
-    @media screen and (min-width: #{$pixel}) {
-      @if $flexiplier != 'fives' {
-        [kemet-layout] [kemet-breakpoint*="#{$breakpoint}:25"] {
-          flex: 0 0 25%;
-          max-width: 25%;
-        }
-      }
-
-      [kemet-layout] [kemet-breakpoint*="#{$breakpoint}:33"] {
-        flex: 0 0 33.33%;
-        max-width: 33.33%;
-      }
-
-      [kemet-layout] [kemet-breakpoint*="#{$breakpoint}:66"] {
-        flex: 0 0 66.66%;
-        max-width: 66.66%;
-      }
-
-      @if $flexiplier != 'fives' {
-        [kemet-layout] [kemet-breakpoint*="#{$breakpoint}:75"] {
-          flex: 0 0 75%;
-          max-width: 75%;
-        }
-      }
-
-      [kemet-layout] [kemet-breakpoint*="#{$breakpoint}:content"] {
-        flex: 0 0 auto;
-      }
-
-      @if $flexiplier == 'fives' {
-        @for $i from 1 through 20 {
-          $size: $i*5;
-          $percent: $size + '%';
-
-          [kemet-layout] [kemet-breakpoint*="#{$breakpoint}:#{$size}"] {
-            flex: 0 0 string.unquote($percent);
-            max-width: string.unquote($percent);
-          }
-        }
-      }
-
-      @if $flexiplier == 'tens' {
-        @for $i from 1 through 10 {
-          $size: $i*10;
-          $percent: $size + '%';
-
-          [kemet-layout] [kemet-breakpoint*="#{$breakpoint}:#{$size}"] {
-            flex: 0 0 string.unquote($percent);
-            max-width: string.unquote($percent);
-          }
-        }
-      }
-
-      @if $flexiplier == 'twenties' {
-        @for $i from 1 through 5 {
-          $size: $i*20;
-          $percent: $size + '%';
-
-          [kemet-layout] [kemet-breakpoint*="#{$breakpoint}:#{$size}"] {
-            flex: 0 0 string.unquote($percent);
-            max-width: string.unquote($percent);
-          }
-        }
-      }
-    } // media query
-  }
-}
-
-@mixin makeGutters() {
-  [kemet-gutters] {
-    margin-right: -(map.get($gutters, md));
-  }
-
-  [kemet-layout='flexlist'][kemet-gutters] {
-    gap: map.get($gutters, md);
-  }
-
-  [kemet-gutters] > * {
-    padding-right: map.get($gutters, md);
-  }
-
-  [kemet-layout='flexgrid'][kemet-gutters] > * {
-    margin-bottom: map.get($gutters, md);
-  }
-
-  [kemet-layout='flexcolumn'][kemet-gutters] > :not(:first-child) {
-    margin-top: map.get($gutters, md);
-  }
-
-  @media only screen and (max-width: $stackpoint) {
-    [kemet-layout='flexrow'][kemet-gutters][autostack] > * {
-      margin-bottom: map.get($gutters, md);
-    }
-  }
-
-  @each $attsvalue, $value in $gutters {
-    $gutterselector: '[kemet-gutters*="#{$attsvalue}"]';
-    // @debug $gutterselector;
-
-    #{$gutterselector} {
-      margin-right: -($value);
-    }
-
-    [kemet-layout="flexlist"]#{$gutterselector} {
-      gap: $value;
-    }
-
-    #{$gutterselector} > * {
-      padding-right: $value;
-    }
-
-    [kemet-layout="flexgrid"]#{$gutterselector} > * {
-      margin-bottom: $value;
-    }
-
-    [kemet-layout="flexcolumn"]#{$gutterselector} > :not(:first-child) {
-      margin-top: $value;
-    }
-
-    @media only screen and (max-width: $stackpoint) {
-      [kemet-layout="flexrow"]#{$gutterselector}[autostack] > * {
-        margin-bottom: $value;
-      }
-    }
-  }
-
-  @if $makeresponsivegutters {
-    @each $breakpoint, $pixel in $breakpoints {
-      @media screen and (min-width: #{$pixel}) {
-        @each $attsvalue, $value in $gutters {
-          $gutterselector: '[kemet-gutters*="#{$breakpoint}:#{$attsvalue}"]';
-          // @debug $gutterselector;
-
-          #{$gutterselector} {
-            margin-right: -($value);
-          }
-
-          [kemet-layout="flexlist"]#{$gutterselector} {
-            gap: $value;
-          }
-
-          #{$gutterselector} > * {
-            padding-right: $value;
-          }
-
-          [kemet-layout="flexgrid"]#{$gutterselector} > * {
-            margin-bottom: $value;
-          }
-
-          [kemet-layout="flexcolumn"]#{$gutterselector} > :not(:first-child) {
-            margin-top: $value;
-          }
-
-          @media only screen and (max-width: $stackpoint) {
-            [kemet-layout="flexrow"]#{$gutterselector}[autostack] > * {
-              margin-bottom: $value;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-@mixin makeTypeSizers() {
-  @each $key, $value in $typesizers {
-    [kemet-type-size*="#{$key}"] {
-      font-size: $value;
-      margin: 0;
-    }
-  }
-
-  @each $breakpoint, $pixel in $breakpoints {
-    @media screen and (min-width: #{$pixel}) {
-      @each $key, $value in $typesizers {
-        [kemet-type-size*="#{$breakpoint}:#{$key}"] {
-          font-size: $value;
-          margin: 0;
-        }
-      }
-    }
-  }
-}
-
-@mixin makeOrder() {
-  @each $breakpoint, $pixel in $breakpoints {
-    @media screen and (min-width: #{$pixel}) {
-      [kemet-order*="#{$breakpoint}:none"] {
-        order: 0;
-      }
-
-      @for $i from 1 through $order {
-        [kemet-order*="#{$breakpoint}:minus-#{$i}"] {
-          order: -#{$i};
-        }
-      }
-
-      @for $i from 1 through $order {
-        [kemet-order*="#{$breakpoint}:plus-#{$i}"] {
-          order: #{$i};
-        }
-      }
-    }
-  }
-}
-
-@mixin makeVisibility() {
-  @each $breakpoint, $range in $breakranges {
-    $min: getListFirst($range);
-    $max: getListLast($range);
-
-    @media screen and (min-width: $min) {
-      [kemet-show="#{$breakpoint}:up"] {
-        display: inherit !important;
-      }
-
-      table[kemet-show="#{$breakpoint}:up"] {
-        display: table !important;
-      }
-
-      [kemet-hide="#{$breakpoint}:up"] {
-        display: none !important;
-      }
-    }
-
-    @media screen and (max-width: $max) {
-      [kemet-show="#{$breakpoint}:down"] {
-        display: inherit !important;
-      }
-
-      table[kemet-show="#{$breakpoint}:down"] {
-        display: table !important;
-      }
-
-      [kemet-hide="#{$breakpoint}:down"] {
-        display: none !important;
-      }
-    }
-
-    @media screen and (min-width: $min) and (max-width: $max) {
-      [kemet-show="#{$breakpoint}"] {
-        display: inherit !important;
-      }
-
-      table[kemet-show="#{$breakpoint}"] {
-        display: table !important;
-      }
-
-      [kemet-hide="#{$breakpoint}"] {
-        display: none !important;
-      }
-    }
-  } // @each
-}
-
-@mixin makeFlexgridBasis() {
-  @each $breakpoint, $pixel in $breakpoints {
-    @media screen and (min-width: #{$pixel}) {
-      @for $i from 1 through $flexgridcolumns {
-        $base: math.div(100, $i);
-
-        [kemet-basis*="#{$breakpoint}:#{$i}-columns"] > * {
-          flex: 0 0 string.unquote($base+'%');
-          max-width: string.unquote($base+'%');
-        }
-      }
-    } // media query
-  }
-}
-
-@mixin makeSpacers() {
-  $sides: 'top', 'right', 'bottom', 'left';
-
-  @each $spacer, $value in $spacers {
-    [kemet-margin*="#{$spacer}"] {
-      margin: $value;
-    }
-
-    [kemet-padding*="#{$spacer}"] {
-      padding: $value;
-    }
-
-    @each $side in $sides {
-      [kemet-margin-#{$side}*="#{$spacer}"] {
-        margin-#{$side}: $value;
-      }
-
-      [kemet-padding-#{$side}*="#{$spacer}"] {
-        padding-#{$side}: $value;
-      }
-    }
-  }
-
-  @each $breakpoint, $pixel in $breakpoints {
-    @media screen and (min-width: #{$pixel}) {
-      @each $spacer, $value in $spacers {
-        [kemet-margin*="#{$breakpoint}:#{$spacer}"] {
-          margin: $value;
-        }
-
-        [kemet-padding*="#{$breakpoint}:#{$spacer}"] {
-          padding: $value;
-        }
-
-        @each $side in $sides {
-          [kemet-margin-#{$side}*="#{$breakpoint}:#{$spacer}"] {
-            margin-#{$side}: $value;
-          }
-
-          [kemet-padding-#{$side}*="#{$breakpoint}:#{$spacer}"] {
-            padding-#{$side}: $value;
-          }
-        }
-      }
-    }
-  }
-}
-
-@mixin makeTypeAlign {
-  [kemet-type-align='left'] {
-    text-align: left;
-  }
-
-  [kemet-type-align='right'] {
-    text-align: right;
-  }
-
-  [kemet-type-align='center'] {
-    text-align: center;
-  }
-
-  @each $breakpoint, $pixel in $breakpoints {
-    @media screen and (min-width: #{$pixel}) {
-      [kemet-type-align*='#{$breakpoint}:left'] {
-        text-align: left;
-      }
-
-      [kemet-type-align*='#{$breakpoint}:right'] {
-        text-align: right;
-      }
-
-      [kemet-type-align*='#{$breakpoint}:center'] {
-        text-align: center;
-      }
-    }
-  }
-}
-
-@mixin makeColors {
-  @each $color, $value in $colors {
-    $name: '' + $color;
-
-    [kemet-color="#{$name}"] {
-      color: rgb(var(--kemet-color-#{'' + $color}));
-    }
-
-    [kemet-background-color="#{$name}"] {
-      background-color: rgb(var(--kemet-color-#{'' + $color}));
-    }
-  }
-
-  @each $color, $value in $themecolors {
-    $name: '' + $color;
-
-    [kemet-color="#{$name}"] {
-      color: rgb(var(--kemet-color-#{'' + $color}));
-    }
-
-    [kemet-background-color="#{$name}"] {
-      background-color: rgb(var(--kemet-color-#{'' + $color}));
-    }
-  }
-
-  [kemet-color='auto'] {
-    color: rgb(var(--kemet-color-foreground));
-  }
-
-  [kemet-background-color='auto'] {
-    background-color: rgb(var(--kemet-color-background));
-  }
-}
-
-@mixin makeElevation {
-  @each $layer, $value in $elevation {
-    [kemet-elevation="#{$layer}"] {
-      box-shadow: var(--kemet-elevation-#{'' + $layer});
-    }
-  }
-}
-
-@mixin makeElevationDark {
-  @each $layer, $value in $elevation {
-    --kemet-elevation-#{"" + $layer}: none;
-  }
-}
-
-@mixin makeBorders {
-  $sides: 'top', 'right', 'bottom', 'left';
-  $styles: dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden;
-
-  @each $color, $value in $colors {
-    $name: '' + $color;
-
-    [kemet-border*="#{$name}"] {
-      border-color: RGB(string.unquote($value));
-    }
-  }
-
-  @each $color, $value in $themecolors {
-    $name: '' + $color;
-
-    [kemet-border*="#{$name}"] {
-      border-color: RGB(string.unquote($value));
-    }
-  }
-
-  [kemet-border*='auto'] {
-    border-color: rgb(var(--kemet-color-foreground));
-  }
-
-  @each $width, $value in $borderwidths {
-    [kemet-border*="all-#{$width}"] {
-      border-width: $value;
-    }
-  }
-
-  @each $width, $value in $borderwidths {
-    [kemet-border*="horizontal-#{$width}"] {
-      border-top-width: $value;
-      border-bottom-width: $value;
-    }
-  }
-
-  @each $width, $value in $borderwidths {
-    [kemet-border*="vertical-#{$width}"] {
-      border-left-width: $value;
-      border-right-width: $value;
-    }
-  }
-
-  @each $width, $value in $borderwidths {
-    @each $side in $sides {
-      [kemet-border*="#{$side}-#{$width}"] {
-        border-#{$side}-width: $value;
-      }
-    }
-  }
-
-  @each $style in $styles {
-    [kemet-border*="all"][kemet-border*="#{$style}"] {
-      border-style: $style;
-    }
-
-    [kemet-border*="horizontal"][kemet-border*="#{$style}"] {
-      border-style: none;
-      border-top-style: $style;
-      border-bottom-style: $style;
-    }
-
-    [kemet-border*="vertical"][kemet-border*="#{$style}"] {
-      border-style: none;
-      border-left-style: $style;
-      border-right-style: $style;
-    }
-
-    @each $side in $sides {
-      [kemet-border*="#{$side}"][kemet-border*="#{$style}"] {
-        border-style: none;
-        border-#{$side}-style: $style;
-      }
-    }
-  }
-}
-
-@mixin makeBorderRadiuses {
-  @each $size, $value in $borderradiuses {
-    [kemet-border-radius="#{$size}"] {
-      border-radius: $value;
-    }
-  }
-}
-
-@mixin makeRoot {
-  :root {
-    // handle colors
-    @each $color, $value in $colors {
-      --kemet-color-#{"" + $color}: #{$value};
-    }
-
-    @each $color, $value in $themecolors {
-      --kemet-color-#{"" + $color}: #{$value};
-    }
-
-    // handle border radiuses
-    @each $size, $value in $borderradiuses {
-      --kemet-border-radius-#{"" + $size}: #{$value};
-    }
-
-    // handle elevation
-    @each $layer, $value in $elevation {
-      --kemet-elevation-#{"" + $layer}: #{$value};
-    }
-
-    // handle spacers
-    @each $size, $value in $spacers {
-      --kemet-spacer-#{"" + $size}: #{$value};
-    }
-
-    // component specific
-    --kemet-upload-margin: 1rem;
-  }
-}

package/dist/tracker-step-DkA-T98W.d.mts

@@ -1,93 +0,0 @@
-import * as lit_html from 'lit-html';
-import * as lit from 'lit';
-import { LitElement } from 'lit';
-
-/**
- *
- * @since 1.2.0
- * @status stable
- *
- * @prop {number} total - The total number of steps
- * @prop {string} breakpoint - The point at which the tracker goes from mobile to standard
- *
- */
-declare class KemetTracker extends LitElement {
-    static styles: lit.CSSResult[];
-    total: number;
-    breakpoint: string;
-    steps: NodeListOf<KemetTrackerStep>;
-    constructor();
-    firstUpdated(): void;
-    render(): lit_html.TemplateResult<1>;
-    handleSlotChange(): void;
-    isMobile(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-tracker': KemetTracker;
-    }
-}
-
-/**
- *
- * @since 1.2.0
- * @status stable
- *
- * @tagname kemet-tracker-step
- * @summary A step in the Tracker
- *
- * @prop {number} step - The current step number
- * @prop {boolean} completed - Determines whether a step renders as complete
- * @prop {boolean} current - Determines whether a step renders as the current step
- * @prop {boolean} last - Is automatically added to the last step
- * @prop {boolean} mobile - Determines if a step should render as mobile
- * @prop {boolean} hideDotContent - Hides the label inside of a dot
- * @prop {number} completedSize - The icon size for the completed check mark
- *
- * @cssproperty --kemet-tracker-step-dot-font-size - The font size.
- * @cssproperty --kemet-tracker-step-dot-color - The text color.
- * @cssproperty --kemet-tracker-step-dot-border - Border around a dot.
- * @cssproperty --kemet-tracker-step-dot-size - Width and height of a dot.
- * @cssproperty --kemet-tracker-step-dot-size-mobile - Mobile width and height of a dot.
- * @cssproperty --kemet-tracker-step-dot-gap - Space between a dot and connector line.
- * @cssproperty --kemet-tracker-step-dot-transition - Transition of a dot.
- * @cssproperty --kemet-tracker-step-dot-fill-color - Fill color of a dot.
- * @cssproperty --kemet-tracker-step-dot-background-color - Color of the background a dot is on.
- * @cssproperty --kemet-tracker-step-current-color - Current dot text color.
- * @cssproperty --kemet-tracker-step-current-fill-color - Current dot fill color.
- * @cssproperty --kemet-tracker-step-completed-color - Text color of a completed dot.
- * @cssproperty --kemet-tracker-step-completed-fill-color - Background color of a completed dot.
- * @cssproperty --kemet-tracker-step-completed-line-color - Completed connector line color.
- * @cssproperty --kemet-tracker-step-completed-line-weight - Completed line weight.
- * @cssproperty --kemet-tracker-step-standard-line-weight - Standard line weight.
- *
- * @csspart dot - The container for the dot.
- * @csspart line - A connector line from dot to dot.
- * @csspart completed-line - A completed connector line.
- *
- */
-declare class KemetTrackerStep extends LitElement {
-    static styles: lit.CSSResult[];
-    step: number;
-    completed: boolean;
-    current: boolean;
-    last: boolean;
-    mobile: boolean;
-    hideDotContent: boolean;
-    completedSize: number;
-    tracker: KemetTracker;
-    firstUpdated(): void;
-    render(): lit_html.TemplateResult<1>;
-    makeLine(): lit_html.TemplateResult<1>;
-    makeCompletedLine(): lit_html.TemplateResult<1>;
-    makeDotContent(): lit_html.TemplateResult<1>;
-    makeSlotContent(): lit_html.TemplateResult<1>;
-    handleCompletedLineEnd(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-tracker-step': KemetTrackerStep;
-    }
-}
-
-export { KemetTracker as K, KemetTrackerStep as a };

package/dist/tracker-step-DkA-T98W.d.ts

@@ -1,93 +0,0 @@
-import * as lit_html from 'lit-html';
-import * as lit from 'lit';
-import { LitElement } from 'lit';
-
-/**
- *
- * @since 1.2.0
- * @status stable
- *
- * @prop {number} total - The total number of steps
- * @prop {string} breakpoint - The point at which the tracker goes from mobile to standard
- *
- */
-declare class KemetTracker extends LitElement {
-    static styles: lit.CSSResult[];
-    total: number;
-    breakpoint: string;
-    steps: NodeListOf<KemetTrackerStep>;
-    constructor();
-    firstUpdated(): void;
-    render(): lit_html.TemplateResult<1>;
-    handleSlotChange(): void;
-    isMobile(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-tracker': KemetTracker;
-    }
-}
-
-/**
- *
- * @since 1.2.0
- * @status stable
- *
- * @tagname kemet-tracker-step
- * @summary A step in the Tracker
- *
- * @prop {number} step - The current step number
- * @prop {boolean} completed - Determines whether a step renders as complete
- * @prop {boolean} current - Determines whether a step renders as the current step
- * @prop {boolean} last - Is automatically added to the last step
- * @prop {boolean} mobile - Determines if a step should render as mobile
- * @prop {boolean} hideDotContent - Hides the label inside of a dot
- * @prop {number} completedSize - The icon size for the completed check mark
- *
- * @cssproperty --kemet-tracker-step-dot-font-size - The font size.
- * @cssproperty --kemet-tracker-step-dot-color - The text color.
- * @cssproperty --kemet-tracker-step-dot-border - Border around a dot.
- * @cssproperty --kemet-tracker-step-dot-size - Width and height of a dot.
- * @cssproperty --kemet-tracker-step-dot-size-mobile - Mobile width and height of a dot.
- * @cssproperty --kemet-tracker-step-dot-gap - Space between a dot and connector line.
- * @cssproperty --kemet-tracker-step-dot-transition - Transition of a dot.
- * @cssproperty --kemet-tracker-step-dot-fill-color - Fill color of a dot.
- * @cssproperty --kemet-tracker-step-dot-background-color - Color of the background a dot is on.
- * @cssproperty --kemet-tracker-step-current-color - Current dot text color.
- * @cssproperty --kemet-tracker-step-current-fill-color - Current dot fill color.
- * @cssproperty --kemet-tracker-step-completed-color - Text color of a completed dot.
- * @cssproperty --kemet-tracker-step-completed-fill-color - Background color of a completed dot.
- * @cssproperty --kemet-tracker-step-completed-line-color - Completed connector line color.
- * @cssproperty --kemet-tracker-step-completed-line-weight - Completed line weight.
- * @cssproperty --kemet-tracker-step-standard-line-weight - Standard line weight.
- *
- * @csspart dot - The container for the dot.
- * @csspart line - A connector line from dot to dot.
- * @csspart completed-line - A completed connector line.
- *
- */
-declare class KemetTrackerStep extends LitElement {
-    static styles: lit.CSSResult[];
-    step: number;
-    completed: boolean;
-    current: boolean;
-    last: boolean;
-    mobile: boolean;
-    hideDotContent: boolean;
-    completedSize: number;
-    tracker: KemetTracker;
-    firstUpdated(): void;
-    render(): lit_html.TemplateResult<1>;
-    makeLine(): lit_html.TemplateResult<1>;
-    makeCompletedLine(): lit_html.TemplateResult<1>;
-    makeDotContent(): lit_html.TemplateResult<1>;
-    makeSlotContent(): lit_html.TemplateResult<1>;
-    handleCompletedLineEnd(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-tracker-step': KemetTrackerStep;
-    }
-}
-
-export { KemetTracker as K, KemetTrackerStep as a };