@planningcenter/tapestry 1.0.1 → 1.0.2-qa-172.0

package/README.md

@@ -8,6 +8,12 @@
 yarn add @planningcenter/tapestry
 ```
 
+## Registering Web Components
+
+- To register the web components for usage, add this file to your JS files:
+
+`import "@planningcenter/tapestry"`
+
 ## Adding types for using Web Components in React
 
 If you are using Web Components in React and want to have TypeScript populate the types,
@@ -24,10 +30,10 @@ add `"@planningcenter/tapestry/react-types"` to `compilerOptions.types` in your
 ## Running locally
 
 1. If this is your first time with this repo, make sure you build from the root directory first:
-    ```js
-    yarn wc build
-    ```
+   ```shell
+   yarn wc build
+   ```
 2. In this repo, launch storybook
-    ```js
-    yarn tap storybook
-    ````
+   ```shell
+   yarn tap storybook
+   ```

package/dist/components/btn/index.d.ts

@@ -0,0 +1,2 @@
+import "./btn.css";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/btn/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/btn/index.tsx"],"names":[],"mappings":"AAAA,OAAO,WAAW,CAAC"}

package/dist/components/sidenav/index.d.ts

@@ -0,0 +1,2 @@
+import "./index.css";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/sidenav/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/sidenav/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA"}

package/dist/components/sidenav/index.js

@@ -0,0 +1,11 @@
+import './../../ext/@stencil/core/internal/client/index.js';
+import { defineCustomElement } from '../../packages/tapestry-wc/dist/components/tds-sidenav.js';
+import { defineCustomElement as defineCustomElement$1 } from '../../packages/tapestry-wc/dist/components/tds-sidenav-item.js';
+import { defineCustomElement as defineCustomElement$3 } from '../../packages/tapestry-wc/dist/components/tds-sidenav-responsive-header.js';
+import { defineCustomElement as defineCustomElement$2 } from '../../packages/tapestry-wc/dist/components/tds-sidenav-section.js';
+
+defineCustomElement();
+defineCustomElement$1();
+defineCustomElement$2();
+defineCustomElement$3();
+//# sourceMappingURL=index.js.map

package/dist/components/sidenav/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/sidenav/index.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { defineCustomElementTdsSidenav, defineCustomElementTdsSidenavItem, defineCustomElementTdsSidenavResponsiveHeader, defineCustomElementTdsSidenavSection } from \"tapestry-wc\"\n\ndefineCustomElementTdsSidenav()\ndefineCustomElementTdsSidenavItem()\ndefineCustomElementTdsSidenavSection()\ndefineCustomElementTdsSidenavResponsiveHeader()\n"],"names":["defineCustomElementTdsSidenav","defineCustomElementTdsSidenavItem","defineCustomElementTdsSidenavSection","defineCustomElementTdsSidenavResponsiveHeader"],"mappings":";;;;;;AAIAA,mBAA6B,EAAE,CAAA;AAC/BC,qBAAiC,EAAE,CAAA;AACnCC,qBAAoC,EAAE,CAAA;AACtCC,qBAA6C,EAAE"}

package/dist/deprecated.css

