opui-css 5.4.2 → 6.0.0-rc.1

package/components/Tooltip/Tooltip.vue

@@ -1,22 +1,21 @@
 <script setup lang="ts">
 import Anchor from "../Anchor/Anchor.vue"
-import type { Props, Slots } from "./types.d.vue"
+import { warnMissingId } from "../dev"
+import type { Props, Slots } from "./types.vue-props"
 
-const { alignment, arrow, id, label } = defineProps<Props>()
+const { arrow, id, positionArea } = defineProps<Props>()
 defineSlots<Slots>()
+
+warnMissingId("Tooltip", id, "interestfor")
 </script>
 
 <template>
   <Anchor
-    :alignment="alignment"
-    :class="['ui-tooltip', { 'ui-with-arrow': arrow }, $props.class]"
+    :class="['ui-tooltip', { 'ui-arrow': arrow }, $props.class]"
     :id="id"
+    :positionArea="positionArea"
     trigger="hover"
   >
     <slot></slot>
-    <template #anchored>
-      {{ label }}
-      <slot name="content"></slot>
-    </template>
   </Anchor>
 </template>

package/components/Tooltip/types.react.ts

@@ -0,0 +1,4 @@
+import type * as Base from "./types"
+import type { ComponentProps } from "react"
+
+export type Props = Base.Props & ComponentProps<"span">

package/components/Tooltip/types.svelte.ts

@@ -1,7 +1,4 @@
 import type * as Base from "./types"
 import type { SvelteHTMLElements } from "svelte/elements"
-import type { Snippet } from "svelte"
 
-type Snippets = Base.Slots<Snippet>
-
-export type Props = Base.Props & Snippets & SvelteHTMLElements["span"]
+export type Props = Base.Props & SvelteHTMLElements["span"]

package/components/Tooltip/types.ts

@@ -1,11 +1,5 @@
 export type Props = {
-  [key: string]: any
-  alignment?: string
   arrow?: boolean
-  id?: string
-  label?: string
-}
-
-export type Slots<S> = {
-  content?: S
+  id: string
+  positionArea?: string
 }

package/components/Tooltip/types.vue-props.ts

@@ -0,0 +1,6 @@
+import type { Class, DefaultSlots } from "../vue"
+import type { Props as BaseProps } from "./types"
+
+export type Props = BaseProps & Class
+
+export type Slots = DefaultSlots

package/components/content.svelte

