use one base css

packages/tc-web/src/components/tc-bulletpoint-list/tc-bulletpoint-list.tsx

@@ -3,6 +3,7 @@ import { Component, Prop, h } from "@stencil/core";
 @Component({
   tag: "tc-bulletpoint-list",
   shadow: true,
+  styleUrl: "../../util/base.css",
 })
 export class BulletpointList {
   @Prop({ attribute: "title" }) header: string;

packages/tc-web/src/components/tc-collapsible/tc-collapsible.tsx

@@ -4,6 +4,7 @@ import { parseTags } from "../../util/util";
 @Component({
   tag: "tc-collapsible",
   shadow: true,
+  styleUrl: "../../util/base.css",
 })
 export class TcCollapsible {
   @Prop() colTitle: string;

packages/tc-web/src/components/tc-grid-container/readme.md

@@ -5,13 +5,13 @@
 
 ## Properties
 
-| Property          | Attribute          | Description | Type     | Default                |
-| ----------------- | ------------------ | ----------- | -------- | ---------------------- |
-| `backgroundColor` | `background-color` |             | `string` | `"rgb(255, 255, 255)"` |
-| `columns`         | `columns`          |             | `number` | `1`                    |
-| `gap`             | `gap`              |             | `string` | `""`                   |
-| `lgColumns`       | `lg-columns`       |             | `number` | `4`                    |
-| `mdColumns`       | `md-columns`       |             | `number` | `2`                    |
+| Property          | Attribute          | Description | Type                           | Default                |
+| ----------------- | ------------------ | ----------- | ------------------------------ | ---------------------- |
+| `backgroundColor` | `background-color` |             | `string`                       | `"rgb(255, 255, 255)"` |
+| `columns`         | `columns`          |             | `1 \| 2 \| 3 \| 4 \| 5 \| 6`   | `1`                    |
+| `gap`             | `gap`              |             | `"lg" \| "md" \| "sm" \| "xl"` | `"md"`                 |
+| `lgColumns`       | `lg-columns`       |             | `1 \| 2 \| 3 \| 4 \| 5 \| 6`   | `4`                    |
+| `mdColumns`       | `md-columns`       |             | `1 \| 2 \| 3 \| 4 \| 5 \| 6`   | `2`                    |
 
 
 ----------------------------------------------

packages/tc-web/src/components/tc-grid-container/tc-grid-container.tsx

@@ -3,6 +3,7 @@ import { Component, Prop, h } from "@stencil/core";
 @Component({
   tag: "tc-grid-container",
   shadow: true,
+  styleUrl: "../../util/base.css",
 })
 export class TcGridContainer {
   @Prop() mdColumns: 1 | 2 | 3 | 4 | 5 | 6 = 2;

packages/tc-web/src/components/tc-grid-item/tc-grid-item.tsx

@@ -3,6 +3,7 @@ import { Component, Prop, h } from "@stencil/core";
 @Component({
   tag: "tc-grid-item",
   shadow: true,
+  styleUrl: "../../util/base.css",
 })
 export class GridItem {
   @Prop() imageSrc: string;

packages/tc-web/src/components/tc-img-quote-card/tc-img-quote-card.tsx

@@ -3,6 +3,7 @@ import { Component, Prop, h } from "@stencil/core";
 @Component({
   tag: "tc-img-quote-card",
   shadow: true,
+  styleUrl: "../../util/base.css",
 })
 export class ImgQuoteCard {
   @Prop() quote: string;

packages/tc-web/src/components/tc-img-text-card/tc-img-text-card.tsx

@@ -3,6 +3,7 @@ import { Component, Prop, h } from "@stencil/core";
 @Component({
   tag: "tc-img-text-card",
   shadow: true,
+  styleUrl: "../../util/base.css",
 })
 export class TcImgTextCard {
   @Prop() imageSrc: string;

packages/tc-web/src/components/tc-job-listing/tc-job-listing.tsx

@@ -4,6 +4,7 @@ import { parseTags } from "../../util/util";
 @Component({
   tag: "tc-job-listing",
   shadow: true,
+  styleUrl: "../../util/base.css",
 })
 export class JobListing {
   @Prop() jobTitle: string;

packages/tc-web/src/components/tc-segment-container/readme.md

@@ -8,7 +8,7 @@
 | Property          | Attribute          | Description | Type     | Default     |
 | ----------------- | ------------------ | ----------- | -------- | ----------- |
 | `backgroundColor` | `background-color` |             | `string` | `undefined` |
-| `segTitle`        | `seg-title`        |             | `string` | `undefined` |
+| `segTitle`        | `title`            |             | `string` | `undefined` |
 
 
 ----------------------------------------------

packages/tc-web/src/components/tc-segment-container/tc-segment-container.tsx

@@ -4,6 +4,7 @@ import { Component, Prop, h, Host } from "@stencil/core";
 @Component({
   tag: "segment-container",
   shadow: true,
+  styleUrl: "../../util/base.css",
 })
 export class SegmentContainer {
   @Prop({ attribute: "title" }) segTitle: string;

packages/tc-web/src/components/tc-subtitle/tc-open-positions.tsx

@@ -3,6 +3,7 @@ import { Component, Prop, h } from "@stencil/core";
 @Component({
   tag: "tc-open-positions",
   shadow: true,
+  styleUrl: "../../util/base.css",
 })
 export class OpenPositions {
   @Prop() level: string; // Corrected the property name spelling.

packages/tc-web/src/components/tc-svg-icon-card/tc-svg-icon-card.tsx

@@ -3,6 +3,7 @@ import { Component, Prop, h } from "@stencil/core";
 @Component({
   tag: "tc-svg-icon-card",
   shadow: true,
+  styleUrl: "../../util/base.css",
 })
 export class SVGIconCard {
   @Prop({ attribute: "title" }) advantageTitle: string;

packages/tc-web/src/index.html

@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html dir="ltr" lang="en">
   <head>
     <meta charset="utf-8" />

packages/tc-web/src/util/base.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}