@xplor-education/core-stencil-components 3.1.2 → 3.1.4

package/dist/collection/components/xplor-canvas-editor/xplor-canvas-editor.stories.js

@@ -0,0 +1,280 @@
+export default {
+    title: 'Components/Canvas Editor',
+    tags: ['autodocs'],
+    parameters: {
+        actions: {
+            handles: ['xplorShapeAdd', 'xplorShapeRemove', 'xplorShapeChange'],
+        },
+        docs: {
+            description: {
+                component: `
+An SVG-based canvas editor for drawing and managing shapes. Fully accessible (WCAG 2.1 AA),
+framework-agnostic, and compatible with Vue, React, and Angular.
+
+## Features
+- Draw rectangles, ellipses, and lines by clicking and dragging
+- Select and delete shapes with mouse or keyboard (Del / Backspace)
+- Resize selected shapes using 8 directional handles
+- Toolbar with tool selection, delete, and clear-all actions
+- Full keyboard and screen reader support
+
+## Usage
+\`\`\`html
+<xplor-canvas-editor
+  width="800"
+  height="500"
+  tool="select"
+></xplor-canvas-editor>
+\`\`\`
+
+## Events
+| Event | Payload | Description |
+|---|---|---|
+| \`xplorShapeAdd\` | \`Shape\` | Emitted when a new shape is drawn |
+| \`xplorShapeRemove\` | \`string\` (id) | Emitted when a shape is deleted |
+| \`xplorShapeChange\` | \`Shape\` | Emitted when a shape is resized |
+
+## Public Methods
+| Method | Returns | Description |
+|---|---|---|
+| \`getShapes()\` | \`Promise<Shape[]>\` | Returns all current shapes |
+| \`clearAll()\` | \`Promise<void>\` | Removes all shapes |
+
+## CSS Custom Properties
+| Property | Default | Description |
+|---|---|---|
+| \`--canvas-bg\` | \`#ffffff\` | Canvas background colour |
+| \`--canvas-border\` | \`#e5e7eb\` | Border colour |
+| \`--selection-color\` | \`#2196f3\` | Selection outline / handle accent colour |
+| \`--handle-size\` | \`5\` | Resize handle radius (SVG units) |
+| \`--handle-fill\` | \`#ffffff\` | Resize handle fill |
+| \`--handle-stroke\` | \`#2196f3\` | Resize handle stroke |
+        `,
+            },
+        },
+    },
+    argTypes: {
+        width: {
+            control: { type: 'number', min: 200, max: 1600, step: 50 },
+            description: 'Canvas width in pixels',
+        },
+        height: {
+            control: { type: 'number', min: 100, max: 1000, step: 50 },
+            description: 'Canvas height in pixels',
+        },
+        tool: {
+            control: { type: 'select' },
+            options: ['select', 'rect', 'circle', 'line'],
+            description: 'Initially active drawing tool',
+        },
+    },
+};
+// ---------------------------------------------------------------------------
+// Template helper
+// ---------------------------------------------------------------------------
+const Template = (args) => {
+    const attrs = Object.entries(args)
+        .filter(([, v]) => v !== undefined && v !== '' && v !== false)
+        .map(([k, v]) => {
+        const attr = k.replace(/([A-Z])/g, '-$1').toLowerCase();
+        if (typeof v === 'boolean')
+            return v ? attr : '';
+        return `${attr}="${v}"`;
+    })
+        .filter(Boolean)
+        .join(' ');
+    return `<xplor-canvas-editor ${attrs}></xplor-canvas-editor>`;
+};
+// ---------------------------------------------------------------------------
+// Default — select tool, standard size
+// ---------------------------------------------------------------------------
+export const Default = Template.bind({});
+Default.args = {
+    width: 800,
+    height: 500,
+    tool: 'select',
+};
+Default.storyName = 'Default (select tool)';
+Default.parameters = {
+    docs: {
+        description: {
+            story: 'The default state. Switch to a drawing tool in the toolbar, then click and drag on the canvas to create shapes.',
+        },
+    },
+};
+// ---------------------------------------------------------------------------
+// Draw Mode — starts with rect tool active
+// ---------------------------------------------------------------------------
+export const DrawMode = Template.bind({});
+DrawMode.args = {
+    width: 800,
+    height: 500,
+    tool: 'rect',
+};
+DrawMode.storyName = 'Draw Mode (rect)';
+DrawMode.parameters = {
+    docs: {
+        description: {
+            story: 'Opens with the Rectangle tool already active. Click and drag on the canvas to draw rectangles immediately.',
+        },
+    },
+};
+// ---------------------------------------------------------------------------
+// Circle / Ellipse tool
+// ---------------------------------------------------------------------------
+export const CircleTool = Template.bind({});
+CircleTool.args = {
+    width: 800,
+    height: 500,
+    tool: 'circle',
+};
+CircleTool.storyName = 'Circle / Ellipse tool';
+CircleTool.parameters = {
+    docs: {
+        description: {
+            story: 'Opens with the Circle/Ellipse tool active. Drag to define the bounding box of the ellipse.',
+        },
+    },
+};
+// ---------------------------------------------------------------------------
+// Line tool
+// ---------------------------------------------------------------------------
+export const LineTool = Template.bind({});
+LineTool.args = {
+    width: 800,
+    height: 500,
+    tool: 'line',
+};
+LineTool.storyName = 'Line tool';
+LineTool.parameters = {
+    docs: {
+        description: {
+            story: 'Opens with the Line tool active. Click the start point and drag to the end point.',
+        },
+    },
+};
+// ---------------------------------------------------------------------------
+// Small canvas
+// ---------------------------------------------------------------------------
+export const SmallCanvas = Template.bind({});
+SmallCanvas.args = {
+    width: 400,
+    height: 300,
+    tool: 'select',
+};
+SmallCanvas.storyName = 'Small canvas (400×300)';
+SmallCanvas.parameters = {
+    docs: {
+        description: {
+            story: 'Demonstrates a compact canvas size.',
+        },
+    },
+};
+// ---------------------------------------------------------------------------
+// Wide canvas
+// ---------------------------------------------------------------------------
+export const WideCanvas = Template.bind({});
+WideCanvas.args = {
+    width: 1200,
+    height: 500,
+    tool: 'select',
+};
+WideCanvas.storyName = 'Wide canvas (1200×500)';
+WideCanvas.parameters = {
+    docs: {
+        description: {
+            story: 'A wider canvas. The SVG wrapper scrolls horizontally if the canvas exceeds the viewport.',
+        },
+    },
+};
+// ---------------------------------------------------------------------------
+// Pre-loaded shapes (via JS injection — showcases shape rendering)
+// ---------------------------------------------------------------------------
+export const PreloadedShapes = () => `
+<div style="display:inline-block;">
+  <xplor-canvas-editor
+    id="preloaded-canvas"
+    width="800"
+    height="500"
+    tool="select"
+  ></xplor-canvas-editor>
+</div>
+<script>
+  (function () {
+    var el = document.getElementById('preloaded-canvas');
+    // Wait for Stencil hydration
+    customElements.whenDefined('xplor-canvas-editor').then(function () {
+      // Directly set internal state via a workaround — for demo purposes only.
+      // In real integrations, shapes should be drawn by the user or managed via getShapes()/clearAll().
+      var preloaded = [
+        { id: 'pre-1', type: 'rect',   x: 40,  y: 40,  width: 160, height: 100, fill: 'rgba(33,150,243,0.25)', stroke: '#1976d2' },
+        { id: 'pre-2', type: 'circle', x: 260, y: 60,  width: 140, height: 120, fill: 'rgba(76,175,80,0.25)',  stroke: '#388e3c' },
+        { id: 'pre-3', type: 'line',   x: 50,  y: 220, width: 300, height: 200, fill: 'none',                  stroke: '#f44336' },
+        { id: 'pre-4', type: 'rect',   x: 430, y: 80,  width: 180, height: 130, fill: 'rgba(156,39,176,0.25)', stroke: '#7b1fa2' },
+      ];
+      if (el && el.__stencilInstance) {
+        el.__stencilInstance.shapes = preloaded;
+      }
+    });
+  })();
+</script>
+`;
+PreloadedShapes.storyName = 'Pre-loaded shapes';
+PreloadedShapes.parameters = {
+    docs: {
+        description: {
+            story: 'Demonstrates how all three shape types (rect, ellipse, line) are rendered. Use the Select tool and click a shape to see resize handles.',
+        },
+    },
+};
+// ---------------------------------------------------------------------------
+// Dark mode
+// ---------------------------------------------------------------------------
+export const DarkMode = () => `
+<div class="dark" style="background:#1e1e2e; padding:2rem; border-radius:0.5rem; display:inline-block;">
+  <xplor-canvas-editor
+    class="dark"
+    width="800"
+    height="500"
+    tool="select"
+  ></xplor-canvas-editor>
+</div>
+`;
+DarkMode.storyName = 'Dark mode';
+DarkMode.parameters = {
+    backgrounds: { default: 'dark' },
+    docs: {
+        description: {
+            story: 'Apply the `.dark` CSS class to the host element or an ancestor to activate dark mode colour tokens.',
+        },
+    },
+};
+// ---------------------------------------------------------------------------
+// Custom CSS tokens
+// ---------------------------------------------------------------------------
+export const CustomTokens = () => `
+<xplor-canvas-editor
+  width="800"
+  height="500"
+  tool="rect"
+  style="
+    --canvas-bg: #fdf6ec;
+    --canvas-border: #f5c68a;
+    --selection-color: #f57c00;
+    --handle-stroke: #f57c00;
+    --canvas-toolbar-bg: #fff8f0;
+    --canvas-toolbar-border: #f5c68a;
+    --canvas-btn-active-bg: rgba(245,124,0,0.1);
+    --canvas-btn-active-color: #f57c00;
+  "
+></xplor-canvas-editor>
+`;
+CustomTokens.storyName = 'Custom CSS tokens (orange theme)';
+CustomTokens.parameters = {
+    docs: {
+        description: {
+            story: 'Override CSS custom properties to match any design system. This example applies an orange warm theme.',
+        },
+    },
+};
+//# sourceMappingURL=xplor-canvas-editor.stories.js.map