@@ -0,0 +1,9 @@
+<script module lang="ts">
+  import type { Snippet } from "svelte"
+
+  export { content }
+</script>
+
+{#snippet content(
+  part: string | Snippet,
+)}{#if typeof part === "string"}{part}{:else}{@render part()}{/if}{/snippet}

package/components/context.astro.ts

@@ -0,0 +1,15 @@
+import { AsyncLocalStorage } from "node:async_hooks"
+
+const storage = new AsyncLocalStorage<Map<symbol, unknown>>()
+
+export const createContext = <T>() => {
+  const key = Symbol()
+  return {
+    get: () => storage.getStore()?.get(key) as T | undefined,
+    provide: (value: T, render: () => Promise<string>) => {
+      const store = new Map(storage.getStore())
+      store.set(key, value)
+      return storage.run(store, render)
+    },
+  }
+}

package/components/cx.ts

@@ -0,0 +1,12 @@
+type ClassValue =
+  ClassValue[] | Record<string, unknown> | string | false | null | undefined
+
+const flatten = (value: ClassValue): string[] => {
+  if (!value) return []
+  if (typeof value === "string") return [value]
+  if (Array.isArray(value)) return value.flatMap(flatten)
+  return Object.keys(value).filter((key) => value[key])
+}
+
+export const cx = (values: ClassValue[]) =>
+  flatten(values).join(" ") || undefined

package/components/dev.ts

@@ -0,0 +1,63 @@
+declare const process: { env: { NODE_ENV?: string } }
+
+const DEV =
+  (import.meta as { env?: { DEV?: boolean } }).env?.DEV ??
+  (typeof process !== "undefined" && process.env.NODE_ENV !== "production")
+
+export const hasName = (
+  props: {
+    "aria-label"?: unknown
+    "aria-labelledby"?: unknown
+    label?: unknown
+  },
+  slot: unknown,
+) =>
+  Boolean(
+    props.label || slot || props["aria-label"] || props["aria-labelledby"],
+  )
+
+export const warnGroupedChecked = (
+  component: string,
+  grouped: unknown,
+  checked: unknown,
+  group = "ToggleGroup",
+) => {
+  if (DEV && grouped !== undefined && checked !== undefined) {
+    console.warn(
+      `[OPUI ${component}] \`checked\` is ignored inside a ${group} that has a \`value\`. Set the group's \`value\` instead.`,
+    )
+  }
+}
+
+export const warnMissingId = (
+  component: string,
+  id: unknown,
+  attribute = "commandfor",
+) => {
+  if (DEV && !id) {
+    console.warn(
+      `[OPUI ${component}] Missing \`id\`. Pass one and point the trigger at it with \`${attribute}\`.`,
+    )
+  }
+}
+
+export const warnReplacedId = (
+  component: string,
+  root: string,
+  id: unknown,
+  generatedId: unknown,
+) => {
+  if (DEV && id && generatedId) {
+    console.warn(
+      `[OPUI ${component}] \`id\` is replaced by the ${root.toLowerCase()}'s generated id; pass \`aria-labelledby\` on the ${root} to keep it.`,
+    )
+  }
+}
+
+export const warnUnnamed = (component: string, named: unknown) => {
+  if (DEV && !named) {
+    console.warn(
+      `[OPUI ${component}] Missing accessible name. Provide a default slot, and set \`hideLabel\` to hide it visually.`,
+    )
+  }
+}

package/components/group.ts

@@ -0,0 +1,2 @@
+export const toggleInGroup = <T>(group: T[], value: T, on: boolean) =>
+  on ? [...group, value] : group.filter((item) => item !== value)

package/components/id.ts

@@ -0,0 +1,9 @@
+export const createId = (locals: { $id?: (prefix: string) => string }) =>
+  locals.$id ??
+  ((prefix: string) => `${prefix}-${crypto.randomUUID().slice(0, 8)}`)
+
+export const autoLabelledBy = (attrs: Record<string, unknown>, id: string) =>
+  attrs["aria-label"] || attrs["aria-labelledby"] ? undefined : id
+
+export const idRefs = (...ids: (string | false | null | undefined)[]) =>
+  ids.filter(Boolean).join(" ") || undefined

package/components/style.ts

@@ -0,0 +1,33 @@
+type Vars = Record<string, number | string | undefined>
+
+const definedVars = (vars: Vars) =>
+  Object.entries(vars).filter(
+    ([, value]) => value !== undefined && value !== "",
+  )
+
+export const styleVars = (vars: Vars) =>
+  definedVars(vars)
+    .map(([name, value]) => `${name}: ${value};`)
+    .join(" ")
+
+export function mergeStyle(
+  vars: Vars,
+  style?: string | null,
+): string | undefined
+export function mergeStyle<S extends object>(
+  vars: Vars,
+  style: S,
+): S | undefined
+export function mergeStyle(
+  vars: Vars,
+  style?: object | string | null,
+): Record<string, unknown> | string | undefined
+export function mergeStyle(vars: Vars, style?: object | string | null) {
+  if (typeof style === "object" && style !== null) {
+    const entries = definedVars(vars)
+    return entries.length || Object.keys(style).length
+      ? { ...Object.fromEntries(entries), ...style }
+      : undefined
+  }
+  return [styleVars(vars), style].filter(Boolean).join(" ") || undefined
+}

package/components/tag.ts

@@ -0,0 +1,6 @@
+export const tagAttrs = (tag: string, disabled?: boolean, href?: string) => ({
+  "aria-disabled": tag === "a" && disabled ? ("true" as const) : undefined,
+  disabled: tag === "button" ? disabled : undefined,
+  href: tag === "a" && !disabled ? href : undefined,
+  type: tag === "button" ? ("button" as const) : undefined,
+})

package/components/vue.ts

@@ -0,0 +1,18 @@
+import { computed, type HTMLAttributes, type Slot, useAttrs } from "vue"
+
+export type Class = {
+  class?: HTMLAttributes["class"]
+}
+
+export type DefaultSlots = {
+  default?: Slot
+}
+
+export const useInputAttrs = () => {
+  const attrs = useAttrs()
+  return computed(() =>
+    Object.fromEntries(
+      Object.entries(attrs).filter(([key]) => key !== "style"),
+    ),
+  )
+}

package/core/normalize.css

@@ -11,42 +11,18 @@
     scrollbar-width: thin;
   }
 
