diff --git a/.gitignore b/.gitignore index dfa41e5a..139953dc 100644 --- a/.gitignore +++ b/.gitignore @@ -64,4 +64,4 @@ storybook-static # Vitepress docs/.vitepress/dist docs/.vitepress/cache -docs/components/custom-elements.json +docs/dev/components/custom-elements.json diff --git a/docs/.vitepress/nav.ts b/docs/.vitepress/nav.ts index 45386609..f3e1246f 100644 --- a/docs/.vitepress/nav.ts +++ b/docs/.vitepress/nav.ts @@ -3,11 +3,15 @@ import { DefaultTheme } from "vitepress"; export default [ { text: 'Getting Started', - link: '/getting-started', + link: '/dev/getting-started', }, { text: 'Components', - link: '/components/tap-avatar', + link: '/dev/components/tap-avatar', + }, + { + text: 'Design Guidelines', + link: '/design/guidelines', }, { text: 'Related Links', diff --git a/docs/.vitepress/sidebar.ts b/docs/.vitepress/sidebar.ts index 79edd8ac..a37f60ba 100644 --- a/docs/.vitepress/sidebar.ts +++ b/docs/.vitepress/sidebar.ts @@ -2,50 +2,83 @@ import fs from 'fs'; import { DefaultTheme } from "vitepress"; import type { Package } from "custom-elements-manifest"; -const file = fs.readFileSync('dist/custom-elements.json'); -const manifest = JSON.parse(file.toString()) as Package; +const getComponentsDevItems = () => { + const file = fs.readFileSync('dist/custom-elements.json'); + const manifest = JSON.parse(file.toString()) as Package; + return manifest.modules + .filter((module) => !!module.declarations?.length) + .map((module) => { + if (!module.exports) + throw new Error(`Module has no export: ${module.path}`); -const components = manifest.modules - .filter((module) => !!module.declarations?.length) - .map((module) => { - if (!module.exports) - throw new Error(`Module has no export: ${module.path}`); + const components = module.exports.filter( + (exp) => exp.kind === 'custom-element-definition', + ); - const components = module.exports.filter( - (exp) => exp.kind === 'custom-element-definition', - ); - - // For now we asume we have only one custom element per moduel - const component = components[0]; + // For now, we assume we have only one custom element per module + const component = components[0]; return { link: '/components/' + component.name, text: component.name, }; }); +} + +const getSidebarDevContents = (): DefaultTheme.Sidebar => { + return [ + {text: 'Getting Started', link: '/getting-started'}, + { + text: 'Design System Guidelines', + base: '/design/', + link: '/guidelines' + }, + { + text: 'Components', + collapsed: false, + items: getComponentsDevItems(), + }, + { + text: 'API References', + collapsed: false, + items: [ + {text: 'CSS Parts', link: '/references/css-parts'}, + { + text: 'Design Tokens', items: [ + {text: 'Colors', link: '/references/color-tokens'}, + {text: 'Radius', link: '/references/radius-tokens'}, + {text: 'Spacing', link: '/references/spacing-tokens'}, + {text: 'Stroke', link: '/references/stroke-tokens'}, + {text: 'Typography', link: '/references/typography-tokens'}, + {text: 'Components', link: '/references/components-tokens'}, + ] + }, + ], + }, + ]; +} + +const getComponentsDesignItems = () => { + const componentGuidelinesBasePath = 'docs/design/components' + const files = fs.readdirSync(componentGuidelinesBasePath) + .filter((file) => file.endsWith('.md')) + .map((file) => file.replace('.md', '')); + return files.map((file) => { + return { + link: 'components/' + file, + text: file, + }; + }); +}; + +const getSidebarDesignContents = (): DefaultTheme.Sidebar => { + return [ + {text: 'Introduction', link: '/guidelines'}, + {text: 'Component Guidelines', base: '/design/', items: getComponentsDesignItems()} + ]; +} -export default [ - { text: 'Getting Started', link: '/getting-started' }, - { - text: 'Components', - collapsed: false, - items: components, - }, - { - text: 'API References', - collapsed: false, - items: [ - { text: 'CSS Parts', link: '/references/css-parts' }, - { - text: 'Design Tokens', items: [ - { text: 'Colors', link: '/references/color-tokens' }, - { text: 'Radius', link: '/references/radius-tokens' }, - { text: 'Spacing', link: '/references/spacing-tokens' }, - { text: 'Stroke', link: '/references/stroke-tokens' }, - { text: 'Typography', link: '/references/typography-tokens' }, - { text: 'Components', link: '/references/components-tokens' }, - ] - }, - ], - }, -] as DefaultTheme.SidebarItem[] +export default { + '/dev/': { base: '/dev/', items: getSidebarDevContents() }, + '/design/': { base: '/design/', items: getSidebarDesignContents() }, +} as DefaultTheme.Sidebar diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts index 70d00f4d..993e7760 100644 --- a/docs/.vitepress/theme/index.ts +++ b/docs/.vitepress/theme/index.ts @@ -1,5 +1,8 @@ -// .vitepress/theme/index.js import DefaultTheme from 'vitepress/theme' import './custom.css' +import '../../components' +import '../../../styles/theme.css' -export default DefaultTheme +export default { + extends: DefaultTheme, +} diff --git a/docs/assets/bottom-sheet-action-bar.png b/docs/assets/bottom-sheet-action-bar.png new file mode 100644 index 00000000..fcc2f991 Binary files /dev/null and b/docs/assets/bottom-sheet-action-bar.png differ diff --git a/docs/assets/bottom-sheet-anatomy.png b/docs/assets/bottom-sheet-anatomy.png new file mode 100644 index 00000000..36a8b589 Binary files /dev/null and b/docs/assets/bottom-sheet-anatomy.png differ diff --git a/docs/assets/bottom-sheet-caution-1.png b/docs/assets/bottom-sheet-caution-1.png new file mode 100644 index 00000000..25b5f35a Binary files /dev/null and b/docs/assets/bottom-sheet-caution-1.png differ diff --git a/docs/assets/bottom-sheet-contents.png b/docs/assets/bottom-sheet-contents.png new file mode 100644 index 00000000..a4075072 Binary files /dev/null and b/docs/assets/bottom-sheet-contents.png differ diff --git a/docs/assets/bottom-sheet-do-1.png b/docs/assets/bottom-sheet-do-1.png new file mode 100644 index 00000000..300adb06 Binary files /dev/null and b/docs/assets/bottom-sheet-do-1.png differ diff --git a/docs/assets/bottom-sheet-do-2.png b/docs/assets/bottom-sheet-do-2.png new file mode 100644 index 00000000..9bf76827 Binary files /dev/null and b/docs/assets/bottom-sheet-do-2.png differ diff --git a/docs/assets/bottom-sheet-dont-1.png b/docs/assets/bottom-sheet-dont-1.png new file mode 100644 index 00000000..ff95baea Binary files /dev/null and b/docs/assets/bottom-sheet-dont-1.png differ diff --git a/docs/assets/bottom-sheet-dont-2.png b/docs/assets/bottom-sheet-dont-2.png new file mode 100644 index 00000000..fdf77302 Binary files /dev/null and b/docs/assets/bottom-sheet-dont-2.png differ diff --git a/docs/assets/bottom-sheet-specs-1.png b/docs/assets/bottom-sheet-specs-1.png new file mode 100644 index 00000000..77536784 Binary files /dev/null and b/docs/assets/bottom-sheet-specs-1.png differ diff --git a/docs/assets/bottom-sheet-specs-2.png b/docs/assets/bottom-sheet-specs-2.png new file mode 100644 index 00000000..8cca24bd Binary files /dev/null and b/docs/assets/bottom-sheet-specs-2.png differ diff --git a/docs/assets/bottom-sheet-title.png b/docs/assets/bottom-sheet-title.png new file mode 100644 index 00000000..260ba018 Binary files /dev/null and b/docs/assets/bottom-sheet-title.png differ diff --git a/docs/assets/bottom-sheet-types.png b/docs/assets/bottom-sheet-types.png new file mode 100644 index 00000000..4768e565 Binary files /dev/null and b/docs/assets/bottom-sheet-types.png differ diff --git a/docs/components/[component].md b/docs/components/[component].md deleted file mode 100644 index 9facdd2d..00000000 --- a/docs/components/[component].md +++ /dev/null @@ -1,53 +0,0 @@ ---- -prev: false -next: false -outline: 'deep' ---- - - - - diff --git a/docs/components/doc-guideline-card/doc-guideline-card.style.ts b/docs/components/doc-guideline-card/doc-guideline-card.style.ts new file mode 100644 index 00000000..85f90171 --- /dev/null +++ b/docs/components/doc-guideline-card/doc-guideline-card.style.ts @@ -0,0 +1,73 @@ +import {css} from "lit"; + +export default css` + :host { + box-sizing: border-box; + flex: 1; + align-self: stretch; + display: flex; + } + + :host *, + :host *::before, + :host *::after { + box-sizing: inherit; + } + + .guideline-card { + height: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 1rem; + border-radius: 8px; + padding: 16px 16px 8px; + line-height: 24px; + font-size: var(--vp-custom-block-font-size); + border-color: var(--vp-custom-block-info-border); + color: var(--vp-custom-block-info-text); + background-color: var(--vp-custom-block-info-bg); + } + + .image { + margin: auto; + } + .image img { + width: 100%; + } + + .badge { + display: inline-block; + margin-left: 2px; + border: 1px solid transparent; + height: 26px; + border-radius: 12px; + padding: 0 10px; + font-size: 12px; + font-weight: 500; + transform: translateY(10px); + } + + .do { + background-color: var(--tap-palette-green-400); + color: #ffffff; + } + .dont { + background-color: var(--tap-palette-red-400); + color: #ffffff; + } + .caution { + background-color: var(--tap-palette-yellow-400); + color: #000000; + } + + @media (max-width: 1100px) { + :host { + width: 100%; + align-items: stretch; + } + .guideline-card { + width: 100%; + } + } +`; diff --git a/docs/components/doc-guideline-card/doc-guideline-card.ts b/docs/components/doc-guideline-card/doc-guideline-card.ts new file mode 100644 index 00000000..b148efc3 --- /dev/null +++ b/docs/components/doc-guideline-card/doc-guideline-card.ts @@ -0,0 +1,48 @@ +import {html, LitElement, nothing} from 'lit'; +import {property} from 'lit/decorators.js'; + +export class GuidelineCard extends LitElement { + @property({ attribute: 'image-url' }) imageUrl = ''; + + @property() variant?: 'do' | 'dont' | 'caution'; + + private renderBadge () { + + const badgeConfig = { + do: { + title: 'Do', + class: 'do' + }, + dont: { + title: 'Don\'t', + class: 'dont' + }, + caution: { + title: 'Caution', + class: 'caution' + }, + } + + + if (this.variant && Object.keys(badgeConfig).includes(this.variant)) { + const selectedBadge = badgeConfig[this.variant]; + return html`
${selectedBadge.title}
` + } + return nothing + } + + render() { + return html` +
+
+ +
+ ${this.renderBadge()} +
+ +
+
+ `; + } +} + diff --git a/docs/components/doc-guideline-card/index.ts b/docs/components/doc-guideline-card/index.ts new file mode 100644 index 00000000..d1dc112e --- /dev/null +++ b/docs/components/doc-guideline-card/index.ts @@ -0,0 +1,14 @@ +import { customElement } from 'lit/decorators.js'; +import styles from './doc-guideline-card.style'; +import {GuidelineCard} from "./doc-guideline-card"; + +@customElement('doc-guideline-card') +export class DocGuidelineCard extends GuidelineCard { + static readonly styles = [styles]; +} + +declare global { + interface HTMLElementTagNameMap { + 'doc-guideline-card': DocGuidelineCard; + } +} diff --git a/docs/components/doc-guideline-section/doc-guideline-section.style.ts b/docs/components/doc-guideline-section/doc-guideline-section.style.ts new file mode 100644 index 00000000..b73236a7 --- /dev/null +++ b/docs/components/doc-guideline-section/doc-guideline-section.style.ts @@ -0,0 +1,52 @@ +import {css} from "lit"; + +export default css` + :host { + box-sizing: border-box; + } + + :host *, + :host *::before, + :host *::after { + box-sizing: inherit; + } + + .guideline-section { + padding: 20px 0; + min-height: 40vh; + display: flex; + align-items: center; + justify-content: space-between; + gap: 2rem; + } + + .guideline-section.reverse { + flex-direction: row-reverse; + } + + .image { + max-width: 30vw; + min-width: 30vw; + } + + .image img { + width: 100%; + } + + + @media (max-width: 1100px) { + .guideline-section { + flex-direction: column; + align-items: flex-start; + } + + .guideline-section.reverse { + flex-direction: column-reverse; + } + + .image { + max-width: unset; + margin: auto; + } + } +` diff --git a/docs/components/doc-guideline-section/doc-guideline-section.ts b/docs/components/doc-guideline-section/doc-guideline-section.ts new file mode 100644 index 00000000..b5c19c27 --- /dev/null +++ b/docs/components/doc-guideline-section/doc-guideline-section.ts @@ -0,0 +1,19 @@ +import {html, LitElement} from 'lit'; +import {property} from 'lit/decorators.js'; + +export class GuidelineSection extends LitElement { + @property({ type: Boolean }) reverse = false; + + render() { + return html` +
+
+ +
+
+ +
+
+ `; + } +} diff --git a/docs/components/doc-guideline-section/index.ts b/docs/components/doc-guideline-section/index.ts new file mode 100644 index 00000000..0aabae35 --- /dev/null +++ b/docs/components/doc-guideline-section/index.ts @@ -0,0 +1,14 @@ +import { customElement } from 'lit/decorators.js'; +import {GuidelineSection} from "./doc-guideline-section.js"; +import styles from './doc-guideline-section.style.js'; + +@customElement('doc-guideline-section') +export class DocGuidelineSection extends GuidelineSection { + static readonly styles = [styles]; +} + +declare global { + interface HTMLElementTagNameMap { + 'doc-guideline-section': DocGuidelineSection; + } +} diff --git a/docs/components/doc-row/doc-row.style.ts b/docs/components/doc-row/doc-row.style.ts new file mode 100644 index 00000000..cab0db60 --- /dev/null +++ b/docs/components/doc-row/doc-row.style.ts @@ -0,0 +1,29 @@ +import {css} from "lit"; + +export default css` + :host { + box-sizing: border-box; + } + + :host *, + :host *::before, + :host *::after { + box-sizing: inherit; + } + + .row { + display: flex; + align-items: stretch; + justify-content: space-between; + gap: 2rem; + margin-bottom: 40px; + } + + + @media (max-width: 1100px) { + .row { + flex-direction: column; + align-items: flex-start; + } + } +`; diff --git a/docs/components/doc-row/doc-row.ts b/docs/components/doc-row/doc-row.ts new file mode 100644 index 00000000..ee928df6 --- /dev/null +++ b/docs/components/doc-row/doc-row.ts @@ -0,0 +1,12 @@ +import {html, LitElement} from 'lit'; + +export class Row extends LitElement { + render() { + return html` +
+ +
+ `; + } +} + diff --git a/docs/components/doc-row/index.ts b/docs/components/doc-row/index.ts new file mode 100644 index 00000000..07cdc8a6 --- /dev/null +++ b/docs/components/doc-row/index.ts @@ -0,0 +1,14 @@ +import { customElement } from 'lit/decorators.js'; +import styles from './doc-row.style'; +import {Row} from "./doc-row"; + +@customElement('doc-row') +export class DocRow extends Row { + static readonly styles = [styles]; +} + +declare global { + interface HTMLElementTagNameMap { + 'doc-row': DocRow; + } +} diff --git a/docs/components/index.ts b/docs/components/index.ts new file mode 100644 index 00000000..eb40d342 --- /dev/null +++ b/docs/components/index.ts @@ -0,0 +1,3 @@ +import './doc-guideline-section/index.js'; +import './doc-row'; +import './doc-guideline-card'; diff --git a/docs/design/components/bottom-sheet.md b/docs/design/components/bottom-sheet.md new file mode 100644 index 00000000..0c2a8dfe --- /dev/null +++ b/docs/design/components/bottom-sheet.md @@ -0,0 +1,164 @@ +--- +aside: false +--- + +# Bottom Sheet + + + + + +### Anatomy + +Every Bottomsheet consist of 3 sections + +- Title +- Content +- Action Bar + + +Each part has a specific role and should contain content that serves that role. +The bottom sheet should be draggable to expand and reveal more details or actions when needed, with an option to collapse it again. + + + + + + + + + +#### Title + +The title section defines the purpose of the bottom sheet. It may include elements such as an artwork, title, and description. Additionally, it can feature leading and trailing icons, often used for navigation actions like "back" or "close." + +- Use Handler when you expect users to interact more deeply with the content, such as scrolling, expanding, or manipulating the sheet. +- For more static interactions where you want users to focus on reading information or completing an action without needing to manipulate the interface it’s ok to not using handler. + + + + + + + + + +#### Content + +The content section mostly consist of description texts, inputs, and selections + + + + + + + + + +#### Action Bar + +This section is consist of button elements that can be vary from single button to multiple vertical and horizontal buttons + + + + + + + + + + + +### Types of BottomSheet +All the bottomsheets are in this 2 category + +- **Selective**: Allows users to select one or multiple options to proceed. +- **Data-Based**: Requires users to input data. + + + + + + + + + + + +### Spec + +- Width: Full Width of the screen +- Background Color: `color-surface-primary` +- Top left radius: `radius-20px` +- Top right radius: `radius-20px` +- Direction: Vertical +- Item spacing: `spacing-16px` +- Padding Top: `spacing-16px` +- Padding Bottom: `spacing-32px` + + + + + + + + + +bottomsheet guideline + + +Avoid using both handler and close icon at the same time + + + + + + +bottomsheet guideline + +On the map, the bottom sheet should only cover a portion of the screen, such as the lower third, allowing the map to remain visible. + + + + + + + + + + + +bottomsheet guideline + +Bottom sheets that require confirmation from users should include an action bar. + + + + + +bottomsheet guideline + +Selective bottom sheets with a single option do not require an action bar. + + + + + + + + + + + +Avoid stacking two layers of bottom sheets or modals on top of each other. If necessary, ensure a close option is provided for the previous layer. + + + +Avoid stacking two layers of bottom sheets or modals on top of each other. + +Make sure that both bottom sheets have easily accessible and visible close buttons. The user should be able to quickly exit the top sheet first, and then the bottom sheet. + +If it's crucial that the user interacts with one sheet before the other, make the second sheet modal. make sure the second option has a close option + + + diff --git a/docs/design/guidelines.md b/docs/design/guidelines.md new file mode 100644 index 00000000..2d890091 --- /dev/null +++ b/docs/design/guidelines.md @@ -0,0 +1,9 @@ +--- +prev: false +next: false +outline: 'deep' +--- + +# Design System Guidelines + +... diff --git a/docs/dev/components/[component].md b/docs/dev/components/[component].md new file mode 100644 index 00000000..75c93e38 --- /dev/null +++ b/docs/dev/components/[component].md @@ -0,0 +1,53 @@ +--- +prev: false +next: false +outline: 'deep' +--- + + + + diff --git a/docs/components/[component].paths.ts b/docs/dev/components/[component].paths.ts similarity index 96% rename from docs/components/[component].paths.ts rename to docs/dev/components/[component].paths.ts index f152d365..fc639d15 100644 --- a/docs/components/[component].paths.ts +++ b/docs/dev/components/[component].paths.ts @@ -69,7 +69,7 @@ export default { component.cssParts.forEach((cssPart) => { content += `| \`${cssPart.name}\` | ${cssPart.description} |\n`; }); - content += `\n > Check [this link](/references/css-parts.html#${component.tagName}) to learn how to use CSS parts for ${getPageTitle(component.tagName)}.\n`; + content += `\n > Check [this link](/dev/references/css-parts.html#${component.tagName}) to learn how to use CSS parts for ${getPageTitle(component.tagName)}.\n`; } diff --git a/docs/components/elements-config.json b/docs/dev/components/elements-config.json similarity index 100% rename from docs/components/elements-config.json rename to docs/dev/components/elements-config.json diff --git a/docs/getting-started.md b/docs/dev/getting-started.md similarity index 94% rename from docs/getting-started.md rename to docs/dev/getting-started.md index f01b49b9..df54fb7a 100644 --- a/docs/getting-started.md +++ b/docs/dev/getting-started.md @@ -169,7 +169,7 @@ Each property has a **custom property name** and a **declaration value** with th The declaration value is Tapsi design system tokens and the custom property name can be set by component users. You need to set value for the custom property name is a global CSS file in your project. The list of these tokens are available -in our [CSS Tokens Documentation](/references/components-tokens). Additionally, each component has it's own tokens in the "CSS Properties" section in +in our [CSS Tokens Documentation](/dev/references/components-tokens). Additionally, each component has it's own tokens in the "CSS Properties" section in their documentation. ### CSS Parts @@ -177,7 +177,7 @@ their documentation. Elements in this library components has the `part` attribute. This attribute let the users be able to modify the styles of a component from outside using the [`::part` CSS pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/::part). -All you need to do is to visit our [CSS part documentation](/references/css-parts) and modify the style of the component. Also, the documentation +All you need to do is to visit our [CSS part documentation](/dev/references/css-parts) and modify the style of the component. Also, the documentation of each component contains these CSS parts in "CSS Parts" section. Here is an example of modifying the style of the `modal` component using `part`: diff --git a/docs/dev/references/[reference].md b/docs/dev/references/[reference].md new file mode 100644 index 00000000..e70de928 --- /dev/null +++ b/docs/dev/references/[reference].md @@ -0,0 +1,8 @@ +--- +outline: 'deep' +--- + + diff --git a/docs/references/[reference].paths.ts b/docs/dev/references/[reference].paths.ts similarity index 53% rename from docs/references/[reference].paths.ts rename to docs/dev/references/[reference].paths.ts index a41613f5..e92a968f 100644 --- a/docs/references/[reference].paths.ts +++ b/docs/dev/references/[reference].paths.ts @@ -1,10 +1,10 @@ -import getColorTokensReferenceContent from "../utils/getColorTokensReferenceContent"; -import getCssPartsReferenceContent from "../utils/getCssPartsReferenceContent"; -import getComponentsTokensReferenceContent from "../utils/getComponentsTokensReferenceContent"; -import getRadiusTokensReferenceContent from "../utils/getRadiusTokensReferenceContent"; -import getSpacingTokensReferenceContent from "../utils/getSpacingTokensReferenceContent"; -import getStrokeTokensReferenceContent from "../utils/getStrokeTokensReferenceContent"; -import getTypographyTokensReferenceContent from "../utils/getTypographyTokensReferenceContent"; +import getColorTokensReferenceContent from "../../utils/getColorTokensReferenceContent"; +import getCssPartsReferenceContent from "../../utils/getCssPartsReferenceContent"; +import getComponentsTokensReferenceContent from "../../utils/getComponentsTokensReferenceContent"; +import getRadiusTokensReferenceContent from "../../utils/getRadiusTokensReferenceContent"; +import getSpacingTokensReferenceContent from "../../utils/getSpacingTokensReferenceContent"; +import getStrokeTokensReferenceContent from "../../utils/getStrokeTokensReferenceContent"; +import getTypographyTokensReferenceContent from "../../utils/getTypographyTokensReferenceContent"; export default { paths() { diff --git a/docs/index.md b/docs/index.md index 262baab7..a052f4d4 100644 --- a/docs/index.md +++ b/docs/index.md @@ -2,19 +2,19 @@ layout: home hero: - name: Tapsi - text: Design System + name: Rasti + text: Tapsi Design System actions: - theme: brand text: Getting Started - link: /getting-started + link: /dev/getting-started - theme: alt text: Explore Components - link: /components/tap-avatar + link: /dev/components/tap-avatar - theme: alt - text: Github - link: https://github.com/Tap30/web-components + text: Design System Guidelines + link: /design/guidelines --- diff --git a/docs/references/[reference].md b/docs/references/[reference].md deleted file mode 100644 index c6f790c9..00000000 --- a/docs/references/[reference].md +++ /dev/null @@ -1,8 +0,0 @@ ---- -outline: 'deep' ---- - - diff --git a/package.json b/package.json index 815ca772..7e0ffc41 100644 --- a/package.json +++ b/package.json @@ -16,8 +16,8 @@ "test": "wtr --watch", "lint": "pnpm eslint ./src/**/* --fix", "fmt": "pnpm prettier src/**/* --write --fix", - "docs:dev": "cp ./dist/custom-elements.json ./docs/components/custom-elements.json && vitepress dev docs", - "docs:build": "vitepress build docs && cp ./dist/custom-elements.json ./docs/.vitepress/dist/components/custom-elements.json && cp ./docs/components/elements-config.json ./docs/.vitepress/dist/components/elements-config.json", + "docs:dev": "cp ./dist/custom-elements.json ./docs/dev/components/custom-elements.json && vitepress dev docs", + "docs:build": "vitepress build docs && cp ./dist/custom-elements.json ./docs/.vitepress/dist/dev/components/custom-elements.json && cp ./docs/dev/components/elements-config.json ./docs/.vitepress/dist/dev/components/elements-config.json", "docs:preview": "vitepress preview docs", "analyze": "cem analyze --litelement --outdir dist --globs \"src/**/index.ts\"" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 26ad768a..d6dabec4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -655,6 +655,11 @@ packages: engines: {node: '>=6.9.0'} dev: true + /@babel/helper-string-parser@7.24.8: + resolution: {integrity: sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==} + engines: {node: '>=6.9.0'} + dev: true + /@babel/helper-validator-identifier@7.22.20: resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==} engines: {node: '>=6.9.0'} @@ -730,20 +735,20 @@ packages: '@babel/types': 7.23.9 dev: true - /@babel/parser@7.24.5: - resolution: {integrity: sha512-EOv5IK8arwh3LI47dz1b0tKUb/1uhHAnHJOrjgtQMIpu1uXd9mlFrJg9IUgGUgZ41Ch0K8REPTYpO7B76b4vJg==} + /@babel/parser@7.24.7: + resolution: {integrity: sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw==} engines: {node: '>=6.0.0'} hasBin: true dependencies: - '@babel/types': 7.23.9 + '@babel/types': 7.24.7 dev: true - /@babel/parser@7.24.7: - resolution: {integrity: sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw==} + /@babel/parser@7.25.6: + resolution: {integrity: sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==} engines: {node: '>=6.0.0'} hasBin: true dependencies: - '@babel/types': 7.24.7 + '@babel/types': 7.25.6 dev: true /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.23.3(@babel/core@7.23.9): @@ -1788,6 +1793,15 @@ packages: to-fast-properties: 2.0.0 dev: true + /@babel/types@7.25.6: + resolution: {integrity: sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/helper-string-parser': 7.24.8 + '@babel/helper-validator-identifier': 7.24.7 + to-fast-properties: 2.0.0 + dev: true + /@colors/colors@1.5.0: resolution: {integrity: sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==} engines: {node: '>=0.1.90'} @@ -2695,6 +2709,10 @@ packages: resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==} dev: true + /@jridgewell/sourcemap-codec@1.5.0: + resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==} + dev: true + /@jridgewell/trace-mapping@0.3.22: resolution: {integrity: sha512-Wf963MzWtA2sjrNt+g18IAln9lKnlRp+K2eH4jjIoF1wYeq3aMREpG09xhlhdzS0EjwU7qmUJYangWa+151vZw==} dependencies: @@ -4462,10 +4480,10 @@ packages: resolution: {integrity: sha512-IJzQhda1Y4QgBGxBn2u+Lrv8T7WfpCPmGjzuZ/yK7eVJJw0fufEQ/HBDmDAvoXnh3veCY5C0UV30pg25EQcHqw==} dependencies: '@vitejs/plugin-react': 4.3.1(vite@5.2.11) - '@vitejs/plugin-vue': 5.0.4(vite@5.2.11)(vue@3.4.27) + '@vitejs/plugin-vue': 5.0.4(vite@5.2.11)(vue@3.5.9) ansi-colors: 4.1.3 lit: 3.1.2 - vue: 3.4.27(typescript@5.3.3) + vue: 3.5.9(typescript@5.3.3) transitivePeerDependencies: - supports-color - typescript @@ -5004,7 +5022,7 @@ packages: - supports-color dev: true - /@vitejs/plugin-vue@5.0.4(vite@5.2.11)(vue@3.4.27): + /@vitejs/plugin-vue@5.0.4(vite@5.2.11)(vue@3.5.9): resolution: {integrity: sha512-WS3hevEszI6CEVEx28F8RjTX97k3KsrcY6kvTg7+Whm5y3oYvcqzVeGCU3hxSAn4uY2CLCkeokkGKpoctccilQ==} engines: {node: ^18.0.0 || >=20.0.0} peerDependencies: @@ -5012,56 +5030,56 @@ packages: vue: ^3.2.25 dependencies: vite: 5.2.11(@types/node@20.12.11) - vue: 3.4.27(typescript@5.3.3) + vue: 3.5.9(typescript@5.3.3) dev: true - /@vue/compiler-core@3.4.27: - resolution: {integrity: sha512-E+RyqY24KnyDXsCuQrI+mlcdW3ALND6U7Gqa/+bVwbcpcR3BRRIckFoz7Qyd4TTlnugtwuI7YgjbvsLmxb+yvg==} + /@vue/compiler-core@3.5.9: + resolution: {integrity: sha512-KE1sCdwqSKq0CQ/ltg3XnlMTKeinjegIkuFsuq9DKvNPmqLGdmI51ChZdGBBRXIvEYTLm8X/JxOuBQ1HqF/+PA==} dependencies: - '@babel/parser': 7.24.5 - '@vue/shared': 3.4.27 + '@babel/parser': 7.25.6 + '@vue/shared': 3.5.9 entities: 4.5.0 estree-walker: 2.0.2 source-map-js: 1.2.0 dev: true - /@vue/compiler-dom@3.4.27: - resolution: {integrity: sha512-kUTvochG/oVgE1w5ViSr3KUBh9X7CWirebA3bezTbB5ZKBQZwR2Mwj9uoSKRMFcz4gSMzzLXBPD6KpCLb9nvWw==} + /@vue/compiler-dom@3.5.9: + resolution: {integrity: sha512-gEAURwPo902AsJF50vl59VaWR+Cx6cX9SoqLYHu1jq9hDbmQlXvpZyYNIIbxa2JTJ+FD/oBQweVUwuTQv79KTg==} dependencies: - '@vue/compiler-core': 3.4.27 - '@vue/shared': 3.4.27 + '@vue/compiler-core': 3.5.9 + '@vue/shared': 3.5.9 dev: true - /@vue/compiler-sfc@3.4.27: - resolution: {integrity: sha512-nDwntUEADssW8e0rrmE0+OrONwmRlegDA1pD6QhVeXxjIytV03yDqTey9SBDiALsvAd5U4ZrEKbMyVXhX6mCGA==} + /@vue/compiler-sfc@3.5.9: + resolution: {integrity: sha512-kp9qawcTXakYm0TN6YAwH24IurSywoXh4fWhRbLu0at4UVyo994bhEzJlQn82eiyqtut4GjkQodSfn8drFbpZQ==} dependencies: - '@babel/parser': 7.24.5 - '@vue/compiler-core': 3.4.27 - '@vue/compiler-dom': 3.4.27 - '@vue/compiler-ssr': 3.4.27 - '@vue/shared': 3.4.27 + '@babel/parser': 7.25.6 + '@vue/compiler-core': 3.5.9 + '@vue/compiler-dom': 3.5.9 + '@vue/compiler-ssr': 3.5.9 + '@vue/shared': 3.5.9 estree-walker: 2.0.2 - magic-string: 0.30.10 - postcss: 8.4.38 + magic-string: 0.30.11 + postcss: 8.4.47 source-map-js: 1.2.0 dev: true - /@vue/compiler-ssr@3.4.27: - resolution: {integrity: sha512-CVRzSJIltzMG5FcidsW0jKNQnNRYC8bT21VegyMMtHmhW3UOI7knmUehzswXLrExDLE6lQCZdrhD4ogI7c+vuw==} + /@vue/compiler-ssr@3.5.9: + resolution: {integrity: sha512-fb1g2mQv32QzIei76rlXRTz08Grw+ZzBXSQfHo4StGFutm/flyebw3dGJkexKwcU3GjX9s5fIGjEv/cjO8j8Yw==} dependencies: - '@vue/compiler-dom': 3.4.27 - '@vue/shared': 3.4.27 + '@vue/compiler-dom': 3.5.9 + '@vue/shared': 3.5.9 dev: true - /@vue/devtools-api@7.1.3(vue@3.4.27): + /@vue/devtools-api@7.1.3(vue@3.5.9): resolution: {integrity: sha512-W8IwFJ/o5iUk78jpqhvScbgCsPiOp2uileDVC0NDtW38gCWhsnu9SeBTjcdu3lbwLdsjc+H1c5Msd/x9ApbcFA==} dependencies: - '@vue/devtools-kit': 7.1.3(vue@3.4.27) + '@vue/devtools-kit': 7.1.3(vue@3.5.9) transitivePeerDependencies: - vue dev: true - /@vue/devtools-kit@7.1.3(vue@3.4.27): + /@vue/devtools-kit@7.1.3(vue@3.5.9): resolution: {integrity: sha512-NFskFSJMVCBXTkByuk2llzI3KD3Blcm7WqiRorWjD6nClHPgkH5BobDH08rfulqq5ocRt5xV+3qOT1Q9FXJrwQ==} peerDependencies: vue: ^3.0.0 @@ -5071,7 +5089,7 @@ packages: mitt: 3.0.1 perfect-debounce: 1.0.0 speakingurl: 14.0.1 - vue: 3.4.27(typescript@5.3.3) + vue: 3.5.9(typescript@5.3.3) dev: true /@vue/devtools-shared@7.1.3: @@ -5080,54 +5098,55 @@ packages: rfdc: 1.3.1 dev: true - /@vue/reactivity@3.4.27: - resolution: {integrity: sha512-kK0g4NknW6JX2yySLpsm2jlunZJl2/RJGZ0H9ddHdfBVHcNzxmQ0sS0b09ipmBoQpY8JM2KmUw+a6sO8Zo+zIA==} + /@vue/reactivity@3.5.9: + resolution: {integrity: sha512-88ApgNZ6yPYpyYkTfXzcbWk6O8+LrPRIpa/U4AdeTzpfRUO+EUt5jemnTBVSlAUNmlYY96xa5feUNEq+BouLog==} dependencies: - '@vue/shared': 3.4.27 + '@vue/shared': 3.5.9 dev: true - /@vue/runtime-core@3.4.27: - resolution: {integrity: sha512-7aYA9GEbOOdviqVvcuweTLe5Za4qBZkUY7SvET6vE8kyypxVgaT1ixHLg4urtOlrApdgcdgHoTZCUuTGap/5WA==} + /@vue/runtime-core@3.5.9: + resolution: {integrity: sha512-YAeP0zNkjSl5mEc1NxOg9qoAhLNbREElHAhfYbMXT57oF0ixehEEJWBhg2uvVxslCGh23JhpEAyMvJrJHW9WGg==} dependencies: - '@vue/reactivity': 3.4.27 - '@vue/shared': 3.4.27 + '@vue/reactivity': 3.5.9 + '@vue/shared': 3.5.9 dev: true - /@vue/runtime-dom@3.4.27: - resolution: {integrity: sha512-ScOmP70/3NPM+TW9hvVAz6VWWtZJqkbdf7w6ySsws+EsqtHvkhxaWLecrTorFxsawelM5Ys9FnDEMt6BPBDS0Q==} + /@vue/runtime-dom@3.5.9: + resolution: {integrity: sha512-5Oq/5oenpB9lw94moKvOHqBDEaMSyDmcu2HS8AtAT6/pwdo/t9fR9aVtLh6FzYGGqZR9yRfoHAN6P7goblq1aA==} dependencies: - '@vue/runtime-core': 3.4.27 - '@vue/shared': 3.4.27 + '@vue/reactivity': 3.5.9 + '@vue/runtime-core': 3.5.9 + '@vue/shared': 3.5.9 csstype: 3.1.3 dev: true - /@vue/server-renderer@3.4.27(vue@3.4.27): - resolution: {integrity: sha512-dlAMEuvmeA3rJsOMJ2J1kXU7o7pOxgsNHVr9K8hB3ImIkSuBrIdy0vF66h8gf8Tuinf1TK3mPAz2+2sqyf3KzA==} + /@vue/server-renderer@3.5.9(vue@3.5.9): + resolution: {integrity: sha512-tbuUsZfMWGazR9LXLNiiDSTwkO8K9sLyR70diY+FbQmKmh7236PPz4jkTxymelV8D89IJUGtbfe4VdmpHkmuxg==} peerDependencies: - vue: 3.4.27 + vue: 3.5.9 dependencies: - '@vue/compiler-ssr': 3.4.27 - '@vue/shared': 3.4.27 - vue: 3.4.27(typescript@5.3.3) + '@vue/compiler-ssr': 3.5.9 + '@vue/shared': 3.5.9 + vue: 3.5.9(typescript@5.3.3) dev: true - /@vue/shared@3.4.27: - resolution: {integrity: sha512-DL3NmY2OFlqmYYrzp39yi3LDkKxa5vZVwxWdQ3rG0ekuWscHraeIbnI8t+aZK7qhYqEqWKTUdijadunb9pnrgA==} + /@vue/shared@3.5.9: + resolution: {integrity: sha512-8wiT/m0mnsLhTME0mPgc57jv+4TipRBSAAmheUdYgiOaO6AobZPNOmm87ub4np65VVDgLcWxc+Edc++5Wyz1uA==} dev: true - /@vueuse/core@10.9.0(vue@3.4.27): + /@vueuse/core@10.9.0(vue@3.5.9): resolution: {integrity: sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==} dependencies: '@types/web-bluetooth': 0.0.20 '@vueuse/metadata': 10.9.0 - '@vueuse/shared': 10.9.0(vue@3.4.27) - vue-demi: 0.14.7(vue@3.4.27) + '@vueuse/shared': 10.9.0(vue@3.5.9) + vue-demi: 0.14.7(vue@3.5.9) transitivePeerDependencies: - '@vue/composition-api' - vue dev: true - /@vueuse/integrations@10.9.0(focus-trap@7.5.4)(vue@3.4.27): + /@vueuse/integrations@10.9.0(focus-trap@7.5.4)(vue@3.5.9): resolution: {integrity: sha512-acK+A01AYdWSvL4BZmCoJAcyHJ6EqhmkQEXbQLwev1MY7NBnS+hcEMx/BzVoR9zKI+UqEPMD9u6PsyAuiTRT4Q==} peerDependencies: async-validator: '*' @@ -5168,10 +5187,10 @@ packages: universal-cookie: optional: true dependencies: - '@vueuse/core': 10.9.0(vue@3.4.27) - '@vueuse/shared': 10.9.0(vue@3.4.27) + '@vueuse/core': 10.9.0(vue@3.5.9) + '@vueuse/shared': 10.9.0(vue@3.5.9) focus-trap: 7.5.4 - vue-demi: 0.14.7(vue@3.4.27) + vue-demi: 0.14.7(vue@3.5.9) transitivePeerDependencies: - '@vue/composition-api' - vue @@ -5181,10 +5200,10 @@ packages: resolution: {integrity: sha512-iddNbg3yZM0X7qFY2sAotomgdHK7YJ6sKUvQqbvwnf7TmaVPxS4EJydcNsVejNdS8iWCtDk+fYXr7E32nyTnGA==} dev: true - /@vueuse/shared@10.9.0(vue@3.4.27): + /@vueuse/shared@10.9.0(vue@3.5.9): resolution: {integrity: sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==} dependencies: - vue-demi: 0.14.7(vue@3.4.27) + vue-demi: 0.14.7(vue@3.5.9) transitivePeerDependencies: - '@vue/composition-api' - vue @@ -8299,10 +8318,10 @@ packages: engines: {node: '>=16.14'} dev: true - /magic-string@0.30.10: - resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==} + /magic-string@0.30.11: + resolution: {integrity: sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==} dependencies: - '@jridgewell/sourcemap-codec': 1.4.15 + '@jridgewell/sourcemap-codec': 1.5.0 dev: true /magic-string@0.30.7: @@ -8931,6 +8950,10 @@ packages: resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==} dev: true + /picocolors@1.1.0: + resolution: {integrity: sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==} + dev: true + /picomatch@2.3.1: resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} engines: {node: '>=8.6'} @@ -8994,6 +9017,15 @@ packages: source-map-js: 1.2.0 dev: true + /postcss@8.4.47: + resolution: {integrity: sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==} + engines: {node: ^10 || ^12 || >=14} + dependencies: + nanoid: 3.3.7 + picocolors: 1.1.0 + source-map-js: 1.2.1 + dev: true + /preact@10.21.0: resolution: {integrity: sha512-aQAIxtzWEwH8ou+OovWVSVNlFImL7xUCwJX3YMqA3U8iKCNC34999fFOnWjYNsylgfPgMexpbk7WYOLtKr/mxg==} dev: true @@ -9728,6 +9760,11 @@ packages: engines: {node: '>=0.10.0'} dev: true + /source-map-js@1.2.1: + resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==} + engines: {node: '>=0.10.0'} + dev: true + /source-map-support@0.5.21: resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==} dependencies: @@ -10460,16 +10497,16 @@ packages: '@shikijs/core': 1.5.1 '@shikijs/transformers': 1.5.1 '@types/markdown-it': 14.1.1 - '@vitejs/plugin-vue': 5.0.4(vite@5.2.11)(vue@3.4.27) - '@vue/devtools-api': 7.1.3(vue@3.4.27) - '@vueuse/core': 10.9.0(vue@3.4.27) - '@vueuse/integrations': 10.9.0(focus-trap@7.5.4)(vue@3.4.27) + '@vitejs/plugin-vue': 5.0.4(vite@5.2.11)(vue@3.5.9) + '@vue/devtools-api': 7.1.3(vue@3.5.9) + '@vueuse/core': 10.9.0(vue@3.5.9) + '@vueuse/integrations': 10.9.0(focus-trap@7.5.4)(vue@3.5.9) focus-trap: 7.5.4 mark.js: 8.11.1 minisearch: 6.3.0 shiki: 1.7.0 vite: 5.2.11(@types/node@20.12.11) - vue: 3.4.27(typescript@5.3.3) + vue: 3.5.9(typescript@5.3.3) transitivePeerDependencies: - '@algolia/client-search' - '@types/node' @@ -10498,7 +10535,7 @@ packages: - universal-cookie dev: true - /vue-demi@0.14.7(vue@3.4.27): + /vue-demi@0.14.7(vue@3.5.9): resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==} engines: {node: '>=12'} hasBin: true @@ -10510,22 +10547,22 @@ packages: '@vue/composition-api': optional: true dependencies: - vue: 3.4.27(typescript@5.3.3) + vue: 3.5.9(typescript@5.3.3) dev: true - /vue@3.4.27(typescript@5.3.3): - resolution: {integrity: sha512-8s/56uK6r01r1icG/aEOHqyMVxd1bkYcSe9j8HcKtr/xTOFWvnzIVTehNW+5Yt89f+DLBe4A569pnZLS5HzAMA==} + /vue@3.5.9(typescript@5.3.3): + resolution: {integrity: sha512-nHzQhZ5cjFKynAY2beAm7XtJ5C13VKAFTLTgRYXy+Id1KEKBeiK6hO2RcW1hUjdbHMadz1YzxyHgQigOC54wug==} peerDependencies: typescript: '*' peerDependenciesMeta: typescript: optional: true dependencies: - '@vue/compiler-dom': 3.4.27 - '@vue/compiler-sfc': 3.4.27 - '@vue/runtime-dom': 3.4.27 - '@vue/server-renderer': 3.4.27(vue@3.4.27) - '@vue/shared': 3.4.27 + '@vue/compiler-dom': 3.5.9 + '@vue/compiler-sfc': 3.5.9 + '@vue/runtime-dom': 3.5.9 + '@vue/server-renderer': 3.5.9(vue@3.5.9) + '@vue/shared': 3.5.9 typescript: 5.3.3 dev: true diff --git a/src/bottom-sheet/bottom-sheet.ts b/src/bottom-sheet/bottom-sheet.ts index 95d32775..5dc51b82 100644 --- a/src/bottom-sheet/bottom-sheet.ts +++ b/src/bottom-sheet/bottom-sheet.ts @@ -171,7 +171,8 @@ export class BottomSheet extends LitElement { @click=${() => this.handleDismiss()} type="button" size="small" - variant="naked"> + variant="naked" + >