@7pmlabs/design-system 2.0.8 → 2.1.0

package/dist/design-system.js

@@ -24,79 +24,85 @@ import Z from "./design-system61.js";
 import Q from "./design-system64.js";
 import { BColorPickerFormat as ne, BColorPickerPlacement as re, BColorPickerSize as ie, BColorPickerTrigger as ae } from "./design-system65.js";
 import oe from "./design-system68.js";
-import { BDatePickerPlacement as se, BDatePickerSize as ce, BDatePickerStatus as le, BDatePickerType as ue, BDatePickerVariant as de } from "./design-system69.js";
-import fe from "./design-system72.js";
+import se from "./design-system71.js";
+import { BDatePickerPlacement as ce, BDatePickerSize as le, BDatePickerStatus as ue, BDatePickerType as de, BDatePickerVariant as fe } from "./design-system72.js";
 import pe from "./design-system75.js";
-import me from "./design-system77.js";
+import me from "./design-system78.js";
 import he from "./design-system80.js";
 import ge from "./design-system83.js";
-import { BDropdownPlacement as _e, BDropdownTrigger as ve } from "./design-system84.js";
-import ye from "./design-system87.js";
+import _e from "./design-system86.js";
+import { BDropdownPlacement as ve, BDropdownTrigger as ye } from "./design-system87.js";
 import be from "./design-system90.js";
-import { BFloatButtonGroupPlacement as xe, BFloatButtonShape as Se, BFloatButtonTrigger as Ce, BFloatButtonType as we } from "./design-system91.js";
-import Te from "./design-system94.js";
+import xe from "./design-system93.js";
+import { BFloatButtonGroupPlacement as Se, BFloatButtonShape as Ce, BFloatButtonTrigger as we, BFloatButtonType as Te } from "./design-system94.js";
 import Ee from "./design-system97.js";
 import De from "./design-system100.js";
-import { PIKey as Oe, useValidationField as ke, useValidationForm as Ae } from "./design-system101.js";
-import { BFormLabelAlign as je, BFormLayout as Me, BFormRequiredMark as Ne, BFormValidateStatus as Pe, BFormValidateTrigger as $ } from "./design-system103.js";
-import Fe from "./design-system106.js";
-import Ie from "./design-system109.js";
-import Le from "./design-system112.js";
-import { BInputStatus as Re, BInputVariant as ze } from "./design-system113.js";
-import Be from "./design-system116.js";
+import Oe from "./design-system103.js";
+import { PIKey as ke, useValidationField as Ae, useValidationForm as je } from "./design-system104.js";
+import { BFormLabelAlign as Me, BFormLayout as Ne, BFormRequiredMark as Pe, BFormValidateStatus as Fe, BFormValidateTrigger as Ie } from "./design-system106.js";
+import Le from "./design-system109.js";
+import Re from "./design-system112.js";
+import $ from "./design-system115.js";
+import { BInputStatus as ze, BInputVariant as Be } from "./design-system116.js";
 import Ve from "./design-system119.js";
 import He from "./design-system122.js";
-import { BMentionsPlacement as Ue, BMentionsStatus as We, BMentionsVariant as Ge } from "./design-system123.js";
-import Ke from "./design-system126.js";
-import qe from "./design-system129.js";
-import Je from "./design-system133.js";
-import Ye from "./design-system136.js";
-import Xe from "./design-system139.js";
-import Ze from "./design-system142.js";
+import Ue from "./design-system125.js";
+import We from "./design-system128.js";
+import Ge from "./design-system131.js";
+import Ke from "./design-system134.js";
+import { BMentionsPlacement as qe, BMentionsStatus as Je, BMentionsVariant as Ye } from "./design-system135.js";
+import Xe from "./design-system138.js";
+import Ze from "./design-system141.js";
 import Qe from "./design-system145.js";
-import $e from "./design-system146.js";
-import et from "./design-system148.js";
-import tt from "./design-system150.js";
-import nt from "./design-system153.js";
-import rt from "./design-system156.js";
-import it from "./design-system159.js";
+import $e from "./design-system148.js";
+import et from "./design-system151.js";
+import tt from "./design-system154.js";
+import nt from "./design-system157.js";
+import rt from "./design-system158.js";
+import it from "./design-system160.js";
 import at from "./design-system162.js";
-import { B_RADIO_GROUP_KEY as ot } from "./design-system163.js";
-import st from "./design-system166.js";
-import ct from "./design-system169.js";
-import lt from "./design-system172.js";
-import ut from "./design-system175.js";
-import dt from "./design-system178.js";
-import { BSelectMode as ft, BSelectPlacement as pt, BSelectStatus as mt, BSelectVariant as ht } from "./design-system179.js";
-import gt from "./design-system182.js";
-import _t from "./design-system185.js";
-import vt from "./design-system188.js";
-import yt from "./design-system191.js";
-import bt from "./design-system194.js";
+import ot from "./design-system165.js";
+import st from "./design-system168.js";
+import ct from "./design-system171.js";
+import lt from "./design-system174.js";
+import ut from "./design-system177.js";
+import { B_RADIO_GROUP_KEY as dt } from "./design-system178.js";
+import ft from "./design-system181.js";
+import pt from "./design-system184.js";
+import mt from "./design-system187.js";
+import ht from "./design-system190.js";
+import gt from "./design-system193.js";
+import { BSelectMode as _t, BSelectPlacement as vt, BSelectStatus as yt, BSelectVariant as bt } from "./design-system194.js";
 import xt from "./design-system197.js";
 import St from "./design-system200.js";
 import Ct from "./design-system203.js";
 import wt from "./design-system206.js";
-import Tt from "./design-system208.js";
+import Tt from "./design-system209.js";
 import Et from "./design-system212.js";
 import Dt from "./design-system215.js";
-import Ot from "./design-system217.js";
-import kt from "./design-system220.js";
+import Ot from "./design-system218.js";
+import kt from "./design-system221.js";
 import At from "./design-system223.js";
