kemet-ui 2.0.2 → 3.0.0

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

@@ -4,27 +4,35 @@ 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';
 const meta = {
     title: 'Components / Card',
     component: 'kemet-card',
+    args: {
+        bodyText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        captionText: '',
+        isCentered: false,
+    },
+    argTypes: {
+        mediaType: {
+            control: { type: 'radio' },
+            options: ['none', 'image', 'avatar', 'video', 'embed'],
+        },
+        elevation: {
+            control: { type: 'select' },
+            options: ['none', 'layer-1', 'layer-2', 'layer-3', 'layer-4', 'layer-5', 'layer-6', 'inner'],
+        },
+    }
 };
 export default meta;
-const Template = ({ bodyText, showHeader, showFooter, captionText, mediaType, textColor, backgroundColor, borderColor, cardPadding, borderRadius, isCentered, elevation, }) => html `
-  <style>
-    kemet-card {
-      --kemet-card-color: ${textColor};
-      --kemet-card-padding: ${cardPadding};
-      --kemet-card-border-color: ${borderColor};
-      --kemet-card-border-radius: ${borderRadius};
-      --kemet-card-background-color: ${backgroundColor};
-    }
-  </style>
-  <kemet-card ?center=${isCentered} kemet-elevation="${ifDefined(elevation !== 'none' ? elevation : null)}">
-    ${showHeader ? html `<div slot="header">This is the header.</div>` : null}
-    ${showMedia(mediaType)}
-    ${captionText !== '' ? html `<div slot="caption">${captionText}</div>` : null}
-    ${bodyText}
-    ${showFooter ? html `<div slot="footer">This is the footer.</div>` : null}
+const Template = (args) => html `
+  <kemet-card ?center=${args.isCentered} kemet-elevation="${ifDefined(args.elevation !== 'none' ? args.elevation : null)}">
+    ${args.showHeader ? html `<div slot="header">This is the header.</div>` : null}
+    ${showMedia(args.mediaType)}
+    ${args.captionText && args.captionText !== '' ? html `<div slot="caption">${args.captionText}</div>` : null}
+    ${args.bodyText}
+    ${args.showFooter ? html `<div slot="footer">This is the footer.</div>` : null}
   </kemet-card>
 `;
 const showMedia = (type) => {
@@ -33,7 +41,9 @@ const showMedia = (type) => {
     }
     if (type === 'avatar') {
         return html `
-      <kemet-avatar slot="media" rounded image="https://via.placeholder.com/200x200" label="a placeholder"></kemet-avatar>
+      <kemet-avatar circle slot="media">
+        <kemet-icon size="196" kemet-margin="xs" icon="person"></kemet-icon>
+      </kemet-avatar>
     `;
     }
     if (type === 'video') {
@@ -46,63 +56,65 @@ const showMedia = (type) => {
     }
     if (type === 'embed') {
         return html `
