frankenstyle 0.1.0-next.2 → 0.1.0-next.3

package/README.md

@@ -1,33 +1,11 @@
-# Frankenstyle
-
-Frankenstyle is the spiritual successor to **Franken UI** — our first project that fused UIkit with Tailwind CSS. This time, we’re rebuilding from the ground up with a sharper focus on simplicity, flexibility, and long-term maintainability.
+[![ Frankenstyle is the spiritual successor to Franken UI.](https://franken.style/images/frankenstyle-banner.png)](https://franken.style)
 
 ## Documentation
 
-The documentation website is still being updated, but you can refer to the **context files** for the most accurate and up-to-date information.
-
-## Roadmap
-
-Here’s the current state of the project and where we’re headed next.
-
-While **Franken UI** relied on mature libraries like Tailwind CSS and UIkit, the goal now is to build a more **granular**, **robust**, and **future-proof** foundation — essentially, our own ecosystem. The project is split into three parts:
-
-* **Frankenstyle** – A no-build, value-driven, fully responsive, utility-first CSS framework.
-* **Headless Web Components (HWC)** – A collection of unstyled, fully accessible, commonly used web components.
-* **FrankenstyleKit** – The fusion of the two, featuring its own opinionated design system inspired by `coss ui`.
-
-Both Frankenstyle and HWC are fully detached and can be used independently — hence the creation of FrankenstyleKit.
-
-## Current Status
-
-* **Frankenstyle** – Development is very active and open to the community.
-* **Franken UI** – Now in Long-Term Support (LTS). No new features will be added, but bug fixes and dependency updates are guaranteed.
+For full documentation, visit [https://franken.style](https://franken.style).
 
 ## Support
 
-Right now, the project is **unsustainable** — it has no commercial backing or paid projects and relies solely on donors, a few sponsors from Franken UI, and, of course, my own boredom and availability.
-
-There’s a lot to do, and I’d love to see this project thrive.
 If you’d like to support the work, you can do so here:
 
 * **GitHub Sponsors:** [https://github.com/sponsors/sveltecult](https://github.com/sponsors/sveltecult)

package/dist/css/frankenstyle-kit.css

@@ -1330,6 +1330,7 @@
   /* Disabled */
   .uk-disabled {
     pointer-events: none;
+    opacity: var(--uk-disabled-opacity, 0.5);
   }
 
   /* Transform Utilities */
@@ -3100,53 +3101,8 @@
     background-color: var(--uk-dropdown-dropbar-bg-computed);
     box-shadow: var(--uk-dropdown-dropbar-shadow);
   }
-  .uk-dropdown-nav {
-    --uk-dropdown-nav-item-padding: 0.375rem 0.25rem;
-    --uk-dropdown-nav-item-margin: 0.25rem;
-    --uk-dropdown-nav-item-hover-bg: var(--uk-accent);
-    --uk-dropdown-nav-item-hover-bg-o: 100%;
-    --uk-dropdown-nav-item-hover-color: var(--uk-accent-f);
-    --uk-dropdown-nav-item-hover-color-o: 100%;
-    --uk-dropdown-nav-header-padding: 0.375rem 0.25rem;
-    --uk-dropdown-nav-header-margin: 0.25rem;
-    --uk-dropdown-nav-header-weight: 600;
-    --uk-dropdown-nav-divider-margin: 0;
-    --uk-dropdown-nav-divider-border-width: 1px;
-    --uk-dropdown-nav-divider-border-color: var(--uk-border);
-    --uk-dropdown-nav-divider-border-color-o: 10%;
-    --uk-dropdown-nav-item-hover-bg-computed: color-mix(
-      in srgb,
-      var(--uk-dropdown-nav-item-hover-bg)
-        var(--uk-dropdown-nav-item-hover-bg-o),
-      transparent
-    );
-    --uk-dropdown-nav-item-hover-color-computed: color-mix(
-      in srgb,
-      var(--uk-dropdown-nav-item-hover-color)
-        var(--uk-dropdown-nav-item-hover-color-o),
-      transparent
-    );
-    --uk-dropdown-nav-divider-border-color-computed: color-mix(
-      in srgb,
-      var(--uk-dropdown-nav-divider-border-color)
-        var(--uk-dropdown-nav-divider-border-color-o),
-      transparent
-    );
-    --uk-nav-item-padding: var(--uk-dropdown-nav-item-padding);
-    --uk-nav-item-margin: var(--uk-dropdown-nav-item-margin);
-    --uk-nav-item-hover-bg: var(--uk-dropdown-nav-item-hover-bg);
-    --uk-nav-item-hover-bg-o: var(--uk-dropdown-nav-item-hover-bg-o);
-    --uk-nav-item-hover-color: var(--uk-dropdown-nav-item-hover-color);
-    --uk-nav-item-hover-color-o: var(--uk-dropdown-nav-item-hover-color-o);
-    --uk-nav-header-padding: var(--uk-dropdown-nav-header-padding);
-    --uk-nav-header-margin: var(--uk-dropdown-nav-header-margin);
-    --uk-nav-header-font-weight: var(--uk-dropdown-nav-header-weight);
-    --uk-nav-divider-margin: var(--uk-dropdown-nav-divider-margin);
-    --uk-nav-divider-width: var(--uk-dropdown-nav-divider-border-width) 0 0 0;
-    --uk-nav-divider-style: solid;
-    --uk-nav-divider-color: var(--uk-dropdown-nav-divider-border-color);
-    --uk-nav-divider-color-o: var(--uk-dropdown-nav-divider-border-color-o);
-    user-select: none;
+  .uk-dropdown-nav > li[aria-selected='true'] > a {
+    font-weight: 500;
   }
   .uk-dropnav-dropbar {
     --uk-dropnav-z: 1020;
@@ -4028,9 +3984,11 @@
     --uk-nav-item-hover-color-o: 100%;
   }
   .uk-nav-header {
+    --uk-nav-header-margin: var(--uk-nav-item-margin);
+    --uk-nav-header-padding: var(--uk-nav-item-padding);
     font-weight: 600;
-    margin: var(--uk-nav-item-margin);
-    padding: var(--uk-nav-item-padding);
+    margin: var(--uk-nav-header-margin);
+    padding: var(--uk-nav-header-padding);
   }
   .uk-nav-divider {
     --uk-nav-divider-color: var(--uk-border);
@@ -4155,6 +4113,55 @@
     padding: var(--uk-nav-sub-item-padding);
     margin: var(--uk-nav-sub-item-margin);
   }
+  .uk-dropdown-nav {
+    --uk-dropdown-nav-item-padding: 0.375rem 0.25rem;
+    --uk-dropdown-nav-item-margin: 0.25rem;
+    --uk-dropdown-nav-item-hover-bg: var(--uk-accent);
+    --uk-dropdown-nav-item-hover-bg-o: var(--uk-accent-o);
+    --uk-dropdown-nav-item-hover-color: var(--uk-accent-f);
+    --uk-dropdown-nav-item-hover-color-o: 100%;
+    --uk-dropdown-nav-header-padding: 0.375rem 0.25rem;
+    --uk-dropdown-nav-header-margin: 0.25rem;
+    --uk-dropdown-nav-header-weight: 600;
+    --uk-dropdown-nav-divider-margin: 0;
+    --uk-dropdown-nav-divider-border-width: 1px;
+    --uk-dropdown-nav-divider-border-color: var(--uk-border);
+    --uk-dropdown-nav-divider-border-color-o: 10%;
+    --uk-dropdown-nav-item-hover-bg-computed: color-mix(
+      in srgb,
+      var(--uk-dropdown-nav-item-hover-bg)
+        var(--uk-dropdown-nav-item-hover-bg-o),
+      transparent
+    );
+    --uk-dropdown-nav-item-hover-color-computed: color-mix(
+      in srgb,
+      var(--uk-dropdown-nav-item-hover-color)
+        var(--uk-dropdown-nav-item-hover-color-o),
+      transparent
+    );
+    --uk-dropdown-nav-divider-border-color-computed: color-mix(
+      in srgb,
+      var(--uk-dropdown-nav-divider-border-color)
+        var(--uk-dropdown-nav-divider-border-color-o),
+      transparent
+    );
+    --uk-nav-item-padding: var(--uk-dropdown-nav-item-padding);
+    --uk-nav-item-margin: var(--uk-dropdown-nav-item-margin);
+    --uk-nav-item-hover-bg: var(--uk-dropdown-nav-item-hover-bg);
+    --uk-nav-item-hover-bg-o: var(--uk-dropdown-nav-item-hover-bg-o);
+    --uk-nav-item-hover-color: var(--uk-dropdown-nav-item-hover-color);
+    --uk-nav-item-hover-color-o: var(--uk-dropdown-nav-item-hover-color-o);
+    --uk-nav-header-padding: var(--uk-dropdown-nav-header-padding);
+    --uk-nav-header-margin: var(--uk-dropdown-nav-header-margin);
+    --uk-nav-header-font-weight: var(--uk-dropdown-nav-header-weight);
+    --uk-nav-divider-margin: var(--uk-dropdown-nav-divider-margin);
+    --uk-nav-divider-width: var(--uk-dropdown-nav-divider-border-width) 0 0 0;
+    --uk-nav-divider-style: solid;
+    --uk-nav-divider-color: var(--uk-dropdown-nav-divider-border-color);
+    --uk-nav-divider-color-o: var(--uk-dropdown-nav-divider-border-color-o);
+    --uk-nav-radius: var(--uk-global-radius-small);
+    user-select: none;
+  }
   .uk-subnav {
     display: flex;
     align-items: center;
@@ -5487,6 +5494,50 @@
     letter-spacing: var(--uk-cmd-item-key-tracking);
     color: var(--uk-muted-f);
   }
+  .uk-custom-select-search {
+    --uk-custom-select-search-padding: 0 0.75rem;
+    --uk-custom-select-search-icon-margin: 0.5rem;
+    --uk-custom-select-search-icon-opacity: 0.5;
+    --uk-custom-select-search-input-padding: 0.75rem 0;
+    display: flex;
+    align-items: center;
+    padding: var(--uk-custom-select-search-padding);
+  }
+  .uk-custom-select-search svg {
+    margin-inline-end: var(--uk-custom-select-search-icon-margin);
+    opacity: var(--uk-custom-select-search-icon-opacity);
+  }
+  .uk-custom-select-search input {
+    width: 100%;
+    padding: var(--uk-custom-select-search-input-padding);
+    background-color: transparent;
+    outline: none;
+  }
+  .uk-custom-select-search input::placeholder {
+    color: var(--uk-muted-f);
+  }
+  .uk-custom-select-list {
+    --uk-custom-select-list-max-height: 10rem;
+    max-height: var(--uk-custom-select-list-max-height);
+  }
+  .uk-custom-select-item-wrapper {
+    display: flex;
+    flex: 1;
+    align-items: center;
+  }
+  .uk-custom-select-item-icon {
+    --uk-custom-select-item-icon-margin: 0.5rem;
+    margin-inline-end: var(--uk-custom-select-item-icon-margin);
+    flex-shrink: 0;
+  }
+  .uk-custom-select-item-text {
+    flex: 1;
+  }
+  .uk-custom-select-item-check {
+    --uk-custom-select-item-check-margin: 0.5rem;
+    margin-inline-start: var(--uk-custom-select-item-check-margin);
+    flex-shrink: 0;
+  }
   [class*='uk-position-top'],
   [class*='uk-position-bottom'],
   [class*='uk-position-left'],