@getflip/swirl-components 0.103.1 → 0.104.0

package/dist/collection/components/swirl-app-layout/swirl-app-layout.css

@@ -435,14 +435,22 @@
 /* Transition Styles */
 
 @media (max-width: 767px) {
-      .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__grid, .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__grid {
+      .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__grid, .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-navigation
+    ) .app-layout__grid {
         grid-template-columns: 100%;
         grid-template-areas:
           "header"
           "navigation";
       }
 
-      .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body, .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body {
+      .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__body, .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-navigation
+    ) .app-layout__body {
         position: absolute;
         top: 0;
         left: 0;
@@ -453,24 +461,36 @@
     }
 
 @media (max-width: 767px) {
-      .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header {
+      .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-navigation
+    ) .app-layout__header {
         display: flex;
       }
 
-      .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation {
+      .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-navigation
+    ) .app-layout__navigation {
         display: block;
       }
     }
 
 @media (max-width: 991px) {
-      .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__grid, .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__grid {
+      .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-sidebar
+    ) .app-layout__grid, .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__grid {
         grid-template-columns: 100%;
         grid-template-areas:
           "body"
           "body";
       }
 
-      .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar, .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar {
+      .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-sidebar
+    ) .app-layout__sidebar, .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__sidebar {
         position: absolute;
         top: 0;
         left: 0;
@@ -480,11 +500,15 @@
     }
 
 @media (max-width: 991px) {
-      .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body {
+      .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__body {
         display: grid;
       }
 
-      .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar {
+      .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__sidebar {
         display: grid;
       }
     }
@@ -492,18 +516,34 @@
 /* Transition Style "Slides" */
 
 @media (max-width: 767px) {
-      .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__header,
-      .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__navigation,
-      .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header,
-      .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation {
+      .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__header,
+      .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__navigation,
+      .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-navigation
+    ) .app-layout__header,
+      .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-navigation
+    ) .app-layout__navigation {
         animation: app-layout-slide-out 0.4s;
       }
 
-      .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body, .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body {
+      .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__body, .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-navigation
+    ) .app-layout__body {
         animation: app-layout-slide-in 0.4s;
       }
 
-        .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body:after, .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after {
+        .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__body:after, .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-navigation
+    ) .app-layout__body:after {
           position: absolute;
           top: 0;
           right: 100%;
@@ -517,33 +557,53 @@
     }
 
 @media (max-width: 767px) {
-      .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header {
+      .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-navigation
+    ) .app-layout__header {
         animation-direction: reverse;
       }
 
-      .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation {
+      .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-navigation
+    ) .app-layout__navigation {
         animation-direction: reverse;
       }
 
-      .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body {
+      .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-navigation
+    ) .app-layout__body {
         animation-direction: reverse;
       }
 
-        .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after {
+        .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-navigation
+    ) .app-layout__body:after {
           animation-direction: reverse;
         }
     }
 
 @media (max-width: 991px) {
-      .app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__body, .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body {
+      .app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-sidebar
+    ) .app-layout__body, .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__body {
         animation: app-layout-slide-out 0.4s;
       }
 
-      .app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar, .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar {
+      .app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-sidebar
+    ) .app-layout__sidebar, .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__sidebar {
         animation: app-layout-slide-in 0.4s;
       }
 
-        .app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar:after, .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after {
+        .app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-sidebar
+    ) .app-layout__sidebar:after, .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__sidebar:after {
           position: absolute;
           top: 0;
           right: 100%;
@@ -557,15 +617,21 @@
     }
 
 @media (max-width: 991px) {
-      .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body {
+      .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__body {
         animation-direction: reverse;
       }
 
-      .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar {
+      .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__sidebar {
         animation-direction: reverse;
       }
 
-        .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after {
+        .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__sidebar:after {
           animation-direction: reverse;
         }
     }
@@ -573,37 +639,55 @@
 /* Transition Style "Dialog" */
 
 @media (max-width: 767px) {
-      .app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body, .app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body {
+      .app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__body, .app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-navigation
+    ) .app-layout__body {
         animation: app-layout-scale-in 0.3s;
       }
     }
 
 @media (max-width: 767px) {
-      .app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header {
+      .app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-navigation
+    ) .app-layout__header {
         animation-direction: reverse;
       }
 
-      .app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation {
+      .app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-navigation
+    ) .app-layout__navigation {
         animation-direction: reverse;
       }
 
-      .app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body {
+      .app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-navigation
+    ) .app-layout__body {
         animation-direction: reverse;
       }
     }
 
 @media (max-width: 991px) {
-      .app-layout--transition-style-dialog.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar, .app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar {
+      .app-layout--transition-style-dialog.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-sidebar
+    ) .app-layout__sidebar, .app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__sidebar {
         animation: app-layout-scale-in 0.3s;
       }
     }
 
 @media (max-width: 991px) {
-      .app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body {
+      .app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__body {
         animation-direction: reverse;
       }
 
-      .app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar {
+      .app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__sidebar {
         animation-direction: reverse;
       }
     }

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

@@ -20,12 +20,16 @@
       box-shadow: 0 0 0 var(--s-border-width-default) var(--s-border-highlight);
     }
 
-.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 {
+.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 {
       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 {
+.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 {
       bottom: 50%;
       font-size: var(--s-font-size-base);
       transform: translateY(50%);
@@ -34,7 +38,9 @@
 
 @media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
 
-.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 {
+.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 {
         font-size: var(--s-font-size-sm);
         line-height: var(--s-line-height-sm)
     }
@@ -93,7 +99,9 @@
     }
 
 .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)
+  .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)
     .form-control__label-text,
   .form-control--label-position-outside:not(.form-control--has-value).form-control--is-select
     .form-control__label-text {
@@ -107,7 +115,9 @@
   }
 
 .form-control--label-position-outside.form-control--disabled .form-control__label-text,
-    .form-control--label-position-outside.form-control--disabled:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select):not(.form-control--has-placeholder)
+    .form-control--label-position-outside.form-control--disabled:not(.form-control--has-value):not(.form-control--has-focus):not(
+        .form-control--is-select
+      ):not(.form-control--has-placeholder)
       .form-control__label-text,
     .form-control--label-position-outside.form-control--disabled:not(.form-control--has-value).form-control--is-select
       .form-control__label-text {

package/dist/collection/components/swirl-icon/icons/swirl-icon-discover.js

@@ -0,0 +1,52 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconDiscover {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M7.99998 8.66658C7.81109 8.66658 7.65276 8.6027 7.52498 8.47492C7.3972 8.34714 7.33331 8.18881 7.33331 7.99992C7.33331 7.81103 7.3972 7.6527 7.52498 7.52492C7.65276 7.39714 7.81109 7.33325 7.99998 7.33325C8.18887 7.33325 8.3472 7.39714 8.47498 7.52492C8.60276 7.6527 8.66665 7.81103 8.66665 7.99992C8.66665 8.18881 8.60276 8.34714 8.47498 8.47492C8.3472 8.6027 8.18887 8.66658 7.99998 8.66658ZM7.99998 14.6666C7.07776 14.6666 6.21109 14.4916 5.39998 14.1416C4.58887 13.7916 3.88331 13.3166 3.28331 12.7166C2.68331 12.1166 2.20831 11.411 1.85831 10.5999C1.50831 9.78881 1.33331 8.92214 1.33331 7.99992C1.33331 7.0777 1.50831 6.21103 1.85831 5.39992C2.20831 4.58881 2.68331 3.88325 3.28331 3.28325C3.88331 2.68325 4.58887 2.20825 5.39998 1.85825C6.21109 1.50825 7.07776 1.33325 7.99998 1.33325C8.9222 1.33325 9.78887 1.50825 10.6 1.85825C11.4111 2.20825 12.1166 2.68325 12.7166 3.28325C13.3166 3.88325 13.7916 4.58881 14.1416 5.39992C14.4916 6.21103 14.6666 7.0777 14.6666 7.99992C14.6666 8.92214 14.4916 9.78881 14.1416 10.5999C13.7916 11.411 13.3166 12.1166 12.7166 12.7166C12.1166 13.3166 11.4111 13.7916 10.6 14.1416C9.78887 14.4916 8.9222 14.6666 7.99998 14.6666ZM7.99998 13.3333C9.48887 13.3333 10.75 12.8166 11.7833 11.7833C12.8166 10.7499 13.3333 9.48881 13.3333 7.99992C13.3333 6.51103 12.8166 5.24992 11.7833 4.21659C10.75 3.18325 9.48887 2.66659 7.99998 2.66659C6.51109 2.66659 5.24998 3.18325 4.21665 4.21659C3.18331 5.24992 2.66665 6.51103 2.66665 7.99992C2.66665 9.48881 3.18331 10.7499 4.21665 11.7833C5.24998 12.8166 6.51109 13.3333 7.99998 13.3333ZM4.94998 11.3833L9.11665 9.43325C9.18331 9.39992 9.24442 9.35547 9.29998 9.29992C9.35553 9.24436 9.39998 9.18325 9.43331 9.11658L11.3833 4.94992C11.4389 4.83881 11.425 4.74159 11.3416 4.65825C11.2583 4.57492 11.1611 4.56103 11.05 4.61659L6.88331 6.56658C6.81665 6.59992 6.75554 6.64436 6.69998 6.69992C6.64442 6.75547 6.59998 6.81658 6.56665 6.88325L4.61665 11.0499C4.56109 11.161 4.57498 11.2583 4.65831 11.3416C4.74165 11.4249 4.83887 11.4388 4.94998 11.3833Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M12 13C11.7167 13 11.4792 12.9042 11.2875 12.7125C11.0958 12.5208 11 12.2833 11 12C11 11.7167 11.0958 11.4792 11.2875 11.2875C11.4792 11.0958 11.7167 11 12 11C12.2833 11 12.5208 11.0958 12.7125 11.2875C12.9042 11.4792 13 11.7167 13 12C13 12.2833 12.9042 12.5208 12.7125 12.7125C12.5208 12.9042 12.2833 13 12 13ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20ZM7.425 17.075L13.675 14.15C13.775 14.1 13.8667 14.0333 13.95 13.95C14.0333 13.8667 14.1 13.775 14.15 13.675L17.075 7.425C17.1583 7.25833 17.1375 7.1125 17.0125 6.9875C16.8875 6.8625 16.7417 6.84167 16.575 6.925L10.325 9.85C10.225 9.9 10.1333 9.96667 10.05 10.05C9.96667 10.1333 9.9 10.225 9.85 10.325L6.925 16.575C6.84167 16.7417 6.8625 16.8875 6.9875 17.0125C7.1125 17.1375 7.25833 17.1583 7.425 17.075Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M14 15.1666C13.6694 15.1666 13.3923 15.0548 13.1687 14.8312C12.9451 14.6076 12.8333 14.3305 12.8333 13.9999C12.8333 13.6694 12.9451 13.3923 13.1687 13.1687C13.3923 12.9451 13.6694 12.8333 14 12.8333C14.3305 12.8333 14.6076 12.9451 14.8312 13.1687C15.0548 13.3923 15.1666 13.6694 15.1666 13.9999C15.1666 14.3305 15.0548 14.6076 14.8312 14.8312C14.6076 15.0548 14.3305 15.1666 14 15.1666ZM14 25.6666C12.3861 25.6666 10.8694 25.3603 9.44998 24.7478C8.03054 24.1353 6.79581 23.3041 5.74581 22.2541C4.69581 21.2041 3.86456 19.9694 3.25206 18.5499C2.63956 17.1305 2.33331 15.6138 2.33331 13.9999C2.33331 12.386 2.63956 10.8694 3.25206 9.44992C3.86456 8.03047 4.69581 6.79575 5.74581 5.74575C6.79581 4.69575 8.03054 3.8645 9.44998 3.252C10.8694 2.6395 12.3861 2.33325 14 2.33325C15.6139 2.33325 17.1305 2.6395 18.55 3.252C19.9694 3.8645 21.2041 4.69575 22.2541 5.74575C23.3041 6.79575 24.1354 8.03047 24.7479 9.44992C25.3604 10.8694 25.6666 12.386 25.6666 13.9999C25.6666 15.6138 25.3604 17.1305 24.7479 18.5499C24.1354 19.9694 23.3041 21.2041 22.2541 22.2541C21.2041 23.3041 19.9694 24.1353 18.55 24.7478C17.1305 25.3603 15.6139 25.6666 14 25.6666ZM14 23.3333C16.6055 23.3333 18.8125 22.4291 20.6208 20.6208C22.4291 18.8124 23.3333 16.6055 23.3333 13.9999C23.3333 11.3944 22.4291 9.18742 20.6208 7.37909C18.8125 5.57075 16.6055 4.66659 14 4.66659C11.3944 4.66659 9.18748 5.57075 7.37915 7.37909C5.57081 9.18742 4.66665 11.3944 4.66665 13.9999C4.66665 16.6055 5.57081 18.8124 7.37915 20.6208C9.18748 22.4291 11.3944 23.3333 14 23.3333ZM8.66248 19.9208L15.9541 16.5083C16.0708 16.4499 16.1778 16.3721 16.275 16.2749C16.3722 16.1777 16.45 16.0708 16.5083 15.9541L19.9208 8.66242C20.018 8.46797 19.9937 8.29784 19.8479 8.152C19.7021 8.00617 19.5319 7.98186 19.3375 8.07909L12.0458 11.4916C11.9291 11.5499 11.8222 11.6277 11.725 11.7249C11.6278 11.8221 11.55 11.9291 11.4916 12.0458L8.07915 19.3374C7.98192 19.5319 8.00623 19.702 8.15206 19.8478C8.2979 19.9937 8.46804 20.018 8.66248 19.9208Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-discover"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlIconSize",
+          "resolved": "16 | 20 | 24 | 28",
+          "references": {
+            "SwirlIconSize": {
+              "location": "import",
+              "path": "../swirl-icon.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

package/dist/components/swirl-form-control.js

@@ -4,7 +4,7 @@ import { b as getActiveElement } from './utils.js';
 import { d as defineCustomElement$3 } from './swirl-icon-error2.js';
 import { d as defineCustomElement$2 } from './swirl-inline-error2.js';
 
-const swirlFormControlCss = ".sc-swirl-form-control-h{display:block;width:100%}.sc-swirl-form-control-h *.sc-swirl-form-control{box-sizing:border-box}.form-control.sc-swirl-form-control{--swirl-autocomplete-tags-margin-top:var(--s-space-4);display:block;width:100%;line-height:var(--s-line-height-sm)}.form-control.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-highlight);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control.sc-swirl-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.sc-swirl-form-control{overflow:hidden;max-height:0}.form-control.sc-swirl-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.sc-swirl-form-control{bottom:50%;font-size:var(--s-font-size-base);transform:translateY(50%);opacity:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-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.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .select__label.sc-swirl-form-control{overflow:hidden;max-height:0;pointer-events:none}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{bottom:50%;font-size:var(--s-font-size-base);transform:translateY(50%);opacity:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-sm)}}.form-control--label-position-outside.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-base);--swirl-autocomplete-tags-margin-top:0;padding-top:calc(var(--s-line-height-sm) + var(--s-space-4))}.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--is-select) .form-control__label.sc-swirl-form-control{cursor:text}.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.375rem + 2 * var(--s-border-width-default));padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.25rem + 2 * var(--s-border-width-default))}}.form-control--label-position-outside.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.sc-swirl-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.sc-swirl-form-control,.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{bottom:calc(100% + var(--s-space-4));left:0;color:var(--s-text-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);transform:none;opacity:1}.form-control--label-position-outside.form-control--disabled.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.form-control--disabled.sc-swirl-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.sc-swirl-form-control,.form-control--label-position-outside.form-control--disabled.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{color:var(--s-text-disabled)}.form-control--label-position-outside.form-control--has-character-counter.sc-swirl-form-control .form-control__description.sc-swirl-form-control{max-width:calc(100% - 6rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-sm)}}.form-control--invalid.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--invalid.sc-swirl-form-control .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-critical)}.form-control--invalid.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical)}.form-control--disabled.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-disabled);color:var(--s-text-disabled)}.form-control--disabled.sc-swirl-form-control .form-control__description.sc-swirl-form-control{color:var(--s-text-disabled)}.form-control--inline.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.375rem + 2 * var(--s-border-width-default));padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--inline.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.25rem + 2 * var(--s-border-width-default))}}.form-control--inline.sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{right:var(--s-space-12);left:var(--s-space-12);transition:none;opacity:0}.form-control--inline.form-control--has-character-counter.sc-swirl-form-control .form-control__description.sc-swirl-form-control{max-width:calc(100% - 6rem)}.form-control--hide-label.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{position:absolute;display:inline;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;word-wrap:normal;clip:rect(0, 0, 0, 0)}.form-control--has-prefix.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{position:static}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled).form-control--invalid .form-control__label.sc-swirl-form-control{border-left-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled).form-control--invalid .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-critical);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-left-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-highlight);border-right-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control--has-prefix.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-top-left-radius:0;border-bottom-left-radius:0}.form-control--has-prefix.sc-swirl-form-control .form-control__prefix.sc-swirl-form-control{display:flex}.form-control__controls.sc-swirl-form-control{position:relative;display:flex;align-items:stretch}.form-control__label.sc-swirl-form-control{position:relative;display:flex;width:100%;min-height:4.375rem;padding:calc(var(--s-space-12) + 1.25rem) var(--s-space-16) var(--s-space-12);justify-content:center;border:var(--s-border-width-default) solid var(--s-border-strong);border-radius:var(--s-border-radius-sm);color:var(--s-text-subdued);flex-direction:column;gap:var(--s-space-2)}.form-control__label-text.sc-swirl-form-control{position:absolute;right:var(--s-space-16);bottom:calc(100% - 1.25rem - var(--s-space-12));left:var(--s-space-16);overflow:hidden;font-size:var(--s-font-size-sm);white-space:nowrap;text-overflow:ellipsis;transition:font-size 0.15s, transform 0.15s, top 0.15s;transform:none}.form-control__prefix.sc-swirl-form-control{z-index:1;display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:center;align-items:center;border-top:var(--s-border-width-default) solid var(--s-border-strong);border-bottom:var(--s-border-width-default) solid var(--s-border-strong);border-left:var(--s-border-width-default) solid var(--s-border-strong);border-top-left-radius:var(--s-border-radius-sm);border-bottom-left-radius:var(--s-border-radius-sm);background-color:var(--s-surface-raised-default)}.form-control__prefix.sc-swirl-form-control-s>select{height:100%;margin-right:calc(-1 * var(--s-space-16));margin-left:calc(-1 * var(--s-space-16));padding-right:calc(var(--s-space-16) + 1.25rem);padding-left:var(--s-space-16);border:none;color:var(--s-text-default);background:url('data:image/svg+xml,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 12.4579C9.88889 12.4579 9.78472 12.4404 9.6875 12.4054C9.59027 12.3709 9.5 12.312 9.41666 12.2287L5.5625 8.37453C5.40972 8.22175 5.33694 8.03064 5.34416 7.8012C5.35083 7.57231 5.43055 7.38148 5.58333 7.2287C5.73611 7.07592 5.93055 6.99953 6.16666 6.99953C6.40277 6.99953 6.59722 7.07592 6.75 7.2287L10 10.4787L13.2708 7.20787C13.4236 7.05509 13.6147 6.98203 13.8442 6.9887C14.0731 6.99592 14.2639 7.07592 14.4167 7.2287C14.5694 7.38148 14.6458 7.57592 14.6458 7.81203C14.6458 8.04814 14.5694 8.24259 14.4167 8.39537L10.5833 12.2287C10.5 12.312 10.4097 12.3709 10.3125 12.4054C10.2153 12.4404 10.1111 12.4579 10 12.4579Z\" fill=\"%236E6E6E\"/></svg>');background-color:transparent;background-repeat:no-repeat;background-position:right var(--s-space-8) center;font:inherit;line-height:var(--s-line-height-base);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-control__prefix.sc-swirl-form-control-s>select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__prefix.sc-swirl-form-control-s>select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control__description.sc-swirl-form-control{display:block;margin-top:var(--s-space-4);padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}.form-control__error-message.sc-swirl-form-control{display:block;margin-top:var(--s-space-4)}";
+const swirlFormControlCss = ".sc-swirl-form-control-h{display:block;width:100%}.sc-swirl-form-control-h *.sc-swirl-form-control{box-sizing:border-box}.form-control.sc-swirl-form-control{--swirl-autocomplete-tags-margin-top:var(--s-space-4);display:block;width:100%;line-height:var(--s-line-height-sm)}.form-control.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-highlight);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__input.sc-swirl-form-control{overflow:hidden;max-height:0}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{bottom:50%;font-size:var(--s-font-size-base);transform:translateY(50%);opacity:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .select__label.sc-swirl-form-control{overflow:hidden;max-height:0;pointer-events:none}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{bottom:50%;font-size:var(--s-font-size-base);transform:translateY(50%);opacity:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-sm)}}.form-control--label-position-outside.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-base);--swirl-autocomplete-tags-margin-top:0;padding-top:calc(var(--s-line-height-sm) + var(--s-space-4))}.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--is-select) .form-control__label.sc-swirl-form-control{cursor:text}.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.375rem + 2 * var(--s-border-width-default));padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.25rem + 2 * var(--s-border-width-default))}}.form-control--label-position-outside.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{bottom:calc(100% + var(--s-space-4));left:0;color:var(--s-text-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);transform:none;opacity:1}.form-control--label-position-outside.form-control--disabled.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.form-control--disabled.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.form-control--disabled.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{color:var(--s-text-disabled)}.form-control--label-position-outside.form-control--has-character-counter.sc-swirl-form-control .form-control__description.sc-swirl-form-control{max-width:calc(100% - 6rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-sm)}}.form-control--invalid.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--invalid.sc-swirl-form-control .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-critical)}.form-control--invalid.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical)}.form-control--disabled.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-disabled);color:var(--s-text-disabled)}.form-control--disabled.sc-swirl-form-control .form-control__description.sc-swirl-form-control{color:var(--s-text-disabled)}.form-control--inline.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.375rem + 2 * var(--s-border-width-default));padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--inline.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.25rem + 2 * var(--s-border-width-default))}}.form-control--inline.sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{right:var(--s-space-12);left:var(--s-space-12);transition:none;opacity:0}.form-control--inline.form-control--has-character-counter.sc-swirl-form-control .form-control__description.sc-swirl-form-control{max-width:calc(100% - 6rem)}.form-control--hide-label.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{position:absolute;display:inline;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;word-wrap:normal;clip:rect(0, 0, 0, 0)}.form-control--has-prefix.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{position:static}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled).form-control--invalid .form-control__label.sc-swirl-form-control{border-left-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled).form-control--invalid .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-critical);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-left-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-highlight);border-right-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control--has-prefix.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-top-left-radius:0;border-bottom-left-radius:0}.form-control--has-prefix.sc-swirl-form-control .form-control__prefix.sc-swirl-form-control{display:flex}.form-control__controls.sc-swirl-form-control{position:relative;display:flex;align-items:stretch}.form-control__label.sc-swirl-form-control{position:relative;display:flex;width:100%;min-height:4.375rem;padding:calc(var(--s-space-12) + 1.25rem) var(--s-space-16) var(--s-space-12);justify-content:center;border:var(--s-border-width-default) solid var(--s-border-strong);border-radius:var(--s-border-radius-sm);color:var(--s-text-subdued);flex-direction:column;gap:var(--s-space-2)}.form-control__label-text.sc-swirl-form-control{position:absolute;right:var(--s-space-16);bottom:calc(100% - 1.25rem - var(--s-space-12));left:var(--s-space-16);overflow:hidden;font-size:var(--s-font-size-sm);white-space:nowrap;text-overflow:ellipsis;transition:font-size 0.15s, transform 0.15s, top 0.15s;transform:none}.form-control__prefix.sc-swirl-form-control{z-index:1;display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:center;align-items:center;border-top:var(--s-border-width-default) solid var(--s-border-strong);border-bottom:var(--s-border-width-default) solid var(--s-border-strong);border-left:var(--s-border-width-default) solid var(--s-border-strong);border-top-left-radius:var(--s-border-radius-sm);border-bottom-left-radius:var(--s-border-radius-sm);background-color:var(--s-surface-raised-default)}.form-control__prefix.sc-swirl-form-control-s>select{height:100%;margin-right:calc(-1 * var(--s-space-16));margin-left:calc(-1 * var(--s-space-16));padding-right:calc(var(--s-space-16) + 1.25rem);padding-left:var(--s-space-16);border:none;color:var(--s-text-default);background:url('data:image/svg+xml,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 12.4579C9.88889 12.4579 9.78472 12.4404 9.6875 12.4054C9.59027 12.3709 9.5 12.312 9.41666 12.2287L5.5625 8.37453C5.40972 8.22175 5.33694 8.03064 5.34416 7.8012C5.35083 7.57231 5.43055 7.38148 5.58333 7.2287C5.73611 7.07592 5.93055 6.99953 6.16666 6.99953C6.40277 6.99953 6.59722 7.07592 6.75 7.2287L10 10.4787L13.2708 7.20787C13.4236 7.05509 13.6147 6.98203 13.8442 6.9887C14.0731 6.99592 14.2639 7.07592 14.4167 7.2287C14.5694 7.38148 14.6458 7.57592 14.6458 7.81203C14.6458 8.04814 14.5694 8.24259 14.4167 8.39537L10.5833 12.2287C10.5 12.312 10.4097 12.3709 10.3125 12.4054C10.2153 12.4404 10.1111 12.4579 10 12.4579Z\" fill=\"%236E6E6E\"/></svg>');background-color:transparent;background-repeat:no-repeat;background-position:right var(--s-space-8) center;font:inherit;line-height:var(--s-line-height-base);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-control__prefix.sc-swirl-form-control-s>select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__prefix.sc-swirl-form-control-s>select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control__description.sc-swirl-form-control{display:block;margin-top:var(--s-space-4);padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}.form-control__error-message.sc-swirl-form-control{display:block;margin-top:var(--s-space-4)}";
 
 const SwirlFormControl$1 = /*@__PURE__*/ proxyCustomElement(class SwirlFormControl extends HTMLElement {
   constructor() {

package/dist/components/swirl-icon-discover.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SwirlIconDiscover extends Components.SwirlIconDiscover, HTMLElement {}
+export const SwirlIconDiscover: {
+  prototype: SwirlIconDiscover;
+  new (): SwirlIconDiscover;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/swirl-icon-discover.js

@@ -0,0 +1,40 @@
+import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+
+const swirlIconCss = ":host{display:inline-flex}";
+
+const SwirlIconDiscover$1 = /*@__PURE__*/ proxyCustomElement(class SwirlIconDiscover extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M7.99998 8.66658C7.81109 8.66658 7.65276 8.6027 7.52498 8.47492C7.3972 8.34714 7.33331 8.18881 7.33331 7.99992C7.33331 7.81103 7.3972 7.6527 7.52498 7.52492C7.65276 7.39714 7.81109 7.33325 7.99998 7.33325C8.18887 7.33325 8.3472 7.39714 8.47498 7.52492C8.60276 7.6527 8.66665 7.81103 8.66665 7.99992C8.66665 8.18881 8.60276 8.34714 8.47498 8.47492C8.3472 8.6027 8.18887 8.66658 7.99998 8.66658ZM7.99998 14.6666C7.07776 14.6666 6.21109 14.4916 5.39998 14.1416C4.58887 13.7916 3.88331 13.3166 3.28331 12.7166C2.68331 12.1166 2.20831 11.411 1.85831 10.5999C1.50831 9.78881 1.33331 8.92214 1.33331 7.99992C1.33331 7.0777 1.50831 6.21103 1.85831 5.39992C2.20831 4.58881 2.68331 3.88325 3.28331 3.28325C3.88331 2.68325 4.58887 2.20825 5.39998 1.85825C6.21109 1.50825 7.07776 1.33325 7.99998 1.33325C8.9222 1.33325 9.78887 1.50825 10.6 1.85825C11.4111 2.20825 12.1166 2.68325 12.7166 3.28325C13.3166 3.88325 13.7916 4.58881 14.1416 5.39992C14.4916 6.21103 14.6666 7.0777 14.6666 7.99992C14.6666 8.92214 14.4916 9.78881 14.1416 10.5999C13.7916 11.411 13.3166 12.1166 12.7166 12.7166C12.1166 13.3166 11.4111 13.7916 10.6 14.1416C9.78887 14.4916 8.9222 14.6666 7.99998 14.6666ZM7.99998 13.3333C9.48887 13.3333 10.75 12.8166 11.7833 11.7833C12.8166 10.7499 13.3333 9.48881 13.3333 7.99992C13.3333 6.51103 12.8166 5.24992 11.7833 4.21659C10.75 3.18325 9.48887 2.66659 7.99998 2.66659C6.51109 2.66659 5.24998 3.18325 4.21665 4.21659C3.18331 5.24992 2.66665 6.51103 2.66665 7.99992C2.66665 9.48881 3.18331 10.7499 4.21665 11.7833C5.24998 12.8166 6.51109 13.3333 7.99998 13.3333ZM4.94998 11.3833L9.11665 9.43325C9.18331 9.39992 9.24442 9.35547 9.29998 9.29992C9.35553 9.24436 9.39998 9.18325 9.43331 9.11658L11.3833 4.94992C11.4389 4.83881 11.425 4.74159 11.3416 4.65825C11.2583 4.57492 11.1611 4.56103 11.05 4.61659L6.88331 6.56658C6.81665 6.59992 6.75554 6.64436 6.69998 6.69992C6.64442 6.75547 6.59998 6.81658 6.56665 6.88325L4.61665 11.0499C4.56109 11.161 4.57498 11.2583 4.65831 11.3416C4.74165 11.4249 4.83887 11.4388 4.94998 11.3833Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M12 13C11.7167 13 11.4792 12.9042 11.2875 12.7125C11.0958 12.5208 11 12.2833 11 12C11 11.7167 11.0958 11.4792 11.2875 11.2875C11.4792 11.0958 11.7167 11 12 11C12.2833 11 12.5208 11.0958 12.7125 11.2875C12.9042 11.4792 13 11.7167 13 12C13 12.2833 12.9042 12.5208 12.7125 12.7125C12.5208 12.9042 12.2833 13 12 13ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20ZM7.425 17.075L13.675 14.15C13.775 14.1 13.8667 14.0333 13.95 13.95C14.0333 13.8667 14.1 13.775 14.15 13.675L17.075 7.425C17.1583 7.25833 17.1375 7.1125 17.0125 6.9875C16.8875 6.8625 16.7417 6.84167 16.575 6.925L10.325 9.85C10.225 9.9 10.1333 9.96667 10.05 10.05C9.96667 10.1333 9.9 10.225 9.85 10.325L6.925 16.575C6.84167 16.7417 6.8625 16.8875 6.9875 17.0125C7.1125 17.1375 7.25833 17.1583 7.425 17.075Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M14 15.1666C13.6694 15.1666 13.3923 15.0548 13.1687 14.8312C12.9451 14.6076 12.8333 14.3305 12.8333 13.9999C12.8333 13.6694 12.9451 13.3923 13.1687 13.1687C13.3923 12.9451 13.6694 12.8333 14 12.8333C14.3305 12.8333 14.6076 12.9451 14.8312 13.1687C15.0548 13.3923 15.1666 13.6694 15.1666 13.9999C15.1666 14.3305 15.0548 14.6076 14.8312 14.8312C14.6076 15.0548 14.3305 15.1666 14 15.1666ZM14 25.6666C12.3861 25.6666 10.8694 25.3603 9.44998 24.7478C8.03054 24.1353 6.79581 23.3041 5.74581 22.2541C4.69581 21.2041 3.86456 19.9694 3.25206 18.5499C2.63956 17.1305 2.33331 15.6138 2.33331 13.9999C2.33331 12.386 2.63956 10.8694 3.25206 9.44992C3.86456 8.03047 4.69581 6.79575 5.74581 5.74575C6.79581 4.69575 8.03054 3.8645 9.44998 3.252C10.8694 2.6395 12.3861 2.33325 14 2.33325C15.6139 2.33325 17.1305 2.6395 18.55 3.252C19.9694 3.8645 21.2041 4.69575 22.2541 5.74575C23.3041 6.79575 24.1354 8.03047 24.7479 9.44992C25.3604 10.8694 25.6666 12.386 25.6666 13.9999C25.6666 15.6138 25.3604 17.1305 24.7479 18.5499C24.1354 19.9694 23.3041 21.2041 22.2541 22.2541C21.2041 23.3041 19.9694 24.1353 18.55 24.7478C17.1305 25.3603 15.6139 25.6666 14 25.6666ZM14 23.3333C16.6055 23.3333 18.8125 22.4291 20.6208 20.6208C22.4291 18.8124 23.3333 16.6055 23.3333 13.9999C23.3333 11.3944 22.4291 9.18742 20.6208 7.37909C18.8125 5.57075 16.6055 4.66659 14 4.66659C11.3944 4.66659 9.18748 5.57075 7.37915 7.37909C5.57081 9.18742 4.66665 11.3944 4.66665 13.9999C4.66665 16.6055 5.57081 18.8124 7.37915 20.6208C9.18748 22.4291 11.3944 23.3333 14 23.3333ZM8.66248 19.9208L15.9541 16.5083C16.0708 16.4499 16.1778 16.3721 16.275 16.2749C16.3722 16.1777 16.45 16.0708 16.5083 15.9541L19.9208 8.66242C20.018 8.46797 19.9937 8.29784 19.8479 8.152C19.7021 8.00617 19.5319 7.98186 19.3375 8.07909L12.0458 11.4916C11.9291 11.5499 11.8222 11.6277 11.725 11.7249C11.6278 11.8221 11.55 11.9291 11.4916 12.0458L8.07915 19.3374C7.98192 19.5319 8.00623 19.702 8.15206 19.8478C8.2979 19.9937 8.46804 20.018 8.66248 19.9208Z", fill: "currentColor" })))));
+  }
+  static get style() { return swirlIconCss; }
+}, [1, "swirl-icon-discover", {
+    "size": [2]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-icon-discover"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-icon-discover":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlIconDiscover$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlIconDiscover = SwirlIconDiscover$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlIconDiscover, defineCustomElement };

package/dist/esm/index-99d0060d.js

@@ -2307,6 +2307,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './swirl-icon-description.entry.js').then(processMod, consoleError);
+        case 'swirl-icon-discover':
+          return import(
+            /* webpackMode: "lazy" */
+            './swirl-icon-discover.entry.js').then(processMod, consoleError);
         case 'swirl-icon-double-arrow-left':
           return import(
             /* webpackMode: "lazy" */