-import jt from "./design-system226.js";
-import { BTimePickerPlacement as Mt, BTimePickerSize as Nt, BTimePickerStatus as Pt, BTimePickerVariant as Ft } from "./design-system227.js";
-import It from "./design-system230.js";
-import Lt from "./design-system233.js";
-import Rt from "./design-system236.js";
-import zt from "./design-system239.js";
-import Bt from "./design-system242.js";
-import Vt from "./design-system244.js";
-import Ht from "./design-system247.js";
-import { BTourPlacement as Ut, BTourType as Wt } from "./design-system248.js";
-import Gt from "./design-system251.js";
-import Kt from "./design-system254.js";
-import { BTreeSelectPlacement as qt, BTreeSelectStatus as Jt, BTreeSelectVariant as Yt } from "./design-system255.js";
-import Xt from "./design-system258.js";
-import { BUploadFileStatus as Zt, BUploadListType as Qt } from "./design-system259.js";
-import $t from "./design-system262.js";
-export { D as BAlert, ee as BAlertType, O as BAnchor, j as BAutoComplete, k as BAutoCompleteStatus, A as BAutoCompleteVariant, M as BAvatar, te as BAvatarShape, e as BAvatarSize, N as BBadge, t as BBadgeSize, n as BBadgeStatus, P as BBreadcrumb, I as BButton, r as BButtonVariant, R as BCalendar, z as BCard, B as BCardGrid, V as BCardMeta, i as BCardSize, a as BCardType, H as BCarousel, q as BCascader, U as BCascaderExpandTrigger, W as BCascaderPlacement, G as BCascaderSize, K as BCascaderStatus, Y as BCheckbox, X as BCheckboxGroup, Z as BCollapse, Z as BCollapseGroup, Q as BCollapsePanel, oe as BColorPicker, ne as BColorPickerFormat, re as BColorPickerPlacement, ie as BColorPickerSize, ae as BColorPickerTrigger, o as BCommonColor, s as BCommonSize, fe as BDatePicker, se as BDatePickerPlacement, ce as BDatePickerSize, le as BDatePickerStatus, ue as BDatePickerType, de as BDatePickerVariant, pe as BDescriptions, me as BDescriptionsItem, he as BDivider, ge as BDrawer, c as BDrawerPlacement, l as BDrawerSize, ye as BDropdown, _e as BDropdownPlacement, ve as BDropdownTrigger, be as BEmpty, u as BEmptyImage, Te as BFloatButton, Ee as BFloatButtonBackTop, De as BFloatButtonGroup, xe as BFloatButtonGroupPlacement, Se as BFloatButtonShape, Ce as BFloatButtonTrigger, we as BFloatButtonType, Fe as BForm, Ie as BFormItem, je as BFormLabelAlign, Me as BFormLayout, Ne as BFormRequiredMark, Pe as BFormValidateStatus, $ as BFormValidateTrigger, F as BIcon, d as BIconSize, f as BIconVariant, Le as BImage, Be as BInput, Ve as BInputNumber, Re as BInputStatus, ze as BInputVariant, He as BMasonry, Ke as BMentions, Ue as BMentionsPlacement, We as BMentionsStatus, Ge as BMentionsVariant, Ze as BMenu, qe as BMenuDivider, Je as BMenuItem, Ye as BMenuItemGroup, Xe as BMenuSubMenu, Qe as BMessage, p as BMessageType, L as BModal, $e as BModalBody, et as BModalFooter, tt as BModalHeader, nt as BNotification, m as BNotificationPlacement, h as BNotificationType, rt as BPagination, it as BPopconfirm, g as BPopconfirmPlacement, _ as BPopconfirmTrigger, at as BPopover, v as BPopoverPlacement, y as BPopoverTrigger, st as BRadio, ct as BRadioButton, lt as BRadioGroup, ut as BRate, dt as BSegmented, gt as BSelect, ft as BSelectMode, pt as BSelectPlacement, mt as BSelectStatus, ht as BSelectVariant, vt as BSkeleton, _t as BSkeletonAvatar, yt as BSkeletonButton, bt as BSkeletonImage, xt as BSkeletonInput, St as BSkeletonNode, Ct as BSlider, wt as BSpin, b as BSpinSize, Et as BSplitter, Tt as BSplitterPanel, Dt as BStatistic, Ot as BStatisticTimer, kt as BSteps, x as BStepsDirection, S as BStepsLabelPlacement, C as BStepsStatus, w as BStepsType, At as BSwitch, Lt as BTabPane, jt as BTable, Rt as BTabs, zt as BTag, It as BTimePicker, Mt as BTimePickerPlacement, Nt as BTimePickerSize, Pt as BTimePickerStatus, Ft as BTimePickerVariant, Bt as BTimeline, Vt as BTimelineItem, Ht as BTooltip, T as BTooltipPlacement, E as BTooltipTrigger, Gt as BTour, Ut as BTourPlacement, Wt as BTourType, Kt as BTree, Xt as BTreeSelect, qt as BTreeSelectPlacement, Jt as BTreeSelectStatus, Yt as BTreeSelectVariant, $t as BUpload, Zt as BUploadFileStatus, Qt as BUploadListType, J as B_CHECKBOX_GROUP_KEY, ot as B_RADIO_GROUP_KEY, Oe as PIKey, ke as useValidationField, Ae as useValidationForm };
+import jt from "./design-system227.js";
+import Mt from "./design-system230.js";
+import Nt from "./design-system232.js";
+import Pt from "./design-system235.js";
+import Ft from "./design-system238.js";
+import It from "./design-system241.js";
+import Lt from "./design-system244.js";
+import Rt from "./design-system247.js";
+import zt from "./design-system250.js";
+import Bt from "./design-system253.js";
+import { BTimePickerPlacement as Vt, BTimePickerSize as Ht, BTimePickerStatus as Ut, BTimePickerVariant as Wt } from "./design-system254.js";
+import Gt from "./design-system257.js";
+import Kt from "./design-system260.js";
+import qt from "./design-system262.js";
+import Jt from "./design-system265.js";
+import { BTourPlacement as Yt, BTourType as Xt } from "./design-system266.js";
+import Zt from "./design-system269.js";
+import Qt from "./design-system272.js";
+import { BTreeSelectPlacement as $t, BTreeSelectStatus as en, BTreeSelectVariant as tn } from "./design-system273.js";
+import nn from "./design-system276.js";
+import { BUploadFileStatus as rn, BUploadListType as an } from "./design-system277.js";
+import on from "./design-system280.js";
+export { D as BAlert, ee as BAlertType, O as BAnchor, j as BAutoComplete, k as BAutoCompleteStatus, A as BAutoCompleteVariant, M as BAvatar, te as BAvatarShape, e as BAvatarSize, N as BBadge, t as BBadgeSize, n as BBadgeStatus, P as BBreadcrumb, I as BButton, r as BButtonVariant, R as BCalendar, z as BCard, B as BCardGrid, V as BCardMeta, i as BCardSize, a as BCardType, H as BCarousel, q as BCascader, U as BCascaderExpandTrigger, W as BCascaderPlacement, G as BCascaderSize, K as BCascaderStatus, Y as BCheckbox, X as BCheckboxGroup, Z as BCollapse, Z as BCollapseGroup, Q as BCollapsePanel, oe as BColorPicker, ne as BColorPickerFormat, re as BColorPickerPlacement, ie as BColorPickerSize, ae as BColorPickerTrigger, o as BCommonColor, s as BCommonSize, se as BContextMenu, pe as BDatePicker, ce as BDatePickerPlacement, le as BDatePickerSize, ue as BDatePickerStatus, de as BDatePickerType, fe as BDatePickerVariant, me as BDescriptions, he as BDescriptionsItem, ge as BDivider, _e as BDrawer, c as BDrawerPlacement, l as BDrawerSize, be as BDropdown, ve as BDropdownPlacement, ye as BDropdownTrigger, xe as BEmpty, u as BEmptyImage, Ee as BFloatButton, De as BFloatButtonBackTop, Oe as BFloatButtonGroup, Se as BFloatButtonGroupPlacement, Ce as BFloatButtonShape, we as BFloatButtonTrigger, Te as BFloatButtonType, Le as BForm, Re as BFormItem, Me as BFormLabelAlign, Ne as BFormLayout, Pe as BFormRequiredMark, Fe as BFormValidateStatus, Ie as BFormValidateTrigger, F as BIcon, d as BIconSize, f as BIconVariant, $ as BImage, Ve as BInput, He as BInputNumber, ze as BInputStatus, Ue as BInputTags, Be as BInputVariant, We as BLink, Ge as BListbox, Ke as BMasonry, Xe as BMentions, qe as BMentionsPlacement, Je as BMentionsStatus, Ye as BMentionsVariant, tt as BMenu, Ze as BMenuDivider, Qe as BMenuItem, $e as BMenuItemGroup, et as BMenuSubMenu, nt as BMessage, p as BMessageType, L as BModal, rt as BModalBody, it as BModalFooter, at as BModalHeader, ot as BNotification, m as BNotificationPlacement, h as BNotificationType, st as BPagination, ct as BPinInput, lt as BPopconfirm, g as BPopconfirmPlacement, _ as BPopconfirmTrigger, ut as BPopover, v as BPopoverPlacement, y as BPopoverTrigger, ft as BRadio, pt as BRadioButton, mt as BRadioGroup, ht as BRate, gt as BSegmented, xt as BSelect, _t as BSelectMode, vt as BSelectPlacement, yt as BSelectStatus, bt as BSelectVariant, Ct as BSkeleton, St as BSkeletonAvatar, wt as BSkeletonButton, Tt as BSkeletonImage, Et as BSkeletonInput, Dt as BSkeletonNode, Ot as BSlider, kt as BSpin, b as BSpinSize, jt as BSplitter, At as BSplitterPanel, Mt as BStatistic, Nt as BStatisticTimer, Pt as BSteps, x as BStepsDirection, S as BStepsLabelPlacement, C as BStepsStatus, w as BStepsType, Ft as BSwitch, Lt as BTabPane, It as BTable, Rt as BTabs, zt as BTag, Bt as BTextarea, Gt as BTimePicker, Vt as BTimePickerPlacement, Ht as BTimePickerSize, Ut as BTimePickerStatus, Wt as BTimePickerVariant, Kt as BTimeline, qt as BTimelineItem, Jt as BTooltip, T as BTooltipPlacement, E as BTooltipTrigger, Zt as BTour, Yt as BTourPlacement, Xt as BTourType, Qt as BTree, nn as BTreeSelect, $t as BTreeSelectPlacement, en as BTreeSelectStatus, tn as BTreeSelectVariant, on as BUpload, rn as BUploadFileStatus, an as BUploadListType, J as B_CHECKBOX_GROUP_KEY, dt as B_RADIO_GROUP_KEY, ke as PIKey, Ae as useValidationField, je as useValidationForm };

