@resee-movies/nuxt-ux 0.8.0 → 0.10.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@resee-movies/nuxt-ux",
   "configKey": "ux",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.0"

package/dist/runtime/components/Button.vue

@@ -31,7 +31,9 @@
       :icon-transition-mode      = "props.iconTransitionMode"
       :icon-transition-on-appear = "props.iconTransitionOnAppear"
     >
-      <slot />
+      <template #default v-if="slots.default">
+        <slot />
+      </template>
     </IconTextPair>
   </Component>
 </template>

package/dist/runtime/components/LayoutPageColumn.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-;
+
 </script>
 
 <script setup>
@@ -19,5 +19,5 @@ const props = defineProps({
 </script>
 
 <style scoped>
-@reference "tailwindcss";:global(:root){--page-column-gutter:calc(var(--spacing)*3);--page-column-pad-y:calc(var(--spacing)*12);--page-column-pad-vista:calc(var(--spacing)*52)}.page-column{margin-left:auto;margin-right:auto;padding:var(--page-column-gutter)}.page-column.layout-main:where(:has(:first-child.page-container)){padding-bottom:0;padding-top:0}.page-column.layout-vista:where(:has(:last-child.page-container)){padding-bottom:0}@variant md{.page-column{max-width:var(--container-3xl)}.page-column.layout-main{padding-top:var(--page-column-pad-y)}.page-column.layout-main,.page-column.layout-vista{padding-bottom:var(--page-column-pad-y)}}@variant lg{.page-column{max-width:var(--container-5xl)}.page-column.layout-vista{padding-top:var(--page-column-pad-vista)}}@variant portrait{.page-column.layout-vista{padding-top:min(calc(var(--spacing)*52),calc(56.25vw - 110px))}}
+@reference "tailwindcss";:global(:root){--page-column-gutter:calc(var(--spacing)*3);--page-column-pad-y:calc(var(--spacing)*12);--page-column-pad-vista:calc(var(--spacing)*52)}.page-column{margin-left:auto;margin-right:auto;padding:var(--page-column-gutter)}.page-column.layout-main:where(:has(:first-child.page-container)){padding-bottom:0;padding-top:0}.page-column.layout-vista:where(:has(:last-child.page-container)){padding-bottom:0}@variant sm{.page-column{max-width:var(--container-3xl)}.page-column.layout-main{padding-top:var(--page-column-pad-y)}.page-column.layout-main,.page-column.layout-vista{padding-bottom:var(--page-column-pad-y)}}@variant lg{.page-column{max-width:var(--container-5xl)}.page-column.layout-vista{padding-top:var(--page-column-pad-vista)}}@variant portrait{.page-column.layout-vista{padding-top:min(calc(var(--spacing)*52),calc(56.25vw - 110px))}}
 </style>

package/dist/runtime/components/LayoutPageColumn.vue.d.ts

@@ -1,8 +1,8 @@
-export interface LayoutPageColumn {
+export interface LayoutPageColumnProps {
     is?: string;
     layout?: 'main' | 'vista';
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LayoutPageColumn, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LayoutPageColumn> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LayoutPageColumnProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LayoutPageColumnProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/LayoutPageContainer.vue

@@ -1,15 +1,32 @@
 <template>
   <Component
     :is    = "props.is"
-    :class = "['page-container', props.glassEffect ? 'glass-effect' : void 0]"
+    :class = "['page-container', { 'glass-effect': props.glassEffect }]"
   >
-    <div v-if="props.headingText || slots.heading" class="mb-6">
-      <slot name="heading">
-        <Heading :text="props.headingText" />
-      </slot>
+    <div
+      v-if   = "showTitleBar"
+      :class = "['mb-6', { 'prose-layout-container': props.prose, 'sm': props.prose === 'sm' }]"
+    >
+      <div v-if="showHeading || slots.actions" class="flex gap-4 items-center">
+        <slot name="heading">
+          <Heading :text="props.headingText" class="grow" />
+        </slot>
+
+        <div v-if="slots.actions">
+          <slot name="actions" />
+        </div>
+      </div>
+
+      <div v-if="showSubheading">
+        <slot name="subheading">
+          <p class="text-global-foreground-accent">{{ props.subheadingText }}</p>
+        </slot>
+      </div>
     </div>
 
-    <slot name="default" />
+    <div :class="{ 'prose-container': props.prose, 'sm': props.prose === 'sm' }">
+      <slot name="default" />
+    </div>
   </Component>
 </template>
 
@@ -18,17 +35,28 @@
 </script>
 
 <script setup>
-import { useSlots } from "vue";
+import { computed, useSlots } from "vue";
 import Heading from "./Heading.vue";
 const slots = useSlots();
 const props = defineProps({
   is: { type: String, required: false, default: "div" },
   glassEffect: { type: Boolean, required: false, default: false },
   accentColor: { type: String, required: false, default: void 0 },
-  headingText: { type: String, required: false, default: void 0 }
+  headingText: { type: String, required: false, default: void 0 },
+  subheadingText: { type: String, required: false, default: void 0 },
+  prose: { type: [Boolean, String], required: false, default: false }
 });
+const showSubheading = computed(
+  () => !!(props.subheadingText || slots.subheading)
+);
+const showHeading = computed(
+  () => !!(props.headingText || slots.heading)
+);
+const showTitleBar = computed(
+  () => showHeading.value || showSubheading.value || !!slots.actions
+);
 </script>
 
 <style scoped>
-@reference "tailwindcss";:global(:root){--page-container-pad-y:calc(var(--page-column-gutter)*2);--page-container-pad-x:var(--page-container-pad-y);--page-container-radius:calc(var(--spacing)*1)}.page-container{--custom-accent-color:v-bind(accentColor);--page-container-accent-color:var(--custom-accent-color,var(--color-global-foreground-accent));background-color:var(--color-global-background);border:1px solid var(--page-container-accent-color);border-radius:var(--page-container-radius);box-shadow:var(--shadow-heavy);padding:var(--page-container-pad-y) var(--page-container-pad-x);transition:border-color;transition-duration:var(--default-transition-duration)}@variant sm{.page-container.glass-effect{backdrop-filter:blur(var(--blur-sm));background-color:color-mix(in srgb-linear,transparent 40%,var(--color-global-background))}}@variant max-sm{.page-container:where(.page-column>.page-container){border-bottom:none;border-left:none;border-radius:0;border-right:none;box-shadow:none;margin-left:calc(var(--page-column-gutter)*-1);margin-right:calc(var(--page-column-gutter)*-1);padding-left:var(--page-column-gutter);padding-right:var(--page-column-gutter)}}
+@reference "tailwindcss";:global(:root){--page-container-pad-y:calc(var(--page-column-gutter)*2);--page-container-pad-x:var(--page-container-pad-y);--page-container-radius:calc(var(--spacing)*1)}.page-container{--custom-accent-color:v-bind(accentColor);--page-container-accent-color:var(--custom-accent-color,var(--color-global-foreground-accent));background-color:var(--color-global-background);border:1px solid var(--page-container-accent-color);border-radius:var(--page-container-radius);box-shadow:var(--shadow-heavy);padding:var(--page-container-pad-y) var(--page-container-pad-x);transition:border-color;transition-duration:var(--default-transition-duration)}@variant sm{.page-container.glass-effect{backdrop-filter:blur(var(--blur-sm));background-color:color-mix(in srgb-linear,transparent 40%,var(--color-global-background))}}@variant max-sm{.page-container:where(.page-column>.page-container){border-bottom:none;border-left:none;border-radius:0;border-right:none;box-shadow:none;margin-left:calc(var(--page-column-gutter)*-1);margin-right:calc(var(--page-column-gutter)*-1);padding-left:var(--page-column-gutter);padding-right:var(--page-column-gutter)}.page-container:not(.page-container+.page-container):where(.page-column:not(.layout-vista)>.page-container){border-top:none}}
 </style>

package/dist/runtime/components/LayoutPageContainer.vue.d.ts

@@ -4,9 +4,15 @@ export interface LayoutPageContainerProps {
     glassEffect?: boolean;
     accentColor?: string;
     headingText?: string;
+    subheadingText?: string;
+    prose?: boolean | 'md' | 'sm';
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LayoutPageContainerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LayoutPageContainerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     heading?: (props: {}) => any;
+} & {
+    actions?: (props: {}) => any;
+} & {
+    subheading?: (props: {}) => any;
 } & {
     default?: (props: {}) => any;
 }>;

package/dist/runtime/components/Lorem.vue

@@ -15,8 +15,8 @@
 </script>
 
 <script setup>
-import { useId, useState } from "#imports";
-import { computed } from "vue";
+import { useState } from "#imports";
+import { computed, useId } from "vue";
 const props = defineProps({
   type: { type: String, required: false, default: "words" },
   min: { type: [String, Number], required: false, default: void 0 },
@@ -28,26 +28,6 @@ const props = defineProps({
   minWordCount: { type: [String, Number], required: false, default: 5 },
   maxWordCount: { type: [String, Number], required: false, default: 25 }
 });
-const values = computed(() => {
-  const { min, max, type } = props;
-  const minWord = toInteger(type === "words" && min, props.minWordCount) ?? 5;
-  const maxWord = toInteger(type === "words" && max, props.maxWordCount, minWord + 20) ?? 25;
-  if (props.type === "words") {
-    return getWords(minWord, maxWord);
-  }
-  const minSent = toInteger(type === "sentences" && min, props.minSentenceCount) ?? 1;
-  const maxSent = toInteger(type === "sentences" && max, props.maxSentenceCount, minSent + 3) ?? 4;
-  if (props.type === "sentences") {
-    return getSentences(minSent, maxSent, minWord, maxWord);
-  }
-  const minPara = toInteger(type === "paragraphs" && min, props.minParagraphCount) ?? 1;
-  const maxPara = toInteger(type === "paragraphs" && max, props.maxParagraphCount, minPara + 3) ?? 4;
-  if (props.type === "paragraphs") {
-    return getParagraphs(minPara, maxPara, minSent, maxSent, minWord, maxWord);
-  }
-  return [];
-});
-const lorem = useState(useId(), () => values);
 const LoremWords = [
   "lorem",
   "ipsum",
@@ -273,6 +253,28 @@ const LoremWords = [
   "elit, ",
   "vehicula"
 ];
+const uid = useId();
+const values = useState(uid, () => generate());
+const lorem = computed(() => values.value ?? generate());
+function generate() {
+  const { min, max, type } = props;
+  const minWord = toInteger(type === "words" && min, props.minWordCount) ?? 5;
+  const maxWord = toInteger(type === "words" && max, props.maxWordCount, minWord + 20) ?? 25;
+  if (props.type === "words") {
+    return getWords(minWord, maxWord);
+  }
+  const minSent = toInteger(type === "sentences" && min, props.minSentenceCount) ?? 1;
+  const maxSent = toInteger(type === "sentences" && max, props.maxSentenceCount, minSent + 3) ?? 4;
+  if (props.type === "sentences") {
+    return getSentences(minSent, maxSent, minWord, maxWord);
+  }
+  const minPara = toInteger(type === "paragraphs" && min, props.minParagraphCount) ?? 1;
+  const maxPara = toInteger(type === "paragraphs" && max, props.maxParagraphCount, minPara + 3) ?? 4;
+  if (props.type === "paragraphs") {
+    return getParagraphs(minPara, maxPara, minSent, maxSent, minWord, maxWord);
+  }
+  return [];
+}
 function randomInteger(min, max) {
   return Math.floor(Math.random() * (max - min + 1)) + min;
 }

package/dist/runtime/components/form/Form.vue

@@ -11,7 +11,13 @@
     :aria-disabled            = "props.disabled"
     @submit                   = "handleFormSubmit"
   >
-    <slot :state="$form" />
+    <slot name="before" :state="$form" />
+
+    <slot name="default" :state="$form">
+      <FormFieldBuilder v-if="props.fields?.length" :fields="props.fields" />
+    </slot>
+
+    <slot name="after" :state="$form" />
   </PrimeForm>
 </template>
 
@@ -25,12 +31,14 @@ import { toNonNullableArray } from "@resee-movies/utilities/arrays/to-non-nullab
 import { isPromiseLike } from "@resee-movies/utilities/objects/is-promise-like";
 import { syncRefs, useDebounceFn } from "@vueuse/core";
 import { useTemplateRef } from "vue";
+import FormFieldBuilder from "./FormFieldBuilder.vue";
 import { useReactiveObjectsSync } from "../../composables/use-reactive-objects-sync";
 import { provideFormInstance, getValuesFromFormState } from "../../utils/form";
 const props = defineProps({
-  disabled: { type: Boolean, required: false },
-  onSubmit: { type: [Function, Array], required: false },
-  onChange: { type: Function, required: false }
+  disabled: { type: Boolean, required: false, default: false },
+  onSubmit: { type: [Function, Array], required: false, default: void 0 },
+  onChange: { type: Function, required: false, default: void 0 },
+  fields: { type: Array, required: false, default: void 0 }
 });
 const form = useTemplateRef("form");
 const values = defineModel("values", { type: null, ...{ default: void 0 } });

package/dist/runtime/components/form/Form.vue.d.ts

@@ -1,9 +1,11 @@
-import type { FormValues, FormSubmitHandler, FormSubmitEvent } from '../../types/form.js';
+import type { FormSubmitEvent, FormSubmitHandler, FormValues } from '../../types/form.js';
+import type { FormFieldBuilderOption } from './FormFieldBuilder.vue.js';
 export * from '../../types/form.js';
 export interface FormProps<T extends FormValues = FormValues> {
     disabled?: boolean;
     onSubmit?: FormSubmitHandler<T> | FormSubmitHandler<T>[];
     onChange?: (values: T | null) => void;
+    fields?: FormFieldBuilderOption[];
 }
 declare const __VLS_export: <T extends FormValues>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<(FormProps<T> & {
@@ -17,9 +19,17 @@ declare const __VLS_export: <T extends FormValues>(__VLS_props: NonNullable<Awai
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {
+        before?: (props: {
+            state: any;
+        }) => any;
+    } & {
         default?: (props: {
             state: any;
         }) => any;
+    } & {
+        after?: (props: {
+            state: any;
+        }) => any;
     };
     emit: {
         (e: "submit", evt: FormSubmitEvent<T>): (void | Promise<void>);

package/dist/runtime/components/form/FormField.vue

@@ -4,10 +4,20 @@
     :as       = "props.is"
     :name     = "props.name"
     :resolver = "validatorFunction"
-    :class    = "['input-field', props.class, { disabled: isDisabled, readonly: isReadonly, required: props.required }]"
+    :class    = "[
+  props.class,
+  {
+    'input-field': props.is !== 'fieldset',
+    'input-fieldset': props.is === 'fieldset',
+    disabled: isDisabled,
+    readonly: isReadonly,
+    required: props.required
+  }
+]"
   >
     <FormLabelInputPair
       :input-id       = "inputId"
+      :label-is       = "props.is === 'fieldset' ? 'legend' : void 0"
       :label-id       = "labelId"
       :label-text     = "labelText"
       :label-position = "props.labelPosition"

package/dist/runtime/components/form/FormFieldBuilder.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="@container">
+    <div class="grid grid-cols-1 gap-x-4 gap-y-6 sm:@lg:grid-cols-2 sm:@lg:gap-y-7">
+      <template v-for="(field, index) of props.fields" :key="field.name ?? index">
+        <Component
+          :is    = "getComponent(field)"
+          v-bind = "field"
+          :class = "{
+  'sm:@lg:col-span-2': field.width !== 'half'
+}"
+        />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+
+</script>
+
+<script setup>
+import { h } from "vue";
+import EmptyDiv from "./element/FormElementEmptyDiv.vue";
+import CheckboxField from "./FormFieldCheckbox.vue";
+import SelectField from "./FormFieldSelect.vue";
+import SelectButtonField from "./FormFieldSelectButton.vue";
+import SubmitButton from "./FormSubmitButton.vue";
+import RadioGroup from "./FormFieldRadioGroup.vue";
+import TextField from "./FormFieldText.vue";
+import TextareaField from "./FormFieldTextarea.vue";
+import ToggleSwitchField from "./FormFieldToggleSwitch.vue";
+import TurnstileField from "./FormFieldTurnstile.vue";
+const props = defineProps({
+  fields: { type: null, required: true }
+});
+function getComponent(field) {
+  switch (field.fieldType) {
+    case "checkbox":
+      return CheckboxField;
+    case "select":
+      return SelectField;
+    case "select-button":
+      return SelectButtonField;
+    case "radio":
+      return RadioGroup;
+    case "text":
+      return TextField;
+    case "textarea":
+      return TextareaField;
+    case "toggle":
+      return ToggleSwitchField;
+    case "turnstile":
+      return TurnstileField;
+    case "submit":
+      return h(EmptyDiv, { class: "text-end" }, h(SubmitButton));
+    default:
+      return "div";
+  }
+}
+</script>

package/dist/runtime/components/form/FormFieldBuilder.vue.d.ts

@@ -0,0 +1,46 @@
+import type { FormFieldCheckboxProps } from './FormFieldCheckbox.vue.js';
+import type { FormFieldRadioGroupProps } from './FormFieldRadioGroup.vue.js';
+import type { FormFieldSelectProps } from './FormFieldSelect.vue.js';
+import type { FormFieldSelectButtonProps } from './FormFieldSelectButton.vue.js';
+import type { FormFieldTextProps } from './FormFieldText.vue.js';
+import type { FormFieldTextareaProps } from './FormFieldTextarea.vue.js';
+import type { FormFieldToggleSwitchProps } from './FormFieldToggleSwitch.vue.js';
+import type { FormFieldTurnstileProps } from './FormFieldTurnstile.vue.js';
+import type { FormSubmitButtonProps } from './FormSubmitButton.vue.js';
+export interface CommonOptions {
+    width?: 'full' | 'half';
+}
+export interface CheckboxField extends FormFieldCheckboxProps, CommonOptions {
+    fieldType: 'checkbox';
+}
+export interface SelectField extends FormFieldSelectProps, CommonOptions {
+    fieldType: 'select';
+}
+export interface SelectButtonField extends FormFieldSelectButtonProps, CommonOptions {
+    fieldType: 'select-button';
+}
+export interface RadioGroup extends FormFieldRadioGroupProps, CommonOptions {
+    fieldType: 'radio';
+}
+export interface TextField extends FormFieldTextProps, CommonOptions {
+    fieldType: 'text';
+}
+export interface TextareaField extends FormFieldTextareaProps, CommonOptions {
+    fieldType: 'textarea';
+}
+export interface ToggleSwitchField extends FormFieldToggleSwitchProps, CommonOptions {
+    fieldType: 'toggle';
+}
+export interface TurnstileField extends FormFieldTurnstileProps, CommonOptions {
+    fieldType: 'turnstile';
+}
+export interface SubmitButton extends FormSubmitButtonProps, CommonOptions {
+    fieldType: 'submit';
+}
+export type FormFieldBuilderOption = CheckboxField | SelectField | SelectButtonField | RadioGroup | TextField | TextareaField | ToggleSwitchField | TurnstileField | SubmitButton;
+export interface FormFieldBuilderProps {
+    fields: undefined | FormFieldBuilderOption[];
+}
+declare const __VLS_export: import("vue").DefineComponent<FormFieldBuilderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldBuilderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/form/FormFieldRadioGroup.vue

@@ -0,0 +1,65 @@
+<template>
+  <FormField v-bind="props" is="fieldset" :validator="validatorFunction">
+    <template #label>
+      <slot name="label" />
+    </template>
+
+    <template #default="{ inputId, messageId, disabled, readonly, invalid }">
+      <template v-for="(option, index) of options" :key="`${inputId}_${index}`">
+        <FormLabelInputPair
+          :label-position = "props.optionLabelPosition"
+          :disabled       = "disabled"
+          :readonly       = "readonly"
+          :input-id       = "`${inputId}_${index}`"
+          :label-text     = "utils.getOptionLabel(option)"
+        >
+          <template #input>
+            <PrimeRadioButton
+              :value                     = "utils.getOptionValue(option)"
+              :input-id                  = "`${inputId}_${index}`"
+              :disabled                  = "disabled || utils.getOptionDisabled(option) || readonly"
+              :invalid                   = "invalid"
+              :pt:input:readonly         = "readonly"
+              :pt:input:aria-describedby = "messageId"
+              class                      = "input-group"
+            />
+          </template>
+        </FormLabelInputPair>
+      </template>
+    </template>
+  </FormField>
+</template>
+
+<script>
+
+</script>
+
+<script setup>
+import PrimeRadioButton from "primevue/radiobutton";
+import { computed } from "vue";
+import { useOptionListMethods } from "../../utils/form";
+import { createBooleanValidator } from "../../utils/validation";
+import FormField from "./FormField.vue";
+import FormLabelInputPair from "./FormLabelInputPair.vue";
+const props = defineProps({
+  options: { type: Array, required: true },
+  optionLabel: { type: String, required: false, default: void 0 },
+  optionValue: { type: String, required: false, default: void 0 },
+  optionDisabled: { type: String, required: false, default: void 0 },
+  optionLabelPosition: { type: String, required: false, default: "after" },
+  name: { type: String, required: true },
+  label: { type: String, required: false },
+  is: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  fauxLabel: { type: Boolean, required: false },
+  labelSrOnly: { type: Boolean, required: false },
+  labelPosition: { type: String, required: false },
+  class: { type: null, required: false }
+});
+const utils = useOptionListMethods(props);
+const validatorFunction = computed(() => {
+  return () => createBooleanValidator({ required: props.required });
+});
+</script>

package/dist/runtime/components/form/FormFieldRadioGroup.vue.d.ts

@@ -0,0 +1,19 @@
+import type { FormFieldProps } from './FormField.vue.js';
+import type { FormLabelInputPairProps } from './FormLabelInputPair.vue.js';
+export interface FormFieldRadioGroupProps extends Omit<FormFieldProps, 'validator'> {
+    options: unknown[];
+    optionLabel?: string;
+    optionValue?: string;
+    optionDisabled?: string;
+    optionLabelPosition?: FormLabelInputPairProps['labelPosition'];
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormFieldRadioGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldRadioGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    label?: (props: {}) => any;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/form/FormLabelInputPair.vue

@@ -1,9 +1,9 @@
 <template>
   <div :class="['input-label-pair', `label-${props.labelPosition}`]">
     <Component
-      :is    = "props.fauxLabel ? 'span' : 'label'"
+      :is    = "labelTagName"
       :id    = "props.labelId"
-      :for   = "props.fauxLabel ? void 0 : props.inputId"
+      :for   = "labelTagName === 'label' ? props.inputId : void 0"
       :class = "[
   'input-label',
   {
@@ -29,14 +29,19 @@
 </script>
 
 <script setup>
+import { computed } from "vue";
 const props = defineProps({
   inputId: { type: String, required: false },
   labelId: { type: String, required: false },
   labelText: { type: String, required: false },
   labelPosition: { type: String, required: false, default: "above" },
   labelSrOnly: { type: Boolean, required: false, default: false },
+  labelIs: { type: String, required: false, default: void 0 },
   required: { type: Boolean, required: false, default: false },
   disabled: { type: Boolean, required: false, default: false },
   fauxLabel: { type: Boolean, required: false, default: false }
 });
+const labelTagName = computed(
+  () => props.labelIs ?? (props.fauxLabel ? "span" : "label")
+);
 </script>

package/dist/runtime/components/form/FormLabelInputPair.vue.d.ts

@@ -1,9 +1,11 @@
+import type { HintedString } from '../../types/index.js';
 export interface FormLabelInputPairProps {
     inputId?: string;
     labelId?: string;
     labelText?: string;
     labelPosition?: 'above' | 'below' | 'before' | 'after';
     labelSrOnly?: boolean;
+    labelIs?: HintedString<'label' | 'legend' | 'span'>;
     required?: boolean;
     disabled?: boolean;
     fauxLabel?: boolean;

package/dist/runtime/components/form/element/FormElementEmptyDiv.vue

@@ -0,0 +1,20 @@
+<template>
+  <div :id="props.id" :class="props.class" :style="props.style">
+    <slot />
+  </div>
+</template>
+
+<script>
+
+</script>
+
+<script setup>
+defineOptions({
+  inheritAttrs: false
+});
+const props = defineProps({
+  id: { type: String, required: false },
+  class: { type: null, required: false },
+  style: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true }
+});
+</script>

package/dist/runtime/components/form/element/FormElementEmptyDiv.vue.d.ts

@@ -0,0 +1,17 @@
+import type { StyleValue } from '@vue/runtime-dom';
+import type { HTMLElementClassNames } from '../../../types/index.js';
+export interface FormElementEmptyDivProps {
+    id?: string;
+    class?: HTMLElementClassNames;
+    style?: StyleValue;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormElementEmptyDivProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormElementEmptyDivProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/form/element/FormElementSelectButton.vue

@@ -5,15 +5,16 @@
     :aria-labelledby  = "props.ariaLabelledby"
     :aria-describedby = "props.ariaDescribedby"
   >
-    <template v-for="(option, index) of props.options" :key="getOptionRenderKey(option) ?? index">
+    <template v-for="(option, index) of props.options" :key="utils.getOptionRenderKey(option) ?? index">
       <ToggleButton
+        class       = "input-button"
         severity    = "unset"
-        :pressed    = "getSelectedOptionIndex(option) !== -1"
-        :text       = "props.iconOnly ? void 0 : getOptionLabel(option)"
-        :icon       = "getOptionIcon(option)"
+        :pressed    = "utils.getOptionIndex(option, value) !== -1"
+        :text       = "props.iconOnly ? void 0 : utils.getOptionLabel(option)"
+        :icon       = "utils.getOptionIcon(option)"
         :disabled   = "getOptionDisabled(option)"
-        :aria-label = "props.iconOnly ? getOptionLabel(option) : void 0"
-        :tooltip    = "props.iconOnly ? getOptionLabel(option) : void 0"
+        :aria-label = "props.iconOnly ? utils.getOptionLabel(option) : void 0"
+        :tooltip    = "props.iconOnly ? utils.getOptionLabel(option) : void 0"
         @click      = "(pressed) => handleToggleChange(option, pressed)"
       />
     </template>
@@ -31,9 +32,7 @@ export class ChangeEvent extends Event {
 </script>
 
 <script setup>
-import { equals, resolveFieldData } from "@primeuix/utils/object";
-import { isNumber } from "@resee-movies/utilities/numbers/is-number";
-import { isString } from "@resee-movies/utilities/strings/is-string";
+import { useOptionListMethods } from "../../../utils/form";
 import ToggleButton from "../../ToggleButton.vue";
 const props = defineProps({
   options: { type: Array, required: true },
@@ -52,58 +51,32 @@ const props = defineProps({
 });
 const emits = defineEmits(["change"]);
 const value = defineModel("value", { type: null, ...{ default: null } });
-function getOptionLabel(option) {
-  return String(props.optionLabel ? resolveFieldData(option, props.optionLabel) : option);
-}
-function getOptionValue(option) {
-  return props.optionValue ? resolveFieldData(option, props.optionValue) : option;
-}
-function getOptionIcon(option) {
-  return props.optionIcon ? String(resolveFieldData(option, props.optionIcon)) : void 0;
-}
+const utils = useOptionListMethods(props);
 function getOptionDisabled(option) {
-  if (props.disabled || props.readonly) {
-    return true;
-  }
-  if (props.optionDisabled && resolveFieldData(option, props.optionDisabled)) {
+  if (props.disabled || props.readonly || utils.value.getOptionDisabled(option)) {
     return true;
   }
   if (props.multiple) {
     const limit = props.selectionLimit ?? Number.POSITIVE_INFINITY;
     const length = Array.isArray(value.value) ? value.value.length : 0;
-    if (limit <= length && getSelectedOptionIndex(option) === -1) {
+    if (limit <= length && utils.value.getOptionIndex(option, value) === -1) {
       return true;
     }
   }
   return false;
 }
-function getOptionRenderKey(option) {
-  const result = props.optionDataKey ? resolveFieldData(option, props.optionDataKey) : getOptionLabel(option);
-  return isString(result) || isNumber(result) ? result : void 0;
-}
-function getSelectedOptionIndex(option) {
-  if (!value.value) {
-    return -1;
-  }
-  const equalityKey = props.optionValue ? void 0 : props.optionDataKey;
-  const optionValue = getOptionValue(option);
-  if (Array.isArray(value.value)) {
-    return value.value.findIndex((entry) => equals(entry, optionValue, equalityKey));
-  }
-  return equals(value.value, optionValue, equalityKey) ? 0 : -1;
-}
 function handleToggleChange(option, pressed) {
   if (props.multiple) {
-    const selectedIndex = getSelectedOptionIndex(option);
+    const selectedIndex = utils.value.getOptionIndex(option, value);
     const selectedItems = Array.isArray(value.value) ? [...value.value] : [];
     if (selectedIndex === -1) {
-      selectedItems.push(getOptionValue(option));
+      selectedItems.push(utils.value.getOptionValue(option));
     } else {
       selectedItems.splice(selectedIndex, 1);
     }
     value.value = selectedItems.length === 0 ? null : selectedItems;
   } else {
-    value.value = pressed ? getOptionValue(option) : null;
+    value.value = pressed ? utils.value.getOptionValue(option) : null;
   }
   emits("change", new ChangeEvent(value.value));
 }

package/dist/runtime/components/form/element/FormElementSelectOptions.vue

@@ -14,7 +14,7 @@
     :show-clear         = "props.showClear"
     :show-toggle-all    = "showSelectAllCheckbox"
     :filter             = "showFilter"
-    :filter-placeholder = "props.filterPlaceholder ?? locale.form.filterPlaceholder"
+    :filter-placeholder = "props.filterPlaceholder ?? reseeUx.locale.form.filterPlaceholder"
     :loading            = "props.loading"
     :pt                 = "props.multiple ? multiSelectPassthroughProps : selectPassthroughProps"
     :append-to          = "TeleportId"
@@ -44,7 +44,7 @@
       <Button
         severity         = "unset"
         icon             = "i-ph-x"
-        class            = "input-group-addon"
+        class            = "input-button input-group-addon"
         @click           = "clearCallback"
         :data-pc-section = "
   'clearicon'
@@ -58,11 +58,11 @@
     </template>
 
     <template #emptyfilter>
-      <span>{{ locale.form.filterNoResults }}</span>
+      <span>{{ reseeUx.locale.form.filterNoResults }}</span>
     </template>
 
     <template #empty>
-      <span>{{ locale.form.noOptionsAvailable }}</span>
+      <span>{{ reseeUx.locale.form.noOptionsAvailable }}</span>
     </template>
 
     <template #option="{ option, selected, index }" v-if="slots.option">
@@ -76,14 +76,14 @@ import {} from "primevue/select";
 </script>
 
 <script setup>
-import { equals, resolveFieldData } from "@primeuix/utils/object";
-import { useBreakpoints, breakpointsTailwind } from "@vueuse/core";
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
 import PrimeMultiSelect from "primevue/multiselect";
 import PrimeSelect from "primevue/select";
 import { computed, useSlots } from "vue";
 import { useReseeUx } from "../../../composables/use-resee-ux";
 import { TeleportId } from "../../../constants";
 import { blockBodyScroll } from "../../../utils/dom";
+import { useOptionListMethods } from "../../../utils/form";
 import { swapStringPlaceholders } from "../../../utils/string";
 import Button from "../../Button.vue";
 import Icon from "../../Icon.vue";
@@ -156,7 +156,8 @@ const props = defineProps({
   unstyled: { type: Boolean, required: false }
 });
 const slots = useSlots();
-const { locale } = useReseeUx();
+const utils = useOptionListMethods(props);
+const reseeUx = useReseeUx();
 const isSmall = useBreakpoints(breakpointsTailwind).smallerOrEqual("sm");
 const showFilter = computed(() => {
   return props.showOptionFilter ?? (props.options?.length ?? 0) > 20;
@@ -169,7 +170,7 @@ const sharedPassthroughProps = computed(() => {
   return {
     header: { class: "menu-prefix input-menu-header" },
     overlay: { class: "menu input-menu" },
-    dropdown: { class: "input-group-addon" },
+    dropdown: { class: "input-group-addon input-button" },
     listContainer: { class: "menu-list" },
     pcFilterContainer: { root: { class: "input-menu-filter" } },
     pcFilterIconContainer: { root: { class: "input-group-addon" } },
@@ -219,7 +220,7 @@ const multiSelectPassthroughProps = computed(() => {
       },
       input: {
         "id": `${props.inputId}_select_all`,
-        "aria-label": locale.form.selectAllOptions
+        "aria-label": reseeUx.locale.form.selectAllOptions
       }
     },
     pcOptionCheckbox: {
@@ -229,30 +230,19 @@ const multiSelectPassthroughProps = computed(() => {
     }
   };
 });
-function getOptionValue(option) {
-  return props.optionValue ? resolveFieldData(option, props.optionValue) : option;
-}
-function getOptionLabel(option) {
-  return props.optionLabel ? resolveFieldData(option, props.optionLabel) : option;
-}
-function findOptionByValue(value) {
-  return props.options?.find(
-    (option) => equals(getOptionValue(option), value, props.optionValue ? void 0 : props.dataKey)
-  );
-}
 function toLabel(value) {
   if (!value) {
     return void 0;
   }
   if (!Array.isArray(value)) {
-    return getOptionLabel(findOptionByValue(value));
+    return utils.value.getOptionLabel(utils.value.getOptionByValue(value, props.options));
   }
   if (value.length === 0) {
     return void 0;
   }
   if (value.length === 1) {
-    return getOptionLabel(findOptionByValue(value[0]));
+    return utils.value.getOptionLabel(utils.value.getOptionByValue(value[0], props.options));
   }
-  return swapStringPlaceholders(locale.form.numOptionsSelected, { count: value.length });
+  return swapStringPlaceholders(reseeUx.locale.form.numOptionsSelected, { count: value.length });
 }
 </script>

package/dist/runtime/components/form/element/FormElementTurnstile.vue.d.ts

@@ -1,6 +1,6 @@
 import type { TurnstileRenderOptions } from '../../../composables/use-cloudflare-turnstile.js';
-export interface FormFieldTurnstileProps extends TurnstileRenderOptions {
+export interface FormElementTurnstileProps extends TurnstileRenderOptions {
 }
-declare const __VLS_export: import("vue").DefineComponent<FormFieldTurnstileProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldTurnstileProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<FormElementTurnstileProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormElementTurnstileProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/theme/css/brand/button.css

@@ -1 +1 @@
-@layer components{@property --btn-background-color{syntax:"<color>";inherits:false;initial-value:transparent}.btn,.btn.default,.prose button,.prose-container button{--btn-border-width:2px;--btn-background-color:var(--color-background-scale-a);--btn-background-focus-color:var(--color-background-scale-c);--btn-border-color:var(--color-background-scale-g);--btn-bg-image-background-layer:linear-gradient(to right,var(--btn-background-color),var(--btn-background-color));--btn-bg-image-border-layer:linear-gradient(to right,var(--btn-border-color),var(--btn-border-color));--btn-bg-image-color-layer:linear-gradient(to right,var(--colorscale-resee-linear));--btn-background-image:var(--btn-bg-image-background-layer),var(--btn-bg-image-border-layer),var(--btn-bg-image-color-layer);@variant dark{--btn-bg-image-color-layer:linear-gradient(to right,var(--colorscale-resee-lite-linear))}}.btn.default.icon-only,.btn.icon-only,.prose button.icon-only,.prose-container button.icon-only{--btn-bg-image-color-layer:conic-gradient(from 0deg,var(--colorscale-resee-conic));@variant dark{--btn-bg-image-color-layer:conic-gradient(from 0deg,var(--colorscale-resee-lite-conic))}}.btn,.prose button,.prose-container button{background-clip:padding-box,border-box,border-box;background-image:var(--btn-background-image);background-origin:border-box;background-position:100% 100%;background-repeat:no-repeat;background-size:100%,100% 100%,100%;border:solid var(--btn-border-width) var(--btn-border-color);border-radius:var(--radius-full);cursor:pointer;display:inline-block;padding:--spacing(1) --spacing(5);text-align:center;transition:box-shadow,background-size,--btn-background-color,border-color;transition-duration:.3s;transition-timing-function:ease-in-out}.btn:focus-visible,.prose button:focus-visible,.prose-container button:focus-visible{outline:none}.btn:where(:disabled,.disabled,[aria-disabled=true]):not(.loading),.prose button:where(:disabled,.disabled,[aria-disabled=true]):not(.loading),.prose-container button:where(:disabled,.disabled,[aria-disabled=true]):not(.loading){cursor:not-allowed;opacity:.4}.btn.borderless,.prose button.borderless,.prose-container button.borderless{background-clip:border-box;background-image:var(--btn-bg-image-background-layer);border:2px solid transparent}.btn.icon-only,.prose button.icon-only,.prose-container button.icon-only{line-height:1;padding:--spacing(2)}.btn.icon-only .label,.prose button.icon-only .label,.prose-container button.icon-only .label{display:none}.btn.small,.prose button.small,.prose-container button.small{font-size:var(--icon-size-small)}.btn.small.icon-only,.prose button.small.icon-only,.prose-container button.small.icon-only{padding:--spacing(1.75)}.btn.small:not(.icon-only),.prose button.small:not(.icon-only),.prose-container button.small:not(.icon-only){padding:--spacing(.5) --spacing(4)}.btn.large,.prose button.large,.prose-container button.large{font-size:var(--icon-size-large)}.btn.large.icon-only,.prose button.large.icon-only,.prose-container button.large.icon-only{padding:--spacing(1.5)}.btn.large:not(.icon-only),.prose button.large:not(.icon-only),.prose-container button.large:not(.icon-only){padding:--spacing(1.5) --spacing(6)}.btn.loading,.prose button.loading,.prose-container button.loading{cursor:progress}.btn:not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible,.btn:not(:disabled,.disabled,[aria-disabled=true],.loading):hover,.prose button:not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible,.prose button:not(:disabled,.disabled,[aria-disabled=true],.loading):hover,.prose-container button:not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible,.prose-container button:not(:disabled,.disabled,[aria-disabled=true],.loading):hover{--btn-background-color:var(--btn-background-focus-color);background-size:100%,0 100%,100%;border-color:transparent}.btn:not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible:not(.borderless),.btn:not(:disabled,.disabled,[aria-disabled=true],.loading):hover:not(.borderless),.prose button:not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible:not(.borderless),.prose button:not(:disabled,.disabled,[aria-disabled=true],.loading):hover:not(.borderless),.prose-container button:not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible:not(.borderless),.prose-container button:not(:disabled,.disabled,[aria-disabled=true],.loading):hover:not(.borderless){box-shadow:var(--shadow)}.btn,.prose button,.prose-container button{@variant max-md{&.responsive-grow{padding:.5rem;width:100%}&.responsive-shrink{line-height:1;padding:--spacing(2)}&.responsive-shrink :not(.icon){display:none}}}}
+@layer components{@property --btn-background-color{syntax:"<color>";inherits:false;initial-value:transparent}.btn,.btn.default,.prose button:not([class]),.prose-container button:not([class]){--btn-border-width:2px;--btn-background-color:var(--color-background-scale-a);--btn-background-focus-color:var(--color-background-scale-c);--btn-border-color:var(--color-background-scale-g);--btn-bg-image-background-layer:linear-gradient(to right,var(--btn-background-color),var(--btn-background-color));--btn-bg-image-border-layer:linear-gradient(to right,var(--btn-border-color),var(--btn-border-color));--btn-bg-image-color-layer:linear-gradient(to right,var(--colorscale-resee-linear));--btn-background-image:var(--btn-bg-image-background-layer),var(--btn-bg-image-border-layer),var(--btn-bg-image-color-layer);@variant dark{--btn-bg-image-color-layer:linear-gradient(to right,var(--colorscale-resee-lite-linear))}}.btn.default.icon-only,.btn.icon-only,.prose button:not([class]).icon-only,.prose-container button:not([class]).icon-only{--btn-bg-image-color-layer:conic-gradient(from 0deg,var(--colorscale-resee-conic));@variant dark{--btn-bg-image-color-layer:conic-gradient(from 0deg,var(--colorscale-resee-lite-conic))}}.btn,.prose button:not([class]),.prose-container button:not([class]){background-clip:padding-box,border-box,border-box;background-image:var(--btn-background-image);background-origin:border-box;background-position:100% 100%;background-repeat:no-repeat;background-size:100%,100% 100%,100%;border:solid var(--btn-border-width) var(--btn-border-color);border-radius:var(--radius-full);cursor:pointer;display:inline-block;padding:--spacing(1) --spacing(5);text-align:center;transition:box-shadow,background-size,--btn-background-color,border-color;transition-duration:.3s;transition-timing-function:ease-in-out}.btn:focus-visible,.prose button:not([class]):focus-visible,.prose-container button:not([class]):focus-visible{outline:none}.btn:where(:disabled,.disabled,[aria-disabled=true]):not(.loading),.prose button:not([class]):where(:disabled,.disabled,[aria-disabled=true]):not(.loading),.prose-container button:not([class]):where(:disabled,.disabled,[aria-disabled=true]):not(.loading){cursor:not-allowed;opacity:.4}.btn.borderless,.prose button:not([class]).borderless,.prose-container button:not([class]).borderless{background-clip:border-box;background-image:var(--btn-bg-image-background-layer);border:2px solid transparent}.btn.icon-only,.prose button:not([class]).icon-only,.prose-container button:not([class]).icon-only{line-height:1;padding:--spacing(2)}.btn.icon-only .label,.prose button:not([class]).icon-only .label,.prose-container button:not([class]).icon-only .label{display:none}.btn.small,.prose button:not([class]).small,.prose-container button:not([class]).small{font-size:var(--icon-size-small)}.btn.small.icon-only,.prose button:not([class]).small.icon-only,.prose-container button:not([class]).small.icon-only{padding:--spacing(1.75)}.btn.small:not(.icon-only),.prose button:not([class]).small:not(.icon-only),.prose-container button:not([class]).small:not(.icon-only){padding:--spacing(.5) --spacing(4)}.btn.large,.prose button:not([class]).large,.prose-container button:not([class]).large{font-size:var(--icon-size-large)}.btn.large.icon-only,.prose button:not([class]).large.icon-only,.prose-container button:not([class]).large.icon-only{padding:--spacing(1.5)}.btn.large:not(.icon-only),.prose button:not([class]).large:not(.icon-only),.prose-container button:not([class]).large:not(.icon-only){padding:--spacing(1.5) --spacing(6)}.btn.loading,.prose button:not([class]).loading,.prose-container button:not([class]).loading{cursor:progress}.btn:not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible,.btn:not(:disabled,.disabled,[aria-disabled=true],.loading):hover,.prose button:not([class]):not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible,.prose button:not([class]):not(:disabled,.disabled,[aria-disabled=true],.loading):hover,.prose-container button:not([class]):not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible,.prose-container button:not([class]):not(:disabled,.disabled,[aria-disabled=true],.loading):hover{--btn-background-color:var(--btn-background-focus-color);background-size:100%,0 100%,100%;border-color:transparent}.btn:not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible:not(.borderless),.btn:not(:disabled,.disabled,[aria-disabled=true],.loading):hover:not(.borderless),.prose button:not([class]):not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible:not(.borderless),.prose button:not([class]):not(:disabled,.disabled,[aria-disabled=true],.loading):hover:not(.borderless),.prose-container button:not([class]):not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible:not(.borderless),.prose-container button:not([class]):not(:disabled,.disabled,[aria-disabled=true],.loading):hover:not(.borderless){box-shadow:var(--shadow)}.btn,.prose button:not([class]),.prose-container button:not([class]){@variant max-md{&.responsive-grow{padding:.5rem;width:100%}&.responsive-shrink{line-height:1;padding:--spacing(2)}&.responsive-shrink :not(.icon){display:none}}}}

package/dist/runtime/theme/css/brand/form.css

@@ -1,3 +1 @@
-@layer components{.input-label{display:block;-webkit-user-select:none;-moz-user-select:none;user-select:none}.input-label.required:after{color:var(--color-danger);content:"*";display:inline-block;margin-inline-start:--spacing(1)}.input-label.disabled{cursor:not-allowed;opacity:.6}.input-label-pair{display:flex;flex-direction:column;gap:--spacing(1);margin-block-end:--spacing(1)}.input-label-pair.label-after,.input-label-pair.label-before{align-items:center;flex-direction:row;gap:--spacing(3)}.input-label-pair.label-after .input-label,.input-label-pair.label-below .input-label{order:2}.input-validation{color:var(--color-danger);font-size:var(--text-sm);height:0;line-clamp:2}.input-field{display:flex;flex-direction:column}.input-control{flex-grow:1;padding:--spacing(2) --spacing(3)}.input-control::-moz-placeholder{color:var(--color-global-foreground-accent)}.input-control .placeholder,.input-control::placeholder{color:var(--color-global-foreground-accent)}.input-group{align-items:center;display:flex}.input-group.input-group-loading{cursor:wait}.input-group .input-group-addon{color:var(--color-global-foreground-accent);padding:0 --spacing(2)}.input-group button.input-group-addon{cursor:pointer}.input-group .input-control{outline:none}.input-control:where(:not(.input-group .input-control)),.input-group{background-color:var(--color-global-background);border-radius:--spacing(1);cursor:pointer;outline:solid 2px var(--color-background-scale-e);overflow:clip;transition:color,background-color,outline-color,box-shadow;transition-duration:calc(var(--default-transition-duration)*2);width:100%}.input-control:where(:not(.input-group .input-control)):where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))),.input-group:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)){cursor:default}.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))))),.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))))){cursor:not-allowed;opacity:.6}.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))))))):focus-within,.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))))))):hover,.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)))))):focus-within,.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)))))):hover{outline-color:var(--color-global-foreground-accent)}.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))))))):focus-within,.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)))))):focus-within{box-shadow:var(--shadow-heavy)}.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))))))):not(:has(>input[type=checkbox]),.input-button-bar):focus-within,.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)))))):not(:has(>input[type=checkbox]),.input-button-bar):focus-within{background-color:var(--color-background-scale-b)}.input-group:where(:has(input[type=checkbox])){flex-shrink:0;height:1.5rem;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:1.5rem}
-
-    /* !important is to overwrite what gets attached to i-* icons in the utility layer */.input-group:where(:has(input[type=checkbox])) span[class^=i-],.input-group:where(:has(input[type=checkbox])) svg{display:block!important;font-size:1rem;height:1rem!important;line-height:1;margin-left:.25rem;width:1rem!important}.input-group:where(:has(input[type=checkbox])) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:100%;inset:0;opacity:0;position:absolute;z-index:10}.input-group:where(:has(input[type=checkbox])) input:not(:disabled,[readonly]){cursor:pointer}.input-group:where(:has(input[type=checkbox])).toggle-switch{border-radius:1rem;width:2.5rem}.input-group:where(:has(input[type=checkbox])).toggle-switch:has(:checked) .slider:before{background-color:var(--color-global-foreground);transform:translateX(1rem)}.input-group:where(:has(input[type=checkbox])).toggle-switch .slider{border-radius:1rem;inset:0;position:absolute}.input-group:where(:has(input[type=checkbox])).toggle-switch .slider:before{background-color:var(--color-background-scale-d);border-radius:var(--radius-full);box-shadow:var(--shadow-md);content:"";height:1rem;left:.25rem;position:absolute;top:.25rem;transition:transform,background-color;transition-duration:var(--default-transition-duration);width:1rem}.input-menu .input-control,.input-menu .input-group{background-color:transparent}.input-menu .input-group:where(:has(input[type=checkbox])){height:1.2rem;width:1.2rem}.input-menu .input-group:where(:has(input[type=checkbox])) span[class^=i-],.input-menu .input-group:where(:has(input[type=checkbox])) svg{margin-left:.1rem;margin-top:-.1rem}[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):focus-within,[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):hover{outline-color:var(--color-background-scale-e)!important}[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):focus-within input,[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):hover input{cursor:not-allowed!important}.input-menu-header{align-items:center;display:flex;gap:--spacing(2)}.input-menu-header .input-menu-filter{align-items:center;color:var(--color-global-foreground-accent);display:flex;flex-grow:1;transition:color var(--default-transition-duration) var(--default-transition-timing-function)}.input-menu-header .input-menu-filter input{flex-grow:1;outline:none;padding:--spacing(.5) 0}.input-menu-header .input-menu-filter input::-moz-placeholder{color:var(--color-global-foreground-accent)}.input-menu-header .input-menu-filter input::placeholder{color:var(--color-global-foreground-accent)}.input-menu-header .input-menu-filter:focus-within{color:var(--color-global-foreground)}.input-button-bar{gap:--spacing(.5);padding:--spacing(.5);width:-moz-fit-content;width:fit-content}.input-button-bar button{cursor:pointer;padding:--spacing(1.5) --spacing(2);transition:background-color var(--default-transition-duration) var(--default-transition-timing-function)}.input-button-bar button[aria-pressed=true]{background-color:var(--color-background-scale-f)}.input-button-bar button:where(.readonly button){cursor:default}.input-button-bar button:disabled:not(:where(.readonly button)){cursor:not-allowed;opacity:.6}.input-button-bar button:not(:disabled,:where(.readonly button),[aria-pressed=true]):focus-visible,.input-button-bar button:not(:disabled,:where(.readonly button),[aria-pressed=true]):hover{background-color:var(--color-background-scale-b)}.input-button-bar button:first-child{border-bottom-left-radius:var(--radius-sm);border-top-left-radius:var(--radius-sm)}.input-button-bar button:last-child{border-bottom-right-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}}
+@layer components{.input-label{display:block;-webkit-user-select:none;-moz-user-select:none;user-select:none}.input-label.required:after{color:var(--color-danger);content:"*";display:inline-block;margin-inline-start:--spacing(1)}.input-label.disabled{cursor:not-allowed;opacity:.6}.input-label:not(fieldset .input-label,.label-before .input-label,.label-after .input-label),.input-label:where(fieldset legend.input-label){font-size:var(--text-lg);font-variant:small-caps;letter-spacing:.11rem}.input-label-pair{display:flex;flex-direction:column;gap:--spacing(1);margin-block-end:--spacing(1)}.input-label-pair.label-after,.input-label-pair.label-before{align-items:center;flex-direction:row;gap:--spacing(3)}.input-label-pair.label-after .input-label,.input-label-pair.label-below .input-label{order:2}.input-validation{color:var(--color-danger);font-size:var(--text-sm);height:0;line-clamp:2}.input-field{display:flex;flex-direction:column}.input-control{flex-grow:1;padding:--spacing(2) --spacing(3)}.input-control::-moz-placeholder{color:var(--color-global-foreground-accent)}.input-control .placeholder,.input-control::placeholder{color:var(--color-global-foreground-accent)}.input-group{align-items:center;display:flex}.input-group.input-group-loading{cursor:wait}.input-group .input-group-addon{color:var(--color-global-foreground-accent);padding:--spacing(1.5) --spacing(2)}.input-group button.input-group-addon{cursor:pointer}.input-group .input-control{outline:none}.input-control:where(:not(.input-group .input-control)),.input-group{background-color:var(--color-global-background);border-radius:--spacing(1);cursor:pointer;outline:solid 2px var(--color-background-scale-e);overflow:clip;transition:color,background-color,outline-color,box-shadow;transition-duration:calc(var(--default-transition-duration)*2);width:100%}.input-control:where(:not(.input-group .input-control)):where(input[type=text],textarea),.input-group:where(input[type=text],textarea){cursor:text}.input-control:where(:not(.input-group .input-control)):where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))),.input-group:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)){cursor:default}.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))))),.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))))){cursor:not-allowed;opacity:.6}.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))))))):focus-within,.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))))))):hover,.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)))))):focus-within,.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)))))):hover{outline-color:var(--color-global-foreground-accent)}.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))))))):focus-within,.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)))))):focus-within{box-shadow:var(--shadow-heavy)}.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))))))):not(:has(>input[type=checkbox]),.input-button-bar):focus-within,.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)))))):not(:has(>input[type=checkbox]),.input-button-bar):focus-within{background-color:var(--color-background-scale-b)}.input-group:where(:has(input[type=checkbox])),.input-group:where(:has(input[type=radio])){flex-shrink:0;height:1.5rem;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:1.5rem}.input-group:where(:has(input[type=checkbox])):has(input[type=radio]),.input-group:where(:has(input[type=radio])):has(input[type=radio]){border-radius:var(--radius-full);height:1.2rem;width:1.2rem}.input-group:where(:has(input[type=checkbox])):has(input[type=radio])>div,.input-group:where(:has(input[type=radio])):has(input[type=radio])>div{border-radius:var(--radius-full);height:.7rem;left:.25rem;position:absolute;top:.25rem;transition:box-shadow,background-color;transition-duration:var(--default-transition-duration);width:.7rem}.input-group:where(:has(input[type=checkbox])):has(input[type=radio]):has(:checked)>div,.input-group:where(:has(input[type=radio])):has(input[type=radio]):has(:checked)>div{background-color:var(--color-global-foreground);box-shadow:var(--shadow-md)}.input-group:where(:has(input[type=checkbox])) span[class^=i-],.input-group:where(:has(input[type=checkbox])) svg,.input-group:where(:has(input[type=radio])) span[class^=i-],.input-group:where(:has(input[type=radio])) svg{display:block!important;font-size:1rem;height:1rem!important;line-height:1;margin-left:.25rem;width:1rem!important}.input-group:where(:has(input[type=checkbox])) input,.input-group:where(:has(input[type=radio])) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:100%;inset:0;opacity:0;position:absolute;z-index:10}.input-group:where(:has(input[type=checkbox])) input:not(:disabled,[readonly]),.input-group:where(:has(input[type=radio])) input:not(:disabled,[readonly]){cursor:pointer}.input-group:where(:has(input[type=checkbox])).toggle-switch,.input-group:where(:has(input[type=radio])).toggle-switch{border-radius:1rem;width:2.5rem}.input-group:where(:has(input[type=checkbox])).toggle-switch:has(:checked) .slider:before,.input-group:where(:has(input[type=radio])).toggle-switch:has(:checked) .slider:before{background-color:var(--color-global-foreground);transform:translateX(1rem)}.input-group:where(:has(input[type=checkbox])).toggle-switch .slider,.input-group:where(:has(input[type=radio])).toggle-switch .slider{border-radius:1rem;inset:0;position:absolute}.input-group:where(:has(input[type=checkbox])).toggle-switch .slider:before,.input-group:where(:has(input[type=radio])).toggle-switch .slider:before{background-color:var(--color-background-scale-d);border-radius:var(--radius-full);box-shadow:var(--shadow-md);content:"";height:1rem;left:.25rem;position:absolute;top:.25rem;transition:transform,background-color;transition-duration:var(--default-transition-duration);width:1rem}.input-menu .input-control,.input-menu .input-group{background-color:transparent}.input-menu .input-group:where(:has(input[type=checkbox])){height:1.2rem;width:1.2rem}.input-menu .input-group:where(:has(input[type=checkbox])) span[class^=i-],.input-menu .input-group:where(:has(input[type=checkbox])) svg{margin-left:.1rem;margin-top:-.1rem}[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):focus-within,[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):hover{outline-color:var(--color-background-scale-e)!important}[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):focus-within input,[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):hover input{cursor:not-allowed!important}.input-menu-header{align-items:center;display:flex;gap:--spacing(2)}.input-menu-header .input-menu-filter{align-items:center;color:var(--color-global-foreground-accent);display:flex;flex-grow:1;transition:color var(--default-transition-duration) var(--default-transition-timing-function)}.input-menu-header .input-menu-filter input{flex-grow:1;outline:none;padding:--spacing(.5) 0}.input-menu-header .input-menu-filter input::-moz-placeholder{color:var(--color-global-foreground-accent)}.input-menu-header .input-menu-filter input::placeholder{color:var(--color-global-foreground-accent)}.input-menu-header .input-menu-filter:focus-within{color:var(--color-global-foreground)}.input-button{cursor:pointer;padding:--spacing(1.5) --spacing(2);transition:background-color var(--default-transition-duration) var(--default-transition-timing-function)}.input-button[aria-pressed=true]{background-color:var(--color-background-scale-f)}.input-button:where(.readonly .input-button){cursor:default}.input-button:where(:disabled,.disabled .input-button):not(:where(.readonly .input-button)){cursor:not-allowed;opacity:.6}.input-button:not(:disabled,:where(.disabled .input-button),:where(.readonly .input-button),[aria-pressed=true]):focus-visible,.input-button:not(:disabled,:where(.disabled .input-button),:where(.readonly .input-button),[aria-pressed=true]):hover{background-color:var(--color-background-scale-b)}.input-button-bar{gap:--spacing(.5);padding:--spacing(.5);width:-moz-fit-content;width:fit-content}.input-button-bar button:first-child{border-bottom-left-radius:var(--radius-sm);border-top-left-radius:var(--radius-sm)}.input-button-bar button:last-child{border-bottom-right-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}}

