@maggioli-design-system/mds-input-tip 1.2.2 → 1.3.0

package/documentation.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2024-12-04T15:30:05",
+  "timestamp": "2025-02-25T13:09:05",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.22.2",
+    "version": "4.25.1",
     "typescriptVersion": "5.5.4"
   },
   "components": [
@@ -38,7 +38,9 @@
             }
           ],
           "optional": true,
-          "required": false
+          "required": false,
+          "getter": false,
+          "setter": false
         },
         {
           "name": "position",
@@ -74,13 +76,21 @@
             }
           ],
           "optional": true,
-          "required": false
+          "required": false,
+          "getter": false,
+          "setter": false
         }
       ],
       "methods": [],
       "events": [],
       "listeners": [],
-      "styles": [],
+      "styles": [
+        {
+          "name": "--mds-input-tip-active-translate",
+          "annotation": "prop",
+          "docs": "Set the translate of the tip when it is active."
+        }
+      ],
       "slots": [],
       "parts": [],
       "dependents": [
@@ -219,6 +229,11 @@
       "docstring": "",
       "path": "src/type/button.ts"
     },
+    "src/type/text.ts::TypographyTruncateType": {
+      "declaration": "export type TypographyTruncateType =\n  | 'all'\n  | 'none'\n  | 'word'",
+      "docstring": "",
+      "path": "src/type/text.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": "",
@@ -250,7 +265,7 @@
       "path": "src/components/mds-dropdown/meta/event-detail.ts"
     },
     "src/type/file-types.ts::ExtensionSuffixType": {
-      "declaration": "export type ExtensionSuffixType =\n  | '7z'\n  | 'ace'\n  | 'ai'\n  | 'db'\n  | 'default'\n  | 'dmg'\n  | 'doc'\n  | 'docm'\n  | 'docx'\n  | 'eml'\n  | 'eps'\n  | 'exe'\n  | 'flac'\n  | 'gif'\n  | 'heic'\n  | 'htm'\n  | 'html'\n  | 'jpe'\n  | 'jpeg'\n  | 'jpg'\n  | 'js'\n  | 'json'\n  | 'jsx'\n  | 'm2v'\n  | 'mp2'\n  | 'mp3'\n  | 'mp4'\n  | 'mp4v'\n  | 'mpeg'\n  | 'mpg'\n  | 'mpg4'\n  | 'mpga'\n  | 'odp'\n  | 'ods'\n  | 'odt'\n  | 'pdf'\n  | 'php'\n  | 'png'\n  | 'ppt'\n  | 'rar'\n  | 'rtf'\n  | 'sass'\n  | 'shtml'\n  | 'svg'\n  | 'tar'\n  | 'tiff'\n  | 'ts'\n  | 'txt'\n  | 'wav'\n  | 'webp'\n  | 'xar'\n  | 'xls'\n  | 'xlsx'\n  | 'zip'",
+      "declaration": "export type ExtensionSuffixType =\n  | '7z'\n  | 'ace'\n  | 'ai'\n  | 'db'\n  | 'default'\n  | 'dmg'\n  | 'doc'\n  | 'docm'\n  | 'docx'\n  | 'eml'\n  | 'eps'\n  | 'exe'\n  | 'flac'\n  | 'gif'\n  | 'heic'\n  | 'htm'\n  | 'html'\n  | 'jpe'\n  | 'jpeg'\n  | 'jpg'\n  | 'js'\n  | 'json'\n  | 'jsx'\n  | 'm2v'\n  | 'mp2'\n  | 'mp3'\n  | 'mp4'\n  | 'mp4v'\n  | 'mpeg'\n  | 'mpg'\n  | 'mpg4'\n  | 'mpga'\n  | 'odf'\n  | 'odp'\n  | 'ods'\n  | 'odt'\n  | 'odt'\n  | 'ole'\n  | 'p7m'\n  | 'pdf'\n  | 'php'\n  | 'png'\n  | 'ppt'\n  | 'rar'\n  | 'rtf'\n  | 'sass'\n  | 'shtml'\n  | 'svg'\n  | 'tar'\n  | 'tiff'\n  | 'ts'\n  | 'tsd'\n  | 'txt'\n  | 'wav'\n  | 'webp'\n  | 'xar'\n  | 'xls'\n  | 'xlsx'\n  | 'xml'\n  | 'zip'",
       "docstring": "",
       "path": "src/type/file-types.ts"
     },
