diff --git a/.changeset/button-ghost.md b/.changeset/button-ghost.md new file mode 100644 index 000000000..1c051183d --- /dev/null +++ b/.changeset/button-ghost.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": minor +--- + +Added `.btn-ghost` button variant with transparent background and hover effects. diff --git a/.changeset/icon-stroke-width.md b/.changeset/icon-stroke-width.md new file mode 100644 index 000000000..0cae0ffb8 --- /dev/null +++ b/.changeset/icon-stroke-width.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Updated `stroke-width` for `.icon-sm` from `1` to `1.5` for better visibility. diff --git a/.changeset/onboarding-page.md b/.changeset/onboarding-page.md new file mode 100644 index 000000000..764d309d3 --- /dev/null +++ b/.changeset/onboarding-page.md @@ -0,0 +1,5 @@ +--- +"@tabler/preview": minor +--- + +Added new onboarding page with progress indicator and navigation layout. diff --git a/.changeset/progress-background.md b/.changeset/progress-background.md new file mode 100644 index 000000000..d6a7ae295 --- /dev/null +++ b/.changeset/progress-background.md @@ -0,0 +1,6 @@ +--- +"@tabler/core": minor +"@tabler/preview": minor +--- + +Added Progress Background component with text labels and value display. diff --git a/.changeset/progress-sizes.md b/.changeset/progress-sizes.md new file mode 100644 index 000000000..09d38a1ed --- /dev/null +++ b/.changeset/progress-sizes.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": minor +--- + +Added large and extra-large sizes for progress component (`.progress-lg`, `.progress-xl`). diff --git a/.changeset/progress-steps.md b/.changeset/progress-steps.md new file mode 100644 index 000000000..79c696c39 --- /dev/null +++ b/.changeset/progress-steps.md @@ -0,0 +1,6 @@ +--- +"@tabler/core": minor +"@tabler/preview": minor +--- + +Added Progress Steps component for step-by-step navigation indicators. diff --git a/.changeset/progress-transitions.md b/.changeset/progress-transitions.md new file mode 100644 index 000000000..243218bab --- /dev/null +++ b/.changeset/progress-transitions.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Added smooth transitions for progress bar width and background color changes. diff --git a/.changeset/skip-link-accessibility.md b/.changeset/skip-link-accessibility.md new file mode 100644 index 000000000..c4754b1e0 --- /dev/null +++ b/.changeset/skip-link-accessibility.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Updated skip-link to use `visually-hidden` class for better accessibility. diff --git a/.changeset/trending-icons.md b/.changeset/trending-icons.md new file mode 100644 index 000000000..289c979a7 --- /dev/null +++ b/.changeset/trending-icons.md @@ -0,0 +1,6 @@ +--- +"@tabler/core": patch +"@tabler/preview": patch +--- + +Updated trending component to use `arrow-up`/`arrow-down` icons instead of `trending-up`/`trending-down`. diff --git a/.cursor/rules/changelog.mdc b/.cursor/rules/changelog.mdc new file mode 100644 index 000000000..8683b978d --- /dev/null +++ b/.cursor/rules/changelog.mdc @@ -0,0 +1,100 @@ +--- +description: Cursor Rules for Tabler Changesets +globs: +alwaysApply: true +--- + + +### File Structure + +- Each change must be in a separate changeset file in `.changeset/` directory +- Use descriptive kebab-case filenames (e.g., `progress-sizes.md`, `button-ghost.md`) +- Follow the standard changeset format with frontmatter and description + +### Change Description Format + +- **One sentence per changeset** - keep descriptions concise and focused +- Use **backticks for code elements**: classes (`.btn-ghost`), properties (`stroke-width`), values (`1.5`), icons (`arrow-up`) +- Start with action verbs: "Added", "Updated", "Fixed", "Removed" +- Be specific about what was changed + +### Version Bump Guidelines + +- **Major**: Breaking changes, complete rewrites +- **Minor**: New features, new components, new pages, significant enhancements +- **Patch**: Bug fixes, small improvements, style updates, accessibility fixes + +### Package Selection + +- `"@tabler/core"`: Changes to SCSS, core functionality, CSS classes +- `"@tabler/preview"`: New pages, demo updates, preview-specific changes +- `"@tabler/docs"`: Documentation updates +- Use multiple packages when change affects multiple areas + +### Examples + +#### New Feature (Minor) + +```md +--- +"@tabler/core": minor +"@tabler/preview": minor +--- + +Added Progress Steps component for step-by-step navigation indicators. +``` + +#### Bug Fix (Patch) + +```md +--- +"@tabler/core": patch +--- + +Updated `stroke-width` for `.icon-sm` from `1` to `1.5` for better visibility. +``` + +#### New Page (Minor) + +```md +--- +"@tabler/preview": minor +--- + +Added new onboarding page with progress indicator and navigation layout. +``` + +#### Style Enhancement (Patch) + +```md +--- +"@tabler/core": patch +--- + +Added smooth transitions for progress bar width and background color changes. +``` + +### Code Formatting Rules + +- Class names: `.btn-ghost`, `.progress-lg`, `.icon-sm` +- CSS properties: `stroke-width`, `background-color`, `width` +- Values: `1.5`, `transparent`, `100%` +- Icon names: `arrow-up`, `arrow-down`, `trending-up` +- HTML attributes: `aria-label`, `role`, `data-*` +- JavaScript functions: `addEventListener()`, `querySelector()` + +### Common Patterns + +- **Component additions**: "Added [ComponentName] component for [purpose]" +- **Size variants**: "Added [size] size variant for [component] (`.class-size`)" +- **Style fixes**: "Fixed [issue] in [component/element]" +- **Icon updates**: "Updated [component] to use `new-icon` instead of `old-icon`" +- **Accessibility**: "Improved accessibility by [specific change]" + +### Commit Message Format + +Use English for commit messages following conventional commit format when possible: + +- `feat: add progress steps component` +- `fix: update icon stroke width for better visibility` +- `style: add smooth transitions to progress bars` \ No newline at end of file diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss index 506169967..39c2659ca 100644 --- a/core/scss/_variables.scss +++ b/core/scss/_variables.scss @@ -675,7 +675,7 @@ $card-border-color: var(--#{$prefix}border-color-translucent) !default; $card-border-radius: var(--#{$prefix}border-radius-lg) !default; $card-spacer-x: 1.25rem !default; -$card-spacer-y: 1rem !default; +$card-spacer-y: 1.25rem !default; $card-cap-bg: var(--#{$prefix}bg-surface-tertiary) !default; $card-cap-color: inherit !default; diff --git a/core/scss/ui/_buttons.scss b/core/scss/ui/_buttons.scss index eb339b018..f9c5b6bcf 100644 --- a/core/scss/ui/_buttons.scss +++ b/core/scss/ui/_buttons.scss @@ -24,7 +24,6 @@ position: relative; min-width: calc((var(--#{$prefix}btn-line-height) * 1) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2)); min-height: calc((var(--#{$prefix}btn-line-height) * 1) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2)); - .icon { width: var(--#{$prefix}btn-icon-size); @@ -115,6 +114,15 @@ --#{$prefix}btn-disabled-border-color: var(--#{$prefix}#{$color}); } + .btn-ghost { + --#{$prefix}btn-bg: transparent; + --#{$prefix}btn-border-color: transparent; + --#{$prefix}btn-box-shadow: none; + --#{$prefix}btn-hover-bg: var(--#{$prefix}bg-surface-secondary); + --#{$prefix}btn-hover-border-color: transparent; + --#{$prefix}btn-hover-color: var(--#{$prefix}body-color); + } + .btn-ghost-#{$color}, .btn-ghost.btn-#{$color} { --#{$prefix}btn-color: var(--#{$prefix}#{$color}); @@ -187,7 +195,7 @@ .icon { margin: calc(-1 * var(--#{$prefix}btn-padding-x)); } - //[BUG] btn-sm and btn-xl with an icon looks broken + //[BUG] btn-sm and btn-xl with an icon looks broken //issue #2470 fixed min-width: calc(var(--#{$prefix}btn-icon-size) + (var(--#{$prefix}btn-padding-x) * 2)); min-height: calc(var(--#{$prefix}btn-icon-size) + (var(--#{$prefix}btn-padding-y) * 2)); diff --git a/core/scss/ui/_icons.scss b/core/scss/ui/_icons.scss index f236afc2c..f34c245ab 100644 --- a/core/scss/ui/_icons.scss +++ b/core/scss/ui/_icons.scss @@ -37,7 +37,7 @@ // .icon-sm { --#{$prefix}icon-size: 1rem; - stroke-width: 1; + stroke-width: 1.5; } .icon-md { diff --git a/core/scss/ui/_progress.scss b/core/scss/ui/_progress.scss index 49fcaf2bf..f8936daae 100644 --- a/core/scss/ui/_progress.scss +++ b/core/scss/ui/_progress.scss @@ -42,11 +42,20 @@ Progress height: .25rem; } +.progress-lg { + height: .75rem; +} + +.progress-xl { + height: 1rem; +} + /** Progress bar */ .progress-bar { height: 100%; + @include transition(width $transition-time, background $transition-time); } .progress-bar-indeterminate { @@ -104,4 +113,32 @@ Progressbg font-weight: var(--#{$prefix}font-weight-medium); margin-left: auto; padding-left: 2rem; +} + +/** +Progress steps + */ +.progress-steps { + display: flex; + flex-wrap: nowrap; + width: 100%; + padding: 0; + margin: 0; + list-style: none; + gap: .25rem; +} + +.progress-steps-item { + flex: 1 1 0; + min-height: .25rem; + margin-top: 0; + color: inherit; + text-align: center; + cursor: default; + background-color: var(--tblr-border-color); + border-radius: var(--#{$prefix}border-radius-pill); + + @at-root a#{&} { + cursor: pointer; + } } \ No newline at end of file diff --git a/core/scss/ui/forms/_form-selectgroup.scss b/core/scss/ui/forms/_form-selectgroup.scss index f49939c6d..02aa143aa 100644 --- a/core/scss/ui/forms/_form-selectgroup.scss +++ b/core/scss/ui/forms/_form-selectgroup.scss @@ -3,11 +3,12 @@ Select group */ .form-selectgroup { display: inline-flex; - margin: 0 -.5rem -.5rem 0; + margin: 0; flex-wrap: wrap; + gap: 0.5rem; .form-selectgroup-item { - margin: 0 .5rem .5rem 0; + margin: 0; } } diff --git a/docs/content/ui/components/progress.md b/docs/content/ui/components/progress.md index 1e20cf58e..c8ebc1be7 100644 --- a/docs/content/ui/components/progress.md +++ b/docs/content/ui/components/progress.md @@ -170,40 +170,10 @@ By using a progress bar component as a background element, designers can create Thanks to this you can create a nice looking statistics section: {% capture html -%} -
-
-
-
-
Poland
-
65%
-
-
-
-
-
-
Germany
-
35%
-
-
-
-
-
-
United Stated
-
28%
-
-
-
-
-
-
United Kingdom
-
20%
-
-
-
-
-
-
France
-
15%
-
+{% include "ui/progressbg.html" value="65" text="Poland" show-value=true %} +{% include "ui/progressbg.html" value="35" text="Germany" show-value=true %} +{% include "ui/progressbg.html" value="28" text="United Stated" show-value=true %} +{% include "ui/progressbg.html" value="20" text="United Kingdom" show-value=true %} +{% include "ui/progressbg.html" value="15" text="France" show-value=true %} {%- endcapture %} {% include "docs/example.html" html=html vertical card %} \ No newline at end of file diff --git a/preview/pages/onboarding.html b/preview/pages/onboarding.html new file mode 100644 index 000000000..cb2230625 --- /dev/null +++ b/preview/pages/onboarding.html @@ -0,0 +1,149 @@ +--- +layout: base +title: Onboarding +permalink: onboarding.html +--- + + + +
+
+
+