@@ -0,0 +1,157 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --t-border-size-default: var(--t-border-width-default);
+  --t-border-size-thick: var(--t-border-width-thick);
+  --t-font-weight-semi-bold: var(--t-font-weight-semibold);
+  --t-text-color-tag-gray: var(--t-text-color-tag-bold-gray);
+  --t-text-color-tag-magenta: var(--t-text-color-tag-bold-magenta);
+  --t-text-color-tag-blue: var(--t-text-color-tag-bold-blue);
+  --t-text-color-tag-aqua: var(--t-text-color-tag-bold-aqua);
+  --t-text-color-tag-teal: var(--t-text-color-tag-bold-teal);
+  --t-text-color-tag-green: var(--t-text-color-tag-bold-green);
+  --t-text-color-tag-yellow: var(--t-text-color-tag-bold-yellow);
+  --t-text-color-tag-orange: var(--t-text-color-tag-bold-orange);
+  --t-text-color-tag-pink: var(--t-text-color-tag-bold-pink);
+  --t-text-color-tag-purple: var(--t-text-color-tag-bold-purple);
+  --t-icon-color-status-neutral-dark: hsl(0, 0%, 24%);
+  --t-icon-color-status-info-secondary: hsl(204, 100%, 40%);
+  --t-fill-color-alert-info: hsl(204, 94%, 49%);
+  --t-fill-color-alert-success: hsl(122, 60%, 41%);
+  --t-fill-color-alert-warning: hsl(43, 96%, 58%);
+  --t-fill-color-alert-error: hsl(4, 77%, 59%);
+  --t-fill-color-product-accounts-lightest: var(--t-fill-color-product-accounts-010);
+  --t-fill-color-product-accounts-lighter: var(--t-fill-color-product-accounts-020);
+  --t-fill-color-product-accounts-light: var(--t-fill-color-product-accounts-040);
+  --t-fill-color-product-accounts-base: var(--t-fill-color-product-accounts-050);
+  --t-fill-color-product-accounts-dark: var(--t-fill-color-product-accounts-060);
+  --t-fill-color-product-accounts-darker: var(--t-fill-color-product-accounts-070);
+  --t-fill-color-product-accounts-darkest: var(--t-fill-color-product-accounts-080);
+  --t-fill-color-product-calendar-lightest: var(--t-fill-color-product-calendar-020);
+  --t-fill-color-product-calendar-lighter: var(--t-fill-color-product-calendar-030);
+  --t-fill-color-product-calendar-light: var(--t-fill-color-product-calendar-040);
+  --t-fill-color-product-calendar-base: var(--t-fill-color-product-calendar-050);
+  --t-fill-color-product-calendar-dark: var(--t-fill-color-product-calendar-060);
+  --t-fill-color-product-calendar-darker: var(--t-fill-color-product-calendar-070);
+  --t-fill-color-product-calendar-darkest: var(--t-fill-color-product-calendar-080);
+  --t-fill-color-product-checkins-lightest: var(--t-fill-color-product-checkins-020);
+  --t-fill-color-product-checkins-lighter: var(--t-fill-color-product-checkins-030);
+  --t-fill-color-product-checkins-light: var(--t-fill-color-product-checkins-040);
+  --t-fill-color-product-checkins-base: var(--t-fill-color-product-checkins-050);
+  --t-fill-color-product-checkins-dark: var(--t-fill-color-product-checkins-060);
+  --t-fill-color-product-checkins-darker: var(--t-fill-color-product-checkins-070);
+  --t-fill-color-product-checkins-darkest: var(--t-fill-color-product-checkins-080);
+  --t-fill-color-product-giving-lightest: var(--t-fill-color-product-giving-020);
+  --t-fill-color-product-giving-lighter: var(--t-fill-color-product-giving-030);
+  --t-fill-color-product-giving-light: var(--t-fill-color-product-giving-040);
+  --t-fill-color-product-giving-base: var(--t-fill-color-product-giving-050);
+  --t-fill-color-product-giving-dark: var(--t-fill-color-product-giving-060);
+  --t-fill-color-product-giving-darker: var(--t-fill-color-product-giving-070);
+  --t-fill-color-product-giving-darkest: var(--t-fill-color-product-giving-080);
+  --t-fill-color-product-groups-lightest: var(--t-fill-color-product-groups-020);
+  --t-fill-color-product-groups-lighter: var(--t-fill-color-product-groups-030);
+  --t-fill-color-product-groups-light: var(--t-fill-color-product-groups-040);
+  --t-fill-color-product-groups-base: var(--t-fill-color-product-groups-050);
+  --t-fill-color-product-groups-dark: var(--t-fill-color-product-groups-060);
+  --t-fill-color-product-groups-darker: var(--t-fill-color-product-groups-070);
+  --t-fill-color-product-groups-darkest: var(--t-fill-color-product-groups-080);
+  --t-fill-color-product-home-lightest: var(--t-fill-color-product-home-020);
+  --t-fill-color-product-home-lighter: var(--t-fill-color-product-home-030);
+  --t-fill-color-product-home-light: var(--t-fill-color-product-home-040);
+  --t-fill-color-product-home-base: var(--t-fill-color-product-home-050);
+  --t-fill-color-product-home-dark: var(--t-fill-color-product-home-060);
+  --t-fill-color-product-home-darker: var(--t-fill-color-product-home-070);
+  --t-fill-color-product-home-darkest: var(--t-fill-color-product-home-080);
+  --t-fill-color-product-people-lightest: var(--t-fill-color-product-people-020);
+  --t-fill-color-product-people-lighter: var(--t-fill-color-product-people-030);
+  --t-fill-color-product-people-light: var(--t-fill-color-product-people-040);
+  --t-fill-color-product-people-base: var(--t-fill-color-product-people-050);
+  --t-fill-color-product-people-dark: var(--t-fill-color-product-people-060);
+  --t-fill-color-product-people-darker: var(--t-fill-color-product-people-070);
+  --t-fill-color-product-people-darkest: var(--t-fill-color-product-people-080);
+  --t-fill-color-product-publishing-lightest: var(--t-fill-color-product-publishing-020);
+  --t-fill-color-product-publishing-lighter: var(--t-fill-color-product-publishing-030);
+  --t-fill-color-product-publishing-light: var(--t-fill-color-product-publishing-040);
+  --t-fill-color-product-publishing-base: var(--t-fill-color-product-publishing-050);
+  --t-fill-color-product-publishing-dark: var(--t-fill-color-product-publishing-060);
+  --t-fill-color-product-publishing-darker: var(--t-fill-color-product-publishing-070);
+  --t-fill-color-product-publishing-darkest: var(--t-fill-color-product-publishing-080);
+  --t-fill-color-product-registrations-lightest: var(--t-fill-color-product-registrations-020);
+  --t-fill-color-product-registrations-lighter: var(--t-fill-color-product-registrations-030);
+  --t-fill-color-product-registrations-light: var(--t-fill-color-product-registrations-040);
+  --t-fill-color-product-registrations-base: var(--t-fill-color-product-registrations-050);
+  --t-fill-color-product-registrations-dark: var(--t-fill-color-product-registrations-060);
+  --t-fill-color-product-registrations-darker: var(--t-fill-color-product-registrations-070);
+  --t-fill-color-product-registrations-darkest: var(--t-fill-color-product-registrations-080);
+  --t-fill-color-product-services-lightest: var(--t-fill-color-product-services-020);
+  --t-fill-color-product-services-lighter: var(--t-fill-color-product-services-030);
+  --t-fill-color-product-services-light: var(--t-fill-color-product-services-040);
+  --t-fill-color-product-services-base: var(--t-fill-color-product-services-050);
+  --t-fill-color-product-services-dark: var(--t-fill-color-product-services-060);
+  --t-fill-color-product-services-darker: var(--t-fill-color-product-services-070);
+  --t-fill-color-product-services-darkest: var(--t-fill-color-product-services-080);
+  --t-fill-color-tag-subtle-gray: var(--t-fill-color-tag-gray-010);
+  --t-fill-color-tag-subtle-blue: var(--t-fill-color-tag-blue-010);
+  --t-fill-color-tag-subtle-aqua: var(--t-fill-color-tag-aqua-010);
+  --t-fill-color-tag-subtle-teal: var(--t-fill-color-tag-teal-010);
+  --t-fill-color-tag-subtle-green: var(--t-fill-color-tag-green-010);
+  --t-fill-color-tag-subtle-yellow: var(--t-fill-color-tag-yellow-010);
+  --t-fill-color-tag-subtle-orange: var(--t-fill-color-tag-orange-010);
+  --t-fill-color-tag-subtle-pink: var(--t-fill-color-tag-pink-010);
+  --t-fill-color-tag-subtle-purple: var(--t-fill-color-tag-purple-010);
+  --t-fill-color-tag-subtle-magenta: var(--t-fill-color-tag-magenta-010);
+  --t-fill-color-tag-subtle-label-gray: var(--t-fill-color-tag-gray-020);
+  --t-fill-color-tag-subtle-label-blue: var(--t-fill-color-tag-blue-020);
+  --t-fill-color-tag-subtle-label-aqua: var(--t-fill-color-tag-aqua-020);
+  --t-fill-color-tag-subtle-label-teal: var(--t-fill-color-tag-teal-020);
+  --t-fill-color-tag-subtle-label-green: var(--t-fill-color-tag-green-020);
+  --t-fill-color-tag-subtle-label-yellow: var(--t-fill-color-tag-yellow-020);
+  --t-fill-color-tag-subtle-label-orange: var(--t-fill-color-tag-orange-020);
+  --t-fill-color-tag-subtle-label-pink: var(--t-fill-color-tag-pink-020);
+  --t-fill-color-tag-subtle-label-purple: var(--t-fill-color-tag-purple-020);
+  --t-fill-color-tag-subtle-label-magenta: var(--t-fill-color-tag-magenta-020);
+  --t-fill-color-tag-bold-gray: var(--t-fill-color-tag-gray-030);
+  --t-fill-color-tag-bold-blue: var(--t-fill-color-tag-blue-030);
+  --t-fill-color-tag-bold-aqua: var(--t-fill-color-tag-aqua-030);
+  --t-fill-color-tag-bold-teal: var(--t-fill-color-tag-teal-030);
+  --t-fill-color-tag-bold-green: var(--t-fill-color-tag-green-030);
+  --t-fill-color-tag-bold-yellow: var(--t-fill-color-tag-yellow-030);
+  --t-fill-color-tag-bold-orange: var(--t-fill-color-tag-orange-030);
+  --t-fill-color-tag-bold-pink: var(--t-fill-color-tag-pink-030);
+  --t-fill-color-tag-bold-purple: var(--t-fill-color-tag-purple-030);
+  --t-fill-color-tag-bold-magenta: var(--t-fill-color-tag-magenta-030);
+  --t-fill-color-tag-bold-label-gray: var(--t-fill-color-tag-gray-040);
+  --t-fill-color-tag-bold-label-blue: var(--t-fill-color-tag-blue-040);
+  --t-fill-color-tag-bold-label-aqua: var(--t-fill-color-tag-aqua-040);
+  --t-fill-color-tag-bold-label-teal: var(--t-fill-color-tag-teal-040);
+  --t-fill-color-tag-bold-label-green: var(--t-fill-color-tag-green-040);
+  --t-fill-color-tag-bold-label-yellow: var(--t-fill-color-tag-yellow-040);
+  --t-fill-color-tag-bold-label-orange: var(--t-fill-color-tag-orange-040);
+  --t-fill-color-tag-bold-label-pink: var(--t-fill-color-tag-pink-040);
+  --t-fill-color-tag-bold-label-purple: var(--t-fill-color-tag-purple-040);
+  --t-fill-color-tag-bold-label-magenta: var(--t-fill-color-tag-magenta-040);
+  --t-fill-color-button-neutral-outline-dim-disabled-solid: hsl(0, 0%, 98%);
+  --t-fill-color-button-neutral-ghost-disabled-solid: hsl(0, 0%, 98%);
+  --t-fill-color-button-default-info-solid-default: hsl(204, 100%, 40%);
+  --t-fill-color-button-default-info-solid-hover: hsl(204, 100%, 35%);
+  --t-fill-color-button-default-info-solid-active: hsl(204, 100%, 30%);
+  --t-fill-color-button-default-info-solid-disabled: hsl(0, 0%, 81%);
+  --t-fill-color-button-default-info-outline-dim-default: #ffffff00;
+  --t-fill-color-button-default-info-outline-dim-hover: hsl(204, 100%, 97%);
+  --t-fill-color-button-default-info-outline-dim-active: hsl(203, 94%, 94%);
+  --t-fill-color-button-default-info-outline-dim-disabled: #ffffff00;
+  --t-fill-color-button-default-info-ghost-default: #ffffff00;
+  --t-fill-color-button-default-info-ghost-hover: hsl(204, 100%, 97%);
+  --t-fill-color-button-default-info-ghost-active: hsl(203, 94%, 94%);
+  --t-fill-color-button-default-info-ghost-disabled: #ffffff00;
+  --t-fill-color-button-create-solid-default: hsl(96, 57%, 33%);
+  --t-fill-color-button-create-solid-hover: hsl(97, 57%, 28%);
+  --t-fill-color-button-create-solid-active: hsl(97, 57%, 23%);
+  --t-fill-color-button-create-solid-disabled: hsl(0, 0%, 81%);
+  --t-fill-color-button-create-ghost-default: #ffffff00;
+  --t-fill-color-button-create-ghost-hover: hsl(96, 60%, 95%);
+  --t-fill-color-button-create-ghost-active: hsl(97, 57%, 90%);
+  --t-fill-color-button-create-ghost-disabled: #ffffff00;
+}

