terra_ui_components 0.0.99__tar.gz → 0.0.101__tar.gz

{terra_ui_components-0.0.99 → terra_ui_components-0.0.101}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: terra_ui_components
-Version: 0.0.99
+Version: 0.0.101
 Summary: NASA Terra UI Components Library
 License-File: LICENSE.md
 Requires-Python: >=3.8

{terra_ui_components-0.0.99 → terra_ui_components-0.0.101}/docs/pages/frameworks/react.md

@@ -58,7 +58,7 @@ Previously, it was recommended to import from a single entrypoint like so:
 import { TerraButton } from '@nasa-terra/components/%NPMDIR%/react'
 ```
 
-However, tree-shaking extra Shoelace components proved to be a challenge. As a result, we now recommend cherry-picking components you want to use, rather than importing from a single entrypoint.
+However, tree-shaking extra Terra components proved to be a challenge. As a result, we now recommend cherry-picking components you want to use, rather than importing from a single entrypoint.
 
 ```diff
 - import { TerraButton } from '@nasa-terra/components/%NPMDIR%/react';
@@ -69,7 +69,7 @@ You can find a copy + paste import for each component in the "importing" section
 
 ### Event Handling
 
-Many Shoelace components emit [custom events](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent). For example, the [input component](/components/input) emits the `terra-input` event when it receives input. In React, you can listen for the event using `onSlInput`.
+Many Terra components emit [custom events](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent). For example, the [input component](/components/input) emits the `terra-input` event when it receives input. In React, you can listen for the event using `onSlInput`.
 
 Here's how you can bind the input's value to a state variable.
 
