@getflip/swirl-components 0.526.0 → 0.528.0

package/dist/collection/components/swirl-data-cell/swirl-data-cell.js

@@ -8,6 +8,8 @@ import classnames from "classnames";
 export class SwirlDataCell {
     constructor() {
         this.intent = "default";
+        this.interactive = false;
+        this.size = "m";
         this.vertical = false;
         this.elementId = `data-cell-${crypto.randomUUID()}`;
         this.handleRadioClick = (event) => {
@@ -34,13 +36,14 @@ export class SwirlDataCell {
             "SWIRL-DATA-CELL");
         const hasCheckbox = Boolean(this.el.querySelector('swirl-checkbox[slot="content"]'));
         const hasRadio = Boolean(this.el.querySelector('swirl-radio[slot="content"]'));
-        const className = classnames("data-cell", {
+        const isInteractive = this.interactive || Boolean(this.href);
+        const className = classnames("data-cell", `data-cell--size-${this.size}`, {
             "data-cell--vertical": this.vertical,
             "data-cell--has-media": hasMedia,
             "data-cell--has-suffix": hasSuffix,
             "data-cell--has-content": hasContent,
             "data-cell--no-label": !hasLabel,
-            "data-cell--interactive": hasCheckbox || hasRadio,
+            "data-cell--interactive": isInteractive || hasCheckbox || hasRadio,
             [`data-cell--intent-${this.intent}`]: this.intent,
         });
         const labelId = `${this.elementId}-label`;
@@ -49,8 +52,15 @@ export class SwirlDataCell {
         const hostRole = isInDataCellStack ? "listitem" : "group";
         const contentRole = hasCheckbox || hasRadio ? "button" : undefined;
         const wrapperRole = isInDataCellStack && !contentRole ? "group" : contentRole;
-        const labelContent = (h("swirl-stack", { key: '1a8d3ade2a5ce41b4ff0f81500def7aa4381f2d9', orientation: "horizontal", align: "center", spacing: "4" }, h("span", { key: '2eb9b618b7ef03428c1540e6d3374af952ab0b89', class: "data-cell__label", id: labelId, role: "term" }, this.label), this.tooltip && (h("swirl-tooltip", { key: '8d286960ce1806dd24f364ef10cb1ff4fc5e8028', class: "data-cell__tooltip", content: this.tooltip, position: "right" }, h("swirl-icon-info", { key: 'b35a894b40da6ec61229c63fe709e0aa303a8573', size: 16, tabIndex: 0 })))));
-        return (h(Host, { key: '24d2c5a77d20a67d6c8de7242c74b4820f09146a', role: hostRole }, h("div", { key: '4e1c083711986f3f206f799505da137661466ff6', class: className, part: "data-cell", onClick: hasCheckbox || hasRadio ? this.handleClick : undefined, role: wrapperRole, tabIndex: hasCheckbox || hasRadio ? 0 : undefined }, hasMedia && (h("div", { key: '035d177d63dbe189633d4c121f3ef5cc6d3f680d', class: "data-cell__media", "aria-hidden": "true" }, h("slot", { key: '4dd8f0a1625531ad1e31e52c4aff6e4c7ef180bb', name: "media" }))), h("div", { key: '7802b89ea49b36281097aa57c4cdf7cdb996b5cf', class: "data-cell__content" }, hasLabel && (h("div", { key: 'cbd0d077017af1dc7ffecaf1a4b0eb9e3d72ce29', class: "data-cell__label-wrapper" }, labelContent)), (hasContent || this.value || hasSuffix) && (h("div", { key: 'b43be51eda47779f425e4653269989732aef15ba', class: "data-cell__value-wrapper", role: "definition", "aria-labelledby": hasLabel ? labelId : undefined, id: valueId }, hasContent ? (h("div", { class: "data-cell__input" }, h("slot", { name: "content" }))) : (this.value && h("div", { class: "data-cell__value" }, this.value))))), hasSuffix && (h("div", { key: '7a2f4d6ca3f9865b35d0320120d38d41cf404cb7', class: "data-cell__suffix" }, h("slot", { key: '1a6f4e9464eeaca483a97b7c051ba0042e38d37e', name: "suffix" }))))));
+        const Tag = Boolean(this.href) ? "a" : this.interactive ? "button" : "div";
+        const labelContent = (h("swirl-stack", { key: '02d9b33111b38a7e01c215ab22316e4702273d2f', orientation: "horizontal", align: "center", spacing: "4" }, h("span", { key: '7c214d31b78bc9ed73bef749144fb090845be335', class: "data-cell__label", id: labelId, role: isInteractive ? undefined : "term" }, this.label), this.tooltip && (h("swirl-tooltip", { key: '5507dcf689141cf6492a0e0ebbac7f6d30bb9571', class: "data-cell__tooltip", content: this.tooltip, position: "right" }, h("swirl-icon-info", { key: 'ffd009f55337721081dd67811178625da5296395', size: 16, tabIndex: 0 })))));
+        return (h(Host, { key: '3938b80ef59b8499ca122057cb2a601215fe63ca', role: hostRole }, h(Tag, { key: 'd5e938b1e20cbd8ae35b3010e69655f04f31c4b3', class: className, href: this.href, onClick: hasCheckbox || hasRadio ? this.handleClick : undefined, part: "data-cell", rel: Boolean(this.href) && this.linkTarget === "_blank"
+                ? "noreferrer"
+                : undefined, role: isInteractive ? undefined : wrapperRole, tabIndex: isInteractive ? undefined : hasCheckbox || hasRadio ? 0 : undefined, target: this.linkTarget, type: Boolean(this.href)
+                ? undefined
+                : this.interactive
+                    ? "button"
+                    : undefined }, hasMedia && (h("div", { key: '11698c07d07a15d3e1402d5e7f06549ce12fec19', class: "data-cell__media", "aria-hidden": "true" }, h("slot", { key: '6c98bbb53fae7915300beafb9dbecc35aff6287c', name: "media" }))), h("div", { key: '9370d31ac4d2d23dc0f40bb3ece90a608e182b83', class: "data-cell__content" }, hasLabel && (h("div", { key: 'a5ce98e4af9f182a159e15ca5b967a506f5771e3', class: "data-cell__label-wrapper" }, labelContent)), (hasContent || this.value || hasSuffix) && (h("div", { key: '2360d1c1af966919370d00c44217314b7d91eece', class: "data-cell__value-wrapper", role: isInteractive ? undefined : "definition", "aria-labelledby": hasLabel && !isInteractive ? labelId : undefined, id: valueId }, hasContent ? (h("div", { class: "data-cell__input" }, h("slot", { name: "content" }))) : (this.value && h("div", { class: "data-cell__value" }, this.value))))), hasSuffix && (h("div", { key: '85482b447cb0d16b3c738a78f943ae8fd26281d8', class: "data-cell__suffix" }, h("slot", { key: '0568683b289f22aed8aa6e0fc621c36d50b4d177', name: "suffix" }))))));
     }
     static get is() { return "swirl-data-cell"; }
     static get encapsulation() { return "shadow"; }
@@ -66,6 +76,25 @@ export class SwirlDataCell {
     }
     static get properties() {
         return {
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
             "intent": {
                 "type": "string",
                 "mutable": false,
@@ -92,6 +121,26 @@ export class SwirlDataCell {
                 "attribute": "intent",
                 "defaultValue": "\"default\""
             },
+            "interactive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "interactive",
+                "defaultValue": "false"
+            },
             "label": {
                 "type": "string",
                 "mutable": false,
@@ -111,6 +160,51 @@ export class SwirlDataCell {
                 "reflect": false,
                 "attribute": "label"
             },
+            "linkTarget": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "link-target"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlDataCellSize",
+                    "resolved": "\"m\" | \"s\"",
+                    "references": {
+                        "SwirlDataCellSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-data-cell/swirl-data-cell.tsx",
+                            "id": "src/components/swirl-data-cell/swirl-data-cell.tsx::SwirlDataCellSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "\"m\""
+            },
             "tooltip": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/swirl-data-cell/swirl-data-cell.stories.js

@@ -194,6 +194,27 @@ export const WithCheckbox = () => {
   `;
     return stack;
 };
+export const InteractiveCompactCells = () => {
+    const stack = generateStoryElement("swirl-data-cell-stack", {});
+    stack.innerHTML = `
+    <!-- Compact interactive cell -->
+    <swirl-data-cell interactive size="s" value="Feedback & Ideas">
+      <swirl-avatar slot="media" label="Feedback & Ideas" icon="<swirl-icon-chat-bubble></swirl-icon-chat-bubble>" size="s"></swirl-avatar>
+    </swirl-data-cell>
+
+    <!-- Compact interactive cell with a trailing tag -->
+    <swirl-data-cell interactive size="s" value="Approvals">
+      <swirl-avatar slot="media" label="Approvals" icon="<swirl-icon-chat-bubble></swirl-icon-chat-bubble>" size="s"></swirl-avatar>
+      <swirl-tag slot="suffix" label="Approval" intent="warning"></swirl-tag>
+    </swirl-data-cell>
+
+    <!-- Compact cell rendered as a link -->
+    <swirl-data-cell href="#" size="s" value="Announcements">
+      <swirl-avatar slot="media" label="Announcements" icon="<swirl-icon-chat-bubble></swirl-icon-chat-bubble>" size="s"></swirl-avatar>
+    </swirl-data-cell>
+  `;
+    return stack;
+};
 export const WithRadioButton = () => {
     const stack = generateStoryElement("swirl-data-cell-stack", {});
     stack.innerHTML = `

package/dist/collection/components/swirl-data-cell-stack/swirl-data-cell-stack.css

@@ -75,6 +75,30 @@
   --swirl-data-cell-border-radius: var(--s-border-radius-l);
 }
 
+.data-cell-stack__cells
+  ::slotted(swirl-data-cell[size="s"]:first-of-type:not(:last-of-type)) {
+  --swirl-data-cell-border-radius: var(--s-border-radius-base)
+    var(--s-border-radius-base) var(--s-border-radius-s) var(--s-border-radius-s);
+}
+
+.data-cell-stack__cells
+  ::slotted(swirl-data-cell[size="s"]:last-of-type:not(:first-of-type)) {
+  --swirl-data-cell-border-radius: var(--s-border-radius-s)
+    var(--s-border-radius-s) var(--s-border-radius-base) var(--s-border-radius-base);
+}
+
+.data-cell-stack__cells
+  ::slotted(
+    swirl-data-cell[size="s"]:not(:first-of-type):not(:last-of-type)
+  ) {
+  --swirl-data-cell-border-radius: var(--s-border-radius-s);
+}
+
+.data-cell-stack__cells
+  ::slotted(swirl-data-cell[size="s"]:first-of-type:last-of-type) {
+  --swirl-data-cell-border-radius: var(--s-border-radius-base);
+}
+
 .data-cell-stack__cta {
   display: flex;
   align-items: center;

package/dist/collection/components/swirl-date-input/swirl-date-input.css

@@ -27,6 +27,20 @@
   }
     }
 
+/*
+   * swirl-form-control's inline mode shows the label in place of a
+   * placeholder, so the input's own default placeholder ("yyyy-mm-dd") must
+   * never render on top of it, including while focused and still empty.
+   */
+
+.date-input--inline .date-input__input::-moz-placeholder {
+    color: transparent;
+  }
+
+.date-input--inline .date-input__input::placeholder {
+    color: transparent;
+  }
+
 .date-input__input {
   display: inline-flex;
   width: calc(100% - 1.25rem - var(--s-space-8));
@@ -50,6 +64,14 @@
     background-color: transparent;
   }
 
+.date-input__input::-moz-placeholder {
+    color: var(--swirl-input-placeholder-color);
+  }
+
+.date-input__input::placeholder {
+    color: var(--swirl-input-placeholder-color);
+  }
+
 @media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
 
 .date-input__input {

package/dist/collection/components/swirl-file-viewer/viewers/swirl-file-viewer-pdf/swirl-file-viewer-pdf.js

@@ -176,7 +176,11 @@ export class SwirlFileViewerPdf {
         const annotationContainer = container?.querySelector(".file-viewer-pdf__annotation-container");
         this.renderingPageNumbers = [...this.renderingPageNumbers, page.pageNumber];
         const scale = forPrint ? this.getPrintScale(page) : this.getScale(page);
-        const outputScale = Math.max(window.devicePixelRatio || 2, 2);
+        // The print scale already resolves to the target print resolution, so it
+        // must not be multiplied by the device pixel ratio on top of that.
+        const outputScale = forPrint
+            ? 1
+            : Math.max(window.devicePixelRatio || 2, 2);
         const transform = [outputScale, 0, 0, outputScale, 0, 0];
         const viewport = page.getViewport({ scale });
         const context = canvas.getContext("2d");
@@ -314,8 +318,44 @@ export class SwirlFileViewerPdf {
         const pageEl = this.el.shadowRoot.querySelector(`[data-page-number="${pageNumber}"]`);
         pageEl?.scrollIntoView({ behavior: "smooth" });
     }
-    async openPrintDialog() {
+    getPrintPages() {
         const canvases = Array.from(this.scrollContainer.querySelectorAll("canvas"));
+        return canvases
+            .map((canvas) => {
+            const container = canvas.closest(".file-viewer-pdf__page");
+            const page = this.pages.find((page) => page?.pageNumber === +container?.dataset.pageNumber);
+            if (!Boolean(page)) {
+                return undefined;
+            }
+            // The viewport takes the page rotation and its user unit into account,
+            // page.view does not.
+            const viewport = page.getViewport({ scale: 1 });
+            // The page sizes are converted to millimeters, because "@page" needs a
+            // physical unit. A PDF user space unit is 1/72 inch, an inch is 25.4mm.
+            return {
+                canvas,
+                height: +((viewport.height * 25.4) / 72).toFixed(2),
+                width: +((viewport.width * 25.4) / 72).toFixed(2),
+            };
+        })
+            .filter(Boolean);
+    }
+    async openPrintDialog() {
+        const printPages = this.getPrintPages();
+        // Pages of a document may differ in size and orientation, so we collect the
+        // distinct sizes and print every page on a sheet matching its own size.
+        const sizes = [];
+        const sizeIndexes = printPages.map(({ height, width }) => {
+            const index = sizes.findIndex((size) => size.height === height && size.width === width);
+            if (index >= 0) {
+                sizes[index].count += 1;
+                return index;
+            }
+            return sizes.push({ count: 1, height, width }) - 1;
+        });
+        // Browsers without support for named pages ignore the "page" property and
+        // fall back to the default @page rule, so we default to the most used size.
+        const defaultSize = sizes.reduce((previous, current) => current.count > previous.count ? current : previous, sizes[0] ?? { count: 0, height: 297, width: 210 });
         let styles = `
       *, *:before, *:after {
         margin: 0;
@@ -324,21 +364,48 @@ export class SwirlFileViewerPdf {
       }
 
       @page {
-        size: a4 !important;
+        size: ${defaultSize.width}mm ${defaultSize.height}mm;
+        margin: 0;
+        padding: 0;
+      }
+
+      ${sizes
+            .map((size, index) => `
+      @page size-${index} {
+        size: ${size.width}mm ${size.height}mm;
         margin: 0;
         padding: 0;
       }
 
-      html, body {
-        width: 210mm;
-        height: 297mm;
+      .file-viewer-pdf-print-page--size-${index} {
+        page: size-${index};
+        width: ${size.width}mm;
+        /* Browsers round the printable area down to whole pixels. A page box
+           of exactly the sheet height would overflow by a fraction of a pixel
+           and push a blank sheet after every page, so we subtract a hairline. */
+        height: calc(${size.height}mm - 1px);
+      }
+      `)
+            .join("")}
+
+      .file-viewer-pdf-print-page {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        break-after: page;
+        page-break-after: always;
+      }
+
+      .file-viewer-pdf-print-page:last-child {
+        break-after: auto;
+        page-break-after: auto;
       }
 
       img {
         display: block;
         max-width: 100%;
         max-height: 100%;
-        page-break-after: always;
       }
     `;
         let html = `
@@ -348,14 +415,14 @@ export class SwirlFileViewerPdf {
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>${this.file}</title>
+        <title>Print PDF</title>
         <style>${styles}</style>
       </head>
       <body>
     `;
-        for (const canvas of canvases) {
-            html += `<img src="${canvas.toDataURL()}">`;
-        }
+        printPages.forEach(({ canvas }, index) => {
+            html += `<div class="file-viewer-pdf-print-page file-viewer-pdf-print-page--size-${sizeIndexes[index]}"><img src="${canvas.toDataURL()}"></div>`;
+        });
         html += `
       </body>
       </html>
@@ -372,7 +439,8 @@ export class SwirlFileViewerPdf {
     getScale(page) {
         const padding = isMobileViewport() ? 0 : 32;
         if (this.zoom === "auto") {
-            return (this.scrollContainer?.clientWidth - padding) / page.view[2];
+            const { width } = page.getViewport({ scale: 1 });
+            return (this.scrollContainer?.clientWidth - padding) / width;
         }
         else if (isNaN(this.zoom)) {
             return 1;
@@ -380,11 +448,14 @@ export class SwirlFileViewerPdf {
         return this.zoom;
     }
     getPrintScale(page) {
-        // For performance reasons we have to limit the print scale. The resulting
-        // width of a page should not exceed 2480px in width, and 3508px in height.
-        // This relates to the maximum resolution of an A4 page at 300 DPI, which
-        // should be sufficient for a decent print quality.
-        return Math.min(Math.min(2480 / page.view[2], 3508 / page.view[3]), 2);
+        // For performance reasons we have to limit the print scale. A page is
+        // rendered at 300 DPI at most, and never larger than an A4 page at 300 DPI
+        // (2480px x 3508px) along its own orientation. The viewport is used instead
+        // of page.view, because it accounts for the page rotation and user unit.
+        const { height, width } = page.getViewport({ scale: 1 });
+        const longSide = Math.max(width, height);
+        const shortSide = Math.min(width, height);
+        return Math.min(3508 / longSide, 2480 / shortSide, 300 / 72);
     }
     restoreScrollPosition() {
         this.scrollContainer.scrollTop =
@@ -396,7 +467,7 @@ export class SwirlFileViewerPdf {
         const showPagination = !this.error && !this.loading && this.visiblePages.length > 0;
         const showSpinner = this.loading;
         const className = classnames("file-viewer-pdf", `file-viewer-pdf--view-mode-${this.viewMode}`);
-        return (h(Host, { key: '4ddc65d65e568f2b9a671e85d74ccae8f12e38ba', class: className, exportparts: "file-viewer-pdf__pagination" }, this.error && (h("swirl-inline-error", { key: '0d74065cc7946a683d4d314db1b94a6d096eaff0', class: "file-viewer-pdf__error", message: this.errorMessage })), h("div", { key: '75bc1eabede54634872a26fd37cc240193b70beb', "aria-describedby": "pagination", class: "file-viewer-pdf__pages", onScroll: this.onScroll, ref: (el) => (this.scrollContainer = el) }, this.pages.map((page) => {
+        return (h(Host, { key: '198513417de5a71c7adee4b5298b94c6604d5ed7', class: className, exportparts: "file-viewer-pdf__pagination" }, this.error && (h("swirl-inline-error", { key: '0482bda5cc1bf136711819fb15e69cc51038eeb3', class: "file-viewer-pdf__error", message: this.errorMessage })), h("div", { key: '908639a41c37499bf63b3678a04a1f1b3d7080b0', "aria-describedby": "pagination", class: "file-viewer-pdf__pages", onScroll: this.onScroll, ref: (el) => (this.scrollContainer = el) }, this.pages.map((page) => {
             const viewport = page.getViewport({
                 scale: this.getScale(page),
             });
@@ -410,7 +481,7 @@ export class SwirlFileViewerPdf {
                     width: `${width}px`,
                     height: `${height}px`,
                 }, tabIndex: 0 }, !rendered && (h("swirl-spinner", { class: "file-viewer-pdf__page-spinner" })), h("canvas", { class: "file-viewer-pdf__canvas", style: { opacity: rendered ? "1" : "0" } }), h("div", { class: "file-viewer-pdf__text-container" }), h("div", { class: "file-viewer-pdf__annotation-container" })));
-        })), showPagination && (h("span", { key: '4fdff5808580649526bead7b37fe9f4b051d4e8d', class: "file-viewer-pdf__pagination", id: "pagination", part: "file-viewer-pdf__pagination" }, h("span", { key: 'e83cbc96700c427ed7a1072aeb1b552153f9c5b7', "aria-current": "page" }, this.currentPage), " /", " ", this.doc.numPages)), showSpinner && (h("div", { key: '3cf657ab9eb530b3d888cecedadf8187f7eaff58', class: "file-viewer-pdf__spinner" }, h("swirl-spinner", { key: 'eb5b86cb3017ccea0787f8c377cdcd66b0d296ea' })))));
+        })), showPagination && (h("span", { key: '485ba0e4c8b0c4ed523fd554b5e99e3b032292b6', class: "file-viewer-pdf__pagination", id: "pagination", part: "file-viewer-pdf__pagination" }, h("span", { key: '150609a29f401e09f87fd99063a7c157458a9e6e', "aria-current": "page" }, this.currentPage), " /", " ", this.doc.numPages)), showSpinner && (h("div", { key: 'ad11d44f9fbc7dbb57dd50c47d867b8a5c37f3a7', class: "file-viewer-pdf__spinner" }, h("swirl-spinner", { key: '19dffb0631f095429a3ea05a61783f965d8ef207' })))));
     }
     static get is() { return "swirl-file-viewer-pdf"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-form-control/swirl-form-control.css

@@ -22,14 +22,32 @@
 
 .form-control:not(.form-control--has-value):not(.form-control--has-focus):not(
       .form-control--is-select
-    ):not(.form-control--has-placeholder) .form-control__input {
+    ):is(.form-control--inline, :not(.form-control--has-placeholder)):not(.form-control--inline) .form-control__input {
       overflow: hidden;
       max-height: 0;
     }
 
 .form-control:not(.form-control--has-value):not(.form-control--has-focus):not(
       .form-control--is-select
-    ):not(.form-control--has-placeholder) .form-control__label-text {
+    ):is(.form-control--inline, :not(.form-control--has-placeholder)).form-control--inline {
+      --swirl-input-placeholder-color: transparent;
+    }
+
+.form-control:not(.form-control--has-value):not(.form-control--has-focus):not(
+      .form-control--is-select
+    ):is(.form-control--inline, :not(.form-control--has-placeholder)).form-control--inline .form-control__label-text {
+        pointer-events: none;
+      }
+
+.form-control:not(.form-control--has-value):not(.form-control--has-focus):not(
+      .form-control--is-select
+    ):is(.form-control--inline, :not(.form-control--has-placeholder)).form-control--inline .form-control__tooltip {
+        pointer-events: auto;
+      }
+
+.form-control:not(.form-control--has-value):not(.form-control--has-focus):not(
+      .form-control--is-select
+    ):is(.form-control--inline, :not(.form-control--has-placeholder)) .form-control__label-text {
       font-size: var(--s-font-size-base);
       opacity: 1;
     }
@@ -38,7 +56,7 @@
 
 .form-control:not(.form-control--has-value):not(.form-control--has-focus):not(
       .form-control--is-select
-    ):not(.form-control--has-placeholder) .form-control__label-text {
+    ):is(.form-control--inline, :not(.form-control--has-placeholder)) .form-control__label-text {
         font-size: var(--s-font-size-sm);
         line-height: var(--s-line-height-sm)
     }
@@ -46,7 +64,7 @@
 
 .form-control:not(.form-control--has-value):not(.form-control--has-focus):not(
       .form-control--is-select
-    ):not(.form-control--has-placeholder):not(.form-control--label-position-outside) .form-control__label-text {
+    ):is(.form-control--inline, :not(.form-control--has-placeholder)):not(.form-control--label-position-outside) .form-control__label-text {
       position: absolute;
       top: 0;
       bottom: 0;
@@ -57,19 +75,19 @@
 
 .form-control:not(.form-control--has-value):not(.form-control--has-focus):not(
       .form-control--is-select
-    ):not(.form-control--has-placeholder) .form-control--font-size-sm .form-control__label-text {
+    ):is(.form-control--inline, :not(.form-control--has-placeholder)) .form-control--font-size-sm .form-control__label-text {
         font-size: var(--s-font-size-sm);
       }
 
 .form-control:not(.form-control--has-value):not(.form-control--has-focus):not(
       .form-control--is-select
-    ):not(.form-control--has-placeholder) .form-control--font-size-sm .form-control__description {
+    ):is(.form-control--inline, :not(.form-control--has-placeholder)) .form-control--font-size-sm .form-control__description {
         font-size: var(--s-font-size-sm);
       }
 
 .form-control:not(.form-control--has-value):not(.form-control--has-focus):not(
       .form-control--is-select
-    ):not(.form-control--has-placeholder).form-control--font-size-base .form-control__label-text {
+    ):is(.form-control--inline, :not(.form-control--has-placeholder)).form-control--font-size-base .form-control__label-text {
         font-size: var(--s-font-size-base);
       }
 
@@ -77,7 +95,7 @@
 
 .form-control:not(.form-control--has-value):not(.form-control--has-focus):not(
       .form-control--is-select
-    ):not(.form-control--has-placeholder).form-control--font-size-base .form-control__label-text {
+    ):is(.form-control--inline, :not(.form-control--has-placeholder)).form-control--font-size-base .form-control__label-text {
           font-size: var(--s-font-size-base)
       }
         }
@@ -156,7 +174,7 @@
 .form-control--label-position-outside .form-control__label-text,
   .form-control--label-position-outside:not(.form-control--has-value):not(.form-control--has-focus):not(
       .form-control--is-select
-    ):not(.form-control--has-placeholder)
+    ):is(.form-control--inline, :not(.form-control--has-placeholder))
     .form-control__label-text,
   .form-control--label-position-outside:not(.form-control--has-value).form-control--is-select
     .form-control__label-text {
@@ -259,7 +277,7 @@
   }
     }
 
-.form-control--inline:not(.form-control--has-placeholder) .form-control__label-text {
+.form-control--inline .form-control__label-text {
     right: var(--s-space-12);
     left: var(--s-space-12);
     transition: none;

package/dist/collection/components/swirl-icon/icons/swirl-icon-tab-move.js

@@ -0,0 +1,105 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconTabMove {
+    constructor() {
+        this.size = 24;
+    }
+    render() {
+        const viewBoxSize = this.size === 20 ? 24 : this.size;
+        const styles = {
+            color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
+        };
+        const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+        const hasLabel = Boolean(this.label);
+        return (h("svg", { key: '3d356f98e43b4ad45177d567dbd21b89157378d2', "aria-hidden": hasLabel ? undefined : "true", class: className, fill: "none", height: this.size, part: "icon", role: hasLabel ? "img" : undefined, style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, hasLabel && h("title", { key: 'cc0f937e87d2c08aafa39df0b3788bbd99ea313e' }, this.label), this.size === 16 && (h(Fragment, { key: 'e3b45c1421a3749cb47832b2bf108abc42f4a365' }, h("path", { key: '92b0d85ad69486ef4e59f7d28554978db3071668', d: "M3.3333 14q-0.55 0-0.9416-0.3917T2 12.6667v-1.3334q0-0.2833 0.1917-0.475T2.6667 10.6667q0.2833 0 0.475 0.1916T3.3333 11.3333v1.3334h9.3334v-8H3.3333v1.3333q0 0.2833-0.1916 0.475T2.6667 6.6667q-0.2833 0-0.475-0.1917T2 6v-2.6667q0-0.55 0.3917-0.9416T3.3333 2h9.3334q0.55 0 0.9416 0.3917T14 3.3333v9.3334q0 0.55-0.3917 0.9416T12.6667 14H3.3333Zm4.7834-4.6667H2.6667q-0.2833 0-0.475-0.1916T2 8.6667q0-0.2833 0.1917-0.475T2.6667 8h5.45l-0.9167-0.9333q-0.1833-0.1833-0.1917-0.4584T7.2 6.1333q0.1833-0.1833 0.4667-0.1833t0.4666 0.1833l2.0667 2.0667q0.2 0.2 0.2 0.4667t-0.2 0.4666L8.1333 11.2q-0.1833 0.1833-0.4583 0.1917T7.2 11.2q-0.1833-0.1833-0.1833-0.4667t0.1833-0.4666l0.9167-0.9334Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, { key: 'c63f6b74d87b434a55723fdc997b8b25008baa9d' }, h("path", { key: '1e5f62ac46fbe985b48d63781bae3c113c79cc81', d: "M5 21q-0.825 0-1.4125-0.5875T3 19v-2q0-0.425 0.2875-0.7125T4 16q0.425 0 0.7125 0.2875T5 17v2h14v-12H5v2q0 0.425-0.2875 0.7125T4 10q-0.425 0-0.7125-0.2875T3 9v-4q0-0.825 0.5875-1.4125T5 3h14q0.825 0 1.4125 0.5875T21 5v14q0 0.825-0.5875 1.4125T19 21H5Zm7.175-7H4q-0.425 0-0.7125-0.2875T3 13q0-0.425 0.2875-0.7125T4 12h8.175l-1.375-1.4q-0.275-0.275-0.2875-0.6875T10.8 9.2q0.275-0.275 0.7-0.275t0.7 0.275l3.1 3.1q0.3 0.3 0.3 0.7t-0.3 0.7L12.2 16.8q-0.275 0.275-0.6875 0.2875T10.8 16.8q-0.275-0.275-0.275-0.7t0.275-0.7l1.375-1.4Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, { key: '4ff89970fedbe9c2742e944dde4dcf04499db977' }, h("path", { key: 'cd6179bcba626109c4cb04dffeff8c92465fc4ab', d: "M5.8333 24.5q-0.9625 0-1.6479-0.6854T3.5 22.1667v-2.3334q0-0.4958 0.3354-0.8312T4.6667 18.6667q0.4958 0 0.8312 0.3354T5.8333 19.8333v2.3334h16.3334v-14H5.8333v2.3333q0 0.4958-0.3354 0.8313T4.6667 11.6667q-0.4958 0-0.8313-0.3354T3.5 10.5v-4.6667q0-0.9625 0.6854-1.6479T5.8333 3.5h16.3334q0.9625 0 1.6479 0.6854T24.5 5.8333v16.3334q0 0.9625-0.6854 1.6479T22.1667 24.5H5.8333Zm8.3709-8.1667H4.6667q-0.4958 0-0.8313-0.3354T3.5 15.1667q0-0.4958 0.3354-0.8313T4.6667 14h9.5375l-1.6042-1.6333q-0.3208-0.3208-0.3354-0.8021T12.6 10.7333q0.3208-0.3208 0.8167-0.3208t0.8166 0.3208l3.6167 3.6167q0.35 0.35 0.35 0.8167t-0.35 0.8166L14.2333 19.6q-0.3208 0.3208-0.802 0.3354T12.6 19.6q-0.3208-0.3208-0.3208-0.8167t0.3208-0.8166l1.6042-1.6334Z", fill: "currentColor" })))));
+    }
+    static get is() { return "swirl-icon-tab-move"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../swirl-icon.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../swirl-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlIconColor",
+                    "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+                    "references": {
+                        "SwirlIconColor": {
+                            "location": "import",
+                            "path": "../swirl-icon",
+                            "id": "src/components/swirl-icon/swirl-icon.tsx::SwirlIconColor",
+                            "referenceLocation": "SwirlIconColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlIconSize",
+                    "resolved": "16 | 20 | 24 | 28",
+                    "references": {
+                        "SwirlIconSize": {
+                            "location": "import",
+                            "path": "../swirl-icon.types",
+                            "id": "src/components/swirl-icon/swirl-icon.types.ts::SwirlIconSize",
+                            "referenceLocation": "SwirlIconSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "24"
+            }
+        };
+    }
+}