refactor: migrate to Lumina

package.json

@@ -101,9 +101,9 @@
     "lerna": "8.1.8",
     "lint-staged": "15.2.10",
     "markdownlint-cli": "0.41.0",
-    "postcss": "8.4.41",
+    "postcss": "8.4.47",
     "prettier": "3.3.3",
-    "puppeteer": "21.5.0",
+    "puppeteer": "23.4.1",
     "quicktype-core": "23.0.170",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
@@ -122,6 +122,7 @@
     "tsx": "4.17.0",
     "turbo": "1.13.4",
     "typescript": "5.4.4",
+    "vite": "5.4.8",
     "workbox-build": "7.1.1"
   },
   "license": "SEE LICENSE.md",

packages/calcite-components/.stylelintrc.cjs

@@ -6,7 +6,7 @@ const customFunctions = [
   "medium-modular-scale",
   "modular-scale",
   "scale-duration",
-  "small-modular-scale"
+  "small-modular-scale",
 ];
 // ⚠️ END OF AUTO-GENERATED CODE
 

packages/calcite-components/CHANGELOG_BETA.md

@@ -226,7 +226,7 @@ See [`CHANGELOG.md`](./CHANGELOG.md) for post-v1 changes.
     set to `hex` by default.
   - Removed ,`intlNoColor` property.
 
-  *note: color-picker-hex-input is `internal` component.*
+  _note: color-picker-hex-input is `internal` component._
 
 - **color-picker:**
 

packages/calcite-components/FAQ.md

@@ -49,7 +49,7 @@ Slots are a common web components concept, and chances are you already use them.
 </select>
 ```
 
-The `option` elements are placed in `select`'s *default slot*. Additionally, the "JavaScript" and "TypeScript" text is placed in `option`'s respective default slots. Many Calcite Components also utilize default slots. For example, here is a `calcite-dropdown` component:
+The `option` elements are placed in `select`'s _default slot_. Additionally, the "JavaScript" and "TypeScript" text is placed in `option`'s respective default slots. Many Calcite Components also utilize default slots. For example, here is a `calcite-dropdown` component:
 
 ```html
 <calcite-dropdown>
@@ -59,7 +59,7 @@ The `option` elements are placed in `select`'s *default slot*. Additionally, the
 </calcite-dropdown>
 ```
 
-The `calcite-dropdown-item`s are placed in `calcite-dropdown`'s default slot. In many cases a default slot is all that is needed. However, as components become more complicated, the need arises to position and style child components differently. This is where *named slots* come into play. In the example above, we are passing `calcite-button` into the dropdown's `trigger` slot. This informs the dropdown that the `calcite-button` component should be handled differently than the components in the default slot. If a Calcite Component has slots, they will be listed in the documentation. For example, [here are the slots](https://developers.arcgis.com/calcite-design-system/components/card/#component-api-slots) for `calcite-card`. For a more detailed explanation, I suggest reading the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots#adding_flexibility_with_slots) about slots.
+The `calcite-dropdown-item`s are placed in `calcite-dropdown`'s default slot. In many cases a default slot is all that is needed. However, as components become more complicated, the need arises to position and style child components differently. This is where _named slots_ come into play. In the example above, we are passing `calcite-button` into the dropdown's `trigger` slot. This informs the dropdown that the `calcite-button` component should be handled differently than the components in the default slot. If a Calcite Component has slots, they will be listed in the documentation. For example, [here are the slots](https://developers.arcgis.com/calcite-design-system/components/card/#component-api-slots) for `calcite-card`. For a more detailed explanation, I suggest reading the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots#adding_flexibility_with_slots) about slots.
 
 ### How do I change modes?
 

packages/calcite-components/calcite-preset.ts

@@ -285,7 +285,7 @@ export default {
       addUtilities(newUtilities);
     }),
     plugin(({ addUtilities, theme }) => {
-      const colors = flattenColorPalette(theme("borderColor"));
+      const colors = flattenColorPalette.default(theme("borderColor"));
       delete colors["default"];
 
       const colorMap = Object.keys(colors).map((color) => ({

packages/calcite-components/conventions/Accessibility/AccessibilityDeveloper.md

@@ -62,7 +62,7 @@ customElements.define("ui-input-broken", UIInputBroken);
 
 As of today there are no great workarounds for associating elements across the Shadow DOM boundary. Either all the associated elements should exist in the light DOM or Shadow DOM.
 
-However, you *could* extend the native element to allow an association.
+However, you _could_ extend the native element to allow an association.
 
 [scroll to top](#developer-quick-start-guide)