-      <iframe slot="media" width="560" height="315" src="https://www.youtube.com/embed/5gBqTXctxO8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+      <iframe slot="media" width="100%" style="aspect-ratio:16/9;" src="https://www.youtube.com/embed/5gBqTXctxO8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
     `;
     }
     return null;
 };
 export const Standard = {
     render: (args) => Template(args),
+};
+export const Header = {
+    render: (args) => Template(args),
     args: {
-        bodyText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-        captionText: 'Caption',
-        showHeader: false,
+        showHeader: true
+    }
+};
+export const Footer = {
+    render: (args) => Template(args),
+    args: {
+        showFooter: true
+    }
+};
+export const HeaderAndFooter = {
+    render: (args) => Template(args),
+    args: {
+        showHeader: true,
+        showFooter: true
+    }
+};
+export const Image = {
+    render: (args) => Template(args),
+    args: {
+        mediaType: 'image'
+    }
+};
+export const Video = {
+    render: (args) => Template(args),
+    args: {
+        mediaType: 'video'
+    }
+};
+export const Embed = {
+    render: (args) => Template(args),
+    args: {
+        mediaType: 'embed'
+    }
+};
+export const Avatar = {
+    render: (args) => Template(args),
+    args: {
+        mediaType: 'avatar',
+        isCentered: true
+    }
+};
+export const Full = {
+    render: (args) => Template(args),
+    args: {
+        mediaType: 'embed',
+        showHeader: true,
         showFooter: true,
-        isCentered: false,
-        mediaType: 'image',
-        textColor: '#000000',
-        borderColor: '#a4a4a4',
-        backgroundColor: '#ffffff',
-        cardPadding: '1rem',
-        borderRadius: '0',
-        elevation: 'none',
-    },
-    argTypes: {
-        bodyText: {
-            control: { type: 'text' },
-        },
-        showHeader: {
-            control: { type: 'boolean' },
-        },
-        showFooter: {
-            control: { type: 'boolean' },
-        },
-        isCentered: {
-            control: { type: 'boolean' },
-        },
-        mediaType: {
-            control: { type: 'radio' },
-            options: ['none', 'image', 'avatar', 'video', 'embed'],
-        },
-        textColor: {
-            control: { type: 'color' },
-        },
-        borderColor: {
-            control: { type: 'color' },
-        },
-        backgroundColor: {
-            control: { type: 'color' },
-        },
-        cardPadding: {
-            control: { type: 'text' },
-        },
-        borderRadius: {
-            control: { type: 'text' },
-        },
-        elevation: {
-            control: { type: 'select' },
-            options: ['none', 'layer1', 'layer2', 'layer3', 'layer4', 'layer5', 'layer6', 'inner'],
-        },
+        elevation: 'layer-4',
     }
 };
 //# sourceMappingURL=stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-card/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-card';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Card',\n  component: 'kemet-card',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n  bodyText,\n  showHeader,\n  showFooter,\n  captionText,\n  mediaType,\n  textColor,\n  backgroundColor,\n  borderColor,\n  cardPadding,\n  borderRadius,\n  isCentered,\n  elevation,\n}) => html`\n  <style>\n    kemet-card {\n      --kemet-card-color: ${textColor};\n      --kemet-card-padding: ${cardPadding};\n      --kemet-card-border-color: ${borderColor};\n      --kemet-card-border-radius: ${borderRadius};\n      --kemet-card-background-color: ${backgroundColor};\n    }\n  </style>\n  <kemet-card ?center=${isCentered} kemet-elevation=\"${ifDefined(elevation !== 'none' ? elevation : null)}\">\n    ${showHeader ? html`<div slot=\"header\">This is the header.</div>` : null}\n    ${showMedia(mediaType)}\n    ${captionText !== '' ? html`<div slot=\"caption\">${captionText}</div>` : null}\n    ${bodyText}\n    ${showFooter ? html`<div slot=\"footer\">This is the footer.</div>` : null}\n  </kemet-card>\n`;\n\nconst showMedia = (type) => {\n  if (type === 'image') {\n    return html`<img slot=\"media\" src=\"https://via.placeholder.com/1920x1080\" alt=\"a placeholder\" />`;\n  }\n\n  if (type === 'avatar') {\n    return html`\n      <kemet-avatar slot=\"media\" rounded image=\"https://via.placeholder.com/200x200\" label=\"a placeholder\"></kemet-avatar>\n    `;\n  }\n\n  if (type === 'video') {\n    return html`\n      <video slot=\"media\" controls>\n        <source src=\"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4\" type=\"video/mp4\">\n        Your browser does not support the video tag.\n      </video>\n    `;\n  }\n\n  if (type === 'embed') {\n    return html`\n      <iframe slot=\"media\" width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/5gBqTXctxO8\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>\n    `;\n  }\n\n  return null;\n};\n\nexport const Standard: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    bodyText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\n    captionText: 'Caption',\n    showHeader: false,\n    showFooter: true,\n    isCentered: false,\n    mediaType: 'image',\n    textColor: '#000000',\n    borderColor: '#a4a4a4',\n    backgroundColor: '#ffffff',\n    cardPadding: '1rem',\n    borderRadius: '0',\n    elevation: 'none',\n  },\n  argTypes: {\n    bodyText: {\n      control: { type: 'text' },\n    },\n    showHeader: {\n      control: { type: 'boolean' },\n    },\n    showFooter: {\n      control: { type: 'boolean' },\n    },\n    isCentered: {\n      control: { type: 'boolean' },\n    },\n    mediaType: {\n      control: { type: 'radio' },\n      options: ['none', 'image', 'avatar', 'video', 'embed'],\n    },\n    textColor: {\n      control: { type: 'color' },\n    },\n    borderColor: {\n      control: { type: 'color' },\n    },\n    backgroundColor: {\n      control: { type: 'color' },\n    },\n    cardPadding: {\n      control: { type: 'text' },\n    },\n    borderRadius: {\n      control: { type: 'text' },\n    },\n    elevation: {\n      control: { type: 'select' },\n      options: ['none', 'layer1', 'layer2', 'layer3', 'layer4', 'layer5', 'layer6', 'inner'],\n    },\n  }\n};\n"]}
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-card/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-card';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nimport '../../kemet-avatar/kemet-avatar';\nimport '../../kemet-icon/kemet-icon';\n\nconst meta: Meta = {\n  title: 'Components / Card',\n  component: 'kemet-card',\n  args: {\n    bodyText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\n    captionText: '',\n    isCentered: false,\n  },\n  argTypes: {\n    mediaType: {\n      control: { type: 'radio' },\n      options: ['none', 'image', 'avatar', 'video', 'embed'],\n    },\n    elevation: {\n      control: { type: 'select' },\n      options: ['none', 'layer-1', 'layer-2', 'layer-3', 'layer-4', 'layer-5', 'layer-6', 'inner'],\n    },\n  }\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => html`\n  <kemet-card ?center=${args.isCentered} kemet-elevation=\"${ifDefined(args.elevation !== 'none' ? args.elevation : null)}\">\n    ${args.showHeader ? html`<div slot=\"header\">This is the header.</div>` : null}\n    ${showMedia(args.mediaType)}\n    ${args.captionText && args.captionText !== '' ? html`<div slot=\"caption\">${args.captionText}</div>` : null}\n    ${args.bodyText}\n    ${args.showFooter ? html`<div slot=\"footer\">This is the footer.</div>` : null}\n  </kemet-card>\n`;\n\nconst showMedia = (type) => {\n  if (type === 'image') {\n    return html`<img slot=\"media\" src=\"https://via.placeholder.com/1920x1080\" alt=\"a placeholder\" />`;\n  }\n\n  if (type === 'avatar') {\n    return html`\n      <kemet-avatar circle slot=\"media\">\n        <kemet-icon size=\"196\" kemet-margin=\"xs\" icon=\"person\"></kemet-icon>\n      </kemet-avatar>\n    `;\n  }\n\n  if (type === 'video') {\n    return html`\n      <video slot=\"media\" controls>\n        <source src=\"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4\" type=\"video/mp4\">\n        Your browser does not support the video tag.\n      </video>\n    `;\n  }\n\n  if (type === 'embed') {\n    return html`\n      <iframe slot=\"media\" width=\"100%\" style=\"aspect-ratio:16/9;\" src=\"https://www.youtube.com/embed/5gBqTXctxO8\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>\n    `;\n  }\n\n  return null;\n};\n\nexport const Standard: Story = {\n  render: (args: any) => Template(args),\n};\n\nexport const Header: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    showHeader: true\n  }\n};\n\nexport const Footer: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    showFooter: true\n  }\n};\n\nexport const HeaderAndFooter: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    showHeader: true,\n    showFooter: true\n  }\n};\n\nexport const Image: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    mediaType: 'image'\n  }\n};\n\nexport const Video: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    mediaType: 'video'\n  }\n};\n\nexport const Embed: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    mediaType: 'embed'\n  }\n};\n\nexport const Avatar: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    mediaType: 'avatar',\n    isCentered: true\n  }\n};\n\nexport const Full: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    mediaType: 'embed',\n    showHeader: true,\n    showFooter: true,\n    elevation: 'layer-4',\n  }\n}\n"]}

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

