kemet-ui 2.0.3 → 3.0.1

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

@@ -1,31 +1,46 @@
 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-radius-rounded: var(--kemet-border-radius-md);
+    --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));
+
     position: relative;
     display: block;
   }
 
   textarea {
-    color: var(--kemet-color-text);
+    color: rgb(var(--kemet-color-text));
     display: block;
     width: 100%;
-    padding: var(--kemet-textarea-padding, 1rem);
-    border: var(--kemet-textarea-border, 1px solid var(--kemet-color-background));
+    padding: var(--kemet-textarea-padding);
+    border: var(--kemet-textarea-border);
     appearance: none;
     box-sizing: border-box;
     background: transparent;
   }
 
   :host([status='error']) textarea {
-    border: var(--kemet-textarea-border-color-error, 1px solid var(--kemet-color-error));
+    border: var(--kemet-textarea-border-color-error);
   }
 
   :host([status='success']) textarea {
-    border: var(--kemet-textarea-border-color-success, 1px solid var(--kemet-color-success));
+    border: var(--kemet-textarea-border-color-success);
   }
 
   :host([status='warning']) textarea {
-    border: var(--kemet-textarea-border-color-warning, 1px solid var(--kemet-color-warning));
+    border: var(--kemet-textarea-border-color-warning);
   }
 
   :host([disabled]) textarea {
@@ -33,37 +48,37 @@ export const stylesTextarea = css `
   }
 
   :host([icon-left]) textarea {
-    padding-left: var(--kemet-textarea-icon-left-padding, 3rem);
+    padding-left: var(--kemet-textarea-icon-left-padding);
   }
 
   :host([icon-right]) textarea {
-    padding-right: var(--kemet-textarea-icon-right-padding, 3rem);
+    padding-right: var(--kemet-textarea-icon-right-padding);
   }
 
   :host([rounded]) textarea {
-    border-radius: var(--kemet-textarea-border-radius-rounded, var(--kemet-border-radius));
+    border-radius: var(--kemet-textarea-border-radius-rounded);
   }
 
   :host([filled]) textarea {
-    border: var(--kemet-textarea-border-filled, none);
-    color: var(--kemet-textarea-color-filled, var(--kemet-color-white));
-    background-color: var(--kemet-textarea-background-color-filled, var(--kemet-color-primary));
+    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, var(--kemet-color-white));
+    color: var(--kemet-textarea-color-filled);
   }
 
   :host([status='error'][filled]) textarea {
-    background-color: var(--kemet-textarea-background-color-error, var(--kemet-color-error));
+    background-color: var(--kemet-textarea-background-color-error);
   }
 
   :host([status='success'][filled]) textarea {
-    background-color: var(--kemet-textarea-background-color-success, var(--kemet-color-success));
+    background-color: var(--kemet-textarea-background-color-success);
   }
 
   :host([status='warning'][filled]) textarea {
-    background-color: var(--kemet-textarea-background-color-warning, var(--kemet-color-warning));
+    background-color: var(--kemet-textarea-background-color-warning);
   }
 `;
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-textarea/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkEhC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesTextarea = css`\n  :host {\n    position: relative;\n    display: block;\n  }\n\n  textarea {\n    color: var(--kemet-color-text);\n    display: block;\n    width: 100%;\n    padding: var(--kemet-textarea-padding, 1rem);\n    border: var(--kemet-textarea-border, 1px solid var(--kemet-color-background));\n    appearance: none;\n    box-sizing: border-box;\n    background: transparent;\n  }\n\n  :host([status='error']) textarea {\n    border: var(--kemet-textarea-border-color-error, 1px solid var(--kemet-color-error));\n  }\n\n  :host([status='success']) textarea {\n    border: var(--kemet-textarea-border-color-success, 1px solid var(--kemet-color-success));\n  }\n\n  :host([status='warning']) textarea {\n    border: var(--kemet-textarea-border-color-warning, 1px solid var(--kemet-color-warning));\n  }\n\n  :host([disabled]) textarea {\n    opacity: 0.5;\n  }\n\n  :host([icon-left]) textarea {\n    padding-left: var(--kemet-textarea-icon-left-padding, 3rem);\n  }\n\n  :host([icon-right]) textarea {\n    padding-right: var(--kemet-textarea-icon-right-padding, 3rem);\n  }\n\n  :host([rounded]) textarea {\n    border-radius: var(--kemet-textarea-border-radius-rounded, var(--kemet-border-radius));\n  }\n\n  :host([filled]) textarea {\n    border: var(--kemet-textarea-border-filled, none);\n    color: var(--kemet-textarea-color-filled, var(--kemet-color-white));\n    background-color: var(--kemet-textarea-background-color-filled, var(--kemet-color-primary));\n  }\n\n  :host([filled]) textarea::placeholder {\n    color: var(--kemet-textarea-color-filled, var(--kemet-color-white));\n  }\n\n  :host([status='error'][filled]) textarea {\n    background-color: var(--kemet-textarea-background-color-error, var(--kemet-color-error));\n  }\n\n  :host([status='success'][filled]) textarea {\n    background-color: var(--kemet-textarea-background-color-success, var(--kemet-color-success));\n  }\n\n  :host([status='warning'][filled]) textarea {\n    background-color: var(--kemet-textarea-background-color-warning, var(--kemet-color-warning));\n  }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-textarea/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiFhC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesTextarea = css`\n  :host {\n    --kemet-textarea-padding: 1rem;\n    --kemet-textarea-border: 1px solid rgb(var(--kemet-color-foreground));\n    --kemet-textarea-border-color-error: 1px solid rgb(var(--kemet-color-error));\n    --kemet-textarea-border-color-success: 1px solid rgb(var(--kemet-color-success));\n    --kemet-textarea-border-color-warning: 1px solid rgb(var(--kemet-color-warning));\n    --kemet-textarea-icon-left-padding: 3rem;\n    --kemet-textarea-icon-right-padding: 3rem;\n    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-md);\n    --kemet-textarea-border-filled: none;\n    --kemet-textarea-color-filled: rgb(var(--kemet-color-white));\n    --kemet-textarea-background-color-filled: rgb(var(--kemet-color-primary));\n    --kemet-textarea-background-color-error: rgb(var(--kemet-color-error));\n    --kemet-textarea-background-color-success: rgb(var(--kemet-color-success));\n    --kemet-textarea-background-color-warning: rgb(var(--kemet-color-warning));\n\n    position: relative;\n    display: block;\n  }\n\n  textarea {\n    color: rgb(var(--kemet-color-text));\n    display: block;\n    width: 100%;\n    padding: var(--kemet-textarea-padding);\n    border: var(--kemet-textarea-border);\n    appearance: none;\n    box-sizing: border-box;\n    background: transparent;\n  }\n\n  :host([status='error']) textarea {\n    border: var(--kemet-textarea-border-color-error);\n  }\n\n  :host([status='success']) textarea {\n    border: var(--kemet-textarea-border-color-success);\n  }\n\n  :host([status='warning']) textarea {\n    border: var(--kemet-textarea-border-color-warning);\n  }\n\n  :host([disabled]) textarea {\n    opacity: 0.5;\n  }\n\n  :host([icon-left]) textarea {\n    padding-left: var(--kemet-textarea-icon-left-padding);\n  }\n\n  :host([icon-right]) textarea {\n    padding-right: var(--kemet-textarea-icon-right-padding);\n  }\n\n  :host([rounded]) textarea {\n    border-radius: var(--kemet-textarea-border-radius-rounded);\n  }\n\n  :host([filled]) textarea {\n    border: var(--kemet-textarea-border-filled);\n    color: var(--kemet-textarea-color-filled);\n    background-color: var(--kemet-textarea-background-color-filled);\n  }\n\n  :host([filled]) textarea::placeholder {\n    color: var(--kemet-textarea-color-filled);\n  }\n\n  :host([status='error'][filled]) textarea {\n    background-color: var(--kemet-textarea-background-color-error);\n  }\n\n  :host([status='success'][filled]) textarea {\n    background-color: var(--kemet-textarea-background-color-success);\n  }\n\n  :host([status='warning'][filled]) textarea {\n    background-color: var(--kemet-textarea-background-color-warning);\n  }\n`;\n"]}

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

@@ -7,3 +7,5 @@ declare const meta: Meta;
 export default meta;
 declare type Story = StoryObj;
 export declare const Standard: Story;
+export declare const Squared: Story;
+export declare const ShowOptions: Story;

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

@@ -7,52 +7,37 @@ import '../../kemet-tabs/kemet-tab-panel';
 const meta = {
     title: 'Components / Toggle',
     component: 'kemet-toggle',
+    args: {
+        label: 'Label'
+    }
 };
 export default meta;
-const Template = ({ label = null, disabled = false, checked = false, show = false, squared = false, optionUnchecked = null, optionChecked = null, }) => html `
+const Template = (args) => html `
   <kemet-toggle
-    label=${ifDefined(label)}
-    ?disabled=${disabled}
-    ?checked=${checked}
-    ?show=${show}
-    ?squared=${squared}
-    option-unchecked=${ifDefined(optionUnchecked)}
-    option-checked=${ifDefined(optionChecked)}
+    label=${ifDefined(args.label)}
+    ?disabled=${args.disabled}
+    ?checked=${args.checked}
+    ?show=${args.show}
+    ?squared=${args.squared}
+    option-unchecked=${ifDefined(args.optionUnchecked)}
+    option-checked=${ifDefined(args.optionChecked)}
   ></kemet-toggle>
 `;
 export const Standard = {
     render: args => Template(args),
+};
+export const Squared = {
+    render: args => Template(args),
     args: {
-        checked: false,
-        label: 'Label',
-        squared: false,
-        show: false,
-        disabled: false,
+        squared: true,
+    },
+};
+export const ShowOptions = {
+    render: args => Template(args),
+    args: {
+        show: true,
         optionUnchecked: 'No',
         optionChecked: 'Yes',
     },
-    argTypes: {
-        label: {
-            control: { type: 'text' },
-        },
-        disabled: {
-            control: { type: 'boolean' },
-        },
-        checked: {
-            control: { type: 'boolean' },
-        },
-        show: {
-            control: { type: 'boolean' },
-        },
-        squared: {
-            control: { type: 'boolean' },
-        },
-        optionChecked: {
-            control: { type: 'text' },
-        },
-        optionUnchecked: {
-            control: { type: 'text' },
-        },
-    }
 };
 //# sourceMappingURL=stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-toggle/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;AAEzB,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,EAChB,KAAK,GAAG,IAAI,EACZ,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,IAAI,GAAG,KAAK,EACZ,OAAO,GAAG,KAAK,EACf,eAAe,GAAG,IAAI,EACtB,aAAa,GAAG,IAAI,GACrB,EAAE,EAAE,CAAC,IAAI,CAAA;;YAEE,SAAS,CAAC,KAAK,CAAC;gBACZ,QAAQ;eACT,OAAO;YACV,IAAI;eACD,OAAO;uBACC,SAAS,CAAC,eAAe,CAAC;qBAC5B,SAAS,CAAC,aAAa,CAAC;;CAE5C,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,OAAO,EAAE,KAAK;QACd,KAAK,EAAE,OAAO;QACd,OAAO,EAAE,KAAK;QACd,IAAI,EAAE,KAAK;QACX,QAAQ,EAAE,KAAK;QACf,eAAe,EAAE,IAAI;QACrB,aAAa,EAAE,KAAK;KACrB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,aAAa,EAAE;YACb,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,eAAe,EAAE;YACf,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;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-toggle';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Toggle',\n  component: 'kemet-toggle',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n  label = null,\n  disabled = false,\n  checked = false,\n  show = false,\n  squared = false,\n  optionUnchecked = null,\n  optionChecked = null,\n}) => html`\n  <kemet-toggle\n    label=${ifDefined(label)}\n    ?disabled=${disabled}\n    ?checked=${checked}\n    ?show=${show}\n    ?squared=${squared}\n    option-unchecked=${ifDefined(optionUnchecked)}\n    option-checked=${ifDefined(optionChecked)}\n  ></kemet-toggle>\n`;\n\nexport const Standard: Story = {\n  render: args => Template(args),\n  args: {\n    checked: false,\n    label: 'Label',\n    squared: false,\n    show: false,\n    disabled: false,\n    optionUnchecked: 'No',\n    optionChecked: 'Yes',\n  },\n  argTypes: {\n    label: {\n      control: { type: 'text' },\n    },\n    disabled: {\n      control: { type: 'boolean' },\n    },\n    checked: {\n      control: { type: 'boolean' },\n    },\n    show: {\n      control: { type: 'boolean' },\n    },\n    squared: {\n      control: { type: 'boolean' },\n    },\n    optionChecked: {\n      control: { type: 'text' },\n    },\n    optionUnchecked: {\n      control: { type: 'text' },\n    },\n  }\n};\n"]}
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-toggle/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;AAEzB,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,OAAO;KACf;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;YAEnB,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;gBACjB,IAAI,CAAC,QAAQ;eACd,IAAI,CAAC,OAAO;YACf,IAAI,CAAC,IAAI;eACN,IAAI,CAAC,OAAO;uBACJ,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC;qBACjC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;;CAEjD,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,OAAO,GAAU;IAC5B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;KACd;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU;IAChC,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,IAAI,EAAE,IAAI;QACV,eAAe,EAAE,IAAI;QACrB,aAAa,EAAE,KAAK;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-toggle';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Toggle',\n  component: 'kemet-toggle',\n  args: {\n    label: 'Label'\n  }\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => html`\n  <kemet-toggle\n    label=${ifDefined(args.label)}\n    ?disabled=${args.disabled}\n    ?checked=${args.checked}\n    ?show=${args.show}\n    ?squared=${args.squared}\n    option-unchecked=${ifDefined(args.optionUnchecked)}\n    option-checked=${ifDefined(args.optionChecked)}\n  ></kemet-toggle>\n`;\n\nexport const Standard: Story = {\n  render: args => Template(args),\n};\n\nexport const Squared: Story = {\n  render: args => Template(args),\n  args: {\n    squared: true,\n  },\n};\n\nexport const ShowOptions: Story = {\n  render: args => Template(args),\n  args: {\n    show: true,\n    optionUnchecked: 'No',\n    optionChecked: 'Yes',\n  },\n};\n"]}