@@ -259,11 +274,6 @@
       "docstring": "",
       "path": "src/components/mds-file/meta/event-detail.ts"
     },
-    "src/type/text.ts::TypographyTruncateType": {
-      "declaration": "export type TypographyTruncateType =\n  | 'all'\n  | 'none'\n  | 'word'",
-      "docstring": "",
-      "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: HTMLMdsFilePreviewElement\n}",
       "docstring": "",
@@ -294,6 +304,11 @@
       "docstring": "",
       "path": "src/components/mds-header/meta/event-detail.ts"
     },
+    "src/components/mds-header/meta/event-detail.ts::MdsHeaderVisibilityEventDetail": {
+      "declaration": "export interface MdsHeaderVisibilityEventDetail {\n  visibility: boolean\n}",
+      "docstring": "",
+      "path": "src/components/mds-header/meta/event-detail.ts"
+    },
     "src/components/mds-horizontal-scroll/meta/types.ts::ViewportType": {
       "declaration": "export type ViewportType =\n  | 'all'\n  | 'tv'\n  | 'xlarge'\n  | 'large'\n  | 'wide'\n  | 'desktop'\n  | 'tablet'\n  | 'none'",
       "docstring": "",
@@ -409,6 +424,16 @@
       "docstring": "",
       "path": "src/components/mds-input-upload/meta/types.ts"
     },
+    "src/components/mds-keyboard/meta/type.ts::KeyboardTest": {
+      "declaration": "export type KeyboardTest =\n  | 'pass'\n  | 'fail'",
+      "docstring": "",
+      "path": "src/components/mds-keyboard/meta/type.ts"
+    },
+    "src/type/keyboard.ts::KeyboardKeyName": {
+      "declaration": "export type KeyboardKeyName =\n  | '0'\n  | '1'\n  | '2'\n  | '3'\n  | '4'\n  | '5'\n  | '6'\n  | '7'\n  | '8'\n  | '9'\n  | 'a'\n  | 'alt'\n  | 'altleft'\n  | 'altright'\n  | 'arrowdown'\n  | 'arrowleft'\n  | 'arrowright'\n  | 'arrowup'\n  | 'b'\n  | 'backspace'\n  | 'c'\n  | 'capslock'\n  | 'command'\n  | 'commandleft'\n  | 'commandright'\n  | 'control'\n  | 'controlleft'\n  | 'controlright'\n  | 'd'\n  | 'delete'\n  | 'e'\n  | 'end'\n  | 'enter'\n  | 'escape'\n  | 'f'\n  | 'f1'\n  | 'f10'\n  | 'f11'\n  | 'f12'\n  | 'f2'\n  | 'f3'\n  | 'f4'\n  | 'f5'\n  | 'f6'\n  | 'f7'\n  | 'f8'\n  | 'f9'\n  | 'g'\n  | 'h'\n  | 'home'\n  | 'i'\n  | 'j'\n  | 'k'\n  | 'l'\n  | 'm'\n  | 'n'\n  | 'o'\n  | 'option'\n  | 'optionleft'\n  | 'optionright'\n  | 'p'\n  | 'pagedown'\n  | 'pageup'\n  | 'q'\n  | 'r'\n  | 's'\n  | 'shift'\n  | 'shiftleft'\n  | 'shiftright'\n  | 'space'\n  | 't'\n  | 'tab'\n  | 'u'\n  | 'v'\n  | 'w'\n  | 'windows'\n  | 'windowsleft'\n  | 'windowsright'\n  | 'x'\n  | 'y'\n  | 'z'",
+      "docstring": "",
+      "path": "src/type/keyboard.ts"
+    },
     "src/type/typography.ts::TypographyType": {
       "declaration": "export type TypographyType =\n  | 'action'\n  | 'caption'\n  | 'snippet'\n  | 'detail'\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'hack'\n  | 'label'\n  | 'option'\n  | 'paragraph'\n  | 'tip'",
       "docstring": "",
@@ -429,6 +454,11 @@
       "docstring": "",
       "path": "src/components/mds-modal/meta/types.ts"
     },
