shoelace

Commits

• 7095236: fix whitespace (Cory LaViska)
• 51dbc1a: remove elevation when inline (Cory LaViska)
• 76e1d4b: adjust elevation tokens (Cory LaViska)
• fd285db: use black for overlay color (Cory LaViska)
• 27376df: improve color picker (Cory LaViska)
• 76f04c0: link to color token generator (Cory LaViska)
• af852a0: improve icon color contrast (Cory LaViska)
• 9c0641d: fixes #508 (Cory LaViska)
• d679d27: update changelog (Cory LaViska)
• a0d2dbf: update lit and lit-html (Cory LaViska)
• f9010cf: add date to input (Cory LaViska)
• d7dd4b8: add missing component (Cory LaViska)
• c173d0d: don't use hash routing in dev (Cory LaViska)
• c0102a1: fix dev dep (Cory LaViska)
• 5cd5567: disable ghost mode (Cory LaViska)
• f3281d3: fix toggle hover (Cory LaViska)
• 0829af7: fix --sl-color-neutral-0|1000 (Cory LaViska)
• 4c6e61e: improve switch contrast (Cory LaViska)
• 36d499f: use a pill button (Cory LaViska)
• 43f7458: rework focus-visible logic (Cory LaViska)
• 10d95ba: remove focus from resizer (Cory LaViska)
• 033896d: adjust default button (Cory LaViska)
• 9d7c3b2: no need to force focus (Cory LaViska)
• 2865b54: add --sl-focus-ring and update styles (Cory LaViska)
• 624f6ef: fix arrow keys (Cory LaViska)
• 5933e94: fix checkbox focus visible (Cory LaViska)
• dfb9127: fix checkbox/switch focus visible (Cory LaViska)
• 248bb32: fix radio focus visible styles (Cory LaViska)
• 165306f: remove no-fieldset; add fieldset (Cory LaViska)
• 719d62b: fix spacing in select clearable (Cory LaViska)
• f4c472e: remove --focus-ring (Cory LaViska)
• f121c11: update changelog (Cory LaViska)
• 1fb0e41: 2.0.0-beta.49 (Cory LaViska)

Bug Fixes

• emit sl-change from checkbox on user interaction only #498 (Benny Powers)
• emit sl-change from radio and switch on user interaction only #498 (Benny Powers)
• allow ctrl/command + key when the sl-select is on focus #505 (gtyamamoto)
• allow ctrl/command + key when the sl-select is on focus #505 (gtyamamoto)

Commits