package/dist/components/kemet-toggle/kemet-toggle.d.ts

@@ -8,10 +8,10 @@ import { FormSubmitController } from '../../utilities/controllers/forms';
  * @summary A toggle switch for forms.
  *
  * @prop {string} name - The name on the input field
- * @prop {boolean} checked - Determines whether or not the toggle is checked
- * @prop {boolean} disabled - Determines whether or not the toggle is disabled
+ * @prop {boolean} checked - Determines whether the toggle is checked
+ * @prop {boolean} disabled - Determines whether the toggle is disabled
  * @prop {string} label - A description of the toggle's purpose
- * @prop {boolean} show - Determines whether or not to show text options
+ * @prop {boolean} show - Determines whether to show text options
  * @prop {boolean} squared - Displays the toggle as squared instead of rounded
  * @prop {string} optionChecked - The checked option text
  * @prop {string} optionUnchecked - The unchecked option text
@@ -22,15 +22,15 @@ import { FormSubmitController } from '../../utilities/controllers/forms';
  * @csspart checked - The checked text.
  * @csspart unchecked - The unchecked text.
  *
- * @cssproperty --kemet-toggle-width - The width of the entire toggle. Default: 3.5rem.
- * @cssproperty --kemet-toggle-height - The height of the entire toggle. Default:2rem.
- * @cssproperty --kemet-toggle-handle-diameter - The diameter of the handle. Default: 1.6rem.
- * @cssproperty --kemet-toggle-track-border - The border of the track. Default: none.
- * @cssproperty --kemet-toggle-track-color - The color of the track. Default: var(--kemet-color-white).
- * @cssproperty --kemet-toggle-track-shadow - The shadow on the track. Default: inset 0 0.4rem 0.7rem 0 rgba(47, 47, 47, 0.35), inset 0 -0.2rem 0.4rem 0 var(--kemet-color-gray1).
- * @cssproperty --kemet-toggle-handle-border - The border on the handle. Default: none.
- * @cssproperty --kemet-toggle-handle-color - The color of the handle. Default: var(--kemet-color-primary).
- * @cssproperty --kemet-toggle-handle-shadow - The shadow on the handle. Default: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.1), 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.2).
+ * @cssproperty --kemet-toggle-width - The width of the entire toggle.
+ * @cssproperty --kemet-toggle-height - The height of the entire toggle.
+ * @cssproperty --kemet-toggle-handle-diameter - The diameter of the handle.
+ * @cssproperty --kemet-toggle-track-border - The border of the track.
+ * @cssproperty --kemet-toggle-track-color - The color of the track.
+ * @cssproperty --kemet-toggle-track-shadow - The shadow on the track.
+ * @cssproperty --kemet-toggle-handle-border - The border on the handle.
+ * @cssproperty --kemet-toggle-handle-color - The color of the handle.
+ * @cssproperty --kemet-toggle-handle-shadow - The shadow on the handle.
  *
  * @event kemet-toggle-change - Fires when the toggle changes state
  *

