CHANGELOG.md

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

Unreleased

Fixed

• header-fixed not working: Position modifiers are now applied via --header-position custom property so declaration order no longer matters.
• header-blur creating unwanted stacking context: Default changed from blur(0px) to none — no filter is applied unless header-blur is explicitly used. Fixes drawers getting trapped inside the header's bounding box.
• Drawer rendering under fixed header: Drawer z-index raised from 999 to 1000 so it always appears above the header.

2.2.5 - 2026-07-20

Fixed

• Tailwind 4.3.3 compatibility: Active and expanded states stopped applying in collapsible, combobox-item, drawer, swap, swap-rotate, swap-flip, and tooltip after upgrading to Tailwind 4.3.3 (tailwindlabs/tailwindcss#20124). Fixed by converting compound selectors inside @utility blocks to :is() syntax.
• createCombobox keyboard navigation invisible: Arrow-key highlight was not visible — highlight() was toggling combobox-option-active which has no CSS. Changed to combobox-item-active.
• createCombobox item targeting: JS queried .combobox-option while the CSS utility uses .combobox-item, requiring two classes per item. The helper now uses .combobox-item directly.
• Inline code wrapping: Removed white-space: nowrap from inline code elements — it prevented wrapping but caused horizontal overflow in narrow containers and prose.

2.2.4 - 2026-07-18

Fixed

• Inline code and hr styles overridden by Tailwind preflight: Inline code padding and hr border were being overridden by Tailwind's universal preflight reset when placed outside a cascade layer. Both are now declared outside any layer so they always take effect regardless of how Tailwind is configured.
• Inline code word wrapping: Inline code elements no longer break mid-word inside table cells or narrow containers.
• Inline code font weight: Removed hardcoded bold weight from inline code to allow natural inheritance from the surrounding context.

2.2.3 - 2026-07-02

Fixed

• navbar horizontal placement li selector: Fixed an invalid CSS selector in navbar-start, navbar-center, and navbar-end that caused white-space: nowrap to never apply to list items. The previous selector required a list item to be a direct child of two different elements simultaneously, which is impossible. The corrected selector properly targets list items inside the navbar list.

2.2.2 - 2026-07-01

Fixed

• navbar list item text wrapping in horizontal layouts: Nav items no longer wrap text vertically in navbar-start, navbar-center, and navbar-end placements. Adds white-space: nowrap to li elements in horizontal navbar variants, consistent with the same rule on btn, tab, menu, and breadcrumb-list.

2.2.1 - 2026-06-07

Fixed

• stats-horizontal and stats-vertical divider lines: Divider override rules are now placed inside the stats-horizontal / stats-vertical utilities as forward-nested & .stat + .stat rules. The previous approach used ancestor/backward nesting (.stats-vertical & + & inside @utility stat) which Tailwind v4's addUtilities() silently drops, causing dividers to render incorrectly when either modifier was applied via the plugin.

2.2.0 - 2026-06-06

Added

• stats-horizontal modifier: New explicit horizontal layout variant for stats. Mirrors the default behavior as a named class, making it straightforward to switch between orientations with responsive variants (e.g. stats-vertical md:stats-horizontal).

Fixed

• stats-vertical divider lines: Dividers between stat items now render as horizontal lines when stats-vertical is applied. Previously, border-inline-start was used regardless of orientation, causing incorrect vertical lines.
• divider label text wrapping: Label text (e.g. "OR") no longer wraps when the divider is placed in a narrow container.
• btn text wrapping: Button text no longer wraps when placed in a narrow container.

2.1.2 - 2026-05-14

Fixed

• UA font inheritance on interactive components: btn, input, textarea, and select now include font: inherit so they inherit the page font-family rather than silently falling back to the system UI font. The explicit font-size each utility already declares continues to take effect as before.
• menu-item UA resets for <button> usage: menu-item now resets background, border, font, and width so it renders correctly when applied to a <button> element.
• collapsible-title UA resets for <button> usage: collapsible-title now resets background, border, and font so it renders correctly when applied to a <button> element.

2.1.1 - 2026-05-13

Fixed

• Color contrast on text-base: text-base had failing color contrast — it was using a raw base color instead of the body color token. Updated to use var(--color-body) so text meets contrast requirements in both light and dark themes.

2.1.0 - 2026-05-13

Added

• marquee component: New pure-CSS infinite scrolling strip. Supports horizontal and vertical directions, pause-on-hover (marquee-pause), reverse playback (marquee-reverse), gradient fade edges (marquee-fade), and three speed presets (marquee-slow, marquee-normal, marquee-fast). Gap between items is controlled via --marquee--gap and is consistent at the loop seam. Respects prefers-reduced-motion automatically.

Fixed

• Color contrast on footer-title: footer-title was using opacity: 60% which reduced contrast across the entire element. Replaced with color: inherit so the title inherits its parent's color at full opacity.

[2.0.6] - 2026-05-13

Added

• CDN fields in package.json: Added unpkg and jsdelivr fields pointing to ./dist/frutjam.min.css so the minified stylesheet is served automatically by unpkg and jsDelivr CDNs.

Fixed

• Text-color utilities not applying: text-primary, text-success, text-warning, and other semantic text-color utilities were not applying in some setups — the color appeared but without the correct light/dark contrast. Now fixed; these utilities work correctly in both light and dark mode regardless of your Tailwind configuration.

2.0.5 - 2026-05-13

Fixed

• skeleton-text shimmer animation: skeleton-text was incorrectly hiding text and showing a blank bar instead of animating. It now shimmers over the visible text content as intended.

• UA default resets — interactive components: btn, badge, tag, and menu-item now reset text-decoration: none so they render correctly when used as <a> elements inside prose or content areas. btn adds vertical-align: middle for consistent inline alignment when used on <a>. menu-item and tag add appearance: none to suppress browser button chrome when used on <button>. tab adds text-decoration: none for the same reason as btn.

• Color contrast on text utilities: text-primary, text-success, text-warning, and other semantic text color utilities had failing color contrast — now fixed. Text is readable in both light and dark themes.

• Color contrast on menu and stat labels: menu-title, stat-title, and stat-desc had failing color contrast — now fixed. Labels are consistently legible regardless of the active theme.

• Text color inside alert and chat-bubble: Paragraphs and list items inside alerts and chat bubbles now correctly inherit the component's text color instead of being overridden by global styles.

• Text color inside card: Paragraphs inside cards now correctly inherit the card's text color instead of being overridden by global styles.

• Global style specificity: Base styles for p, lists, and strong elements no longer override component or utility styles, so inline color utilities always win as expected.

2.0.4 - 2026-05-10

Fixed

• UA default resets (continued): checkbox, radio, and tab (radio input) now explicitly set border: none so browser UA and host-page CSS framework borders are suppressed when appearance: none removes native rendering. breadcrumb-list (<ol>) now sets list-style: none; padding: 0; margin: 0 so breadcrumb items render without numbered bullets or extra indent when the global reset is disabled.

2.0.3 - 2026-05-10

Fixed

• UA default resets: Components that target elements with significant browser UA defaults ([popover], <dialog>, <button>, <input>, <progress>, <table>) now explicitly reset border, inset, margin, color, appearance, and border-collapse where applicable, so they render correctly regardless of the host page's CSS.

2.0.2 - 2026-05-10

Fixed

• root option — theme selector scoping: When a custom root selector is configured, [data-theme] selectors are now scoped to that root as compound selectors instead of remaining global. Previously, theme variable rules still targeted the page-level :root, causing CSS variable conflicts when the component was embedded in another page. Applies to both the PostCSS @plugin path and the Tailwind v4 plugin path.

2.0.1 - 2026-05-07

Added

• CONTRIBUTING.md: Added contribution guidelines covering branch naming, commit conventions, CSS authoring rules (cascade specificity, CSS variables, native-first approach), and PR checklist
• docs — JS & React helper examples: Added frutjam/js and frutjam/react usage sections to carousel, collapsible, combobox, drawer, and tooltip component pages
• docs — configuration: Expanded reset and root option docs with detailed explanations, a comparison table, and a scoped wrapper example for coexisting with other CSS frameworks

Fixed

• Cascade specificity architecture: All components now follow a clear three-tier priority model, so any inline utility class always overrides a component default — no !important needed, and no surprise specificity battles:

  1. Inline class on the element — highest priority, always wins
  2. Parent component context — mid-level, inherited naturally through CSS variables or color: inherit
  3. Root baseline — lowest priority, the component's out-of-the-box default

• docs — card: Moved card-actions inside card-content in the "Card with Actions" example

• accordion: Added :focus-visible outline on <summary> elements for keyboard navigation (WCAG 2.4.7)

• carousel: scroll-behavior: smooth now respects prefers-reduced-motion; JS scrollIntoView also switches to instant scroll when motion is reduced (WCAG 2.3.3)

• range: Added :focus-visible outline on ::-moz-range-thumb so Firefox keyboard users see a focus indicator (WCAG 2.4.7)

• frutjam/js — createToastManager: Container is initialized with aria-live="polite" and aria-atomic="false"; error/warning toasts receive role="alert", all others receive role="status" so screen readers announce notifications (WCAG 4.1.3)

• frutjam/js — createCollapsible: open, close, and toggle now sync aria-expanded on any [aria-expanded] trigger found inside the container (WCAG 4.1.2)

• frutjam/js — createTabs: Sets role="tablist/tab/tabpanel" on elements, generates stable IDs, wires aria-controls / aria-labelledby between tabs and panels, manages tabindex, and adds Arrow / Home / End keyboard navigation (WCAG 1.3.1, 2.1.1)

• frutjam/js — createCombobox: Auto-discovers or creates the listbox element, assigns role="listbox" and a stable ID, wires aria-controls and aria-activedescendant on the input, and assigns stable IDs to each option (WCAG 1.3.1)

• frutjam/react — useCombobox: Added listboxProps (role="listbox", id); inputProps now includes aria-controls and aria-activedescendant; each optionProps entry includes a stable id (WCAG 1.3.1)

• frutjam/react — useTabs: Added tablistProps; tabProps now includes stable id, aria-controls, aria-selected, tabIndex, and an onKeyDown handler for Arrow / Home / End navigation; panelProps now includes stable id, aria-labelledby, and tabIndex (WCAG 1.3.1, 2.1.1)

• frutjam/react — useCollapsible: open, close, and toggle now sync aria-expanded on any [aria-expanded] trigger inside the container ref (WCAG 4.1.2)

• popover: popover-content margins now default to 0; each placement utility sets only the axis it needs (block margins for top/bottom, inline margins for start/end), eliminating unwanted cross-axis offset

• typography: --tw-prose-counters now uses var(--color-neutral) instead of var(--color-on-neutral) to match list bullet color

2.0.0 - 2026-05-02

Added

• status: New status dot component for presence/state indicators (online, offline, busy, etc.); supports color variants (status-primary → status-error) and size variants (status-xs → status-xl); uses outline ring separator for clean appearance on any background
• indicator: New indicator/overlay component for positioning badges over other elements; supports placement modifiers (indicator-start/end/center, indicator-top/middle/bottom)
• carousel: New scroll-snap carousel component with carousel-item children; supports carousel-vertical, carousel-center, and carousel-end variants
• combobox: New searchable dropdown component with combobox-list, combobox-option, and combobox-open classes; supports color and size variants, open state via JS or combobox-open class
• diff: New before/after comparison component
• radial-progress: New circular progress indicator component; set progress via --value (0–100); optionally override --size (default 5rem) and --thickness (default 10% of size)
• swap: New CSS-only toggle component for switching between two elements; supports swap-rotate and swap-flip animation styles, and swap-active class for JS-controlled state
• countdown: New countdown component
• input: Added input-square modifier for square/PIN-style inputs
• kbd: New keyboard key component
• loading: New loading spinner/indicator component
• mask: New mask component with shape variants
• range: New range slider input component
• rating: New star rating component
• select: New select dropdown component
• skeleton: New skeleton loading placeholder component
• stat: New stat/statistic display component
• steps: New steps/progress tracker component with steps-horizontal and steps-vertical layout variants
• tabs: New tabs navigation component
• tag: New tag/chip component
• textarea: New textarea component
• timeline: New timeline component with timeline-horizontal and timeline-vertical layout variants, timeline-snap-start, and timeline-snap-end
• toast: New toast notification container component with placement variants (toast-top/middle/bottom, toast-start/center/end)
• toggle: New toggle switch component
• avatar: New component with size variants (avatar-xs → avatar-2xl), shape variants (avatar-circle, avatar-square, avatar-rounded), color variants, ring (avatar-ring), status indicators (avatar-status, avatar-online, avatar-offline, avatar-busy, avatar-away), mask shapes (avatar-mask-squircle, avatar-mask-hexagon, avatar-mask-triangle), and group layout (avatar-group)
• chat: New component with chat-start / chat-end alignment, chat-bubble, chat-avatar, chat-footer, size variants (chat-xs → chat-xl), and color variants (chat-bubble-primary, chat-bubble-error, etc.)
• hero: New component with hero-content for centered content and hero-overlay for background image overlays
• footer: New component with footer-title, direction variants (footer-horizontal, footer-vertical), and footer-center for centered layouts
• header: Added header-start, header-center, and header-end slot utilities for grid-based content placement, plus new state utilities header-fixed, header-shadow, header-blur, header-transparent, header-solid, and size variants header-sm and header-lg
• divider: Added divider-dotted style variant
• frutjam/js: Vanilla ES module helpers for interactive components — createModal, createDrawer, createCollapsible, createTooltip, createTabs, createToast, createCarousel, createCombobox
• frutjam/react: React hooks for the same set — useModal, useDrawer, useCollapsible, useTooltip, useTabs, useToast, useCarousel, useCombobox; each returns a ref + control methods with no extra dependencies
• Multi-framework code examples: All 51 component doc pages now include HTML and React tabs in the Basic Usage snippet; modal and JS-controlled tabs additionally include Vue, Svelte, and Angular tabs where the wiring differs meaningfully
• Installation docs: New sections for frutjam/js and frutjam/react in content/docs/installation.html, clearly positioned as optional helpers for non-native components

Changed

• @plugin [BREAKING]: Load Frutjam with @plugin "frutjam" instead of @import "frutjam":

  @plugin "frutjam";
  
  /* or with options: */
  @plugin "frutjam" {
    prefix: fj;
    reset: true;
    root: :host;
    themes: snowberry, darkberry;
    include: button, card, alert;
  }

• accordion [BREAKING]: accordion-body renamed to accordion-content
• alert [BREAKING]: alert-x renamed to alert-horizontal; alert-y renamed to alert-vertical
• card [BREAKING]: card-body renamed to card-content
• divider [BREAKING]: divider-x renamed to divider-horizontal; divider-y renamed to divider-vertical
• drawer [BREAKING]: drawer-body renamed to drawer-content
• footer [BREAKING]: footer-x renamed to footer-horizontal; footer-y renamed to footer-vertical
• header [BREAKING]: header-body renamed to header-content
• hero [BREAKING]: hero-body renamed to hero-content
• join [BREAKING]: join-x renamed to join-horizontal; join-y renamed to join-vertical
• menu [BREAKING]: menu-x renamed to menu-horizontal; menu-y renamed to menu-vertical
• modal [BREAKING]: modal-body renamed to modal-content; placement classes renamed — modal-x-start/center/end → modal-start/center/end; modal-y-start/center/end → modal-top/middle/bottom
• navbar [BREAKING]: Placement classes renamed — navbar-x-start/center/end → navbar-start/center/end; navbar-y-start/center/end → navbar-top/middle/bottom; navbar-y-center → navbar-middle
• popover [BREAKING]: popover-body renamed to popover-content
• tooltip [BREAKING]: tooltip-body renamed to tooltip-content
• Independent prefix [BREAKING]: Frutjam prefix is now configured separately from Tailwind's own prefix — Tailwind's prefix(tw) acts as a variant and requires tw: on all utilities in HTML (e.g., tw:flex, tw:btn), while Frutjam's prefix: fj renames Frutjam class names (e.g., fj-btn). When both are used together, combine them: tw:fj-btn
• container [BREAKING]: Renamed to wrapper to avoid conflict with Tailwind's built-in container utility; size variants follow the same pattern — container-sm → wrapper-sm, container-full → wrapper-full
• popover: Popovers without an explicit placement class now auto-flip to stay within the viewport using position-try-fallbacks; explicit placement classes (e.g. popover-top-start) remain strict and never flip
• popover: Simplified to use CSS anchor positioning only; removed arrow/caret element and transition complexity

Removed

• blackberry theme: Removed — only snowberry (light) and darkberry (dark) themes ship by default

Fixed

• join: Join now works automatically with any element — direction utilities selectively zero only the inner corners adjacent to neighbors, preserving each element's natural border-radius without requiring components to opt in
• popover: Fixed popovers appearing over the trigger button instead of beside it
• link: Fixed typo in link-neutral — nuetral corrected to neutral in color variable references
• alert-pill: Fixed shape issue with alert-pill not appearing correctly

1.11.0 - 2026-03-10

Added

• alert: Added a new alert component for displaying contextual feedback messages to users
• progress: Added a new progress component

Changed

• drawer: remove custom width logic for drawer and drawer-body

1.10.1 - 2026-03-02

Fixed

• join: Scoped join-item radius to component-level variables to prevent global defaults from overriding .btn, .input, or .card styles

1.10.0 - 2026-03-02

Added

• join-item: Extended join-item utility class to support input components. This ensures border-radius variables are correctly applied to inputs when grouped
• btn: add active background color when checkbox is checked

Changed

• badge-circle: Removed width and height to allow flexible sizing
• input: Changed from outline to border. This ensures the input and button maintain a perfectly synchronized height and stroke-line when grouped

Fixed

• badge: Fix incorrect default padding size in badge-square and badge-circle
• tooltip-body: Rename CSS variable to avoid conflict with utility class name

1.9.1 - 2026-02-21

Fixed

• btn-circle: fixed incorrect variable assignment that caused shape rendering failure

1.9.0 - 2026-02-20

Added

• prose-frutjam: Introduced .prose-frutjam, a new typography utility that bridges @tailwindcss/typography with the Frutjam theme
• doc: Added Typography Docs page

Changed

• typography: Adjusted line-height: tight (1.15) for heading utility and relaxed (1.6) for para utility

1.8.0 - 2026-02-05

Added

• btn: Added CSS-based auto color-contrast fallback for buttons using color-contrast() to ensure readable text when --color-on-btn is not explicitly defined
• btn: Added user-select: none to the base button to ensure it looks consistent across browsers.
• join: Added a new join component for grouping other components (e.g., Button, Card).

Changed

• accordion: Improved accordion UX by limiting pointer cursor to summary
• menu: Removed default padding from the menu
• menu: Added margin-block-start to ul and li elements in the menu
• menu: Excluded the first li child from the added margin-block-start
• btn: Improved button hover and unhover smoothness with refined transition timing
• btn:Refined hover background behavior to avoid abrupt color changes
• btn: Changed from outline to border for better visual consistency
• cdn: refactor: separate responsive and non-responsive utilities

Fixed

• accordion: Improved chevron icon alignment to be vertically centered
• menu: Apply margin-block-start only when a popover position is set
• btn: Better disabled state (50% opacity instead of 20% - more accessible)
• table: override UA th alignment and use logical start

1.7.0 - 2026-01-14

Added

• menu: Add cursor: pointer to menu-item
• popover: Added new popover component with click and hover support

Changed

• core: Replace physical CSS properties with logical ones for LTR/RTL
• breadcrumb: Changed breadcrumb separator icon color to --color-on-base

Fixed

• card: Remove overflow:hidden to allow content overflow
• accordion: Prevent chevron from being cut off on small screens or long text
• accordion: Reduce chevron icon size for better fit
• accordion: Fixed accordion top margin not applying in the menu

1.6.0 - 2026-01-08

Added

• cdn: Add breakpoint variants to all CDN classes
• badge: Added new badge-pill utility class

Changed

• menu: Set the menu component content color to the base color

Fixed

• accordion: Restored padding behavior in the accordion component: Padding is applied when accordion-flush is not used, and padding is removed when accordion-flush is applied.
• menu: Add the menu-disabled and menu-active classes to the safelist
• menu: Fixed alignment issues in the menu component when using icons with text, ensuring icons and labels appear on the same line
• accordion: align summary icon and text to start with arrow at end
• badge: Fixed badge-circle utility not rendering as a full circle when applied

1.5.0 - 2026-01-06

Removed

• menu: Removed submenu utility to simplify the menu component implementation

Fixed

• accordion: Adjusted accordion padding to ensure better alignment with other components, such as the menu, without disrupting their layout
• menu: Improved component alignment for better consistency

1.4.0 - 2026-01-06

Added

• menu: Introduced menu-item class for the menu component to improve menu structure and styling

Changed

• accordion: Implement accordion chevron icon using pure CSS to ensure theme color consistency

Removed

• sidebar: Remove defualt padding in sidebar component

1.3.0 - 2026-01-05

Added

• accordion: Introduced accordion-body utility to wrap content and improve separation within accordion sections
• menu: New submenu class for the menu component to support nested menu items

Changed

• accordion: accordion-flush utility: removed padding and set font-weight to normal
• accordion: Removed the default background color from accordion.
• accordion: Updated the details element to span the full width of its container.
• accordion: Improved padding to better align with other components such as menu.
• menu: Overall structure and styling of the menu component for better usability and visual consistency.
• menu: Alignment and integration of menu component with accordion component for seamless collapse/expand behavior within nested menus.

Fixed

• accordion: Accordion border and padding for nested accordions:
  • Apply border only to top-level accordion (prevent border on nested accordions)
  • Add padding to first-level accordion-body and summary only, removing it from nested items
  • Ensure nested details and summaries do not inherit styles from parent accordion
• accordion: Removed top padding from the first <summary> tag in the accordion-flush to improve visual consistency

1.2.0 - 2025-12-30

Added

• menu: Added Menu component with vertical/horizontal layouts and nested submenu support
• tooltip: Added Tooltip component
• accordion: Add .accordion-flush utility to accordion component to remove default border

1.1.0 - 2025-12-18

Added

• table: table-hover utility to highlight rows on mouseover.
• table: table-zebra as a shorthand for standard row-based striping.
• table: table-zebra-rows and table-zebra-cols for explicit horizontal or vertical striping.
• table: table-pin-rows and table-pin-cols for sticky headers and fixed-position columns.
• table: table-{xs|sm|md|lg|xl} for controlling cell padding and font sizes.
• radio: Added a new Radio component for user selection

Fixed

• header: Fix header width to span full screen
• card: Fixes the card-body text color issue when the card-{color} theme utility class is applied, ensuring the text color matches the card theme.
• checkbox: Corrected variable assignment for checkbox-rounded, checkbox-circle, and checkbox-square utilities, ensuring proper border radius is applied.

1.0.0 - 2025-12-03

Added

• Prebuilt UI Components — Ready-to-use components like Buttons, Modals, Accordions, Badges, Cards, Breadcrumbs, Checkboxes, and more.
• Flexible Theme System — Multiple built-in themes (Light, Dark, etc.) plus full support for creating custom themes via CSS variables.
• RTL & Responsive Support — Out-of-the-box support for right-to-left languages and mobile-first responsive layouts.
• Accessibility-First Design — Components built with semantic HTML and accessibility best practices for inclusive, WCAG-friendly interfaces.
• SEO-Friendly & Standards-Compliant — Clean, valid HTML and semantic markup for better SEO and W3C compatibility.
• Tailwind CSS Integration — Seamless integration with Tailwind CSS with minimal setup.
• Markdown Editor Plugin — Built-in plugin support, including a theme-aware Markdown editor for rich text content.
• Developer-Friendly & Extensible — Minimal setup, flexible customization, and full control without relying on heavy JavaScript.

2.7.1-beta.1 - 2025-10-19

• Fixes drawer width when no placement utility is assigned with the drawer component

2.7.1-beta.0 - 2025-10-19

Added

• Introduced new divider-info variant for UI divider styling

Fixed

• Fixes "Unexpected token CurlyBracketBlock" warning
• Add missing semicolon in the CSS for the .input-disable class
• Fixes drawer width when no placement utility is assigned with the drawer component

2.7.0-beta.1 - 2025-09-24

Fixed

• Corrected incorrect variable assignment for divider color

2.7.0-beta.0 - 2025-09-24

Added

• You can now import all safelists using import 'frutjam/safelist'. This makes it easier to generate and use all Frutjam utility classes, especially when working with Markdown content or static analysis tools.
• Added support for card-{primary, secondary, accent, info, neutral, success, warning, error} utility classes to style cards with semantic colors.

2.6.0-beta.0 - 2025-08-21

Added

• Added new table component for displaying tabular data.
• chore: update preflight to improve base styling and consistency

2.5.0-beta.7 - 2025-08-11

Fixed

• Corrects misassigned target classes for dropdown-body

2.5.0-beta.6 - 2025-08-11

Changed

• reduce sidebar padding for improved layout spacing

Fixed

• fix(drawer): enable scroll on drawer-body when content overflows
• fix: prevent sidebar content from being cut off when scrolling to bottom by adjusting max-height
• Fixed issue where default checkbox outline was not visible in dark mode.

2.5.0-beta.5 - 2025-08-08

Fixed

• Corrects the size of the container-full utility.

2.5.0-beta.4 - 2025-08-07

Fixed

• Corrects the size of the container utility.

2.5.0-beta.3 - 2025-08-06

Fixed

• TailwindCSS prefix issue: Nested utility classes inside components were not being automatically prefixed when using the tw prefix. A temporary patch was applied using a class attribute selector workaround until an official fix is released by TailwindCSS.

2.5.0-beta.2 - 2025-08-03

Changed

• Removed default surface-md size when no size is assigned; now only the assigned size takes effect

2.5.0-beta.1 - 2025-08-02

Changed

• This update helps to simplify the button component's structure and behavior, improving flexibility for customization and reducing unnecessary styles

2.5.0-beta.0 - 2025-08-02

Added

• Utility levels: surface-1, surface-2, and base surface
• Size variants: surface-sm, surface-md, ..., surface-xl
• Border styles: surface-outline and surface-dashed
• surface-rounded to apply global border-radius style

Fixed

• Corrected file paths for 'main', 'browser', and 'styles' in package.json

Changed

• Restructured surface from a utility to a standalone component
• refactor: align card border color with global style
• Disabled automatic source detection and limited CSS processing to the src folder to avoid including unnecessary styles
• CDN-ready CSS without preflight
• Restructured code for improved organization and readability

2.4.0-beta.0 - 2025-07-31

Added

• Introducing new utilities: surface (base), surface-1, and surface-2

2.3.0-beta.1 - 2025-07-31

Added

• Added base styling for the <code> element

Fixed

• fix: add missing container utility (same as container-md)
• The container class was broken due to a naming conflict with Tailwind CSS’s container variable. This issue was resolved by prefixing the internal container variable with ui, avoiding the conflict.

2.3.0-beta.0 - 2025-07-30

Added

• Added background color to footer using the --color-base variable in preflight
• Introduces focus-or-within variant to apply styles on :focus or :focus-within
• Added a new dropdown component currently in experimental stage

Changed

• Refactor: create separate navbar-list class to improve editor support and highlight while typing
• feat: set accordion to full width for improved layout
• The container is now considered a utility. Use classes like container-lg instead of container container-lg
• Changed base color in darkberry theme to optimize user experience in low-light conditions

Fixed

• Added width and height to the divider base component to fix layout issues; the divider now occupies the intended space and is no longer affected by align-items: center on the parent.
• The align-self: flex-start rule was preventing buttons from being vertically centered when their parent had align-items: center. Removing it allows proper alignment in those cases.
• Corrected the modal component to use a valid CSS opacity value

2.2.0-beta.0 - 2025-07-25

Added

• Applied --color-base as the background color to the main element
• Added the default color for <p> tags in the preflight styles to match the UI's design consistency

Removed

• Revised the heading and para utility to remove the fixed color, allowing user-defined colors to be applied more easily without needing !important
• Removed the color property from the child elements of the <details> in the accordion component. Now, the color is inherited from the root to ensure consistency with the UI and maintain a cohesive design throughout
• Removed the background-color and padding-top from the summary inside the <p> tag in the accordion component to improve the UI design

2.1.0-beta.0 - 2025-07-24

Changed

• nav-list has been renamed to navbar-list to align with the navbar component and eliminate confusion
• Enable dark variant using data-theme attribute instead of media query
• Adjust the shade to achieve a balanced and cohesive color palette
• Replaced fixed line-heights with font-size-based line-heights for all button sizes in the btn component to ensure consistent vertical alignment and better scalability across font sizes
• Enhanced soft color appearance across dark and light themes

Fixed

• fix: ensure fallback snowberry theme doesn't override color variables when a data-theme is specified
• Fixed incorrect badge line-height that resulted in incorrect badge sizes

2.0.0-beta.0 - 2025-07-23

Added

• Components and utility classes now support prefixes. Example usage: tw:btn, tw:btn-primary Configured via: @import "tailwindcss" prefix(tw)
• Expanded typography utilities with heading-[{size}] and para-[{size}] for arbitrary size support
• A CDN version of the CSS is now available for fast and easy integration without local setup

Changed

• Now only base colors like --color-primary and --color-on-primary need to be defined; the library automatically generates shades from 50 to 950
• Now, simply set a single border-radius value in the theme; the Frutjam library automatically applies and adjusts radius values across components for optimal UI consistency
• nav has been renamed to navbar for improved clarity and consistency

Removed

• Removed manual border-radius variables for individual components (--radius-btn, --radius-input, --radius-checkbox, etc.)
• Removed manual color shade variables like --primary-100 to --primary-950, --secondary-100 to --secondary-950, etc.
• Deprecated and removed the surface component; use bg-primary-{50..950} instead

---