kemet-ui 2.0.2 → 3.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-badge/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqC5B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--kemet-badge-padding, 10px);\n    line-height: 1;\n    color: var(--kemet-color-white);\n  }\n\n  :host([status='primary']) {\n    background-color: var(--kemet-color-primary);\n  }\n\n  :host([status='success']) {\n    background-color: var(--kemet-color-success);\n  }\n\n  :host([status='standard']) {\n    background-color: var(--kemet-color-gray6);\n  }\n\n  :host([status='warning']) {\n    background-color: var(--kemet-color-warning);\n  }\n\n  :host([status='error']) {\n    background-color: var(--kemet-color-error);\n  }\n\n  :host([circle]) {\n    border-radius: 50%;\n  }\n\n  :host([pill]) {\n    border-radius: 99rem;\n  }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-badge/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuC5B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase = css`\n  :host {\n    --kemet-badge-padding: 10px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--kemet-badge-padding);\n    line-height: 1;\n    color: rgb(var(--kemet-color-white));\n  }\n\n  :host([status='primary']) {\n    background-color: rgb(var(--kemet-color-primary));\n  }\n\n  :host([status='success']) {\n    background-color: rgb(var(--kemet-color-success));\n  }\n\n  :host([status='standard']) {\n    background-color: rgb(var(--kemet-color-gray-500));\n  }\n\n  :host([status='warning']) {\n    background-color: rgb(var(--kemet-color-warning));\n  }\n\n  :host([status='error']) {\n    background-color: rgb(var(--kemet-color-error));\n  }\n\n  :host([circle]) {\n    border-radius: var(--kemet-border-radius-circle);\n  }\n\n  :host([pill]) {\n    border-radius: var(--kemet-border-radius-pill);\n  }\n`;\n"]}

package/dist/components/kemet-badge/types.d.ts

@@ -1,6 +1 @@
-export interface KemetBadge {
-    status: string;
-    circle: boolean;
-    pill: boolean;
-    circlePadding: number;
-}
+export declare type TypeStatus = 'standard' | 'primary' | 'success' | 'warning' | 'error';

