@planningcenter/tapestry 3.0.0-rc.8 → 3.0.0

package/dist/utilities/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/utilities/Icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAmB7C,iBAAS,IAAI,CAAC,EACZ,MAAM,EAAE,CAAC,EACT,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,GAAG,cAAc,CAAC,aAAa,CAAC,qBAgBpD;AAED,eAAe,IAAI,CAAA"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/utilities/Icon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAc7C,iBAAS,IAAI,CAAC,EACZ,MAAM,EAAE,CAAC,EACT,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,GAAG,cAAc,CAAC,aAAa,CAAC,qBAiBpD;AAED,eAAe,IAAI,CAAA"}

package/dist/utilities/Icon.js

@@ -1,29 +1,22 @@
-import classNames from 'classnames';
+import general from '@planningcenter/icons/sprites/general.svg';
+import { Symbol } from '@planningcenter/icons/symbol';
 import React from 'react';
 
-const icons = {
-    general: {
-        "check-circle": "M8,0c2.1217,0 4.1566,0.84286 5.6569,2.34315c1.5002,1.50029 2.3431,3.53512 2.3431,5.65685c0,1.58225 -0.4692,3.129 -1.3482,4.4446c-0.8791,1.3156 -2.1285,2.3409 -3.5903,2.9464c-1.46184,0.6055 -3.07037,0.764 -4.62222,0.4553c-1.55185,-0.3087 -2.97731,-1.0706 -4.09613,-2.1894c-1.11882,-1.1189 -1.88075,-2.5443 -2.18943,-4.09618c-0.30868,-1.55185 -0.15025,-3.16038 0.45525,-4.62219c0.6055,-1.46181 1.63088,-2.71124 2.94647,-3.59029c1.31559,-0.87905 2.86231,-1.34824 4.44456,-1.34824zM12.57,6.07l-1.14,-1.14l-4.43,4.44l-2.43,-2.44l-1.14,1.14l3.57,3.56z",
-        "down-caret": "M13,6l-5,5l-5,-5z",
-        "exclamation-triangle": "M15.7713,14.0548c0.0002,0.133 -0.0347,0.2638 -0.1011,0.3791c-0.0664,0.1153 -0.162,0.211 -0.2772,0.2776c-0.1152,0.0665 -0.246,0.1015 -0.379,0.1015h-14.02801c-0.13305,0 -0.26377,-0.035 -0.37898,-0.1015c-0.11521,-0.0666 -0.21084,-0.1623 -0.27725,-0.2776c-0.06642,-0.1153 -0.10127,-0.2461 -0.10106,-0.3791c0.00022,-0.1331 0.0355,-0.2637 0.10229,-0.3788l7.014,-12.11501c0.06631,-0.11506 0.16176,-0.21062 0.27675,-0.27707c0.11498,-0.06644 0.24544,-0.10142 0.37825,-0.10142c0.1328,0 0.26326,0.03498 0.37824,0.10142c0.11499,0.06645 0.21044,0.16201 0.27676,0.27707l7.01401,12.11501c0.0668,0.1151 0.1021,0.2457 0.1023,0.3788zM8.75699,11.028h-1.514v1.514h1.514zM8.75699,6.48499h-1.514v3.029h1.514z",
-        "info-circle": "M8.8,4h-1.6v1.6h1.6zM8.8,7.2h-1.6v4.8h1.6zM8,0c2.1217,0 4.1566,0.84286 5.6569,2.34315c1.5002,1.50029 2.3431,3.53512 2.3431,5.65685c0,1.58225 -0.4692,3.129 -1.3482,4.4446c-0.8791,1.3156 -2.1285,2.3409 -3.5903,2.9464c-1.46184,0.6055 -3.07037,0.764 -4.62222,0.4553c-1.55185,-0.3087 -2.97731,-1.0706 -4.09613,-2.1894c-1.11882,-1.1189 -1.88075,-2.5443 -2.18943,-4.09618c-0.30868,-1.55185 -0.15025,-3.16038 0.45525,-4.62219c0.6055,-1.46181 1.63088,-2.71124 2.94647,-3.59029c1.31559,-0.87905 2.86231,-1.34824 4.44456,-1.34824z",
-    },
+// Registry of valid sprite sheet collections
+// We will add the other collections here when we / if we make this more publicly available
+const validCollections = {
+    general,
 };
-// ATTENTION: This is a temporary solution to load the icons.
-// This should use the Symbol component from @planningcenter/icons/symbol
-// once we have a way to load the SVGs in a way that doesn't break in
-// other projects.
+function isValidCollection(collection) {
+    return collection in validCollections;
+}
 function Icon({ symbol: s, className, ...props }) {
     const [collection, symbol] = s.split("#");
     if (!isValidCollection(collection)) {
-        throw new Error(`Unknown icon collection: ${collection}`);
+        throw new Error(`Unknown icon collection: ${collection}. Available collections: ${Object.keys(validCollections).join(", ")}`);
     }
-    const fullPath = icons[collection][symbol];
-    return (React.createElement("svg", { role: "img", className: classNames("symbol", className), ...props },
-        React.createElement("path", { d: fullPath })));
-}
-function isValidCollection(collection) {
-    return collection in icons;
+    const spriteSheet = validCollections[collection];
+    return (React.createElement(Symbol, { symbol: `${spriteSheet}#${symbol}`, className: className, ...props }));
 }
 
 export { Icon as default };

package/dist/utilities/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":["../../src/utilities/Icon.tsx"],"sourcesContent":["import classNames from \"classnames\"\nimport React, { HTMLAttributes } from \"react\"\n\nconst icons = {\n  general: {\n    \"check-circle\":\n      \"M8,0c2.1217,0 4.1566,0.84286 5.6569,2.34315c1.5002,1.50029 2.3431,3.53512 2.3431,5.65685c0,1.58225 -0.4692,3.129 -1.3482,4.4446c-0.8791,1.3156 -2.1285,2.3409 -3.5903,2.9464c-1.46184,0.6055 -3.07037,0.764 -4.62222,0.4553c-1.55185,-0.3087 -2.97731,-1.0706 -4.09613,-2.1894c-1.11882,-1.1189 -1.88075,-2.5443 -2.18943,-4.09618c-0.30868,-1.55185 -0.15025,-3.16038 0.45525,-4.62219c0.6055,-1.46181 1.63088,-2.71124 2.94647,-3.59029c1.31559,-0.87905 2.86231,-1.34824 4.44456,-1.34824zM12.57,6.07l-1.14,-1.14l-4.43,4.44l-2.43,-2.44l-1.14,1.14l3.57,3.56z\",\n    \"down-caret\": \"M13,6l-5,5l-5,-5z\",\n    \"exclamation-triangle\":\n      \"M15.7713,14.0548c0.0002,0.133 -0.0347,0.2638 -0.1011,0.3791c-0.0664,0.1153 -0.162,0.211 -0.2772,0.2776c-0.1152,0.0665 -0.246,0.1015 -0.379,0.1015h-14.02801c-0.13305,0 -0.26377,-0.035 -0.37898,-0.1015c-0.11521,-0.0666 -0.21084,-0.1623 -0.27725,-0.2776c-0.06642,-0.1153 -0.10127,-0.2461 -0.10106,-0.3791c0.00022,-0.1331 0.0355,-0.2637 0.10229,-0.3788l7.014,-12.11501c0.06631,-0.11506 0.16176,-0.21062 0.27675,-0.27707c0.11498,-0.06644 0.24544,-0.10142 0.37825,-0.10142c0.1328,0 0.26326,0.03498 0.37824,0.10142c0.11499,0.06645 0.21044,0.16201 0.27676,0.27707l7.01401,12.11501c0.0668,0.1151 0.1021,0.2457 0.1023,0.3788zM8.75699,11.028h-1.514v1.514h1.514zM8.75699,6.48499h-1.514v3.029h1.514z\",\n    \"info-circle\":\n      \"M8.8,4h-1.6v1.6h1.6zM8.8,7.2h-1.6v4.8h1.6zM8,0c2.1217,0 4.1566,0.84286 5.6569,2.34315c1.5002,1.50029 2.3431,3.53512 2.3431,5.65685c0,1.58225 -0.4692,3.129 -1.3482,4.4446c-0.8791,1.3156 -2.1285,2.3409 -3.5903,2.9464c-1.46184,0.6055 -3.07037,0.764 -4.62222,0.4553c-1.55185,-0.3087 -2.97731,-1.0706 -4.09613,-2.1894c-1.11882,-1.1189 -1.88075,-2.5443 -2.18943,-4.09618c-0.30868,-1.55185 -0.15025,-3.16038 0.45525,-4.62219c0.6055,-1.46181 1.63088,-2.71124 2.94647,-3.59029c1.31559,-0.87905 2.86231,-1.34824 4.44456,-1.34824z\",\n  },\n}\n\n// ATTENTION: This is a temporary solution to load the icons.\n// This should use the Symbol component from @planningcenter/icons/symbol\n// once we have a way to load the SVGs in a way that doesn't break in\n// other projects.\n\nfunction Icon({\n  symbol: s,\n  className,\n  ...props\n}: { symbol: string } & HTMLAttributes<SVGSVGElement>) {\n  const [collection, symbol] = s.split(\"#\") as [\n    keyof typeof icons,\n    keyof typeof icons.general,\n  ]\n  if (!isValidCollection(collection)) {\n    throw new Error(`Unknown icon collection: ${collection}`)\n  }\n\n  const fullPath = icons[collection][symbol]\n\n  return (\n    <svg role=\"img\" className={classNames(\"symbol\", className)} {...props}>\n      <path d={fullPath} />\n    </svg>\n  )\n}\n\nexport default Icon\n\nfunction isValidCollection(\n  collection: string\n): collection is keyof typeof icons {\n  return collection in icons\n}\n"],"names":[],"mappings":";;;AAGA,MAAM,KAAK,GAAG;AACZ,IAAA,OAAO,EAAE;AACP,QAAA,cAAc,EACZ,miBAAmiB;AACriB,QAAA,YAAY,EAAE,mBAAmB;AACjC,QAAA,sBAAsB,EACpB,grBAAgrB;AAClrB,QAAA,aAAa,EACX,ygBAAygB;AAC5gB,KAAA;CACF;AAED;AACA;AACA;AACA;AAEA,SAAS,IAAI,CAAC,EACZ,MAAM,EAAE,CAAC,EACT,SAAS,EACT,GAAG,KAAK,EAC2C,EAAA;AACnD,IAAA,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,CAGvC;AACD,IAAA,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC,EAAE;AAClC,QAAA,MAAM,IAAI,KAAK,CAAC,4BAA4B,UAAU,CAAA,CAAE,CAAC;IAC3D;IAEA,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC;AAE1C,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,IAAI,EAAC,KAAK,EAAC,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAE,SAAS,CAAC,KAAM,KAAK,EAAA;AACnE,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAE,QAAQ,EAAA,CAAI,CACjB;AAEV;AAIA,SAAS,iBAAiB,CACxB,UAAkB,EAAA;IAElB,OAAO,UAAU,IAAI,KAAK;AAC5B;;;;"}
+{"version":3,"file":"Icon.js","sources":["../../src/utilities/Icon.tsx"],"sourcesContent":["import general from \"@planningcenter/icons/sprites/general.svg\"\nimport { Symbol } from \"@planningcenter/icons/symbol\"\nimport React, { HTMLAttributes } from \"react\"\n\n// Registry of valid sprite sheet collections\n// We will add the other collections here when we / if we make this more publicly available\nconst validCollections = {\n  general,\n} as const\n\ntype CollectionName = keyof typeof validCollections\n\nfunction isValidCollection(collection: string): collection is CollectionName {\n  return collection in validCollections\n}\n\nfunction Icon({\n  symbol: s,\n  className,\n  ...props\n}: { symbol: string } & HTMLAttributes<SVGSVGElement>) {\n  const [collection, symbol] = s.split(\"#\") as [CollectionName, string]\n\n  if (!isValidCollection(collection)) {\n    throw new Error(\n      `Unknown icon collection: ${collection}. Available collections: ${Object.keys(validCollections).join(\", \")}`\n    )\n  }\n\n  const spriteSheet = validCollections[collection]\n  return (\n    <Symbol\n      symbol={`${spriteSheet}#${symbol}`}\n      className={className}\n      {...props}\n    />\n  )\n}\n\nexport default Icon\n"],"names":[],"mappings":";;;;AAIA;AACA;AACA,MAAM,gBAAgB,GAAG;IACvB,OAAO;CACC;AAIV,SAAS,iBAAiB,CAAC,UAAkB,EAAA;IAC3C,OAAO,UAAU,IAAI,gBAAgB;AACvC;AAEA,SAAS,IAAI,CAAC,EACZ,MAAM,EAAE,CAAC,EACT,SAAS,EACT,GAAG,KAAK,EAC2C,EAAA;AACnD,IAAA,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,CAA6B;AAErE,IAAA,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC,EAAE;AAClC,QAAA,MAAM,IAAI,KAAK,CACb,4BAA4B,UAAU,CAAA,yBAAA,EAA4B,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA,CAAE,CAC7G;IACH;AAEA,IAAA,MAAM,WAAW,GAAG,gBAAgB,CAAC,UAAU,CAAC;AAChD,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,MAAM,IACL,MAAM,EAAE,GAAG,WAAW,CAAA,CAAA,EAAI,MAAM,CAAA,CAAE,EAClC,SAAS,EAAE,SAAS,KAChB,KAAK,EAAA,CACT;AAEN;;;;"}

