@getflip/swirl-components 0.8.6 → 0.9.1

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

@@ -140,7 +140,7 @@
       bottom: 0;
       width: min(40%, 25rem);
       border-left: var(--s-border-width-default) solid var(--s-border-default);
-      box-shadow: 0.125rem 0.25rem 1rem rgba(0, 0, 0, 0.14);
+      box-shadow: var(--s-shadow-level-3);
     }
   }
 

package/dist/collection/components/flip-autocomplete/flip-autocomplete.css

@@ -16,7 +16,7 @@
   overflow: hidden;
   border-radius: var(--s-border-radius-sm);
   background-color: var(--s-surface-overlay-default);
-  box-shadow: 0.125rem 0.25rem 2.5rem rgba(0, 0, 0, 0.14);
+  box-shadow: var(--s-shadow-level-1);
 }
 
 .autocomplete__spinner {

package/dist/collection/components/flip-avatar/flip-avatar.css

@@ -32,7 +32,11 @@
   cursor: pointer;
 }
 
-.avatar--interactive:focus {
+.avatar--interactive:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+.avatar--interactive:focus-visible {
     outline-color: var(--s-focus-default);
   }
 

package/dist/collection/components/flip-banner/flip-banner.css

@@ -13,8 +13,13 @@
   align-items: flex-start;
 }
 
-.banner:focus {
+.banner:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+.banner:focus-visible {
     outline-color: var(--s-focus-default);
+    outline-offset: var(--s-space-4);
   }
 
 @media (min-width: 768px) {
@@ -104,8 +109,8 @@
   display: inline-flex;
   margin-left: var(--s-space-16);
   align-items: center;
-  gap: var(--s-space-16);
   line-height: var(--s-line-height-base);
+  gap: var(--s-space-16);
 }
 
 @media (min-width: 768px) {

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

@@ -47,8 +47,13 @@
       color: var(--s-icon-disabled);
     }
 
-.button:focus {
+.button:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+.button:focus-visible {
     outline-color: var(--s-focus-default);
+    outline-offset: var(--s-space-2);
   }
 
 .button--variant-ghost.button--intent-primary:not(:disabled) {
@@ -218,7 +223,7 @@
 .button--variant-floating {
   color: var(--s-text-default);
   background-color: var(--s-surface-overlay-default);
-  box-shadow: 0.125rem 0.25rem 2.5rem rgba(0, 0, 0, 0.14);
+  box-shadow: var(--s-shadow-level-1);
 }
 
 .button--variant-floating:hover {

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

@@ -38,3 +38,12 @@ a.card:hover, button.card:hover, .card--interactive:hover {
 a.card:active, button.card:active, .card--interactive:active {
     background-color: var(--s-surface-pressed);
   }
+
+a.card:focus:not(:focus-visible), button.card:focus:not(:focus-visible), .card--interactive:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+a.card:focus-visible, button.card:focus-visible, .card--interactive:focus-visible {
+    outline-color: var(--s-focus-default);
+    outline-offset: var(--s-space-4);
+  }

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

@@ -52,11 +52,16 @@
   cursor: pointer;
 }
 
-.date-input__date-picker-button:focus {
+.date-input__date-picker-button:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+.date-input__date-picker-button:focus-visible {
     outline-color: var(--s-focus-default);
+    outline-offset: var(--s-space-2);
   }
 
 .date-input__date-picker-button:disabled {
-    cursor: default;
     color: var(--s-icon-disabled);
+    cursor: default;
   }

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

@@ -83,7 +83,7 @@
   border-radius: var(--s-border-radius-l);
   background-color: var(--s-surface-overlay-default);
   text-align: center;
-  box-shadow: 0.125rem 0.25rem 1rem rgba(0, 0, 0, 0.14);
+  box-shadow: var(--s-shadow-level-3);
 }
 
 .dialog__heading {

package/dist/collection/components/flip-modal/flip-modal.css

@@ -105,7 +105,7 @@
     height: auto;
     max-height: 90vh;
     border-radius: var(--s-border-radius-base);
-    box-shadow: 0.125rem 0.25rem 1rem rgba(0, 0, 0, 0.14)
+    box-shadow: var(--s-shadow-level-3)
 }
   }
 

package/dist/collection/components/flip-option-list-item/flip-option-list-item.css

@@ -27,10 +27,13 @@
   }
 
 .option-list-item:focus {
-    background-color: var(--s-surface-overlay-hovered);
     outline: none;
   }
 
+.option-list-item:focus-visible {
+    background-color: var(--s-surface-overlay-hovered);
+  }
+
 .option-list-item--selected .option-list-item__label {
     color: var(--s-text-highlight);
   }

package/dist/collection/components/flip-pagination/flip-pagination.css

@@ -37,8 +37,8 @@
 .pagination__advanced-label {
   display: flex;
   align-items: center;
-  gap: var(--s-space-8);
   white-space: nowrap;
+  gap: var(--s-space-8);
 }
 
 .pagination__page-select-container {
@@ -59,7 +59,11 @@
           appearance: none;
 }
 
-.pagination__page-select:focus {
+.pagination__page-select:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+.pagination__page-select:focus-visible {
     outline-color: var(--s-focus-default);
   }
 

package/dist/collection/components/flip-pdf-reader/flip-pdf-reader.css

@@ -152,7 +152,11 @@
           appearance: none;
 }
 
-.pdf-reader__zoom-select:focus {
+.pdf-reader__zoom-select:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+.pdf-reader__zoom-select:focus-visible {
     outline-color: var(--s-focus-default);
   }
 

package/dist/collection/components/flip-popover/flip-popover.css

@@ -147,7 +147,7 @@
     border-radius: var(--s-border-radius-sm);
     -webkit-animation: none;
             animation: none;
-    box-shadow: 0.125rem 0.25rem 2.5rem rgba(0, 0, 0, 0.14)
+    box-shadow: var(--s-shadow-level-1)
 }
   }
 

package/dist/collection/components/flip-resource-list-file-item/flip-resource-list-file-item.css

@@ -19,10 +19,13 @@
 }
 
 .resource-list-file-item:focus {
-    background-color: var(--s-background-hovered);
     outline: none;
   }
 
+.resource-list-file-item:focus-visible {
+    background-color: var(--s-background-hovered);
+  }
+
 .resource-list-file-item--has-control .resource-list-file-item__label-container {
     padding-right: calc(var(--s-space-12) + 2.5rem);
   }

package/dist/collection/components/flip-resource-list-item/flip-resource-list-item.css

@@ -86,11 +86,14 @@
     }
 
 .resource-list-item__content:focus {
-    background-color: var(--s-background-hovered);
     outline: none;
   }
 
-.resource-list-item__content:focus .resource-list-item__media {
+.resource-list-item__content:focus-visible {
+    background-color: var(--s-background-hovered);
+  }
+
+.resource-list-item__content:focus-visible .resource-list-item__media {
       --flip-avatar-group-border-color: var(--s-background-hovered);
       --flip-badge-border-color: var(--s-background-hovered);
     }

package/dist/collection/components/flip-search/flip-search.css

@@ -54,7 +54,11 @@
   caret-color: var(--s-border-highlight);
 }
 
-.search__input:focus {
+.search__input:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+.search__input:focus-visible {
     outline-color: var(--s-focus-default);
   }
 

package/dist/collection/components/flip-tabs/flip-tabs.css

@@ -33,7 +33,7 @@
   cursor: pointer;
 }
 
-.tabs__tab:focus-visible {
+.tabs__tab:focus {
     outline: none;
   }
 

package/dist/collection/components/flip-tag/flip-tag.css

@@ -65,6 +65,10 @@
   cursor: pointer;
 }
 