+    "src/components/mds-modal/meta/types.ts::ModalOverflowType": {
+      "declaration": "export type ModalOverflowType =\n  | 'auto'\n  | 'manual'",
+      "docstring": "",
+      "path": "src/components/mds-modal/meta/types.ts"
+    },
     "src/type/variant.ts::LabelVariantType": {
       "declaration": "export type LabelVariantType =\n  | 'amaranth'\n  | 'aqua'\n  | 'blue'\n  | 'green'\n  | 'lime'\n  | 'orange'\n  | 'orchid'\n  | 'sky'\n  | 'violet'\n  | 'yellow'",
       "docstring": "",
@@ -489,11 +519,6 @@
       "docstring": "",
       "path": "src/components/mds-progress/meta/types.ts"
     },
-    "src/type/date.ts::ISO8601Date": {
-      "declaration": "type ISO8601Date = ISO8601DateFormat<string, 'ISO8601Date'>",
-      "docstring": "",
-      "path": "src/type/date.ts"
-    },
     "src/components/mds-push-notification/meta/types.ts::NotificationDateFormatType": {
       "declaration": "string",
       "docstring": "",
@@ -524,6 +549,11 @@
       "docstring": "",
       "path": "src/components/mds-stepper-bar-item/meta/event-detail.ts"
     },
+    "src/type/animation.ts::HorizontalActionsAnimationType": {
+      "declaration": "export type HorizontalActionsAnimationType =\n  | 'fade'\n  | 'slide'",
+      "docstring": "",
+      "path": "src/type/animation.ts"
+    },
     "src/components/mds-tab/meta/event-detail.ts::MdsTabEventDetail": {
       "declaration": "export interface MdsTabEventDetail {\n  id: number\n  value?: string\n}",
       "docstring": "",
@@ -544,6 +574,16 @@
       "docstring": "",
       "path": "src/components/mds-tab-item/meta/event-detail.ts"
     },
+    "src/components/mds-table/meta/event-detail.ts::MdsTableSelectionEventDetail": {
+      "declaration": "export interface MdsTableSelectionEventDetail {\n  rows: MdsTableRowSelection[]\n}",
+      "docstring": "",
+      "path": "src/components/mds-table/meta/event-detail.ts"
+    },
+    "src/components/mds-table/meta/type.ts::MdsTableRowSelection": {
+      "declaration": "{\n  index: number\n  value?: string | number\n}",
+      "docstring": "",
+      "path": "src/components/mds-table/meta/type.ts"
+    },
     "src/components/mds-table-header-cell/meta/types.ts::SortDirectionType": {
       "declaration": "export type SortDirectionType =\n  | 'ascending'\n  | 'descending'\n  | 'none'",
       "docstring": "",
@@ -574,6 +614,26 @@
       "docstring": "",
       "path": "src/type/typography.ts"
     },
