Merge branch 'staging' into main

Author: joncarlson

docs/pages/components/data-subsetter.md

@@ -62,12 +62,6 @@ The `<terra-data-subsetter>` component provides a complete UI for subsetting and
 </div>
 ```
 
-### Displaying an Existing Job
-
-```html:preview
-<terra-data-subsetter job-id="harmony-job-123456"></terra-data-subsetter>
-```
-
 ## Best Practices
 
 -   Use `collection-entry-id` to pre-select a collection and skip the search UI for a streamlined experience.

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)
 :::

docs/pages/frameworks/vue-2.md

@@ -1,20 +1,20 @@
 ---
 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).
 :::
 
 ## 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)
-:::

docs/pages/frameworks/vue.md

@@ -1,20 +1,20 @@
 ---
 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).
 :::
 
 ## 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:
 

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.