-.tag__removal-button:focus {
+.tag__removal-button:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+.tag__removal-button:focus-visible {
     outline-color: var(--s-focus-default);
   }

package/dist/collection/components/flip-text-input/flip-text-input.css

@@ -90,7 +90,11 @@ input.text-input__input:not([type="password"]) {
   cursor: pointer;
 }
 
-.text-input__clear-button:focus, .text-input__password-toggle:focus {
+.text-input__clear-button:focus:not(:focus-visible), .text-input__password-toggle:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+.text-input__clear-button:focus-visible, .text-input__password-toggle:focus-visible {
     outline-color: var(--s-focus-default);
   }
 
@@ -112,7 +116,11 @@ input.text-input__input:not([type="password"]) {
   cursor: pointer;
 }
 
-.text-input__step-button:focus {
+.text-input__step-button:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+.text-input__step-button:focus-visible {
     outline-color: var(--s-focus-default);
   }
 

package/dist/collection/components/flip-toast/flip-toast.css

@@ -14,6 +14,7 @@
   border-radius: var(--s-border-radius-sm);
   color: var(--s-text-on-status);
   background-color: var(--s-surface-neutral-default);
+  box-shadow: var(--s-shadow-level-2);
 }
 
 .toast--intent-critical {

package/dist/collection/components/flip-tree-navigation-item/flip-tree-navigation-item.css

@@ -27,7 +27,7 @@
     outline: none;
   }
 
-  :host(:focus) .tree-navigation-item__label {
+  :host(:focus-visible) .tree-navigation-item__label {
       border-radius: var(--s-border-radius-xs);
       box-shadow: 0 0 0 0.125rem var(--s-focus-default);
     }

package/dist/collection/components/flip-video-thumbnail/flip-video-thumbnail.css

@@ -27,8 +27,13 @@
     inset: 0;
   }
 
-.video-thumbnail:focus {
+.video-thumbnail:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+.video-thumbnail:focus-visible {
     outline-color: var(--s-focus-default);
+    outline-offset: var(--s-space-4);
   }
 
 .video-thumbnail__image {

package/dist/components/flip-action-list-item.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
 
-const flipActionListItemCss = ":host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;width:100%;min-width:15rem;margin:0;padding:var(--s-space-12) var(--s-space-16);justify-content:flex-start;align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;cursor:pointer;gap:var(--s-space-12)}.action-list-item:hover{background-color:var(--s-surface-overlay-hovered)}.action-list-item:focus{background-color:var(--s-surface-overlay-hovered);outline:none}.action-list-item:active{background-color:var(--s-surface-overlay-pressed)}.action-list-item:disabled{background-color:var(--s-surface-overlay-default);cursor:default}.action-list-item:disabled .action-list-item__label,.action-list-item:disabled .action-list-item__description{color:var(--s-text-disabled)}.action-list-item:disabled .action-list-item__icon{color:var(--s-icon-disabled)}.action-list-item--size-l{padding:var(--s-space-16)}.action-list-item--intent-critical ::part(icon){color:var(--s-icon-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__label{color:var(--s-text-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__icon{color:var(--s-icon-critical)}.action-list-item__icon{display:inline-flex;flex-shrink:0;color:var(--s-icon-default)}.action-list-item__label-container{display:inline-flex;min-width:0;flex-grow:1;align-items:flex-start;flex-direction:column}.action-list-item__label{overflow:hidden;max-width:100%;padding-top:0.0625rem;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.action-list-item__description{color:var(--s-text-subdued)}.action-list-item__suffix{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}";
+const flipActionListItemCss = ":host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;width:100%;min-width:15rem;margin:0;padding:var(--s-space-12) var(--s-space-16);justify-content:flex-start;align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;cursor:pointer;gap:var(--s-space-12)}.action-list-item:hover{background-color:var(--s-surface-overlay-hovered)}.action-list-item:focus{outline:none}.action-list-item:focus-visible{background-color:var(--s-surface-overlay-hovered)}.action-list-item:active{background-color:var(--s-surface-overlay-pressed)}.action-list-item:disabled{background-color:var(--s-surface-overlay-default);cursor:default}.action-list-item:disabled .action-list-item__label,.action-list-item:disabled .action-list-item__description{color:var(--s-text-disabled)}.action-list-item:disabled .action-list-item__icon{color:var(--s-icon-disabled)}.action-list-item--size-l{padding:var(--s-space-16)}.action-list-item--intent-critical ::part(icon){color:var(--s-icon-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__label{color:var(--s-text-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__icon{color:var(--s-icon-critical)}.action-list-item__icon{display:inline-flex;flex-shrink:0;color:var(--s-icon-default)}.action-list-item__label-container{display:inline-flex;min-width:0;flex-grow:1;align-items:flex-start;flex-direction:column}.action-list-item__label{overflow:hidden;max-width:100%;padding-top:0.0625rem;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.action-list-item__description{color:var(--s-text-subdued)}.action-list-item__suffix{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}";
 
 const FlipActionListItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/flip-app-layout2.js

@@ -4,7 +4,7 @@ import { i as isMobileViewport } from './utils.js';
 import { d as defineCustomElement$2 } from './flip-button2.js';
 import { d as defineCustomElement$1 } from './flip-heading2.js';
 
-const flipAppLayoutCss = ":host{display:flex;width:100%;height:100%}:host *{box-sizing:border-box}.app-layout{display:flex;overflow:hidden;width:100%;max-width:100rem;height:100%;margin-right:auto;margin-left:auto;border:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-border-default)}@media (min-width: 1440px){.app-layout{border-radius:var(--s-border-radius-base)}}.app-layout__grid{position:relative;display:grid;width:100%;height:100%;gap:var(--s-border-width-default);grid-template-columns:100%;grid-template-rows:4rem 1fr;grid-template-areas:\"body\"\n    \"body\"}.app-layout:not(.app-layout--has-navigation) .app-layout__header,.app-layout:not(.app-layout--has-navigation) .app-layout__navigation{display:none}.app-layout:not(.app-layout--has-sidebar) .app-layout__sidebar{display:none}@media (max-width: 767px){.app-layout:not(.app-layout--mobile-view-body) .app-layout__body{display:none}}@media (max-width: 767px){.app-layout:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar{display:none}}.app-layout--has-navigation .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"header\"\n      \"navigation\"}@media (min-width: 768px){.app-layout--has-navigation .app-layout__grid{grid-template-columns:min(50%, 25rem) 1fr;grid-template-areas:\"header body\"\n        \"navigation body\"}}@media (min-width: 768px){.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid{grid-template-columns:1fr min(50%, 25rem);grid-template-areas:\"body sidebar\"\n          \"body sidebar\"}}.app-layout--has-sidebar .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"body\"\n      \"body\"}@media (min-width: 1440px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid{-webkit-animation:app-layout-sidebar-slide-in 0.3s;animation:app-layout-sidebar-slide-in 0.3s;grid-template-columns:25rem 1fr 25rem;grid-template-areas:\"header body sidebar\"\n          \"navigation body sidebar\"}}@media (min-width: 1440px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-closing .app-layout__grid{-webkit-animation:app-layout-sidebar-slide-out 0.3s;animation:app-layout-sidebar-slide-out 0.3s}}@media (min-width: 768px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:min(50%, 25rem) 1fr;grid-template-areas:\"header body\"\n        \"navigation body\"}}@media (min-width: 992px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:25rem 1fr;grid-template-areas:\"header body\"\n        \"navigation body\"}}@media (min-width: 768px) and (max-width: 1439px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__sidebar{position:absolute;top:0;right:0;bottom:0;width:min(40%, 25rem);border-left:var(--s-border-width-default) solid var(--s-border-default);box-shadow:0.125rem 0.25rem 1rem rgba(0, 0, 0, 0.14)}}@media (max-width: 767px){.app-layout--mobile-view-navigation .app-layout__grid{grid-template-areas:\"header\"\n        \"navigation\"}.app-layout--mobile-view-navigation .app-layout__body,.app-layout--mobile-view-navigation .app-layout__sidebar{display:none}}@media (max-width: 767px){.app-layout--mobile-view-body .app-layout__grid{grid-template-areas:\"body\"\n        \"body\"}.app-layout--mobile-view-body .app-layout__header,.app-layout--mobile-view-body .app-layout__navigation,.app-layout--mobile-view-body .app-layout__sidebar{display:none}}@media (max-width: 767px){.app-layout--mobile-view-sidebar .app-layout__grid{grid-template-areas:\"sidebar\"\n        \"sidebar\"}.app-layout--mobile-view-sidebar .app-layout__header,.app-layout--mobile-view-sidebar .app-layout__navigation,.app-layout--mobile-view-sidebar .app-layout__body{display:none}}.app-layout--has-sidebar:not(.app-layout--sidebar-active) .app-layout__sidebar{display:none}@media (min-width: 768px){.app-layout--sidebar-closing .app-layout__sidebar{-webkit-animation:app-layout-sidebar-overlay-slide-out 0.3s;animation:app-layout-sidebar-overlay-slide-out 0.3s}}@media (min-width: 1440px){.app-layout--sidebar-closing .app-layout__sidebar{-webkit-animation:none;animation:none}}.app-layout__header{z-index:1;display:flex;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-background-default);grid-area:header;will-change:transform;gap:var(--s-space-8)}.app-layout__app-name{min-width:0}.app-layout__app-name .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__navigation-back-button{margin-left:calc(-1 * var(--s-space-4))}.app-layout__floating-cta{position:absolute;z-index:4;right:var(--s-space-16);bottom:var(--s-space-16)}.app-layout__navigation-controls{flex-shrink:0}.app-layout__navigation{z-index:1;overflow-y:auto;background-color:var(--s-background-default);grid-area:navigation;will-change:transform}.app-layout__body{z-index:2;display:grid;width:100%;height:100%;gap:var(--s-border-width-default);grid-area:body;grid-template-rows:4rem 1fr;grid-template-areas:\"app-bar\"\n    \"content\";will-change:transform}.app-layout__app-bar{display:flex;min-width:0;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-background-default);grid-area:app-bar;gap:var(--s-space-8)}.app-layout__back-to-navigation-button{margin-left:calc(-1 * var(--s-space-4))}@media (min-width: 768px){.app-layout__back-to-navigation-button{display:none}}.app-layout__app-bar-media{display:inline-flex;flex-shrink:0}.app-layout__app-bar-heading{min-width:0;flex-grow:1}.app-layout__app-bar-heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__app-bar-subheading{display:block;overflow:hidden;max-width:100%;color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.app-layout__content{overflow:auto;background-color:var(--s-background-default);grid-area:content}.app-layout__sidebar{z-index:3;display:grid;width:100%;height:100%;will-change:transform;gap:var(--s-border-width-default);grid-area:sidebar;grid-template-rows:4rem 1fr;grid-template-areas:\"sidebar-header\"\n    \"sidebar-content\"}@media (min-width: 768px){.app-layout__sidebar{-webkit-animation:app-layout-slide-in 0.3s;animation:app-layout-slide-in 0.3s}}@media (min-width: 1440px){.app-layout__sidebar{width:25rem;-webkit-animation:none;animation:none}}.app-layout__sidebar-header{display:flex;min-width:0;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-background-default);grid-area:sidebar-header;gap:var(--s-space-8)}.app-layout__sidebar-heading{min-width:0;flex-grow:1}.app-layout__sidebar-heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__sidebar-close-button{margin-left:calc(-1 * var(--s-space-4))}.app-layout__sidebar-content{overflow-y:auto;background-color:var(--s-background-default);grid-area:sidebar-content}@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{grid-template-columns:100%;grid-template-areas:\"header\"\n          \"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{position:absolute;top:0;left:0;display:grid;width:100%;transform:translate3d(100%, 0, 0)}}@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{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{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{grid-template-columns:100%;grid-template-areas:\"body\"\n          \"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{position:absolute;top:0;left:0;display:grid;border-left:var(--s-border-width-default) solid var(--s-border-default)}}@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{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{display:grid}}@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{-webkit-animation:app-layout-slide-out 0.4s;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{-webkit-animation:app-layout-slide-in 0.4s;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{position:absolute;top:0;right:100%;bottom:0;display:block;width:100%;background-color:rgba(0, 0, 0, 0.3);content:\"\";-webkit-animation:app-layout-fade-in 0.4s;animation:app-layout-fade-in 0.4s}}@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{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{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{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{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{-webkit-animation:app-layout-slide-out 0.4s;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{-webkit-animation:app-layout-slide-in 0.4s;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{position:absolute;top:0;right:100%;bottom:0;display:block;width:100%;background-color:rgba(0, 0, 0, 0.3);content:\"\";-webkit-animation:app-layout-fade-in 0.4s;animation:app-layout-fade-in 0.4s}}@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{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{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{animation-direction:reverse}}@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{-webkit-animation:app-layout-scale-in 0.3s;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{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{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{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{-webkit-animation:app-layout-scale-in 0.3s;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{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{animation-direction:reverse}}@-webkit-keyframes app-layout-sidebar-overlay-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(100%, 0, 0)}}@keyframes app-layout-sidebar-overlay-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(100%, 0, 0)}}@-webkit-keyframes app-layout-slide-in{0%{transform:translate3d(100%, 0, 0)}100%{transform:translate3d(0, 0, 0)}}@keyframes app-layout-slide-in{0%{transform:translate3d(100%, 0, 0)}100%{transform:translate3d(0, 0, 0)}}@-webkit-keyframes app-layout-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-20%, 0, 0)}}@keyframes app-layout-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-20%, 0, 0)}}@-webkit-keyframes app-layout-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes app-layout-fade-in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes app-layout-scale-in{from{transform:scale(0);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0)}to{transform:scale(1);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0.25)}}@keyframes app-layout-scale-in{from{transform:scale(0);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0)}to{transform:scale(1);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0.25)}}@-webkit-keyframes app-layout-sidebar-slide-in{from{overflow:hidden;grid-template-columns:25rem 1fr 0}to{overflow:hidden;grid-template-columns:25rem 1fr 25rem}}@keyframes app-layout-sidebar-slide-in{from{overflow:hidden;grid-template-columns:25rem 1fr 0}to{overflow:hidden;grid-template-columns:25rem 1fr 25rem}}@-webkit-keyframes app-layout-sidebar-slide-out{from{overflow:hidden;grid-template-columns:25rem 1fr 25rem}to{overflow:hidden;grid-template-columns:25rem 1fr 0}}@keyframes app-layout-sidebar-slide-out{from{overflow:hidden;grid-template-columns:25rem 1fr 25rem}to{overflow:hidden;grid-template-columns:25rem 1fr 0}}";
+const flipAppLayoutCss = ":host{display:flex;width:100%;height:100%}:host *{box-sizing:border-box}.app-layout{display:flex;overflow:hidden;width:100%;max-width:100rem;height:100%;margin-right:auto;margin-left:auto;border:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-border-default)}@media (min-width: 1440px){.app-layout{border-radius:var(--s-border-radius-base)}}.app-layout__grid{position:relative;display:grid;width:100%;height:100%;gap:var(--s-border-width-default);grid-template-columns:100%;grid-template-rows:4rem 1fr;grid-template-areas:\"body\"\n    \"body\"}.app-layout:not(.app-layout--has-navigation) .app-layout__header,.app-layout:not(.app-layout--has-navigation) .app-layout__navigation{display:none}.app-layout:not(.app-layout--has-sidebar) .app-layout__sidebar{display:none}@media (max-width: 767px){.app-layout:not(.app-layout--mobile-view-body) .app-layout__body{display:none}}@media (max-width: 767px){.app-layout:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar{display:none}}.app-layout--has-navigation .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"header\"\n      \"navigation\"}@media (min-width: 768px){.app-layout--has-navigation .app-layout__grid{grid-template-columns:min(50%, 25rem) 1fr;grid-template-areas:\"header body\"\n        \"navigation body\"}}@media (min-width: 768px){.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid{grid-template-columns:1fr min(50%, 25rem);grid-template-areas:\"body sidebar\"\n          \"body sidebar\"}}.app-layout--has-sidebar .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"body\"\n      \"body\"}@media (min-width: 1440px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid{-webkit-animation:app-layout-sidebar-slide-in 0.3s;animation:app-layout-sidebar-slide-in 0.3s;grid-template-columns:25rem 1fr 25rem;grid-template-areas:\"header body sidebar\"\n          \"navigation body sidebar\"}}@media (min-width: 1440px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-closing .app-layout__grid{-webkit-animation:app-layout-sidebar-slide-out 0.3s;animation:app-layout-sidebar-slide-out 0.3s}}@media (min-width: 768px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:min(50%, 25rem) 1fr;grid-template-areas:\"header body\"\n        \"navigation body\"}}@media (min-width: 992px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:25rem 1fr;grid-template-areas:\"header body\"\n        \"navigation body\"}}@media (min-width: 768px) and (max-width: 1439px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__sidebar{position:absolute;top:0;right:0;bottom:0;width:min(40%, 25rem);border-left:var(--s-border-width-default) solid var(--s-border-default);box-shadow:var(--s-shadow-level-3)}}@media (max-width: 767px){.app-layout--mobile-view-navigation .app-layout__grid{grid-template-areas:\"header\"\n        \"navigation\"}.app-layout--mobile-view-navigation .app-layout__body,.app-layout--mobile-view-navigation .app-layout__sidebar{display:none}}@media (max-width: 767px){.app-layout--mobile-view-body .app-layout__grid{grid-template-areas:\"body\"\n        \"body\"}.app-layout--mobile-view-body .app-layout__header,.app-layout--mobile-view-body .app-layout__navigation,.app-layout--mobile-view-body .app-layout__sidebar{display:none}}@media (max-width: 767px){.app-layout--mobile-view-sidebar .app-layout__grid{grid-template-areas:\"sidebar\"\n        \"sidebar\"}.app-layout--mobile-view-sidebar .app-layout__header,.app-layout--mobile-view-sidebar .app-layout__navigation,.app-layout--mobile-view-sidebar .app-layout__body{display:none}}.app-layout--has-sidebar:not(.app-layout--sidebar-active) .app-layout__sidebar{display:none}@media (min-width: 768px){.app-layout--sidebar-closing .app-layout__sidebar{-webkit-animation:app-layout-sidebar-overlay-slide-out 0.3s;animation:app-layout-sidebar-overlay-slide-out 0.3s}}@media (min-width: 1440px){.app-layout--sidebar-closing .app-layout__sidebar{-webkit-animation:none;animation:none}}.app-layout__header{z-index:1;display:flex;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-background-default);grid-area:header;will-change:transform;gap:var(--s-space-8)}.app-layout__app-name{min-width:0}.app-layout__app-name .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__navigation-back-button{margin-left:calc(-1 * var(--s-space-4))}.app-layout__floating-cta{position:absolute;z-index:4;right:var(--s-space-16);bottom:var(--s-space-16)}.app-layout__navigation-controls{flex-shrink:0}.app-layout__navigation{z-index:1;overflow-y:auto;background-color:var(--s-background-default);grid-area:navigation;will-change:transform}.app-layout__body{z-index:2;display:grid;width:100%;height:100%;gap:var(--s-border-width-default);grid-area:body;grid-template-rows:4rem 1fr;grid-template-areas:\"app-bar\"\n    \"content\";will-change:transform}.app-layout__app-bar{display:flex;min-width:0;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-background-default);grid-area:app-bar;gap:var(--s-space-8)}.app-layout__back-to-navigation-button{margin-left:calc(-1 * var(--s-space-4))}@media (min-width: 768px){.app-layout__back-to-navigation-button{display:none}}.app-layout__app-bar-media{display:inline-flex;flex-shrink:0}.app-layout__app-bar-heading{min-width:0;flex-grow:1}.app-layout__app-bar-heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__app-bar-subheading{display:block;overflow:hidden;max-width:100%;color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.app-layout__content{overflow:auto;background-color:var(--s-background-default);grid-area:content}.app-layout__sidebar{z-index:3;display:grid;width:100%;height:100%;will-change:transform;gap:var(--s-border-width-default);grid-area:sidebar;grid-template-rows:4rem 1fr;grid-template-areas:\"sidebar-header\"\n    \"sidebar-content\"}@media (min-width: 768px){.app-layout__sidebar{-webkit-animation:app-layout-slide-in 0.3s;animation:app-layout-slide-in 0.3s}}@media (min-width: 1440px){.app-layout__sidebar{width:25rem;-webkit-animation:none;animation:none}}.app-layout__sidebar-header{display:flex;min-width:0;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-background-default);grid-area:sidebar-header;gap:var(--s-space-8)}.app-layout__sidebar-heading{min-width:0;flex-grow:1}.app-layout__sidebar-heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__sidebar-close-button{margin-left:calc(-1 * var(--s-space-4))}.app-layout__sidebar-content{overflow-y:auto;background-color:var(--s-background-default);grid-area:sidebar-content}@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{grid-template-columns:100%;grid-template-areas:\"header\"\n          \"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{position:absolute;top:0;left:0;display:grid;width:100%;transform:translate3d(100%, 0, 0)}}@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{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{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{grid-template-columns:100%;grid-template-areas:\"body\"\n          \"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{position:absolute;top:0;left:0;display:grid;border-left:var(--s-border-width-default) solid var(--s-border-default)}}@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{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{display:grid}}@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{-webkit-animation:app-layout-slide-out 0.4s;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{-webkit-animation:app-layout-slide-in 0.4s;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{position:absolute;top:0;right:100%;bottom:0;display:block;width:100%;background-color:rgba(0, 0, 0, 0.3);content:\"\";-webkit-animation:app-layout-fade-in 0.4s;animation:app-layout-fade-in 0.4s}}@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{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{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{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{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{-webkit-animation:app-layout-slide-out 0.4s;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{-webkit-animation:app-layout-slide-in 0.4s;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{position:absolute;top:0;right:100%;bottom:0;display:block;width:100%;background-color:rgba(0, 0, 0, 0.3);content:\"\";-webkit-animation:app-layout-fade-in 0.4s;animation:app-layout-fade-in 0.4s}}@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{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{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{animation-direction:reverse}}@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{-webkit-animation:app-layout-scale-in 0.3s;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{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{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{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{-webkit-animation:app-layout-scale-in 0.3s;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{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{animation-direction:reverse}}@-webkit-keyframes app-layout-sidebar-overlay-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(100%, 0, 0)}}@keyframes app-layout-sidebar-overlay-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(100%, 0, 0)}}@-webkit-keyframes app-layout-slide-in{0%{transform:translate3d(100%, 0, 0)}100%{transform:translate3d(0, 0, 0)}}@keyframes app-layout-slide-in{0%{transform:translate3d(100%, 0, 0)}100%{transform:translate3d(0, 0, 0)}}@-webkit-keyframes app-layout-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-20%, 0, 0)}}@keyframes app-layout-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-20%, 0, 0)}}@-webkit-keyframes app-layout-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes app-layout-fade-in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes app-layout-scale-in{from{transform:scale(0);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0)}to{transform:scale(1);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0.25)}}@keyframes app-layout-scale-in{from{transform:scale(0);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0)}to{transform:scale(1);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0.25)}}@-webkit-keyframes app-layout-sidebar-slide-in{from{overflow:hidden;grid-template-columns:25rem 1fr 0}to{overflow:hidden;grid-template-columns:25rem 1fr 25rem}}@keyframes app-layout-sidebar-slide-in{from{overflow:hidden;grid-template-columns:25rem 1fr 0}to{overflow:hidden;grid-template-columns:25rem 1fr 25rem}}@-webkit-keyframes app-layout-sidebar-slide-out{from{overflow:hidden;grid-template-columns:25rem 1fr 25rem}to{overflow:hidden;grid-template-columns:25rem 1fr 0}}@keyframes app-layout-sidebar-slide-out{from{overflow:hidden;grid-template-columns:25rem 1fr 25rem}to{overflow:hidden;grid-template-columns:25rem 1fr 0}}";
 
 const FlipAppLayout = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/flip-autocomplete.js

@@ -15,7 +15,7 @@ import { d as defineCustomElement$4 } from './flip-spinner2.js';
 import { d as defineCustomElement$3 } from './flip-text-input2.js';
 import { d as defineCustomElement$2 } from './flip-visually-hidden2.js';
 
-const flipAutocompleteCss = ".sc-flip-autocomplete-h{display:block}.sc-flip-autocomplete-h *.sc-flip-autocomplete{box-sizing:border-box}.autocomplete--inactive.sc-flip-autocomplete .autocomplete__listbox-container.sc-flip-autocomplete{display:none}.autocomplete__listbox-container.sc-flip-autocomplete{position:fixed;z-index:var(--s-z-40);overflow:hidden;border-radius:var(--s-border-radius-sm);background-color:var(--s-surface-overlay-default);box-shadow:0.125rem 0.25rem 2.5rem rgba(0, 0, 0, 0.14)}.autocomplete__spinner.sc-flip-autocomplete{display:flex;padding:var(--s-space-16);justify-content:center;align-items:center}";
+const flipAutocompleteCss = ".sc-flip-autocomplete-h{display:block}.sc-flip-autocomplete-h *.sc-flip-autocomplete{box-sizing:border-box}.autocomplete--inactive.sc-flip-autocomplete .autocomplete__listbox-container.sc-flip-autocomplete{display:none}.autocomplete__listbox-container.sc-flip-autocomplete{position:fixed;z-index:var(--s-z-40);overflow:hidden;border-radius:var(--s-border-radius-sm);background-color:var(--s-surface-overlay-default);box-shadow:var(--s-shadow-level-1)}.autocomplete__spinner.sc-flip-autocomplete{display:flex;padding:var(--s-space-16);justify-content:center;align-items:center}";
 
 const FlipAutocomplete$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/flip-avatar.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { c as classnames } from './index2.js';
 import { d as defineCustomElement$2 } from './flip-icon-person2.js';
 
-const flipAvatarCss = ":host{display:inline-flex;flex-shrink:0;align-items:center;flex-direction:column}:host *{box-sizing:border-box}.avatar{position:relative;display:inline-flex;justify-content:center;align-items:center;border-radius:50%}.avatar--has-icon{color:var(--s-icon-default);background-color:var(--s-surface-raised-default)}.avatar--has-initials{padding-right:0;padding-left:0;color:#fff}.avatar--interactive{cursor:pointer}.avatar--interactive:focus{outline-color:var(--s-focus-default)}.avatar--size-xs{width:1.75rem;height:1.75rem;font-size:0.75rem}.avatar--size-xs.avatar--has-icon{padding-right:0.4375rem;padding-left:0.4375rem}.avatar--size-xs.avatar--variant-square,.avatar--size-xs.avatar--variant-square .avatar__image,.avatar--size-xs.avatar--variant-square .avatar__initials{border-radius:0.5rem}.avatar--size-s{width:2rem;height:2rem;font-size:0.75rem}.avatar--size-s.avatar--has-icon{padding-right:var(--s-space-8);padding-left:var(--s-space-8)}.avatar--size-s.avatar--variant-square,.avatar--size-s.avatar--variant-square .avatar__image,.avatar--size-s.avatar--variant-square .avatar__initials{border-radius:0.5rem}.avatar--size-m{width:2.5rem;height:2.5rem;font-size:var(--s-font-size-base)}.avatar--size-m.avatar--has-icon{padding-right:0.625rem;padding-left:0.625rem}.avatar--size-m.avatar--variant-square,.avatar--size-m.avatar--variant-square .avatar__image,.avatar--size-m.avatar--variant-square .avatar__initials{border-radius:0.625rem}.avatar--size-l{width:3rem;height:3rem;font-size:var(--s-font-size-lg)}.avatar--size-l.avatar--has-icon{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.avatar--size-l.avatar--variant-square,.avatar--size-l.avatar--variant-square .avatar__image,.avatar--size-l.avatar--variant-square .avatar__initials{border-radius:0.75rem}.avatar--size-xl{width:4rem;height:4rem;font-size:var(--s-font-size-xl)}.avatar--size-xl.avatar--has-icon{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}.avatar--size-xl.avatar--variant-square,.avatar--size-xl.avatar--variant-square .avatar__image,.avatar--size-xl.avatar--variant-square .avatar__initials{border-radius:1rem}.avatar--size-2xl{width:9rem;height:9rem;font-size:3.375rem}.avatar--size-2xl.avatar--has-icon{padding-right:var(--s-space-32);padding-left:var(--s-space-32)}.avatar--size-2xl.avatar--variant-square,.avatar--size-2xl.avatar--variant-square .avatar__image,.avatar--size-2xl.avatar--variant-square .avatar__initials{border-radius:2.25rem}.avatar--color-banana .avatar__initials{color:var(--s-decorative-banana-text);background-color:var(--s-decorative-banana-surface-subdued)}.avatar--color-blueberry .avatar__initials{color:var(--s-decorative-blueberry-text);background-color:var(--s-decorative-blueberry-surface-subdued)}.avatar--color-chilli .avatar__initials{color:var(--s-decorative-chilli-text);background-color:var(--s-decorative-chilli-surface-subdued)}.avatar--color-grape .avatar__initials{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.avatar--color-kiwi .avatar__initials{color:var(--s-decorative-kiwi-text);background-color:var(--s-decorative-kiwi-surface-subdued)}.avatar--color-pumpkin .avatar__initials{color:var(--s-decorative-pumpkin-text);background-color:var(--s-decorative-pumpkin-surface-subdued)}.avatar--color-radish .avatar__initials{color:var(--s-decorative-radish-text);background-color:var(--s-decorative-radish-surface-subdued)}.avatar__image{overflow:hidden;width:100%;height:100%;border-radius:50%}.avatar__image>img{width:100%;height:100%}.avatar__icon{display:inline-flex;width:100%;height:100%}.avatar__icon>*{width:100%;height:100%}.avatar__icon>*::part(icon){width:100%;height:100%}.avatar__initials{display:inline-flex;width:100%;min-width:0;height:100%;padding-right:0.0625rem;padding-left:0.0625rem;justify-content:center;align-items:center;border-radius:50%;font-weight:var(--s-font-weight-medium)}.avatar__initials>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.avatar__badge{position:absolute;bottom:0;left:55%;display:inline-flex;min-width:1.5rem;height:1.5rem;transform:translate3d(0, 25%, 0)}.avatar__badge--position-top{top:0;bottom:auto;transform:translate3d(0, -25%, 0)}.avatar__label{margin-top:var(--s-space-4);color:var(--s-icon-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);text-align:center}";
+const flipAvatarCss = ":host{display:inline-flex;flex-shrink:0;align-items:center;flex-direction:column}:host *{box-sizing:border-box}.avatar{position:relative;display:inline-flex;justify-content:center;align-items:center;border-radius:50%}.avatar--has-icon{color:var(--s-icon-default);background-color:var(--s-surface-raised-default)}.avatar--has-initials{padding-right:0;padding-left:0;color:#fff}.avatar--interactive{cursor:pointer}.avatar--interactive:focus:not(:focus-visible){outline:none}.avatar--interactive:focus-visible{outline-color:var(--s-focus-default)}.avatar--size-xs{width:1.75rem;height:1.75rem;font-size:0.75rem}.avatar--size-xs.avatar--has-icon{padding-right:0.4375rem;padding-left:0.4375rem}.avatar--size-xs.avatar--variant-square,.avatar--size-xs.avatar--variant-square .avatar__image,.avatar--size-xs.avatar--variant-square .avatar__initials{border-radius:0.5rem}.avatar--size-s{width:2rem;height:2rem;font-size:0.75rem}.avatar--size-s.avatar--has-icon{padding-right:var(--s-space-8);padding-left:var(--s-space-8)}.avatar--size-s.avatar--variant-square,.avatar--size-s.avatar--variant-square .avatar__image,.avatar--size-s.avatar--variant-square .avatar__initials{border-radius:0.5rem}.avatar--size-m{width:2.5rem;height:2.5rem;font-size:var(--s-font-size-base)}.avatar--size-m.avatar--has-icon{padding-right:0.625rem;padding-left:0.625rem}.avatar--size-m.avatar--variant-square,.avatar--size-m.avatar--variant-square .avatar__image,.avatar--size-m.avatar--variant-square .avatar__initials{border-radius:0.625rem}.avatar--size-l{width:3rem;height:3rem;font-size:var(--s-font-size-lg)}.avatar--size-l.avatar--has-icon{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.avatar--size-l.avatar--variant-square,.avatar--size-l.avatar--variant-square .avatar__image,.avatar--size-l.avatar--variant-square .avatar__initials{border-radius:0.75rem}.avatar--size-xl{width:4rem;height:4rem;font-size:var(--s-font-size-xl)}.avatar--size-xl.avatar--has-icon{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}.avatar--size-xl.avatar--variant-square,.avatar--size-xl.avatar--variant-square .avatar__image,.avatar--size-xl.avatar--variant-square .avatar__initials{border-radius:1rem}.avatar--size-2xl{width:9rem;height:9rem;font-size:3.375rem}.avatar--size-2xl.avatar--has-icon{padding-right:var(--s-space-32);padding-left:var(--s-space-32)}.avatar--size-2xl.avatar--variant-square,.avatar--size-2xl.avatar--variant-square .avatar__image,.avatar--size-2xl.avatar--variant-square .avatar__initials{border-radius:2.25rem}.avatar--color-banana .avatar__initials{color:var(--s-decorative-banana-text);background-color:var(--s-decorative-banana-surface-subdued)}.avatar--color-blueberry .avatar__initials{color:var(--s-decorative-blueberry-text);background-color:var(--s-decorative-blueberry-surface-subdued)}.avatar--color-chilli .avatar__initials{color:var(--s-decorative-chilli-text);background-color:var(--s-decorative-chilli-surface-subdued)}.avatar--color-grape .avatar__initials{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.avatar--color-kiwi .avatar__initials{color:var(--s-decorative-kiwi-text);background-color:var(--s-decorative-kiwi-surface-subdued)}.avatar--color-pumpkin .avatar__initials{color:var(--s-decorative-pumpkin-text);background-color:var(--s-decorative-pumpkin-surface-subdued)}.avatar--color-radish .avatar__initials{color:var(--s-decorative-radish-text);background-color:var(--s-decorative-radish-surface-subdued)}.avatar__image{overflow:hidden;width:100%;height:100%;border-radius:50%}.avatar__image>img{width:100%;height:100%}.avatar__icon{display:inline-flex;width:100%;height:100%}.avatar__icon>*{width:100%;height:100%}.avatar__icon>*::part(icon){width:100%;height:100%}.avatar__initials{display:inline-flex;width:100%;min-width:0;height:100%;padding-right:0.0625rem;padding-left:0.0625rem;justify-content:center;align-items:center;border-radius:50%;font-weight:var(--s-font-weight-medium)}.avatar__initials>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.avatar__badge{position:absolute;bottom:0;left:55%;display:inline-flex;min-width:1.5rem;height:1.5rem;transform:translate3d(0, 25%, 0)}.avatar__badge--position-top{top:0;bottom:auto;transform:translate3d(0, -25%, 0)}.avatar__label{margin-top:var(--s-space-4);color:var(--s-icon-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);text-align:center}";
 
 const flipAvatarSizeMappings = {
   xs: 28,

package/dist/components/flip-banner.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { c as classnames } from './index2.js';
 import { d as defineCustomElement$2 } from './flip-icon-close2.js';
 
-const flipBannerCss = ":host{display:block}:host *{box-sizing:border-box}.banner{display:flex;max-width:100%;padding:var(--s-space-12);align-items:flex-start}.banner:focus{outline-color:var(--s-focus-default)}@media (min-width: 768px){.banner{padding:var(--s-space-16)}}.banner--intent-default .banner__icon,.banner--intent-default .banner__content,.banner--intent-default .banner__action-button,.banner--intent-default .banner__dismiss-button,.banner--intent-critical .banner__icon,.banner--intent-critical .banner__content,.banner--intent-critical .banner__action-button,.banner--intent-critical .banner__dismiss-button,.banner--intent-success .banner__icon,.banner--intent-success .banner__content,.banner--intent-success .banner__action-button,.banner--intent-success .banner__dismiss-button,.banner--intent-info .banner__icon,.banner--intent-info .banner__content,.banner--intent-info .banner__action-button,.banner--intent-info .banner__dismiss-button{color:var(--s-text-on-status)}.banner--intent-default{background-color:var(--s-surface-neutral-default)}.banner--intent-critical{background-color:var(--s-surface-critical-default)}.banner--intent-success{background-color:var(--s-surface-success-default)}.banner--intent-info{background-color:var(--s-surface-info-default)}.banner--intent-warning{background-color:var(--s-surface-warning-default)}.banner--intent-warning .banner__icon{color:var(--s-icon-strong)}.banner--intent-warning .banner__content,.banner--intent-warning .banner__action-button,.banner--intent-warning .banner__dismiss-button{color:var(--s-text-default)}@media (min-width: 375px){.banner--has-icon .banner__content{padding-top:var(--s-space-2)}}.banner__icon{display:none;margin-right:var(--s-space-8);color:var(--s-icon-on-status)}@media (min-width: 375px){.banner__icon{display:inline-flex}}.banner__content{min-height:1.5rem;margin-right:var(--s-space-12);flex-grow:1;line-height:var(--s-line-height-base)}.banner__controls{display:inline-flex;margin-left:var(--s-space-16);align-items:center;gap:var(--s-space-16);line-height:var(--s-line-height-base)}@media (min-width: 768px){.banner__controls{gap:var(--s-space-24)}}.banner__action-button,.banner__dismiss-button{display:inline-flex;overflow:hidden;max-width:7rem;height:1.5rem;padding:0;flex-shrink:0;align-items:center;border:none;background-color:transparent;font:inherit;font-weight:var(--s-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.banner__action-button:focus,.banner__dismiss-button:focus{outline-color:var(--s-focus-default)}@media (min-width: 768px){.banner__action-button,.banner__dismiss-button{max-width:12rem}}";
+const flipBannerCss = ":host{display:block}:host *{box-sizing:border-box}.banner{display:flex;max-width:100%;padding:var(--s-space-12);align-items:flex-start}.banner:focus:not(:focus-visible){outline:none}.banner:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-4)}@media (min-width: 768px){.banner{padding:var(--s-space-16)}}.banner--intent-default .banner__icon,.banner--intent-default .banner__content,.banner--intent-default .banner__action-button,.banner--intent-default .banner__dismiss-button,.banner--intent-critical .banner__icon,.banner--intent-critical .banner__content,.banner--intent-critical .banner__action-button,.banner--intent-critical .banner__dismiss-button,.banner--intent-success .banner__icon,.banner--intent-success .banner__content,.banner--intent-success .banner__action-button,.banner--intent-success .banner__dismiss-button,.banner--intent-info .banner__icon,.banner--intent-info .banner__content,.banner--intent-info .banner__action-button,.banner--intent-info .banner__dismiss-button{color:var(--s-text-on-status)}.banner--intent-default{background-color:var(--s-surface-neutral-default)}.banner--intent-critical{background-color:var(--s-surface-critical-default)}.banner--intent-success{background-color:var(--s-surface-success-default)}.banner--intent-info{background-color:var(--s-surface-info-default)}.banner--intent-warning{background-color:var(--s-surface-warning-default)}.banner--intent-warning .banner__icon{color:var(--s-icon-strong)}.banner--intent-warning .banner__content,.banner--intent-warning .banner__action-button,.banner--intent-warning .banner__dismiss-button{color:var(--s-text-default)}@media (min-width: 375px){.banner--has-icon .banner__content{padding-top:var(--s-space-2)}}.banner__icon{display:none;margin-right:var(--s-space-8);color:var(--s-icon-on-status)}@media (min-width: 375px){.banner__icon{display:inline-flex}}.banner__content{min-height:1.5rem;margin-right:var(--s-space-12);flex-grow:1;line-height:var(--s-line-height-base)}.banner__controls{display:inline-flex;margin-left:var(--s-space-16);align-items:center;line-height:var(--s-line-height-base);gap:var(--s-space-16)}@media (min-width: 768px){.banner__controls{gap:var(--s-space-24)}}.banner__action-button,.banner__dismiss-button{display:inline-flex;overflow:hidden;max-width:7rem;height:1.5rem;padding:0;flex-shrink:0;align-items:center;border:none;background-color:transparent;font:inherit;font-weight:var(--s-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.banner__action-button:focus,.banner__dismiss-button:focus{outline-color:var(--s-focus-default)}@media (min-width: 768px){.banner__action-button,.banner__dismiss-button{max-width:12rem}}";
 
 const flipBannerIconMapping = {
   default: undefined,

package/dist/components/flip-button2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
 
-const flipButtonCss = ".sc-flip-button-h{display:inline-block;max-width:100%;flex-shrink:0}.sc-flip-button-h *.sc-flip-button{box-sizing:border-box}.button.sc-flip-button{display:inline-flex;width:100%;padding:var(--s-space-8) var(--s-space-16);justify-content:center;align-items:center;border:none;border-top-left-radius:var(--flip-button-border-top-left-radius);border-top-right-radius:var(--flip-button-border-top-right-radius);border-bottom-right-radius:var(--flip-button-border-bottom-right-radius);border-bottom-left-radius:var(--flip-button-border-bottom-left-radius);color:var(--s-text-subdued);background-color:var(--flip-ghost-button-background-default);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);text-decoration:none;cursor:pointer;gap:var(--s-space-8)}.button.sc-flip-button:hover{background-color:var(--flip-ghost-button-background-hovered)}.button.sc-flip-button:active{background-color:var(--flip-ghost-button-background-pressed)}.button.sc-flip-button:disabled{color:var(--s-text-disabled);background-color:var(--flip-ghost-button-background-default);cursor:default}.button.sc-flip-button:disabled .button__icon.sc-flip-button{color:var(--s-icon-disabled)}.button.sc-flip-button:focus{outline-color:var(--s-focus-default)}.button--variant-ghost.button--intent-primary.sc-flip-button:not(:disabled){color:var(--s-text-highlight)}.button--variant-ghost.button--intent-primary.sc-flip-button:not(:disabled) .button__icon.sc-flip-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--intent-critical.sc-flip-button:not(:disabled){color:var(--s-text-critical)}.button--variant-ghost.button--intent-critical.sc-flip-button:not(:disabled) .button__icon.sc-flip-button{color:var(--s-icon-critical)}.button--variant-ghost.button--size-l.sc-flip-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-ghost.button--size-l.button--icon-only.sc-flip-button{padding:var(--s-space-12)}.button--variant-flat.sc-flip-button{color:var(--s-text-default);background-color:var(--s-action-neutral-default)}.button--variant-flat.sc-flip-button:hover{background-color:var(--s-action-neutral-hovered)}.button--variant-flat.sc-flip-button:active{background-color:var(--s-action-neutral-pressed)}.button--variant-flat.sc-flip-button:disabled{background-color:var(--s-action-neutral-disabled)}.button--variant-flat.button--intent-primary.sc-flip-button:not(:disabled){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-flat.button--intent-primary.sc-flip-button:not(:disabled):hover{background-color:var(--s-action-primary-hovered)}.button--variant-flat.button--intent-primary.sc-flip-button:not(:disabled):active{background-color:var(--s-action-primary-pressed)}.button--variant-flat.button--intent-primary.sc-flip-button:not(:disabled) .button__icon.sc-flip-button{color:var(--s-icon-on-action-primary)}.button--variant-flat.sc-flip-button .button__icon.sc-flip-button{color:var(--s-icon-strong)}.button--variant-plain.sc-flip-button{padding:0;border-radius:0;color:var(--s-interactive-neutral-default);background-color:transparent}.button--variant-plain.sc-flip-button:hover:not(:disabled){color:var(--s-interactive-neutral-default);background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.button--variant-plain.sc-flip-button:hover:not(:disabled) .button__icon.sc-flip-button{color:var(--s-interactive-neutral-default)}.button--variant-plain.sc-flip-button:active:not(:disabled){color:var(--s-interactive-neutral-hovered);background-color:transparent}.button--variant-plain.sc-flip-button:active:not(:disabled) .button__icon.sc-flip-button{color:var(--s-interactive-neutral-hovered)}.button--variant-plain.sc-flip-button:disabled{color:var(--s-interactive-neutral-disabled);background-color:transparent}.button--variant-plain.sc-flip-button:disabled .button__icon.sc-flip-button{color:var(--s-interactive-neutral-disabled)}.button--variant-plain.button--intent-primary.sc-flip-button{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-flip-button:hover{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-flip-button:hover .button__icon.sc-flip-button{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-flip-button:active{color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-flip-button:active .button__icon.sc-flip-button{color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-flip-button:disabled{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-flip-button:disabled .button__icon.sc-flip-button{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-flip-button .button__icon.sc-flip-button{color:var(--s-interactive-primary-default)}.button--variant-plain.sc-flip-button .button__icon.sc-flip-button{color:var(--s-interactive-neutral-default)}.button--variant-on-image.sc-flip-button{color:var(--s-text-on-image);background:linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),\n    rgba(255, 255, 255, 0.3)}.button--variant-on-image.sc-flip-button:hover{background:linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),\n      rgba(255, 255, 255, 0.4)}.button--variant-on-image.sc-flip-button:active{background:linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),\n      rgba(255, 255, 255, 0.5)}.button--variant-on-image.sc-flip-button:disabled{color:var(--s-text-on-image);background:linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),\n      rgba(255, 255, 255, 0.3)}.button--variant-on-image.sc-flip-button:disabled .button__icon.sc-flip-button{color:var(--s-icon-on-image)}.button--variant-on-image.sc-flip-button .button__icon.sc-flip-button{color:var(--s-icon-on-image)}.button--variant-floating.sc-flip-button{color:var(--s-text-default);background-color:var(--s-surface-overlay-default);box-shadow:0.125rem 0.25rem 2.5rem rgba(0, 0, 0, 0.14)}.button--variant-floating.sc-flip-button:hover{color:var(--s-text-on-action-primary);background-color:var(--s-surface-overlay-hovered)}.button--variant-floating.sc-flip-button:active{color:var(--s-text-on-action-primary);background-color:var(--s-surface-overlay-pressed)}.button--variant-floating.button--icon-only.sc-flip-button{padding:var(--s-space-12)}.button--variant-floating.button--intent-primary.sc-flip-button{padding:var(--s-space-12) var(--s-space-20);border-radius:1.5rem;color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-floating.button--intent-primary.sc-flip-button:hover:not(:disabled){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-hovered)}.button--variant-floating.button--intent-primary.sc-flip-button:active:not(:disabled){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-pressed)}.button--variant-floating.button--intent-primary.sc-flip-button:disabled{color:var(--s-text-on-action-primary)}.button--variant-floating.button--intent-primary.sc-flip-button:disabled .button__icon.sc-flip-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.button--intent-primary.button--icon-only.sc-flip-button{padding:var(--s-space-12)}.button--variant-floating.button--intent-primary.sc-flip-button .button__icon.sc-flip-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.sc-flip-button .button__icon.sc-flip-button{color:var(--s-icon-strong)}.button--icon-position-end.sc-flip-button .button__icon.sc-flip-button{margin-right:calc(-1 * var(--s-space-4));margin-left:0;order:2}.button--icon-only.sc-flip-button{padding:var(--s-space-8);border-top-left-radius:var(--flip-icon-button-border-top-left-radius);border-top-right-radius:var(--flip-icon-button-border-top-right-radius);border-bottom-right-radius:var(\n    --flip-icon-button-border-bottom-right-radius\n  );border-bottom-left-radius:var(--flip-icon-button-border-bottom-left-radius)}.button--icon-only.sc-flip-button .button__icon.sc-flip-button{margin-right:0;margin-left:0}.button__icon.sc-flip-button{display:inline-flex;margin-left:calc(-1 * var(--s-space-4));color:var(--s-icon-default);order:0}.button__label.sc-flip-button{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis;order:1}";
+const flipButtonCss = ".sc-flip-button-h{display:inline-block;max-width:100%;flex-shrink:0}.sc-flip-button-h *.sc-flip-button{box-sizing:border-box}.button.sc-flip-button{display:inline-flex;width:100%;padding:var(--s-space-8) var(--s-space-16);justify-content:center;align-items:center;border:none;border-top-left-radius:var(--flip-button-border-top-left-radius);border-top-right-radius:var(--flip-button-border-top-right-radius);border-bottom-right-radius:var(--flip-button-border-bottom-right-radius);border-bottom-left-radius:var(--flip-button-border-bottom-left-radius);color:var(--s-text-subdued);background-color:var(--flip-ghost-button-background-default);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);text-decoration:none;cursor:pointer;gap:var(--s-space-8)}.button.sc-flip-button:hover{background-color:var(--flip-ghost-button-background-hovered)}.button.sc-flip-button:active{background-color:var(--flip-ghost-button-background-pressed)}.button.sc-flip-button:disabled{color:var(--s-text-disabled);background-color:var(--flip-ghost-button-background-default);cursor:default}.button.sc-flip-button:disabled .button__icon.sc-flip-button{color:var(--s-icon-disabled)}.button.sc-flip-button:focus:not(:focus-visible){outline:none}.button.sc-flip-button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.button--variant-ghost.button--intent-primary.sc-flip-button:not(:disabled){color:var(--s-text-highlight)}.button--variant-ghost.button--intent-primary.sc-flip-button:not(:disabled) .button__icon.sc-flip-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--intent-critical.sc-flip-button:not(:disabled){color:var(--s-text-critical)}.button--variant-ghost.button--intent-critical.sc-flip-button:not(:disabled) .button__icon.sc-flip-button{color:var(--s-icon-critical)}.button--variant-ghost.button--size-l.sc-flip-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-ghost.button--size-l.button--icon-only.sc-flip-button{padding:var(--s-space-12)}.button--variant-flat.sc-flip-button{color:var(--s-text-default);background-color:var(--s-action-neutral-default)}.button--variant-flat.sc-flip-button:hover{background-color:var(--s-action-neutral-hovered)}.button--variant-flat.sc-flip-button:active{background-color:var(--s-action-neutral-pressed)}.button--variant-flat.sc-flip-button:disabled{background-color:var(--s-action-neutral-disabled)}.button--variant-flat.button--intent-primary.sc-flip-button:not(:disabled){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-flat.button--intent-primary.sc-flip-button:not(:disabled):hover{background-color:var(--s-action-primary-hovered)}.button--variant-flat.button--intent-primary.sc-flip-button:not(:disabled):active{background-color:var(--s-action-primary-pressed)}.button--variant-flat.button--intent-primary.sc-flip-button:not(:disabled) .button__icon.sc-flip-button{color:var(--s-icon-on-action-primary)}.button--variant-flat.sc-flip-button .button__icon.sc-flip-button{color:var(--s-icon-strong)}.button--variant-plain.sc-flip-button{padding:0;border-radius:0;color:var(--s-interactive-neutral-default);background-color:transparent}.button--variant-plain.sc-flip-button:hover:not(:disabled){color:var(--s-interactive-neutral-default);background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.button--variant-plain.sc-flip-button:hover:not(:disabled) .button__icon.sc-flip-button{color:var(--s-interactive-neutral-default)}.button--variant-plain.sc-flip-button:active:not(:disabled){color:var(--s-interactive-neutral-hovered);background-color:transparent}.button--variant-plain.sc-flip-button:active:not(:disabled) .button__icon.sc-flip-button{color:var(--s-interactive-neutral-hovered)}.button--variant-plain.sc-flip-button:disabled{color:var(--s-interactive-neutral-disabled);background-color:transparent}.button--variant-plain.sc-flip-button:disabled .button__icon.sc-flip-button{color:var(--s-interactive-neutral-disabled)}.button--variant-plain.button--intent-primary.sc-flip-button{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-flip-button:hover{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-flip-button:hover .button__icon.sc-flip-button{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-flip-button:active{color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-flip-button:active .button__icon.sc-flip-button{color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-flip-button:disabled{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-flip-button:disabled .button__icon.sc-flip-button{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-flip-button .button__icon.sc-flip-button{color:var(--s-interactive-primary-default)}.button--variant-plain.sc-flip-button .button__icon.sc-flip-button{color:var(--s-interactive-neutral-default)}.button--variant-on-image.sc-flip-button{color:var(--s-text-on-image);background:linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),\n    rgba(255, 255, 255, 0.3)}.button--variant-on-image.sc-flip-button:hover{background:linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),\n      rgba(255, 255, 255, 0.4)}.button--variant-on-image.sc-flip-button:active{background:linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),\n      rgba(255, 255, 255, 0.5)}.button--variant-on-image.sc-flip-button:disabled{color:var(--s-text-on-image);background:linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),\n      rgba(255, 255, 255, 0.3)}.button--variant-on-image.sc-flip-button:disabled .button__icon.sc-flip-button{color:var(--s-icon-on-image)}.button--variant-on-image.sc-flip-button .button__icon.sc-flip-button{color:var(--s-icon-on-image)}.button--variant-floating.sc-flip-button{color:var(--s-text-default);background-color:var(--s-surface-overlay-default);box-shadow:var(--s-shadow-level-1)}.button--variant-floating.sc-flip-button:hover{color:var(--s-text-on-action-primary);background-color:var(--s-surface-overlay-hovered)}.button--variant-floating.sc-flip-button:active{color:var(--s-text-on-action-primary);background-color:var(--s-surface-overlay-pressed)}.button--variant-floating.button--icon-only.sc-flip-button{padding:var(--s-space-12)}.button--variant-floating.button--intent-primary.sc-flip-button{padding:var(--s-space-12) var(--s-space-20);border-radius:1.5rem;color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-floating.button--intent-primary.sc-flip-button:hover:not(:disabled){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-hovered)}.button--variant-floating.button--intent-primary.sc-flip-button:active:not(:disabled){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-pressed)}.button--variant-floating.button--intent-primary.sc-flip-button:disabled{color:var(--s-text-on-action-primary)}.button--variant-floating.button--intent-primary.sc-flip-button:disabled .button__icon.sc-flip-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.button--intent-primary.button--icon-only.sc-flip-button{padding:var(--s-space-12)}.button--variant-floating.button--intent-primary.sc-flip-button .button__icon.sc-flip-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.sc-flip-button .button__icon.sc-flip-button{color:var(--s-icon-strong)}.button--icon-position-end.sc-flip-button .button__icon.sc-flip-button{margin-right:calc(-1 * var(--s-space-4));margin-left:0;order:2}.button--icon-only.sc-flip-button{padding:var(--s-space-8);border-top-left-radius:var(--flip-icon-button-border-top-left-radius);border-top-right-radius:var(--flip-icon-button-border-top-right-radius);border-bottom-right-radius:var(\n    --flip-icon-button-border-bottom-right-radius\n  );border-bottom-left-radius:var(--flip-icon-button-border-bottom-left-radius)}.button--icon-only.sc-flip-button .button__icon.sc-flip-button{margin-right:0;margin-left:0}.button__icon.sc-flip-button{display:inline-flex;margin-left:calc(-1 * var(--s-space-4));color:var(--s-icon-default);order:0}.button__label.sc-flip-button{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis;order:1}";
 
 const FlipButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/flip-card.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
 
-const flipCardCss = ":host{display:block}:host *{box-sizing:border-box}.card{display:block;width:100%;margin:0;padding:0;border:var(--s-border-width-default) solid var(--s-border-default);border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--s-surface-default);font:inherit;text-decoration:none}.card--elevated{border-color:transparent;box-shadow:0 0.0625rem 0.25rem rgba(25, 26, 28, 0.16),\n    0 0.25rem 1rem rgba(25, 26, 28, 0.04)}a.card,button.card,.card--interactive{cursor:pointer}a.card:hover,button.card:hover,.card--interactive:hover{background-color:var(--s-surface-hovered)}a.card:active,button.card:active,.card--interactive:active{background-color:var(--s-surface-pressed)}";
+const flipCardCss = ":host{display:block}:host *{box-sizing:border-box}.card{display:block;width:100%;margin:0;padding:0;border:var(--s-border-width-default) solid var(--s-border-default);border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--s-surface-default);font:inherit;text-decoration:none}.card--elevated{border-color:transparent;box-shadow:0 0.0625rem 0.25rem rgba(25, 26, 28, 0.16),\n    0 0.25rem 1rem rgba(25, 26, 28, 0.04)}a.card,button.card,.card--interactive{cursor:pointer}a.card:hover,button.card:hover,.card--interactive:hover{background-color:var(--s-surface-hovered)}a.card:active,button.card:active,.card--interactive:active{background-color:var(--s-surface-pressed)}a.card:focus:not(:focus-visible),button.card:focus:not(:focus-visible),.card--interactive:focus:not(:focus-visible){outline:none}a.card:focus-visible,button.card:focus-visible,.card--interactive:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-4)}";
 
 const FlipCard$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/flip-date-input.js

@@ -6255,7 +6255,7 @@ var maska = createCommonjsModule(function (module, exports) {
 !function(e,t){t(exports);}(commonjsGlobal,(function(e){var t={"#":{pattern:/[0-9]/},X:{pattern:/[0-9a-zA-Z]/},S:{pattern:/[a-zA-Z]/},A:{pattern:/[a-zA-Z]/,uppercase:!0},a:{pattern:/[a-zA-Z]/,lowercase:!0},"!":{escape:!0},"*":{repeat:!0}};function n(e,n,r=t,o=!0){return s(n).length>1?function(e){const t=s(e).sort(((e,t)=>e.length-t.length));return function(e,s,r,o=!0){const i=t.map((t=>a(e,t,r,!1))).pop();for(const s in t)if(n(i,t[s],r))return a(e,t[s],r,o);return ""};function n(e,t,n){for(const e in n)n[e].escape&&(t=t.replace(new RegExp(e+".{1}","g"),""));return t.split("").filter((e=>n[e]&&n[e].pattern)).length>=e.length}}(n)(e,n,r,o):a(e,n,r,o)}function s(e){try{return JSON.parse(e)}catch{return [e]}}function a(e,t,n,s=!0){let a=0,o=0,i="",u="";for(;a<t.length&&o<e.length;){let u=t[a];const p=e[o],l=n[u];if(l&&l.pattern)l.pattern.test(p)&&(i+=r(p,l),a++,s&&t[a]&&(n[t[a]]?n[t[a]]&&n[t[a]].escape&&(i+=t[a+1],a+=2):(i+=t[a],a++))),o++;else if(l&&l.repeat){const e=n[t[a-1]];e&&!e.pattern.test(p)?a++:a--;}else l&&l.escape&&(a++,u=t[a]),s&&(i+=u),p===u&&o++,a++;}for(;s&&a<t.length;){const e=t[a];if(n[e]){u="";break}u+=e,a++;}return i+u}function r(e,t){return t.transform&&(e=t.transform(e)),t.uppercase?e.toLocaleUpperCase():t.lowercase?e.toLocaleLowerCase():e}function o(e){return e instanceof HTMLInputElement?e:e.querySelector("input")||e}function i(e){return "[object String]"===Object.prototype.toString.call(e)}class u{constructor(e,n={}){if(!e)throw new Error("Maska: no element for mask");if(null!=n.preprocessor&&"function"!=typeof n.preprocessor)throw new Error("Maska: preprocessor must be a function");if(n.tokens)for(const e in n.tokens)n.tokens[e]={...n.tokens[e]},n.tokens[e].pattern&&i(n.tokens[e].pattern)&&(n.tokens[e].pattern=new RegExp(n.tokens[e].pattern));this._opts={mask:n.mask,tokens:{...t,...n.tokens},preprocessor:n.preprocessor},this._el=i(e)?document.querySelectorAll(e):e.length?e:[e],this.inputEvent=e=>this.updateValue(e.target,e),this.init();}init(){for(let e=0;e<this._el.length;e++){const t=o(this._el[e]);!this._opts.mask||t.dataset.mask&&t.dataset.mask===this._opts.mask||(t.dataset.mask=this._opts.mask),setTimeout((()=>this.updateValue(t)),0),t.dataset.maskInited||(t.dataset.maskInited=!0,t.addEventListener("input",this.inputEvent),t.addEventListener("beforeinput",this.beforeInput));}}destroy(){for(let e=0;e<this._el.length;e++){const t=o(this._el[e]);t.removeEventListener("input",this.inputEvent),t.removeEventListener("beforeinput",this.beforeInput),delete t.dataset.mask,delete t.dataset.maskInited;}}updateValue(e,t){if(!e||!e.type)return;const s=e.type.match(/^number$/i)&&e.validity.badInput;if(!e.value&&!s||!e.dataset.mask)return e.dataset.maskRawValue="",void this.dispatch("maska",e,t);let a=e.selectionEnd;const r=e.value,o=r[a-1];e.dataset.maskRawValue=n(e.value,e.dataset.mask,this._opts.tokens,!1);let i=e.value;this._opts.preprocessor&&(i=this._opts.preprocessor(i)),e.value=n(i,e.dataset.mask,this._opts.tokens),t&&"insertText"===t.inputType&&a===r.length&&(a=e.value.length),function(e,t,n){for(;t&&t<e.value.length&&e.value.charAt(t-1)!==n;)t++;(e.type?e.type.match(/^(text|search|password|tel|url)$/i):!e.type)&&e===document.activeElement&&(e.setSelectionRange(t,t),setTimeout((function(){e.setSelectionRange(t,t);}),0));}(e,a,o),this.dispatch("maska",e,t),e.value!==r&&this.dispatch("input",e,t);}beforeInput(e){e&&e.target&&e.target.type&&e.target.type.match(/^number$/i)&&e.data&&isNaN(e.target.value+e.data)&&e.preventDefault();}dispatch(e,t,n){t.dispatchEvent(function(e,t=null){const n=document.createEvent("Event");return n.initEvent(e,!0,!0),t&&(n.inputType=t),n}(e,n&&n.inputType||null));}}var p=(()=>{const e=new WeakMap;return (t,n)=>{n.value&&(e.has(t)&&!function(e){return !(i(e.value)&&e.value===e.oldValue||Array.isArray(e.value)&&JSON.stringify(e.value)===JSON.stringify(e.oldValue)||e.value&&e.value.mask&&e.oldValue&&e.oldValue.mask&&e.value.mask===e.oldValue.mask)}(n)||e.set(t,new u(t,function(e){const t={};return e.mask?(t.mask=Array.isArray(e.mask)?JSON.stringify(e.mask):e.mask,t.tokens=e.tokens?{...e.tokens}:{},t.preprocessor=e.preprocessor):t.mask=Array.isArray(e)?JSON.stringify(e):e,t}(n.value))));}})();function l(e){e.directive("maska",p);}"undefined"!=typeof window&&window.Vue&&window.Vue.use&&window.Vue.use(l),e.create=function(e,t){return new u(e,t)},e.default=l,e.install=l,e.mask=n,e.maska=p,e.tokens=t,Object.defineProperty(e,"__esModule",{value:!0});}));
 });
 
-const flipDateInputCss = ".sc-flip-date-input-h{display:flex;width:100%}.sc-flip-date-input-h *.sc-flip-date-input{box-sizing:border-box}.date-input.sc-flip-date-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);line-height:var(--s-line-height-sm)}.date-input__input.sc-flip-date-input{display:inline-flex;width:100%;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.date-input__input.sc-flip-date-input:focus{outline:none}.date-input__input.sc-flip-date-input:disabled{color:var(--s-text-disabled);background-color:transparent}.date-input__date-picker-button.sc-flip-date-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.date-input__date-picker-button.sc-flip-date-input:focus{outline-color:var(--s-focus-default)}.date-input__date-picker-button.sc-flip-date-input:disabled{cursor:default;color:var(--s-icon-disabled)}";
+const flipDateInputCss = ".sc-flip-date-input-h{display:flex;width:100%}.sc-flip-date-input-h *.sc-flip-date-input{box-sizing:border-box}.date-input.sc-flip-date-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);line-height:var(--s-line-height-sm)}.date-input__input.sc-flip-date-input{display:inline-flex;width:100%;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.date-input__input.sc-flip-date-input:focus{outline:none}.date-input__input.sc-flip-date-input:disabled{color:var(--s-text-disabled);background-color:transparent}.date-input__date-picker-button.sc-flip-date-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.date-input__date-picker-button.sc-flip-date-input:focus:not(:focus-visible){outline:none}.date-input__date-picker-button.sc-flip-date-input:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.date-input__date-picker-button.sc-flip-date-input:disabled{color:var(--s-icon-disabled);cursor:default}";
 
 const internalDateFormat = "yyyy-MM-dd";
 const FlipDateInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {

package/dist/components/flip-dialog.js

@@ -5,7 +5,7 @@ import { d as defineCustomElement$4 } from './flip-button2.js';
 import { d as defineCustomElement$3 } from './flip-button-group2.js';
 import { d as defineCustomElement$2 } from './flip-stack2.js';
 
-const flipDialogCss = ":host{--flip-ghost-button-background-default:var(--s-surface-overlay-default);--flip-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--flip-ghost-button-background-pressed:var(--s-surface-overlay-pressed);display:block}:host *{box-sizing:border-box}.dialog{position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;inset:0}.dialog[aria-hidden=\"true\"]{display:none}.dialog:not(.dialog--closing) .dialog__backdrop{-webkit-animation:0.15s dialog-backdrop-fade-in;animation:0.15s dialog-backdrop-fade-in}@media (prefers-reduced-motion){.dialog:not(.dialog--closing) .dialog__backdrop{-webkit-animation:none;animation:none}}.dialog:not(.dialog--closing) .dialog__body{-webkit-animation:0.15s dialog-scale-in;animation:0.15s dialog-scale-in}@media (prefers-reduced-motion){.dialog:not(.dialog--closing) .dialog__body{-webkit-animation:none;animation:none}}.dialog--closing{-webkit-animation:0.15s dialog-fade-out;animation:0.15s dialog-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.dialog--closing{-webkit-animation:none;animation:none}}.dialog__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.dialog__body{z-index:var(--s-z-40);overflow-x:hidden;overflow-y:auto;width:18.5rem;max-height:90vh;padding-top:var(--s-space-24);padding-right:var(--s-space-8);padding-bottom:var(--s-space-8);padding-left:var(--s-space-8);border-radius:var(--s-border-radius-l);background-color:var(--s-surface-overlay-default);text-align:center;box-shadow:0.125rem 0.25rem 1rem rgba(0, 0, 0, 0.14)}.dialog__heading{margin:0;margin-bottom:var(--s-space-8);font-size:var(--s-font-size-lg);font-weight:var(--s-font-weight-semibold);line-height:var(--s-line-height-lg)}.dialog__content{margin-bottom:var(--s-space-24);line-height:var(--s-line-height-base)}.dialog__content ::slotted(*){margin:0}@-webkit-keyframes dialog-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes dialog-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@-webkit-keyframes dialog-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes dialog-backdrop-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes dialog-fade-out{from{opacity:1}to{opacity:0}}@keyframes dialog-fade-out{from{opacity:1}to{opacity:0}}";
+const flipDialogCss = ":host{--flip-ghost-button-background-default:var(--s-surface-overlay-default);--flip-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--flip-ghost-button-background-pressed:var(--s-surface-overlay-pressed);display:block}:host *{box-sizing:border-box}.dialog{position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;inset:0}.dialog[aria-hidden=\"true\"]{display:none}.dialog:not(.dialog--closing) .dialog__backdrop{-webkit-animation:0.15s dialog-backdrop-fade-in;animation:0.15s dialog-backdrop-fade-in}@media (prefers-reduced-motion){.dialog:not(.dialog--closing) .dialog__backdrop{-webkit-animation:none;animation:none}}.dialog:not(.dialog--closing) .dialog__body{-webkit-animation:0.15s dialog-scale-in;animation:0.15s dialog-scale-in}@media (prefers-reduced-motion){.dialog:not(.dialog--closing) .dialog__body{-webkit-animation:none;animation:none}}.dialog--closing{-webkit-animation:0.15s dialog-fade-out;animation:0.15s dialog-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.dialog--closing{-webkit-animation:none;animation:none}}.dialog__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.dialog__body{z-index:var(--s-z-40);overflow-x:hidden;overflow-y:auto;width:18.5rem;max-height:90vh;padding-top:var(--s-space-24);padding-right:var(--s-space-8);padding-bottom:var(--s-space-8);padding-left:var(--s-space-8);border-radius:var(--s-border-radius-l);background-color:var(--s-surface-overlay-default);text-align:center;box-shadow:var(--s-shadow-level-3)}.dialog__heading{margin:0;margin-bottom:var(--s-space-8);font-size:var(--s-font-size-lg);font-weight:var(--s-font-weight-semibold);line-height:var(--s-line-height-lg)}.dialog__content{margin-bottom:var(--s-space-24);line-height:var(--s-line-height-base)}.dialog__content ::slotted(*){margin:0}@-webkit-keyframes dialog-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes dialog-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@-webkit-keyframes dialog-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes dialog-backdrop-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes dialog-fade-out{from{opacity:1}to{opacity:0}}@keyframes dialog-fade-out{from{opacity:1}to{opacity:0}}";
 
 const FlipDialog$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {