@hawiyah/vue 0.0.0-stage → 0.2.0

package/dist/index.d.ts

@@ -0,0 +1,26 @@
+export { Button, Checkbox, Radio, Switch, TextField, Textarea, Select, FileUpload, IconButton, PasswordField, SearchField, NumberField, Slider, PinInput, TagInput, MultiSelect, FileDropzone, Combobox, DatePicker, NavigationDrawer } from './native-attributes.js';
+export { Field } from './forms.js';
+export { Tabs, Dialog, Tooltip } from './interactive.js';
+export type { TabItem } from './interactive.js';
+export { Accordion, Card, Badge, Alert, Table, Pagination, Breadcrumb, Progress, Skeleton, Spinner, Avatar, Divider, Stepper, EmptyState } from './display.js';
+export type { AccordionItem, TableColumn, BreadcrumbItem, StepItem, Tone } from './display.js';
+export type { FieldDecoration, RenderContent } from './shared.js';
+export { InputGroup, RangeSlider, Rating, RatingDisplay } from './controls.js';
+export { Calendar } from './calendar.js';
+export { ToggleGroup, Popover, Menu, Drawer, ToastRegion, Collapsible, TreeView, Carousel } from './expansion-interactive.js';
+export type { MenuItem, ToastMessage, TreeNode, CarouselSlide } from './expansion-interactive.js';
+export { Link, ButtonGroup, Chip, DescriptionList, Stat, Timeline, Meter, AvatarGroup, DataTable } from './content.js';
+export type { DescriptionItem, TimelineItem, AvatarItem, DataColumn } from './content.js';
+export { ServiceCard, ServiceDetails, PortalHeader, PortalFooter, Feedback, CookieConsent, NotificationList } from './patterns.js';
+export type { PortalLink, PortalFooterLink, PortalFooterGroup, FeedbackValue, NotificationItem } from './patterns.js';
+export { Container, Stack, Inline, Grid, Columns, Sidebar, Center, Spacer, AspectRatio, Section, AppShell, PageHeader } from './layout.js';
+export { SecondaryNav, PortalLayout } from './portal.js';
+export type { LayoutProps, Responsive } from '@hawiyah/core';
+export type { SecondaryNavItem } from './portal.js';
+export { MobileTopBar } from './mobile-top-bar.js';
+export type { NavigationDrawerItem } from './navigation-drawer.js';
+export { SiteVerification } from './site-verification.js';
+export { ContentNavigation } from './content-navigation.js';
+export type { ContentNavigationItem } from './content-navigation.js';
+export { FileUploadList } from './file-upload-list.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AACtQ,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACzD,YAAY,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/J,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAC/F,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAC9H,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAClG,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,eAAe,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACvH,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1F,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,YAAY,EAAE,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACnI,YAAY,EAAE,UAAU,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtH,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC3I,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACzD,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE7D,YAAY,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,YAAY,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAEnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,YAAY,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAErE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/index.js

@@ -0,0 +1,16 @@
+export { Button, Checkbox, Radio, Switch, TextField, Textarea, Select, FileUpload, IconButton, PasswordField, SearchField, NumberField, Slider, PinInput, TagInput, MultiSelect, FileDropzone, Combobox, DatePicker, NavigationDrawer } from './native-attributes.js';
+export { Field } from './forms.js';
+export { Tabs, Dialog, Tooltip } from './interactive.js';
+export { Accordion, Card, Badge, Alert, Table, Pagination, Breadcrumb, Progress, Skeleton, Spinner, Avatar, Divider, Stepper, EmptyState } from './display.js';
+export { InputGroup, RangeSlider, Rating, RatingDisplay } from './controls.js';
+export { Calendar } from './calendar.js';
+export { ToggleGroup, Popover, Menu, Drawer, ToastRegion, Collapsible, TreeView, Carousel } from './expansion-interactive.js';
+export { Link, ButtonGroup, Chip, DescriptionList, Stat, Timeline, Meter, AvatarGroup, DataTable } from './content.js';
+export { ServiceCard, ServiceDetails, PortalHeader, PortalFooter, Feedback, CookieConsent, NotificationList } from './patterns.js';
+export { Container, Stack, Inline, Grid, Columns, Sidebar, Center, Spacer, AspectRatio, Section, AppShell, PageHeader } from './layout.js';
+export { SecondaryNav, PortalLayout } from './portal.js';
+export { MobileTopBar } from './mobile-top-bar.js';
+export { SiteVerification } from './site-verification.js';
+export { ContentNavigation } from './content-navigation.js';
+export { FileUploadList } from './file-upload-list.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AACtQ,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG/J,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAE9H,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,eAAe,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEvH,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,YAAY,EAAE,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEnI,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC3I,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAIzD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAInD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAG5D,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/interactive.d.ts

