@getflip/swirl-components 0.5.0 → 0.6.1

package/dist/cjs/flip-app-layout_5.cjs.entry.js

@@ -7,7 +7,7 @@ const index$1 = require('./index-b8470262.js');
 const utils = require('./utils-6b8d45f4.js');
 require('./_commonjsHelpers-a5111d61.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{fles-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: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 FlipAppLayout = class {
   constructor(hostRef) {
@@ -118,11 +118,13 @@ const FlipAppLayout = class {
     }
     this.transitioningFrom = this.mobileView;
     this.transitioningTo = mobileView;
-    const delay = this.transitionStyle === "slides"
-      ? 400
-      : this.transitionStyle === "dialog"
-        ? 300
-        : 0;
+    let delay = 0;
+    if (this.transitionStyle === "slides") {
+      delay = 400;
+    }
+    else if (this.transitionStyle === "dialog") {
+      delay = 300;
+    }
     this.transitionTimeout = setTimeout(() => {
       this.mobileView = mobileView;
       this.transitioningFrom = undefined;

package/dist/cjs/flip-button.cjs.entry.js

@@ -27,15 +27,20 @@ const FlipButton = class {
     const icon = this.iconEl.children[0];
     icon === null || icon === void 0 ? void 0 : icon.setAttribute("size", "24");
   }
+  getAriaLabel(hideLabel) {
+    if (Boolean(this.flipAriaLabel)) {
+      return this.flipAriaLabel;
+    }
+    else if (hideLabel) {
+      return this.label;
+    }
+    return undefined;
+  }
   render() {
     const hideLabel = (this.hideLabel && Boolean(this.icon)) ||
       (this.variant === "floating" && this.intent === "default");
     const isLink = Boolean(this.href);
-    const ariaLabel = Boolean(this.flipAriaLabel)
-      ? this.flipAriaLabel
-      : hideLabel
-        ? this.label
-        : undefined;
+    const ariaLabel = this.getAriaLabel(hideLabel);
     const className = index$1.classnames("button", `button--icon-position-${this.iconPosition}`, `button--intent-${this.intent}`, `button--size-${this.size}`, `button--variant-${this.variant}`, {
       "button--icon-only": hideLabel,
     });

package/dist/cjs/flip-checkbox.cjs.entry.js

@@ -20,17 +20,24 @@ const FlipCheckbox = class {
       this.valueChange.emit(this.checked);
     };
   }
+  getAriaCheckedLabel(checked, unchecked) {
+    if (checked) {
+      return "true";
+    }
+    else if (unchecked) {
+      return "false";
+    }
+    return "mixed";
+  }
   render() {
     const unchecked = this.checked === false || this.checked === "false";
     const checked = this.checked === true || this.checked === "true";
     const indeterminate = this.checked === "indeterminate";
     const showLabelContainer = Boolean(this.label) || Boolean(this.description);
-    const ariaCheckedLabel = checked ? "true" : unchecked ? "false" : "mixed";
-    const ariaInvalid = this.invalid === true
-      ? "true"
-      : this.invalid === false
-        ? "false"
-        : undefined;
+    const ariaCheckedLabel = this.getAriaCheckedLabel(checked, unchecked);
+    const ariaInvalid = this.invalid === true || this.invalid === false
+      ? String(this.invalid)
+      : undefined;
     const className = index$1.classnames("checkbox", {
       "checkbox--checked": checked,
       "checkbox--disabled": this.disabled,

package/dist/cjs/flip-console-layout.cjs.entry.js

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-72831c5f.js');
+
+const flipConsoleLayoutCss = ":host{display:block;width:100%;height:100vh}:host *{box-sizing:border-box}.console-layout{display:grid;width:100%;height:100%;grid-template-columns:20rem 1fr;grid-template-areas:\"sidebar main\"}.console-layout__sidebar{display:grid;overflow-x:hidden;overflow-y:auto;width:100%;height:100%;border-right:var(--s-border-width-default) solid var(--s-border-default);grid-template-rows:auto 1fr auto;grid-template-areas:\"header\"\n    \"navigation\"\n    \"user\";grid-area:sidebar}.console-layout__header{position:sticky;top:0;min-width:0;padding:var(--s-space-20) var(--s-space-24);background-color:var(--s-background-default);grid-area:header}.console-layout__navigation{padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);background-color:var(--s-background-default);grid-area:navigation}.console-layout__user{position:sticky;bottom:0;margin-top:var(--s-border-width-default);padding:var(--s-space-16) var(--s-space-24) var(--s-space-24);border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:user}.console-layout__main{display:grid;overflow-x:hidden;overflow-y:auto;width:100%;height:100%;grid-area:main;gap:var(--s-border-width-default);grid-template-rows:4rem 1fr;grid-template-areas:\"app-bar\"\n    \"content\"}.console-layout__app-bar{position:sticky;top:0;display:flex;min-width:0;padding-right:2.5rem;padding-left:2.5rem;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);gap:var(--s-space-12);grid-area:app-bar}.console-layout__app-name{min-width:0;flex-grow:1}.console-layout__app-name .heading{overflow:hidden;font-weight:var(--s-font-weight-regular);white-space:nowrap;text-overflow:ellipsis}.console-layout__help-button{flex-shrink:0}.console-layout__content{padding:2.5rem;background-color:var(--s-background-default);grid-area:content}.console-layout__logo{display:flex;min-width:0;align-items:center;gap:var(--s-space-12)}.console-layout__logo-mark{flex-shrink:0}.console-layout__logo-text{min-width:0}.console-layout__logo-text::part(text){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.console-layout__content-header{display:flex;margin-bottom:2.5rem;gap:var(--s-space-16)}.console-layout__back-button{position:relative;top:calc(-1 * var(--s-space-2));flex-shrink:0}.console-layout__subheading{margin-top:var(--s-space-8)}";
+
+const FlipConsoleLayout = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.backButtonClick = index.createEvent(this, "backButtonClick", 7);
+    this.helpButtonClick = index.createEvent(this, "helpButtonClick", 7);
+    this.backButonLabel = "Back";
+    this.helpButonLabel = "Help";
+    this.logoText = "Admin";
+    this.navigationLabel = "Main";
+    this.onBackButtonClick = (event) => {
+      this.backButtonClick.emit(event);
+    };
+    this.onHelpButtonClick = (event) => {
+      this.helpButtonClick.emit(event);
+    };
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "console-layout" }, index.h("div", { class: "console-layout__sidebar" }, index.h("header", { class: "console-layout__header" }, index.h("div", { class: "console-layout__logo" }, index.h("svg", { class: "console-layout__logo-mark", fill: "none", height: "26", viewBox: "0 0 16 26", width: "16", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M0.624238 14.0705C0.326496 13.5353 0.118077 12.9406 0.0287543 12.3161C-0.0307941 11.662 -0.0010199 11.0375 0.147851 10.4428C0.296722 9.84813 0.594464 9.25343 0.951754 8.77767C1.33882 8.27217 1.78543 7.85588 2.35114 7.55853L14.6181 0.362671C14.9159 0.8979 15.1243 1.4926 15.2136 2.11703C15.3029 2.74147 15.2434 3.3659 15.0945 3.99034C14.9456 4.58504 14.6479 5.17974 14.2906 5.6555C13.9035 6.16099 13.4569 6.57728 12.8912 6.87463L0.624238 14.0705Z", fill: "#145AF5" }), index.h("path", { d: "M3.69214 21.4743C3.3944 20.9391 3.18598 20.3444 3.09666 19.72C3.00733 19.0956 3.06688 18.4711 3.21575 17.8467C3.36462 17.252 3.66237 16.6573 4.01966 16.1815C4.40672 15.676 4.85333 15.2597 5.41904 14.9624L12.2076 10.9779C12.5053 11.5131 12.7137 12.1078 12.803 12.7323C12.8924 13.3567 12.8328 13.9811 12.6839 14.6056C12.5351 15.2003 12.2373 15.795 11.88 16.2707C11.493 16.7762 11.0464 17.1925 10.4807 17.4899L3.69214 21.4743Z", fill: "#145AF5" }), index.h("path", { d: "M3.69141 21.4739L7.77047 19.0951C8.39573 20.1953 8.5446 21.5036 8.24686 22.7228C7.91934 23.9419 7.14521 24.9826 6.04357 25.6368L3.69141 21.4739Z", fill: "#80A8F4" }), index.h("path", { d: "M12.2072 10.9785L7.32419 10.1459L0.625 14.0709L5.38887 14.9629L12.2072 10.9785Z", fill: "#80A8F4" })), index.h("flip-text", { class: "console-layout__logo-text", weight: "medium" }, this.logoText))), index.h("nav", { "aria-label": this.navigationLabel, class: "console-layout__navigation" }, index.h("slot", { name: "navigation" })), index.h("div", { class: "console-layout__user" }, index.h("slot", { name: "user" }))), index.h("main", { "aria-labelledby": "app-name", class: "console-layout__main" }, index.h("header", { class: "console-layout__app-bar" }, index.h("flip-heading", { as: "h1", class: "console-layout__app-name", headingId: "app-name", level: 4, text: this.appName }), this.showHelpButton && (index.h("flip-button", { class: "console-layout__help-button", hideLabel: true, icon: "<flip-icon-help></flip-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick, variant: "flat" }))), index.h("section", { "aria-labelledby": "heading", class: "console-layout__content" }, index.h("header", { class: "console-layout__content-header" }, this.showBackButton && (index.h("flip-button", { class: "console-layout__back-button", hideLabel: true, icon: "<flip-icon-arrow-back></flip-icon-arrow-back>", label: this.backButonLabel, onClick: this.onBackButtonClick })), index.h("div", null, index.h("flip-heading", { as: "h2", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (index.h("flip-text", { class: "console-layout__subheading", color: "subdued" }, this.subheading)))), index.h("div", { class: "console-layout__integration" }, index.h("slot", { name: "content" })))))));
+  }
+};
+FlipConsoleLayout.style = flipConsoleLayoutCss;
+
+exports.flip_console_layout = FlipConsoleLayout;

package/dist/cjs/flip-date-input.cjs.entry.js

@@ -6268,8 +6268,12 @@ const FlipDateInput = class {
     this.placeholder = "yyyy-mm-dd";
     this.onChange = (event) => {
       const value = event.target.value;
+      if (value === "") {
+        this.value = undefined;
+        this.valueChange.emit(undefined);
+      }
       const newDate = parse(value, this.format, new Date());
-      const formatRegExp = new RegExp(`^${this.format.replace(/y|d|M/g, "\\d")}$`);
+      const formatRegExp = new RegExp(`^${this.format.replace(/[ydM]/g, "\\d")}$`);
       if (!Boolean(value.match(formatRegExp)) || !isValid(newDate)) {
         return;
       }
@@ -6318,15 +6322,13 @@ const FlipDateInput = class {
     var _a;
     (_a = this.mask) === null || _a === void 0 ? void 0 : _a.destroy();
     this.mask = maska.create(`#${this.id}`, {
-      mask: this.format.replace(/y|d|M/g, "#"),
+      mask: this.format.replace(/[ydM]/g, "#"),
     });
   }
   render() {
-    const ariaInvalid = this.invalid === true
-      ? "true"
-      : this.invalid === false
-        ? "false"
-        : undefined;
+    const ariaInvalid = this.invalid === true || this.invalid === false
+      ? String(this.invalid)
+      : undefined;
     const dateValue = Boolean(this.value)
       ? parse(this.value, internalDateFormat, new Date())
       : undefined;

package/dist/cjs/flip-date-picker_2.cjs.entry.js

@@ -57,6 +57,16 @@ const FlipDatePicker = class {
   init() {
     var _a;
     (_a = this.picker) === null || _a === void 0 ? void 0 : _a.destroy();
+    let selectedDates;
+    if (this.value === undefined) {
+      selectedDates = undefined;
+    }
+    else if (Array.isArray(this.value)) {
+      selectedDates = this.value;
+    }
+    else {
+      selectedDates = [this.value];
+    }
     this.picker = new airDatepicker(this.containerEl, {
       classes: "date-picker",
       inline: true,
@@ -70,11 +80,7 @@ const FlipDatePicker = class {
       },
       prevHtml: "<flip-icon-chevron-left></flip-icon-chevron-left>",
       range: this.range,
-      selectedDates: this.value === undefined
-        ? undefined
-        : Array.isArray(this.value)
-          ? this.value
-          : [this.value],
+      selectedDates,
       startDate: this.startDate,
       toggleSelected: !this.range,
       view: "days",

package/dist/cjs/flip-file-viewer_7.cjs.entry.js

@@ -29666,7 +29666,7 @@ var _xfa_layer = __w_pdfjs_require__(154);
 
 const pdf$1 = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(pdf);
 
-const flipFileViewerPdfCss = ":host{position:relative;display:inline-flex;width:100%;height:100%}:host *{box-sizing:border-box}.file-viewer-pdf__pages{overflow:auto;width:100%;height:100%}@media (min-width: 768px){.file-viewer-pdf__pages{padding:var(--s-space-16)}}.file-viewer-pdf__page{position:relative;margin-right:auto;margin-left:auto;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:#fff}@media (min-width: 768px){.file-viewer-pdf__page{border:var(--s-border-width-default) solid var(--s-border-default)}.file-viewer-pdf__page:not(:last-of-type){margin-bottom:var(--s-space-8)}}.file-viewer-pdf__page-spinner{position:absolute;top:50%;left:50%;transform:translate3d(-50%, -50%, 0)}.file-viewer-pdf__canvas{display:flex;width:100%;height:100%;margin-right:auto;margin-left:auto}.file-viewer-pdf__text-container{position:absolute;overflow:hidden;line-height:1;text-align:initial;inset:0;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;forced-color-adjust:none}.file-viewer-pdf__text-container>*{position:absolute;color:transparent;white-space:pre;cursor:text;transform-origin:0% 0%}.file-viewer-pdf__text-container>*.markedContent{top:0;height:0}.file-viewer-pdf__text-container>*.highlight{margin:-1px;padding:1px;border-radius:4px;background-color:rgba(180, 0, 170, 1)}.file-viewer-pdf__text-container>*.highlight.appended{position:initial}.file-viewer-pdf__text-container>*.highlight.begin{border-radius:4px 0 0 4px}.file-viewer-pdf__text-container>*.highlight.end{border-radius:0 4px 4px 0}.file-viewer-pdf__text-container>*.highlight.middle{border-radius:0}.file-viewer-pdf__text-container>*.highlight.selected{background-color:rgba(0, 100, 0, 1)}.file-viewer-pdf__text-container>*.endOfContent{position:absolute;z-index:-1;top:100%;right:0;bottom:0;left:0;display:block;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}.file-viewer-pdf__text-container>*.endOfContent.active{top:0}.file-viewer-pdf__text-container>br::-moz-selection{background:transparent}.file-viewer-pdf__text-container>br::selection{background:transparent}.file-viewer-pdf__spinner{position:absolute;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.2);inset:0}.file-viewer-pdf__error{position:absolute;top:50%;left:50%;transform:translate3d(-50%, -50%, 0)}.file-viewer-pdf__pagination{position:absolute;bottom:2.5rem;left:50%;padding:var(--s-space-4) var(--s-space-12);border-radius:var(--s-border-radius-base);color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.6);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);transform:translateX(-50%);pointer-events:none}.file-viewer-pdf__text-container{-webkit-user-select:none;-moz-user-select:none;user-select:none}@media (min-width: 768px){.file-viewer-pdf__text-container{-webkit-user-select:auto;-moz-user-select:auto;user-select:auto}}";
+const flipFileViewerPdfCss = ":host{position:relative;display:inline-flex;width:100%;height:100%}:host *{box-sizing:border-box}.file-viewer-pdf__pages{overflow:auto;width:100%;height:100%}@media (min-width: 768px){.file-viewer-pdf__pages{padding:var(--s-space-16)}}.file-viewer-pdf__page{position:relative;margin-right:auto;margin-left:auto;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:#fff}@media (min-width: 768px){.file-viewer-pdf__page{border:var(--s-border-width-default) solid var(--s-border-default)}.file-viewer-pdf__page:not(:last-of-type){margin-bottom:var(--s-space-8)}}.file-viewer-pdf__page-spinner{position:absolute;top:50%;left:50%;transform:translate3d(-50%, -50%, 0)}.file-viewer-pdf__canvas{display:flex;width:100%;height:100%;margin-right:auto;margin-left:auto}.file-viewer-pdf__text-container{position:absolute;overflow:hidden;line-height:1;text-align:initial;-webkit-user-select:none;-moz-user-select:none;user-select:none;inset:0;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;forced-color-adjust:none}.file-viewer-pdf__text-container>*{position:absolute;color:transparent;white-space:pre;cursor:text;transform-origin:0% 0%}.file-viewer-pdf__text-container>*.markedContent{top:0;height:0}.file-viewer-pdf__text-container>*.highlight{margin:-1px;padding:1px;border-radius:4px;background-color:rgba(180, 0, 170, 1)}.file-viewer-pdf__text-container>*.highlight.appended{position:initial}.file-viewer-pdf__text-container>*.highlight.begin{border-radius:4px 0 0 4px}.file-viewer-pdf__text-container>*.highlight.end{border-radius:0 4px 4px 0}.file-viewer-pdf__text-container>*.highlight.middle{border-radius:0}.file-viewer-pdf__text-container>*.highlight.selected{background-color:rgba(0, 100, 0, 1)}.file-viewer-pdf__text-container>*.endOfContent{position:absolute;z-index:-1;top:100%;right:0;bottom:0;left:0;display:block;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}.file-viewer-pdf__text-container>*.endOfContent.active{top:0}.file-viewer-pdf__text-container>br::-moz-selection{background:transparent}.file-viewer-pdf__text-container>br::selection{background:transparent}@media (min-width: 768px){.file-viewer-pdf__text-container{-webkit-user-select:auto;-moz-user-select:auto;user-select:auto}}.file-viewer-pdf__spinner{position:absolute;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.2);inset:0}.file-viewer-pdf__error{position:absolute;top:50%;left:50%;transform:translate3d(-50%, -50%, 0)}.file-viewer-pdf__pagination{position:absolute;bottom:2.5rem;left:50%;padding:var(--s-space-4) var(--s-space-12);border-radius:var(--s-border-radius-base);color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.6);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);transform:translateX(-50%);pointer-events:none}";
 
 pdf$1.GlobalWorkerOptions.workerSrc = "/pdfjs/pdf.worker.min.js";
 const FlipFileViewerPdf = class {
@@ -29917,11 +29917,13 @@ const FlipFileViewerPdf = class {
   getScale(page) {
     var _a;
     const padding = utils.isMobileViewport() ? 0 : 32;
-    return this.zoom === "auto"
-      ? (((_a = this.scrollContainer) === null || _a === void 0 ? void 0 : _a.clientWidth) - padding) / page.view[2]
-      : isNaN(this.zoom)
-        ? 1
-        : this.zoom;
+    if (this.zoom === "auto") {
+      return (((_a = this.scrollContainer) === null || _a === void 0 ? void 0 : _a.clientWidth) - padding) / page.view[2];
+    }
+    else if (isNaN(this.zoom)) {
+      return 1;
+    }
+    return this.zoom;
   }
   restoreScrollPosition() {
     var _a, _b;

package/dist/cjs/flip-form-control.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-72831c5f.js');
 const index$1 = require('./index-b8470262.js');
 require('./_commonjsHelpers-a5111d61.js');
 
-const flipFormControlCss = ".sc-flip-form-control-h{display:block;width:100%}.sc-flip-form-control-h *.sc-flip-form-control{box-sizing:border-box}.form-control.sc-flip-form-control{display:block;width:100%;line-height:var(--s-line-height-sm)}.form-control.form-control--has-focus.sc-flip-form-control:not(.form-control--disabled) .form-control__label.sc-flip-form-control{border-color:var(--s-border-highlight);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control.sc-flip-form-control:not(.form-control--has-value):not(.form-control--has-focus) .form-control__input.sc-flip-form-control{overflow:hidden;max-height:0}.form-control.sc-flip-form-control:not(.form-control--has-value):not(.form-control--has-focus) .form-control__label-text.sc-flip-form-control{bottom:50%;font-size:var(--s-font-size-base);transform:translateY(50%)}.form-control--invalid.form-control--has-focus.sc-flip-form-control:not(.form-control--disabled) .form-control__label.sc-flip-form-control{border-color:var(--s-border-critical);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--invalid.sc-flip-form-control .form-control__label.sc-flip-form-control{border-color:var(--s-border-critical)}.form-control--disabled.sc-flip-form-control .form-control__label.sc-flip-form-control{border-color:var(--s-border-disabled);color:var(--s-text-disabled)}.form-control--disabled.sc-flip-form-control .form-control__description.sc-flip-form-control{color:var(--s-text-disabled)}.form-control__label.sc-flip-form-control{position:relative;display:flex;width:100%;min-height:4.375rem;padding:calc(var(--s-space-12) + 1.25rem) var(--s-space-16) var(--s-space-12);justify-content:center;border:var(--s-border-width-default) solid var(--s-border-strong);border-radius:var(--s-border-radius-sm);color:var(--s-text-subdued);flex-direction:column;gap:var(--s-space-2)}.form-control__label-text.sc-flip-form-control{position:absolute;right:var(--s-space-16);bottom:calc(100% - 1.25rem - var(--s-space-12));left:var(--s-space-16);overflow:hidden;font-size:var(--s-font-size-sm);white-space:nowrap;text-overflow:ellipsis;transition:font-size 0.15s, transform 0.15s, top 0.15s;transform:none}.form-control__description.sc-flip-form-control{display:block;margin-top:var(--s-space-4);padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}.form-control__error-message.sc-flip-form-control{display:block;margin-top:var(--s-space-4);padding-left:var(--s-space-4)}";
+const flipFormControlCss = ".sc-flip-form-control-h{display:block;width:100%}.sc-flip-form-control-h *.sc-flip-form-control{box-sizing:border-box}.form-control.sc-flip-form-control{display:block;width:100%;line-height:var(--s-line-height-sm)}.form-control.form-control--has-focus.sc-flip-form-control:not(.form-control--disabled) .form-control__label.sc-flip-form-control{border-color:var(--s-border-highlight);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control.sc-flip-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select) .form-control__input.sc-flip-form-control{overflow:hidden;max-height:0}.form-control.sc-flip-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select) .form-control__label-text.sc-flip-form-control{bottom:50%;font-size:var(--s-font-size-base);transform:translateY(50%)}.form-control.sc-flip-form-control:not(.form-control--has-value).form-control--is-select .select__label.sc-flip-form-control{overflow:hidden;max-height:0;pointer-events:none}.form-control.sc-flip-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-flip-form-control{bottom:50%;font-size:var(--s-font-size-base);transform:translateY(50%)}.form-control--invalid.form-control--has-focus.sc-flip-form-control:not(.form-control--disabled) .form-control__label.sc-flip-form-control{border-color:var(--s-border-critical);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--invalid.sc-flip-form-control .form-control__label.sc-flip-form-control{border-color:var(--s-border-critical)}.form-control--disabled.sc-flip-form-control .form-control__label.sc-flip-form-control{border-color:var(--s-border-disabled);color:var(--s-text-disabled)}.form-control--disabled.sc-flip-form-control .form-control__description.sc-flip-form-control{color:var(--s-text-disabled)}.form-control__label.sc-flip-form-control{position:relative;display:flex;width:100%;min-height:4.375rem;padding:calc(var(--s-space-12) + 1.25rem) var(--s-space-16) var(--s-space-12);justify-content:center;border:var(--s-border-width-default) solid var(--s-border-strong);border-radius:var(--s-border-radius-sm);color:var(--s-text-subdued);flex-direction:column;gap:var(--s-space-2)}.form-control__label-text.sc-flip-form-control{position:absolute;right:var(--s-space-16);bottom:calc(100% - 1.25rem - var(--s-space-12));left:var(--s-space-16);overflow:hidden;font-size:var(--s-font-size-sm);white-space:nowrap;text-overflow:ellipsis;transition:font-size 0.15s, transform 0.15s, top 0.15s;transform:none}.form-control__description.sc-flip-form-control{display:block;margin-top:var(--s-space-4);padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}.form-control__error-message.sc-flip-form-control{display:block;margin-top:var(--s-space-4);padding-left:var(--s-space-4)}";
 
 const FlipFormControl = class {
   constructor(hostRef) {
@@ -22,10 +22,11 @@ const FlipFormControl = class {
     this.onFocusIn = () => {
       this.hasFocus = true;
     };
-    this.onFocusOut = (event) => {
-      if (Boolean(event.relatedTarget)) {
-        this.hasFocus = false;
+    this.onFocusOut = () => {
+      if (!this.hasFocus) {
+        return;
       }
+      this.hasFocus = false;
     };
   }
   componentWillLoad() {
@@ -33,6 +34,7 @@ const FlipFormControl = class {
     this.associateDescriptionWithInputElement();
     this.setInputElementDisabledState();
     this.setInputElementInvalidState();
+    this.setInputElementLabel();
     this.checkInputValue();
     this.listenToInputValueChanges();
   }
@@ -64,7 +66,16 @@ const FlipFormControl = class {
       this.inputEl.removeAttribute("invalid");
     }
   }
+  setInputElementLabel() {
+    if (!Boolean(this.inputEl)) {
+      return;
+    }
+    this.inputEl.setAttribute("label", this.label);
+  }
   onWindowClick(event) {
+    if (!this.hasFocus) {
+      return;
+    }
     const target = event.target;
     if (this.el.contains(target)) {
       return;
@@ -74,11 +85,16 @@ const FlipFormControl = class {
   render() {
     const showErrorMessage = Boolean(this.errorMessage);
     const showDescription = Boolean(this.description) && !showErrorMessage;
+    const hasValue = Array.isArray(this.inputValue)
+      ? this.inputValue.length > 0
+      : Boolean(this.inputValue);
+    const isSelect = this.inputEl.tagName === "FLIP-SELECT";
     const className = index$1.classnames("form-control", {
       "form-control--disabled": this.disabled,
       "form-control--has-focus": this.hasFocus,
-      "form-control--has-value": Boolean(this.inputValue),
+      "form-control--has-value": hasValue,
       "form-control--invalid": this.invalid,
+      "form-control--is-select": isSelect,
     });
     return (index.h(index.Host, { onFocusin: this.onFocusIn, onFocusout: this.onFocusOut }, index.h("div", { class: className, role: "group" }, index.h("label", { class: "form-control__label" }, index.h("span", { class: "form-control__label-text" }, this.label), index.h("span", { class: "form-control__input" }, index.h("slot", null))), showDescription && (index.h("span", { class: "form-control__description", id: this.descriptionId }, this.description)), showErrorMessage && (index.h("span", { "aria-live": "polite", class: "form-control__error-message", id: this.descriptionId }, index.h("flip-inline-error", { message: this.errorMessage, size: "s" }))))));
   }
@@ -86,7 +102,8 @@ const FlipFormControl = class {
   static get watchers() { return {
     "description": ["associateDescriptionWithInputElement"],
     "disabled": ["setInputElementDisabledState"],
-    "invalid": ["setInputElementInvalidState"]
+    "invalid": ["setInputElementInvalidState"],
+    "label": ["setInputElementLabel"]
   }; }
 };
 FlipFormControl.style = flipFormControlCss;

package/dist/cjs/{flip-text.cjs.entry.js → flip-heading_2.cjs.entry.js}

@@ -6,7 +6,23 @@ const index = require('./index-72831c5f.js');
 const index$1 = require('./index-b8470262.js');
 require('./_commonjsHelpers-a5111d61.js');
 
-const flipTextCss = ":host{display:block}:host *{box-sizing:border-box}.text{margin:0;padding:0}.text--align-start{text-align:start}.text--align-center{text-align:center}.text--align-end{text-align:end}.text--color-default{color:var(--s-text-default)}.text--color-subdued{color:var(--s-text-subdued)}.text--color-critical{color:var(--s-text-critical)}.text--color-success{color:var(--s-text-success)}.text--color-warning{color:var(--s-text-warning)}.text--size-sm{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}.text--size-base{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}.text--size-lg{font-size:var(--s-font-size-lg);line-height:var(--s-line-height-lg)}.text--weight-normal{font-weight:var(--s-font-weight-normal)}.text--weight-medium{font-weight:var(--s-font-weight-medium)}.text--weight-semibold{font-weight:var(--s-font-weight-semibold)}.text--weight-bold{font-weight:var(--s-font-weight-bold)}.text--font-style-normal{font-style:normal}.text--font-style-italic{font-style:italic}";
+const flipHeadingCss = ".sc-flip-heading-h{display:block;width:100%}.sc-flip-heading-h *.sc-flip-heading{box-sizing:border-box}.heading.sc-flip-heading{display:block;width:100%;margin:0;padding:0;text-align:start}.heading--align-start.sc-flip-heading{text-align:start}.heading--align-center.sc-flip-heading{text-align:center}.heading--align-end.sc-flip-heading{text-align:end}.heading--level-1.sc-flip-heading{font-size:var(--s-font-size-2xl);font-weight:var(--s-font-weight-bold);line-height:var(--s-line-height-2xl);letter-spacing:var(--s-letter-spacing-tight)}.heading--level-2.sc-flip-heading{font-size:var(--s-font-size-xl);font-weight:var(--s-font-weight-bold);line-height:var(--s-line-height-xl)}.heading--level-3.sc-flip-heading{font-size:var(--s-font-size-lg);font-weight:var(--s-font-weight-semibold);line-height:var(--s-line-height-lg)}.heading--level-4.sc-flip-heading,.heading--level-5.sc-flip-heading,.heading--level-6.sc-flip-heading{font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-semibold);line-height:var(--s-line-height-base)}";
+
+const FlipHeading = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.align = "start";
+    this.level = 1;
+  }
+  render() {
+    const Tag = this.as || `h${this.level}`;
+    const className = index$1.classnames("heading", `heading--align-${this.align}`, `heading--level-${this.level}`);
+    return (index.h(index.Host, null, index.h(Tag, { class: className, id: this.headingId }, this.text)));
+  }
+};
+FlipHeading.style = flipHeadingCss;
+
+const flipTextCss = ":host{display:block}:host *{box-sizing:border-box}.text{margin:0;padding:0}.text--align-start{text-align:start}.text--align-center{text-align:center}.text--align-end{text-align:end}.text--color-default{color:var(--s-text-default)}.text--color-subdued{color:var(--s-text-subdued)}.text--color-critical{color:var(--s-text-critical)}.text--color-success{color:var(--s-text-success)}.text--color-warning{color:var(--s-text-warning)}.text--size-sm{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}.text--size-base{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}.text--size-lg{font-size:var(--s-font-size-lg);line-height:var(--s-line-height-lg)}.text--weight-normal{font-weight:var(--s-font-weight-normal)}.text--weight-medium{font-weight:var(--s-font-weight-medium)}.text--weight-semibold{font-weight:var(--s-font-weight-semibold)}.text--weight-bold{font-weight:var(--s-font-weight-bold)}.text--font-style-normal{font-style:normal}.text--font-style-italic{font-style:italic}.text--truncate{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}";
 
 const FlipText = class {
   constructor(hostRef) {
@@ -20,10 +36,11 @@ const FlipText = class {
   }
   render() {
     const Tag = this.as;
-    const className = index$1.classnames("text", `text--align-${this.align}`, `text--color-${this.color}`, `text--font-style-${this.fontStyle}`, `text--size-${this.size}`, `text--weight-${this.weight}`);
-    return (index.h(index.Host, null, index.h(Tag, { class: className }, index.h("slot", null))));
+    const className = index$1.classnames("text", `text--align-${this.align}`, `text--color-${this.color}`, `text--font-style-${this.fontStyle}`, `text--size-${this.size}`, `text--weight-${this.weight}`, { "text--truncate": this.truncate });
+    return (index.h(index.Host, null, index.h(Tag, { class: className, part: "text" }, index.h("slot", null))));
   }
 };
 FlipText.style = flipTextCss;
 
+exports.flip_heading = FlipHeading;
 exports.flip_text = FlipText;

package/dist/cjs/flip-icon-check-small_3.cjs.entry.js

@@ -28,9 +28,15 @@ const FlipOptionList = class {
     this.valueChange = index.createEvent(this, "valueChange", 7);
     this.value = [];
     this.onFocus = () => {
-      this.focusItem(0);
+      if (Boolean(this.focusedItem)) {
+        this.focusItem(this.getActiveItemIndex());
+      }
+      else {
+        this.focusItem(0);
+      }
     };
     this.onClick = (event) => {
+      event.preventDefault();
       const target = event.target;
       const item = target === null || target === void 0 ? void 0 : target.closest("flip-option-list-item");
       if (!Boolean(item)) {
@@ -167,6 +173,7 @@ const FlipOptionList = class {
     }
     item.setAttribute("tabIndex", "0");
     item.focus();
+    this.focusedItem = item;
   }
   focusNextItem() {
     if (this.disabled) {
@@ -184,12 +191,7 @@ const FlipOptionList = class {
   getActiveItemIndex() {
     return this.items
       .map((item) => item.shadowRoot.querySelector('[role="option"]'))
-      .findIndex((item) => {
-      var _a, _b;
-      return item === document.activeElement ||
-        item ===
-          ((_b = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('[role="option"]'));
-    });
+      .findIndex((item) => item === this.focusedItem);
   }
   render() {
     const ariaMultiselectable = this.multiSelect ? "true" : undefined;

package/dist/cjs/flip-icon-help.cjs.entry.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-72831c5f.js');
+
+const flipIconCss = ":host{display:inline-flex}";
+
+const FlipIconHelp = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.size = 24;
+  }
+  render() {
+    return (index.h("svg", { class: "flip-icon", fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${this.size} ${this.size}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (index.h(index.Fragment, null, index.h("path", { d: "M7.96665 11.9987C8.19998 11.9987 8.39731 11.918 8.55865 11.7567C8.71953 11.5958 8.79998 11.3987 8.79998 11.1654C8.79998 10.932 8.71953 10.7349 8.55865 10.574C8.39731 10.4127 8.19998 10.332 7.96665 10.332C7.73331 10.332 7.53598 10.4127 7.37465 10.574C7.21376 10.7349 7.13331 10.932 7.13331 11.1654C7.13331 11.3987 7.21376 11.5958 7.37465 11.7567C7.53598 11.918 7.73331 11.9987 7.96665 11.9987ZM8.06665 5.13203C8.37776 5.13203 8.62776 5.21803 8.81665 5.39003C9.00554 5.56248 9.09998 5.78759 9.09998 6.06536C9.09998 6.25425 9.0362 6.44581 8.90865 6.64003C8.78065 6.8347 8.59998 7.03759 8.36665 7.2487C8.03331 7.53759 7.78887 7.81536 7.63331 8.08203C7.47776 8.3487 7.39998 8.61536 7.39998 8.88203C7.39998 9.03759 7.45842 9.16803 7.57531 9.27336C7.69176 9.37914 7.82776 9.43203 7.98331 9.43203C8.13887 9.43203 8.27776 9.37648 8.39998 9.26536C8.5222 9.15425 8.59998 9.01536 8.63331 8.8487C8.66665 8.65981 8.74176 8.48492 8.85865 8.32403C8.97509 8.1627 9.16665 7.95425 9.43331 7.6987C9.77776 7.37648 10.0195 7.08203 10.1586 6.81536C10.2973 6.5487 10.3666 6.25425 10.3666 5.93203C10.3666 5.36536 10.1529 4.90136 9.72531 4.54003C9.29731 4.17914 8.74442 3.9987 8.06665 3.9987C7.59998 3.9987 7.1862 4.08759 6.82531 4.26536C6.46398 4.44314 6.18331 4.71536 5.98331 5.08203C5.90554 5.22648 5.87776 5.36803 5.89998 5.5067C5.9222 5.64581 5.99998 5.75981 6.13331 5.8487C6.27776 5.93759 6.4362 5.96536 6.60865 5.93203C6.78065 5.8987 6.9222 5.80425 7.03331 5.6487C7.15554 5.48203 7.30287 5.35425 7.47531 5.26536C7.64731 5.17648 7.84442 5.13203 8.06665 5.13203ZM7.99998 14.6654C7.08887 14.6654 6.22776 14.4903 5.41665 14.14C4.60554 13.7903 3.89731 13.3154 3.29198 12.7154C2.6862 12.1154 2.20842 11.4098 1.85865 10.5987C1.50842 9.78759 1.33331 8.92092 1.33331 7.9987C1.33331 7.07648 1.50842 6.20981 1.85865 5.3987C2.20842 4.58759 2.6862 3.88203 3.29198 3.28203C3.89731 2.68203 4.60554 2.20692 5.41665 1.8567C6.22776 1.50692 7.08887 1.33203 7.99998 1.33203C8.93331 1.33203 9.80553 1.50692 10.6166 1.8567C11.4278 2.20692 12.1333 2.68203 12.7333 3.28203C13.3333 3.88203 13.8055 4.58759 14.15 5.3987C14.4944 6.20981 14.6666 7.07648 14.6666 7.9987C14.6666 8.92092 14.4944 9.78759 14.15 10.5987C13.8055 11.4098 13.3333 12.1154 12.7333 12.7154C12.1333 13.3154 11.4278 13.7903 10.6166 14.14C9.80553 14.4903 8.93331 14.6654 7.99998 14.6654ZM7.99998 13.332C9.48887 13.332 10.75 12.8127 11.7833 11.774C12.8166 10.7349 13.3333 9.47647 13.3333 7.9987C13.3333 6.52092 12.8166 5.26248 11.7833 4.22336C10.75 3.1847 9.48887 2.66536 7.99998 2.66536C6.54442 2.66536 5.29153 3.1847 4.24131 4.22336C3.19154 5.26248 2.66665 6.52092 2.66665 7.9987C2.66665 9.47647 3.19154 10.7349 4.24131 11.774C5.29153 12.8127 6.54442 13.332 7.99998 13.332Z", fill: "currentColor" }))), this.size === 24 && (index.h(index.Fragment, null, index.h("path", { d: "M11.95 18C12.3 18 12.596 17.879 12.838 17.637C13.0793 17.3957 13.2 17.1 13.2 16.75C13.2 16.4 13.0793 16.1043 12.838 15.863C12.596 15.621 12.3 15.5 11.95 15.5C11.6 15.5 11.304 15.621 11.062 15.863C10.8207 16.1043 10.7 16.4 10.7 16.75C10.7 17.1 10.8207 17.3957 11.062 17.637C11.304 17.879 11.6 18 11.95 18ZM12.1 7.7C12.5667 7.7 12.9417 7.829 13.225 8.087C13.5083 8.34567 13.65 8.68333 13.65 9.1C13.65 9.38333 13.5543 9.67067 13.363 9.962C13.171 10.254 12.9 10.5583 12.55 10.875C12.05 11.3083 11.6833 11.725 11.45 12.125C11.2167 12.525 11.1 12.925 11.1 13.325C11.1 13.5583 11.1877 13.754 11.363 13.912C11.5377 14.0707 11.7417 14.15 11.975 14.15C12.2083 14.15 12.4167 14.0667 12.6 13.9C12.7833 13.7333 12.9 13.525 12.95 13.275C13 12.9917 13.1127 12.7293 13.288 12.488C13.4627 12.246 13.75 11.9333 14.15 11.55C14.6667 11.0667 15.0293 10.625 15.238 10.225C15.446 9.825 15.55 9.38333 15.55 8.9C15.55 8.05 15.2293 7.354 14.588 6.812C13.946 6.27067 13.1167 6 12.1 6C11.4 6 10.7793 6.13333 10.238 6.4C9.696 6.66667 9.275 7.075 8.975 7.625C8.85833 7.84167 8.81667 8.054 8.85 8.262C8.88333 8.47067 9 8.64167 9.2 8.775C9.41667 8.90833 9.65433 8.95 9.913 8.9C10.171 8.85 10.3833 8.70833 10.55 8.475C10.7333 8.225 10.9543 8.03333 11.213 7.9C11.471 7.76667 11.7667 7.7 12.1 7.7ZM12 22C10.6333 22 9.34167 21.7373 8.125 21.212C6.90833 20.6873 5.846 19.975 4.938 19.075C4.02933 18.175 3.31267 17.1167 2.788 15.9C2.26267 14.6833 2 13.3833 2 12C2 10.6167 2.26267 9.31667 2.788 8.1C3.31267 6.88333 4.02933 5.825 4.938 4.925C5.846 4.025 6.90833 3.31233 8.125 2.787C9.34167 2.26233 10.6333 2 12 2C13.4 2 14.7083 2.26233 15.925 2.787C17.1417 3.31233 18.2 4.025 19.1 4.925C20 5.825 20.7083 6.88333 21.225 8.1C21.7417 9.31667 22 10.6167 22 12C22 13.3833 21.7417 14.6833 21.225 15.9C20.7083 17.1167 20 18.175 19.1 19.075C18.2 19.975 17.1417 20.6873 15.925 21.212C14.7083 21.7373 13.4 22 12 22ZM12 20C14.2333 20 16.125 19.221 17.675 17.663C19.225 16.1043 20 14.2167 20 12C20 9.78333 19.225 7.89567 17.675 6.337C16.125 4.779 14.2333 4 12 4C9.81667 4 7.93733 4.779 6.362 6.337C4.78733 7.89567 4 9.78333 4 12C4 14.2167 4.78733 16.1043 6.362 17.663C7.93733 19.221 9.81667 20 12 20Z", fill: "currentColor" }))), this.size === 28 && (index.h(index.Fragment, null, index.h("path", { d: "M13.9417 20.9999C14.35 20.9999 14.6953 20.8588 14.9777 20.5764C15.2592 20.2949 15.4 19.9499 15.4 19.5416C15.4 19.1333 15.2592 18.7883 14.9777 18.5068C14.6953 18.2244 14.35 18.0833 13.9417 18.0833C13.5333 18.0833 13.188 18.2244 12.9057 18.5068C12.6241 18.7883 12.4833 19.1333 12.4833 19.5416C12.4833 19.9499 12.6241 20.2949 12.9057 20.5764C13.188 20.8588 13.5333 20.9999 13.9417 20.9999ZM14.1167 8.98325C14.6611 8.98325 15.0986 9.13375 15.4292 9.43475C15.7597 9.73653 15.925 10.1305 15.925 10.6166C15.925 10.9471 15.8134 11.2824 15.5902 11.6223C15.3662 11.9629 15.05 12.318 14.6417 12.6874C14.0583 13.193 13.6306 13.6791 13.3583 14.1458C13.0861 14.6124 12.95 15.0791 12.95 15.5458C12.95 15.818 13.0523 16.0463 13.2568 16.2306C13.4606 16.4157 13.6986 16.5083 13.9708 16.5083C14.2431 16.5083 14.4861 16.411 14.7 16.2166C14.9139 16.0221 15.05 15.7791 15.1083 15.4874C15.1667 15.1569 15.2981 14.8508 15.5027 14.5693C15.7064 14.2869 16.0417 13.9221 16.5083 13.4749C17.1111 12.911 17.5342 12.3958 17.7777 11.9291C18.0203 11.4624 18.1417 10.9471 18.1417 10.3833C18.1417 9.39159 17.7676 8.57959 17.0193 7.94725C16.2703 7.3157 15.3028 6.99992 14.1167 6.99992C13.3 6.99992 12.5759 7.15547 11.9443 7.46659C11.312 7.7777 10.8208 8.25409 10.4708 8.89575C10.3347 9.14853 10.2861 9.39625 10.325 9.63892C10.3639 9.88236 10.5 10.0819 10.7333 10.2374C10.9861 10.393 11.2634 10.4416 11.5652 10.3833C11.8662 10.3249 12.1139 10.1596 12.3083 9.88742C12.5222 9.59575 12.7801 9.37214 13.0818 9.21659C13.3828 9.06103 13.7278 8.98325 14.1167 8.98325ZM14 25.6666C12.4056 25.6666 10.8986 25.3601 9.47917 24.7473C8.05973 24.1351 6.82034 23.3041 5.761 22.2541C4.70089 21.2041 3.86478 19.9694 3.25267 18.5499C2.63978 17.1305 2.33334 15.6138 2.33334 13.9999C2.33334 12.386 2.63978 10.8694 3.25267 9.44992C3.86478 8.03048 4.70089 6.79575 5.761 5.74575C6.82034 4.69575 8.05973 3.86431 9.47917 3.25142C10.8986 2.63931 12.4056 2.33325 14 2.33325C15.6333 2.33325 17.1597 2.63931 18.5792 3.25142C19.9986 3.86431 21.2333 4.69575 22.2833 5.74575C23.3333 6.79575 24.1597 8.03048 24.7625 9.44992C25.3653 10.8694 25.6667 12.386 25.6667 13.9999C25.6667 15.6138 25.3653 17.1305 24.7625 18.5499C24.1597 19.9694 23.3333 21.2041 22.2833 22.2541C21.2333 23.3041 19.9986 24.1351 18.5792 24.7473C17.1597 25.3601 15.6333 25.6666 14 25.6666ZM14 23.3333C16.6056 23.3333 18.8125 22.4244 20.6208 20.6068C22.4292 18.7883 23.3333 16.586 23.3333 13.9999C23.3333 11.4138 22.4292 9.21153 20.6208 7.39309C18.8125 5.57542 16.6056 4.66659 14 4.66659C11.4528 4.66659 9.26023 5.57542 7.42234 7.39309C5.58523 9.21153 4.66667 11.4138 4.66667 13.9999C4.66667 16.586 5.58523 18.7883 7.42234 20.6068C9.26023 22.4244 11.4528 23.3333 14 23.3333Z", fill: "currentColor" })))));
+  }
+};
+FlipIconHelp.style = flipIconCss;
+
+exports.flip_icon_help = FlipIconHelp;

package/dist/cjs/flip-pdf-reader.cjs.entry.js

@@ -9,7 +9,7 @@ const index$1 = require('./index-b8470262.js');
 const utils = require('./utils-6b8d45f4.js');
 require('./_commonjsHelpers-a5111d61.js');
 
-const flipPdfReaderCss = ":host{display:block}:host *{box-sizing:border-box}.pdf-reader{position:fixed;z-index:var(--s-z-40);background-color:var(--s-surface-raised-default);inset:0;touch-action:pan-x pan-y}.pdf-reader[aria-hidden=\"true\"]{display:none}.pdf-reader:not(.pdf-reader--closing) .pdf-reader__body{-webkit-animation:0.15s pdf-reader-fade-in;animation:0.15s pdf-reader-fade-in}@media (prefers-reduced-motion){.pdf-reader:not(.pdf-reader--closing) .pdf-reader__body{-webkit-animation:none;animation:none}}.pdf-reader--closing{-webkit-animation:0.15s pdf-reader-fade-out;animation:0.15s pdf-reader-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.pdf-reader--closing{-webkit-animation:none;animation:none}}.pdf-reader__body{position:relative;width:100%;height:100%}.pdf-reader__header{display:flex;height:4rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);gap:var(--s-space-8)}.pdf-reader__header-left,.pdf-reader__header-right{display:flex;flex-grow:1;align-items:center;gap:var(--s-space-8)}@media (min-width: 768px){.pdf-reader__header-left,.pdf-reader__header-right{flex-basis:calc(100 / 3 * 1%);flex-grow:0}}.pdf-reader__header-right{justify-content:flex-end}.pdf-reader__header-center{display:none;flex-grow:1;justify-content:center;align-items:center;align-items:center;gap:var(--s-space-16)}@media (min-width: 768px){.pdf-reader__header-center{display:flex}}.pdf-reader__label{overflow:hidden;flex-grow:1;font-weight:var(--s-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis}.pdf-reader__zoom-button-container{display:flex;align-items:center;gap:var(--s-space-8)}.pdf-reader__zoom-button-container>*:not(:last-child){position:relative}.pdf-reader__zoom-button-container>*:not(:last-child):after{position:absolute;top:50%;right:calc(-1 * var(--s-space-4));width:var(--s-border-width-default);height:1.5rem;background-color:var(--s-border-default);content:\"\";transform:translate3d(50%, -50%, 0)}.pdf-reader__zoom-select-container{position:relative}.pdf-reader__zoom-select{display:inline-flex;height:2.5rem;padding-right:var(--s-space-12);padding-right:calc(var(--s-space-8) + 1.5rem + var(--s-space-12));padding-left:var(--s-space-12);justify-content:flex-start;align-items:center;border:var(--s-border-width-default) solid var(--s-border-default);border-radius:var(--s-border-radius-sm);color:var(--s-interactive-neutral-default);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.pdf-reader__zoom-select:focus{outline-color:var(--s-focus-default)}.pdf-reader__zoom-select-icon{position:absolute;top:50%;right:var(--s-space-8);display:inline-flex;transform:translateY(-50%);pointer-events:none}.pdf-reader__content{width:100%;height:calc(100% - 4rem)}.pdf-reader__mobile-zoom-controls{position:absolute;z-index:1;right:var(--s-space-16);bottom:var(--s-space-32);display:flex;padding-bottom:var(--s-space-4);flex-direction:column;gap:var(--s-space-8)}@media (min-width: 768px){.pdf-reader__mobile-zoom-controls{display:none}}.pdf-reader__mobile-zoom-button{display:inline-flex;width:2.5rem;height:2.5rem;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);cursor:pointer;transition:opacity 0.15s;pointer-events:auto}.pdf-reader__mobile-zoom-button:disabled{cursor:default}@-webkit-keyframes pdf-reader-fade-in{from{opacity:0}to{opacity:1}}@keyframes pdf-reader-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes pdf-reader-fade-out{from{opacity:1}to{opacity:0}}@keyframes pdf-reader-fade-out{from{opacity:1}to{opacity:0}}";
+const flipPdfReaderCss = ":host{display:block}:host *{box-sizing:border-box}.pdf-reader{position:fixed;z-index:var(--s-z-40);background-color:var(--s-surface-raised-default);inset:0;touch-action:pan-x pan-y}.pdf-reader[aria-hidden=\"true\"]{display:none}.pdf-reader:not(.pdf-reader--closing) .pdf-reader__body{-webkit-animation:0.15s pdf-reader-fade-in;animation:0.15s pdf-reader-fade-in}@media (prefers-reduced-motion){.pdf-reader:not(.pdf-reader--closing) .pdf-reader__body{-webkit-animation:none;animation:none}}.pdf-reader--closing{-webkit-animation:0.15s pdf-reader-fade-out;animation:0.15s pdf-reader-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.pdf-reader--closing{-webkit-animation:none;animation:none}}.pdf-reader__body{position:relative;width:100%;height:100%}.pdf-reader__header{display:flex;height:4rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);gap:var(--s-space-8)}.pdf-reader__header-left,.pdf-reader__header-right{display:flex;flex-grow:1;align-items:center;gap:var(--s-space-8)}@media (min-width: 768px){.pdf-reader__header-left,.pdf-reader__header-right{flex-basis:calc(100 / 3 * 1%);flex-grow:0}}.pdf-reader__header-right{justify-content:flex-end}.pdf-reader__header-center{display:none;flex-grow:1;justify-content:center;align-items:center;gap:var(--s-space-16)}@media (min-width: 768px){.pdf-reader__header-center{display:flex}}.pdf-reader__label{overflow:hidden;flex-grow:1;font-weight:var(--s-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis}.pdf-reader__zoom-button-container{display:flex;align-items:center;gap:var(--s-space-8)}.pdf-reader__zoom-button-container>*:not(:last-child){position:relative}.pdf-reader__zoom-button-container>*:not(:last-child):after{position:absolute;top:50%;right:calc(-1 * var(--s-space-4));width:var(--s-border-width-default);height:1.5rem;background-color:var(--s-border-default);content:\"\";transform:translate3d(50%, -50%, 0)}.pdf-reader__zoom-select-container{position:relative}.pdf-reader__zoom-select{display:inline-flex;height:2.5rem;padding-right:var(--s-space-12);padding-right:calc(var(--s-space-8) + 1.5rem + var(--s-space-12));padding-left:var(--s-space-12);justify-content:flex-start;align-items:center;border:var(--s-border-width-default) solid var(--s-border-default);border-radius:var(--s-border-radius-sm);color:var(--s-interactive-neutral-default);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.pdf-reader__zoom-select:focus{outline-color:var(--s-focus-default)}.pdf-reader__zoom-select-icon{position:absolute;top:50%;right:var(--s-space-8);display:inline-flex;transform:translateY(-50%);pointer-events:none}.pdf-reader__content{width:100%;height:calc(100% - 4rem)}.pdf-reader__mobile-zoom-controls{position:absolute;z-index:1;right:var(--s-space-16);bottom:var(--s-space-32);display:flex;padding-bottom:var(--s-space-4);flex-direction:column;gap:var(--s-space-8)}@media (min-width: 768px){.pdf-reader__mobile-zoom-controls{display:none}}.pdf-reader__mobile-zoom-button{display:inline-flex;width:2.5rem;height:2.5rem;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);cursor:pointer;transition:opacity 0.15s;pointer-events:auto}.pdf-reader__mobile-zoom-button:disabled{cursor:default}@-webkit-keyframes pdf-reader-fade-in{from{opacity:0}to{opacity:1}}@keyframes pdf-reader-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes pdf-reader-fade-out{from{opacity:1}to{opacity:0}}@keyframes pdf-reader-fade-out{from{opacity:1}to{opacity:0}}";
 
 const FlipPdfReader = class {
   constructor(hostRef) {