+    "src/type/tree.ts::TreeAppearance": {
+      "declaration": "export type TreeAppearance =\n  | 'none'\n  | 'depth'",
+      "docstring": "",
+      "path": "src/type/tree.ts"
+    },
+    "src/type/tree.ts::TreeIcon": {
+      "declaration": "export type TreeIcon =\n  | 'folder'\n  | 'chevron'",
+      "docstring": "",
+      "path": "src/type/tree.ts"
+    },
+    "src/type/tree.ts::TreeActions": {
+      "declaration": "export type TreeActions =\n  | 'auto'\n  | 'visible'",
+      "docstring": "",
+      "path": "src/type/tree.ts"
+    },
+    "src/components/mds-tree-item/meta/event-detail.ts::MdsTreeItemEventDetail": {
+      "declaration": "export interface MdsTreeItemEventDetail {\n  element: HTMLMdsTreeItemElement\n}",
+      "docstring": "",
+      "path": "src/components/mds-tree-item/meta/event-detail.ts"
+    },
     "src/components/mds-usage/meta/types.ts::UsageType": {
       "declaration": "export type UsageType =\n  | 'do'\n  | 'dont'\n  | 'info'\n  | 'warn'",
       "docstring": "",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maggioli-design-system/mds-input-tip",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "mds-input-tip 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",
@@ -24,9 +24,9 @@
     "test": "stencil test --spec --e2e"
   },
   "dependencies": {
-    "@maggioli-design-system/mds-input-tip-item": "1.2.2",
-    "@maggioli-design-system/styles": "15.5.0",
-    "@stencil/core": "4.22.2"
+    "@maggioli-design-system/mds-input-tip-item": "1.3.0",
+    "@maggioli-design-system/styles": "15.8.0",
+    "@stencil/core": "4.25.1"
   },
   "license": "MIT",
   "author": {

package/readme.md

@@ -13,6 +13,13 @@
 | `position` | `position` | Specifies the position of the element relative to its container         | `"bottom" \| "top" \| undefined` | `'top'` |
 
 
+## CSS Custom Properties
+
+| Name                               | Description                                     |
+| ---------------------------------- | ----------------------------------------------- |
+| `--mds-input-tip-active-translate` | Set the translate of the tip when it is active. |
+
+
 ## Dependencies
 
 ### Used by

package/src/common/floating-controller.ts

@@ -0,0 +1,263 @@
+import {
+  arrow,
+  autoPlacement,
+  autoUpdate,
+  computePosition,
+  flip,
+  Middleware,
+  MiddlewareData,
+  offset,
+  shift,
+} from '@floating-ui/dom'
+import { FloatingUIPlacement, FloatingUIStrategy } from '@type/floating-ui'
+import { cssDurationToMilliseconds } from './unit'
+import { setAttributeIfEmpty } from './aria'
+import { HTMLStencilElement } from '@stencil/core/internal'
+
+export interface FloatingElement extends PositionOptions {
+  host: HTMLFloatingElement,
+}
+
+export interface HTMLFloatingElement extends HTMLStencilElement, PositionOptions {
+  visible: boolean,
+}
+
+export interface PositionOptions {
+  arrow: boolean;
+  arrowPadding: number;
+  autoPlacement: boolean;
+  flip: boolean;
+  offset: number;
+  placement: FloatingUIPlacement;
+  shift: boolean;
+  shiftPadding: number;
+  strategy: FloatingUIStrategy;
+}
+
+export class FloatingController {
+  private _caller: HTMLElement
+  private readonly _host: HTMLFloatingElement
+  arrowEl: HTMLElement | undefined
+
+  private cleanupAutoUpdate: () => void
+
+  constructor (host: HTMLFloatingElement, arrowEl?: HTMLElement) {
+    this._host = host
+    this.arrowEl = arrowEl
+  }
+
+  updateCaller (target: string): HTMLElement {
+    // search caller in document or rootNode of host (if target is in shadowDOM)
+    const caller = (this._host.parentElement?.shadowRoot?.querySelector(target) as HTMLElement) ??
+      ((this._host.getRootNode() as HTMLElement).querySelector(target) as HTMLElement)
+
+    if (!caller) {
+      throw Error(`Target not found: ${target}`)
+    }
+
+    this._caller = caller
+
+    setAttributeIfEmpty(this._caller, 'aria-haspopup', 'true')
+    setAttributeIfEmpty(this._caller, 'aria-controls', target)
+    setAttributeIfEmpty(this._host, 'role', 'menu')
+    setAttributeIfEmpty(this._host, 'aria-labelledby', target)
+    return caller
+  }
+
+  private readonly arrowInset = (
+    middleware: MiddlewareData,
+    arrowPosition: string,
+  ): { bottom?: string; left?: string; right?: string; top?: string } => {
+    const { arrow } = middleware
+    const inset = { bottom: '', left: '', right: '', top: '' }
+
+    if (arrow === undefined) {
+      return {}
+    }
+
+    switch (arrowPosition) {
+    case 'bottom':
+      inset.left = arrow.x !== null ? `${arrow.x}px` : ''
+      inset.top = '100%'
+      break
+    case 'left':
+      inset.right = '100%'
+      inset.top = arrow.y !== null ? `${arrow.y}px` : ''
+      break
+    case 'right':
+      inset.left = '100%'
+      inset.top = arrow.y !== null ? `${arrow.y}px` : ''
+      break
+    case 'top':
+      inset.left = arrow.x !== null ? `${arrow.x}px` : ''
+      inset.top = ''
+      break
+    default:
+      break
+    }
+    return inset
+  }
+
+  private readonly arrowTransform = (
+    arrowPosition: string,
+  ): { transform: string } => {
+    let transformProps = this._host.arrow && this._host.visible ? 'scale(1)' : 'scale(0)'
+    switch (arrowPosition) {
+    case 'bottom':
+      transformProps = `rotate(180deg) ${transformProps} translate(0, -100%)`
+      break
+    case 'left':
+      transformProps = `rotate(-90deg) ${transformProps} translate(50%, -50%)`
+      break
+    case 'right':
+      transformProps = `rotate(90deg) ${transformProps} translate(-50%, -50%)`
+      break
+    case 'top':
+      transformProps = `rotate(0deg) ${transformProps} translate(0, 0)`
+      break
+    default:
+      break
+    }
+    return { transform: transformProps }
+  }
+
+  private readonly arrowTransformOrigin = (
+    arrowPosition: string,
+  ): { transformOrigin: string } => {
+    switch (arrowPosition) {
+    case 'bottom':
+      return { transformOrigin: 'center top' }
+    case 'left':
+      return { transformOrigin: 'right center' }
+    case 'right':
+      return { transformOrigin: 'left center' }
+    case 'top':
+      return { transformOrigin: 'center bottom' }
+    default:
+      return { transformOrigin: 'center top' }
+    }
+  }
+
+  private readonly calculatePosition = (): void => {
+    if (!this._caller) return
+
+    const middleware: Middleware[] = new Array<Middleware>()
+    const config: { padding?: number } = {}
+
+    if (this._host.shiftPadding) {
+      config.padding = this._host.shiftPadding
+    }
+
+    if (this._host.autoPlacement) {
+      middleware.push(autoPlacement())
+    }
+
+    if (this._host.offset) {
+      middleware.push(offset(this._host.offset))
+    }
+
+    if (!this._host.autoPlacement && this._host.flip) {
+      middleware.push(flip(config))
+    }
+
+    if (this._host.shift) {
+      middleware.push(shift(config))
+    }
+
+    if (this.arrowEl && this._host.arrow) {
+      middleware.push(
+        arrow({
+          element: this.arrowEl,
+          padding: this._host.arrowPadding,
+        }),
+      )
+    }
+
+    computePosition(this._caller, this._host, {
+      middleware,
+      placement: this._host.placement,
+      strategy: this._host.strategy,
+    }).then(({ x, y, placement, middlewareData }) => {
+      Object.assign(this._host.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+      })
+
+      const arrowStyle = {}
+      const arrowPosition = {
+        top: 'bottom',
+        right: 'left',
+        bottom: 'top',
+        left: 'right',
+      }[placement.split('-')[0]]
+
+      if (arrowPosition && this.arrowEl) {
+        Object.assign(arrowStyle, this.arrowTransform(arrowPosition))
+        Object.assign(
+          arrowStyle,
+          this.arrowInset(middlewareData, arrowPosition),
+        )
+        Object.assign(arrowStyle, this.arrowTransformOrigin(arrowPosition))
+        Object.assign(this.arrowEl.style, arrowStyle)
+      }
+    })
+  }
+
+  updatePosition (): void {
+    if (this.cleanupAutoUpdate) this.cleanupAutoUpdate()
+    this.cleanupAutoUpdate = autoUpdate(this._caller, this._host, this.calculatePosition)
+  }
+
+  dismiss (): void {
+    this.cleanupAutoUpdate()
+  }
+}
+
+export class Backdrop {
+  private readonly defaultBackdropId = 'magma-backdrop'
+  private readonly backdropBackgroundVisible = 'rgba(var(--magma-backdrop-color, 0 0 0) / var(--magma-backdrop-opacity, 0.1))'
+  private readonly backdropBackgroundHidden = 'rgba(var(--magma-backdrop-color, 0 0 0) / 0)'
+
+  private readonly backdropId: string
+  private readonly cssBackdropZIndex: string
+  private readonly cssBackdropDuration: string
+
+  private backdropEl: HTMLElement
+  private backdropTimer: NodeJS.Timeout
+
+  constructor (backdropId?: string) {
+    this.backdropId = backdropId ?? this.defaultBackdropId
+    this.cssBackdropZIndex = `var(--${this.backdropId}-z-index, 4000)`
+    this.cssBackdropDuration = `var(--${this.backdropId}-animation-duration, 300ms)`
+  }
+
+  attachBackdrop (): void {
+    if (!this.backdropEl) {
+      this.backdropEl = document.createElement('div')
+      this.backdropEl.className = this.backdropId
+      this.backdropEl.style.inset = '0'
+      this.backdropEl.style.pointerEvents = 'none'
+      this.backdropEl.style.position = 'fixed'
+      this.backdropEl.style.transition = `background-color ${this.cssBackdropDuration} ease-out`
+      this.backdropEl.style.zIndex = this.cssBackdropZIndex
+    }
+    this.backdropEl.style.backgroundColor = this.backdropBackgroundHidden
+    document.body.appendChild(this.backdropEl)
+
+    clearTimeout(this.backdropTimer)
+    this.backdropTimer = setTimeout(() => {
+      this.backdropEl.style.backgroundColor = this.backdropBackgroundVisible
+    }, 1)
+  }
+
+  detachBackdrop (): void {
+    if (!this.backdropEl) {
+      return
+    }
+    this.backdropEl.style.backgroundColor = 'transparent'
+    clearTimeout(this.backdropTimer)
+    this.backdropTimer = setTimeout(() => {
+      this.backdropEl.remove()
+    }, cssDurationToMilliseconds(this.cssBackdropDuration))
+  }
+}

