opui-css 5.2.0 → 5.4.0

package/components/Switch/Switch.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import SwitchInput from "./SwitchInput.vue"
+import type { Slots, SwitchProps } from "./types.d.vue"
+import { useId } from "vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<SwitchProps>()
+defineSlots<Slots>()
+const modelValue = defineModel<boolean | (string | number)[]>()
+
+const endTextId = useId()
+</script>
+
+<template>
+  <label
+    :class="[
+      'ui-switch',
+      {
+        'ui-small': props.small,
+        'ui-stack': props.stack,
+        'ui-spread': props.spread,
+      },
+      props.class,
+    ]"
+    :data-invalid="props.error || undefined"
+  >
+    <span
+      v-if="$slots['icon-unchecked']"
+      class="ui-icon-unchecked"
+      aria-hidden="true"
+    >
+      <slot name="icon-unchecked"></slot>
+    </span>
+
+    <span
+      v-if="$slots['icon-checked']"
+      class="ui-icon-checked"
+      aria-hidden="true"
+    >
+      <slot name="icon-checked"></slot>
+    </span>
+
+    <SwitchInput
+      v-bind="$attrs"
+      v-model="modelValue"
+      :aria-describedby="endTextId"
+    />
+
+    <span
+      v-if="$slots.default"
+      :class="[props.hideLabel ? 'ui-sr-only' : 'ui-label']"
+    >
+      <slot></slot>
+    </span>
+
+    <span v-if="$slots['end-text']" :id="endTextId" class="ui-end-text">
+      <slot name="end-text"></slot>
+    </span>
+  </label>
+</template>

package/components/Switch/SwitchInput.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { SwitchInputProps } from "./types"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+defineProps<SwitchInputProps>()
+const modelValue = defineModel<boolean | (string | number)[]>()
+</script>
+
+<template>
+  <input type="checkbox" role="switch" v-bind="$attrs" v-model="modelValue" />
+</template>

package/components/Table/Body.vue

@@ -0,0 +1,5 @@
+<template>
+  <tbody>
+    <slot></slot>
+  </tbody>
+</template>

package/components/Table/Cell.vue

@@ -0,0 +1,5 @@
+<template>
+  <td>
+    <slot></slot>
+  </td>
+</template>

package/components/Table/Column.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { ColumnProps } from "./types"
+
+const { width } = defineProps<ColumnProps>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const colStyle = width
+  ? width.includes(":")
+    ? width
+    : `width: ${width}`
+  : undefined
+</script>
+
+<template>
+  <col :style="colStyle" v-bind="$attrs" />
+</template>

package/components/Table/ColumnGroup.vue

@@ -0,0 +1,5 @@
+<template>
+  <colgroup>
+    <slot></slot>
+  </colgroup>
+</template>

package/components/Table/Head.vue

@@ -0,0 +1,5 @@
+<template>
+  <thead>
+    <slot></slot>
+  </thead>
+</template>

package/components/Table/HeaderCell.vue

@@ -0,0 +1,5 @@
+<template>
+  <th>
+    <slot></slot>
+  </th>
+</template>

package/components/Table/Row.vue

@@ -0,0 +1,5 @@
+<template>
+  <tr>
+    <slot></slot>
+  </tr>
+</template>

package/components/Table/Table.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { Props, Slots } from "./types.d.vue"
+
+const { variant } = defineProps<Props>()
+defineSlots<Slots>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+</script>
+
+<template>
+  <table
+    :class="['ui-table', variant && `ui-${variant}`, $props.class]"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </table>
+</template>

package/components/Tabs/Tabs.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { provide, useId } from "vue"
+import { TabsGroupNameKey, type Props, type Slots } from "./types.d.vue"
+
+const { name } = defineProps<Props>()
+defineSlots<Slots>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const groupName = name || useId()
+provide(TabsGroupNameKey, groupName)
+</script>
+
+<template>
+  <div :class="['ui-tabs', $props.class]" role="tablist" v-bind="$attrs">
+    <slot></slot>
+  </div>
+</template>

