@frankenstyle/uikit 0.0.1 → 0.0.3

package/.prettierignore

@@ -3,7 +3,6 @@
 !/*.mjs
 !/*.json
 !/.github
-!/.circleci
 !/build
 !/src
 /src/*

package/CHANGELOG.md

@@ -1,5 +1,67 @@
 # Changelog
 
+## 3.25.5 (January 13, 2026)
+
+### Added
+
+- Add scrolling by dragging with mouse to Overflow Fade component
+
+### Fixed
+
+- Fix visible scrollbar in Firefox in Overflow Fade component
+- Fix ignored click while opening is delayed in Drop component
+- Fix vertical pointer movement causes dragging in Slider/Slideshow component
+
+## 3.25.4 (December 19, 2025)
+
+### Fixed
+
+- Fix regression in Accordion component that prevents having Accordions within Accordions
+
+## 3.25.3 (December 18, 2025)
+
+### Fixed
+
+- Fix width and height for retina images in Lightbox component
+
+## 3.25.1 (December 5, 2025)
+
+### Added
+
+- Add accordion title gap variable to Accordion component
+
+### Fixed
+
+- Fix object fit for preserve width class in Utility component
+- Fix to allow for multiple navigations in Slider/Slideshow component
+- Fix multi-line horizontal padding for size modifiers in Form component
+
+### Changed
+
+- IMPORTANT: Rename `@form-padding-vertical` to `@form-multi-line-padding-vertical` in Form component
+
+## 3.25.0 (December 2, 2025)
+
+### Added
+
+- Add support for using the Accordion component without any default style
+- Add accordion icon to Accordion component
+- Add `media` option to Height Viewport component
+
+### Changed
+
+- IMPORTANT: Add `uk-accordion-defaut` class to apply style
+- IMPORTANT: Remove accordion icon from CSS. Use `uk-accordion-icon` attribute on HTML elements instead
+- IMPORTANT: Rename `@accordion-*` to `@accordion-default-*` in Accordion component
+- IMPORTANT: Rename `@inverse-accordion-*` to `@inverse-accordion-default-*` in Accordion component
+- IMPORTANT: Rename `.hook-accordion-*` to `.hook-accordion-default-*` in Accordion component
+- IMPORTANT: Rename `.hook-inverse-accordion-*` to `.hook-inverse-accordion-default-*` in Accordion component
+- Refactor Accordion component
+
+### Fixed
+
+- Fix nav parent icon shrinking if text is too long in Nav component
+
 ## 3.24.2 (October 13, 2025)
 
 ### Added

package/README.md

@@ -3,7 +3,6 @@
 # UIkit
 
 [![Discord](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/NEt4Pv7)
-[![Build](https://circleci.com/gh/uikit/uikit.svg?style=shield)](https://circleci.com/gh/uikit/uikit)
 [![jsdelivr](https://data.jsdelivr.com/v1/package/npm/uikit/badge?style=rounded)](https://www.jsdelivr.com/package/npm/uikit)
 
 UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.

package/build/publishDev.js

@@ -19,9 +19,8 @@ if (args.f || args.force || (await isDevCommit())) {
     await $$`pnpm compile`;
     await $$`pnpm compile-rtl`;
     await $$`pnpm build-scss`;
-
-    // publish to dev tag
-    await $$`pnpm publish --tag dev --no-git-checks`;
+} else {
+    process.exit(1);
 }
 
 async function isDevCommit() {

package/build/release.js

@@ -1,5 +1,5 @@
 import archiver from 'archiver';
-import dateFormat from 'dateformat/lib/dateformat.js';
+import * as date from 'date-fns';
 import { $ } from 'execa';
 import fs from 'fs';
 import { glob } from 'glob';
@@ -54,8 +54,8 @@ function raiseVersion(version) {
         $$`npm version ${version} --git-tag-version false`,
         replaceInFile('CHANGELOG.md', (data) =>
             data.replace(
-                /^##\s*WIP/m,
-                `## ${versionFormat(version)} (${dateFormat(Date.now(), 'mmmm d, yyyy')})`,
+                /^##\s*WIP.*$/m,
+                `## ${versionFormat(version)} (${date.format(new Date(), 'MMMM d, yyyy')})`,
             ),
         ),
         replaceInFile('.github/ISSUE_TEMPLATE/bug-report.md', (data) =>
@@ -68,13 +68,20 @@ async function createPackage(version) {
     const dest = `dist/uikit-${version}.zip`;
     const archive = archiver('zip');
 
-    archive.pipe(fs.createWriteStream(dest));
+    const output = fs.createWriteStream(dest);
+    const closed = new Promise((resolve, reject) => {
+        output.on('close', resolve);
+        output.on('error', reject);
+    });
+
+    archive.pipe(output);
 
     for (const file of await glob('dist/{js,css}/uikit?(-icons|-rtl)?(.min).{js,css}')) {
         archive.file(file, { name: file.slice(5) });
     }
 
     await archive.finalize();
+    await closed;
     await logFile(dest);
 }
 
@@ -107,9 +114,7 @@ async function deploy(version) {
 
     await $$`git push origin main --tags`;
 
-    await $$`pnpm publish --no-git-checks`;
-
-    const notes = (await read('./Changelog.md'))
+    const notes = (await read('./CHANGELOG.md'))
         .match(/## \d.*?$\s*(.*?)\s*(?=## \d)/ms)[1]
         .replace(/(["`])/g, '\\$1');
     await $$`gh release create v${version} --repo uikit/uikit --notes ${notes} ./dist/uikit-${version}.zip`;

package/build/util.js

@@ -9,7 +9,6 @@ import pLimit from 'p-limit';
 import path from 'path';
 import { rollup, watch as rollupWatch } from 'rollup';
 import { default as esbuild, minify as esbuildMinify } from 'rollup-plugin-esbuild';
-import modify from 'rollup-plugin-modify';
 import { optimize } from 'svgo';
 
 const limit = pLimit(Number(process.env.cpus || 2));
@@ -98,11 +97,12 @@ export async function compile(file, dest, { external, globals, name, aliases, re
                 supported: { 'template-literal': true },
             }),
 
-            !debug &&
-                modify({
-                    find: /(?<=>)\n\s+|\n\s+(?=<)/,
-                    replace: ' ',
-                }),
+            !debug && {
+                name: 'trim-whitespace',
+                transform(source) {
+                    return source.replaceAll(/(?<=>)\n\s+|\n\s+(?=<)/g, '  ');
+                },
+            },
         ],
     };
 

package/dist/css/uikit-rtl.css

@@ -1,4 +1,4 @@
-/*! UIkit 3.24.2 | https://www.getuikit.com | (c) 2014 - 2025 YOOtheme | MIT License */
+/*! UIkit 3.25.5 | https://www.getuikit.com | (c) 2014 - 2026 YOOtheme | MIT License */
 /* ========================================================================
    Component: Base
  ========================================================================== */