package/src/common/slot.ts

@@ -0,0 +1,35 @@
+const hasSlottedElements = (el: HTMLElement, name?: string): boolean => {
+  const query = name ? `slot[name="${name}"]` : 'slot:not([name])'
+
+  const slot: HTMLSlotElement = el.shadowRoot?.querySelector(query) as HTMLSlotElement
+  if (slot) {
+    return slot.assignedElements({ flatten: true }).length > 0
+  }
+  return false
+}
+
+const hasSlottedNodes = (el: HTMLElement, name?: string): boolean => {
+  const query = name ? `slot[name="${name}"]` : 'slot:not([name])'
+
+  const slot: HTMLSlotElement = el.shadowRoot?.querySelector(query) as HTMLSlotElement
+  if (slot) {
+    return slot.assignedNodes().length > 0
+  }
+  return false
+}
+
+const hasSlotted = (el: HTMLElement, name?: string): boolean => {
+  const query = name ? `slot[name="${name}"]` : 'slot:not([name])'
+
+  const slot: HTMLSlotElement = el.shadowRoot?.querySelector(query) as HTMLSlotElement
+  if (slot) {
+    return slot.assignedNodes().length > 0 || slot.assignedElements().length > 0
+  }
+  return false
+}
+
+export {
+  hasSlottedElements,
+  hasSlottedNodes,
+  hasSlotted,
+}