package/dist/runtime/theme/css/brand/typography.css

@@ -1 +1 @@
-@layer components{:root{--typo-h6:clamp(var(--text-base),2.500vw,1.2rem);--typo-h5:clamp(var(--typo-h6),3.000vw,1.44rem);--typo-h4:clamp(var(--typo-h5),3.600vw,1.728rem);--typo-h3:clamp(var(--typo-h4),4.320vw,2.0736rem);--typo-h2:clamp(var(--typo-h3),5.184vw,2.4883rem);--typo-h1:clamp(var(--typo-h2),6.221vw,2.986rem);--typo-h1-hero:clamp(var(--typo-h1),9.331vw,4.479rem);--typo-p-hero:clamp(1.25rem,3.125vw,1.5rem)}.font-variant-small-caps{font-variant:small-caps}.icon-inline{align-items:center;display:inline-flex}.icon-inline:before{content:"​";display:block}.prose-container,.prose-layout-container{margin-left:auto;margin-right:auto;max-width:var(--breakpoint-md);width:100%}.prose-container:first-child>:first-child,.prose:first-child>:first-child{margin-block-start:0}.prose :is(section:last-child,th,td,td ol,td ul,figure,figcaption,.grid>*)>:last-child,.prose-container :is(section:last-child,th,td,td ol,td ul,figure,figcaption,.grid>*)>:last-child,.prose-container:last-child>:last-child,.prose:last-child>:last-child{margin-block-end:0}:where(.h1,.h2,.h3,.h4,.h5,.h6).prose,:where(.prose-container,.prose) :where(h1,h2,h3,h4,h5,h6){margin-block-end:.4lh;margin-block-start:.9lh;text-wrap:pretty}:where(.p,.pre,.table,.ol,.ul,.img,.figure,.blockquote).prose,:where(.prose-container,.prose) :where(p,pre,table,ol,ul,img,figure,blockquote){margin-block-end:1lh;text-wrap:pretty}:where(.prose-container,.prose) hr+*{margin-block-start:0}:where(.prose-container,.prose) :has(+hr){margin-block-end:0}.hr,.prose hr,.prose-container hr{border-color:var(--color-global-background-accent);margin-block-end:1lh;margin-block-start:1lh}.h1,.prose h1,.prose-container h1{color:color-mix(in srgb-linear,var(--custom-accent-color) 40%,currentColor);font-size:var(--typo-h1);letter-spacing:.0025em;line-height:1.125}.h1.hero,.prose h1.hero,.prose-container h1.hero{font-size:var(--typo-h1-hero);line-height:1}.h2,.prose h2,.prose-container h2{font-size:var(--typo-h2);font-weight:var(--font-weight-extralight);letter-spacing:.0108em;line-height:1.1765}.h3,.prose h3,.prose-container h3{font-size:var(--typo-h3);font-weight:var(--font-weight-extralight);letter-spacing:.022em;line-height:1.2}.h4,.prose h4,.prose-container h4{font-size:var(--typo-h4);letter-spacing:.035em;line-height:1.25}.h5,.prose h5,.prose-container h5{font-size:var(--typo-h5);letter-spacing:.0532em;line-height:1.28}.h6,.prose h6,.prose-container h6{font-size:var(--typo-h6);letter-spacing:.0532em;line-height:1.28}.p,.prose p,.prose-container p{font-size:1rem;letter-spacing:.03em;line-height:1.5}.p.hero,.prose p.hero,.prose-container p.hero{font-size:var(--typo-p-hero);line-height:1.3}.note{color:var(--color-foreground-scale-g);font-size:.95rem!important;letter-spacing:.05rem!important;line-height:1.5!important}.code,.pre,.prose code,.prose pre,.prose-container code,.prose-container pre{border-radius:.25rem;color:var(--color-foreground-scale-e);font-family:monospace;font-size:.9rem;font-weight:bolder;outline:dashed 2px var(--color-background-scale-g);outline-offset:-2px;padding:.2rem .25rem;transition:color,outline-color;transition-duration:.15s}.code:hover,.pre:hover,.prose code:hover,.prose pre:hover,.prose-container code:hover,.prose-container pre:hover{color:var(--color-global-foreground)}.pre,.prose pre,.prose-container pre{padding:.5rem .75rem}.prose table,.prose-container table,.table{border-collapse:collapse}.prose table td,.prose table th,.prose-container table td,.prose-container table th,.table td,.table th{border:1px solid var(--color-background-scale-f);padding:.5rem;vertical-align:top}.prose table tr:nth-child(2n),.prose-container table tr:nth-child(2n),.table tr:nth-child(2n){background-color:var(--color-background-scale-a)}.prose table th,.prose-container table th,.table th{background-color:var(--color-background-scale-c);letter-spacing:.1em;text-align:start}.ol,.prose ol,.prose ul,.prose-container ol,.prose-container ul,.ul{list-style-type:disc;padding-inline-start:1.25rem}.ol li ol,.ol li ul,.prose ol li ol,.prose ol li ul,.prose ul li ol,.prose ul li ul,.prose-container ol li ol,.prose-container ol li ul,.prose-container ul li ol,.prose-container ul li ul,.ul li ol,.ul li ul{padding-inline-start:2rem}.ol li:not(:last-child) ol:not(p+ol),.ol li:not(:last-child) ul:not(p+ul),.prose ol li:not(:last-child) ol:not(p+ol),.prose ol li:not(:last-child) ul:not(p+ul),.prose ul li:not(:last-child) ol:not(p+ol),.prose ul li:not(:last-child) ul:not(p+ul),.prose-container ol li:not(:last-child) ol:not(p+ol),.prose-container ol li:not(:last-child) ul:not(p+ul),.prose-container ul li:not(:last-child) ol:not(p+ol),.prose-container ul li:not(:last-child) ul:not(p+ul),.ul li:not(:last-child) ol:not(p+ol),.ul li:not(:last-child) ul:not(p+ul){margin-block-end:0}.ol,.prose ol,.prose-container ol{counter-reset:item;list-style-type:none}.ol>li,.prose ol>li,.prose-container ol>li{counter-increment:item}.ol>li::marker,.prose ol>li::marker,.prose-container ol>li::marker{content:counters(item,".") ". "}.img,.prose img,.prose-container img{border:2px solid var(--color-background-scale-e);border-radius:.25rem;margin-left:auto;margin-right:auto;max-height:450px;width:auto}.figure,.prose figure,.prose-container figure{display:table;margin-left:auto;margin-right:auto}.figure img,.prose figure img,.prose-container figure img{display:block;margin:0}.figure img:has(+figcaption),.prose figure img:has(+figcaption),.prose-container figure img:has(+figcaption){border-bottom-left-radius:0;border-bottom-right-radius:0}.figure figcaption,.prose figure figcaption,.prose-container figure figcaption{background-color:var(--color-background-scale-e);border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;caption-side:bottom;display:table-caption;font-size:.85rem;padding:.5rem;text-align:center}.figure figcaption>*,.prose figure figcaption>*,.prose-container figure figcaption>*{font-size:.85rem}.blockquote,.prose blockquote,.prose-container blockquote{background-color:var(--color-background-scale-b);border-radius:.25rem;font-family:serif;font-size:1.1rem;padding:.25rem .75rem}.prose-numbering-2,.prose-numbering-3,.prose-numbering-4,.prose-numbering-5,.prose-numbering-6{counter-reset:l1}:where(.prose-numbering-2,.prose-numbering-3,.prose-numbering-4,.prose-numbering-5,.prose-numbering-6) h2{counter-reset:l2}:where(.prose-numbering-2,.prose-numbering-3,.prose-numbering-4,.prose-numbering-5,.prose-numbering-6) h2:before{content:counter(l1) ". ";counter-increment:l1}:where(.prose-numbering-3,.prose-numbering-4,.prose-numbering-5,.prose-numbering-6) h3{counter-reset:l3}:where(.prose-numbering-3,.prose-numbering-4,.prose-numbering-5,.prose-numbering-6) h3:before{content:counter(l1) "." counter(l2) ". ";counter-increment:l2}:where(.prose-numbering-4,.prose-numbering-5,.prose-numbering-6) h4{counter-reset:l4}:where(.prose-numbering-4,.prose-numbering-5,.prose-numbering-6) h4:before{content:counter(l1) "." counter(l2) "." counter(l3) ". ";counter-increment:l3}:where(.prose-numbering-5,.prose-numbering-6) h5{counter-reset:l5}:where(.prose-numbering-5,.prose-numbering-6) h5:before{content:counter(l1) "." counter(l2) "." counter(l3) "." counter(l4) ". ";counter-increment:l4}.prose-numbering-6 h6{counter-reset:l6}.prose-numbering-6 h6:before{content:counter(l1) "." counter(l2) "." counter(l3) "." counter(l4) "." counter(l5) ". ";counter-increment:l5}}
+@utility prose-layout-container{margin-left:auto;margin-right:auto;max-width:var(--container-3xl);width:100%;&.sm{max-width:var(--container-md)}}@layer components{:root{--typo-h6:clamp(var(--text-base),2.500vw,1.2rem);--typo-h5:clamp(var(--typo-h6),3.000vw,1.44rem);--typo-h4:clamp(var(--typo-h5),3.600vw,1.728rem);--typo-h3:clamp(var(--typo-h4),4.320vw,2.0736rem);--typo-h2:clamp(var(--typo-h3),5.184vw,2.4883rem);--typo-h1:clamp(var(--typo-h2),6.221vw,2.986rem);--typo-h1-hero:clamp(var(--typo-h1),9.331vw,4.479rem);--typo-p-hero:clamp(1.25rem,3.125vw,1.5rem)}.font-variant-small-caps{font-variant:small-caps}.icon-inline{align-items:center;display:inline-flex}.icon-inline:before{content:"​";display:block}.prose-container{@apply prose-layout-container}.prose-container:where(:not(.prose+.prose-container,.prose-container+.prose-container))>:first-child,.prose-container:where(:not(.prose+.prose-container,.prose-container+.prose-container))>:first-child>:first-child,.prose:where(:not(.prose+.prose,.prose-container+.prose))>:first-child,.prose:where(:not(.prose+.prose,.prose-container+.prose))>:first-child>:first-child{margin-block-start:0}.prose-container>:last-child,.prose-container>:last-child>:last-child,.prose>:last-child,.prose>:last-child>:last-child{margin-block-end:0}:where(.h1,.h2,.h3,.h4,.h5,.h6).prose,:where(.prose-container,.prose) :where(h1,h2,h3,h4,h5,h6){margin-block-end:.4lh;margin-block-start:.9lh;text-wrap:pretty}:where(.p,.pre,.table,.ol,.ul,.img,.figure,.blockquote).prose,:where(.prose-container,.prose) :where(p,pre,table,ol,ul,img,figure,blockquote){margin-block-end:1lh;text-wrap:pretty}:where(.prose-container,.prose) hr+*{margin-block-start:0}:where(.prose-container,.prose) :has(+hr){margin-block-end:0}.hr,.prose hr,.prose-container hr{border-color:var(--color-global-background-accent);margin-block-end:1lh;margin-block-start:1lh}.h1,.prose h1,.prose-container h1{color:color-mix(in srgb-linear,var(--custom-accent-color) 40%,currentColor);font-size:var(--typo-h1);letter-spacing:.0025em;line-height:1.125}.h1.hero,.prose h1.hero,.prose-container h1.hero{font-size:var(--typo-h1-hero);line-height:1}.h2,.prose h2,.prose-container h2{font-size:var(--typo-h2);font-weight:var(--font-weight-extralight);letter-spacing:.0108em;line-height:1.1765}.h3,.prose h3,.prose-container h3{font-size:var(--typo-h3);font-weight:var(--font-weight-extralight);letter-spacing:.022em;line-height:1.2}.h4,.prose h4,.prose-container h4{font-size:var(--typo-h4);letter-spacing:.035em;line-height:1.25}.h5,.prose h5,.prose-container h5{font-size:var(--typo-h5);letter-spacing:.0532em;line-height:1.28}.h6,.prose h6,.prose-container h6{font-size:var(--typo-h6);letter-spacing:.0532em;line-height:1.28}.p,.prose p,.prose-container p{font-size:1rem;letter-spacing:.03em;line-height:1.5}.p.hero,.prose p.hero,.prose-container p.hero{font-size:var(--typo-p-hero);line-height:1.3}.note{color:var(--color-foreground-scale-g);font-size:.95rem!important;letter-spacing:.05rem!important;line-height:1.5!important}.code,.pre,.prose code,.prose pre,.prose-container code,.prose-container pre{border-radius:.25rem;color:var(--color-foreground-scale-e);font-family:monospace;font-size:.9rem;font-weight:bolder;outline:dashed 2px var(--color-background-scale-g);outline-offset:-2px;padding:.2rem .25rem;transition:color,outline-color;transition-duration:.15s}.code:hover,.pre:hover,.prose code:hover,.prose pre:hover,.prose-container code:hover,.prose-container pre:hover{color:var(--color-global-foreground)}.pre,.prose pre,.prose-container pre{padding:.5rem .75rem}.prose table,.prose-container table,.table{border-collapse:collapse}.prose table td,.prose table th,.prose-container table td,.prose-container table th,.table td,.table th{border:1px solid var(--color-background-scale-f);padding:.5rem;vertical-align:top}.prose table tr:nth-child(2n),.prose-container table tr:nth-child(2n),.table tr:nth-child(2n){background-color:var(--color-background-scale-a)}.prose table th,.prose-container table th,.table th{background-color:var(--color-background-scale-c);font-weight:var(--font-weight-normal);letter-spacing:.1em;text-align:start}.prose table td>:last-child,.prose-container table td>:last-child,.table td>:last-child{margin-block-end:0}.ol,.prose ol,.prose ul,.prose-container ol,.prose-container ul,.ul{list-style-type:disc;padding-inline-start:1.25rem}.ol li ol,.ol li ul,.prose ol li ol,.prose ol li ul,.prose ul li ol,.prose ul li ul,.prose-container ol li ol,.prose-container ol li ul,.prose-container ul li ol,.prose-container ul li ul,.ul li ol,.ul li ul{padding-inline-start:2rem}.ol li:not(:last-child) ol:not(p+ol),.ol li:not(:last-child) ul:not(p+ul),.prose ol li:not(:last-child) ol:not(p+ol),.prose ol li:not(:last-child) ul:not(p+ul),.prose ul li:not(:last-child) ol:not(p+ol),.prose ul li:not(:last-child) ul:not(p+ul),.prose-container ol li:not(:last-child) ol:not(p+ol),.prose-container ol li:not(:last-child) ul:not(p+ul),.prose-container ul li:not(:last-child) ol:not(p+ol),.prose-container ul li:not(:last-child) ul:not(p+ul),.ul li:not(:last-child) ol:not(p+ol),.ul li:not(:last-child) ul:not(p+ul){margin-block-end:0}.ol,.prose ol,.prose-container ol{counter-reset:item;list-style-type:none}.ol>li,.prose ol>li,.prose-container ol>li{counter-increment:item}.ol>li::marker,.prose ol>li::marker,.prose-container ol>li::marker{content:counters(item,".") ". "}.img,.prose img,.prose-container img{border:2px solid var(--color-background-scale-e);border-radius:.25rem;margin-left:auto;margin-right:auto;max-height:450px;width:auto}.figure,.prose figure,.prose-container figure{display:table;margin-left:auto;margin-right:auto}.figure img,.prose figure img,.prose-container figure img{display:block;margin:0}.figure img:has(+figcaption),.prose figure img:has(+figcaption),.prose-container figure img:has(+figcaption){border-bottom-left-radius:0;border-bottom-right-radius:0}.figure figcaption,.prose figure figcaption,.prose-container figure figcaption{background-color:var(--color-background-scale-e);border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;caption-side:bottom;display:table-caption;font-size:.85rem;padding:.5rem;text-align:center}.figure figcaption>*,.prose figure figcaption>*,.prose-container figure figcaption>*{font-size:.85rem}.figure figcaption>:last-child,.prose figure figcaption>:last-child,.prose-container figure figcaption>:last-child{margin-block-end:0}.blockquote,.prose blockquote,.prose-container blockquote{background-color:var(--color-background-scale-b);border-radius:.25rem;font-family:serif;font-size:1.1rem;padding:.25rem .75rem}.prose-numbering-2,.prose-numbering-3,.prose-numbering-4,.prose-numbering-5,.prose-numbering-6{counter-reset:l1}:where(.prose-numbering-2,.prose-numbering-3,.prose-numbering-4,.prose-numbering-5,.prose-numbering-6) h2{counter-reset:l2}:where(.prose-numbering-2,.prose-numbering-3,.prose-numbering-4,.prose-numbering-5,.prose-numbering-6) h2:before{content:counter(l1) ". ";counter-increment:l1}:where(.prose-numbering-3,.prose-numbering-4,.prose-numbering-5,.prose-numbering-6) h3{counter-reset:l3}:where(.prose-numbering-3,.prose-numbering-4,.prose-numbering-5,.prose-numbering-6) h3:before{content:counter(l1) "." counter(l2) ". ";counter-increment:l2}:where(.prose-numbering-4,.prose-numbering-5,.prose-numbering-6) h4{counter-reset:l4}:where(.prose-numbering-4,.prose-numbering-5,.prose-numbering-6) h4:before{content:counter(l1) "." counter(l2) "." counter(l3) ". ";counter-increment:l3}:where(.prose-numbering-5,.prose-numbering-6) h5{counter-reset:l5}:where(.prose-numbering-5,.prose-numbering-6) h5:before{content:counter(l1) "." counter(l2) "." counter(l3) "." counter(l4) ". ";counter-increment:l4}.prose-numbering-6 h6{counter-reset:l6}.prose-numbering-6 h6:before{content:counter(l1) "." counter(l2) "." counter(l3) "." counter(l4) "." counter(l5) ". ";counter-increment:l5}}

