@gxp-dev/mod-ui 2.0.0 → 2.0.1

package/dist/definitions/elements/ComponentsElement.d.ts

@@ -1,187 +0,0 @@
-import { BaseElement } from '../shared/base';
-/**
- * Variants of the `components` element type. Each value here maps 1:1 to a
- * Vue file under `src/elements/components/` via the engine's registry.
- *
- * The v2 portal does not ship a `Definitions/CardElements/ComponentsElement.ts`
- * — these styles are inferred from `Mod/v2/CardElements/Components/*.vue`
- * (IconBadge, IconPicker).
- */
-export type ComponentsStyle = "icon-badge" | "icon-picker";
-/** Sizes accepted by IconBadge. Mirrors the Vue component's prop union. */
-export type ComponentsSize = "xs" | "sm" | "md" | "lg" | "xl" | string | number;
-export interface ComponentsElement extends BaseElement<`components.${ComponentsStyle}`> {
-    name?: string | null;
-    label?: string;
-    /** For `icon-badge`: icon identifier (FontAwesome / lucide name). */
-    icon?: string;
-    /** For `icon-badge`: size token or px value. */
-    size?: ComponentsSize;
-    /**
-     * For `icon-badge`: colour token. Matches the GxP palette
-     * (`primary`, `secondary`, `success`, `danger`, `warning`, `info`, ...).
-     */
-    color?: string;
-    /** For `icon-picker`: which icon library to pick from ("icons", "emoji", ...). */
-    iconLibrary?: string;
-    /** For `icon-picker`: pre-filter the available icons by style. */
-    iconStyle?: string;
-}
-export declare const ComponentsElementDefaults: {
-    readonly type: "components.icon-badge";
-    readonly size: "md";
-    readonly color: "primary";
-    readonly columns: 12;
-    readonly columnsSm: 12;
-    readonly columnsMd: 12;
-    readonly columnsLg: 12;
-    readonly columnsXl: 12;
-};
-export declare const ComponentsElementMetadata: {
-    readonly icon: "shapes";
-    readonly displayLabel: "Component";
-    readonly elementCategory: "components";
-    readonly description: "Reusable presentation components: icon badges and icon pickers.";
-};
-export declare const ComponentsElementEditConfig: {
-    readonly label: {
-        readonly type: "input.text";
-        readonly defaultValue: "";
-        readonly label: "Label";
-        readonly columnsMd: 6;
-        readonly columns: 12;
-        readonly section: "configuration";
-    };
-    readonly name: {
-        readonly type: "picker.data-model";
-        readonly defaultValue: "";
-        readonly label: "Name";
-        readonly columns: 12;
-        readonly section: "advanced";
-    };
-    readonly style: {
-        readonly type: "option-select.select";
-        readonly defaultValue: "icon-badge";
-        readonly label: "Component Style";
-        readonly columns: 12;
-        readonly section: "layout";
-        readonly selectOptions: readonly [{
-            readonly label: "Icon Badge";
-            readonly value: "icon-badge";
-        }, {
-            readonly label: "Icon Picker";
-            readonly value: "icon-picker";
-        }];
-    };
-    readonly icon: {
-        readonly type: "picker.icon";
-        readonly label: "Icon";
-        readonly columns: 12;
-        readonly section: "configuration";
-        readonly conditionParams: [{
-            readonly name: "style";
-            readonly logic: "==";
-            readonly value: "icon-badge";
-        }];
-    };
-    readonly size: {
-        readonly type: "option-select.select";
-        readonly defaultValue: "md";
-        readonly label: "Size";
-        readonly columns: 6;
-        readonly section: "layout";
-        readonly selectOptions: readonly [{
-            readonly label: "XS";
-            readonly value: "xs";
-        }, {
-            readonly label: "Small";
-            readonly value: "sm";
-        }, {
-            readonly label: "Medium";
-            readonly value: "md";
-        }, {
-            readonly label: "Large";
-            readonly value: "lg";
-        }, {
-            readonly label: "XL";
-            readonly value: "xl";
-        }];
-        readonly conditionParams: [{
-            readonly name: "style";
-            readonly logic: "==";
-            readonly value: "icon-badge";
-        }];
-    };
-    readonly color: {
-        readonly type: "option-select.select";
-        readonly defaultValue: "primary";
-        readonly label: "Color";
-        readonly columns: 6;
-        readonly section: "layout";
-        readonly selectOptions: readonly [{
-            readonly label: "Primary";
-            readonly value: "primary";
-        }, {
-            readonly label: "Secondary";
-            readonly value: "secondary";
-        }, {
-            readonly label: "Success";
-            readonly value: "success";
-        }, {
-            readonly label: "Danger";
-            readonly value: "danger";
-        }, {
-            readonly label: "Warning";
-            readonly value: "warning";
-        }, {
-            readonly label: "Info";
-            readonly value: "info";
-        }, {
-            readonly label: "Light";
-            readonly value: "light";
-        }, {
-            readonly label: "Dark";
-            readonly value: "dark";
-        }];
-        readonly conditionParams: [{
-            readonly name: "style";
-            readonly logic: "==";
-            readonly value: "icon-badge";
-        }];
-    };
-    readonly iconLibrary: {
-        readonly type: "option-select.select";
-        readonly defaultValue: "icons";
-        readonly label: "Icon Library";
-        readonly columns: 6;
-        readonly section: "configuration";
-        readonly selectOptions: readonly [{
-            readonly label: "Icons";
-            readonly value: "icons";
-        }, {
-            readonly label: "Emoji";
-            readonly value: "emoji";
-        }];
-        readonly conditionParams: [{
-            readonly name: "style";
-            readonly logic: "==";
-            readonly value: "icon-picker";
-        }];
-    };
-    readonly iconStyle: {
-        readonly type: "input.text";
-        readonly label: "Icon Style Filter";
-        readonly columns: 6;
-        readonly section: "configuration";
-        readonly conditionParams: [{
-            readonly name: "style";
-            readonly logic: "==";
-            readonly value: "icon-picker";
-        }];
-    };
-};
-export declare const ComponentsStyleMetadataMap: Partial<Record<ComponentsStyle, {
-    displayLabel: string;
-    description: string;
-}>>;
-//# sourceMappingURL=ComponentsElement.d.ts.map

