@hotosm/ui 0.3.1-b3 → 0.3.1-b5

package/dist/chunks/chunk.TFICHQZE.js

@@ -1,186 +0,0 @@
-var o=`@layer wa-utilities {
-  :host([size='small']),
-  .wa-size-s {
-    font-size: var(--wa-font-size-s);
-  }
-
-  :host([size='medium']),
-  .wa-size-m {
-    font-size: var(--wa-font-size-m);
-  }
-
-  :host([size='large']),
-  .wa-size-l {
-    font-size: var(--wa-font-size-l);
-  }
-}
-`;var a=`@layer wa-utilities {
-  /** Register color properties so that the space toggle hack can work. */
-  @property --wa-color-fill-loud {
-    syntax: '<color>';
-    inherits: true;
-    initial-value: transparent;
-  }
-
-  @property --wa-color-fill-normal {
-    syntax: '<color>';
-    inherits: true;
-    initial-value: transparent;
-  }
-
-  @property --wa-color-fill-quiet {
-    syntax: '<color>';
-    inherits: true;
-    initial-value: transparent;
-  }
-
-  @property --wa-color-border-loud {
-    syntax: '<color>';
-    inherits: true;
-    initial-value: transparent;
-  }
-
-  @property --wa-color-border-normal {
-    syntax: '<color>';
-    inherits: true;
-    initial-value: transparent;
-  }
-
-  @property --wa-color-border-quiet {
-    syntax: '<color>';
-    inherits: true;
-    initial-value: transparent;
-  }
-
-  @property --wa-color-on-loud {
-    syntax: '<color>';
-    inherits: true;
-    initial-value: transparent;
-  }
-
-  @property --wa-color-on-normal {
-    syntax: '<color>';
-    inherits: true;
-    initial-value: transparent;
-  }
-
-  @property --wa-color-on-quiet {
-    syntax: '<color>';
-    inherits: true;
-    initial-value: transparent;
-  }
-
-  /**
- * Element defaults.
-   We want these to resolve to inherit when inside a variant, and only be applied when not inside an explicit variant.
- */
-
-  :host(wa-button),
-  button,
-  input[type='button'],
-  input[type='submit'],
-  :host(wa-tag) {
-    --wa-color-fill-loud: var(--wa-no-variant, var(--wa-color-neutral-fill-loud));
-    --wa-color-fill-normal: var(--wa-no-variant, var(--wa-color-neutral-fill-normal));
-    --wa-color-fill-quiet: var(--wa-no-variant, var(--wa-color-neutral-fill-quiet));
-    --wa-color-border-loud: var(--wa-no-variant, var(--wa-color-neutral-border-loud));
-    --wa-color-border-normal: var(--wa-no-variant, var(--wa-color-neutral-border-normal));
-    --wa-color-border-quiet: var(--wa-no-variant, var(--wa-color-neutral-border-quiet));
-    --wa-color-on-loud: var(--wa-no-variant, var(--wa-color-neutral-on-loud));
-    --wa-color-on-normal: var(--wa-no-variant, var(--wa-color-neutral-on-normal));
-    --wa-color-on-quiet: var(--wa-no-variant, var(--wa-color-neutral-on-quiet));
-  }
-
-  :host(wa-callout),
-  :host(wa-badge) {
-    --wa-color-fill-loud: var(--wa-no-variant, var(--wa-color-brand-fill-loud));
-    --wa-color-fill-normal: var(--wa-no-variant, var(--wa-color-brand-fill-normal));
-    --wa-color-fill-quiet: var(--wa-no-variant, var(--wa-color-brand-fill-quiet));
-    --wa-color-border-loud: var(--wa-no-variant, var(--wa-color-brand-border-loud));
-    --wa-color-border-normal: var(--wa-no-variant, var(--wa-color-brand-border-normal));
-    --wa-color-border-quiet: var(--wa-no-variant, var(--wa-color-brand-border-quiet));
-    --wa-color-on-loud: var(--wa-no-variant, var(--wa-color-brand-on-loud));
-    --wa-color-on-normal: var(--wa-no-variant, var(--wa-color-brand-on-normal));
-    --wa-color-on-quiet: var(--wa-no-variant, var(--wa-color-brand-on-quiet));
-  }
-
-  /**
- * Variants
- */
-
-  :root,
-  .wa-neutral,
-  :host([variant='neutral']) {
-    --wa-color-fill-loud: var(--wa-color-neutral-fill-loud);
-    --wa-color-fill-normal: var(--wa-color-neutral-fill-normal);
-    --wa-color-fill-quiet: var(--wa-color-neutral-fill-quiet);
-    --wa-color-border-loud: var(--wa-color-neutral-border-loud);
-    --wa-color-border-normal: var(--wa-color-neutral-border-normal);
-    --wa-color-border-quiet: var(--wa-color-neutral-border-quiet);
-    --wa-color-on-loud: var(--wa-color-neutral-on-loud);
-    --wa-color-on-normal: var(--wa-color-neutral-on-normal);
-    --wa-color-on-quiet: var(--wa-color-neutral-on-quiet);
-  }
-
-  .wa-brand,
-  :host([variant='brand']) {
-    --wa-color-fill-loud: var(--wa-color-brand-fill-loud);
-    --wa-color-fill-normal: var(--wa-color-brand-fill-normal);
-    --wa-color-fill-quiet: var(--wa-color-brand-fill-quiet);
-    --wa-color-border-loud: var(--wa-color-brand-border-loud);
-    --wa-color-border-normal: var(--wa-color-brand-border-normal);
-    --wa-color-border-quiet: var(--wa-color-brand-border-quiet);
-    --wa-color-on-loud: var(--wa-color-brand-on-loud);
-    --wa-color-on-normal: var(--wa-color-brand-on-normal);
-    --wa-color-on-quiet: var(--wa-color-brand-on-quiet);
-  }
-
-  .wa-success,
-  :host([variant='success']) {
-    --wa-color-fill-loud: var(--wa-color-success-fill-loud);
-    --wa-color-fill-normal: var(--wa-color-success-fill-normal);
-    --wa-color-fill-quiet: var(--wa-color-success-fill-quiet);
-    --wa-color-border-loud: var(--wa-color-success-border-loud);
-    --wa-color-border-normal: var(--wa-color-success-border-normal);
-    --wa-color-border-quiet: var(--wa-color-success-border-quiet);
-    --wa-color-on-loud: var(--wa-color-success-on-loud);
-    --wa-color-on-normal: var(--wa-color-success-on-normal);
-    --wa-color-on-quiet: var(--wa-color-success-on-quiet);
-  }
-
-  .wa-warning,
-  :host([variant='warning']) {
-    --wa-color-fill-loud: var(--wa-color-warning-fill-loud);
-    --wa-color-fill-normal: var(--wa-color-warning-fill-normal);
-    --wa-color-fill-quiet: var(--wa-color-warning-fill-quiet);
-    --wa-color-border-loud: var(--wa-color-warning-border-loud);
-    --wa-color-border-normal: var(--wa-color-warning-border-normal);
-    --wa-color-border-quiet: var(--wa-color-warning-border-quiet);
-    --wa-color-on-loud: var(--wa-color-warning-on-loud);
-    --wa-color-on-normal: var(--wa-color-warning-on-normal);
-    --wa-color-on-quiet: var(--wa-color-warning-on-quiet);
-  }
-
-  .wa-danger,
-  :host([variant='danger']) {
-    --wa-color-fill-loud: var(--wa-color-danger-fill-loud);
-    --wa-color-fill-normal: var(--wa-color-danger-fill-normal);
-    --wa-color-fill-quiet: var(--wa-color-danger-fill-quiet);
-    --wa-color-border-loud: var(--wa-color-danger-border-loud);
-    --wa-color-border-normal: var(--wa-color-danger-border-normal);
-    --wa-color-border-quiet: var(--wa-color-danger-border-quiet);
-    --wa-color-on-loud: var(--wa-color-danger-on-loud);
-    --wa-color-on-normal: var(--wa-color-danger-on-normal);
-    --wa-color-on-quiet: var(--wa-color-danger-on-quiet);
-  }
-
-  .wa-neutral,
-  .wa-brand,
-  .wa-success,
-  .wa-warning,
-  .wa-danger,
-  :host([variant]) {
-    --wa-no-variant: /* space toggle */;
-  }
-}
-`;export{o as a,a as b};

