docs(t-components): update usage snippets

packages/calcite-components/src/components/tabs/usage/Basic.md

@@ -3,11 +3,12 @@
 ```html
 <calcite-tabs>
   <calcite-tab-nav slot="title-group">
-    <calcite-tab-title selected>Tab 1 Title</calcite-tab-title>
-    <calcite-tab-title>Tab 2 Title</calcite-tab-title>
+    <calcite-tab-title selected>Dogs</calcite-tab-title>
+    <calcite-tab-title>Cats</calcite-tab-title>
+    <calcite-tab-title>Bears</calcite-tab-title>
   </calcite-tab-nav>
-
-  <calcite-tab selected>Tab 1 Content</calcite-tab>
-  <calcite-tab>Tab 2 Content</calcite-tab>
+  <calcite-tab selected><img src="https://placedog.net/550/600" /></calcite-tab>
+  <calcite-tab><img src="https://placekitten.com/550/600" /></calcite-tab>
+  <calcite-tab><img src="https://placebear.com/550/600" /></calcite-tab>
 </calcite-tabs>
 ```

packages/calcite-components/src/components/tabs/usage/Bordered.md

@@ -1,14 +1,12 @@
 ```html
-<calcite-tabs bordered>
+<calcite-tabs bordered layout="center" position="bottom">
   <calcite-tab-nav slot="title-group">
-    <calcite-tab-title tab="tab1">Tab 1 Title</calcite-tab-title>
-    <calcite-tab-title tab="tab2">Tab 2 Title</calcite-tab-title>
-    <calcite-tab-title tab="tab3">Tab 3 Title</calcite-tab-title>
-    <calcite-tab-title tab="tab4" selected>Tab 4 Title</calcite-tab-title>
+    <calcite-tab-title selected>Dogs</calcite-tab-title>
+    <calcite-tab-title>Cats</calcite-tab-title>
+    <calcite-tab-title>Bears</calcite-tab-title>
   </calcite-tab-nav>
-  <calcite-tab tab="tab1">Tab 1 Content</calcite-tab>
-  <calcite-tab tab="tab2">Tab 2 Content</calcite-tab>
-  <calcite-tab tab="tab3">Tab 3 Content</calcite-tab>
-  <calcite-tab tab="tab4" selected>Tab 4 Content</calcite-tab>
+  <calcite-tab selected><img src="https://placedog.net/550/600" /></calcite-tab>
+  <calcite-tab><img src="https://placekitten.com/550/600" /></calcite-tab>
+  <calcite-tab><img src="https://placebear.com/550/600" /></calcite-tab>
 </calcite-tabs>
 ```

packages/calcite-components/src/components/tile-select-group/usage/Basic.md

@@ -0,0 +1,32 @@
+```html
+<calcite-tile-select-group layout="vertical">
+  <calcite-tile-select
+    input-enabled
+    description="Discover new opportunities for growth and success in your industry. Embrace forward-thinking strategies to stay ahead of the competition."
+    heading="Innovate for success"
+    icon="lightbulb"
+    input-alignment="end"
+    type="radio"
+    value="one"
+  ></calcite-tile-select>
+  <calcite-tile-select
+    checked
+    input-enabled
+    description="Explore a world of creativity with diverse artistic content to fuel your creative endeavors."
+    heading="Creative Exploration"
+    icon="palette"
+    input-alignment="end"
+    type="radio"
+    value="four"
+  ></calcite-tile-select>
+  <calcite-tile-select
+    input-enabled
+    description="Optimize workflow and achieve greater productivity with streamlined processes and powerful tools."
+    heading="Workflow Optimization"
+    icon="gear"
+    input-alignment="end"
+    type="radio"
+    value="two"
+  ></calcite-tile-select>
+</calcite-tile-select-group>
+```

packages/calcite-components/src/components/tile-select/usage/Basic.md

@@ -2,9 +2,9 @@
 <calcite-tile-select
   checked
   input-enabled
