@ulu/frontend 0.2.0-beta.9 → 0.3.0

package/lib/scss/components/_modal.scss

@@ -4,6 +4,7 @@
 
 @use "sass:map";
 @use "sass:meta";
+@use "sass:list";
 
 @use "../color";
 @use "../element";
@@ -11,9 +12,14 @@
 @use "../typography";
 @use "../selector";
 @use "../utils";
+@use "../breakpoint";
 
 // Used for function fallback
 $-fallbacks: (
+  "breakpoint" : (
+    "function" : meta.get-function("get", false, "breakpoint"),
+    "property" : "default"
+  ),
   "backdrop-color" : (
     "function" : meta.get-function("get", false, "element"),
     "property" : "backdrop-color"
@@ -43,6 +49,7 @@ $-fallbacks: (
 /// @prop {Dimension} height [340px] The min-height of the modal.
 /// @prop {Dimension} height-no-header [100px] The min-height of the modal.
 /// @prop {Dimension} width [60rem] The width of the Modal
+/// @prop {Dimension} min-width [300px] The min-width of the Modal (for resizing, etc)
 /// @prop {Time} animation-duration [300ms] Animation duration for the modal opening.
 /// @prop {Time} animation-duration-exit [150ms] Animation duration for the modal closing.
 /// @prop {CssValue} animation-timing-function [cubic-bezier(0, 0, .2, 1)] The animation timing menu of the modal.
@@ -75,6 +82,9 @@ $-fallbacks: (
 /// @prop {String} title-size [large] The font-size of the title. This uses typography.scss, so the value of this options should be a variable from typography.scss.
 /// @prop {CssValue} title-text-transform [null] Transform option for the title.
 /// @prop {Map} sizes [Map] Size options to enable unique stylings.
+/// @prop {String} breakpoint [true] Optional breakpoint for modals (used for adaptive things like fullscreen-mobile), if set to true will fallback to breakpoint default
+/// @prop {String} frame-aspect-ratio [list.slash(16, 9)] Default aspect ratio for single embedded items in frame-ratio layout
+/// @prop {String} frame-fill-min-height [65vh] Default minimum height for single embedded items in frame-fill layout
 
 $config: (
   "backdrop-color" :                true,
@@ -86,6 +96,7 @@ $config: (
   "height":                         340px,
   "height-no-header":               100px,
   "width":                          60rem,
+  "min-width":                      300px,
   "width-left-right" :              30rem,
   "animation-duration" :            300ms,
   "animation-duration-exit" :       150ms,
@@ -119,6 +130,9 @@ $config: (
   "title-icon-margin" :             0.5em,
   "title-size" :                    "large",
   "title-text-transform" :          null,
+  "breakpoint" :                    true,
+  "frame-aspect-ratio" :            list.slash(16, 9),
+  "frame-fill-min-height" :         65vh,
   "sizes" : (
     "small" : 30rem,
     "large" : 80rem
@@ -150,6 +164,7 @@ $config: (
 
 @mixin styles {
   $prefix: selector.class("modal");
+  $breakpoint: get("breakpoint");
 
   // // Before it's moved
   [data-ulu-modal-builder] {
@@ -171,9 +186,10 @@ $config: (
     padding: 0;
     border: 0;
     width: get("width");
-    min-width: 200px; // For resizing minimum width
+    min-width: get("min-width"); // For resizing minimum width
     min-height: get("height");
     max-height: 100vh;
+    max-height: 100dvh;
     max-width: 100%;
     overflow-y: hidden;
     box-sizing: border-box;
@@ -196,19 +212,20 @@ $config: (
     display: flex;
     justify-content: space-between;
     align-items: center;
-    flex: 0;
+    flex: 0 0 auto;
     padding: get("header-padding");
     border-bottom: get("header-border-bottom");
     background-color: color.get(get("header-background-color"));
     color: color.get(get("header-color"));
   }
   #{ $prefix }__body {
-    flex: 1;
+    flex: 1 1 auto;
+    min-height: 0; // to ensure the flex grow container can get smaller than it's content (and scroll) when needed
     overflow: auto;
     padding: get("body-padding");
   }
   #{ $prefix }__footer {
-    flex: 0;
+    flex: 0 0 auto;
     padding: get("footer-padding");
     background-color: color.get(get("footer-background-color"));
     border-top: get("footer-border-top");
@@ -245,10 +262,6 @@ $config: (
     }
   }
 
-  #{ $prefix }__close-icon {
-  // transform: translatey(get("close-icon-vertical-offset"));
-  }
-
   #{ $prefix }__resizer {
     position: absolute;
     overflow: hidden;
@@ -293,15 +306,17 @@ $config: (
     }
   }
 
-  #{ $prefix }--fullscreen {
-    width: 100%;
-    height: 100%;
-    border-radius: 0;
+  // Fullscreen and left and right defaults (width overridden below)
+  #{ $prefix }--fullscreen,
+  #{ $prefix }--right,
+  #{ $prefix }--left {
+    @include -fullscreen-common-properties();
   }
+  // Left/Right specific
+  // - Note these properties are all important even though they seem redundant
+  //   they are tested and solve quirks with dialog positioning/animation
   #{ $prefix }--right,
   #{ $prefix }--left {
-    border-radius: 0;
-    height: 100vh;
     width: get("width-left-right");
     top: 0;
     bottom: 0;
@@ -358,11 +373,11 @@ $config: (
     &#{ $prefix }--left  {
       padding-right: get("resizer-width");  
     }
-    // &#{ $prefix }--center  {
-    //   resize: both;  
-    // }
   }
-  #{ $prefix }--body-fills {
+  // Share body flush layout
+  #{ $prefix }--body-fills,
+  #{ $prefix }--frame-ratio,
+  #{ $prefix }--frame-fill {
     #{ $prefix }__header {
       border-bottom: none;
     }
@@ -370,10 +385,65 @@ $config: (
       padding: 0;
     }
   }
-
   #{ $prefix }--no-min-height {
     min-height: 0;
   }
+
+  // Frame layouts for absolute positioned single content (e.g. iframes)
+  // Both modes use absolute positioning to escape wrappers (p, div, etc)
+  #{ $prefix }--frame-ratio,
+  #{ $prefix }--frame-fill {
+    #{ $prefix }__body {
+      position: relative;
+    }
+    #{ $prefix }__frame-content {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border: none;
+    }
+  }
+
+  // Ratio-specific: disable minimum heights and flex-grow so it perfectly wraps
+  #{ $prefix }--frame-ratio {
+    min-height: 0;
+    #{ $prefix }__body {
+      flex: none; 
+      // Default, can be overridden inline
+      aspect-ratio: utils.normalize-aspect-ratio(get("frame-aspect-ratio")); 
+    }
+  }
+
+  // Fill-specific: default height
+  #{ $prefix }--frame-fill {
+    #{ $prefix }__body {
+      // Default, can be overridden inline
+      min-height: get("frame-fill-min-height"); 
+    }
+  }
+
+  @if breakpoint.exists($breakpoint) {
+    #{ $prefix }--fullscreen-mobile {
+      @include breakpoint.max($breakpoint) {
+        @include -fullscreen-common-properties();
+        top: 50%;
+        left: 50%;
+        bottom: auto;
+        right: auto;
+        transform: translate(-50%, -50%);
+        animation: uluModalCenterOut get("animation-duration-exit") get("animation-timing-function");
+        &[open] {
+          animation: uluModalCenterIn get("animation-duration") get("animation-timing-function");
+        }
+        #{ $prefix }__resizer {
+          display: none;
+        }
+      }
+    }
+  }
+
   // Will display as content when printing
   // NOTE: This will not work with native dialog
   // Printing works with modal printer by cloning mechanism
