@threadlabs/looma 0.14.7 → 0.15.0

package/vue/UiCombobox.vue

@@ -15,7 +15,9 @@ const props = withDefaults(
     clearable?: boolean
     disabled?: boolean
     disclosure?: boolean
+    filter?: 'label' | 'none'
     help?: string
+    invalid?: boolean
     items?:
       readonly ({
         readonly id: string
@@ -31,8 +33,10 @@ const props = withDefaults(
       })[]
     label?: string
     labelVisibility?: 'visible' | 'sr-only'
+    loading?: boolean
     multiple?: boolean
     name?: string
+    openOnFocus?: boolean
     placeholder?: string
     query?: string
     readonly?: boolean
@@ -48,11 +52,15 @@ const props = withDefaults(
     clearable: false,
     disabled: false,
     disclosure: false,
+    filter: 'label',
     help: '',
+    invalid: false,
     label: '',
     labelVisibility: 'visible',
+    loading: false,
     multiple: false,
     name: '',
+    openOnFocus: false,
     placeholder: '',
     readonly: false,
     required: false,
@@ -253,7 +261,6 @@ const rows = ref<
   }[]
 >([])
 const active = ref<number | null>(-1)
-const loading = ref(false)
 const helpOpen = ref(false)
 const lookupError = ref('')
 const validation = ref<
@@ -302,6 +309,7 @@ const hostState = computed(() =>
     props.size && `size size=${props.size}`,
     validationStatus.value && 'validationStatus',
     `validationStatus=${encodeURIComponent(validationStatus.value)}`,
+    props.invalid && 'invalid',
     props.multiple && 'multiple',
   ].filter(Boolean).join(' ')
 )
@@ -707,7 +715,6 @@ const { host, ready } = useComponentHost(controllerModule.default, {
     expanded,
     rows,
     active,
-    loading,
     helpOpen,
     lookupError,
     validation,
@@ -772,8 +779,8 @@ defineExpose({
           :id="`${uid}-input`"
           :aria-controls="`${uid}-listbox`"
           :aria-expanded="expanded"
-          :aria-invalid="validationStatus === 'error'"
-          :aria-busy="validationStatus === 'pending'"
+          :aria-invalid="invalid || validationStatus === 'error'"
+          :aria-busy="loading || validationStatus === 'pending'"
           :value.prop="display"
           :placeholder="placeholder"
           :disabled="disabled"
@@ -921,6 +928,9 @@ defineExpose({
           {{ `Create “${raw}”` }}
         </div>
         <div v-if="message" class="message">{{ message }}</div>
+        <div v-if="!loading && !(rows[0]) && !creatable && !lookupError" class="message">
+          <slot name="empty">No suggestions.</slot>
+        </div>
       </div>
       <slot name="footer" />
     </div>
@@ -974,6 +984,30 @@ defineExpose({
   syntax: "*";
   inherits: false;
 }
+@property --ui-combobox-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-combobox-invalid-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-combobox-popup-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-combobox-popup-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-combobox-popup-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-combobox-popup-shadow {
+  syntax: "*";
+  inherits: false;
+}
 
 [data-component~="ui-combobox"] {
   /* Hooks do not inherit, so the parts below read them from the root. */
@@ -987,6 +1021,12 @@ defineExpose({
   --_ui-combobox-item-min-block-size: var(--ui-combobox-item-min-block-size);
   --_ui-combobox-item-input-min-inline-size: var(--ui-combobox-item-input-min-inline-size);
   --_ui-combobox-item-item-max-inline-size: var(--ui-combobox-item-item-max-inline-size);
+  --_ui-combobox-radius: var(--ui-combobox-radius);
+  --_ui-combobox-invalid-border: var(--ui-combobox-invalid-border);
+  --_ui-combobox-popup-surface: var(--ui-combobox-popup-surface);
+  --_ui-combobox-popup-border: var(--ui-combobox-popup-border);
+  --_ui-combobox-popup-radius: var(--ui-combobox-popup-radius);
+  --_ui-combobox-popup-shadow: var(--ui-combobox-popup-shadow);
 
   display: grid;
   gap: var(--ui-space-1);
@@ -1013,7 +1053,7 @@ label {
   display: flex;
   min-inline-size: 0;
   border: 1px solid var(--ui-control-border, var(--ui-border-default));
-  border-radius: var(--ui-radius-md);
+  border-radius: var(--_ui-combobox-radius, var(--ui-field-radius, var(--ui-radius-md)));
   background: var(--ui-control-surface, var(--ui-surface-default));
   box-shadow: var(--ui-control-inset);
   transition:
@@ -1135,8 +1175,12 @@ input:disabled, button:disabled {
 .field:has(input:disabled) {
   background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="validationStatus=error"] .field {
-  border-color: var(--ui-danger-solid, var(--ui-accent-active));
+[data-component~="ui-combobox"][data-ui-combobox-state~="validationStatus=error"] .field,
+[data-component~="ui-combobox"][data-ui-combobox-state~="invalid"] .field {
+  border-color: var(
+    --_ui-combobox-invalid-border,
+    var(--ui-field-danger, var(--ui-danger-solid, var(--ui-accent-active)))
+  );
 }
 .popup {
   box-sizing: border-box;
@@ -1146,11 +1190,18 @@ input:disabled, button:disabled {
   overflow: auto;
   margin: 0;
   padding: var(--ui-space-1);
-  border: 1px solid var(--ui-border-default);
-  border-radius: var(--ui-radius-md);
-  background: var(--ui-surface-elevated);
+  border: 1px solid
+    var(--_ui-combobox-popup-border, var(--ui-overlay-border, var(--ui-border-default)));
+  border-radius: var(--_ui-combobox-popup-radius, var(--ui-overlay-radius, var(--ui-radius-md)));
+  background: var(
+    --_ui-combobox-popup-surface,
+    var(--ui-overlay-surface, var(--ui-surface-elevated))
+  );
   color: var(--ui-text-primary);
-  box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
+  box-shadow: var(
+    --_ui-combobox-popup-shadow,
+    var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
+  );
 }
 [hidden] {
   display: none;

package/vue/UiContextMenu.d.ts

@@ -9,6 +9,7 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (detail: {
         readonly value: string;
+        readonly checked?: boolean;
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }) => any;
     close: (detail: {
@@ -25,6 +26,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelect?: ((detail: {
         readonly value: string;
+        readonly checked?: boolean;
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }) => any) | undefined;
     onClose?: ((detail: {

package/vue/UiContextMenu.vue

@@ -33,7 +33,11 @@ const emit = defineEmits<{
     },
   ]
   select: [
-    detail: { readonly value: string; readonly trigger: 'keyboard' | 'pointer' | 'programmatic' },
+    detail: {
+      readonly value: string
+      readonly checked?: boolean
+      readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
+    },
   ]
 }>()
 
@@ -55,10 +59,12 @@ const isOpenDetail = (detail: unknown): boolean =>
 const isSelectDetail = (detail: unknown): boolean =>
   detail !== null && typeof detail === 'object' && !Array.isArray(detail)
   && typeof (detail as Record<string, unknown>)['value'] === 'string'
+  && ((detail as Record<string, unknown>)['checked'] === undefined
+    || typeof (detail as Record<string, unknown>)['checked'] === 'boolean')
   && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
     || (detail as Record<string, unknown>)['trigger'] === 'pointer'
     || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
-  && Object.keys(detail as object).every((key) => ['value', 'trigger'].includes(key))
+  && Object.keys(detail as object).every((key) => ['value', 'checked', 'trigger'].includes(key))
 const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
   checks: {
     open: isOpenDetail,
@@ -90,6 +96,22 @@ useComponentHost(controllerModule.default, {
 
 <style scoped>
 /* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-context-menu-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-context-menu-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-context-menu-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-context-menu-shadow {
+  syntax: "*";
+  inherits: false;
+}
 @property --ui-context-menu-z-index {
   syntax: "*";
   inherits: false;
@@ -97,6 +119,10 @@ useComponentHost(controllerModule.default, {
 
 [data-component~="ui-context-menu"] {
   /* Hooks do not inherit, so the parts below read them from the root. */
+  --_ui-context-menu-surface: var(--ui-context-menu-surface);
+  --_ui-context-menu-border: var(--ui-context-menu-border);
+  --_ui-context-menu-radius: var(--ui-context-menu-radius);
+  --_ui-context-menu-shadow: var(--ui-context-menu-shadow);
   --_ui-context-menu-z-index: var(--ui-context-menu-z-index);
 
   display: contents;
@@ -110,10 +136,17 @@ useComponentHost(controllerModule.default, {
   flex-direction: column;
   box-sizing: border-box;
   padding: var(--ui-space-1);
-  background: var(--ui-surface-elevated);
-  border: 1px solid var(--ui-border-default);
-  border-radius: var(--ui-radius-lg);
-  box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
+  background: var(
+    --_ui-context-menu-surface,
+    var(--ui-overlay-surface, var(--ui-surface-elevated))
+  );
+  border: 1px solid
+    var(--_ui-context-menu-border, var(--ui-overlay-border, var(--ui-border-default)));
+  border-radius: var(--_ui-context-menu-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
+  box-shadow: var(
+    --_ui-context-menu-shadow,
+    var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
+  );
   outline: 0;
   overflow: auto;
   z-index: var(--_ui-context-menu-z-index, 1000);
@@ -127,6 +160,14 @@ useComponentHost(controllerModule.default, {
     overlay var(--ui-motion-fast) allow-discrete;
 }
 
+.menu hr {
+  align-self: stretch;
+  block-size: 0;
+  margin: var(--ui-space-1) 0;
+  border: 0;
+  border-block-start: 1px solid var(--ui-border-default);
+}
+
 .menu:popover-open {
   opacity: 1;
   transform: translateY(0) scale(1);

package/vue/UiDialog.d.ts

@@ -1,9 +1,11 @@
 type __VLS_Props = {
-    dismissible?: boolean;
+    alert?: boolean;
+    closedby?: 'any' | 'closerequest' | 'none';
     for?: string;
     label?: string;
-    modal?: boolean;
+    modeless?: boolean;
     open?: boolean;
+    size?: 'sm' | 'md' | 'lg' | 'fullscreen';
 };
 declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {
@@ -17,6 +19,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
         readonly reason: "action" | "programmatic" | "light-dismiss" | "escape";
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }) => any;
+    open: (detail: {
+        readonly open: boolean;
+        readonly reason: "action" | "programmatic";
+        readonly trigger: "keyboard" | "pointer" | "programmatic";
+    }) => any;
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClose?: ((detail: {
@@ -24,12 +31,19 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
         readonly reason: "action" | "programmatic" | "light-dismiss" | "escape";
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }) => any) | undefined;
+    onOpen?: ((detail: {
+        readonly open: boolean;
+        readonly reason: "action" | "programmatic";
+        readonly trigger: "keyboard" | "pointer" | "programmatic";
+    }) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
+    size: "sm" | "md" | "lg" | "fullscreen";
     for: string;
     open: boolean;
-    dismissible: boolean;
-    modal: boolean;
+    alert: boolean;
+    closedby: "any" | "closerequest" | "none";
+    modeless: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/vue/UiDialog.vue

@@ -1,6 +1,6 @@
 <!-- Generated by HTML Next 1.0.0-alpha.7 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { ref, useTemplateRef } from 'vue'
+import { computed, ref, useTemplateRef } from 'vue'
 import * as controllerModule from '../components/ui-dialog/ui-dialog.js'
 import { createDispatch, useComponentHost } from './host'
 
@@ -8,21 +8,32 @@ defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(
   defineProps<{
-    dismissible?: boolean
+    alert?: boolean
+    closedby?: 'any' | 'closerequest' | 'none'
     for?: string
     label?: string
-    modal?: boolean
+    modeless?: boolean
     open?: boolean
+    size?: 'sm' | 'md' | 'lg' | 'fullscreen'
   }>(),
   {
-    dismissible: false,
+    alert: false,
+    closedby: 'closerequest',
     for: '',
-    modal: false,
+    modeless: false,
     open: false,
+    size: 'md',
   },
 )
 const emit = defineEmits<{
   'update:open': [value: boolean]
+  open: [
+    detail: {
+      readonly open: boolean
+      readonly reason: 'action' | 'programmatic'
+      readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
+    },
+  ]
   close: [
     detail: {
       readonly open: boolean
@@ -37,6 +48,23 @@ const closeElement = useTemplateRef<HTMLElement>('close')
 const internalOpen = ref(false)
 const accessibleLabel = ref('Dialog')
 
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.size && `size size=${props.size}`,
+    props.alert && 'alert',
+  ].filter(Boolean).join(' ')
+)
+
+const isOpenDetail = (detail: unknown): boolean =>
+  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && typeof (detail as Record<string, unknown>)['open'] === 'boolean'
+  && ((detail as Record<string, unknown>)['reason'] === 'action'
+    || (detail as Record<string, unknown>)['reason'] === 'programmatic')
+  && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
+    || (detail as Record<string, unknown>)['trigger'] === 'pointer'
+    || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
+  && Object.keys(detail as object).every((key) => ['open', 'reason', 'trigger'].includes(key))
 const isCloseDetail = (detail: unknown): boolean =>
   detail !== null && typeof detail === 'object' && !Array.isArray(detail)
   && typeof (detail as Record<string, unknown>)['open'] === 'boolean'
@@ -50,6 +78,7 @@ const isCloseDetail = (detail: unknown): boolean =>
   && Object.keys(detail as object).every((key) => ['open', 'reason', 'trigger'].includes(key))
 const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
   checks: {
+    open: isOpenDetail,
     close: isCloseDetail,
   },
   modeled: ['open'],
@@ -65,7 +94,13 @@ useComponentHost(controllerModule.default, {
 </script>
 
 <template>
-  <dialog data-component="ui-dialog" v-bind="$attrs" :aria-label="accessibleLabel" ref="root">
+  <dialog
+    data-component="ui-dialog"
+    v-bind="$attrs"
+    :aria-label="accessibleLabel"
+    :data-ui-dialog-state="hostState || undefined"
+    ref="root"
+  >
     <header>
       <h2 v-if="label" class="title">{{ label }}</h2>
       <button class="close" type="button" aria-label="Close" ref="close"></button>
@@ -81,6 +116,22 @@ useComponentHost(controllerModule.default, {
   syntax: "*";
   inherits: false;
 }
+@property --ui-dialog-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-dialog-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-dialog-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-dialog-shadow {
+  syntax: "*";
+  inherits: false;
+}
 @property --ui-dialog-max-width {
   syntax: "*";
   inherits: false;
@@ -99,7 +150,7 @@ useComponentHost(controllerModule.default, {
   box-sizing: border-box;
   inline-size: min(
     calc(100% - var(--ui-dialog-viewport-gap, var(--ui-space-4)) * 2),
-    var(--ui-dialog-max-width, 440px)
+    var(--ui-dialog-max-width, var(--_ui-dialog-size, 440px))
   );
   max-inline-size: none;
   max-block-size: calc(100dvh - var(--ui-dialog-viewport-gap, var(--ui-space-4)) * 2);
@@ -107,10 +158,13 @@ useComponentHost(controllerModule.default, {
   padding: 0;
   overflow: hidden;
   flex-direction: column;
-  background: var(--ui-surface-elevated);
-  border: 1px solid var(--ui-border-default);
-  border-radius: var(--ui-radius-dialog);
-  box-shadow: var(--ui-elevation-dialog, var(--ui-shadow-xl));
+  background: var(--ui-dialog-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
+  border: 1px solid var(--ui-dialog-border, var(--ui-overlay-border, var(--ui-border-default)));
+  border-radius: var(--ui-dialog-radius, var(--ui-overlay-radius, var(--ui-radius-dialog)));
+  box-shadow: var(
+    --ui-dialog-shadow,
+    var(--ui-overlay-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl)))
+  );
   visibility: hidden;
   pointer-events: none;
   opacity: 0;
@@ -132,6 +186,27 @@ useComponentHost(controllerModule.default, {
   animation: ui-dialog-enter var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease);
 }
 
+[data-component~="ui-dialog"][data-ui-dialog-state~="size=sm"] {
+  --_ui-dialog-size: 360px;
+}
+
+[data-component~="ui-dialog"][data-ui-dialog-state~="size=lg"] {
+  --_ui-dialog-size: 640px;
+}
+
+[data-component~="ui-dialog"][data-ui-dialog-state~="size=fullscreen"] {
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100dvh;
+  max-block-size: none;
+  margin: 0;
+  border-radius: var(--ui-dialog-radius, 0);
+}
+
+[data-component~="ui-dialog"][data-ui-dialog-state~="alert"] .close {
+  display: none;
+}
+
 /* Header and actions stay pinned; only the body scrolls when content is long. */
 header {
   display: flex;

package/vue/UiDisclosure.d.ts

@@ -1,12 +1,16 @@
 type __VLS_Props = {
     density?: 'comfortable' | 'compact';
     disabled?: boolean;
+    headingLevel?: number;
+    name?: string;
     open?: boolean;
     summary?: string;
 };
-declare var __VLS_1: {};
+declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    summary?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (detail: {
@@ -34,9 +38,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     summary: string;
+    name: string;
     disabled: boolean;
     open: boolean;
     density: "comfortable" | "compact";
+    headingLevel: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/vue/UiDisclosure.vue

@@ -10,12 +10,16 @@ const props = withDefaults(
   defineProps<{
     density?: 'comfortable' | 'compact'
     disabled?: boolean
+    headingLevel?: number
+    name?: string
     open?: boolean
     summary?: string
   }>(),
   {
     density: 'comfortable',
     disabled: false,
+    headingLevel: 0,
+    name: '',
     open: false,
     summary: 'Details',
   },
@@ -40,8 +44,11 @@ const emit = defineEmits<{
 
 const root = ref<HTMLElement | null>(null)
 const triggerElement = useTemplateRef<HTMLElement>('trigger')
+const panelElement = useTemplateRef<HTMLElement>('panel')
 const internalOpen = ref(false)
 const contentId = ref('')
+const headingRole = ref<any>(null)
+const headingAriaLevel = ref<any>(null)
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -74,9 +81,22 @@ useComponentHost(controllerModule.default, {
   root,
   dispatch,
   props,
-  refs: { trigger: triggerElement },
-  state: { internalOpen, contentId },
+  refs: { trigger: triggerElement, panel: panelElement },
+  state: { internalOpen, contentId, headingRole, headingAriaLevel },
 })
+
+function text(value: unknown): string {
+  if (Array.isArray(value)) return value.map(text).join(' ')
+  return value === null || value === undefined || typeof value === 'object' ? '' : String(value)
+}
+
+function attribute(value: unknown): any {
+  if (
+    value === null || value === undefined || value === false
+    || (typeof value === 'object' && !Array.isArray(value))
+  ) return undefined
+  return value === true ? '' : text(value)
+}
 </script>
 
 <template>
@@ -86,20 +106,24 @@ useComponentHost(controllerModule.default, {
     :data-ui-disclosure-state="hostState || undefined"
     ref="root"
   >
-    <button
-      class="trigger"
-      type="button"
-      :aria-controls="contentId"
-      :aria-expanded="internalOpen"
-      :disabled="disabled"
-      ref="trigger"
+    <div
+      class="heading"
+      :role="attribute(headingRole)"
+      :aria-level="typeof headingAriaLevel === 'boolean' ? String(headingAriaLevel) : attribute(headingAriaLevel)"
     >
-      <span>{{ summary }}</span>
-      <span class="chevron" aria-hidden="true"></span>
-    </button>
-    <div class="panel" :id="contentId" :inert="!internalOpen">
-      <div class="panel-inner"><slot /></div>
+      <button
+        class="trigger"
+        type="button"
+        :aria-controls="contentId"
+        :aria-expanded="internalOpen"
+        :disabled="disabled"
+        ref="trigger"
+      >
+        <span class="summary"><slot name="summary">{{ summary }}</slot></span>
+        <span class="chevron" aria-hidden="true"></span>
+      </button>
     </div>
+    <div class="panel" :id="contentId" ref="panel"><div class="panel-inner"><slot /></div></div>
   </div>
 </template>
 

package/vue/UiEditable.d.ts

@@ -1,9 +1,14 @@
 type __VLS_Props = {
     actions?: boolean;
+    cancelLabel?: string;
     disabled?: boolean;
     edit?: boolean;
     hint?: string;
     label?: string;
+    maxLength?: number;
+    placeholder?: string;
+    required?: boolean;
+    saveLabel?: string;
     value?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -44,9 +49,14 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     label: string;
     value: string;
     disabled: boolean;
+    required: boolean;
+    placeholder: string;
     actions: boolean;
+    cancelLabel: string;
     edit: boolean;
     hint: string;
+    maxLength: number;
+    saveLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;