package/dist/utilities/useId.d.ts

@@ -0,0 +1,2 @@
+export declare function useId(): number;
+//# sourceMappingURL=useId.d.ts.map

package/dist/utilities/useId.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useId.d.ts","sourceRoot":"","sources":["../../src/utilities/useId.ts"],"names":[],"mappings":"AAKA,wBAAgB,KAAK,WAMpB"}

package/dist/utilities/useId.js

@@ -0,0 +1,14 @@
+import { useRef } from 'react';
+
+let idCounter = 0;
+// Switch to React.useId when all products are on React 18
+function useId() {
+    const idRef = useRef(null);
+    if (idRef.current === null) {
+        idRef.current = idCounter++;
+    }
+    return idRef.current;
+}
+
+export { useId };
+//# sourceMappingURL=useId.js.map

package/dist/utilities/useId.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useId.js","sources":["../../src/utilities/useId.ts"],"sourcesContent":["import { useRef } from \"react\"\n\nlet idCounter = 0\n\n// Switch to React.useId when all products are on React 18\nexport function useId() {\n  const idRef = useRef<number | null>(null)\n  if (idRef.current === null) {\n    idRef.current = idCounter++\n  }\n  return idRef.current\n}\n"],"names":[],"mappings":";;AAEA,IAAI,SAAS,GAAG,CAAC;AAEjB;SACgB,KAAK,GAAA;AACnB,IAAA,MAAM,KAAK,GAAG,MAAM,CAAgB,IAAI,CAAC;AACzC,IAAA,IAAI,KAAK,CAAC,OAAO,KAAK,IAAI,EAAE;AAC1B,QAAA,KAAK,CAAC,OAAO,GAAG,SAAS,EAAE;IAC7B;IACA,OAAO,KAAK,CAAC,OAAO;AACtB;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry",
-  "version": "3.0.0-rc.8",
+  "version": "3.0.0",
   "type": "module",
   "repository": {
     "type": "git",
@@ -8,16 +8,15 @@
     "directory": "packages/tapestry"
   },
   "scripts": {
-    "prepare": "yarn build:tokens && yarn build",
+    "prepare": "[ -d dist ] || yarn build",
     "prebuild": "rimraf dist",
-    "build": "yarn build:tokens && rollup -c",
+    "build": "rollup -c && tsc-alias -p tsconfig.build.json",
     "build:storybook": "storybook build",
-    "build:tokens": "node ./src/tokens/style-dictionary.build.js",
     "storybook": "storybook dev -p 6006",
     "test": "vitest run",
-    "test:visual": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\"  \"yarn storybook --quiet\"  \"npx wait-on tcp:127.0.0.1:6006 && yarn test-storybook\"",
+    "test:visual": "bash scripts/docker-visual-test.sh",
     "test:visual:clean": "node scripts/clean-unused-snapshots.js",
-    "test:visual:update": "npm run test:visual:clean && npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\"  \"yarn storybook --quiet\"  \"npx wait-on tcp:127.0.0.1:6006 && yarn test-storybook -u\""
+    "test:visual:update": "bash scripts/docker-visual-test.sh --update"
   },
   "peerDependencies": {
     "react": "^17 || ^18 || ^19",
@@ -39,26 +38,28 @@
     "./unstable.css": "./dist/unstable.css",
     "./tokens.css": "./dist/tokens.css",
     "./tokens-dark.css": "./dist/tokens-dark.css",
+    "./tokens-deprecated.css": "./dist/tokens-deprecated.css",
     "./deprecated.css": "./dist/deprecated.css",
     "./tokens-deprecated.json": "./dist/tokens/tokens-deprecated.json",
     "./product-tokens/*": "./dist/product-tokens/*",
     "./print.css": "./dist/print.css",
-    "./print-no-media-queries.css": "./dist/print-no-media-queries.css"
+    "./print-no-media-queries.css": "./dist/print-no-media-queries.css",
+    "./tapestry-reset.css": "./dist/tapestry-reset.css"
   },
   "types": "./dist/index.d.ts",
   "devDependencies": {
-    "@planningcenter/tapestry-render": "^2.6.0",
+    "@planningcenter/tapestry-render": "^3.0.0",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^12.3.0",
-    "@storybook/addon-a11y": "^9.1.10",
-    "@storybook/addon-docs": "^9.1.10",
-    "@storybook/addon-links": "^9.1.10",
-    "@storybook/addon-onboarding": "^9.1.10",
-    "@storybook/cli": "^9.1.10",
-    "@storybook/react-vite": "^9.1.10",
+    "@storybook/addon-a11y": "9.1.17",
+    "@storybook/addon-docs": "9.1.17",
+    "@storybook/addon-links": "9.1.17",
+    "@storybook/addon-onboarding": "9.1.17",
+    "@storybook/cli": "9.1.19",
+    "@storybook/react-vite": "9.1.17",
     "@storybook/test-runner": "^0.23.0",
-    "@storybook/web-components-vite": "^9.1.10",
+    "@storybook/web-components-vite": "9.1.17",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
@@ -70,6 +71,7 @@
     "@vitejs/plugin-react-swc": "^3.5.0",
     "autoprefixer": "^10.4.21",
     "bootstrap": "5.3.0",
+    "glob": "^13.0.0",
     "jest-image-snapshot": "^6.4.0",
     "jsdom": "^25.0.0",
     "playwright": "^1.51.1",
@@ -91,17 +93,19 @@
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-rename-node-modules": "^1.3.1",
     "shadow-dom-testing-library": "^1.11.3",
-    "storybook": "^9.1.10",
+    "storybook": "9.1.19",
     "style-dictionary": "^4.2.0",
-    "tapestry-wc": "^2.4.0",
+    "tapestry-wc": "^3.0.0",
+    "tsc-alias": "^1.8.16",
     "typescript": "^5.5.3",
     "vite": "^6.4.1",
     "vitest": "^3.0.0"
   },
   "dependencies": {
-    "@planningcenter/icons": "^15.24.1",
+    "@planningcenter/icons": "^15.29.0",
+    "@planningcenter/tapestry-tokens": "^3.0.0",
     "classnames": "^2.5.1",
     "lodash": "^4.17.21"
   },
