@wwtdev/bsds-components-vue3 3.0.20 → 3.1.1

package/README.md

@@ -28,8 +28,8 @@ import '@wwtdev/bsds-icons-vue3/lib/style.css' // see note below re ^2.0.6
 
 #### Migration from v1
 1. Remove the `@wwtdev/bsds-components` package, as this Vue 3 package no longer depends on a base web component library.
-2. This package no longer provides or requires a Vue plugin, so remove any imports / logic related to that. 
-3. These components no longer render custom element tags (e.g., `<bs-input-field>` is now `<div data-component="bs-input-field">`), so if you have any CSS rules or DOM-related logic that relied on the previous version's custom element tag selectors, you'll need to update those accordingly. 
+2. This package no longer provides or requires a Vue plugin, so remove any imports / logic related to that.
+3. These components no longer render custom element tags (e.g., `<bs-input-field>` is now `<div data-component="bs-input-field">`), so if you have any CSS rules or DOM-related logic that relied on the previous version's custom element tag selectors, you'll need to update those accordingly.
 
 
 ### Nuxt App Setup
@@ -68,7 +68,7 @@ If you're using Tailwind in your project, you'll need to take additional steps a
 
 ### 1. Add the WWT Preset to the Tailwind config.
 
-For new projects, we recommend that you use the provided config file as a [**preset**](https://tailwindcss.com/docs/presets).  When setting up the `tailwind.config.js` file, import the WWT preset from the CSS Framework package.  Note that `wwt-bsds-preset.js` sets `config.corePlugins.preflight: false` by default; we do this to apply our style resets instead of the Tailwind resets. 
+For new projects, we recommend that you use the provided config file as a [**preset**](https://tailwindcss.com/docs/presets).  When setting up the `tailwind.config.js` file, import the WWT preset from the CSS Framework package.  Note that `wwt-bsds-preset.js` sets `config.corePlugins.preflight: false` by default; we do this to apply our style resets instead of the Tailwind resets.
 
 ```javascript
 /* tailwind.config.js */
@@ -104,7 +104,7 @@ Since our CSS has its own reset and default styles, we prevent Tailwind's `base`
 @tailwind utilities;
 ```
 
-Once you have completed the Tailwind installation steps, you can use the classes generated from the preset. 
+Once you have completed the Tailwind installation steps, you can use the classes generated from the preset.
 
 ### 3. App setup w/ Tailwind and BSDS Styles
 
@@ -140,7 +140,7 @@ export default defineNuxtConfig({
 
 #### Using CSS Layers with Tailwind
 
-You can optionally leverage native CSS `@layer` to ensure TW utilities will always trump the component styles for easier overrides.   
+You can optionally leverage native CSS `@layer` to ensure TW utilities will always trump the component styles for easier overrides.
 
 ```css
 /* src/styles/index.css (or wherever your app styles live) */
@@ -153,7 +153,7 @@ You can optionally leverage native CSS `@layer` to ensure TW utilities will alwa
 /* -- EXTERNAL: any external stylesheets, e.g. from other 3d party libs -- */
 @import "some-other-pkg/dist/style.css" layer(external);
 
-/* -- APP / INTERNAL STYLES, e.g. your site's base styles -- 
+/* -- APP / INTERNAL STYLES, e.g. your site's base styles --
    All .vue <style> code will automatically be added to this layer (see "vueWrapCssWithLayerPlugin" in vite.config.js)
 */
 @import "some-content.css" layer(app);
@@ -180,7 +180,7 @@ const vueWrapCssWithLayerPlugin = {
   transform(code, id) {
     // if not a .vue <style> block, do nothing
     if (!/vue&type=style/.test(id)) return
-    
+
     // wrap the <style> code in our "app" css layer (ensures utility classes always trump other styles, see index.css)
     return { code: `@layer app { ${code} }`, map: null }
   }
@@ -188,7 +188,7 @@ const vueWrapCssWithLayerPlugin = {
 
 export default defineConfig({
   plugins: [ ...yourOtherPlugins, vueWrapCssWithLayerPlugin ],
-  /* 
+  /*
     *** other configs **
   */
 })
@@ -196,5 +196,5 @@ export default defineConfig({
 
 ### 4. Dark Mode-compatible "semantic" color utilities
 
-We've extended the TW theme with color utilities that will automatically adjust when using dark mode.  These classes require the CSS custom properties defined in the global stylesheet (`wwt-bsds.css`).  If you're not bringing that stylesheet in, either disregard these classes or manually include the properties from [tokens.css](https://github.wwt.com/custom-apps/wwt-blue-steel/blob/main/packages/css-framework/src/styles/tokens.css) and [global.css](https://github.wwt.com/custom-apps/wwt-blue-steel/blob/main/packages/css-framework/src/styles/global.css) in your project.
+We've extended the TW theme with color utilities that will automatically adjust when using dark mode.  These classes require the CSS custom properties defined in the global stylesheet (`wwt-bsds.css`).  If you're not bringing that stylesheet in, either disregard these classes or manually include the properties from [tokens.css](https://github.com/wwt-custom-apps/wwt-blue-steel/blob/main/packages/css-framework/src/styles/tokens.css) and [global.css](https://github.com/wwt-custom-apps/wwt-blue-steel/blob/main/packages/css-framework/src/styles/global.css) in your project.