package/dist/design-system100.js

@@ -1,6 +1,6 @@
 import e from "./design-system98.js";
 /* empty css                */
-//#region src/components/BFloatButton/BFloatButtonGroup.vue
+//#region src/components/BFloatButton/BFloatButtonBackTop.vue
 var t = e;
 //#endregion
 export { t as default };

package/dist/design-system100.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system100.js","names":[],"sources":["../src/components/BFloatButton/BFloatButtonGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, provide, ref, watch } from 'vue';\nimport { BFloatButtonGroupPlacement, BFloatButtonShape, BFloatButtonTrigger } from './types.ts';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst props = defineProps<{\n  /**\n   * Controlled open state. Use with `v-model:open` for two-way binding.\n   * When this prop changes, the internal state syncs to it.\n   */\n  open?: boolean | null;\n  /**\n   * The trigger mode for expanding/collapsing the group menu.\n   * When set, a trigger button is shown that reveals child buttons.\n   */\n  trigger?: `${BFloatButtonTrigger}`;\n  /**\n   * Animation direction when expanding/collapsing.\n   * @default 'top'\n   */\n  placement?: `${BFloatButtonGroupPlacement}`;\n  /**\n   * Shape applied to all child float buttons.\n   * @default 'circle'\n   */\n  shape?: `${BFloatButtonShape}`;\n  /**\n   * Icon name for the close/collapse trigger button.\n   */\n  closeIcon?: string;\n}>();\n\nconst emit = defineEmits<{\n  /** Emitted when the group open state changes. */\n  (e: 'openChange', open: boolean): void;\n  /** v-model support. */\n  (e: 'update:open', open: boolean): void;\n}>();\n\ndefineSlots<{\n  /** Float button children. */\n  default?(): unknown;\n  /** Custom trigger icon (open state). */\n  icon?(): unknown;\n  /** Custom close icon (close state). */\n  closeIcon?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state — always the rendering source of truth\n// ─────────────────────────────────────────────\nconst internalOpen = ref(false);\n\n// Sync from controlled prop → internal state when explicitly changed\nwatch(\n  () => props.open,\n  (val) => {\n    if (val === true) internalOpen.value = true;\n    else if (val === false) internalOpen.value = false;\n    // null/undefined means \"uncontrolled\" — do not override internal state\n  },\n  { immediate: true },\n);\n\nfunction setOpen(val: boolean) {\n  internalOpen.value = val;\n  emit('update:open', val);\n  emit('openChange', val);\n}\n\nfunction toggle() {\n  setOpen(!internalOpen.value);\n}\n\nfunction openGroup() {\n  setOpen(true);\n}\n\nfunction closeGroup() {\n  setOpen(false);\n}\n\n// ─────────────────────────────────────────────\n// Hover trigger\n// ─────────────────────────────────────────────\nlet hideTimer: ReturnType<typeof setTimeout> | null = null;\n\nfunction onMouseEnter() {\n  if (props.trigger !== BFloatButtonTrigger.Hover) return;\n  if (hideTimer) {\n    clearTimeout(hideTimer);\n    hideTimer = null;\n  }\n  openGroup();\n}\n\nfunction onMouseLeave() {\n  if (props.trigger !== BFloatButtonTrigger.Hover) return;\n  hideTimer = setTimeout(() => closeGroup(), 100);\n}\n\nonBeforeUnmount(() => {\n  if (hideTimer) clearTimeout(hideTimer);\n});\n\n// ─────────────────────────────────────────────\n// Provide shape to children\n// ─────────────────────────────────────────────\nprovide(\n  'bFloatButtonGroupShape',\n  computed(() => props.shape ?? BFloatButtonShape.Circle),\n);\n\nconst isGroup = computed(() => props.trigger !== undefined);\nconst placementClass = computed(\n  () => `b-float-button-group--${props.placement ?? BFloatButtonGroupPlacement.Top}`,\n);\nconst shapeClass = computed(\n  () => `b-float-button-group--shape-${props.shape ?? BFloatButtonShape.Circle}`,\n);\n</script>\n\n<template>\n  <div\n    class=\"b-float-button-group\"\n    :class=\"[\n      placementClass,\n      shapeClass,\n      {\n        'b-float-button-group--menu': isGroup,\n        'b-float-button-group--open': isGroup && internalOpen,\n      },\n    ]\"\n    :role=\"!isGroup ? 'group' : undefined\"\n    :aria-label=\"!isGroup ? 'Float button group' : undefined\"\n    @mouseenter=\"onMouseEnter\"\n    @mouseleave=\"onMouseLeave\"\n  >\n    <!-- Child buttons list (always rendered; hidden when group is collapsed) -->\n    <div\n      class=\"b-float-button-group__list\"\n      :aria-hidden=\"isGroup ? !internalOpen : undefined\"\n      :inert=\"isGroup && !internalOpen ? true : undefined\"\n    >\n      <slot />\n    </div>\n\n    <!-- Trigger button (only rendered when trigger is set) -->\n    <button\n      v-if=\"isGroup\"\n      type=\"button\"\n      class=\"b-float-button-group__trigger\"\n      :class=\"[\n        'b-float-button',\n        `b-float-button--${props.shape ?? 'circle'}`,\n        'b-float-button--primary',\n      ]\"\n      :aria-expanded=\"internalOpen\"\n      :aria-label=\"internalOpen ? 'Collapse button group' : 'Expand button group'\"\n      @click=\"toggle\"\n    >\n      <span class=\"b-float-button__body\">\n        <span class=\"b-float-button__icon\" aria-hidden=\"true\">\n          <template v-if=\"internalOpen\">\n            <slot name=\"closeIcon\">\n              <svg\n                width=\"1em\"\n                height=\"1em\"\n                viewBox=\"0 0 24 24\"\n                fill=\"currentColor\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\n                />\n              </svg>\n            </slot>\n          </template>\n          <template v-else>\n            <slot name=\"icon\">\n              <svg\n                width=\"1em\"\n                height=\"1em\"\n                viewBox=\"0 0 24 24\"\n                fill=\"currentColor\"\n                aria-hidden=\"true\"\n              >\n                <path d=\"M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\n              </svg>\n            </slot>\n          </template>\n        </span>\n      </span>\n    </button>\n  </div>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   Group container\n   ───────────────────────────────────────────── */\n.b-float-button-group {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.75rem;\n  position: relative;\n}\n\n.b-float-button-group--menu {\n  position: relative;\n}\n\n/* ─────────────────────────────────────────────\n   Items list (collapsible)\n   ───────────────────────────────────────────── */\n.b-float-button-group__list {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.75rem;\n  list-style: none;\n  padding: 0;\n  margin: 0 0 0.75rem 0;\n\n  /* Collapsed: hidden */\n  overflow: hidden;\n  max-height: 0;\n  opacity: 0;\n  pointer-events: none;\n  transition:\n    max-height 300ms cubic-bezier(0.4, 0, 0.2, 1),\n    opacity 250ms ease;\n}\n\n.b-float-button-group--open .b-float-button-group__list {\n  max-height: 60vh;\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* ── Placement variants for list direction ──\n   DOM order is always [list, trigger]. For `bottom`/`right` we reverse\n   the container so the trigger comes before the list visually. */\n.b-float-button-group--top .b-float-button-group__list {\n  flex-direction: column-reverse;\n}\n\n.b-float-button-group--bottom {\n  flex-direction: column-reverse;\n}\n\n.b-float-button-group--bottom .b-float-button-group__list {\n  flex-direction: column;\n  margin: 0.75rem 0 0 0;\n}\n\n.b-float-button-group--left .b-float-button-group__list {\n  flex-direction: row-reverse;\n  margin: 0 0.75rem 0 0;\n}\n\n.b-float-button-group--right .b-float-button-group__list {\n  flex-direction: row;\n  margin: 0 0 0 0.75rem;\n}\n\n/* ── Horizontal layout for left/right placements ── */\n.b-float-button-group--left {\n  flex-direction: row;\n  align-items: center;\n}\n\n.b-float-button-group--right {\n  flex-direction: row-reverse;\n  align-items: center;\n}\n\n/* ── Trigger button ── */\n.b-float-button-group__trigger {\n  flex-shrink: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-float-button-group__list {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system100.js","names":[],"sources":["../src/components/BFloatButton/BFloatButtonBackTop.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref } from 'vue';\nimport BFloatButton from './BFloatButton.vue';\nimport { BFloatButtonShape, BFloatButtonType } from './types.ts';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  duration = 450,\n  target,\n  visibilityHeight = 400,\n  shape = BFloatButtonShape.Circle,\n  type = BFloatButtonType.Default,\n} = defineProps<{\n  /**\n   * Scroll animation duration in milliseconds.\n   * @default 450\n   */\n  duration?: number;\n  /**\n   * A function that returns the scrollable container.\n   * Defaults to `window`. May return `null` (e.g. if the element hasn't mounted yet).\n   */\n  target?: () => HTMLElement | Window | null;\n  /**\n   * The button becomes visible when the scroll position exceeds this value (px).\n   * @default 400\n   */\n  visibilityHeight?: number;\n  /**\n   * Shape of the back-top button.\n   * @default 'circle'\n   */\n  shape?: `${BFloatButtonShape}`;\n  /**\n   * Type of the back-top button.\n   * @default 'default'\n   */\n  type?: `${BFloatButtonType}`;\n}>();\n\nconst emit = defineEmits<{\n  /** Emitted when the back-top button is clicked. */\n  (e: 'click', event: MouseEvent): void;\n}>();\n\ndefineSlots<{\n  /** Custom content for the button. If omitted, renders an up-arrow icon. */\n  default?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Scroll logic\n// ─────────────────────────────────────────────\nconst visible = ref(false);\nlet scrollContainer: HTMLElement | Window = window;\n\nfunction getScrollTop(): number {\n  if (scrollContainer === window) return window.scrollY;\n  return (scrollContainer as HTMLElement).scrollTop;\n}\n\nfunction onScroll() {\n  visible.value = getScrollTop() > visibilityHeight;\n}\n\nfunction easeInOutCubic(t: number): number {\n  return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;\n}\n\nfunction scrollToTop() {\n  const startTime = performance.now();\n  const startTop = getScrollTop();\n\n  function step(now: number) {\n    const elapsed = now - startTime;\n    const progress = Math.min(elapsed / duration, 1);\n    const eased = easeInOutCubic(progress);\n    const newTop = startTop * (1 - eased);\n\n    if (scrollContainer === window) {\n      window.scrollTo(0, newTop);\n    } else {\n      (scrollContainer as HTMLElement).scrollTop = newTop;\n    }\n\n    if (progress < 1) {\n      requestAnimationFrame(step);\n    }\n  }\n\n  requestAnimationFrame(step);\n}\n\nfunction handleClick(event: MouseEvent) {\n  scrollToTop();\n  emit('click', event);\n}\n\nonMounted(() => {\n  scrollContainer = target?.() ?? window;\n  scrollContainer.addEventListener('scroll', onScroll, { passive: true });\n  onScroll();\n});\n\nonBeforeUnmount(() => {\n  scrollContainer.removeEventListener('scroll', onScroll);\n});\n\nconst isVisible = visible;\n</script>\n\n<template>\n  <Transition name=\"b-float-button-backtop\">\n    <BFloatButton\n      v-if=\"isVisible\"\n      :shape=\"shape\"\n      :type=\"type\"\n      aria-label=\"Back to top\"\n      class=\"b-float-button-backtop\"\n      @click=\"handleClick\"\n    >\n      <template #icon>\n        <slot>\n          <!-- Default: up arrow -->\n          <svg\n            width=\"1em\"\n            height=\"1em\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n            focusable=\"false\"\n          >\n            <path d=\"M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z\" />\n          </svg>\n        </slot>\n      </template>\n    </BFloatButton>\n  </Transition>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BackTop enter/leave transitions\n   ───────────────────────────────────────────── */\n.b-float-button-backtop-enter-active,\n.b-float-button-backtop-leave-active {\n  transition:\n    opacity 300ms ease,\n    transform 300ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.b-float-button-backtop-enter-from,\n.b-float-button-backtop-leave-to {\n  opacity: 0;\n  transform: scale(0.8);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-float-button-backtop-enter-active,\n  .b-float-button-backtop-leave-active {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system101.js

@@ -1,57 +1,91 @@
-import { computed as e, inject as t, onBeforeUnmount as n, provide as r, ref as i, watch as a } from "vue";
-//#region src/composables/useValidation.ts
-var o = { FormValidation: Symbol() };
-function s() {
-	let n = t(o.FormValidation, void 0);
-	n || (n = {}, r(o.FormValidation, n));
-	let i = () => n ? Object.values(n).map((e) => e.value.validate()).every((e) => e) : !1, a = () => {
-		n && Object.values(n).forEach((e) => e.value.reset());
-	}, s = e(() => n ? Object.values(n).every((e) => e.value.isValid) : !0);
-	return {
-		fields: n,
-		validateAll: i,
-		resetAll: a,
-		isValid: s
-	};
-}
-function c(r, s, c) {
-	let l = structuredClone(s.value), u = i({
-		fieldValue: s,
-		errors: [],
-		isValid: !0,
-		dirty: !1,
-		touched: !1,
-		validate: d,
-		reset: f,
-		markTouched: p
-	});
-	a(s, (e) => {
-		u.value.dirty = !Object.is(e, l);
-	}, { deep: !0 });
-	function d() {
-		let e = c.safeParse(s.value);
-		return e.success ? (u.value.errors = [], u.value.isValid = !0) : (u.value.errors = e.error.issues.map((e) => e.message), u.value.isValid = !1), u.value.isValid;
+import { BFloatButtonGroupPlacement as e, BFloatButtonShape as t, BFloatButtonTrigger as n } from "./design-system94.js";
+import { computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, normalizeClass as c, onBeforeUnmount as l, openBlock as u, provide as d, ref as f, renderSlot as p, watch as m } from "vue";
+//#region src/components/BFloatButton/BFloatButtonGroup.vue?vue&type=script&setup=true&lang.ts
+var h = ["role", "aria-label"], g = ["aria-hidden", "inert"], _ = ["aria-expanded", "aria-label"], v = { class: "b-float-button__body" }, y = {
+	class: "b-float-button__icon",
+	"aria-hidden": "true"
+}, b = /* @__PURE__ */ s({
+	__name: "BFloatButtonGroup",
+	props: {
+		open: { type: [Boolean, null] },
+		trigger: {},
+		placement: {},
+		shape: {},
+		closeIcon: {}
+	},
+	emits: ["openChange", "update:open"],
+	setup(s, { emit: b }) {
+		let x = s, S = b, C = f(!1);
+		m(() => x.open, (e) => {
+			e === !0 ? C.value = !0 : e === !1 && (C.value = !1);
+		}, { immediate: !0 });
+		function w(e) {
+			C.value = e, S("update:open", e), S("openChange", e);
+		}
+		function T() {
+			w(!C.value);
+		}
+		function E() {
+			w(!0);
+		}
+		function D() {
+			w(!1);
+		}
+		let O = null;
+		function k() {
+			x.trigger === n.Hover && (O &&= (clearTimeout(O), null), E());
+		}
+		function A() {
+			x.trigger === n.Hover && (O = setTimeout(() => D(), 100));
+		}
+		l(() => {
+			O && clearTimeout(O);
+		}), d("bFloatButtonGroupShape", r(() => x.shape ?? t.Circle));
+		let j = r(() => x.trigger !== void 0), M = r(() => `b-float-button-group--${x.placement ?? e.Top}`), N = r(() => `b-float-button-group--shape-${x.shape ?? t.Circle}`);
+		return (e, t) => (u(), a("div", {
+			class: c(["b-float-button-group", [
+				M.value,
+				N.value,
+				{
+					"b-float-button-group--menu": j.value,
+					"b-float-button-group--open": j.value && C.value
+				}
+			]]),
+			role: j.value ? void 0 : "group",
+			"aria-label": j.value ? void 0 : "Float button group",
+			onMouseenter: k,
+			onMouseleave: A
+		}, [o("div", {
+			class: "b-float-button-group__list",
+			"aria-hidden": j.value ? !C.value : void 0,
+			inert: j.value && !C.value ? !0 : void 0
+		}, [p(e.$slots, "default")], 8, g), j.value ? (u(), a("button", {
+			key: 0,
+			type: "button",
+			class: c(["b-float-button-group__trigger", [
+				"b-float-button",
+				`b-float-button--${x.shape ?? "circle"}`,
+				"b-float-button--primary"
+			]]),
+			"aria-expanded": C.value,
+			"aria-label": C.value ? "Collapse button group" : "Expand button group",
+			onClick: T
+		}, [o("span", v, [o("span", y, [C.value ? p(e.$slots, "closeIcon", { key: 0 }, () => [t[0] ||= o("svg", {
+			width: "1em",
+			height: "1em",
+			viewBox: "0 0 24 24",
+			fill: "currentColor",
+			"aria-hidden": "true"
+		}, [o("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })], -1)]) : p(e.$slots, "icon", { key: 1 }, () => [t[1] ||= o("svg", {
+			width: "1em",
+			height: "1em",
+			viewBox: "0 0 24 24",
+			fill: "currentColor",
+			"aria-hidden": "true"
+		}, [o("path", { d: "M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" })], -1)])])])], 10, _)) : i("", !0)], 42, h));
 	}
-	function f() {
-		u.value.errors = [], u.value.isValid = !0, u.value.dirty = !1, u.value.touched = !1;
-	}
-	function p() {
-		u.value.touched = !0;
-	}
-	let m = t(o.FormValidation, void 0);
-	return m && (m[r] = u), n(() => {
-		m && delete m[r];
-	}), {
-		errors: e(() => u.value.errors),
-		isValid: e(() => u.value.isValid),
-		dirty: e(() => u.value.dirty),
-		touched: e(() => u.value.touched),
-		validate: d,
-		reset: f,
-		markTouched: p
-	};
-}
+});
 //#endregion
-export { o as PIKey, c as useValidationField, s as useValidationForm };
+export { b as default };
 
 //# sourceMappingURL=design-system101.js.map

package/dist/design-system101.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system101.js","names":[],"sources":["../src/composables/useValidation.ts"],"sourcesContent":["import {\n  computed,\n  inject,\n  onBeforeUnmount,\n  provide,\n  ref,\n  watch,\n  type ComputedRef,\n  type InjectionKey,\n  type Ref,\n} from 'vue';\nimport type { ZodType } from 'zod';\n\n/**\n * Types\n */\nexport interface ValidationFieldState<T = unknown> {\n  fieldValue: Ref<T>;\n  errors: string[];\n  isValid: boolean;\n  dirty: boolean;\n  touched: boolean;\n  validate: () => boolean;\n  reset: () => void;\n  markTouched: () => void;\n}\n\nexport const PIKey = {\n  FormValidation: Symbol() as InjectionKey<Record<string, Ref<ValidationFieldState>>>,\n};\n\n/**\n * Form-level validation composable.\n * Creates or injects a shared validation registry, providing\n * methods to validate/reset all registered fields.\n */\nexport function useValidationForm() {\n  let fields = inject(PIKey.FormValidation, undefined);\n  if (!fields) {\n    fields = {};\n    provide(PIKey.FormValidation, fields);\n  }\n\n  const validateAll = (): boolean => {\n    if (!fields) return false;\n    return Object.values(fields)\n      .map((field) => field.value.validate())\n      .every((valid) => valid);\n  };\n\n  const resetAll = () => {\n    if (!fields) return;\n    Object.values(fields).forEach((field) => field.value.reset());\n  };\n\n  const isValid = computed(() => {\n    if (!fields) return true;\n    return Object.values(fields).every((field) => field.value.isValid);\n  });\n\n  return {\n    fields,\n    validateAll,\n    resetAll,\n    isValid,\n  };\n}\n\n/**\n * Field-level validation composable.\n * Registers the field into the form's validation registry,\n * validates using the provided Zod schema, and tracks dirty/touched state.\n */\nexport function useValidationField<T>(key: string, fieldValue: Ref<T>, schema: ZodType<T>) {\n  const initialValue = structuredClone(fieldValue.value);\n\n  const fieldState = ref<ValidationFieldState<T>>({\n    fieldValue,\n    errors: [],\n    isValid: true,\n    dirty: false,\n    touched: false,\n    validate,\n    reset,\n    markTouched,\n  });\n\n  watch(\n    fieldValue,\n    (newVal) => {\n      fieldState.value.dirty = !Object.is(newVal, initialValue);\n    },\n    { deep: true },\n  );\n\n  function validate(): boolean {\n    const result = schema.safeParse(fieldValue.value);\n\n    if (result.success) {\n      fieldState.value.errors = [];\n      fieldState.value.isValid = true;\n    } else {\n      fieldState.value.errors = result.error.issues.map((issue) => issue.message);\n      fieldState.value.isValid = false;\n    }\n\n    return fieldState.value.isValid;\n  }\n\n  function reset() {\n    fieldState.value.errors = [];\n    fieldState.value.isValid = true;\n    fieldState.value.dirty = false;\n    fieldState.value.touched = false;\n  }\n\n  function markTouched() {\n    fieldState.value.touched = true;\n  }\n\n  // Register into form\n  const formFields = inject(PIKey.FormValidation, undefined);\n  if (formFields) {\n    formFields[key] = fieldState as Ref<ValidationFieldState>;\n  }\n\n  onBeforeUnmount(() => {\n    if (formFields) {\n      delete formFields[key];\n    }\n  });\n\n  const errors = computed(() => fieldState.value.errors);\n  const isValid = computed(() => fieldState.value.isValid);\n  const dirty = computed(() => fieldState.value.dirty);\n  const touched = computed(() => fieldState.value.touched);\n\n  return {\n    errors,\n    isValid,\n    dirty,\n    touched,\n    validate,\n    reset,\n    markTouched,\n  } as {\n    errors: ComputedRef<string[]>;\n    isValid: ComputedRef<boolean>;\n    dirty: ComputedRef<boolean>;\n    touched: ComputedRef<boolean>;\n    validate: () => boolean;\n    reset: () => void;\n    markTouched: () => void;\n  };\n}\n"],"mappings":";;AA2BA,IAAa,IAAQ,EACnB,gBAAgB,QAAQ,EACzB;AAOD,SAAgB,IAAoB;CAClC,IAAI,IAAS,EAAO,EAAM,gBAAgB,KAAA,EAAU;AACpD,CAAK,MACH,IAAS,EAAE,EACX,EAAQ,EAAM,gBAAgB,EAAO;CAGvC,IAAM,UACC,IACE,OAAO,OAAO,EAAO,CACzB,KAAK,MAAU,EAAM,MAAM,UAAU,CAAC,CACtC,OAAO,MAAU,EAAM,GAHN,IAMhB,UAAiB;AAChB,OACL,OAAO,OAAO,EAAO,CAAC,SAAS,MAAU,EAAM,MAAM,OAAO,CAAC;IAGzD,IAAU,QACT,IACE,OAAO,OAAO,EAAO,CAAC,OAAO,MAAU,EAAM,MAAM,QAAQ,GAD9C,GAEpB;AAEF,QAAO;EACL;EACA;EACA;EACA;EACD;;AAQH,SAAgB,EAAsB,GAAa,GAAoB,GAAoB;CACzF,IAAM,IAAe,gBAAgB,EAAW,MAAM,EAEhD,IAAa,EAA6B;EAC9C;EACA,QAAQ,EAAE;EACV,SAAS;EACT,OAAO;EACP,SAAS;EACT;EACA;EACA;EACD,CAAC;AAEF,GACE,IACC,MAAW;AACV,IAAW,MAAM,QAAQ,CAAC,OAAO,GAAG,GAAQ,EAAa;IAE3D,EAAE,MAAM,IAAM,CACf;CAED,SAAS,IAAoB;EAC3B,IAAM,IAAS,EAAO,UAAU,EAAW,MAAM;AAUjD,SARI,EAAO,WACT,EAAW,MAAM,SAAS,EAAE,EAC5B,EAAW,MAAM,UAAU,OAE3B,EAAW,MAAM,SAAS,EAAO,MAAM,OAAO,KAAK,MAAU,EAAM,QAAQ,EAC3E,EAAW,MAAM,UAAU,KAGtB,EAAW,MAAM;;CAG1B,SAAS,IAAQ;AAIf,EAHA,EAAW,MAAM,SAAS,EAAE,EAC5B,EAAW,MAAM,UAAU,IAC3B,EAAW,MAAM,QAAQ,IACzB,EAAW,MAAM,UAAU;;CAG7B,SAAS,IAAc;AACrB,IAAW,MAAM,UAAU;;CAI7B,IAAM,IAAa,EAAO,EAAM,gBAAgB,KAAA,EAAU;AAgB1D,QAfI,MACF,EAAW,KAAO,IAGpB,QAAsB;AACpB,EAAI,KACF,OAAO,EAAW;GAEpB,EAOK;EACL,QANa,QAAe,EAAW,MAAM,OAAO;EAOpD,SANc,QAAe,EAAW,MAAM,QAAQ;EAOtD,OANY,QAAe,EAAW,MAAM,MAAM;EAOlD,SANc,QAAe,EAAW,MAAM,QAAQ;EAOtD;EACA;EACA;EACD"}
+{"version":3,"file":"design-system101.js","names":[],"sources":["../src/components/BFloatButton/BFloatButtonGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, provide, ref, watch } from 'vue';\nimport { BFloatButtonGroupPlacement, BFloatButtonShape, BFloatButtonTrigger } from './types.ts';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst props = defineProps<{\n  /**\n   * Controlled open state. Use with `v-model:open` for two-way binding.\n   * When this prop changes, the internal state syncs to it.\n   */\n  open?: boolean | null;\n  /**\n   * The trigger mode for expanding/collapsing the group menu.\n   * When set, a trigger button is shown that reveals child buttons.\n   */\n  trigger?: `${BFloatButtonTrigger}`;\n  /**\n   * Animation direction when expanding/collapsing.\n   * @default 'top'\n   */\n  placement?: `${BFloatButtonGroupPlacement}`;\n  /**\n   * Shape applied to all child float buttons.\n   * @default 'circle'\n   */\n  shape?: `${BFloatButtonShape}`;\n  /**\n   * Icon name for the close/collapse trigger button.\n   */\n  closeIcon?: string;\n}>();\n\nconst emit = defineEmits<{\n  /** Emitted when the group open state changes. */\n  (e: 'openChange', open: boolean): void;\n  /** v-model support. */\n  (e: 'update:open', open: boolean): void;\n}>();\n\ndefineSlots<{\n  /** Float button children. */\n  default?(): unknown;\n  /** Custom trigger icon (open state). */\n  icon?(): unknown;\n  /** Custom close icon (close state). */\n  closeIcon?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state — always the rendering source of truth\n// ─────────────────────────────────────────────\nconst internalOpen = ref(false);\n\n// Sync from controlled prop → internal state when explicitly changed\nwatch(\n  () => props.open,\n  (val) => {\n    if (val === true) internalOpen.value = true;\n    else if (val === false) internalOpen.value = false;\n    // null/undefined means \"uncontrolled\" — do not override internal state\n  },\n  { immediate: true },\n);\n\nfunction setOpen(val: boolean) {\n  internalOpen.value = val;\n  emit('update:open', val);\n  emit('openChange', val);\n}\n\nfunction toggle() {\n  setOpen(!internalOpen.value);\n}\n\nfunction openGroup() {\n  setOpen(true);\n}\n\nfunction closeGroup() {\n  setOpen(false);\n}\n\n// ─────────────────────────────────────────────\n// Hover trigger\n// ─────────────────────────────────────────────\nlet hideTimer: ReturnType<typeof setTimeout> | null = null;\n\nfunction onMouseEnter() {\n  if (props.trigger !== BFloatButtonTrigger.Hover) return;\n  if (hideTimer) {\n    clearTimeout(hideTimer);\n    hideTimer = null;\n  }\n  openGroup();\n}\n\nfunction onMouseLeave() {\n  if (props.trigger !== BFloatButtonTrigger.Hover) return;\n  hideTimer = setTimeout(() => closeGroup(), 100);\n}\n\nonBeforeUnmount(() => {\n  if (hideTimer) clearTimeout(hideTimer);\n});\n\n// ─────────────────────────────────────────────\n// Provide shape to children\n// ─────────────────────────────────────────────\nprovide(\n  'bFloatButtonGroupShape',\n  computed(() => props.shape ?? BFloatButtonShape.Circle),\n);\n\nconst isGroup = computed(() => props.trigger !== undefined);\nconst placementClass = computed(\n  () => `b-float-button-group--${props.placement ?? BFloatButtonGroupPlacement.Top}`,\n);\nconst shapeClass = computed(\n  () => `b-float-button-group--shape-${props.shape ?? BFloatButtonShape.Circle}`,\n);\n</script>\n\n<template>\n  <div\n    class=\"b-float-button-group\"\n    :class=\"[\n      placementClass,\n      shapeClass,\n      {\n        'b-float-button-group--menu': isGroup,\n        'b-float-button-group--open': isGroup && internalOpen,\n      },\n    ]\"\n    :role=\"!isGroup ? 'group' : undefined\"\n    :aria-label=\"!isGroup ? 'Float button group' : undefined\"\n    @mouseenter=\"onMouseEnter\"\n    @mouseleave=\"onMouseLeave\"\n  >\n    <!-- Child buttons list (always rendered; hidden when group is collapsed) -->\n    <div\n      class=\"b-float-button-group__list\"\n      :aria-hidden=\"isGroup ? !internalOpen : undefined\"\n      :inert=\"isGroup && !internalOpen ? true : undefined\"\n    >\n      <slot />\n    </div>\n\n    <!-- Trigger button (only rendered when trigger is set) -->\n    <button\n      v-if=\"isGroup\"\n      type=\"button\"\n      class=\"b-float-button-group__trigger\"\n      :class=\"[\n        'b-float-button',\n        `b-float-button--${props.shape ?? 'circle'}`,\n        'b-float-button--primary',\n      ]\"\n      :aria-expanded=\"internalOpen\"\n      :aria-label=\"internalOpen ? 'Collapse button group' : 'Expand button group'\"\n      @click=\"toggle\"\n    >\n      <span class=\"b-float-button__body\">\n        <span class=\"b-float-button__icon\" aria-hidden=\"true\">\n          <template v-if=\"internalOpen\">\n            <slot name=\"closeIcon\">\n              <svg\n                width=\"1em\"\n                height=\"1em\"\n                viewBox=\"0 0 24 24\"\n                fill=\"currentColor\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\n                />\n              </svg>\n            </slot>\n          </template>\n          <template v-else>\n            <slot name=\"icon\">\n              <svg\n                width=\"1em\"\n                height=\"1em\"\n                viewBox=\"0 0 24 24\"\n                fill=\"currentColor\"\n                aria-hidden=\"true\"\n              >\n                <path d=\"M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\n              </svg>\n            </slot>\n          </template>\n        </span>\n      </span>\n    </button>\n  </div>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   Group container\n   ───────────────────────────────────────────── */\n.b-float-button-group {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.75rem;\n  position: relative;\n}\n\n.b-float-button-group--menu {\n  position: relative;\n}\n\n/* ─────────────────────────────────────────────\n   Items list (collapsible)\n   ───────────────────────────────────────────── */\n.b-float-button-group__list {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.75rem;\n  list-style: none;\n  padding: 0;\n  margin: 0 0 0.75rem 0;\n\n  /* Collapsed: hidden */\n  overflow: hidden;\n  max-height: 0;\n  opacity: 0;\n  pointer-events: none;\n  transition:\n    max-height 300ms cubic-bezier(0.4, 0, 0.2, 1),\n    opacity 250ms ease;\n}\n\n.b-float-button-group--open .b-float-button-group__list {\n  max-height: 60vh;\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* ── Placement variants for list direction ──\n   DOM order is always [list, trigger]. For `bottom`/`right` we reverse\n   the container so the trigger comes before the list visually. */\n.b-float-button-group--top .b-float-button-group__list {\n  flex-direction: column-reverse;\n}\n\n.b-float-button-group--bottom {\n  flex-direction: column-reverse;\n}\n\n.b-float-button-group--bottom .b-float-button-group__list {\n  flex-direction: column;\n  margin: 0.75rem 0 0 0;\n}\n\n.b-float-button-group--left .b-float-button-group__list {\n  flex-direction: row-reverse;\n  margin: 0 0.75rem 0 0;\n}\n\n.b-float-button-group--right .b-float-button-group__list {\n  flex-direction: row;\n  margin: 0 0 0 0.75rem;\n}\n\n/* ── Horizontal layout for left/right placements ── */\n.b-float-button-group--left {\n  flex-direction: row;\n  align-items: center;\n}\n\n.b-float-button-group--right {\n  flex-direction: row-reverse;\n  align-items: center;\n}\n\n/* ── Trigger button ── */\n.b-float-button-group__trigger {\n  flex-shrink: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-float-button-group__list {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;EAOA,IAAM,IAAQ,GA2BR,IAAO,GAmBP,IAAe,EAAI,GAAM;AAG/B,UACQ,EAAM,OACX,MAAQ;AACP,GAAI,MAAQ,KAAM,EAAa,QAAQ,KAC9B,MAAQ,OAAO,EAAa,QAAQ;KAG/C,EAAE,WAAW,IAAM,CACpB;EAED,SAAS,EAAQ,GAAc;AAG7B,GAFA,EAAa,QAAQ,GACrB,EAAK,eAAe,EAAI,EACxB,EAAK,cAAc,EAAI;;EAGzB,SAAS,IAAS;AAChB,KAAQ,CAAC,EAAa,MAAM;;EAG9B,SAAS,IAAY;AACnB,KAAQ,GAAK;;EAGf,SAAS,IAAa;AACpB,KAAQ,GAAM;;EAMhB,IAAI,IAAkD;EAEtD,SAAS,IAAe;AAClB,KAAM,YAAY,EAAoB,UAC1C,AAEE,OADA,aAAa,EAAU,EACX,OAEd,GAAW;;EAGb,SAAS,IAAe;AAClB,KAAM,YAAY,EAAoB,UAC1C,IAAY,iBAAiB,GAAY,EAAE,IAAI;;AAUjD,EAPA,QAAsB;AACpB,GAAI,KAAW,aAAa,EAAU;IACtC,EAKF,EACE,0BACA,QAAe,EAAM,SAAS,EAAkB,OAAO,CACxD;EAED,IAAM,IAAU,QAAe,EAAM,YAAY,KAAA,EAAU,EACrD,IAAiB,QACf,yBAAyB,EAAM,aAAa,EAA2B,MAC9E,EACK,IAAa,QACX,+BAA+B,EAAM,SAAS,EAAkB,SACvE;yBAIC,EAuEM,OAAA;GAtEJ,OAAK,EAAA,CAAC,wBAAsB;IACZ,EAAA;IAAsB,EAAA;;mCAA0D,EAAA;mCAA+C,EAAA,SAAW,EAAA;;;GAQzJ,MAAO,EAAA,QAAoB,KAAA,IAAb;GACd,cAAa,EAAA,QAAiC,KAAA,IAA1B;GACpB,cAAY;GACZ,cAAY;MAGb,EAMM,OAAA;GALJ,OAAM;GACL,eAAa,EAAA,QAAO,CAAI,EAAA,QAAe,KAAA;GACvC,OAAO,EAAA,SAAO,CAAK,EAAA,QAAY,KAAU,KAAA;MAE1C,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,GAAA,EAAA,EAKF,EAAA,SAAA,GAAA,EADR,EA6CS,UAAA;;GA3CP,MAAK;GACL,OAAK,EAAA,CAAC,iCAA+B;;uBAC0B,EAAM,SAAK;;;GAKzE,iBAAe,EAAA;GACf,cAAY,EAAA,QAAY,0BAAA;GACxB,SAAO;MAER,EA+BO,QA/BP,GA+BO,CA9BL,EA6BO,QA7BP,GA6BO,CA5BW,EAAA,QACd,EAYO,EAAA,QAAA,aAAA,EAAA,KAAA,GAAA,QAAA,CAAA,AAAA,EAAA,OAXL,EAUM,OAAA;GATJ,OAAM;GACN,QAAO;GACP,SAAQ;GACR,MAAK;GACL,eAAY;MAEZ,EAEE,QAAA,EADA,GAAE,yGAAuG,CAAA,CAAA,EAAA,GAAA,CAAA,CAAA,GAM/G,EAUO,EAAA,QAAA,QAAA,EAAA,KAAA,GAAA,QAAA,CAAA,AAAA,EAAA,OATL,EAQM,OAAA;GAPJ,OAAM;GACN,QAAO;GACP,SAAQ;GACR,MAAK;GACL,eAAY;MAEZ,EAAgD,QAAA,EAA1C,GAAE,uCAAqC,CAAA,CAAA,EAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,IAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,IAAA,EAAA"}

package/dist/design-system103.js

@@ -1,16 +1,8 @@
-//#region src/components/BForm/types.ts
-var e = /* @__PURE__ */ function(e) {
-	return e.Horizontal = "horizontal", e.Vertical = "vertical", e.Inline = "inline", e;
-}({}), t = /* @__PURE__ */ function(e) {
-	return e.Left = "left", e.Right = "right", e;
-}({}), n = /* @__PURE__ */ function(e) {
-	return e.Success = "success", e.Warning = "warning", e.Error = "error", e.Validating = "validating", e;
-}({}), r = /* @__PURE__ */ function(e) {
-	return e.Required = "required", e.Optional = "optional", e;
-}({}), i = /* @__PURE__ */ function(e) {
-	return e.Change = "change", e.Blur = "blur", e.Submit = "submit", e;
-}({});
+import e from "./design-system101.js";
+/* empty css                 */
+//#region src/components/BFloatButton/BFloatButtonGroup.vue
+var t = e;
 //#endregion
-export { t as BFormLabelAlign, e as BFormLayout, r as BFormRequiredMark, n as BFormValidateStatus, i as BFormValidateTrigger };
+export { t as default };
 
 //# sourceMappingURL=design-system103.js.map

package/dist/design-system103.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system103.js","names":[],"sources":["../src/components/BForm/types.ts"],"sourcesContent":["export enum BFormLayout {\n  Horizontal = 'horizontal',\n  Vertical = 'vertical',\n  Inline = 'inline',\n}\n\nexport enum BFormLabelAlign {\n  Left = 'left',\n  Right = 'right',\n}\n\nexport enum BFormValidateStatus {\n  Success = 'success',\n  Warning = 'warning',\n  Error = 'error',\n  Validating = 'validating',\n}\n\nexport enum BFormRequiredMark {\n  Required = 'required',\n  Optional = 'optional',\n}\n\nexport enum BFormValidateTrigger {\n  Change = 'change',\n  Blur = 'blur',\n  Submit = 'submit',\n}\n\nexport interface BFormFieldError {\n  name: string;\n  errors: string[];\n}\n\nexport interface BFormValidateResult {\n  values: Record<string, unknown>;\n  errorFields: BFormFieldError[];\n}\n\nexport interface BFormItemContext {\n  layout: `${BFormLayout}`;\n  labelAlign: `${BFormLabelAlign}`;\n  labelWidth: string | undefined;\n  colon: boolean;\n  disabled: boolean;\n  requiredMark: boolean | `${BFormRequiredMark}`;\n  validateTrigger: `${BFormValidateTrigger}` | `${BFormValidateTrigger}`[];\n  model: Record<string, unknown> | undefined;\n}\n\nexport interface BFormInstance {\n  validate: () => boolean;\n  resetFields: (names?: string[]) => void;\n  scrollToField: (name: string, options?: ScrollIntoViewOptions) => void;\n  isValid: boolean;\n}\n"],"mappings":";AAAA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,aAAA,cACA,EAAA,WAAA,YACA,EAAA,SAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,OAAA,QACA,EAAA,QAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,UAAA,WACA,EAAA,UAAA,WACA,EAAA,QAAA,SACA,EAAA,aAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,WAAA,YACA,EAAA,WAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,SAAA,UACA,EAAA,OAAA,QACA,EAAA,SAAA;KACD"}
+{"version":3,"file":"design-system103.js","names":[],"sources":["../src/components/BFloatButton/BFloatButtonGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, provide, ref, watch } from 'vue';\nimport { BFloatButtonGroupPlacement, BFloatButtonShape, BFloatButtonTrigger } from './types.ts';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst props = defineProps<{\n  /**\n   * Controlled open state. Use with `v-model:open` for two-way binding.\n   * When this prop changes, the internal state syncs to it.\n   */\n  open?: boolean | null;\n  /**\n   * The trigger mode for expanding/collapsing the group menu.\n   * When set, a trigger button is shown that reveals child buttons.\n   */\n  trigger?: `${BFloatButtonTrigger}`;\n  /**\n   * Animation direction when expanding/collapsing.\n   * @default 'top'\n   */\n  placement?: `${BFloatButtonGroupPlacement}`;\n  /**\n   * Shape applied to all child float buttons.\n   * @default 'circle'\n   */\n  shape?: `${BFloatButtonShape}`;\n  /**\n   * Icon name for the close/collapse trigger button.\n   */\n  closeIcon?: string;\n}>();\n\nconst emit = defineEmits<{\n  /** Emitted when the group open state changes. */\n  (e: 'openChange', open: boolean): void;\n  /** v-model support. */\n  (e: 'update:open', open: boolean): void;\n}>();\n\ndefineSlots<{\n  /** Float button children. */\n  default?(): unknown;\n  /** Custom trigger icon (open state). */\n  icon?(): unknown;\n  /** Custom close icon (close state). */\n  closeIcon?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state — always the rendering source of truth\n// ─────────────────────────────────────────────\nconst internalOpen = ref(false);\n\n// Sync from controlled prop → internal state when explicitly changed\nwatch(\n  () => props.open,\n  (val) => {\n    if (val === true) internalOpen.value = true;\n    else if (val === false) internalOpen.value = false;\n    // null/undefined means \"uncontrolled\" — do not override internal state\n  },\n  { immediate: true },\n);\n\nfunction setOpen(val: boolean) {\n  internalOpen.value = val;\n  emit('update:open', val);\n  emit('openChange', val);\n}\n\nfunction toggle() {\n  setOpen(!internalOpen.value);\n}\n\nfunction openGroup() {\n  setOpen(true);\n}\n\nfunction closeGroup() {\n  setOpen(false);\n}\n\n// ─────────────────────────────────────────────\n// Hover trigger\n// ─────────────────────────────────────────────\nlet hideTimer: ReturnType<typeof setTimeout> | null = null;\n\nfunction onMouseEnter() {\n  if (props.trigger !== BFloatButtonTrigger.Hover) return;\n  if (hideTimer) {\n    clearTimeout(hideTimer);\n    hideTimer = null;\n  }\n  openGroup();\n}\n\nfunction onMouseLeave() {\n  if (props.trigger !== BFloatButtonTrigger.Hover) return;\n  hideTimer = setTimeout(() => closeGroup(), 100);\n}\n\nonBeforeUnmount(() => {\n  if (hideTimer) clearTimeout(hideTimer);\n});\n\n// ─────────────────────────────────────────────\n// Provide shape to children\n// ─────────────────────────────────────────────\nprovide(\n  'bFloatButtonGroupShape',\n  computed(() => props.shape ?? BFloatButtonShape.Circle),\n);\n\nconst isGroup = computed(() => props.trigger !== undefined);\nconst placementClass = computed(\n  () => `b-float-button-group--${props.placement ?? BFloatButtonGroupPlacement.Top}`,\n);\nconst shapeClass = computed(\n  () => `b-float-button-group--shape-${props.shape ?? BFloatButtonShape.Circle}`,\n);\n</script>\n\n<template>\n  <div\n    class=\"b-float-button-group\"\n    :class=\"[\n      placementClass,\n      shapeClass,\n      {\n        'b-float-button-group--menu': isGroup,\n        'b-float-button-group--open': isGroup && internalOpen,\n      },\n    ]\"\n    :role=\"!isGroup ? 'group' : undefined\"\n    :aria-label=\"!isGroup ? 'Float button group' : undefined\"\n    @mouseenter=\"onMouseEnter\"\n    @mouseleave=\"onMouseLeave\"\n  >\n    <!-- Child buttons list (always rendered; hidden when group is collapsed) -->\n    <div\n      class=\"b-float-button-group__list\"\n      :aria-hidden=\"isGroup ? !internalOpen : undefined\"\n      :inert=\"isGroup && !internalOpen ? true : undefined\"\n    >\n      <slot />\n    </div>\n\n    <!-- Trigger button (only rendered when trigger is set) -->\n    <button\n      v-if=\"isGroup\"\n      type=\"button\"\n      class=\"b-float-button-group__trigger\"\n      :class=\"[\n        'b-float-button',\n        `b-float-button--${props.shape ?? 'circle'}`,\n        'b-float-button--primary',\n      ]\"\n      :aria-expanded=\"internalOpen\"\n      :aria-label=\"internalOpen ? 'Collapse button group' : 'Expand button group'\"\n      @click=\"toggle\"\n    >\n      <span class=\"b-float-button__body\">\n        <span class=\"b-float-button__icon\" aria-hidden=\"true\">\n          <template v-if=\"internalOpen\">\n            <slot name=\"closeIcon\">\n              <svg\n                width=\"1em\"\n                height=\"1em\"\n                viewBox=\"0 0 24 24\"\n                fill=\"currentColor\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\n                />\n              </svg>\n            </slot>\n          </template>\n          <template v-else>\n            <slot name=\"icon\">\n              <svg\n                width=\"1em\"\n                height=\"1em\"\n                viewBox=\"0 0 24 24\"\n                fill=\"currentColor\"\n                aria-hidden=\"true\"\n              >\n                <path d=\"M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\n              </svg>\n            </slot>\n          </template>\n        </span>\n      </span>\n    </button>\n  </div>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   Group container\n   ───────────────────────────────────────────── */\n.b-float-button-group {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.75rem;\n  position: relative;\n}\n\n.b-float-button-group--menu {\n  position: relative;\n}\n\n/* ─────────────────────────────────────────────\n   Items list (collapsible)\n   ───────────────────────────────────────────── */\n.b-float-button-group__list {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.75rem;\n  list-style: none;\n  padding: 0;\n  margin: 0 0 0.75rem 0;\n\n  /* Collapsed: hidden */\n  overflow: hidden;\n  max-height: 0;\n  opacity: 0;\n  pointer-events: none;\n  transition:\n    max-height 300ms cubic-bezier(0.4, 0, 0.2, 1),\n    opacity 250ms ease;\n}\n\n.b-float-button-group--open .b-float-button-group__list {\n  max-height: 60vh;\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* ── Placement variants for list direction ──\n   DOM order is always [list, trigger]. For `bottom`/`right` we reverse\n   the container so the trigger comes before the list visually. */\n.b-float-button-group--top .b-float-button-group__list {\n  flex-direction: column-reverse;\n}\n\n.b-float-button-group--bottom {\n  flex-direction: column-reverse;\n}\n\n.b-float-button-group--bottom .b-float-button-group__list {\n  flex-direction: column;\n  margin: 0.75rem 0 0 0;\n}\n\n.b-float-button-group--left .b-float-button-group__list {\n  flex-direction: row-reverse;\n  margin: 0 0.75rem 0 0;\n}\n\n.b-float-button-group--right .b-float-button-group__list {\n  flex-direction: row;\n  margin: 0 0 0 0.75rem;\n}\n\n/* ── Horizontal layout for left/right placements ── */\n.b-float-button-group--left {\n  flex-direction: row;\n  align-items: center;\n}\n\n.b-float-button-group--right {\n  flex-direction: row-reverse;\n  align-items: center;\n}\n\n/* ── Trigger button ── */\n.b-float-button-group__trigger {\n  flex-shrink: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-float-button-group__list {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":""}