+ Let's set up your account +

+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + + + +
+
+
+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+
+
+ +
+ {% include "ui/button.html" text="Back" color="link link-secondary" %} + {% include "ui/button.html" text="Continue" color="primary" %} +
+
+
+ diff --git a/preview/pages/progress.html b/preview/pages/progress.html new file mode 100644 index 000000000..822fc0fb6 --- /dev/null +++ b/preview/pages/progress.html @@ -0,0 +1,270 @@ +--- +layout: default +title: Progress +page-header: Progress +page-menu: base.progress +permalink: progress.html +--- + +
+
+
+
+

Default

+
+ {% include "ui/progress.html" value="0" %} + {% include "ui/progress.html" value="20" %} + {% include "ui/progress.html" value="40" %} + {% include "ui/progress.html" value="100" %} +
+
+
+
+
+
+
+

With value

+
+ {% include "ui/progress.html" value="10" show-value size="lg" %} + {% include "ui/progress.html" value="20" show-value size="lg" %} + {% include "ui/progress.html" value="90" show-value size="lg" %} +
+
+
+
+
+
+
+

Colors

+
+ {% include "ui/progress.html" color="blue" value="20" %} + {% include "ui/progress.html" color="green" value="40" %} + {% include "ui/progress.html" color="yellow" value="60" %} + {% include "ui/progress.html" color="red" value="80" %} +
+
+
+
+
+
+
+