-  html {
-    --motion: 1;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    html {
-      --motion: 0;
-    }
-  }
-
-  .ui-motion-off {
-    --motion: 0 !important;
-  }
-
-  .ui-motion-on {
-    --motion: 1 !important;
-  }
-
-  .ui-motion-debug {
-    --motion: 10 !important;
-  }
-
   :where(html) {
-    --_page-bg-color: var(--surface-default);
-
-    accent-color: var(--primary);
-    background-color: var(--_page-bg-color);
-    block-size: 100%;
-    caret-color: var(--primary);
-    color: var(--text-muted, var(--text-color-2));
-    /* text-color-2 is for backwards compatibility */
-    font-family: var(--font-sans);
+    accent-color: var(--ui-primary);
+    background-color: var(--ui-surface);
+    caret-color: var(--ui-primary);
+    color: var(--ui-text);
+    font-family: var(--ui-font-body);
     interpolate-size: allow-keywords;
-    line-height: var(--font-lineheight-4);
+    line-height: var(--ui-line-height-relaxed);
+    min-block-size: 100%;
 
     /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
+    /* Firefox and Safari fallback */
     -moz-text-size-adjust: none;
     -webkit-text-size-adjust: none;
     text-size-adjust: none;
@@ -56,29 +32,35 @@
     }
   }
 
+  :where(.ui-light, .ui-dark):where(:not(html)) {
+    background-color: var(--ui-surface);
+    color: var(--ui-text);
+  }
+
+  :where(.ui-contrast-more):where(:not(html)) {
+    accent-color: var(--ui-primary);
+    caret-color: var(--ui-primary);
+    color: var(--ui-text);
+  }
+
   :where(body) {
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     container-type: inline-size;
-    font-size: 16px;
+    font-size: var(--ui-font-size-body);
     font-synthesis: style;
-    font-weight: 400;
+    font-weight: var(--ui-font-weight-normal);
     inline-size: 100%;
     margin: 0;
-    min-block-size: 100%;
+    min-block-size: 100svb;
     min-inline-size: 320px;
     position: relative;
-    text-rendering: optimizeLegibility;
   }
 
