winduum 2.0.0-next.9 → 2.0.0

package/src/components/toaster/index.d.ts

@@ -1,30 +1,6 @@
-export interface ShowToastOptions {
-    visibleClass?: string
-    autoHide?: number | null
-    heightProperty?: string
-    close?: CloseToastOptions
-}
-
 export interface CloseToastOptions {
-    hiddenClass?: string
+    closedAttribute?: string
     heightProperty?: string
 }
 
-export interface InsertToasterOptions {
-    classes?: string
-}
-
-export interface InsertToastOptions {
-    classes?: string
-    title?: string
-    text?: string
-    start?: string
-    end?: string
-    show?: ShowToastOptions
-}
-
-export function closeToast(element: HTMLElement, options?: CloseToastOptions): Promise<void>
-export function showToast(element: HTMLElement, options?: ShowToastOptions): Promise<void>
-export function insertToaster(element: HTMLElement, options?: InsertToasterOptions): Promise<void>
-export function insertToast(element: HTMLElement, options?: InsertToastOptions): Promise<void>
 export function closeToaster(element: HTMLElement, options?: CloseToastOptions): Promise<void>

package/src/components/toaster/index.js

@@ -1,106 +1,4 @@
-import { animationsFinished, nextRepaint } from '../../common.js'
-
-/**
- * @param {HTMLElement} element
- * @param {import('./index').CloseToastOptions} options
- * @returns Promise<void>
- */
-export const closeToast = async (element, options = {}) => {
-    options = {
-        hiddenClass: 'out',
-        heightProperty: '--x-toast-block-size',
-        ...options
-    }
-
-    const toaster = element.parentElement
-
-    element.style.setProperty(options.heightProperty, `${element.offsetHeight}px`)
-
-    await nextRepaint()
-
-    element.classList.add(options.hiddenClass)
-
-    await animationsFinished(element)
-
-    element.remove()
-
-    if (toaster.children.length < 1) toaster.remove()
-}
-
-/**
- * @param {HTMLElement} element
- * @param {import('./').ShowToastOptions} options
- * @returns Promise<void>
- */
-export const showToast = async (element, options = {}) => {
-    options = {
-        visibleClass: 'in',
-        autoHide: null,
-        heightProperty: '--x-toast-block-size',
-        close: {},
-        ...options
-    }
-
-    element.style.setProperty(options.heightProperty, `${element.offsetHeight}px`)
-    element.style.height = '0'
-
-    await animationsFinished(element)
-
-    element.style.height = ''
-    element.classList.add(options.visibleClass)
-
-    if (options.autoHide) {
-        setTimeout(() => closeToast(element, options.close), options.autoHide * ((element.parentElement.children.length + 1) / 2))
-    }
-}
-
-/**
- * @param {HTMLElement} element
- * @param {import('./').InsertToasterOptions} options
- * @returns Promise<void>
- */
-export const insertToaster = async (element, options = {}) => {
-    options = {
-        classes: '',
-        ...options
-    }
-
-    if (!document.querySelector('.x-toaster')) {
-        element.insertAdjacentHTML('beforeend', `<ol class="x-toaster ${options.classes}"></ol>`)
-    }
-}
-
-/**
- * @param {HTMLElement} element
- * @param {import('./').InsertToastOptions} options
- * @returns Promise<void>
- */
-export const insertToast = async (element, options = {}) => {
-    options = {
-        classes: '',
-        title: '',
-        text: '',
-        start: '',
-        end: '',
-        show: {},
-        ...options
-    }
-
-    element.insertAdjacentHTML('beforeend', `
-        <li class="x-toast ${options.classes}" role="status" aria-live="assertive" aria-atomic="true">
-            <div class="x-toast-content">
-               ${options.start}
-                <div class="flex-col">
-                    <div class="x-title">${options.title}</div>           
-                    <div class="x-text">${options.text}</div>
-                </div>
-                ${options.end}
-            </div>
-        </li>
-    `)
-
-    await showToast(element.children[element.children.length - 1], options.show)
-}
+import { closeToast } from '../toast/index.js'
 
 /**
  * @param {HTMLElement} element

package/src/components/toaster/props/default.css

@@ -1,4 +1,4 @@
 :root, :host {
-  --x-toaster-padding: var(--spacing-xl);
-  --x-toaster-margin-block: var(--spacing-xs);
+  --x-toaster-padding: var(--spacing-5);
+  --x-toaster-margin-block: var(--spacing-1);
 }

package/src/components/tooltip/props/default.css

@@ -3,10 +3,10 @@
   --x-tooltip-color: var(--color-main-foreground);
   --x-tooltip-border-radius: var(--radius-md);
   --x-tooltip-font-size: var(--font-size-sm);
-  --x-tooltip-padding-block: var(--spacing-xs);
-  --x-tooltip-padding-inline: var(--spacing-sm);
-  --x-tooltip-margin-block: var(--spacing-xs);
-  --x-tooltip-margin-inline: var(--spacing-xs);
+  --x-tooltip-padding-block: var(--spacing-1);
+  --x-tooltip-padding-inline: var(--spacing-2);
+  --x-tooltip-margin-block: var(--spacing-1);
+  --x-tooltip-margin-inline: var(--spacing-1);
   --x-tooltip-scale-x: 0.75;
   --x-tooltip-scale-y: 0.75;
 }

package/src/main.css

@@ -1,2 +1,5 @@
+@import "theme/index.css";
 @import "base/index.css";
+@import "../tailwindcss/base/defaults.css";
 @import "components/index.css";
+@import "utilities/index.css";

package/src/tailwind.css

@@ -1,2 +1,4 @@
-@import "base/tailwind.css";
-@import "utilities/index.css" layer(components);
+@import "tailwindcss/base.css";
+@import "tailwindcss/components.css";
+@import "tailwindcss/utilities.css";
+@import "tailwindcss/variants.css";

package/src/test.css

@@ -0,0 +1,9 @@
+@import "theme/index.css";
+@import "../tailwindcss/base/defaults.css";
+@import "tailwindcss/base.css";
+@import "base/index.css";
+@import "components/index.css" layer(components);
+@import "utilities/index.css" layer(components);
+@import "tailwindcss/components.css";
+@import "tailwindcss/utilities.css";
+@import "tailwindcss/variants.css";

package/src/{base → theme}/config/font.css

@@ -2,23 +2,39 @@
   --default-font-family: ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --font-family-primary: var(--default-font-family);
   --font-family-secondary: var(--default-font-family);
+  --font-weight-black: 900;
+  --font-weight-extrabold: 800;
   --font-weight-bold: 700;
   --font-weight-semibold: 600;
   --font-weight-medium: 500;
   --font-weight-normal: 400;
   --font-weight-light: 300;
-  --font-weight-thin: 200;
+  --font-weight-extralight: 200;
+  --font-weight-thin: 100;
   --font-size-xs: 0.75rem;
+  --font-size-xs--line-height: 1rem;
   --font-size-sm: 0.875rem;
+  --font-size-sm--line-height: 1.25rem;
   --font-size-base: 1rem;
+  --font-size-base--line-height: 1.5rem;
   --font-size-lg: 1.125rem;
+  --font-size-lg--line-height: 1.75rem;
   --font-size-xl: 1.25rem;
+  --font-size-xl--line-height: 1.75rem;
   --font-size-2xl: 1.5rem;
+  --font-size-2xl--line-height: 2rem;
   --font-size-3xl: 1.875rem;
+  --font-size-3xl--line-height: 2.25rem;
   --font-size-4xl: 2.25rem;
+  --font-size-4xl--line-height: 2.5rem;
   --font-size-5xl: 3rem;
+  --font-size-5xl--line-height: 1;
   --font-size-6xl: 3.75rem;
+  --font-size-6xl--line-height: 1;
   --font-size-7xl: 4.5rem;
+  --font-size-7xl--line-height: 1;
   --font-size-8xl: 6rem;
+  --font-size-8xl--line-height: 1;
   --font-size-9xl: 8rem;
+  --font-size-9xl--line-height: 1;
 }

package/src/theme/config/index.css

@@ -0,0 +1,6 @@
+@import "font.css";
+@import "mask.css";
+@import "radius.css";
+@import "spacing.css";
+@import "transition.css";
+@import "z.css";

package/src/theme/config/spacing.css

@@ -0,0 +1,37 @@
+:root, :host {
+  --spacing-px: 1px;
+  --spacing-0: 0px;
+  --spacing-0_5: 0.125rem;
+  --spacing-1: 0.25rem;
+  --spacing-1_5: 0.375rem;
+  --spacing-2: 0.5rem;
+  --spacing-2_5: 0.625rem;
+  --spacing-3: 0.75rem;
+  --spacing-3_5: 0.875rem;
+  --spacing-4: 1rem;
+  --spacing-5: 1.25rem;
+  --spacing-6: 1.5rem;
+  --spacing-7: 1.75rem;
+  --spacing-8: 2rem;
+  --spacing-9: 2.25rem;
+  --spacing-10: 2.5rem;
+  --spacing-11: 2.75rem;
+  --spacing-12: 3rem;
+  --spacing-14: 3.5rem;
+  --spacing-16: 4rem;
+  --spacing-20: 5rem;
+  --spacing-24: 6rem;
+  --spacing-28: 7rem;
+  --spacing-32: 8rem;
+  --spacing-36: 9rem;
+  --spacing-40: 10rem;
+  --spacing-44: 11rem;
+  --spacing-48: 12rem;
+  --spacing-52: 13rem;
+  --spacing-56: 14rem;
+  --spacing-60: 15rem;
+  --spacing-64: 16rem;
+  --spacing-72: 18rem;
+  --spacing-80: 20rem;
+  --spacing-96: 24rem;
+}

package/src/{base → theme}/config/transition.css

@@ -1,6 +1,6 @@
 :root, :host {
   --default-transition-duration: 150ms;
-  --default-transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, outline-color, outline-offset, visibility;
+  --default-transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, outline-color, outline-offset, visibility, display, overlay;
   --transition-timing-function-linear: linear;
   --transition-timing-function-in: cubic-bezier(0.4, 0, 1, 1);
   --transition-timing-function-out: cubic-bezier(0, 0, 0.2, 1);
@@ -12,8 +12,12 @@
   --transition-transform: transform var(--default-transition-duration) var(--transition-timing-function-in-out);
   --transition-border: border-color var(--default-transition-duration) var(--transition-timing-function-in-out);
   --transition-shadow: box-shadow var(--default-transition-duration) var(--transition-timing-function-in-out);
+  --transition-display: display var(--default-transition-duration) var(--transition-timing-function-in-out);
+  --transition-overlay: overlay var(--default-transition-duration) var(--transition-timing-function-in-out);
+  --view-transition-main-duration: var(--default-transition-duration);
 
   @media (prefers-reduced-motion) {
     --default-transition-duration: 0;
+    --view-transition-main-duration: 0;
   }
 }

package/src/theme/index.css

@@ -0,0 +1,4 @@
+@import "config/index.css";
+@import "default.css";
+@import "default-p3.css";
+@import "dark.css";

package/src/utilities/animation.css

@@ -0,0 +1,4 @@
+.animation {
+  animation-duration: var(--default-animation-duration, var(--default-transition-duration, 150ms));
+  animation-fill-mode: both;
+}

package/src/utilities/container/default.css

@@ -1,9 +1,9 @@
 .grid-cols-container {
   grid-template-columns:
     [container-full-start] minmax(var(--container-padding), 1fr)
-    [container-lg-start] minmax(0, calc((var(--container-lg-width) - var(--container-width)) / 2))
+    [container-breakout-start] minmax(0, calc((var(--container-breakout-width) - var(--container-width)) / 2))
     [container-start] min(100% - (var(--container-padding) * 2), var(--container-width)) [container-end]
-    minmax(0, calc((var(--container-lg-width) - var(--container-width)) / 2)) [container-lg-end]
+    minmax(0, calc((var(--container-breakout-width) - var(--container-width)) / 2)) [container-breakout-end]
     minmax(var(--container-padding), 1fr) [container-full-end];
 
   & > :where(*) {

package/src/utilities/container/props/default.css

@@ -1,8 +1,8 @@
 :root, :host {
   --container: min(100% - (var(--container-padding) * 2), var(--container-width));
-  --container-lg: min(100% - (var(--container-padding) * 2), var(--container-lg-width));
+  --container-breakout: min(100% - (var(--container-padding) * 2), var(--container-breakout-width));
   --container-width: 80rem;
-  --container-lg-width: 90rem;
+  --container-breakout-width: calc(var(--container-width) + 10rem);
   --container-padding: 5vw;
   --container-padding-calc: max(calc(50vw - (var(--container-width) / 2)), var(--container-padding));
 }

package/src/utilities/divider.css

@@ -6,7 +6,7 @@
   align-self: stretch;
 
   &:where(:not(:empty)) {
-    gap: var(--divider-gap, var(--spacing-md));
+    gap: var(--divider-gap, var(--spacing-3));
   }
 
   &::before, &::after {

package/src/utilities/dot.css

@@ -0,0 +1,10 @@
+.dot {
+  display: inline-flex;
+  inline-size: 0.5rem;
+  block-size: 0.5rem;
+  border-radius: var(--radius-full);
+  background-color: currentColor;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+}

package/src/utilities/index.css

@@ -1,7 +1,8 @@
-@import "common.css";
 @import "container/index.css";
 @import "divider.css";
+@import "dot.css";
 @import "ripple/index.css";
 @import "skeleton/index.css";
+@import "spinner/index.css";
 @import "swap/index.css";
 @import "underline.css";

package/src/utilities/ripple/default.css

@@ -0,0 +1,15 @@
+.ripple {
+  inline-size: var(--ripple-size, 2rem);
+  block-size: var(--ripple-size, 2rem);
+  background-color:
+      color-mix(
+          in var(--ripple-background-color-space, srgb),
+          var(--ripple-background-color, currentColor) var(--ripple-background-color-opacity, 40%),
+          var(--ripple-background-color-mix, transparent)
+      );
+  animation-duration: var(--ripple-animation-duration, 1s);
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  pointer-events: none;
+}

package/src/utilities/ripple/index.css

@@ -1,15 +1,2 @@
-.ripple {
-  inline-size: var(--ripple-size, 2rem);
-  block-size: var(--ripple-size, 2rem);
-  background-color:
-    color-mix(
-      in var(--ripple-background-color-space, srgb),
-      var(--ripple-background-color, currentColor) var(--ripple-background-color-opacity, 40%),
-      var(--ripple-background-color-mix, transparent)
-    );
-  animation-duration: var(--ripple-animation-duration, 1s);
-  position: absolute;
-  border-radius: 50%;
-  transform: scale(0);
-  pointer-events: none;
-}
+@import "keyframes/default.css";
+@import "default.css";

package/src/utilities/ripple/index.d.ts

@@ -1 +1,7 @@
-export function showRipple(event: MouseEvent, element?: HTMLElement): void
+export interface ShowRippleEvent {
+    currentTarget?: EventTarget | HTMLElement;
+    offsetX: number;
+    offsetY: number;
+}
+
+export function showRipple(event: MouseEvent | ShowRippleEvent, rippleElement?: HTMLElement): void

package/src/utilities/ripple/index.js

@@ -1,25 +1,25 @@
 /**
  * Shows a ripple effect.
- * @param {MouseEvent} event - The dialog element to dismiss.
- * @param {HTMLElement} element - The options for closing the dialog.
+ * @param {MouseEvent | import("./").ShowRippleEvent} options
+ * @param {HTMLElement} rippleElement
  * @returns void
  */