package/components/Tabs/TabsItem.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { inject, provide, useId } from "vue"
+import {
+  CurrentPanelIdKey,
+  CurrentTabIdKey,
+  TabsGroupNameKey,
+  type Slots,
+  type TabsItemProps,
+} from "./types.d.vue"
+
+const { name, open, panelId, tabId } = defineProps<TabsItemProps>()
+defineSlots<Slots>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const tabsGroupName = name || inject(TabsGroupNameKey, undefined) || useId()
+provide(TabsGroupNameKey, tabsGroupName)
+
+const computedTabId = tabId || useId()
+const computedPanelId = panelId || useId()
+
+provide(CurrentTabIdKey, computedTabId)
+provide(CurrentPanelIdKey, computedPanelId)
+</script>
+
+<template>
+  <input
+    :aria-controls="computedPanelId"
+    :checked="open"
+    :class="['ui-tab-input', $props.class]"
+    :id="computedTabId"
+    :name="tabsGroupName"
+    type="radio"
+    v-bind="$attrs"
+  />
+  <slot></slot>
+</template>

package/components/Tabs/TabsPanel.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { inject } from "vue"
+import {
+  CurrentPanelIdKey,
+  CurrentTabIdKey,
+  type Slots,
+  type TabsPanelProps,
+} from "./types.d.vue"
+
+const { panelId, tabId } = defineProps<TabsPanelProps>()
+defineSlots<Slots>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const currentPanelId = inject(CurrentPanelIdKey, undefined)
+const currentTabId = inject(CurrentTabIdKey, undefined)
+</script>
+
+<template>
+  <div
+    :id="panelId || currentPanelId"
+    :class="['ui-tab-panel', $props.class]"
+    role="tabpanel"
+    :aria-labelledby="tabId || currentTabId"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </div>
+</template>

package/components/Tabs/TabsTab.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { inject } from "vue"
+import { CurrentTabIdKey, type Slots, type TabsTabProps } from "./types.d.vue"
+
+const { tabId } = defineProps<TabsTabProps>()
+defineSlots<Slots>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const currentTabId = inject(CurrentTabIdKey, undefined)
+</script>
+
+<template>
+  <label
+    :for="tabId || currentTabId"
+    :class="['ui-tab-label', $props.class]"
+    role="tab"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </label>
+</template>

package/components/TextField/TextField.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { useId, computed } from "vue"
+import type { Props, Slots } from "./types.d.vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<Props>(), {
+  type: "text",
+})
+defineSlots<Slots>()
+const modelValue = defineModel<string | number>()
+
+const fieldId = props.id || useId()
+const startTextValue = computed(() => props.description || props.startText)
+</script>
+
+<template>
+  <label
+    :class="[
+      'ui-text-field',
+      {
+        'ui-auto-fit': props.autoFit,
+        'ui-filled': props.filled,
+        'ui-spread': props.spread,
+        'ui-small': props.small,
+      },
+      props.class,
+    ]"
+    :data-invalid="props.error || undefined"
+  >
+    <span v-if="props.label || $slots.label" class="ui-label">
+      <slot name="label">{{ props.label }}</slot>
+    </span>
+
+    <span v-if="startTextValue || $slots.description" class="ui-start-text">
+      <slot name="description">{{ startTextValue }}</slot>
+    </span>
+
+    <span class="ui-field">
+      <input
+        :id="fieldId"
+        :inputmode="props.type === 'numeric' ? 'numeric' : undefined"
+        :pattern="props.type === 'numeric' ? '[0-9]*' : undefined"
+        :type="props.type === 'numeric' ? 'text' : props.type"
+        v-bind="$attrs"
+        v-model="modelValue"
+      />
+      <span class="ui-prefix" v-if="$slots.prefix"
+        ><slot name="prefix"></slot
+      ></span>
+      <span class="ui-suffix" v-if="$slots.suffix"
+        ><slot name="suffix"></slot
+      ></span>
+      <span class="ui-header" v-if="$slots.header"
+        ><slot name="header"></slot
+      ></span>
+      <span class="ui-footer" v-if="$slots.footer"
+        ><slot name="footer"></slot
+      ></span>
+    </span>
+
+    <span
+      v-if="props.endText || $slots['end-text'] || $slots['supporting-text']"
+      class="ui-end-text"
+    >
+      <slot name="end-text">{{ props.endText }}</slot
+      ><slot name="supporting-text"></slot>
+    </span>
+
+    <slot></slot>
+  </label>
+</template>