-  :where(:not(dialog, popover)) {
+  :where(:not(dialog, [popover])) {
     margin: 0;
   }
 
-  :where(dialog:not([open])) {
-    outline: none !important;
-  }
-
   :where(:not(fieldset, progress, meter)) {
     background-origin: border-box;
     background-repeat: no-repeat;
@@ -87,29 +69,25 @@
   }
 
   :where(fieldset) {
-    border: var(--field-border-width) solid var(--field-border-color);
-    border-radius: var(--field-border-radius);
-    padding: var(--size-3);
+    border: var(--ui-field-border-width) solid var(--ui-field-border-color);
+    border-radius: var(--ui-field-radius, var(--ui-radius));
     display: grid;
-    gap: var(--size-3);
+    gap: var(--ui-space-3);
+    padding: var(--ui-space-3);
   }
 
-  :where(input, button, textarea),
-  :where(input[type="file"])::-webkit-file-upload-button {
+  :where(h1, h2, h3, h4, h5, h6) {
+    font-family: var(--ui-font-heading, var(--ui-font-body));
+    font-weight: var(--ui-font-weight-bold);
+  }
+
+  :where(input, button, select, textarea),
+  :where(input[type="file"])::file-selector-button {
     color: inherit;
     font: inherit;
     letter-spacing: inherit;
   }
 
-  :where(input):-webkit-autofill,
-  :where(input):-webkit-autofill:hover,
-  :where(input):-webkit-autofill:focus,
-  :where(textarea):-webkit-autofill,
-  :where(textarea):-webkit-autofill:hover,
-  :where(textarea):-webkit-autofill:focus,
-  :where(select):-webkit-autofill,
-  :where(select):-webkit-autofill:hover,
-  :where(select):-webkit-autofill:focus,
   :where(input):autofill,
   :where(input):autofill:hover,
   :where(input):autofill:focus,
@@ -119,34 +97,31 @@
   :where(select):autofill,
   :where(select):autofill:hover,
   :where(select):autofill:focus {
-    -webkit-text-fill-color: var(--text-muted, var(--text-color-2));
-    -webkit-box-shadow: 0 0 0px 1e5px var(--well-1) inset;
+    -webkit-text-fill-color: var(--ui-text);
+    box-shadow: 0 0 0px 1e5px var(--ui-surface) inset;
     transition: background-color 5000s ease-in-out 0s;
   }
 
   ::placeholder {
-    color: var(--text-muted, var(--text-color-2));
-  }
-
-  ::-moz-placeholder {
-    opacity: 1;
+    color: var(--ui-field-placeholder-text-color, var(--ui-text-subtle));
   }
 
   :focus-visible {
-    /* Inverts the --_page-bg-color */
-    --_focus-visible-color: rgb(
-      from var(--_page-bg-color) calc(255 - r) calc(255 - g) calc(255 - b)
-    );
+    animation: ui-focus-ring calc(var(--ui-duration) * var(--ui-motion))
+      var(--ui-ease);
+    outline: var(--ui-focus-ring-width) var(--ui-focus-ring-style)
+      var(--ui-focus-ring-color);
+    outline-offset: var(--ui-focus-ring-offset);
+  }
 
-    border-radius: var(--border-radius, 0px);
-    outline: 2px solid var(--_focus-visible-color);
-    outline-offset: 2px;
-    transition: outline-offset calc(0.15s * var(--motion)) var(--ease-2);
+  :where(dialog):focus-visible {
+    outline: none;
   }
 
-  :where(:not(:active):focus-visible) {
-    transition-duration: calc(0.15s * var(--motion));
-    outline-offset: var(--outline-offset, 0px);
+  @keyframes ui-focus-ring {
+    from {
+      outline-offset: 0;
+    }
   }
 
   :where(
@@ -158,9 +133,11 @@
       [type="email"],
       [type="number"],
       [type="password"],
+      [type="search"],
       [type=""],
       [type="tel"],
-      [type="url"]
+      [type="url"],
+      :not([type])
     ),
     label[for],
     select,
@@ -195,20 +172,20 @@
   }
 
   :where(svg:not([width])) {
-    inline-size: var(--size-7);
+    inline-size: var(--ui-icon-size-large);
   }
 
   :where(dt:not(:first-of-type)) {
-    margin-block-start: var(--size-5);
+    margin-block-start: var(--ui-space-5);
   }
 
   :where(figure) {
     display: grid;
-    gap: var(--size-2);
+    gap: var(--ui-space-2);
     place-items: center;
   }
 
   :target {
-    scroll-margin-block-start: 2rem;
+    scroll-margin-block-start: var(--ui-space-7);
   }
 }