package/dist/definitions/elements/ComponentsElement.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ComponentsElement.d.ts","sourceRoot":"","sources":["../../../src/definitions/elements/ComponentsElement.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EAGZ,MAAM,2BAA2B,CAAA;AAElC;;;;;;;GAOG;AACH,MAAM,MAAM,eAAe,GAAG,YAAY,GAAG,aAAa,CAAA;AAE1D,2EAA2E;AAC3E,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;AAE/E,MAAM,WAAW,iBACf,SAAQ,WAAW,CAAC,cAAc,eAAe,EAAE,CAAC;IACpD,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,gDAAgD;IAChD,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kFAAkF;IAClF,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kEAAkE;IAClE,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,yBAAyB;;;;;;;;;CASS,CAAA;AAE/C,eAAO,MAAM,yBAAyB;;;;;CAMF,CAAA;AAEpC,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsFT,CAAA;AAE/B,eAAO,MAAM,0BAA0B,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC,CAGtH,CAAA"}

package/dist/definitions/elements/ComponentsElement.js

@@ -1,111 +0,0 @@
-const e = {
-  type: "components.icon-badge",
-  size: "md",
-  color: "primary",
-  columns: 12,
-  columnsSm: 12,
-  columnsMd: 12,
-  columnsLg: 12,
-  columnsXl: 12
-}, l = {
-  icon: "shapes",
-  displayLabel: "Component",
-  elementCategory: "components",
-  description: "Reusable presentation components: icon badges and icon pickers."
-}, a = {
-  label: {
-    type: "input.text",
-    defaultValue: "",
-    label: "Label",
-    columnsMd: 6,
-    columns: 12,
-    section: "configuration"
-  },
-  name: {
-    type: "picker.data-model",
-    defaultValue: "",
-    label: "Name",
-    columns: 12,
-    section: "advanced"
-  },
-  style: {
-    type: "option-select.select",
-    defaultValue: "icon-badge",
-    label: "Component Style",
-    columns: 12,
-    section: "layout",
-    selectOptions: [
-      { label: "Icon Badge", value: "icon-badge" },
-      { label: "Icon Picker", value: "icon-picker" }
-    ]
-  },
-  icon: {
-    type: "picker.icon",
-    label: "Icon",
-    columns: 12,
-    section: "configuration",
-    conditionParams: [{ name: "style", logic: "==", value: "icon-badge" }]
-  },
-  size: {
-    type: "option-select.select",
-    defaultValue: "md",
-    label: "Size",
-    columns: 6,
-    section: "layout",
-    selectOptions: [
-      { label: "XS", value: "xs" },
-      { label: "Small", value: "sm" },
-      { label: "Medium", value: "md" },
-      { label: "Large", value: "lg" },
-      { label: "XL", value: "xl" }
-    ],
-    conditionParams: [{ name: "style", logic: "==", value: "icon-badge" }]
-  },
-  color: {
-    type: "option-select.select",
-    defaultValue: "primary",
-    label: "Color",
-    columns: 6,
-    section: "layout",
-    selectOptions: [
-      { label: "Primary", value: "primary" },
-      { label: "Secondary", value: "secondary" },
-      { label: "Success", value: "success" },
-      { label: "Danger", value: "danger" },
-      { label: "Warning", value: "warning" },
-      { label: "Info", value: "info" },
-      { label: "Light", value: "light" },
-      { label: "Dark", value: "dark" }
-    ],
-    conditionParams: [{ name: "style", logic: "==", value: "icon-badge" }]
-  },
-  iconLibrary: {
-    type: "option-select.select",
-    defaultValue: "icons",
-    label: "Icon Library",
-    columns: 6,
-    section: "configuration",
-    selectOptions: [
-      { label: "Icons", value: "icons" },
-      { label: "Emoji", value: "emoji" }
-    ],
-    conditionParams: [{ name: "style", logic: "==", value: "icon-picker" }]
-  },
-  iconStyle: {
-    type: "input.text",
-    label: "Icon Style Filter",
-    columns: 6,
-    section: "configuration",
-    conditionParams: [{ name: "style", logic: "==", value: "icon-picker" }]
-  }
-}, o = {
-  "icon-badge": { displayLabel: "Icon Badge", description: "A coloured icon badge for status indicators or avatars." },
-  "icon-picker": { displayLabel: "Icon Picker", description: "A searchable picker that returns a chosen icon identifier." }
-};
-export {
-  e as ComponentsElementDefaults,
-  a as ComponentsElementEditConfig,
-  l as ComponentsElementMetadata,
-  o as ComponentsStyleMetadataMap
-};
-//# sourceMappingURL=ComponentsElement.js.map