@@ -18,21 +18,21 @@ import { LitElement } from 'lit';
  * @csspart media - The media area of the card.
  * @csspart body - The main contents of the card.
  *
- * @cssproperty --kemet-card-padding - The space around elements. Default: 1rem.
- * @cssproperty --kemet-card-border-color - The color of the borders. Default: var(--kemet-color-gray4).
- * @cssproperty --kemet-card-color - The color of the text. Default: var(--kemet-color-black).
- * @cssproperty --kemet-card-max-width - The max width of the card. Default: 360px.
- * @cssproperty --kemet-card-border - The border around the card. Default: 1px solid var(--kemet-card-border-color).
- * @cssproperty --kemet-card-border-radius - The border radius of the card. Default: 0.
- * @cssproperty --kemet-card-background-color - The background color. Default: var(--kemet-color-white).
- * @cssproperty --kemet-card-body-padding - The body spacing. Default: var(--kemet-card-padding).
- * @cssproperty --kemet-card-header-padding - The header spacing. Default: var(--kemet-card-padding).
- * @cssproperty --kemet-card-header-border-bottom - The header border. Default: 1px solid var(--kemet-card-border-color).
- * @cssproperty --kemet-card-caption-color - The caption text color. Default: var(--kemet-color-white).
- * @cssproperty --kemet-card-caption-padding - The caption spacing. Default: calc(var(--kemet-card-padding) / 2) var(--kemet-card-padding).
- * @cssproperty --kemet-card-caption-background-color - The caption background color. Default: rgba(0,0,0,0.5).
- * @cssproperty --kemet-card-footer-padding - The footer spacing. Default: var(--kemet-card-padding).
- * @cssproperty --kemet-card-footer-border-top - The footer border. Default: 1px solid var(--kemet-card-border-color).
+ * @cssproperty --kemet-card-padding - The space around elements.
+ * @cssproperty --kemet-card-border-color - The color of the borders.
+ * @cssproperty --kemet-card-color - The color of the text. Default:
+ * @cssproperty --kemet-card-max-width - The max width of the card.
+ * @cssproperty --kemet-card-border - The border around the card.
+ * @cssproperty --kemet-card-border-radius - The border radius of the card.
+ * @cssproperty --kemet-card-background-color - The background color.
+ * @cssproperty --kemet-card-body-padding - The body spacing.
+ * @cssproperty --kemet-card-header-padding - The header spacing.
+ * @cssproperty --kemet-card-header-border-bottom - The header border.
+ * @cssproperty --kemet-card-caption-color - The caption text color.
+ * @cssproperty --kemet-card-caption-padding - The caption spacing.
+ * @cssproperty --kemet-card-caption-background-color - The caption background color.
+ * @cssproperty --kemet-card-footer-padding - The footer spacing.
+ * @cssproperty --kemet-card-footer-border-top - The footer border.
  *
  */
 export default class KemetCard extends LitElement {

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

@@ -21,21 +21,21 @@ import { stylesBase } from './styles';
  * @csspart media - The media area of the card.
  * @csspart body - The main contents of the card.
  *
- * @cssproperty --kemet-card-padding - The space around elements. Default: 1rem.
- * @cssproperty --kemet-card-border-color - The color of the borders. Default: var(--kemet-color-gray4).
- * @cssproperty --kemet-card-color - The color of the text. Default: var(--kemet-color-black).
- * @cssproperty --kemet-card-max-width - The max width of the card. Default: 360px.
- * @cssproperty --kemet-card-border - The border around the card. Default: 1px solid var(--kemet-card-border-color).
- * @cssproperty --kemet-card-border-radius - The border radius of the card. Default: 0.
- * @cssproperty --kemet-card-background-color - The background color. Default: var(--kemet-color-white).
- * @cssproperty --kemet-card-body-padding - The body spacing. Default: var(--kemet-card-padding).
- * @cssproperty --kemet-card-header-padding - The header spacing. Default: var(--kemet-card-padding).
- * @cssproperty --kemet-card-header-border-bottom - The header border. Default: 1px solid var(--kemet-card-border-color).
- * @cssproperty --kemet-card-caption-color - The caption text color. Default: var(--kemet-color-white).
- * @cssproperty --kemet-card-caption-padding - The caption spacing. Default: calc(var(--kemet-card-padding) / 2) var(--kemet-card-padding).
- * @cssproperty --kemet-card-caption-background-color - The caption background color. Default: rgba(0,0,0,0.5).
- * @cssproperty --kemet-card-footer-padding - The footer spacing. Default: var(--kemet-card-padding).
- * @cssproperty --kemet-card-footer-border-top - The footer border. Default: 1px solid var(--kemet-card-border-color).
+ * @cssproperty --kemet-card-padding - The space around elements.
+ * @cssproperty --kemet-card-border-color - The color of the borders.
+ * @cssproperty --kemet-card-color - The color of the text. Default:
+ * @cssproperty --kemet-card-max-width - The max width of the card.
+ * @cssproperty --kemet-card-border - The border around the card.
+ * @cssproperty --kemet-card-border-radius - The border radius of the card.
+ * @cssproperty --kemet-card-background-color - The background color.
+ * @cssproperty --kemet-card-body-padding - The body spacing.
+ * @cssproperty --kemet-card-header-padding - The header spacing.
+ * @cssproperty --kemet-card-header-border-bottom - The header border.
+ * @cssproperty --kemet-card-caption-color - The caption text color.
+ * @cssproperty --kemet-card-caption-padding - The caption spacing.
+ * @cssproperty --kemet-card-caption-background-color - The caption background color.
+ * @cssproperty --kemet-card-footer-padding - The footer spacing.
+ * @cssproperty --kemet-card-footer-border-top - The footer border.
  *
  */
 let KemetCard = class KemetCard extends LitElement {

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

@@ -1 +1 @@
-{"version":3,"file":"kemet-card.js","sourceRoot":"","sources":["../../../src/components/kemet-card/kemet-card.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAGH,IAAqB,SAAS,GAA9B,MAAqB,SAAU,SAAQ,UAAU;IAM/C,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;KAWV,CAAC;IACJ,CAAC;CACF,CAAA;AAnBQ,gBAAM,GAAG,CAAC,UAAU,CAAC,CAAC;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAC3B;AAJG,SAAS;IAD7B,aAAa,CAAC,YAAY,CAAC;GACP,SAAS,CAoB7B;eApBoB,SAAS","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesBase } from './styles';\n\n/**\n * @since 1.4.0\n * @status stable\n *\n * @tagname kemet-card\n * @summary A highly configurable panel design to display media and information.\n *\n * @prop {boolean} center - Centers the elements in the card.\n *\n * @slot default - The contents of the alert.\n * @slot header - The cards's header.\n * @slot media - A slot for images, videos, or embeds.\n * @slot caption - Text for the media slot.\n * @slot footer - The card's footer.\n *\n *\n * @csspart media - The media area of the card.\n * @csspart body - The main contents of the card.\n *\n * @cssproperty --kemet-card-padding - The space around elements. Default: 1rem.\n * @cssproperty --kemet-card-border-color - The color of the borders. Default: var(--kemet-color-gray4).\n * @cssproperty --kemet-card-color - The color of the text. Default: var(--kemet-color-black).\n * @cssproperty --kemet-card-max-width - The max width of the card. Default: 360px.\n * @cssproperty --kemet-card-border - The border around the card. Default: 1px solid var(--kemet-card-border-color).\n * @cssproperty --kemet-card-border-radius - The border radius of the card. Default: 0.\n * @cssproperty --kemet-card-background-color - The background color. Default: var(--kemet-color-white).\n * @cssproperty --kemet-card-body-padding - The body spacing. Default: var(--kemet-card-padding).\n * @cssproperty --kemet-card-header-padding - The header spacing. Default: var(--kemet-card-padding).\n * @cssproperty --kemet-card-header-border-bottom - The header border. Default: 1px solid var(--kemet-card-border-color).\n * @cssproperty --kemet-card-caption-color - The caption text color. Default: var(--kemet-color-white).\n * @cssproperty --kemet-card-caption-padding - The caption spacing. Default: calc(var(--kemet-card-padding) / 2) var(--kemet-card-padding).\n * @cssproperty --kemet-card-caption-background-color - The caption background color. Default: rgba(0,0,0,0.5).\n * @cssproperty --kemet-card-footer-padding - The footer spacing. Default: var(--kemet-card-padding).\n * @cssproperty --kemet-card-footer-border-top - The footer border. Default: 1px solid var(--kemet-card-border-color).\n *\n */\n\n@customElement('kemet-card')\nexport default class KemetCard extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ type: Boolean, reflect: true })\n  center: boolean;\n\n  render() {\n    return html`\n      <slot name=\"header\"></slot>\n      <div class=\"media\" part=\"media\">\n        <slot name=\"media\"></slot>\n        <slot name=\"caption\"></slot>\n      </div>\n      <div class=\"body\" part=\"body\">\n        <slot></slot>\n      </div>\n      </div>\n      <slot name=\"footer\"></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-card': KemetCard\n  }\n}\n"]}
+{"version":3,"file":"kemet-card.js","sourceRoot":"","sources":["../../../src/components/kemet-card/kemet-card.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAGH,IAAqB,SAAS,GAA9B,MAAqB,SAAU,SAAQ,UAAU;IAM/C,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;KAWV,CAAC;IACJ,CAAC;CACF,CAAA;AAnBQ,gBAAM,GAAG,CAAC,UAAU,CAAC,CAAC;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAC3B;AAJG,SAAS;IAD7B,aAAa,CAAC,YAAY,CAAC;GACP,SAAS,CAoB7B;eApBoB,SAAS","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesBase } from './styles';\n\n/**\n * @since 1.4.0\n * @status stable\n *\n * @tagname kemet-card\n * @summary A highly configurable panel design to display media and information.\n *\n * @prop {boolean} center - Centers the elements in the card.\n *\n * @slot default - The contents of the alert.\n * @slot header - The cards's header.\n * @slot media - A slot for images, videos, or embeds.\n * @slot caption - Text for the media slot.\n * @slot footer - The card's footer.\n *\n *\n * @csspart media - The media area of the card.\n * @csspart body - The main contents of the card.\n *\n * @cssproperty --kemet-card-padding - The space around elements.\n * @cssproperty --kemet-card-border-color - The color of the borders.\n * @cssproperty --kemet-card-color - The color of the text. Default:\n * @cssproperty --kemet-card-max-width - The max width of the card.\n * @cssproperty --kemet-card-border - The border around the card.\n * @cssproperty --kemet-card-border-radius - The border radius of the card.\n * @cssproperty --kemet-card-background-color - The background color.\n * @cssproperty --kemet-card-body-padding - The body spacing.\n * @cssproperty --kemet-card-header-padding - The header spacing.\n * @cssproperty --kemet-card-header-border-bottom - The header border.\n * @cssproperty --kemet-card-caption-color - The caption text color.\n * @cssproperty --kemet-card-caption-padding - The caption spacing.\n * @cssproperty --kemet-card-caption-background-color - The caption background color.\n * @cssproperty --kemet-card-footer-padding - The footer spacing.\n * @cssproperty --kemet-card-footer-border-top - The footer border.\n *\n */\n\n@customElement('kemet-card')\nexport default class KemetCard extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ type: Boolean, reflect: true })\n  center: boolean;\n\n  render() {\n    return html`\n      <slot name=\"header\"></slot>\n      <div class=\"media\" part=\"media\">\n        <slot name=\"media\"></slot>\n        <slot name=\"caption\"></slot>\n      </div>\n      <div class=\"body\" part=\"body\">\n        <slot></slot>\n      </div>\n      </div>\n      <slot name=\"footer\"></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-card': KemetCard\n  }\n}\n"]}

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

@@ -8,15 +8,28 @@ export const stylesBase = css `
 
   :host {
     --kemet-card-padding: 1rem;
-    --kemet-card-border-color: var(--kemet-color-gray4);
+    --kemet-card-border-color: rgb(var(--kemet-color-gray-300));
+    --kemet-card-color: rgb(var(--kemet-color-text));
+    --kemet-card-max-width: 600px;
+    --kemet-card-border: 1px solid var(--kemet-card-border-color);
+    --kemet-card-border-radius: 0;
+    --kemet-card-background-color: rgb(var(--kemet-color-white));
+    --kemet-card-body-padding: var(--kemet-card-padding);
+    --kemet-card-header-padding: var(--kemet-card-padding);
+    --kemet-card-header-border-bottom: 1px solid var(--kemet-card-border-color);
+    --kemet-card-caption-color: rgb(var(--kemet-color-white));
+    --kemet-card-caption-padding: calc(var(--kemet-card-padding) / 2) var(--kemet-card-padding);
+    --kemet-card-caption-background-color: rgb(var(--kemet-color-black) / 35%);
+    --kemet-card-footer-padding: var(--kemet-card-padding);
+    --kemet-card-footer-border-top: 1px solid var(--kemet-card-border-color);
 
-    color: var(--kemet-card-color, var(--kemet-color-black));
+    color: var(--kemet-card-color);
     display: inline-flex;
     flex-direction: column;
-    max-width: var(--kemet-card-max-width, 360px);
-    border: var(--kemet-card-border, 1px solid var(--kemet-card-border-color));
-    border-radius: var(--kemet-card-border-radius, 0);
-    background-color: var(--kemet-card-background-color, var(--kemet-color-white));
+    max-width: var(--kemet-card-max-width);
+    border: var(--kemet-card-border);
+    border-radius: var(--kemet-card-border-radius);
+    background-color: var(--kemet-card-background-color);
   }
 
   :host([center]) {
@@ -25,7 +38,7 @@ export const stylesBase = css `
   }
 
   .body {
-    padding: var(--kemet-card-body-padding, var(--kemet-card-padding));
+    padding: var(--kemet-card-body-padding);
   }
 
   .media {
@@ -42,22 +55,24 @@ export const stylesBase = css `
   }
 
   ::slotted([slot="header"]) {
-    padding: var(--kemet-card-header-padding, var(--kemet-card-padding));
-    border-bottom: var(--kemet-card-header-border-bottom, 1px solid var(--kemet-card-border-color));
+    width: 100%;
+    padding: var(--kemet-card-header-padding);
+    border-bottom: var(--kemet-card-header-border-bottom);
   }
 
   ::slotted([slot="caption"]) {
-    color: var(--kemet-card-caption-color, var(--kemet-color-white));
+    color: var(--kemet-card-caption-color);
     position: absolute;
     bottom: 0;
     width: 100%;
-    padding: var(--kemet-card-caption-padding, calc(var(--kemet-card-padding) / 2) var(--kemet-card-padding));
-    background-color: var(--kemet-card-caption-background-color, rgba(0,0,0,0.35));
+    padding: var(--kemet-card-caption-padding);
+    background-color: var(--kemet-card-caption-background-color);
   }
 
   ::slotted([slot="footer"]) {
-    padding: var(--kemet-card-footer-padding, var(--kemet-card-padding));
-    border-top: var(--kemet-card-footer-border-top, 1px solid var(--kemet-card-border-color));
+    width: 100%;
+    padding: var(--kemet-card-footer-padding);
+    border-top: var(--kemet-card-footer-border-top);
   }
 `;
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-card/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4D5B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    --kemet-card-padding: 1rem;\n    --kemet-card-border-color: var(--kemet-color-gray4);\n\n    color: var(--kemet-card-color, var(--kemet-color-black));\n    display: inline-flex;\n    flex-direction: column;\n    max-width: var(--kemet-card-max-width, 360px);\n    border: var(--kemet-card-border, 1px solid var(--kemet-card-border-color));\n    border-radius: var(--kemet-card-border-radius, 0);\n    background-color: var(--kemet-card-background-color, var(--kemet-color-white));\n  }\n\n  :host([center]) {\n    align-items: center;\n    text-align: center;\n  }\n\n  .body {\n    padding: var(--kemet-card-body-padding, var(--kemet-card-padding));\n  }\n\n  .media {\n    position: relative;\n  }\n\n  ::slotted(*) {\n    max-width: 100%;\n  }\n\n  ::slotted(img) {\n    display: flex;\n    max-width: 100%;\n  }\n\n  ::slotted([slot=\"header\"]) {\n    padding: var(--kemet-card-header-padding, var(--kemet-card-padding));\n    border-bottom: var(--kemet-card-header-border-bottom, 1px solid var(--kemet-card-border-color));\n  }\n\n  ::slotted([slot=\"caption\"]) {\n    color: var(--kemet-card-caption-color, var(--kemet-color-white));\n    position: absolute;\n    bottom: 0;\n    width: 100%;\n    padding: var(--kemet-card-caption-padding, calc(var(--kemet-card-padding) / 2) var(--kemet-card-padding));\n    background-color: var(--kemet-card-caption-background-color, rgba(0,0,0,0.35));\n  }\n\n  ::slotted([slot=\"footer\"]) {\n    padding: var(--kemet-card-footer-padding, var(--kemet-card-padding));\n    border-top: var(--kemet-card-footer-border-top, 1px solid var(--kemet-card-border-color));\n  }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-card/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2E5B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    --kemet-card-padding: 1rem;\n    --kemet-card-border-color: rgb(var(--kemet-color-gray-300));\n    --kemet-card-color: rgb(var(--kemet-color-text));\n    --kemet-card-max-width: 600px;\n    --kemet-card-border: 1px solid var(--kemet-card-border-color);\n    --kemet-card-border-radius: 0;\n    --kemet-card-background-color: rgb(var(--kemet-color-white));\n    --kemet-card-body-padding: var(--kemet-card-padding);\n    --kemet-card-header-padding: var(--kemet-card-padding);\n    --kemet-card-header-border-bottom: 1px solid var(--kemet-card-border-color);\n    --kemet-card-caption-color: rgb(var(--kemet-color-white));\n    --kemet-card-caption-padding: calc(var(--kemet-card-padding) / 2) var(--kemet-card-padding);\n    --kemet-card-caption-background-color: rgb(var(--kemet-color-black) / 35%);\n    --kemet-card-footer-padding: var(--kemet-card-padding);\n    --kemet-card-footer-border-top: 1px solid var(--kemet-card-border-color);\n\n    color: var(--kemet-card-color);\n    display: inline-flex;\n    flex-direction: column;\n    max-width: var(--kemet-card-max-width);\n    border: var(--kemet-card-border);\n    border-radius: var(--kemet-card-border-radius);\n    background-color: var(--kemet-card-background-color);\n  }\n\n  :host([center]) {\n    align-items: center;\n    text-align: center;\n  }\n\n  .body {\n    padding: var(--kemet-card-body-padding);\n  }\n\n  .media {\n    position: relative;\n  }\n\n  ::slotted(*) {\n    max-width: 100%;\n  }\n\n  ::slotted(img) {\n    display: flex;\n    max-width: 100%;\n  }\n\n  ::slotted([slot=\"header\"]) {\n    width: 100%;\n    padding: var(--kemet-card-header-padding);\n    border-bottom: var(--kemet-card-header-border-bottom);\n  }\n\n  ::slotted([slot=\"caption\"]) {\n    color: var(--kemet-card-caption-color);\n    position: absolute;\n    bottom: 0;\n    width: 100%;\n    padding: var(--kemet-card-caption-padding);\n    background-color: var(--kemet-card-caption-background-color);\n  }\n\n  ::slotted([slot=\"footer\"]) {\n    width: 100%;\n    padding: var(--kemet-card-footer-padding);\n    border-top: var(--kemet-card-footer-border-top);\n  }\n`;\n"]}

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

@@ -11,7 +11,13 @@ import '../kemet-carousel-total';
 import '../../kemet-tabs/kemet-tabs';
 import '../../kemet-tabs/kemet-tab';
 import '../../kemet-tabs/kemet-tab-panel';
+import '../../kemet-badge/kemet-badge';
+import '../../kemet-icon/kemet-icon';
 declare const meta: Meta;
 export default meta;
 declare type Story = StoryObj;
 export declare const Standard: Story;
+export declare const DescriptionToolbar: Story;
+export declare const PaginationToolbar: Story;
+export declare const InnerToolbar: Story;
+export declare const Arrows: Story;

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

@@ -11,20 +11,57 @@ import '../kemet-carousel-total';
 import '../../kemet-tabs/kemet-tabs';
 import '../../kemet-tabs/kemet-tab';
 import '../../kemet-tabs/kemet-tab-panel';
+import '../../kemet-badge/kemet-badge';
+import '../../kemet-icon/kemet-icon';
 const meta = {
     title: 'Components / Carousel',
     component: 'kemet-carousel',
+    args: {
+        numOfSlides: 5,
+        toolbarType: 'none',
+        options: {
+            perView: 1,
+            perMove: 1,
+            gap: 12,
+            slideshow: 0,
+            rewind: true,
+            center: false,
+        },
+        breakpoints: {
+            768: {
+                perView: 2,
+                gap: 24,
+                rewind: false,
+            },
+            1280: {
+                perView: 2.5,
+                center: true,
+            },
+        },
+    },
+    argTypes: {
+        toolbarType: {
+            control: { type: 'radio' },
+            options: ['none', 'pagination', 'description'],
+        },
+        options: {
+            control: { type: 'object' },
+        },
+        breakpoints: {
+            control: { type: 'object' },
+        },
+    }
 };
 export default meta;
-const Template = ({ numOfSlides = 5, toolbar = 'description', index = 0, inner = false, arrows = false, options, breakpoints, }) => {
+const Template = (args) => {
     const makeSlides = () => {
         const slides = [];
-        for (let i = 0; i < numOfSlides; i += 1) {
+        for (let i = 0; i < args.numOfSlides; i += 1) {
             const slideNumber = i + 1;
             slides.push(html `
         <kemet-carousel-slide slot="slides">
-          <figure kemet-border="all-1 solid gray1" kemet-margin="tiny:none" kemet-padding="tiny:normal" kemet-elevation="layer4">
-            <h3 kemet-margin="tiny:none">Slide ${slideNumber}</h3>
+          <figure kemet-border="all-1 solid gray-50" kemet-margin="none" kemet-padding="2xl" kemet-elevation="layer-4">
+            <h3 kemet-margin="none">Slide ${slideNumber}</h3>
             <img src="https://via.placeholder.com/1920x1080" alt="a placeholder" style="max-width:100%" />
             <figcaption>An image in a carousel.</figcaption>
           </figure>
@@ -35,7 +72,7 @@ const Template = ({ numOfSlides = 5, toolbar = 'description', index = 0, inner =
         return slides;
     };
     const makePrevArrow = () => {
-        if (arrows) {
+        if (args.arrows) {
             return html `
         <kemet-carousel-prev slot="prev">
           <kemet-icon icon="chevron-left" size="72"></kemet-icon>
@@ -45,7 +82,7 @@ const Template = ({ numOfSlides = 5, toolbar = 'description', index = 0, inner =
         return null;
     };
     const makeNextArrow = () => {
-        if (arrows) {
+        if (args.arrows) {
             return html `
         <kemet-carousel-next slot="next">
           <kemet-icon icon="chevron-right" size="72"></kemet-icon>
@@ -55,9 +92,9 @@ const Template = ({ numOfSlides = 5, toolbar = 'description', index = 0, inner =
         return null;
     };
     const makePagination = () => {
-        if (toolbar === 'pagination') {
+        if (args.toolbarType === 'pagination') {
             const pages = [];
-            for (let i = 0; i < numOfSlides; i += 1) {
+            for (let i = 0; i < args.numOfSlides; i += 1) {
                 pages.push(html `
           <kemet-carousel-link slide="${i}" slot="toolbar">${i + 1}</kemet-carousel-link>
         `);
@@ -81,7 +118,7 @@ const Template = ({ numOfSlides = 5, toolbar = 'description', index = 0, inner =
         return null;
     };
     const makeDescription = () => {
-        if (toolbar === 'description') {
+        if (args.toolbarType === 'description') {
             return html `
         <div slot="toolbar" kemet-layout="flexrow" kemet-align="middle" kemet-gutters>
           <div>
@@ -92,10 +129,10 @@ const Template = ({ numOfSlides = 5, toolbar = 'description', index = 0, inner =
             <kemet-carousel-information></kemet-carousel-information>
           </div>
           <kemet-carousel-prev kemet-breakpoint="tiny:content">
-            <kemet-badge circle><kemet-icon icon="chevron-left"></kemet-icon></kemet-badge>
+            <kemet-badge circle kemet-padding="sm"><kemet-icon icon="chevron-left"></kemet-icon></kemet-badge>
           </kemet-carousel-prev>
           <kemet-carousel-next kemet-breakpoint="tiny:content">
-            <kemet-badge circle><kemet-icon icon="chevron-right"></kemet-icon></kemet-badge>
+            <kemet-badge circle kemet-padding="sm"><kemet-icon icon="chevron-right"></kemet-icon></kemet-badge>
           </kemet-carousel-next>
         </div>
       `;
@@ -103,7 +140,7 @@ const Template = ({ numOfSlides = 5, toolbar = 'description', index = 0, inner =
         return null;
     };
     return html `
-    <kemet-carousel index="${index}" ?inner=${inner} .options=${options} .breakpoints=${breakpoints}>
+    <kemet-carousel index="${args.index}" ?inner=${args.inner} .options=${args.options} .breakpoints=${args.breakpoints}>
       ${makePrevArrow()}
       ${makeSlides()}
       ${makeNextArrow()}
@@ -114,55 +151,30 @@ const Template = ({ numOfSlides = 5, toolbar = 'description', index = 0, inner =
 };
 export const Standard = {
     render: (args) => Template(args),
+};
+export const DescriptionToolbar = {
+    render: (args) => Template(args),
     args: {
-        numOfSlides: 5,
-        toolbar: 'pagination',
-        index: 0,
-        inner: false,
-        arrows: false,
-        options: {
-            perView: 1,
-            perMove: 1,
-            gap: 12,
-            slideshow: 0,
-            rewind: true,
-            center: false,
-        },
-        breakpoints: {
-            768: {
-                perView: 2,
-                gap: 24,
-                rewind: false,
-            },
-            1280: {
-                perView: 2.5,
-                center: true,
-            },
-        },
-    },
-    argTypes: {
-        numOfSlides: {
-            control: { type: 'number' },
-        },
-        toolbar: {
-            control: { type: 'radio' },
-            options: ['none', 'pagination', 'description'],
-        },
-        index: {
-            control: { type: 'number' },
-        },
-        inner: {
-            control: { type: 'boolean' },
-        },
-        arrows: {
-            control: { type: 'boolean' },
-        },
-        options: {
-            control: { type: 'object' },
-        },
-        breakpoints: {
-            control: { type: 'object' },
-        },
+        toolbarType: 'description',
+    }
+};
+export const PaginationToolbar = {
+    render: (args) => Template(args),
+    args: {
+        toolbarType: 'pagination',
+    }
+};
+export const InnerToolbar = {
+    render: (args) => Template(args),
+    args: {
+        inner: true,
+        toolbarType: 'pagination',
+    }
+};
+export const Arrows = {
+    render: (args) => Template(args),
+    args: {
+        arrows: true,
     }
 };
 //# sourceMappingURL=stories.js.map