@@ -522,3 +592,11 @@ $config: (
   }
 }
 
+
+// Internal mixin to make sure this repeated CSS is identical for compression
+@mixin -fullscreen-common-properties() {
+  width: 100%;
+  height: 100%;
+  height: 100dvh;
+  border-radius: 0;
+}

package/lib/scss/components/_panel.scss

@@ -229,7 +229,7 @@ $styles: (
   font-family: map.get($props, "font-family");
   color: color.get(map.get($props, "color"));
   box-shadow: map.get($props, "box-shadow");
-  flex-grow: if(map.get($props, "grow") == false, 0, 1); // Default is grow
+  flex-grow: utils.when(map.get($props, "grow") == false, 0, 1); // Default is grow
   border-top: element.get-optional-rule-style(map.get($props, "border-top"));
   border-bottom: element.get-optional-rule-style(map.get($props, "border-bottom"));
   

package/lib/scss/components/_popover.scss

@@ -8,9 +8,9 @@
 @use "sass:map";
 @use "sass:meta";
 
+@use "../utils";
 @use "../selector";
 @use "../typography";
-@use "../utils";
 @use "../color";
 @use "../layout";
 @use "../element";
@@ -298,11 +298,14 @@ $config: (
   $hypotenuse: utils.hypotenuse($unitless, $unitless);
   $hypotenuse-half: math.div($hypotenuse, 2);
   $manual-extent: get("arrow-box-shadow-extent");
-  $shadow-extent: if(
-    $manual-extent,
-    $manual-extent,
-    if(utils.is-list($box-shadow), utils.box-shadow-extent($box-shadow), 5px)
-  );
+  $shadow-extent: 5px;
+  
+  @if ($manual-extent) {
+    $shadow-extent: $manual-extent;
+  } @else if (utils.is-list($box-shadow)) {
+    $shadow-extent: utils.box-shadow-extent($box-shadow);
+  }
+
   $overlap: utils.strip-unit($shadow-extent);
   $mask-height: utils.add-unit($hypotenuse-half + $overlap, $unit);
   $mask-width: utils.add-unit($hypotenuse + $overlap, $unit);

package/lib/scss/components/_ratio-box.scss

@@ -1,23 +1,26 @@
 ////
 /// @group ratio-box
 ////
-/// Uses padding trick to keep ratio. Defaults to 4:3 (standard). Used for responsive iframe or images (object-fit), etc
+/// Uses aspect-ratio to keep ratio. Defaults to 4/3 (standard). Used for responsive iframe or images (object-fit), etc.
 
 @use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+@use "sass:list";
 @use "../utils";
 @use "../layout";
 
 /// Module Settings
 /// @type Map
-/// @prop {Number} size [75%] Default height ratio (of width 100%)
+/// @prop {String|Number} size ["4/3"] Default aspect ratio (can be string like "16/9" or legacy percentage value)
 /// @prop {Map} sizes [Map] Other ratios to add (apply with modifier class)
 
 $config: (
-  "size" : 75%,
+  "size" : list.slash(4, 3),
   "sizes" : (
-    "16x9" : 56.25%,
-    "9x16" : 177.77%,
-    "3x4" : 133.33%
+    "16x9" : list.slash(16, 9),
+    "9x16" : list.slash(9, 16),
+    "3x4" : list.slash(3, 4)
   )
 ) !default;
 
@@ -46,16 +49,14 @@ $config: (
 @mixin styles {
   .ratio-box {
     position: relative;
-    overflow: hidden;
-    padding: get("size") 0 0 0; 
+    aspect-ratio: utils.normalize-aspect-ratio(get("size"));
   }
   .ratio-box__content {
     @include layout.absolute-fill(true);
-    border: 0;
   }
   @each $name, $size in get("sizes") {
     .ratio-box--#{ $name } {
-      padding-top: $size; 
+      aspect-ratio: utils.normalize-aspect-ratio($size);
     }
   }
 }

package/lib/scss/components/_table-scroller.scss

@@ -0,0 +1,63 @@
+////
+/// @group table-scroller
+/// Simple wrapper for tables to make them overflow-x, not to be confused with 
+/// sticky table plugin, this is for simple html tables
+/// - Note in situations where you can't use a wrapper you can sometimes get by with display block / max-content hack
+////
+
+@use "sass:map";
+@use "sass:math";
+
+@use "../selector";
+@use "../utils";
+
+/// Module Settings
+/// @type Map
+/// @prop {List|Number} margin  [(1em, 0)] Optional margin for this component
+
+$config: (
+  "margin" : (1em, 0),
+  // "example":            "background",
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-table-scroller-set(( "property" : value ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example scss
+///   @include ulu.component-table-scroller-get("property");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "table-scroller [config]");
+}
+
+/// Prints component styles
+/// @demo table-scroller
+/// @example scss
+///  @include ulu.component-table-scroller-styles();
+
+@mixin styles {
+  $prefix: selector.class("table-scroller");
+  
+  #{ $prefix } {
+    width: 100%;
+    overflow-x: auto;
+    margin: get("margin");
+    > table {
+      min-width: 100%;
+      max-width: none;
+    }
+  }
+  #{ $prefix }--nowrap {
+    > table > thead th {
+      white-space: nowrap;
+    }
+  }
+}

package/lib/scss/components/_tabs.scss

@@ -6,13 +6,13 @@
 @use "sass:map";
 @use "sass:meta";
 
+@use "../utils";
 @use "../color";
 @use "../selector";
 @use "../breakpoint";
 @use "../layout";
 @use "../typography";
 @use "../element";
-@use "../utils";
 
 // Used for function fallback
 $-fallbacks: (
@@ -43,7 +43,10 @@ $-fallbacks: (
 /// @prop {Color} indicator-transition-duration [200ms] The transition duration for indicator
 /// @prop {Color} indicator-scale-start [0] The starting scale for the indicator (set to 1 to disable expanding on click)
 /// @prop {Color} tab-color [link] The type color for the tabs. This uses color.scss, so the value of this options should be a variable from color.scss.
-/// @prop {Color} tab-color-hover [link-hover] The type color for the tabs when hovered or focused. This uses color.scss, so the value of this options should be a variable from color.scss.
+/// @prop {Color} tab-color-hover [link-hover] The type color for the tabs when hovered. This uses color.scss, so the value of this options should be a variable from color.scss.
+/// @prop {Color|null} tab-color-focus [null] The type color for a tab when it has keyboard focus.
+/// @prop {Color} tab-background-color-focus [#eeeeee] The background color for a tab when it has keyboard focus.
+/// @prop {Boolean} tab-hide-native-focus [true] Hides the default browser outline on focused tabs.
 /// @prop {Color} tab-color-selected [selected] The tab type color when selected. This uses color.scss, so the value of this options should be a variable from color.scss.
 /// @prop {Color} tab-background-color-selected [null] The tab background color when selected
 /// @prop {CssValue} tab-font-weight [true] The font weight for the tab, defaults to typography "font-weight-semibold"
@@ -69,6 +72,9 @@ $config: (
   "indicator-scale-start" : 0,
   "tab-color" : "type-tertiary",
   "tab-color-hover" : "selected",
+  "tab-color-focus": null,
+  "tab-background-color-focus": "selected-background",
+  "tab-hide-native-focus": true,
   "tab-color-selected" : "selected",
   "tab-background-color-selected" : null,
   "tab-font-weight" : true,
@@ -159,12 +165,21 @@ $config: (
       // Add focus so as user clicks item it starts the active state styling
       &:focus,
       &[aria-selected="true"] {
-        outline: none; // We are providing focus styling
+        @if get("tab-hide-native-focus") {
+          outline: none;
+        }
         &::after {
           opacity: 1;
           transform: scaleX(1);
         }
       }
+      // Add new focus-specific colors
+      // Using :focus-visible so it only applies to keyboard focus
+      &:focus-visible,
+      &[aria-selected="true"]:focus-visible {
+        color: color.get(get("tab-color-focus"));
+        background-color: color.get(get("tab-background-color-focus"));
+      }
       &[aria-selected="true"] {
         color: color.get(get("tab-color-selected"));
         background-color: color.get(get("tab-background-color-selected"));
@@ -209,8 +224,8 @@ $config: (
         white-space: normal;
         text-align: left;
         &::after {
-          left: if(get("vertical-indicator-left"), 0, auto);
-          right: if(not get("vertical-indicator-left"), 0, auto);;
+          left: utils.when(get("vertical-indicator-left"), 0, auto);
+          right: utils.when(not get("vertical-indicator-left"), 0, auto);
           bottom: 0;
           top: 0;
           width: get("indicator-size");

package/lib/scss/components/_tagged.scss

@@ -0,0 +1,59 @@
+////
+/// @group tagged
+/// Provides styles to tags that should appear as superscripts of their related content. Custom properties --ulu-tagged-y, --ulu-tagged-x, and --ulu-tagged-transform can be adjusted if needed (inline style, in a specific styling for something, etc)
+////
+
+@use "sass:map";
+
+@use "../selector";
+@use "../utils";
+
+/// Module Settings
+/// @type Map
+/// @prop {Dimension} position-x [-0.75em] Horizontal absolute position of the tag.
+/// @prop {Dimension} position-y [-0.75em] Vertical absolute position of the tag.
+/// @prop {CssValue} icon-opacity [null] Adds a transform styling to the tag.
+
+$config: (
+  "position-x": 0,
+  "position-y": 0,
+  "transform":  translate(50%, -50%)
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-tagged-set(( "property" : value ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example scss
+///   @include ulu.component-tagged-get("property");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "tagged [config]");
+}
+
+/// Output component styles
+/// @example scss
+///  @include ulu.component-tagged-styles();
+
+@mixin styles {
+
+  $prefix: selector.class("tagged");
+
+  #{ $prefix } {
+    position: relative;
+  }
+  #{ $prefix }__tag {
+    position: absolute;
+    top: var(--ulu-tagged-y, get("position-y"));
+    right: var(--ulu-tagged-x, get("position-x"));
+    transform: var(--ulu-tagged-transform, get("transform"));
+    margin: 0; // So it doesn't interfere if present
+  }
+}

package/lib/scss/helpers/_utilities.scss

@@ -23,7 +23,8 @@
   $prefix-crop-margins: selector.class("crop-margins");
   $prefix-no-padding: selector.class("no-padding");
   $prefix-align-self: selector.class("align-self");
-
+  $prefix-align-items: selector.class("align-items");
+  $prefix-justify-content: selector.class("justify-content");
 
   @include utils.file-header('helpers', 'utilities');
   
@@ -129,6 +130,27 @@
   #{ $prefix-align-self }-baseline {
     align-self: baseline;
   }
+  #{ $prefix-align-items }-start {
+    align-items: flex-start;
+  }
+  #{ $prefix-align-items }-center {
+    align-items: center;
+  }
+  #{ $prefix-align-items }-end {
+    align-items: flex-end;
+  }
+  #{ $prefix-justify-content }-start {
+    justify-content: flex-start;
+  }
+  #{ $prefix-justify-content }-center {
+    justify-content: center;
+  }
+  #{ $prefix-justify-content }-end {
+    justify-content: flex-end;
+  }
+  #{ $prefix-justify-content }-space-between {
+    justify-content: space-between;
+  }
   #{ selector.class("overflow-hidden") } {
     overflow: hidden;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.2.0-beta.9",
+  "version": "0.3.0",
   "description": "A framework-agnostic frontend toolkit providing a modular, tree-shakable library of accessible components and utilities. Designed for seamless integration, it features a highly configurable SCSS system for any environment and vanilla JavaScript modules optimized for traditional websites and content management systems.",
   "type": "module",
   "files": [
@@ -12,9 +12,9 @@
   "types": "./dist/es/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/es/index.d.ts",
       "import": "./dist/es/index.js",
-      "require": "./dist/umd/ulu-frontend.umd.js",
-      "types": "./dist/es/index.d.ts"
+      "require": "./dist/umd/ulu-frontend.umd.js"
     },
     "./style.css": "./dist/umd/style.css",
     "./scss/*.scss": "./lib/scss/*.scss",
@@ -33,16 +33,12 @@
     "build": "npm run build:es && npm run build:umd",
     "build:es": "BUILD_FORMAT=es vite build",
     "build:umd": "BUILD_FORMAT=umd vite build",
-    "docs": "npx @11ty/eleventy --serve --config=docs.eleventy.js",
-    "docs:incremental": "npx @11ty/eleventy --serve --incremental --config=docs.eleventy.js",
-    "docs:nogen": "NO_DOC_GEN=true npx @11ty/eleventy --serve --incremental --config=docs.eleventy.js",
-    "docs:inspect": "node --inspect-brk ./node_modules/.bin/eleventy --serve --config=docs.eleventy.js",
-    "docs:build:prod": "IS_PRODUCTION=true npx @11ty/eleventy --config=docs.eleventy.js",
-    "docs:assets": "vite --config docs.vite.config.js --force",
-    "docs:assets:build": "vite build --config docs.vite.config.js",
-    "docs:assets:build:prod": "IS_PRODUCTION=true vite build --config docs.vite.config.js",
-    "deploy": "npm run build && npm run docs:build:prod && npm run docs:assets:build:prod",
-    "deploy:docs": "npm run docs:build:prod && npm run docs:assets:build:prod"
+    "dev": "vite --config site/vite.config.js",
+    "dev:inspect": "node --inspect-brk node_modules/.bin/vite --config site/vite.config.js",
+    "dev:host": "vite --config site/vite.config.js --host",
+    "dev:nogen": "NO_DOC_GEN=true vite --config site/vite.config.js",
+    "docs:build": "vite build --config site/vite.config.js",
+    "deploy": "npm run build && npm run docs:build"
   },
   "repository": {
     "type": "git",
@@ -87,44 +83,41 @@
   "homepage": "https://github.com/Jscherbe/frontend#readme",
   "peerDependencies": {
     "@floating-ui/dom": "^1.6.5",
-    "@ulu/utils": "^0.0.33",
-    "ally.js": "^1.4.1",
-    "aria-tablist": "^1.2.2",
+    "@ulu/utils": "^0.0.34",
     "swipe-listener": "^1.3.0"
   },
   "devDependencies": {
-    "@11ty/eleventy": "^3.0.0-alpha.6",
-    "@11ty/eleventy-navigation": "^0.3.5",
-    "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
+    "@11ty/eleventy": "^3.1.2",
+    "@11ty/eleventy-navigation": "^1.0.5",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2",
     "@floating-ui/dom": "^1.6.5",
     "@fortawesome/fontawesome-free": "^6.5.2",
+    "@ulu/eleventy-plugin-nav-tree": "^0.0.1",
     "@ulu/markdown-output-utils": "^0.0.6",
     "@ulu/sassdoc-to-markdown": "^0.0.16",
-    "@ulu/utils": "^0.0.33",
-    "@ulu/vite-config-cms-theme": "^0.0.10",
-    "@ulu/vitepress-auto-menus": "^0.0.3",
-    "@ulu/vitepress-sassdoc": "^0.0.9",
+    "@ulu/utils": "^0.0.34",
+    "@ulu/vite-plugin-eleventy": "^0.0.1",
     "algoliasearch": "^4.23.3",
-    "ally.js": "^1.4.1",
-    "aria-tablist": "^1.2.2",
-    "autoprefixer": "^10.4.16",
-    "chokidar": "^3.6.0",
+    "autoprefixer": "^10.4.23",
+    "chokidar": "^5.0.0",
     "eleventy-plugin-nesting-toc": "^1.3.0",
     "fs-extra": "^11.2.0",
     "instantsearch.js": "^4.68.1",
+    "js-beautify": "^1.15.4",
     "jsdoc": "^4.0.2",
-    "jsdoc-to-markdown": "^8.0.0",
+    "jsdoc-to-markdown": "^9.1.3",
     "markdown-it-anchor": "^8.6.7",
     "markdown-it-attrs": "^4.1.6",
-    "micromodal": "^0.4.10",
+    "mime-types": "^3.0.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "sass-embedded": "^1.81.0",
-    "sharp": "^0.33.4",
-    "svgo": "^3.3.2",
+    "sass-embedded": "1.97.3",
+    "sharp": "^0.34.5",
+    "svgo": "^4.0.0",
     "swipe-listener": "^1.3.0",
     "twig": "^1.17.1",
-    "typescript": "^5.3.3",
-    "vite": "^5.4.11",
-    "vite-plugin-dts": "^4.5.4"
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-image-optimizer": "^2.0.3"
   }
 }