@7pmlabs/design-system 1.0.10 → 2.0.0

package/dist/design-system90.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system90.js","names":[],"sources":["../src/components/BEmpty/BEmpty.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BEmptyImage } from '@/types.ts';\nimport { computed } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Customize description text. Pass empty string to show no text,\n     * or set hideDescription to true to hide the description entirely.\n     */\n    description?: string;\n    /**\n     * Set to true to hide the description area completely.\n     * @default false\n     */\n    hideDescription?: boolean;\n    /**\n     * Image type or custom image URL string.\n     * Use BEmptyImage.Default for the detailed illustration or\n     * BEmptyImage.Simple for the minimal version.\n     * @default BEmptyImage.Default\n     */\n    image?: `${BEmptyImage}` | string;\n    /**\n     * Inline styles applied to the image element.\n     */\n    imageStyle?: Record<string, string>;\n  }>(),\n  {\n    description: 'No data',\n    hideDescription: false,\n    image: BEmptyImage.Default,\n  },\n);\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\nconst slots = defineSlots<{\n  /** Default slot: action content below description (e.g. button). */\n  default?(): unknown;\n  /** Custom description content, overrides the description prop. */\n  description?(): unknown;\n  /** Custom image content, overrides the image prop entirely. */\n  image?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Derived state\n// ─────────────────────────────────────────────\nconst isSimple = computed(() => props.image === BEmptyImage.Simple);\n\nconst isBuiltInImage = computed(\n  () => props.image === BEmptyImage.Default || props.image === BEmptyImage.Simple,\n);\n\nconst isCustomUrl = computed(\n  () => !isBuiltInImage.value && typeof props.image === 'string' && props.image.length > 0,\n);\n\nconst showDescription = computed(() => {\n  if (slots.description) return true;\n  return !props.hideDescription;\n});\n\nconst descriptionText = computed(() => {\n  return props.description;\n});\n</script>\n\n<template>\n  <div\n    class=\"b-empty\"\n    :class=\"{ 'b-empty--simple': isSimple }\"\n    role=\"status\"\n    :aria-label=\"props.description || 'No data'\"\n  >\n    <!-- Image -->\n    <div class=\"b-empty__image\" :style=\"props.imageStyle\">\n      <slot name=\"image\">\n        <!-- Default built-in illustration -->\n        <svg\n          v-if=\"props.image === BEmptyImage.Default\"\n          class=\"b-empty__svg b-empty__svg--default\"\n          viewBox=\"0 0 184 152\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n        >\n          <g fill=\"none\" fill-rule=\"evenodd\">\n            <g transform=\"translate(24 31.67)\">\n              <ellipse class=\"b-empty__ellipse\" cx=\"67.797\" cy=\"106.89\" rx=\"67.797\" ry=\"12.668\" />\n              <path\n                class=\"b-empty__path-bg\"\n                d=\"M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z\"\n              />\n              <path\n                class=\"b-empty__path-main\"\n                d=\"M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z\"\n                transform=\"translate(13.56)\"\n              />\n              <path\n                class=\"b-empty__path-front\"\n                d=\"M33.83 0h67.933a4 4 0 014 4v93.344H29.83V4a4 4 0 014-4z\"\n              />\n              <path\n                class=\"b-empty__path-panel\"\n                d=\"M42.678 9.953h50.237a2 2 0 012 2V36.91h-54.237V11.953a2 2 0 012-2zM42.94 49.767h49.713a2.262 2.262 0 110 4.524H42.94a2.262 2.262 0 110-4.524zM42.94 61.53h49.713a2.262 2.262 0 110 4.525H42.94a2.262 2.262 0 010-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 01-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393 0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z\"\n              />\n            </g>\n            <path\n              class=\"b-empty__path-dot\"\n              d=\"M149.121 33.292l-6.83 2.65a1 1 0 01-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z\"\n            />\n            <g class=\"b-empty__path-dots-group\" transform=\"translate(149.65 15.383)\">\n              <ellipse cx=\"20.654\" cy=\"3.167\" rx=\"2.849\" ry=\"2.815\" />\n              <path d=\"M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z\" />\n            </g>\n          </g>\n        </svg>\n\n        <!-- Simple built-in illustration -->\n        <svg\n          v-else-if=\"props.image === BEmptyImage.Simple\"\n          class=\"b-empty__svg b-empty__svg--simple\"\n          viewBox=\"0 0 64 41\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n        >\n          <g transform=\"translate(0 1)\" fill=\"none\" fill-rule=\"evenodd\">\n            <ellipse class=\"b-empty__simple-ellipse\" cx=\"32\" cy=\"33\" rx=\"32\" ry=\"7\" />\n            <g class=\"b-empty__simple-group\" fill-rule=\"nonzero\">\n              <path\n                d=\"M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46V12.76z\"\n              />\n              <path\n                class=\"b-empty__simple-inner\"\n                d=\"M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z\"\n              />\n            </g>\n          </g>\n        </svg>\n\n        <!-- Custom URL image -->\n        <img\n          v-else-if=\"isCustomUrl\"\n          :src=\"props.image\"\n          alt=\"\"\n          class=\"b-empty__custom-image\"\n          aria-hidden=\"true\"\n        />\n      </slot>\n    </div>\n\n    <!-- Description -->\n    <div v-if=\"showDescription\" class=\"b-empty__description\">\n      <slot name=\"description\">\n        {{ descriptionText }}\n      </slot>\n    </div>\n\n    <!-- Footer / actions -->\n    <div v-if=\"slots.default\" class=\"b-empty__footer\">\n      <slot />\n    </div>\n  </div>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ──────────────────────────────────────────── */\n.b-empty {\n  /* Layout */\n  --b-empty-padding: 32px 0;\n  --b-empty-text-align: center;\n\n  /* Image */\n  --b-empty-image-height: 152px;\n  --b-empty-image-height-simple: 35px;\n  --b-empty-image-margin-bottom: 8px;\n  --b-empty-image-opacity: 1;\n\n  /* Default SVG colors */\n  --b-empty-ellipse-fill: oklch(93% 0.005 260);\n  --b-empty-path-bg-fill: oklch(95% 0.003 260);\n  --b-empty-path-main-fill: oklch(97% 0.002 260);\n  --b-empty-path-front-stroke: oklch(83% 0.01 260);\n  --b-empty-path-front-fill: oklch(97% 0.002 260);\n  --b-empty-path-panel-fill: oklch(93% 0.005 260);\n  --b-empty-path-dot-fill: oklch(83% 0.01 260);\n  --b-empty-path-dots-group-fill: oklch(100% 0 0);\n\n  /* Simple SVG colors */\n  --b-empty-simple-ellipse-fill: oklch(93% 0.005 260);\n  --b-empty-simple-group-stroke: oklch(83% 0.01 260);\n  --b-empty-simple-group-fill: oklch(97% 0.002 260);\n  --b-empty-simple-inner-fill: oklch(93% 0.005 260);\n\n  /* Description */\n  --b-empty-description-color: oklch(55% 0.01 260);\n  --b-empty-description-font-size: 14px;\n  --b-empty-description-line-height: 1.572;\n  --b-empty-description-margin-top: 8px;\n\n  /* Footer */\n  --b-empty-footer-margin-top: 16px;\n\n  /* Animation */\n  --b-empty-transition-duration: 200ms;\n}\n\n/* ── Dark mode ───────────────────────────────── */\n[data-prefers-color='dark'] .b-empty {\n  --b-empty-ellipse-fill: oklch(25% 0.005 260);\n  --b-empty-path-bg-fill: oklch(22% 0.005 260);\n  --b-empty-path-main-fill: oklch(18% 0.003 260);\n  --b-empty-path-front-stroke: oklch(40% 0.01 260);\n  --b-empty-path-front-fill: oklch(20% 0.005 260);\n  --b-empty-path-panel-fill: oklch(28% 0.005 260);\n  --b-empty-path-dot-fill: oklch(40% 0.01 260);\n  --b-empty-path-dots-group-fill: oklch(18% 0 0);\n\n  --b-empty-simple-ellipse-fill: oklch(25% 0.005 260);\n  --b-empty-simple-group-stroke: oklch(40% 0.01 260);\n  --b-empty-simple-group-fill: oklch(20% 0.005 260);\n  --b-empty-simple-inner-fill: oklch(28% 0.005 260);\n\n  --b-empty-description-color: oklch(70% 0.01 260);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-empty {\n    --b-empty-ellipse-fill: oklch(25% 0.005 260);\n    --b-empty-path-bg-fill: oklch(22% 0.005 260);\n    --b-empty-path-main-fill: oklch(18% 0.003 260);\n    --b-empty-path-front-stroke: oklch(40% 0.01 260);\n    --b-empty-path-front-fill: oklch(20% 0.005 260);\n    --b-empty-path-panel-fill: oklch(28% 0.005 260);\n    --b-empty-path-dot-fill: oklch(40% 0.01 260);\n    --b-empty-path-dots-group-fill: oklch(18% 0 0);\n  \n    --b-empty-simple-ellipse-fill: oklch(25% 0.005 260);\n    --b-empty-simple-group-stroke: oklch(40% 0.01 260);\n    --b-empty-simple-group-fill: oklch(20% 0.005 260);\n    --b-empty-simple-inner-fill: oklch(28% 0.005 260);\n  \n    --b-empty-description-color: oklch(70% 0.01 260);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Base layout\n   ───────────────────────────────────────────── */\n.b-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: var(--b-empty-padding);\n  text-align: var(--b-empty-text-align);\n  box-sizing: border-box;\n}\n\n/* ─────────────────────────────────────────────\n   Image area\n   ───────────────────────────────────────────── */\n.b-empty__image {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--b-empty-image-height);\n  margin-bottom: var(--b-empty-image-margin-bottom);\n  opacity: var(--b-empty-image-opacity);\n}\n\n.b-empty--simple .b-empty__image {\n  height: var(--b-empty-image-height-simple);\n}\n\n.b-empty__svg {\n  width: auto;\n  height: 100%;\n}\n\n.b-empty__custom-image {\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n}\n\n/* ─────────────────────────────────────────────\n   Default SVG illustration colors\n   ───────────────────────────────────────────── */\n.b-empty__ellipse {\n  fill: var(--b-empty-ellipse-fill);\n}\n\n.b-empty__path-bg {\n  fill: var(--b-empty-path-bg-fill);\n}\n\n.b-empty__path-main {\n  fill: var(--b-empty-path-main-fill);\n}\n\n.b-empty__path-front {\n  stroke: var(--b-empty-path-front-stroke);\n  fill: var(--b-empty-path-front-fill);\n}\n\n.b-empty__path-panel {\n  fill: var(--b-empty-path-panel-fill);\n}\n\n.b-empty__path-dot {\n  fill: var(--b-empty-path-dot-fill);\n}\n\n.b-empty__path-dots-group {\n  fill: var(--b-empty-path-dots-group-fill);\n}\n\n/* ─────────────────────────────────────────────\n   Simple SVG illustration colors\n   ───────────────────────────────────────────── */\n.b-empty__simple-ellipse {\n  fill: var(--b-empty-simple-ellipse-fill);\n}\n\n.b-empty__simple-group {\n  stroke: var(--b-empty-simple-group-stroke);\n  fill: var(--b-empty-simple-group-fill);\n}\n\n.b-empty__simple-inner {\n  fill: var(--b-empty-simple-inner-fill);\n}\n\n/* ─────────────────────────────────────────────\n   Description\n   ───────────────────────────────────────────── */\n.b-empty__description {\n  color: var(--b-empty-description-color);\n  font-size: var(--b-empty-description-font-size);\n  line-height: var(--b-empty-description-line-height);\n  margin-top: var(--b-empty-description-margin-top);\n}\n\n/* ─────────────────────────────────────────────\n   Footer (actions area)\n   ───────────────────────────────────────────── */\n.b-empty__footer {\n  margin-top: var(--b-empty-footer-margin-top);\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-empty {\n    --b-empty-transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system91.js

@@ -1,8 +1,14 @@
-import e from "./design-system89.js";
-/* empty css                */
-//#region src/components/BFloatButton/BFloatButtonGroup.vue
-var t = e;
+//#region src/components/BFloatButton/types.ts
+var e = /* @__PURE__ */ function(e) {
+	return e.Circle = "circle", e.Square = "square", e;
+}({}), t = /* @__PURE__ */ function(e) {
+	return e.Default = "default", e.Primary = "primary", e;
+}({}), n = /* @__PURE__ */ function(e) {
+	return e.Click = "click", e.Hover = "hover", e;
+}({}), r = /* @__PURE__ */ function(e) {
+	return e.Top = "top", e.Right = "right", e.Bottom = "bottom", e.Left = "left", e;
+}({});
 //#endregion
-export { t as default };
+export { r as BFloatButtonGroupPlacement, e as BFloatButtonShape, n as BFloatButtonTrigger, t as BFloatButtonType };
 
 //# sourceMappingURL=design-system91.js.map

package/dist/design-system91.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system91.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.b-float-button-group--top .b-float-button-group__list {\n  flex-direction: column-reverse;\n}\n\n.b-float-button-group--bottom .b-float-button-group__list {\n  flex-direction: column;\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.b-float-button-group--right {\n  flex-direction: row;\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-system91.js","names":[],"sources":["../src/components/BFloatButton/types.ts"],"sourcesContent":["export enum BFloatButtonShape {\n  Circle = 'circle',\n  Square = 'square',\n}\n\nexport enum BFloatButtonType {\n  Default = 'default',\n  Primary = 'primary',\n}\n\nexport enum BFloatButtonTrigger {\n  Click = 'click',\n  Hover = 'hover',\n}\n\nexport enum BFloatButtonGroupPlacement {\n  Top = 'top',\n  Right = 'right',\n  Bottom = 'bottom',\n  Left = 'left',\n}\n\nexport interface BFloatButtonBadgeProps {\n  /** Badge count number */\n  count?: number;\n  /** Whether to show badge even when count is 0 */\n  showZero?: boolean;\n  /** Max count to display before showing overflow text */\n  overflowCount?: number;\n  /** Show a red dot instead of a count */\n  dot?: boolean;\n  /** Custom badge text color */\n  color?: string;\n}\n"],"mappings":";AAAA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,SAAA,UACA,EAAA,SAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,UAAA,WACA,EAAA,UAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,QAAA,SACA,EAAA,QAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,MAAA,OACA,EAAA,QAAA,SACA,EAAA,SAAA,UACA,EAAA,OAAA;KACD"}

package/dist/design-system92.js

@@ -1,57 +1,102 @@
-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 e from "./design-system27.js";
+import { BFloatButtonShape as t, BFloatButtonType as n } from "./design-system91.js";
+import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, defineComponent as u, normalizeClass as d, normalizeStyle as f, openBlock as p, renderSlot as m, resolveDynamicComponent as h, toDisplayString as g, withCtx as _ } from "vue";
+//#region src/components/BFloatButton/BFloatButton.vue?vue&type=script&setup=true&lang.ts
+var v = { class: "b-float-button__body" }, y = {
+	class: "b-float-button__icon",
+	"aria-hidden": "true"
+}, b = {
+	key: 1,
+	width: "1em",
+	height: "1em",
+	viewBox: "0 0 24 24",
+	fill: "currentColor",
+	"aria-hidden": "true"
+}, x = {
+	key: 0,
+	class: "b-float-button__description"
+}, S = {
+	key: 1,
+	class: "b-float-button__tooltip",
+	role: "tooltip"
+}, C = /* @__PURE__ */ u({
+	__name: "BFloatButton",
+	props: {
+		icon: {},
+		description: {},
+		tooltip: {},
+		type: { default: () => n.Default },
+		shape: { default: () => t.Circle },
+		href: {},
+		target: { default: "_blank" },
+		htmlType: { default: "button" },
+		badge: {},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		ariaLabel: {}
+	},
+	emits: ["click"],
+	setup(t, { emit: n }) {
+		let u = n, C = (e) => t.type === e, w = (e) => t.shape === e, T = i(() => {
+			if (t.badge && !t.badge.dot) return t.badge.count;
+		}), E = i(() => t.badge?.dot ?? !1), D = i(() => t.badge?.overflowCount ?? 99), O = i(() => {
+			let e = T.value;
+			if (e !== void 0 && !(e === 0 && !t.badge?.showZero)) return e > D.value ? `${D.value}+` : String(e);
+		}), k = i(() => E.value || O.value !== void 0);
+		function A(e) {
+			t.disabled || u("click", e);
+		}
+		let j = i(() => t.href ? "a" : "button");
+		return (n, i) => (p(), a(h(j.value), {
+			href: t.href,
+			target: t.href ? t.target : void 0,
+			type: t.href ? void 0 : t.htmlType,
+			disabled: !t.href && t.disabled ? !0 : void 0,
+			"aria-disabled": t.href && t.disabled ? "true" : void 0,
+			"aria-label": t.ariaLabel ?? t.tooltip,
+			title: t.tooltip,
+			class: d(["b-float-button", {
+				"b-float-button--circle": w("circle"),
+				"b-float-button--square": w("square"),
+				"b-float-button--default": C("default"),
+				"b-float-button--primary": C("primary"),
+				"b-float-button--disabled": t.disabled
+			}]),
+			onClick: A
+		}, {
+			default: _(() => [
+				k.value ? (p(), s("span", {
+					key: 0,
+					class: d(["b-float-button__badge", {
+						"b-float-button__badge--dot": E.value,
+						"b-float-button__badge--count": !E.value
+					}]),
+					style: f(t.badge?.color ? { backgroundColor: t.badge.color } : void 0),
+					"aria-hidden": "true"
+				}, [E.value ? o("", !0) : (p(), s(r, { key: 0 }, [l(g(O.value), 1)], 64))], 6)) : o("", !0),
+				c("span", v, [c("span", y, [m(n.$slots, "icon", {}, () => [t.icon ? (p(), a(e, {
+					key: 0,
+					icon: t.icon,
+					size: "md"
+				}, null, 8, ["icon"])) : (p(), s("svg", b, [...i[0] ||= [c("path", { d: "M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" }, null, -1)]]))])]), (n.$slots.description || t.description) && w("square") ? (p(), s("span", x, [m(n.$slots, "description", {}, () => [l(g(t.description), 1)])])) : o("", !0)]),
+				n.$slots.tooltip || t.tooltip && !t.ariaLabel ? (p(), s("span", S, [m(n.$slots, "tooltip", {}, () => [l(g(t.tooltip), 1)])])) : o("", !0)
+			]),
+			_: 3
+		}, 8, [
+			"href",
+			"target",
+			"type",
+			"disabled",
+			"aria-disabled",
+			"aria-label",
+			"title",
+			"class"
+		]));
 	}
-	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 { C as default };
 
 //# sourceMappingURL=design-system92.js.map

package/dist/design-system92.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system92.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-system92.js","names":["$slots"],"sources":["../src/components/BFloatButton/BFloatButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport BIcon from '@/components/BIcon/BIcon.vue';\nimport { type BIconName } from '@/components/BIcon/BIconEnum.ts';\nimport { computed } from 'vue';\nimport type { BFloatButtonBadgeProps } from './types.ts';\nimport { BFloatButtonShape, BFloatButtonType } from './types.ts';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  icon,\n  description,\n  tooltip,\n  type = BFloatButtonType.Default,\n  shape = BFloatButtonShape.Circle,\n  href,\n  target = '_blank',\n  htmlType = 'button',\n  badge,\n  disabled = false,\n  ariaLabel,\n} = defineProps<{\n  /**\n   * Icon name for the float button.\n   * @example 'arrow-up', 'plus', 'question'\n   */\n  icon?: `${BIconName}`;\n  /**\n   * Description text shown below the icon (square shape only).\n   */\n  description?: string;\n  /**\n   * Tooltip text shown on hover.\n   */\n  tooltip?: string;\n  /**\n   * Visual type of the button.\n   * @default 'default'\n   */\n  type?: `${BFloatButtonType}`;\n  /**\n   * Shape of the button.\n   * @default 'circle'\n   */\n  shape?: `${BFloatButtonShape}`;\n  /**\n   * When set, renders as an anchor element with this href.\n   */\n  href?: string;\n  /**\n   * Link target attribute (only used with href).\n   * @default '_blank'\n   */\n  target?: string;\n  /**\n   * HTML button type attribute (only used when not href).\n   * @default 'button'\n   */\n  htmlType?: 'button' | 'submit' | 'reset';\n  /**\n   * Badge configuration to display on the button.\n   */\n  badge?: BFloatButtonBadgeProps;\n  /**\n   * Whether the button is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Accessible label for the button (important when no visible text).\n   */\n  ariaLabel?: string;\n}>();\n\nconst emit = defineEmits<{\n  /** Emitted when the button is clicked. */\n  (e: 'click', event: MouseEvent): void;\n}>();\n\ndefineSlots<{\n  /** Custom icon content. */\n  icon?(): unknown;\n  /** Description content (square shape only). */\n  description?(): unknown;\n  /** Tooltip content. */\n  tooltip?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Computed helpers\n// ─────────────────────────────────────────────\nconst isType = (value: `${BFloatButtonType}`) => type === value;\nconst isShape = (value: `${BFloatButtonShape}`) => shape === value;\n\nconst badgeCount = computed(() => {\n  if (!badge) return undefined;\n  if (badge.dot) return undefined;\n  return badge.count;\n});\n\nconst showBadgeDot = computed(() => badge?.dot ?? false);\n\nconst badgeOverflow = computed(() => badge?.overflowCount ?? 99);\n\nconst badgeDisplayCount = computed(() => {\n  const count = badgeCount.value;\n  if (count === undefined) return undefined;\n  if (count === 0 && !badge?.showZero) return undefined;\n  return count > badgeOverflow.value ? `${badgeOverflow.value}+` : String(count);\n});\n\nconst showBadge = computed(() => {\n  return showBadgeDot.value || badgeDisplayCount.value !== undefined;\n});\n\nfunction handleClick(event: MouseEvent) {\n  if (disabled) return;\n  emit('click', event);\n}\n\nconst rootTag = computed(() => (href ? 'a' : 'button'));\n</script>\n\n<template>\n  <component\n    :is=\"rootTag\"\n    :href=\"href\"\n    :target=\"href ? target : undefined\"\n    :type=\"!href ? htmlType : undefined\"\n    :disabled=\"!href && disabled ? true : undefined\"\n    :aria-disabled=\"href && disabled ? 'true' : undefined\"\n    :aria-label=\"ariaLabel ?? tooltip\"\n    :title=\"tooltip\"\n    :class=\"[\n      'b-float-button',\n      {\n        'b-float-button--circle': isShape('circle'),\n        'b-float-button--square': isShape('square'),\n        'b-float-button--default': isType('default'),\n        'b-float-button--primary': isType('primary'),\n        'b-float-button--disabled': disabled,\n      },\n    ]\"\n    @click=\"handleClick\"\n  >\n    <!-- Badge -->\n    <span\n      v-if=\"showBadge\"\n      class=\"b-float-button__badge\"\n      :class=\"{\n        'b-float-button__badge--dot': showBadgeDot,\n        'b-float-button__badge--count': !showBadgeDot,\n      }\"\n      :style=\"badge?.color ? { backgroundColor: badge.color } : undefined\"\n      aria-hidden=\"true\"\n    >\n      <template v-if=\"!showBadgeDot\">{{ badgeDisplayCount }}</template>\n    </span>\n\n    <!-- Body -->\n    <span class=\"b-float-button__body\">\n      <!-- Icon -->\n      <span class=\"b-float-button__icon\" aria-hidden=\"true\">\n        <slot name=\"icon\">\n          <BIcon v-if=\"icon\" :icon=\"icon\" size=\"md\" />\n          <!-- Default plus icon when no icon prop or slot is provided -->\n          <svg\n            v-else\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      </span>\n\n      <!-- Description (square shape only) -->\n      <span\n        v-if=\"($slots.description || description) && isShape('square')\"\n        class=\"b-float-button__description\"\n      >\n        <slot name=\"description\">{{ description }}</slot>\n      </span>\n    </span>\n\n    <!-- Tooltip overlay -->\n    <span\n      v-if=\"$slots.tooltip || (tooltip && !ariaLabel)\"\n      class=\"b-float-button__tooltip\"\n      role=\"tooltip\"\n    >\n      <slot name=\"tooltip\">{{ tooltip }}</slot>\n    </span>\n  </component>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   scoped to .b-float-button — never on :root\n   ──────────────────────────────────────────── */\n.b-float-button {\n  /* Size tokens — AntD: floatButtonSize (40px) */\n  --b-float-button-size: 40px;\n  /* Icon size — AntD: floatButtonIconSize (21px) */\n  --b-float-button-icon-size: 1.3125rem;\n  /* Background — AntD: colorBgContainer */\n  --b-float-button-bg: #fff;\n  /* Primary background */\n  --b-float-button-primary-bg: oklch(55% 0.2 264);\n  /* Primary hover background */\n  --b-float-button-primary-bg-hover: oklch(62% 0.2 264);\n  /* Default hover background */\n  --b-float-button-bg-hover: oklch(96% 0 0);\n  /* Text / icon color — AntD: colorText */\n  --b-float-button-color: oklch(20% 0 0);\n  /* Primary text color */\n  --b-float-button-primary-color: #fff;\n  /* Border radius (circle: 50%, square: 8px) */\n  --b-float-button-border-radius-circle: 50%;\n  --b-float-button-border-radius-square: 0.5rem;\n  /* Shadow — AntD: boxShadowSecondary */\n  --b-float-button-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n    0 9px 28px 8px rgba(0, 0, 0, 0.05);\n  /* Bottom inset — AntD: floatButtonInsetBlockEnd (48px) */\n  --b-float-button-inset-block-end: 3rem;\n  /* Inline inset — AntD: floatButtonInsetInlineEnd (24px) */\n  --b-float-button-inset-inline-end: 1.5rem;\n  /* z-index — AntD: zIndexPopupBase (1000) */\n  --b-float-button-z-index: 1000;\n  /* Transition */\n  --b-float-button-transition-duration: 200ms;\n  /* Description font size (sm) */\n  --b-float-button-description-font-size: 0.75rem;\n  /* Badge */\n  --b-float-button-badge-bg: oklch(57% 0.22 25);\n  --b-float-button-badge-color: #fff;\n  --b-float-button-badge-font-size: 0.6875rem;\n  /* Tooltip */\n  --b-float-button-tooltip-bg: oklch(20% 0.02 260);\n  --b-float-button-tooltip-color: oklch(96% 0 0);\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-float-button,\n[data-prefers-color='dark'].b-float-button {\n  --b-float-button-bg: oklch(20% 0.02 260);\n  --b-float-button-bg-hover: oklch(28% 0.02 260);\n  --b-float-button-color: oklch(88% 0.01 260);\n  --b-float-button-primary-bg: oklch(50% 0.2 264);\n  --b-float-button-primary-bg-hover: oklch(57% 0.2 264);\n  --b-float-button-shadow:\n    0 6px 16px 0 oklch(0% 0 0 / 30%), 0 3px 6px -4px oklch(0% 0 0 / 40%),\n    0 9px 28px 8px oklch(0% 0 0 / 25%);\n  --b-float-button-tooltip-bg: oklch(30% 0.02 260);\n  --b-float-button-tooltip-color: oklch(88% 0.01 260);\n  --b-float-button-badge-bg: oklch(55% 0.22 25);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'].b-float-button {\n    --b-float-button-bg: oklch(20% 0.02 260);\n    --b-float-button-bg-hover: oklch(28% 0.02 260);\n    --b-float-button-color: oklch(88% 0.01 260);\n    --b-float-button-primary-bg: oklch(50% 0.2 264);\n    --b-float-button-primary-bg-hover: oklch(57% 0.2 264);\n    --b-float-button-shadow:\n      0 6px 16px 0 oklch(0% 0 0 / 30%), 0 3px 6px -4px oklch(0% 0 0 / 40%),\n      0 9px 28px 8px oklch(0% 0 0 / 25%);\n    --b-float-button-tooltip-bg: oklch(30% 0.02 260);\n    --b-float-button-tooltip-color: oklch(88% 0.01 260);\n    --b-float-button-badge-bg: oklch(55% 0.22 25);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Base button\n   ───────────────────────────────────────────── */\n.b-float-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  width: var(--b-float-button-size);\n  height: var(--b-float-button-size);\n  min-height: var(--b-float-button-size);\n  background-color: var(--b-float-button-bg);\n  color: var(--b-float-button-color);\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  box-shadow: var(--b-float-button-shadow);\n  text-decoration: none;\n  transition:\n    background-color var(--b-float-button-transition-duration) ease,\n    color var(--b-float-button-transition-duration) ease,\n    box-shadow var(--b-float-button-transition-duration) ease,\n    transform var(--b-float-button-transition-duration) ease;\n  outline-offset: 2px;\n\n  /* Tooltip hidden by default */\n  &:hover .b-float-button__tooltip {\n    opacity: 1;\n    pointer-events: auto;\n    transform: translateX(-50%) scale(1);\n  }\n}\n\n/* ── Shape: circle ── */\n.b-float-button--circle {\n  border-radius: var(--b-float-button-border-radius-circle);\n}\n\n/* ── Shape: square ── */\n.b-float-button--square {\n  border-radius: var(--b-float-button-border-radius-square);\n  height: auto;\n  min-height: var(--b-float-button-size);\n  padding: 0.5rem;\n}\n\n/* ── Type: default ── */\n.b-float-button--default {\n  background-color: var(--b-float-button-bg);\n  color: var(--b-float-button-color);\n\n  &:not(.b-float-button--disabled):hover {\n    background-color: var(--b-float-button-bg-hover);\n  }\n}\n\n/* ── Type: primary ── */\n.b-float-button--primary {\n  background-color: var(--b-float-button-primary-bg);\n  color: var(--b-float-button-primary-color);\n\n  &:not(.b-float-button--disabled):hover {\n    background-color: var(--b-float-button-primary-bg-hover);\n  }\n}\n\n/* ── Disabled state ── */\n.b-float-button--disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ── Focus visible ring ── */\n.b-float-button:focus-visible {\n  outline: 2px solid var(--b-float-button-primary-bg);\n}\n\n/* ─────────────────────────────────────────────\n   Body (icon + description wrapper)\n   ───────────────────────────────────────────── */\n.b-float-button__body {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.125rem;\n}\n\n/* ─────────────────────────────────────────────\n   Icon\n   ───────────────────────────────────────────── */\n.b-float-button__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--b-float-button-icon-size);\n  line-height: 1;\n}\n\n/* ─────────────────────────────────────────────\n   Description\n   ───────────────────────────────────────────── */\n.b-float-button__description {\n  font-size: var(--b-float-button-description-font-size);\n  line-height: 1.2;\n  text-align: center;\n  white-space: nowrap;\n}\n\n/* ─────────────────────────────────────────────\n   Tooltip overlay\n   ───────────────────────────────────────────── */\n.b-float-button__tooltip {\n  position: absolute;\n  right: calc(100% + 0.75rem);\n  top: 50%;\n  transform: translateX(-50%) scale(0.95);\n  white-space: nowrap;\n  background: var(--b-float-button-tooltip-bg);\n  color: var(--b-float-button-tooltip-color);\n  font-size: 0.875rem;\n  padding: 0.25rem 0.5rem;\n  border-radius: 0.375rem;\n  pointer-events: none;\n  opacity: 0;\n  transition:\n    opacity var(--b-float-button-transition-duration) ease,\n    transform var(--b-float-button-transition-duration) ease;\n\n  /* Arrow */\n  &::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 100%;\n    transform: translateY(-50%);\n    border: 5px solid transparent;\n    border-left-color: var(--b-float-button-tooltip-bg);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Badge\n   ───────────────────────────────────────────── */\n.b-float-button__badge {\n  position: absolute;\n  top: -4px;\n  right: -4px;\n  z-index: 1;\n  background: var(--b-float-button-badge-bg);\n  color: var(--b-float-button-badge-color);\n  font-size: var(--b-float-button-badge-font-size);\n  line-height: 1;\n  border-radius: 10px;\n  padding: 2px 5px;\n  min-width: 1.25rem;\n  text-align: center;\n  box-shadow: 0 0 0 2px var(--b-float-button-bg);\n}\n\n.b-float-button__badge--dot {\n  width: 8px;\n  height: 8px;\n  min-width: 0;\n  padding: 0;\n  border-radius: 50%;\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-float-button,\n  .b-float-button__tooltip {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2EA,IAAM,IAAO,GAiBP,KAAU,MAAiC,EAAA,SAAS,GACpD,KAAW,MAAkC,EAAA,UAAU,GAEvD,IAAa,QAAe;AAC3B,SAAA,SACD,GAAA,MAAM,IACV,QAAO,EAAA,MAAM;IACb,EAEI,IAAe,QAAe,EAAA,OAAO,OAAO,GAAM,EAElD,IAAgB,QAAe,EAAA,OAAO,iBAAiB,GAAG,EAE1D,IAAoB,QAAe;GACvC,IAAM,IAAQ,EAAW;AACrB,aAAU,KAAA,KACV,QAAU,KAAK,CAAC,EAAA,OAAO,UAC3B,QAAO,IAAQ,EAAc,QAAQ,GAAG,EAAc,MAAM,KAAK,OAAO,EAAM;IAC9E,EAEI,IAAY,QACT,EAAa,SAAS,EAAkB,UAAU,KAAA,EACzD;EAEF,SAAS,EAAY,GAAmB;AAClC,KAAA,YACJ,EAAK,SAAS,EAAM;;EAGtB,IAAM,IAAU,QAAgB,EAAA,OAAO,MAAM,SAAU;yBAIrD,EAwEY,EAvEL,EAAA,MAAO,EAAA;GACX,MAAM,EAAA;GACN,QAAQ,EAAA,OAAO,EAAA,SAAS,KAAA;GACxB,MAAO,EAAA,OAAkB,KAAA,IAAX,EAAA;GACd,UAAQ,CAAG,EAAA,QAAQ,EAAA,WAAQ,KAAU,KAAA;GACrC,iBAAe,EAAA,QAAQ,EAAA,WAAQ,SAAY,KAAA;GAC3C,cAAY,EAAA,aAAa,EAAA;GACzB,OAAO,EAAA;GACP,OAAK,EAAA,CAAA,kBAAA;8BAAsE,EAAO,SAAA;8BAA8C,EAAO,SAAA;+BAA+C,EAAM,UAAA;+BAAgD,EAAM,UAAA;gCAAiD,EAAA;;GAUnS,SAAO;;oBAcD;IAVC,EAAA,SAAA,GAAA,EADR,EAWO,QAAA;;KATL,OAAK,EAAA,CAAC,yBAAuB;oCACmB,EAAA;uCAAuD,EAAA;;KAItG,OAAK,EAAE,EAAA,OAAO,QAAK,EAAA,iBAAsB,EAAA,MAAM,OAAK,GAAK,KAAA,EAAS;KACnE,eAAY;QAEK,EAAA,QAAkC,EAAA,IAAA,GAAA,IAAlC,GAAA,EAAjB,EAAiE,GAAA,EAAA,KAAA,GAAA,EAAA,CAAA,EAAA,EAA/B,EAAA,MAAiB,EAAA,EAAA,CAAA,EAAA,GAAA,EAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;IAIrD,EA0BO,QA1BP,GA0BO,CAxBL,EAeO,QAfP,GAeO,CAdL,EAaO,EAAA,QAAA,QAAA,EAAA,QAAA,CAZQ,EAAA,QAAA,GAAA,EAAb,EAA4C,GAAA;;KAAxB,MAAM,EAAA;KAAM,MAAK;mCAErC,EASM,OATN,GASM,CAAA,GAAA,AAAA,EAAA,OAAA,CADJ,EAAgD,QAAA,EAA1C,GAAE,uCAAqC,EAAA,MAAA,GAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,GAO1CA,EAAAA,OAAO,eAAe,EAAA,gBAAgB,EAAO,SAAA,IAAA,GAAA,EADtD,EAKO,QALP,GAKO,CADL,EAAiD,EAAA,QAAA,eAAA,EAAA,QAAA,CAAA,EAAA,EAArB,EAAA,YAAW,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA;IAMnCA,EAAAA,OAAO,WAAY,EAAA,WAAO,CAAK,EAAA,aAAA,GAAA,EADvC,EAMO,QANP,GAMO,CADL,EAAyC,EAAA,QAAA,WAAA,EAAA,QAAA,CAAA,EAAA,EAAjB,EAAA,QAAO,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA"}

package/dist/design-system94.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-system92.js";
+/* empty css                */
+//#region src/components/BFloatButton/BFloatButton.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-system94.js.map

package/dist/design-system94.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system94.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-system94.js","names":[],"sources":["../src/components/BFloatButton/BFloatButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport BIcon from '@/components/BIcon/BIcon.vue';\nimport { type BIconName } from '@/components/BIcon/BIconEnum.ts';\nimport { computed } from 'vue';\nimport type { BFloatButtonBadgeProps } from './types.ts';\nimport { BFloatButtonShape, BFloatButtonType } from './types.ts';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  icon,\n  description,\n  tooltip,\n  type = BFloatButtonType.Default,\n  shape = BFloatButtonShape.Circle,\n  href,\n  target = '_blank',\n  htmlType = 'button',\n  badge,\n  disabled = false,\n  ariaLabel,\n} = defineProps<{\n  /**\n   * Icon name for the float button.\n   * @example 'arrow-up', 'plus', 'question'\n   */\n  icon?: `${BIconName}`;\n  /**\n   * Description text shown below the icon (square shape only).\n   */\n  description?: string;\n  /**\n   * Tooltip text shown on hover.\n   */\n  tooltip?: string;\n  /**\n   * Visual type of the button.\n   * @default 'default'\n   */\n  type?: `${BFloatButtonType}`;\n  /**\n   * Shape of the button.\n   * @default 'circle'\n   */\n  shape?: `${BFloatButtonShape}`;\n  /**\n   * When set, renders as an anchor element with this href.\n   */\n  href?: string;\n  /**\n   * Link target attribute (only used with href).\n   * @default '_blank'\n   */\n  target?: string;\n  /**\n   * HTML button type attribute (only used when not href).\n   * @default 'button'\n   */\n  htmlType?: 'button' | 'submit' | 'reset';\n  /**\n   * Badge configuration to display on the button.\n   */\n  badge?: BFloatButtonBadgeProps;\n  /**\n   * Whether the button is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Accessible label for the button (important when no visible text).\n   */\n  ariaLabel?: string;\n}>();\n\nconst emit = defineEmits<{\n  /** Emitted when the button is clicked. */\n  (e: 'click', event: MouseEvent): void;\n}>();\n\ndefineSlots<{\n  /** Custom icon content. */\n  icon?(): unknown;\n  /** Description content (square shape only). */\n  description?(): unknown;\n  /** Tooltip content. */\n  tooltip?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Computed helpers\n// ─────────────────────────────────────────────\nconst isType = (value: `${BFloatButtonType}`) => type === value;\nconst isShape = (value: `${BFloatButtonShape}`) => shape === value;\n\nconst badgeCount = computed(() => {\n  if (!badge) return undefined;\n  if (badge.dot) return undefined;\n  return badge.count;\n});\n\nconst showBadgeDot = computed(() => badge?.dot ?? false);\n\nconst badgeOverflow = computed(() => badge?.overflowCount ?? 99);\n\nconst badgeDisplayCount = computed(() => {\n  const count = badgeCount.value;\n  if (count === undefined) return undefined;\n  if (count === 0 && !badge?.showZero) return undefined;\n  return count > badgeOverflow.value ? `${badgeOverflow.value}+` : String(count);\n});\n\nconst showBadge = computed(() => {\n  return showBadgeDot.value || badgeDisplayCount.value !== undefined;\n});\n\nfunction handleClick(event: MouseEvent) {\n  if (disabled) return;\n  emit('click', event);\n}\n\nconst rootTag = computed(() => (href ? 'a' : 'button'));\n</script>\n\n<template>\n  <component\n    :is=\"rootTag\"\n    :href=\"href\"\n    :target=\"href ? target : undefined\"\n    :type=\"!href ? htmlType : undefined\"\n    :disabled=\"!href && disabled ? true : undefined\"\n    :aria-disabled=\"href && disabled ? 'true' : undefined\"\n    :aria-label=\"ariaLabel ?? tooltip\"\n    :title=\"tooltip\"\n    :class=\"[\n      'b-float-button',\n      {\n        'b-float-button--circle': isShape('circle'),\n        'b-float-button--square': isShape('square'),\n        'b-float-button--default': isType('default'),\n        'b-float-button--primary': isType('primary'),\n        'b-float-button--disabled': disabled,\n      },\n    ]\"\n    @click=\"handleClick\"\n  >\n    <!-- Badge -->\n    <span\n      v-if=\"showBadge\"\n      class=\"b-float-button__badge\"\n      :class=\"{\n        'b-float-button__badge--dot': showBadgeDot,\n        'b-float-button__badge--count': !showBadgeDot,\n      }\"\n      :style=\"badge?.color ? { backgroundColor: badge.color } : undefined\"\n      aria-hidden=\"true\"\n    >\n      <template v-if=\"!showBadgeDot\">{{ badgeDisplayCount }}</template>\n    </span>\n\n    <!-- Body -->\n    <span class=\"b-float-button__body\">\n      <!-- Icon -->\n      <span class=\"b-float-button__icon\" aria-hidden=\"true\">\n        <slot name=\"icon\">\n          <BIcon v-if=\"icon\" :icon=\"icon\" size=\"md\" />\n          <!-- Default plus icon when no icon prop or slot is provided -->\n          <svg\n            v-else\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      </span>\n\n      <!-- Description (square shape only) -->\n      <span\n        v-if=\"($slots.description || description) && isShape('square')\"\n        class=\"b-float-button__description\"\n      >\n        <slot name=\"description\">{{ description }}</slot>\n      </span>\n    </span>\n\n    <!-- Tooltip overlay -->\n    <span\n      v-if=\"$slots.tooltip || (tooltip && !ariaLabel)\"\n      class=\"b-float-button__tooltip\"\n      role=\"tooltip\"\n    >\n      <slot name=\"tooltip\">{{ tooltip }}</slot>\n    </span>\n  </component>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   scoped to .b-float-button — never on :root\n   ──────────────────────────────────────────── */\n.b-float-button {\n  /* Size tokens — AntD: floatButtonSize (40px) */\n  --b-float-button-size: 40px;\n  /* Icon size — AntD: floatButtonIconSize (21px) */\n  --b-float-button-icon-size: 1.3125rem;\n  /* Background — AntD: colorBgContainer */\n  --b-float-button-bg: #fff;\n  /* Primary background */\n  --b-float-button-primary-bg: oklch(55% 0.2 264);\n  /* Primary hover background */\n  --b-float-button-primary-bg-hover: oklch(62% 0.2 264);\n  /* Default hover background */\n  --b-float-button-bg-hover: oklch(96% 0 0);\n  /* Text / icon color — AntD: colorText */\n  --b-float-button-color: oklch(20% 0 0);\n  /* Primary text color */\n  --b-float-button-primary-color: #fff;\n  /* Border radius (circle: 50%, square: 8px) */\n  --b-float-button-border-radius-circle: 50%;\n  --b-float-button-border-radius-square: 0.5rem;\n  /* Shadow — AntD: boxShadowSecondary */\n  --b-float-button-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n    0 9px 28px 8px rgba(0, 0, 0, 0.05);\n  /* Bottom inset — AntD: floatButtonInsetBlockEnd (48px) */\n  --b-float-button-inset-block-end: 3rem;\n  /* Inline inset — AntD: floatButtonInsetInlineEnd (24px) */\n  --b-float-button-inset-inline-end: 1.5rem;\n  /* z-index — AntD: zIndexPopupBase (1000) */\n  --b-float-button-z-index: 1000;\n  /* Transition */\n  --b-float-button-transition-duration: 200ms;\n  /* Description font size (sm) */\n  --b-float-button-description-font-size: 0.75rem;\n  /* Badge */\n  --b-float-button-badge-bg: oklch(57% 0.22 25);\n  --b-float-button-badge-color: #fff;\n  --b-float-button-badge-font-size: 0.6875rem;\n  /* Tooltip */\n  --b-float-button-tooltip-bg: oklch(20% 0.02 260);\n  --b-float-button-tooltip-color: oklch(96% 0 0);\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-float-button,\n[data-prefers-color='dark'].b-float-button {\n  --b-float-button-bg: oklch(20% 0.02 260);\n  --b-float-button-bg-hover: oklch(28% 0.02 260);\n  --b-float-button-color: oklch(88% 0.01 260);\n  --b-float-button-primary-bg: oklch(50% 0.2 264);\n  --b-float-button-primary-bg-hover: oklch(57% 0.2 264);\n  --b-float-button-shadow:\n    0 6px 16px 0 oklch(0% 0 0 / 30%), 0 3px 6px -4px oklch(0% 0 0 / 40%),\n    0 9px 28px 8px oklch(0% 0 0 / 25%);\n  --b-float-button-tooltip-bg: oklch(30% 0.02 260);\n  --b-float-button-tooltip-color: oklch(88% 0.01 260);\n  --b-float-button-badge-bg: oklch(55% 0.22 25);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'].b-float-button {\n    --b-float-button-bg: oklch(20% 0.02 260);\n    --b-float-button-bg-hover: oklch(28% 0.02 260);\n    --b-float-button-color: oklch(88% 0.01 260);\n    --b-float-button-primary-bg: oklch(50% 0.2 264);\n    --b-float-button-primary-bg-hover: oklch(57% 0.2 264);\n    --b-float-button-shadow:\n      0 6px 16px 0 oklch(0% 0 0 / 30%), 0 3px 6px -4px oklch(0% 0 0 / 40%),\n      0 9px 28px 8px oklch(0% 0 0 / 25%);\n    --b-float-button-tooltip-bg: oklch(30% 0.02 260);\n    --b-float-button-tooltip-color: oklch(88% 0.01 260);\n    --b-float-button-badge-bg: oklch(55% 0.22 25);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Base button\n   ───────────────────────────────────────────── */\n.b-float-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  width: var(--b-float-button-size);\n  height: var(--b-float-button-size);\n  min-height: var(--b-float-button-size);\n  background-color: var(--b-float-button-bg);\n  color: var(--b-float-button-color);\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  box-shadow: var(--b-float-button-shadow);\n  text-decoration: none;\n  transition:\n    background-color var(--b-float-button-transition-duration) ease,\n    color var(--b-float-button-transition-duration) ease,\n    box-shadow var(--b-float-button-transition-duration) ease,\n    transform var(--b-float-button-transition-duration) ease;\n  outline-offset: 2px;\n\n  /* Tooltip hidden by default */\n  &:hover .b-float-button__tooltip {\n    opacity: 1;\n    pointer-events: auto;\n    transform: translateX(-50%) scale(1);\n  }\n}\n\n/* ── Shape: circle ── */\n.b-float-button--circle {\n  border-radius: var(--b-float-button-border-radius-circle);\n}\n\n/* ── Shape: square ── */\n.b-float-button--square {\n  border-radius: var(--b-float-button-border-radius-square);\n  height: auto;\n  min-height: var(--b-float-button-size);\n  padding: 0.5rem;\n}\n\n/* ── Type: default ── */\n.b-float-button--default {\n  background-color: var(--b-float-button-bg);\n  color: var(--b-float-button-color);\n\n  &:not(.b-float-button--disabled):hover {\n    background-color: var(--b-float-button-bg-hover);\n  }\n}\n\n/* ── Type: primary ── */\n.b-float-button--primary {\n  background-color: var(--b-float-button-primary-bg);\n  color: var(--b-float-button-primary-color);\n\n  &:not(.b-float-button--disabled):hover {\n    background-color: var(--b-float-button-primary-bg-hover);\n  }\n}\n\n/* ── Disabled state ── */\n.b-float-button--disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ── Focus visible ring ── */\n.b-float-button:focus-visible {\n  outline: 2px solid var(--b-float-button-primary-bg);\n}\n\n/* ─────────────────────────────────────────────\n   Body (icon + description wrapper)\n   ───────────────────────────────────────────── */\n.b-float-button__body {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.125rem;\n}\n\n/* ─────────────────────────────────────────────\n   Icon\n   ───────────────────────────────────────────── */\n.b-float-button__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--b-float-button-icon-size);\n  line-height: 1;\n}\n\n/* ─────────────────────────────────────────────\n   Description\n   ───────────────────────────────────────────── */\n.b-float-button__description {\n  font-size: var(--b-float-button-description-font-size);\n  line-height: 1.2;\n  text-align: center;\n  white-space: nowrap;\n}\n\n/* ─────────────────────────────────────────────\n   Tooltip overlay\n   ───────────────────────────────────────────── */\n.b-float-button__tooltip {\n  position: absolute;\n  right: calc(100% + 0.75rem);\n  top: 50%;\n  transform: translateX(-50%) scale(0.95);\n  white-space: nowrap;\n  background: var(--b-float-button-tooltip-bg);\n  color: var(--b-float-button-tooltip-color);\n  font-size: 0.875rem;\n  padding: 0.25rem 0.5rem;\n  border-radius: 0.375rem;\n  pointer-events: none;\n  opacity: 0;\n  transition:\n    opacity var(--b-float-button-transition-duration) ease,\n    transform var(--b-float-button-transition-duration) ease;\n\n  /* Arrow */\n  &::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 100%;\n    transform: translateY(-50%);\n    border: 5px solid transparent;\n    border-left-color: var(--b-float-button-tooltip-bg);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Badge\n   ───────────────────────────────────────────── */\n.b-float-button__badge {\n  position: absolute;\n  top: -4px;\n  right: -4px;\n  z-index: 1;\n  background: var(--b-float-button-badge-bg);\n  color: var(--b-float-button-badge-color);\n  font-size: var(--b-float-button-badge-font-size);\n  line-height: 1;\n  border-radius: 10px;\n  padding: 2px 5px;\n  min-width: 1.25rem;\n  text-align: center;\n  box-shadow: 0 0 0 2px var(--b-float-button-bg);\n}\n\n.b-float-button__badge--dot {\n  width: 8px;\n  height: 8px;\n  min-width: 0;\n  padding: 0;\n  border-radius: 50%;\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-float-button,\n  .b-float-button__tooltip {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system95.js

@@ -1,112 +1,69 @@
-import { useValidationForm as e } from "./design-system92.js";
-import { BFormContextKey as t } from "./design-system93.js";
-import { BFormLabelAlign as n, BFormLayout as r, BFormValidateTrigger as i } from "./design-system94.js";
-import { computed as a, createElementBlock as o, defineComponent as s, normalizeClass as c, openBlock as l, provide as u, ref as d, renderSlot as f } from "vue";
-//#region src/components/BForm/BForm.vue?vue&type=script&setup=true&lang.ts
-var p = [
-	"name",
-	"novalidate",
-	"aria-label"
-], m = /* @__PURE__ */ s({
-	__name: "BForm",
+import { BFloatButtonShape as e, BFloatButtonType as t } from "./design-system91.js";
+import n from "./design-system94.js";
+import { Transition as r, createBlock as i, createCommentVNode as a, createElementVNode as o, defineComponent as s, onBeforeUnmount as c, onMounted as l, openBlock as u, ref as d, renderSlot as f, unref as p, withCtx as m } from "vue";
+//#region src/components/BFloatButton/BFloatButtonBackTop.vue?vue&type=script&setup=true&lang.ts
+var h = /* @__PURE__ */ s({
+	__name: "BFloatButtonBackTop",
 	props: {
-		layout: { default: () => r.Horizontal },
-		labelAlign: { default: () => n.Left },
-		labelWidth: {},
-		colon: {
-			type: Boolean,
-			default: !0
-		},
-		disabled: {
-			type: Boolean,
-			default: !1
-		},
-		requiredMark: {
-			type: Boolean,
-			default: !0
-		},
-		name: {},
-		model: {},
-		scrollToFirstError: {
-			type: Boolean,
-			default: !1
-		},
-		validateTrigger: { default: () => i.Change },
-		noHtml5Validate: {
-			type: Boolean,
-			default: !1
-		}
+		duration: { default: 450 },
+		target: { type: Function },
+		visibilityHeight: { default: 400 },
+		shape: { default: () => e.Circle },
+		type: { default: () => t.Default }
 	},
-	emits: ["finish", "finishFailed"],
-	setup(n, { expose: r, emit: i }) {
-		let s = i, m = d(null), { fields: h, validateAll: g, resetAll: _, isValid: v } = e();
-		u(t, a(() => ({
-			layout: n.layout,
-			labelAlign: n.labelAlign,
-			labelWidth: n.labelWidth,
-			colon: n.colon,
-			disabled: n.disabled,
-			requiredMark: n.requiredMark,
-			validateTrigger: n.validateTrigger,
-			model: n.model
-		})).value);
-		let y = () => g(), b = () => {
-			let e = [], t = {};
-			for (let [r, i] of Object.entries(h)) t[r] = n.model?.[r], i.value.isValid || e.push({
-				name: r,
-				errors: i.value.errors
-			});
-			return {
-				values: t,
-				errorFields: e
-			};
-		}, x = (e) => {
-			if (!e) {
-				_();
-				return;
-			}
-			for (let t of e) h[t] && h[t].value.reset();
-		}, S = (e, t) => {
-			let n = m.value?.querySelector(`[data-form-field="${e}"]`);
-			n && n.scrollIntoView(t ?? {
-				behavior: "smooth",
-				block: "center"
-			});
-		}, C = (e) => {
-			e.preventDefault();
-			let t = y(), r = b();
-			if (t) s("finish", r.values);
-			else if (s("finishFailed", r), n.scrollToFirstError && r.errorFields.length > 0) {
-				let e = typeof n.scrollToFirstError == "object" ? n.scrollToFirstError : {
-					behavior: "smooth",
-					block: "center"
-				};
-				S(r.errorFields[0].name, e);
+	emits: ["click"],
+	setup(e, { emit: t }) {
+		let s = t, h = d(!1), g = window;
+		function _() {
+			return g === window ? window.scrollY : g.scrollTop;
+		}
+		function v() {
+			h.value = _() > e.visibilityHeight;
+		}
+		function y(e) {
+			return e < .5 ? 4 * e * e * e : 1 - (-2 * e + 2) ** 3 / 2;
+		}
+		function b() {
+			let t = performance.now(), n = _();
+			function r(i) {
+				let a = i - t, o = Math.min(a / e.duration, 1), s = n * (1 - y(o));
+				g === window ? window.scrollTo(0, s) : g.scrollTop = s, o < 1 && requestAnimationFrame(r);
 			}
-		}, w = a(() => [
-			"b-form",
-			`b-form--${n.layout}`,
-			`b-form--label-${n.labelAlign}`,
-			{ "b-form--disabled": n.disabled }
-		]);
-		return r({
-			validate: y,
-			resetFields: x,
-			scrollToField: S,
-			isValid: v
-		}), (e, t) => (l(), o("form", {
-			ref_key: "formEl",
-			ref: m,
-			class: c(w.value),
-			name: n.name,
-			novalidate: n.noHtml5Validate,
-			role: "form",
-			"aria-label": n.name,
-			onSubmit: C
-		}, [f(e.$slots, "default", {}, void 0, !0)], 42, p));
+			requestAnimationFrame(r);
+		}
+		function x(e) {
+			b(), s("click", e);
+		}
+		l(() => {
+			g = e.target?.() ?? window, g.addEventListener("scroll", v, { passive: !0 }), v();
+		}), c(() => {
+			g.removeEventListener("scroll", v);
+		});
+		let S = h;
+		return (t, s) => (u(), i(r, { name: "b-float-button-backtop" }, {
+			default: m(() => [p(S) ? (u(), i(n, {
+				key: 0,
+				shape: e.shape,
+				type: e.type,
+				"aria-label": "Back to top",
+				class: "b-float-button-backtop",
+				onClick: x
+			}, {
+				icon: m(() => [f(t.$slots, "default", {}, () => [s[0] ||= o("svg", {
+					width: "1em",
+					height: "1em",
+					viewBox: "0 0 24 24",
+					fill: "currentColor",
+					"aria-hidden": "true",
+					focusable: "false"
+				}, [o("path", { d: "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" })], -1)])]),
+				_: 3
+			}, 8, ["shape", "type"])) : a("", !0)]),
+			_: 3
+		}));
 	}
 });
 //#endregion
-export { m as default };
+export { h as default };
 
 //# sourceMappingURL=design-system95.js.map

package/dist/design-system95.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system95.js","names":[],"sources":["../src/components/BForm/BForm.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nconst _hoisted_1 = [\"name\", \"novalidate\", \"aria-label\"]\n\nimport { useValidationForm } from '@/composables/useValidation.ts';\nimport { computed, provide, ref } from 'vue';\nimport { BFormContextKey } from './context.ts';\nimport {\n  BFormLayout,\n  BFormLabelAlign,\n  BFormRequiredMark,\n  BFormValidateTrigger,\n  type BFormFieldError,\n  type BFormItemContext,\n  type BFormValidateResult,\n} from './types.ts';\n\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BForm',\n  props: {\n    layout: { default: () => (BFormLayout.Horizontal) },\n    labelAlign: { default: () => (BFormLabelAlign.Left) },\n    labelWidth: {},\n    colon: { type: Boolean, default: true },\n    disabled: { type: Boolean, default: false },\n    requiredMark: { type: Boolean, default: true },\n    name: {},\n    model: {},\n    scrollToFirstError: { type: Boolean, default: false },\n    validateTrigger: { default: () => (BFormValidateTrigger.Change) },\n    noHtml5Validate: { type: Boolean, default: false }\n  },\n  emits: [\"finish\", \"finishFailed\"],\n  setup(__props: any, { expose: __expose, emit: __emit }) {\n\n\n\nconst emit = __emit;\n\nconst formEl = ref<HTMLFormElement | null>(null);\n\nconst { fields, validateAll, resetAll, isValid } = useValidationForm();\n\nconst formContext = computed<BFormItemContext>(() => ({\n  layout: __props.layout,\n  labelAlign: __props.labelAlign,\n  labelWidth: __props.labelWidth,\n  colon: __props.colon,\n  disabled: __props.disabled,\n  requiredMark: __props.requiredMark,\n  validateTrigger: __props.validateTrigger,\n  model: __props.model,\n}));\n\nprovide(BFormContextKey, formContext.value);\n\nconst validate = (): boolean => {\n  return validateAll();\n};\n\nconst buildResult = (): BFormValidateResult => {\n  const errorFields: BFormFieldError[] = [];\n  const values: Record<string, unknown> = {};\n\n  for (const [key, fieldState] of Object.entries(fields)) {\n    values[key] = __props.model?.[key];\n    if (!fieldState.value.isValid) {\n      errorFields.push({ name: key, errors: fieldState.value.errors });\n    }\n  }\n\n  return { values, errorFields };\n};\n\nconst resetFields = (names?: string[]) => {\n  if (!names) {\n    resetAll();\n    return;\n  }\n  for (const fieldName of names) {\n    if (fields[fieldName]) {\n      fields[fieldName].value.reset();\n    }\n  }\n};\n\nconst scrollToField = (fieldName: string, options?: ScrollIntoViewOptions) => {\n  const el = formEl.value?.querySelector(`[data-form-field=\"${fieldName}\"]`);\n  if (el) {\n    el.scrollIntoView(options ?? { behavior: 'smooth', block: 'center' });\n  }\n};\n\nconst handleSubmit = (e: Event) => {\n  e.preventDefault();\n  const allValid = validate();\n  const result = buildResult();\n\n  if (allValid) {\n    emit('finish', result.values);\n  } else {\n    emit('finishFailed', result);\n    if (__props.scrollToFirstError && result.errorFields.length > 0) {\n      const opts =\n        typeof __props.scrollToFirstError === 'object' ? __props.scrollToFirstError : { behavior: 'smooth' as const, block: 'center' as const };\n      scrollToField(result.errorFields[0].name, opts);\n    }\n  }\n};\n\nconst formClasses = computed(() => [\n  'b-form',\n  `b-form--${__props.layout}`,\n  `b-form--label-${__props.labelAlign}`,\n  {\n    'b-form--disabled': __props.disabled,\n  },\n]);\n\n__expose({\n  validate,\n  resetFields,\n  scrollToField,\n  isValid,\n});\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"form\", {\n    ref_key: \"formEl\",\n    ref: formEl,\n    class: _normalizeClass(formClasses.value),\n    name: __props.name,\n    novalidate: __props.noHtml5Validate,\n    role: \"form\",\n    \"aria-label\": __props.name,\n    onSubmit: handleSubmit\n  }, [\n    _renderSlot(_ctx.$slots, \"default\", {}, undefined, true)\n  ], 42, _hoisted_1))\n}\n}\n\n})"],"mappings":";;;;;AAGA,IAAM,IAAa;CAAC;CAAQ;CAAc;CAAa,EAgBvD,IAA4B,kBAAiB;CAC3C,QAAQ;CACR,OAAO;EACL,QAAQ,EAAE,eAAgB,EAAY,YAAa;EACnD,YAAY,EAAE,eAAgB,EAAgB,MAAO;EACrD,YAAY,EAAE;EACd,OAAO;GAAE,MAAM;GAAS,SAAS;GAAM;EACvC,UAAU;GAAE,MAAM;GAAS,SAAS;GAAO;EAC3C,cAAc;GAAE,MAAM;GAAS,SAAS;GAAM;EAC9C,MAAM,EAAE;EACR,OAAO,EAAE;EACT,oBAAoB;GAAE,MAAM;GAAS,SAAS;GAAO;EACrD,iBAAiB,EAAE,eAAgB,EAAqB,QAAS;EACjE,iBAAiB;GAAE,MAAM;GAAS,SAAS;GAAO;EACnD;CACD,OAAO,CAAC,UAAU,eAAe;CACjC,MAAM,GAAc,EAAE,QAAQ,GAAU,MAAM,KAAU;EAI1D,IAAM,IAAO,GAEP,IAAS,EAA4B,KAAK,EAE1C,EAAE,WAAQ,gBAAa,aAAU,eAAY,GAAmB;AAatE,IAAQ,GAXY,SAAkC;GACpD,QAAQ,EAAQ;GAChB,YAAY,EAAQ;GACpB,YAAY,EAAQ;GACpB,OAAO,EAAQ;GACf,UAAU,EAAQ;GAClB,cAAc,EAAQ;GACtB,iBAAiB,EAAQ;GACzB,OAAO,EAAQ;GAChB,EAAE,CAEkC,MAAM;EAE3C,IAAM,UACG,GAAa,EAGhB,UAAyC;GAC7C,IAAM,IAAiC,EAAE,EACnC,IAAkC,EAAE;AAE1C,QAAK,IAAM,CAAC,GAAK,MAAe,OAAO,QAAQ,EAAO,CAEpD,CADA,EAAO,KAAO,EAAQ,QAAQ,IACzB,EAAW,MAAM,WACpB,EAAY,KAAK;IAAE,MAAM;IAAK,QAAQ,EAAW,MAAM;IAAQ,CAAC;AAIpE,UAAO;IAAE;IAAQ;IAAa;KAG1B,KAAe,MAAqB;AACxC,OAAI,CAAC,GAAO;AACV,OAAU;AACV;;AAEF,QAAK,IAAM,KAAa,EACtB,CAAI,EAAO,MACT,EAAO,GAAW,MAAM,OAAO;KAK/B,KAAiB,GAAmB,MAAoC;GAC5E,IAAM,IAAK,EAAO,OAAO,cAAc,qBAAqB,EAAU,IAAI;AAC1E,GAAI,KACF,EAAG,eAAe,KAAW;IAAE,UAAU;IAAU,OAAO;IAAU,CAAC;KAInE,KAAgB,MAAa;AACjC,KAAE,gBAAgB;GAClB,IAAM,IAAW,GAAU,EACrB,IAAS,GAAa;AAE5B,OAAI,EACF,GAAK,UAAU,EAAO,OAAO;YAE7B,EAAK,gBAAgB,EAAO,EACxB,EAAQ,sBAAsB,EAAO,YAAY,SAAS,GAAG;IAC/D,IAAM,IACJ,OAAO,EAAQ,sBAAuB,WAAW,EAAQ,qBAAqB;KAAE,UAAU;KAAmB,OAAO;KAAmB;AACzI,MAAc,EAAO,YAAY,GAAG,MAAM,EAAK;;KAK/C,IAAc,QAAe;GACjC;GACA,WAAW,EAAQ;GACnB,iBAAiB,EAAQ;GACzB,EACE,oBAAoB,EAAQ,UAC7B;GACF,CAAC;AASF,SAPA,EAAS;GACP;GACA;GACA;GACA;GACD,CAAC,GAEM,GAAU,OACR,GAAY,EAAE,EAAoB,QAAQ;GAChD,SAAS;GACT,KAAK;GACL,OAAO,EAAgB,EAAY,MAAM;GACzC,MAAM,EAAQ;GACd,YAAY,EAAQ;GACpB,MAAM;GACN,cAAc,EAAQ;GACtB,UAAU;GACX,EAAE,CACD,EAAY,EAAK,QAAQ,WAAW,EAAE,EAAE,KAAA,GAAW,GAAK,CACzD,EAAE,IAAI,EAAW;;CAInB,CAAA"}
+{"version":3,"file":"design-system95.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":";;;;;;;;;;;;;;;EA0CA,IAAM,IAAO,GAaP,IAAU,EAAI,GAAM,EACtB,IAAwC;EAE5C,SAAS,IAAuB;AAE9B,UADI,MAAoB,SAAe,OAAO,UACtC,EAAgC;;EAG1C,SAAS,IAAW;AAClB,KAAQ,QAAQ,GAAc,GAAG,EAAA;;EAGnC,SAAS,EAAe,GAAmB;AACzC,UAAO,IAAI,KAAM,IAAI,IAAI,IAAI,IAAI,KAAa,KAAK,IAAI,MAAG,IAAK;;EAGjE,SAAS,IAAc;GACrB,IAAM,IAAY,YAAY,KAAK,EAC7B,IAAW,GAAc;GAE/B,SAAS,EAAK,GAAa;IACzB,IAAM,IAAU,IAAM,GAChB,IAAW,KAAK,IAAI,IAAU,EAAA,UAAU,EAAE,EAE1C,IAAS,KAAY,IADb,EAAe,EAAS;AAStC,IANI,MAAoB,SACtB,OAAO,SAAS,GAAG,EAAO,GAEzB,EAAgC,YAAY,GAG3C,IAAW,KACb,sBAAsB,EAAK;;AAI/B,yBAAsB,EAAK;;EAG7B,SAAS,EAAY,GAAmB;AAEtC,GADA,GAAa,EACb,EAAK,SAAS,EAAM;;AAStB,EANA,QAAgB;AAGd,GAFA,IAAkB,EAAA,UAAU,IAAI,QAChC,EAAgB,iBAAiB,UAAU,GAAU,EAAE,SAAS,IAAM,CAAC,EACvE,GAAU;IACV,EAEF,QAAsB;AACpB,KAAgB,oBAAoB,UAAU,EAAS;IACvD;EAEF,IAAM,IAAY;yBAIhB,EAyBa,GAAA,EAzBD,MAAK,0BAAwB,EAAA;oBAwBxB,CAtBP,EAAA,EAAS,IAAA,GAAA,EADjB,EAuBe,GAAA;;IArBZ,OAAO,EAAA;IACP,MAAM,EAAA;IACP,cAAW;IACX,OAAM;IACL,SAAO;;IAEG,MAAI,QAaN,CAZP,EAYO,EAAA,QAAA,WAAA,EAAA,QAAA,CAAA,AAAA,EAAA,OAVL,EASM,OAAA;KARJ,OAAM;KACN,QAAO;KACP,SAAQ;KACR,MAAK;KACL,eAAY;KACZ,WAAU;QAEV,EAAwE,QAAA,EAAlE,GAAE,+DAA6D,CAAA,CAAA,EAAA,GAAA,CAAA,CAAA,CAAA,CAAA"}