Sizes

+
+ {% include "ui/progress.html" value="20" size="sm" %} + {% include "ui/progress.html" value="40" %} + {% include "ui/progress.html" value="60" size="lg" %} + {% include "ui/progress.html" value="80" size="xl" %} +
+
+
+
+
+
+
+

Indeterminate

+
+ {% include "ui/progress.html" indeterminate=true %} +
+
+
+
+
+
+
+

Multiple values

+
+ {% include "ui/progress.html" values="20,30,10" %} + {% include "ui/progress.html" values="10,20,30,40" class="progress-separated" %} +
+
+
+
+
+
+
+

Striped

+
+ {% include "ui/progress.html" color="blue" value="20" striped %} + {% include "ui/progress.html" color="green" value="40" striped %} + {% include "ui/progress.html" color="yellow" value="60" striped %} + {% include "ui/progress.html" color="red" value="80" striped %} +
+
+
+
+
+
+
+

Animated

+
+ {% include "ui/progress.html" value="20" striped animated %} + {% include "ui/progress.html" value="40" color="green" striped animated %} + {% include "ui/progress.html" value="60" color="yellow" striped animated %} + {% include "ui/progress.html" value="80" color="red" striped animated %} +
+
+
+
+
+
+
+

+ Animated with JavaScript +