-export const showRipple = ({ currentTarget, offsetX, offsetY }, element = currentTarget.querySelector('.ripple')) => {
-    if (!element) {
-        currentTarget.insertAdjacentHTML('beforeend', "<div class='ripple'></div>")
-        element = currentTarget.querySelector('.ripple')
+export const showRipple = ({ currentTarget, offsetX, offsetY }, rippleElement = currentTarget.querySelector('.ripple')) => {
+    if (!rippleElement) {
+        currentTarget.insertAdjacentHTML('beforeend', '<div class="ripple"></div>')
+        rippleElement = currentTarget.querySelector('.ripple')
     }
 
-    element.classList.remove('animation-ripple')
+    rippleElement.classList.remove('animation-ripple')
 
-    if (element.clientWidth === 0 && element.clientHeight === 0) {
+    if (rippleElement.clientWidth === 0 && rippleElement.clientHeight === 0) {
         const d = Math.max(currentTarget.offsetWidth, currentTarget.offsetHeight)
 
-        element.style.width = d + 'px'
-        element.style.height = d + 'px'
+        rippleElement.style.width = d + 'px'
+        rippleElement.style.height = d + 'px'
     }
 
-    element.style.top = offsetY - (element.clientHeight / 2) + 'px'
-    element.style.left = offsetX - (element.clientWidth / 2) + 'px'
-    element.classList.add('animation-ripple')
+    rippleElement.style.top = offsetY - (rippleElement.clientHeight / 2) + 'px'
+    rippleElement.style.left = offsetX - (rippleElement.clientWidth / 2) + 'px'
+    rippleElement.classList.add('animation-ripple')
 }

package/src/utilities/ripple/keyframes/default.css

@@ -0,0 +1,6 @@
+@keyframes ripple {
+  to {
+    transform: scale(2.5);
+    opacity: 0%;
+  }
+}

package/src/utilities/spinner/circle.css

@@ -0,0 +1,5 @@
+.spinner-circle {
+  --spinner-border-inline-start-color-opacity: 25%;
+  --spinner-border-inline-end-color-opacity: 25%;
+  --spinner-border-block-end-color-opacity: 25%;
+}

package/src/utilities/spinner/default.css

@@ -0,0 +1,16 @@
+.spinner {
+  inline-size: var(--spinner-inline-size, 1rem);
+  block-size: var(--spinner-block-size, 1rem);
+  border-radius: 50%;
+
+  border-width: var(--spinner-border-width, 2px);
+  border-color:
+      color-mix(in var(--default-color-space), currentColor var(--spinner-border-block-start-color-opacity, 100%), transparent)
+      color-mix(in var(--default-color-space), currentColor var(--spinner-border-inline-end-color-opacity, 100%), transparent)
+      color-mix(in var(--default-color-space), currentColor var(--spinner-border-block-end-color-opacity, 100%), transparent)
+      color-mix(in var(--default-color-space), currentColor var(--spinner-border-inline-start-color-opacity, 0%), transparent);
+  border-style: solid;
+  animation: linear var(--spinner-animation-duration, 1s) infinite spin;
+}
+
+

package/src/utilities/spinner/index.css

@@ -0,0 +1,4 @@
+@import "keyframes/ring.css";
+@import "default.css";
+@import "circle.css";
+@import "ring.css";

package/src/utilities/spinner/keyframes/ring.css

@@ -0,0 +1,13 @@
+@keyframes spinner-ring-stretch {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 200;
+    stroke-dashoffset: -35px;
+  }
+  100% {
+    stroke-dashoffset: -124px;
+  }
+}

package/src/utilities/spinner/ring.css

@@ -0,0 +1,15 @@
+.spinner-ring {
+  --spinner-animation-duration: 2s;
+
+  transform-origin: center;
+  border: 0;
+
+  circle {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+    stroke-linecap: round;
+    animation: spinner-ring-stretch calc(var(--spinner-animation-duration) * 0.75) ease-in-out infinite;
+    fill: none;
+    stroke: currentColor;
+  }
+}

package/src/utilities/view-transition.css

@@ -0,0 +1,3 @@
+.view-transition-main {
+  view-transition-name: main;
+}

package/tailwind.config.js

@@ -1,12 +1,11 @@
 import winduum from './plugin/index.js'
 import containerQueries from '@tailwindcss/container-queries'
-import animate from 'tailwindcss-animate'
 
 export default {
     darkMode: 'class',
     content: [
         './src/**/*.{js,html}',
-        './playground/**/*.{js,html,vue}'
+        process.argv.includes('vite.config.prod.js') ? './playground/tailwind.html' : './playground/**/*.{js,html,vue}'
     ],
     plugins: [
         winduum({
@@ -14,7 +13,9 @@ export default {
                 rgb: false
             }
         }),
-        containerQueries,
-        animate
-    ]
+        containerQueries
+    ],
+    future: {
+        hoverOnlyWhenSupported: true
+    }
 }

package/tailwindcss/base/defaults.css

@@ -0,0 +1,9 @@
+::after, ::before {
+  --tw-content: "";
+}
+
+:where(*),
+:where(*)::before,
+:where(*)::after {
+  border: 0 solid currentColor;
+}

package/tailwindcss/index.css

@@ -0,0 +1,4 @@
+@import "tailwindcss/base.css";
+@import "tailwindcss/components.css";
+@import "tailwindcss/utilities.css";
+@import "tailwindcss/variants.css";

package/tailwindcss/theme/config/breakpoint.css

@@ -0,0 +1,12 @@
+@theme {
+  --breakpoint-xs: 22.5rem;
+  --breakpoint-sm: 26rem;
+  --breakpoint-md: 46.5rem;
+  --breakpoint-lg: 60rem;
+  --breakpoint-xl: 76rem;
+  --breakpoint-2xl: 82rem;
+  --breakpoint-3xl: 88rem;
+  --breakpoint-4xl: 100rem;
+  --breakpoint-xxl: 126rem;
+  --breakpoint-2xxl: 158rem;
+}

package/tailwindcss/theme/config/font.css

@@ -0,0 +1,13 @@
+@theme {
+  --font-family-primary: var(--default-font-family);
+  --font-family-secondary: var(--default-font-family);
+  --font-weight-black: 900;
+  --font-weight-extrabold: 800;
+  --font-weight-bold: 700;
+  --font-weight-semibold: 600;
+  --font-weight-medium: 500;
+  --font-weight-normal: 400;
+  --font-weight-light: 300;
+  --font-weight-extralight: 200;
+  --font-weight-thin: 100;
+}

package/tailwindcss/theme/config/index.css

@@ -0,0 +1,6 @@
+@import "breakpoint.css";
+@import "font.css";
+@import "mask.css";
+@import "radius.css";
+@import "transition.css";
+@import "z.css";

package/tailwindcss/theme/config/mask.css

@@ -0,0 +1,8 @@
+@theme {
+  --mask-check: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>') no-repeat 50% 50% / contain;
+  --mask-radio: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 160c-53.019 0-96 42.981-96 96v0c0 53.019 42.981 96 96 96v0c53.019 0 96-42.981 96-96v0c0-53.019-42.981-96-96-96z"></path></svg>') no-repeat 50% 50% / contain;
+  --mask-angle-down: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor"><path d="M10.998 15.467c.491.71 1.513.71 2.004 0l3.767-5.453c.581-.843 0-2.013-1.002-2.014H8.234C7.232 8 6.65 9.17 7.231 10.014z" /></svg>') no-repeat 50% 50% / contain;
+  --mask-chevron-right: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /></svg>') no-repeat 50% 50% / contain;
+  --mask-indeterminate: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" stroke-width="2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" /></svg>') no-repeat 50% 50% / contain;
+  --mask-star: url('data:image/svg+xml, <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" /></svg>') no-repeat 50% 50% / contain;
+}

package/tailwindcss/theme/config/radius.css

@@ -0,0 +1,9 @@
+@theme {
+  --radius: var(--radius-xl);
+  --radius-xs: 0.125rem;
+  --radius-sm: 0.25rem;
+  --radius-4xl: 2rem;
+  --radius-5xl: 2.5rem;
+  --radius-6xl: 3rem;
+  --radius-full: calc(infinity * 1px);
+}

package/tailwindcss/theme/config/transition.css

@@ -0,0 +1,20 @@
+@theme {
+  --default-transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, outline-color, outline-offset, visibility, display, overlay;
+  --transition-all: all var(--default-transition-duration) var(--transition-timing-function-in-out);
+  --transition-color: color var(--default-transition-duration) var(--transition-timing-function-in-out);
+  --transition-background: background var(--default-transition-duration) var(--transition-timing-function-in-out);
+  --transition-opacity: opacity var(--default-transition-duration) var(--transition-timing-function-in-out);
+  --transition-transform: transform var(--default-transition-duration) var(--transition-timing-function-in-out);
+  --transition-border: border-color var(--default-transition-duration) var(--transition-timing-function-in-out);
+  --transition-shadow: box-shadow var(--default-transition-duration) var(--transition-timing-function-in-out);
+  --transition-display: display var(--default-transition-duration) var(--transition-timing-function-in-out);
+  --transition-overlay: overlay var(--default-transition-duration) var(--transition-timing-function-in-out);
+  --view-transition-main-duration: var(--default-transition-duration);
+}
+
+@media (prefers-reduced-motion) {
+  :root, :host {
+    --default-transition-duration: 0;
+    --view-transition-main-duration: 0;
+  }
+}