package/components/TextField/types.d.vue.ts

@@ -1,8 +1,10 @@
-import type { HTMLAttributes, Slot } from "vue"
+import type { HTMLAttributes, InputHTMLAttributes, Slot } from "vue"
 import type { Props as BaseProps } from "./types"
 
 export type Props = BaseProps & {
   class?: HTMLAttributes["class"]
+  id?: HTMLAttributes["id"]
+  type?: InputHTMLAttributes["type"] | "numeric"
 }
 
 export type Slots = {

package/components/Textarea/Textarea.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { useId } from "vue"
+import type { Props, Slots } from "./types.d.vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<Props>()
+defineSlots<Slots>()
+const modelValue = defineModel<string>()
+
+const fieldId = props.id || useId()
+</script>
+
+<template>
+  <label
+    :class="[
+      'ui-textarea',
+      {
+        'ui-auto-fit': props.autoFit,
+        'ui-filled': props.filled,
+        'ui-spread': props.spread,
+        'ui-small': props.small,
+      },
+      props.class,
+    ]"
+    :data-invalid="props.error || undefined"
+  >
+    <span v-if="props.label || $slots.label" class="ui-label">
+      <slot name="label">{{ props.label }}</slot>
+    </span>
+
+    <span v-if="props.description || $slots.description" class="ui-start-text">
+      <slot name="description">{{ props.description }}</slot>
+    </span>
+
+    <span class="ui-field">
+      <textarea :id="fieldId" v-bind="$attrs" v-model="modelValue"></textarea>
+      <span class="ui-prefix" v-if="$slots.prefix"
+        ><slot name="prefix"></slot
+      ></span>
+      <span class="ui-suffix" v-if="$slots.suffix"
+        ><slot name="suffix"></slot
+      ></span>
+      <span class="ui-header" v-if="$slots.header"
+        ><slot name="header"></slot
+      ></span>
+      <span class="ui-footer" v-if="$slots.footer"
+        ><slot name="footer"></slot
+      ></span>
+    </span>
+
+    <span
+      v-if="props.endText || $slots['end-text'] || $slots['supporting-text']"
+      class="ui-end-text"
+    >
+      <slot name="end-text">{{ props.endText }}</slot
+      ><slot name="supporting-text"></slot>
+    </span>
+
+    <slot></slot>
+  </label>
+</template>

package/components/Textarea/types.d.vue.ts

@@ -3,6 +3,7 @@ import type { Props as BaseProps } from "./types"
 
 export type Props = BaseProps & {
   class?: HTMLAttributes["class"]
+  id?: HTMLAttributes["id"]
 }
 
 export type Slots = {

package/components/Toast/Toast.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { onMounted } from "vue"
+import { initToastManager } from "../../css/js/toast.js"
+
+onMounted(() => {
+  initToastManager()
+})
+</script>
+
+<template>
+  <output
+    aria-live="polite"
+    id="toast-manager"
+    popover="manual"
+    role="status"
+  ></output>
+
+  <template id="toast-template">
+    <div class="ui-toast" role="alert">
+      <span class="ui-icon" data-toast-icon></span>
+      <div class="ui-content">
+        <div class="ui-title" data-toast-title></div>
+        <div class="ui-description" data-toast-description></div>
+      </div>
+      <button
+        aria-label="Close"
+        class="ui-close-button"
+        data-toast-close
+        type="button"
+      >
+        <svg
+          fill="none"
+          height="20"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M18 6 6 18"></path>
+          <path d="m6 6 12 12"></path>
+        </svg>
+      </button>
+    </div>
+  </template>
+</template>

package/components/ToggleButton/ToggleButton.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { inject, useId } from "vue"
+import { ToggleGroupKey } from "../ToggleGroup/types.d.vue"
+import type { Props, Slots } from "./types.d.vue"
+
+const { disabled, id, label, name, pressed, size, type, value } =
+  defineProps<Props>()
+defineSlots<Slots>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const group = inject(ToggleGroupKey, undefined)
+const finalName = name || group?.name
+const finalType = type || group?.type || "checkbox"
+const inputId = id || useId()
+</script>
+
+<template>
+  <label
+    :class="[
+      'ui-toggle-button',
+      { 'ui-disabled': disabled },
+      size && `ui-${size}`,
+      $props.class,
+    ]"
+  >
+    <input
+      :aria-pressed="finalType === 'checkbox' ? pressed : undefined"
+      :checked="pressed"
+      :disabled="disabled"
+      :id="inputId"
+      :name="finalName"
+      :type="finalType"
+      :value="value || label"
+      v-bind="$attrs"
+    />
+    <slot></slot>
+  </label>
+</template>