package/dist/components/kemet-badge/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-badge/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface KemetBadge {\n  status: string,\n  circle: boolean,\n  pill: boolean,\n  circlePadding: number,\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-badge/types.ts"],"names":[],"mappings":"","sourcesContent":["export type TypeStatus = 'standard' | 'primary' | 'success' | 'warning' | 'error';\n"]}

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

@@ -3,7 +3,19 @@ import '../kemet-button';
 import '../../kemet-tabs/kemet-tabs';
 import '../../kemet-tabs/kemet-tab';
 import '../../kemet-tabs/kemet-tab-panel';
+import '../../kemet-icon/kemet-icon';
 declare const meta: Meta;
 export default meta;
 declare type Story = StoryObj;
 export declare const Standard: Story;
+export declare const Text: Story;
+export declare const Circle: Story;
+export declare const Rounded: Story;
+export declare const Pill: Story;
+export declare const Outlined: Story;
+export declare const OutlinedRounded: Story;
+export declare const OutlinedPill: Story;
+export declare const IconLeft: Story;
+export declare const IconRight: Story;
+export declare const Link: Story;
+export declare const Disabled: Story;

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

@@ -4,30 +4,12 @@ import '../kemet-button';
 import '../../kemet-tabs/kemet-tabs';
 import '../../kemet-tabs/kemet-tab';
 import '../../kemet-tabs/kemet-tab-panel';
+import '../../kemet-icon/kemet-icon';
 const meta = {
     title: 'Components / Button',
     component: 'kemet-button',
-};
-export default meta;
-const Template = ({ type = 'standard', outlined = false, iconLeft = '', iconRight = 'gear', link = '', disabled = false, }) => html `
-  <kemet-button type="${type}" ?outlined=${outlined} ?disabled=${disabled} link=${ifDefined(link !== '' ? link : undefined)}>
-    ${ifDefined(iconLeft !== '' && type !== 'circle' ? html `<kemet-icon slot="left" icon="${iconLeft}"></kemet-icon>` : undefined)}
-    ${type === 'circle' ? html `<kemet-icon icon="gear" size="24"></kemet-icon>` : 'Button'}
-    ${ifDefined(iconRight !== '' && type !== 'circle' ? html `<kemet-icon slot="right" icon="${iconRight}"></kemet-icon>` : undefined)}
-  </kemet-button>
-`;
-export const Standard = {
-    render: args => Template(args),
-    args: {
-        type: 'standard',
-        outlined: false,
-        iconLeft: '',
-        iconRight: 'gear',
-        link: '',
-        disabled: false,
-    },
     argTypes: {
-        type: {
+        variant: {
             control: { type: 'select' },
             options: ['standard', 'text', 'circle', 'rounded', 'pill'],
         },
@@ -48,4 +30,83 @@ export const Standard = {
         },
     }
 };
+export default meta;
+const Template = (args) => html `
+  <kemet-button variant="${ifDefined(args.variant)}" ?outlined=${args.outlined} ?disabled=${args.disabled} link=${ifDefined(args.link !== '' ? args.link : undefined)}>
+    ${ifDefined(args.iconLeft !== '' && args.type !== 'circle' && args.iconLeft ? html `<kemet-icon slot="left" icon="${args.iconLeft}"></kemet-icon>` : undefined)}
+    ${args.variant === 'circle' ? html `<kemet-icon icon="gear" size="24"></kemet-icon>` : 'Button'}
+    ${ifDefined(args.iconRight !== '' && args.variant !== 'circle' && args.iconRight ? html `<kemet-icon slot="right" icon="${args.iconRight}"></kemet-icon>` : undefined)}
+  </kemet-button>
+`;
+export const Standard = {
+    render: args => Template(args),
+};
+export const Text = {
+    render: args => Template(args),
+    args: {
+        variant: 'text',
+    },
+};
+export const Circle = {
+    render: args => Template(args),
+    args: {
+        variant: 'circle',
+    },
+};
+export const Rounded = {
+    render: args => Template(args),
+    args: {
+        variant: 'rounded',
+    },
+};
+export const Pill = {
+    render: args => Template(args),
+    args: {
+        variant: 'pill',
+    },
+};
+export const Outlined = {
+    render: args => Template(args),
+    args: {
+        outlined: true,
+    },
+};
+export const OutlinedRounded = {
+    render: args => Template(args),
+    args: {
+        outlined: true,
+        variant: 'rounded',
+    },
+};
+export const OutlinedPill = {
+    render: args => Template(args),
+    args: {
+        outlined: true,
+        variant: 'pill',
+    },
+};
+export const IconLeft = {
+    render: args => Template(args),
+    args: {
+        iconLeft: 'chevron-left',
+    },
+};
+export const IconRight = {
+    render: args => Template(args),
+    args: {
+        iconRight: 'chevron-right',
+    },
+};
+export const Link = {
+    render: args => Template(args),
+    args: {
+        link: 'https://google.com',
+    },
+};
+export const Disabled = {
+    render: args => Template(args),
+    args: {
+        disabled: true,
+    },
+};
 //# sourceMappingURL=stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-button/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,IAAI,GAAG,UAAU,EACjB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,EAAE,EACb,SAAS,GAAG,MAAM,EAClB,IAAI,GAAG,EAAE,EACT,QAAQ,GAAG,KAAK,GACjB,EAAE,EAAE,CAAC,IAAI,CAAA;wBACc,IAAI,eAAe,QAAQ,cAAc,QAAQ,SAAS,SAAS,CAAC,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;MACrH,SAAS,CAAC,QAAQ,KAAK,EAAE,IAAI,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,iCAAiC,QAAQ,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC;MAC5H,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,iDAAiD,CAAC,CAAC,CAAC,QAAQ;MACpF,SAAS,CAAC,SAAS,KAAK,EAAE,IAAI,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,kCAAkC,SAAS,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC;;CAEpI,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU;QAChB,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,EAAE;QACZ,SAAS,EAAE,MAAM;QACjB,IAAI,EAAE,EAAE;QACR,QAAQ,EAAE,KAAK;KAChB;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC;SAC3D;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,SAAS,EAAE;YACT,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;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-button';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Button',\n  component: 'kemet-button',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n  type = 'standard',\n  outlined = false,\n  iconLeft = '',\n  iconRight = 'gear',\n  link = '',\n  disabled = false,\n}) => html`\n  <kemet-button type=\"${type}\" ?outlined=${outlined} ?disabled=${disabled} link=${ifDefined(link !== '' ? link : undefined)}>\n    ${ifDefined(iconLeft !== '' && type !== 'circle' ? html`<kemet-icon slot=\"left\" icon=\"${iconLeft}\"></kemet-icon>` : undefined)}\n    ${type === 'circle' ? html`<kemet-icon icon=\"gear\" size=\"24\"></kemet-icon>` : 'Button'}\n    ${ifDefined(iconRight !== '' && type !== 'circle' ? html`<kemet-icon slot=\"right\" icon=\"${iconRight}\"></kemet-icon>` : undefined)}\n  </kemet-button>\n`;\n\nexport const Standard: Story = {\n  render: args => Template(args),\n  args: {\n    type: 'standard',\n    outlined: false,\n    iconLeft: '',\n    iconRight: 'gear',\n    link: '',\n    disabled: false,\n  },\n  argTypes: {\n    type: {\n      control: { type: 'select' },\n      options: ['standard', 'text', 'circle', 'rounded', 'pill'],\n    },\n    outlined: {\n      control: { type: 'boolean' },\n    },\n    iconLeft: {\n      control: { type: 'text' },\n    },\n    iconRight: {\n      control: { type: 'text' },\n    },\n    link: {\n      control: { type: 'text' },\n    },\n    disabled: {\n      control: { type: 'boolean' },\n    },\n  }\n};\n"]}
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-button/docs/stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-button';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nimport '../../kemet-icon/kemet-icon';\n\nconst meta: Meta = {\n  title: 'Components / Button',\n  component: 'kemet-button',\n  argTypes: {\n    variant: {\n      control: { type: 'select' },\n      options: ['standard', 'text', 'circle', 'rounded', 'pill'],\n    },\n    outlined: {\n      control: { type: 'boolean' },\n    },\n    iconLeft: {\n      control: { type: 'text' },\n    },\n    iconRight: {\n      control: { type: 'text' },\n    },\n    link: {\n      control: { type: 'text' },\n    },\n    disabled: {\n      control: { type: 'boolean' },\n    },\n  }\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => html`\n  <kemet-button variant=\"${ifDefined(args.variant)}\" ?outlined=${args.outlined} ?disabled=${args.disabled} link=${ifDefined(args.link !== '' ? args.link : undefined)}>\n    ${ifDefined(args.iconLeft !== '' && args.type !== 'circle' && args.iconLeft ? html`<kemet-icon slot=\"left\" icon=\"${args.iconLeft}\"></kemet-icon>` : undefined)}\n    ${args.variant === 'circle' ? html`<kemet-icon icon=\"gear\" size=\"24\"></kemet-icon>` : 'Button'}\n    ${ifDefined(args.iconRight !== '' && args.variant !== 'circle' && args.iconRight ? html`<kemet-icon slot=\"right\" icon=\"${args.iconRight}\"></kemet-icon>` : undefined)}\n  </kemet-button>\n`;\n\n\nexport const Standard: Story = {\n  render: args => Template(args),\n};\n\nexport const Text: Story = {\n  render: args => Template(args),\n  args: {\n    variant: 'text',\n  },\n};\n\nexport const Circle: Story = {\n  render: args => Template(args),\n  args: {\n    variant: 'circle',\n  },\n};\n\nexport const Rounded: Story = {\n  render: args => Template(args),\n  args: {\n    variant: 'rounded',\n  },\n};\n\nexport const Pill: Story = {\n  render: args => Template(args),\n  args: {\n    variant: 'pill',\n  },\n};\n\nexport const Outlined: Story = {\n  render: args => Template(args),\n  args: {\n    outlined: true,\n  },\n};\n\nexport const OutlinedRounded: Story = {\n  render: args => Template(args),\n  args: {\n    outlined: true,\n    variant: 'rounded',\n  },\n};\n\nexport const OutlinedPill: Story = {\n  render: args => Template(args),\n  args: {\n    outlined: true,\n    variant: 'pill',\n  },\n};\n\nexport const IconLeft: Story = {\n  render: args => Template(args),\n  args: {\n    iconLeft: 'chevron-left',\n  },\n};\n\nexport const IconRight: Story = {\n  render: args => Template(args),\n  args: {\n    iconRight: 'chevron-right',\n  },\n};\n\nexport const Link: Story = {\n  render: args => Template(args),\n  args: {\n    link: 'https://google.com',\n  },\n};\n\nexport const Disabled: Story = {\n  render: args => Template(args),\n  args: {\n    disabled: true,\n  },\n};\n"]}

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

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import { TypeType } from './types';
+import { TypeVariant } from './types';
 import { FormSubmitController } from '../../utilities/controllers/forms';
 import '../kemet-icon/kemet-icon';
 /**
@@ -15,31 +15,31 @@ import '../kemet-icon/kemet-icon';
  * @prop {string} link - The url a button should link too
  * @prop {boolean} outlined - Outline style for a button
  * @prop {boolean} disabled - Determines whether not a button is disabled
- * @prop {string} type - Controls the type of button. standard | text | circle | rounded | pill
+ * @prop {string} variant - Controls the type of button. standard | text | circle | rounded | pill
  *
  * @slot left - Allows you to place an icon to the left of the button text.
  * @slot right - Allows you to place an icon to the right of the button text.
  *
  * @csspart button - The button or anchor element.
  *
- * @cssproperty --kemet-button-font-size - The font size. Default: inherit.
- * @cssproperty --kemet-button-color - The text color. Default: --kemet-color-foreground.
- * @cssproperty --kemet-button-width - The width. Default: auto.
- * @cssproperty --kemet-button-height - The height. Default:  auto.
- * @cssproperty --kemet-button-border - The border. Default: 0.
- * @cssproperty --kemet-button-border-radius - The border radius. Default: 0.
- * @cssproperty --kemet-button-transition-speed - The transition speed of the hover effect. Default: 300ms.
- * @cssproperty --kemet-button-background-color - The background color. Default: --kemet-color-background.
- * @cssproperty --kemet-button-hover-brightness - The brightness of the hover effect. Default: 1.25.
- * @cssproperty --kemet-button-gap - The gap between the button and icons. Default: 0.5rem.
- * @cssproperty --kemet-button-padding - The button padding. Default: 1rem 1.25rem.
- * @cssproperty --kemet-button-hover-decoration - The decoration for a text button's hover. Default: underline.
- * @cssproperty --kemet-button-circle-size - The diameter of a circle button. Default: 50px.
- * @cssproperty --kemet-button-rounded-amount - The border radius of the rounded button. Default: 6px.
- * @cssproperty --kemet-button-border-width - The width of the outline border. Default: 1px.
- * @cssproperty --kemet-button-border-style - The style of the outline border. Default: solid.
- * @cssproperty --kemet-button-border-color - The color of the outline border. Default: --kemet-color-primary.
- * @cssproperty --kemet-button-disabled-opacity - The opacity of the disabled state. Default: 0.5.
+ * @cssproperty --kemet-button-font-size - The font size.
+ * @cssproperty --kemet-button-color - The text color.
+ * @cssproperty --kemet-button-width - The width.
+ * @cssproperty --kemet-button-height - The height.
+ * @cssproperty --kemet-button-border - The border.
+ * @cssproperty --kemet-button-border-radius - The border radius.
+ * @cssproperty --kemet-button-transition-speed - The transition speed of the hover effect.
+ * @cssproperty --kemet-button-background-color - The background color.
+ * @cssproperty --kemet-button-hover-brightness - The brightness of the hover effect.
+ * @cssproperty --kemet-button-gap - The gap between the button and icons.
+ * @cssproperty --kemet-button-padding - The button padding.
+ * @cssproperty --kemet-button-hover-decoration - The decoration for a text button's hover.
+ * @cssproperty --kemet-button-circle-size - The diameter of a circle button.
+ * @cssproperty --kemet-button-rounded-amount - The border radius of the rounded button.
+ * @cssproperty --kemet-button-border-width - The width of the outline border.
+ * @cssproperty --kemet-button-border-style - The style of the outline border.
+ * @cssproperty --kemet-button-border-color - The color of the outline border.
+ * @cssproperty --kemet-button-disabled-opacity - The opacity of the disabled state.
  *
  */
 export default class KemetButton extends LitElement {
@@ -52,7 +52,7 @@ export default class KemetButton extends LitElement {
     link: string;
     outlined: boolean;
     disabled: boolean;
-    type: TypeType;
+    variant: TypeVariant;
     constructor();
     render(): import("lit-html").TemplateResult<1>;
     /**

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

@@ -17,31 +17,31 @@ import '../kemet-icon/kemet-icon';
  * @prop {string} link - The url a button should link too
  * @prop {boolean} outlined - Outline style for a button
  * @prop {boolean} disabled - Determines whether not a button is disabled
- * @prop {string} type - Controls the type of button. standard | text | circle | rounded | pill
+ * @prop {string} variant - Controls the type of button. standard | text | circle | rounded | pill
  *
  * @slot left - Allows you to place an icon to the left of the button text.
  * @slot right - Allows you to place an icon to the right of the button text.
  *
  * @csspart button - The button or anchor element.
  *
- * @cssproperty --kemet-button-font-size - The font size. Default: inherit.
- * @cssproperty --kemet-button-color - The text color. Default: --kemet-color-foreground.
- * @cssproperty --kemet-button-width - The width. Default: auto.
- * @cssproperty --kemet-button-height - The height. Default:  auto.
- * @cssproperty --kemet-button-border - The border. Default: 0.
- * @cssproperty --kemet-button-border-radius - The border radius. Default: 0.
- * @cssproperty --kemet-button-transition-speed - The transition speed of the hover effect. Default: 300ms.
- * @cssproperty --kemet-button-background-color - The background color. Default: --kemet-color-background.
- * @cssproperty --kemet-button-hover-brightness - The brightness of the hover effect. Default: 1.25.
- * @cssproperty --kemet-button-gap - The gap between the button and icons. Default: 0.5rem.
- * @cssproperty --kemet-button-padding - The button padding. Default: 1rem 1.25rem.
- * @cssproperty --kemet-button-hover-decoration - The decoration for a text button's hover. Default: underline.
- * @cssproperty --kemet-button-circle-size - The diameter of a circle button. Default: 50px.
- * @cssproperty --kemet-button-rounded-amount - The border radius of the rounded button. Default: 6px.
- * @cssproperty --kemet-button-border-width - The width of the outline border. Default: 1px.
- * @cssproperty --kemet-button-border-style - The style of the outline border. Default: solid.
- * @cssproperty --kemet-button-border-color - The color of the outline border. Default: --kemet-color-primary.
- * @cssproperty --kemet-button-disabled-opacity - The opacity of the disabled state. Default: 0.5.
+ * @cssproperty --kemet-button-font-size - The font size.
+ * @cssproperty --kemet-button-color - The text color.
+ * @cssproperty --kemet-button-width - The width.
+ * @cssproperty --kemet-button-height - The height.
+ * @cssproperty --kemet-button-border - The border.
+ * @cssproperty --kemet-button-border-radius - The border radius.
+ * @cssproperty --kemet-button-transition-speed - The transition speed of the hover effect.
+ * @cssproperty --kemet-button-background-color - The background color.
+ * @cssproperty --kemet-button-hover-brightness - The brightness of the hover effect.
+ * @cssproperty --kemet-button-gap - The gap between the button and icons.
+ * @cssproperty --kemet-button-padding - The button padding.
+ * @cssproperty --kemet-button-hover-decoration - The decoration for a text button's hover.
+ * @cssproperty --kemet-button-circle-size - The diameter of a circle button.
+ * @cssproperty --kemet-button-rounded-amount - The border radius of the rounded button.
+ * @cssproperty --kemet-button-border-width - The width of the outline border.
+ * @cssproperty --kemet-button-border-style - The style of the outline border.
+ * @cssproperty --kemet-button-border-color - The color of the outline border.
+ * @cssproperty --kemet-button-disabled-opacity - The opacity of the disabled state.
  *
  */
 let KemetButton = class KemetButton extends LitElement {
@@ -49,7 +49,7 @@ let KemetButton = class KemetButton extends LitElement {
         super();
         this.outlined = false;
         this.disabled = false;
-        this.type = 'standard';
+        this.variant = 'standard';
         this.addEventListener('click', this.handleClick.bind(this));
         this.addEventListener('mouseover', this.handleMouseOver.bind(this));
         this.addEventListener('mouseout', this.handleMouseOut.bind(this));
@@ -144,8 +144,8 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], KemetButton.prototype, "disabled", void 0);
 __decorate([
-    property({ type: String, reflect: true })
-], KemetButton.prototype, "type", void 0);
+    property({ reflect: true })
+], KemetButton.prototype, "variant", void 0);
 KemetButton = __decorate([
     customElement('kemet-button')
 ], KemetButton);

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

@@ -1 +1 @@
-{"version":3,"file":"kemet-button.js","sourceRoot":"","sources":["../../../src/components/kemet-button/kemet-button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,0BAA0B,CAAC;AAElC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAGH,IAAqB,WAAW,GAAhC,MAAqB,WAAY,SAAQ,UAAU;IA2BjD;QACE,KAAK,EAAE,CAAC;QATV,aAAQ,GAAY,KAAK,CAAC;QAG1B,aAAQ,GAAY,KAAK,CAAC;QAG1B,SAAI,GAAa,UAAU,CAAC;QAK1B,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC5D,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QACpE,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAClE,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC1D,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC;QAEjE,gBAAgB;QAChB,IAAI,CAAC,oBAAoB,GAAG,IAAI,oBAAoB,CAAC,IAAI,CAAC,CAAC;IAC7D,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,OAAO,IAAI,CAAA;kBACC,IAAI,CAAC,IAAI;;;;;OAKpB,CAAC;SACH;QAED,OAAO,IAAI,CAAA;uDACwC,IAAI,CAAC,QAAQ,kBAAkB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;;;;;KAKjH,CAAC;IACJ,CAAC;IAED;;;OAGG;IACH,eAAe;QACb,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;IACpB,CAAC;IAED;;;OAGG;IACH,cAAc;QACZ,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACrB,CAAC;IAED;;;OAGG;IACH,WAAW;QACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QAEnB,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC,EAAE,GAAG,CAAC,CAAC;QAER,IAAI,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE;YAC3C,IAAI,CAAC,oBAAoB,CAAC,MAAM,EAAE,CAAC;SACpC;IACH,CAAC;IAED;;;OAGG;IACH,UAAU;QACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACrB,CAAC;IAED;;;;OAIG;IACH,WAAW,CAAC,KAAK;QACf,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;YACvB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;SACrB;IACH,CAAC;CACF,CAAA;AA7GQ,kBAAM,GAAG,CAAC,UAAU,CAAC,CAAC;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAC3B;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAC5B;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACjB;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACjB;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCACd;AAzBT,WAAW;IAD/B,aAAa,CAAC,cAAc,CAAC;GACT,WAAW,CAiH/B;eAjHoB,WAAW","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { TypeType } from './types';\nimport { stylesBase } from './styles';\nimport { FormSubmitController } from '../../utilities/controllers/forms';\nimport '../kemet-icon/kemet-icon';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-button\n * @summary A versatile button that can be used either to submit a form, trigger an action, or link to content.\n *\n * @prop {boolean} active - Determines whether or not the button is active\n * @prop {boolean} hover - Is true when the button is hovered\n * @prop {boolean} focused - Is true when the button is focused\n * @prop {string} link - The url a button should link too\n * @prop {boolean} outlined - Outline style for a button\n * @prop {boolean} disabled - Determines whether not a button is disabled\n * @prop {string} type - Controls the type of button. standard | text | circle | rounded | pill\n *\n * @slot left - Allows you to place an icon to the left of the button text.\n * @slot right - Allows you to place an icon to the right of the button text.\n *\n * @csspart button - The button or anchor element.\n *\n * @cssproperty --kemet-button-font-size - The font size. Default: inherit.\n * @cssproperty --kemet-button-color - The text color. Default: --kemet-color-foreground.\n * @cssproperty --kemet-button-width - The width. Default: auto.\n * @cssproperty --kemet-button-height - The height. Default:  auto.\n * @cssproperty --kemet-button-border - The border. Default: 0.\n * @cssproperty --kemet-button-border-radius - The border radius. Default: 0.\n * @cssproperty --kemet-button-transition-speed - The transition speed of the hover effect. Default: 300ms.\n * @cssproperty --kemet-button-background-color - The background color. Default: --kemet-color-background.\n * @cssproperty --kemet-button-hover-brightness - The brightness of the hover effect. Default: 1.25.\n * @cssproperty --kemet-button-gap - The gap between the button and icons. Default: 0.5rem.\n * @cssproperty --kemet-button-padding - The button padding. Default: 1rem 1.25rem.\n * @cssproperty --kemet-button-hover-decoration - The decoration for a text button's hover. Default: underline.\n * @cssproperty --kemet-button-circle-size - The diameter of a circle button. Default: 50px.\n * @cssproperty --kemet-button-rounded-amount - The border radius of the rounded button. Default: 6px.\n * @cssproperty --kemet-button-border-width - The width of the outline border. Default: 1px.\n * @cssproperty --kemet-button-border-style - The style of the outline border. Default: solid.\n * @cssproperty --kemet-button-border-color - The color of the outline border. Default: --kemet-color-primary.\n * @cssproperty --kemet-button-disabled-opacity - The opacity of the disabled state. Default: 0.5.\n *\n */\n\n@customElement('kemet-button')\nexport default class KemetButton extends LitElement {\n  /** @internal */\n  formSubmitController: FormSubmitController;\n\n  static styles = [stylesBase];\n\n  @property({ type: Boolean, reflect: true })\n  active: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  hover: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  focused: boolean;\n\n  @property({ type: String })\n  link: string;\n\n  @property({ type: Boolean, reflect: true })\n  outlined: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  @property({ type: String, reflect: true })\n  type: TypeType = 'standard';\n\n  constructor() {\n    super();\n\n    this.addEventListener('click', this.handleClick.bind(this));\n    this.addEventListener('mouseover', this.handleMouseOver.bind(this));\n    this.addEventListener('mouseout', this.handleMouseOut.bind(this));\n    this.addEventListener('blur', this.handleBlur.bind(this));\n    this.addEventListener('keyup', event => this.handleKeyUp(event));\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n  }\n\n  render() {\n    if (this.link && !this.disabled) {\n      return html`\n        <a href=${this.link} class=\"button\" role=\"button\" part=\"button\">\n          <slot name=\"left\"></slot>\n          <slot></slot>\n          <slot name=\"right\"></slot>\n        </a>\n      `;\n    }\n\n    return html`\n      <button class=\"button\" part=\"button\" ?disabled=${this.disabled} aria-disabled=${this.disabled ? 'true' : 'false'}>\n        <slot name=\"left\"></slot>\n        <slot></slot>\n        <slot name=\"right\"></slot>\n      </button>\n    `;\n  }\n\n  /**\n   * Sets hover to true onMouseOver\n   * @private\n   */\n  handleMouseOver() {\n    this.hover = true;\n  }\n\n  /**\n   * Sets hover to false onMouseOut\n   * @private\n   */\n  handleMouseOut() {\n    this.hover = false;\n  }\n\n  /**\n   * Handles click behavior\n   * @private\n   */\n  handleClick() {\n    this.hover = false;\n    this.active = true;\n\n    setTimeout(() => {\n      this.active = false;\n    }, 300);\n\n    if (this.shadowRoot.querySelector('button')) {\n      this.formSubmitController.submit();\n    }\n  }\n\n  /**\n   * Handles blur\n   * @private\n   */\n  handleBlur() {\n    this.focused = false;\n    this.active = false;\n    this.hover = false;\n  }\n\n  /**\n   * Handles keyup\n   * @private\n   * @param {object} event - event object\n   */\n  handleKeyUp(event) {\n    if (event.key === 'Tab') {\n      this.focused = true;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-button': KemetButton\n  }\n}\n"]}
+{"version":3,"file":"kemet-button.js","sourceRoot":"","sources":["../../../src/components/kemet-button/kemet-button.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { TypeVariant } from './types';\nimport { stylesBase } from './styles';\nimport { FormSubmitController } from '../../utilities/controllers/forms';\nimport '../kemet-icon/kemet-icon';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-button\n * @summary A versatile button that can be used either to submit a form, trigger an action, or link to content.\n *\n * @prop {boolean} active - Determines whether or not the button is active\n * @prop {boolean} hover - Is true when the button is hovered\n * @prop {boolean} focused - Is true when the button is focused\n * @prop {string} link - The url a button should link too\n * @prop {boolean} outlined - Outline style for a button\n * @prop {boolean} disabled - Determines whether not a button is disabled\n * @prop {string} variant - Controls the type of button. standard | text | circle | rounded | pill\n *\n * @slot left - Allows you to place an icon to the left of the button text.\n * @slot right - Allows you to place an icon to the right of the button text.\n *\n * @csspart button - The button or anchor element.\n *\n * @cssproperty --kemet-button-font-size - The font size.\n * @cssproperty --kemet-button-color - The text color.\n * @cssproperty --kemet-button-width - The width.\n * @cssproperty --kemet-button-height - The height.\n * @cssproperty --kemet-button-border - The border.\n * @cssproperty --kemet-button-border-radius - The border radius.\n * @cssproperty --kemet-button-transition-speed - The transition speed of the hover effect.\n * @cssproperty --kemet-button-background-color - The background color.\n * @cssproperty --kemet-button-hover-brightness - The brightness of the hover effect.\n * @cssproperty --kemet-button-gap - The gap between the button and icons.\n * @cssproperty --kemet-button-padding - The button padding.\n * @cssproperty --kemet-button-hover-decoration - The decoration for a text button's hover.\n * @cssproperty --kemet-button-circle-size - The diameter of a circle button.\n * @cssproperty --kemet-button-rounded-amount - The border radius of the rounded button.\n * @cssproperty --kemet-button-border-width - The width of the outline border.\n * @cssproperty --kemet-button-border-style - The style of the outline border.\n * @cssproperty --kemet-button-border-color - The color of the outline border.\n * @cssproperty --kemet-button-disabled-opacity - The opacity of the disabled state.\n *\n */\n\n@customElement('kemet-button')\nexport default class KemetButton extends LitElement {\n  /** @internal */\n  formSubmitController: FormSubmitController;\n\n  static styles = [stylesBase];\n\n  @property({ type: Boolean, reflect: true })\n  active: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  hover: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  focused: boolean;\n\n  @property({ type: String })\n  link: string;\n\n  @property({ type: Boolean, reflect: true })\n  outlined: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  @property({ reflect: true })\n  variant: TypeVariant = 'standard';\n\n  constructor() {\n    super();\n\n    this.addEventListener('click', this.handleClick.bind(this));\n    this.addEventListener('mouseover', this.handleMouseOver.bind(this));\n    this.addEventListener('mouseout', this.handleMouseOut.bind(this));\n    this.addEventListener('blur', this.handleBlur.bind(this));\n    this.addEventListener('keyup', event => this.handleKeyUp(event));\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n  }\n\n  render() {\n    if (this.link && !this.disabled) {\n      return html`\n        <a href=${this.link} class=\"button\" role=\"button\" part=\"button\">\n          <slot name=\"left\"></slot>\n          <slot></slot>\n          <slot name=\"right\"></slot>\n        </a>\n      `;\n    }\n\n    return html`\n      <button class=\"button\" part=\"button\" ?disabled=${this.disabled} aria-disabled=${this.disabled ? 'true' : 'false'}>\n        <slot name=\"left\"></slot>\n        <slot></slot>\n        <slot name=\"right\"></slot>\n      </button>\n    `;\n  }\n\n  /**\n   * Sets hover to true onMouseOver\n   * @private\n   */\n  handleMouseOver() {\n    this.hover = true;\n  }\n\n  /**\n   * Sets hover to false onMouseOut\n   * @private\n   */\n  handleMouseOut() {\n    this.hover = false;\n  }\n\n  /**\n   * Handles click behavior\n   * @private\n   */\n  handleClick() {\n    this.hover = false;\n    this.active = true;\n\n    setTimeout(() => {\n      this.active = false;\n    }, 300);\n\n    if (this.shadowRoot.querySelector('button')) {\n      this.formSubmitController.submit();\n    }\n  }\n\n  /**\n   * Handles blur\n   * @private\n   */\n  handleBlur() {\n    this.focused = false;\n    this.active = false;\n    this.hover = false;\n  }\n\n  /**\n   * Handles keyup\n   * @private\n   * @param {object} event - event object\n   */\n  handleKeyUp(event) {\n    if (event.key === 'Tab') {\n      this.focused = true;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-button': KemetButton\n  }\n}\n"]}

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

@@ -1,38 +1,58 @@
 import { css } from 'lit';
 export const stylesBase = css `
   :host {
+    --kemet-button-font-size: inherit;
+    --kemet-button-color: rgb(var(--kemet-color-background));
+    --kemet-button-width: auto;
+    --kemet-button-height: auto;
+    --kemet-button-border: 0;
+    --kemet-button-border-radius: 0;
+    --kemet-button-transition-speed: 300ms;
+    --kemet-button-background-color: rgb(var(--kemet-color-foreground));
+    --kemet-button-hover-brightness: 1.25;
+    --kemet-button-disabled-opacity: 0.5;
+    --kemet-button-gap: 0.5rem;
+    --kemet-button-padding: 1rem 1.25rem;
+    --kemet-button-hover-decoration: underline;
+    --kemet-button-circle-size: 50px;
+    --kemet-button-rounded-amount: 6px;
+    --kemet-button-border-width: 1.5px;
+    --kemet-button-border-style: solid;
+    --kemet-button-border-color: rgb(var(--kemet-color-foreground));
+
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    font-size: var(--kemet-button-font-size, inherit);
-    color: var(--kemet-button-color, var(--kemet-color-foreground));
-    width: var(--kemet-button-width, auto);
-    height: var(--kemet-button-height, auto);
-    border: var(--kemet-button-border, 0);
-    border-radius: var(--kemet-button-border-radius, 0);
-    transition: filter var(--kemet-button-transition-speed, 300ms) ease;
-    background-color: var(--kemet-button-background-color, var(--kemet-color-background));
+    font-size: var(--kemet-button-font-size);
+    color: var(--kemet-button-color);
+    width: var(--kemet-button-width);
+    height: var(--kemet-button-height);
+    border: var(--kemet-button-border);
+    border-radius: var(--kemet-button-border-radius);
+    transition: filter var(--kemet-button-transition-speed) ease;
+    background-color: var(--kemet-button-background-color);
   }
 
   :host(:hover:not([disabled])) {
-    filter: brightness(var(--kemet-button-hover-brightness, 1.25));
+    filter: brightness(var(--kemet-button-hover-brightness));
   }
 
   :host([disabled]) {
-    opacity: var(--kemet-button-disabled-opacity, 0.5);
+    opacity: var(--kemet-button-disabled-opacity);
   }
 
   .button {
     cursor: pointer;
     text-decoration: none;
     display: flex;
-    gap: var(--kemet-button-gap, 0.5rem);
+    gap: var(--kemet-button-gap);
     align-items: center;
+    justify-content: center;
     color: inherit;
     font-size: inherit;
     width: 100%;
-    padding: var(--kemet-button-padding, 1rem 1.25rem);
+    padding: var(--kemet-button-padding);
     border: 0;
     background: none;
   }
@@ -41,33 +61,33 @@ export const stylesBase = css `
     cursor: not-allowed;
   }
 
-  :host([type='text']) {
-    --kemet-button-color: var(--kemet-color-text);
+  :host([variant='text']) {
+    --kemet-button-color: rgb(var(--kemet-color-text));
     --kemet-button-background-color: none;
   }
 
-  :host([type='text']:hover) {
-    text-decoration: var(--kemet-button-hover-decoration, underline);
+  :host([variant='text']:hover) {
+    text-decoration: var(--kemet-button-hover-decoration);
   }
 
-  :host([type='circle']) {
-    --kemet-button-border-radius: 50%;
-    --kemet-button-width: var(--kemet-button-circle-size, 50px);
-    --kemet-button-height: var(--kemet-button-circle-size, 50px);
+  :host([variant='circle']) {
+    --kemet-button-border-radius: var(--kemet-border-radius-circle);
+    --kemet-button-width: var(--kemet-button-circle-size);
+    --kemet-button-height: var(--kemet-button-circle-size);
   }
 
-  :host([type='rounded']) {
-    --kemet-button-border-radius: var(--kemet-button-rounded-amount, 6px);
+  :host([variant='rounded']) {
+    --kemet-button-border-radius: var(--kemet-button-rounded-amount);
   }
 
-  :host([type='pill']) {
-    --kemet-button-border-radius: 10rem;
+  :host([variant='pill']) {
+    --kemet-button-border-radius: var(--kemet-border-radius-pill);
   }
 
   :host([outlined]) {
-    --kemet-button-color: var(--kemet-color-background);
+    --kemet-button-color: rgb(var(--kemet-color-foreground));
     --kemet-button-background-color: transparent;
-    --kemet-button-border: var(--kemet-button-border-width, 1px) var(--kemet-button-border-style, solid) var(--kemet-button-border-color, var(--kemet-color-background));
+    --kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--kemet-button-border-color);
   }
 `;
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsE5B,CAAA","sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase = css`\n  :host {\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--kemet-button-font-size, inherit);\n    color: var(--kemet-button-color, var(--kemet-color-foreground));\n    width: var(--kemet-button-width, auto);\n    height: var(--kemet-button-height, auto);\n    border: var(--kemet-button-border, 0);\n    border-radius: var(--kemet-button-border-radius, 0);\n    transition: filter var(--kemet-button-transition-speed, 300ms) ease;\n    background-color: var(--kemet-button-background-color, var(--kemet-color-background));\n  }\n\n  :host(:hover:not([disabled])) {\n    filter: brightness(var(--kemet-button-hover-brightness, 1.25));\n  }\n\n  :host([disabled]) {\n    opacity: var(--kemet-button-disabled-opacity, 0.5);\n  }\n\n  .button {\n    cursor: pointer;\n    text-decoration: none;\n    display: flex;\n    gap: var(--kemet-button-gap, 0.5rem);\n    align-items: center;\n    color: inherit;\n    font-size: inherit;\n    width: 100%;\n    padding: var(--kemet-button-padding, 1rem 1.25rem);\n    border: 0;\n    background: none;\n  }\n\n  :host([disabled]) .button {\n    cursor: not-allowed;\n  }\n\n  :host([type='text']) {\n    --kemet-button-color: var(--kemet-color-text);\n    --kemet-button-background-color: none;\n  }\n\n  :host([type='text']:hover) {\n    text-decoration: var(--kemet-button-hover-decoration, underline);\n  }\n\n  :host([type='circle']) {\n    --kemet-button-border-radius: 50%;\n    --kemet-button-width: var(--kemet-button-circle-size, 50px);\n    --kemet-button-height: var(--kemet-button-circle-size, 50px);\n  }\n\n  :host([type='rounded']) {\n    --kemet-button-border-radius: var(--kemet-button-rounded-amount, 6px);\n  }\n\n  :host([type='pill']) {\n    --kemet-button-border-radius: 10rem;\n  }\n\n  :host([outlined]) {\n    --kemet-button-color: var(--kemet-color-background);\n    --kemet-button-background-color: transparent;\n    --kemet-button-border: var(--kemet-button-border-width, 1px) var(--kemet-button-border-style, solid) var(--kemet-button-border-color, var(--kemet-color-background));\n  }\n`\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0F5B,CAAA","sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase = css`\n  :host {\n    --kemet-button-font-size: inherit;\n    --kemet-button-color: rgb(var(--kemet-color-background));\n    --kemet-button-width: auto;\n    --kemet-button-height: auto;\n    --kemet-button-border: 0;\n    --kemet-button-border-radius: 0;\n    --kemet-button-transition-speed: 300ms;\n    --kemet-button-background-color: rgb(var(--kemet-color-foreground));\n    --kemet-button-hover-brightness: 1.25;\n    --kemet-button-disabled-opacity: 0.5;\n    --kemet-button-gap: 0.5rem;\n    --kemet-button-padding: 1rem 1.25rem;\n    --kemet-button-hover-decoration: underline;\n    --kemet-button-circle-size: 50px;\n    --kemet-button-rounded-amount: 6px;\n    --kemet-button-border-width: 1.5px;\n    --kemet-button-border-style: solid;\n    --kemet-button-border-color: rgb(var(--kemet-color-foreground));\n\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--kemet-button-font-size);\n    color: var(--kemet-button-color);\n    width: var(--kemet-button-width);\n    height: var(--kemet-button-height);\n    border: var(--kemet-button-border);\n    border-radius: var(--kemet-button-border-radius);\n    transition: filter var(--kemet-button-transition-speed) ease;\n    background-color: var(--kemet-button-background-color);\n  }\n\n  :host(:hover:not([disabled])) {\n    filter: brightness(var(--kemet-button-hover-brightness));\n  }\n\n  :host([disabled]) {\n    opacity: var(--kemet-button-disabled-opacity);\n  }\n\n  .button {\n    cursor: pointer;\n    text-decoration: none;\n    display: flex;\n    gap: var(--kemet-button-gap);\n    align-items: center;\n    justify-content: center;\n    color: inherit;\n    font-size: inherit;\n    width: 100%;\n    padding: var(--kemet-button-padding);\n    border: 0;\n    background: none;\n  }\n\n  :host([disabled]) .button {\n    cursor: not-allowed;\n  }\n\n  :host([variant='text']) {\n    --kemet-button-color: rgb(var(--kemet-color-text));\n    --kemet-button-background-color: none;\n  }\n\n  :host([variant='text']:hover) {\n    text-decoration: var(--kemet-button-hover-decoration);\n  }\n\n  :host([variant='circle']) {\n    --kemet-button-border-radius: var(--kemet-border-radius-circle);\n    --kemet-button-width: var(--kemet-button-circle-size);\n    --kemet-button-height: var(--kemet-button-circle-size);\n  }\n\n  :host([variant='rounded']) {\n    --kemet-button-border-radius: var(--kemet-button-rounded-amount);\n  }\n\n  :host([variant='pill']) {\n    --kemet-button-border-radius: var(--kemet-border-radius-pill);\n  }\n\n  :host([outlined]) {\n    --kemet-button-color: rgb(var(--kemet-color-foreground));\n    --kemet-button-background-color: transparent;\n    --kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--kemet-button-border-color);\n  }\n`\n"]}

package/dist/components/kemet-button/types.d.ts

@@ -1,10 +1 @@
-export declare type TypeType = 'standard' | 'text' | 'circle' | 'rounded' | 'pill';
-export interface KemetButtonInterface {
-    active: boolean;
-    hover: boolean;
-    focused: boolean;
-    link: string;
-    outlined: boolean;
-    disabled: boolean;
-    type: TypeType;
-}
+export declare type TypeVariant = 'standard' | 'text' | 'circle' | 'rounded' | 'pill';

package/dist/components/kemet-button/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-button/types.ts"],"names":[],"mappings":"","sourcesContent":["export type TypeType = 'standard' | 'text' | 'circle' | 'rounded' | 'pill';\n\nexport interface KemetButtonInterface {\n  active: boolean,\n  hover: boolean,\n  focused: boolean,\n  link: string,\n  outlined: boolean,\n  disabled: boolean,\n  type: TypeType,\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-button/types.ts"],"names":[],"mappings":"","sourcesContent":["export type TypeVariant = 'standard' | 'text' | 'circle' | 'rounded' | 'pill';\n"]}

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

@@ -3,7 +3,17 @@ import '../kemet-card';
 import '../../kemet-tabs/kemet-tabs';
 import '../../kemet-tabs/kemet-tab';
 import '../../kemet-tabs/kemet-tab-panel';
+import '../../kemet-avatar/kemet-avatar';
+import '../../kemet-icon/kemet-icon';
 declare const meta: Meta;
 export default meta;
 declare type Story = StoryObj;
 export declare const Standard: Story;
+export declare const Header: Story;
+export declare const Footer: Story;
+export declare const HeaderAndFooter: Story;
+export declare const Image: Story;
+export declare const Video: Story;
+export declare const Embed: Story;
+export declare const Avatar: Story;
+export declare const Full: Story;