package/dist/ext/@stencil/core/internal/client/index.js

@@ -1,7 +1,7 @@
 import { BUILD, NAMESPACE } from '../app-data/index.js';
 
 /*
- Stencil Client Platform v4.27.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.30.0 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -159,6 +159,11 @@ function queryNonceMetaTagContent(doc) {
   return (_c = (_b = (_a = doc.head) == null ? void 0 : _a.querySelector('meta[name="csp-nonce"]')) == null ? void 0 : _b.getAttribute("content")) != null ? _c : void 0;
 }
 
+// src/utils/regular-expression.ts
+var escapeRegExpSpecialCharacters = (text) => {
+  return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+};
+
 // src/utils/result.ts
 var result_exports = {};
 __export(result_exports, {
@@ -431,6 +436,18 @@ var convertToPrivate = (node) => {
   vnode.$name$ = node.vname;
   return vnode;
 };
+var createSupportsRuleRe = (selector) => {
+  const safeSelector2 = escapeRegExpSpecialCharacters(selector);
+  return new RegExp(
+    // First capture group: match any context before the selector that's not inside @supports selector()
+    // Using negative lookahead to avoid matching inside @supports selector(...) condition
+    `(^|[^@]|@(?!supports\\s+selector\\s*\\([^{]*?${safeSelector2}))(${safeSelector2}\\b)`,
+    "g"
+  );
+};
+createSupportsRuleRe("::slotted");
+createSupportsRuleRe(":host");
+createSupportsRuleRe(":host-context");
 
 // src/runtime/mode.ts
 var computeMode = (elm) => modeResolutionChain.map((h2) => h2(elm)).find((m) => !!m);
@@ -440,7 +457,7 @@ var parsePropertyValue = (propValue, propType) => {
       return propValue === "false" ? false : propValue === "" || !!propValue;
     }
     if (propType & 2 /* Number */) {
-      return parseFloat(propValue);
+      return typeof propValue === "string" ? parseFloat(propValue) : typeof propValue === "number" ? propValue : NaN;
     }
     if (propType & 1 /* String */) {
       return String(propValue);
@@ -545,7 +562,7 @@ var attachStyles = (hostRef) => {
     cmpMeta,
     hostRef.$modeName$
   );
-  if ((flags & 10 /* needsScopedEncapsulation */ && flags & 2 /* scopedCssEncapsulation */ || flags & 128 /* shadowNeedsScopedCss */)) {
+  if (flags & 10 /* needsScopedEncapsulation */) {
     elm["s-sc"] = scopeId2;
     elm.classList.add(scopeId2 + "-h");
   }
@@ -1100,7 +1117,8 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   const hostElm = hostRef.$hostElement$;
   const cmpMeta = hostRef.$cmpMeta$;
   const oldVNode = hostRef.$vnode$ || newVNode(null, null);
-  const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
+  const isHostElement = isHost(renderFnResults);
+  const rootVnode = isHostElement ? renderFnResults : h(null, null, renderFnResults);
   hostTagName = hostElm.tagName;
   if (cmpMeta.$attrsToReflect$) {
     rootVnode.$attrs$ = rootVnode.$attrs$ || {};