package/components/ToggleGroup/ToggleGroup.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { provide, useId } from "vue"
+import { ToggleGroupKey, type Props, type Slots } from "./types.d.vue"
+
+const {
+  name,
+  orientation,
+  selection = "multiple",
+  size = "default",
+} = defineProps<Props>()
+defineSlots<Slots>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const groupName = name || useId()
+const inputType = selection === "single" ? "radio" : "checkbox"
+
+provide(ToggleGroupKey, { name: groupName, type: inputType })
+</script>
+
+<template>
+  <div
+    :class="[
+      'ui-toggle-group',
+      size !== 'default' && size && `ui-${size}`,
+      orientation && `ui-${orientation}`,
+      $props.class,
+    ]"
+    :role="selection === 'single' ? 'radiogroup' : 'group'"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </div>
+</template>

package/components/Tooltip/Tooltip.vue

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

package/core/normalize.css

@@ -11,6 +11,28 @@
     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);
 
@@ -119,19 +141,11 @@
     border-radius: var(--border-radius, 0px);
     outline: 2px solid var(--_focus-visible-color);
     outline-offset: 2px;
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    :where(:focus-visible) {
-      transition: outline-offset 0.15 var(--ease-2);
-    }
-
-    :where(:not(:active):focus-visible) {
-      transition-duration: 0.15s;
-    }
+    transition: outline-offset calc(0.15s * var(--motion)) var(--ease-2);
   }
 
   :where(:not(:active):focus-visible) {
+    transition-duration: calc(0.15s * var(--motion));
     outline-offset: var(--outline-offset, 0px);
   }
 

package/core/utils.css

@@ -62,9 +62,7 @@ Add `.ui-scroll-lock` to any element that uses the [open] attribute (native <dia
           translateZ(-1px) scale(var(--thumb-scale));
         will-change: transform;
 
-        @media (prefers-reduced-motion: no-preference) {
-          transition: transform 0.2s ease;
-        }
+        transition: transform calc(0.2s * var(--motion, 1)) ease;
       }
     }
   }

package/css/components/accordion.css

@@ -1,5 +1,6 @@
 @layer components.extended {
   :where(details.ui-accordion) {
+    --_motion: var(--motion, 1);
     --_actions-gap: var(--size-1);
     --_actions-margin-block-start: var(--size-3);
     --_actions-padding-block-end: var(--size-1);
@@ -15,8 +16,8 @@
     --_shadow: none;
     --_summary-padding-block: var(--size-3);
     --_summary-padding-inline: var(--_padding-inline);
-    --_svg-transition: 0.2s var(--ease-1);
-    --_transition: 0.2s;
+    --_svg-transition: calc(0.2s * var(--_motion)) var(--ease-1);
+    --_transition: calc(0.2s * var(--_motion));
 
     background-color: var(--_bg-color);
     border: var(--_border-width) solid var(--_border-color);
@@ -49,9 +50,7 @@
 
     /* Accordion animation */
     /* https://nerdy.dev/open-and-close-transitions-for-the-details-element */
-    @media (prefers-reduced-motion: no-preference) {
-      interpolate-size: allow-keywords;
-    }
+    interpolate-size: allow-keywords;
 
     &::details-content {
       block-size: 0;