package/src/common/string.ts

@@ -0,0 +1,42 @@
+const levenshteinDistance = (a: string, b: string): number => {
+  const dp: number[][] = Array.from({ length: a.length + 1 }, (_, i) =>
+    // eslint-disable-next-line no-nested-ternary
+    Array.from({ length: b.length + 1 }, (_, j) => (i === 0 ? j : j === 0 ? i : 0)),
+  )
+
+  for (let i = 1; i <= a.length; i++) {
+    for (let j = 1; j <= b.length; j++) {
+      if (a[i - 1] === b[j - 1]) {
+        dp[i][j] = dp[i - 1][j - 1]
+      } else {
+        dp[i][j] = 1 + Math.min(dp[i - 1][j], dp[i][j - 1], dp[i - 1][j - 1])
+      }
+    }
+  }
+
+  return dp[a.length][b.length]
+}
+
+
+const closest = (input: string, validCodes: string[]): string => {
+  let [closest] = validCodes
+  let minDistance = levenshteinDistance(input, closest)
+
+  for (const code of validCodes) {
+    const distance = levenshteinDistance(input, code)
+    if (distance < minDistance) {
+      minDistance = distance
+      closest = code
+    }
+  }
+
+  return closest
+}
+
+const firstLetterUppercase = (str: string): string => str.charAt(0).toUpperCase() + str.slice(1)
+
+export {
+  closest,
+  firstLetterUppercase,
+  levenshteinDistance,
+}

package/src/components/mds-input-tip/mds-input-tip.css

@@ -1,5 +1,9 @@
 @tailwind utilities;
 
+/**
+ * @prop --mds-input-tip-active-translate: Set the translate of the tip when it is active.
+ */
+
 :host {
 
   --mds-input-tip-active-translate: translate(0, 0);
@@ -52,3 +56,4 @@
 }
 
 @import './css/mds-input-tip-pref-animation.css';
+@import '../../tailwind/fouc.css';

package/src/components/mds-input-tip/readme.md

@@ -13,6 +13,13 @@
 | `position` | `position` | Specifies the position of the element relative to its container         | `"bottom" \| "top" \| undefined` | `'top'` |
 
 
+## CSS Custom Properties
+
+| Name                               | Description                                     |
+| ---------------------------------- | ----------------------------------------------- |
+| `--mds-input-tip-active-translate` | Set the translate of the tip when it is active. |
+
+
 ----------------------------------------------
 
 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/dictionary/animation.ts

@@ -0,0 +1,8 @@
+const horizontalActionsAnimationDictionary = [
+  'fade',
+  'slide',
+]
+
+export {
+  horizontalActionsAnimationDictionary,
+}