+
+
+ {% include "ui/progress.html" value="0" id="progress-animated" %} +
+
+ 0% +
+
+
+ + + + + + +
+
+
+
+
+
+
+

+ Steps Progress +

+
+ {% include "ui/progress-steps.html" count=3 %} + {% include "ui/progress-steps.html" count=5 active=4 %} + {% include "ui/progress-steps.html" count=10 color="red" %} + {% include "ui/progress-steps.html" count=8 color="green" active=8 %} +
+
+
+
+
+
+
+

+ Progress Background +

+
+ {% include "ui/progressbg.html" value="85" text="Poland" show-value=true %} + {% include "ui/progressbg.html" value="65" text="Germany" show-value=true %} + {% include "ui/progressbg.html" value="45" text="United States" show-value=true %} + {% include "ui/progressbg.html" value="25" text="France" show-value=true %} +
+
+
+
+
+
+
+

+ Progress Background Colors +

+
+ {% include "ui/progressbg.html" value="75" text="Success" color="success-lt" show-value=true %} + {% include "ui/progressbg.html" value="60" text="Warning" color="warning-lt" show-value=true %} + {% include "ui/progressbg.html" value="40" text="Danger" color="danger-lt" show-value=true %} + {% include "ui/progressbg.html" value="90" text="Info" color="info-lt" show-value=true %} +
+
+
+
+
+
+
+

+ Progress Description +

+
+ {% include "ui/progress-description.html" label="Project completion" value="85" color="green" %} + {% include "ui/progress-description.html" label="Storage usage" description="2.4GB of 5GB" value="48" color="blue" %} + {% include "ui/progress-description.html" label="Download progress" value="75" color="yellow" %} + {% include "ui/progress-description.html" label="Skills assessment" description="HTML/CSS" value="92" color="red" %} +
+
+
+
+
+
+
+

+ Progress Description Sizes +

+
+ {% include "ui/progress-description.html" label="Small progress" value="60" size="sm" color="blue" %} + {% include "ui/progress-description.html" label="Default progress" value="70" color="green" %} + {% include "ui/progress-description.html" label="Large progress" value="80" size="lg" color="orange" %} + {% include "ui/progress-description.html" label="Extra large" value="90" size="xl" color="purple" %} +
+
+
+
+
+ +{% capture_script -%} + + + +{%- endcapture_script -%} \ No newline at end of file diff --git a/shared/data/menu.json b/shared/data/menu.json index d9cfa68b0..d2be89d72 100644 --- a/shared/data/menu.json +++ b/shared/data/menu.json @@ -159,6 +159,11 @@ "url": "placeholder.html", "title": "Placeholder" }, + "progress": { + "url": "progress.html", + "title": "Progress", + "badge": "New" + }, "segmented-control": { "title": "Segmented control", "url": "segmented-control.html", diff --git a/shared/includes/cards/tables/progressbg.html b/shared/includes/cards/tables/progressbg.html index 24b3b5923..1757a7fb2 100644 --- a/shared/includes/cards/tables/progressbg.html +++ b/shared/includes/cards/tables/progressbg.html @@ -13,10 +13,7 @@ {% for url in urls %} -
- {% include "ui/progress.html" value=url.bounce class="progressbg-progress" color="primary-lt" %} -
{{ url.uri }}
-
+ {% include "ui/progressbg.html" value=url.bounce text=url.uri %} {{ url.visitors }} diff --git a/shared/includes/docs/navbar.html b/shared/includes/docs/navbar.html index 783848792..9173dc1a7 100644 --- a/shared/includes/docs/navbar.html +++ b/shared/includes/docs/navbar.html @@ -3,7 +3,7 @@
- + {% include "docs/logo.html" %}
diff --git a/shared/includes/layout/skip-link.html b/shared/includes/layout/skip-link.html index 21b5332ad..7c5aaaf9c 100644 --- a/shared/includes/layout/skip-link.html +++ b/shared/includes/layout/skip-link.html @@ -1,2 +1,2 @@ - + diff --git a/shared/includes/settings.html b/shared/includes/settings.html index cbc955f7b..39dd87661 100644 --- a/shared/includes/settings.html +++ b/shared/includes/settings.html @@ -106,6 +106,14 @@ {% capture_script %}