package/dist/definitions/elements/ComponentsElement.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ComponentsElement.js","sources":["../../../src/definitions/elements/ComponentsElement.ts"],"sourcesContent":["import type {\n  BaseElement,\n  EditConfig,\n  ElementMetadata,\n} from \"@/definitions/shared/base\"\n\n/**\n * Variants of the `components` element type. Each value here maps 1:1 to a\n * Vue file under `src/elements/components/` via the engine's registry.\n *\n * The v2 portal does not ship a `Definitions/CardElements/ComponentsElement.ts`\n * — these styles are inferred from `Mod/v2/CardElements/Components/*.vue`\n * (IconBadge, IconPicker).\n */\nexport type ComponentsStyle = \"icon-badge\" | \"icon-picker\"\n\n/** Sizes accepted by IconBadge. Mirrors the Vue component's prop union. */\nexport type ComponentsSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | string | number\n\nexport interface ComponentsElement\n  extends BaseElement<`components.${ComponentsStyle}`> {\n  name?: string | null\n  label?: string\n  /** For `icon-badge`: icon identifier (FontAwesome / lucide name). */\n  icon?: string\n  /** For `icon-badge`: size token or px value. */\n  size?: ComponentsSize\n  /**\n   * For `icon-badge`: colour token. Matches the GxP palette\n   * (`primary`, `secondary`, `success`, `danger`, `warning`, `info`, ...).\n   */\n  color?: string\n  /** For `icon-picker`: which icon library to pick from (\"icons\", \"emoji\", ...). */\n  iconLibrary?: string\n  /** For `icon-picker`: pre-filter the available icons by style. */\n  iconStyle?: string\n}\n\nexport const ComponentsElementDefaults = {\n  type: \"components.icon-badge\",\n  size: \"md\",\n  color: \"primary\",\n  columns: 12,\n  columnsSm: 12,\n  columnsMd: 12,\n  columnsLg: 12,\n  columnsXl: 12,\n} as const satisfies Partial<ComponentsElement>\n\nexport const ComponentsElementMetadata = {\n  icon: \"shapes\",\n  displayLabel: \"Component\",\n  elementCategory: \"components\",\n  description:\n    \"Reusable presentation components: icon badges and icon pickers.\",\n} as const satisfies ElementMetadata\n\nexport const ComponentsElementEditConfig = {\n  label: {\n    type: \"input.text\",\n    defaultValue: \"\",\n    label: \"Label\",\n    columnsMd: 6,\n    columns: 12,\n    section: \"configuration\",\n  },\n  name: {\n    type: \"picker.data-model\",\n    defaultValue: \"\",\n    label: \"Name\",\n    columns: 12,\n    section: \"advanced\",\n  },\n  style: {\n    type: \"option-select.select\",\n    defaultValue: \"icon-badge\",\n    label: \"Component Style\",\n    columns: 12,\n    section: \"layout\",\n    selectOptions: [\n      { label: \"Icon Badge\", value: \"icon-badge\" },\n      { label: \"Icon Picker\", value: \"icon-picker\" },\n    ],\n  },\n  icon: {\n    type: \"picker.icon\",\n    label: \"Icon\",\n    columns: 12,\n    section: \"configuration\",\n    conditionParams: [{ name: \"style\", logic: \"==\", value: \"icon-badge\" }],\n  },\n  size: {\n    type: \"option-select.select\",\n    defaultValue: \"md\",\n    label: \"Size\",\n    columns: 6,\n    section: \"layout\",\n    selectOptions: [\n      { label: \"XS\", value: \"xs\" },\n      { label: \"Small\", value: \"sm\" },\n      { label: \"Medium\", value: \"md\" },\n      { label: \"Large\", value: \"lg\" },\n      { label: \"XL\", value: \"xl\" },\n    ],\n    conditionParams: [{ name: \"style\", logic: \"==\", value: \"icon-badge\" }],\n  },\n  color: {\n    type: \"option-select.select\",\n    defaultValue: \"primary\",\n    label: \"Color\",\n    columns: 6,\n    section: \"layout\",\n    selectOptions: [\n      { label: \"Primary\", value: \"primary\" },\n      { label: \"Secondary\", value: \"secondary\" },\n      { label: \"Success\", value: \"success\" },\n      { label: \"Danger\", value: \"danger\" },\n      { label: \"Warning\", value: \"warning\" },\n      { label: \"Info\", value: \"info\" },\n      { label: \"Light\", value: \"light\" },\n      { label: \"Dark\", value: \"dark\" },\n    ],\n    conditionParams: [{ name: \"style\", logic: \"==\", value: \"icon-badge\" }],\n  },\n  iconLibrary: {\n    type: \"option-select.select\",\n    defaultValue: \"icons\",\n    label: \"Icon Library\",\n    columns: 6,\n    section: \"configuration\",\n    selectOptions: [\n      { label: \"Icons\", value: \"icons\" },\n      { label: \"Emoji\", value: \"emoji\" },\n    ],\n    conditionParams: [{ name: \"style\", logic: \"==\", value: \"icon-picker\" }],\n  },\n  iconStyle: {\n    type: \"input.text\",\n    label: \"Icon Style Filter\",\n    columns: 6,\n    section: \"configuration\",\n    conditionParams: [{ name: \"style\", logic: \"==\", value: \"icon-picker\" }],\n  },\n} as const satisfies EditConfig\n\nexport const ComponentsStyleMetadataMap: Partial<Record<ComponentsStyle, { displayLabel: string; description: string }>> = {\n  \"icon-badge\": { displayLabel: \"Icon Badge\", description: \"A coloured icon badge for status indicators or avatars.\" },\n  \"icon-picker\": { displayLabel: \"Icon Picker\", description: \"A searchable picker that returns a chosen icon identifier.\" },\n}\n"],"names":["ComponentsElementDefaults","ComponentsElementMetadata","ComponentsElementEditConfig","ComponentsStyleMetadataMap"],"mappings":"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"}