package/dist/collection/components/xplor-canvas-editor/xplor-canvas-editor.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xplor-canvas-editor.stories.js","sourceRoot":"","sources":["../../../src/components/xplor-canvas-editor/xplor-canvas-editor.stories.ts"],"names":[],"mappings":"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","sourcesContent":["export default {\n  title: 'Components/Canvas Editor',\n  tags: ['autodocs'],\n  parameters: {\n    actions: {\n      handles: ['xplorShapeAdd', 'xplorShapeRemove', 'xplorShapeChange'],\n    },\n    docs: {\n      description: {\n        component: `\nAn SVG-based canvas editor for drawing and managing shapes. Fully accessible (WCAG 2.1 AA),\nframework-agnostic, and compatible with Vue, React, and Angular.\n\n## Features\n- Draw rectangles, ellipses, and lines by clicking and dragging\n- Select and delete shapes with mouse or keyboard (Del / Backspace)\n- Resize selected shapes using 8 directional handles\n- Toolbar with tool selection, delete, and clear-all actions\n- Full keyboard and screen reader support\n\n## Usage\n\\`\\`\\`html\n<xplor-canvas-editor\n  width=\"800\"\n  height=\"500\"\n  tool=\"select\"\n></xplor-canvas-editor>\n\\`\\`\\`\n\n## Events\n| Event | Payload | Description |\n|---|---|---|\n| \\`xplorShapeAdd\\` | \\`Shape\\` | Emitted when a new shape is drawn |\n| \\`xplorShapeRemove\\` | \\`string\\` (id) | Emitted when a shape is deleted |\n| \\`xplorShapeChange\\` | \\`Shape\\` | Emitted when a shape is resized |\n\n## Public Methods\n| Method | Returns | Description |\n|---|---|---|\n| \\`getShapes()\\` | \\`Promise<Shape[]>\\` | Returns all current shapes |\n| \\`clearAll()\\` | \\`Promise<void>\\` | Removes all shapes |\n\n## CSS Custom Properties\n| Property | Default | Description |\n|---|---|---|\n| \\`--canvas-bg\\` | \\`#ffffff\\` | Canvas background colour |\n| \\`--canvas-border\\` | \\`#e5e7eb\\` | Border colour |\n| \\`--selection-color\\` | \\`#2196f3\\` | Selection outline / handle accent colour |\n| \\`--handle-size\\` | \\`5\\` | Resize handle radius (SVG units) |\n| \\`--handle-fill\\` | \\`#ffffff\\` | Resize handle fill |\n| \\`--handle-stroke\\` | \\`#2196f3\\` | Resize handle stroke |\n        `,\n      },\n    },\n  },\n  argTypes: {\n    width: {\n      control: { type: 'number', min: 200, max: 1600, step: 50 },\n      description: 'Canvas width in pixels',\n    },\n    height: {\n      control: { type: 'number', min: 100, max: 1000, step: 50 },\n      description: 'Canvas height in pixels',\n    },\n    tool: {\n      control: { type: 'select' },\n      options: ['select', 'rect', 'circle', 'line'],\n      description: 'Initially active drawing tool',\n    },\n  },\n};\n\n// ---------------------------------------------------------------------------\n// Template helper\n// ---------------------------------------------------------------------------\n\nconst Template = (args) => {\n  const attrs = Object.entries(args)\n    .filter(([, v]) => v !== undefined && v !== '' && v !== false)\n    .map(([k, v]) => {\n      const attr = k.replace(/([A-Z])/g, '-$1').toLowerCase();\n      if (typeof v === 'boolean') return v ? attr : '';\n      return `${attr}=\"${v}\"`;\n    })\n    .filter(Boolean)\n    .join(' ');\n\n  return `<xplor-canvas-editor ${attrs}></xplor-canvas-editor>`;\n};\n\n// ---------------------------------------------------------------------------\n// Default — select tool, standard size\n// ---------------------------------------------------------------------------\n\nexport const Default = Template.bind({});\nDefault.args = {\n  width: 800,\n  height: 500,\n  tool: 'select',\n};\nDefault.storyName = 'Default (select tool)';\nDefault.parameters = {\n  docs: {\n    description: {\n      story:\n        'The default state. Switch to a drawing tool in the toolbar, then click and drag on the canvas to create shapes.',\n    },\n  },\n};\n\n// ---------------------------------------------------------------------------\n// Draw Mode — starts with rect tool active\n// ---------------------------------------------------------------------------\n\nexport const DrawMode = Template.bind({});\nDrawMode.args = {\n  width: 800,\n  height: 500,\n  tool: 'rect',\n};\nDrawMode.storyName = 'Draw Mode (rect)';\nDrawMode.parameters = {\n  docs: {\n    description: {\n      story:\n        'Opens with the Rectangle tool already active. Click and drag on the canvas to draw rectangles immediately.',\n    },\n  },\n};\n\n// ---------------------------------------------------------------------------\n// Circle / Ellipse tool\n// ---------------------------------------------------------------------------\n\nexport const CircleTool = Template.bind({});\nCircleTool.args = {\n  width: 800,\n  height: 500,\n  tool: 'circle',\n};\nCircleTool.storyName = 'Circle / Ellipse tool';\nCircleTool.parameters = {\n  docs: {\n    description: {\n      story:\n        'Opens with the Circle/Ellipse tool active. Drag to define the bounding box of the ellipse.',\n    },\n  },\n};\n\n// ---------------------------------------------------------------------------\n// Line tool\n// ---------------------------------------------------------------------------\n\nexport const LineTool = Template.bind({});\nLineTool.args = {\n  width: 800,\n  height: 500,\n  tool: 'line',\n};\nLineTool.storyName = 'Line tool';\nLineTool.parameters = {\n  docs: {\n    description: {\n      story:\n        'Opens with the Line tool active. Click the start point and drag to the end point.',\n    },\n  },\n};\n\n// ---------------------------------------------------------------------------\n// Small canvas\n// ---------------------------------------------------------------------------\n\nexport const SmallCanvas = Template.bind({});\nSmallCanvas.args = {\n  width: 400,\n  height: 300,\n  tool: 'select',\n};\nSmallCanvas.storyName = 'Small canvas (400×300)';\nSmallCanvas.parameters = {\n  docs: {\n    description: {\n      story: 'Demonstrates a compact canvas size.',\n    },\n  },\n};\n\n// ---------------------------------------------------------------------------\n// Wide canvas\n// ---------------------------------------------------------------------------\n\nexport const WideCanvas = Template.bind({});\nWideCanvas.args = {\n  width: 1200,\n  height: 500,\n  tool: 'select',\n};\nWideCanvas.storyName = 'Wide canvas (1200×500)';\nWideCanvas.parameters = {\n  docs: {\n    description: {\n      story:\n        'A wider canvas. The SVG wrapper scrolls horizontally if the canvas exceeds the viewport.',\n    },\n  },\n};\n\n// ---------------------------------------------------------------------------\n// Pre-loaded shapes (via JS injection — showcases shape rendering)\n// ---------------------------------------------------------------------------\n\nexport const PreloadedShapes = () => `\n<div style=\"display:inline-block;\">\n  <xplor-canvas-editor\n    id=\"preloaded-canvas\"\n    width=\"800\"\n    height=\"500\"\n    tool=\"select\"\n  ></xplor-canvas-editor>\n</div>\n<script>\n  (function () {\n    var el = document.getElementById('preloaded-canvas');\n    // Wait for Stencil hydration\n    customElements.whenDefined('xplor-canvas-editor').then(function () {\n      // Directly set internal state via a workaround — for demo purposes only.\n      // In real integrations, shapes should be drawn by the user or managed via getShapes()/clearAll().\n      var preloaded = [\n        { id: 'pre-1', type: 'rect',   x: 40,  y: 40,  width: 160, height: 100, fill: 'rgba(33,150,243,0.25)', stroke: '#1976d2' },\n        { id: 'pre-2', type: 'circle', x: 260, y: 60,  width: 140, height: 120, fill: 'rgba(76,175,80,0.25)',  stroke: '#388e3c' },\n        { id: 'pre-3', type: 'line',   x: 50,  y: 220, width: 300, height: 200, fill: 'none',                  stroke: '#f44336' },\n        { id: 'pre-4', type: 'rect',   x: 430, y: 80,  width: 180, height: 130, fill: 'rgba(156,39,176,0.25)', stroke: '#7b1fa2' },\n      ];\n      if (el && el.__stencilInstance) {\n        el.__stencilInstance.shapes = preloaded;\n      }\n    });\n  })();\n</script>\n`;\nPreloadedShapes.storyName = 'Pre-loaded shapes';\nPreloadedShapes.parameters = {\n  docs: {\n    description: {\n      story:\n        'Demonstrates how all three shape types (rect, ellipse, line) are rendered. Use the Select tool and click a shape to see resize handles.',\n    },\n  },\n};\n\n// ---------------------------------------------------------------------------\n// Dark mode\n// ---------------------------------------------------------------------------\n\nexport const DarkMode = () => `\n<div class=\"dark\" style=\"background:#1e1e2e; padding:2rem; border-radius:0.5rem; display:inline-block;\">\n  <xplor-canvas-editor\n    class=\"dark\"\n    width=\"800\"\n    height=\"500\"\n    tool=\"select\"\n  ></xplor-canvas-editor>\n</div>\n`;\nDarkMode.storyName = 'Dark mode';\nDarkMode.parameters = {\n  backgrounds: { default: 'dark' },\n  docs: {\n    description: {\n      story:\n        'Apply the `.dark` CSS class to the host element or an ancestor to activate dark mode colour tokens.',\n    },\n  },\n};\n\n// ---------------------------------------------------------------------------\n// Custom CSS tokens\n// ---------------------------------------------------------------------------\n\nexport const CustomTokens = () => `\n<xplor-canvas-editor\n  width=\"800\"\n  height=\"500\"\n  tool=\"rect\"\n  style=\"\n    --canvas-bg: #fdf6ec;\n    --canvas-border: #f5c68a;\n    --selection-color: #f57c00;\n    --handle-stroke: #f57c00;\n    --canvas-toolbar-bg: #fff8f0;\n    --canvas-toolbar-border: #f5c68a;\n    --canvas-btn-active-bg: rgba(245,124,0,0.1);\n    --canvas-btn-active-color: #f57c00;\n  \"\n></xplor-canvas-editor>\n`;\nCustomTokens.storyName = 'Custom CSS tokens (orange theme)';\nCustomTokens.parameters = {\n  docs: {\n    description: {\n      story:\n        'Override CSS custom properties to match any design system. This example applies an orange warm theme.',\n    },\n  },\n};\n"]}

package/dist/collection/components/xplor-chat-widget/xplor-chat-widget.js

@@ -52,7 +52,7 @@ export class XplorChatWidget {
         }
     }
     render() {
-        return (h(Host, { key: '19fe2c1cbe9c2f82779a3e9e6966db8e22988002' }, h("div", { key: 'b2d611ff824b3e4c9eff2c7eac45716219de2b96', id: "ai-text" }, this.textValue), h("div", { key: '96ca4702ebd751d3b6ab95a23ca1b762ef1be270', class: "container" }, h("xplor-dropdown", { key: '74a7468be12b73d97cf473cd7bb9bae99e62fa1b', options: this.languageOptions, selected: this.selectedLanguage, handleChange: this.handleChange }), h("xplor-button", { key: '4177a337e0295507422bee77f90a26ea6ed3b12b', text: "translate", mode: "pg", type: "primary", onClick: this.handleClick }))));
+        return (h(Host, { key: '5d2dcc41806f640f3dce9dea7aefe60877115b6c' }, h("div", { key: '3624422b51c11f58fa35249e91ab3a5a4ae70cd1', id: "ai-text" }, this.textValue), h("div", { key: 'ba23a8071db26f0695fbfc75a740b9e816c72eac', class: "container" }, h("xplor-dropdown", { key: 'b944f0a90ac707f98bc3ed75736823572d0f77e5', options: this.languageOptions, selected: this.selectedLanguage, handleChange: this.handleChange }), h("xplor-button", { key: 'e9d9b16969b7da1cb1160a7f6c9c77b932da8834', text: "translate", mode: "pg", type: "primary", onClick: this.handleClick }))));
     }
     static get is() { return "xplor-chat-widget"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/xplor-checkbox/xplor-checkbox.js

@@ -74,7 +74,7 @@ export class XplorCheckbox {
         this.indeterminate = this.initialIndeterminate;
     }
     render() {
-        return (h("div", { key: '02d3efb24ac53caa742721720ec6d212eb159a55', class: "checkbox-wrapper" }, h("div", { key: '1d1024d0dfb9328d607919dad86bfa25def7bf35', class: this.getCheckboxClass(), onClick: this.handleClick, onMouseEnter: () => this.isHovered = true, onMouseLeave: () => this.isHovered = false, onMouseDown: () => this.isPressed = true, onMouseUp: () => this.isPressed = false, onFocus: () => this.isFocused = true, onBlur: () => this.isFocused = false, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, tabIndex: this.disabled ? -1 : 0, role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : this.checked.toString(), "aria-disabled": this.disabled.toString(), "aria-labelledby": this.label ? this.labelId : undefined }, this.checked && (h("svg", { key: 'e5bd243560546d47bfc77d753df3020fb1abb417', class: "check-icon", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '19da038d854b218177b668da5b8e8c3489dd377d', d: "M13.3334 4L6.00002 11.3333L2.66669 8", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.indeterminate && (h("svg", { key: '069ce072241705fabb0a740271d7b6e6192e35a8', class: "indeterminate-icon", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'afc9851ff1e2ecb32cb7f0037c72844e8ae1a625', d: "M3.33331 8H12.6666", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })))), this.label && h("span", { key: '4fbc5b3bbf78fd53aa0ee5a65e1a3b1b76cbb114', class: "label", id: this.labelId }, this.label)));
+        return (h("div", { key: '1fe78163ff3fc8d337731e9765628f2dd48bbbb5', class: "checkbox-wrapper" }, h("div", { key: '0ed33fa8c645b4ddce726b991f40da8712758a71', class: this.getCheckboxClass(), onClick: this.handleClick, onMouseEnter: () => this.isHovered = true, onMouseLeave: () => this.isHovered = false, onMouseDown: () => this.isPressed = true, onMouseUp: () => this.isPressed = false, onFocus: () => this.isFocused = true, onBlur: () => this.isFocused = false, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, tabIndex: this.disabled ? -1 : 0, role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : this.checked.toString(), "aria-disabled": this.disabled.toString(), "aria-labelledby": this.label ? this.labelId : undefined }, this.checked && (h("svg", { key: '75bd98168be72bf08998da1058aefe6fe9c46947', class: "check-icon", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'ddfb568863af95b55ca70df1ba3dd8be5a3d30cb', d: "M13.3334 4L6.00002 11.3333L2.66669 8", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.indeterminate && (h("svg", { key: '1eadbf511badc60a60a5419c010c0c9b09014e22', class: "indeterminate-icon", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'b654b703226b817484375a9b7d008feb44c8f592', d: "M3.33331 8H12.6666", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })))), this.label && h("span", { key: '1e53eb3e690f18f983d1cdded64fe9e8b557e5c8', class: "label", id: this.labelId }, this.label)));
     }
     static get is() { return "xplor-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/xplor-combobox/xplor-combobox.js

@@ -210,15 +210,15 @@ export class XplorCombobox {
         const listboxId = 'combobox-listbox';
         const labelId = 'combobox-label';
         const activeDescendantId = this.highlightedIndex >= 0 ? `combobox-option-${this.highlightedIndex}` : undefined;
-        return (h(Host, { key: '5c3fb39153fe1a83d72b4ad3aa60d4602014916c' }, h("div", { key: 'ed9f80ab76d19c842e9da6a016040fdf68395332', class: {
+        return (h(Host, { key: '30d75fafd92568e91b4f695fa48d06fe2c433c40' }, h("div", { key: 'b8c6278923ff28cd85adaf793d8a9c36bc812370', class: {
                 'combobox': true,
                 'combobox--disabled': this.disabled,
                 'combobox--readonly': this.readonly,
                 'combobox--open': this.isOpen,
-            } }, this.label && (h("label", { key: 'a5837bdc2fe30046a56a659a942c82c6612e5eed', class: "combobox__label", id: labelId }, this.label)), h("div", { key: '84022a8390a2024ef29d7dbdb5bd3b34c1da2305', class: "combobox__input-wrapper" }, this.multiple && this.selectedItems.length > 0 && (h("div", { key: '7df2befc1d6104e8b5472c800fe30eda0ecac550', class: "combobox__chips" }, this.selectedItems.map(value => {
+            } }, this.label && (h("label", { key: 'b8c250d88bf3fefc0b83232e3f93123034e43149', class: "combobox__label", id: labelId }, this.label)), h("div", { key: 'b0c00a90810d030afc86f815b4f90bc259841885', class: "combobox__input-wrapper" }, this.multiple && this.selectedItems.length > 0 && (h("div", { key: '50d4ea9a7798b65d6bc52466b458f022358d881a', class: "combobox__chips" }, this.selectedItems.map(value => {
             const chipLabel = this.getSelectedItemLabel(value);
             return (h("div", { class: "combobox__chip" }, h("span", { class: "combobox__chip-label" }, chipLabel), h("button", { type: "button", class: "combobox__chip-remove", onClick: () => this.removeItem(value), disabled: this.disabled || this.readonly, "aria-label": `Remove ${chipLabel}` }, "\u00D7")));
-        }))), h("input", { key: '4b01ffb37bfe750c24081ec839fcd6b70f87bde0', ref: (el) => (this.inputEl = el), type: "text", class: "combobox__input", placeholder: this.placeholder, value: this.searchQuery, onFocus: this.handleInputFocus, onInput: this.handleInputChange, onKeyDown: this.handleInputKeyDown, disabled: this.disabled, readonly: this.readonly, autocomplete: "off", role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-controls": this.isOpen ? listboxId : undefined, "aria-activedescendant": activeDescendantId, "aria-labelledby": this.label ? labelId : undefined, "aria-label": !this.label ? (this.ariaLabel || this.placeholder) : undefined, "aria-autocomplete": "list" }), h("div", { key: 'f1fa0b56edeb6c5e25eebd34a9d143a0ecca1173', class: "combobox__actions" }, this.clearable && hasValue && !this.disabled && !this.readonly && (h("button", { key: '5179310582b9aef4739985dbeefd35bda1bb86bb', type: "button", class: "combobox__clear", onClick: this.handleClear, "aria-label": "Clear selection" }, "\u00D7")), h("span", { key: '93c5431addfcaf88e51d38907304a4e289c3183d', class: "combobox__icon", "aria-hidden": "true" }, "\u25BC"))), this.isOpen && (this.filteredItems.length > 0 || showCreateOption) && (h("div", { key: '9fba0e29de90f8bdcdd4861fbb0fb06a20fa980b', class: "combobox__dropdown", ref: (el) => (this.dropdownEl = el), role: "listbox", id: listboxId, "aria-label": this.label || this.ariaLabel || 'Options' }, this.filteredItems.map((item, index) => {
+        }))), h("input", { key: '5fb92aa47a90ce22bc6538b267ab5ebc228ef38c', ref: (el) => (this.inputEl = el), type: "text", class: "combobox__input", placeholder: this.placeholder, value: this.searchQuery, onFocus: this.handleInputFocus, onInput: this.handleInputChange, onKeyDown: this.handleInputKeyDown, disabled: this.disabled, readonly: this.readonly, autocomplete: "off", role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-controls": this.isOpen ? listboxId : undefined, "aria-activedescendant": activeDescendantId, "aria-labelledby": this.label ? labelId : undefined, "aria-label": !this.label ? (this.ariaLabel || this.placeholder) : undefined, "aria-autocomplete": "list" }), h("div", { key: '4ade4fece05a81bc1ac4a0a289beecd6a2068f8c', class: "combobox__actions" }, this.clearable && hasValue && !this.disabled && !this.readonly && (h("button", { key: '8ee876b5e4a35fd0b0af71544bbc2e98a29148fd', type: "button", class: "combobox__clear", onClick: this.handleClear, "aria-label": "Clear selection" }, "\u00D7")), h("span", { key: 'ca1e3180e381b5fe1ace789b0af66092cd9dfeee', class: "combobox__icon", "aria-hidden": "true" }, "\u25BC"))), this.isOpen && (this.filteredItems.length > 0 || showCreateOption) && (h("div", { key: 'cb5501119e5aa39e161de50b1ac6b310dc1edaa3', class: "combobox__dropdown", ref: (el) => (this.dropdownEl = el), role: "listbox", id: listboxId, "aria-label": this.label || this.ariaLabel || 'Options' }, this.filteredItems.map((item, index) => {
             const isSelected = this.multiple
                 ? this.selectedItems.includes(item.value)
                 : this.value === item.value;
@@ -228,11 +228,11 @@ export class XplorCombobox {
                     'combobox__item--selected': isSelected,
                     'combobox__item--disabled': item.disabled,
                 }, onClick: () => this.selectItem(item) }, item.label));
-        }), showCreateOption && (h("div", { key: '880bc30bc32c87dfb9ecf9b706162299e80fd1c5', id: `combobox-option-${this.filteredItems.length}`, "data-index": this.filteredItems.length, role: "option", "aria-selected": "false", class: {
+        }), showCreateOption && (h("div", { key: 'dddf029e093efa939b5f40b63101c548e11eb654', id: `combobox-option-${this.filteredItems.length}`, "data-index": this.filteredItems.length, role: "option", "aria-selected": "false", class: {
                 'combobox__item': true,
                 'combobox__item--create': true,
                 'combobox__item--highlighted': this.highlightedIndex === this.filteredItems.length,
-            }, onClick: () => this.createNewItem() }, h("span", { key: 'd0ff5841add7495a79a1e9453b87706971cf8907', class: "combobox__create-label" }, this.createMessage, ":"), ' ', h("strong", { key: 'e1b1e94a5afce2ab3f5a714a7c593e59d9d22ff0' }, "\"", this.searchQuery, "\""))))), this.isOpen && this.filteredItems.length === 0 && !showCreateOption && (h("div", { key: '0a95426511036f918cd42999cd1543fc26efbff2', class: "combobox__dropdown", role: "listbox", id: listboxId }, h("div", { key: '551dc3ad968c049c5bbf2a9da71d45e203e15df7', class: "combobox__no-results", role: "option", "aria-disabled": "true" }, "No results found"))))));
+            }, onClick: () => this.createNewItem() }, h("span", { key: '478d841838f5b2249f868d5852982bede08fe3de', class: "combobox__create-label" }, this.createMessage, ":"), ' ', h("strong", { key: '05c284c7d27f7107dfc717c5c2376077c627d4c7' }, "\"", this.searchQuery, "\""))))), this.isOpen && this.filteredItems.length === 0 && !showCreateOption && (h("div", { key: 'c333a2909fef4d33e8b1655043340ba4f27d898e', class: "combobox__dropdown", role: "listbox", id: listboxId }, h("div", { key: '1ba3213f34a8f281143e6ead11fc0c90844475fc', class: "combobox__no-results", role: "option", "aria-disabled": "true" }, "No results found"))))));
     }
     static get is() { return "xplor-combobox"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/xplor-datatable/xplor-datatable.js

@@ -163,13 +163,13 @@ export class XplorDatatable {
     render() {
         const tableHeight = typeof this.height === 'number' ? `${this.height}px` : this.height;
         const hasHeight = !!this.height;
-        return (h(Host, { key: '779f32a211bb2d9d5d70363112970f00d62d9ccf', class: "xplor-datatable" }, h("div", { key: '27995dd2f98074fe0bd223b52ae3b25cc48a8ab6', class: "datatable-container" }, h("div", { key: '379d7b6999df3d94e2fa6618394e14fa9e99d96b', class: {
+        return (h(Host, { key: '31026bbaf1331e11115147771e80fb3d59c02104', class: "xplor-datatable" }, h("div", { key: '6b4feed4000f1cc56bf2ed2e7bb6808996662ca9', class: "datatable-container" }, h("div", { key: '2d395becc036e9e19f3b9397fbf154edf07f36e4', class: {
                 'table-wrapper': true,
                 'has-height': hasHeight,
                 'horizontal-lines': this.horizontalLines,
                 'striped': this.striped,
                 'is-empty': this.items.length === 0,
-            }, style: hasHeight ? { height: tableHeight } : {} }, h("table", { key: '5f46224fe7ecc2fd3781e11d592fee5c8d80e9f2', class: { 'hover': this.hover } }, h("thead", { key: 'd20432aa1d6551dd324a60ed594cd5ebc2c80198' }, h("tr", { key: '62cc50e679f8345caba6f92a7ae117b68728425d' }, this.canSelect && (h("th", { key: 'dfffb0bf421458b192db6eae3538da8a752f5356', class: "select-column" }, h("label", { key: '17cdb037cee9b2d0cce729e0761f03b4bca14354', class: "checkbox-label" }, h("input", { key: '668128d3f8238449b965df2825e164a2e12a4626', type: "checkbox", checked: this.allSelected, indeterminate: this.internalSelected.size > 0 &&
+            }, style: hasHeight ? { height: tableHeight } : {} }, h("table", { key: 'fdf0bf570246d6abd84dfa2e2cf5757dde309e6c', class: { 'hover': this.hover } }, h("thead", { key: '634480ba84300e86339dbbf95dce396cde8395c5' }, h("tr", { key: '08e44beee5fb0c703694b38a7bfbc2da3691611e' }, this.canSelect && (h("th", { key: '9587a2bb1e11e5c8b44f5b7c4de3e2d6d4e7bb30', class: "select-column" }, h("label", { key: 'a2cdfaabd4fff5cba3801568de522eb60104a79e', class: "checkbox-label" }, h("input", { key: '3500b6b71893fc242b6ad956cb1190b2533e13de', type: "checkbox", checked: this.allSelected, indeterminate: this.internalSelected.size > 0 &&
                 this.internalSelected.size < this.items.length, onChange: this.handleSelectAll, "aria-label": "Select all rows" })))), this.headers.map(header => (h("th", { class: {
                 sortable: header.sortable !== false,
                 sorted: this.sortBy === header.value,

package/dist/collection/components/xplor-date-picker/xplor-date-picker.js

@@ -197,16 +197,16 @@ export class XplorDatePicker {
     }
     render() {
         const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && this.error);
-        const calendarIcon = (h("svg", { key: '8e3f3be13346ec15a3e4e2a9e9ccf3481cf8c87b', class: "date-picker__icon-svg", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("rect", { key: '1f5d918d65a44a7b8f9dec0609ef125c96b1ccdf', x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), h("line", { key: 'd2a5ccfbe2e4afe8ed5d9277c49b09169c6ae651', x1: "16", y1: "2", x2: "16", y2: "6" }), h("line", { key: '8d114a93b8f1c4d8fc65360f34afaecc14148328', x1: "8", y1: "2", x2: "8", y2: "6" }), h("line", { key: '40b3ab407c3872d6eda481a64f8210b505e202cc', x1: "3", y1: "10", x2: "21", y2: "10" })));
-        return (h(Host, { key: '7c04e985b0a900863965311e69a336d859852e66' }, h("div", { key: '15b17203d293c694130493bf45b8bd6d38c7bd36', class: {
+        const calendarIcon = (h("svg", { key: 'd78ff4ab59055d3d19d872651a7e726c0b60cfb5', class: "date-picker__icon-svg", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("rect", { key: 'd43dc4e0ca1d8c6b4a55484d0f6ae81f00201954', x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), h("line", { key: '1f5fe56ffa03cc49409553f0c13184667c0bed62', x1: "16", y1: "2", x2: "16", y2: "6" }), h("line", { key: '18e8c75d559ce76bcd0336241955a4018daaa270', x1: "8", y1: "2", x2: "8", y2: "6" }), h("line", { key: '880167220cb172fc0f5b18b1eb0fabfc3326501b', x1: "3", y1: "10", x2: "21", y2: "10" })));
+        return (h(Host, { key: '53584be9a38a833329033b5e547c15671d43b9ea' }, h("div", { key: '32c32b9abd3021718994879c797d15c7c92b200a', class: {
                 'date-picker': true,
                 'date-picker--disabled': this.disabled,
                 'date-picker--error': !!this.error,
                 'date-picker--open': this.isOpen,
-            } }, this.label && (h("label", { key: 'e9e03dde337f9c2259611f1f1f4748bb92d86cfb', class: "date-picker__label", id: this.labelId, htmlFor: this.inputId }, this.label, this.required && h("span", { key: '4e68d0071f5224c9fc30df8864898a4906f6efba', class: "date-picker__required" }, "*"))), this.display === 'text' ? (h("div", { class: "date-picker__text-display", onClick: this.handleTextClick, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "dialog", role: "button", tabIndex: 0 }, h("span", { class: "date-picker__text-value" }, this.value ? this.formatDateForDisplay(this.value) : this.placeholder), calendarIcon)) : (h("div", { class: "date-picker__field" }, h("input", { id: this.inputId, type: "text", class: "date-picker__input", value: this.inputText, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onInput: this.handleInputChange, style: { backgroundColor: this.bgColor }, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "dialog", "aria-describedby": this.error ? this.errorId : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined }), h("div", { class: "date-picker__actions" }, this.clearable && this.value && !this.disabled && !this.readonly && (h("button", { type: "button", class: "date-picker__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u00D7")), h("button", { type: "button", class: "date-picker__icon-btn", onClick: this.toggleDropdown, disabled: this.disabled, "aria-label": "Open calendar" }, calendarIcon)))), showDetails && (h("div", { key: '4e9fd12626bf5436604e28a236a304d60c452b50', class: "date-picker__details" }, this.error && h("div", { key: 'a40425ac84ee81671f4289f4323db9a9a472d3c7', class: "date-picker__error-message", id: this.errorId }, this.error))), this.isOpen && (h("div", { key: '86c55873b678dcfe74c09475cbde7657f1983799', class: {
+            } }, this.label && (h("label", { key: '38f0b77a965ecd259037a521984cf3edc81d83d0', class: "date-picker__label", id: this.labelId, htmlFor: this.inputId }, this.label, this.required && h("span", { key: '7d4967354fe742c08170c80286c97f353fa54d5f', class: "date-picker__required" }, "*"))), this.display === 'text' ? (h("div", { class: "date-picker__text-display", onClick: this.handleTextClick, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "dialog", role: "button", tabIndex: 0 }, h("span", { class: "date-picker__text-value" }, this.value ? this.formatDateForDisplay(this.value) : this.placeholder), calendarIcon)) : (h("div", { class: "date-picker__field" }, h("input", { id: this.inputId, type: "text", class: "date-picker__input", value: this.inputText, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onInput: this.handleInputChange, style: { backgroundColor: this.bgColor }, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "dialog", "aria-describedby": this.error ? this.errorId : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined }), h("div", { class: "date-picker__actions" }, this.clearable && this.value && !this.disabled && !this.readonly && (h("button", { type: "button", class: "date-picker__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u00D7")), h("button", { type: "button", class: "date-picker__icon-btn", onClick: this.toggleDropdown, disabled: this.disabled, "aria-label": "Open calendar" }, calendarIcon)))), showDetails && (h("div", { key: '66ff5c32e4f6ca2db4feac663377afde49476a21', class: "date-picker__details" }, this.error && h("div", { key: '03cfd6ba58a9bb716e24fe008928744403b5d54c', class: "date-picker__error-message", id: this.errorId }, this.error))), this.isOpen && (h("div", { key: '9b3f462b7c80ed5be13090d376d5f74a65563811', class: {
                 'date-picker__dropdown': true,
                 'date-picker__dropdown--top': this.dropdownPosition === 'top',
-            } }, h("xplor-inline-date-picker", { key: 'bd1636e13522a65ea6377857edea2928a6182282', selectedDate: this.value, min: this.min, max: this.max, readonly: this.readonly, color: this.color, startWeekOnSunday: this.startWeekOnSunday, onDateSelected: this.handleDateSelected }))))));
+            } }, h("xplor-inline-date-picker", { key: '214a5858b26b70a77d2ec4e896a5045581167d76', selectedDate: this.value, min: this.min, max: this.max, readonly: this.readonly, color: this.color, startWeekOnSunday: this.startWeekOnSunday, onDateSelected: this.handleDateSelected }))))));
     }
     static get is() { return "xplor-date-picker"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.css

@@ -1059,22 +1059,22 @@ ul.mdc-list li.mdc-list-item {
 }
 
 .drag-drop-card {
-  background-color: #f5f5f5;
-  border-radius: 8px;
+  background-color: #DFF2F1;
+  border-radius: 16px;
   border: 2px dashed var(--color-secondary);
-  min-height: 160px;
-  padding: 1.5rem;
+  min-height: 300px;
+  padding: 3rem 2rem;
   text-align: center;
   transition: all 0.2s ease;
   cursor: default;
 }
 .drag-drop-card:hover:not(.drag-drop-card--disabled) {
   border-color: var(--color-secondary);
-  background-color: #eeeeee;
+  background-color: var(--color-success-100, #c8e6c9);
 }
 .drag-drop-card--dragover {
   border: 2px dashed var(--color-secondary);
-  background-color: #eeeeee;
+  background-color: var(--color-success-100, #c8e6c9);
 }
 .drag-drop-card--disabled {
   opacity: 0.6;
@@ -1085,37 +1085,85 @@ ul.mdc-list li.mdc-list-item {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 0.75rem;
+  gap: 0.5rem;
+}
+
+.drag-drop-card__body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.drag-drop-card__text {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
 }
 
 .drag-drop-card__icon {
   color: var(--color-secondary);
-  width: 40px;
-  height: 40px;
+  width: 48px;
+  height: 48px;
+  flex-shrink: 0;
 }
 
 .drag-drop-card__title {
   color: #000000;
   font-family: Inter, sans-serif;
-  font-size: 18px;
+  font-size: 24px;
   font-weight: 700;
-  line-height: 24px;
+  line-height: 28px;
   letter-spacing: 0;
   margin: 0;
 }
 
-.drag-drop-card__accepts,
+.drag-drop-card__accepts {
+  color: #000000;
+  font-family: Inter, sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 23px;
+  margin: 0;
+}
+
 .drag-drop-card__divider {
   color: #000000;
   font-family: Inter, sans-serif;
   font-size: 14px;
   font-weight: 400;
-  line-height: 20px;
+  line-height: 23px;
   margin: 0;
 }
 
 .drag-drop-card__action {
-  margin-top: 0.25rem;
+  flex-shrink: 0;
+}
+
+.drag-drop-zone--horizontal .drag-drop-card {
+  min-height: 210px;
+  padding: 73px 173px;
+}
+.drag-drop-zone--horizontal .drag-drop-card__content {
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+}
+.drag-drop-zone--horizontal .drag-drop-card__body {
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+.drag-drop-zone--horizontal .drag-drop-card__text {
+  text-align: left;
+  max-width: 339px;
+}
+.drag-drop-zone--horizontal .drag-drop-card__title {
+  text-align: left;
+}
+.drag-drop-zone--horizontal .drag-drop-card__accepts {
+  text-align: left;
 }
 
 .file-info {
@@ -1230,19 +1278,4 @@ ul.mdc-list li.mdc-list-item {
 .file-info__remove:hover {
   background-color: #e0e0e0;
   color: #424242;
-}
-
-@media (max-width: 768px) {
-  .drag-drop-card {
-    min-height: 140px;
-  }
-  .drag-drop-card__title {
-    font-size: 16px;
-    line-height: 22px;
-  }
-  .drag-drop-card__accepts,
-  .drag-drop-card__divider {
-    font-size: 13px;
-    line-height: 18px;
-  }
 }