@maggioli-design-system/mds-accordion-timer 3.10.4 → 4.0.0

package/dist/types/type/variant.d.ts

@@ -5,8 +5,9 @@ export type ThemeFullVariantAvatarType = 'amaranth' | 'aqua' | 'blue' | 'error'
 export type ThemeLuminanceVariantType = 'dark' | 'light';
 export type LabelVariantType = 'amaranth' | 'aqua' | 'blue' | 'green' | 'lime' | 'orange' | 'orchid' | 'sky' | 'violet' | 'yellow';
 export type ActionVariantType = 'primary' | 'dark' | 'light';
+export type ChipVariantType = 'primary' | 'secondary' | 'dark' | 'error' | 'info' | 'success' | 'warning';
 export type StateVariantType = 'disabled' | 'focused' | 'readonly';
-export type ToneActionVariantType = 'primary' | 'secondary' | 'tertiary' | 'strong' | 'weak' | 'ghost' | 'quiet';
+export type ToneActionVariantType = 'primary' | 'secondary' | 'strong' | 'weak' | 'ghost' | 'quiet';
 export type ToneVariantType = 'strong' | 'weak' | 'ghost' | 'quiet';
 export type ToneSimpleVariantType = 'quiet' | 'strong' | 'weak';
 export type ToneMinimalVariantType = 'strong' | 'weak';

package/documentation.json