• d6e6f2c: update doc (Cory LaViska)
• e938f94: add console error (Cory LaViska)
• 807cba1: fix type to select bug (Cory LaViska)
• b13e2c3: Simplify switch thumb calc (#490) (David Gonzalez) #490
• a59d29e: update changelog (Cory LaViska)
• 246f115: move qr out of utils (Cory LaViska)
• 28b0e74: semibold labels (Cory LaViska)
• 6d90186: fix transparent bg styles (Cory LaViska)
• 6aa31e6: more contrast for avatars (Cory LaViska)
• 4d56124: update installation instructions (Cory LaViska)
• 68f40ed: use token for track color (Cory LaViska)
• 7d6390d: adjust styles and use tokens when possible (Cory LaViska)
• d07311c: split utility styles out (Cory LaViska)
• cebd206: rework design tokens and use inverted dark theme (Cory LaViska)
• a71b83b: update changelog (Cory LaViska)
• f746ef7: update changelog (Cory LaViska)
• dfd1877: add :host selector (Cory LaViska)
• bffa9a2: improve palette styles (Cory LaViska)
• fd104ad: expose styles for js (Cory LaViska)
• ad35df2: use rgb primitives for color tokens to support alpha (Cory LaViska)
• e53f36e: update docs and changelog (Cory LaViska)
• 688ac96: colors 1000 => 950 (Cory LaViska)
• 3877e89: reword (Cory LaViska)
• c5d4c53: generate css files from themes/*.styles.ts (Cory LaViska)
• 21de0db: use color scale (Cory LaViska)
• 3d1f858: black/white => empty/full (Cory LaViska)
• c7058e7: improve link contrast in docs (Cory LaViska)
• 6766af0: fix focus ring styles (Cory LaViska)
• 04a2d45: update content (Cory LaViska)
• 9dbee4c: add neutral color palette (Cory LaViska)
• 3189c6f: change -0 -1000 to --sl-color-neutral-0|1000 (Cory LaViska)
• 95f6841: update base theme class (Cory LaViska)
• 64b0e63: update theme docs (Cory LaViska)
• c1a5ce4: improve copy styles (Cory LaViska)
• fe766dc: Minor typo in the page describing forms (#492) (Guillaume Laforge) #492
• a050832: rename base.css to light.css (Cory LaViska)
• 5900594: exit on startup when scripts fail (Cory LaViska)
• da83581: disallow expressions (Cory LaViska)
• e5af325: add icons back (Cory LaViska)
• a7d8199: add codepen button to code blocks (Cory LaViska)
• 35d960c: better copy button styles (Cory LaViska)
• 23a7268: square hover (Cory LaViska)
• c356ec4: update theme docs (Cory LaViska)
• 7f4169e: tweak styles (Cory LaViska)
• 54b2cbc: inline script + style for codepen (Cory LaViska)
• 37e60c9: update changelog (Cory LaViska)
• 34db968: Add href etc to sl-icon-button (#496) (Benny Powers) #496
• 6c9a25a: Merge branch 'theming' into next (Cory LaViska)
• 75f2da3: prettier (Cory LaViska)
• a396c86: improve code block button styles (Cory LaViska)
• 4fedf95: faster copy animation (Cory LaViska)
• ab1a68d: fix color (Cory LaViska)
• 2b12a47: merge changes (Cory LaViska) #498
• 3bb8614: use fixture types consistently (Cory LaViska)
• 0d3d9c8: Merge branch 'bennypowers-fix/checkbox-emit-on-user-action-only' into next (Cory LaViska)
• 72eff37: emit on left/right (Cory LaViska)
• 5aab7c3: fix radio group focus bug (Cory LaViska)
• 94f4d65: remove focus ring color tokens (Cory LaViska)
• cd76672: use prefers-color-scheme by default (Cory LaViska)
• 1b38388: remove unused z-index (Cory LaViska)
• d81db3f: remove unused style (Cory LaViska)
• 83a01cf: update brand color (Cory LaViska)
• b754912: remove toggle transition (Cory LaViska)
• f8aff7d: improve theme picker (Cory LaViska)
• b0cf35d: fix copy button animation (Cory LaViska)
• 65a3c3a: remove z-index (Cory LaViska)
• 5eac4eb: Add prefix and suffix slot to sl-select component (#501) (Rafael Rossini) #501
• a89eab4: Merge branch 'next' of https://github.com/shoelace-style/shoelace into next (Cory LaViska)
• b35d5e9: update examples and changelog (Cory LaViska)
• 185bc30: improve theme picker (Cory LaViska)
• 5f33bd3: fix theme picker again (Cory LaViska)
• 6607cdb: remove extra comment (Cory LaViska)
• 17c1be6: pure inversion (Cory LaViska)
• 9612af0: update example (Cory LaViska)
• 8c221f3: docs styles (Cory LaViska)
• 9600853: fix whitespace (Cory LaViska)
• e571c88: fix example (Cory LaViska)
• be5bbe9: change default effect to 'none' (Cory LaViska)
• 6d03f12: improve contrast; fixes #128 (Cory LaViska)
• c885b76: add theme color back (Cory LaViska)
• 8c5dee5: revert SL brand color (Cory LaViska)
• fb48c4c: remove ref attr (Cory LaViska)
• 9a1f7dd: fix SVG in safari (Cory LaViska)
• e789f92: remove outdated warning (Cory LaViska)
• 5d9c650: info => neutral (Cory LaViska)
• 2af3831: fix example (Cory LaViska)
• 99750b8: improve table viewing on mobile (still not great) (Cory LaViska)
• 1e65d45: add design token section (Cory LaViska)
• 3ea89b3: fix mouseup (Cory LaViska)
• e339571: fix menu bug (Cory LaViska)
• be8f2bf: improve help text contrast (Cory LaViska)
• 1ce4d31: update screen color (Cory LaViska)
• 30477bb: shifted dark theme (Cory LaViska)
• 917dbb1: update changelog (Cory LaViska)
• 0a45f44: Merge branch 'fix/ctrlkeys-usability-sl-select' of https://github.com/gtyamamoto/shoelace into gtyamamoto-fix/ctrlkeys-usability-sl-select (Cory LaViska) #505
• b7caba8: Merge branch 'gtyamamoto-fix/ctrlkeys-usability-sl-select' into next (Cory LaViska)
• a3626e1: update changelog (Cory LaViska)
• c41714c: fix menu selection via type to select (Cory LaViska)
• 6014c88: 2.0.0-beta.48 (Cory LaViska)

Commits

• d605de4: update analyzer (Cory LaViska)
• a30adac: add reflects column (Cory LaViska)
• 4aeb804: auto import dependencies (Cory LaViska)
• a48eef2: refactor base path logic (Cory LaViska)
• b98e1f6: fix radio group tabbing (Cory LaViska)
• a2594d4: add note about deps (Cory LaViska)
• a654f50: fix box-sizing (Cory LaViska)
• 002f847: remove unused rule (Cory LaViska)
• 7de15e9: adjust comment (Cory LaViska)
• e493bda: fix changelog (Cory LaViska)
• 1ae5b9c: add descr (Cory LaViska)
• 3541540: fix grid handle drag behavior (Cory LaViska)
• f9491bb: simplify component gathering (Cory LaViska)
• e36a49b: update hasSlot selector to search top-level only (#481) (Shanyu Cui) #481
• d11e7fe: Merge branch 'next' of https://github.com/shoelace-style/shoelace into next (Cory LaViska)
• fa82d31: update changelog (Cory LaViska)
• 1a6c1ed: fixes #480 (Cory LaViska)
• efed99b: Remove unused import in example (Cory LaViska)
• d84fd95: Automate GitHub release creation (#483) (Andreas) #483
• dde15b0: update version (Cory LaViska)
• 43328b9: 2.0.0-beta.47 (Cory LaViska)

• Fix semver numbering
• No other changes from 1.0.0-beta24

• Added tabs-nav block modifier
• Added input hints
• User browser default for less distracting focus state on tabs
• Fixed bug where textareas didn't work with validation classes

• Adjusted default values for --input-font-size-sm|xs
• Added dropdown headings
• Added dropdown variables:
  • --dropdown-font-size
  • --dropdown-font-weight
  • --dropdown-heading-color
  • --dropdown-heading-font-size
  • --dropdown-heading-font-weight
  • --dropdown-line-height
• Removed ASCII dropdown caret and use borders instead. Added:
  • --dropdown-caret-color
  • --dropdown-caret-size
  • --dropdown-caret-width
• Fixed dropdowns so text alignment is correct even when the parent element is different
• Fixed dropdowns so they don't close when clicking on disabled items or headings
• Fixed dropdown behavior so clicks aren't intercepted by default. This lets you use regular links in your dropdowns without the need for JavaScript. To intercept a click, use event.preventDefault() in the select callback.
• Made --font-size-small relative by default
• Remove --font-size-big since it was no longer used
• Made dropdown selectors less specific so they're easier to override
• Made button selectors less specific so they're easier to override
• Fixed various typos and examples in the docs

This version fixes a critical bug that prevented dropdowns from working properly.

• Fix dropdown bug introduced by #49
• Fix file button positioning

• Fixed input icons so they inherit validation classes
• Fixed input icons so they work better with icon fonts and SVG icons
• Fixed bug where dropdown triggers with children wouldn't open the menu
• Changed --input-focus-width to --component-focus-width since inputs don't use it
• Rewrote tabs script
  • Switch to a mutation observer instead of event listeners ✨
  • This makes it easier to programmatically switch tabs
  • Keeps tab panes in sync with the active tab with zero effort from the user
• Made file buttons into their own component
  • Changed structure to make file buttons keyboard accessible
  • Added lots of examples
• Minor corrections to the docs

Shoelace is inching closer and closer to its first stable release. Lots of bugs have been fixed I'm really happy with the API and the overall structure of the project. 💯

What's new in this release:

• Separated core/component variables and custom media queries into variables.css (this makes it a lot easier to bootstrap the project and use Shoelace's variables in your own project)
• Added input icons
• Added --body-color-muted variable
• Added .text-muted modifier
• Improved checkbox/radio alignment

• Forked the Bootstrap 4 grid system for Shoelace
• Added custom media queries for xs, sm, md, lg, and xl breakpoints
• Added display utilities (e.g. hide-xs, hide-sm-down)
• Reduced switch sizes so they're not so gigantic compared to inputs
• Changed input-single to input-field since it's more semantic
• Added --label-color variable
• Added --input-addon-* variables
• Fixed :last-child margins so they only apply to direct descendents
• Added polyfill styles to force [hidden] elements to not display
• Documentation updates

• Changed loader sizes to be consistent with inputs by default
• Adjust default loader thickness
• Fixed active/hover states for dark buttons
• Increased default input heights slightly (2rem => 2.25rem, etc.)
• Increased bottom margins to 1.5rem from 1rem
• Decreased default focus ring widths from 3px to 2px so they're not so obnoxious
• Decreased button border width for a more subtle effect (2px => 1px)
• Added --focus-width variables for easier customization
• Added --component-speed variable for easier customization
• Added --component-box-shadow-inner|outer for easier customization
• Adjusted fieldset padding slightly

This release makes Shoelace usable for more people today. There is a fundamental change to how the /dist is generated and how the library is customized. I discussed why this change was necessary in #41.

Long story short, we're still using pure, future-ready CSS. You can use the dist/CDN version as-is for prototyping. But to customize Shoelace and use future CSS features such as nesting, color functions, etc., you'll need to use the source version and run it through cssnext. Alas, due to IE's lack of support for CSS variables, and Edge's very buggy support for them, this is necessary for now.

Here's something I wrote on the new website that I'd like to emphasize:

Shoelace makes extensive use of future CSS features in its source. Most browsers don’t support this syntax today, but they will soon. As CSS evolves and support improves, you’ll eventually be able to use Shoelace without any processing at all. In that sense, Shoelace is “future-ready.”

CSS has a really bright future, and you can use most of its upcoming features today with Shoelace + cssnext. You no longer need Less or Sass to do amazing things with CSS.

I believe we should focus on the future. Preprocessors had a place when the evolution of CSS seemed stagnant, but things have changed and it’s time to move forward. Instead of learning a different syntax, let’s just learn the future syntax.

That sort of sums up my goal for this project. It sucks that we can't use CSS variables natively today, but we will very soon, and I'll be enabling future features in Shoelace little by little as browser support for each one becomes more mainstream.

OK, here's what else is new with this release:

• Switched primary color from tomato 🍅 to --color-blue 💙
• Reworked alerts
  • More customizable with variables
  • Used color functions for a better appearance
  • Made alert links bold instead of underlined
• Reworked loaders
  • More customizable with variables
  • Used color functions for loader bg color
  • Removed loader-small|big modifiers
  • Added loader-xs|sm|lg|xl modifiers
  • Changed some var names to make more sense
• Reworked spacing utilities
  • Shortened padding- to pad-
  • Shortened margin- to mar-
  • Shortened top|left|bottom|right to t|l|b|r
  • Removed --spacing-small|big
  • Added --spacing-xs|sm|md|lg|xl
• Reworked sizing utilities
  • Shortened width- to w-
  • Shortened height- to h-
  • Added -w-max-100 and -h-max-100
• Reworked badges
  • More customizable with variables
  • Added focus states to badge links
• Reworked dropdowns
  • Changed --dropdown-divider-border-color to --dropdown-divider-color
  • Changed --dropdown-divider-border-width to --dropdown-divider-width
  • Added focus state for menu items
• Reworked progress bars
  • More customizable with variables
  • Removed progress-small|big modifiers
  • Added progress-xs|sm|lg|xl modifiers
  • Better indeterminate animation
• Reworked switches
  • More customizable with variables
  • Removed switch-small|big modifiers
  • Added switch-xs|sm|lg|xl modifiers
  • Added focus states
• Reworked forms
  • Removed input-small|big modifiers
  • Added input-xs|sm|lg|xl modifiers
  • Fixed range styles to be consistent in all browsers
• Reworked buttons
  • More customizable with variables
  • Removed button-small|big modifiers
  • Added button-xs|sm|lg|xl modifiers
  • Added focus states
  • Fixed button loader colors with color functions
• Moved official CDN back to KeyCDN (Shoelace is unofficially available on CDNJS as well)
• Added back the --s3 option to the build script
• Added nesting to all components for better organization
• Added stylelint
• Updated docs to reflect these changes

This release adds loader buttons and fixes disabled links. No breaking changes from beta15.

• Added button-loader modifier
• Added back disabled <a> buttons which fixed a bug where disabled dropdown buttons weren't styled
• Simplified dep check in dropdowns.js and tabs.js
• Minor updates to the docs

Got a little ambitious with the last release. Lots of changes, a couple bugs I missed. 🐛 This release fixes those.

If you're updating from beta13 or below make sure to read the beta14 release notes too.

• Fixed bug where hovering on a.button and label.button wouldn't show hover state
• Fixed active state for file buttons
• Fixed background color for loader-dark
• Split --component-spacing and rename to --component-padding-x and --component-padding-y
• Removed --component-spacing-small and --component-spacing-big
• Added a custom components example to the docs
• Added <hr> example
• Added example code for background utilities

All in all, the restructuring today brings Shoelace closer and closer to a stable release. It's now more modular, extensible, and better documented. 💪

This release has breaking changes!

• Fixed active status for .button-link
• Changed alternative grid system recommendation
• Removed variables.css
  • Moved core variables to shoelace.css
  • Moved component variables to their respective stylesheets
  • This makes Shoelace more modular and removes added weight from unused modules
• Reworked color/state variables:
  • Changed --color-primary to --state-primary
  • Added --state-secondary
  • Added --state-light
  • Added --state-dark
  • Changed --color-info default from aqua to teal
  • Removed --state-inverse
  • Removed --text-muted (use --state-secondary instead)
  • We now have the following states: primary, secondary, success, info, warning, danger, light, dark
• Reworked variations for alerts, badges, buttons
  • Added secondary, light, and dark variations
  • Removed inverse variation
• Added variations to loaders, progress bars, and switches
• Added text-light and text-dark
• Removed text-muted (use text-secondary instead)
• Removed support for disabled links
• Lots of minor tweaks and improvements
• Lots of updates to the docs

• Don't use scoped variables
• Added GitHub templates

Why were scoped variables removed?

Myth and cssnext convert CSS variables to static properties, making it possible to use Shoelace in all browsers today. However, it's not possible for these libraries to handle scoped variables, therefore, all variables must be defined at the root.

For example:

:root {
  --color: red;
}

.blue {
  --color: blue;
}

div {
  color: var(--color);
}

<div>
  This will be red.
</div>

<div class="blue">
  This will be blue.
</div>

Because of this, I've reverted all scoped variables in Shoelace so you can continue to use it with Myth or cssnext as needed.

Beta 12 is hereby dubbed the "need more sleep version." Don't use it. Use beta 13.

• Added progress bars 🎉
• Used scoped variables for many modifiers to save code
• Added CSS grid example
• Added Font Awesome example
• Changed to default font weight for badges
• Changed padding to use em units for badges
• Removed prefixed pseudo elements from source
• Fixed bug where autoprefixer wasn't applying prefixes to imported files
• Fixed bug where some variable names for tabs were wrong
• Removed default styles for obsolete <big> element
• Changed {version} placeholder to {{version}} so it's consistent with Handlebars
• Removed unused stats from build script
• Made --clean remove the docs in build script
• Various updates to the docs

This release mostly focuses on splitting the docs from the homepage.

• Split website into a homepage + docs
• Fixed CDN links 😵
• Fixed margin for blockquote :last-child

• Added shoelace.js with official support for making dropdowns and tabs interactive 💪
  • Added support for jQuery or Zepto (see #21)
  • Added show and hide events for tabs
  • Added show, hide, and select events for dropdowns
• Reworked the build script
  • Added minification for scripts
  • Removed the --s3 option
  • Renamed from shoelace.js to build.js
• Fixed bug where adjacent block buttons would have a top margin in input groups
• Fixed bug where placeholder text was misaligned in iOS
• Fixed bug where list item bullets were inside instead of outside
• Switched to CDNJS

Note: the docs in this version show incorrect links for both CDN resources. The links have been corrected and are available on shoelace.style.