@saasquatch/mint-components 1.6.1-7 → 1.6.1

package/dist/collection/components/sqm-stencilbook/Resizer.js

@@ -1,27 +1,27 @@
-import { h } from "@stencil/core";
-export const ResizerStylesheet = `
-
-:root{
-    --checker-color-1: #ffffff00;
-    --checker-color-2: #ffffff00;
-    --checker-size: 7px;
-    --checker-gradient: linear-gradient(45deg, var(--checker-color-1) 25%, transparent 25%, transparent 75%, var(--checker-color-1) 75%);
-}
-.resizer{
-    resize: horizontal;
-    border: 2px dashed gray;
-	margin: -2px;
-    padding: 12px;
-    height: fit-content;
-    overflow: hidden;
-	width: 100%;
-}
-
-.resizer{
-    background-color: var(--checker-color-2);
-    background-image: var(--checker-gradient), var(--checker-gradient);
-    background-position: 0 0, var(--checker-size) var(--checker-size);
-    background-size: calc(var(--checker-size) * 2) calc(var(--checker-size) * 2);
-}
-`;
-export const Resizer = (_, children) => (h("div", { class: "resizer" }, children));
+import { h } from "@stencil/core";
+export const ResizerStylesheet = `
+
+:root{
+    --checker-color-1: #ffffff00;
+    --checker-color-2: #ffffff00;
+    --checker-size: 7px;
+    --checker-gradient: linear-gradient(45deg, var(--checker-color-1) 25%, transparent 25%, transparent 75%, var(--checker-color-1) 75%);
+}
+.resizer{
+    resize: horizontal;
+    border: 2px dashed gray;
+	margin: -2px;
+    padding: 12px;
+    height: fit-content;
+    overflow: hidden;
+	width: 100%;
+}
+
+.resizer{
+    background-color: var(--checker-color-2);
+    background-image: var(--checker-gradient), var(--checker-gradient);
+    background-position: 0 0, var(--checker-size) var(--checker-size);
+    background-size: calc(var(--checker-size) * 2) calc(var(--checker-size) * 2);
+}
+`;
+export const Resizer = (_, children) => (h("div", { class: "resizer" }, children));

package/dist/collection/components/sqm-stencilbook/Themes.js

@@ -1,44 +1,44 @@
-/**
- *
- * Themes
- *
- * Export only valid CSS. Those will be injected into style tags.
- *
- * Useful links:
- *  - https://brandcolors.net/
- *  - Shoelace color generator: https://codepen.io/claviska/full/QWveRgL
- *
- */
-import { autoColorScaleCss } from "./AutoColor";
-//
-export const Default = `
- // No CSS
-`;
-export const Orangey = `
-:root{
-    ${autoColorScaleCss("orange")}
-}
-`;
-export const Netflix = `
-:root{
-    ${autoColorScaleCss("#e50914")}
-}
-`;
-export const SaaSquatchCorporate = `
-:root{
-    ${autoColorScaleCss("#65bd60")}
-    --sl-font-sans: Arial;
-}
-`;
-export const NYTimes = `
-:root{
-    ${autoColorScaleCss("black")}
-    --sl-font-sans: Georgia, 'Times New Roman', serif;
-}
-`;
-export const Klip = `
-:root{
-    ${autoColorScaleCss("#4225C4")};
-}
-
-`;
+/**
+ *
+ * Themes
+ *
+ * Export only valid CSS. Those will be injected into style tags.
+ *
+ * Useful links:
+ *  - https://brandcolors.net/
+ *  - Shoelace color generator: https://codepen.io/claviska/full/QWveRgL
+ *
+ */
+import { autoColorScaleCss } from "./AutoColor";
+//
+export const Default = `
+ // No CSS
+`;
+export const Orangey = `
+:root{
+    ${autoColorScaleCss("orange")}
+}
+`;
+export const Netflix = `
+:root{
+    ${autoColorScaleCss("#e50914")}
+}
+`;
+export const SaaSquatchCorporate = `
+:root{
+    ${autoColorScaleCss("#65bd60")}
+    --sl-font-sans: Arial;
+}
+`;
+export const NYTimes = `
+:root{
+    ${autoColorScaleCss("black")}
+    --sl-font-sans: Georgia, 'Times New Roman', serif;
+}
+`;
+export const Klip = `
+:root{
+    ${autoColorScaleCss("#4225C4")};
+}
+
+`;