package/dist/components/kemet-toggle/kemet-toggle.js

@@ -12,10 +12,10 @@ import { stylesToggle } from './styles';
  * @summary A toggle switch for forms.
  *
  * @prop {string} name - The name on the input field
- * @prop {boolean} checked - Determines whether or not the toggle is checked
- * @prop {boolean} disabled - Determines whether or not the toggle is disabled
+ * @prop {boolean} checked - Determines whether the toggle is checked
+ * @prop {boolean} disabled - Determines whether the toggle is disabled
  * @prop {string} label - A description of the toggle's purpose
- * @prop {boolean} show - Determines whether or not to show text options
+ * @prop {boolean} show - Determines whether to show text options
  * @prop {boolean} squared - Displays the toggle as squared instead of rounded
  * @prop {string} optionChecked - The checked option text
  * @prop {string} optionUnchecked - The unchecked option text
@@ -26,15 +26,15 @@ import { stylesToggle } from './styles';
  * @csspart checked - The checked text.
  * @csspart unchecked - The unchecked text.
  *
- * @cssproperty --kemet-toggle-width - The width of the entire toggle. Default: 3.5rem.
- * @cssproperty --kemet-toggle-height - The height of the entire toggle. Default:2rem.
- * @cssproperty --kemet-toggle-handle-diameter - The diameter of the handle. Default: 1.6rem.
- * @cssproperty --kemet-toggle-track-border - The border of the track. Default: none.
- * @cssproperty --kemet-toggle-track-color - The color of the track. Default: var(--kemet-color-white).
- * @cssproperty --kemet-toggle-track-shadow - The shadow on the track. Default: inset 0 0.4rem 0.7rem 0 rgba(47, 47, 47, 0.35), inset 0 -0.2rem 0.4rem 0 var(--kemet-color-gray1).
- * @cssproperty --kemet-toggle-handle-border - The border on the handle. Default: none.
- * @cssproperty --kemet-toggle-handle-color - The color of the handle. Default: var(--kemet-color-primary).
- * @cssproperty --kemet-toggle-handle-shadow - The shadow on the handle. Default: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.1), 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.2).
+ * @cssproperty --kemet-toggle-width - The width of the entire toggle.
+ * @cssproperty --kemet-toggle-height - The height of the entire toggle.
+ * @cssproperty --kemet-toggle-handle-diameter - The diameter of the handle.
+ * @cssproperty --kemet-toggle-track-border - The border of the track.
+ * @cssproperty --kemet-toggle-track-color - The color of the track.
+ * @cssproperty --kemet-toggle-track-shadow - The shadow on the track.
+ * @cssproperty --kemet-toggle-handle-border - The border on the handle.
+ * @cssproperty --kemet-toggle-handle-color - The color of the handle.
+ * @cssproperty --kemet-toggle-handle-shadow - The shadow on the handle.
  *
  * @event kemet-toggle-change - Fires when the toggle changes state
  *

