diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 57a95910..16a6130d 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -6,7 +6,7 @@ const file = fs.readFileSync('dist/custom-elements.json');
const manifest = JSON.parse(file.toString()) as Package;
const components = manifest.modules
- .filter((module) => !module.path.startsWith('src/icon') && !!module.declarations?.length)
+ .filter((module) => !(module.path.startsWith('src/icon/') || module.path.startsWith('src/icons/')) && !!module.declarations?.length)
.map((module) => {
if (!module.exports)
throw new Error(`Module has no export: ${module.path}`);
diff --git a/docs/components/[component].paths.ts b/docs/components/[component].paths.ts
index 17bfe827..6308a78b 100644
--- a/docs/components/[component].paths.ts
+++ b/docs/components/[component].paths.ts
@@ -9,7 +9,7 @@ export default {
return manifest.modules
.filter(
(module) =>
- !module.path.startsWith('src/icon') && !!module.declarations?.length,
+ !(module.path.startsWith('src/icon/') || module.path.startsWith('src/icons/')) && !!module.declarations?.length
)
.map((module) => {
if (!module.exports)
@@ -120,4 +120,4 @@ Then import this component into your project by using a bare module specifier:
import '@tapsi/components/${name}/${name}.js';
\`\`\`
`
-}
\ No newline at end of file
+}
diff --git a/src/base-button/base-button.style.ts b/src/base-button/base-button.style.ts
index 33ce2d39..c54b8809 100644
--- a/src/base-button/base-button.style.ts
+++ b/src/base-button/base-button.style.ts
@@ -39,7 +39,7 @@ export default css`
font: inherit;
gap: inherit;
width: 100%;
- font-family: var(--tap-font-family, var(--tap-sys-font-family)), serif;
+ font-family: var(--tap-font-family, var(--tap-sys-font-family));
border-radius: var(--tap-button-radius, var(--tap-sys-radius-full));
}
diff --git a/src/button/index.ts b/src/button/index.ts
index 597b75aa..6acad1f6 100644
--- a/src/button/index.ts
+++ b/src/button/index.ts
@@ -3,6 +3,91 @@ import { Button } from './button';
import styles from './button.style';
import { baseButtonStyles } from '../base-button';
+/**
+ * ### Example
+ *
+ * ##### Simple
+ *
+ * ```html
+ * Click Me
+ * ```
+ *
+ * ##### Disabled Button
+ *
+ * ```html
+ * Disabled
+ * ```
+ *
+ * ##### Variants
+ *
+ * ```html
+ * Primary
+ * Ghost
+ * Naked
+ * Elevated
+ * Destructive
+ * Brand
+ * ```
+ *
+ * ##### Sizes
+ *
+ * ```html
+ * Small
+ * Medium
+ * Large
+ * ```
+ *
+ * @summary A customizable button component with various styles and states.
+ *
+ * @prop {`boolean`} [`disabled`=`false`] - Whether the button is disabled.
+ * @prop {`'button'` \| `'submit'` \| `'reset'`} [`type`] - The type of the button.
+ * @prop {`string`} [`value`] - The value associated with the button.
+ * @prop {`string`} [`name`] - The name associated with the button.
+ * @prop {`string`} [`label`] - The accessible label for the button.
+ * @prop {`boolean`} [`loading`=`false`] - Whether the button is in a loading state.
+ * @prop {`'small'` \| `'medium'` \| `'large'`} [`size`=`'medium'`] - The size of the button.
+ * @prop {`'primary'` \| `'ghost'` \| `'naked'` \| `'elevated'` \| `'destructive'` \| `'brand'`} [`variant`=`'primary'`] - The variant style of the button.
+ *
+ * @csspart `button` - The button element.
+ *
+ * @cssprop [`--tap-font-family`=`--tap-sys-font-family`] - The font family for the button.
+ * @cssprop [`--tap-sys-radius-full`] - The border radius for the button.
+ * @cssprop [`--tap-button-color-surface-cover`=`--tap-sys-color-surface-overlay-light`] - The surface cover color for the button.
+ * @cssprop [`--tap-sys-color-surface-overlay-light`] - The overlay light color for the button.
+ * @cssprop [`--tap-sys-color-surface-disabled`] - The disabled surface color for the button.
+ * @cssprop [`--tap-button-color-surface-disabled`=`--tap-sys-color-surface-disabled`] - The disabled surface color for the button.
+ * @cssprop [`--tap-sys-spacing-9`] - The spacing for the small button height.
+ * @cssprop [`--tap-sys-spacing-10`] - The spacing for the medium button height.
+ * @cssprop [`--tap-sys-spacing-11`] - The spacing for the large button height.
+ * @cssprop [`--tap-sys-spacing-5`] - The spacing for the small button padding.
+ * @cssprop [`--tap-sys-spacing-6`] - The spacing for the medium button padding.
+ * @cssprop [`--tap-sys-spacing-8`] - The spacing for the large button padding.
+ * @cssprop [`--tap-button-typography-label-sm-height`=`--tap-sys-typography-label-sm-height`] - The line height for the small button label.
+ * @cssprop [`--tap-button-typography-label-sm-size`=`--tap-sys-typography-label-sm-size`] - The font size for the small button label.
+ * @cssprop [`--tap-button-typography-label-sm-weight`=`--tap-sys-typography-label-sm-weight`] - The font weight for the small button label.
+ * @cssprop [`--tap-button-typography-label-md-height`=`--tap-sys-typography-label-sm-height`] - The line height for the medium button label.
+ * @cssprop [`--tap-button-typography-label-md-size`=`--tap-sys-typography-label-sm-size`] - The font size for the medium button label.
+ * @cssprop [`--tap-button-typography-label-md-weight`=`--tap-sys-typography-label-sm-weight`] - The font weight for the medium button label.
+ * @cssprop [`--tap-button-typography-label-lg-height`=`--tap-sys-typography-label-lg-height`] - The line height for the large button label.
+ * @cssprop [`--tap-button-typography-label-lg-size`=`--tap-sys-typography-label-lg-size`] - The font size for the large button label.
+ * @cssprop [`--tap-button-typography-label-lg-weight`=`--tap-sys-typography-label-lg-weight`] - The font weight for the large button label.
+ * @cssprop [`--tap-button-color-surface-inverse-primary`=`--tap-sys-color-surface-inverse-primary`] - The surface color for the primary variant.
+ * @cssprop [`--tap-sys-color-surface-inverse-primary`] - The surface color for the primary variant.
+ * @cssprop [`--tap-button-color-content-on-inverse`=`--tap-sys-color-content-on-inverse`] - The content color on inverse surface.
+ * @cssprop [`--tap-sys-color-content-on-inverse`] - The content color on inverse surface.
+ * @cssprop [`--tap-button-color-surface-tertiary`=`--tap-sys-color-surface-tertiary`] - The surface color for the ghost variant.
+ * @cssprop [`--tap-sys-color-surface-tertiary`] - The surface color for the ghost variant.
+ * @cssprop [`--tap-button-color-content-primary`=`--tap-sys-color-content-primary`] - The content color for the primary variant.
+ * @cssprop [`--tap-sys-color-content-primary`] - The content color for the primary variant.
+ * @cssprop [`--tap-button-color-surface-primary`=`--tap-sys-color-surface-primary`] - The surface color for the elevated variant.
+ * @cssprop [`--tap-sys-color-surface-primary`] - The surface color for the elevated variant.
+ * @cssprop [`--tap-button-color-surface-destructive`=`--tap-sys-color-surface-negative-light`] - The surface color for the destructive variant.
+ * @cssprop [`--tap-sys-color-surface-negative-light`] - The surface color for the destructive variant.
+ * @cssprop [`--tap-button-color-content-destructive`=`--tap-sys-color-content-negative`] - The content color for the destructive variant.
+ * @cssprop [`--tap-sys-color-content-negative`] - The content color for the destructive variant.
+ * @cssprop [`--tap-button-color-gradient-brand`=`--tap-sys-color-gradient-brand`] - The gradient color for the brand variant.
+ * @cssprop [`--tap-sys-color-gradient-brand`] - The gradient color for the brand variant.
+ */
@customElement('tap-button')
export class TapButton extends Button {
static readonly styles = [baseButtonStyles, styles];
diff --git a/src/icon-button/icon-button.test.ts b/src/icon-button/icon-button.test.ts
index 97a5ecbf..7ca11356 100644
--- a/src/icon-button/icon-button.test.ts
+++ b/src/icon-button/icon-button.test.ts
@@ -1,8 +1,8 @@
-import { expect, defineCE, fixture } from "@open-wc/testing";
-import { TapIconButton } from "./";
+import { expect, defineCE, fixture } from '@open-wc/testing';
+import { TapIconButton } from './';
-describe("Test tap-button", () => {
- it("should pass", () => {
+describe('Test tap-button', () => {
+ it('should pass', () => {
expect(true).to.equal(true);
});
});
diff --git a/src/icon-button/index.ts b/src/icon-button/index.ts
index d7c0a81a..5bcb33a5 100644
--- a/src/icon-button/index.ts
+++ b/src/icon-button/index.ts
@@ -3,6 +3,108 @@ import { IconButton } from './icon-button';
import styles from './icon-button.style';
import { baseButtonStyles } from '../base-button';
+/**
+ * ### Example
+ *
+ * ##### Simple
+ *
+ * ```html
+ *
+ *
+ *
+ * ```
+ *
+ * ##### Disabled IconButton
+ *
+ * ```html
+ *
+ *
+ *
+ * ```
+ *
+ * ##### Variants
+ *
+ * ```html
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ * ```
+ *
+ * ##### Sizes
+ *
+ * ```html
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ * ```
+ *
+ * @summary A customizable icon button component with various styles and states.
+ *
+ * @prop {`boolean`} [`disabled`=`false`] - Whether the icon button is disabled.
+ * @prop {`'small'` \| `'medium'` \| `'large'`} [`size`=`'medium'`] - The size of the icon button.
+ * @prop {`'primary'` \| `'ghost'` \| `'naked'` \| `'elevated'` \| `'destructive'` \| `'brand'`} [`variant`=`'primary'`] - The variant style of the icon button.
+ *
+ * @csspart button - The button element.
+ *
+ * @cssprop [`--tap-font-family`=`--tap-sys-font-family`] - The font family for the button.
+ * @cssprop [`--tap-sys-radius-full`] - The border radius for the button.
+ * @cssprop [`--tap-button-color-surface-cover`=`--tap-sys-color-surface-overlay-light`] - The surface cover color for the button.
+ * @cssprop [`--tap-sys-color-surface-overlay-light`] - The overlay light color for the button.
+ * @cssprop [`--tap-sys-color-surface-disabled`] - The disabled surface color for the button.
+ * @cssprop [`--tap-button-color-surface-disabled`=`--tap-sys-color-surface-disabled`] - The disabled surface color for the button.
+ * @cssprop [`--tap-sys-spacing-9`] - The spacing for the small button height.
+ * @cssprop [`--tap-sys-spacing-10`] - The spacing for the medium button height.
+ * @cssprop [`--tap-sys-spacing-11`] - The spacing for the large button height.
+ * @cssprop [`--tap-sys-spacing-5`] - The spacing for the small button padding.
+ * @cssprop [`--tap-sys-spacing-6`] - The spacing for the medium button padding.
+ * @cssprop [`--tap-sys-spacing-8`] - The spacing for the large button padding.
+ * @cssprop [`--tap-button-typography-label-sm-height`=`--tap-sys-typography-label-sm-height`] - The line height for the small button label.
+ * @cssprop [`--tap-button-typography-label-sm-size`=`--tap-sys-typography-label-sm-size`] - The font size for the small button label.
+ * @cssprop [`--tap-button-typography-label-sm-weight`=`--tap-sys-typography-label-sm-weight`] - The font weight for the small button label.
+ * @cssprop [`--tap-button-typography-label-md-height`=`--tap-sys-typography-label-sm-height`] - The line height for the medium button label.
+ * @cssprop [`--tap-button-typography-label-md-size`=`--tap-sys-typography-label-sm-size`] - The font size for the medium button label.
+ * @cssprop [`--tap-button-typography-label-md-weight`=`--tap-sys-typography-label-sm-weight`] - The font weight for the medium button label.
+ * @cssprop [`--tap-button-typography-label-lg-height`=`--tap-sys-typography-label-lg-height`] - The line height for the large button label.
+ * @cssprop [`--tap-button-typography-label-lg-size`=`--tap-sys-typography-label-lg-size`] - The font size for the large button label.
+ * @cssprop [`--tap-button-typography-label-lg-weight`=`--tap-sys-typography-label-lg-weight`] - The font weight for the large button label.
+ * @cssprop [`--tap-button-color-surface-inverse-primary`=`--tap-sys-color-surface-inverse-primary`] - The surface color for the primary variant.
+ * @cssprop [`--tap-sys-color-surface-inverse-primary`] - The surface color for the primary variant.
+ * @cssprop [`--tap-button-color-content-on-inverse`=`--tap-sys-color-content-on-inverse`] - The content color on inverse surface.
+ * @cssprop [`--tap-sys-color-content-on-inverse`] - The content color on inverse surface.
+ * @cssprop [`--tap-button-color-surface-tertiary`=`--tap-sys-color-surface-tertiary`] - The surface color for the ghost variant.
+ * @cssprop [`--tap-sys-color-surface-tertiary`] - The surface color for the ghost variant.
+ * @cssprop [`--tap-button-color-content-primary`=`--tap-sys-color-content-primary`] - The content color for the primary variant.
+ * @cssprop [`--tap-sys-color-content-primary`] - The content color for the primary variant.
+ * @cssprop [`--tap-button-color-surface-primary`=`--tap-sys-color-surface-primary`] - The surface color for the elevated variant.
+ * @cssprop [`--tap-sys-color-surface-primary`] - The surface color for the elevated variant.
+ * @cssprop [`--tap-button-color-surface-destructive`=`--tap-sys-color-surface-negative-light`] - The surface color for the destructive variant.
+ * @cssprop [`--tap-sys-color-surface-negative-light`] - The surface color for the destructive variant.
+ * @cssprop [`--tap-button-color-content-destructive`=`--tap-sys-color-content-negative`] - The content color for the destructive variant.
+ * @cssprop [`--tap-sys-color-content-negative`] - The content color for the destructive variant.
+ * @cssprop [`--tap-button-color-gradient-brand`=`--tap-sys-color-gradient-brand`] - The gradient color for the brand variant.
+ * @cssprop [`--tap-sys-color-gradient-brand`] - The gradient color for the brand variant.
+ */
@customElement('tap-icon-button')
export class TapIconButton extends IconButton {
static readonly styles = [baseButtonStyles, styles];