package/dist/chunks/dialog.7CZCE2KM.js

@@ -1,217 +0,0 @@
-import{a as h,b as p}from"./chunk.7VBX4GII.js";import{a as f,b as v,c as b}from"./chunk.KPZVTN5G.js";import"./chunk.TFICHQZE.js";import{a as g}from"./chunk.OHRBDQCO.js";import{a as i,b as w}from"./chunk.FIQQYKEP.js";import{a as u,b as r,d as m}from"./chunk.6ZDEZIWM.js";import{e as d}from"./chunk.U4P7XQR4.js";import"./chunk.NI7UJOOZ.js";function y(e){return e.split(" ").map(t=>t.trim()).filter(t=>t!=="")}var x=class extends Event{constructor(){super("wa-after-hide",{bubbles:!0,cancelable:!1,composed:!0})}},k=class extends Event{constructor(){super("wa-after-show",{bubbles:!0,cancelable:!1,composed:!0})}},E=class extends Event{constructor(e){super("wa-hide",{bubbles:!0,cancelable:!0,composed:!0}),this.detail=e}},C=class extends Event{constructor(){super("wa-show",{bubbles:!0,cancelable:!0,composed:!0})}};function l(e,t){return new Promise(n=>{let a=new AbortController,{signal:c}=a;if(e.classList.contains(t))return;e.classList.remove(t),e.classList.add(t);let s=()=>{e.classList.remove(t),n(),a.abort()};e.addEventListener("animationend",s,{once:!0,signal:c}),e.addEventListener("animationcancel",s,{once:!0,signal:c})})}var S=`:host {
-  --width: 31rem;
-  --spacing: var(--wa-space-l);
-  --show-duration: 200ms;
-  --hide-duration: 200ms;
-
-  display: none;
-}
-
-:host([open]) {
-  display: block;
-}
-
-.dialog {
-  display: flex;
-  flex-direction: column;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: var(--width);
-  max-width: calc(100% - var(--wa-space-2xl));
-  max-height: calc(100% - var(--wa-space-2xl));
-  background-color: var(--wa-color-surface-raised);
-  border-radius: var(--wa-panel-border-radius);
-  border: none;
-  box-shadow: var(--wa-shadow-l);
-  padding: 0;
-  margin: auto;
-
-  &.show {
-    animation: show-dialog var(--show-duration) ease;
-
-    &::backdrop {
-      animation: show-backdrop var(--show-duration, 200ms) ease;
-    }
-  }
-
-  &.hide {
-    animation: show-dialog var(--hide-duration) ease reverse;
-
-    &::backdrop {
-      animation: show-backdrop var(--hide-duration, 200ms) ease reverse;
-    }
-  }
-
-  &.pulse {
-    animation: pulse 250ms ease;
-  }
-}
-
-.dialog:focus {
-  outline: none;
-}
-
-/* Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone) */
-@media screen and (max-width: 420px) {
-  .dialog {
-    max-height: 80vh;
-  }
-}
-
-.open {
-  display: flex;
-  opacity: 1;
-}
-
-.header {
-  flex: 0 0 auto;
-  display: flex;
-  flex-wrap: nowrap;
-
-  padding-inline-start: var(--spacing);
-  padding-block-end: 0;
-
-  /* Subtract the close button's padding so that the X is visually aligned with the edges of the dialog content */
-  padding-inline-end: calc(var(--spacing) - var(--wa-form-control-padding-block));
-  padding-block-start: calc(var(--spacing) - var(--wa-form-control-padding-block));
-}
-
-.title {
-  align-self: center;
-  flex: 1 1 auto;
-  font-family: inherit;
-  font-size: var(--wa-font-size-l);
-  font-weight: var(--wa-font-weight-heading);
-  line-height: var(--wa-line-height-condensed);
-  margin: 0;
-}
-
-.header-actions {
-  align-self: start;
-  display: flex;
-  flex-shrink: 0;
-  flex-wrap: wrap;
-  justify-content: end;
-  gap: var(--wa-space-2xs);
-  padding-inline-start: var(--spacing);
-}
-
-.header-actions wa-button,
-.header-actions ::slotted(wa-button) {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-}
-
-.body {
-  flex: 1 1 auto;
-  display: block;
-  padding: var(--spacing);
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-}
-
-.footer {
-  flex: 0 0 auto;
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--wa-space-xs);
-  justify-content: end;
-  padding: var(--spacing);
-  padding-block-start: 0;
-}
-
-.footer ::slotted(wa-button:not(:first-of-type)) {
-  margin-inline-start: var(--wa-spacing-xs);
-}
-
-.dialog::backdrop {
-  /*
-    NOTE: the ::backdrop element doesn't inherit properly in Safari yet, but it will in 17.4! At that time, we can
-    remove the fallback values here.
-  */
-  background-color: var(--wa-color-overlay-modal, rgb(0 0 0 / 0.25));
-}
-
-@keyframes pulse {
-  0% {
-    scale: 1;
-  }
-  50% {
-    scale: 1.02;
-  }
-  100% {
-    scale: 1;
-  }
-}
-
-@keyframes show-dialog {
-  from {
-    opacity: 0;
-    scale: 0.8;
-  }
-  to {
-    opacity: 1;
-    scale: 1;
-  }
-}
-
-@keyframes show-backdrop {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@media (forced-colors: active) {
-  .dialog {
-    border: solid 1px white;
-  }
-}
-`,o=class extends w{constructor(){super(...arguments),this.localize=new f(this),this.hasSlotController=new b(this,"footer","header-actions","label"),this.open=!1,this.label="",this.withoutHeader=!1,this.lightDismiss=!1,this.handleDocumentKeyDown=e=>{e.key==="Escape"&&this.open&&(e.preventDefault(),e.stopPropagation(),this.requestClose(this.dialog))}}firstUpdated(){this.open&&(this.addOpenListeners(),this.dialog.showModal(),h(this))}disconnectedCallback(){super.disconnectedCallback(),p(this),this.removeOpenListeners()}async requestClose(e){let t=new E({source:e});if(this.dispatchEvent(t),t.defaultPrevented){this.open=!0,l(this.dialog,"pulse");return}this.removeOpenListeners(),await l(this.dialog,"hide"),this.open=!1,this.dialog.close(),p(this);let n=this.originalTrigger;typeof(n==null?void 0:n.focus)=="function"&&setTimeout(()=>n.focus()),this.dispatchEvent(new x)}addOpenListeners(){document.addEventListener("keydown",this.handleDocumentKeyDown)}removeOpenListeners(){document.removeEventListener("keydown",this.handleDocumentKeyDown)}handleDialogCancel(e){e.preventDefault(),this.dialog.classList.contains("hide")||this.requestClose(this.dialog)}handleDialogClick(e){let n=e.target.closest('[data-dialog="close"]');n&&(e.stopPropagation(),this.requestClose(n))}async handleDialogPointerDown(e){e.target===this.dialog&&(this.lightDismiss?this.requestClose(this.dialog):await l(this.dialog,"pulse"))}handleOpenChange(){this.open&&!this.dialog.open?this.show():!this.open&&this.dialog.open&&(this.open=!0,this.requestClose(this.dialog))}async show(){let e=new C;if(this.dispatchEvent(e),e.defaultPrevented){this.open=!1;return}this.addOpenListeners(),this.originalTrigger=document.activeElement,this.open=!0,this.dialog.showModal(),h(this),requestAnimationFrame(()=>{let t=this.querySelector("[autofocus]");t&&typeof t.focus=="function"&&t.focus()}),await l(this.dialog,"show"),this.dispatchEvent(new k)}render(){let e=!this.withoutHeader&&(this.label.length>0||this.hasSlotController.test("label")||this.hasSlotController.test("header-actions")),t=this.hasSlotController.test("footer");return d`
-      <dialog
-        part="dialog"
-        class=${v({dialog:!0,open:this.open})}
-        @cancel=${this.handleDialogCancel}
-        @click=${this.handleDialogClick}
-        @pointerdown=${this.handleDialogPointerDown}
-      >
-        ${e?d`
-              <header part="header" class="header">
-                <h2 part="title" class="title" id="title">
-                  <!-- If there's no label, use an invisible character to prevent the header from collapsing -->
-                  <slot name="label"> ${this.label.length>0?this.label:"\uFEFF"} </slot>
-                </h2>
-                <div part="header-actions" class="header-actions">
-                  <slot name="header-actions"></slot>
-                  <wa-button
-                    part="close-button"
-                    exportparts="base:close-button__base"
-                    class="close"
-                    appearance="plain"
-                    @click="${n=>this.requestClose(n.target)}"
-                  >
-                    <wa-icon
-                      name="xmark"
-                      label=${this.localize.term("close")}
-                      library="system"
-                      variant="solid"
-                    ></wa-icon>
-                  </wa-button>
-                </div>
-              </header>
-            `:""}
-
-        <div part="body" class="body"><slot></slot></div>
-
-        ${t?d`
-              <footer part="footer" class="footer">
-                <slot name="footer"></slot>
-              </footer>
-            `:""}
-      </dialog>
-    `}};o.css=S;i([m(".dialog")],o.prototype,"dialog",2);i([r({type:Boolean,reflect:!0})],o.prototype,"open",2);i([r({reflect:!0})],o.prototype,"label",2);i([r({attribute:"without-header",type:Boolean,reflect:!0})],o.prototype,"withoutHeader",2);i([r({attribute:"light-dismiss",type:Boolean})],o.prototype,"lightDismiss",2);i([g("open",{waitUntilFirstUpdate:!0})],o.prototype,"handleOpenChange",1);o=i([u("wa-dialog")],o);document.addEventListener("click",e=>{let t=e.target.closest("[data-dialog]");if(t instanceof Element){let[n,a]=y(t.getAttribute("data-dialog")||"");if(n==="open"&&(a!=null&&a.length)){let s=t.getRootNode().getElementById(a);(s==null?void 0:s.localName)==="wa-dialog"?s.open=!0:console.warn(`A dialog with an ID of "${a}" could not be found in this document.`)}}});!1||document.addEventListener("pointerdown",()=>{});export{o as default};

package/dist/chunks/icon.ZB6BUFKB.js

@@ -1 +0,0 @@
-import{b as o}from"./chunk.OHRBDQCO.js";import"./chunk.FIQQYKEP.js";import"./chunk.6ZDEZIWM.js";import"./chunk.U4P7XQR4.js";import"./chunk.NI7UJOOZ.js";export{o as default};