package/dist/components/kemet-toggle/kemet-toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"kemet-toggle.js","sourceRoot":"","sources":["../../../src/components/kemet-toggle/kemet-toggle.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { FormSubmitController } from '../../utilities/controllers/forms';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesToggle } from './styles';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-toggle\n * @summary A toggle switch for forms.\n *\n * @prop {string} name - The name on the input field\n * @prop {boolean} checked - Determines whether or not the toggle is checked\n * @prop {boolean} disabled - Determines whether or not the toggle is disabled\n * @prop {string} label - A description of the toggle's purpose\n * @prop {boolean} show - Determines whether or not to show text options\n * @prop {boolean} squared - Displays the toggle as squared instead of rounded\n * @prop {string} optionChecked - The checked option text\n * @prop {string} optionUnchecked - The unchecked option text\n *\n * @csspart label - The label element.\n * @csspart control - The control element.\n * @csspart text - The label text.\n * @csspart checked - The checked text.\n * @csspart unchecked - The unchecked text.\n *\n * @cssproperty --kemet-toggle-width - The width of the entire toggle. Default: 3.5rem.\n * @cssproperty --kemet-toggle-height - The height of the entire toggle. Default:2rem.\n * @cssproperty --kemet-toggle-handle-diameter - The diameter of the handle. Default: 1.6rem.\n * @cssproperty --kemet-toggle-track-border - The border of the track. Default: none.\n * @cssproperty --kemet-toggle-track-color - The color of the track. Default: var(--kemet-color-white).\n * @cssproperty --kemet-toggle-track-shadow - The shadow on the track. Default: inset 0 0.4rem 0.7rem 0 rgba(47, 47, 47, 0.35), inset 0 -0.2rem 0.4rem 0 var(--kemet-color-gray1).\n * @cssproperty --kemet-toggle-handle-border - The border on the handle. Default: none.\n * @cssproperty --kemet-toggle-handle-color - The color of the handle. Default: var(--kemet-color-primary).\n * @cssproperty --kemet-toggle-handle-shadow - The shadow on the handle. Default: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.1), 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.2).\n *\n * @event kemet-toggle-change - Fires when the toggle changes state\n *\n */\n\n@customElement('kemet-toggle')\nexport default class KemetToggle extends LitElement {\n  formSubmitController: FormSubmitController;\n\n  static styles = [stylesToggle];\n\n  @property({ type: String })\n  name: string = 'toggle-switch';\n\n  @property({ type: Boolean, reflect: true })\n  checked: boolean = false;\n\n  @property({ type: Boolean })\n  disabled: boolean = false;\n\n  @property({ type: String })\n  label: string = '';\n\n  @property({ type: Boolean })\n  show: boolean = false;\n\n  @property({ type: Boolean })\n  squared: boolean = false;\n\n  @property({ type: String, attribute: 'option-checked' })\n  optionChecked: string = 'on';\n\n  @property({ type: String, attribute: 'option-unchecked' })\n  optionUnchecked: string = 'off';\n\n  @state()\n  value: string | boolean = this.checked ? this.optionChecked : this.optionUnchecked;\n\n  constructor() {\n    super();\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n  }\n\n  render() {\n    return html`\n      <label part=\"label\">\n        ${this.makeUncheckedOption()}\n        <span part=\"control\">\n          <span part=\"track\"></span>\n          <span part=\"handle\"></span>\n        </span>\n        <input\n          role=\"switch\"\n          type=\"checkbox\"\n          name=\"${this.name}\"\n          aria-label=\"${this.label}\"\n          aria-checked=${this.checked ? 'true' : 'false'}\n          ?disabled=${this.disabled}\n          ?checked=${this.checked}\n          @change=${this.handleChange}\n        />\n        ${this.makeCheckedOption()}\n        <span part=\"text\">${this.label}</span>\n      </label>\n    `;\n  }\n\n  handleChange() {\n    this.checked = !this.checked;\n    this.value = this.checked ? this.optionChecked : this.optionUnchecked;\n    emitEvent(this, 'kemet-toggle-change', true);\n  }\n\n  makeUncheckedOption() {\n    if (this.show) {\n      return html`<span class=\"option\" part=\"unchecked\">${this.optionUnchecked}</span>`;\n    }\n\n    return null;\n  }\n\n  makeCheckedOption() {\n    if (this.show) {\n      return html`<span class=\"option\" part=\"checked\">${this.optionChecked}</span>`;\n    }\n\n    return null;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-toggle': KemetToggle\n  }\n}\n"]}
+{"version":3,"file":"kemet-toggle.js","sourceRoot":"","sources":["../../../src/components/kemet-toggle/kemet-toggle.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { FormSubmitController } from '../../utilities/controllers/forms';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesToggle } from './styles';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-toggle\n * @summary A toggle switch for forms.\n *\n * @prop {string} name - The name on the input field\n * @prop {boolean} checked - Determines whether the toggle is checked\n * @prop {boolean} disabled - Determines whether the toggle is disabled\n * @prop {string} label - A description of the toggle's purpose\n * @prop {boolean} show - Determines whether to show text options\n * @prop {boolean} squared - Displays the toggle as squared instead of rounded\n * @prop {string} optionChecked - The checked option text\n * @prop {string} optionUnchecked - The unchecked option text\n *\n * @csspart label - The label element.\n * @csspart control - The control element.\n * @csspart text - The label text.\n * @csspart checked - The checked text.\n * @csspart unchecked - The unchecked text.\n *\n * @cssproperty --kemet-toggle-width - The width of the entire toggle.\n * @cssproperty --kemet-toggle-height - The height of the entire toggle.\n * @cssproperty --kemet-toggle-handle-diameter - The diameter of the handle.\n * @cssproperty --kemet-toggle-track-border - The border of the track.\n * @cssproperty --kemet-toggle-track-color - The color of the track.\n * @cssproperty --kemet-toggle-track-shadow - The shadow on the track.\n * @cssproperty --kemet-toggle-handle-border - The border on the handle.\n * @cssproperty --kemet-toggle-handle-color - The color of the handle.\n * @cssproperty --kemet-toggle-handle-shadow - The shadow on the handle.\n *\n * @event kemet-toggle-change - Fires when the toggle changes state\n *\n */\n\n@customElement('kemet-toggle')\nexport default class KemetToggle extends LitElement {\n  formSubmitController: FormSubmitController;\n\n  static styles = [stylesToggle];\n\n  @property({ type: String })\n  name: string = 'toggle-switch';\n\n  @property({ type: Boolean, reflect: true })\n  checked: boolean = false;\n\n  @property({ type: Boolean })\n  disabled: boolean = false;\n\n  @property({ type: String })\n  label: string = '';\n\n  @property({ type: Boolean })\n  show: boolean = false;\n\n  @property({ type: Boolean })\n  squared: boolean = false;\n\n  @property({ type: String, attribute: 'option-checked' })\n  optionChecked: string = 'on';\n\n  @property({ type: String, attribute: 'option-unchecked' })\n  optionUnchecked: string = 'off';\n\n  @state()\n  value: string | boolean = this.checked ? this.optionChecked : this.optionUnchecked;\n\n  constructor() {\n    super();\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n  }\n\n  render() {\n    return html`\n      <label part=\"label\">\n        ${this.makeUncheckedOption()}\n        <span part=\"control\">\n          <span part=\"track\"></span>\n          <span part=\"handle\"></span>\n        </span>\n        <input\n          role=\"switch\"\n          type=\"checkbox\"\n          name=\"${this.name}\"\n          aria-label=\"${this.label}\"\n          aria-checked=${this.checked ? 'true' : 'false'}\n          ?disabled=${this.disabled}\n          ?checked=${this.checked}\n          @change=${this.handleChange}\n        />\n        ${this.makeCheckedOption()}\n        <span part=\"text\">${this.label}</span>\n      </label>\n    `;\n  }\n\n  handleChange() {\n    this.checked = !this.checked;\n    this.value = this.checked ? this.optionChecked : this.optionUnchecked;\n    emitEvent(this, 'kemet-toggle-change', true);\n  }\n\n  makeUncheckedOption() {\n    if (this.show) {\n      return html`<span class=\"option\" part=\"unchecked\">${this.optionUnchecked}</span>`;\n    }\n\n    return null;\n  }\n\n  makeCheckedOption() {\n    if (this.show) {\n      return html`<span class=\"option\" part=\"checked\">${this.optionChecked}</span>`;\n    }\n\n    return null;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-toggle': KemetToggle\n  }\n}\n"]}

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

