@threadlabs/looma 0.40.0 → 0.41.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/ui-callout/ui-callout.html +5 -1
- package/components/ui-site-header/ui-site-header.html +164 -0
- package/dist/index.js +1 -1
- package/docs/catalog.json +198 -2
- package/package.json +1 -1
- package/styles/ui-callout.css +5 -1
- package/styles/ui-site-header.css +165 -0
- package/vanilla/UiSiteHeader.d.ts +25 -0
- package/vanilla/UiSiteHeader.js +96 -0
- package/vanilla/index.js +1 -0
- package/vue/UiCallout.vue +9 -1
- package/vue/UiSiteHeader.d.ts +47 -0
- package/vue/UiSiteHeader.js +2 -0
- package/vue/UiSiteHeader.vue +299 -0
- package/vue/chunks/UiCallout.js +1 -1
- package/vue/chunks/UiSiteHeader.js +150 -0
- package/vue/components.css +168 -2
- package/vue/index.d.ts +1 -0
- package/vue/index.js +2 -1
|
@@ -0,0 +1,299 @@
|
|
|
1
|
+
<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
|
|
2
|
+
<script setup lang="ts">
|
|
3
|
+
import { computed, watchSyncEffect } from 'vue'
|
|
4
|
+
import type { PropType } from 'vue'
|
|
5
|
+
import { checkHydratedRoot, nativeAttrs, useReflectedProp } from './host'
|
|
6
|
+
import {
|
|
7
|
+
BINDING_INPUTS_PROP,
|
|
8
|
+
checkedProp,
|
|
9
|
+
checkPropInput,
|
|
10
|
+
type InputBindings,
|
|
11
|
+
READY_INPUT,
|
|
12
|
+
requireInputStatus,
|
|
13
|
+
UNRESOLVED_INPUT,
|
|
14
|
+
vPropValidity,
|
|
15
|
+
vuePropInputs,
|
|
16
|
+
} from './props'
|
|
17
|
+
|
|
18
|
+
defineOptions({ inheritAttrs: false })
|
|
19
|
+
|
|
20
|
+
const propValidityContract = {
|
|
21
|
+
props: {
|
|
22
|
+
breakpoint: {
|
|
23
|
+
type: { kind: 'terminal', name: 'keyword' },
|
|
24
|
+
required: false,
|
|
25
|
+
target: { attribute: 'breakpoint' },
|
|
26
|
+
description:
|
|
27
|
+
'The viewport width at which navigation replaces the menu trigger: sm is 40rem, md 48rem, and lg 64rem. The consumer owns the menu or drawer the trigger\n opens.',
|
|
28
|
+
values: ['sm', 'md', 'lg'],
|
|
29
|
+
default: 'lg',
|
|
30
|
+
},
|
|
31
|
+
label: {
|
|
32
|
+
type: { kind: 'terminal', name: 'string' },
|
|
33
|
+
required: false,
|
|
34
|
+
target: { attribute: 'aria-label' },
|
|
35
|
+
description: 'Accessible name for the primary navigation region.',
|
|
36
|
+
default: 'Main',
|
|
37
|
+
},
|
|
38
|
+
sticky: {
|
|
39
|
+
type: { kind: 'terminal', name: 'boolean' },
|
|
40
|
+
required: false,
|
|
41
|
+
target: { attribute: 'sticky' },
|
|
42
|
+
description: 'Keeps the header at the top of its scrolling container.',
|
|
43
|
+
default: false,
|
|
44
|
+
},
|
|
45
|
+
},
|
|
46
|
+
} as const
|
|
47
|
+
const props = defineProps({
|
|
48
|
+
breakpoint: { type: null as unknown as PropType<'sm' | 'md' | 'lg' | null> },
|
|
49
|
+
label: { type: null as unknown as PropType<string | null> },
|
|
50
|
+
sticky: { type: null as unknown as PropType<boolean | null> },
|
|
51
|
+
[BINDING_INPUTS_PROP]: { type: null as unknown as PropType<InputBindings> },
|
|
52
|
+
})
|
|
53
|
+
const acceptedProps: Record<string, unknown> = { breakpoint: 'lg', label: 'Main', sticky: false }
|
|
54
|
+
const inputTracking = vuePropInputs(acceptedProps, {
|
|
55
|
+
breakpoint: 'lg',
|
|
56
|
+
label: 'Main',
|
|
57
|
+
sticky: false,
|
|
58
|
+
}, (name, value, source, values) => {
|
|
59
|
+
switch (name) {
|
|
60
|
+
case 'breakpoint':
|
|
61
|
+
return checkPropInput(value, { kind: 'terminal', name: 'keyword' }, true, true)
|
|
62
|
+
case 'label':
|
|
63
|
+
return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
|
|
64
|
+
case 'sticky':
|
|
65
|
+
return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
|
|
66
|
+
default:
|
|
67
|
+
return { ok: false }
|
|
68
|
+
}
|
|
69
|
+
}, () => {
|
|
70
|
+
void checkedProps.value
|
|
71
|
+
})
|
|
72
|
+
const propInputs = inputTracking.inputs
|
|
73
|
+
const checkedProps = computed(() => {
|
|
74
|
+
void inputTracking.version.value
|
|
75
|
+
return ({
|
|
76
|
+
breakpoint: propInputs.value<'sm' | 'md' | 'lg' | null>(
|
|
77
|
+
'breakpoint',
|
|
78
|
+
props['breakpoint'],
|
|
79
|
+
props[BINDING_INPUTS_PROP],
|
|
80
|
+
) as 'sm' | 'md' | 'lg',
|
|
81
|
+
label: propInputs.value<string | null>(
|
|
82
|
+
'label',
|
|
83
|
+
props['label'],
|
|
84
|
+
props[BINDING_INPUTS_PROP],
|
|
85
|
+
) as string,
|
|
86
|
+
sticky: propInputs.value<boolean | null>(
|
|
87
|
+
'sticky',
|
|
88
|
+
props['sticky'],
|
|
89
|
+
props[BINDING_INPUTS_PROP],
|
|
90
|
+
) as boolean,
|
|
91
|
+
})
|
|
92
|
+
})
|
|
93
|
+
const inputStatus = (name: string, handlesError: boolean) => {
|
|
94
|
+
void checkedProps.value
|
|
95
|
+
void inputTracking.version.value
|
|
96
|
+
return requireInputStatus(propInputs.status(name), handlesError)
|
|
97
|
+
}
|
|
98
|
+
void checkedProps.value
|
|
99
|
+
watchSyncEffect(() => {
|
|
100
|
+
void checkedProps.value
|
|
101
|
+
})
|
|
102
|
+
const reflectedProp = useReflectedProp()
|
|
103
|
+
|
|
104
|
+
checkHydratedRoot('header', 'ui-site-header')
|
|
105
|
+
|
|
106
|
+
/** The values the styles' :host() and :state() rules test. */
|
|
107
|
+
const hostState = computed(() =>
|
|
108
|
+
[
|
|
109
|
+
checkedProps.value.sticky && 'sticky',
|
|
110
|
+
checkedProps.value.breakpoint && 'breakpoint',
|
|
111
|
+
checkedProps.value.breakpoint != null
|
|
112
|
+
&& `breakpoint=${encodeURIComponent(checkedProps.value.breakpoint)}`,
|
|
113
|
+
].filter(Boolean).join(' ')
|
|
114
|
+
)
|
|
115
|
+
</script>
|
|
116
|
+
|
|
117
|
+
<template>
|
|
118
|
+
<header
|
|
119
|
+
class="ui-site-header"
|
|
120
|
+
v-bind="nativeAttrs($attrs)"
|
|
121
|
+
data-hn
|
|
122
|
+
data-hn-ui-site-header
|
|
123
|
+
v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
|
|
124
|
+
:data-ui-site-header-prop-breakpoint="reflectedProp('breakpoint', 'breakpoint', checkedProps.breakpoint, undefined, false)"
|
|
125
|
+
:data-ui-site-header-prop-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
|
|
126
|
+
:data-ui-site-header-prop-sticky="reflectedProp('sticky', 'sticky', checkedProps.sticky, undefined, false)"
|
|
127
|
+
:data-ui-site-header-state="hostState || undefined"
|
|
128
|
+
>
|
|
129
|
+
<span class="menu" data-hn-ui-site-header><slot name="menu" /></span>
|
|
130
|
+
<div class="identity" data-hn-ui-site-header>
|
|
131
|
+
<div class="brand" data-hn-ui-site-header><slot name="brand" /></div>
|
|
132
|
+
<nav class="navigation" data-hn-ui-site-header :aria-label="checkedProps.label ?? undefined">
|
|
133
|
+
<slot name="navigation" />
|
|
134
|
+
</nav>
|
|
135
|
+
</div>
|
|
136
|
+
<div class="actions" data-hn-ui-site-header><slot name="actions" /></div>
|
|
137
|
+
</header>
|
|
138
|
+
</template>
|
|
139
|
+
|
|
140
|
+
<style scoped>
|
|
141
|
+
@property --ui-site-header-height {
|
|
142
|
+
syntax: "*";
|
|
143
|
+
inherits: false;
|
|
144
|
+
}
|
|
145
|
+
@property --ui-site-header-compact-height {
|
|
146
|
+
syntax: "*";
|
|
147
|
+
inherits: false;
|
|
148
|
+
}
|
|
149
|
+
@property --ui-site-header-padding-inline {
|
|
150
|
+
syntax: "*";
|
|
151
|
+
inherits: false;
|
|
152
|
+
}
|
|
153
|
+
@property --ui-site-header-surface {
|
|
154
|
+
syntax: "*";
|
|
155
|
+
inherits: false;
|
|
156
|
+
}
|
|
157
|
+
@property --ui-site-header-border {
|
|
158
|
+
syntax: "*";
|
|
159
|
+
inherits: false;
|
|
160
|
+
}
|
|
161
|
+
@property --ui-site-header-z-index {
|
|
162
|
+
syntax: "*";
|
|
163
|
+
inherits: false;
|
|
164
|
+
}
|
|
165
|
+
/* Text shares a baseline inside one group; the group is centred beside any control height. */
|
|
166
|
+
/* Without a supplied menu trigger, keep the destinations available on narrow screens. */
|
|
167
|
+
@scope (.ui-site-header) to ([data-hn]) {
|
|
168
|
+
:global(:scope:where([data-hn-ui-site-header])) {
|
|
169
|
+
box-sizing: border-box !important;
|
|
170
|
+
display: flex !important;
|
|
171
|
+
flex-wrap: wrap !important;
|
|
172
|
+
align-items: center !important;
|
|
173
|
+
align-content: center !important;
|
|
174
|
+
gap: var(--ui-space-2) !important;
|
|
175
|
+
min-inline-size: 0;
|
|
176
|
+
min-block-size: var(--ui-site-header-compact-height, 3.75rem);
|
|
177
|
+
padding: var(--ui-space-2) var(--ui-site-header-padding-inline, var(--ui-space-4)) !important;
|
|
178
|
+
border-block-end: var(--ui-border-width) solid var(--ui-site-header-border, var(--ui-border));
|
|
179
|
+
background: var(--ui-site-header-surface, var(--ui-surface));
|
|
180
|
+
color: var(--ui-text-primary);
|
|
181
|
+
}
|
|
182
|
+
:global(:scope[data-ui-site-header-state~="sticky"]:where([data-hn-ui-site-header])) {
|
|
183
|
+
position: sticky;
|
|
184
|
+
inset-block-start: 0;
|
|
185
|
+
z-index: var(--ui-site-header-z-index, 10);
|
|
186
|
+
}
|
|
187
|
+
:global(.menu:where([data-hn-ui-site-header])),
|
|
188
|
+
:global(.actions:where([data-hn-ui-site-header])) {
|
|
189
|
+
display: flex !important;
|
|
190
|
+
flex: none;
|
|
191
|
+
align-items: center !important;
|
|
192
|
+
gap: var(--ui-space-2) !important;
|
|
193
|
+
min-inline-size: 0;
|
|
194
|
+
max-inline-size: 100%;
|
|
195
|
+
}
|
|
196
|
+
:global(.actions:where([data-hn-ui-site-header])) {
|
|
197
|
+
flex-wrap: wrap !important;
|
|
198
|
+
margin-inline-start: auto !important;
|
|
199
|
+
}
|
|
200
|
+
:global(.identity:where([data-hn-ui-site-header])) {
|
|
201
|
+
display: flex !important;
|
|
202
|
+
flex: 1 1 auto;
|
|
203
|
+
flex-wrap: wrap !important;
|
|
204
|
+
align-items: baseline !important;
|
|
205
|
+
gap: var(--ui-space-2) var(--ui-space-6) !important;
|
|
206
|
+
min-inline-size: 0;
|
|
207
|
+
}
|
|
208
|
+
:global(.brand:where([data-hn-ui-site-header])) {
|
|
209
|
+
min-inline-size: 0;
|
|
210
|
+
font-size: var(--ui-font-size-lg);
|
|
211
|
+
font-weight: var(--ui-font-bold);
|
|
212
|
+
}
|
|
213
|
+
:global(.brand > :where(:not([data-hn-ui-site-header])):is(a)) {
|
|
214
|
+
display: inline-flex !important;
|
|
215
|
+
align-items: baseline !important;
|
|
216
|
+
gap: var(--ui-space-3) !important;
|
|
217
|
+
min-inline-size: 0;
|
|
218
|
+
max-inline-size: 100%;
|
|
219
|
+
color: inherit;
|
|
220
|
+
text-decoration: none;
|
|
221
|
+
}
|
|
222
|
+
:global(.navigation:where([data-hn-ui-site-header])) {
|
|
223
|
+
display: flex !important;
|
|
224
|
+
flex-wrap: wrap !important;
|
|
225
|
+
align-items: baseline !important;
|
|
226
|
+
gap: var(--ui-space-2) var(--ui-space-5) !important;
|
|
227
|
+
min-inline-size: 0;
|
|
228
|
+
font-size: var(--ui-font-size-sm);
|
|
229
|
+
font-weight: var(--ui-font-semibold);
|
|
230
|
+
}
|
|
231
|
+
:global(:scope:has(> .menu:not(:empty)) .navigation:where([data-hn-ui-site-header])) {
|
|
232
|
+
display: none !important;
|
|
233
|
+
}
|
|
234
|
+
:global(.navigation > :where(:not([data-hn-ui-site-header])):is(a)) {
|
|
235
|
+
color: inherit;
|
|
236
|
+
text-decoration: none;
|
|
237
|
+
}
|
|
238
|
+
:global(.navigation
|
|
239
|
+
> :where(:not([data-hn-ui-site-header])):is(a):is(:hover, [aria-current="page"], [aria-current="true"])) {
|
|
240
|
+
color: var(--ui-accent-active);
|
|
241
|
+
}
|
|
242
|
+
:global(.brand > :where(:not([data-hn-ui-site-header])):is(a):focus-visible),
|
|
243
|
+
:global(.navigation > :where(:not([data-hn-ui-site-header])):is(a):focus-visible) {
|
|
244
|
+
outline: var(--ui-focus-width) solid var(--ui-focus-ring);
|
|
245
|
+
outline-offset: var(--ui-focus-width);
|
|
246
|
+
}
|
|
247
|
+
:global(.menu:empty:where([data-hn-ui-site-header])),
|
|
248
|
+
:global(.actions:empty:where([data-hn-ui-site-header])),
|
|
249
|
+
:global(.brand:empty:where([data-hn-ui-site-header])),
|
|
250
|
+
:global(.navigation:empty:where([data-hn-ui-site-header])) {
|
|
251
|
+
display: none !important;
|
|
252
|
+
}
|
|
253
|
+
@media (min-width: 40rem) {
|
|
254
|
+
:global(:scope[data-ui-site-header-state~="breakpoint=sm"]:where([data-hn-ui-site-header])) {
|
|
255
|
+
min-block-size: var(--ui-site-header-height, 4.25rem);
|
|
256
|
+
column-gap: var(--ui-space-4) !important;
|
|
257
|
+
}
|
|
258
|
+
:global(:scope[data-ui-site-header-state~="breakpoint=sm"]
|
|
259
|
+
.navigation:not(:empty):where([data-hn-ui-site-header])) {
|
|
260
|
+
display: flex !important;
|
|
261
|
+
}
|
|
262
|
+
:global(:scope[data-ui-site-header-state~="breakpoint=sm"]
|
|
263
|
+
.menu:where([data-hn-ui-site-header])) {
|
|
264
|
+
display: none !important;
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
@media (min-width: 48rem) {
|
|
268
|
+
:global(:scope[data-ui-site-header-state~="breakpoint=md"]:where([data-hn-ui-site-header])) {
|
|
269
|
+
min-block-size: var(--ui-site-header-height, 4.25rem);
|
|
270
|
+
column-gap: var(--ui-space-4) !important;
|
|
271
|
+
}
|
|
272
|
+
:global(:scope[data-ui-site-header-state~="breakpoint=md"]
|
|
273
|
+
.navigation:not(:empty):where([data-hn-ui-site-header])) {
|
|
274
|
+
display: flex !important;
|
|
275
|
+
}
|
|
276
|
+
:global(:scope[data-ui-site-header-state~="breakpoint=md"]
|
|
277
|
+
.menu:where([data-hn-ui-site-header])) {
|
|
278
|
+
display: none !important;
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
@media (min-width: 64rem) {
|
|
282
|
+
:global(:scope[data-ui-site-header-state~="breakpoint=lg"]:where([data-hn-ui-site-header])) {
|
|
283
|
+
min-block-size: var(--ui-site-header-height, 4.25rem);
|
|
284
|
+
column-gap: var(--ui-space-4) !important;
|
|
285
|
+
}
|
|
286
|
+
:global(:scope[data-ui-site-header-state~="breakpoint=lg"]
|
|
287
|
+
.navigation:not(:empty):where([data-hn-ui-site-header])) {
|
|
288
|
+
display: flex !important;
|
|
289
|
+
}
|
|
290
|
+
:global(:scope[data-ui-site-header-state~="breakpoint=lg"]
|
|
291
|
+
.menu:where([data-hn-ui-site-header])) {
|
|
292
|
+
display: none !important;
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
:global(:scope[hidden]:where([data-hn-ui-site-header])) {
|
|
296
|
+
display: none !important;
|
|
297
|
+
}
|
|
298
|
+
}
|
|
299
|
+
</style>
|
package/vue/chunks/UiCallout.js
CHANGED
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
import { C as useReflectedProp, _ as nativeAttrs, a as checkHydratedRoot, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
|
|
2
|
+
import { h as vuePropInputs, i as checkPropInput, m as vPropValidity, t as BINDING_INPUTS_PROP } from "./props.js";
|
|
3
|
+
import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, renderSlot, unref, watchSyncEffect, withDirectives } from "vue";
|
|
4
|
+
//#region .build/vue/UiSiteHeader.vue?vue&type=script&setup=true&lang.ts
|
|
5
|
+
var _hoisted_1 = [
|
|
6
|
+
"data-ui-site-header-prop-breakpoint",
|
|
7
|
+
"data-ui-site-header-prop-label",
|
|
8
|
+
"data-ui-site-header-prop-sticky",
|
|
9
|
+
"data-ui-site-header-state"
|
|
10
|
+
];
|
|
11
|
+
var _hoisted_2 = {
|
|
12
|
+
class: "menu",
|
|
13
|
+
"data-hn-ui-site-header": ""
|
|
14
|
+
};
|
|
15
|
+
var _hoisted_3 = {
|
|
16
|
+
class: "identity",
|
|
17
|
+
"data-hn-ui-site-header": ""
|
|
18
|
+
};
|
|
19
|
+
var _hoisted_4 = {
|
|
20
|
+
class: "brand",
|
|
21
|
+
"data-hn-ui-site-header": ""
|
|
22
|
+
};
|
|
23
|
+
var _hoisted_5 = ["aria-label"];
|
|
24
|
+
var _hoisted_6 = {
|
|
25
|
+
class: "actions",
|
|
26
|
+
"data-hn-ui-site-header": ""
|
|
27
|
+
};
|
|
28
|
+
//#endregion
|
|
29
|
+
//#region .build/vue/UiSiteHeader.vue
|
|
30
|
+
var UiSiteHeader_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
|
|
31
|
+
inheritAttrs: false,
|
|
32
|
+
__name: "UiSiteHeader",
|
|
33
|
+
props: {
|
|
34
|
+
breakpoint: { type: null },
|
|
35
|
+
label: { type: null },
|
|
36
|
+
sticky: { type: null },
|
|
37
|
+
[BINDING_INPUTS_PROP]: { type: null }
|
|
38
|
+
},
|
|
39
|
+
setup(__props) {
|
|
40
|
+
const propValidityContract = { props: {
|
|
41
|
+
breakpoint: {
|
|
42
|
+
type: {
|
|
43
|
+
kind: "terminal",
|
|
44
|
+
name: "keyword"
|
|
45
|
+
},
|
|
46
|
+
required: false,
|
|
47
|
+
target: { attribute: "breakpoint" },
|
|
48
|
+
description: "The viewport width at which navigation replaces the menu trigger: sm is 40rem, md 48rem, and lg 64rem. The consumer owns the menu or drawer the trigger\n opens.",
|
|
49
|
+
values: [
|
|
50
|
+
"sm",
|
|
51
|
+
"md",
|
|
52
|
+
"lg"
|
|
53
|
+
],
|
|
54
|
+
default: "lg"
|
|
55
|
+
},
|
|
56
|
+
label: {
|
|
57
|
+
type: {
|
|
58
|
+
kind: "terminal",
|
|
59
|
+
name: "string"
|
|
60
|
+
},
|
|
61
|
+
required: false,
|
|
62
|
+
target: { attribute: "aria-label" },
|
|
63
|
+
description: "Accessible name for the primary navigation region.",
|
|
64
|
+
default: "Main"
|
|
65
|
+
},
|
|
66
|
+
sticky: {
|
|
67
|
+
type: {
|
|
68
|
+
kind: "terminal",
|
|
69
|
+
name: "boolean"
|
|
70
|
+
},
|
|
71
|
+
required: false,
|
|
72
|
+
target: { attribute: "sticky" },
|
|
73
|
+
description: "Keeps the header at the top of its scrolling container.",
|
|
74
|
+
default: false
|
|
75
|
+
}
|
|
76
|
+
} };
|
|
77
|
+
const props = __props;
|
|
78
|
+
const inputTracking = vuePropInputs({
|
|
79
|
+
breakpoint: "lg",
|
|
80
|
+
label: "Main",
|
|
81
|
+
sticky: false
|
|
82
|
+
}, {
|
|
83
|
+
breakpoint: "lg",
|
|
84
|
+
label: "Main",
|
|
85
|
+
sticky: false
|
|
86
|
+
}, (name, value, source, values) => {
|
|
87
|
+
switch (name) {
|
|
88
|
+
case "breakpoint": return checkPropInput(value, {
|
|
89
|
+
kind: "terminal",
|
|
90
|
+
name: "keyword"
|
|
91
|
+
}, true, true);
|
|
92
|
+
case "label": return checkPropInput(value, {
|
|
93
|
+
kind: "terminal",
|
|
94
|
+
name: "string"
|
|
95
|
+
}, true, true);
|
|
96
|
+
case "sticky": return checkPropInput(value, {
|
|
97
|
+
kind: "terminal",
|
|
98
|
+
name: "boolean"
|
|
99
|
+
}, true, true);
|
|
100
|
+
default: return { ok: false };
|
|
101
|
+
}
|
|
102
|
+
}, () => {
|
|
103
|
+
checkedProps.value;
|
|
104
|
+
});
|
|
105
|
+
const propInputs = inputTracking.inputs;
|
|
106
|
+
const checkedProps = computed(() => {
|
|
107
|
+
inputTracking.version.value;
|
|
108
|
+
return {
|
|
109
|
+
breakpoint: propInputs.value("breakpoint", props["breakpoint"], props[BINDING_INPUTS_PROP]),
|
|
110
|
+
label: propInputs.value("label", props["label"], props[BINDING_INPUTS_PROP]),
|
|
111
|
+
sticky: propInputs.value("sticky", props["sticky"], props[BINDING_INPUTS_PROP])
|
|
112
|
+
};
|
|
113
|
+
});
|
|
114
|
+
checkedProps.value;
|
|
115
|
+
watchSyncEffect(() => {
|
|
116
|
+
checkedProps.value;
|
|
117
|
+
});
|
|
118
|
+
const reflectedProp = useReflectedProp();
|
|
119
|
+
checkHydratedRoot("header", "ui-site-header");
|
|
120
|
+
/** The values the styles' :host() and :state() rules test. */
|
|
121
|
+
const hostState = computed(() => [
|
|
122
|
+
checkedProps.value.sticky && "sticky",
|
|
123
|
+
checkedProps.value.breakpoint && "breakpoint",
|
|
124
|
+
checkedProps.value.breakpoint != null && `breakpoint=${encodeURIComponent(checkedProps.value.breakpoint)}`
|
|
125
|
+
].filter(Boolean).join(" "));
|
|
126
|
+
return (_ctx, _cache) => {
|
|
127
|
+
return withDirectives((openBlock(), createElementBlock("header", mergeProps({ class: "ui-site-header" }, unref(nativeAttrs)(_ctx.$attrs), {
|
|
128
|
+
"data-hn": "",
|
|
129
|
+
"data-hn-ui-site-header": "",
|
|
130
|
+
"data-ui-site-header-prop-breakpoint": unref(reflectedProp)("breakpoint", "breakpoint", checkedProps.value.breakpoint, void 0, false),
|
|
131
|
+
"data-ui-site-header-prop-label": unref(reflectedProp)("label", "label", checkedProps.value.label, void 0, false),
|
|
132
|
+
"data-ui-site-header-prop-sticky": unref(reflectedProp)("sticky", "sticky", checkedProps.value.sticky, void 0, false),
|
|
133
|
+
"data-ui-site-header-state": hostState.value || void 0
|
|
134
|
+
}), [
|
|
135
|
+
createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "menu", {}, void 0, true)]),
|
|
136
|
+
createElementVNode("div", _hoisted_3, [createElementVNode("div", _hoisted_4, [renderSlot(_ctx.$slots, "brand", {}, void 0, true)]), createElementVNode("nav", {
|
|
137
|
+
class: "navigation",
|
|
138
|
+
"data-hn-ui-site-header": "",
|
|
139
|
+
"aria-label": checkedProps.value.label ?? void 0
|
|
140
|
+
}, [renderSlot(_ctx.$slots, "navigation", {}, void 0, true)], 8, _hoisted_5)]),
|
|
141
|
+
createElementVNode("div", _hoisted_6, [renderSlot(_ctx.$slots, "actions", {}, void 0, true)])
|
|
142
|
+
], 16, _hoisted_1)), [[unref(vPropValidity), {
|
|
143
|
+
contract: propValidityContract,
|
|
144
|
+
values: { ...props }
|
|
145
|
+
}]]);
|
|
146
|
+
};
|
|
147
|
+
}
|
|
148
|
+
}), [["__scopeId", "data-v-a60b14b2"]]);
|
|
149
|
+
//#endregion
|
|
150
|
+
export { UiSiteHeader_default as t };
|
package/vue/components.css
CHANGED
|
@@ -1647,7 +1647,15 @@ html[data-ui-input-modality="touch"]
|
|
|
1647
1647
|
--_ui-callout-icon: var(--ui-callout-icon);
|
|
1648
1648
|
--_ui-callout-icon-size: var(--ui-callout-icon-size);
|
|
1649
1649
|
|
|
1650
|
-
|
|
1650
|
+
/* Near white, sRGB retains more green chroma than blue/red; bound chroma by hue to avoid clipping. */
|
|
1651
|
+
--_callout-surface: light-dark(
|
|
1652
|
+
oklch(
|
|
1653
|
+
from var(--_callout-border)
|
|
1654
|
+
96% min(c, calc(0.02 + 0.03 * max(0, cos(calc((h - 140) * 1deg)))))
|
|
1655
|
+
h
|
|
1656
|
+
),
|
|
1657
|
+
oklch(from var(--_callout-border) 25% min(c, 0.035) h)
|
|
1658
|
+
);
|
|
1651
1659
|
--_ui-selection-context-surface: light-dark(
|
|
1652
1660
|
oklch(
|
|
1653
1661
|
from var(--ui-callout-surface, var(--_callout-surface))
|
|
@@ -10585,6 +10593,160 @@ dialog:where([data-hn-ui-search-shell]) {
|
|
|
10585
10593
|
}
|
|
10586
10594
|
}
|
|
10587
10595
|
|
|
10596
|
+
@property --ui-site-header-height {
|
|
10597
|
+
syntax: "*";
|
|
10598
|
+
inherits: false;
|
|
10599
|
+
}
|
|
10600
|
+
@property --ui-site-header-compact-height {
|
|
10601
|
+
syntax: "*";
|
|
10602
|
+
inherits: false;
|
|
10603
|
+
}
|
|
10604
|
+
@property --ui-site-header-padding-inline {
|
|
10605
|
+
syntax: "*";
|
|
10606
|
+
inherits: false;
|
|
10607
|
+
}
|
|
10608
|
+
@property --ui-site-header-surface {
|
|
10609
|
+
syntax: "*";
|
|
10610
|
+
inherits: false;
|
|
10611
|
+
}
|
|
10612
|
+
@property --ui-site-header-border {
|
|
10613
|
+
syntax: "*";
|
|
10614
|
+
inherits: false;
|
|
10615
|
+
}
|
|
10616
|
+
@property --ui-site-header-z-index {
|
|
10617
|
+
syntax: "*";
|
|
10618
|
+
inherits: false;
|
|
10619
|
+
}
|
|
10620
|
+
/* Text shares a baseline inside one group; the group is centred beside any control height. */
|
|
10621
|
+
/* Without a supplied menu trigger, keep the destinations available on narrow screens. */
|
|
10622
|
+
@scope (.ui-site-header) to ([data-hn]) {
|
|
10623
|
+
:scope:where([data-hn-ui-site-header]) {
|
|
10624
|
+
box-sizing: border-box !important;
|
|
10625
|
+
display: flex !important;
|
|
10626
|
+
flex-wrap: wrap !important;
|
|
10627
|
+
align-items: center !important;
|
|
10628
|
+
align-content: center !important;
|
|
10629
|
+
gap: var(--ui-space-2) !important;
|
|
10630
|
+
min-inline-size: 0;
|
|
10631
|
+
min-block-size: var(--ui-site-header-compact-height, 3.75rem);
|
|
10632
|
+
padding: var(--ui-space-2) var(--ui-site-header-padding-inline, var(--ui-space-4)) !important;
|
|
10633
|
+
border-block-end: var(--ui-border-width) solid var(--ui-site-header-border, var(--ui-border));
|
|
10634
|
+
background: var(--ui-site-header-surface, var(--ui-surface));
|
|
10635
|
+
color: var(--ui-text-primary);
|
|
10636
|
+
}
|
|
10637
|
+
:scope[data-ui-site-header-state~="sticky"]:where([data-hn-ui-site-header]) {
|
|
10638
|
+
position: sticky;
|
|
10639
|
+
inset-block-start: 0;
|
|
10640
|
+
z-index: var(--ui-site-header-z-index, 10);
|
|
10641
|
+
}
|
|
10642
|
+
.menu:where([data-hn-ui-site-header]),.actions:where([data-hn-ui-site-header]) {
|
|
10643
|
+
display: flex !important;
|
|
10644
|
+
flex: none;
|
|
10645
|
+
align-items: center !important;
|
|
10646
|
+
gap: var(--ui-space-2) !important;
|
|
10647
|
+
min-inline-size: 0;
|
|
10648
|
+
max-inline-size: 100%;
|
|
10649
|
+
}
|
|
10650
|
+
.actions:where([data-hn-ui-site-header]) {
|
|
10651
|
+
flex-wrap: wrap !important;
|
|
10652
|
+
margin-inline-start: auto !important;
|
|
10653
|
+
}
|
|
10654
|
+
.identity:where([data-hn-ui-site-header]) {
|
|
10655
|
+
display: flex !important;
|
|
10656
|
+
flex: 1 1 auto;
|
|
10657
|
+
flex-wrap: wrap !important;
|
|
10658
|
+
align-items: baseline !important;
|
|
10659
|
+
gap: var(--ui-space-2) var(--ui-space-6) !important;
|
|
10660
|
+
min-inline-size: 0;
|
|
10661
|
+
}
|
|
10662
|
+
.brand:where([data-hn-ui-site-header]) {
|
|
10663
|
+
min-inline-size: 0;
|
|
10664
|
+
font-size: var(--ui-font-size-lg);
|
|
10665
|
+
font-weight: var(--ui-font-bold);
|
|
10666
|
+
}
|
|
10667
|
+
.brand > :where(:not([data-hn-ui-site-header])):is(a) {
|
|
10668
|
+
display: inline-flex !important;
|
|
10669
|
+
align-items: baseline !important;
|
|
10670
|
+
gap: var(--ui-space-3) !important;
|
|
10671
|
+
min-inline-size: 0;
|
|
10672
|
+
max-inline-size: 100%;
|
|
10673
|
+
color: inherit;
|
|
10674
|
+
text-decoration: none;
|
|
10675
|
+
}
|
|
10676
|
+
.navigation:where([data-hn-ui-site-header]) {
|
|
10677
|
+
display: flex !important;
|
|
10678
|
+
flex-wrap: wrap !important;
|
|
10679
|
+
align-items: baseline !important;
|
|
10680
|
+
gap: var(--ui-space-2) var(--ui-space-5) !important;
|
|
10681
|
+
min-inline-size: 0;
|
|
10682
|
+
font-size: var(--ui-font-size-sm);
|
|
10683
|
+
font-weight: var(--ui-font-semibold);
|
|
10684
|
+
}
|
|
10685
|
+
:scope:has(> .menu:not(:empty)) .navigation:where([data-hn-ui-site-header]) {
|
|
10686
|
+
display: none !important;
|
|
10687
|
+
}
|
|
10688
|
+
.navigation > :where(:not([data-hn-ui-site-header])):is(a) {
|
|
10689
|
+
color: inherit;
|
|
10690
|
+
text-decoration: none;
|
|
10691
|
+
}
|
|
10692
|
+
.navigation
|
|
10693
|
+
> :where(:not([data-hn-ui-site-header])):is(a):is(:hover, [aria-current="page"], [aria-current="true"]) {
|
|
10694
|
+
color: var(--ui-accent-active);
|
|
10695
|
+
}
|
|
10696
|
+
.brand > :where(:not([data-hn-ui-site-header])):is(a):focus-visible,.navigation > :where(:not([data-hn-ui-site-header])):is(a):focus-visible {
|
|
10697
|
+
outline: var(--ui-focus-width) solid var(--ui-focus-ring);
|
|
10698
|
+
outline-offset: var(--ui-focus-width);
|
|
10699
|
+
}
|
|
10700
|
+
.menu:empty:where([data-hn-ui-site-header]),.actions:empty:where([data-hn-ui-site-header]),.brand:empty:where([data-hn-ui-site-header]),.navigation:empty:where([data-hn-ui-site-header]) {
|
|
10701
|
+
display: none !important;
|
|
10702
|
+
}
|
|
10703
|
+
@media (min-width: 40rem) {
|
|
10704
|
+
:scope[data-ui-site-header-state~="breakpoint=sm"]:where([data-hn-ui-site-header]) {
|
|
10705
|
+
min-block-size: var(--ui-site-header-height, 4.25rem);
|
|
10706
|
+
column-gap: var(--ui-space-4) !important;
|
|
10707
|
+
}
|
|
10708
|
+
:scope[data-ui-site-header-state~="breakpoint=sm"]
|
|
10709
|
+
.navigation:not(:empty):where([data-hn-ui-site-header]) {
|
|
10710
|
+
display: flex !important;
|
|
10711
|
+
}
|
|
10712
|
+
:scope[data-ui-site-header-state~="breakpoint=sm"]
|
|
10713
|
+
.menu:where([data-hn-ui-site-header]) {
|
|
10714
|
+
display: none !important;
|
|
10715
|
+
}
|
|
10716
|
+
}
|
|
10717
|
+
@media (min-width: 48rem) {
|
|
10718
|
+
:scope[data-ui-site-header-state~="breakpoint=md"]:where([data-hn-ui-site-header]) {
|
|
10719
|
+
min-block-size: var(--ui-site-header-height, 4.25rem);
|
|
10720
|
+
column-gap: var(--ui-space-4) !important;
|
|
10721
|
+
}
|
|
10722
|
+
:scope[data-ui-site-header-state~="breakpoint=md"]
|
|
10723
|
+
.navigation:not(:empty):where([data-hn-ui-site-header]) {
|
|
10724
|
+
display: flex !important;
|
|
10725
|
+
}
|
|
10726
|
+
:scope[data-ui-site-header-state~="breakpoint=md"]
|
|
10727
|
+
.menu:where([data-hn-ui-site-header]) {
|
|
10728
|
+
display: none !important;
|
|
10729
|
+
}
|
|
10730
|
+
}
|
|
10731
|
+
@media (min-width: 64rem) {
|
|
10732
|
+
:scope[data-ui-site-header-state~="breakpoint=lg"]:where([data-hn-ui-site-header]) {
|
|
10733
|
+
min-block-size: var(--ui-site-header-height, 4.25rem);
|
|
10734
|
+
column-gap: var(--ui-space-4) !important;
|
|
10735
|
+
}
|
|
10736
|
+
:scope[data-ui-site-header-state~="breakpoint=lg"]
|
|
10737
|
+
.navigation:not(:empty):where([data-hn-ui-site-header]) {
|
|
10738
|
+
display: flex !important;
|
|
10739
|
+
}
|
|
10740
|
+
:scope[data-ui-site-header-state~="breakpoint=lg"]
|
|
10741
|
+
.menu:where([data-hn-ui-site-header]) {
|
|
10742
|
+
display: none !important;
|
|
10743
|
+
}
|
|
10744
|
+
}
|
|
10745
|
+
:scope[hidden]:where([data-hn-ui-site-header]) {
|
|
10746
|
+
display: none !important;
|
|
10747
|
+
}
|
|
10748
|
+
}
|
|
10749
|
+
|
|
10588
10750
|
/* Dimensions belong to this placeholder, never a nested or neighbouring one. */
|
|
10589
10751
|
@property --ui-skeleton-width {
|
|
10590
10752
|
syntax: "*";
|
|
@@ -17324,7 +17486,11 @@ html[data-ui-input-modality="touch"]
|
|
|
17324
17486
|
--_ui-callout-icon: var(--ui-callout-icon);
|
|
17325
17487
|
--_ui-callout-icon-size: var(--ui-callout-icon-size);
|
|
17326
17488
|
|
|
17327
|
-
|
|
17489
|
+
/* Near white, sRGB retains more green chroma than blue/red; bound chroma by hue to avoid clipping. */
|
|
17490
|
+
--_callout-surface: light-dark(
|
|
17491
|
+
oklch(from var(--_callout-border) 96% min(c, calc(0.02 + 0.03 * max(0, cos(calc((h - 140) * 1deg))))) h),
|
|
17492
|
+
oklch(from var(--_callout-border) 25% min(c, 0.035) h)
|
|
17493
|
+
);
|
|
17328
17494
|
--_ui-selection-context-surface: light-dark(
|
|
17329
17495
|
oklch(from var(--ui-callout-surface, var(--_callout-surface)) calc(l - 0.045) calc(max(c, min(0.045, c * 3))) h),
|
|
17330
17496
|
oklch(from var(--ui-callout-surface, var(--_callout-surface)) calc(l + 0.045) calc(max(c, min(0.045, c * 3))) h)
|
package/vue/index.d.ts
CHANGED
|
@@ -71,6 +71,7 @@ export { default as Section } from "./UiSection.js";
|
|
|
71
71
|
export { default as Select } from "./UiSelect.js";
|
|
72
72
|
export { default as Separator } from "./UiSeparator.js";
|
|
73
73
|
export { default as Sidebar } from "./UiSidebar.js";
|
|
74
|
+
export { default as SiteHeader } from "./UiSiteHeader.js";
|
|
74
75
|
export { default as Skeleton } from "./UiSkeleton.js";
|
|
75
76
|
export { default as Slider } from "./UiSlider.js";
|
|
76
77
|
export { default as Spinner } from "./UiSpinner.js";
|
package/vue/index.js
CHANGED
|
@@ -77,6 +77,7 @@ import { t as UiSection_default } from "./chunks/UiSection.js";
|
|
|
77
77
|
import { t as UiSelect_default } from "./chunks/UiSelect.js";
|
|
78
78
|
import { t as UiSeparator_default } from "./chunks/UiSeparator.js";
|
|
79
79
|
import { t as UiSidebar_default } from "./chunks/UiSidebar.js";
|
|
80
|
+
import { t as UiSiteHeader_default } from "./chunks/UiSiteHeader.js";
|
|
80
81
|
import { t as UiSkeleton_default } from "./chunks/UiSkeleton.js";
|
|
81
82
|
import { t as UiSlider_default } from "./chunks/UiSlider.js";
|
|
82
83
|
import { t as UiStatusMessage_default } from "./chunks/UiStatusMessage.js";
|
|
@@ -90,4 +91,4 @@ import { t as UiTopBar_default } from "./chunks/UiTopBar.js";
|
|
|
90
91
|
import { t as UiTree_default } from "./chunks/UiTree.js";
|
|
91
92
|
import { t as UiTreeItem_default } from "./chunks/UiTreeItem.js";
|
|
92
93
|
import { trackInputModality } from "@threadlabs/looma/components/shared/input-modality.js";
|
|
93
|
-
export { UiActionBar_default as ActionBar, UiAffordanceScope_default as AffordanceScope, UiAvatar_default as Avatar, UiAvatarGroup_default as AvatarGroup, UiBadge_default as Badge, UiBreadcrumbItem_default as BreadcrumbItem, UiBreadcrumbs_default as Breadcrumbs, UiButton_default as Button, UiCallout_default as Callout, UiCard_default as Card, UiCheckbox_default as Checkbox, UiCluster_default as Cluster, UiColorPicker_default as ColorPicker, UiCombobox_default as Combobox, UiContainer_default as Container, UiContextMenu_default as ContextMenu, UiCover_default as Cover, UiCurveEditor_default as CurveEditor, UiCycleButton_default as CycleButton, UiDescriptionItem_default as DescriptionItem, UiDescriptionList_default as DescriptionList, UiDialog_default as Dialog, UiDisclosure_default as Disclosure, UiEditable_default as Editable, UiEditorBlockActions_default as EditorBlockActions, UiEditorChipEditor_default as EditorChipEditor, UiEditorCodeLanguage_default as EditorCodeLanguage, UiEditorFootnoteEditor_default as EditorFootnoteEditor, UiEditorImageToolbar_default as EditorImageToolbar, UiEditorInsertTableGrid_default as EditorInsertTableGrid, UiEditorLinkCard_default as EditorLinkCard, UiEditorLinkForm_default as EditorLinkForm, UiEditorMentionMenu_default as EditorMentionMenu, UiEditorMentionMenuItem_default as EditorMentionMenuItem, UiEditorSlashMenu_default as EditorSlashMenu, UiEditorSlashMenuGroup_default as EditorSlashMenuGroup, UiEditorSlashMenuItem_default as EditorSlashMenuItem, UiEditorSurface_default as EditorSurface, UiEditorTableContextMenu_default as EditorTableContextMenu, UiEditorTableOverlay_default as EditorTableOverlay, UiEditorTableToolbar_default as EditorTableToolbar, UiEditorToolbar_default as EditorToolbar, UiFloatingActionButton_default as FloatingActionButton, UiFormField_default as FormField, UiGrid_default as Grid, UiIcon_default as Icon, UiIconButton_default as IconButton, UiImage_default as Image, UiInput_default as Input, UiInputGroup_default as InputGroup, UiLightEditor_default as LightEditor, UiList_default as List, UiListItem_default as ListItem, UiListbox_default as Listbox, UiMenu_default as Menu, UiMenuGroup_default as MenuGroup, UiMenuItem_default as MenuItem, UiMeter_default as Meter, UiNavItem_default as NavItem, UiNumberInput_default as NumberInput, UiPageHeader_default as PageHeader, UiPagination_default as Pagination, UiPopover_default as Popover, UiRadio_default as Radio, UiRadioGroup_default as RadioGroup, UiReel_default as Reel, UiScrollArea_default as ScrollArea, UiSearchResultRow_default as SearchResultRow, UiSearchShell_default as SearchShell, UiSection_default as Section, UiSelect_default as Select, UiSeparator_default as Separator, UiSidebar_default as Sidebar, UiSkeleton_default as Skeleton, UiSlider_default as Slider, UiSpinner_default as Spinner, UiStack_default as Stack, UiStatusMessage_default as StatusMessage, UiSwatch_default as Swatch, UiSwitch_default as Switch, UiSwitcher_default as Switcher, UiTable_default as Table, UiTabs_default as Tabs, UiText_default as Text, UiTextarea_default as Textarea, UiToast_default as Toast, UiToastRegion_default as ToastRegion, UiTooltip_default as Tooltip, UiTopBar_default as TopBar, UiTree_default as Tree, UiTreeItem_default as TreeItem, trackInputModality };
|
|
94
|
+
export { UiActionBar_default as ActionBar, UiAffordanceScope_default as AffordanceScope, UiAvatar_default as Avatar, UiAvatarGroup_default as AvatarGroup, UiBadge_default as Badge, UiBreadcrumbItem_default as BreadcrumbItem, UiBreadcrumbs_default as Breadcrumbs, UiButton_default as Button, UiCallout_default as Callout, UiCard_default as Card, UiCheckbox_default as Checkbox, UiCluster_default as Cluster, UiColorPicker_default as ColorPicker, UiCombobox_default as Combobox, UiContainer_default as Container, UiContextMenu_default as ContextMenu, UiCover_default as Cover, UiCurveEditor_default as CurveEditor, UiCycleButton_default as CycleButton, UiDescriptionItem_default as DescriptionItem, UiDescriptionList_default as DescriptionList, UiDialog_default as Dialog, UiDisclosure_default as Disclosure, UiEditable_default as Editable, UiEditorBlockActions_default as EditorBlockActions, UiEditorChipEditor_default as EditorChipEditor, UiEditorCodeLanguage_default as EditorCodeLanguage, UiEditorFootnoteEditor_default as EditorFootnoteEditor, UiEditorImageToolbar_default as EditorImageToolbar, UiEditorInsertTableGrid_default as EditorInsertTableGrid, UiEditorLinkCard_default as EditorLinkCard, UiEditorLinkForm_default as EditorLinkForm, UiEditorMentionMenu_default as EditorMentionMenu, UiEditorMentionMenuItem_default as EditorMentionMenuItem, UiEditorSlashMenu_default as EditorSlashMenu, UiEditorSlashMenuGroup_default as EditorSlashMenuGroup, UiEditorSlashMenuItem_default as EditorSlashMenuItem, UiEditorSurface_default as EditorSurface, UiEditorTableContextMenu_default as EditorTableContextMenu, UiEditorTableOverlay_default as EditorTableOverlay, UiEditorTableToolbar_default as EditorTableToolbar, UiEditorToolbar_default as EditorToolbar, UiFloatingActionButton_default as FloatingActionButton, UiFormField_default as FormField, UiGrid_default as Grid, UiIcon_default as Icon, UiIconButton_default as IconButton, UiImage_default as Image, UiInput_default as Input, UiInputGroup_default as InputGroup, UiLightEditor_default as LightEditor, UiList_default as List, UiListItem_default as ListItem, UiListbox_default as Listbox, UiMenu_default as Menu, UiMenuGroup_default as MenuGroup, UiMenuItem_default as MenuItem, UiMeter_default as Meter, UiNavItem_default as NavItem, UiNumberInput_default as NumberInput, UiPageHeader_default as PageHeader, UiPagination_default as Pagination, UiPopover_default as Popover, UiRadio_default as Radio, UiRadioGroup_default as RadioGroup, UiReel_default as Reel, UiScrollArea_default as ScrollArea, UiSearchResultRow_default as SearchResultRow, UiSearchShell_default as SearchShell, UiSection_default as Section, UiSelect_default as Select, UiSeparator_default as Separator, UiSidebar_default as Sidebar, UiSiteHeader_default as SiteHeader, UiSkeleton_default as Skeleton, UiSlider_default as Slider, UiSpinner_default as Spinner, UiStack_default as Stack, UiStatusMessage_default as StatusMessage, UiSwatch_default as Swatch, UiSwitch_default as Switch, UiSwitcher_default as Switcher, UiTable_default as Table, UiTabs_default as Tabs, UiText_default as Text, UiTextarea_default as Textarea, UiToast_default as Toast, UiToastRegion_default as ToastRegion, UiTooltip_default as Tooltip, UiTopBar_default as TopBar, UiTree_default as Tree, UiTreeItem_default as TreeItem, trackInputModality };
|