-  description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-  heading="Tile heading lorem ipsum"
-  icon="layer"
+  description="Discover new opportunities for growth and success in your industry. Embrace forward-thinking strategies to stay ahead of the competition."
+  heading="Innovate for success"
+  icon="lightbulb"
   input-alignment="end"
   type="radio"
   value="one"

packages/calcite-components/src/components/tile/usage/Basic.md

@@ -1,7 +1,7 @@
 ```html
 <calcite-tile
-  description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-  heading="Tile heading lorem ipsum"
+  description="Explore a curated collection of high-quality images and visuals. Find inspiration for your projects and discover the beauty of photography."
+  heading="Discover stunning images"
   href="#"
   icon="images"
 ></calcite-tile>

packages/calcite-components/src/components/time-picker/usage/Basic.md

@@ -0,0 +1,3 @@
+```html
+<calcite-time-picker scale="l" value="14:00"></calcite-time-picker>
+```

packages/calcite-components/src/components/tip-manager/usage/Basic.md

@@ -2,44 +2,40 @@ Renders a tip manager using a group of tips as well as a single tip.
 
 ```html
 <calcite-tip-manager>
-  <calcite-tip-group group-title="Tip Manager heading">
-    <calcite-tip heading="Tip heading" selected>
-      <img slot="thumbnail" src="https://placeimg.com/200/200" alt="This is an image." />
+  <calcite-tip-group group-title="Animal Insights">
+    <calcite-tip heading="Paws for Thought" selected>
+      <img slot="thumbnail" src="https://placedog.net/400/200" alt="An image of a dog." />
       <p>
-        Tip description lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-        labore et dolore magna aliqua.
+        Did you know that a dog's sense of smell is so powerful that it can detect certain diseases, including cancer,
+        with remarkable accuracy?
       </p>
       <p>
-        This is another slotted paragraph. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-        aliquip ex ea commodo consequat.
+        Explore the incredible abilities of dogs with our
+        <calcite-link href="#" target="_blank" rel="noopener noreferrer">Canine Marvels</calcite-link>.
       </p>
-      <calcite-link href="https://www.esri.com" target="_blank" rel="noopener noreferrer">A calcite-link</calcite-link>
     </calcite-tip>
-    <calcite-tip heading="The Long Trees" hidden>
-      <img slot="thumbnail" src="https://placeimg.com/200/200" alt="This is an image." />
-      <p>This tip has an image that is a pretty tall. And the text will run out before the end of the image.</p>
-      <p>In astronomy, the terms object and body are often used interchangeably.</p>
-      <calcite-link href="https://www.esri.com" target="_blank" rel="noopener noreferrer">A calcite-link</calcite-link>
+    <calcite-tip heading="Whisker Wisdom" hidden>
+      <img slot="thumbnail" src="https://placekitten.com/400/200" alt="An image of a cat." />
+      <p>
+        Cats use their whiskers not only for balance but also to measure openings. If a cat's whiskers fit through an
+        opening, the rest of its body will too!
+      </p>
+      <p>
+        Discover intriguing facts about cats with our
+        <calcite-link href="#" target="_blank" rel="noopener noreferrer">Curious Cat Chronicles</calcite-link>.
+      </p>
     </calcite-tip>
   </calcite-tip-group>
-  <calcite-tip heading="Square Nature" hidden>
-    <img slot="thumbnail" src="https://placeimg.com/200/200" alt="This is an image." />
-    <p>This tip has an image that is square. And the text will run out before the end of the image.</p>
-    <p>In astronomy, the terms object and body are often used interchangeably.</p>
+  <calcite-tip heading="Bear Essentials" hidden>
+    <img slot="thumbnail" src="https://placebear.com/400/200" alt="An image of a bear." />
     <p>
-      In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form
-      of a document without relying on meaningful content (also called greeking). Replacing the actual content with
-      placeholder text allows designers to design the form of the content before the content itself has been produced.
+      Bears are excellent swimmers! They can swim long distances and even dive for their meals. Polar bears, in
+      particular, are known to swim for hours in search of food.
     </p>