@@ -5,6 +5,12 @@ export const stylesToggle = css `
     --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;
@@ -46,10 +52,10 @@ export const stylesToggle = css `
   [part='track'] {
     width: var(--kemet-toggle-width);
     height: var(--kemet-toggle-height);
-    border: var(--kemet-toggle-track-border, none);
+    border: var(--kemet-toggle-track-border);
     border-radius: var(--kemet-toggle-height);
-    background-color: var(--kemet-toggle-track-color, var(--kemet-color-white));
-    box-shadow: var(--kemet-toggle-track-shadow, inset 0 0.4rem 0.7rem 0 rgba(47, 47, 47, 0.35), inset 0 -0.2rem 0.4rem 0 var(--kemet-color-gray1));
+    background-color: var(--kemet-toggle-track-color);
+    box-shadow: var(--kemet-toggle-track-shadow);
   }
 
   :host([squared]) [part='track'] {
@@ -63,10 +69,10 @@ export const stylesToggle = css `
     width: var(--kemet-toggle-handle-diameter);
     height: var(--kemet-toggle-handle-diameter);
     transform: translateX(0);
-    border: var(--kemet-toggle-handle-border, none);
+    border: var(--kemet-toggle-handle-border);
     border-radius: var(--kemet-toggle-handle-diameter);
-    background-color: var(--kemet-toggle-handle-color, var(--kemet-color-primary));
-    box-shadow: var(--kemet-toggle-handle-shadow, 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.1), 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.2));
+    background-color: var(--kemet-toggle-handle-color);
+    box-shadow: var(--kemet-toggle-handle-shadow);
   }
 
   :host([squared]) [part='handle'] {

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-toggle/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiF9B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesToggle = css`\n  :host {\n    --kemet-toggle-width: 3.5rem;\n    --kemet-toggle-height: 2rem;\n    --kemet-toggle-handle-diameter: 1.6rem;\n    --kemet-toggle-handle-margin: calc((var(--kemet-toggle-height) - var(--kemet-toggle-handle-diameter)) / 2);\n\n    display: flex;\n    align-items: center;\n  }\n\n  :host([disabled]) {\n    opacity: 0.5;\n  }\n\n  label {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    font-size: inherit;\n    color: inherit;\n  }\n\n  :host([disabled]) label {\n    cursor: not-allowed;\n  }\n\n  input {\n    display: none;\n  }\n\n  [part='control'] {\n    position: relative;\n    display: inline-flex;\n    margin: 0;\n    width: var(--kemet-toggle-width);\n    height: var(--kemet-toggle-height);\n  }\n\n  [part='control'] > span {\n    transition: 300ms ease-in-out;\n  }\n\n  [part='track'] {\n    width: var(--kemet-toggle-width);\n    height: var(--kemet-toggle-height);\n    border: var(--kemet-toggle-track-border, none);\n    border-radius: var(--kemet-toggle-height);\n    background-color: var(--kemet-toggle-track-color, var(--kemet-color-white));\n    box-shadow: var(--kemet-toggle-track-shadow, inset 0 0.4rem 0.7rem 0 rgba(47, 47, 47, 0.35), inset 0 -0.2rem 0.4rem 0 var(--kemet-color-gray1));\n  }\n\n  :host([squared]) [part='track'] {\n    border-radius: 0;\n  }\n\n  [part='handle'] {\n    position: absolute;\n    top: var(--kemet-toggle-handle-margin);\n    left: var(--kemet-toggle-handle-margin);\n    width: var(--kemet-toggle-handle-diameter);\n    height: var(--kemet-toggle-handle-diameter);\n    transform: translateX(0);\n    border: var(--kemet-toggle-handle-border, none);\n    border-radius: var(--kemet-toggle-handle-diameter);\n    background-color: var(--kemet-toggle-handle-color, var(--kemet-color-primary));\n    box-shadow: var(--kemet-toggle-handle-shadow, 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.1), 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.2));\n  }\n\n  :host([squared]) [part='handle'] {\n    border-radius: 0;\n  }\n\n  :host([checked]) [part='handle'] {\n    transform: translateX(calc(var(--kemet-toggle-width) - var(--kemet-toggle-handle-diameter) - var(--kemet-toggle-handle-margin) * 2));\n  }\n\n  .option {\n    font-size: 90%;\n  }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-toggle/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuF9B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesToggle = css`\n  :host {\n    --kemet-toggle-width: 3.5rem;\n    --kemet-toggle-height: 2rem;\n    --kemet-toggle-handle-diameter: 1.6rem;\n    --kemet-toggle-handle-margin: calc((var(--kemet-toggle-height) - var(--kemet-toggle-handle-diameter)) / 2);\n    --kemet-toggle-track-border: none;\n    --kemet-toggle-track-color: rgb(var(--kemet-color-white));\n    --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));\n    --kemet-toggle-handle-border: none;\n    --kemet-toggle-handle-color: rgb(var(--kemet-color-primary));\n    --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%);\n\n    display: flex;\n    align-items: center;\n  }\n\n  :host([disabled]) {\n    opacity: 0.5;\n  }\n\n  label {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    font-size: inherit;\n    color: inherit;\n  }\n\n  :host([disabled]) label {\n    cursor: not-allowed;\n  }\n\n  input {\n    display: none;\n  }\n\n  [part='control'] {\n    position: relative;\n    display: inline-flex;\n    margin: 0;\n    width: var(--kemet-toggle-width);\n    height: var(--kemet-toggle-height);\n  }\n\n  [part='control'] > span {\n    transition: 300ms ease-in-out;\n  }\n\n  [part='track'] {\n    width: var(--kemet-toggle-width);\n    height: var(--kemet-toggle-height);\n    border: var(--kemet-toggle-track-border);\n    border-radius: var(--kemet-toggle-height);\n    background-color: var(--kemet-toggle-track-color);\n    box-shadow: var(--kemet-toggle-track-shadow);\n  }\n\n  :host([squared]) [part='track'] {\n    border-radius: 0;\n  }\n\n  [part='handle'] {\n    position: absolute;\n    top: var(--kemet-toggle-handle-margin);\n    left: var(--kemet-toggle-handle-margin);\n    width: var(--kemet-toggle-handle-diameter);\n    height: var(--kemet-toggle-handle-diameter);\n    transform: translateX(0);\n    border: var(--kemet-toggle-handle-border);\n    border-radius: var(--kemet-toggle-handle-diameter);\n    background-color: var(--kemet-toggle-handle-color);\n    box-shadow: var(--kemet-toggle-handle-shadow);\n  }\n\n  :host([squared]) [part='handle'] {\n    border-radius: 0;\n  }\n\n  :host([checked]) [part='handle'] {\n    transform: translateX(calc(var(--kemet-toggle-width) - var(--kemet-toggle-handle-diameter) - var(--kemet-toggle-handle-margin) * 2));\n  }\n\n  .option {\n    font-size: 90%;\n  }\n`;\n"]}

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

