winduum 1.1.1 → 1.2.0-next.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "winduum",
-  "version": "1.1.1",
+  "version": "1.2.0-next.1",
   "type": "module",
   "types": "types/index.d.ts",
   "main": "plugin/index.cjs",
@@ -19,27 +19,28 @@
     "publish-next": "npm publish --tag next"
   },
   "devDependencies": {
+    "@floating-ui/dom": "^1.6.5",
     "@stylistic/stylelint-config": "^1.0.1",
     "@tailwindcss/container-queries": "^0.1.1",
     "@vitejs/plugin-vue": "^5.0.4",
     "autoprefixer": "^10.4.19",
-    "css-has-pseudo": "^6.0.3",
+    "css-has-pseudo": "^6.0.5",
+    "dts-buddy": "^0.4.7",
     "eslint": "^8.57.0",
     "eslint-config-standard": "^17.1.0",
     "fast-glob": "^3.3.2",
     "postcss": "^8.4.38",
-    "postcss-custom-media": "^10.0.4",
+    "postcss-custom-media": "^10.0.6",
     "postcss-import": "^16.1.0",
-    "postcss-nesting": "^12.1.2",
-    "stylelint": "^16.5.0",
+    "postcss-nesting": "^12.1.5",
+    "slide-element": "^2.3.1",
+    "stylelint": "^16.6.1",
     "stylelint-config-standard": "^36.0.0",
     "tailwindcss": "^3.4.3",
     "tailwindcss-animate": "^1.0.7",
-    "vite": "^5.2.10",
-    "vue": "^3.4.26",
-    "slide-element": "^2.3.1",
-    "dts-buddy": "^0.4.7",
-    "typescript": "^5.4.5"
+    "typescript": "^5.4.5",
+    "vite": "^5.2.12",
+    "vue": "^3.4.27"
   },
   "files": [
     "index.js",

package/plugin/index.js

@@ -15,7 +15,7 @@ export const defaultConfig = {
         'warning', 'error', 'info', 'success', 'light', 'dark',
         'main', 'main-primary', 'main-secondary', 'main-tertiary',
         'body', 'body-primary', 'body-secondary', 'body-tertiary',
-        'primary-foreground', 'accent-foreground', 'current-foreground',
+        'primary-foreground', 'accent-foreground',
         'warning-foreground', 'error-foreground', 'info-foreground', 'success-foreground', 'light-foreground', 'dark-foreground',
         'main-foreground', 'main-primary-foreground', 'main-secondary-foreground', 'main-tertiary-foreground',
         'body-foreground', 'body-primary-foreground', 'body-secondary-foreground', 'body-tertiary-foreground'

package/plugin/utilities/common.js

@@ -2,20 +2,24 @@
  * @param {[]} colors
  * @param {boolean} colorMix
  * @param {boolean} rgb
- * @returns {[]}
+ * @returns {Object}
  */
 export const tailwindColors = (colors = [], colorMix = true, rgb = false) => {
+    const result = {
+        current: 'color-mix(in var(--space), currentcolor calc(<alpha-value> * 100%), transparent)'
+    }
+
     colors.forEach(name => {
         if (rgb) {
-            colors[name + '-rgb'] = `rgb(var(--color-${name}-rgb) / <alpha-value>)`
+            result[name + '-rgb'] = `rgb(var(--color-${name}-rgb) / <alpha-value>)`
         }
 
-        colors[name] = colorMix
+        result[name] = colorMix
             ? `color-mix(in var(--space), var(--color-${name}) calc(<alpha-value> * 100%), transparent)`
             : `rgb(var(--color-${name}) / <alpha-value>)`
     })
 
-    return colors
+    return result
 }
 
 /**

package/plugin/utilities/dot.js

@@ -6,6 +6,8 @@ export default {
         height: '0.625rem',
         borderRadius: 'var(--rounded-full)',
         backgroundColor: 'color-mix(in srgb, var(--color-accent) calc(var(--tw-bg-opacity) * 100%), transparent)',
-        flexShrink: '0'
+        flexShrink: '0',
+        justifyContent: 'center',
+        alignItems: 'center'
     }
 }

package/src/base/defaults.css

@@ -13,6 +13,10 @@
   background-color: var(--color-primary);
 }
 
+:where([tabindex]) {
+  outline: 0;
+}
+
 :where(button:enabled),
 :where([type="checkbox"]:enabled),
 :where([type="radio"]:enabled),

package/src/components/popover/content.css

@@ -1,9 +1,7 @@
 .c-popover-content {
-  opacity: var(--tw-opacity);
-  visibility: var(--tw-visibility);
   transform:
-    translate(var(--tw-translate-x), var(--tw-translate-y))
-    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+      translate(var(--tw-translate-x), var(--tw-translate-y))
+      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   transition-property: var(--transition);
   transition-timing-function: var(--ease-in-out);
   transition-duration: var(--duration);
@@ -14,7 +12,18 @@
   z-index: var(--z-10);
   width: max-content;
   position: absolute;
-  transform-origin: top;
+
+  &:where(.bottom), & {
+    transform-origin: top;
+  }
+
+  &:where(.bottom-start) {
+    transform-origin: top left;
+  }
+
+  &:where(.bottom-end) {
+    transform-origin: top right;
+  }
 
   &:where(.right) {
     inset-block-start: 0;
@@ -22,29 +31,47 @@
     transform-origin: left;
   }
 
+  &:where(.right-start) {
+    transform-origin: left top;
+  }
+
+  &:where(.right-end) {
+    transform-origin: left bottom;
+  }
+
   &:where(.left) {
     inset-block-start: 0;
     inset-inline-end: 100%;
     transform-origin: right;
   }
 
+  &:where(.left-start) {
+    transform-origin: right top;
+  }
+
+  &:where(.left-end) {
+    transform-origin: right bottom;
+  }
+
   &:where(.top) {
     inset-block-end: 100%;
     transform-origin: bottom;
   }
 
-  &:where(.block-end) {
-    inset-block: auto 0;
+  &:where(.top-start) {
+    transform-origin: bottom left;
+  }
+
+  &:where(.top-end) {
+    transform-origin: bottom right;
   }
 
   &:where(.end) {
     inset-inline-end: 0;
   }
 
-  &:where(.block-center) {
-    --tw-translate-y: -50%;
-
-    inset-block-start: 50%;
+  &:where(.block-end) {
+    inset-block: auto 0;
   }
 
   &:where(.center) {
@@ -53,10 +80,28 @@
     inset-inline-start: 50%;
   }
 
-  :not(:focus, :focus-within, .hover:hover) > & {
+  &:where(.block-center) {
+    --tw-translate-y: -50%;
+
+    inset-block-start: 50%;
+  }
+
+  &[popover]:not(.in) {
     --tw-scale-x: var(--c-popover-content-scale-x);
     --tw-scale-y: var(--c-popover-content-scale-y);
-    --tw-opacity: 0;
-    --tw-visibility: hidden;
+
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  &:not([popover]) {
+    .focus:not(:focus, :focus-within) > &, .hover:not(:hover) > & {
+      --tw-scale-x: var(--c-popover-content-scale-x);
+      --tw-scale-y: var(--c-popover-content-scale-y);
+
+      opacity: 0;
+      visibility: hidden;
+    }
   }
 }
+

package/src/components/popover/index.js

@@ -0,0 +1,60 @@
+import { animationsFinished } from '../../common.js'
+
+export const computePopover = async (element, popover, options) => {
+    const { computePosition, flip, shift, offset } = await import('@floating-ui/dom')
+
+    popover.classList.remove(popover._placement)
+
+    popover.style.minWidth = `${element.offsetWidth / 16}rem`
+
+    await computePosition(element, popover, {
+        placement: options?.placement,
+        middleware: options?.middleware ?? [offset(12 ?? options?.offset), flip(), shift({ padding: 8, ...options?.shift })]
+    }).then(({ x, y, placement }) => {
+        Object.assign(popover.style, {
+            inset: `${y}px auto auto ${x}px`
+        })
+
+        popover._placement = placement
+        popover.classList.add(popover._placement, options?.visibleClass ?? 'in')
+    })
+}
+
+export const closePopover = async (element) => {
+    const popoverElement = window[element.getAttribute('popovertarget')]
+
+    popoverElement.classList.remove('in')
+    await animationsFinished(popoverElement)
+    popoverElement._cleanup()
+    popoverElement.hidePopover && popoverElement.hidePopover()
+
+    element.ariaExpanded = false
+}
+
+export const showPopover = async (element, options) => {
+    const { autoUpdate } = await import('@floating-ui/dom')
+
+    const popoverElement = window[element.getAttribute('popovertarget')]
+
+    element.ariaExpanded = true
+
+    if (!element.ariaHasPopup) (element.ariaHasPopup = 'dialog')
+    if (!popoverElement.role) (popoverElement.role = element.ariaHasPopup)
+    if (!popoverElement.popover) (popoverElement.popover = 'manual')
+
+    popoverElement.showPopover && popoverElement.showPopover()
+
+    popoverElement._cleanup = autoUpdate(
+        element,
+        popoverElement,
+        async () => await computePopover(element, popoverElement, options?.computePosition)
+    )
+}
+
+export const togglePopover = async (element, options) => {
+    if (element.ariaExpanded !== 'true') {
+        await showPopover(element, options)
+    } else {
+        await closePopover(element)
+    }
+}

package/src/ui/btn/interactive.css

@@ -19,7 +19,7 @@
     --ui-btn-hover-bg-mix: var(--color-dark-foreground);
   }
 
-  &:is([href], button, [role="button"], input) {
+  &:is(:any-link, button, [role="button"], input) {
     cursor: var(--cursor, pointer);
 
     &:disabled {
@@ -42,7 +42,7 @@
         --tw-outline-opacity: var(--ui-btn-focus-outline-opacity);
       }
 
-      &:is(:active, :checked, .active) {
+      &:active, &:checked, &.active {
         --ui-btn-bg: var(--ui-btn-active-bg, var(--color-accent));
         --ui-btn-border-color: var(--ui-btn-active-border-color, var(--color-accent));
         --tw-bg-mix: var(--ui-btn-active-bg-mix);

package/src/ui/check/default.css

@@ -8,7 +8,7 @@
   letter-spacing: var(--ui-check-letter-spacing);
   gap: var(--ui-check-gap);
   display: inline-flex;
-  text-wrap: balance;
+  text-wrap: pretty;
 
   &:has([type="radio"]) {
     --ui-check-icon: var(--mask-radio);

package/src/ui/control/invalid.css

@@ -1,9 +1,9 @@
 .ui-control {
   &.invalid, &:has(:user-invalid), .validated &:has(:invalid) {
-    --ui-control-border-color: var(--color-error);
-    --ui-control-outline-color: var(--color-error);
-    --ui-control-color: var(--color-error);
-    --ui-control-bg: var(--color-error);
+    --ui-control-border-color: var(--ui-control-invalid-border-color, var(--color-error));
+    --ui-control-outline-color: var(--ui-control-invalid-outline-color, var(--color-error));
+    --ui-control-color: var(--ui-control-invalid-color, var(--color-error));
+    --ui-control-bg: var(--ui-control-invalid-bg, var(--color-error));
     --tw-bg-opacity: var(--ui-control-invalid-bg-opacity, 0.1);
     --tw-border-opacity: var(--ui-control-invalid-border-opacity, 1);
   }

package/src/ui/info/default.css

@@ -4,5 +4,5 @@
   font-size: var(--ui-info-font-size);
   line-height: var(--ui-info-line-height);
   letter-spacing: var(--ui-info-letter-spacing);
-  text-wrap: balance;
+  text-wrap: pretty;
 }

package/src/ui/label/default.css

@@ -4,5 +4,5 @@
   font-size: var(--ui-label-font-size);
   line-height: var(--ui-label-line-height);
   letter-spacing: var(--ui-label-letter-spacing);
-  text-wrap: balance;
+  text-wrap: pretty;
 }

package/src/ui/link/default.css

@@ -4,5 +4,5 @@
   font-size: var(--ui-link-font-size);
   line-height: var(--ui-link-line-height);
   letter-spacing: var(--ui-link-letter-spacing);
-  text-wrap: balance;
+  text-wrap: pretty;
 }

package/src/ui/link/interactive.css

@@ -1,7 +1,7 @@
 .ui-link {
   --tw-text-opacity: var(--ui-link-hover-color-opacity);
 
-  &:where([href], button:enabled, [role="button"]) {
+  &:where(:any-link, button:enabled, [role="button"]) {
     transition: all var(--duration) var(--ease-in-out);
 
     &:hover {

package/src/ui/notice/default.css

@@ -17,7 +17,7 @@
       var(--tw-outline-mix)
     );
   outline-offset: var(--ui-notice-outline-offset);
-  text-wrap: balance;
+  text-wrap: pretty;
 
   :where(hr) {
     --tw-border-opacity: 0.2;

package/src/ui/switch/default.css

@@ -5,7 +5,7 @@
   letter-spacing: var(--ui-switch-letter-spacing);
   gap: var(--ui-switch-gap);
   display: inline-flex;
-  text-wrap: balance;
+  text-wrap: pretty;
 
   :where(a) {
     color: var(--color-accent);

package/src/ui/title/default.css

@@ -4,5 +4,5 @@
   font-size: var(--ui-title-font-size);
   line-height: var(--ui-title-line-height);
   letter-spacing: var(--ui-title-letter-spacing);
-  text-wrap: balance;
+  text-wrap: pretty;
 }

package/src/utilities/underline.css

@@ -3,7 +3,7 @@
 }
 
 .underline-transparent {
-  &:where([href], button:enabled, [role="button"]) {
+  &:where(:any-link, button:enabled, [role="button"]) {
     transition: all var(--duration) var(--ease-in-out);
 
     &:not(:hover, :focus-visible) {