diff --git a/.github/release-notes/1.7.0-cover-dark.png b/.github/release-notes/1.7.0-cover-dark.png new file mode 100644 index 000000000..548dbcd85 Binary files /dev/null and b/.github/release-notes/1.7.0-cover-dark.png differ diff --git a/.github/release-notes/1.7.0-cover.png b/.github/release-notes/1.7.0-cover.png new file mode 100644 index 000000000..38664fe6c Binary files /dev/null and b/.github/release-notes/1.7.0-cover.png differ diff --git a/.github/release-notes/1.7.0-hover-gallery-dark.gif b/.github/release-notes/1.7.0-hover-gallery-dark.gif new file mode 100644 index 000000000..88856e976 Binary files /dev/null and b/.github/release-notes/1.7.0-hover-gallery-dark.gif differ diff --git a/.github/release-notes/1.7.0-hover-gallery.gif b/.github/release-notes/1.7.0-hover-gallery.gif new file mode 100644 index 000000000..2159e5bf8 Binary files /dev/null and b/.github/release-notes/1.7.0-hover-gallery.gif differ diff --git a/.github/release-notes/1.7.0-icon-list-dark.png b/.github/release-notes/1.7.0-icon-list-dark.png new file mode 100644 index 000000000..632b578ef Binary files /dev/null and b/.github/release-notes/1.7.0-icon-list-dark.png differ diff --git a/.github/release-notes/1.7.0-icon-list.png b/.github/release-notes/1.7.0-icon-list.png new file mode 100644 index 000000000..565a705be Binary files /dev/null and b/.github/release-notes/1.7.0-icon-list.png differ diff --git a/.github/release-notes/1.7.0-image-label-dark.png b/.github/release-notes/1.7.0-image-label-dark.png new file mode 100644 index 000000000..fdfa92e8f Binary files /dev/null and b/.github/release-notes/1.7.0-image-label-dark.png differ diff --git a/.github/release-notes/1.7.0-image-label.png b/.github/release-notes/1.7.0-image-label.png new file mode 100644 index 000000000..76577ae77 Binary files /dev/null and b/.github/release-notes/1.7.0-image-label.png differ diff --git a/.github/release-notes/1.7.0-kbd-dark.png b/.github/release-notes/1.7.0-kbd-dark.png new file mode 100644 index 000000000..f03572e5b Binary files /dev/null and b/.github/release-notes/1.7.0-kbd-dark.png differ diff --git a/.github/release-notes/1.7.0-kbd.png b/.github/release-notes/1.7.0-kbd.png new file mode 100644 index 000000000..bec496e6e Binary files /dev/null and b/.github/release-notes/1.7.0-kbd.png differ diff --git a/.github/release-notes/1.7.0-list-group-dark.png b/.github/release-notes/1.7.0-list-group-dark.png new file mode 100644 index 000000000..14fff2dd9 Binary files /dev/null and b/.github/release-notes/1.7.0-list-group-dark.png differ diff --git a/.github/release-notes/1.7.0-list-group.png b/.github/release-notes/1.7.0-list-group.png new file mode 100644 index 000000000..2854bab4a Binary files /dev/null and b/.github/release-notes/1.7.0-list-group.png differ diff --git a/.github/release-notes/1.7.0-maps-dark.png b/.github/release-notes/1.7.0-maps-dark.png new file mode 100644 index 000000000..4267d504b Binary files /dev/null and b/.github/release-notes/1.7.0-maps-dark.png differ diff --git a/.github/release-notes/1.7.0-maps.png b/.github/release-notes/1.7.0-maps.png new file mode 100644 index 000000000..ea8a2811c Binary files /dev/null and b/.github/release-notes/1.7.0-maps.png differ diff --git a/.github/release-notes/1.7.0-mockup-browser-dark.png b/.github/release-notes/1.7.0-mockup-browser-dark.png new file mode 100644 index 000000000..0c2b46e10 Binary files /dev/null and b/.github/release-notes/1.7.0-mockup-browser-dark.png differ diff --git a/.github/release-notes/1.7.0-mockup-browser.png b/.github/release-notes/1.7.0-mockup-browser.png new file mode 100644 index 000000000..999ece12a Binary files /dev/null and b/.github/release-notes/1.7.0-mockup-browser.png differ diff --git a/.github/release-notes/1.7.0-nav-overflow-dark.png b/.github/release-notes/1.7.0-nav-overflow-dark.png new file mode 100644 index 000000000..68ab757a0 Binary files /dev/null and b/.github/release-notes/1.7.0-nav-overflow-dark.png differ diff --git a/.github/release-notes/1.7.0-nav-overflow.png b/.github/release-notes/1.7.0-nav-overflow.png new file mode 100644 index 000000000..34ef2e97d Binary files /dev/null and b/.github/release-notes/1.7.0-nav-overflow.png differ diff --git a/.github/release-notes/1.7.0-number-input-dark.png b/.github/release-notes/1.7.0-number-input-dark.png new file mode 100644 index 000000000..af3f2aa78 Binary files /dev/null and b/.github/release-notes/1.7.0-number-input-dark.png differ diff --git a/.github/release-notes/1.7.0-number-input.png b/.github/release-notes/1.7.0-number-input.png new file mode 100644 index 000000000..1a6f1c9f8 Binary files /dev/null and b/.github/release-notes/1.7.0-number-input.png differ diff --git a/.github/release-notes/1.7.0-text-shimmer-dark.png b/.github/release-notes/1.7.0-text-shimmer-dark.png new file mode 100644 index 000000000..cfd134558 Binary files /dev/null and b/.github/release-notes/1.7.0-text-shimmer-dark.png differ diff --git a/.github/release-notes/1.7.0-text-shimmer.png b/.github/release-notes/1.7.0-text-shimmer.png new file mode 100644 index 000000000..33c850195 Binary files /dev/null and b/.github/release-notes/1.7.0-text-shimmer.png differ diff --git a/.github/release-notes/1.7.0-vector-map-dark.png b/.github/release-notes/1.7.0-vector-map-dark.png new file mode 100644 index 000000000..fa23eeb91 Binary files /dev/null and b/.github/release-notes/1.7.0-vector-map-dark.png differ diff --git a/.github/release-notes/1.7.0-vector-map.png b/.github/release-notes/1.7.0-vector-map.png new file mode 100644 index 000000000..f328f47e2 Binary files /dev/null and b/.github/release-notes/1.7.0-vector-map.png differ diff --git a/.github/release-notes/1.7.0.md b/.github/release-notes/1.7.0.md new file mode 100644 index 000000000..85a5581dc --- /dev/null +++ b/.github/release-notes/1.7.0.md @@ -0,0 +1,164 @@ + + + Tabler 1.7 + + +Tabler 1.7 is out. It brings maps: an interactive map drawn by MapLibre and a vector world map that needs no map library. There's also a nav that moves its overflow into a More menu, a number input with buttons, five new components for images and text, list group items with slots, CSS variables for every form control and a new set of 304 flags. Buttons and dark mode got a round of polish too. On top of that there are more than forty smaller changes across the framework, the demo pages and the docs. + +## Maps + + + + Maps + + +An interactive map from plain HTML, for a store locator, a delivery tracker or a dashboard of live users. Add `data-bs-toggle="map"` to an element, set the center and the zoom with data attributes, and every child with `data-bs-lng` and `data-bs-lat` becomes a `.map-marker`: a circle, a dot or a pin, with an icon, a count or an avatar inside, and a popup on click. `data-bs-route` draws a path with progress, `data-bs-geojson` draws areas and `data-bs-globe` turns the map into a 3D globe. The map is rendered by MapLibre GL JS with free tiles from OpenFreeMap, so it needs no account and no access token, and it follows dark mode. The component ships as a small add-on, `tabler-map.js`, and replaces the Mapbox and Google Maps demos. + +## Vector map + + + + Vector map + + +A world map drawn as inline SVG, for a number per country, a few places or routes between them. Add `data-bs-toggle="vector-map"` to a `.vector-map` element and pass the values in `data-bs-values`, keyed by ISO code. The country with the highest value gets the full color and the others a lighter shade, and `data-bs-colors` gives a scale of several colors with a legend. Markers, dashed lines, tooltips, zoom and selection come from data attributes too. It needs no map library, no API key and no network request. The plugin ships as `tabler-vector-map.js` with the world data in `maps/world.js`. + +## Nav overflow + + + + Nav overflow + + +Keeps a nav on one line. Items that don't fit move into a More dropdown at the end and come back when there's room again. Wrap the `.nav` in a `.nav-overflow` element with `data-bs-toggle="nav-overflow"`. It watches the wrapper, not the window, so it works in a card or a sidebar too. Mark an item with `.nav-overflow-keep` to keep it out of the menu. The demo navbar uses it now. + +## Number input + + + + Number input + + +A number field between a decrease and an increase button, for a quantity in a cart or a number of seats. Add `data-bs-toggle="number-input"` to an input and the buttons are added for you. It keeps the value within `min` and `max`, rounds it to `step`, repeats while a button is held and works with the arrow keys. The input stays the only field the form sees, and every change fires `change.bs.numberInput`. + +## Hover gallery + + + + Hover gallery + + +Several images in the space of one, for product cards, portfolios and listings. The image changes as the pointer moves across `.hover-gallery`, and `.hover-gallery-indicators` show which one is on. It needs no JavaScript. On touch screens it turns into a strip you swipe. + +## Image label + + + + Image label + + +A short text or an icon pinned to a corner of an image, such as "New", "AI" or a video length. Put `.img-label` inside an `.img-labeled` wrapper, and move it with `.img-label-top-start`, `.img-label-top-end` or `.img-label-bottom-start`. The corners follow the text direction, so they swap in RTL. + +## Mockup browser + + + + Mockup browser + + +A frame that looks like a browser window, with the window dots and an address bar, for a page preview or a screenshot. `.mockup-browser` holds a `.mockup-browser-toolbar` and a `.mockup-browser-body`, and an image in the body fills the frame. The address bar is optional, and there's a small size. + +## Icon list + + + + Icon list + + +A list with icons instead of bullets, for the features of a plan or the steps of a setup. Add `.list-icon` to the list and start each entry with an icon. The first icon becomes the marker, centered on the first line. Color all markers with `--tblr-list-icon-color`, or one of them with a `text-{color}` class on the icon, and use `.list-icon-inline` for short entries in a row. + +## List group slots + + + + List group slots + + +A list group item can now be a row of slots: `list-group-item-media`, `list-group-item-content` with a title and a description, `list-group-item-meta` and `list-group-item-actions`. Add `.list-group-selectable` and a checked input marks its row as active without JavaScript. Items can also be nested under a parent with `.list-group-nested`, and the list comes in `.list-group-sm` and `.list-group-lg` sizes. + +## Text shimmer + + + + Text shimmer + + +A band of light that sweeps across a label such as "Thinking…" while an agent works or a task runs. Add `.text-shimmer` to the label. It's a mask, so the text keeps its own color, and `.text-shimmer-loader` adds a small spinner in front. + +## Keyboard keys + + + + Keyboard keys + + +`` looks like a compact key cap now, and the `.kbd` class gives the same look to any element. Wrap the keys of one shortcut in `.kbd-group` to keep them on one line with an even gap. Inside a button or a tooltip a key takes the color of the text around it, and the look is set with `--tblr-kbd-*` variables. + +## Flags + + + + Flags + + +The flags plugin now ships the flags from [Tabler Flags](https://github.com/tabler/tabler-flags): 304 country, territory and organisation flags, 50 of them new, such as `.flag-country-nato`. The class is still `.flag-country-{code}` with the ISO code, and flags without a code use a slug, such as `.flag-country-european-union`. The old codes keep working as aliases. + +--- + +## Form CSS variables + +Form controls read CSS variables now. `.form-control` and `.form-select` use `--tblr-control-*`, and checks, switches, input group add-ons, floating labels and range inputs have their own `--tblr-form-check-*`, `--tblr-form-switch-*`, `--tblr-input-group-addon-*`, `--tblr-form-floating-*` and `--tblr-range-*` sets. Icon add-ons, validation icons, the OTP input and Tom Select follow them too, so one override restyles a whole form. The new Forms → CSS variables page lists every token. + +The small and large selects match the inputs: `.form-select-sm` is 32px tall, like `.form-control-sm`. Input icons sit in the middle of small and large fields, and Tom Select works with `.input-icon`. The switch has a filled gray track when off. + +## Buttons and dark mode + +Filled `.btn-*` buttons have a thin border, inner edges and a faint gradient, and outline buttons lose their shadow. The default `.btn` stays opaque on hover. `.btn-xl` is bigger, and `.btn-sm` has more side padding. + +In dark mode, nav links, list group headers, toast headers, breadcrumbs, the footer, `.input-group-text` and striped tables have better contrast, and card, alert, dropdown and table borders are no longer too bright. `--tblr-bg-surface-tertiary` is translucent, so card headers, footers and table stripes show on dark cards. `.card-table` rounds only the cells in the card corners. + +Four neutral fill tokens, `--tblr-fill-primary` to `--tblr-fill-quaternary`, give the translucent backgrounds of badges, avatars, code, progress and range tracks and the hover state. The `.bg-fill-*` utilities use them too. + +## Datagrid, Datepicker and themes + +`.datagrid-horizontal` puts each label beside its value, and `.datagrid-cols-{n}` shows several pairs in a row. The Datepicker has a `weekNumbers` option, `dateFormat` patterns such as `'DD.MM.YYYY'` or `'iso'`, and a `boundInput` option that writes ISO dates to a form field. It also no longer stays stuck closed after the calendar throws an error. + +`tabler-themes.css` has a new `mist` gray palette for `data-bs-theme-base`, a cool gray with a blue-green tint. + +## Layout and forms + +`data-bs-navbar-position="combined"` shows the vertical and the horizontal navbar at once. The vertical navbar submenu no longer paints over the user dropdown in `.navbar-footer`. Disabled Tom Select fields have rounded corners, and small and large ones a rounded focus ring. `.nav-segmented` icons follow the link color on hover. + +## Smaller JS and bundled libraries + +`tabler.js` is built for ES2022 instead of ES2015, which takes about 1.5 kB off `tabler.min.js` after gzip. The code is checked with ESLint now. The Sass doc comments are no longer in `tabler.css`. + +`dist/libs` has MapLibre GL JS 6, and `tabler-vendors.css` styles its popups, attribution and controls in light and dark. Dropzone, driver.js, fslightbox, FullCalendar, HugeRTE and Plyr are updated too. + +## Demo and docs + +The demo navbar moves the links that don't fit into a More menu. The maps page has marker, popup, route, area, cluster, bubble map and globe demos, and the new Map blocks page has seven blocks, among them a store locator, a delivery tracker and a server status map. The marketing hero has a new dashboard screenshot with a dark version. Tabler Icons are at 3.49 and Tabler Illustrations at 1.18 with 11 new illustrations. + +The docs have pages for every new component, a Forms → CSS variables page and an Icon design guide in the Tabler Icons section. The datagrid page has more examples. + +## Upgrading + +Nothing in 1.7 requires a change to your markup, and every class, custom property, Sass variable and function from 1.6 is still there. + +Pricing and Shape moved from `tabler-marketing.css` into the core `tabler.css`. A page that loads both files needs no change. A page that loaded only `tabler-marketing.css` for `.pricing` or `.shape` has to add `tabler.css`. If you import Sass partials one by one, `scss/marketing/pricing` and `scss/marketing/shape` are now `scss/ui/pricing` and `scss/ui/shape`. + +Some things look a little different: buttons, the switch track, the small select height, a few dark mode surfaces and the flags, which are redrawn at a 5:4 ratio instead of 4:3. Check custom styles that sit close to them. + +The map demos use MapLibre instead of Mapbox GL and Google Maps. This only touches the demo pages: `@tabler/core` never shipped those libraries. + +Every change, with a before and after example, is in the [Upgrade to 1.7](https://docs.tabler.io/ui/getting-started/upgrade/1-7) guide. diff --git a/screenshots/pages/kbd.astro b/screenshots/pages/kbd.astro new file mode 100644 index 000000000..885e36e9e --- /dev/null +++ b/screenshots/pages/kbd.astro @@ -0,0 +1,40 @@ +--- +// Keyboard keys where people meet them most: the shortcuts in an open actions +// menu. Every shortcut is a `.kbd-group`, so the keys of one combination sit +// together with an even gap. The menu is written open (`show`, static +// position) because the capture cannot click; the cursor rests on one item. +import ScreenshotLayout from '../layouts/ScreenshotLayout.astro' +import Icon from '@ui/Icon.astro' + +const actions = [ + { label: 'New file', icon: 'file-plus', keys: ['⌘', 'N'] }, + { label: 'Search', icon: 'search', keys: ['⌘', 'K'], active: true }, + { label: 'Duplicate', icon: 'copy', keys: ['⌘', 'D'] }, + { label: 'Move to folder', icon: 'folder', keys: ['⌘', '⇧', 'M'] }, +] +--- + + +
+ { + actions.map((action) => ( + + + {action.label} + + {action.keys.map((key) => ( + {key} + ))} + + {action.active && } + + )) + } +
+ + + Delete + ⌘⌫ + +
+ diff --git a/screenshots/pages/list-group.astro b/screenshots/pages/list-group.astro new file mode 100644 index 000000000..02e5fb46f --- /dev/null +++ b/screenshots/pages/list-group.astro @@ -0,0 +1,43 @@ +--- +// List group with the item slots: a team picker in a card. Each row has the +// media, content, meta and actions slots, the list is selectable, and the +// second row is checked, so its row shows the active look the checkbox gives +// it without any JavaScript. The cursor rests on that checkbox. +import ScreenshotLayout from '../layouts/ScreenshotLayout.astro' +import Card from '@ui/Card.astro' + +const people = [ + { name: 'Paweł Kuna', role: 'UI Designer', avatar: '000m', seen: '2 h' }, + { name: 'Alice Marlin', role: 'Frontend developer', avatar: '016f', seen: '3 d', checked: true }, + { name: 'Dunn Slane', role: 'Research Nurse', avatar: '002m', seen: '5 d' }, + { name: 'Emmy Levet', role: 'Product manager', avatar: '003f', seen: '1 w' }, +] +--- + + + +
+

Add to project

+
+
+ { + people.map((person) => ( + + )) + } +
+ +