@@ -8,3 +8,7 @@ declare const meta: Meta;
 export default meta;
 declare type Story = StoryObj;
 export declare const Standard: Story;
+export declare const Right: Story;
+export declare const Bottom: Story;
+export declare const Left: Story;
+export declare const OnClick: Story;

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/kemet-tooltip.d.ts

@@ -4,7 +4,7 @@ import KemetPopper from '../kemet-popper/kemet-popper';
  * @status stable
  *
  * @tagname kemet-tooltip
- * @summary A tooltip is a Popper component that displays an dynamic arrow pointing to the trigger.
+ * @summary A tooltip is a Popper component that displays a dynamic arrow pointing to the trigger.
  *
  * @slot trigger - Controls opening and closing the tooltip.
  * @slot content - The contents of the tooltip.
@@ -17,7 +17,7 @@ import KemetPopper from '../kemet-popper/kemet-popper';
  * @cssproperty --kemet-tooltip-border-size - The border size of the arrow
  * @cssproperty --kemet-tooltip-rounded-tip - How much rounding the tip of the arrow should be. Zero is pointy
  * @cssproperty --kemet-tooltip-background-color - The background color of the arrow
- * @cssproperty --kemet-tooltip-border-color - The border color of the the arrow
+ * @cssproperty --kemet-tooltip-border-color - The border color of the arrow
  * @cssproperty --kemet-tooltip-placement-offset - The offset of the arrow from the trigger
  *
  */