package/dist/collection/components/sqm-stencilbook/sqm-stencilbook.js

@@ -1,207 +1,207 @@
-import { h, Component, Host, State } from "@stencil/core";
-import { useStencilbook } from "@saasquatch/stencilbook";
-import { useState, withHooks } from "@saasquatch/stencil-hooks";
-import * as ShareButton from "../sqm-share-button/ShareButton.stories";
-import * as EmptyState from "../sqm-empty/EmptyState.stories";
-import * as ShareLink from "../sqm-share-link/ShareLink.stories";
-import * as BigStat from "../sqm-big-stat/BigStat.stories";
-import * as Leaderboard from "../sqm-leaderboard/Leaderboard.stories";
-import * as Router from "../sqm-router/Router.stories";
-import * as LeaderboardRank from "../sqm-leaderboard-rank/LeaderboardRank.stories";
-import * as PortalFrame from "../sqm-portal-frame/PortalFrame.stories";
-import * as EditProfile from "../sqm-edit-profile/EditProfileForm.stories";
-import * as UseShareLink from "../sqm-share-link/UseShareLink.stories";
-import * as UseShareButton from "../sqm-share-button/UseShareButton.stories";
-import * as UseBigStat from "../sqm-big-stat/UseBigStat.stories";
-import * as UseEditProfile from "../sqm-edit-profile/UseEditProfile.stories";
-import * as UseLeaderboard from "../sqm-leaderboard/UseLeaderboard.stories";
-import * as FormMessage from "../sqm-form-message/FormMessage.stories";
-import * as UseRewardExchangeList from "../sqm-reward-exchange-list/UseRewardExchangeList.stories";
-import * as UseRewardsTable from "../sqm-rewards-table/UseRewardsTable.stories";
-import * as UseTaskCard from "../sqm-task-card/UseTaskCard.stories";
-import * as NewPortal from "../../stories/NewPortal.stories";
-import * as Widget from "../../stories/Widget.stories";
-import * as SidebarItem from "../sqm-navigation-sidebar-item/SidebarItem.stories";
-import * as NavigationSidebar from "../sqm-navigation-sidebar/NavigationSidebar.stories";
-import * as PortalLogin from "../sqm-portal-login/PortalLogin.stories";
-import * as PortalRegister from "../sqm-portal-register/PortalRegister.stories";
-import * as PortalForgotPassword from "../sqm-portal-forgot-password/PortalForgotPassword.stories";
-import * as PortalEmailVerification from "../sqm-portal-email-verification/PortalEmailVerification.stories";
-import * as PortalResetPassword from "../sqm-portal-reset-password/PortalResetPassword.stories";
-import * as PortalVerifyEmail from "../sqm-portal-verify-email/PortalVerifyEmail.stories";
-import * as AssetCard from "../sqm-asset-card/AssetCard.stories";
-import * as DividedLayout from "../sqm-divided-layout/DividedLayout.stories";
-import * as ChangePassword from "../sqm-portal-change-password/ChangePassword.stories";
-import * as PortalProfile from "../sqm-portal-profile/PortalProfile.stories";
-import * as ReferralTable from "../sqm-referral-table/ReferralTable.stories";
-import * as ReferralTableCell from "../sqm-referral-table/ReferralTableCell.stories";
-import * as ReferralTableRewardsCell from "../sqm-referral-table/ReferralTableRewardsCell.stories";
-import * as UserName from "../sqm-user-name/UserName.stories";
-import * as PasswordField from "../sqm-password-field/PasswordField.stories";
-import * as TaskCard from "../sqm-task-card/TaskCard.stories";
-import * as PortalTemplates from "../../stories/PortalTemplates.stories";
-import * as ProgramMenu from "../sqm-program-menu/ProgramMenu.stories";
-import * as PoweredByImg from "../../stories/PoweredByImg.stories";
-import * as PortalFooter from "../sqm-portal-footer/PortalFooter.stories";
-import * as Hero from "../sqm-hero/Hero.stories";
-import * as ReferralIframe from "../sqm-referral-iframe/ReferralIframe.stories";
-import * as NameFields from "../sqm-name-fields/NameFields.stories";
-import * as CheckboxField from "../sqm-checkbox-field/CheckboxField.stories";
-import * as UseCheckboxField from "../sqm-checkbox-field/UseCheckboxField.stories";
-import * as DropdownField from "../sqm-dropdown-field/DropdownField.stories";
-import * as UseDropdownField from "../sqm-dropdown-field/UseDropdownField.stories";
-import * as InputField from "../sqm-input-field/InputField.stories";
-import * as UseInputField from "../sqm-input-field/UseInputField.stories";
-import * as RewardExchangeList from "../sqm-reward-exchange-list/RewardExchangeList.stories";
-import * as ProgramExplainer from "../sqm-program-explainer/ProgramExplainer.stories";
-import * as ProgramExplainerStep from "../sqm-program-explainer-step/ProgramExplainerStep.stories";
-import * as BrandStories from "../sqm-brand/SqmBrand.stories";
-import * as CardFeed from "../sqm-card-feed/CardFeed.stories";
-import * as PortalContainer from "../sqm-portal-container/PortalContainer.stories";
-import * as RewardsTableCell from "../sqm-rewards-table/RewardsTableCell.stories";
-import * as RewardsTable from "../sqm-rewards-table/RewardsTable.stories";
-import * as UseReferralTable from "../sqm-referral-table/UseReferralTable.stories";
-import * as HeroImage from "../sqm-hero-image/HeroImage.stories";
-import * as ReferralCard from "../sqm-referral-card/ReferralCard.stories";
-import * as Timeline from "../sqm-timeline/Timeline.stories";
-import * as Image from "../sqm-image/Image.stories";
-import * as TitledSection from "../sqm-titled-section/TitledSection.stories";
-import * as Scroll from "../sqm-scroll/Scroll.stories";
-import * as Tabs from "../sqm-tabs/Tabs.stories";
-import * as ShareCode from "../sqm-share-code/ShareCode.stories";
-import * as Themes from "./Themes";
-import { CucumberAddon } from "./CucumberAddon";
-import { HookStoryAddon } from "./HookStoryAddon";
-import { ShadowViewAddon } from "../../ShadowViewAddon";
-import { ResizerStylesheet } from "./Resizer";
-const stories = [
-  ShareButton,
-  ShareLink,
-  BigStat,
-  Leaderboard,
-  EmptyState,
-  LeaderboardRank,
-  UseShareLink,
-  UseShareButton,
-  UseBigStat,
-  UseEditProfile,
-  UseLeaderboard,
-  UseCheckboxField,
-  UseDropdownField,
-  UseInputField,
-  Router,
-  PortalFrame,
-  EditProfile,
-  FormMessage,
-  NewPortal,
-  SidebarItem,
-  NavigationSidebar,
-  PortalLogin,
-  PortalRegister,
-  PortalForgotPassword,
-  PortalEmailVerification,
-  PortalResetPassword,
-  PortalVerifyEmail,
-  AssetCard,
-  DividedLayout,
-  ChangePassword,
-  PortalProfile,
-  ReferralTable,
-  ReferralTableCell,
-  ReferralTableRewardsCell,
-  UserName,
-  PasswordField,
-  TaskCard,
-  PortalTemplates,
-  Widget,
-  ProgramMenu,
-  PoweredByImg,
-  PortalFooter,
-  Hero,
-  ReferralIframe,
-  NameFields,
-  CheckboxField,
-  DropdownField,
-  InputField,
-  RewardExchangeList,
-  UseRewardExchangeList,
-  UseTaskCard,
-  UseRewardsTable,
-  ProgramExplainer,
-  ProgramExplainerStep,
-  BrandStories,
-  CardFeed,
-  PortalContainer,
-  RewardsTableCell,
-  RewardsTable,
-  UseReferralTable,
-  HeroImage,
-  ReferralCard,
-  Timeline,
-  Image,
-  TitledSection,
-  Scroll,
-  Tabs,
-  ShareCode,
-];
-/**
- * For internal documentation
- *
- * @undocumented
- */
-export class StencilStorybook {
-  constructor() {
-    this.ignored = true;
-    withHooks(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const { class: Style, children } = useStencilbook(stories, {
-      h,
-      title: "Mint Components",
-      addons: [HookStoryAddon, ShadowViewAddon, CucumberAddon],
-    });
-    const [selectedTheme, setSelected] = useState("Default");
-    const [checkerboard, setCheckerboard] = useState(true);
-    const themes = Object.keys(Themes);
-    const theme = Themes[selectedTheme];
-    return (h(Host, { class: Style, onClick: {} },
-      h("div", { style: {
-          position: "absolute",
-          top: "0",
-          right: "0",
-          zIndex: "999999",
-        } },
-        "Branding:",
-        h("select", { onChange: (e) => setSelected(e.target.value) }, themes.map((t) => (h("option", { selected: t === selectedTheme }, t)))),
-        h("div", null,
-          h("div", null)),
-        h(ColorScale, null),
-        h("br", null),
-        h("input", { type: "checkbox", id: "checkerboard", onClick: () => setCheckerboard(!checkerboard), onChange: () => document.documentElement.style.setProperty("--checker-color-1", checkerboard ? "#ebebeb" : "#ffffff00") }),
-        h("label", { htmlFor: "checkerboard" }, "Checkerboard?")),
-      h("style", null, theme),
-      h("style", null, ResizerStylesheet),
-      children));
-  }
-  static get is() { return "sqm-stencilbook"; }
-  static get states() { return {
-    "ignored": {}
-  }; }
-}
-function ColorScale() {
-  return (h("span", null,
-    h(ColorToken, null),
-    h(ColorToken, { type: "success" }),
-    h(ColorToken, { type: "warning" }),
-    h(ColorToken, { type: "danger" }),
-    h(ColorToken, { type: "neutral" })));
-}
-function ColorToken({ type = "primary" }) {
-  return (h("span", { style: {
-      background: `var(--sl-color-${type}-500)`,
-      width: "1em",
-      marginRight: "2px",
-      padding: "0 4px",
-    }, title: type }, type.charAt(0)));
-}
+import { h, Component, Host, State } from "@stencil/core";
+import { useStencilbook } from "@saasquatch/stencilbook";
+import { useState, withHooks } from "@saasquatch/stencil-hooks";
+import * as ShareButton from "../sqm-share-button/ShareButton.stories";
+import * as EmptyState from "../sqm-empty/EmptyState.stories";
+import * as ShareLink from "../sqm-share-link/ShareLink.stories";
+import * as BigStat from "../sqm-big-stat/BigStat.stories";
+import * as Leaderboard from "../sqm-leaderboard/Leaderboard.stories";
+import * as Router from "../sqm-router/Router.stories";
+import * as LeaderboardRank from "../sqm-leaderboard-rank/LeaderboardRank.stories";
+import * as PortalFrame from "../sqm-portal-frame/PortalFrame.stories";
+import * as EditProfile from "../sqm-edit-profile/EditProfileForm.stories";
+import * as UseShareLink from "../sqm-share-link/UseShareLink.stories";
+import * as UseShareButton from "../sqm-share-button/UseShareButton.stories";
+import * as UseBigStat from "../sqm-big-stat/UseBigStat.stories";
+import * as UseEditProfile from "../sqm-edit-profile/UseEditProfile.stories";
+import * as UseLeaderboard from "../sqm-leaderboard/UseLeaderboard.stories";
+import * as FormMessage from "../sqm-form-message/FormMessage.stories";
+import * as UseRewardExchangeList from "../sqm-reward-exchange-list/UseRewardExchangeList.stories";
+import * as UseRewardsTable from "../sqm-rewards-table/UseRewardsTable.stories";
+import * as UseTaskCard from "../sqm-task-card/UseTaskCard.stories";
+import * as NewPortal from "../../stories/NewPortal.stories";
+import * as Widget from "../../stories/Widget.stories";
+import * as SidebarItem from "../sqm-navigation-sidebar-item/SidebarItem.stories";
+import * as NavigationSidebar from "../sqm-navigation-sidebar/NavigationSidebar.stories";
+import * as PortalLogin from "../sqm-portal-login/PortalLogin.stories";
+import * as PortalRegister from "../sqm-portal-register/PortalRegister.stories";
+import * as PortalForgotPassword from "../sqm-portal-forgot-password/PortalForgotPassword.stories";
+import * as PortalEmailVerification from "../sqm-portal-email-verification/PortalEmailVerification.stories";
+import * as PortalResetPassword from "../sqm-portal-reset-password/PortalResetPassword.stories";
+import * as PortalVerifyEmail from "../sqm-portal-verify-email/PortalVerifyEmail.stories";
+import * as AssetCard from "../sqm-asset-card/AssetCard.stories";
+import * as DividedLayout from "../sqm-divided-layout/DividedLayout.stories";
+import * as ChangePassword from "../sqm-portal-change-password/ChangePassword.stories";
+import * as PortalProfile from "../sqm-portal-profile/PortalProfile.stories";
+import * as ReferralTable from "../sqm-referral-table/ReferralTable.stories";
+import * as ReferralTableCell from "../sqm-referral-table/ReferralTableCell.stories";
+import * as ReferralTableRewardsCell from "../sqm-referral-table/ReferralTableRewardsCell.stories";
+import * as UserName from "../sqm-user-name/UserName.stories";
+import * as PasswordField from "../sqm-password-field/PasswordField.stories";
+import * as TaskCard from "../sqm-task-card/TaskCard.stories";
+import * as PortalTemplates from "../../stories/PortalTemplates.stories";
+import * as ProgramMenu from "../sqm-program-menu/ProgramMenu.stories";
+import * as PoweredByImg from "../../stories/PoweredByImg.stories";
+import * as PortalFooter from "../sqm-portal-footer/PortalFooter.stories";
+import * as Hero from "../sqm-hero/Hero.stories";
+import * as ReferralIframe from "../sqm-referral-iframe/ReferralIframe.stories";
+import * as NameFields from "../sqm-name-fields/NameFields.stories";
+import * as CheckboxField from "../sqm-checkbox-field/CheckboxField.stories";
+import * as UseCheckboxField from "../sqm-checkbox-field/UseCheckboxField.stories";
+import * as DropdownField from "../sqm-dropdown-field/DropdownField.stories";
+import * as UseDropdownField from "../sqm-dropdown-field/UseDropdownField.stories";
+import * as InputField from "../sqm-input-field/InputField.stories";
+import * as UseInputField from "../sqm-input-field/UseInputField.stories";
+import * as RewardExchangeList from "../sqm-reward-exchange-list/RewardExchangeList.stories";
+import * as ProgramExplainer from "../sqm-program-explainer/ProgramExplainer.stories";
+import * as ProgramExplainerStep from "../sqm-program-explainer-step/ProgramExplainerStep.stories";
+import * as BrandStories from "../sqm-brand/SqmBrand.stories";
+import * as CardFeed from "../sqm-card-feed/CardFeed.stories";
+import * as PortalContainer from "../sqm-portal-container/PortalContainer.stories";
+import * as RewardsTableCell from "../sqm-rewards-table/RewardsTableCell.stories";
+import * as RewardsTable from "../sqm-rewards-table/RewardsTable.stories";
+import * as UseReferralTable from "../sqm-referral-table/UseReferralTable.stories";
+import * as HeroImage from "../sqm-hero-image/HeroImage.stories";
+import * as ReferralCard from "../sqm-referral-card/ReferralCard.stories";
+import * as Timeline from "../sqm-timeline/Timeline.stories";
+import * as Image from "../sqm-image/Image.stories";
+import * as TitledSection from "../sqm-titled-section/TitledSection.stories";
+import * as Scroll from "../sqm-scroll/Scroll.stories";
+import * as Tabs from "../sqm-tabs/Tabs.stories";
+import * as ShareCode from "../sqm-share-code/ShareCode.stories";
+import * as Themes from "./Themes";
+import { CucumberAddon } from "./CucumberAddon";
+import { HookStoryAddon } from "./HookStoryAddon";
+import { ShadowViewAddon } from "../../ShadowViewAddon";
+import { ResizerStylesheet } from "./Resizer";
+const stories = [
+  ShareButton,
+  ShareLink,
+  BigStat,
+  Leaderboard,
+  EmptyState,
+  LeaderboardRank,
+  UseShareLink,
+  UseShareButton,
+  UseBigStat,
+  UseEditProfile,
+  UseLeaderboard,
+  UseCheckboxField,
+  UseDropdownField,
+  UseInputField,
+  Router,
+  PortalFrame,
+  EditProfile,
+  FormMessage,
+  NewPortal,
+  SidebarItem,
+  NavigationSidebar,
+  PortalLogin,
+  PortalRegister,
+  PortalForgotPassword,
+  PortalEmailVerification,
+  PortalResetPassword,
+  PortalVerifyEmail,
+  AssetCard,
+  DividedLayout,
+  ChangePassword,
+  PortalProfile,
+  ReferralTable,
+  ReferralTableCell,
+  ReferralTableRewardsCell,
+  UserName,
+  PasswordField,
+  TaskCard,
+  PortalTemplates,
+  Widget,
+  ProgramMenu,
+  PoweredByImg,
+  PortalFooter,
+  Hero,
+  ReferralIframe,
+  NameFields,
+  CheckboxField,
+  DropdownField,
+  InputField,
+  RewardExchangeList,
+  UseRewardExchangeList,
+  UseTaskCard,
+  UseRewardsTable,
+  ProgramExplainer,
+  ProgramExplainerStep,
+  BrandStories,
+  CardFeed,
+  PortalContainer,
+  RewardsTableCell,
+  RewardsTable,
+  UseReferralTable,
+  HeroImage,
+  ReferralCard,
+  Timeline,
+  Image,
+  TitledSection,
+  Scroll,
+  Tabs,
+  ShareCode,
+];
+/**
+ * For internal documentation
+ *
+ * @undocumented
+ */
+export class StencilStorybook {
+  constructor() {
+    this.ignored = true;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { class: Style, children } = useStencilbook(stories, {
+      h,
+      title: "Mint Components",
+      addons: [HookStoryAddon, ShadowViewAddon, CucumberAddon],
+    });
+    const [selectedTheme, setSelected] = useState("Default");
+    const [checkerboard, setCheckerboard] = useState(true);
+    const themes = Object.keys(Themes);
+    const theme = Themes[selectedTheme];
+    return (h(Host, { class: Style, onClick: {} },
+      h("div", { style: {
+          position: "absolute",
+          top: "0",
+          right: "0",
+          zIndex: "999999",
+        } },
+        "Branding:",
+        h("select", { onChange: (e) => setSelected(e.target.value) }, themes.map((t) => (h("option", { selected: t === selectedTheme }, t)))),
+        h("div", null,
+          h("div", null)),
+        h(ColorScale, null),
+        h("br", null),
+        h("input", { type: "checkbox", id: "checkerboard", onClick: () => setCheckerboard(!checkerboard), onChange: () => document.documentElement.style.setProperty("--checker-color-1", checkerboard ? "#ebebeb" : "#ffffff00") }),
+        h("label", { htmlFor: "checkerboard" }, "Checkerboard?")),
+      h("style", null, theme),
+      h("style", null, ResizerStylesheet),
+      children));
+  }
+  static get is() { return "sqm-stencilbook"; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}
+function ColorScale() {
+  return (h("span", null,
+    h(ColorToken, null),
+    h(ColorToken, { type: "success" }),
+    h(ColorToken, { type: "warning" }),
+    h(ColorToken, { type: "danger" }),
+    h(ColorToken, { type: "neutral" })));
+}
+function ColorToken({ type = "primary" }) {
+  return (h("span", { style: {
+      background: `var(--sl-color-${type}-500)`,
+      width: "1em",
+      marginRight: "2px",
+      padding: "0 4px",
+    }, title: type }, type.charAt(0)));
+}

package/dist/collection/components/sqm-tab/sqm-tab-view.js

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
-export const TabView = ({}, children) => {
-  return h(Host, null, children);
-};
+import { h, Host } from "@stencil/core";
+export const TabView = ({}, children) => {
+  return h(Host, null, children);
+};

package/dist/collection/components/sqm-tab/sqm-tab.js

@@ -1,38 +1,45 @@
-import { Component, h, Prop } from "@stencil/core";
-import { TabView } from "./sqm-tab-view";
-/**
- * @uiName Tab
- * @slots [{"name":"", "title":"Tab Content"}]
- * @validParents ["sqm-tabs"]
- * @exampleGroup Layout
- * @example Tab - <sqm-tab header="Example">This is an example tab. Add your own content here.</sqm-tab>
- */
-export class Tab {
-  render() {
-    return (h(TabView, null,
-      h("slot", null)));
-  }
-  static get is() { return "sqm-tab"; }
-  static get properties() { return {
-    "header": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Tab Title",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "header",
-      "reflect": false
-    }
-  }; }
-}
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop } from "@stencil/core";
+import { useRequestRerender } from "../../tables/re-render";
+import { TabView } from "./sqm-tab-view";
+/**
+ * @uiName Tab
+ * @slots [{"name":"", "title":"Tab Content"}]
+ * @validParents ["sqm-tabs"]
+ * @exampleGroup Layout
+ * @example Tab - <sqm-tab header="Example"><p>This is an example tab. Add your own content here.</p></sqm-tab>
+ */
+export class Tab {
+  constructor() {
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    useRequestRerender([this.header]);
+    return (h(TabView, null,
+      h("slot", null)));
+  }
+  static get is() { return "sqm-tab"; }
+  static get properties() { return {
+    "header": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Tab Title",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "header",
+      "reflect": false
+    }
+  }; }
+}