@@ -1,17 +1,17 @@
 {
-  "timestamp": "2024-10-23T14:37:27",
+  "timestamp": "2024-11-25T16:00:58",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.21.0",
-    "typescriptVersion": "5.5.3"
+    "version": "4.22.2",
+    "typescriptVersion": "5.5.4"
   },
   "components": [
     {
       "filePath": "src/components/mds-accordion-timer/mds-accordion-timer.tsx",
       "encapsulation": "shadow",
       "tag": "mds-accordion-timer",
-      "readme": "# mds-accordion-timer\n\n\n\nThis is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.\n",
-      "docs": "This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.",
+      "readme": "# mds-accordion-timer\n\n\n\nThis is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.\n",
+      "docs": "This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.",
       "docsTags": [
         {
           "name": "slot",
@@ -258,7 +258,7 @@
       "path": "src/type/button.ts"
     },
     "src/type/button.ts::ButtonVariantType": {
-      "declaration": "export type ButtonVariantType =\n  | 'primary'\n  | 'dark'\n  | 'light'\n  | 'error'\n  | 'info'\n  | 'success'\n  | 'warning'",
+      "declaration": "export type ButtonVariantType =\n  | 'primary'\n  | 'secondary'\n  | 'dark'\n  | 'light'\n  | 'error'\n  | 'info'\n  | 'success'\n  | 'warning'",
       "docstring": "",
       "path": "src/type/button.ts"
     },
@@ -272,6 +272,11 @@
       "docstring": "",
       "path": "src/type/button.ts"
     },
+    "src/type/variant.ts::ChipVariantType": {
+      "declaration": "export type ChipVariantType =\n  | 'primary'\n  | 'secondary'\n  | 'dark'\n  | 'error'\n  | 'info'\n  | 'success'\n  | 'warning'",
+      "docstring": "",
+      "path": "src/type/variant.ts"
+    },
     "src/components/mds-chip/meta/interface.ts::MdsChipEvent": {
       "declaration": "interface MdsChipEvent {\n  event: Event\n  element: HTMLMdsChipElement\n}",
       "docstring": "",
@@ -313,7 +318,7 @@
       "path": "src/type/text.ts"
     },
     "src/components/mds-file-preview/meta/event-detail.ts::MdsFilePreviewEventDetail": {
-      "declaration": "export interface MdsFilePreviewEventDetail {\n  extension: string\n  filename: string\n  target: HTMLMdsFileElement\n}",
+      "declaration": "export interface MdsFilePreviewEventDetail {\n  extension: string\n  filename: string\n  target: HTMLMdsFilePreviewElement\n}",
       "docstring": "",
       "path": "src/components/mds-file-preview/meta/event-detail.ts"
     },
@@ -327,10 +332,15 @@
       "docstring": "",
       "path": "src/components/mds-filter-item/meta/event-detail.ts"
     },
-    "src/components/mds-header-bar/meta/types.ts::MenuType": {
-      "declaration": "export type MenuType =\n  | 'all'\n  | 'desktop'\n  | 'mobile'\n  | 'none'",
+    "src/type/header-bar.ts::HeaderBarMenuType": {
+      "declaration": "export type HeaderBarMenuType =\n  | 'all'\n  | 'desktop'\n  | 'mobile'\n  | 'none'",
+      "docstring": "",
+      "path": "src/type/header-bar.ts"
+    },
+    "src/type/header-bar.ts::HeaderBarNavType": {
+      "declaration": "export type HeaderBarNavType =\n  | 'all'\n  | 'desktop'\n  | 'mobile'\n  | 'none'",
       "docstring": "",
-      "path": "src/components/mds-header-bar/meta/types.ts"
+      "path": "src/type/header-bar.ts"
     },
     "src/components/mds-header/meta/event-detail.ts::MdsHeaderEventDetail": {
       "declaration": "export interface MdsHeaderEventDetail {\n  bar: HTMLMdsHeaderBarElement\n}",
@@ -368,7 +378,7 @@
       "path": "src/components/mds-img/meta/event-detail.ts"
     },
     "src/type/autocomplete.ts::AutocompleteType": {
-      "declaration": "export type AutocompleteType =\n  | 'additional-name'\n  | 'address'\n  | 'address-level1'\n  | 'address-level2'\n  | 'address-level3'\n  | 'address-level4'\n  | 'address-line1'\n  | 'address-line2'\n  | 'address-line3'\n  | 'bday'\n  | 'bday-day'\n  | 'bday-month'\n  | 'bday-year'\n  | 'cc-additional-name'\n  | 'cc-csc'\n  | 'cc-exp'\n  | 'cc-exp-month'\n  | 'cc-exp-year'\n  | 'cc-family-name'\n  | 'cc-family-name'\n  | 'cc-given-name'\n  | 'cc-name'\n  | 'cc-number'\n  | 'cc-type'\n  | 'country'\n  | 'country-name'\n  | 'current-password'\n  | 'email'\n  | 'family-name'\n  | 'given-name'\n  | 'honorific-prefix'\n  | 'honorific-suffix'\n  | 'impp'\n  | 'language'\n  | 'name'\n  | 'new-password'\n  | 'nickname'\n  | 'off'\n  | 'on'\n  | 'one-time-code'\n  | 'organization'\n  | 'organization-title'\n  | 'photo'\n  | 'postal-code'\n  | 'sex'\n  | 'street-address'\n  | 'tel'\n  | 'tel-area-code'\n  | 'tel-country-code'\n  | 'tel-extension'\n  | 'tel-local'\n  | 'tel-national'\n  | 'transaction-amount'\n  | 'transaction-currency'\n  | 'url'\n  | 'username'",
+      "declaration": "export type AutocompleteType =\n  | 'additional-name'\n  | 'address'\n  | 'address-level1'\n  | 'address-level2'\n  | 'address-level3'\n  | 'address-level4'\n  | 'address-line1'\n  | 'address-line2'\n  | 'address-line3'\n  | 'bday'\n  | 'bday-day'\n  | 'bday-month'\n  | 'bday-year'\n  | 'cc-additional-name'\n  | 'cc-csc'\n  | 'cc-exp'\n  | 'cc-exp-month'\n  | 'cc-exp-year'\n  | 'cc-family-name'\n  | 'cc-given-name'\n  | 'cc-name'\n  | 'cc-number'\n  | 'cc-type'\n  | 'country'\n  | 'country-name'\n  | 'current-password'\n  | 'email'\n  | 'family-name'\n  | 'given-name'\n  | 'honorific-prefix'\n  | 'honorific-suffix'\n  | 'impp'\n  | 'language'\n  | 'name'\n  | 'new-password'\n  | 'nickname'\n  | 'off'\n  | 'on'\n  | 'one-time-code'\n  | 'organization'\n  | 'organization-title'\n  | 'photo'\n  | 'postal-code'\n  | 'sex'\n  | 'street-address'\n  | 'tel'\n  | 'tel-area-code'\n  | 'tel-country-code'\n  | 'tel-extension'\n  | 'tel-local'\n  | 'tel-national'\n  | 'transaction-amount'\n  | 'transaction-currency'\n  | 'url'\n  | 'username'",
       "docstring": "",
       "path": "src/type/autocomplete.ts"
     },
@@ -397,10 +407,10 @@
       "docstring": "",
       "path": "src/type/typography.ts"
     },
-    "src/components/mds-input/meta/event-detail.ts::MdsInputEventDetail": {
-      "declaration": "export interface MdsInputEventDetail {\n  value?: string\n}",
+    "src/type/input.ts::MdsInputEventDetail": {
+      "declaration": "export interface MdsInputEventDetail {\n  value?: File | string | FormData | null\n}",
       "docstring": "",
-      "path": "src/components/mds-input/meta/event-detail.ts"
+      "path": "src/type/input.ts"
     },
     "src/components/mds-input-field/meta/types.ts::InputFieldType": {
       "declaration": "export type InputFieldType =\n  | 'date'\n  | 'email'\n  | 'number'\n  | 'password'\n  | 'search'\n  | 'tel'\n  | 'text'\n  | 'textarea'\n  | 'time'\n  | 'url'\n  | 'cc'\n  | 'cf'\n  | 'isbn'\n  | 'piva'",
@@ -417,11 +427,6 @@
       "docstring": "",
       "path": "src/components/mds-input-field/meta/validators.ts"
     },
-    "src/interface/input-value.ts::InputValue": {
-      "declaration": "export interface InputValue {\n  value: InputValueType\n}",
-      "docstring": "",
-      "path": "src/interface/input-value.ts"
-    },
     "src/components/mds-input-switch/meta/types.ts::InputSwitchSizeType": {
       "declaration": "export type InputSwitchSizeType =\n  | 'sm'\n  | 'md'\n  | 'lg'",
       "docstring": "",
@@ -468,7 +473,12 @@
       "path": "src/type/typography.ts"
     },
     "src/components/mds-modal/meta/types.ts::ModalPositionType": {
-      "declaration": "export type ModalPositionType =\n  | 'bottom'\n  | 'center'\n  | 'left'\n  | 'right'\n  | 'top'",
+      "declaration": "export type ModalPositionType =\n  | 'bottom'\n  | 'bottom-left'\n  | 'bottom-right'\n  | 'center'\n  | 'left'\n  | 'right'\n  | 'top'\n  | 'top-left'\n  | 'top-right'",
+      "docstring": "",
+      "path": "src/components/mds-modal/meta/types.ts"
+    },
+    "src/components/mds-modal/meta/types.ts::ModalAnimationStateType": {
+      "declaration": "export type ModalAnimationStateType =\n  | 'intro'\n  | 'none'\n  | 'outro'",
       "docstring": "",
       "path": "src/components/mds-modal/meta/types.ts"
     },
@@ -507,21 +517,11 @@
       "docstring": "",
       "path": "src/components/mds-pref-contrast/meta/types.ts"
     },
-    "src/type/language.ts::PrefLanguageType": {
-      "declaration": "export type PrefLanguageType =\n  | 'auto'\n  | `${Lowercase<string>}${Lowercase<string>}`\n  | `${Lowercase<string>}${Lowercase<string>}${Lowercase<string>}`",
-      "docstring": "",
-      "path": "src/type/language.ts"
-    },
     "src/event-detail/language.ts::MdsPrefLanguageEventDetail": {
-      "declaration": "export interface MdsPrefLanguageEventDetail {\n  language?: LanguageType\n}",
+      "declaration": "export interface MdsPrefLanguageEventDetail {\n  /* A string representing the language version as defined in {@link https://datatracker.ietf.org/doc/html/rfc5646 RFC 5646: Tags for Identifying Languages (also known as BCP 47)}.\n   *\n   * `Examples of valid language codes include \"en\", \"en-US\", \"fr\", \"fr-FR\", \"es-ES\", etc.`\n   */\n  language?: string\n}",
       "docstring": "",
       "path": "src/event-detail/language.ts"
     },
-    "src/type/language.ts::LanguageType": {
-      "declaration": "export type LanguageType =\n  | `${Lowercase<string>}${Lowercase<string>}`\n  | `${Lowercase<string>}${Lowercase<string>}${Lowercase<string>}`",
-      "docstring": "",
-      "path": "src/type/language.ts"
-    },
     "src/components/mds-pref-theme/meta/types.ts::ThemeModeType": {
       "declaration": "export type ThemeModeType =\n  | 'light'\n  | 'dark'\n  | 'system'",
       "docstring": "",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maggioli-design-system/mds-accordion-timer",
-  "version": "3.10.4",
-  "description": "mds-accordion-timer is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.",
+  "version": "4.0.0",
+  "description": "mds-accordion-timer is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
   "es2015": "dist/esm/index.mjs",
@@ -24,9 +24,9 @@
     "test": "stencil test --spec --e2e"
   },
   "dependencies": {
-    "@maggioli-design-system/mds-accordion-timer-item": "3.10.3",
-    "@maggioli-design-system/styles": "15.3.2",
-    "@stencil/core": "4.21.0"
+    "@maggioli-design-system/mds-accordion-timer-item": "4.0.0",
+    "@maggioli-design-system/styles": "15.5.0",
+    "@stencil/core": "4.22.2"
   },
   "license": "MIT",
   "author": {

package/readme.md

@@ -2,7 +2,7 @@
 
 
 
-This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.
+This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
 
 <!-- Auto Generated Below -->
 
@@ -29,6 +29,17 @@ This is a web-component from Maggioli Design System [Magma](https://magma.maggio
 | `"default"` | Add `mds-accordion-timer-item` element/s. |
 
 
+## CSS Custom Properties
+
+| Name                                            | Description                                                                                 |
+| ----------------------------------------------- | ------------------------------------------------------------------------------------------- |
+| `--mds-accordion-timer-color`                   | Sets the text color of the component mds-accordion-timer-item                               |
+| `--mds-accordion-timer-duration`                | Sets the transition duration of open/close animation of the mds-accordion-timer-item        |
+| `--mds-accordion-timer-progress-bar-background` | Sets the background-color of the progress bar when the mds-accordion-timer-item is selected |
+| `--mds-accordion-timer-progress-bar-color`      | Sets the color of the progress bar when the mds-accordion-timer-item is selected            |
+| `--mds-accordion-timer-progress-bar-thickness`  | Sets thickness of the progress bar of the mds-accordion-timer-item                          |
+
+
 ----------------------------------------------
 
 Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)

package/src/common/file.ts

@@ -1,11 +1,10 @@
 import { fileExtensionsDictionary, ExtensionInfo } from '@dictionary/file-extensions'
 import { fileFormatsVariant } from '@type/variant-file-format'
+import { ThemeFullVariantType } from '@type/variant'
 
 interface FileFormatsVariants {
-  color: string
   icon: string
-  iconBackground: string
-  variant: string
+  variant: ThemeFullVariantType
 }
 
 const sanitizeFilename = (filename: string, error: string = 'Attribute "filename" is undefined.') => {

package/src/common/locale.ts

@@ -1,4 +1,4 @@
-import Handlebars from 'handlebars'
+import { render } from 'mustache'
 
 type LocaleConfig = {
   el?: Record<string, string | string[]>
@@ -12,6 +12,7 @@ export class Locale {
   language: string
   config: LocaleConfig
   closestElement:HTMLElement
+  element: HTMLElement
 
   constructor (configData?: LocaleConfig) {
     if (configData) {
@@ -23,8 +24,9 @@ export class Locale {
     this.config = configData
   }
 
-  lang = (element: HTMLElement): string => {
-    this.closestElement = element.closest('[lang]') as HTMLElement
+  lang = (el: HTMLElement): string => {
+    this.element = el
+    this.closestElement = this.element.closest('[lang]') as HTMLElement
 
     if (this.closestElement) {
       if (this.closestElement.lang) {
@@ -37,11 +39,24 @@ export class Locale {
     return this.language
   }
 
+  update = (doc?: Document | ShadowRoot): void => {
+    const context = doc ?? this.element.shadowRoot
+    context && context.querySelectorAll('*').forEach(el => {
+      if (el.tagName.toLowerCase().startsWith('mds-')) {
+        // eslint-disable-next-line no-restricted-syntax
+        if (el && 'updateLang' in el) {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          (el as any).updateLang()
+        }
+      }
+    })
+  }
+
   private pluralize = (tag: string | string[], context: Record<string, string | number>): string => {
 
     const languagePhrase: string | string[] = this.config[this.language] ? this.config[this.language][tag] : this.config[this.rollbackLanguage][tag]
     const phrases: string[] = []
-    
+
     if (Array.isArray(languagePhrase)) {
       phrases.push(languagePhrase[0])
       phrases.push(languagePhrase[1])
@@ -63,8 +78,7 @@ export class Locale {
       }
     }
 
-    const template = Handlebars.compile(translatePhrase)
-    return template(context)
+    return render(translatePhrase, context)
   }
 
   get = (tag: string | string[], context?: Record<string, string | number>): string => {

package/src/common/unit.ts

@@ -23,7 +23,7 @@ const cssSizeToNumber = (size: string, defaultValue = 0): number => {
   if (size.includes('em')) {
     return Number(size.replace('em', '')) * 16
   }
-  
+
   return defaultValue
 }
 

package/src/components/mds-accordion-timer/.gitlab-ci.yml

@@ -2,24 +2,19 @@
   variables:
     COMPONENT: mds-accordion-timer
 
-# ISOLATE
-accordion-timer-isolate:
-  extends: [.base-isolate, .base-accordion-timer]
-  dependencies: [base-stencil-build]
-
 # TEST
 accordion-timer-publish-test:
   extends: [.base-stencil-publish-test, .base-accordion-timer]
-  dependencies: [base-stencil-build, accordion-timer-isolate]
+  dependencies: [base-stencil-build, base-isolate]
 
 # PUBLISH
 accordion-timer-publish:
   extends: [.base-stencil-publish, .base-accordion-timer]
-  dependencies: [base-stencil-build, accordion-timer-isolate]
-  needs: [base-stencil-build, accordion-timer-isolate, accordion-timer-publish-test]
+  dependencies: [base-stencil-build, base-isolate]
+  needs: [base-stencil-build, base-isolate, accordion-timer-publish-test]
 
 # INSTALL TEST
 accordion-timer-install-test:
   extends: [.base-stencil-install-test, .base-accordion-timer]
-  dependencies: [base-stencil-build, accordion-timer-isolate]
-  needs: [base-stencil-build, accordion-timer-isolate, accordion-timer-publish]
+  dependencies: [base-stencil-build, base-isolate]
+  needs: [base-stencil-build, base-isolate, accordion-timer-publish]

package/src/dictionary/button.ts

@@ -4,6 +4,7 @@ const buttonVariantDictionary = [
   'info',
   'light',
   'primary',
+  'secondary',
   'success',
   'warning',
 ]

package/src/dictionary/file-extensions.ts

@@ -1,10 +1,12 @@
+import { FileFormat } from '@type/variant-file-format'
+
 interface FileExtenstion {
   [key: string]: ExtensionInfo
 }
 
 interface ExtensionInfo {
   preview?: boolean
-  format: string
+  format: FileFormat
   description: string
 }
 

package/src/dictionary/variant.ts

@@ -77,6 +77,16 @@ const toneVariantDictionary = [
   'quiet',
 ]
 
+const themeVariantChipDictionary = [
+  'primary',
+  'secondary',
+  'dark',
+  'error',
+  'info',
+  'success',
+  'warning',
+]
+
 const toneActionVariantDictionary = [
   'primary',
   'secondary',
@@ -110,6 +120,7 @@ export {
   themeLuminanceVariantDictionary,
   themeStatusVariantDictionary,
   themeVariantDictionary,
+  themeVariantChipDictionary,
   toneActionVariantDictionary,
   toneMinimalVariantDictionary,
   toneSimpleVariantDictionary,

package/src/fixtures/icons.json

@@ -42,6 +42,7 @@
     "mgg/ai-status-processing",
     "mgg/ai-status-suspended",
     "mgg/alerts-pagopa",
+    "mgg/anpr",
     "mgg/ansc",
     "mgg/area-edificabile",
     "mgg/area-weather",
@@ -298,6 +299,7 @@
     "mgg/user-substitution",
     "mgg/view-chart-gantt",
     "mgg/view-side-by-side",
+    "mgg/vote",
     "mgg/warning-superscript",
     "mgg/web-app-ansc",
     "mgg/work-book",
@@ -328,6 +330,8 @@
     "mi/baseline/css",
     "mi/baseline/dark-mode",
     "mi/baseline/description",
+    "mi/baseline/directions-run",
+    "mi/baseline/directions-walk",
     "mi/baseline/done",
     "mi/baseline/downhill-skiing",
     "mi/baseline/eco",
@@ -336,7 +340,6 @@
     "mi/baseline/explore",
     "mi/baseline/file-download-done",
     "mi/baseline/folder-zip",
-    "mi/baseline/groups",
     "mi/baseline/horizontal-rule",
     "mi/baseline/indeterminate-check-box",
     "mi/baseline/info",
@@ -358,6 +361,9 @@
     "mi/baseline/remove-circle",
     "mi/baseline/route",
     "mi/baseline/settings",
+    "mi/baseline/sports",
+    "mi/baseline/sports-soccer",
+    "mi/baseline/stadium",
     "mi/baseline/terminal",
     "mi/baseline/timer",
     "mi/baseline/tv",
@@ -376,7 +382,6 @@
     "mi/outline/schedule",
     "mi/round/arrow-circle-down",
     "mi/round/email",
-    "mi/round/groups",
     "mi/round/menu",
     "mi/round/more-vert",
     "mi/round/person"

package/src/fixtures/iconsauce.json

@@ -30,6 +30,7 @@
     "mgg/ai-status-processing",
     "mgg/ai-status-suspended",
     "mgg/alerts-pagopa",
+    "mgg/anpr",
     "mgg/ansc",
     "mgg/area-edificabile",
     "mgg/area-weather",
@@ -286,6 +287,7 @@
     "mgg/user-substitution",
     "mgg/view-chart-gantt",
     "mgg/view-side-by-side",
+    "mgg/vote",
     "mgg/warning-superscript",
     "mgg/web-app-ansc",
     "mgg/work-book"

package/src/tailwind/components.css

@@ -75,7 +75,7 @@
   }
 
   @container style(--magma-pref-animation: system) {
-    
+
     @media (prefers-reduced-motion) {
       .contrast-area,
       .contrast-area-50 {

package/src/type/autocomplete.ts

@@ -18,7 +18,6 @@ export type AutocompleteType =
   | 'cc-exp-month'
   | 'cc-exp-year'
   | 'cc-family-name'
-  | 'cc-family-name'
   | 'cc-given-name'
   | 'cc-name'
   | 'cc-number'

package/src/type/button.ts

@@ -20,6 +20,7 @@ export type ButtonIconPositionType =
 
 export type ButtonVariantType =
   | 'primary'
+  | 'secondary'
   | 'dark'
   | 'light'
   | 'error'

package/src/type/header-bar.ts

@@ -0,0 +1,11 @@
+export type HeaderBarMenuType =
+  | 'all'
+  | 'desktop'
+  | 'mobile'
+  | 'none'
+
+export type HeaderBarNavType =
+  | 'all'
+  | 'desktop'
+  | 'mobile'
+  | 'none'

package/src/type/input.ts

@@ -23,3 +23,7 @@ export type InputTextType =
   | 'textarea'
   | 'time'
   | 'url'
+
+export interface MdsInputEventDetail {
+  value?: File | string | FormData | null
+}

package/src/type/variant-file-format.ts

@@ -13,12 +13,28 @@ import baselineBorderAll from '@icon/mi/baseline/border-all.svg'
 import baselineDescription from '@icon/mi/baseline/description.svg'
 import mdiVectorCurve from '@icon/mdi/vector-curve.svg'
 import baselineVideocam from '@icon/mi/baseline/videocam.svg'
+import { ThemeFullVariantType } from '@type/variant'
+
+type FileFormat =
+  | 'archive'
+  | 'attachment'
+  | 'audio'
+  | 'code'
+  | 'data'
+  | 'document'
+  | 'email'
+  | 'executable'
+  | 'image'
+  | 'markup'
+  | 'slide'
+  | 'spreadsheet'
+  | 'text'
+  | 'vector'
+  | 'video'
 
 interface FileFormatVariant {
-  color: string
   icon: string
-  iconBackground: string
-  variant: string
+  variant: ThemeFullVariantType
 }
 
 interface FileFormatVariants {
@@ -27,111 +43,78 @@ interface FileFormatVariants {
 
 const fileFormatsVariant: FileFormatVariants = {
   archive: {
-    color: 'fill-label-amaranth-04 text-label-amaranth-04',
     icon: baselineFolderZip,
-    iconBackground: 'bg-label-amaranth-10',
     variant: 'amaranth',
   },
   attachment: {
-    color: 'fill-tone-neutral-04 text-tone-neutral-04',
     icon: baselineAttachFile,
-    iconBackground: 'bg-tone-neutral-10',
     variant: 'dark',
   },
   audio: {
-    color: 'fill-label-violet-04 text-label-violet-04',
     icon: baselineAudiotrack,
-    iconBackground: 'bg-label-violet-10',
     variant: 'violet',
   },
   code: {
-    color: 'fill-label-yellow-04 text-label-yellow-04',
     icon: baselineTerminal,
-    iconBackground: 'bg-label-yellow-10',
     variant: 'yellow',
   },
   data: {
-    color: 'fill-label-yellow-04 text-label-yellow-04',
     icon: mdiHardDisk,
-    iconBackground: 'bg-label-yellow-10',
     variant: 'yellow',
   },
   document: {
-    color: 'fill-label-orange-04 text-label-orange-04',
     icon: baselineInsertDriveFile,
-    iconBackground: 'bg-label-orange-10',
     variant: 'orange',
   },
   email: {
-    color: 'fill-label-blue-04 text-label-blue-04',
     icon: baselineEmail,
-    iconBackground: 'bg-label-blue-10',
     variant: 'blue',
   },
   executable: {
-    color: 'fill-label-amaranth-04 text-label-amaranth-04',
     icon: baselineWysiwyg,
-    iconBackground: 'bg-label-amaranth-10',
     variant: 'amaranth',
   },
   image: {
-    color: 'fill-label-green-04 text-label-green-04',
     icon: baselinePanorama,
-    iconBackground: 'bg-label-green-10',
     variant: 'green',
   },
   imageRaster: {
-    color: 'fill-label-green-04 text-label-green-04',
     icon: baselinePanorama,
-    iconBackground: 'bg-label-green-10',
     variant: 'green',
   },
   markup: {
-    color: 'fill-label-yellow-04 text-label-yellow-04',
     icon: baselineWeb,
-    iconBackground: 'bg-label-yellow-10',
     variant: 'yellow',
   },
   slide: {
-    color: 'fill-label-orchid-04 text-label-orchid-04',
     icon: baselineTV,
-    iconBackground: 'bg-label-orchid-10',
     variant: 'orchid',
   },
   spreadsheet: {
-    color: 'fill-label-lime-04 text-label-lime-04',
     icon: baselineBorderAll,
-    iconBackground: 'bg-label-lime-10',
     variant: 'lime',
   },
   text: {
-    color: 'fill-label-blue-04 text-label-blue-04',
     icon: baselineDescription,
-    iconBackground: 'bg-label-blue-10',
     variant: 'blue',
   },
   vectorImage: {
-    color: 'fill-label-aqua-04 text-label-aqua-04',
     icon: mdiVectorCurve,
-    iconBackground: 'bg-label-aqua-10',
     variant: 'aqua',
   },
   vector: {
-    color: 'fill-label-aqua-04 text-label-aqua-04',
     icon: mdiVectorCurve,
-    iconBackground: 'bg-label-aqua-10',
     variant: 'aqua',
   },
   video: {
-    color: 'fill-label-violet-04 text-label-violet-04',
     icon: baselineVideocam,
-    iconBackground: 'bg-label-violet-10',
     variant: 'violet',
   },
 }
 
 export {
   fileFormatsVariant,
+  FileFormat,
   FileFormatVariant,
   FileFormatVariants,
 }