@limetech/lime-elements 38.31.0 → 38.31.2

package/dist/collection/components/breadcrumbs/breadcrumbs.css

@@ -67,6 +67,9 @@
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/button/button.css

@@ -73,6 +73,9 @@
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/button-group/button-group.css

@@ -73,6 +73,9 @@
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/card/card.css

@@ -67,6 +67,9 @@
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/chart/chart.css

@@ -67,6 +67,9 @@
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed
@@ -600,6 +603,9 @@ limel-spinner {
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/checkbox/checkbox.css

@@ -67,6 +67,9 @@
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/chip/chip.css

@@ -67,6 +67,9 @@
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/chip-set/chip-set.css

@@ -73,6 +73,9 @@
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed
@@ -1816,6 +1819,9 @@ limel-chip.can-be-removed {
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/circular-progress/circular-progress.css

@@ -73,6 +73,9 @@
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/code-editor/code-editor.css

@@ -513,6 +513,9 @@ span.CodeMirror-selectedtext { background: none; }
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/collapsible-section/collapsible-section.css

@@ -67,6 +67,9 @@
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed
@@ -128,7 +131,7 @@
 }
 section.open .open-close-toggle {
   background-color: var(--open-header-background-color, rgb(var(--contrast-100)));
-  border-radius: var(--border-radius-of-header) var(--border-radius-of-header) 0 0;
+  border-radius: var(--border-radius-of-header) var(--border-radius-of-header) var(--limel-cs-open-header-bottom-border-radius, 0) var(--limel-cs-open-header-bottom-border-radius, 0);
 }
 section.open .open-close-toggle:hover, section.open .open-close-toggle:focus-visible {
   background-color: var(--open-header-background-color, rgb(var(--contrast-300)));
@@ -212,27 +215,33 @@ section.open .divider-line {
 }
 
 .body {
-  --limel-cs-opacity-transition-speed: 0.1s;
-  --limel-cs-opacity-transition-delay: 0s;
-  --limel-cs-grid-template-rows-transition-speed: 0.3s;
   transition: grid-template-rows var(--limel-cs-grid-template-rows-transition-speed) cubic-bezier(1, 0.09, 0, 0.89);
   display: grid;
-  grid-template-rows: 0fr;
+  grid-template-rows: var(--limel-cs-grid-template-rows);
 }
 .body slot {
   transition: opacity var(--limel-cs-opacity-transition-speed) ease var(--limel-cs-opacity-transition-delay);
   display: block;
   overflow: hidden;
+}
+
+:host(limel-collapsible-section:not([is-open])) {
+  --limel-cs-opacity-transition-speed: 0.1s;
+  --limel-cs-opacity-transition-delay: 0s;
+  --limel-cs-grid-template-rows-transition-speed: 0.3s;
+  --limel-cs-grid-template-rows: 0fr;
+}
+:host(limel-collapsible-section:not([is-open])) slot {
   opacity: 0;
 }
 
-section.open .body {
+:host(limel-collapsible-section[is-open]) {
   --limel-cs-opacity-transition-speed: 0.4s;
   --limel-cs-opacity-transition-delay: 0.3s;
   --limel-cs-grid-template-rows-transition-speed: 0.46s;
-  grid-template-rows: 1fr;
+  --limel-cs-grid-template-rows: 1fr;
 }
-section.open .body slot {
+:host(limel-collapsible-section[is-open]) slot {
   opacity: 1;
 }
 

package/dist/collection/components/color-picker/color-picker-palette.css

@@ -73,6 +73,9 @@
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/color-picker/color-picker.css

@@ -67,6 +67,9 @@
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/date-picker/flatpickr-adapter/flatpickr-adapter.css

@@ -73,6 +73,9 @@
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/dialog/dialog.css

@@ -73,6 +73,9 @@
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/dock/dock-button/dock-button.css

@@ -67,6 +67,9 @@
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/dock/dock.css

@@ -67,6 +67,9 @@
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/drag-handle/drag-handle.css

@@ -0,0 +1,174 @@
+@charset "UTF-8";
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
+ *
+ * Or, just don't import anything, that works too.
+ */
+/**
+* This can be used on a trigger element that opens a dropdown menu or a popover.
+*/
+/**
+ * This mixin will mask out the content that is close to
+ * the edges of a scrollable area.
+ * - If the scrollable content has `overflow-y`, use `vertically`
+ * as an argument for `$direction`.
+ - If the scrollable content has `overflow-x`, use `horizontally`
+ * as an argument for `$direction`.
+ *
+ * For the visual effect to work smoothly, we need to make sure that
+ * the size of the fade-out edge effect is the same as the
+ * internal paddings of the scrollable area. Otherwise, content of a
+ * scrollable area that does not have a padding will fade out before
+ * any scrolling has been done.
+ * This is why this mixin already adds paddings, which automatically
+ * default to the size of the fade-out effect.
+ * This size defaults to `1rem`, but to override the size use
+ * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
+ * when `vertically` argument is set, and use
+ * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
+ * when `horizontally` argument is set.
+ * Of course you can also programmatically increase and decrease the
+ * size of these variables for each edge, based on the amount of
+ * scrolling that has been done by the user. In this case, make sure
+ * to add a custom padding where the mixin is used, to override
+ * the paddings that are automatically added by the mixin in the
+ * compiled CSS code.
+ */
+/**
+* This mixin will add an animated underline to the bottom of an `a` elements.
+* Note that you may need to add `all: unset;` –depending on your use case–
+* before using this mixin.
+*/
+/**
+* This mixin creates a cross-browser font stack.
+* - `sans-serif` can be used for the UI of the components.
+* - `monospace` can be used for code.
+*
+* ⚠️ If we change the font stacks, we need to update
+* 1. the consumer documentation in `README.md`, and
+* 2. the CSS variables of `--kompendium-example-font-family`
+* in the `<style>` tag of `index.html`.
+*/
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
+/**
+* This mixin will add a chessboard background pattern,
+* typically used to visualize transparency.
+*/
+/**
+* Make a container resizable by the user.
+* This is used in the documentations and examples
+* of some components, to demonstrate how the component
+* behaves in a resizable container.
+*/
+/**
+ * Drag to reorder mixins
+ */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
+limel-drag-handle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+button.limel-drag-handle {
+  all: unset;
+  transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
+  cursor: pointer;
+  color: var(--limel-theme-on-surface-color);
+  background-color: transparent;
+  touch-action: none;
+  cursor: grab;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.4rem;
+  padding: 0.5rem;
+  max-height: 2.25rem;
+  max-width: 2.25rem;
+  color: rgb(var(--contrast-900));
+}
+button.limel-drag-handle:focus {
+  outline: none;
+}
+button.limel-drag-handle:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
+button.limel-drag-handle:hover, button.limel-drag-handle:focus, button.limel-drag-handle:focus-visible {
+  will-change: color, background-color, box-shadow, transform;
+}
+button.limel-drag-handle:hover, button.limel-drag-handle:focus-visible {
+  transform: translate3d(0, 0.01rem, 0);
+  color: var(--mdc-theme-primary);
+  background-color: transparent;
+}
+button.limel-drag-handle:hover {
+  box-shadow: var(--button-shadow-hovered);
+}
+button.limel-drag-handle:active {
+  --limel-clickable-transform-timing-function: cubic-bezier(
+      0.83,
+      -0.15,
+      0.49,
+      1.16
+  );
+  transform: translate3d(0, 0.05rem, 0);
+  box-shadow: var(--button-shadow-pressed);
+}
+button.limel-drag-handle:hover, button.limel-drag-handle:active {
+  --limel-clickable-transition-speed: 0.2s;
+  --limel-clickable-transform-speed: 0.16s;
+}
+button.limel-drag-handle:active {
+  cursor: grabbing;
+}
+button.limel-drag-handle:active, button.limel-drag-handle:hover {
+  box-shadow: none !important;
+}
+button.limel-drag-handle .drag-icon {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 0.2rem;
+}
+limel-drag-handle[drag-direction=horizontal] button.limel-drag-handle .drag-icon {
+  grid-template-columns: 1fr 1fr;
+}
+button.limel-drag-handle .drag-icon div {
+  transition: transform 0.2s ease, background-color 0.2s ease;
+  height: 0.125rem;
+  width: 0.125rem;
+  border-radius: 1rem;
+  background-color: currentColor;
+  transform: scale(1);
+}
+
+.is-being-dragged button.limel-drag-handle .drag-icon div,
+button.limel-drag-handle:active .drag-icon div,
+button.limel-drag-handle:focus .drag-icon div,
+button.limel-drag-handle:hover .drag-icon div,
+button.limel-drag-handle:focus-visible .drag-icon div {
+  background-color: var(--mdc-theme-primary);
+  transform: scale(1.5);
+}

package/dist/collection/components/drag-handle/drag-handle.js

@@ -0,0 +1,125 @@
+import { h, Host } from '@stencil/core';
+import translate from '../../global/translations';
+/**
+ * This component resembles a drag handle button, but is implemented
+ * as a `private` component to allow for easier styling and future extensions.
+ *
+ * :::important
+ * This component has its `shadow` set to `false` in order to
+ * integrate well with the drag-and-drop functionality, as well as
+ * providing a better accessibility.
+ *
+ * Keep in mind that its styles might be affected by the consumer
+ * component, due to its light dom.
+ * :::
+ *
+ * :::tip
+ * It's recommended to place the drag handle on the right side of
+ * the item it is meant to reorder, to ensure consistent layout
+ * design conventions.
+ * :::
+ *
+ * @exampleComponent limel-example-drag-handle-basic
+ * @exampleComponent limel-example-drag-handle-horizontal
+ *
+ * @private
+ */
+export class DragHandleComponent {
+  constructor() {
+    this.dragHandleId = 'drag-handle-' + crypto.randomUUID();
+    this.handleClick = (event) => {
+      // Prevent bubbling so the parent item does not treat the pointer click as
+      // a toggle or reorder action.
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    this.dragDirection = 'vertical';
+    this.tooltipOpenDirection = 'left';
+    this.language = 'en';
+  }
+  render() {
+    const tooltipLabel = translate.get('drag-handle.drag-to-reorder', this.language);
+    const ariaLabel = translate.get('drag-handle.drag-handle', this.language);
+    return (h(Host, null, h("button", { "data-drag-handle": true, type: "button", class: "limel-drag-handle", tabindex: -1, "aria-label": ariaLabel, id: this.dragHandleId, onClick: this.handleClick }, h("div", { class: "drag-icon", role: "presentation", "aria-hidden": "true" }, h("div", { key: "1" }), h("div", { key: "2" }), h("div", { key: "3" }), h("div", { key: "4" }), h("div", { key: "5" }), h("div", { key: "6" })), h("limel-tooltip", { openDirection: this.tooltipOpenDirection, elementId: this.dragHandleId, label: tooltipLabel }))));
+  }
+  static get is() { return "limel-drag-handle"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["drag-handle.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["drag-handle.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "dragDirection": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'vertical' | 'horizontal'",
+          "resolved": "\"horizontal\" | \"vertical\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The direction in which the drag handle can be used to reorder items."
+        },
+        "attribute": "drag-direction",
+        "reflect": true,
+        "defaultValue": "'vertical'"
+      },
+      "tooltipOpenDirection": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "OpenDirection",
+          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "references": {
+            "OpenDirection": {
+              "location": "import",
+              "path": "../menu/menu.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The preferred direction for the tooltip to open.\nDefaults to 'left', as our recommended placement for a drag handle\nin the UI is on the far right side of draggable elements."
+        },
+        "attribute": "tooltip-open-direction",
+        "reflect": true,
+        "defaultValue": "'left'"
+      },
+      "language": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Languages",
+          "resolved": "\"da\" | \"de\" | \"en\" | \"fi\" | \"fr\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
+          "references": {
+            "Languages": {
+              "location": "import",
+              "path": "../date-picker/date.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Language to use for translations."
+        },
+        "attribute": "language",
+        "reflect": true,
+        "defaultValue": "'en'"
+      }
+    };
+  }
+}
+//# sourceMappingURL=drag-handle.js.map

package/dist/collection/components/drag-handle/drag-handle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drag-handle.js","sourceRoot":"","sources":["../../../src/components/drag-handle/drag-handle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAIlD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAMH,MAAM,OAAO,mBAAmB;;IAqBX,iBAAY,GAAG,cAAc,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC;IA6CpD,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;MACjD,0EAA0E;MAC1E,8BAA8B;MAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,KAAK,CAAC,eAAe,EAAE,CAAC;IAC5B,CAAC,CAAC;yBAlEgD,UAAU;gCAQf,MAAM;oBAMtB,IAAI;;EAI1B,MAAM;IACT,MAAM,YAAY,GAAG,SAAS,CAAC,GAAG,CAC9B,6BAA6B,EAC7B,IAAI,CAAC,QAAQ,CAChB,CAAC;IACF,MAAM,SAAS,GAAG,SAAS,CAAC,GAAG,CAC3B,yBAAyB,EACzB,IAAI,CAAC,QAAQ,CAChB,CAAC;IAEF,OAAO,CACH,EAAC,IAAI;MACD,wCAEI,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,mBAAmB,EACzB,QAAQ,EAAE,CAAC,CAAC,gBACA,SAAS,EACrB,EAAE,EAAE,IAAI,CAAC,YAAY,EACrB,OAAO,EAAE,IAAI,CAAC,WAAW;QAEzB,WACI,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,cAAc,iBACP,MAAM;UAElB,WAAK,GAAG,EAAC,GAAG,GAAG;UACf,WAAK,GAAG,EAAC,GAAG,GAAG;UACf,WAAK,GAAG,EAAC,GAAG,GAAG;UACf,WAAK,GAAG,EAAC,GAAG,GAAG;UACf,WAAK,GAAG,EAAC,GAAG,GAAG;UACf,WAAK,GAAG,EAAC,GAAG,GAAG,CACb;QACN,qBACI,aAAa,EAAE,IAAI,CAAC,oBAAoB,EACxC,SAAS,EAAE,IAAI,CAAC,YAAY,EAC5B,KAAK,EAAE,YAAY,GACrB,CACG,CACN,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQJ","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\nimport translate from '../../global/translations';\nimport { Languages } from '../date-picker/date.types';\nimport { OpenDirection } from '../menu/menu.types';\n\n/**\n * This component resembles a drag handle button, but is implemented\n * as a `private` component to allow for easier styling and future extensions.\n *\n * :::important\n * This component has its `shadow` set to `false` in order to\n * integrate well with the drag-and-drop functionality, as well as\n * providing a better accessibility.\n *\n * Keep in mind that its styles might be affected by the consumer\n * component, due to its light dom.\n * :::\n *\n * :::tip\n * It's recommended to place the drag handle on the right side of\n * the item it is meant to reorder, to ensure consistent layout\n * design conventions.\n * :::\n *\n * @exampleComponent limel-example-drag-handle-basic\n * @exampleComponent limel-example-drag-handle-horizontal\n *\n * @private\n */\n@Component({\n    tag: 'limel-drag-handle',\n    shadow: false,\n    styleUrl: 'drag-handle.scss',\n})\nexport class DragHandleComponent {\n    /**\n     * The direction in which the drag handle can be used to reorder items.\n     */\n    @Prop({ reflect: true })\n    public dragDirection: 'vertical' | 'horizontal' = 'vertical';\n\n    /**\n     * The preferred direction for the tooltip to open.\n     * Defaults to 'left', as our recommended placement for a drag handle\n     * in the UI is on the far right side of draggable elements.\n     */\n    @Prop({ reflect: true })\n    public tooltipOpenDirection: OpenDirection = 'left';\n\n    /**\n     * Language to use for translations.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    private readonly dragHandleId = 'drag-handle-' + crypto.randomUUID();\n\n    public render() {\n        const tooltipLabel = translate.get(\n            'drag-handle.drag-to-reorder',\n            this.language\n        );\n        const ariaLabel = translate.get(\n            'drag-handle.drag-handle',\n            this.language\n        );\n\n        return (\n            <Host>\n                <button\n                    data-drag-handle\n                    type=\"button\"\n                    class=\"limel-drag-handle\"\n                    tabindex={-1}\n                    aria-label={ariaLabel}\n                    id={this.dragHandleId}\n                    onClick={this.handleClick}\n                >\n                    <div\n                        class=\"drag-icon\"\n                        role=\"presentation\"\n                        aria-hidden=\"true\"\n                    >\n                        <div key=\"1\" />\n                        <div key=\"2\" />\n                        <div key=\"3\" />\n                        <div key=\"4\" />\n                        <div key=\"5\" />\n                        <div key=\"6\" />\n                    </div>\n                    <limel-tooltip\n                        openDirection={this.tooltipOpenDirection}\n                        elementId={this.dragHandleId}\n                        label={tooltipLabel}\n                    />\n                </button>\n            </Host>\n        );\n    }\n\n    private readonly handleClick = (event: MouseEvent) => {\n        // Prevent bubbling so the parent item does not treat the pointer click as\n        // a toggle or reorder action.\n        event.preventDefault();\n        event.stopPropagation();\n    };\n}\n"]}

package/dist/collection/components/file/file.css

@@ -67,6 +67,9 @@
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/file-viewer/file-viewer.css

@@ -73,6 +73,9 @@
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed