kemet-ui 2.0.2 → 3.0.0

package/dist/components/kemet-tooltip/docs/stories.js

@@ -1,5 +1,6 @@
 import { html } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import '../kemet-tooltip';
 import '../../kemet-button/kemet-button';
 import '../../kemet-tabs/kemet-tabs';
@@ -8,34 +9,11 @@ import '../../kemet-tabs/kemet-tab-panel';
 const meta = {
     title: 'Components / Tooltip',
     component: 'kemet-tooltip',
-};
-export default meta;
-const Template = (args) => {
-    const tooltip = document.querySelector('kemet-tooltip');
-    if (tooltip)
-        tooltip.refresh();
-    return html `
-    <div class="storybook__canvas--${args.canvasPosition}">
-      <kemet-tooltip ?opened=${args.opened} placement=${args.placement} effect=${args.effect} fire-on=${args.fireOn} strategy=${args.strategy} skidding=${args.skidding} distance=${args.distance}>
-        <kemet-button type="text" slot="trigger">${args.triggerText}</kemet-button>
-        <div slot="content">${unsafeHTML(args.contentText)}</div>
-      </kemet-tooltip>
-    </div>
-  `;
-};
-export const Standard = {
-    render: args => Template(args),
     args: {
         triggerText: 'Trigger',
         contentText: 'This is some content. <strong>HTML</strong> is supported.',
         canvasPosition: 'middle',
-        placement: 'top',
-        opened: false,
-        effect: 'fade',
-        fireOn: 'hover',
-        strategy: 'fixed',
-        skidding: 0,
-        distance: 0,
+        distance: 24,
     },
     argTypes: {
         canvasPosition: {
@@ -46,9 +24,6 @@ export const Standard = {
             control: { type: 'select' },
             options: ['auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end'],
         },
-        opened: {
-            control: { type: 'boolean' },
-        },
         effect: {
             control: { type: 'select' },
             options: ['none', 'fade', 'scale', 'slide', 'fall', 'flip-horizontal', 'flip-vertical', 'sign', 'super-scaled'],
@@ -61,12 +36,62 @@ export const Standard = {
             control: { type: 'radio' },
             options: ['fixed', 'absolute'],
         },
-        skidding: {
-            control: { type: 'number' },
-        },
-        distance: {
-            control: { type: 'number' },
-        },
+    }
+};
+export default meta;
+const Template = (args) => {
+    const tooltip = document.querySelector('kemet-tooltip');
+    if (tooltip)
+        tooltip.refresh();
+    return html `
+    <div class="storybook__canvas--${args.canvasPosition}">
+      <kemet-tooltip ?opened=${args.opened} placement=${ifDefined(args.placement)} effect=${ifDefined(args.effect)} fire-on=${ifDefined(args.fireOn)} strategy=${ifDefined(args.strategy)} skidding=${ifDefined(args.skidding)} distance=${ifDefined(args.distance)}>
+        <kemet-button type="text" slot="trigger">${args.triggerText}</kemet-button>
+        <div slot="content">${unsafeHTML(args.contentText)}</div>
+      </kemet-tooltip>
+    </div>
+  `;
+};
+// export const Standard: Story = {
+//   render: args => Template(args),
+//   args: {
+//     triggerText: 'Trigger',
+//     contentText: 'This is some content. <strong>HTML</strong> is supported.',
+//     canvasPosition: 'middle',
+//     placement: 'top',
+//     opened: false,
+//     effect: 'fade',
+//     fireOn: 'hover',
+//     strategy: 'fixed',
+//     skidding: 0,
+//     distance: 0,
+//   },
+// };
+export const Standard = {
+    render: args => Template(args),
+};
+export const Right = {
+    render: args => Template(args),
+    args: {
+        placement: 'right'
+    }
+};
+export const Bottom = {
+    render: args => Template(args),
+    args: {
+        placement: 'bottom'
+    }
+};
+export const Left = {
+    render: args => Template(args),
+    args: {
+        placement: 'left'
+    }
+};
+export const OnClick = {
+    render: args => Template(args),
+    args: {
+        fireOn: 'click'
     }
 };
 //# sourceMappingURL=stories.js.map

package/dist/components/kemet-tooltip/docs/stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-tooltip/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAG3D,OAAO,kBAAkB,CAAC;AAE1B,OAAO,iCAAiC,CAAC;AACzC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,eAAe;CAC3B,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACxD,IAAI,OAAO;QAAE,OAAO,CAAC,OAAO,EAAE,CAAC;IAE/B,OAAO,IAAI,CAAA;qCACwB,IAAI,CAAC,cAAc;+BACzB,IAAI,CAAC,MAAM,cAAc,IAAI,CAAC,SAAS,WAAW,IAAI,CAAC,MAAM,YAAY,IAAI,CAAC,MAAM,aAAa,IAAI,CAAC,QAAQ,aAAa,IAAI,CAAC,QAAQ,aAAa,IAAI,CAAC,QAAQ;mDAC9I,IAAI,CAAC,WAAW;8BACrC,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC;;;GAGvD,CAAC;AACJ,CAAC,CAAC;AAGF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,WAAW,EAAE,SAAS;QACtB,WAAW,EAAE,2DAA2D;QACxE,cAAc,EAAE,QAAQ;QACxB,SAAS,EAAE,KAAK;QAChB,MAAM,EAAE,KAAK;QACb,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,OAAO;QACf,QAAQ,EAAE,OAAO;QACjB,QAAQ,EAAE,CAAC;QACX,QAAQ,EAAE,CAAC;KACZ;IACD,QAAQ,EAAE;QACR,cAAc,EAAE;YACd,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,cAAc,EAAE,aAAa,EAAE,UAAU,CAAC;SAC5E;QACD,SAAS,EAAE;YACT,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,cAAc,EAAE,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC;SAC1L;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,EAAE,cAAc,CAAC;SAChH;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC;SAC5B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,OAAO,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC;SAC/B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-tooltip';\n\nimport '../../kemet-button/kemet-button';\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Tooltip',\n  component: 'kemet-tooltip',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => {\n  const tooltip = document.querySelector('kemet-tooltip');\n  if (tooltip) tooltip.refresh();\n\n  return html`\n    <div class=\"storybook__canvas--${args.canvasPosition}\">\n      <kemet-tooltip ?opened=${args.opened} placement=${args.placement} effect=${args.effect} fire-on=${args.fireOn} strategy=${args.strategy} skidding=${args.skidding} distance=${args.distance}>\n        <kemet-button type=\"text\" slot=\"trigger\">${args.triggerText}</kemet-button>\n        <div slot=\"content\">${unsafeHTML(args.contentText)}</div>\n      </kemet-tooltip>\n    </div>\n  `;\n};\n\n\nexport const Standard: Story = {\n  render: args => Template(args),\n  args: {\n    triggerText: 'Trigger',\n    contentText: 'This is some content. <strong>HTML</strong> is supported.',\n    canvasPosition: 'middle',\n    placement: 'top',\n    opened: false,\n    effect: 'fade',\n    fireOn: 'hover',\n    strategy: 'fixed',\n    skidding: 0,\n    distance: 0,\n  },\n  argTypes: {\n    canvasPosition: {\n      control: { type: 'select' },\n      options: ['middle', 'top-right', 'bottom-right', 'bottom-left', 'top-left'],\n    },\n    placement: {\n      control: { type: 'select' },\n      options: ['auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end'],\n    },\n    opened: {\n      control: { type: 'boolean' },\n    },\n    effect: {\n      control: { type: 'select' },\n      options: ['none', 'fade', 'scale', 'slide', 'fall', 'flip-horizontal', 'flip-vertical', 'sign', 'super-scaled'],\n    },\n    fireOn: {\n      control: { type: 'radio' },\n      options: ['hover', 'click'],\n    },\n    strategy: {\n      control: { type: 'radio' },\n      options: ['fixed', 'absolute'],\n    },\n    skidding: {\n      control: { type: 'number' },\n    },\n    distance: {\n      control: { type: 'number' },\n    },\n  }\n};\n"]}
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-tooltip/docs/stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-tooltip';\n\nimport '../../kemet-button/kemet-button';\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Tooltip',\n  component: 'kemet-tooltip',\n  args: {\n    triggerText: 'Trigger',\n    contentText: 'This is some content. <strong>HTML</strong> is supported.',\n    canvasPosition: 'middle',\n    distance: 24,\n  },\n  argTypes: {\n    canvasPosition: {\n      control: { type: 'select' },\n      options: ['middle', 'top-right', 'bottom-right', 'bottom-left', 'top-left'],\n    },\n    placement: {\n      control: { type: 'select' },\n      options: ['auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end'],\n    },\n    effect: {\n      control: { type: 'select' },\n      options: ['none', 'fade', 'scale', 'slide', 'fall', 'flip-horizontal', 'flip-vertical', 'sign', 'super-scaled'],\n    },\n    fireOn: {\n      control: { type: 'radio' },\n      options: ['hover', 'click'],\n    },\n    strategy: {\n      control: { type: 'radio' },\n      options: ['fixed', 'absolute'],\n    },\n  }\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => {\n  const tooltip = document.querySelector('kemet-tooltip');\n  if (tooltip) tooltip.refresh();\n\n  return html`\n    <div class=\"storybook__canvas--${args.canvasPosition}\">\n      <kemet-tooltip ?opened=${args.opened} placement=${ifDefined(args.placement)} effect=${ifDefined(args.effect)} fire-on=${ifDefined(args.fireOn)} strategy=${ifDefined(args.strategy)} skidding=${ifDefined(args.skidding)} distance=${ifDefined(args.distance)}>\n        <kemet-button type=\"text\" slot=\"trigger\">${args.triggerText}</kemet-button>\n        <div slot=\"content\">${unsafeHTML(args.contentText)}</div>\n      </kemet-tooltip>\n    </div>\n  `;\n};\n\n\n// export const Standard: Story = {\n//   render: args => Template(args),\n//   args: {\n//     triggerText: 'Trigger',\n//     contentText: 'This is some content. <strong>HTML</strong> is supported.',\n//     canvasPosition: 'middle',\n//     placement: 'top',\n//     opened: false,\n//     effect: 'fade',\n//     fireOn: 'hover',\n//     strategy: 'fixed',\n//     skidding: 0,\n//     distance: 0,\n//   },\n// };\n\nexport const Standard: Story = {\n  render: args => Template(args),\n};\n\nexport const Right: Story = {\n  render: args => Template(args),\n  args: {\n    placement: 'right'\n  }\n};\n\nexport const Bottom: Story = {\n  render: args => Template(args),\n  args: {\n    placement: 'bottom'\n  }\n};\n\nexport const Left: Story = {\n  render: args => Template(args),\n  args: {\n    placement: 'left'\n  }\n};\n\nexport const OnClick: Story = {\n  render: args => Template(args),\n  args: {\n    fireOn: 'click'\n  }\n};\n"]}

package/dist/components/kemet-tooltip/styles.js

@@ -5,8 +5,8 @@ export const stylesTooltip = css `
     --kemet-tooltip-size: 22px;
     --kemet-tooltip-border-size: 1px;
     --kemet-tooltip-rounded-tip: 4px;
-    --kemet-tooltip-background-color: var(--kemet-color-foreground);
-    --kemet-tooltip-border-color: var(--kemet-color-background);
+    --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);
   }
 

package/dist/components/kemet-tooltip/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-tooltip/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0D/B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesTooltip = css`\n  :host {\n    --kemet-tooltip-deg: -45deg;\n    --kemet-tooltip-size: 22px;\n    --kemet-tooltip-border-size: 1px;\n    --kemet-tooltip-rounded-tip: 4px;\n    --kemet-tooltip-background-color: var(--kemet-color-foreground);\n    --kemet-tooltip-border-color: var(--kemet-color-background);\n    --kemet-tooltip-placement-offset: calc(calc(var(--kemet-tooltip-size) / 2) * -1);\n  }\n\n  #arrow {\n    content: '';\n    width: var(--kemet-tooltip-size);\n    height: var(--kemet-tooltip-size);\n    position: relative;\n    display: inline-block;\n    background: linear-gradient(\n        var(--kemet-tooltip-deg),\n        transparent calc(var(--kemet-tooltip-size) / 1.5),\n        var(--kemet-tooltip-background-color) 0\n      )\n      no-repeat;\n    background-repeat: no-repeat;\n    transform-origin: center center;\n    border-top-left-radius: var(--kemet-tooltip-rounded-tip);\n    border-left: var(--kemet-tooltip-border-size) solid var(--kemet-tooltip-border-color);\n    border-top: var(--kemet-tooltip-border-size) solid var(--kemet-tooltip-border-color);\n  }\n\n  [data-popper-placement^=\"top\"] #arrow {\n    top: var(--kemet-tooltip-placement-offset);\n    transform: rotate(225deg);\n\n  }\n\n  [data-popper-placement^=\"bottom\"] #arrow-container {\n    top: 0px;\n  }\n\n  [data-popper-placement^=\"bottom\"] #arrow {\n    top: var(--kemet-tooltip-placement-offset);\n    transform: rotate(45deg);\n  }\n\n  [data-popper-placement^=\"right\"] #arrow {\n    left: var(--kemet-tooltip-placement-offset);\n    transform: rotate(-45deg);\n  }\n\n  [data-popper-placement^=\"left\"] #arrow-container {\n    right: 0;\n  }\n\n  [data-popper-placement^=\"left\"] #arrow {\n    right: var(--kemet-tooltip-placement-offset);\n    transform: rotate(135deg);\n  }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-tooltip/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0D/B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesTooltip = css`\n  :host {\n    --kemet-tooltip-deg: -45deg;\n    --kemet-tooltip-size: 22px;\n    --kemet-tooltip-border-size: 1px;\n    --kemet-tooltip-rounded-tip: 4px;\n    --kemet-tooltip-background-color: rgb(var(--kemet-color-background));\n    --kemet-tooltip-border-color: rgb(var(--kemet-color-foreground));\n    --kemet-tooltip-placement-offset: calc(calc(var(--kemet-tooltip-size) / 2) * -1);\n  }\n\n  #arrow {\n    content: '';\n    width: var(--kemet-tooltip-size);\n    height: var(--kemet-tooltip-size);\n    position: relative;\n    display: inline-block;\n    background: linear-gradient(\n        var(--kemet-tooltip-deg),\n        transparent calc(var(--kemet-tooltip-size) / 1.5),\n        var(--kemet-tooltip-background-color) 0\n      )\n      no-repeat;\n    background-repeat: no-repeat;\n    transform-origin: center center;\n    border-top-left-radius: var(--kemet-tooltip-rounded-tip);\n    border-left: var(--kemet-tooltip-border-size) solid var(--kemet-tooltip-border-color);\n    border-top: var(--kemet-tooltip-border-size) solid var(--kemet-tooltip-border-color);\n  }\n\n  [data-popper-placement^=\"top\"] #arrow {\n    top: var(--kemet-tooltip-placement-offset);\n    transform: rotate(225deg);\n\n  }\n\n  [data-popper-placement^=\"bottom\"] #arrow-container {\n    top: 0px;\n  }\n\n  [data-popper-placement^=\"bottom\"] #arrow {\n    top: var(--kemet-tooltip-placement-offset);\n    transform: rotate(45deg);\n  }\n\n  [data-popper-placement^=\"right\"] #arrow {\n    left: var(--kemet-tooltip-placement-offset);\n    transform: rotate(-45deg);\n  }\n\n  [data-popper-placement^=\"left\"] #arrow-container {\n    right: 0;\n  }\n\n  [data-popper-placement^=\"left\"] #arrow {\n    right: var(--kemet-tooltip-placement-offset);\n    transform: rotate(135deg);\n  }\n`;\n"]}

package/dist/components/kemet-tracker/docs/stories.d.ts

@@ -8,3 +8,4 @@ declare const meta: Meta;
 export default meta;
 declare type Story = StoryObj;
 export declare const Standard: Story;
+export declare const HideDotContent: Story;

package/dist/components/kemet-tracker/docs/stories.js

@@ -1,4 +1,5 @@
 import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import '../kemet-tracker';
 import '../kemet-tracker-step';
 import '../../kemet-tabs/kemet-tabs';
@@ -7,40 +8,35 @@ import '../../kemet-tabs/kemet-tab-panel';
 const meta = {
     title: 'Components / Tracker',
     component: 'kemet-tracker',
+    args: {
+        numOfSteps: 5,
+        currentStep: 3,
+    },
+    argTypes: {
+        currentStep: {
+            control: { type: 'number', max: 5 },
+        },
+    }
 };
 export default meta;
-const Template = ({ breakpoint = '767px', numOfSteps = 5, currentStep = 3, hideDotContent = false, }) => {
+const Template = (args) => {
     const steps = [];
-    for (let i = 1; i <= numOfSteps; i += 1) {
-        steps.push(html `<kemet-tracker-step ?completed=${i < currentStep || currentStep > numOfSteps} ?current=${i === currentStep} ?hide-dot-content=${hideDotContent}>Step ${i}</kemet-tracker-step>`);
+    for (let i = 1; i <= args.numOfSteps; i += 1) {
+        steps.push(html `<kemet-tracker-step ?completed=${i < args.currentStep || args.currentStep > args.numOfSteps} ?current=${i === args.currentStep} ?hide-dot-content=${args.hideDotContent}>Step ${i}</kemet-tracker-step>`);
     }
     return html `
-    <kemet-tracker breakpoint=${breakpoint}>
+    <kemet-tracker breakpoint=${ifDefined(args.breakpoint)}>
       ${steps}
     </kemet-tracker>
   `;
 };
 export const Standard = {
     render: args => Template(args),
+};
+export const HideDotContent = {
+    render: args => Template(args),
     args: {
-        breakpoint: '767px',
-        numOfSteps: 5,
-        currentStep: 3,
-        hideDotContent: false,
-    },
-    argTypes: {
-        breakpoint: {
-            control: { type: 'text' },
-        },
-        numOfSteps: {
-            control: { type: 'number' },
-        },
-        currentStep: {
-            control: { type: 'number', max: 5 },
-        },
-        hideDotContent: {
-            control: { type: 'boolean' },
-        },
+        hideDotContent: true,
     }
 };
 //# sourceMappingURL=stories.js.map

package/dist/components/kemet-tracker/docs/stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-tracker/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,uBAAuB,CAAC;AAE/B,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,eAAe;CAC3B,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,UAAU,GAAG,OAAO,EACpB,UAAU,GAAG,CAAC,EACd,WAAW,GAAG,CAAC,EACf,cAAc,GAAG,KAAK,GACvB,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,EAAE,CAAC;IAEjB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,UAAU,EAAE,CAAC,IAAI,CAAC,EAAE;QACvC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAA,kCAAkC,CAAC,GAAG,WAAW,IAAI,WAAW,GAAG,UAAU,aAAa,CAAC,KAAK,WAAW,sBAAsB,cAAc,SAAS,CAAC,uBAAuB,CAAC,CAAC;KAClM;IAED,OAAO,IAAI,CAAA;gCACmB,UAAU;QAClC,KAAK;;GAEV,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,UAAU,EAAE,OAAO;QACnB,UAAU,EAAE,CAAC;QACb,WAAW,EAAE,CAAC;QACd,cAAc,EAAE,KAAK;KACtB;IACD,QAAQ,EAAE;QACR,UAAU,EAAE;YACV,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,UAAU,EAAE;YACV,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,WAAW,EAAE;YACX,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE;SACpC;QACD,cAAc,EAAE;YACd,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;KACF;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-tracker';\nimport '../kemet-tracker-step';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Tracker',\n  component: 'kemet-tracker',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n  breakpoint = '767px',\n  numOfSteps = 5,\n  currentStep = 3,\n  hideDotContent = false,\n}) => {\n  const steps = [];\n\n  for (let i = 1; i <= numOfSteps; i += 1) {\n    steps.push(html`<kemet-tracker-step ?completed=${i < currentStep || currentStep > numOfSteps} ?current=${i === currentStep} ?hide-dot-content=${hideDotContent}>Step ${i}</kemet-tracker-step>`);\n  }\n\n  return html`\n    <kemet-tracker breakpoint=${breakpoint}>\n      ${steps}\n    </kemet-tracker>\n  `;\n};\n\nexport const Standard: Story = {\n  render: args => Template(args),\n  args: {\n    breakpoint: '767px',\n    numOfSteps: 5,\n    currentStep: 3,\n    hideDotContent: false,\n  },\n  argTypes: {\n    breakpoint: {\n      control: { type: 'text' },\n    },\n    numOfSteps: {\n      control: { type: 'number' },\n    },\n    currentStep: {\n      control: { type: 'number', max: 5 },\n    },\n    hideDotContent: {\n      control: { type: 'boolean' },\n    },\n  }\n};\n"]}
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-tracker/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,OAAO,kBAAkB,CAAC;AAC1B,OAAO,uBAAuB,CAAC;AAE/B,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,eAAe;IAC1B,IAAI,EAAE;QACJ,UAAU,EAAE,CAAC;QACb,WAAW,EAAE,CAAC;KACf;IACD,QAAQ,EAAE;QACR,WAAW,EAAE;YACX,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE;SACpC;KACF;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,KAAK,GAAG,EAAE,CAAC;IAEjB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC,IAAI,CAAC,EAAE;QAC5C,KAAK,CAAC,IAAI,CAAC,IAAI,CAAA,kCAAkC,CAAC,GAAG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,aAAa,CAAC,KAAK,IAAI,CAAC,WAAW,sBAAsB,IAAI,CAAC,cAAc,SAAS,CAAC,uBAAuB,CAAC,CAAC;KAC3N;IAED,OAAO,IAAI,CAAA;gCACmB,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC;QAClD,KAAK;;GAEV,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU;IACnC,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,cAAc,EAAE,IAAI;KACrB;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-tracker';\nimport '../kemet-tracker-step';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Tracker',\n  component: 'kemet-tracker',\n  args: {\n    numOfSteps: 5,\n    currentStep: 3,\n  },\n  argTypes: {\n    currentStep: {\n      control: { type: 'number', max: 5 },\n    },\n  }\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => {\n  const steps = [];\n\n  for (let i = 1; i <= args.numOfSteps; i += 1) {\n    steps.push(html`<kemet-tracker-step ?completed=${i < args.currentStep || args.currentStep > args.numOfSteps} ?current=${i === args.currentStep} ?hide-dot-content=${args.hideDotContent}>Step ${i}</kemet-tracker-step>`);\n  }\n\n  return html`\n    <kemet-tracker breakpoint=${ifDefined(args.breakpoint)}>\n      ${steps}\n    </kemet-tracker>\n  `;\n};\n\nexport const Standard: Story = {\n  render: args => Template(args),\n};\n\nexport const HideDotContent: Story = {\n  render: args => Template(args),\n  args: {\n    hideDotContent: true,\n  }\n};\n"]}

package/dist/components/kemet-tracker/kemet-tracker-step.d.ts

@@ -16,22 +16,22 @@ import { KemetTrackerInterface } from './types';
  * @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. Default: 90%
- * @cssproperty --kemet-tracker-step-dot-color - The text color. Default: var(--kemet-color-primary)
- * @cssproperty --kemet-tracker-step-dot-border - Border around a dot. Default: 1px solid var(--kemet-color-primary)
- * @cssproperty --kemet-tracker-step-dot-size - Width and height of a dot. Default: 50px
- * @cssproperty --kemet-tracker-step-dot-size-mobile - Mobile width and height of a dot. Default: 25px
- * @cssproperty --kemet-tracker-step-dot-gap - Space between a dot and connector line. Default: 4px
- * @cssproperty --kemet-tracker-step-dot-transition - Transition of a dot. Default: all 300ms ease-in-out
- * @cssproperty --kemet-tracker-step-dot-fill-color - Fill color of a dot. Default: transparent
- * @cssproperty --kemet-tracker-step-dot-background-color - Color of the background a dot is on. Default: var(--kemet-color-white)
- * @cssproperty --kemet-tracker-step-current-color - Current dot text color. Default: var(--kemet-color-white)
- * @cssproperty --kemet-tracker-step-current-fill-color - Current dot fill color. Default: var(--kemet-color-primary)
- * @cssproperty --kemet-tracker-step-completed-color - Text color of a completed dot. Default: var(--kemet-color-white)
- * @cssproperty --kemet-tracker-step-completed-fill-color - Background color of a completed dot. Default: var(--kemet-color-success)
- * @cssproperty --kemet-tracker-step-completed-line-color - Completed connector line color. Default: var(--kemet-color-primary)
- * @cssproperty --kemet-tracker-step-completed-line-weight - Completed line weight. Default: 3px
- * @cssproperty --kemet-tracker-step-standard-line-weight - Standard line weight. Default: 1px
+ * @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.

package/dist/components/kemet-tracker/kemet-tracker-step.js

@@ -18,22 +18,22 @@ import { stylesStep } from './styles';
  * @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. Default: 90%
- * @cssproperty --kemet-tracker-step-dot-color - The text color. Default: var(--kemet-color-primary)
- * @cssproperty --kemet-tracker-step-dot-border - Border around a dot. Default: 1px solid var(--kemet-color-primary)
- * @cssproperty --kemet-tracker-step-dot-size - Width and height of a dot. Default: 50px
- * @cssproperty --kemet-tracker-step-dot-size-mobile - Mobile width and height of a dot. Default: 25px
- * @cssproperty --kemet-tracker-step-dot-gap - Space between a dot and connector line. Default: 4px
- * @cssproperty --kemet-tracker-step-dot-transition - Transition of a dot. Default: all 300ms ease-in-out
- * @cssproperty --kemet-tracker-step-dot-fill-color - Fill color of a dot. Default: transparent
- * @cssproperty --kemet-tracker-step-dot-background-color - Color of the background a dot is on. Default: var(--kemet-color-white)
- * @cssproperty --kemet-tracker-step-current-color - Current dot text color. Default: var(--kemet-color-white)
- * @cssproperty --kemet-tracker-step-current-fill-color - Current dot fill color. Default: var(--kemet-color-primary)
- * @cssproperty --kemet-tracker-step-completed-color - Text color of a completed dot. Default: var(--kemet-color-white)
- * @cssproperty --kemet-tracker-step-completed-fill-color - Background color of a completed dot. Default: var(--kemet-color-success)
- * @cssproperty --kemet-tracker-step-completed-line-color - Completed connector line color. Default: var(--kemet-color-primary)
- * @cssproperty --kemet-tracker-step-completed-line-weight - Completed line weight. Default: 3px
- * @cssproperty --kemet-tracker-step-standard-line-weight - Standard line weight. Default: 1px
+ * @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.

package/dist/components/kemet-tracker/kemet-tracker-step.js.map

@@ -1 +1 @@
-{"version":3,"file":"kemet-tracker-step.js","sourceRoot":"","sources":["../../../src/components/kemet-tracker/kemet-tracker-step.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { stylesStep } from './styles';\nimport { KemetTrackerInterface } from './types';\n\n/**\n *\n * @since 1.2.0\n * @status stable\n *\n * @tagname kemet-tracker-step\n * @summary A step in the Tracker\n *\n * @prop {number} step - The current step number\n * @prop {boolean} completed - Determines whether or not a step renders as complete\n * @prop {boolean} current - Determines whether or not a step renders as the current step\n * @prop {boolean} last - Is automatically added to the last step\n * @prop {boolean} mobile - Determines if a step should render as mobile\n * @prop {boolean} hideDotContent - Hides the label inside of a dot\n * @prop {number} completedSize - The icon size for the completed check mark\n *\n * @cssproperty --kemet-tracker-step-dot-font-size - The font size. Default: 90%\n * @cssproperty --kemet-tracker-step-dot-color - The text color. Default: var(--kemet-color-primary)\n * @cssproperty --kemet-tracker-step-dot-border - Border around a dot. Default: 1px solid var(--kemet-color-primary)\n * @cssproperty --kemet-tracker-step-dot-size - Width and height of a dot. Default: 50px\n * @cssproperty --kemet-tracker-step-dot-size-mobile - Mobile width and height of a dot. Default: 25px\n * @cssproperty --kemet-tracker-step-dot-gap - Space between a dot and connector line. Default: 4px\n * @cssproperty --kemet-tracker-step-dot-transition - Transition of a dot. Default: all 300ms ease-in-out\n * @cssproperty --kemet-tracker-step-dot-fill-color - Fill color of a dot. Default: transparent\n * @cssproperty --kemet-tracker-step-dot-background-color - Color of the background a dot is on. Default: var(--kemet-color-white)\n * @cssproperty --kemet-tracker-step-current-color - Current dot text color. Default: var(--kemet-color-white)\n * @cssproperty --kemet-tracker-step-current-fill-color - Current dot fill color. Default: var(--kemet-color-primary)\n * @cssproperty --kemet-tracker-step-completed-color - Text color of a completed dot. Default: var(--kemet-color-white)\n * @cssproperty --kemet-tracker-step-completed-fill-color - Background color of a completed dot. Default: var(--kemet-color-success)\n * @cssproperty --kemet-tracker-step-completed-line-color - Completed connector line color. Default: var(--kemet-color-primary)\n * @cssproperty --kemet-tracker-step-completed-line-weight - Completed line weight. Default: 3px\n * @cssproperty --kemet-tracker-step-standard-line-weight - Standard line weight. Default: 1px\n *\n * @csspart dot - The container for the dot.\n * @csspart line - A connector line from dot to dot.\n * @csspart completed-line - A completed connector line.\n *\n */\n\n@customElement('kemet-tracker-step')\nexport default class KemetTrackerStep extends LitElement {\n  static styles = [stylesStep];\n\n  @property({ type: Number })\n  step: number;\n\n  @property({ type: Boolean, reflect: true })\n  completed: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  current: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  last: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  mobile: boolean;\n\n  @property({ type: Boolean, reflect: true, attribute: 'hide-dot-content' })\n  hideDotContent: boolean;\n\n  @property({ type: Number })\n  completedSize: number = 16;\n\n  @state()\n  tracker: KemetTrackerInterface;\n\n\n  firstUpdated() {\n    this.tracker = this.closest('kemet-tracker');\n  }\n\n  render() {\n    return html`\n      ${this.makeLine()}\n      ${this.makeCompletedLine()}\n      <div class=\"dot\" part=\"dot\">${this.makeDotContent()}</div>\n      ${this.makeSlotContent()}\n    `;\n  }\n\n  makeLine() {\n    if (!this.last) {\n      return html`<div class=\"line\" part=\"line\"></div>`;\n    }\n\n    return null;\n  }\n\n  makeCompletedLine() {\n    if (this.completed && !this.last) {\n      return html`<div class=\"line completed\" part=\"completed-line\" @animationend=${() => this.handleCompletedLineEnd()}></div>`;\n    }\n\n    return null;\n  }\n\n  makeDotContent() {\n    if (this.completed && !this.mobile && !this.hideDotContent) {\n      return html`\n        <kemet-icon icon=\"check2\" size=${this.completedSize}></kemet-icon>\n      `;\n    }\n\n    if (!this.mobile && !this.hideDotContent) {\n      return html`\n        <span>${this.step}/${this.tracker?.total}</span>\n      `;\n    }\n\n    return null;\n  }\n\n  makeSlotContent() {\n    if (!this.mobile) {\n      return html`<slot></slot>`;\n    }\n\n    return null;\n  }\n\n  handleCompletedLineEnd() {\n    const currentDot = this.tracker.querySelector('[current]').shadowRoot.querySelector('.dot');\n\n    if (currentDot) {\n      currentDot.classList.add('animate');\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-tracker-step': KemetTrackerStep\n  }\n}\n"]}
+{"version":3,"file":"kemet-tracker-step.js","sourceRoot":"","sources":["../../../src/components/kemet-tracker/kemet-tracker-step.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { stylesStep } from './styles';\nimport { KemetTrackerInterface } from './types';\n\n/**\n *\n * @since 1.2.0\n * @status stable\n *\n * @tagname kemet-tracker-step\n * @summary A step in the Tracker\n *\n * @prop {number} step - The current step number\n * @prop {boolean} completed - Determines whether or not a step renders as complete\n * @prop {boolean} current - Determines whether or not a step renders as the current step\n * @prop {boolean} last - Is automatically added to the last step\n * @prop {boolean} mobile - Determines if a step should render as mobile\n * @prop {boolean} hideDotContent - Hides the label inside of a dot\n * @prop {number} completedSize - The icon size for the completed check mark\n *\n * @cssproperty --kemet-tracker-step-dot-font-size - The font size.\n * @cssproperty --kemet-tracker-step-dot-color - The text color.\n * @cssproperty --kemet-tracker-step-dot-border - Border around a dot.\n * @cssproperty --kemet-tracker-step-dot-size - Width and height of a dot.\n * @cssproperty --kemet-tracker-step-dot-size-mobile - Mobile width and height of a dot.\n * @cssproperty --kemet-tracker-step-dot-gap - Space between a dot and connector line.\n * @cssproperty --kemet-tracker-step-dot-transition - Transition of a dot.\n * @cssproperty --kemet-tracker-step-dot-fill-color - Fill color of a dot.\n * @cssproperty --kemet-tracker-step-dot-background-color - Color of the background a dot is on.\n * @cssproperty --kemet-tracker-step-current-color - Current dot text color.\n * @cssproperty --kemet-tracker-step-current-fill-color - Current dot fill color.\n * @cssproperty --kemet-tracker-step-completed-color - Text color of a completed dot.\n * @cssproperty --kemet-tracker-step-completed-fill-color - Background color of a completed dot.\n * @cssproperty --kemet-tracker-step-completed-line-color - Completed connector line color.\n * @cssproperty --kemet-tracker-step-completed-line-weight - Completed line weight.\n * @cssproperty --kemet-tracker-step-standard-line-weight - Standard line weight.\n *\n * @csspart dot - The container for the dot.\n * @csspart line - A connector line from dot to dot.\n * @csspart completed-line - A completed connector line.\n *\n */\n\n@customElement('kemet-tracker-step')\nexport default class KemetTrackerStep extends LitElement {\n  static styles = [stylesStep];\n\n  @property({ type: Number })\n  step: number;\n\n  @property({ type: Boolean, reflect: true })\n  completed: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  current: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  last: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  mobile: boolean;\n\n  @property({ type: Boolean, reflect: true, attribute: 'hide-dot-content' })\n  hideDotContent: boolean;\n\n  @property({ type: Number })\n  completedSize: number = 16;\n\n  @state()\n  tracker: KemetTrackerInterface;\n\n\n  firstUpdated() {\n    this.tracker = this.closest('kemet-tracker');\n  }\n\n  render() {\n    return html`\n      ${this.makeLine()}\n      ${this.makeCompletedLine()}\n      <div class=\"dot\" part=\"dot\">${this.makeDotContent()}</div>\n      ${this.makeSlotContent()}\n    `;\n  }\n\n  makeLine() {\n    if (!this.last) {\n      return html`<div class=\"line\" part=\"line\"></div>`;\n    }\n\n    return null;\n  }\n\n  makeCompletedLine() {\n    if (this.completed && !this.last) {\n      return html`<div class=\"line completed\" part=\"completed-line\" @animationend=${() => this.handleCompletedLineEnd()}></div>`;\n    }\n\n    return null;\n  }\n\n  makeDotContent() {\n    if (this.completed && !this.mobile && !this.hideDotContent) {\n      return html`\n        <kemet-icon icon=\"check2\" size=${this.completedSize}></kemet-icon>\n      `;\n    }\n\n    if (!this.mobile && !this.hideDotContent) {\n      return html`\n        <span>${this.step}/${this.tracker?.total}</span>\n      `;\n    }\n\n    return null;\n  }\n\n  makeSlotContent() {\n    if (!this.mobile) {\n      return html`<slot></slot>`;\n    }\n\n    return null;\n  }\n\n  handleCompletedLineEnd() {\n    const currentDot = this.tracker.querySelector('[current]').shadowRoot.querySelector('.dot');\n\n    if (currentDot) {\n      currentDot.classList.add('animate');\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-tracker-step': KemetTrackerStep\n  }\n}\n"]}

package/dist/components/kemet-tracker/styles.js

@@ -4,9 +4,20 @@ export const stylesStep = css `
     --kemet-tracker-step-dot-size: 50px;
     --kemet-tracker-step-dot-size-mobile: 25px;
     --kemet-tracker-step-dot-gap: 4px;
+    --kemet-tracker-step-dot-transition: all 300ms ease-in-out;
+    --kemet-tracker-step-dot-font-size: 90%;
+    --kemet-tracker-step-dot-color: rgb(var(--kemet-color-primary));
+    --kemet-tracker-step-dot-background-color: rgb(var(--kemet-color-white));
+    --kemet-tracker-step-dot-border: 1px solid rgb(var(--kemet-color-primary));
+    --kemet-tracker-step-dot-fill-color: transparent;
     --kemet-tracker-step-standard-line-weight: 1px;
     --kemet-tracker-step-completed-line-weight: 3px;
-    --kemet-tracker-step-dot-transition: all 300ms ease-in-out;
+    --kemet-tracker-step-completed-color: rgb(var(--kemet-color-white));
+    --kemet-tracker-step-completed-fill-color: rgb(var(--kemet-color-success));
+    --kemet-tracker-step-current-color: rgb(var(--kemet-color-white));
+    --kemet-tracker-step-current-fill-color: rgb(var(--kemet-color-primary));
+    --kemet-tracker-step-line-color: rgb(var(--kemet-color-primary));
+    --kemet-tracker-step-completed-line-color: rgb(var(--kemet-color-primary));
 
     position: relative;
     width: 100%;
@@ -14,8 +25,8 @@ export const stylesStep = css `
   }
 
   .dot {
-    font-size: var(--kemet-tracker-step-dot-font-size, 90%);
-    color: var(--kemet-tracker-step-dot-color, var(--kemet-color-primary));
+    font-size: var(--kemet-tracker-step-dot-font-size);
+    color: var(--kemet-tracker-step-dot-color);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -26,7 +37,7 @@ export const stylesStep = css `
     height: var(--kemet-tracker-step-dot-size);
     border-radius: 100%;
     transition: var(--kemet-tracker-step-dot-transition);
-    background-color: var(--kemet-tracker-step-dot-background-color, var(--kemet-color-white));
+    background-color: var(--kemet-tracker-step-dot-background-color);
   }
 
   .dot::after {
@@ -41,26 +52,26 @@ export const stylesStep = css `
     z-index: -1;
     border-radius: 100%;
     transition: var(--kemet-tracker-step-dot-transition);
-    border: var(--kemet-tracker-step-dot-border, 1px solid var(--kemet-color-primary));
-    background-color: var(--kemet-tracker-step-dot-fill-color, transparent);
+    border: var(--kemet-tracker-step-dot-border);
+    background-color: var(--kemet-tracker-step-dot-fill-color);
   }
 
   :host([completed]) .dot {
-    color: var(--kemet-tracker-step-completed-color, var(--kemet-color-white));
+    color: var(--kemet-tracker-step-completed-color);
   }
 
   :host([completed]) .dot::after {
     border: 0;
-    background-color: var(--kemet-tracker-step-completed-fill-color, var(--kemet-color-success));
+    background-color: var(--kemet-tracker-step-completed-fill-color);
   }
 
   :host([current]) .dot.animate {
-    color: var(--kemet-tracker-step-current-color, var(--kemet-color-white));
+    color: var(--kemet-tracker-step-current-color);
   }
 
   :host([current]) .dot.animate::after {
     border: 0;
-    background-color: var(--kemet-tracker-step-current-fill-color, var(--kemet-color-primary));
+    background-color: var(--kemet-tracker-step-current-fill-color);
   }
 
   :host([mobile]) .dot {
@@ -79,7 +90,7 @@ export const stylesStep = css `
     /* standard */
     top: calc((var(--kemet-tracker-step-dot-size) - var(--kemet-tracker-step-standard-line-weight)) / 2);
     height: var(--kemet-tracker-step-standard-line-weight);
-    background-color: var(--kemet-tracker-step-line-color, var(--kemet-color-primary));
+    background-color: var(--kemet-tracker-step-line-color);
   }
 
   .line.completed {
@@ -88,7 +99,7 @@ export const stylesStep = css `
     transform-origin: left center;
     top: calc((var(--kemet-tracker-step-dot-size) - var(--kemet-tracker-step-completed-line-weight)) / 2);
     height: var(--kemet-tracker-step-completed-line-weight);
-    background-color: var(--kemet-tracker-step-completed-line-color, var(--kemet-color-primary));
+    background-color: var(--kemet-tracker-step-completed-line-color);
     animation-name: grow;
     animation-delay: 1s;
     animation-duration: 600ms;

package/dist/components/kemet-tracker/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-tracker/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4G5B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesStep = css`\n  :host {\n    --kemet-tracker-step-dot-size: 50px;\n    --kemet-tracker-step-dot-size-mobile: 25px;\n    --kemet-tracker-step-dot-gap: 4px;\n    --kemet-tracker-step-standard-line-weight: 1px;\n    --kemet-tracker-step-completed-line-weight: 3px;\n    --kemet-tracker-step-dot-transition: all 300ms ease-in-out;\n\n    position: relative;\n    width: 100%;\n    text-align: center;\n  }\n\n  .dot {\n    font-size: var(--kemet-tracker-step-dot-font-size, 90%);\n    color: var(--kemet-tracker-step-dot-color, var(--kemet-color-primary));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0 auto;\n    position: relative;\n    z-index: 1;\n    width: var(--kemet-tracker-step-dot-size);\n    height: var(--kemet-tracker-step-dot-size);\n    border-radius: 100%;\n    transition: var(--kemet-tracker-step-dot-transition);\n    background-color: var(--kemet-tracker-step-dot-background-color, var(--kemet-color-white));\n  }\n\n  .dot::after {\n    content: \"\";\n    width: unset;\n    height: unset;\n    position: absolute;\n    top: var(--kemet-tracker-step-dot-gap);\n    left: var(--kemet-tracker-step-dot-gap);\n    right: var(--kemet-tracker-step-dot-gap);\n    bottom: var(--kemet-tracker-step-dot-gap);\n    z-index: -1;\n    border-radius: 100%;\n    transition: var(--kemet-tracker-step-dot-transition);\n    border: var(--kemet-tracker-step-dot-border, 1px solid var(--kemet-color-primary));\n    background-color: var(--kemet-tracker-step-dot-fill-color, transparent);\n  }\n\n  :host([completed]) .dot {\n    color: var(--kemet-tracker-step-completed-color, var(--kemet-color-white));\n  }\n\n  :host([completed]) .dot::after {\n    border: 0;\n    background-color: var(--kemet-tracker-step-completed-fill-color, var(--kemet-color-success));\n  }\n\n  :host([current]) .dot.animate {\n    color: var(--kemet-tracker-step-current-color, var(--kemet-color-white));\n  }\n\n  :host([current]) .dot.animate::after {\n    border: 0;\n    background-color: var(--kemet-tracker-step-current-fill-color, var(--kemet-color-primary));\n  }\n\n  :host([mobile]) .dot {\n    width: var(--kemet-tracker-step-dot-size-mobile);\n    height: var(--kemet-tracker-step-dot-size-mobile);\n  }\n\n  .line {\n    display: block;\n    position: absolute;\n    left: 50%;\n    right: 0;\n    bottom: 0;\n    width: 100%;\n\n    /* standard */\n    top: calc((var(--kemet-tracker-step-dot-size) - var(--kemet-tracker-step-standard-line-weight)) / 2);\n    height: var(--kemet-tracker-step-standard-line-weight);\n    background-color: var(--kemet-tracker-step-line-color, var(--kemet-color-primary));\n  }\n\n  .line.completed {\n    width: 100%;\n    transform: scaleX(0);\n    transform-origin: left center;\n    top: calc((var(--kemet-tracker-step-dot-size) - var(--kemet-tracker-step-completed-line-weight)) / 2);\n    height: var(--kemet-tracker-step-completed-line-weight);\n    background-color: var(--kemet-tracker-step-completed-line-color, var(--kemet-color-primary));\n    animation-name: grow;\n    animation-delay: 1s;\n    animation-duration: 600ms;\n    animation-fill-mode: forwards;\n  }\n\n  :host([mobile]) .line {\n    top: calc((var(--kemet-tracker-step-dot-size-mobile) - var(--kemet-tracker-step-standard-line-weight)) / 2);\n  }\n\n  :host([mobile]) .line.completed {\n    top: calc((var(--kemet-tracker-step-dot-size-mobile) - var(--kemet-tracker-step-completed-line-weight)) / 2);\n  }\n\n  @keyframes grow {\n    from { transform: scaleX(0); }\n    to { transform: scaleX(1); }\n  }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-tracker/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuH5B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesStep = css`\n  :host {\n    --kemet-tracker-step-dot-size: 50px;\n    --kemet-tracker-step-dot-size-mobile: 25px;\n    --kemet-tracker-step-dot-gap: 4px;\n    --kemet-tracker-step-dot-transition: all 300ms ease-in-out;\n    --kemet-tracker-step-dot-font-size: 90%;\n    --kemet-tracker-step-dot-color: rgb(var(--kemet-color-primary));\n    --kemet-tracker-step-dot-background-color: rgb(var(--kemet-color-white));\n    --kemet-tracker-step-dot-border: 1px solid rgb(var(--kemet-color-primary));\n    --kemet-tracker-step-dot-fill-color: transparent;\n    --kemet-tracker-step-standard-line-weight: 1px;\n    --kemet-tracker-step-completed-line-weight: 3px;\n    --kemet-tracker-step-completed-color: rgb(var(--kemet-color-white));\n    --kemet-tracker-step-completed-fill-color: rgb(var(--kemet-color-success));\n    --kemet-tracker-step-current-color: rgb(var(--kemet-color-white));\n    --kemet-tracker-step-current-fill-color: rgb(var(--kemet-color-primary));\n    --kemet-tracker-step-line-color: rgb(var(--kemet-color-primary));\n    --kemet-tracker-step-completed-line-color: rgb(var(--kemet-color-primary));\n\n    position: relative;\n    width: 100%;\n    text-align: center;\n  }\n\n  .dot {\n    font-size: var(--kemet-tracker-step-dot-font-size);\n    color: var(--kemet-tracker-step-dot-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0 auto;\n    position: relative;\n    z-index: 1;\n    width: var(--kemet-tracker-step-dot-size);\n    height: var(--kemet-tracker-step-dot-size);\n    border-radius: 100%;\n    transition: var(--kemet-tracker-step-dot-transition);\n    background-color: var(--kemet-tracker-step-dot-background-color);\n  }\n\n  .dot::after {\n    content: \"\";\n    width: unset;\n    height: unset;\n    position: absolute;\n    top: var(--kemet-tracker-step-dot-gap);\n    left: var(--kemet-tracker-step-dot-gap);\n    right: var(--kemet-tracker-step-dot-gap);\n    bottom: var(--kemet-tracker-step-dot-gap);\n    z-index: -1;\n    border-radius: 100%;\n    transition: var(--kemet-tracker-step-dot-transition);\n    border: var(--kemet-tracker-step-dot-border);\n    background-color: var(--kemet-tracker-step-dot-fill-color);\n  }\n\n  :host([completed]) .dot {\n    color: var(--kemet-tracker-step-completed-color);\n  }\n\n  :host([completed]) .dot::after {\n    border: 0;\n    background-color: var(--kemet-tracker-step-completed-fill-color);\n  }\n\n  :host([current]) .dot.animate {\n    color: var(--kemet-tracker-step-current-color);\n  }\n\n  :host([current]) .dot.animate::after {\n    border: 0;\n    background-color: var(--kemet-tracker-step-current-fill-color);\n  }\n\n  :host([mobile]) .dot {\n    width: var(--kemet-tracker-step-dot-size-mobile);\n    height: var(--kemet-tracker-step-dot-size-mobile);\n  }\n\n  .line {\n    display: block;\n    position: absolute;\n    left: 50%;\n    right: 0;\n    bottom: 0;\n    width: 100%;\n\n    /* standard */\n    top: calc((var(--kemet-tracker-step-dot-size) - var(--kemet-tracker-step-standard-line-weight)) / 2);\n    height: var(--kemet-tracker-step-standard-line-weight);\n    background-color: var(--kemet-tracker-step-line-color);\n  }\n\n  .line.completed {\n    width: 100%;\n    transform: scaleX(0);\n    transform-origin: left center;\n    top: calc((var(--kemet-tracker-step-dot-size) - var(--kemet-tracker-step-completed-line-weight)) / 2);\n    height: var(--kemet-tracker-step-completed-line-weight);\n    background-color: var(--kemet-tracker-step-completed-line-color);\n    animation-name: grow;\n    animation-delay: 1s;\n    animation-duration: 600ms;\n    animation-fill-mode: forwards;\n  }\n\n  :host([mobile]) .line {\n    top: calc((var(--kemet-tracker-step-dot-size-mobile) - var(--kemet-tracker-step-standard-line-weight)) / 2);\n  }\n\n  :host([mobile]) .line.completed {\n    top: calc((var(--kemet-tracker-step-dot-size-mobile) - var(--kemet-tracker-step-completed-line-weight)) / 2);\n  }\n\n  @keyframes grow {\n    from { transform: scaleX(0); }\n    to { transform: scaleX(1); }\n  }\n`;\n"]}

package/dist/components/kemet-upload/docs/stories.js

@@ -8,23 +8,6 @@ import '../../kemet-tabs/kemet-tab-panel';
 const meta = {
     title: 'Components / Upload',
     component: 'kemet-upload',
-};
-export default meta;
-const Template = ({ files }) => {
-    const uploadFiles = [];
-    files.forEach((file) => {
-        uploadFiles.push(html `
-      <kemet-upload-file name=${file.name} size=${file.size} loaded=${file.loaded} status=${file.status} message=${ifDefined(files.message)}></kemet-upload-file>
-    `);
-    });
-    return html `
-    <kemet-upload>
-      ${uploadFiles}
-    </kemet-upload>
-  `;
-};
-export const Standard = {
-    render: (args) => Template(args),
     args: {
         files: [
             {
@@ -48,10 +31,22 @@ export const Standard = {
             },
         ],
     },
-    argTypes: {
-        files: {
-            control: { type: 'array' },
-        },
-    }
+};
+export default meta;
+const Template = (args) => {
+    const uploadFiles = [];
+    args.files.forEach((file) => {
+        uploadFiles.push(html `
+      <kemet-upload-file name=${file.name} size=${file.size} loaded=${file.loaded} status=${file.status} message=${ifDefined(file.message)}></kemet-upload-file>
+    `);
+    });
+    return html `
+    <kemet-upload>
+      ${uploadFiles}
+    </kemet-upload>
+  `;
+};
+export const Standard = {
+    render: (args) => Template(args),
 };
 //# sourceMappingURL=stories.js.map

package/dist/components/kemet-upload/docs/stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-upload/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,OAAO,iBAAiB,CAAC;AACzB,OAAO,sBAAsB,CAAC;AAE9B,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,cAAc;CAC1B,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7B,MAAM,WAAW,GAAG,EAAE,CAAC;IAEvB,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QACrB,WAAW,CAAC,IAAI,CAAC,IAAI,CAAA;gCACO,IAAI,CAAC,IAAI,SAAS,IAAI,CAAC,IAAI,WAAW,IAAI,CAAC,MAAM,WAAW,IAAI,CAAC,MAAM,YAAY,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC;KACtI,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,OAAO,IAAI,CAAA;;QAEL,WAAW;;GAEhB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IACrC,IAAI,EAAE;QACJ,KAAK,EAAE;YACL;gBACE,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE,OAAO;gBACb,MAAM,EAAE,OAAO;gBACf,MAAM,EAAE,UAAU;aACnB;YACD;gBACE,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE,MAAM;gBACZ,MAAM,EAAE,MAAM;gBACd,MAAM,EAAE,WAAW;aACpB;YACD;gBACE,IAAI,EAAE,aAAa;gBACnB,IAAI,EAAE,OAAO;gBACb,MAAM,EAAE,OAAO;gBACf,MAAM,EAAE,OAAO;gBACf,OAAO,EAAE,uBAAuB;aACjC;SACF;KACF;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;KACF;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-upload';\nimport '../kemet-upload-file';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Upload',\n  component: 'kemet-upload',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({ files }) => {\n  const uploadFiles = [];\n\n  files.forEach((file) => {\n    uploadFiles.push(html`\n      <kemet-upload-file name=${file.name} size=${file.size} loaded=${file.loaded} status=${file.status} message=${ifDefined(files.message)}></kemet-upload-file>\n    `);\n  });\n\n  return html`\n    <kemet-upload>\n      ${uploadFiles}\n    </kemet-upload>\n  `;\n};\n\nexport const Standard: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    files: [\n      {\n        name: 'image.jpg',\n        size: 2000000,\n        loaded: 2000000,\n        status: 'complete',\n      },\n      {\n        name: 'image.png',\n        size: 200000,\n        loaded: 100000,\n        status: 'uploading',\n      },\n      {\n        name: 'package.zip',\n        size: 8000000,\n        loaded: 2000000,\n        status: 'error',\n        message: 'File size is too big.',\n      },\n    ],\n  },\n  argTypes: {\n    files: {\n      control: { type: 'array' },\n    },\n  }\n};\n"]}
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-upload/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,OAAO,iBAAiB,CAAC;AACzB,OAAO,sBAAsB,CAAC;AAE9B,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,cAAc;IACzB,IAAI,EAAE;QACJ,KAAK,EAAE;YACL;gBACE,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE,OAAO;gBACb,MAAM,EAAE,OAAO;gBACf,MAAM,EAAE,UAAU;aACnB;YACD;gBACE,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE,MAAM;gBACZ,MAAM,EAAE,MAAM;gBACd,MAAM,EAAE,WAAW;aACpB;YACD;gBACE,IAAI,EAAE,aAAa;gBACnB,IAAI,EAAE,OAAO;gBACb,MAAM,EAAE,OAAO;gBACf,MAAM,EAAE,OAAO;gBACf,OAAO,EAAE,uBAAuB;aACjC;SACF;KACF;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,WAAW,GAAG,EAAE,CAAC;IAEvB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QAC1B,WAAW,CAAC,IAAI,CAAC,IAAI,CAAA;gCACO,IAAI,CAAC,IAAI,SAAS,IAAI,CAAC,IAAI,WAAW,IAAI,CAAC,MAAM,WAAW,IAAI,CAAC,MAAM,YAAY,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;KACrI,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,OAAO,IAAI,CAAA;;QAEL,WAAW;;GAEhB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CACtC,CAAC","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-upload';\nimport '../kemet-upload-file';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Upload',\n  component: 'kemet-upload',\n  args: {\n    files: [\n      {\n        name: 'image.jpg',\n        size: 2000000,\n        loaded: 2000000,\n        status: 'complete',\n      },\n      {\n        name: 'image.png',\n        size: 200000,\n        loaded: 100000,\n        status: 'uploading',\n      },\n      {\n        name: 'package.zip',\n        size: 8000000,\n        loaded: 2000000,\n        status: 'error',\n        message: 'File size is too big.',\n      },\n    ],\n  },\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => {\n  const uploadFiles = [];\n\n  args.files.forEach((file) => {\n    uploadFiles.push(html`\n      <kemet-upload-file name=${file.name} size=${file.size} loaded=${file.loaded} status=${file.status} message=${ifDefined(file.message)}></kemet-upload-file>\n    `);\n  });\n\n  return html`\n    <kemet-upload>\n      ${uploadFiles}\n    </kemet-upload>\n  `;\n};\n\nexport const Standard: Story = {\n  render: (args: any) => Template(args),\n};\n"]}

package/dist/components/kemet-upload/kemet-upload-file.d.ts

@@ -14,9 +14,9 @@ import { LitElement } from 'lit';
  * @prop {number} percent - Percentage of file completion that's calculated by the loaded property.
  * @prop {string} message - An error message to give to users
  *
- * @cssproperty --kemet-upload-file-color - The default text color. Default: var(--kemet-color-text).
- * @cssproperty --kemet-upload-file-padding - The padding around the file. Default: 0.5rem 1rem.
- * @cssproperty --kemet-upload-file-border - The border around the file. Default: 1px solid var(--kemet-color-primary).
+ * @cssproperty --kemet-upload-file-color - The default text color.
+ * @cssproperty --kemet-upload-file-padding - The padding around the file.
+ * @cssproperty --kemet-upload-file-border - The border around the file.
  *
  * @csspart percentage - Area that displays the percentage.
  * @csspart filename - Area that displays file name.

package/dist/components/kemet-upload/kemet-upload-file.js

@@ -28,9 +28,9 @@ const formatBytes = (bytes, decimals = 2) => {
  * @prop {number} percent - Percentage of file completion that's calculated by the loaded property.
  * @prop {string} message - An error message to give to users
  *
- * @cssproperty --kemet-upload-file-color - The default text color. Default: var(--kemet-color-text).
- * @cssproperty --kemet-upload-file-padding - The padding around the file. Default: 0.5rem 1rem.
- * @cssproperty --kemet-upload-file-border - The border around the file. Default: 1px solid var(--kemet-color-primary).
+ * @cssproperty --kemet-upload-file-color - The default text color.
+ * @cssproperty --kemet-upload-file-padding - The padding around the file.
+ * @cssproperty --kemet-upload-file-border - The border around the file.
  *
  * @csspart percentage - Area that displays the percentage.
  * @csspart filename - Area that displays file name.