-    <calcite-link href="https://www.esri.com" target="_blank" rel="noopener noreferrer">A calcite-link</calcite-link>
-  </calcite-tip>
-  <calcite-tip heading="The lack of imagery" hidden>
-    <p>This tip has no image. As such, the content area will take up the entire width of the tip.</p>
     <p>
-      This is the next paragraph and should show how wide the content area is now. Of course, the width of the overall
-      tip will affect things. In astronomy, the terms object and body are often used interchangeably.
+      Explore the aquatic side of bears with our
+      <calcite-link href="#" target="_blank" rel="noopener noreferrer">Bear Aquatics</calcite-link>.
     </p>
-    <calcite-link href="https://www.esri.com" target="_blank" rel="noopener noreferrer">A calcite-link</calcite-link>
   </calcite-tip>
 </calcite-tip-manager>
 ```

packages/calcite-components/src/components/tip/usage/Basic.md

@@ -1,9 +1,11 @@
 Renders a close-disabled tip with a heading, thumbnail, info and a link.
 
 ```html
-<calcite-tip close-disabled heading="Celestial Bodies!">
-  <img slot="thumbnail" src="https://placeimg.com/1000/600" alt="This is an image of nature." />
-  <p>Normal tip with a landscape or square image and a small amount of text in the "info" slot.</p>
-  <a href="http://www.esri.com">Put a link hurr!</a>
+<calcite-tip close-disabled heading="Kittens">
+  <img slot="thumbnail" src="https://placekitten.com/1000/600" alt="This is an image of kitten." />
+  <p>
+    Did you know that kittens are born with their eyes shut and ears folded? They start to open their eyes and unfold
+    their ears after about a week.
+  </p>
 </calcite-tip>
 ```

packages/calcite-components/src/components/tooltip/usage/Basic.md

@@ -1,9 +1,11 @@
 ```html
-<calcite-tooltip placement="auto" reference-element="tooltip-button"
-  >This is the message of the tooltip</calcite-tooltip
->
+<calcite-tooltip placement="auto" reference-element="tooltip-button" id="tooltip-content">
+  Honeybees communicate through intricate dances, navigate using the sun's position, and play a vital role in
+  maintaining biodiversity by pollinating flowers and crops.
+</calcite-tooltip>
 <span>
-  Lorem <a id="tooltip-button" href="#">ipsum</a> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-  incididunt ut labore et dolore magna aliqua.
+  Discover fascinating facts about the
+  <a id="tooltip-button" href="#" aria-describedby="tooltip-content">secret lives of honeybees</a> and their crucial
+  role in pollination.
 </span>
 ```

packages/calcite-components/src/components/tree/usage/Basic.md

@@ -3,13 +3,29 @@
 ```html
 <calcite-tree>
   <calcite-tree-item>
-    <a href="#">Child 1</a>
+    <a href="#">Technology</a>
     <calcite-tree slot="children">
       <calcite-tree-item>
-        <a href="#">Grandchild 1</a>
+        <a href="#">Programming Languages</a>
+        <calcite-tree slot="children">
+          <calcite-tree-item>
+            <a href="#">JavaScript</a>
+          </calcite-tree-item>
+          <calcite-tree-item>
+            <a href="#">Python</a>
+          </calcite-tree-item>
+        </calcite-tree>
       </calcite-tree-item>
       <calcite-tree-item>
-        <a href="#">Grandchild 2</a>
+        <a href="#">Frameworks</a>
+        <calcite-tree slot="children">
+          <calcite-tree-item>
+            <a href="#">React</a>
+          </calcite-tree-item>
+          <calcite-tree-item>
+            <a href="#">Vue.js</a>
+          </calcite-tree-item>
+        </calcite-tree>
       </calcite-tree-item>
     </calcite-tree>
   </calcite-tree-item>