-  "gitHead": "146786a4a3e8e70db7030824e97c8472fbc977fb"
+  "gitHead": "1168860ff16c9ebb3429e377890b2df78deeee2f"
 }

package/react-types/index.d.ts

@@ -28,24 +28,24 @@ declare global {
         * @cssprop --tds-page-header-nav-background - Background color of the navigation, gradient on mobile. Overrides are not recommended.
         * @cssprop --tds-page-header-nav-item-padding-x: {var(--t-spacing-1)} - Horizontal padding for the tab.
         * @cssprop --tds-page-header-nav-item-padding-y: {var(--t-spacing-1)} - Vertical padding for the tab.
-        * @cssprop --tds-page-header-nav-item-color: {var(--t-text-color-default-primary)} - Text color for the tab.
+        * @cssprop --tds-page-header-nav-item-color: {var(--t-text-color)} - Text color for the tab.
         * @cssprop --tds-page-header-nav-item-background-color: {var(--t-fill-color-transparency-light-060)} - Background color for the tab.
         * @cssprop --tds-page-header-nav-item-border-width: {0} - Border width for the tab.
         * @cssprop --tds-page-header-nav-item-border-color: {var(--tds-page-header-nav-item-background-color)} - Border color for the tab.
-        * @cssprop --tds-page-header-nav-item-border-bottom-color: {var(--t-border-color-default-base)} - Border bottom color for the tab.
+        * @cssprop --tds-page-header-nav-item-border-bottom-color: {var(--t-border-color)} - Border bottom color for the tab.
         * @cssprop --tds-page-header-nav-item-color-hover: {var(--tds-page-header-nav-item-color)} - Text color for the tab on hover.
         * @cssprop --tds-page-header-nav-item-background-color-hover: {var(--t-fill-color-neutral-080)} - Background color for the tab on hover.
         * @cssprop --tds-page-header-nav-item-border-color-hover: {var(--tds-page-header-nav-item-background-color-hover)} - Border color for the tab on hover.
         * @cssprop --tds-page-header-nav-item-background-color-active: {var(--t-fill-color-neutral-060)} - Background color for the tab on active.
         * @cssprop --tds-page-header-nav-item-border-color-active: {var(--tds-page-header-nav-item-background-color-hover)} - Border color for the tab on active.
-        * @cssprop --tds-page-header-nav-item-color-disabled: {var(--t-text-color-default-disabled)} - Text color for the tab on disabled.
+        * @cssprop --tds-page-header-nav-item-color-disabled: {var(--t-text-color-disabled)} - Text color for the tab on disabled.
         * @cssprop --tds-page-header-nav-item-background-color-disabled: {var(--t-fill-color-neutral-080)} - Background color for the tab on disabled.
         * @cssprop --tds-page-header-nav-item-border-color-disabled: {var(--tds-page-header-nav-item-background-color-disabled)} - Border color for the tab on disabled.
-        * @cssprop --tds-page-header-nav-item-color-selected: {var(--t-text-color-default-primary)} - Text color for the tab on selected.
-        * @cssprop --tds-page-header-nav-item-border-color-selected: {var(--t-border-color-default-base)} - Border color for the tab on selected.
+        * @cssprop --tds-page-header-nav-item-color-selected: {var(--t-text-color)} - Text color for the tab on selected.
+        * @cssprop --tds-page-header-nav-item-border-color-selected: {var(--t-border-color)} - Border color for the tab on selected.
         * @cssprop --tds-page-header-nav-item-background-color-selected: {var(--t-fill-color-neutral-100)} - Background color for the tab on selected.
         * @cssprop --tds-page-header-nav-item-border-bottom-color-selected: {var(--tds-page-header-nav-item-background-color-selected)} - Border bottom color for the tab on selected.
-        * @cssprop --tds-page-header-nav-item-indicator-color: {var(--t-icon-color-status-warning-primary)} - Color for the indicator.
+        * @cssprop --tds-page-header-nav-item-indicator-color: {var(--t-icon-color-status-warning)} - Color for the indicator.
         */
       "tds-page-header": {
         /**
@@ -101,8 +101,8 @@ Please refer to each component's documentation for more information on how to us
         * @cssprop --tds-sidenav-item-nested-border-color - Border color for nested items (default: var(--t-fill-color-neutral-050))
         * @cssprop --tds-sidenav-item-nested-border-color-hover - Border color for nested items in hover state (default: var(--t-fill-color-neutral-010))
         * @cssprop --tds-sidenav-item-nested-border-color-selected - Border color for nested items in selected state (default: var(--t-fill-color-neutral-010))
-        * @cssprop --tds-sidenav-item-icon-color - Color for item icons (default: var(--t-icon-color-default-secondary))
-        * @cssprop --tds-sidenav-item-icon-color-selected - Color for selected item icons (default: var(--t-icon-color-default-primary))
+        * @cssprop --tds-sidenav-item-icon-color - Color for item icons (default: var(--t-icon-color-secondary))
+        * @cssprop --tds-sidenav-item-icon-color-selected - Color for selected item icons (default: var(--t-icon-color))
         * @cssprop --tds-sidenav-indent - Internal: The indentation spacing for nested items (default: 12px)
         * @cssprop --tds-sidenav-item-depth - Internal: The current nesting depth of items (default: 0)
         * @cssprop --tds-sidenav-item-transition - Internal: The transition timing for item state changes (default: background-color .2s cubic-bezier(.19, .91, .38, 1))

package/react-types/popover.d.ts

@@ -0,0 +1,7 @@
+import "react"
+
+declare module "react" {
+  interface HTMLAttributes<T> {
+    popover?: "auto" | "manual" | "" | null
+  }
+}