@threadlabs/looma 0.9.2 → 0.10.1

package/vanilla/UiRadioGroup.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-radio-group/ui-radio-group.js";
 import "../styles/ui-radio-group.css";
 
-const definition = {...{"contract":{"tag":"ui-radio-group","props":{"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"label":{"type":"string","required":false,"target":{"attribute":"label"},"default":"Options"},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"orientation":{"type":{"enum":["horizontal","vertical"]},"required":false,"target":{"attribute":"orientation"},"default":"horizontal"},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"value":{"type":"string","required":false,"target":{"attribute":"value"},"default":""}}},"template":{"kind":"element","name":"fieldset","attributes":[{"kind":"literal","name":"role","value":"radiogroup"}],"children":[{"kind":"element","name":"legend","attributes":[],"children":[{"kind":"element","name":"template","attributes":[{"kind":"directive","name":"value","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"children":[]}]},{"kind":"slot"}]},"declarations":[{"kind":"state","name":"internalValue","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"event","name":"select","type":"object({ value: string, previousValue: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"change","type":"object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"fieldset","choices":["fieldset"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-radio-group","props":{"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"label":{"type":"string","required":false,"target":{"attribute":"label"},"default":"Options"},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"orientation":{"type":{"enum":["horizontal","vertical"]},"required":false,"target":{"attribute":"orientation"},"default":"horizontal"},"required":{"type":"boolean","required":false,"target":{"attribute":"aria-required"},"default":false},"value":{"type":"string","required":false,"target":{"attribute":"value"},"default":""}}},"template":{"kind":"element","name":"fieldset","attributes":[{"kind":"literal","name":"role","value":"radiogroup"},{"kind":"attribute","name":"aria-required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}}],"children":[{"kind":"element","name":"legend","attributes":[],"children":[{"kind":"element","name":"template","attributes":[{"kind":"directive","name":"value","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"children":[]}]},{"kind":"slot"}]},"declarations":[{"kind":"state","name":"internalValue","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"event","name":"select","type":"object({ value: string, previousValue: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"change","type":"object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"fieldset","choices":["fieldset"]}},source:{file:import.meta.url},css:""};
 
 export function createUiRadioGroup(options = {}) {
   const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
@@ -14,6 +14,12 @@ export function createUiRadioGroup(options = {}) {
     element.setAttribute(name, value === true ? "" : String(value));
   }
   if (!element.hasAttribute("role")) element.setAttribute("role", "radiogroup");
+  const value0 = componentProps["required"] === undefined ? false : componentProps["required"];
+  if (typeof value0 === "boolean") element.setAttribute("aria-required", String(value0));
+  else element.removeAttribute("aria-required");
+  const value1 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
+  if (value1 === true) element.setAttribute("disabled", "");
+  else element.removeAttribute("disabled");
   element.setAttribute("data-component", "ui-radio-group");
   const element0 = document.createElement("legend");
   const element1 = document.createElement("template");

package/vanilla/UiSearchResultRow.js

@@ -2,7 +2,7 @@
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import "../styles/ui-search-result-row.css";
 
-const definition = {...{"contract":{"tag":"ui-search-result-row","props":{"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"selected":{"type":"boolean","required":false,"target":{"attribute":"selected"},"default":false}}},"template":{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"leading"}],"children":[{"kind":"slot","fallback":[],"name":"leading"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"content"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"title"}],"children":[{"kind":"slot","fallback":[],"name":"title"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"meta"}],"children":[{"kind":"slot","fallback":[],"name":"meta"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"excerpt"}],"children":[{"kind":"slot","fallback":[],"name":"excerpt"}]}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"trailing"}],"children":[{"kind":"slot","fallback":[],"name":"trailing"}]}]},"declarations":[],"root":{"kind":"native","element":"button","choices":["button"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-search-result-row","props":{"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"selected":{"type":"boolean","required":false,"target":{"attribute":"aria-current"},"default":false}}},"template":{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"aria-current","expression":"selected","expressionPlan":{"source":"selected","ast":{"kind":"id","name":"selected"},"dependencies":["selected"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"leading"}],"children":[{"kind":"slot","fallback":[],"name":"leading"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"content"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"title"}],"children":[{"kind":"slot","fallback":[],"name":"title"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"meta"}],"children":[{"kind":"slot","fallback":[],"name":"meta"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"excerpt"}],"children":[{"kind":"slot","fallback":[],"name":"excerpt"}]}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"trailing"}],"children":[{"kind":"slot","fallback":[],"name":"trailing"}]}]},"declarations":[],"root":{"kind":"native","element":"button","choices":["button"]}},source:{file:import.meta.url},css:""};
 
 export function createUiSearchResultRow(options = {}) {
   const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
@@ -16,6 +16,9 @@ export function createUiSearchResultRow(options = {}) {
   const value0 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
   if (value0 === true) element.setAttribute("disabled", "");
   else element.removeAttribute("disabled");
+  const value1 = componentProps["selected"] === undefined ? false : componentProps["selected"];
+  if (typeof value1 === "boolean") element.setAttribute("aria-current", String(value1));
+  else element.removeAttribute("aria-current");
   element.setAttribute("data-component", "ui-search-result-row");
   const element0 = document.createElement("span");
   element0.setAttribute("class", "leading");

package/vanilla/UiSwitch.d.ts

@@ -9,6 +9,7 @@ export interface UiSwitchElement extends HTMLLabelElement {
 export interface UiSwitchProps {
   checked?: boolean | null;
   disabled?: boolean | null;
+  name?: string | null;
   required?: boolean | null;
   value?: string | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;

package/vanilla/UiSwitch.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-switch/ui-switch.js";
 import "../styles/ui-switch.css";
 
-const definition = {...{"contract":{"tag":"ui-switch","props":{"checked":{"type":"boolean","required":false,"target":{"attribute":"checked"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"value":{"type":"string","required":false,"target":{"attribute":"value"},"default":"on"}}},"template":{"kind":"element","name":"label","attributes":[],"children":[{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"type","value":"checkbox"},{"kind":"literal","name":"role","value":"switch"},{"kind":"property","key":"checked","name":"checked","expression":"internalChecked","expressionPlan":{"source":"internalChecked","ast":{"kind":"id","name":"internalChecked"},"dependencies":["internalChecked"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}}],"children":[],"ref":"input"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"slot"}]}]},"declarations":[{"kind":"state","name":"internalChecked","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"change","type":"object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"label","choices":["label"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-switch","props":{"checked":{"type":"boolean","required":false,"target":{"attribute":"checked"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"value":{"type":"string","required":false,"target":{"attribute":"value"},"default":"on"}}},"template":{"kind":"element","name":"label","attributes":[],"children":[{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"type","value":"checkbox"},{"kind":"literal","name":"role","value":"switch"},{"kind":"property","key":"checked","name":"checked","expression":"internalChecked","expressionPlan":{"source":"internalChecked","ast":{"kind":"id","name":"internalChecked"},"dependencies":["internalChecked"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"name","expression":"name","expressionPlan":{"source":"name","ast":{"kind":"id","name":"name"},"dependencies":["name"]}},{"kind":"attribute","name":"value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}}],"children":[],"ref":"input"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"slot"}]}]},"declarations":[{"kind":"state","name":"internalChecked","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"change","type":"object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"label","choices":["label"]}},source:{file:import.meta.url},css:""};
 
 export function createUiSwitch(options = {}) {
   const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
@@ -23,9 +23,12 @@ export function createUiSwitch(options = {}) {
   const value1 = componentProps["required"] === undefined ? false : componentProps["required"];
   if (value1 === true) element0.setAttribute("required", "");
   else element0.removeAttribute("required");
-  const value2 = componentProps["value"] === undefined ? "on" : componentProps["value"];
-  if (value2 === null || value2 === undefined) element0.removeAttribute("value");
-  else element0.setAttribute("value", String(value2));
+  const value2 = componentProps["name"] === undefined ? "" : componentProps["name"];
+  if (value2 === null || value2 === undefined) element0.removeAttribute("name");
+  else element0.setAttribute("name", String(value2));
+  const value3 = componentProps["value"] === undefined ? "on" : componentProps["value"];
+  if (value3 === null || value3 === undefined) element0.removeAttribute("value");
+  else element0.setAttribute("value", String(value3));
   element.append(element0);
   const element1 = document.createElement("span");
   element1.setAttribute("class", "label");

package/vue/UiCheckbox.d.ts

@@ -2,6 +2,7 @@ type __VLS_Props = {
     checked?: boolean;
     disabled?: boolean;
     indeterminate?: boolean;
+    name?: string;
     required?: boolean;
     value?: string;
 };
@@ -26,6 +27,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "onUpdate:checked"?: ((value: boolean) => any) | undefined;
     "onUpdate:value"?: ((value: string) => any) | undefined;
 }>, {
+    name: string;
     value: string;
     disabled: boolean;
     checked: boolean;

package/vue/UiCheckbox.vue

@@ -11,6 +11,7 @@ const props = withDefaults(
     checked?: boolean
     disabled?: boolean
     indeterminate?: boolean
+    name?: string
     required?: boolean
     value?: string
   }>(),
@@ -18,6 +19,7 @@ const props = withDefaults(
     checked: false,
     disabled: false,
     indeterminate: false,
+    name: '',
     required: false,
     value: 'on',
   },
@@ -81,6 +83,7 @@ useComponentHost(controllerModule.default, {
       :indeterminate.prop="indeterminate"
       :disabled="disabled"
       :required="required"
+      :name="name"
       :value="value"
       ref="input"
     >

package/vue/UiCombobox.vue

@@ -208,6 +208,7 @@ const validation = ref<
   }
 >({ status: 'pristine', touched: false, dirty: false, issues: [] })
 const uid = ref('')
+const submitted = ref('')
 const groups = ref<
   {
     name: string
@@ -455,6 +456,7 @@ const { host, ready } = useComponentHost(controllerModule.default, {
     lookupError,
     validation,
     uid,
+    submitted,
     groups,
     creatable,
     createIndex,
@@ -518,13 +520,33 @@ defineExpose({
           :aria-busy="validationStatus === 'pending'"
           :value.prop="display"
           :placeholder="placeholder"
-          :name="name"
           :disabled="disabled"
           :readonly="readonly"
-          :required="required"
+          :required="required && !(multiple && internalItems[0])"
           ref="input"
         >
-        <button v-if="clearable" type="button" data-combobox-action="clear" aria-label="Clear">
+        <input
+          v-if="name && !multiple"
+          type="hidden"
+          :name="name"
+          :value="submitted"
+          :disabled="disabled"
+        >
+        <template v-if="name && multiple"><input
+            v-for="item in internalItems"
+            :key="item.id"
+            type="hidden"
+            :name="name"
+            :value="item.value"
+            :disabled="disabled"
+          ></template>
+        <button
+          v-if="clearable"
+          type="button"
+          data-combobox-action="clear"
+          aria-label="Clear"
+          :disabled="disabled || readonly"
+        >
           <svg
             class="affordance-icon"
             aria-hidden="true"
@@ -544,6 +566,7 @@ defineExpose({
           tabindex="-1"
           aria-label="Show suggestions"
           :aria-controls="`${uid}-listbox`"
+          :disabled="disabled || readonly"
         >
           <svg
             class="affordance-icon"
@@ -630,7 +653,7 @@ defineExpose({
       </div>
       <slot name="footer" />
     </div>
-    <div class="message" :id="`${uid}-validation`" :hidden="!validation.issues.length">
+    <div class="message" :id="`${uid}-validation`" :hidden="!(validation.issues[0])">
       <div v-for="(issue, index) in validation.issues" :key="index">{{ issue.message }}</div>
     </div>
     <div class="sr-only" role="status" aria-live="polite" aria-atomic="true">{{ statusText }}</div>

package/vue/UiEditorToolbar.vue

@@ -1,6 +1,8 @@
 <!-- Generated by HTML Next 1.0.0-alpha.3 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref, useTemplateRef } from 'vue'
+import * as controllerModule from '../components/ui-editor-toolbar/ui-editor-toolbar.js'
+import { createDispatch, useComponentHost } from './host'
 
 defineOptions({ inheritAttrs: false })
 
@@ -13,12 +15,29 @@ const props = withDefaults(
   },
 )
 
+const root = ref<HTMLElement | null>(null)
+const stripElement = useTemplateRef<HTMLElement>('strip')
+const overflowStart = ref(false)
+const overflowEnd = ref(false)
+
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
+    overflowStart.value && 'overflowStart',
+    overflowEnd.value && 'overflowEnd',
     props.floating && 'floating',
   ].filter(Boolean).join(' ')
 )
+
+const dispatch = createDispatch(root)
+
+useComponentHost(controllerModule.default, {
+  root,
+  dispatch,
+  props,
+  refs: { strip: stripElement },
+  state: { overflowStart, overflowEnd },
+})
 </script>
 
 <template>
@@ -28,39 +47,89 @@ const hostState = computed(() =>
     aria-label="Editor toolbar"
     v-bind="$attrs"
     :data-ui-editor-toolbar-state="hostState || undefined"
+    ref="root"
   >
-    <slot />
+    <div class="strip" ref="strip"><slot /></div>
   </div>
 </template>
 
 <style scoped>
 [data-component~="ui-editor-toolbar"] {
+  /* The colour the edge fades blend into: whatever the toolbar is painted with. */
+  --_matte: var(--ui-editor-toolbar-surface, var(--ui-surface));
+
   position: sticky;
   top: 0;
   z-index: var(--ui-editor-toolbar-z-index, 10);
   display: flex;
   align-items: center;
-  justify-content: flex-start;
-  gap: var(--ui-editor-toolbar-gap, 2px);
   padding: var(--ui-editor-toolbar-padding-block, 6px)
     var(--ui-editor-toolbar-padding-inline, 12px);
   min-height: var(--ui-editor-toolbar-min-height, 48px);
-  /* More controls than the column is wide is normal at a readable measure, so the row wraps.
-     Scrolling hid the tail behind an invisible scrollbar. */
-  flex-wrap: wrap;
-  row-gap: var(--ui-editor-toolbar-row-gap, var(--ui-editor-toolbar-gap, 2px));
   background: var(--ui-editor-toolbar-surface, var(--ui-surface));
   border-bottom: 1px solid var(--ui-editor-toolbar-border, var(--ui-border));
 }
 
-[data-component~="ui-editor-toolbar"]::-webkit-scrollbar {
+/* One row, always. When the controls outgrow the space, the row scrolls sideways rather than
+   wrapping into several lines, and a fade at each edge that has more to show says so. */
+.strip {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--ui-editor-toolbar-gap, 2px);
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-inline: contain;
+  scrollbar-width: none;
+}
+
+.strip::-webkit-scrollbar {
   display: none;
 }
 
-[data-component~="ui-editor-toolbar"] > :slotted(*) {
+.strip > :slotted(*) {
   flex: 0 0 auto;
 }
 
+/* The fades are mattes laid over the strip in the toolbar's own colour, not a mask, so a floating
+   toolbar's border and shadow stay whole. Each appears only while that edge hides controls. */
+[data-component~="ui-editor-toolbar"]::before,
+[data-component~="ui-editor-toolbar"]::after {
+  position: absolute;
+  z-index: 1;
+  inset-block: 0;
+  inline-size: var(--ui-editor-toolbar-fade-size, 32px);
+  content: "";
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--ui-motion-fast, 120ms) var(--ui-motion-ease, ease);
+}
+
+[data-component~="ui-editor-toolbar"]::before {
+  inset-inline-start: 0;
+  background: linear-gradient(to right, var(--_matte), transparent);
+}
+
+[data-component~="ui-editor-toolbar"]::after {
+  inset-inline-end: 0;
+  background: linear-gradient(to left, var(--_matte), transparent);
+}
+
+[data-component~="ui-editor-toolbar"]:dir(rtl)::before {
+  background: linear-gradient(to left, var(--_matte), transparent);
+}
+
+[data-component~="ui-editor-toolbar"]:dir(rtl)::after {
+  background: linear-gradient(to right, var(--_matte), transparent);
+}
+
+[data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="overflowStart"]::before,
+[data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="overflowEnd"]::after {
+  opacity: 1;
+}
+
 :slotted(.divider) {
   width: 1px;
   height: 20px;
@@ -70,14 +139,12 @@ const hostState = computed(() =>
 }
 
 [data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"] {
-  flex-wrap: nowrap;
-  position: static;
+  position: relative;
   top: auto;
   width: max-content;
   max-width: min(calc(100vw - 24px), 100%);
   min-height: auto;
   padding: var(--ui-editor-toolbar-floating-padding, 4px);
-  overflow-x: visible;
   background: color-mix(
     in srgb,
     var(--ui-editor-toolbar-surface, var(--ui-surface)) 96%,
@@ -106,7 +173,7 @@ const hostState = computed(() =>
   }
 
   [data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"] {
-    position: static;
+    position: relative;
     inset: auto;
     min-height: auto;
     border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border));
@@ -120,9 +187,10 @@ const hostState = computed(() =>
 
 /* Inside LoomaEditor's sticky shell, the shell is the sticky surface. */
 .looma-editor__sticky-toolbar-shell [data-component~="ui-editor-toolbar"] {
-  position: static;
+  --_matte: var(--ui-editor-toolbar-surface, var(--ui-surface));
+
+  position: relative;
   min-height: var(--ui-editor-toolbar-min-height, 48px);
-  overscroll-behavior-inline: contain;
   background: transparent;
   border: 0;
   box-shadow: none;
@@ -135,10 +203,6 @@ const hostState = computed(() =>
   max-width: none;
   min-height: 100%;
   padding: 0;
-  overflow-x: auto;
-  overflow-y: hidden;
-  overscroll-behavior-inline: contain;
-  scroll-snap-type: x mandatory;
   background: transparent;
   border: 0;
   border-radius: 0;
@@ -146,6 +210,12 @@ const hostState = computed(() =>
   backdrop-filter: none;
 }
 
+.looma-editor__mobile-toolbar-shell
+  [data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"]
+  .strip {
+  scroll-snap-type: x mandatory;
+}
+
 /* A component that sets its display still honours the hidden attribute on its root. */
 [data-component~="ui-editor-toolbar"][hidden] {
   display: none;

package/vue/UiRadioGroup.vue

@@ -91,6 +91,8 @@ useComponentHost(controllerModule.default, {
     data-component="ui-radio-group"
     role="radiogroup"
     v-bind="$attrs"
+    :aria-required="required"
+    :disabled="disabled"
     :data-ui-radio-group-state="hostState || undefined"
     ref="root"
   >

package/vue/UiSearchResultRow.vue

@@ -29,6 +29,7 @@ const hostState = computed(() =>
     type="button"
     v-bind="$attrs"
     :disabled="disabled"
+    :aria-current="selected"
     :data-ui-search-result-row-state="hostState || undefined"
   >
     <span class="leading"><slot name="leading" /></span>

package/vue/UiSwitch.d.ts

@@ -1,6 +1,7 @@
 type __VLS_Props = {
     checked?: boolean;
     disabled?: boolean;
+    name?: string;
     required?: boolean;
     value?: string;
 };
@@ -25,6 +26,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "onUpdate:checked"?: ((value: boolean) => any) | undefined;
     "onUpdate:value"?: ((value: string) => any) | undefined;
 }>, {
+    name: string;
     value: string;
     disabled: boolean;
     checked: boolean;

package/vue/UiSwitch.vue

@@ -10,12 +10,14 @@ const props = withDefaults(
   defineProps<{
     checked?: boolean
     disabled?: boolean
+    name?: string
     required?: boolean
     value?: string
   }>(),
   {
     checked: false,
     disabled: false,
+    name: '',
     required: false,
     value: 'on',
   },
@@ -79,6 +81,7 @@ useComponentHost(controllerModule.default, {
       :checked.prop="internalChecked"
       :disabled="disabled"
       :required="required"
+      :name="name"
       :value="value"
       ref="input"
     >

package/vue/chunks/UiCheckbox.js

@@ -9,6 +9,7 @@ var _hoisted_2 = [
 	".indeterminate",
 	"disabled",
 	"required",
+	"name",
 	"value"
 ];
 var _hoisted_3 = { class: "label" };
@@ -30,6 +31,7 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			type: Boolean,
 			default: false
 		},
+		name: { default: "" },
 		required: {
 			type: Boolean,
 			default: false
@@ -76,11 +78,12 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				".indeterminate": __props.indeterminate,
 				disabled: __props.disabled,
 				required: __props.required,
+				name: __props.name,
 				value: __props.value,
 				ref: "input"
 			}, null, 40, _hoisted_2), createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-964081a0"]]);
+}), [["__scopeId", "data-v-44d93832"]]);
 //#endregion
 export { UiCheckbox_default as t };