package/dist/styles/index.css

@@ -1 +0,0 @@
-.leaflet-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-container,.leaflet-pane>svg,.leaflet-pane>canvas,.leaflet-zoom-box,.leaflet-image-layer,.leaflet-layer{position:absolute;left:0;top:0}.leaflet-container{overflow:hidden}.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none}.leaflet-tile::selection{background:transparent}.leaflet-safari .leaflet-tile{image-rendering:-webkit-optimize-contrast}.leaflet-safari .leaflet-tile-container{width:1600px;height:1600px;-webkit-transform-origin:0 0}.leaflet-marker-icon,.leaflet-marker-shadow{display:block}.leaflet-container .leaflet-overlay-pane svg{max-width:none!important;max-height:none!important}.leaflet-container .leaflet-marker-pane img,.leaflet-container .leaflet-shadow-pane img,.leaflet-container .leaflet-tile-pane img,.leaflet-container img.leaflet-image-layer,.leaflet-container .leaflet-tile{max-width:none!important;max-height:none!important;width:auto;padding:0}.leaflet-container img.leaflet-tile{mix-blend-mode:plus-lighter}.leaflet-container.leaflet-touch-zoom{-ms-touch-action:pan-x pan-y;touch-action:pan-x pan-y}.leaflet-container.leaflet-touch-drag{-ms-touch-action:pinch-zoom;touch-action:none;touch-action:pinch-zoom}.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom{-ms-touch-action:none;touch-action:none}.leaflet-container{-webkit-tap-highlight-color:transparent}.leaflet-container a{-webkit-tap-highlight-color:rgba(51,181,229,.4)}.leaflet-tile{filter:inherit;visibility:hidden}.leaflet-tile-loaded{visibility:inherit}.leaflet-zoom-box{width:0;height:0;-moz-box-sizing:border-box;box-sizing:border-box;z-index:800}.leaflet-overlay-pane svg{-moz-user-select:none}.leaflet-pane{z-index:400}.leaflet-tile-pane{z-index:200}.leaflet-overlay-pane{z-index:400}.leaflet-shadow-pane{z-index:500}.leaflet-marker-pane{z-index:600}.leaflet-tooltip-pane{z-index:650}.leaflet-popup-pane{z-index:700}.leaflet-map-pane canvas{z-index:100}.leaflet-map-pane svg{z-index:200}.leaflet-vml-shape{width:1px;height:1px}.lvml{behavior:url(#default#VML);display:inline-block;position:absolute}.leaflet-control{position:relative;z-index:800;pointer-events:visiblePainted;pointer-events:auto}.leaflet-top,.leaflet-bottom{position:absolute;z-index:1000;pointer-events:none}.leaflet-top{top:0}.leaflet-right{right:0}.leaflet-bottom{bottom:0}.leaflet-left{left:0}.leaflet-control{float:left;clear:both}.leaflet-right .leaflet-control{float:right}.leaflet-top .leaflet-control{margin-top:10px}.leaflet-bottom .leaflet-control{margin-bottom:10px}.leaflet-left .leaflet-control{margin-left:10px}.leaflet-right .leaflet-control{margin-right:10px}.leaflet-fade-anim .leaflet-popup{opacity:0;-webkit-transition:opacity .2s linear;-moz-transition:opacity .2s linear;transition:opacity .2s linear}.leaflet-fade-anim .leaflet-map-pane .leaflet-popup{opacity:1}.leaflet-zoom-animated{-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0}svg.leaflet-zoom-animated{will-change:transform}.leaflet-zoom-anim .leaflet-zoom-animated{-webkit-transition:-webkit-transform .25s cubic-bezier(0,0,.25,1);-moz-transition:-moz-transform .25s cubic-bezier(0,0,.25,1);transition:transform .25s cubic-bezier(0,0,.25,1)}.leaflet-zoom-anim .leaflet-tile,.leaflet-pan-anim .leaflet-tile{-webkit-transition:none;-moz-transition:none;transition:none}.leaflet-zoom-anim .leaflet-zoom-hide{visibility:hidden}.leaflet-interactive{cursor:pointer}.leaflet-grab{cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.leaflet-crosshair,.leaflet-crosshair .leaflet-interactive{cursor:crosshair}.leaflet-popup-pane,.leaflet-control{cursor:auto}.leaflet-dragging .leaflet-grab,.leaflet-dragging .leaflet-grab .leaflet-interactive,.leaflet-dragging .leaflet-marker-draggable{cursor:move;cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-image-layer,.leaflet-pane>svg path,.leaflet-tile-container{pointer-events:none}.leaflet-marker-icon.leaflet-interactive,.leaflet-image-layer.leaflet-interactive,.leaflet-pane>svg path.leaflet-interactive,svg.leaflet-image-layer.leaflet-interactive path{pointer-events:visiblePainted;pointer-events:auto}.leaflet-container{background:#ddd;outline-offset:1px}.leaflet-container a{color:#0078a8}.leaflet-zoom-box{border:2px dotted #38f;background:#ffffff80}.leaflet-container{font-family:Helvetica Neue,Arial,Helvetica,sans-serif;font-size:12px;font-size:.75rem;line-height:1.5}.leaflet-bar{box-shadow:0 1px 5px #000000a6;border-radius:4px}.leaflet-bar a{background-color:#fff;border-bottom:1px solid #ccc;width:26px;height:26px;line-height:26px;display:block;text-align:center;text-decoration:none;color:#000}.leaflet-bar a,.leaflet-control-layers-toggle{background-position:50% 50%;background-repeat:no-repeat;display:block}.leaflet-bar a:hover,.leaflet-bar a:focus{background-color:#f4f4f4}.leaflet-bar a:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.leaflet-bar a:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom:none}.leaflet-bar a.leaflet-disabled{cursor:default;background-color:#f4f4f4;color:#bbb}.leaflet-touch .leaflet-bar a{width:30px;height:30px;line-height:30px}.leaflet-touch .leaflet-bar a:first-child{border-top-left-radius:2px;border-top-right-radius:2px}.leaflet-touch .leaflet-bar a:last-child{border-bottom-left-radius:2px;border-bottom-right-radius:2px}.leaflet-control-zoom-in,.leaflet-control-zoom-out{font:700 18px Lucida Console,Monaco,monospace;text-indent:1px}.leaflet-touch .leaflet-control-zoom-in,.leaflet-touch .leaflet-control-zoom-out{font-size:22px}.leaflet-control-layers{box-shadow:0 1px 5px #0006;background:#fff;border-radius:5px}.leaflet-control-layers-toggle{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAQAAAADQ4RFAAACf0lEQVR4AY1UM3gkARTePdvdoTxXKc+qTl3aU5U6b2Kbkz3Gtq3Zw6ziLGNPzrYx7946Tr6/ee/XeCQ4D3ykPtL5tHno4n0d/h3+xfuWHGLX81cn7r0iTNzjr7LrlxCqPtkbTQEHeqOrTy4Yyt3VCi/IOB0v7rVC7q45Q3Gr5K6jt+3Gl5nCoDD4MtO+j96Wu8atmhGqcNGHObuf8OM/x3AMx38+4Z2sPqzCxRFK2aF2e5Jol56XTLyggAMTL56XOMoS1W4pOyjUcGGQdZxU6qRh7B9Zp+PfpOFlqt0zyDZckPi1ttmIp03jX8gyJ8a/PG2yutpS/Vol7peZIbZcKBAEEheEIAgFbDkz5H6Zrkm2hVWGiXKiF4Ycw0RWKdtC16Q7qe3X4iOMxruonzegJzWaXFrU9utOSsLUmrc0YjeWYjCW4PDMADElpJSSQ0vQvA1Tm6/JlKnqFs1EGyZiFCqnRZTEJJJiKRYzVYzJck2Rm6P4iH+cmSY0YzimYa8l0EtTODFWhcMIMVqdsI2uiTvKmTisIDHJ3od5GILVhBCarCfVRmo4uTjkhrhzkiBV7SsaqS+TzrzM1qpGGUFt28pIySQHR6h7F6KSwGWm97ay+Z+ZqMcEjEWebE7wxCSQwpkhJqoZA5ivCdZDjJepuJ9IQjGGUmuXJdBFUygxVqVsxFsLMbDe8ZbDYVCGKxs+W080max1hFCarCfV+C1KATwcnvE9gRRuMP2prdbWGowm1KB1y+zwMMENkM755cJ2yPDtqhTI6ED1M/82yIDtC/4j4BijjeObflpO9I9MwXTCsSX8jWAFeHr05WoLTJ5G8IQVS/7vwR6ohirYM7f6HzYpogfS3R2OAAAAAElFTkSuQmCC);width:36px;height:36px}.leaflet-retina .leaflet-control-layers-toggle{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAQAAABvcdNgAAAEsklEQVR4AWL4TydIhpZK1kpWOlg0w3ZXP6D2soBtG42jeI6ZmQTHzAxiTbSJsYLjO9HhP+WOmcuhciVnmHVQcJnp7DFvScowZorad/+V/fVzMdMT2g9Cv9guXGv/7pYOrXh2U+RRR3dSd9JRx6bIFc/ekqHI29JC6pJ5ZEh1yWkhkbcFeSjxgx3L2m1cb1C7bceyxA+CNjT/Ifff+/kDk2u/w/33/IeCMOSaWZ4glosqT3DNnNZQ7Cs58/3Ce5HL78iZH/vKVIaYlqzfdLu8Vi7dnvUbEza5Idt36tquZFldl6N5Z/POLof0XLK61mZCmJSWjVF9tEjUluu74IUXvgttuVIHE7YxSkaYhJZam7yiM9Pv82JYfl9nptxZaxMJE4YSPty+vF0+Y2up9d3wwijfjZbabqm/3bZ9ecKHsiGmRflnn1MW4pjHf9oLufyn2z3y1D6n8g8TZhxyzipLNPnAUpsOiuWimg52psrTZYnOWYNDTMuWBWa0tJb4rgq1UvmutpaYEbZlwU3CLJm/ayYjHW5/h7xWLn9Hh1vepDkyf7dE7MtT5LR4e7yYpHrkhOUpEfssBLq2pPhAqoSWKUkk7EDqkmK6RrCEzqDjhNDWNE+XSMvkJRDWlZTmCW0l0PHQGRZY5t1L83kT0Y3l2SItk5JAWHl2dCOBm+fPu3fo5/3v61RMCO9Jx2EEYYhb0rmNQMX/vm7gqOEJLcXTGw3CAuRNeyaPWwjR8PRqKQ1PDA/dpv+on9Shox52WFnx0KY8onHayrJzm87i5h9xGw/tfkev0jGsQizqezUKjk12hBMKJ4kbCqGPVNXudyyrShovGw5CgxsRICxF6aRmSjlBnHRzg7Gx8fKqEubI2rahQYdR1YgDIRQO7JvQyD52hoIQx0mxa0ODtW2Iozn1le2iIRdzwWewedyZzewidueOGqlsn1MvcnQpuVwLGG3/IR1hIKxCjelIDZ8ldqWz25jWAsnldEnK0Zxro19TGVb2ffIZEsIO89EIEDvKMPrzmBOQcKQ+rroye6NgRRxqR4U8EAkz0CL6uSGOm6KQCdWjvjRiSP1BPalCRS5iQYiEIvxuBMJEWgzSoHADcVMuN7IuqqTeyUPq22qFimFtxDyBBJEwNyt6TM88blFHao/6tWWhuuOM4SAK4EI4QmFHA+SEyWlp4EQoJ13cYGzMu7yszEIBOm2rVmHUNqwAIQabISNMRstmdhNWcFLsSm+0tjJH1MdRxO5Nx0WDMhCtgD6OKgZeljJqJKc9po8juskR9XN0Y1lZ3mWjLR9JCO1jRDMd0fpYC2VnvjBSEFg7wBENc0R9HFlb0xvF1+TBEpF68d+DHR6IOWVv2BECtxo46hOFUBd/APU57WIoEwJhIi2CdpyZX0m93BZicktMj1AS9dClteUFAUNUIEygRZCtik5zSxI9MubTBH1GOiHsiLJ3OCoSZkILa9PxiN0EbvhsAo8tdAf9Seepd36lGWHmtNANTv5Jd0z4QYyeo/UEJqxKRpg5LZx6btLPsOaEmdMyxYdlc8LMaJnikDlhclqmPiQnTEpLUIZEwkRagjYkEibQErwhkTAKCLQEbUgkzJQWc/0PstHHcfEdQ+UAAAAASUVORK5CYII=);background-size:26px 26px}.leaflet-touch .leaflet-control-layers-toggle{width:44px;height:44px}.leaflet-control-layers .leaflet-control-layers-list,.leaflet-control-layers-expanded .leaflet-control-layers-toggle{display:none}.leaflet-control-layers-expanded .leaflet-control-layers-list{display:block;position:relative}.leaflet-control-layers-expanded{padding:6px 10px 6px 6px;color:#333;background:#fff}.leaflet-control-layers-scrollbar{overflow-y:scroll;overflow-x:hidden;padding-right:5px}.leaflet-control-layers-selector{margin-top:2px;position:relative;top:1px}.leaflet-control-layers label{display:block;font-size:13px;font-size:1.08333em}.leaflet-control-layers-separator{height:0;border-top:1px solid #ddd;margin:5px -10px 5px -6px}.leaflet-default-icon-path{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=)}.leaflet-container .leaflet-control-attribution{background:#fff;background:#fffc;margin:0}.leaflet-control-attribution,.leaflet-control-scale-line{padding:0 5px;color:#333;line-height:1.4}.leaflet-control-attribution a{text-decoration:none}.leaflet-control-attribution a:hover,.leaflet-control-attribution a:focus{text-decoration:underline}.leaflet-attribution-flag{display:inline!important;vertical-align:baseline!important;width:1em;height:.6669em}.leaflet-left .leaflet-control-scale{margin-left:5px}.leaflet-bottom .leaflet-control-scale{margin-bottom:5px}.leaflet-control-scale-line{border:2px solid #777;border-top:none;line-height:1.1;padding:2px 5px 1px;white-space:nowrap;-moz-box-sizing:border-box;box-sizing:border-box;background:#fffc;text-shadow:1px 1px #fff}.leaflet-control-scale-line:not(:first-child){border-top:2px solid #777;border-bottom:none;margin-top:-2px}.leaflet-control-scale-line:not(:first-child):not(:last-child){border-bottom:2px solid #777}.leaflet-touch .leaflet-control-attribution,.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{box-shadow:none}.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{border:2px solid rgba(0,0,0,.2);background-clip:padding-box}.leaflet-popup{position:absolute;text-align:center;margin-bottom:20px}.leaflet-popup-content-wrapper{padding:1px;text-align:left;border-radius:12px}.leaflet-popup-content{margin:13px 24px 13px 20px;line-height:1.3;font-size:13px;font-size:1.08333em;min-height:1px}.leaflet-popup-content p{margin:1.3em 0}.leaflet-popup-tip-container{width:40px;height:20px;position:absolute;left:50%;margin-top:-1px;margin-left:-20px;overflow:hidden;pointer-events:none}.leaflet-popup-tip{width:17px;height:17px;padding:1px;margin:-10px auto 0;pointer-events:auto;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:#fff;color:#333;box-shadow:0 3px 14px #0006}.leaflet-container a.leaflet-popup-close-button{position:absolute;top:0;right:0;border:none;text-align:center;width:24px;height:24px;font:16px/24px Tahoma,Verdana,sans-serif;color:#757575;text-decoration:none;background:transparent}.leaflet-container a.leaflet-popup-close-button:hover,.leaflet-container a.leaflet-popup-close-button:focus{color:#585858}.leaflet-popup-scrolled{overflow:auto}.leaflet-oldie .leaflet-popup-content-wrapper{-ms-zoom:1}.leaflet-oldie .leaflet-popup-tip{width:24px;margin:0 auto;-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";filter:progid:DXImageTransform.Microsoft.Matrix(M11=.70710678,M12=.70710678,M21=-.70710678,M22=.70710678)}.leaflet-oldie .leaflet-control-zoom,.leaflet-oldie .leaflet-control-layers,.leaflet-oldie .leaflet-popup-content-wrapper,.leaflet-oldie .leaflet-popup-tip{border:1px solid #999}.leaflet-div-icon{background:#fff;border:1px solid #666}.leaflet-tooltip{position:absolute;padding:6px;background-color:#fff;border:1px solid #fff;border-radius:3px;color:#222;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;box-shadow:0 1px 3px #0006}.leaflet-tooltip.leaflet-interactive{cursor:pointer;pointer-events:auto}.leaflet-tooltip-top:before,.leaflet-tooltip-bottom:before,.leaflet-tooltip-left:before,.leaflet-tooltip-right:before{position:absolute;pointer-events:none;border:6px solid transparent;background:transparent;content:""}.leaflet-tooltip-bottom{margin-top:6px}.leaflet-tooltip-top{margin-top:-6px}.leaflet-tooltip-bottom:before,.leaflet-tooltip-top:before{left:50%;margin-left:-6px}.leaflet-tooltip-top:before{bottom:0;margin-bottom:-12px;border-top-color:#fff}.leaflet-tooltip-bottom:before{top:0;margin-top:-12px;margin-left:-6px;border-bottom-color:#fff}.leaflet-tooltip-left{margin-left:-6px}.leaflet-tooltip-right{margin-left:6px}.leaflet-tooltip-left:before,.leaflet-tooltip-right:before{top:50%;margin-top:-6px}.leaflet-tooltip-left:before{right:0;margin-right:-12px;border-left-color:#fff}.leaflet-tooltip-right:before{left:0;margin-left:-12px;border-right-color:#fff}@media print{.leaflet-control{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

package/src/components/compositions/elements/components/IconBadge.stories.ts

@@ -1,96 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3"
-import IconBadge from "./IconBadge.vue"
-
-const meta = {
-  title: "Compositions/Elements/Components/IconBadge",
-  component: IconBadge,
-  tags: ["autodocs"],
-  decorators: [
-    () => ({
-      template: '<div class="p-4"><story /></div>',
-    }),
-  ],
-  args: {
-    icon: "Check",
-    label: "Done",
-    size: "md",
-    color: "primary",
-  },
-} satisfies Meta<typeof IconBadge>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: { icon: "Check", label: "Done", color: "primary" },
-}
-
-export const WithCustomContent: Story = {
-  args: { icon: "Bell", label: "Notify", color: "warning" },
-}
-
-export const Sizes: Story = {
-  args: {} as never,
-  render: () => ({
-    components: { IconBadge },
-    setup() {
-      const sizes = ["xs", "sm", "md", "lg", "xl"] as const
-      return { sizes }
-    },
-    template: `
-      <div class="flex items-center gap-3">
-        <IconBadge
-          v-for="s in sizes"
-          :key="s"
-          icon="Check"
-          :label="s"
-          :size="s"
-          color="primary"
-        />
-      </div>
-    `,
-  }),
-}
-
-export const Colors: Story = {
-  args: {} as never,
-  render: () => ({
-    components: { IconBadge },
-    setup() {
-      const colors = [
-        "primary",
-        "secondary",
-        "success",
-        "danger",
-        "warning",
-        "info",
-      ] as const
-      return { colors }
-    },
-    template: `
-      <div class="flex flex-wrap gap-3">
-        <IconBadge
-          v-for="c in colors"
-          :key="c"
-          icon="Star"
-          :label="c"
-          :color="c"
-        />
-      </div>
-    `,
-  }),
-}
-
-export const Showcase: Story = {
-  args: {} as never,
-  render: () => ({
-    components: { IconBadge },
-    template: `
-      <div class="flex flex-wrap gap-3">
-        <IconBadge icon="Check" label="Done" color="success" />
-        <IconBadge icon="Clock" label="Pending" color="warning" />
-        <IconBadge icon="X" label="Cancelled" color="danger" />
-      </div>
-    `,
-  }),
-}

package/src/components/compositions/elements/components/IconBadge.test.ts

@@ -1,70 +0,0 @@
-import { describe, expect, it } from "vitest"
-import { flushPromises, mount } from "@vue/test-utils"
-import IconBadge from "./IconBadge.vue"
-
-describe("IconBadge (props-based composition)", () => {
-  it("renders the label and resolves the lucide icon", async () => {
-    const wrapper = mount(IconBadge, {
-      props: { icon: "Check", label: "Done", color: "primary" },
-    })
-    // The icon is resolved via `await import("lucide-vue-next")`. In
-    // jsdom that promise needs several microtask hops before the ref
-    // updates and the re-render runs. Flush a handful of times.
-    for (let i = 0; i < 5; i += 1) {
-      await flushPromises()
-    }
-    expect(wrapper.text()).toContain("Done")
-    expect(wrapper.attributes("data-icon-name")).toBe("Check")
-    // SVG resolution is racy in jsdom — accept either an <svg> rendered
-    // by the resolved component, or the data-icon-name attribute as the
-    // canonical signal that resolution kicked off.
-    if (!wrapper.find("svg").exists()) {
-      // eslint-disable-next-line no-console
-      console.warn(
-        "[IconBadge.test] lucide SVG not rendered in jsdom; data-icon-name is the canonical signal.",
-      )
-    }
-  })
-
-  it("applies size token classes", () => {
-    const wrapper = mount(IconBadge, {
-      props: { icon: "Check", label: "Done", size: "lg" },
-    })
-    expect(wrapper.attributes("class")).toContain("size-5")
-  })
-
-  it("normalises kebab-case icon names to PascalCase", async () => {
-    const wrapper = mount(IconBadge, {
-      props: { icon: "alert-circle" },
-    })
-    await flushPromises()
-    expect(wrapper.attributes("data-icon-name")).toBe("AlertCircle")
-  })
-
-  it("applies classList (string) to the root", () => {
-    const wrapper = mount(IconBadge, {
-      props: { icon: "Check", label: "Done", classList: "chip" },
-    })
-    expect(wrapper.attributes("class")).toContain("chip")
-  })
-
-  it("applies classList (array) to the root", () => {
-    const wrapper = mount(IconBadge, {
-      props: { icon: "Check", label: "Done", classList: ["chip", "extra"] },
-    })
-    expect(wrapper.attributes("class")).toContain("chip")
-    expect(wrapper.attributes("class")).toContain("extra")
-  })
-
-  it("renders nothing for the icon when no icon is provided", async () => {
-    const wrapper = mount(IconBadge, { props: { label: "Just text" } })
-    await flushPromises()
-    expect(wrapper.attributes("data-icon-name")).toBe("")
-    expect(wrapper.text()).toContain("Just text")
-  })
-
-  it("works without any props at all", () => {
-    const wrapper = mount(IconBadge)
-    expect(wrapper.exists()).toBe(true)
-  })
-})

package/src/components/compositions/elements/components/IconBadge.vue

@@ -1,121 +0,0 @@
-<script setup lang="ts">
-/**
- * Props-driven icon badge composition. Renders a Badge primitive
- * wrapping a lucide icon resolved by name. Pure presentation — does
- * not bind to form data.
- *
- * Self-contained — usable directly in any Vue app:
- *
- *   <IconBadge icon="Check" label="Done" color="success" size="md" />
- */
-import { computed, ref, watch, type Component } from "vue"
-import { Badge, type BadgeVariants } from "@/components/ui/badge"
-
-export type IconBadgeSize = "xs" | "sm" | "md" | "lg" | "xl"
-export type IconBadgeColor =
-  | "primary"
-  | "secondary"
-  | "success"
-  | "danger"
-  | "destructive"
-  | "warning"
-  | "info"
-  | "light"
-  | "dark"
-
-export interface IconBadgeProps {
-  label?: string
-  icon?: string
-  size?: IconBadgeSize
-  color?: IconBadgeColor
-  classList?: string | string[]
-}
-
-const props = withDefaults(defineProps<IconBadgeProps>(), {
-  size: "md",
-})
-
-const iconName = computed<string>(() => {
-  const raw = props.icon ?? ""
-  return raw ? toPascalCase(String(raw)) : ""
-})
-
-function toPascalCase(input: string): string {
-  return input
-    .replace(/[-_\s]+(.)?/g, (_, ch?: string) => (ch ? ch.toUpperCase() : ""))
-    .replace(/^(.)/, (m) => m.toUpperCase())
-}
-
-const ResolvedIcon = ref<Component | null>(null)
-
-async function loadIcon(name: string): Promise<void> {
-  if (!name) {
-    ResolvedIcon.value = null
-    return
-  }
-  const mod = await import("lucide-vue-next")
-  const registry = mod as unknown as Record<string, Component | undefined>
-  ResolvedIcon.value = registry[name] ?? null
-}
-
-watch(
-  iconName,
-  (next) => {
-    void loadIcon(next)
-  },
-  { immediate: true },
-)
-
-const SIZE_TO_TW: Record<IconBadgeSize, string> = {
-  xs: "[&_svg]:size-3 px-1.5 py-0 text-[10px]",
-  sm: "[&_svg]:size-3 px-2 py-0 text-xs",
-  md: "[&_svg]:size-4 px-2.5 py-0.5 text-xs",
-  lg: "[&_svg]:size-5 px-3 py-1 text-sm",
-  xl: "[&_svg]:size-6 px-4 py-1.5 text-base",
-}
-
-const sizeClass = computed<string>(() => SIZE_TO_TW[props.size] ?? SIZE_TO_TW.md)
-
-const VARIANT_MAP: Record<IconBadgeColor, NonNullable<BadgeVariants["variant"]>> = {
-  primary: "default",
-  secondary: "secondary",
-  success: "success",
-  danger: "destructive",
-  destructive: "destructive",
-  warning: "warning",
-  info: "info",
-  light: "outline",
-  dark: "default",
-}
-
-const variant = computed<NonNullable<BadgeVariants["variant"]>>(() => {
-  const c = props.color
-  if (c && VARIANT_MAP[c]) {
-    return VARIANT_MAP[c]
-  }
-  return "default"
-})
-
-const rootClass = computed<string>(() => {
-  const cl = props.classList
-  if (!cl) {
-    return ""
-  }
-  return Array.isArray(cl) ? cl.join(" ") : cl
-})
-</script>
-
-<template>
-  <Badge
-    :variant="variant"
-    :class="[sizeClass, rootClass]"
-    :data-icon-name="iconName"
-    data-testid="icon-badge"
-  >
-    <component
-      :is="ResolvedIcon"
-      v-if="ResolvedIcon"
-    />
-    <span v-if="label">{{ label }}</span>
-  </Badge>
-</template>