package/dist/runtime/utils/form.d.ts

@@ -1,5 +1,5 @@
 import type { FormFieldState } from '@primevue/forms';
-import { type InjectionKey } from 'vue';
+import { type InjectionKey, type MaybeRefOrGetter } from 'vue';
 import type { FormInstance, FormValues } from '../types/form.js';
 /**
  * The injection key for acquiring a {@link FormInstance} object within the
@@ -24,11 +24,40 @@ export declare function provideFormInstance(): FormInstance;
 /**
  * Injects the stateful object provided by an ancestor Form instance. If not
  * available, a dummy state object is generated.
+ *
+ * @private
  */
 export declare function injectFormInstance(): FormInstance;
 /**
  * Takes a Primevue Form's `states` object, and extracts the current values
  * of each named property. In doing so, it will deref proxies, and create
  * shallow clones of any arrays/objects it encounters.
+ *
+ * @private
  */
 export declare function getValuesFromFormState<T extends FormValues = FormValues>(state: Record<string, FormFieldState>): T;
+/**
+ * @private
+ */
+export type UseOptionListMethodsConfig = {
+    optionLabel?: string | ((data: unknown) => string);
+    optionValue?: string | ((data: unknown) => string);
+    optionIcon?: string | ((data: unknown) => string);
+    optionDisabled?: string | ((data: unknown) => boolean);
+    optionDataKey?: string;
+};
+/**
+ * Creates a set of common methods for interacting with an array of "options" like what
+ * gets provided to a Select or RadioGroup.
+ *
+ * @private
+ */
+export declare function useOptionListMethods(config: MaybeRefOrGetter<UseOptionListMethodsConfig>): import("vue").ComputedRef<{
+    getOptionLabel: (option: unknown) => string;
+    getOptionValue: (option: unknown) => unknown;
+    getOptionIcon: (option: unknown) => string | undefined;
+    getOptionDisabled: (option: unknown) => boolean;
+    getOptionRenderKey: (option: unknown) => string | number | undefined;
+    getOptionIndex: (needle: unknown, haystack: unknown) => number;
+    getOptionByValue: <T>(needle: unknown, haystack: MaybeRefOrGetter<T[] | undefined>) => T | undefined;
+}>;