@@ -137,7 +137,7 @@ export default MyComponent
 
 Testing with web components can be challenging if your test environment runs in a Node environment (i.e. it doesn't run in a real browser). Fortunately, [Jest](https://jestjs.io/) has made a number of strides to support web components and provide additional browser APIs. However, it's still not a complete replication of a browser environment.
 
-Here are some tips that will help smooth things over if you're having trouble with Jest + Shoelace.
+Here are some tips that will help smooth things over if you're having trouble with Jest + Terra.
 
 :::tip
 If you're looking for a fast, modern testing alternative, consider [Web Test Runner](https://modern-web.dev/docs/test-runner/overview/).
@@ -179,18 +179,18 @@ For more details, refer to Jest's [manual mocking](https://jestjs.io/docs/manual
 
 ### Transform ES Modules
 
-ES Modules are a [well-supported browser standard](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/). This is how Shoelace is distributed, but most React apps expect CommonJS. As a result, you'll probably run into the following error.
+ES Modules are a [well-supported browser standard](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/). This is how Terra is distributed, but most React apps expect CommonJS. As a result, you'll probably run into the following error.
 
 ```
 Error: Unable to import outside of a module
 ```
 
-To fix this, add the following to your `package.json` which tells the transpiler to process Shoelace modules.
+To fix this, add the following to your `package.json` which tells the transpiler to process Terra modules.
 
 ```js
 {
   "jest": {
-    "transformIgnorePatterns": ["node_modules/(?!(@shoelace))"]
+    "transformIgnorePatterns": ["node_modules/(?!(@nasa/terra-ui-components))"]
   }
 }
 ```
@@ -200,5 +200,5 @@ These instructions are for apps created via Create React App. If you're using Je
 For more details, refer to Jest's [`transformIgnorePatterns` customization](https://jestjs.io/docs/tutorial-react-native#transformignorepatterns-customization) documentation.
 
 :::tip
-Are you using Shoelace with React? [Help us improve this page!](https://github.com/nasa/terra-ui-components/blob/next/docs/frameworks/react.md)
+Are you using Terra with React? [Help us improve this page!](https://github.com/nasa/terra-ui-components/blob/next/docs/frameworks/react.md)
 :::

{terra_ui_components-0.0.99 → terra_ui_components-0.0.101}/docs/pages/frameworks/vue-2.md

@@ -1,12 +1,12 @@
 ---
 meta:
     title: Vue (version 2)
-    description: Tips for using Shoelace in your Vue 2 app.
+    description: Tips for using Terra in your Vue 2 app.
 ---
 
 # Vue (version 2)
 
-Vue [plays nice](https://custom-elements-everywhere.com/#vue) with custom elements, so you can use Shoelace in your Vue apps with ease.
+Vue [plays nice](https://custom-elements-everywhere.com/#vue) with custom elements, so you can use Terra in your Vue apps with ease.
 
 :::tip
 These instructions are for Vue 2. If you're using Vue 3 or above, please see the [Vue 3 instructions](/frameworks/vue).
@@ -14,7 +14,7 @@ These instructions are for Vue 2. If you're using Vue 3 or above, please see the
 
 ## Installation
 
-To add Shoelace to your Vue app, install the package from npm.
+To add Terra to your Vue app, install the package from npm.
 
 ```bash
 npm install @nasa-terra/components
@@ -35,7 +35,7 @@ If you'd rather not use the CDN for assets, you can create a build task that cop
 
 ## Configuration
 
-You'll need to tell Vue to ignore Shoelace components. This is pretty easy because they all start with `terra-`.
+You'll need to tell Vue to ignore Terra components. This is pretty easy because they all start with `terra-`.
 
 ```js
 import Vue from 'vue'
@@ -50,7 +50,7 @@ const app = new Vue({
 app.$mount('#app')
 ```
 
-Now you can start using Shoelace components in your app!
+Now you can start using Terra components in your app!
 
 ## Usage
 
@@ -72,36 +72,3 @@ One caveat is there's currently [no support for v-model on custom elements](http
 <!-- This works, but it's a bit longer -->
 <sl-input :value="name" @input="name = $event.target.value"></sl-input>
 ```
-
-If that's too verbose for your liking, you can use a custom directive instead. [This utility](https://www.npmjs.com/package/@shoelace-style/vue-terra-model) adds a custom directive that will work just like `v-model` but for Shoelace components. To install it, use this command.
-
-```bash
-npm install @shoelace-style/vue-terra-model@1
-```
-
-Next, import the directive and enable it like this.
-
-```js
-import Vue from 'vue'
-import ShoelaceModelDirective from '@shoelace-style/vue-terra-model'
-import App from './App.vue'
-
-Vue.use(ShoelaceModelDirective)
-Vue.config.ignoredElements = [/terra-/]
-
-const app = new Vue({
-    render: h => h(App),
-})
-
-app.$mount('#app')
-```
-
-Now you can use the `v-terra-model` directive to keep your data in sync!
-
-```html
-<sl-input v-terra-model="name"></sl-input>
-```
-
-:::tip
-Are you using Shoelace with Vue? [Help us improve this page!](https://github.com/nasa/terra-ui-components/blob/next/docs/frameworks/vue-2.md)
-:::

{terra_ui_components-0.0.99 → terra_ui_components-0.0.101}/docs/pages/frameworks/vue.md

@@ -1,12 +1,12 @@
 ---
 meta:
     title: Vue
-    description: Tips for using Shoelace in your Vue 3 app.
+    description: Tips for using terra in your Vue 3 app.
 ---
 
 # Vue
 
-Vue [plays nice](https://custom-elements-everywhere.com/#vue) with custom elements, so you can use Shoelace in your Vue apps with ease.
+Vue [plays nice](https://custom-elements-everywhere.com/#vue) with custom elements, so you can use Terra in your Vue apps with ease.
 
 :::tip
 These instructions are for Vue 3 and above. If you're using Vue 2, please see the [Vue 2 instructions](/frameworks/vue-2).
@@ -14,7 +14,7 @@ These instructions are for Vue 3 and above. If you're using Vue 2, please see th
 
 ## Installation
 
-To add Shoelace to your Vue app, install the package from npm.
+To add Terra to your Vue app, install the package from npm.
 
 ```bash
 npm install @nasa-terra/components
@@ -37,11 +37,11 @@ If you'd rather not use the CDN for assets, you can create a build task that cop
 
 If you haven't configured your Vue.js project to work with custom elements/web components, follow [the instructions here](https://vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue) based on your project type to ensure your project will not throw an error when it encounters a custom element.
 
-Now you can start using Shoelace components in your app!
+Now you can start using Terra components in your app!
 
 ## Types
 
-Once you have configured your application for custom elements, you should be able to use Shoelace in your application without it causing any errors. Unfortunately, this doesn't register the custom elements to behave like components built using Vue. To provide autocomplete information and type safety for your components, you can import the Shoelace Vue types into your `tsconfig.json` to get better integration in your standard Vue and JSX templates.
+Once you have configured your application for custom elements, you should be able to use Terra in your application without it causing any errors. Unfortunately, this doesn't register the custom elements to behave like components built using Vue. To provide autocomplete information and type safety for your components, you can import the Terra Vue types into your `tsconfig.json` to get better integration in your standard Vue and JSX templates.
 
 ```json
 {
@@ -105,15 +105,9 @@ One caveat is there's currently [no support for v-model on custom elements](http
 <sl-input :value="name" @input="name = $event.target.value"></sl-input>
 ```
 
-If that's too verbose for your liking, you can use a custom directive instead. [This utility](https://www.npmjs.com/package/@shoelace-style/vue-terra-model) adds a custom directive that will work just like `v-model` but for Shoelace components.
-
-:::tip
-Are you using Shoelace with Vue? [Help us improve this page!](https://github.com/nasa/terra-ui-components/blob/next/docs/frameworks/vue.md)
-:::
-
 ### Slots
 
-Slots in Shoelace/web components are functionally the same as basic slots in Vue. Slots can be assigned to elements using the `slot` attribute followed by the name of the slot it is being assigned to.
+Slots in Terra/web components are functionally the same as basic slots in Vue. Slots can be assigned to elements using the `slot` attribute followed by the name of the slot it is being assigned to.
 
 Here is an example:
 

{terra_ui_components-0.0.99 → terra_ui_components-0.0.101}/docs/pages/getting-started/customizing.md

@@ -1,16 +1,16 @@
 ---
 meta:
     title: Customizing
-    description: Learn how to customize Shoelace through parts and custom properties.
+    description: Learn how to customize Terra through parts and custom properties.
 ---
 
 # Customizing
 
-Shoelace components can be customized at a high level through design tokens. This gives you control over theme colors and general styling. For more advanced customizations, you can make use of CSS parts and custom properties to target individual components.
+Terra components can be customized at a high level through design tokens. This gives you control over theme colors and general styling. For more advanced customizations, you can make use of CSS parts and custom properties to target individual components.
 
 ## Design Tokens
 
-Shoelace makes use of several design tokens to provide a consistent appearance across components. You can customize them and use them in your own application with pure CSS — no preprocessor required.
+Terra makes use of several design tokens to provide a consistent appearance across components. You can customize them and use them in your own application with pure CSS — no preprocessor required.
 
 Design tokens offer a high-level way to customize the library with minimal effort. There are no component-specific variables, however, as design tokens are intended to be generic and highly reusable. To customize an individual component, refer to the section entitled [CSS Parts](#css-parts).
 
@@ -41,7 +41,7 @@ Many design tokens are described further along in this documentation. For a comp
 
 Whereas design tokens offer a high-level way to customize the library, CSS parts offer a low-level way to customize individual components. Again, this is done with pure CSS — no preprocessor required.
 
-Shoelace components use a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) to encapsulate their styles and behaviors. As a result, you can't simply target their internals with the usual CSS selectors. Instead, components expose "parts" that can be targeted with the [CSS part selector](https://developer.mozilla.org/en-US/docs/Web/CSS/::part), or `::part()`.
+Terra components use a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) to encapsulate their styles and behaviors. As a result, you can't simply target their internals with the usual CSS selectors. Instead, components expose "parts" that can be targeted with the [CSS part selector](https://developer.mozilla.org/en-US/docs/Web/CSS/::part), or `::part()`.
 
 Here's an example that modifies buttons with the `tomato-button` class.
 
@@ -112,7 +112,7 @@ Not all components expose CSS custom properties. For those that do, they can be
 
 ## Animations
 
-Some components use animation, such as when a dialog is shown or hidden. Animations are performed using the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) rather than CSS. However, you can still customize them through Shoelace's animation registry. If a component has customizable animations, they'll be listed in the "Animation" section of its documentation.
+Some components use animation, such as when a dialog is shown or hidden. Animations are performed using the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) rather than CSS. However, you can still customize them through Terra's animation registry. If a component has customizable animations, they'll be listed in the "Animation" section of its documentation.
 
 To customize a default animation, use the `setDefaultAnimation()` method. The function accepts an animation name (found in the component's docs) and an object with `keyframes`, and `options` or `null` to disable the animation.
 

{terra_ui_components-0.0.99 → terra_ui_components-0.0.101}/docs/pages/getting-started/form-controls.md

@@ -1,17 +1,17 @@
 ---
 meta:
     title: Form Controls
-    description: Some things to note about Shoelace and forms.
+    description: Some things to note about Terra and forms.
 ---
 
 # Form Controls
 
-Every Shoelace component makes use of a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) to encapsulate markup, styles, and behavior. One caveat of this approach is that native `<form>` elements do not recognize form controls located inside a shadow root.
+Every Terra component makes use of a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) to encapsulate markup, styles, and behavior. One caveat of this approach is that native `<form>` elements do not recognize form controls located inside a shadow root.
 
-Shoelace solves this problem by using the [`formdata`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/formdata_event) event, which is [available in all modern browsers](https://caniuse.com/mdn-api_htmlformelement_formdata_event). This means, when a form is submitted, Shoelace form controls will automatically append their values to the `FormData` object that's used to submit the form. In most cases, things will "just work." However, if you're using a form serialization library, it might need to be adapted to recognize Shoelace form controls.
+Terra solves this problem by using the [`formdata`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/formdata_event) event, which is [available in all modern browsers](https://caniuse.com/mdn-api_htmlformelement_formdata_event). This means, when a form is submitted, Terra form controls will automatically append their values to the `FormData` object that's used to submit the form. In most cases, things will "just work." However, if you're using a form serialization library, it might need to be adapted to recognize Terra form controls.
 
 :::tip
-Shoelace uses event listeners to intercept the form's `formdata` and `submit` events. This allows it to inject data and trigger validation as necessary. If you're also attaching an event listener to the form, _you must attach it after Shoelace form controls are connected to the DOM_, otherwise your logic will run before Shoelace has a chance to inject form data and validate form controls.
+Terra uses event listeners to intercept the form's `formdata` and `submit` events. This allows it to inject data and trigger validation as necessary. If you're also attaching an event listener to the form, _you must attach it after Terra form controls are connected to the DOM_, otherwise your logic will run before Terra has a chance to inject form data and validate form controls.
 :::
 
 ## Data Serialization
@@ -27,7 +27,7 @@ const data = new FormData(form)
 // All form control data is available in a FormData object
 ```
 
-However, some folks find `FormData` tricky to work with or they need to pass a JSON payload to their server. To accommodate this, Shoelace offers a serialization utility that gathers form data and returns a simple JavaScript object instead.
+However, some folks find `FormData` tricky to work with or they need to pass a JSON payload to their server. To accommodate this, Terra offers a serialization utility that gathers form data and returns a simple JavaScript object instead.
 
 ```js
 import { serialize } from '@nasa-terra/components/dist/utilities/form.js'
@@ -42,7 +42,7 @@ This results in an object with name/value pairs that map to each form control. I
 
 ## Constraint Validation
 
-Client-side validation can be enabled through the browser's [Constraint Validation API](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation) for Shoelace form controls. You can activate it using attributes such as `required`, `pattern`, `minlength`, `maxlength`, etc. Shoelace implements many of the same attributes as native form controls, but check the documentation for a list of supported properties for each component.
+Client-side validation can be enabled through the browser's [Constraint Validation API](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation) for Terra form controls. You can activate it using attributes such as `required`, `pattern`, `minlength`, `maxlength`, etc. Terra implements many of the same attributes as native form controls, but check the documentation for a list of supported properties for each component.
 
 If you don't want to use client-side validation, you can suppress this behavior by adding `novalidate` to the surrounding `<form>` element.
 
@@ -319,7 +319,7 @@ Custom validation can be applied to any form control that supports the `setCusto
 
 ## Custom Validation Styles
 
-Due to the many ways form controls are used, Shoelace doesn't provide out of the box validation styles for form controls as part of its default theme. Instead, the following attributes will be applied to reflect a control's validity as users interact with it. You can use them to create custom styles for any of the validation states you're interested in.
+Due to the many ways form controls are used, Terra doesn't provide out of the box validation styles for form controls as part of its default theme. Instead, the following attributes will be applied to reflect a control's validity as users interact with it. You can use them to create custom styles for any of the validation states you're interested in.
 
 -   `data-required` - the form control is required
 -   `data-optional` - the form control is optional
@@ -331,7 +331,7 @@ Due to the many ways form controls are used, Shoelace doesn't provide out of the
 These attributes map to the browser's built-in pseudo classes for validation: [`:required`](https://developer.mozilla.org/en-US/docs/Web/CSS/:required), [`:optional`](https://developer.mozilla.org/en-US/docs/Web/CSS/:optional), [`:invalid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid), [`:valid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:valid), and the proposed [`:user-invalid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:user-invalid) and [`:user-valid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid).
 
 :::tip
-In the future, data attributes will be replaced with custom pseudo classes such as `:--valid` and `:--invalid`. Shoelace is using data attributes as a workaround until browsers support custom states through [`ElementInternals.states`](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/states).
+In the future, data attributes will be replaced with custom pseudo classes such as `:--valid` and `:--invalid`. Terra is using data attributes as a workaround until browsers support custom states through [`ElementInternals.states`](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/states).
 :::
 
 ### Styling Invalid Form Controls
@@ -442,7 +442,7 @@ This example demonstrates custom validation styles using `data-user-invalid` and
 
 ## Inline Form Validation
 
-By default, Shoelace form controls use the browser's tooltip-style error messages. No mechanism is provided to show errors inline, as there are too many opinions on how that would work when combined with native form controls and other custom elements. You can, however, implement your own solution using the following technique.
+By default, Terra form controls use the browser's tooltip-style error messages. No mechanism is provided to show errors inline, as there are too many opinions on how that would work when combined with native form controls and other custom elements. You can, however, implement your own solution using the following technique.
 
 To disable the browser's error messages, you need to cancel the `terra-invalid` event. Then you can apply your own inline validation errors. This example demonstrates a primitive way to do this.
 
@@ -554,7 +554,7 @@ This example is meant to demonstrate the concept of providing your own error mes
 
 ## Getting Associated Form Controls
 
-At this time, using [`HTMLFormElement.elements`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements) will not return Shoelace form controls because the browser is unaware of their status as custom element form controls. Fortunately, Shoelace provides an `elements()` function that does something very similar. However, instead of returning an [`HTMLFormControlsCollection`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormControlsCollection), it returns an array of HTML and Shoelace form controls in the order they appear in the DOM.
+At this time, using [`HTMLFormElement.elements`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements) will not return Terra form controls because the browser is unaware of their status as custom element form controls. Fortunately, Terra provides an `elements()` function that does something very similar. However, instead of returning an [`HTMLFormControlsCollection`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormControlsCollection), it returns an array of HTML and Terra form controls in the order they appear in the DOM.
 
 ```js
 import { getFormControls } from '@nasa-terra/components/dist/utilities/form.js'

{terra_ui_components-0.0.99 → terra_ui_components-0.0.101}/docs/pages/getting-started/installation.md

@@ -6,7 +6,7 @@ meta:
 
 # Installation
 
-You can load Shoelace via CDN or by installing it locally. If you're using a framework, make sure to check out the pages for [React](/frameworks/react), [Vue](/frameworks/vue), and [Angular](/frameworks/angular) for additional information.
+You can load Terra via CDN or by installing it locally. If you're using a framework, make sure to check out the pages for [React](/frameworks/react), [Vue](/frameworks/vue), and [Angular](/frameworks/angular) for additional information.
 
 ## CDN Installation (Easiest)
 
@@ -16,7 +16,7 @@ You can load Shoelace via CDN or by installing it locally. If you're using a fra
 
 <sl-tab-panel name="autoloader">
 
-The experimental autoloader is the easiest and most efficient way to use Shoelace. A lightweight script watches the DOM for unregistered Shoelace elements and lazy loads them for you — even if they're added dynamically.
+The experimental autoloader is the easiest and most efficient way to use Terra. A lightweight script watches the DOM for unregistered Terra elements and lazy loads them for you — even if they're added dynamically.
 
 While convenient, autoloading may lead to a [Flash of Undefined Custom Elements](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/). The linked article describes some ways to alleviate it.
 
@@ -30,12 +30,12 @@ While convenient, autoloading may lead to a [Flash of Undefined Custom Elements]
 
 <sl-tab-panel name="traditional">
 
-The traditional CDN loader registers all Shoelace elements up front. Note that, if you're only using a handful of components, it will be much more efficient to stick with the autoloader. However, you can also [cherry pick](#cherry-picking) components if you want to load specific ones up front.
+The traditional CDN loader registers all Terra elements up front. Note that, if you're only using a handful of components, it will be much more efficient to stick with the autoloader. However, you can also [cherry pick](#cherry-picking) components if you want to load specific ones up front.
 
 <!-- prettier-ignore -->
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nasa-terra/components@%VERSION%/%CDNDIR%/themes/light.css" />
-<script type="module" src="https://cdn.jsdelivr.net/npm/@nasa-terra/components@%VERSION%/%CDNDIR%/shoelace.js" ></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nasa-terra/components@%VERSION%/%CDNDIR%/themes/horizon.css" />
+<script type="module" src="https://cdn.jsdelivr.net/npm/@nasa-terra/components@%VERSION%/%CDNDIR%/terra-ui-components-autoloader.js" ></script>
 ```
 
 </sl-tab-panel>
@@ -68,49 +68,52 @@ If you want to load the light or dark theme based on the user's `prefers-color-s
 />
 ```
 
-Now you can [start using Shoelace!](/getting-started/usage)
+Now you can [start using Terra!](/getting-started/usage)
 
 ## npm installation
 
-If you don't want to use the CDN, you can install Shoelace from npm with the following command.
+If you don't want to use the CDN, you can install Terra from npm with the following command.
 
 ```bash
 npm install @nasa-terra/components
 ```
 
-It's up to you to make the source files available to your app. One way to do this is to create a route in your app called `/shoelace` that serves static files from `node_modules/@nasa-terra/components`.
+It's up to you to make the source files available to your app. One way to do this is to create a route in your app called `/terra-ui-components` that serves static files from `node_modules/@nasa-terra/components`.
 
 Once you've done that, add the following tags to your page. Make sure to update `href` and `src` so they point to the route you created.
 
 ```html
-<link rel="stylesheet" href="/shoelace/%NPMDIR%/themes/light.css" />
-<script type="module" src="/shoelace/%NPMDIR%/shoelace.js"></script>
+<link rel="stylesheet" href="/terra-ui-components/%NPMDIR%/themes/horizon.css" />
+<script
+    type="module"
+    src="/terra-ui-components/%NPMDIR%/terra-ui-components.js"
+></script>
 ```
 
 Alternatively, [you can use a bundler](#bundling).
 
 :::tip
-For clarity, the docs will usually show imports from `@nasa-terra/components`. If you're not using a module resolver or bundler, you'll need to adjust these paths to point to the folder Shoelace is in.
+For clarity, the docs will usually show imports from `@nasa-terra/components`. If you're not using a module resolver or bundler, you'll need to adjust these paths to point to the folder Terra is in.
 :::
 
 ## Setting the Base Path
 
-Some components rely on assets (icons, images, etc.) and Shoelace needs to know where they're located. For convenience, Shoelace will try to auto-detect the correct location based on the script you've loaded it from. This assumes assets are colocated with `terra-ui-components.js` or `terra-ui-components-autoloader.js` and will "just work" for most users.
+Some components rely on assets (icons, images, etc.) and Terra needs to know where they're located. For convenience, Terra will try to auto-detect the correct location based on the script you've loaded it from. This assumes assets are colocated with `terra-ui-components.js` or `terra-ui-components-autoloader.js` and will "just work" for most users.
 
-However, if you're [cherry picking](#cherry-picking) or [bundling](#bundling) Shoelace, you'll need to set the base path. You can do this one of two ways.
+However, if you're [cherry picking](#cherry-picking) or [bundling](#bundling) Terra, you'll need to set the base path. You can do this one of two ways.
 
 ```html
 <!-- Option 1: the data-terra-ui-components attribute -->
 <script
     src="bundle.js"
-    data-terra-ui-components="/path/to/shoelace/%NPMDIR%"
+    data-terra-ui-components="/path/to/terra-ui-components/%NPMDIR%"
 ></script>
 
 <!-- Option 2: the setBasePath() method -->
 <script src="bundle.js"></script>
 <script type="module">
     import { setBasePath } from '@nasa-terra/components/%NPMDIR%/utilities/base-path.js'
-    setBasePath('/path/to/shoelace/%NPMDIR%')
+    setBasePath('/path/to/terra-ui-components/%NPMDIR%')
 </script>
 ```
 
@@ -120,7 +123,7 @@ An easy way to make sure the base path is configured properly is to check if [ic
 
 ### Referencing Assets
 
-Most of the magic behind assets is handled internally by Shoelace, but if you need to reference the base path for any reason, the same module exports a function called `getBasePath()`. An optional string argument can be passed, allowing you to get the full path to any asset.
+Most of the magic behind assets is handled internally by Terra, but if you need to reference the base path for any reason, the same module exports a function called `getBasePath()`. An optional string argument can be passed, allowing you to get the full path to any asset.
 
 ```html
 <script type="module">
@@ -145,12 +148,18 @@ Most of the magic behind assets is handled internally by Shoelace, but if you ne
 
 Cherry picking can be done from [the CDN](#cdn-installation-easiest) or from [npm](#npm-installation). This approach will load only the components you need up front, while limiting the number of files the browser has to download. The disadvantage is that you need to import each individual component.
 
-Here's an example that loads only the button component. Again, if you're not using a module resolver, you'll need to adjust the path to point to the folder Shoelace is in.
+Here's an example that loads only the button component. Again, if you're not using a module resolver, you'll need to adjust the path to point to the folder Terra is in.
 
 ```html
-<link rel="stylesheet" href="/path/to/shoelace/%NPMDIR%/themes/light.css" />
+<link
+    rel="stylesheet"
+    href="/path/to/terra-ui-components/%NPMDIR%/themes/light.css"
+/>
 
-<script type="module" data-terra-ui-components="/path/to/shoelace/%NPMDIR%">
+<script
+    type="module"
+    data-terra-ui-components="/path/to/terra-ui-components/%NPMDIR%"
+>
     import '@nasa-terra/components/%NPMDIR%/components/button/button.js'
 
     // <terra-button> is ready to use!
@@ -160,7 +169,7 @@ Here's an example that loads only the button component. Again, if you're not usi
 You can copy and paste the code to import a component from the "Importing" section of the component's documentation. Note that some components have dependencies that are automatically imported when you cherry pick. If a component has dependencies, they will be listed in the "Dependencies" section of its docs.
 
 :::warning
-Never cherry pick components or utilities from `shoelace.js` as this will cause the browser to load the entire library. Instead, cherry pick from specific modules as shown above.
+Never cherry pick components or utilities from `terra-ui-components.js` as this will cause the browser to load the entire library. Instead, cherry pick from specific modules as shown above.
 :::
 
 :::warning
@@ -169,9 +178,9 @@ You will see files named `chunk.[hash].js` in the `chunks` directory. Never impo
 
 ## Bundling
 
-Shoelace is distributed as a collection of standard ES modules that [all modern browsers can understand](https://caniuse.com/es6-module). However, importing a lot of modules can result in a lot of HTTP requests and potentially longer load times. Using a CDN can alleviate this, but some users may wish to further optimize their imports with a bundler.
+Terra is distributed as a collection of standard ES modules that [all modern browsers can understand](https://caniuse.com/es6-module). However, importing a lot of modules can result in a lot of HTTP requests and potentially longer load times. Using a CDN can alleviate this, but some users may wish to further optimize their imports with a bundler.
 
-To use Shoelace with a bundler, first install Shoelace along with your bundler of choice.
+To use Terra with a bundler, first install Terra along with your bundler of choice.
 
 ```bash
 npm install @nasa-terra/components
@@ -182,7 +191,7 @@ Now it's time to configure your bundler. Configurations vary for each tool, but
 -   [Example webpack config](https://github.com/shoelace-style/webpack-example/blob/master/webpack.config.js)
 -   [Example Rollup config](https://github.com/shoelace-style/rollup-example/blob/master/rollup.config.js)
 
-Once your bundler is configured, you'll be able to import Shoelace components and utilities.
+Once your bundler is configured, you'll be able to import Terra components and utilities.
 
 ```js
 import '@nasa-terra/components/%NPMDIR%/themes/light.css'
@@ -192,8 +201,8 @@ import '@nasa-terra/components/%NPMDIR%/components/input/input.js'
 import '@nasa-terra/components/%NPMDIR%/components/rating/rating.js'
 import { setBasePath } from '@nasa-terra/components/%NPMDIR%/utilities/base-path.js'
 
-// Set the base path to the folder you copied Shoelace's assets to
-setBasePath('/path/to/shoelace/%NPMDIR%')
+// Set the base path to the folder you copied Terra's assets to
+setBasePath('/path/to/terra-ui-components/%NPMDIR%')
 
 // <terra-button>, <sl-icon>, <sl-input>, and <sl-rating> are ready to use!
 ```
@@ -214,7 +223,7 @@ By default, imports to components will auto-register themselves. This may not be
 Notice how the import ends with `.component.js`. This is the current convention to convey the import does not register itself.
 
 :::danger
-While you can override the class or re-register the shoelace class under a different tag name, if you do so, many components won’t work as expected.
+While you can override the class or re-register the terra-ui-components class under a different tag name, if you do so, many components won’t work as expected.
 :::
 
 ## The difference between CDN and npm
@@ -226,4 +235,4 @@ TL;DR:
 -   `@nasa-terra/components/%CDNDIR%` is for CDN users
 -   `@nasa-terra/components/%NPMDIR%` is for npm users
 
-This change was introduced in `v2.5.0` to address issues around installations from npm loading multiple versions of libraries (such as the Lit) that Shoelace uses internally.
+This change was introduced in `v2.5.0` to address issues around installations from npm loading multiple versions of libraries (such as the Lit) that Terra uses internally.

{terra_ui_components-0.0.99 → terra_ui_components-0.0.101}/docs/pages/getting-started/localization.md

@@ -1,19 +1,19 @@
 ---
 meta:
     title: Localization
-    description: Discover how to localize Shoelace with minimal effort.
+    description: Discover how to localize Terra with minimal effort.
 ---
 
 # Localization
 
-Components can be localized by importing the appropriate translation file and setting the desired [`lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) and/or [`dir` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) on the `<html>` element. Here's an example that renders Shoelace components in Spanish.
+Components can be localized by importing the appropriate translation file and setting the desired [`lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) and/or [`dir` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) on the `<html>` element. Here's an example that renders Terra components in Spanish.
 
 ```html
 <html lang="es">
     <head>
         <script
             type="module"
-            src="/path/to/shoelace/dist/translations/es.js"
+            src="/path/to/terra-ui-components/dist/translations/es.js"
         ></script>
     </head>
 
@@ -27,9 +27,9 @@ Through the magic of a mutation observer, changing the `lang` attribute will aut
 
 ## Available Translations
 
-Shoelace ships with a number of translations. The default is English (US), which also serves as the fallback locale. As such, you do not need to import the English translation. To see a list of all available translations in the latest version, [refer to this directory](https://github.com/nasa/terra-ui-components/tree/current/src/translations).
+Terra ships with a number of translations. The default is English (US), which also serves as the fallback locale. As such, you do not need to import the English translation. To see a list of all available translations in the latest version, [refer to this directory](https://github.com/nasa/terra-ui-components/tree/current/src/translations).
 
-The location of translations depends on how you're consuming Shoelace.
+The location of translations depends on how you're consuming Terra.
 
 -   If you're using the CDN, [import them from the CDN](https://www.jsdelivr.com/package/npm/@nasa-terra/components?path=%CDNDIR%%2Ftranslations)
 -   If you're using a bundler, import them from `@nasa-terra/components/%NPMDIR%/translations/[lang].js`
@@ -41,7 +41,7 @@ You do not need to load translations up front. You can import them dynamically e
 document.documentElement.lang = 'de'
 
 // Import the translation
-import('/path/to/shoelace/dist/translations/de.js')
+import('/path/to/terra-ui-components/dist/translations/de.js')
 ```
 
 ### Translation Resolution
@@ -52,7 +52,7 @@ The locale set by `<html lang="...">` is the default locale for the document. If
 2. Look for `es`
 3. Fall back to `en`
 
-Shoelace uses English as a fallback to provide a better experience than rendering nothing or throwing an error.
+Terra uses English as a fallback to provide a better experience than rendering nothing or throwing an error.
 
 ### Submitting New Translations or Improvements
 
@@ -63,7 +63,7 @@ Regional translations are welcome! For example, if a German translation (`de`) e
 If you have any questions, please start a [discussion](https://github.com/nasa/terra-ui-components/discussions) or ask in the [community chat](https://discord.gg/mg8f26C).
 
 :::tip
-Shoelace provides a localization mechanism for component internals. This is not designed to be used as localization tool for your entire application. You should use a more appropriate tool such as [i18next](https://www.i18next.com/) if you need to localize content in your app.
+Terra provides a localization mechanism for component internals. This is not designed to be used as localization tool for your entire application. You should use a more appropriate tool such as [i18next](https://www.i18next.com/) if you need to localize content in your app.
 :::
 
 ## Multiple Locales Per Page