@@ -0,0 +1,240 @@
+import type { PropType, VNodeChild } from 'vue';
+import type { Option, Orientation } from '@hawiyah/core';
+export interface TabItem {
+    value: string;
+    label: string;
+    content?: VNodeChild;
+    disabled?: boolean;
+}
+export declare const Tabs: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    items: {
+        type: PropType<readonly TabItem[]>;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    modelValue: StringConstructor;
+    defaultValue: StringConstructor;
+    orientation: {
+        type: PropType<Orientation>;
+        default: string;
+    };
+    activationMode: {
+        type: PropType<"automatic" | "manual">;
+        default: string;
+    };
+    overflow: {
+        type: PropType<"menu" | "scroll">;
+        default: string;
+    };
+    overflowLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:modelValue': (_value: string) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    items: {
+        type: PropType<readonly TabItem[]>;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    modelValue: StringConstructor;
+    defaultValue: StringConstructor;
+    orientation: {
+        type: PropType<Orientation>;
+        default: string;
+    };
+    activationMode: {
+        type: PropType<"automatic" | "manual">;
+        default: string;
+    };
+    overflow: {
+        type: PropType<"menu" | "scroll">;
+        default: string;
+    };
+    overflowLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((_value: string) => any) | undefined;
+}>, {
+    orientation: Orientation;
+    activationMode: "automatic" | "manual";
+    overflow: "scroll" | "menu";
+    overflowLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const Dialog: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultOpen: BooleanConstructor;
+    title: {
+        type: StringConstructor;
+        required: true;
+    };
+    description: StringConstructor;
+    closeLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    closeOnBackdrop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => (import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | undefined)[], {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:open': (_open: boolean) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultOpen: BooleanConstructor;
+    title: {
+        type: StringConstructor;
+        required: true;
+    };
+    description: StringConstructor;
+    closeLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    closeOnBackdrop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:open"?: ((_open: boolean) => any) | undefined;
+}>, {
+    defaultOpen: boolean;
+    open: boolean;
+    closeLabel: string;
+    closeOnBackdrop: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const Combobox: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    options: {
+        type: PropType<readonly Option[]>;
+        required: true;
+    };
+    modelValue: StringConstructor;
+    defaultValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: BooleanConstructor;
+    readonly: BooleanConstructor;
+    emptyMessage: {
+        type: StringConstructor;
+        default: string;
+    };
+    resultsMessage: {
+        type: PropType<(count: number) => string>;
+        default: (count: number) => string;
+    };
+    requiredMessage: {
+        type: StringConstructor;
+        default: string;
+    };
+    label: StringConstructor;
+    hint: StringConstructor;
+    error: StringConstructor;
+    required: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+}>, () => string | number | boolean | void | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | import("vue").VNodeArrayChildren | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:modelValue': (_value: string) => true;
+    'update:open': (_open: boolean) => true;
+    'update:query': (_query: string) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    options: {
+        type: PropType<readonly Option[]>;
+        required: true;
+    };
+    modelValue: StringConstructor;
+    defaultValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: BooleanConstructor;
+    readonly: BooleanConstructor;
+    emptyMessage: {
+        type: StringConstructor;
+        default: string;
+    };
+    resultsMessage: {
+        type: PropType<(count: number) => string>;
+        default: (count: number) => string;
+    };
+    requiredMessage: {
+        type: StringConstructor;
+        default: string;
+    };
+    label: StringConstructor;
+    hint: StringConstructor;
+    error: StringConstructor;
+    required: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((_value: string) => any) | undefined;
+    "onUpdate:open"?: ((_open: boolean) => any) | undefined;
+    "onUpdate:query"?: ((_query: string) => any) | undefined;
+}>, {
+    disabled: boolean;
+    required: boolean;
+    defaultValue: string;
+    readonly: boolean;
+    emptyMessage: string;
+    resultsMessage: (count: number) => string;
+    requiredMessage: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const Tooltip: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    content: {
+        type: StringConstructor;
+        required: true;
+    };
+    placement: {
+        type: PropType<"top" | "bottom" | "start" | "end">;
+        default: string;
+    };
+    align: {
+        type: PropType<"start" | "center" | "end">;
+        default: string;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    content: {
+        type: StringConstructor;
+        required: true;
+    };
+    placement: {
+        type: PropType<"top" | "bottom" | "start" | "end">;
+        default: string;
+    };
+    align: {
+        type: PropType<"start" | "center" | "end">;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    placement: "top" | "bottom" | "start" | "end";
+    align: "start" | "end" | "center";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=interactive.d.ts.map

package/dist/interactive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interactive.d.ts","sourceRoot":"","sources":["../src/interactive.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,KAAK,EAAiB,MAAM,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAIxE,MAAM,WAAW,OAAO;IAAG,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,UAAU,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE;AACnG,eAAO,MAAM,IAAI;;cAEkB,QAAQ,CAAC,SAAS,OAAO,EAAE,CAAC;;;;;;;;;;cAC5B,QAAQ,CAAC,WAAW,CAAC;;;;cAA6D,QAAQ,CAAC,WAAW,GAAG,QAAQ,CAAC;;;;cACtH,QAAQ,CAAC,MAAM,GAAG,QAAQ,CAAC;;;;;;;;;;kCACjB,MAAM;;;cAHZ,QAAQ,CAAC,SAAS,OAAO,EAAE,CAAC;;;;;;;;;;cAC5B,QAAQ,CAAC,WAAW,CAAC;;;;cAA6D,QAAQ,CAAC,WAAW,GAAG,QAAQ,CAAC;;;;cACtH,QAAQ,CAAC,MAAM,GAAG,QAAQ,CAAC;;;;;;;;;;;;;;4EA8DxD,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;2BAGe,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;4EA0CvC,CAAC;AAEH,eAAO,MAAM,QAAQ;;cAEoC,QAAQ,CAAC,SAAS,MAAM,EAAE,CAAC;;;;;;;;;;;;;;;cACiB,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;yBAAmB,MAAM;;;;;;;;;;;;;;;;kCACxH,MAAM;2BAAkC,OAAO;6BAAoC,MAAM;;;cAFzE,QAAQ,CAAC,SAAS,MAAM,EAAE,CAAC;;;;;;;;;;;;;;;cACiB,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;yBAAmB,MAAM;;;;;;;;;;;;;;;;;;;;;;;4BAA3C,MAAM,KAAK,MAAM;;4EAqFrI,CAAC;AAEH,eAAO,MAAM,OAAO;;;;;;cACsG,QAAQ,CAAC,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;;;;cAA2C,QAAQ,CAAC,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;;;;;;;;;;;cAA3H,QAAQ,CAAC,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;;;;cAA2C,QAAQ,CAAC,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;;;;;;4EA6CnP,CAAC"}

package/dist/interactive.js

@@ -0,0 +1,341 @@
+import { cloneVNode, computed, defineComponent, h, isVNode, mergeProps, nextTick, onBeforeUnmount, onMounted, ref, useId, watch, watchEffect } from 'vue';
+import { createComboboxState, getComboboxOptions, getDirection, getNextEnabledIndex, isDisabled, observeTabOverflow, restoreFocus, transitionCombobox } from '@hawiyah/core';
+import { Button, decorate } from './forms.js';
+import { decorationProps, joinIds, useField, useFormReset, useValue } from './shared.js';
+export const Tabs = defineComponent({
+    name: 'HwTabs', inheritAttrs: false,
+    props: { items: { type: Array, required: true }, label: { type: String, required: true }, modelValue: String, defaultValue: String,
+        orientation: { type: String, default: 'horizontal' }, activationMode: { type: String, default: 'automatic' },
+        overflow: { type: String, default: 'menu' }, overflowLabel: { type: String, default: 'المزيد من التبويبات' } },
+    emits: { 'update:modelValue': (_value) => true },
+    setup(props, { attrs, slots, emit }) {
+        const id = `hw-${useId()}`;
+        const model = useValue(() => props.modelValue, props.defaultValue ?? props.items.find(item => !item.disabled)?.value ?? '', value => emit('update:modelValue', value));
+        const focused = ref();
+        const active = computed(() => props.items.find(item => item.value === model.value.value && !item.disabled)?.value ?? props.items.find(item => !item.disabled)?.value);
+        const buttons = new Map();
+        const bar = ref();
+        const disclosure = ref();
+        const hidden = ref([]);
+        let observer;
+        let alive = true;
+        const visible = computed(() => props.items.filter((item, index) => !hidden.value.includes(index) && !item.disabled));
+        const focusValue = computed(() => visible.value.find(item => item.value === focused.value)?.value ?? visible.value.find(item => item.value === active.value)?.value ?? visible.value[0]?.value);
+        const close = () => { if (disclosure.value)
+            disclosure.value.open = false; };
+        const outside = (event) => { if (!bar.value?.contains(event.target))
+            close(); };
+        onMounted(() => {
+            const node = bar.value;
+            observer = observeTabOverflow({ container: node, tabs: () => props.items.map(item => buttons.get(item.value)).filter(Boolean), enabled: () => props.overflow === 'menu' && props.orientation === 'horizontal', onChange: next => {
+                    const focusedElement = node.ownerDocument.activeElement;
+                    const menuValue = focusedElement?.dataset.hwOverflowValue;
+                    const itemIndex = props.items.findIndex(item => item.value === menuValue);
+                    const toMenu = menuValue !== undefined && itemIndex >= 0 && next.includes(itemIndex);
+                    const toOriginal = menuValue !== undefined && itemIndex >= 0 && !toMenu;
+                    const toSummary = next.some(index => buttons.get(props.items[index]?.value ?? '') === focusedElement) || (!toMenu && !toOriginal && !!next.length && !!disclosure.value?.contains(focusedElement));
+                    const toTab = !next.length && disclosure.value?.contains(focusedElement);
+                    if (!toMenu)
+                        close();
+                    hidden.value = next;
+                    void nextTick(() => { if (!alive)
+                        return; if (toMenu)
+                        [...(disclosure.value?.querySelectorAll('[data-hw-overflow-value]') ?? [])].find(button => button.dataset.hwOverflowValue === menuValue)?.focus();
+                    else if (toOriginal)
+                        buttons.get(menuValue)?.focus();
+                    else if (toSummary)
+                        disclosure.value?.querySelector('summary')?.focus();
+                    else if (toTab && focusValue.value)
+                        buttons.get(focusValue.value)?.focus(); });
+                } });
+            node.ownerDocument.addEventListener('click', outside);
+        });
+        watch(() => [props.items, props.overflow, props.orientation], () => { observer?.refresh(); const focusedElement = bar.value?.ownerDocument.activeElement; if (focusedElement?.getAttribute('data-hw-overflow-hidden') === 'true' && bar.value?.contains(focusedElement))
+            disclosure.value?.querySelector('summary')?.focus(); }, { deep: true, flush: 'post' });
+        watch(active, close);
+        onBeforeUnmount(() => { alive = false; observer?.destroy(); bar.value?.ownerDocument.removeEventListener('click', outside); });
+        return () => h('div', mergeProps(attrs, { class: 'hw-tabs' }), [
+            h('div', { class: 'hw-tab-bar', ref: bar, 'data-hw-overflow': props.overflow, 'data-orientation': props.orientation }, [
+                h('div', { class: 'hw-tab-list', 'data-hw-overflow': props.overflow, role: 'tablist', 'aria-label': props.label, 'aria-orientation': props.orientation, 'aria-hidden': hidden.value.length === props.items.length || undefined }, props.items.map((item, index) => h('button', {
+                    key: item.value, ref: (element) => { if (element)
+                        buttons.set(item.value, element);
+                    else
+                        buttons.delete(item.value); },
+                    class: 'hw-tab', type: 'button', role: 'tab', id: `${id}-tab-${index}`, 'aria-controls': `${id}-panel-${index}`, 'aria-selected': active.value === item.value,
+                    'data-hw-overflow-hidden': hidden.value.includes(index) ? 'true' : undefined, 'aria-hidden': hidden.value.includes(index) || undefined,
+                    tabindex: !hidden.value.includes(index) && focusValue.value === item.value ? 0 : -1, disabled: item.disabled,
+                    onFocus: () => { focused.value = item.value; }, onClick: () => { if (!item.disabled)
+                        model.set(item.value); },
+                    onKeydown: (event) => {
+                        if (event.altKey || event.ctrlKey || event.metaKey || event.isComposing)
+                            return;
+                        const keys = props.orientation === 'vertical' ? ['ArrowDown', 'ArrowUp', 'Home', 'End'] : ['ArrowLeft', 'ArrowRight', 'Home', 'End'];
+                        if (!keys.includes(event.key))
+                            return;
+                        event.preventDefault();
+                        const next = props.items[getNextEnabledIndex(index, event.key, props.items.map((candidate, i) => ({ disabled: candidate.disabled || hidden.value.includes(i) })), getDirection(event.currentTarget), props.orientation)];
+                        if (!next)
+                            return;
+                        focused.value = next.value;
+                        buttons.get(next.value)?.focus();
+                        if (props.activationMode === 'automatic')
+                            model.set(next.value);
+                    },
+                }, slots[`tab:${item.value}`]?.({ item }) ?? item.label))),
+                h('details', { class: 'hw-tabs-overflow', ref: disclosure, hidden: !hidden.value.length, onKeydown: (event) => { if (event.key === 'Escape' && disclosure.value?.open) {
+                        event.preventDefault();
+                        close();
+                        disclosure.value.querySelector('summary')?.focus();
+                    } } }, [
+                    h('summary', { class: 'hw-tab-overflow-trigger', 'aria-label': props.overflowLabel, 'data-active': hidden.value.some(index => props.items[index]?.value === active.value) ? 'true' : undefined }, '…'),
+                    h('div', { class: 'hw-tab-overflow-menu' }, hidden.value.map(index => { const item = props.items[index]; return item && h('button', { key: item.value, type: 'button', class: 'hw-tab-overflow-item', 'data-hw-overflow-value': item.value, disabled: item.disabled, 'aria-pressed': item.value === active.value, onClick: () => { if (item.disabled)
+                            return; model.set(item.value); close(); disclosure.value?.querySelector('summary')?.focus(); } }, slots[`tab:${item.value}`]?.({ item }) ?? item.label); })),
+                ]),
+            ]),
+            ...props.items.map((item, index) => h('section', { key: item.value, class: 'hw-tab-panel', id: `${id}-panel-${index}`, role: 'tabpanel', 'aria-labelledby': `${id}-tab-${index}`, tabindex: 0, hidden: active.value !== item.value }, [slots[item.value]?.() ?? item.content])),
+        ]);
+    },
+});
+export const Dialog = defineComponent({
+    name: 'HwDialog', inheritAttrs: false,
+    props: { open: { type: Boolean, default: undefined }, defaultOpen: Boolean, title: { type: String, required: true }, description: String, closeLabel: { type: String, default: 'Close' }, closeOnBackdrop: { type: Boolean, default: true } },
+    emits: { 'update:open': (_open) => true },
+    setup(props, { attrs, slots, emit, expose }) {
+        const id = `hw-${useId()}`;
+        const element = ref();
+        const model = useValue(() => props.open, props.defaultOpen, value => emit('update:open', value));
+        let previousFocus = null;
+        let backdropStarted = false;
+        const close = () => { backdropStarted = false; model.set(false); };
+        const show = () => { backdropStarted = false; model.set(true); };
+        watchEffect(() => {
+            const dialog = element.value;
+            if (!dialog)
+                return;
+            if (model.value.value && !dialog.open) {
+                backdropStarted = false;
+                previousFocus = dialog.ownerDocument.activeElement;
+                dialog.showModal();
+            }
+            else if (!model.value.value && dialog.open) {
+                backdropStarted = false;
+                dialog.close();
+                restoreFocus(previousFocus);
+            }
+        }, { flush: 'post' });
+        onBeforeUnmount(() => { if (element.value?.open) {
+            element.value.close();
+            restoreFocus(previousFocus);
+        } });
+        expose({ element, show, close });
+        return () => [slots.trigger?.({ open: show }), h('dialog', mergeProps(attrs, {
+                ref: element, class: 'hw-dialog', 'aria-labelledby': attrs['aria-labelledby'] ?? `${id}-title`, 'aria-describedby': attrs['aria-describedby'] ?? (props.description ? `${id}-description` : undefined),
+                onCancel: (event) => { backdropStarted = false; if (!event.defaultPrevented) {
+                    event.preventDefault();
+                    close();
+                } },
+                onClose: () => { backdropStarted = false; if (model.value.value)
+                    close(); restoreFocus(previousFocus); },
+                onPointerdown: (event) => {
+                    const bounds = element.value.getBoundingClientRect();
+                    backdropStarted = !event.defaultPrevented && event.button === 0 && event.target === event.currentTarget &&
+                        (event.clientX < bounds.left || event.clientX > bounds.right || event.clientY < bounds.top || event.clientY > bounds.bottom);
+                },
+                onPointercancel: () => { backdropStarted = false; },
+                onClick: (event) => {
+                    const started = backdropStarted;
+                    backdropStarted = false;
+                    if (event.defaultPrevented || !props.closeOnBackdrop || !started || event.target !== event.currentTarget)
+                        return;
+                    const bounds = element.value.getBoundingClientRect();
+                    if (event.clientX < bounds.left || event.clientX > bounds.right || event.clientY < bounds.top || event.clientY > bounds.bottom)
+                        close();
+                },
+            }), [
+                h('header', { class: 'hw-dialog-header' }, [h('h2', { id: `${id}-title` }, props.title), h(Button, { variant: 'ghost', 'aria-label': props.closeLabel, onClick: close }, () => '×')]),
+                h('div', { class: 'hw-dialog-body' }, [props.description && h('p', { id: `${id}-description` }, props.description), slots.default?.({ close })]),
+                slots.footer && h('footer', { class: 'hw-dialog-footer' }, slots.footer({ close })),
+            ])];
+    },
+});
+export const Combobox = defineComponent({
+    name: 'HwCombobox', inheritAttrs: false,
+    props: { ...decorationProps, options: { type: Array, required: true }, modelValue: String, defaultValue: { type: String, default: '' }, disabled: Boolean, readonly: Boolean,
+        emptyMessage: { type: String, default: 'No options found' }, resultsMessage: { type: Function, default: (count) => `${count} results available` }, requiredMessage: { type: String, default: 'Choose an option from the list.' } },
+    emits: { 'update:modelValue': (_value) => true, 'update:open': (_open) => true, 'update:query': (_query) => true },
+    setup(props, { attrs, emit, expose }) {
+        const field = useField(props, attrs);
+        const element = ref();
+        const root = ref();
+        const state = ref(createComboboxState(props.options, props.modelValue ?? props.defaultValue));
+        const ancestorDisabled = ref(false);
+        const blocked = () => props.disabled || props.readonly || !!(element.value && isDisabled(element.value));
+        let disabledObserver;
+        onMounted(() => {
+            const input = element.value;
+            if (!input)
+                return;
+            const refresh = () => { ancestorDisabled.value = isDisabled(input); };
+            const Observer = input.ownerDocument.defaultView?.MutationObserver;
+            if (Observer)
+                disabledObserver = new Observer(refresh);
+            for (let ancestor = input.parentElement; ancestor; ancestor = ancestor.parentElement) {
+                if (ancestor.localName === 'fieldset')
+                    disabledObserver?.observe(ancestor, { attributes: true, attributeFilter: ['disabled'] });
+            }
+            refresh();
+        });
+        onBeforeUnmount(() => disabledObserver?.disconnect());
+        watch(() => props.disabled || props.readonly || ancestorDisabled.value, unavailable => {
+            if (unavailable)
+                state.value = { ...state.value, open: false, activeIndex: -1 };
+        });
+        const effective = computed(() => ({ ...state.value, value: props.modelValue ?? state.value.value,
+            query: props.modelValue !== undefined && props.modelValue !== state.value.value ? createComboboxState(props.options, props.modelValue).query : state.value.query,
+            open: !props.disabled && !ancestorDisabled.value && !props.readonly && state.value.open }));
+        const results = computed(() => getComboboxOptions(effective.value, props.options));
+        let lastEmitted;
+        function dispatch(event) {
+            if (blocked() && event.type !== 'close' && event.type !== 'reset')
+                return;
+            const previous = effective.value;
+            const next = transitionCombobox(previous, event, props.options);
+            state.value = next;
+            if (next.value !== previous.value) {
+                lastEmitted = next.value;
+                emit('update:modelValue', next.value);
+            }
+            if (next.open !== previous.open)
+                emit('update:open', next.open);
+        }
+        watch(() => props.modelValue, value => {
+            if (value === undefined)
+                return;
+            if (value === lastEmitted) {
+                lastEmitted = undefined;
+                state.value = { ...state.value, value };
+            }
+            else
+                state.value = { ...createComboboxState(props.options, value), open: state.value.open };
+        });
+        watch(() => props.options, options => {
+            if (effective.value.value)
+                state.value = { ...createComboboxState(options, effective.value.value), open: state.value.open };
+        });
+        watchEffect(() => element.value?.setCustomValidity(field.controlAttrs.value.required && !effective.value.value ? props.requiredMessage : ''));
+        useFormReset(element, () => dispatch({ type: 'reset', value: props.defaultValue }));
+        const outside = (event) => { if (!root.value?.contains(event.target))
+            dispatch({ type: 'close' }); };
+        onMounted(() => element.value?.ownerDocument.addEventListener('pointerdown', outside));
+        onBeforeUnmount(() => element.value?.ownerDocument.removeEventListener('pointerdown', outside));
+        expose({ element, focus: () => element.value?.focus(), close: () => dispatch({ type: 'close' }) });
+        return () => {
+            const { name, form, ...inputAttrs } = attrs;
+            const listId = `${field.id.value}-listbox`;
+            const active = results.value[state.value.activeIndex];
+            const open = effective.value.open;
+            const query = effective.value.query;
+            return decorate(props, field.id.value, h('div', { ref: root, class: 'hw-combobox', onFocusout: (event) => { if (!root.value?.contains(event.relatedTarget))
+                    dispatch({ type: 'close' }); } }, [
+                h('input', mergeProps(inputAttrs, field.controlAttrs.value, { ref: element, form, disabled: props.disabled, readonly: props.readonly, class: 'hw-input', type: 'text', role: 'combobox', autocomplete: 'off', 'aria-autocomplete': 'list', 'aria-readonly': props.readonly || undefined, 'aria-expanded': open, 'aria-controls': listId,
+                    'aria-activedescendant': open && active && !active.disabled ? `${field.id.value}-option-${state.value.activeIndex}` : undefined, value: query,
+                    onInput: (event) => { const input = event.target; if (blocked()) {
+                        input.value = query;
+                        return;
+                    } const nextQuery = input.value; dispatch({ type: 'input', query: nextQuery }); emit('update:query', nextQuery); },
+                    onFocus: (event) => { if (!event.defaultPrevented)
+                        dispatch({ type: 'open' }); },
+                    onClick: (event) => { if (!event.defaultPrevented && !open)
+                        dispatch({ type: 'open' }); },
+                    onKeydown: (event) => {
+                        if (event.defaultPrevented || event.isComposing || blocked())
+                            return;
+                        if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+                            if (!open && (event.key === 'Home' || event.key === 'End'))
+                                return;
+                            event.preventDefault();
+                            dispatch({ type: 'navigate', key: event.key });
+                        }
+                        else if (event.key === 'Enter' && open && active && !active.disabled) {
+                            event.preventDefault();
+                            dispatch({ type: 'select', value: active.value });
+                        }
+                        else if (event.key === 'Escape' && open) {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            dispatch({ type: 'close' });
+                        }
+                        else if (event.key === 'Tab')
+                            dispatch({ type: 'close' });
+                    },
+                })),
+                h('input', { type: 'hidden', name, form, disabled: props.disabled, value: effective.value.value }),
+                h('ul', { id: listId, role: 'listbox', class: 'hw-listbox', 'aria-label': attrs['aria-label'], 'aria-labelledby': field.controlAttrs.value['aria-labelledby'], hidden: !open }, [
+                    ...results.value.map((option, index) => h('li', { key: option.value, id: `${field.id.value}-option-${index}`, role: 'option', class: 'hw-option', 'aria-selected': effective.value.value === option.value, 'aria-disabled': option.disabled || undefined,
+                        'data-active': state.value.activeIndex === index ? 'true' : undefined, 'data-state': state.value.activeIndex === index ? 'active' : undefined,
+                        onPointerdown: (event) => event.preventDefault(), onClick: () => { if (!option.disabled) {
+                            dispatch({ type: 'select', value: option.value });
+                            element.value?.focus();
+                        } }, }, option.label)), !results.value.length && h('li', { role: 'presentation', class: 'hw-hint' }, props.emptyMessage),
+                ]),
+                h('span', { class: 'hw-sr-only', role: 'status', 'aria-live': 'polite', 'aria-atomic': 'true' }, open ? props.resultsMessage(results.value.length) : ''),
+            ]));
+        };
+    },
+});
+export const Tooltip = defineComponent({
+    name: 'HwTooltip', inheritAttrs: false, props: { content: { type: String, required: true }, placement: { type: String, default: 'top' }, align: { type: String, default: 'start' } },
+    setup(props, { attrs, slots }) {
+        const id = `hw-${useId()}`;
+        const open = ref(false);
+        const root = ref();
+        let hovered = false, focused = false;
+        let hideTimer;
+        const show = () => { clearTimeout(hideTimer); open.value = true; };
+        const hide = () => { clearTimeout(hideTimer); open.value = false; };
+        const leave = () => {
+            hovered = false;
+            if (!focused)
+                hideTimer = setTimeout(hide, 120);
+        };
+        const escape = (event) => {
+            if (!open.value || event.key !== 'Escape' || event.defaultPrevented)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            hide();
+        };
+        watch(open, (visible, _, cleanup) => {
+            const element = root.value;
+            if (!visible || !element)
+                return;
+            const doc = element.ownerDocument;
+            const outside = (event) => { if (!element.contains(event.target))
+                hide(); };
+            doc.addEventListener('keydown', escape);
+            doc.addEventListener('pointerdown', outside);
+            cleanup(() => { doc.removeEventListener('keydown', escape); doc.removeEventListener('pointerdown', outside); });
+        }, { flush: 'sync' });
+        onBeforeUnmount(() => clearTimeout(hideTimer));
+        return () => {
+            const children = slots.default?.() ?? [];
+            return h('span', mergeProps(attrs, {
+                ref: root, 'data-hw': 'tooltip',
+                onMouseenter: () => { hovered = true; show(); }, onMouseleave: leave,
+                onFocusin: () => { focused = true; show(); },
+                onFocusout: (event) => {
+                    if (root.value?.contains(event.relatedTarget))
+                        return;
+                    focused = false;
+                    if (!hovered)
+                        hide();
+                },
+                onKeydown: escape,
+            }), [
+                ...children.map(child => isVNode(child) ? cloneVNode(child, { 'aria-describedby': joinIds(child.props?.['aria-describedby'], id) }) : child),
+                h('span', { id, role: 'tooltip', class: 'hw-tooltip', 'data-placement': props.placement, 'data-align': props.align, hidden: !open.value }, props.content),
+            ]);
+        };
+    },
+});
+//# sourceMappingURL=interactive.js.map