package/dist/runtime/utils/form.js

@@ -1,5 +1,8 @@
+import { equals, resolveFieldData } from "@primeuix/utils/object";
+import { isNumber } from "@resee-movies/utilities/numbers/is-number";
 import { isObjectLike } from "@resee-movies/utilities/objects/is-object-like";
-import { inject, provide, ref, toRaw, toValue } from "vue";
+import { isString } from "@resee-movies/utilities/strings/is-string";
+import { computed, inject, provide, ref, toRaw, toValue } from "vue";
 export const FormSymbol = Symbol("form");
 export function createFormInstance() {
   return {
@@ -32,3 +35,54 @@ export function getValuesFromFormState(state) {
   }
   return result;
 }
+export function useOptionListMethods(config) {
+  return computed(() => {
+    const {
+      optionLabel,
+      optionValue,
+      optionIcon,
+      optionDisabled,
+      optionDataKey
+    } = toValue(config);
+    const getOptionLabel = (option) => {
+      return String(optionLabel ? resolveFieldData(option, optionLabel) : option);
+    };
+    const getOptionValue = (option) => {
+      return optionValue ? resolveFieldData(option, optionValue) : option;
+    };
+    const getOptionIcon = (option) => {
+      return optionIcon ? String(resolveFieldData(option, optionIcon)) : void 0;
+    };
+    const getOptionDisabled = (option) => {
+      return Boolean(optionDisabled ? resolveFieldData(option, optionDisabled) : false);
+    };
+    const getOptionRenderKey = (option) => {
+      const result = optionDataKey ? resolveFieldData(option, optionDataKey) : getOptionLabel(option);
+      return isString(result) || isNumber(result) ? result : void 0;
+    };
+    const getOptionIndex = (needle, haystack) => {
+      const rawHaystack = toValue(haystack);
+      const optionValue2 = getOptionValue(needle);
+      const equalityKey = optionValue2 ? void 0 : optionDataKey;
+      if (Array.isArray(rawHaystack)) {
+        return rawHaystack.findIndex((entry) => equals(entry, optionValue2, equalityKey));
+      }
+      return equals(rawHaystack, optionValue2, equalityKey) ? 0 : -1;
+    };
+    const getOptionByValue = (needle, haystack) => {
+      const equalityKey = optionValue ? void 0 : optionDataKey;
+      return toValue(haystack)?.find(
+        (option) => equals(getOptionValue(option), needle, equalityKey)
+      );
+    };
+    return {
+      getOptionLabel,
+      getOptionValue,
+      getOptionIcon,
+      getOptionDisabled,
+      getOptionRenderKey,
+      getOptionIndex,
+      getOptionByValue
+    };
+  });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@resee-movies/nuxt-ux",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "The next-gen user experience library for ReSee Movies - currently in development. ",
   "repository": {
     "url": "https://github.com/ReSee-Movies/nuxt-ux.git"