@@ -1486,8 +1486,7 @@ a:hover .uk-icon-overlay {
 .uk-select[multiple],
 .uk-select[size],
 .uk-textarea {
-  padding-top: 6px;
-  padding-bottom: 6px;
+  padding: 6px 10px;
   vertical-align: top;
 }
 .uk-select[multiple],
@@ -2802,7 +2801,7 @@ select.uk-form-width-xsmall {
  */
 .uk-card-overlay {
   --uk-inverse: dark;
-  background-color: rgba(255, 255, 255, 0.8);
+  background-color: rgba(255, 255, 255, 0.9);
   color: #666;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
 }
@@ -2810,7 +2809,7 @@ select.uk-form-width-xsmall {
   color: #333;
 }
 .uk-card-overlay.uk-card-hover:hover {
-  background-color: rgba(255, 255, 255, 0.9);
+  background-color: #ffffff;
   box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
 }
 /* Size modifier
@@ -3218,14 +3217,14 @@ select.uk-form-width-xsmall {
  */
 .uk-overlay-default {
   --uk-inverse: dark;
-  background: rgba(255, 255, 255, 0.8);
+  background: rgba(255, 255, 255, 0.9);
 }
 /*
  * Primary
  */
 .uk-overlay-primary {
   --uk-inverse: light;
-  background: rgba(34, 34, 34, 0.8);
+  background: rgba(34, 34, 34, 0.9);
 }
 /* ========================================================================
    Component: Article
@@ -3604,49 +3603,65 @@ select.uk-form-width-xsmall {
   padding: 0;
   list-style: none;
 }
-/* Item
+.uk-accordion-title {
+  display: block;
+}
+.uk-accordion-content {
+  display: flow-root;
+}
+/*
+ * Remove margin from the last-child
+ */
+.uk-accordion-content > :last-child {
+  margin-bottom: 0;
+}
+/* Default modifier
  ========================================================================== */
-.uk-accordion > :nth-child(n+2) {
+/*
+ * Item
+ */
+.uk-accordion-default > :nth-child(n+2) {
   margin-top: 20px;
 }
-/* Title
- ========================================================================== */
-.uk-accordion-title {
-  display: block;
+/* Active */
+/*
+ * Title
+ */
+/*
+* 1. Center content vertically, e.g. an icon
+* 2. Imitate white space gap when using flexbox
+* 3. Reset link
+ */
+.uk-accordion-default .uk-accordion-title {
+  /* 1 */
+  display: flex;
+  align-items: center;
+  /* 2 */
+  column-gap: 15px;
+  /* 3 */
   font-size: 1.25rem;
   line-height: 1.4;
   color: #333;
-  overflow: hidden;
-}
-.uk-accordion-title::before {
-  content: "";
-  width: 1.4em;
-  height: 1.4em;
-  margin-right: 10px;
-  float: left;
-  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23666%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23666%22%20width%3D%221%22%20height%3D%2213%22%20x%3D%226%22%20y%3D%220%22%20%2F%3E%0A%3C%2Fsvg%3E");
-  background-repeat: no-repeat;
-  background-position: 50% 50%;
-}
-.uk-open > .uk-accordion-title::before {
-  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23666%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%3C%2Fsvg%3E");
 }
 /* Hover */
-.uk-accordion-title:hover {
+.uk-accordion-default .uk-accordion-title:hover {
   color: #666;
   text-decoration: none;
 }
-/* Content
- ========================================================================== */
-.uk-accordion-content {
-  display: flow-root;
-  margin-top: 20px;
+/* Active */
+/*
+ * Icon
+ */
+.uk-accordion-default .uk-accordion-icon {
+  flex: none;
+  margin-right: auto;
+  color: #666;
 }
 /*
- * Remove margin from the last-child
+ * Content
  */
-.uk-accordion-content > :last-child {
-  margin-bottom: 0;
+.uk-accordion-default .uk-accordion-content {
+  margin-top: 20px;
 }
 /* ========================================================================
    Component: Drop
@@ -5223,6 +5238,7 @@ ul.uk-nav-sub {
 /* Parent icon
  ========================================================================== */
 .uk-nav-parent-icon {
+  flex: none;
   margin-right: auto;
   transition: transform 0.3s ease-out;
 }
@@ -6612,10 +6628,6 @@ ul.uk-nav-sub {
   max-width: 100vw;
   max-height: 100vh;
 }
-.uk-lightbox-items-fit > * > :not(iframe) {
-  width: auto;
-  height: auto;
-}
 /* Zoom Cursor */
 .uk-lightbox-items.uk-lightbox-items-fit .uk-lightbox-zoom:hover {
   cursor: zoom-in;
@@ -8423,6 +8435,7 @@ iframe[data-uk-cover] {
  * Overflow fade
  * 1. Overflow
  * 2. Mask
+ * 3. Hide scrollbar
  */
 @property --uk-overflow-fade-start-opacity {
   syntax: "<number>";
@@ -8449,15 +8462,13 @@ iframe[data-uk-cover] {
   -ms-overflow-style: -ms-autohiding-scrollbar;
   /* 2 */
   mask-image: linear-gradient(to var(--uk-overflow-fade-direction), rgba(0, 0, 0, var(--uk-overflow-fade-start-opacity)), #000 100px, #000 calc(100% - 100px), rgba(0, 0, 0, var(--uk-overflow-fade-end-opacity)));
+  /* 3 */
+  scrollbar-width: none;
 }
 .uk-overflow-fade-horizontal > *,
 .uk-overflow-fade-vertical > * {
   min-width: max-content;
 }
-.uk-overflow-fade-horizontal::-webkit-scrollbar,
-.uk-overflow-fade-vertical::-webkit-scrollbar {
-  display: none;
-}
 /* Box Sizing
  ========================================================================== */
 .uk-box-sizing-content {
@@ -8527,6 +8538,7 @@ iframe[data-uk-cover] {
 .uk-preserve-width svg,
 .uk-preserve-width video {
   max-width: none;
+  object-fit: fill;
 }
 /*
  * Responsiveness
@@ -12083,30 +12095,43 @@ a.uk-offcanvas-bar:hover .uk-icon-overlay {
 .uk-offcanvas-bar .uk-search-toggle:hover {
   color: rgba(255, 255, 255, 0.7);
 }
-.uk-light .uk-accordion-title,
-.uk-section-primary:not(.uk-preserve-color) .uk-accordion-title,
-.uk-section-secondary:not(.uk-preserve-color) .uk-accordion-title,
-.uk-tile-primary:not(.uk-preserve-color) .uk-accordion-title,
-.uk-tile-secondary:not(.uk-preserve-color) .uk-accordion-title,
-.uk-card-primary.uk-card-body .uk-accordion-title,
-.uk-card-primary > :not([class*="uk-card-media"]) .uk-accordion-title,
-.uk-card-secondary.uk-card-body .uk-accordion-title,
-.uk-card-secondary > :not([class*="uk-card-media"]) .uk-accordion-title,
-.uk-overlay-primary .uk-accordion-title,
-.uk-offcanvas-bar .uk-accordion-title {
+.uk-light .uk-accordion-default .uk-accordion-title,
+.uk-section-primary:not(.uk-preserve-color) .uk-accordion-default .uk-accordion-title,
+.uk-section-secondary:not(.uk-preserve-color) .uk-accordion-default .uk-accordion-title,
+.uk-tile-primary:not(.uk-preserve-color) .uk-accordion-default .uk-accordion-title,
+.uk-tile-secondary:not(.uk-preserve-color) .uk-accordion-default .uk-accordion-title,
+.uk-card-primary.uk-card-body .uk-accordion-default .uk-accordion-title,
+.uk-card-primary > :not([class*="uk-card-media"]) .uk-accordion-default .uk-accordion-title,
+.uk-card-secondary.uk-card-body .uk-accordion-default .uk-accordion-title,
+.uk-card-secondary > :not([class*="uk-card-media"]) .uk-accordion-default .uk-accordion-title,
+.uk-overlay-primary .uk-accordion-default .uk-accordion-title,
+.uk-offcanvas-bar .uk-accordion-default .uk-accordion-title {
   color: #fff;
 }
-.uk-light .uk-accordion-title:hover,
-.uk-section-primary:not(.uk-preserve-color) .uk-accordion-title:hover,
-.uk-section-secondary:not(.uk-preserve-color) .uk-accordion-title:hover,
-.uk-tile-primary:not(.uk-preserve-color) .uk-accordion-title:hover,
-.uk-tile-secondary:not(.uk-preserve-color) .uk-accordion-title:hover,
-.uk-card-primary.uk-card-body .uk-accordion-title:hover,
-.uk-card-primary > :not([class*="uk-card-media"]) .uk-accordion-title:hover,
-.uk-card-secondary.uk-card-body .uk-accordion-title:hover,
-.uk-card-secondary > :not([class*="uk-card-media"]) .uk-accordion-title:hover,
-.uk-overlay-primary .uk-accordion-title:hover,
-.uk-offcanvas-bar .uk-accordion-title:hover {
+.uk-light .uk-accordion-default .uk-accordion-title:hover,
+.uk-section-primary:not(.uk-preserve-color) .uk-accordion-default .uk-accordion-title:hover,
+.uk-section-secondary:not(.uk-preserve-color) .uk-accordion-default .uk-accordion-title:hover,
+.uk-tile-primary:not(.uk-preserve-color) .uk-accordion-default .uk-accordion-title:hover,
+.uk-tile-secondary:not(.uk-preserve-color) .uk-accordion-default .uk-accordion-title:hover,
+.uk-card-primary.uk-card-body .uk-accordion-default .uk-accordion-title:hover,
+.uk-card-primary > :not([class*="uk-card-media"]) .uk-accordion-default .uk-accordion-title:hover,
+.uk-card-secondary.uk-card-body .uk-accordion-default .uk-accordion-title:hover,
+.uk-card-secondary > :not([class*="uk-card-media"]) .uk-accordion-default .uk-accordion-title:hover,
+.uk-overlay-primary .uk-accordion-default .uk-accordion-title:hover,
+.uk-offcanvas-bar .uk-accordion-default .uk-accordion-title:hover {
+  color: rgba(255, 255, 255, 0.7);
+}
+.uk-light .uk-accordion-default .uk-accordion-icon,
+.uk-section-primary:not(.uk-preserve-color) .uk-accordion-default .uk-accordion-icon,
+.uk-section-secondary:not(.uk-preserve-color) .uk-accordion-default .uk-accordion-icon,
+.uk-tile-primary:not(.uk-preserve-color) .uk-accordion-default .uk-accordion-icon,
+.uk-tile-secondary:not(.uk-preserve-color) .uk-accordion-default .uk-accordion-icon,
+.uk-card-primary.uk-card-body .uk-accordion-default .uk-accordion-icon,
+.uk-card-primary > :not([class*="uk-card-media"]) .uk-accordion-default .uk-accordion-icon,
+.uk-card-secondary.uk-card-body .uk-accordion-default .uk-accordion-icon,
+.uk-card-secondary > :not([class*="uk-card-media"]) .uk-accordion-default .uk-accordion-icon,
+.uk-overlay-primary .uk-accordion-default .uk-accordion-icon,
+.uk-offcanvas-bar .uk-accordion-default .uk-accordion-icon {
   color: rgba(255, 255, 255, 0.7);
 }
 .uk-light .uk-thumbnav > * > *::after,
@@ -13219,32 +13244,6 @@ a.uk-offcanvas-bar:hover .uk-icon-overlay {
 .uk-offcanvas-bar .uk-table-striped tbody tr:nth-of-type(even):last-child {
   border-bottom-color: rgba(255, 255, 255, 0.2);
 }
-.uk-light .uk-accordion-title::before,
-.uk-section-primary:not(.uk-preserve-color) .uk-accordion-title::before,
-.uk-section-secondary:not(.uk-preserve-color) .uk-accordion-title::before,
-.uk-tile-primary:not(.uk-preserve-color) .uk-accordion-title::before,
-.uk-tile-secondary:not(.uk-preserve-color) .uk-accordion-title::before,
-.uk-card-primary.uk-card-body .uk-accordion-title::before,
-.uk-card-primary > :not([class*="uk-card-media"]) .uk-accordion-title::before,
-.uk-card-secondary.uk-card-body .uk-accordion-title::before,
-.uk-card-secondary > :not([class*="uk-card-media"]) .uk-accordion-title::before,
-.uk-overlay-primary .uk-accordion-title::before,
-.uk-offcanvas-bar .uk-accordion-title::before {
-  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22rgba%28255,%20255,%20255,%200.7%29%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%20%20%20%20%3Crect%20fill%3D%22rgba%28255,%20255,%20255,%200.7%29%22%20width%3D%221%22%20height%3D%2213%22%20x%3D%226%22%20y%3D%220%22%20%2F%3E%0A%3C%2Fsvg%3E");
-}
-.uk-light .uk-open > .uk-accordion-title::before,
-.uk-section-primary:not(.uk-preserve-color) .uk-open > .uk-accordion-title::before,
-.uk-section-secondary:not(.uk-preserve-color) .uk-open > .uk-accordion-title::before,
-.uk-tile-primary:not(.uk-preserve-color) .uk-open > .uk-accordion-title::before,
-.uk-tile-secondary:not(.uk-preserve-color) .uk-open > .uk-accordion-title::before,
-.uk-card-primary.uk-card-body .uk-open > .uk-accordion-title::before,
-.uk-card-primary > :not([class*="uk-card-media"]) .uk-open > .uk-accordion-title::before,
-.uk-card-secondary.uk-card-body .uk-open > .uk-accordion-title::before,
-.uk-card-secondary > :not([class*="uk-card-media"]) .uk-open > .uk-accordion-title::before,
-.uk-overlay-primary .uk-open > .uk-accordion-title::before,
-.uk-offcanvas-bar .uk-open > .uk-accordion-title::before {
-  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22rgba%28255,%20255,%20255,%200.7%29%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%3C%2Fsvg%3E");
-}
 /*
  * Pass dropbar behind color to JS
  */
@@ -13331,3 +13330,17 @@ a.uk-offcanvas-bar:hover .uk-icon-overlay {
     page-break-after: avoid;
   }
 }
+/* Default modifier
+ ========================================================================== */
+/*
+ * Item
+ */
+/*
+ * Title
+ */
+/*
+ * Icon
+ */
+/*
+ * Content
+ */